/* Jev Perp Lab · console d'observation — « registre de banc d'essai ».
   System fonts only, 12 px floor, 8 px grid, no shadows, no gradients.
   Contrast ratios are measured on computed styles (see README). */

:root {
  --ground: #111413;
  --panel: #171b19;
  --panel-2: #1d221f;
  --ink: #e6e7df;
  --muted: #a9b0aa;
  --line: #333b37;
  --line-strong: #737d76;
  --focus: #8ccaf2;

  --ok: #7ed87b;
  --syncing: #8ccaf2;
  --degraded: #f0b44c;
  --broken: #ff8374;
  --stopped: #a9b0aa;
  --unknown: #d4aef5;

  --amber: #f0b44c;
  --safety-bg: #2a2310;
  --safety-ink: #f5cd7a;
  --alert-bg: #6e1510;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --gutter: 24px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; }

.data,
.cell,
.row-sum,
.kpi-value,
.link-state,
.utc-clock,
code,
#matrix tfoot td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 20;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
main:focus { outline: none; }

button,
input { font: inherit; color: inherit; }

button {
  min-height: 24px;
  min-width: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
}
button:hover { border-color: var(--ink); }

abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; }

/* ------------------------------------------------------------ safety bar */

.safety-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  padding: 8px var(--gutter);
  background: var(--safety-bg);
  color: var(--safety-ink);
  border-bottom: 2px solid var(--amber);
}

.safety-mode { font-weight: 700; letter-spacing: .04em; }
.safety-short { display: none; }

.link-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  color: var(--ink);
}
.link-state strong { font-weight: 700; }
.link-glyph { color: var(--syncing); }
body[data-link="ok"] .link-glyph { color: var(--ok); }
body[data-link="late"] .link-glyph { color: var(--degraded); }
body[data-link="lost"] .link-glyph { color: var(--broken); }
body[data-link="late"] .link-state strong { color: var(--degraded); }
body[data-link="lost"] .link-state strong { color: var(--broken); }

body[data-link="lost"] .safety-bar { border-bottom-color: var(--broken); }
body[data-link="lost"] .link-state {
  padding: 0 8px;
  background: #3a1411;
  outline: 1px solid var(--broken);
}

.utc-clock { margin-left: auto; color: var(--muted); }

