/* =====================================================================
   ADL COMMAND SURFACES · adl-command.css
   Shared styling for Warning Console, Assurance, and Transition.
   Extends the token set already declared in /styles.css — no new
   palette is introduced, only the structural devices these three
   pages need.
   ===================================================================== */

:root {
  --amber: #ffb45c;
  --violet: #b79bff;
  --ood: #ff8ad4;
  --grid-line: rgba(203, 226, 255, 0.10);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.cmd-main { display: grid; gap: 18px; margin-top: 18px; }

/* ---------- panels ---------- */
.cmd-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  padding: 18px;
}
.cmd-panel > .cmd-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.cmd-kicker {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 5px;
}
.cmd-panel h2, .cmd-panel h3 { margin: 0; line-height: 1.2; }
.cmd-panel h2 { font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -0.01em; }
.cmd-panel h3 { font-size: 16px; }
.cmd-panel p.hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.cmd-lede { color: var(--muted); font-size: 14.5px; line-height: 1.62; margin: 8px 0 0; max-width: 74ch; }

/* ---------- hero ---------- */
.cmd-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.cmd-hero h1 {
  margin: 10px 0 0; font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08; letter-spacing: -0.022em;
}
@media (max-width: 1080px) { .cmd-hero { grid-template-columns: 1fr; } }

/* ---------- provenance chips ---------- */
.prov {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.prov::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.prov.live { color: var(--green); }
.prov.modeled { color: var(--cyan); }
.prov.synthetic { color: var(--violet); }
.prov.curated { color: var(--amber); }
.prov.notional { color: var(--subtle); }

/* ---------- F2T2EA ribbon ---------- */
.killchain {
  display: flex; gap: 5px; flex-wrap: wrap; align-items: stretch;
  padding: 10px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(5, 9, 18, 0.5);
}
.kc-step {
  flex: 1 1 88px; min-width: 84px; padding: 8px 9px; border-radius: 10px;
  border: 1px solid var(--grid-line); background: rgba(255,255,255,0.02);
}
.kc-step b {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.kc-step span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--subtle); line-height: 1.35; }
.kc-step.on { border-color: rgba(102,228,255,0.5); background: rgba(102,228,255,0.08); }
.kc-step.on b { color: var(--cyan); }
.kc-step.focus { border-color: var(--amber); background: rgba(255,180,92,0.13); }
.kc-step.focus b { color: var(--amber); }
.kc-step.off { opacity: 0.42; border-style: dashed; }
.kc-step.off b { color: var(--subtle); text-decoration: line-through; }

/* ---------- track table ---------- */
.track-list { max-height: 460px; overflow: auto; margin: 0 -4px; }
.track-row {
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto;
  gap: 9px; align-items: center; width: 100%; text-align: left;
  padding: 9px 10px; margin-bottom: 5px; border-radius: 12px;
  border: 1px solid var(--grid-line); background: rgba(255,255,255,0.018);
  color: var(--text); cursor: pointer; font: inherit;
  transition: border-color .16s, background .16s;
}
.track-row:hover { border-color: rgba(102,228,255,0.4); background: rgba(102,228,255,0.05); }
.track-row.sel { border-color: var(--cyan); background: rgba(102,228,255,0.11); }
.track-row.ood { border-color: rgba(255,138,212,0.55); }
.track-row.ood.sel { background: rgba(255,138,212,0.13); }
.track-id { font-family: var(--mono); font-size: 10px; color: var(--subtle); }
.track-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.track-sub { font-size: 10.5px; color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.track-eta { font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap; }
.track-eta small { display: block; font-size: 9px; color: var(--subtle); letter-spacing: 0.07em; }
.eta-crit { color: var(--red); }
.eta-warn { color: var(--amber); }
.eta-ok { color: var(--green); }

/* ---------- readouts ---------- */
.readout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; }
.readout {
  padding: 10px 11px; border-radius: 12px; border: 1px solid var(--grid-line);
  background: rgba(255,255,255,0.02);
}
.readout strong { display: block; font-family: var(--mono); font-size: 19px; letter-spacing: -0.02em; }
.readout span { display: block; margin-top: 3px; font-size: 10px; color: var(--subtle); letter-spacing: 0.07em; text-transform: uppercase; }
.readout.accent strong { color: var(--cyan); }
.readout.warn strong { color: var(--amber); }
.readout.bad strong { color: var(--red); }
.readout.good strong { color: var(--green); }

/* ---------- globe frame ---------- */
.cmd-globe-frame {
  position: relative; width: 100%; height: clamp(360px, 52vh, 620px);
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 42%, rgba(20,40,70,0.55), rgba(4,7,14,0.94));
}
.cmd-globe-frame > div { width: 100%; height: 100%; }
.console-tools {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: stretch;
  margin-bottom: 11px; width: 100%;
}
.gt {
  font: 600 11.5px/1.15 inherit; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.04);
  color: var(--text); cursor: pointer; white-space: nowrap;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
}
.gt:hover { border-color: var(--cyan); color: var(--cyan); }
.gt.on { background: rgba(102,228,255,0.16); border-color: var(--cyan); color: var(--cyan); }

