/* =========================================================================
   AO Swag operating-layer briefing — editorial design system
   Light mode only. Borders, not shadows. One accent (AO teal #122B2C),
   used sparingly. Serif prose, grotesk labels. No gradients, no glows.
   ========================================================================= */

:root {
  color-scheme: light;

  /* neutrals (warm paper -> ink) */
  --paper:        #FBFAF7;
  --paper-raised: #FFFFFF;
  --ink:          #1A1A17;
  --ink-soft:     #3D3D38;
  --muted:        #6B6A62;
  --faint:        #93928A;

  /* hairlines */
  --line:        #E5E3DC;
  --line-strong: #D3D1C8;

  /* single accent */
  --accent:      #122B2C;
  --accent-soft: #3C5455;
  --accent-wash: #F0F3F2;

  /* type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", monospace;

  --measure: 68ch;
  --doc-max: 1420px;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---- labels / eyebrows ---- */
.kicker,
.eyebrow,
.ex-label,
.site-ref,
.tag,
.col-name,
.opt-name em,
.bar-label,
.phase-when,
.status-pill,
.chip-block span,
.rail-title span,
.feed-item span,
.run-top span {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================================
   Site header — logo top-left only
   ========================================================================= */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--doc-max);
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 56px) 20px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.brand img {
  width: 154px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-strong);
}
.site-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 11px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
}
.site-nav a:last-child { border-right: 0; }
.site-nav b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.site-nav span {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.site-nav a.current {
  background: var(--accent);
  color: var(--paper-raised);
}
.site-nav a.current b { color: var(--paper-raised); }
.site-nav a:hover:not(.current) {
  background: var(--accent-wash);
  color: var(--accent);
}

.site-ref {
  font-size: 12px;
  color: var(--muted);
}

/* =========================================================================
   Document column (editorial, left-aligned)
   ========================================================================= */

.doc {
  max-width: var(--doc-max);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(20px, 5vw, 56px) 40px;
}

/* keep prose to a comfortable measure; exhibits run wider */
.doc-head,
.prose,
.track,
.def-list,
.compare-cols {
  max-width: var(--measure);
}

/* ---- masthead of each document (not a centered hero) ---- */
.doc-head { margin-bottom: 12px; }

.kicker {
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 22px;
}

.doc-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

.dek {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.4em;
}

.recommendation {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}
.recommendation span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}

/* headline figures — surface the most important numbers first */
.headline-figures {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--ink);
  margin: 2em 0 0;
  max-width: 940px;
}
.headline-figures article {
  flex: 1 1 150px;
  padding: 18px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.headline-figures article:first-child { padding-left: 0; }
.headline-figures article:last-child { border-right: 0; }
.headline-figures strong {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-bottom: 6px;
}
.headline-figures span {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* =========================================================================
   Prose
   ========================================================================= */

.prose { margin: 2.6em 0 0; }
.prose p { margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }

.prose h2,
.def-list + .prose h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.9em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}

/* =========================================================================
   Exhibits (figures embedded in the prose)
   ========================================================================= */

.exhibit {
  margin: 3.4em 0;
  padding-top: 1.4em;
  border-top: 2px solid var(--ink);
}

/* non-wide exhibits: label/title sit in a left margin gutter (editorial sidehead),
   the table or chart uses the horizontal space to the right */
.exhibit:not(.wide) {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 44px;
  max-width: 940px;
}
.exhibit:not(.wide) > figcaption { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.exhibit:not(.wide) > :not(figcaption) { grid-column: 2; min-width: 0; }
.exhibit:not(.wide) .ex-title { font-size: 1.1rem; }

.exhibit.wide { max-width: 100%; }

.exhibit figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 1.3em;
}
.ex-label { font-size: 11px; color: var(--accent); }
.ex-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ex-note { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }

.source-line {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin: 1em 0 0;
}

/* ---- data tables ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.data-table tbody th {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}
.data-table td.num {
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
  padding-right: 22px;
  color: var(--accent);
}
.data-table td.note,
.data-table td.src {
  color: var(--muted);
  font-size: 0.86rem;
}
.data-table .src { font-family: var(--mono); }

.data-table.compare th[scope="row"] { display: flex; flex-direction: column; gap: 2px; }
.opt-name { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.opt-name em {
  font-style: normal;
  color: var(--accent);
  margin-left: 6px;
  font-size: 10px;
}
.opt-title { font-weight: 600; }
.compare td .sub { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 2px; }
.compare td b { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.row-pick { background: var(--accent-wash); }
.row-pick th[scope="row"] { border-left: 3px solid var(--accent); padding-left: 14px; }

/* ---- cost breakdown (Exhibit 3) ---- */
.cost-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.breakdown h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
}
.breakdown .opt-title { font-weight: 600; }
.breakdown .data-table { font-size: 0.86rem; }
.breakdown tbody th { font-family: var(--sans); font-weight: 400; color: var(--muted); }
.row-total th[scope="row"] { font-family: var(--serif); font-weight: 700; color: var(--ink); }
.row-total td.num { color: var(--accent); }
.row-total th, .row-total td { border-bottom: 0; border-top: 1px solid var(--ink); }

