/* ═══════════════════════════════════════════════════════════════════════════
   CrewDeck Design System
   Extracted from the working mocks. Drop this in and the components below
   render as they do in the prototype.

   Sections
     1  Tokens
     2  Base
     3  Structure: top bar, shell, sidebar, inspector
     4  Type
     5  Status: the tri-state, pills, badges
     6  Data surfaces: tiles, grids, rows, key-values
     7  Dashboard bands
     8  Work list rows
     9  Cards
     10 Navigation within a screen: tabs, filters
     11 Process: step list, flow, compare, trace, chain
     12 Knowledge graph
     13 Charts
     14 Callouts
     15 Forms and controls
     16 Setup patterns: wizard, verification, reconciliation, disclosure
     17 Code
     18 Responsive and motion

   No em dashes anywhere. Chirpn brand rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────────────────── */
:root{
  /* brand, non-negotiable */
  --navy:#0E1B33;
  --cyan:#0AADFC;
  --amber:#B26A00;

  /* materials, structure comes from these rather than from borders */
  --ground:#FFFFFF;
  --grouped:#F2F3F5;
  --surface:#FFFFFF;
  --sidebar:#F7F8FA;
  --field:rgba(14,27,51,.05);
  --chip:rgba(14,27,51,.07);

  /* separators, hairline, inset from the container edge */
  --sep:rgba(14,27,51,.10);
  --sepS:rgba(14,27,51,.18);

  /* label hierarchy, four levels by opacity of one navy.
     l1 and l2 are readable. l3 is readable at 13px and above.
     l4 is DECORATIVE ONLY and must never carry readable content. */
  --l1:#0E1B33;
  --l2:rgba(14,27,51,.75);
  --l3:rgba(14,27,51,.63);
  --l4:rgba(14,27,51,.30);

  /* tint, the single accent. tintT is the text-safe variant. */
  --tint:#0AADFC;
  --tintT:#077DB7;
  --tintS:rgba(10,173,252,.12);

  /* accountability. ONLY where a named human is answerable. Never a warning,
     never decoration. If this drifts, the most useful signal is lost. */
  --accT:#935800;
  --accS:rgba(178,106,0,.12);

  /* semantic status */
  --ok:#248A3C;   --okS:rgba(36,138,60,.12);
  --crit:#B3271B; --critS:rgba(179,39,27,.10);

  /* type */
  --font:"Avenir Next",system-ui,Inter,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;

  /* shape */
  --rG:12px;  /* group container */
  --rC:7px;   /* control */
  --rH:6px;   /* chip */
  --rP:11px;  /* pill */

  /* elevation, two levels, both almost imperceptible */
  --lift:0 1px 2px rgba(14,27,51,.05);
  --panel:0 1px 3px rgba(14,27,51,.10),0 8px 24px rgba(14,27,51,.06);

  /* layout */
  --side-w:214px;
  --insp-w:352px;
  --content-max:1080px;
  --top-h:47px;
}

/* ── 2. BASE ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--grouped);color:var(--l1);font-family:var(--font);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--tintT);text-decoration:none}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(10,173,252,.35);border-radius:var(--rC)}

/* tabular figures on ALL data. Without this, columns of numbers jitter and
   the product looks imprecise at exactly the moment it must not. */
[data-num],.tnum,.mn,.mono{font-variant-numeric:tabular-nums}
.mono,.mn{font-family:var(--mono)}

/* ── 3. STRUCTURE ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(252,252,253,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--sep);
  display:flex;align-items:center;gap:14px;padding:10px 20px;flex-wrap:wrap}
.wm{font-weight:600;letter-spacing:.24em;font-size:11.5px}
.wm b{color:var(--cyan)}

/* project selector. The global scope control. Every screen is scoped to it. */
.psel{background:var(--surface);border:1px solid var(--sepS);border-radius:var(--rC);
  padding:7px 12px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.psel .ty{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--tintT);
  background:var(--tintS);padding:2px 6px;border-radius:var(--rH)}
.psel .ar{color:var(--l4);font-size:11px}

.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:calc(100vh - var(--top-h))}
.side{background:var(--sidebar);border-right:1px solid var(--sep);padding:14px 10px}
.main{background:var(--ground);padding:22px 26px 70px}

