/* ==========================================================================
   AwesomeResponse — Field Manual design system
   A ruggedised instrument panel: dark by default (a SOC at 03:00), legible in
   daylight, printable, and readable at a glance under stress.
   ========================================================================== */

:root {
  /* --- surfaces (dark is the default) --- */
  --bg:        #0a0d12;
  --bg-grid:   #0e1219;
  --panel:     #12171f;
  --panel-2:   #171d27;
  --panel-3:   #1d2530;
  --line:      #232c38;
  --line-2:    #2f3a49;

  /* --- ink --- */
  --ink:       #e8eef6;
  --ink-2:     #a9b6c6;
  --ink-3:     #6f7f92;
  --ink-4:     #4a5665;

  /* --- signal --- */
  --signal:    #ffb340;
  --signal-dim:#3a2c12;
  --link:      #6cc4ff;

  /* --- phase accents --- */
  --ph-prepare:   #7d8ea3;
  --ph-detect:    #35d6d0;
  --ph-triage:    #ffb340;
  --ph-analyze:   #b285ff;
  --ph-contain:   #ff8a3d;
  --ph-eradicate: #ff6b81;
  --ph-recover:   #4ade80;
  --ph-improve:   #5aa9ff;

  /* --- severity --- */
  --sev-critical: #ff4d5e;
  --sev-high:     #ff8a3d;
  --sev-medium:   #ffc53d;
  --sev-low:      #4dd0a0;

  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --r:   10px;
  --r-sm: 6px;
  --rail: 236px;
  --maxw: 1180px;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -12px rgba(0,0,0,.7);
}

html[data-theme="light"] {
  --bg:#f4f6f9; --bg-grid:#eef1f6; --panel:#ffffff; --panel-2:#f7f9fc; --panel-3:#eef2f7;
  --line:#dfe5ee; --line-2:#c9d3e0;
  --ink:#111821; --ink-2:#42505f; --ink-3:#6b7a8c; --ink-4:#9aa8b8;
  --signal:#b06a00; --signal-dim:#fff2dc; --link:#0b64c0;
  --ph-prepare:#5b6b7d; --ph-detect:#00908c; --ph-triage:#a86b00; --ph-analyze:#6d3fd1;
  --ph-contain:#c25a00; --ph-eradicate:#c92d45; --ph-recover:#137c3b; --ph-improve:#1f6fd0;
  --sev-critical:#c92d45; --sev-high:#c25a00; --sev-medium:#9a7400; --sev-low:#137c3b;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -16px rgba(16,24,40,.18);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  background-image:
    linear-gradient(transparent 97%, var(--bg-grid) 97%),
    linear-gradient(90deg, transparent 97%, var(--bg-grid) 97%);
  background-size: 34px 34px;
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { line-height:1.22; margin:0; font-weight:650; letter-spacing:-.01em; }
h1 { font-size: 1.85rem; } h2 { font-size:1.25rem; } h3 { font-size:1.02rem; }
p { margin: 0 0 .8em; }
code, kbd, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--signal); color: #0a0d12; }