/* ---- bar chart ---- */
.bar-stack { display: flex; flex-direction: column; gap: 14px; }
.bar-line {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) 1fr auto;
  align-items: center;
  gap: 16px;
}
.bar-label { font-size: 11px; color: var(--ink-soft); }
.bar-track {
  height: 8px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
}
.bar-track i { display: block; height: 100%; background: var(--accent); }
.bar-value {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- 2x2 quadrant ---- */
.quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-strong);
  margin-top: 1.6em;
}
.quad article { padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quad article:nth-child(2n) { border-right: 0; }
.quad article:nth-last-child(-n+2) { border-bottom: 0; }
.quad strong { display: block; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.01em; margin-bottom: 6px; }
.quad p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.quad-best { background: var(--accent-wash); border-top: 2px solid var(--accent); }
.quad-best .tag {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 8px;
}

/* ---- definition list ---- */
.def-list { margin: 1.6em 0 0; border-top: 1px solid var(--line); }
.def-list > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.def-list dt { font-weight: 600; }
.def-list dd { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- talk track ---- */
.track { list-style: none; counter-reset: t; margin: 1.8em 0 0; padding: 0; }
.track li {
  counter-increment: t;
  padding: 18px 0 18px 52px;
  border-top: 1px solid var(--line);
  position: relative;
}
.track li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute;
  left: 0; top: 18px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--accent);
}
.track span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.track strong { display: block; font-size: 1.06rem; line-height: 1.3; margin-bottom: 4px; }
.track p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* ---- model flow ---- */
.model-flow { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line-strong); }
.model-flow article { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.model-flow article:last-child { border-bottom: 0; }
.model-flow span { display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 5px; }
.model-flow strong { font-weight: 500; font-size: 1rem; color: var(--ink-soft); }

/* ---- phase list ---- */
.phase-list { list-style: none; margin: 0; padding: 0; }
.phase-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.phase-list li:first-child { border-top: 1px solid var(--ink); }
.phase-when { font-size: 11px; color: var(--accent); padding-top: 2px; }
.phase-list strong { display: block; font-weight: 600; margin-bottom: 2px; }
.phase-list p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.sequence li { grid-template-columns: 180px 1fr; }

/* =========================================================================
   Shared panel chrome (exhibit mockups)
   ========================================================================= */

.panel {
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
}

.rail-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.rail-title span { font-size: 11px; color: var(--muted); }

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 8px;
}

/* buttons (static prototype affordances) */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper-raised);
  text-decoration: none;
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--accent); }

/* =========================================================================
   Page 02 · Dashboard exhibit
   ========================================================================= */

.signal-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-strong);
}
.signal-board article {
  padding: 18px;
  border-right: 1px solid var(--line);
  min-height: 205px;
  display: flex;
  flex-direction: column;
}
.signal-board article:last-child { border-right: 0; }
.signal-board span {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 10px;
}
.signal-board strong {
  display: block;
  font-family: var(--sans);
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.signal-board p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
.signal-track {
  height: 11px;
  border: 1px solid var(--line-strong);
  margin-top: auto;
}
.signal-track i { display: block; height: 100%; background: var(--accent); }

.observability-graph {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
}
.observability-graph article {
  position: relative;
  padding: 22px 20px 20px;
  border-right: 1px solid var(--line);
}
.observability-graph article:last-child { border-right: 0; }
.observability-graph article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 23px;
  right: -9px;
  width: 18px;
  height: 18px;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--sans);
  text-align: center;
  line-height: 18px;
}
.observability-graph span {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 28px;
}
.observability-graph h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.1;
  margin: 0 0 10px;
}
.observability-graph p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.dashboard-context {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 22px;
  margin: 2.4em 0 3.2em;
  max-width: 1080px;
}
.dashboard-context .illustrative-note { margin-bottom: 0; }
.proof-points {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding: 16px 0 8px;
}
.proof-points h2 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 10px;
}
.proof-points p {
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.42;
}
.proof-points p:first-of-type { border-top: 0; }

/* three-path comparison columns */
.compare-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-strong);
  margin: 1.8em 0 0;
}
.compare-cols article { padding: 18px; border-right: 1px solid var(--line); }
.compare-cols article:last-child { border-right: 0; }
.compare-cols header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.col-name { font-size: 11px; color: var(--muted); }
.compare-cols .tag { font-size: 9px; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; }
.compare-cols h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: 0 0 12px; line-height: 1.2; }
.col-price b { font-family: var(--sans); font-size: 1rem; font-variant-numeric: tabular-nums; }
.col-price span { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); margin: 2px 0 12px; }
.col-up { margin: 0 0 12px; font-size: 0.9rem; }
.col-con { margin: 0; font-size: 0.86rem; color: var(--muted); }
.col-con span { display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-soft); margin-bottom: 3px; }
.col-pick { background: var(--accent-wash); border-top: 3px solid var(--accent); }

