/* =====================================================================
   Cyberstrata — component styles
   Reads the custom properties compiled from tokens.json (tokens.css).
   One stylesheet, two layers. Set data-theme on any root element:
     document · document-dark   — what people read (site, decks, papers)
     app · app-dark             — what people operate (the product)
   Prefix: c- (component). Modifiers: --variant. State: .is-*.
   ===================================================================== */

/* The name. Change it here and every wordmark follows. */
:root { --brand-name: "Cyberstrata"; }

/* ---------------------------------------------------------------------
   Layer switches — the only values besides colour that differ by layer.
   Document: square, Mono uppercase labels and controls.
   App: 4px radius, Sans sentence-case labels and controls, denser text.
   --------------------------------------------------------------------- */
:root, [data-theme="document"], [data-theme="document-dark"] {
  --l-radius: var(--radius-none);
  --l-marker-radius: 0;
  --l-label-font: var(--font-mono);
  --l-label-track: 0.08em;
  --l-label-case: uppercase;
  --l-control-font: var(--font-mono);
  --l-control-size: 12px;
  --l-control-lh: 16px;
  --l-control-track: 0.08em;
  --l-control-case: uppercase;
  --l-input-size: 16px;
  --l-input-lh: 24px;
  --l-text-size: 16px;
  --l-text-lh: 24px;
  --l-head-bg: transparent;
  --l-head-rule: var(--ink);
}
[data-theme="app"], [data-theme="app-dark"] {
  --l-radius: var(--radius-app);
  --l-marker-radius: var(--radius-dot);
  --l-label-font: var(--font-sans);
  --l-label-track: 0;
  --l-label-case: none;
  --l-control-font: var(--font-sans);
  --l-control-size: 14px;
  --l-control-lh: 20px;
  --l-control-track: 0;
  --l-control-case: none;
  --l-input-size: 14px;
  --l-input-lh: 20px;
  --l-text-size: 14px;
  --l-text-lh: 20px;
  --l-head-bg: var(--ground-alt);
  --l-head-rule: var(--line);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
:root, [data-theme] { color-scheme: light; }
[data-theme$="-dark"] { color-scheme: dark; }
[data-theme] { background: var(--ground); color: var(--ink); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--l-text-size);
  line-height: var(--l-text-lh);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--signal-soft); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  [class^="c-"], [class*=" c-"] { transition: none !important; }
}

/* Shared type voices, used inside components */
.c-label {
  font-family: var(--l-label-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: var(--l-label-track);
  text-transform: var(--l-label-case);
  color: var(--ink-2);
}
.c-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--ink-3);
}
.c-code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   Wordmark — the name in type. No logo exists yet.
   --------------------------------------------------------------------- */
.c-wordmark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.c-wordmark::before { content: var(--brand-name); }

/* ---------------------------------------------------------------------
   Link
   --------------------------------------------------------------------- */
.c-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease);
}
.c-link:hover { text-decoration-color: var(--ink); }
.c-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------------
   Button — 40px, one primary per view
   --------------------------------------------------------------------- */
.c-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control);
  padding: 0 var(--space-4);
  border: var(--stroke) solid var(--line-strong);
  border-radius: var(--l-radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--l-control-font);
  font-size: var(--l-control-size);
  line-height: var(--l-control-lh);
  font-weight: 500;
  letter-spacing: var(--l-control-track);
  text-transform: var(--l-control-case);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.c-btn:hover { border-color: var(--ink); }
.c-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.c-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.c-btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.c-btn--quiet { border-color: transparent; padding: 0 var(--space-3); }
.c-btn--quiet:hover { border-color: transparent; background: var(--ground-alt); }
.c-btn--critical { background: var(--critical); border-color: var(--critical); color: var(--on-critical); }
.c-btn--critical:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.c-btn--icon { width: var(--control); padding: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; letter-spacing: 0; text-transform: none; }
.c-btn--touch { height: var(--control-touch); }
.c-btn--menu::after {
  content: ""; box-sizing: border-box; width: 6px; height: 6px; margin: -4px 0 0 var(--space-1);
  border-right: var(--stroke) solid currentColor; border-bottom: var(--stroke) solid currentColor; transform: rotate(45deg);
}
.c-btn:disabled, .c-btn[aria-disabled="true"] {
  background: transparent; border-color: var(--line); color: var(--ink-3); cursor: not-allowed;
}
.c-btn--primary:disabled, .c-btn--primary[aria-disabled="true"] { background: var(--line); border-color: var(--line); }