/* nav. Items a role cannot use are ABSENT, never greyed. */
.nav{display:grid;gap:1px}
.nav button{width:100%;border:0;background:transparent;padding:8px 11px;border-radius:var(--rC);
  font-size:13.5px;color:var(--l2);display:flex;justify-content:space-between;
  align-items:center;text-align:left}
.nav button:hover{background:rgba(10,173,252,.06)}
.nav button.on{background:var(--tint);color:#fff;font-weight:500;
  box-shadow:inset 0 0 0 1px var(--tintT)}
.nav button .c{font-family:var(--mono);font-size:11px;opacity:.65}
.sfoot{margin-top:16px;padding:10px 11px;border-top:1px solid var(--sep);font-size:11px;
  color:var(--l4);font-family:var(--mono);line-height:1.6}

/* inspector. Inspecting to decide on the CURRENT screen opens this.
   Going elsewhere navigates. Never navigate away from a live decision. */
.insp{position:fixed;top:var(--top-h);right:0;bottom:0;width:var(--insp-w);
  background:var(--surface);border-left:1px solid var(--sep);box-shadow:var(--panel);
  padding:18px 20px;overflow:auto;z-index:35;display:none}
.insp[data-open="true"]{display:block}
.insp .cl{float:right;border:0;background:transparent;color:var(--l4);font-size:17px;line-height:1}

/* ── 4. TYPE ──────────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tintT);font-weight:500}
h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:5px 0 3px}
h2{font-size:15.5px;font-weight:600;margin:24px 0 7px}
h2 .sm{font-weight:400;color:var(--l3);font-size:13px;margin-left:8px}
.sub{color:var(--l3);font-size:14px;margin:0}
.lead{font-size:14.5px;line-height:1.55;margin:0 0 12px}
.back{color:var(--tintT);font-size:13px;font-weight:500;background:none;border:0;
  padding:0;margin-bottom:9px}
.note{font-size:11px;color:var(--l4);font-family:var(--mono)}

/* ── 5. STATUS ────────────────────────────────────────────────────────────── */
/* THE TRI-STATE. The signature of this system. Set, In discovery, Open.
   Used identically on a field, a row, a section and a nav count, so a thing
   half-finished reads as deliberate rather than broken. */
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;
  padding:3px 9px;border-radius:var(--rP);white-space:nowrap}
.st i{width:6px;height:6px;border-radius:50%;display:block}
.st.set{background:var(--okS);color:#1B6C2E}    .st.set i{background:var(--ok)}
.st.disc{background:var(--tintS);color:var(--tintT)} .st.disc i{background:var(--tint)}
.st.open{background:var(--accS);color:var(--accT)}   .st.open i{background:var(--amber)}
.st.bad{background:var(--critS);color:var(--crit)}   .st.bad i{background:var(--crit)}
.st.na{background:var(--chip);color:var(--l4)}       .st.na i{background:var(--l4)}

/* pills. Metadata, never state. */
.pill{display:inline-block;font-size:10.5px;background:var(--chip);color:var(--l2);
  padding:2px 7px;border-radius:var(--rH);font-family:var(--mono);margin-right:4px}
.pill.nat{background:var(--tintS);color:var(--tintT)}   /* ours */
.pill.ext{background:var(--accS);color:var(--accT)}     /* theirs */
.pill.bad{background:var(--critS);color:var(--crit)}
.pill.amb{background:var(--accS);color:var(--accT);border:1px solid rgba(178,106,0,.35)}

/* ── 6. DATA SURFACES ─────────────────────────────────────────────────────── */
/* tiles. Current values only. A trend or a breakdown belongs in a chart. */
.tiles{display:grid;gap:1px;background:var(--sep);border:1px solid var(--sep);
  border-radius:var(--rG);overflow:hidden;margin-top:14px}
.tile{background:var(--surface);padding:12px 14px}
.tile .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--l4);
  text-transform:uppercase}