/* dashboard mockup */
.command-shell { margin-top: 0; }
.dashboard-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}
.dash-list { border-right: 1px solid var(--line); }
.dash-list > button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.dash-list > button strong { display: block; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; margin-bottom: 3px; }
.dash-list > button small { display: block; font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
.dash-list > button.active { background: var(--accent-wash); border-left-color: var(--accent); }
.dash-list > button:hover:not(.active) { background: var(--paper); }
.dash-list > button.add-dashboard {
  border-top: 1px solid var(--ink);
  color: var(--accent);
}
.rail-foot { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.rail-foot span { font-family: var(--sans); font-size: 11px; color: var(--muted); }

.dash-panel { padding: 22px; }
.dash-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 18px; }
.dash-hero h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 6px; }
.dash-q { margin: 0; color: var(--muted); font-size: 0.92rem; }
.metric-stack {
  display: grid;
  gap: 8px;
  justify-items: end;
}
.live-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  padding: 5px 7px;
  color: var(--accent-soft);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.live-refresh i {
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.live-refresh small { color: var(--muted); font-size: 9px; }
.big-number { text-align: right; white-space: nowrap; }
.big-number strong { display: block; font-family: var(--sans); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.big-number span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

.data-table.tight { font-size: 0.9rem; }
.data-table.tight td, .data-table.tight th { padding: 9px 14px 9px 0; }
.illustrative-note {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.illustrative-note strong {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.illustrative-note span {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.38;
}
.issue-table tr[data-issue] { cursor: pointer; }
.issue-table tr[data-issue]:hover,
.issue-table tr.selected { background: var(--accent-wash); }
.trace-link {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.live-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.live-kpi-strip button {
  display: grid;
  gap: 6px;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--line);
  border-top: 3px solid transparent;
  background: var(--paper-raised);
  color: inherit;
  padding: 13px 14px;
  cursor: pointer;
  font: inherit;
}
.live-kpi-strip button:last-child { border-right: 0; }
.live-kpi-strip button.active {
  background: var(--accent-wash);
  border-top-color: var(--accent);
}
.live-kpi-strip span {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.live-kpi-strip strong {
  font-family: var(--sans);
  font-size: 1.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.live-kpi-strip small {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.32;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.chart-card {
  min-height: 245px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 14px;
}
.chart-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.chart-card header span {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.chart-card header strong {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.line-card svg {
  display: block;
  width: 100%;
  height: 150px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.line-card line {
  stroke: var(--line);
  stroke-width: 1;
}
.line-card polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.line-card circle {
  fill: var(--paper-raised);
  stroke: var(--accent);
  stroke-width: 2;
}
.line-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.driver-bars,
.source-readiness {
  display: grid;
  gap: 13px;
  margin-top: 6px;
}
.driver-bars div,
.source-readiness div {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 10px;
  align-items: center;
}
.driver-bars span,
.source-readiness span {
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.2;
}
.driver-bars i,
.source-readiness i {
  height: 11px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.driver-bars b,
.source-readiness b {
  display: block;
  height: 100%;
  background: var(--accent);
}
.driver-bars em,
.source-readiness em {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
.queue-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.queue-list button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  text-align: left;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding: 10px 0;
  cursor: pointer;
  font: inherit;
}
.queue-list button.active { color: var(--accent); }
.queue-list b,
.queue-list em {
  font-family: var(--mono);
  color: var(--accent-soft);
  font-size: 10px;
  font-style: normal;
}
.queue-list strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.2;
}
.queue-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}
.ranked-table-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ranked-table-wrap h4 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  margin: 0 0 18px;
}
.segmented button,
.builder-tabs button {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  cursor: pointer;
}
.segmented button:last-child,
.builder-tabs button:last-child { border-right: 0; }
.segmented button.active,
.builder-tabs button.active {
  background: var(--accent);
  color: var(--paper-raised);
}

.mini-analytics { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.mini-analytics h4 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.mini-analytics .bar-line { grid-template-columns: 80px 1fr auto; gap: 10px; margin-bottom: 9px; }
.handoff p { margin: 0 0 14px; font-size: 0.9rem; color: var(--ink-soft); }

.grounding { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.grounding span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-soft); margin-right: 6px; }

.trace-view,
.builder-view {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.trace-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.trace-head h4 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; margin: 0 0 5px; }
.trace-head p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.trace-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  margin-bottom: 18px;
}
.trace-grid h5,
.missing-access h5,
.builder-view h5,
.proof-grid h4 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}
.trace-grid p { margin: 0 0 6px; font-size: 0.88rem; color: var(--ink-soft); }
.source-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.source-chain span {
  font-family: var(--sans);
  font-size: 11px;
  border: 1px solid var(--line-strong);
  padding: 5px 8px;
}
.source-chain span:not(:last-child)::after {
  content: "→";
  color: var(--accent);
  margin-left: 8px;
}
.trace-table { margin-top: 8px; }
.missing-access {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.missing-access h5 { flex-basis: 100%; }
.missing-access span {
  font-family: var(--sans);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  color: var(--accent-soft);
}
.trace-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.builder-tabs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  margin-bottom: 16px;
}
.builder-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.builder-form label {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
}
.builder-form label.full { grid-column: 1 / -1; }
.builder-form span {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.builder-form strong { font-weight: 600; font-size: 0.92rem; line-height: 1.35; }

.free-builder { border-top: 0; padding-top: 0; }
.builder-copy {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.builder-copy h4 {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 6px;
}
.builder-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.dashboard-prompt {
  width: 100%;
  min-height: 138px;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 14px 15px;
  resize: vertical;
}
.build-explainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  margin-top: 16px;
}
.build-explainer article {
  padding: 13px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.build-explainer article:nth-child(2n) { border-right: 0; }
.build-explainer article:nth-last-child(-n+2) { border-bottom: 0; }
.build-explainer span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}
.build-explainer strong {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.build-explainer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.38;
}

.builder-rail { padding: 16px; }
.builder-rail h4 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.feed-item { display: block; width: 100%; text-align: left; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font: inherit; }
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { background: var(--paper); }
.feed-item span { display: inline-block; font-size: 9px; color: var(--muted); border: 1px solid var(--line-strong); padding: 1px 5px; margin-bottom: 5px; }
.feed-item.lvl-critical span { color: var(--accent); border-color: var(--accent); }
.feed-item strong { display: block; font-size: 0.85rem; margin-bottom: 3px; }
.feed-item p { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.rail-section { border-top: 1px solid var(--ink); margin-top: 16px; padding-top: 15px; }
.source-health-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.source-health-row strong { font-family: var(--sans); font-size: 0.78rem; }
.source-health-row span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.source-health-row small { grid-column: 1 / -1; color: var(--muted); line-height: 1.35; }
.full-btn { width: 100%; text-align: center; }

.state { font-family: var(--sans); font-size: 11px; color: var(--accent-soft); white-space: nowrap; }

/* =========================================================================
   Page 03 · Worker exhibit
   ========================================================================= */

.anatomy-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line-strong);
}
.anatomy-strip span {
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.anatomy-strip span:last-child { border-right: 0; }
.anatomy-strip span:first-child,
.anatomy-strip span:nth-child(5) { background: var(--accent-wash); color: var(--accent); }

.worker-console { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; }
.worker-list { border-right: 1px solid var(--line); }
.worker-list > button {
  display: block; width: 100%; text-align: left;
  padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
  background: transparent; cursor: pointer; font: inherit;
}
.worker-list > button strong { display: block; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; margin-bottom: 3px; line-height: 1.2; }
.worker-list > button small { display: block; font-size: 0.76rem; color: var(--muted); }
.worker-list > button.active { background: var(--accent-wash); border-left-color: var(--accent); }
.worker-list > button:hover:not(.active) { background: var(--paper); }

.sop { padding: 22px; border-right: 1px solid var(--line); }
.sop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.sop-head h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 0 0 5px; }
.sop-from { margin: 0; font-size: 0.85rem; color: var(--muted); }
.sop-headline { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.42; }
.status-pill { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); padding: 4px 9px; white-space: nowrap; }

.job-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.job-stats article {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
  padding: 11px 12px;
  border-right: 1px solid var(--line);
}
.job-stats article:last-child { border-right: 0; }
.job-stats strong {
  font-family: var(--sans);
  font-size: 1.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.job-stats small {
  grid-column: 2;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent-soft);
  background: transparent;
  flex: 0 0 auto;
}
.status-dot.active,
.status-dot.done,
.status-dot.draft { background: var(--accent); border-color: var(--accent); }
.status-dot.pending,
.status-dot.waiting,
.status-dot.remaining { background: var(--paper-raised); }
.control-note {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -7px 0 18px;
}
.control-note span {
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  padding: 5px 8px;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sop-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.sop-meta label {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sop-meta label:nth-child(4) { border-right: 0; }
.sop-meta label.full { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.sop-meta span {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.sop-meta strong { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }

.trigger-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--accent-wash);
  margin-bottom: 20px;
}
.trigger-banner p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.sop-actionbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--accent-wash);
  margin-bottom: 18px;
}
.sop-actionbar p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.run-btn:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sop-document-panel {
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
}
.doc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.doc-tools span {
  margin-right: auto;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.doc-tools button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 7px;
  cursor: pointer;
}
.doc-tools button:hover { color: var(--accent); border-color: var(--accent); }
.sop-sections { display: grid; }
.sop-section {
  border-bottom: 1px solid var(--line);
}
.sop-section:last-child { border-bottom: 0; }
.sop-section summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.sop-section summary::-webkit-details-marker { display: none; }
.sop-section summary::after {
  content: "+";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}
.sop-section[open] summary::after { content: "–"; }
.sop-section summary span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-soft);
}
.sop-section summary strong {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.2;
}
.sop-section summary em {
  padding-right: 20px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.2;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sop-section textarea {
  display: block;
  width: calc(100% - 28px);
  min-height: 76px;
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 10px 11px;
  resize: vertical;
}
.sop-section[open]:nth-child(4) textarea { min-height: 178px; }
.sop-doc-text {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 18px;
  resize: vertical;
}
.system-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.system-strip span {
  font-family: var(--sans);
  font-size: 11px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  padding: 5px 8px;
}
.worker-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.worker-proof-grid h4 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 12px;
}
.worker-proof-grid.compact {
  grid-template-columns: 1fr;
  gap: 0;
}

.run-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.run-grid h4,
.output-console h4 {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 12px;
}
.run-steps ol { list-style: none; margin: 0; padding: 0; }
.sop-edit-note { margin: -4px 0 12px; color: var(--muted); font-size: 0.86rem; }
.run-steps li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.run-steps .dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--line-strong);
  margin-top: 0.55em;
}
.run-steps li.done,
.run-steps li.current { color: var(--ink); }
.run-steps li.done .dot { background: var(--accent); border-color: var(--accent); }
.run-steps li.current .dot { border-color: var(--accent); border-width: 2px; }
.step-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 5px;
}
.editable-sop textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.35;
  padding: 8px 9px;
}
.editable-sop li.done textarea,
.editable-sop li.current textarea { border-color: var(--accent-soft); }
.step-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.step-tools button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 7px;
  cursor: pointer;
}
.step-tools button:hover { color: var(--accent); border-color: var(--accent); }