/* ---------------------------------------------------------------------
   Field — label, control, unit, help
   --------------------------------------------------------------------- */
.c-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.c-field__label {
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-2);
}
.c-field__control {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control);
  padding: 0 var(--space-3);
  border: var(--stroke) solid var(--line-strong);
  border-radius: var(--l-radius);
  background: var(--ground-raised);
  transition: border-color var(--duration-fast) var(--ease);
}
.c-field__control:hover { border-color: var(--ink-2); }
.c-field__control:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.c-field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--l-input-size);
  line-height: var(--l-input-lh);
}
.c-field__input::placeholder { color: var(--ink-3); opacity: 1; }
.c-field__unit { flex: none; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-field__help { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-field--invalid .c-field__control { border-color: var(--critical); }
.c-field--invalid .c-field__help { color: var(--ink); }
.c-field--invalid .c-field__help::before {
  content: ""; flex: none; width: var(--marker); height: var(--marker); background: var(--critical);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.c-field--disabled .c-field__control { border-color: var(--line); background: var(--ground-alt); }
.c-field--disabled .c-field__input { color: var(--ink-3); }

/* ---------------------------------------------------------------------
   Check — selection box for tables
   --------------------------------------------------------------------- */
.c-check {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: var(--stroke) solid var(--line-strong);
  border-radius: calc(var(--l-radius) / 2);
  background: var(--ground-raised);
  cursor: pointer;
  vertical-align: middle;
}
.c-check:checked { background: var(--signal); border-color: var(--signal); }
.c-check:checked::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--on-signal); border-bottom: 2px solid var(--on-signal);
  transform: rotate(-45deg);
}
.c-check:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------------
   Marker — 8px state shape. Square in documents, round in the App.
   Shape carries meaning with the word next to it; colour never alone.
   --------------------------------------------------------------------- */
.c-marker {
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  width: var(--marker);
  height: var(--marker);
  border-radius: var(--l-marker-radius);
  background: var(--ink);
}
.c-marker--hollow { background: transparent; border: var(--stroke) solid var(--ink-2); }
.c-marker--off { background: transparent; border: var(--stroke) solid var(--line-strong); }
.c-marker--live { background: var(--live); }
.c-marker--warning { border-radius: 0; background: var(--warning-mark); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c-marker--critical { border-radius: 0; background: var(--critical); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------------------------------------------------------------------
   State — a marker and a word. Normal states are not coloured.
   --------------------------------------------------------------------- */
.c-state {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 20px;
  font-family: var(--l-label-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: var(--l-label-track);
  text-transform: var(--l-label-case);
  color: var(--ink);
  white-space: nowrap;
}
.c-state::before {
  content: ""; box-sizing: border-box; flex: none; width: var(--marker); height: var(--marker);
  border-radius: var(--l-marker-radius); background: var(--ink);
}
.c-state--done::before { background: var(--ink); }
.c-state--idle { color: var(--ink-2); }
.c-state--idle::before { background: transparent; border: var(--stroke) solid var(--ink-2); }
.c-state--off { color: var(--ink-3); }
.c-state--off::before { background: transparent; border: var(--stroke) solid var(--line-strong); }
.c-state--live::before { background: var(--live); }
.c-state--warning, .c-state--critical { padding: 0 var(--space-2); border-radius: var(--l-radius); }
.c-state--warning { background: var(--warning); color: var(--on-warning); }
.c-state--warning::before { border-radius: 0; background: var(--on-warning); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c-state--critical { background: var(--critical); color: var(--on-critical); }
.c-state--critical::before { border-radius: 0; background: var(--on-critical); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------------------------------------------------------------------
   Evidence — the grade of a number. The key is the chart line type.
   Measured ━ 2px solid · Simulated ─ 1px solid · Projected ╍ 4/4 dash · Target ┈ 2/2 dot
   --------------------------------------------------------------------- */
.c-ev {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.c-ev::before { content: ""; flex: none; width: 16px; height: 2px; background: currentColor; }
.c-ev--measured::before { height: 2px; }
.c-ev--simulated::before { height: 1px; }
.c-ev--projected::before { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); }
.c-ev--target::before { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }

/* ---------------------------------------------------------------------
   Section header — number, label, aside over a 1px ink rule; then the finding
   --------------------------------------------------------------------- */
.c-section { display: block; }
.c-section__bar {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--stroke) solid var(--l-head-rule);
}
.c-section__label {
  margin: 0;
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink);
}
.c-section__num { color: var(--ink-3); }
.c-section__aside { margin-left: auto; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); text-align: right; }
.c-section__title {
  margin: var(--space-8) 0 0;
  max-width: 894px;
  font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.c-section__lead {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 400;
  color: var(--ink-2);
  text-wrap: pretty;
}
.c-section--compact .c-section__title { margin-top: var(--space-4); font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------
   Metric — label, value + unit, delta, basis. Lives in a hairline grid.
   --------------------------------------------------------------------- */
.c-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stroke);
  border: var(--stroke) solid var(--line);
  border-radius: var(--l-radius);
  background: var(--line);
  overflow: hidden;
}
.c-metrics:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.c-metrics:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-metrics:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .c-metrics { grid-template-columns: minmax(0, 1fr) !important; } }
.c-metric {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-6);
  background: var(--ground-raised);
}
.c-metric__label {
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-2);
}
.c-metric__value {
  display: flex; align-items: baseline; gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink);
}
.c-metric__unit { font-family: var(--font-mono); font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--ink-3); }
.c-metric__delta { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.c-metric__basis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3);
}
.c-metric--key .c-metric__num { color: var(--signal); }
.c-metric--hero .c-metric__value { font-size: 48px; line-height: 48px; letter-spacing: -0.02em; }
.c-metric--hero .c-metric__unit { font-size: 16px; line-height: 24px; }

