/* Navigatu staff — hand-written, no framework, no inline styles (CSP style-src 'self').
   Brand tokens from the logo kit: indigo #3A3FD8, sky #6EC1FF, ink #14172B, light sky #BFE4FF.
   Sizes are rem so the browser's text-size setting scales everything (large text).
   Dark follows the OS unless the theme button sets data-theme on <html>.
   Usable at phone width: the side nav becomes a strip and tables scroll. */
:root {
  --bg: #f5f7fc; --surface: #ffffff; --ink: #14172B; --muted: #5b627a; --line: #dfe3f0;
  --accent: #3A3FD8; --accent-ink: #ffffff; --sky: #6EC1FF; --wash: #BFE4FF;
  --danger: #b3261e; --danger-ink: #ffffff;
  --ok-bg: #e4f5ea; --ok-ink: #0f4d27; --warn-bg: #fff2d0; --warn-ink: #5c4200;
  --info-bg: #e3edff; --info-ink: #1a3a85; --err-bg: #fde8e6; --err-ink: #7d1912;
  --radius: 0.7rem; --touch: 2.75rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0f1d; --surface: #151a2e; --ink: #eceffa; --muted: #a2a9c2; --line: #283050;
    --accent: #8D91FF; --accent-ink: #0c0f1d; --danger: #ff8a80; --danger-ink: #2a0806;
    --ok-bg: #12301f; --ok-ink: #a6e9bd; --warn-bg: #3a2e0a; --warn-ink: #ffd98a;
    --info-bg: #16264a; --info-ink: #b4cdff; --err-bg: #3a1614; --err-ink: #ffb4ad;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0f1d; --surface: #151a2e; --ink: #eceffa; --muted: #a2a9c2; --line: #283050;
  --accent: #8D91FF; --accent-ink: #0c0f1d; --danger: #ff8a80; --danger-ink: #2a0806;
  --ok-bg: #12301f; --ok-ink: #a6e9bd; --warn-bg: #3a2e0a; --warn-ink: #ffd98a;
  --info-bg: #16264a; --info-ink: #b4cdff; --err-bg: #3a1614; --err-ink: #ffb4ad;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--font); }
#app { min-height: 100vh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.4rem; margin: 0.25rem 0 1rem; } h3 { font-size: 1.1rem; margin-bottom: 0.6rem; } h4 { font-size: 1rem; margin: 0.6rem 0 0.4rem; }
a { color: var(--accent); }
.muted { color: var(--muted); } .small { font-size: 0.875rem; } .mono { font-family: var(--mono); }
.prewrap { white-space: pre-wrap; } .wrap { overflow-wrap: anywhere; }
.warnText { color: var(--warn-ink); background: var(--warn-bg); padding: 0.25rem 0.5rem; border-radius: 0.4rem; }
.label { font-size: 0.875rem; color: var(--muted); font-weight: 600; }
.offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -9999px; background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.stack > * + * { margin-top: 0.8rem; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0; }
.row.end { justify-content: flex-end; } .row.spread { justify-content: space-between; margin: 0 0 0.4rem; }
.light-only { display: inline-block; } .dark-only { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .light-only { display: none; } :root:not([data-theme="light"]) .dark-only { display: inline-block; } }
:root[data-theme="dark"] .light-only { display: none; } :root[data-theme="dark"] .dark-only { display: inline-block; }

/* controls */
.btn { min-height: var(--touch); padding: 0 1rem; border-radius: 0.55rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn:hover { border-color: var(--muted); } .btn:disabled { opacity: 0.55; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn.danger.ghost { background: transparent; color: var(--danger); }
.btn.ghost { background: transparent; } .btn.small { min-height: 2.2rem; padding: 0 0.75rem; font-size: 0.9rem; } .btn.wide { width: 100%; }
.btn[aria-pressed="true"] { background: var(--wash); border-color: var(--accent); color: #14172B; }
.field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.field > span:first-child { font-size: 0.875rem; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.6rem 0.75rem; min-height: var(--touch); width: 100%; }
input[type="file"] { padding: 0.5rem; }
select.lang { width: auto; min-height: 2.2rem; padding: 0.2rem 0.5rem; }
input.code { font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.25em; max-width: 12rem; }
textarea { resize: vertical; min-height: 5.5rem; }
textarea.body-md { min-height: 22rem; line-height: 1.45; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, pre:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; align-items: end; margin-bottom: 0.8rem; }
.row.search .field:first-child { flex: 1 1 18rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; }

/* messages */
.error { color: var(--err-ink); background: var(--err-bg); padding: 0.6rem 0.8rem; border-radius: 0.55rem; margin: 0.5rem 0; }
.notice { padding: 0.7rem 0.9rem; border-radius: var(--radius); margin: 0 0 0.9rem; }
.notice.ok { background: var(--ok-bg); color: var(--ok-ink); } .notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.info { background: var(--info-bg); color: var(--info-ink); } .notice.error { background: var(--err-bg); color: var(--err-ink); }
.badge { display: inline-block; font-size: 0.78rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); white-space: nowrap; vertical-align: middle; }
.badge.soft { background: var(--line); color: var(--ink); } .badge.ok { background: var(--ok-bg); color: var(--ok-ink); } .badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.info { background: var(--info-bg); color: var(--info-ink); } .badge.err { background: var(--err-bg); color: var(--err-ink); }

/* sign-in */
main.center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.card.auth { width: 100%; max-width: 26rem; padding: 1.6rem; }
.authbrand { text-align: center; } .authbrand h1 { margin-top: 0.4rem; }

/* shell */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.brand-sub { font-weight: 500; }
.mark { height: 2rem; width: auto; }
.mark.big { height: 4rem; }
.who { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.who .name { font-weight: 600; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body { flex: 1; display: flex; min-height: 0; }
nav.side { width: 14rem; flex: none; padding: 0.8rem 0.5rem; border-right: 1px solid var(--line); background: var(--surface); }
.navtitle { margin: 0.6rem 0.75rem 0.3rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
nav.side a { display: block; padding: 0.55rem 0.75rem; border-radius: 0.5rem; color: var(--ink); text-decoration: none; }
nav.side a:hover { background: var(--bg); } nav.side a.on { background: var(--accent); color: var(--accent-ink); }
.content { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 4rem; max-width: 72rem; }
.content:focus { outline: none; }
.crumbs { margin: 0 0 0.4rem; color: var(--muted); overflow-wrap: anywhere; font-size: 0.9rem; }
@media (max-width: 760px) {
  .body { flex-direction: column; }
  nav.side { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0.3rem; gap: 0.2rem; }
  .navgroup { display: flex; align-items: center; gap: 0.2rem; } .navtitle { display: none; } nav.side a { white-space: nowrap; }
  .content { padding: 1rem 1rem 4rem; }
}

/* lists and tables */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.list th, table.list td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
td.actions { text-align: right; white-space: nowrap; }
table.list td, table.list th { min-width: 5.5rem; } table.list td.wrap { min-width: 9rem; } table.list td.prewrap { min-width: 11rem; }
ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } ul.plain li:last-child { border-bottom: 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 0.6rem; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { dl.facts { grid-template-columns: 1fr; } dl.facts dt { margin-top: 0.4rem; } }
.content section.card { margin-bottom: 0.9rem; }
.hit { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.4rem; color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.hit:hover { border-color: var(--accent); } .hit-main { flex: 1; min-width: 10rem; overflow-wrap: anywhere; }
ul.hits { list-style: none; padding: 0; margin: 0; }
.audit-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; }
.audit-row.s-refused { border-left: 4px solid var(--danger); } .audit-row.s-pending_approval { border-left: 4px solid var(--sky); }
.chips { list-style: none; padding: 0; margin: 0; } .chips.inline { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.85rem; text-decoration: none; color: var(--ink); }
.chip.self { border-color: var(--accent); }
.nets li { border-bottom: 0; padding: 0.1rem 0; }
.domain-block + .domain-block { margin-top: 1rem; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(12, 15, 29, 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; overflow-y: auto; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; width: 100%; max-width: 32rem; max-height: 100%; overflow-y: auto; }

/* customer-shared mail — the sensitive screen */
.grant-banner { position: sticky; top: 0; z-index: 5; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.grant-banner .row { margin: 0 0 0.3rem; }
.split { display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr; gap: 0.8rem; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.listpane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-height: 70vh; overflow-y: auto; }
ul.msglist li { padding: 0; }
button.msg { display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 0.65rem 0.8rem; cursor: pointer; min-height: var(--touch); }
button.msg:hover { background: var(--bg); } button.msg[aria-current="true"] { background: var(--wash); color: #14172B; }
button.msg[aria-current="true"] .muted { color: #3b4258; }
.msg-from { font-weight: 600; } .msg-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; min-height: 14rem; }
pre.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.95rem/1.5 var(--font); margin: 0.5rem 0; background: var(--bg); padding: 0.8rem; border-radius: 0.5rem; }
iframe.mail-frame { width: 100%; min-height: 24rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #fff; }
.ended { max-width: 36rem; margin: 3rem auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; }
.ended h2 { margin-bottom: 0.6rem; }
@media print { .grant-view { display: none !important; } }

/* marketing */
.assetpicker, .assetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.6rem; margin: 0.4rem 0; }
.assetgrid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
button.asset { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.4rem; border: 2px solid var(--line); border-radius: 0.6rem; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
button.asset.on { border-color: var(--accent); background: var(--wash); color: #14172B; }
img.thumb { width: 100%; height: 6rem; object-fit: cover; border-radius: 0.4rem; background: var(--line); display: block; }
img.thumb.big { height: 9rem; }
figure.assetcard { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; }
.net { margin-bottom: 0.9rem; } .net.absent { background: transparent; border-style: dashed; }
.posterbox { margin: 0.6rem 0; }
canvas.poster { max-width: 100%; max-height: 28rem; height: auto; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); }
.preview { border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.8rem 1rem; background: var(--surface); min-height: 10rem; }
.md h1, .md h2, .md h3 { margin: 0.8rem 0 0.4rem; } .md p, .md ul, .md ol, .md blockquote { margin: 0.5rem 0; } .md blockquote { border-left: 4px solid var(--sky); padding-left: 0.8rem; color: var(--muted); }
.md pre { background: var(--bg); padding: 0.6rem; overflow-x: auto; border-radius: 0.4rem; } .md code { font-family: var(--mono); }
.md-img, .md-badlink { color: var(--muted); font-style: italic; }
.due-row { display: flex; gap: 0.5rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.due-row > div:first-child { flex: 1 1 18rem; }
.more { margin: 0.6rem 0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* invitation (s14 wave 4b) */
.secret { font-size: 1.25rem; letter-spacing: 0.08em; line-height: 1.6; padding: 0.7rem 0.9rem; background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius); overflow-wrap: anywhere; user-select: all; margin: 0; }
.card.auth h2 { margin: 0; font-size: 1.15rem; }