/* ---------- timeline scrubber ---------- */
.scrub {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(5, 9, 18, 0.55); margin-bottom: 11px;
}
.scrub input[type=range] { flex: 1 1 190px; min-width: 150px; accent-color: var(--cyan); }
.scrub-clock { font-family: var(--mono); font-size: 17px; color: var(--cyan); white-space: nowrap; }
.scrub-clock small { display: block; font-size: 9.5px; color: var(--subtle); letter-spacing: 0.1em; }

/* ---------- assessment card (ICD 203 / 206) ---------- */
.assess { border: 1px solid rgba(102,228,255,0.3); border-radius: 16px; padding: 15px; background: rgba(102,228,255,0.045); }
.assess.novel { border-color: rgba(255,138,212,0.5); background: rgba(255,138,212,0.06); }
.assess-claim { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.assess-claim em { color: var(--cyan); font-style: normal; font-weight: 700; }
.assess.novel .assess-claim em { color: var(--ood); }
.assess-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.assess dl { margin: 0; display: grid; gap: 9px; }
.assess dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--subtle); margin-bottom: 3px;
}
.assess dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.assess dd ul { margin: 0; padding-left: 17px; }
.assess dd li { margin-bottom: 3px; }
.assess dd li::marker { color: var(--cyan); }

/* ---------- decision rules ---------- */
.rule {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px;
  align-items: center; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--grid-line); background: rgba(255,255,255,0.02); margin-bottom: 7px;
}
.rule.fires { border-color: var(--amber); background: rgba(255,180,92,0.09); }
.rule.infeasible { border-color: var(--red); background: rgba(255,107,122,0.10); }
.rule-name { font-size: 13px; font-weight: 600; }
.rule-auth { font-size: 10.5px; color: var(--subtle); margin-top: 2px; font-family: var(--mono); }
.rule-p { font-family: var(--mono); font-size: 15px; text-align: right; white-space: nowrap; }
.rule-p small { display: block; font-size: 9.5px; color: var(--subtle); }

/* ---------- charts ---------- */
.chart-frame { width: 100%; overflow: hidden; }
.chart-frame svg { display: block; width: 100%; height: auto; }
.bar-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }

/* ---------- stacked timeline ---------- */
.tl-bar { display: flex; width: 100%; height: 34px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.tl-seg { position: relative; min-width: 2px; }
.tl-seg.machine { background: rgba(59,130,246,0.55); }
.tl-seg.model { background: var(--cyan); }
.tl-seg.human { background: rgba(255,180,92,0.55); }
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: 11px; color: var(--muted); }
.tl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- tables ---------- */
.cmd-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--grid-line); }
table.cmd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
table.cmd-table th, table.cmd-table td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--grid-line); vertical-align: top; }
table.cmd-table th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--subtle); background: rgba(255,255,255,0.03);
  position: sticky; top: 0; z-index: 1;
}
table.cmd-table tbody tr:last-child td { border-bottom: none; }
table.cmd-table tbody tr:hover { background: rgba(102,228,255,0.045); }
table.cmd-table td.num { font-family: var(--mono); text-align: right; white-space: nowrap; }

/* ---------- callouts ---------- */
.callout {
  border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0;
  padding: 12px 15px; background: rgba(102,228,255,0.06);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.callout strong { color: var(--text); }
.callout.warn { border-left-color: var(--amber); background: rgba(255,180,92,0.07); }
.callout.gap { border-left-color: var(--red); background: rgba(255,107,122,0.07); }

/* ---------- boundary notice ---------- */
.boundary {
  border: 1px dashed rgba(255,107,122,0.42); border-radius: 14px;
  padding: 13px 15px; background: rgba(255,107,122,0.05);
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.boundary strong { color: var(--red); letter-spacing: 0.04em; }

/* ---------- two/three column ---------- */
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.console-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 330px); gap: 16px; align-items: start; }
@media (max-width: 1280px) { .console-layout { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); } .console-layout > .console-right { grid-column: 1 / -1; } }
@media (max-width: 900px) { .console-layout { grid-template-columns: 1fr; } }