/* ---------- utility ---------- */
.mono { font-family: var(--mono); }
.dim  { color: var(--ink-3); }
.small{ font-size: .82rem; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.row  { display:flex; gap:12px; align-items:center; }
.row.wrapy { flex-wrap: wrap; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.grid { display:grid; gap:14px; }
.hide { display:none !important; }

/* section eyebrow — the field-manual label */
.eyebrow {
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  display:flex; align-items:center; gap:10px; margin: 0 0 12px;
}
.eyebrow::after { content:""; flex:1; height:1px; background: var(--line); }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
/* Grid and flex children default to min-width:auto, which lets a wide table or a
   long command block push the whole page sideways. Pin the floors to zero and let
   the designated .scrollx / overflow containers do the scrolling instead. */
.app > * { min-width: 0; }
.wrap, .page, .panel, .card, .step, .split > *, .stack > *, .grid > * { min-width: 0; }
.tbl td, .tbl th { overflow-wrap: anywhere; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  padding: 18px 14px 28px;
}
.brand { display:flex; gap:11px; align-items:center; padding: 4px 8px 18px; }
.brand-mark {
  width: 34px; height:34px; border-radius: 9px; flex:none;
  background: linear-gradient(150deg, var(--signal), #ff6b81);
  display:grid; place-items:center; color:#0a0d12; font: 800 15px/1 var(--mono);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 18px -8px var(--signal);
}
.brand-name { font: 700 .98rem/1.1 var(--sans); letter-spacing:-.02em; }
.brand-sub  { font: 500 .62rem/1.3 var(--mono); letter-spacing:.13em; text-transform:uppercase; color: var(--ink-3); margin-top:3px; }

.nav-group { margin-bottom: 16px; }
.nav-label { font:600 .62rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); padding: 0 10px 8px; }
.nav a {
  display:flex; align-items:center; gap:10px;
  padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size:.9rem; font-weight:500;
  border: 1px solid transparent;
}
.nav a:hover { background: var(--panel-2); color: var(--ink); text-decoration:none; }
.nav a.on { background: var(--panel-3); color: var(--ink); border-color: var(--line-2); }
.nav a.on .nav-ic { color: var(--signal); }
.nav-ic { width:16px; display:grid; place-items:center; color: var(--ink-4); flex:none; }
.nav-ct { margin-left:auto; font: 500 .68rem/1 var(--mono); color: var(--ink-4); }

.rail-foot { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; font-size:.72rem; color:var(--ink-4); }
.rail-foot code { color: var(--ink-3); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top:0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display:flex; align-items:center; gap:14px; padding: 11px 28px; max-width: var(--maxw); margin:0 auto; }
.searchbtn {
  flex:1; display:flex; align-items:center; gap:10px;
  background: var(--panel); border:1px solid var(--line); color: var(--ink-3);
  border-radius: 8px; padding: 9px 12px; cursor: text; font-size:.88rem; text-align:left;
  font-family: var(--sans);
}
.searchbtn:hover { border-color: var(--line-2); color: var(--ink-2); }
.searchbtn .kbd { margin-left:auto; }
.kbd {
  font: 600 .68rem/1 var(--mono); padding: 4px 6px; border-radius:5px;
  background: var(--panel-3); border:1px solid var(--line-2); color: var(--ink-2);
}
.iconbtn {
  background: var(--panel); border:1px solid var(--line); color: var(--ink-2);
  width:36px; height:36px; border-radius:8px; display:grid; place-items:center; cursor:pointer;
}
.iconbtn:hover { border-color: var(--line-2); color: var(--ink); }

/* ---------- phase rail (the lifecycle spine) ---------- */
.phaserail { border-bottom:1px solid var(--line); background: var(--panel); }
.phaserail-in { max-width: var(--maxw); margin:0 auto; padding: 9px 28px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.phaserail-in::-webkit-scrollbar { display:none; }
.pchip {
  display:flex; align-items:center; gap:8px; flex:none;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  border:1px solid var(--line); background: var(--panel-2);
  color: var(--ink-2); font-size:.8rem; font-weight:550; cursor:pointer;
}
.pchip:hover { border-color: var(--line-2); color: var(--ink); text-decoration:none; }
.pchip .dot { width:7px; height:7px; border-radius:99px; background: var(--pc, var(--ink-4)); flex:none; }
.pchip .num { font: 600 .66rem/1 var(--mono); color: var(--ink-4); }
.pchip.on { background: color-mix(in srgb, var(--pc) 16%, var(--panel-2)); border-color: var(--pc); color: var(--ink); }
.pchip.on .num { color: var(--pc); }

/* ---------- page ---------- */
.page { padding: 30px 0 90px; }
.pagehead { margin-bottom: 26px; }
.crumb { font: 500 .72rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color: var(--ink-4); margin-bottom:10px; }
.crumb a { color: var(--ink-3); }
.lede { color: var(--ink-2); font-size:1.02rem; max-width: 74ch; margin-top:10px; }

/* ---------- panels & cards ---------- */
.panel {
  background: var(--panel); border:1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 18px 20px; position:relative;
}
.panel.tick::before, .panel.tick::after {
  content:""; position:absolute; width:8px; height:8px; border-color: var(--line-2); border-style:solid;
}
.panel.tick::before { top:-1px; left:-1px; border-width:1px 0 0 1px; border-top-left-radius:var(--r); }
.panel.tick::after  { bottom:-1px; right:-1px; border-width:0 1px 1px 0; border-bottom-right-radius:var(--r); }
.panel h3 { margin-bottom: 8px; }

.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(268px,1fr)); gap:14px; }
.card {
  display:block; background: var(--panel); border:1px solid var(--line); border-radius: var(--r);
  padding: 16px 17px; color: inherit; box-shadow: var(--shadow);
  transition: border-color .12s, transform .12s;
}
.card:hover { border-color: var(--line-2); text-decoration:none; transform: translateY(-1px); }
.card-top { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.card h3 { font-size:.98rem; }
.card p { color: var(--ink-3); font-size:.85rem; margin:0; }
.card.accent { border-left: 3px solid var(--pc, var(--signal)); }

/* ---------- badges / chips ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font: 600 .68rem/1 var(--mono); letter-spacing:.04em; text-transform:uppercase;
  padding: 4px 7px; border-radius: 5px;
  background: var(--panel-3); border:1px solid var(--line-2); color: var(--ink-2);
}
.badge.sev-critical { color:#fff; background: var(--sev-critical); border-color: var(--sev-critical); }
.badge.sev-high     { color:#1a0e04; background: var(--sev-high); border-color: var(--sev-high); }
.badge.sev-medium   { color:#1a1503; background: var(--sev-medium); border-color: var(--sev-medium); }
.badge.sev-low      { color:#03170e; background: var(--sev-low); border-color: var(--sev-low); }
.badge.ph { background: color-mix(in srgb, var(--pc) 18%, transparent); border-color: var(--pc); color: var(--pc); }
.badge.sig { background: var(--signal-dim); border-color: var(--signal); color: var(--signal); }

.chip {
  display:inline-flex; align-items:center; gap:6px;
  font: 500 .78rem/1 var(--mono); padding: 5px 9px; border-radius: 999px;
  background: var(--panel-2); border:1px solid var(--line); color: var(--ink-2);
}
a.chip:hover { border-color: var(--line-2); color: var(--ink); text-decoration:none; }
.chip.t  { border-color: color-mix(in srgb, var(--sev-high) 45%, var(--line)); color: var(--sev-high); }
.chip.d3 { border-color: color-mix(in srgb, var(--ph-recover) 45%, var(--line)); color: var(--ph-recover); }
.chip.csf{ border-color: color-mix(in srgb, var(--ph-improve) 45%, var(--line)); color: var(--ph-improve); }
.chip.cert{ border-color: color-mix(in srgb, var(--ph-analyze) 45%, var(--line)); color: var(--ph-analyze); }
.chiprow { display:flex; flex-wrap:wrap; gap:7px; }

/* ---------- lists ---------- */
.tickist { list-style:none; padding:0; margin:0; }
.tickist li { position:relative; padding-left: 22px; margin-bottom: 7px; color: var(--ink-2); font-size:.92rem; }
.tickist li::before {
  content:""; position:absolute; left:4px; top:.62em; width:6px; height:6px; border-radius:2px;
  background: var(--pc, var(--signal)); opacity:.85;
}
.qlist { list-style:none; padding:0; margin:0; }
.qlist li { padding: 9px 0 9px 0; border-top:1px dashed var(--line); color: var(--ink-2); font-size:.92rem; }
.qlist li:first-child { border-top:0; }

/* ---------- code blocks ---------- */
.cmd { margin: 12px 0; border:1px solid var(--line); border-radius: var(--r-sm); overflow:hidden; background: var(--panel-2); }
.cmd-head {
  display:flex; align-items:center; gap:9px; padding: 7px 10px;
  background: var(--panel-3); border-bottom:1px solid var(--line);
  font: 600 .72rem/1.3 var(--mono); color: var(--ink-2);
}
.cmd-os { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color: var(--signal); border:1px solid var(--signal); padding:3px 5px; border-radius:4px; }
.cmd-copy { margin-left:auto; background:transparent; border:1px solid var(--line-2); color:var(--ink-3); font: 600 .66rem/1 var(--mono);
            padding:5px 7px; border-radius:5px; cursor:pointer; text-transform:uppercase; letter-spacing:.08em; }
.cmd-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.cmd pre { margin:0; padding: 12px 13px; overflow-x:auto; font-size:.795rem; line-height:1.62; color:#d7e3f0; }
html[data-theme="light"] .cmd pre { color:#1c2733; }
.cmd-note { padding: 9px 12px; border-top:1px dashed var(--line); font-size:.82rem; color: var(--ink-3); background: var(--panel); }

/* ---------- callouts ---------- */
.note { border-left:3px solid var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--panel)); padding: 11px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size:.89rem; color:var(--ink-2); margin: 12px 0; }
.note.warn { border-color: var(--sev-critical); background: color-mix(in srgb, var(--sev-critical) 9%, var(--panel)); }
.note.good { border-color: var(--sev-low); background: color-mix(in srgb, var(--sev-low) 9%, var(--panel)); }
.note strong { color: var(--ink); }

/* ---------- step (the playbook workhorse) ---------- */
.step { border:1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: 14px; box-shadow: var(--shadow); overflow:hidden; }
.step-head { display:flex; gap:13px; align-items:flex-start; padding: 15px 18px; cursor:pointer; }
.step-head:hover { background: var(--panel-2); }
.step-n {
  flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  font: 700 .8rem/1 var(--mono); color: var(--pc, var(--signal));
  background: color-mix(in srgb, var(--pc) 14%, transparent); border:1px solid color-mix(in srgb, var(--pc) 45%, var(--line));
}
.step-t { flex:1; min-width:0; }
.step-t h3 { font-size:1rem; margin-bottom:5px; }
.step-meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.step-body { padding: 2px 18px 18px 61px; border-top:1px dashed var(--line); }
.step-chk { flex:none; width:20px; height:20px; border-radius:5px; border:1.5px solid var(--line-2); background:transparent; cursor:pointer; display:grid; place-items:center; margin-top:5px; }
.step-chk[data-done="1"] { background: var(--sev-low); border-color: var(--sev-low); color:#04140c; }
.caret { flex:none; color: var(--ink-4); transition: transform .15s; margin-top:6px; }
.step.open .caret { transform: rotate(90deg); }
.step:not(.open) .step-body { display:none; }

.subhead { font: 600 .68rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color: var(--ink-4); margin: 16px 0 8px; }

/* ---------- first-10 grid ---------- */
.f10 { counter-reset: f10; display:grid; gap:10px; }
.f10 .item { display:flex; gap:13px; padding: 13px 15px; border:1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.f10 .item::before {
  counter-increment: f10; content: counter(f10, decimal-leading-zero);
  font: 700 .8rem/1.6 var(--mono); color: var(--signal); flex:none;
}
.f10 .do { font-weight:600; color: var(--ink); margin-bottom:4px; }
.f10 .why { font-size:.85rem; color: var(--ink-3); }
.f10 .warn { font-size:.82rem; color: var(--sev-high); margin-top:5px; }

/* ---------- tables ---------- */
.tbl { width:100%; border-collapse:collapse; font-size:.87rem; }
.tbl th { text-align:left; font: 600 .66rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-4); padding: 8px 10px; border-bottom:1px solid var(--line-2); }
.tbl td { padding: 9px 10px; border-bottom:1px solid var(--line); color: var(--ink-2); vertical-align:top; }
.tbl tr:hover td { background: var(--panel-2); }
.scrollx { overflow-x:auto; }

/* ---------- matrix ---------- */
.matrix { display:grid; gap:8px; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
.mcol { border:1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); overflow:hidden; }
.mcol-h { padding: 8px 10px; background: var(--panel-3); border-bottom:1px solid var(--line); }
.mcol-h .t { font: 600 .78rem/1.3 var(--sans); }
.mcol-h .id { font: 500 .64rem/1 var(--mono); color: var(--ink-4); }
.mcell { display:block; padding: 6px 10px; border-top:1px solid var(--line); font-size:.78rem; color: var(--ink-2); }
.mcell:hover { background: var(--panel-2); text-decoration:none; color: var(--ink); }
.mcell.hot { background: color-mix(in srgb, var(--signal) 14%, var(--panel)); color: var(--ink); }
.mcell .n { float:right; font: 600 .66rem/1.5 var(--mono); color: var(--signal); }

/* ---------- command palette ---------- */
.pal-wrap { position:fixed; inset:0; z-index:100; display:none; }
.pal-wrap.open { display:block; }
.pal-bg { position:absolute; inset:0; background: rgba(4,6,10,.72); backdrop-filter: blur(3px); }
.pal {
  position:relative; max-width: 660px; margin: 9vh auto 0;
  background: var(--panel); border:1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.85); overflow:hidden;
}
.pal-in { display:flex; align-items:center; gap:11px; padding: 15px 17px; border-bottom:1px solid var(--line); }
.pal-in input {
  flex:1; background:transparent; border:0; outline:0; color: var(--ink);
  font: 500 1.02rem/1.4 var(--sans);
}
.pal-in input::placeholder { color: var(--ink-4); }
.pal-res { max-height: 56vh; overflow-y:auto; padding: 7px; }
.pal-res .grp { font: 600 .62rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-4); padding: 11px 11px 6px; }
.pal-it { display:flex; gap:11px; align-items:center; padding: 8px 11px; border-radius: 8px; cursor:pointer; color: var(--ink-2); }
.pal-it:hover, .pal-it.sel { background: var(--panel-3); color: var(--ink); text-decoration:none; }
.pal-it.sel { box-shadow: inset 0 0 0 1px var(--line-2); }
.pal-it .k { font: 600 .62rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color: var(--ink-4); border:1px solid var(--line-2); padding:3px 5px; border-radius:4px; flex:none; min-width:62px; text-align:center; }
.pal-it .tx { flex:1; min-width:0; }
.pal-it .tx b { font-weight:600; color: var(--ink); }
.pal-it .tx .s { display:block; font-size:.78rem; color: var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pal-foot { display:flex; gap:14px; padding: 9px 15px; border-top:1px solid var(--line); font-size:.72rem; color: var(--ink-4); background: var(--panel-2); }
.pal-empty { padding: 34px 18px; text-align:center; color: var(--ink-4); font-size:.9rem; }
mark { background: color-mix(in srgb, var(--signal) 32%, transparent); color: inherit; border-radius:2px; padding: 0 1px; }

/* ---------- triage wizard ---------- */
.wiz { display:grid; gap:18px; }
.wiz-q { border:1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 18px 20px; box-shadow: var(--shadow); }
.wiz-q h3 { margin-bottom: 4px; }
.opts { display:flex; flex-wrap:wrap; gap:9px; margin-top: 13px; }
.opt {
  border:1px solid var(--line); background: var(--panel-2); color: var(--ink-2);
  padding: 9px 13px; border-radius: 999px; cursor:pointer; font-size:.87rem; font-family: var(--sans);
}
.opt:hover { border-color: var(--line-2); color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color:#12100a; font-weight:600; }
.matchbar { height:5px; border-radius:99px; background: var(--panel-3); overflow:hidden; margin-top:9px; }
.matchbar i { display:block; height:100%; background: linear-gradient(90deg, var(--signal), var(--sev-critical)); }

/* ---------- casefile ---------- */
.casebar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--signal); border-radius: var(--r);
  background: color-mix(in srgb, var(--signal) 9%, var(--panel));
  padding: 12px 16px; margin-bottom: 20px;
}
.casebar .id { font: 700 .84rem/1 var(--mono); color: var(--signal); }
.prog { flex:1; min-width:140px; height:6px; background: var(--panel-3); border-radius:99px; overflow:hidden; }
.prog i { display:block; height:100%; background: var(--sev-low); transition: width .2s; }
.btn {
  border:1px solid var(--line-2); background: var(--panel-2); color: var(--ink-2);
  padding: 7px 12px; border-radius: 7px; cursor:pointer; font: 600 .78rem/1 var(--sans);
}
.btn:hover { border-color: var(--ink-4); color: var(--ink); }
.btn.pri { background: var(--signal); border-color: var(--signal); color:#12100a; }
.btn.danger:hover { border-color: var(--sev-critical); color: var(--sev-critical); }
.notebox {
  width:100%; background: var(--panel-2); border:1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font: 400 .85rem/1.55 var(--mono); padding: 9px 11px; resize:vertical; min-height:60px;
}

/* ---------- filter bar ---------- */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; align-items:center; }
.filters input[type="search"] {
  background: var(--panel); border:1px solid var(--line); border-radius:8px; color: var(--ink);
  padding: 8px 12px; font: 400 .88rem/1 var(--sans); min-width: 220px;
}
.filters select {
  background: var(--panel); border:1px solid var(--line); border-radius:8px; color: var(--ink-2);
  padding: 8px 10px; font: 400 .84rem/1 var(--sans);
}

/* ---------- source strip (credits, on every page) ---------- */
.srcstrip { margin-top: 44px; border-top:1px solid var(--line); padding-top: 18px; }
.srcstrip .eyebrow { margin-bottom: 10px; }
.srcstrip ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap: 8px 20px; }
.srcstrip li { font-size:.82rem; color: var(--ink-3); }
.srcstrip a { color: var(--ink-2); border-bottom:1px dotted var(--line-2); }
.srcstrip a:hover { color: var(--link); text-decoration:none; }
.attrib { margin-top: 14px; font-size:.78rem; color: var(--ink-4); max-width: 90ch; }

