/* Marine Backlog — shared tokens and components. */
:root {
  color-scheme: light;
  --ground:#e7e5e0;
  --panel:#f6f5f2;
  --panel-2:#edebe6;
  --ink:#15181c;
  --ink-2:#4f555c;
  --muted:#7b818a;
  --rule:#d3d0c9;
  --rule-2:#c0bcb3;
  --brass:#8a6220;
  --brass-soft:#a87f38;
  --good:#0ca30c;
  --focus:#2a78d6;

  --st0:#86b6ef; --sti0:#0c1f33;
  --st1:#6da7ec; --sti1:#0c1f33;
  --st2:#5598e7; --sti2:#0c1f33;
  --st3:#3987e5; --sti3:#0c1f33;
  --st4:#2a78d6; --sti4:#ffffff;
  --st5:#256abf; --sti5:#ffffff;
  --st6:#1c5cab; --sti6:#ffffff;
  --st7:#184f95; --sti7:#ffffff;

  --shadow:0 1px 2px rgba(20,24,28,.07), 0 8px 24px -16px rgba(20,24,28,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#121518;
    --panel:#191d21;
    --panel-2:#1f242a;
    --ink:#e7eaed;
    --ink-2:#a8b0b8;
    --muted:#7d858e;
    --rule:#2a3036;
    --rule-2:#3a424b;
    --brass:#c79a4b;
    --brass-soft:#a37f3c;
    --good:#0ca30c;
    --focus:#6da7ec;

    --st0:#184f95; --sti0:#dce9f8;
    --st1:#1c5cab; --sti1:#dce9f8;
    --st2:#256abf; --sti2:#ffffff;
    --st3:#2a78d6; --sti3:#ffffff;
    --st4:#3987e5; --sti4:#08192b;
    --st5:#5598e7; --sti5:#08192b;
    --st6:#6da7ec; --sti6:#08192b;
    --st7:#86b6ef; --sti7:#08192b;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#121518;
  --panel:#191d21;
  --panel-2:#1f242a;
  --ink:#e7eaed;
  --ink-2:#a8b0b8;
  --muted:#7d858e;
  --rule:#2a3036;
  --rule-2:#3a424b;
  --brass:#c79a4b;
  --brass-soft:#a37f3c;
  --good:#0ca30c;
  --focus:#6da7ec;

  --st0:#184f95; --sti0:#dce9f8;
  --st1:#1c5cab; --sti1:#dce9f8;
  --st2:#256abf; --sti2:#ffffff;
  --st3:#2a78d6; --sti3:#ffffff;
  --st4:#3987e5; --sti4:#08192b;
  --st5:#5598e7; --sti5:#08192b;
  --st6:#6da7ec; --sti6:#08192b;
  --st7:#86b6ef; --sti7:#08192b;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
h1,h2,h3 { margin:0; font-family:"Oswald", "IBM Plex Sans", sans-serif; font-weight:500; letter-spacing:.01em; text-wrap:balance; }
p { margin:0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:3px; }
.num { font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.wrap { max-width:1180px; margin:0 auto; padding-inline:18px; padding-block:26px 96px; }

/* ---------- masthead ---------- */
.masthead { border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:22px; }
.eyebrow {
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); margin-bottom:6px;
}
.masthead-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 22px; justify-content:space-between; }
h1 { font-size:clamp(30px,6vw,46px); line-height:1; text-transform:uppercase; letter-spacing:.02em; }
.masthead p.sub { color:var(--ink-2); font-size:14px; max-width:46ch; margin-top:8px; }
.theme-toggle {
  background:none; border:1px solid var(--rule-2); color:var(--ink-2); cursor:pointer;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:2px;
  font-family:"IBM Plex Mono", monospace;
}
.theme-toggle:hover { border-color:var(--ink-2); color:var(--ink); }

/* ---------- summary ---------- */
.summary { display:grid; grid-template-columns: minmax(0,1fr); gap:20px; margin-bottom:24px; }
@media (min-width:760px) { .summary { grid-template-columns: 280px minmax(0,1fr); gap:28px; align-items:start; } }

.tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.tile { background:var(--panel); padding:12px 14px; }
.tile dt { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono", monospace; }
.tile dd { margin:2px 0 0; font-family:"Oswald",sans-serif; font-size:30px; line-height:1.05; font-variant-numeric:tabular-nums; }
.tile.is-done dd { color:var(--good); }

.chart { min-width:0; }
.chart-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.chart-title { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono",monospace; }
.chart-value { font-family:"Oswald",sans-serif; font-size:16px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.bar { display:flex; gap:2px; height:34px; width:100%; }
.bar-seg {
  min-width:3px; border-radius:2px; display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; overflow:hidden;
  transition: flex-grow .35s ease;
}
.legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:11px; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
.legend-item.is-zero { opacity:.42; }
.swatch { width:11px; height:11px; border-radius:2px; flex:none; }
.legend-item .n { font-family:"IBM Plex Mono",monospace; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- toolbar ---------- */
.toolbar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding-block:12px; border-block:1px solid var(--rule); margin-bottom:20px;
}
.field { display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--rule-2); border-radius:3px; padding:0 9px; height:34px; }
.field:focus-within { border-color:var(--focus); }
.field input, .field select { border:none; background:none; outline:none; height:32px; min-width:0; }
.field input { width:184px; }
.field label { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono",monospace; }
.btn {
  height:34px; padding:0 13px; border:1px solid var(--rule-2); background:var(--panel); border-radius:3px;
  cursor:pointer; font-size:13px; white-space:nowrap;
}
.btn:hover:not(:disabled) { border-color:var(--ink-2); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--ink); color:var(--ground); border-color:var(--ink); }
.btn-primary:hover:not(:disabled) { background:var(--ink-2); border-color:var(--ink-2); }
.save-state { margin-left:auto; font-size:11.5px; font-family:"IBM Plex Mono",monospace; color:var(--muted); letter-spacing:.06em; }

/* ---------- layout ---------- */
.cols { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; }
@media (min-width:980px) { .cols { grid-template-columns:minmax(0,1fr) 348px; gap:30px; } }

/* ---------- roster ---------- */
.group { margin-bottom:26px; }
.group-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.group-head h2 { font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.group-head .rule { flex:1; height:1px; background:var(--rule-2); }
.group-head .n { font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); }

.units { display:grid; gap:10px; }
.unit { background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--rule-2); padding:12px 14px; }
.unit.has-sel { border-left-color:var(--brass); }
.unit-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.unit-top h3 { font-size:18px; letter-spacing:.01em; }
.unit-top .count { font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--brass); }
.tag {
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--rule-2); border-radius:2px; padding:1px 6px;
}
.unit-meter { margin-left:auto; display:flex; align-items:center; gap:8px; }
.meter { width:78px; height:4px; background:var(--panel-2); border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.meter i { display:block; height:100%; background:var(--st5); transition:width .3s ease; }
.unit-meter .pct { font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }

.chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.chip {
  width:30px; height:30px; border-radius:3px; border:1px solid transparent; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; padding:0;
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:transform .12s ease;
}
.chip:hover { transform:translateY(-2px); }
.chip.is-sel { box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--brass); }
.chip.has-note::after {
  content:""; position:absolute; top:3px; right:3px; width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.85;
}
.chip[data-s="0"]{ background:var(--st0); color:var(--sti0); }
.chip[data-s="1"]{ background:var(--st1); color:var(--sti1); }
.chip[data-s="2"]{ background:var(--st2); color:var(--sti2); }
.chip[data-s="3"]{ background:var(--st3); color:var(--sti3); }
.chip[data-s="4"]{ background:var(--st4); color:var(--sti4); }
.chip[data-s="5"]{ background:var(--st5); color:var(--sti5); }
.chip[data-s="6"]{ background:var(--st6); color:var(--sti6); }
.chip[data-s="7"]{ background:var(--st7); color:var(--sti7); }