/* ---------- misc ---------- */
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.field-row { display: grid; gap: 11px; }
.field-row label { display: block; font-size: 11px; color: var(--muted); }
.field-row label > span { display: flex; justify-content: space-between; margin-bottom: 5px; font-family: var(--mono); letter-spacing: 0.05em; }
.field-row input[type=range] { width: 100%; accent-color: var(--cyan); }
.field-row select {
  width: 100%; padding: 9px 10px; border-radius: 10px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line); background: rgba(6,10,20,0.92); color: var(--text);
}
.toggle-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-toggle {
  font: 600 11px/1 inherit; padding: 7px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--muted);
}
.chip-toggle[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: rgba(255,180,92,0.13); }
.status-line { font-family: var(--mono); font-size: 10.5px; color: var(--subtle); letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}
:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px;
}

/* ---------- nav accommodation for the expanded surface set ----------
   Nine surfaces no longer fit one desktop row at every viewport, so the
   link row is allowed to wrap and the type tightens slightly. Mobile is
   unaffected: the drawer in mobile-nav.js already owns that breakpoint. */
@media (min-width: 961px) {
  .topbar .navlinks { flex-wrap: wrap !important; justify-content: flex-end; row-gap: 2px; }
  .topbar .navlinks a { padding: 8px 10px; font-size: 0.80rem; }
}

/* ---------- glossary ---------- */
.gloss {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  margin: 0; cursor: help; border-bottom: 1px dotted rgba(102,228,255,0.6);
  text-underline-offset: 2px;
}
.gloss:hover, .gloss[aria-expanded="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
body.gloss-disabled .gloss { border-bottom: 0; cursor: inherit; color: inherit; pointer-events: none; }

.gloss-pop {
  position: absolute; z-index: 9999; width: min(340px, calc(100vw - 24px));
  border: 1px solid rgba(102,228,255,0.42); border-radius: 14px;
  background: rgba(8,12,22,0.985); backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.62); padding: 14px 15px 12px;
  opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s;
}
.gloss-pop.on { opacity: 1; transform: translateY(0); }
.gloss-close {
  position: absolute; top: 7px; right: 9px; background: none; border: 0;
  color: var(--subtle); font-size: 19px; line-height: 1; cursor: pointer; padding: 3px 5px;
}
.gloss-close:hover { color: var(--red); }
.gloss-term {
  margin: 0 0 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--cyan); padding-right: 22px;
}
.gloss-exp { margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.gloss-def { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.gloss-here {
  margin: 9px 0 0; padding: 8px 10px; border-radius: 9px; font-size: 12px; line-height: 1.5;
  background: rgba(102,228,255,0.07); border-left: 2px solid var(--cyan); color: var(--muted);
}
.gloss-here b { color: var(--text); }
.gloss-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--grid-line); flex-wrap: wrap;
}
.gloss-foot a { font-size: 11.5px; color: var(--cyan); text-decoration: none; }
.gloss-foot a:hover { text-decoration: underline; }
.gloss-off, .gloss-toggle {
  background: none; border: 1px solid var(--line); color: var(--subtle); cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
}
.gloss-off:hover, .gloss-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
.gloss-toggle[aria-pressed="false"] { opacity: 0.6; }

/* ---------- tutor ---------- */
.tut { border: 1px solid var(--grid-line); border-radius: 16px; margin-bottom: 12px; overflow: hidden; background: rgba(255,255,255,0.018); }
.tut > summary { cursor: pointer; padding: 15px 17px; list-style: none; display: flex; gap: 13px; align-items: flex-start; }
.tut > summary::-webkit-details-marker { display: none; }
.tut > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 19px; color: var(--cyan); line-height: 1; }
.tut[open] > summary::after { content: "\2212"; }
.tut > summary:hover { background: rgba(102,228,255,0.05); }
.tut-num { font-family: var(--mono); font-size: 11px; color: var(--cyan); padding-top: 3px; min-width: 22px; }
.tut-head h3 { margin: 0 0 4px; font-size: 15.5px; line-height: 1.3; }
.tut-head p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.tut-body { padding: 0 17px 16px 52px; }
@media (max-width: 620px) { .tut-body { padding: 0 14px 15px; } .tut > summary { padding: 13px 14px; } }
.tut-level { border-top: 1px solid var(--grid-line); padding-top: 13px; margin-top: 13px; }
.tut-level > b { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--subtle); margin-bottom: 6px; }
.tut-level p { margin: 0 0 8px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.tut-level p:last-child { margin-bottom: 0; }
.tut-level .eq {
  font-family: var(--mono); font-size: 12.5px; color: var(--text); background: rgba(5,9,18,0.6);
  border: 1px solid var(--grid-line); border-radius: 10px; padding: 11px 13px; margin: 9px 0;
  overflow-x: auto; white-space: pre;
}
.tut-mis { border-left: 3px solid var(--amber); background: rgba(255,180,92,0.07); padding: 10px 13px; border-radius: 0 10px 10px 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.tut-mis b { color: var(--amber); }
.tut-try { display: inline-block; margin-top: 11px; font-size: 12px; color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(102,228,255,0.35); }