.tile .v{font-size:21px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.tile .v.sm{font-size:13.5px;font-weight:400;color:var(--l3)}
.tile .t{font-size:11px;color:var(--l3);margin-top:2px}
.tile.good .v{color:#1B6C2E} .tile.warn .v{color:var(--accT)} .tile.bad .v{color:var(--crit)}

/* grouped inset list. THE default record pattern. 1px gap over a separator
   colour gives hairlines without per-row borders. */
.grid{display:grid;gap:1px;background:var(--sep);border:1px solid var(--sep);
  border-radius:var(--rG);overflow:hidden;margin-top:12px}
.row{background:var(--surface);padding:13px 16px;display:grid;
  grid-template-columns:230px 1fr auto;gap:16px;align-items:center;
  text-align:left;border:0;width:100%}
.row .lbl{font-weight:500;font-size:13.5px}
.row .lbl small{display:block;color:var(--l4);font-weight:400;font-size:11.5px;margin-top:2px}
.row .val{font-size:13.5px}
.row .val small{display:block;color:var(--l3);font-size:12px;margin-top:1px}
.row.click{cursor:pointer}
.row.click:hover{background:rgba(10,173,252,.04)}
/* A clickable row is a DIV with role=button, never a <button>, because rows
   contain buttons and nested buttons break the grid. */

.kv{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--sep);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--l3);font-size:12px}

/* ── 7. DASHBOARD BANDS ───────────────────────────────────────────────────── */
/* Four bands in FIXED order for every role: Headline, Needs attention,
   How it is going, Recent activity. Only the content varies.
   Nothing on a dashboard is actionable. Attention items LINK. */
.bands{display:grid;gap:13px;margin-top:16px}
.band{border:1px solid var(--sep);border-radius:var(--rG);background:var(--surface);overflow:hidden}
.band>h3{margin:0;padding:12px 17px;font-size:12.5px;font-weight:600;
  border-bottom:1px solid var(--sep);display:flex;justify-content:space-between;align-items:center}
.band>h3 .bn{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--l4);font-weight:500}
.head{font-size:18.5px;font-weight:600;letter-spacing:-.01em;padding:15px 17px;margin:0;line-height:1.4}
.mets{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sep)}
.met{background:var(--surface);padding:13px 15px}
.met .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--l4);text-transform:uppercase}
.met .v{font-size:22px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.met .d{font-size:11px;color:var(--l3);margin-top:2px}
.met .d.up{color:#1B6C2E} .met .d.dn{color:var(--crit)}
.att{display:grid;gap:1px;background:var(--sep)}
.ai{background:var(--surface);padding:12px 17px;display:grid;
  grid-template-columns:1fr 108px 84px;gap:12px;align-items:center;text-align:left;
  border:0;width:100%;cursor:pointer}
.ai:hover{background:rgba(10,173,252,.04)}
.ai .go{color:var(--tintT);font-size:12px;font-weight:500;text-align:right}
.acty{display:grid;gap:1px;background:var(--sep)}
.act{background:var(--surface);padding:11px 17px;font-size:13px}
.act .w{color:var(--l4);font-family:var(--mono);font-size:11px;margin-top:2px;display:block}

/* ── 8. WORK LIST ROWS ────────────────────────────────────────────────────── */
.wgrp{margin-top:18px}
.wgrp>h3{margin:0 0 7px;font-size:11.5px;font-weight:600;font-family:var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--l4);display:flex;gap:9px;align-items:baseline}
.wgrp>h3 span{font-family:var(--font);letter-spacing:0;text-transform:none;font-size:12px;
  font-weight:400;color:var(--l3)}
.wi{background:var(--surface);padding:12px 16px;display:grid;
  grid-template-columns:104px 1fr 150px 118px;gap:14px;align-items:center;
  text-align:left;border:0;width:100%;cursor:pointer}
.wi:hover{background:rgba(10,173,252,.04)}
.wi b{font-weight:500;font-size:13.5px}
.wi small{display:block;color:var(--l3);font-size:12px;margin-top:1px}
.wi .meta{font-size:11.5px;color:var(--l4);font-family:var(--mono)}

/* item type. Amber on approval and task, because a named human is accountable
   at both. Findings are critical because they are exceptions, not work. */
.ty{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;padding:3px 7px;
  border-radius:var(--rH);text-align:center;font-weight:500}
.ty.appr{background:var(--accS);color:var(--accT)}
.ty.task{background:var(--accS);color:var(--accT)}
.ty.find{background:var(--critS);color:var(--crit)}

/* inline actions. An approval that cannot be cleared from the row makes the
   list a notification feed rather than a work surface. */
.acts{display:flex;gap:6px;justify-content:flex-end}
.mini{border:1px solid var(--sepS);background:var(--surface);border-radius:var(--rC);
  padding:4px 10px;font-size:11.5px;font-weight:500}
.mini.pri{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── 9. CARDS ─────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-top:12px}
.card{background:var(--surface);border:1px solid var(--sep);border-radius:var(--rG);
  padding:14px 15px;text-align:left;display:flex;flex-direction:column;gap:7px;
  width:100%;cursor:pointer}
.card:hover{border-color:var(--tint)}
.card.warn{border-color:var(--amber);background:linear-gradient(180deg,var(--accS),var(--surface) 55%)}
.card.bad{border-color:var(--crit);background:linear-gradient(180deg,var(--critS),var(--surface) 55%)}
.card .tp{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.card h4{margin:0;font-size:14.5px;font-weight:600}
.card .own{font-size:11.5px;color:var(--l4);margin-top:1px}
.card p{margin:0;font-size:12.5px;color:var(--l3);line-height:1.45}
.card .mt{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ── 10. IN-SCREEN NAVIGATION ─────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--sep);margin-top:16px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:9px 13px;font-size:13px;color:var(--l3);
  border-bottom:2px solid transparent;font-weight:500}
.tabs button[aria-pressed="true"]{color:var(--l1);border-bottom-color:var(--tint)}
.tabs button .c{font-family:var(--mono);font-size:10.5px;color:var(--l4);margin-left:5px}

.filters{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0;align-items:center}
.filters button{border:1px solid var(--sep);background:var(--surface);border-radius:var(--rP);
  padding:5px 12px;font-size:12px;color:var(--l2)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);
  color:#fff;font-weight:500}
.filters .lb{font-size:11px;color:var(--l4);font-family:var(--mono);margin-right:2px}

/* segmented control. Two or three way view switches only. Never primary nav. */
.seg{display:inline-flex;background:rgba(14,27,51,.06);border-radius:var(--rC);padding:2px}
.seg button{border:0;background:transparent;color:var(--l3);font-size:11.5px;padding:5px 10px;
  border-radius:5px;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--l1);box-shadow:var(--lift)}