.unit-note-flag { margin-top:9px; font-size:12.5px; color:var(--ink-2); display:flex; gap:7px; }
.unit-note-flag b { color:var(--brass); font-weight:500; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding-top:3px; flex:none; }
.empty { color:var(--muted); font-size:14px; padding:22px 2px; }

/* ---------- inspector ---------- */
.inspector { background:var(--panel); border:1px solid var(--rule); }
@media (min-width:980px) { .inspector { position:sticky; top:calc(env(safe-area-inset-top, 0px) + 16px); max-height:calc(100vh - 48px); overflow:auto; } }
@media (max-width:979px) {
  .inspector {
    position:fixed; left:0; right:0; bottom:0; z-index:30; max-height:78vh; overflow:auto;
    border:none; border-top:2px solid var(--brass); box-shadow:var(--shadow);
    transform:translateY(101%); transition:transform .24s ease; padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .inspector.open { transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .inspector, .chip, .meter i, .bar-seg { transition:none; }
}
.insp-pad { padding:14px 15px 18px; }
.insp-head { display:flex; align-items:flex-start; gap:10px; }
.insp-head .eyebrow { margin-bottom:3px; }
.insp-close { display:none; }
@media (max-width:979px) { .insp-close { display:block; background:none; border:1px solid var(--rule-2); border-radius:3px; width:28px; height:28px; cursor:pointer; flex:none; line-height:1; } }

.name-input {
  width:100%; background:var(--panel-2); border:1px solid var(--rule-2); border-radius:3px;
  padding:7px 9px; font-family:"Oswald",sans-serif; font-size:19px; margin-top:4px;
}
.name-input:focus { outline:none; border-color:var(--focus); }

.advance { width:100%; margin-top:10px; height:38px; display:flex; align-items:center; justify-content:center; gap:8px; }

.steps { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.step {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:var(--panel);
  border:none; padding:7px 10px; cursor:pointer; font-size:13.5px;
}
.step:hover { background:var(--panel-2); }
.step .dot { width:12px; height:12px; border-radius:2px; border:1px solid var(--rule-2); flex:none; }
.step .idx { font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted); margin-left:auto; letter-spacing:.06em; }
.step.is-reached { color:var(--ink); }
.step:not(.is-reached) { color:var(--muted); }
.step.is-current { background:var(--panel-2); font-weight:600; box-shadow:inset 3px 0 0 var(--brass); }

.insp-label { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono",monospace; margin:16px 0 5px; display:block; }
textarea {
  width:100%; background:var(--panel-2); border:1px solid var(--rule-2); border-radius:3px;
  padding:8px 9px; font-size:13.5px; line-height:1.5; resize:vertical; min-height:84px;
}
textarea:focus { outline:none; border-color:var(--focus); }
.insp-divider { height:1px; background:var(--rule); margin:18px 0 0; }
.brief { margin-top:14px; display:grid; gap:9px; }
.brief-row { display:grid; grid-template-columns:62px minmax(0,1fr); gap:9px; font-size:13px; line-height:1.45; }
.brief-row dt { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); padding-top:3px; }
.brief-row dd { margin:0; color:var(--ink-2); }
.squad-actions { margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; }
.squad-actions .btn { height:30px; font-size:12px; padding:0 10px; }
.hint { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.45; }

/* ---------- page nav ---------- */
.nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-link {
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; border:1px solid transparent; border-radius:2px; padding:6px 10px;
}
.nav-link:hover { color:var(--ink); border-color:var(--rule-2); }
.nav-link.is-current { color:var(--ink); border-color:var(--ink); }

/* ---------- sign-in gate ---------- */
.auth-gate {
  border:1px solid var(--rule); border-left:3px solid var(--brass); background:var(--panel);
  padding:20px 20px 22px; margin-bottom:22px; max-width:52ch;
}
.auth-gate p { color:var(--ink-2); margin-bottom:14px; font-size:14px; }
body.signed-out .needs-auth { display:none; }