/* ---------------------------------------------------------------------
   Table — one table for spec sheets, logs and the App's lists. Rows 40px.
   --------------------------------------------------------------------- */
.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.c-table th, .c-table td {
  box-sizing: border-box;
  height: var(--control);
  padding: 0 var(--space-4) 0 0;
  border-bottom: var(--stroke) solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.c-table th:first-child, .c-table td:first-child { padding-left: 0; }
.c-table th:last-child, .c-table td:last-child { padding-right: 0; }
.c-table thead th {
  height: 32px;
  background: var(--l-head-bg);
  border-bottom-color: var(--l-head-rule);
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-2);
  white-space: nowrap;
}
.c-table__num { text-align: right !important; white-space: nowrap; }
.c-table__unit { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.c-table__id { font-family: var(--font-mono); font-size: 14px; line-height: 20px; white-space: nowrap; }
.c-table__muted { color: var(--ink-2); }
.c-table__group th {
  height: 48px;
  padding-top: var(--space-4);
  vertical-align: bottom;
  border-bottom-color: var(--line-strong);
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink);
}
.c-table .is-key .c-table__num { color: var(--signal); }
/* App behaviour: framed panel, inset cells, hover and selection */
.c-table--panel {
  border: var(--stroke) solid var(--line);
  border-radius: var(--l-radius);
  background: var(--ground-raised);
  overflow: hidden;
}
.c-table--panel th:first-child, .c-table--panel td:first-child { padding-left: var(--space-4); }
.c-table--panel th:last-child, .c-table--panel td:last-child { padding-right: var(--space-4); }
.c-table--panel tbody tr:last-child td { border-bottom: 0; }
.c-table--panel thead th:first-child { border-top-left-radius: var(--l-radius); }
.c-table--panel thead th:last-child { border-top-right-radius: var(--l-radius); }
.c-table--interactive tbody tr { cursor: pointer; transition: background-color var(--duration-fast) var(--ease); }
.c-table--interactive tbody tr:hover td { background: var(--ground-alt); }
.c-table tbody tr.is-selected td { background: var(--signal-soft); }
.c-table tbody tr.is-critical td { background: var(--critical-soft); }
.c-table tbody tr.is-warning td { background: var(--warning-soft); }
.c-table th.c-table__check, .c-table td.c-table__check { width: 16px; }
.c-table--touch td { height: var(--control-touch); }