/* ── 11. PROCESS ──────────────────────────────────────────────────────────── */
/* step list. The DEFAULT playbook rendering for every role. Each step states
   what it ACHIEVED, not whether it ran. A skipped step is shown with its
   reason, because an absent step reads as a missed step. */
.pbsteps{display:grid;gap:1px;background:var(--sep);border:1px solid var(--sep);
  border-radius:var(--rG);overflow:hidden;margin-top:12px}
.ps{background:var(--surface);padding:13px 16px;display:grid;
  grid-template-columns:30px 1fr 150px 110px;gap:14px;align-items:center;font-size:13.5px}
.ps .n{width:24px;height:24px;border-radius:50%;background:var(--chip);display:grid;
  place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--l3)}
.ps.done .n{background:var(--okS);color:#1B6C2E}
.ps.amber{background:linear-gradient(90deg,var(--accS),var(--surface) 40%)}
.ps.amber .n{background:var(--accS);color:var(--accT)}
.ps.skip{opacity:.62}
.ps b{font-weight:500}
.ps small{display:block;color:var(--l3);font-size:12px;margin-top:1px}

/* flow. Four node treatments. A Captain must see at a glance which steps he
   does not control. */
.flow{margin-top:12px;border:1px solid var(--sep);border-radius:var(--rG);
  background:var(--surface);padding:22px;display:flex;flex-direction:column;align-items:center}
.fn{border:1.6px solid var(--tint);background:var(--tintS);border-radius:var(--rC);
  padding:10px 16px;min-width:250px;text-align:center;font-size:13px}
.fn b{display:block;font-weight:600}
.fn small{color:var(--l3);font-size:11.5px;font-family:var(--mono)}
.fn.amb{border-color:var(--amber);background:var(--accS);border-width:2px}  /* human */
.fn.ext{border-color:var(--l4);background:var(--chip);border-style:dashed}  /* theirs */
.fn.se{border-radius:20px;min-width:86px;padding:7px 16px;background:var(--chip);
  border-color:var(--sepS)}                                                /* start, end */
.fa{color:var(--l4);font-family:var(--mono);padding:5px 0;font-size:15px}

/* compare. Nobody is asked to approve something they cannot check. */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.cp{border:1px solid var(--sep);border-radius:var(--rG);background:var(--surface);overflow:hidden}
.cp>h4{margin:0;padding:10px 15px;font-size:11.5px;font-family:var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--l4);border-bottom:1px solid var(--sep);font-weight:600}
.cp .bd{padding:14px 15px;font-size:13px;line-height:1.6}
.cp .bd.mn{font-size:12px;color:var(--l2);white-space:pre-wrap}
.hl{background:var(--accS);padding:1px 3px;border-radius:3px}