.audit-log {
  min-height: 220px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.audit-row {
  display: grid;
  grid-template-columns: 62px 58px 84px 1fr auto;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.35;
}
.audit-row time {
  font-family: var(--mono);
  color: var(--accent-soft);
}
.audit-row b {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-soft);
}
.trace-type,
.trace-source {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.trace-source { text-transform: none; letter-spacing: 0; color: var(--accent-soft); }
.audit-empty {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.worker-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 20px; }
.worker-metrics article { padding: 12px 14px; border-right: 1px solid var(--line); }
.worker-metrics article:last-child { border-right: 0; }
.worker-metrics span { display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 5px; }
.worker-metrics strong { font-size: 0.88rem; font-weight: 600; }

.chip-block { display: flex; gap: 14px; align-items: baseline; margin-bottom: 20px; flex-wrap: wrap; }
.chip-block > span { font-size: 11px; color: var(--muted); }
.chip-block div { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-block em { font-family: var(--sans); font-style: normal; font-size: 11px; padding: 4px 9px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.spec-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.spec-strip .chip-block { margin-bottom: 0; }

.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.approval-panel {
  border: 1px solid var(--line-strong);
  padding: 14px;
  background: var(--paper);
}
.approval-panel p { margin: 0 0 8px; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.4; }

.sop-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.sop-body h4 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; }
.sop-body article:last-child h4 { margin-top: 18px; }
.sop-body article:last-child h4:first-child { margin-top: 0; }
.sop-body ol, .sop-body ul { margin: 0; padding-left: 1.2em; }
.sop-body li { font-size: 0.9rem; margin-bottom: 7px; line-height: 1.4; }
.sop-body ul { list-style: none; padding-left: 0; }
.sop-body ul li { padding-left: 16px; position: relative; }
.sop-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.output-console { display: flex; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 18px; border: 1px solid var(--line-strong); background: var(--accent-wash); }
.output-console h4 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.output-console p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.console-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.run-rail { padding: 16px; }
.run-rail h4 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.run-rail article { padding: 11px 0; border-bottom: 1px solid var(--line); }
.run-rail article:last-child { border-bottom: 0; }
.run-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.run-top strong { font-size: 0.84rem; font-weight: 600; }
.run-top span { font-size: 9px; color: var(--muted); }
.run-rail p { margin: 4px 0; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.run-rail b { font-family: var(--sans); font-size: 0.82rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.rail-note { margin-bottom: 14px !important; }
.current-runs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.current-runs button {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.current-runs button.active {
  color: var(--accent);
}
.current-runs span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.current-runs span,
.current-runs small {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.current-runs strong {
  font-size: 0.84rem;
  line-height: 1.25;
}
.current-runs em {
  font-style: normal;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.25;
}
.observability-list {
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.observability-list div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.observability-list span {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.observability-list strong {
  font-size: 0.84rem;
  line-height: 1.25;
}
.rail-collapse {
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.rail-collapse summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.source-read-list {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}
.source-read-list article {
  border: 1px solid var(--line);
  padding: 9px 10px;
  background: var(--paper-raised);
}
.source-read-list strong,
.source-read-list span,
.source-read-list small {
  display: block;
  font-family: var(--sans);
  line-height: 1.25;
}
.source-read-list strong { font-size: 0.78rem; margin-bottom: 2px; }
.source-read-list span { color: var(--accent-soft); font-size: 10px; }
.source-read-list p { margin: 4px 0; font-size: 0.78rem; color: var(--ink-soft); }
.source-read-list small { color: var(--muted); font-size: 10px; }
.trigger-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.trigger-item {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.trigger-item.on { color: var(--accent); }
.trigger-item:hover { background: var(--paper); }
.t-event,
.t-arrow {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.trigger-item strong { font-size: 0.82rem; line-height: 1.25; }

/* =========================================================================
   Footer navigation (the only navigation)
   ========================================================================= */

.page-nav { margin-top: 4.5em; padding-top: 1.8em; border-top: 2px solid var(--ink); }
.nav-set { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 22px; padding: 0; }
.nav-set a { font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); text-decoration: none; }
.nav-set a:hover { color: var(--accent); }

.nav-jump { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.nav-jump a {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  max-width: var(--measure);
}
.nav-jump a:hover strong { color: var(--accent); }
.nav-jump span { display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 5px; }
.nav-jump strong { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }

.colophon { font-family: var(--sans); font-size: 11px; color: var(--faint); margin: 0; max-width: var(--measure); }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 900px) {
  .dashboard-layout,
  .worker-console { grid-template-columns: 1fr; }
  .dash-list, .dash-panel, .worker-list, .sop { border-right: 0; border-bottom: 1px solid var(--line); }
  .mini-analytics, .sop-body, .run-grid, .spec-strip, .proof-grid, .worker-proof-grid, .trace-grid, .builder-form { grid-template-columns: 1fr; }
  .dashboard-context { grid-template-columns: 1fr; }
  .signal-board,
  .observability-graph { grid-template-columns: 1fr 1fr; }
  .signal-board article:nth-child(2n),
  .observability-graph article:nth-child(2n) { border-right: 0; }
  .signal-board article:nth-child(-n+2),
  .observability-graph article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .observability-graph article::after { display: none; }
  .output-console { flex-direction: column; }
  .compare-cols { grid-template-columns: 1fr; }
  .compare-cols article { border-right: 0; border-bottom: 1px solid var(--line); }
  .compare-cols article:last-child { border-bottom: 0; }
  .cost-breakdown { grid-template-columns: 1fr; gap: 28px; }
  .exhibit:not(.wide) { grid-template-columns: 1fr; column-gap: 0; }
  .exhibit:not(.wide) > figcaption { margin-bottom: 1.2em; }
  .anatomy-strip { grid-template-columns: 1fr 1fr 1fr; }
  .job-stats { grid-template-columns: 1fr 1fr; }
  .job-stats article:nth-child(2n) { border-right: 0; }
  .job-stats article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .sop-meta { grid-template-columns: 1fr 1fr; }
  .sop-meta label:nth-child(2n) { border-right: 0; }
  .sop-meta label:nth-child(4) { border-bottom: 1px solid var(--line); }
}

/* wide inventory tables can scroll horizontally on narrow screens */
@media (max-width: 760px) {
  .exhibit.wide .source-health { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .site-head { align-items: flex-start; flex-direction: column; }
  .site-nav { width: 100%; }
  .site-nav a { flex: 1; justify-content: center; }
  .illustrative-note { grid-template-columns: 1fr; gap: 4px; }
  .quad, .worker-metrics { grid-template-columns: 1fr; }
  .quad article { border-right: 0; }
  .def-list > div { grid-template-columns: 1fr; gap: 4px; }
  .phase-list li, .sequence li { grid-template-columns: 1fr; gap: 6px; }
  .data-table.compare, .data-table.source-health { font-size: 0.86rem; }
  .dash-hero { flex-direction: column; }
  .metric-stack { justify-items: start; }
  .big-number { text-align: left; }
  .live-kpi-strip,
  .dashboard-charts { grid-template-columns: 1fr; }
  .live-kpi-strip button { border-right: 0; border-bottom: 1px solid var(--line); }
  .live-kpi-strip button:last-child { border-bottom: 0; }
  .driver-bars div,
  .source-readiness div { grid-template-columns: 86px 1fr; }
  .driver-bars em,
  .source-readiness em { grid-column: 2; }
  .anatomy-strip { grid-template-columns: 1fr; }
  .anatomy-strip span { border-right: 0; border-bottom: 1px solid var(--line); }
  .signal-board,
  .observability-graph,
  .build-explainer { grid-template-columns: 1fr; }
  .signal-board article,
  .observability-graph article,
  .build-explainer article { border-right: 0; border-bottom: 1px solid var(--line); }
  .job-stats { grid-template-columns: 1fr; }
  .job-stats article { border-right: 0; border-bottom: 1px solid var(--line); }
  .job-stats article:last-child { border-bottom: 0; }
  .sop-meta { grid-template-columns: 1fr; }
  .sop-meta label { border-right: 0; }
  .sop-section summary { grid-template-columns: 28px 1fr; }
  .sop-section summary em { grid-column: 2; }
  .audit-row { grid-template-columns: 1fr; }
  .sop-actionbar { align-items: flex-start; flex-direction: column; }
  .sop-doc-text { min-height: 420px; }
}

/* =========================================================================
   Live BI chart grid (Page 02) — added
   ========================================================================= */

.live-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; animation: livepulse 1.5s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.trend-top { display: flex; align-items: baseline; gap: 10px; margin: -2px 0 10px; }
.trend-top b { font-family: var(--sans); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.trend-top .delta { font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); }

.line-card path.line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.line-card path.area { fill: var(--accent-wash); stroke: none; }
.line-card .head-dot { fill: var(--paper-raised); stroke: var(--accent); stroke-width: 2; animation: livepulse 1.5s ease-in-out infinite; }

.column-chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 150px; padding-top: 6px; }
.column-chart .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.column-chart .col i { width: 66%; background: var(--accent); min-height: 4px; transition: height 0.7s cubic-bezier(.4,0,.2,1); }
.column-chart .col:nth-child(2) i { opacity: 0.74; }
.column-chart .col:nth-child(3) i { opacity: 0.5; }
.column-chart .col:nth-child(4) i { opacity: 0.3; }
.column-chart .col span { font-family: var(--sans); font-size: 10px; color: var(--muted); text-align: center; }

.donut-wrap { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center; }
.donut { width: 116px; height: 116px; transform: rotate(-90deg); }
.donut circle { fill: none; }
.donut .ring { stroke: var(--line); stroke-width: 5.5; }
.donut .seg { stroke: var(--accent); stroke-width: 5.5; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.donut-legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-family: var(--sans); font-size: 0.74rem; color: var(--ink-soft); }
.donut-legend i { width: 10px; height: 10px; background: var(--accent); display: inline-block; }
.donut-legend em { font-family: var(--mono); font-size: 10px; color: var(--muted); font-style: normal; }

.spark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spark-grid .spark { border: 1px solid var(--line); background: var(--paper-raised); padding: 9px 10px; display: grid; gap: 3px; }
.spark-grid .spark span { font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); line-height: 1.2; }
.spark-grid .spark b { font-family: var(--sans); font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.spark-grid .spark svg { width: 100%; height: 22px; margin-top: 2px; }
.spark-grid .spark svg path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

@media (max-width: 900px) {
  .dashboard-charts { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 100px 1fr; }
}

/* =========================================================================
   Page 02 — connected legacy sources, new-dashboard prompt, extra chart shapes
   ========================================================================= */

.connected-sources { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cs-label { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chips em { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--ink-soft); border: 1px solid var(--line-strong); padding: 3px 8px; background: var(--paper-raised); }
.cs-chips .cs-more { color: var(--muted); border-style: dashed; }

.new-dash { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.new-dash > strong { font-family: var(--sans); font-size: 0.82rem; }
.prompt-field { border: 1px solid var(--line-strong); background: var(--paper-raised); padding: 10px 11px; font-size: 0.84rem; color: var(--muted); line-height: 1.35; }
.prompt-field .caret { color: var(--accent); font-weight: 700; margin-right: 4px; }
.sys-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sys-chips em { font-family: var(--mono); font-size: 10.5px; font-style: normal; color: var(--accent-soft); border: 1px solid var(--line); padding: 2px 6px; }
.sys-chips .add { color: var(--muted); border-style: dashed; }
.new-dash small { font-size: 0.74rem; color: var(--muted); line-height: 1.4; }

.hbars { display: grid; gap: 14px; padding-top: 6px; }
.hbar { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; }
.hbar span { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-soft); }
.hbar i { height: 12px; border: 1px solid var(--line-strong); background: var(--paper); display: block; }
.hbar b { display: block; height: 100%; background: var(--accent); transition: width 0.7s cubic-bezier(.4,0,.2,1); }
.hbar em { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--muted); }

.stacked-wrap { display: grid; gap: 16px; padding-top: 10px; }
.stacked-bar { display: flex; height: 30px; border: 1px solid var(--line-strong); overflow: hidden; }
.stacked-bar i { display: block; height: 100%; background: var(--accent); border-right: 1px solid var(--paper-raised); transition: width 0.7s ease; }
.stacked-bar i:last-child { border-right: 0; }

.gauge-card { text-align: center; }
.gauge { width: 100%; height: 112px; margin-top: 6px; }
.gauge .g-track { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.gauge .g-fill { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 0.7s ease; }
.gauge-num { margin-top: -10px; }
.gauge-num b { font-family: var(--sans); font-weight: 700; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.gauge-num b i { font-style: normal; font-size: 1rem; color: var(--muted); }
.gauge-num span { display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.waterfall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 150px; padding-top: 8px; }
.waterfall .wf-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.waterfall .wf-col i { position: absolute; width: 62%; left: 19%; background: var(--accent); }
.waterfall .wf-col span { position: relative; font-family: var(--sans); font-size: 10px; color: var(--muted); }

.funnel { display: grid; gap: 10px; padding-top: 14px; }
.fn-row { display: grid; justify-items: center; gap: 4px; }
.fn-row b { display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--paper-raised); font-family: var(--sans); font-size: 0.8rem; font-weight: 600; height: 26px; transition: width 0.6s ease; }
.fn-row span { font-family: var(--sans); font-size: 10px; color: var(--muted); }

/* =========================================================================
   AO Swag wordmark, stronger live pulse, premium worker-fleet console
   ========================================================================= */

.wordmark { font-family: var(--sans); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--ink); }
.wordmark b { color: var(--accent); font-weight: 700; }

@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.55); } }
.live-dot { animation: livepulse 1.3s ease-in-out infinite; }

.live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--line-strong); padding: 4px 9px; white-space: nowrap; }
.live-pill.small { font-size: 9px; padding: 3px 7px; border: 0; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.status-dot.active { background: var(--accent); }
.status-dot.pending { background: var(--paper-raised); border: 1.5px solid var(--accent); }

.btn.small { font-size: 11px; padding: 7px 12px; justify-self: start; }

.worker-fleet { display: grid; grid-template-columns: 252px minmax(0, 1fr) 292px; }
.worker-fleet .worker-list { border-right: 1px solid var(--line); }
.worker-fleet .rail-title { display: flex; justify-content: space-between; align-items: center; }
.worker-fleet .worker-list > button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; background: transparent; cursor: pointer; font: inherit; padding: 13px 16px; }
.worker-fleet .worker-list > button.active { background: var(--accent-wash); border-left-color: var(--accent); }
.worker-fleet .worker-list > button:hover:not(.active) { background: var(--paper); }
.worker-fleet .worker-list > button strong { display: block; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; line-height: 1.2; }
.wl-meta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; color: var(--muted); }

.worker-detail { padding: 22px 24px; border-right: 1px solid var(--line); }
.wd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wd-head h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; margin: 4px 0 6px; letter-spacing: -0.01em; }
.wd-from { margin: 0; font-size: 0.85rem; color: var(--muted); }
.wd-from strong { color: var(--accent); font-weight: 600; }

.wd-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); margin: 20px 0; }
.wd-stats article { padding: 16px 18px; border-right: 1px solid var(--line); }
.wd-stats article:last-child { border-right: 0; }
.wd-stats strong { display: block; font-family: var(--sans); font-weight: 700; font-size: 1.95rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.wd-stats span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.wd-what { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.5; }

.wd-sop h4, .wd-foot h5, .fleet-head h4 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.sop-clean { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--ink); }
.sop-clean li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.sop-clean b { font-family: var(--sans); font-size: 0.8rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.sop-clean p { margin: 0; font-size: 0.95rem; line-height: 1.45; }

.wd-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.wd-foot p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
.sys-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-row em { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--ink-soft); border: 1px solid var(--line-strong); padding: 3px 8px; background: var(--paper-raised); }

.fleet-rail { padding: 16px; background: var(--paper); }
.fleet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fleet-head h4 { margin: 0; }
.fleet-rail .rail-note { font-size: 0.75rem; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }
.fleet-list { display: flex; flex-direction: column; }
.fleet-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.fleet-row:first-child { border-top: 0; }
.fleet-row .live-dot, .fleet-row .status-dot { margin-top: 5px; }
.fr-main b { font-family: var(--mono); font-size: 11px; color: var(--accent-soft); display: block; }
.fr-main p { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; }
.fleet-row time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.fleet-row.rev time { color: var(--accent); }

@media (max-width: 980px) {
  .worker-fleet { grid-template-columns: 1fr; }
  .worker-fleet .worker-list, .worker-detail { border-right: 0; border-bottom: 1px solid var(--line); }
  .wd-foot { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================================
   Worker — full-text SOP, see-full toggle, confidence block
   ========================================================================= */

.wd-sop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.link-toggle { background: transparent; border: 0; cursor: pointer; font-family: var(--sans); font-size: 11px; letter-spacing: 0.02em; color: var(--accent); padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.link-toggle:hover { color: var(--accent-soft); }

.sop-full { margin: 4px 0 22px; border: 1px solid var(--line-strong); }
.sop-full-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.sop-full-bar span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.sop-full-bar .muted { color: var(--muted); text-transform: none; letter-spacing: 0; }
.sop-doc-text { display: block; width: 100%; min-height: 360px; resize: vertical; border: 0; padding: 16px 18px; background: var(--paper-raised); color: var(--ink-soft); font-family: var(--mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; }
.sop-doc-text:focus { outline: 2px solid var(--accent-wash); outline-offset: -2px; }

.wd-confidence { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; margin-bottom: 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wd-confidence h5 { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.impact-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); align-items: start; }
.impact-row span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.impact-row.today span { color: var(--muted); }
.impact-row.to span { color: var(--accent); }
.impact-row p { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--ink-soft); }
.impact-row.to p { color: var(--ink); }

.wd-assure ul { list-style: none; margin: 0 0 14px; padding: 0; }
.wd-assure li { position: relative; padding: 0 0 8px 18px; font-size: 0.86rem; line-height: 1.4; color: var(--ink-soft); }
.wd-assure li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-size: 0.8rem; }
.grounded { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.grounded > span { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 2px; }
.grounded em { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--accent-soft); border: 1px solid var(--line); padding: 2px 6px; }

@media (max-width: 980px) {
  .wd-confidence { grid-template-columns: 1fr; gap: 18px; }
}

/* fleet — a job visibly completing */
@keyframes fadein { from { opacity: 0.35; } to { opacity: 1; } }
.fleet-row.done { animation: fadein 0.5s ease; }
.fleet-row.done .fr-main p { color: var(--accent-soft); }
.fleet-row.done time { color: var(--accent); }

/* =========================================================================
   Live / wow elements — type-in BI, operating pulse, system map, impact counter
   ========================================================================= */

/* type-in query bar (Page 02) */
.qbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line-strong); background: var(--paper-raised); margin-bottom: 18px; }
.qprompt { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--accent); padding: 3px 7px; white-space: nowrap; }
.qtext { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.qcaret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 1px; vertical-align: -2px; animation: livepulse 0.9s steps(1) infinite; }
.qstatus { font-family: var(--sans); font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qstatus.done { color: var(--accent); }

/* operating pulse (Brief) */
.ops-pulse { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; max-width: 940px; margin: 14px 0 0; padding: 12px 0 0; }
.op-label { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.op-stat { display: inline-flex; align-items: baseline; gap: 7px; }
.op-stat strong { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.op-stat em { font-family: var(--sans); font-style: normal; font-size: 11px; color: var(--muted); }

/* live system map — reading-now highlight */
.cs-chips em.reading { background: var(--accent); color: var(--paper-raised); border-color: var(--accent); }

/* worker impact counter */
.live-counter { display: inline-flex; align-items: baseline; gap: 9px; margin: 0 0 20px; padding: 9px 14px; border-left: 3px solid var(--accent); background: var(--accent-wash); }
.live-counter .live-dot { align-self: center; }
.live-counter strong { font-family: var(--sans); font-weight: 700; font-size: 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.live-counter em { font-style: normal; font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* calmer chart endpoint + static system chips */
.line-card .head-dot { animation: none; }

/* =========================================================================
   New-dashboard compose screen, fleet trace overlay, worker feedback
   ========================================================================= */

.command-shell, .worker-fleet { position: relative; }

.new-dash-btn { display: block; width: 100%; text-align: left; border: 0; border-top: 1px dashed var(--line-strong); border-left: 3px solid transparent; background: transparent; cursor: pointer; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--accent); padding: 14px 16px; }
.new-dash-btn:hover { background: var(--accent-wash); }

/* compose / trace overlays */
.compose-overlay, .trace-overlay { position: absolute; inset: 0; z-index: 6; background: var(--paper-raised); display: flex; align-items: flex-start; justify-content: center; padding: 48px 28px; overflow: auto; }
.compose-card { max-width: 560px; width: 100%; margin-top: 6vh; }
.compose-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; margin: 4px 0 18px; letter-spacing: -0.01em; }
.compose-input { width: 100%; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper-raised); }
.compose-input:focus { outline: 2px solid var(--accent-wash); outline-offset: -2px; }
.compose-actions { display: flex; gap: 10px; margin: 16px 0 14px; }
.compose-note { font-size: 0.82rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* trace overlay */
.trace-card { max-width: 640px; width: 100%; }
.trace-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.trace-card-head h3 { font-family: var(--mono); font-size: 1rem; margin: 4px 0 0; }
.trace-steps { list-style: none; margin: 0; padding: 0; }
.trace-steps li { display: grid; grid-template-columns: 16px 1fr auto; gap: 14px; padding: 12px 0 12px 4px; border-left: 2px solid var(--line); margin-left: 6px; }
.trace-steps .ts-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--paper-raised); border: 1.5px solid var(--line-strong); margin-left: -12px; margin-top: 4px; }
.trace-steps li.ts-done .ts-dot { background: var(--accent); border-color: var(--accent); }
.trace-steps li.ts-now { border-left-color: var(--accent); }
.trace-steps li.ts-now .ts-dot { border-color: var(--accent); animation: livepulse 1.3s ease-in-out infinite; }
.trace-steps .ts-body b { display: block; font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 3px; }
.trace-steps li.ts-now .ts-body b { color: var(--accent); }
.trace-steps .ts-body p { margin: 0; font-size: 0.92rem; line-height: 1.4; color: var(--ink-soft); }
.trace-steps li.ts-now .ts-body p, .trace-steps li.ts-done .ts-body p { color: var(--ink); }
.trace-steps time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; padding-top: 3px; }
.trace-steps li.ts-now time { color: var(--accent); }
.trace-note { font-size: 0.8rem; color: var(--muted); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

.fleet-row[data-trace] { cursor: pointer; }
.fleet-row[data-trace]:hover { background: var(--accent-wash); }

/* worker feedback */
.wd-feedback { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.feedback-box { margin-top: 12px; }
.feedback-box textarea { width: 100%; border: 1px solid var(--line-strong); background: var(--paper-raised); padding: 11px 13px; font-family: var(--serif); font-size: 0.95rem; line-height: 1.5; resize: vertical; }
.feedback-box textarea:focus { outline: 2px solid var(--accent-wash); outline-offset: -2px; }
.feedback-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.feedback-actions .muted { font-size: 0.78rem; color: var(--muted); }

/* waterfall: labels below the bars (fix overlap), smoother trend line */
.waterfall { grid-template-columns: repeat(4, 1fr); gap: 14px; height: 150px; padding-top: 8px; align-items: stretch; }
.waterfall .wf-col { display: grid; grid-template-rows: 1fr auto; min-height: 0; height: auto; gap: 0; }
.waterfall .wf-bars { position: relative; }
.waterfall .wf-col i { position: absolute; left: 18%; width: 64%; }
.waterfall .wf-col span { position: static; text-align: center; padding-top: 8px; }
.line-card path.line { stroke-linejoin: round; stroke-linecap: round; }

/* waterfall fix v2: give the bar area a real height */
.waterfall { grid-template-columns: repeat(4, 1fr); grid-template-rows: 150px; gap: 14px; padding-top: 8px; height: auto; align-items: stretch; }
.waterfall .wf-col { display: grid; grid-template-rows: 1fr auto; min-height: 0; height: 100%; gap: 0; }
.waterfall .wf-bars { position: relative; min-height: 0; }
.waterfall .wf-col i { position: absolute; left: 18%; width: 64%; background: var(--accent); }
.waterfall .wf-col span { position: static; text-align: center; padding-top: 8px; }

/* waterfall fix v3: explicit bar-area height so % bars resolve */
.waterfall { display: flex; align-items: flex-end; gap: 14px; height: auto; padding-top: 8px; }
.waterfall .wf-col { flex: 1; display: flex; flex-direction: column; height: auto; }
.waterfall .wf-bars { position: relative; height: 124px; min-height: 124px; }
.waterfall .wf-col i { position: absolute; left: 18%; width: 64%; background: var(--accent); }
.waterfall .wf-col span { text-align: center; padding-top: 8px; font-family: var(--sans); font-size: 10px; color: var(--muted); }

/* waterfall fix v4: grid columns for width + explicit bar height */
.waterfall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: auto; padding-top: 8px; align-items: end; }
.waterfall .wf-col { display: block; height: auto; }
.waterfall .wf-bars { position: relative; height: 124px; min-height: 124px; }
.waterfall .wf-col i { position: absolute; left: 18%; width: 64%; background: var(--accent); }
.waterfall .wf-col span { display: block; text-align: center; padding-top: 8px; font-family: var(--sans); font-size: 10px; color: var(--muted); }