/* ---------------------------------------------------------------------
   TRL — nine segments per subsystem, EU H2020 definitions
   --------------------------------------------------------------------- */
.c-trl { display: block; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); }
.c-trl__row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 200px 176px 32px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  min-height: var(--control);
  border-bottom: var(--stroke) solid var(--line);
}
.c-trl__row--head {
  min-height: 32px;
  border-bottom-color: var(--l-head-rule);
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-2);
}
.c-trl__bar { display: grid; grid-template-columns: repeat(9, 16px); gap: 4px; }
.c-trl__seg { box-sizing: border-box; height: 8px; border: var(--stroke) solid var(--line-strong); }
.c-trl__seg.is-on { background: var(--ink); border-color: var(--ink); }
.c-trl__row.is-key .c-trl__seg.is-on { background: var(--signal); border-color: var(--signal); }
.c-trl__level { font-weight: 500; text-align: right; }
.c-trl__row.is-key .c-trl__level { color: var(--signal); }
.c-trl__desc { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   Matrix — a heatmap that is also a table: every cell prints its value
   --------------------------------------------------------------------- */
.c-matrix { width: max-content; border-collapse: separate; border-spacing: 2px; font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.c-matrix th { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.c-matrix thead th { height: 32px; padding: 0 0 var(--space-2); text-align: center; vertical-align: bottom; }
.c-matrix tbody th { padding: 0 var(--space-4) 0 0; text-align: right; }
.c-matrix td { box-sizing: border-box; width: 96px; height: var(--control); text-align: center; vertical-align: middle; }
.c-matrix .s1 { background: var(--seq-1); color: var(--ink); }
.c-matrix .s2 { background: var(--seq-2); color: var(--ink); }
.c-matrix .s3 { background: var(--seq-3); color: var(--ink); }
.c-matrix .s4 { background: var(--seq-4); color: var(--ink); }
.c-matrix .s5 { background: var(--seq-5); color: var(--on-ink); }
.c-matrix .s6 { background: var(--seq-6); color: var(--on-ink); }
.c-matrix td.is-base { background: var(--ground-alt); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.c-scale { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-scale__steps { display: grid; grid-template-columns: repeat(6, 32px); gap: 2px; }
.c-scale__steps > span { height: 8px; }

/* ---------------------------------------------------------------------
   Figure — numbered, titled, sourced. Every figure has a data view.
   --------------------------------------------------------------------- */
.c-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.c-figure__head { display: flex; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--stroke) solid var(--line); }
.c-figure__num { flex: none; font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-3); }
.c-figure__title { flex: 1 1 auto; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.c-figure__plot { position: relative; min-width: 0; }
.c-figure__plot svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); font-size: 12px; }
.c-figure__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.c-figure__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-figure__key::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--key, var(--ink)); }
.c-figure__key--projected::before { background: repeating-linear-gradient(90deg, var(--key, var(--ink)) 0 4px, transparent 4px 8px); }
.c-figure__key--target::before { background: repeating-linear-gradient(90deg, var(--key, var(--ink)) 0 2px, transparent 2px 4px); }
.c-figure__key--simulated::before { height: 1px; }
.c-figure__source { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-figure__data { display: none; }
.c-figure.is-data .c-figure__data { display: block; }
.c-figure.is-data .c-figure__plot { display: none; }
/* chart furniture, for inline SVG */
.c-chart-grid { stroke: var(--data-grid); stroke-width: 1; shape-rendering: crispEdges; }
.c-chart-axis { stroke: var(--data-axis); stroke-width: 1; shape-rendering: crispEdges; }
.c-chart-tick { fill: var(--ink-3); }
.c-chart-label { fill: var(--ink); font-family: var(--font-sans); font-size: 14px; }
.c-chart-label--2 { fill: var(--ink-2); }
.c-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-chart-line--1 { stroke: var(--data-1); }
.c-chart-line--2 { stroke: var(--data-2); }
.c-chart-line--3 { stroke: var(--data-3); }
.c-chart-line--simulated { stroke-width: 1; }
.c-chart-line--projected { stroke-dasharray: 4 4; stroke-linecap: butt; }
.c-chart-line--target { stroke-dasharray: 2 2; stroke-linecap: butt; stroke: var(--ink-3); }
.c-chart-dot { stroke: var(--ground-raised); stroke-width: 2; }
.c-chart-cross { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.c-tooltip {
  position: absolute; pointer-events: none; z-index: 2;
  box-sizing: border-box; min-width: 160px; padding: var(--space-2) var(--space-3);
  border-radius: var(--l-radius); background: var(--ink); color: var(--on-ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px;
  box-shadow: var(--shadow-float);
}
.c-tooltip__head { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--on-ink-2); margin-bottom: var(--space-1); }
.c-tooltip__row { display: flex; align-items: center; gap: var(--space-2); }
.c-tooltip__row b { font-weight: 500; margin-left: auto; padding-left: var(--space-4); }
.c-tooltip__row i { width: 12px; height: 2px; background: currentColor; flex: none; }

/* ---------------------------------------------------------------------
   Lineage — where a skill came from and where it went
   --------------------------------------------------------------------- */
.c-lineage { display: flex; align-items: stretch; min-width: 0; }
.c-lineage__node {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  border: var(--stroke) solid var(--line-strong);
  border-radius: var(--l-radius);
  background: var(--ground-raised);
}
.c-lineage__node.is-key { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.c-lineage__role { font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-3); margin-bottom: var(--space-1); }
.c-lineage__id { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.c-lineage__what { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.c-lineage__meta { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-lineage__link { flex: 0 0 48px; position: relative; }
.c-lineage__link::before { content: ""; position: absolute; left: 0; right: 4px; top: 50%; border-top: var(--stroke) solid var(--line-strong); }
.c-lineage__link::after {
  content: ""; position: absolute; right: 0; top: calc(50% - 4px); width: 8px; height: 9px;
  background: var(--line-strong); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------------------------------------------------------------------
   Title block — every document and slide is identified, versioned, dated
   --------------------------------------------------------------------- */
.c-titleblock {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) repeat(5, auto);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--l-radius);
  background: var(--ground-raised);
}
.c-titleblock__cell {
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-left: var(--stroke) solid var(--line-strong);
}
.c-titleblock__cell:first-child { border-left: 0; justify-content: center; }
.c-titleblock__k { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.c-titleblock__v { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-titleblock__v--id { font-family: var(--font-mono); }
.c-titlebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--stroke) solid var(--line-strong);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3);
}
.c-titlebar > :last-child { margin-left: auto; }

/* ---------------------------------------------------------------------
   Document tile — the data room. A4 thumbnail, ID, title, meta.
   --------------------------------------------------------------------- */
.c-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: var(--space-6); }
.c-doc {
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border: var(--stroke) solid var(--line);
  border-radius: var(--l-radius);
  background: var(--ground-raised);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease);
}
.c-doc:hover { border-color: var(--ink); }
.c-doc:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.c-doc__page {
  box-sizing: border-box;
  aspect-ratio: 1 / 1.4142;
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding: var(--space-4) var(--space-4) 0;
  border: var(--stroke) solid var(--line);
  background: var(--ground);
  overflow: hidden;
}
.c-doc__page > i { display: block; height: 2px; background: var(--line); }
.c-doc__page > i.h { height: 4px; width: 60%; background: var(--ink-3); margin-bottom: var(--space-2); }
.c-doc__page > i.s { width: 70%; }
.c-doc__page > b { display: block; flex: none; height: 28%; margin: var(--space-2) 0; border: var(--stroke) solid var(--line); }
.c-doc__id { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-doc__title { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.c-doc__meta { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   Nav — 64px bar: wordmark, sections, one action
   --------------------------------------------------------------------- */
.c-nav {
  box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-8);
  height: var(--nav);
  padding: 0 var(--space-6);
  border-bottom: var(--stroke) solid var(--line);
  background: var(--ground);
}
.c-nav__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.c-nav__link {
  display: inline-flex; align-items: center; height: var(--nav); box-sizing: border-box;
  border-bottom: var(--stroke-strong) solid transparent; padding-top: var(--stroke-strong);
  font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: var(--l-label-track); text-transform: var(--l-label-case);
  color: var(--ink-2); text-decoration: none;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
[data-theme="app"] .c-nav__link, [data-theme="app-dark"] .c-nav__link { font-size: 14px; line-height: 20px; }
.c-nav__link:hover { color: var(--ink); }
.c-nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }
.c-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.c-nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* ---------------------------------------------------------------------
   Readout — a live value against its limits (ISA-101 analog indicator)
   --------------------------------------------------------------------- */
.c-readout {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label src" "value spark" "scale scale" "limits limits";
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-4);
  border: var(--stroke) solid var(--line);
  border-radius: var(--l-radius);
  background: var(--ground-raised);
  min-width: 0;
}
.c-readout__label { grid-area: label; font-family: var(--l-label-font); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--l-label-track); text-transform: var(--l-label-case); color: var(--ink-2); }
.c-readout__src { grid-area: src; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); text-align: right; }
.c-readout__value { grid-area: value; display: flex; align-items: baseline; gap: var(--space-1); font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.c-readout__unit { font-family: var(--font-mono); font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--ink-3); }
.c-readout__spark { grid-area: spark; align-self: end; width: 120px; height: 40px; display: block; overflow: visible; }
.c-readout__scale { grid-area: scale; position: relative; height: 16px; margin-top: var(--space-1); }
.c-readout__track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
.c-readout__band { position: absolute; top: 4px; height: 8px; }
.c-readout__band--normal { background: var(--ground-alt); box-shadow: inset 0 0 0 1px var(--line-strong); }
.c-readout__band--warning { background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning-mark); }
.c-readout__band--critical { background: var(--critical-soft); box-shadow: inset 0 0 0 1px var(--critical); }
.c-readout__needle { position: absolute; top: 0; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); }
.c-readout__limits { grid-area: limits; display: flex; justify-content: space-between; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.c-readout.is-warning { border-color: var(--warning-mark); box-shadow: inset 0 0 0 1px var(--warning-mark); }
.c-readout.is-critical { border-color: var(--critical); box-shadow: inset 0 0 0 1px var(--critical); }

/* ---------------------------------------------------------------------
   Event log — time, priority, source, message, action
   --------------------------------------------------------------------- */
.c-events { margin: 0; padding: 0; list-style: none; border: var(--stroke) solid var(--line); border-radius: var(--l-radius); background: var(--ground-raised); overflow: hidden; }
.c-event {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 72px 96px 88px minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  align-items: center;
  min-height: var(--control);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--stroke) solid var(--line);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink);
}
.c-event:last-child { border-bottom: 0; }
.c-event__time { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.c-event__src { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.c-event__msg { min-width: 0; }
.c-event__msg b { font-weight: 500; }
.c-event.is-critical { background: var(--critical-soft); }
.c-event.is-warning { background: var(--warning-soft); }
.c-event.is-acked { background: transparent; }
.c-event__action { justify-self: end; }
.c-event__action .c-btn { height: 32px; }

/* ---------------------------------------------------------------------
   Facts — "a · b · c". Breaks between facts, never inside one. Each fact
   carries its middot in a 16px lead pulled back by a -16px margin, so a fact
   that starts a line has its middot outside the box, where it is clipped.
   Works whatever margins the element itself is given.
   --------------------------------------------------------------------- */
.c-facts { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; clip-path: inset(0); }
.c-facts > * { position: relative; margin-left: -16px; padding-left: 16px; white-space: nowrap; }
.c-facts > *::before { content: "·"; position: absolute; left: 0; width: 16px; text-align: center; color: var(--ink-3); }