/* trace. THE ATTESTATION BOUNDARY, RENDERED. A gap is hatched and labelled
   not observable. Never render a partial trace as though it were complete. */
.trace{margin-top:12px;border:1px solid var(--sep);border-radius:var(--rG);
  background:var(--surface);overflow:hidden;font-family:var(--mono);font-size:12.5px}
.tr{padding:10px 16px;border-bottom:1px solid var(--sep);display:grid;
  grid-template-columns:1fr 160px 128px;gap:12px;align-items:center}
.tr:last-child{border-bottom:0}
.tr.gap{background:repeating-linear-gradient(135deg,rgba(179,39,27,.05) 0 8px,transparent 8px 16px)}
.tr .ind{color:var(--l4)}
.tr .n{color:var(--l1)}
.tr.gap .n{color:var(--crit)}
.tr .m{color:var(--l3);font-size:11.5px}

/* chain. A derivation made visible: inputs, then what follows, then the
   consequence. Used for capture modes to tier to autonomy. */
.chain{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:center;margin-top:12px}
.cbox{background:var(--surface);border:1px solid var(--sep);border-radius:var(--rG);padding:13px}
.cbox.hi{border-color:var(--tint);background:linear-gradient(180deg,var(--tintS),var(--surface) 60%)}
.cbox .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--l4);text-transform:uppercase}
.cbox .v{font-size:15px;font-weight:600;margin-top:3px}
.cbox .d{font-size:11.5px;color:var(--l3);margin-top:3px;line-height:1.4}
.arw{text-align:center;color:var(--l4);font-family:var(--mono);font-size:15px}

/* ── 12. KNOWLEDGE GRAPH ──────────────────────────────────────────────────── */
/* The relationship view is the DEFAULT. If this looks like a table of rows,
   the design has failed, because the object is named after the graph. */
.kg{margin-top:12px;border:1px solid var(--sep);border-radius:var(--rG);
  background:var(--surface);padding:20px}
.kglvl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.kn{border:1px solid var(--sep);border-radius:var(--rC);padding:8px 13px;font-size:12.5px;
  background:var(--surface);cursor:pointer}
.kn:hover{border-color:var(--tint)}
.kn.sys{background:var(--tintS);border-color:var(--tint)}
.kn.warn{background:var(--accS);border-color:var(--amber)}
.kn.bad{background:var(--critS);border-color:var(--crit)}
.kn small{display:block;font-family:var(--mono);font-size:10px;color:var(--l4)}
.kglink{text-align:center;color:var(--l4);font-family:var(--mono);padding:8px 0;font-size:13px}

/* ── 13. CHARTS ───────────────────────────────────────────────────────────── */
.chart{margin-top:12px;border:1px solid var(--sep);border-radius:var(--rG);
  background:var(--surface);padding:15px}
.chart .cap{font-size:12px;color:var(--l3);margin-bottom:9px;display:flex;
  justify-content:space-between;gap:10px}
.bars{display:flex;align-items:flex-end;gap:3px;height:104px}
.bars i{flex:1;background:var(--tintS);border-radius:2px 2px 0 0}
.bars i.good{background:var(--okS)}
.bars i.hot{background:var(--accS)}
.bars i.crit{background:var(--critS)}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  color:var(--l4);margin-top:6px}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--l3);margin-top:9px;flex-wrap:wrap}
.legend span i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}

/* ── 14. CALLOUTS ─────────────────────────────────────────────────────────── */
/* Left rule plus tinted ground. Amber for accountability and consequence,
   cyan for design reasoning, green for reassurance, red for a blocked state. */