body.is-alert .safety-bar {
  background: var(--alert-bg);
  color: #fff;
  border-bottom-color: #fff;
}
body.is-alert .link-state,
body.is-alert .utc-clock { color: #fff; }

.tech-banner {
  padding: 8px var(--gutter);
  background: #33240d;
  border-bottom: 1px dashed var(--amber);
  color: var(--safety-ink);
}
.tech-banner strong { margin-right: 8px; }

/* ------------------------------------------------------------ layout */

main,
.glossary,
.footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 0 8px;
}
.masthead h1 { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.masthead-sub { margin-left: 8px; font-weight: 400; color: var(--muted); }
.masthead-note { color: var(--muted); }

.control-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 16px;
  margin: 8px 0 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.control-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.control-detail {
  color: var(--muted);
  font-size: 12px;
}

.control-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.readiness-block { border-top: 2px solid var(--amber); }
.readiness-grid {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(180px, .7fr) minmax(320px, 2fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.readiness-stage,
.readiness-checks { padding: 16px; background: var(--panel-2); }
.readiness-stage h3,
.readiness-checks h3 { margin: 4px 0 8px; font-size: 13px; }
.eyebrow { color: var(--amber); font: 12px/1.4 var(--mono); letter-spacing: .08em; }
.muted { color: var(--muted); }
.readiness-checks ul { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px 20px; list-style: none; }
.readiness-checks li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.readiness-checks strong,
.readiness-checks small { display: block; }
.readiness-checks small { margin-top: 2px; color: var(--muted); font-size: 12px; }

.btn-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn-control:hover {
  border-color: var(--ink);
}

.btn-control.is-paused {
  border-color: var(--amber);
  color: var(--amber);
}

.control-budget {
  font: 12px/1.4 var(--mono);
  color: var(--muted);
}

.block {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.block-head h2 { font-size: 15px; font-weight: 700; }
.frozen-stamp {
  padding: 0 6px;
  border: 1px solid var(--broken);
  color: var(--broken);
  font: 700 12px/20px var(--mono);
}
.block-summary {
  flex-basis: 100%;
  color: var(--muted);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.block-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 8px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  cursor: pointer;
}
.check input,
.filters input { width: 16px; height: 16px; margin: 0; accent-color: var(--focus); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  color: var(--muted);
}

/* ------------------------------------------------------------ provenance tags */

.prov {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid currentColor;
  font: 700 12px/20px var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.prov-ws { color: var(--ok); }
.prov-replay { color: var(--syncing); }
.prov-mock { color: var(--unknown); }
.prov-sim { color: var(--amber); border-style: dashed; }
.prov-mem { color: var(--muted); }

/* Simulated values: dashed amber container, never a fill under numbers. */
.simulated {
  border: 1px dashed var(--amber);
  padding: 8px;
}

/* ------------------------------------------------------------ severities */

.glyph { display: inline-block; min-width: 1.1em; text-align: center; }
.sev-ok .glyph, .glyph.sev-ok { color: var(--ok); }
.sev-syncing .glyph, .glyph.sev-syncing { color: var(--syncing); }
.sev-degraded .glyph, .glyph.sev-degraded { color: var(--degraded); }
.sev-broken .glyph, .glyph.sev-broken { color: var(--broken); }
.sev-stopped .glyph, .glyph.sev-stopped { color: var(--stopped); }
.sev-unknown .glyph, .glyph.sev-unknown { color: var(--unknown); font-weight: 700; }
.sev-none { color: var(--muted); }

/* ------------------------------------------------------------ tables */

.table-region {
  position: relative; /* containing block for visually hidden spans: nothing escapes the scroll box */
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--panel);
}

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  padding: 8px;
  text-align: left;
  color: var(--muted);
  caption-side: top;
}

th,
td {
  padding: 4px 8px;
  height: 32px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

tbody th { font-weight: 400; }

.scroll-hint { margin-top: 4px; color: var(--muted); }
.empty { padding: 8px 0; color: var(--muted); }

/* ------------------------------------------------------------ matrix */

.matrix-region { max-height: min(26rem, 60vh); }

.matrix th,
.matrix td { white-space: nowrap; }

.matrix tfoot th,
.matrix tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--panel-2);
  color: var(--muted);
  border-top: 1px solid var(--line-strong);
}
.foot-reconnects { margin-left: 8px; }

.group-row th {
  background: var(--ground);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .02em;
}

.col-market { width: 1%; }

.expander {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border-color: transparent;
  background: transparent;
  font-weight: 700;
  text-align: left;
}
.expander:hover { border-color: var(--line-strong); }
.chevron { display: inline-block; color: var(--muted); }
.expander[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.row-sum { color: var(--muted); }
.row-sum-partial { color: var(--degraded); }

.cell > span + span { margin-left: 6px; }
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cell-label + .visually-hidden + .cell-age { margin-left: 6px; }
.cell-spread { color: var(--muted); }
.venue-abbr { display: none; }

.cell.flash { animation: flash 180ms linear 1; }
@keyframes flash {
  from { outline: 2px solid var(--ink); outline-offset: -2px; }
  to { outline: 2px solid transparent; outline-offset: -2px; }
}

.detail-row > td {
  padding: 8px;
  background: var(--ground);
  white-space: normal;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

.detail-block {
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.detail-title { margin-bottom: 4px; font-size: 13px; font-weight: 700; }
.detail-block dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 8px;
}
.detail-block dt { color: var(--muted); }
.detail-block dd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ KPIs */

.kpi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.kpi {
  min-width: 0;
  padding: 8px 16px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.kpi.simulated { border: 1px dashed var(--amber); }
.kpi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
}
.kpi-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi-value { margin: 8px 0 4px; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.kpi-note { color: var(--muted); }

/* ------------------------------------------------------------ A/B */

.ab-table th[scope="row"] { color: var(--muted); }
.ab-table td { text-align: right; }
.ab-table thead th:not(:first-child) { text-align: right; }
.ab-comparable { margin-top: 8px; }

/* ------------------------------------------------------------ candidates */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
.filters legend { float: left; margin-right: 8px; color: var(--muted); }
.filters label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  cursor: pointer;
}

.sort { padding: 0 6px; border-color: transparent; background: transparent; color: var(--muted); font-weight: 600; }
th[aria-sort="ascending"] .sort::after { content: " ↑"; }
th[aria-sort="descending"] .sort::after { content: " ↓"; }

.cand-label { display: block; color: var(--muted); font-size: 12px; }
.col-narrow { display: none; }

.chain-steps { display: grid; gap: 8px; padding-left: 24px; }
.chain-steps .prov { margin-right: 4px; }
.jev-bars { display: grid; gap: 4px; margin-top: 4px; list-style: none; }
.jev-row { display: grid; grid-template-columns: minmax(0, 22em) minmax(80px, 240px); align-items: center; gap: 8px; }
.jev-label { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
.bar {
  position: relative;
  display: block;
  height: 10px;
  border: 1px solid var(--line-strong);
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 100%);
  background: var(--muted);
}
.bar-threshold {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(var(--t, 0) * 100%);
  width: 2px;
  background: var(--amber);
}

/* ------------------------------------------------------------ journal */

.journal-region { max-height: 20rem; }

/* ------------------------------------------------------------ INIT skeletons */

.skeleton { display: grid; gap: 8px; }
.skeleton span {
  display: block;
  height: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------ link freshness */

body[data-link="late"] :is(.cell-age, .cell-spread, .row-sum, .kpi-value, .data, #matrix tfoot td, .block-summary) { opacity: .7; }

/* ------------------------------------------------------------ glossary, footer */

.glossary { padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--line); }
.glossary summary {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 700;
  cursor: pointer;
}
.glossary dl { display: grid; gap: 4px; margin-top: 8px; max-width: 72em; }
.glossary dt { margin-top: 8px; font-weight: 700; }
.glossary dd { color: var(--muted); }
.glossary .prov { margin: 0 4px; }

.footer { padding-top: 16px; padding-bottom: 24px; border-top: 1px solid var(--line); color: var(--muted); }

/* ------------------------------------------------------------ ALERT dialog */

.alert-dialog {
  max-width: min(36rem, calc(100vw - 32px));
  padding: 24px;
  border: 2px solid var(--broken);
  background: #25100e;
  color: var(--ink);
}
.alert-dialog::backdrop { background: rgb(0 0 0 / .75); }
.alert-dialog h2 { margin-bottom: 8px; font-size: 18px; color: #fff; }
.alert-dialog p { margin-bottom: 8px; }
.alert-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; margin: 8px 0 16px; }
.alert-facts dt { color: var(--muted); }
.alert-facts dd { font-family: var(--mono); overflow-wrap: anywhere; }
.alert-actions button { min-height: 32px; padding: 4px 16px; border-color: #fff; font-weight: 700; }

/* ------------------------------------------------------------ responsive */

@media (min-width: 720px) and (max-width: 1023px) {
  .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi { grid-column: span 2; }
  .kpi-grid[data-count="1"] .kpi { grid-column: span 6; }
  .kpi-grid[data-count="2"] .kpi,
  .kpi-grid[data-count="4"] .kpi { grid-column: span 3; }
  .kpi-grid[data-count="5"] .kpi:nth-last-child(-n+2) { grid-column: span 3; }
  .kpi-grid[data-count="7"] .kpi:nth-last-child(-n+4),
  .kpi-grid[data-count="8"] .kpi:nth-last-child(-n+2) { grid-column: span 3; }
}

@media (min-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(var(--kpi-count, 5), minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .cell-spread { display: none; }
}

@media (min-width: 1280px) {
  .cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-left: 4px; }
}

@media (max-width: 719px) {
  :root { --gutter: 12px; }
  .safety-bar { gap: 2px 16px; padding-top: 4px; padding-bottom: 4px; }
  .safety-mode { flex-basis: 100%; }
  .safety-long { display: none; }
  .safety-short { display: inline; }
  .utc-clock { display: none; }
  .masthead-sub { display: block; margin-left: 0; }
  .venue-full { display: none; }
  .venue-abbr { display: inline; }
  .matrix th,
  .matrix td { padding: 4px; }
  .matrix .cell { text-align: center; }
  .cell > span { display: block; }
  .cell > span + span { margin-left: 0; }
  .cell > .cell-spread { display: none; }
  .matrix .row-sum { display: block; padding-left: 6px; }
  .foot-reconnects { display: block; margin-left: 0; }
  .matrix tfoot th,
  .matrix tfoot td { white-space: normal; }
  .expander { padding: 0 4px; }
  .col-wide { display: none; }
  .col-narrow { display: table-cell; }
  .jev-row { grid-template-columns: minmax(0, 1fr); }
  .matrix-region { max-height: 70vh; }
  .readiness-grid { grid-template-columns: 1fr; }
  .readiness-checks ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cell.flash { animation: none; }
  .expander[aria-expanded="true"] .chevron { transform: none; }
}

@media (forced-colors: active) {
  .table-region,
  .kpi,
  .detail-block,
  .prov,
  .simulated,
  .bar { border-color: CanvasText; }
  .bar-fill,
  .bar-threshold { background: CanvasText; forced-color-adjust: none; }
  .safety-bar { border-bottom-color: CanvasText; }
}

@media print {
  body,
  html { background: #fff; color: #000; }
  .safety-bar { position: static; background: #fff; color: #000; border-bottom: 2px solid #000; }
  .link-state,
  .utc-clock,
  .alert-dialog,
  .skip-link,
  .expander .chevron { color: #000; }
  .table-region,
  .matrix-region,
  .journal-region { max-height: none; overflow: visible; }
  thead th,
  .matrix tfoot th,
  .matrix tfoot td { position: static; }
  .prov,
  .row-sum,
  .block-summary,
  caption { color: #000; }
}