/* ---------- hero ---------- */
.hero { position:relative; border:1px solid var(--line); border-radius: 14px; overflow:hidden; background: var(--panel); margin-bottom: 26px; }
.hero-in { padding: 34px 32px; position:relative; z-index:1; }
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 240px at 12% -20%, color-mix(in srgb, var(--signal) 20%, transparent), transparent 70%),
    radial-gradient(600px 260px at 88% 120%, color-mix(in srgb, var(--ph-analyze) 18%, transparent), transparent 70%);
}
.hero h1 { font-size: 2.15rem; letter-spacing:-.025em; }
.hero .lede { font-size:1.06rem; max-width: 66ch; }
.statgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(112px,1fr)); gap:1px; background: var(--line); border-top:1px solid var(--line); }
.stat { background: var(--panel); padding: 13px 16px; }
.stat .v { font: 700 1.32rem/1.1 var(--mono); color: var(--ink); }
.stat .l { font: 500 .64rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-4); margin-top:4px; }

/* ---------- misc ---------- */
.split { display:grid; grid-template-columns: 1.55fr 1fr; gap:18px; align-items:start; }
.stack { display:grid; gap:14px; }
.toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background: var(--panel-3); border:1px solid var(--line-2); color: var(--ink);
  padding: 10px 16px; border-radius: 9px; font-size:.86rem; z-index:200;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.8); opacity:0; pointer-events:none; transition: opacity .18s, transform .18s;
}
.toast.show { opacity:1; transform: translateX(-50%) translateY(-4px); }
.railtoggle { display:none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left:0; top:0; z-index:60; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  body.rail-open .rail { transform:none; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .railtoggle { display:grid; }
  .split { grid-template-columns: 1fr; }
  .wrap, .topbar-in, .phaserail-in { padding-left:16px; padding-right:16px; }
  .step-body { padding-left: 18px; }
}

/* ---------- print: the actual field manual ---------- */
@media print {
  :root { --bg:#fff; --panel:#fff; --panel-2:#fff; --panel-3:#f4f4f4; --line:#ccc; --line-2:#999;
          --ink:#000; --ink-2:#222; --ink-3:#555; --ink-4:#777; }
  body { background:none; font-size: 10.5pt; }
  .rail, .topbar, .phaserail, .pal-wrap, .casebar, .cmd-copy, .btn, .filters, .railtoggle, .toast { display:none !important; }
  .app { display:block; }
  .step:not(.open) .step-body { display:block !important; }
  .step, .panel, .card { break-inside: avoid; box-shadow:none; }
  a { color:#000; text-decoration:none; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; color:#666; word-break:break-all; }
  .page { padding:0; }
}