.callout{margin-top:14px;border-left:3px solid var(--amber);background:var(--accS);
  border-radius:0 var(--rC) var(--rC) 0;padding:13px 16px;font-size:13.5px}
.callout b{color:var(--accT)}
.callout.cy{border-left-color:var(--tint);background:var(--tintS)} .callout.cy b{color:var(--tintT)}
.callout.ok{border-left-color:var(--ok);background:var(--okS)}     .callout.ok b{color:#1B6C2E}
.callout.bad{border-left-color:var(--crit);background:var(--critS)} .callout.bad b{color:var(--crit)}

/* ── 15. FORMS AND CONTROLS ───────────────────────────────────────────────── */
.inp,textarea.inp{background:var(--field);border:1px solid transparent;border-radius:var(--rC);
  padding:8px 11px;font-size:13.5px;font-family:var(--font);color:var(--l1);width:100%;resize:vertical}
.inp:focus{border-color:var(--tint);background:var(--surface)}
.inp.mn{font-family:var(--mono);font-size:13px}

/* tri-state toggle. Known, Discovery, Open. Unknown is a VALID answer that
   becomes a discovery task, so it is a first-class control not an empty field. */
.tri{display:inline-flex;background:rgba(14,27,51,.05);border-radius:var(--rC);padding:2px}
.tri button{border:0;background:transparent;font-size:11.5px;padding:5px 10px;
  border-radius:5px;color:var(--l3)}
.tri button[aria-pressed="true"]{background:var(--surface);color:var(--l1);
  box-shadow:var(--lift);font-weight:500}

.req{color:var(--accT);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;margin-left:5px;white-space:nowrap;display:inline-block}
.crux{background:var(--accS);color:var(--accT);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:var(--rH);
  margin-left:5px;white-space:nowrap;display:inline-block}

.btn{border:1px solid var(--sepS);background:var(--surface);border-radius:var(--rC);
  padding:9px 15px;font-size:13.5px;font-weight:500}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dec{border-color:var(--crit);color:var(--crit)}
.btn:disabled{opacity:.4;cursor:default}
.footer{display:flex;gap:9px;align-items:center;margin-top:22px;flex-wrap:wrap}
.spacer{flex:1}

.drop{margin-top:16px;border:1.5px dashed var(--sepS);border-radius:var(--rG);padding:28px;
  text-align:center;background:var(--surface)}
.drop p{margin:6px 0 0;color:var(--l3);font-size:13px}

/* ── 16. SETUP PATTERNS ───────────────────────────────────────────────────── */
/* wizard stepper. BY TYPE marks the steps that reshape per archetype. */
.steps{display:flex;margin:26px 0 0;border-bottom:1px solid var(--sep)}
.steps button{border:0;background:transparent;padding:12px 4px 14px;flex:1;text-align:left;
  border-bottom:2px solid transparent;color:var(--l4)}
.steps button .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;display:block}
.steps button .t{font-size:12.5px;font-weight:500;display:block;margin-top:3px}
.steps button .dyn{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--tint);display:block;margin-top:2px}
.steps button[aria-current="true"]{border-bottom-color:var(--tint);color:var(--l1)}
.steps button[aria-current="true"] .n{color:var(--tintT)}
.steps button.done{color:var(--l2)} .steps button.done .n{color:var(--ok)}

/* numbered next-steps list. Used in a dashboard attention band on day one. */
.s2wrap{display:grid;gap:1px;background:var(--sep);border:1px solid var(--sep);
  border-radius:var(--rG);overflow:hidden;margin-top:12px}
.s2{background:var(--surface);padding:13px 16px;display:grid;
  grid-template-columns:26px 1fr auto;gap:14px;align-items:center;font-size:13.5px}
.s2 .num{width:22px;height:22px;border-radius:50%;background:var(--tintS);color:var(--tintT);
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600}
.s2.blocked .num{background:var(--accS);color:var(--accT)}

/* verification result. Pass, partial, fail. Partial is the honest middle and
   it is the one that decides what can be sold. */
.ver{display:grid;gap:1px;background:var(--sep);border:1px solid var(--sep);
  border-radius:var(--rG);overflow:hidden;margin-top:12px}
.vrow{background:var(--surface);padding:12px 16px;display:grid;
  grid-template-columns:26px 1fr auto;gap:14px;align-items:center;font-size:13.5px}
.vrow .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:600}
.vrow.pass .ic{background:var(--okS);color:#1B6C2E}
.vrow.part .ic{background:var(--accS);color:var(--accT)}
.vrow.fail .ic{background:var(--critS);color:var(--crit)}

/* reconciliation. The set difference IS the product. */
.recon{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}
.rbox{border:1px solid var(--sep);border-radius:var(--rG);padding:15px;background:var(--surface)}
.rbox.hi{border-color:var(--amber);background:linear-gradient(180deg,var(--accS),var(--surface) 55%)}
.rbox .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--l4);text-transform:uppercase}
.rbox .v{font-size:26px;font-weight:600;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.rbox.hi .v{color:var(--accT)}
.rbox .d{font-size:12px;color:var(--l3);line-height:1.4}

/* progressive disclosure. Level 1 must satisfy a business reader completely.
   Levels 2 and 3 are genuinely collapsed by default. */
.disc{border:1px solid var(--sep);border-radius:var(--rG);overflow:hidden;margin-top:12px;
  background:var(--surface)}
.disc>button{width:100%;border:0;background:transparent;padding:14px 17px;text-align:left;
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.disc>button:hover{background:rgba(10,173,252,.04)}
.disc .lv{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--l4)}
.disc .chev{color:var(--l4);font-family:var(--mono);transition:transform .18s}
.disc[data-open="true"] .chev{transform:rotate(90deg)}
.disc .body{display:none;padding:0 17px 16px;border-top:1px solid var(--sep)}
.disc[data-open="true"] .body{display:block}

/* completeness meter. Onboarding is deliberately incomplete. */
.meter{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
.bar{flex:1;height:6px;background:var(--chip);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--tint)}
.pct{font-family:var(--mono);font-size:12px;color:var(--l2);font-weight:500}

/* will and will not. What an agent will do, and what it will NOT, stated
   positively. The second box is the one that earns trust. */
.will{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.wbox{border:1px solid var(--sep);border-radius:var(--rG);padding:15px;background:var(--surface)}
.wbox.no{border-color:var(--ok);background:linear-gradient(180deg,var(--okS),var(--surface) 60%)}
.wbox h4{margin:0 0 8px;font-size:13px;font-weight:600;font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--l4)}
.wbox.no h4{color:#1B6C2E}
.wbox ul{margin:0;padding-left:18px;font-size:13px;color:var(--l2)}
.wbox li{margin-bottom:5px}

/* verdict. Navy header, cyan eyebrow. The most consequential statement on a
   screen gets the only inverted surface in the system. */
.verdict{margin-top:22px;border:1.5px solid var(--tint);border-radius:var(--rG);
  overflow:hidden;background:var(--surface)}
.verdict header{background:var(--navy);color:#fff;padding:14px 20px}
.verdict header .eyebrow{color:var(--cyan)}
.verdict header h2{color:#fff;margin-top:3px;font-size:18px}
.verdict .body{padding:18px 20px;display:grid;gap:14px}
.vline{display:grid;grid-template-columns:150px 1fr;gap:16px;font-size:13.5px;align-items:start}
.vline .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--l4);padding-top:2px}

/* ── 17. CODE ─────────────────────────────────────────────────────────────── */
pre.code{margin-top:12px;background:#0E1B33;border-radius:var(--rG);padding:15px 17px;
  font-family:var(--mono);font-size:12px;color:#C8D6EC;overflow-x:auto;line-height:1.65;
  white-space:pre}
pre.code .c{color:#5E7391}  /* comment */
pre.code .k{color:#3CBEFF}  /* key */
pre.code .s{color:#9BE38B}  /* string */
pre.code .w{color:#E0A03A}  /* warning */

/* ── 18. RESPONSIVE AND MOTION ────────────────────────────────────────────── */
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--sep)}
  .row,.wi,.ps,.tr,.ai,.kv,.s2,.vrow,.mode{grid-template-columns:1fr;gap:8px}
  .mets{grid-template-columns:1fr 1fr}
  .cmp,.chain,.recon,.will{grid-template-columns:1fr}
  .arw{transform:rotate(90deg);padding:5px 0}
  .insp{width:100%;top:auto}
  .steps{overflow-x:auto} .steps button{min-width:120px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}