/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:        #ffffff;
  --bg-sunk:   #f4f5f7;
  --bg-rail:   #fafbfc;
  --bg-hover:  #eef1f5;
  --bg-sel:    #e3ecf9;
  --line:      #dfe3e8;
  --line-soft: #ebeef1;
  --ink:       #1b1f24;
  --ink-2:     #5b6570;
  --ink-3:     #8b949e;
  --accent:    #1f5fbf;
  --warn-bg:   #fdf7e3;
  --warn-line: #e6d69a;
  --warn-ink:  #6b5713;

  --ok:        #1a7f4b;
  --acq:       #7a4fbf;
  --pub:       #0d6f9e;
  --dead:      #b3261e;

  --row-h: 30px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14171a;
    --bg-sunk:   #1b1f23;
    --bg-rail:   #171a1e;
    --bg-hover:  #22272d;
    --bg-sel:    #1d2c40;
    --line:      #2c3238;
    --line-soft: #23282e;
    --ink:       #e3e7ea;
    --ink-2:     #9aa4ae;
    --ink-3:     #6e7781;
    --accent:    #6ea8fe;
    --warn-bg:   #2a2413;
    --warn-line: #4d4322;
    --warn-ink:  #d9c98a;
    --ok:        #4cc38a;
    --acq:       #b18cf0;
    --pub:       #58b6e0;
    --dead:      #f07a72;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunk); padding: 0 3px; border-radius: 3px; }
a { color: var(--accent); }

/* ── Boot ───────────────────────────────────────────────────────────── */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--bg);
}
.boot[hidden] { display: none; }
.boot-box { width: 320px; text-align: center; }
.boot-title { font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.boot-msg { margin: 8px 0 12px; color: var(--ink-2); font-size: 12px; min-height: 32px; }
.boot-bar { height: 3px; background: var(--bg-sunk); border-radius: 2px; overflow: hidden; }
.boot-bar > div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 20px;
  height: 40px; flex: 0 0 40px; padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-rail);
}
.brand { font-weight: 700; letter-spacing: .04em; font-size: 12px; text-transform: uppercase; color: var(--ink-2); }
.tabs { display: flex; gap: 2px; }
.tab {
  background: none; border: 0; padding: 5px 10px; border-radius: 4px;
  color: var(--ink-2); cursor: pointer; font-size: 12.5px;
}
.tab[hidden] { display: none; }
.tab:hover { background: var(--bg-hover); }
.tab.is-active { background: var(--bg-sel); color: var(--ink); font-weight: 600; }
.badge {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 8px; background: var(--ink-3); color: var(--bg);
  font-size: 10px; font-weight: 700; text-align: center;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.meta-line { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line); background: var(--bg);
  border-radius: 4px; padding: 4px 9px; cursor: pointer; color: var(--ink);
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: translateY(0.5px); }
.btn-mini { padding: 2px 7px; font-size: 11.5px; }
.btn-ghost { border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--line); }

/* ── Layout ─────────────────────────────────────────────────────────── */
/* The height used to be `calc(100% - 40px)`, hard-coded to the topbar. Adding
   the sub-tab bar pushed the layout 32px past the viewport, so the bottom of
   the rail and of the table fell off screen — controls that look present and
   cannot be clicked. A flex column measures whatever chrome sits above it, and
   survives the next bar. */
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.rail {
  width: 268px; flex: 0 0 268px;
  border-right: 1px solid var(--line);
  background: var(--bg-rail);
  display: flex; flex-direction: column;
}
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2);
}
.rail-scroll { overflow-y: auto; overflow-x: hidden; padding: 4px 10px 40px; flex: 1; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Filter groups ──────────────────────────────────────────────────── */
.fgroup { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.fgroup:empty { display: none; }
.flabel {
  display: block; font-size: 11px; font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
}
.flabel .cnt { float: right; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.fhint { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; }

.input {
  width: 100%; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--ink);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.input-num { width: 100%; font-variant-numeric: tabular-nums; }
.input-inline { width: 44px; display: inline-block; padding: 0 4px; text-align: center; }
.range-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; }
.range-sep { color: var(--ink-3); }
.row-gap { display: flex; gap: 4px; margin-top: 5px; }
.row-gap .input { flex: 1; min-width: 0; }

.check { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; cursor: pointer; font-size: 12px; }
.check input { margin: 3px 0 0; flex: 0 0 auto; }

/* multi-select facet */
.ms-search { margin-bottom: 4px; }
.ms-list { max-height: 168px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 4px; }
.ms-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px; cursor: pointer; font-size: 12px;
}
.ms-opt:hover { background: var(--bg-hover); }
.ms-opt input { margin: 0; }
.ms-opt .ms-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-opt .ms-cnt { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 11px; }
.ms-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; margin-top: 4px; font-size: 11px; color: var(--ink-2); }
/* The fund modes are full phrases ("suivi par au moins un"), so a label must
   never break mid-phrase — the row wraps between labels instead. */
.ms-mode label { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.ms-mode-n { flex-basis: 100%; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.spark { display: flex; align-items: flex-end; gap: 1px; height: 26px; margin-top: 6px; }
.spark i { flex: 1; background: var(--ink-3); min-height: 1px; opacity: .55; }
.spark i.on { background: var(--accent); opacity: 1; }

.warn, .warn-inline {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 4px; padding: 5px 7px; font-size: 11px; line-height: 1.4; margin-top: 6px;
}

.saved-views { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.sv-row { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.sv-row button.sv-load { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 3px; color: var(--accent); }
.sv-row button.sv-load:hover { background: var(--bg-hover); }
.sv-row button.sv-del { background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: 0 4px; }

.synonyms { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.syn-row { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; }
.syn-row input { margin: 3px 0 0; }
.syn-row .syn-txt { flex: 1; line-height: 1.35; }
.syn-row .syn-canon { font-weight: 600; }
.syn-row .syn-alias { color: var(--ink-3); }
.syn-row .syn-del { background: none; border: 0; cursor: pointer; color: var(--ink-3); }

/* ── Views ──────────────────────────────────────────────────────────── */
.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.is-active { display: flex; }
.placeholder { padding: 40px; color: var(--ink-3); }

.viewbar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-rail);
  min-height: 34px;
}
.count { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.count .of { color: var(--ink-3); font-weight: 400; }
.viewbar-right { margin-left: auto; display: flex; gap: 6px; }

.active-chips { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; max-height: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-sel); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 4px 0 7px; font-size: 11px; white-space: nowrap;
}
.chip button { background: none; border: 0; cursor: pointer; color: var(--ink-2); padding: 0 2px; line-height: 1; }

/* ── Table ──────────────────────────────────────────────────────────── */
/* Les règles de la table virtualisée sont dans css/table.css : la page de
   vente monte le même js/table.js et charge cette feuille-là, sans le reste
   de celle-ci. Le shell charge les deux — voir index.html. */

.caveats {
  border-top: 1px solid var(--line); background: var(--bg-sunk);
  padding: 6px 12px; font-size: 11px; color: var(--ink-2); line-height: 1.45;
}
.caveats strong { color: var(--ink); }

/* ── Patterns ───────────────────────────────────────────────────────── */
/* Chart roles. Single hue for magnitude — the direction relative to the
   baseline is read from geometry, not colour: in "failure" mode a diverging
   good/bad ramp would invert its own meaning. The dim grey is a *state*
   (n below threshold, unreliable), deliberately below the chroma floor so it
   never reads as a series, and always doubled by a written "n < 20" label.
   Validated against both surfaces: CVD ΔE 15.9, contrast ≥ 3:1. */
:root {
  --viz-bar:     #2a78d6;
  --viz-bar-dim: #b8b7b1;
  --viz-ci:      #0b0b0b;
  --viz-grid:    #e1e0d9;
  --viz-base:    #898781;
  --viz-muted:   #898781;
}
@media (prefers-color-scheme: dark) {
  :root {
    --viz-bar:     #3987e5;
    --viz-bar-dim: #55534d;
    --viz-ci:      #e8e8e4;
    --viz-grid:    #2c2c2a;
    --viz-base:    #898781;
    --viz-muted:   #898781;
  }
}

.cohort-bar {
  flex: 0 0 auto; padding: 7px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg-rail);
}
.cohort-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cohort-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2);
}
.cohort-mature { font-size: 12px; margin-left: auto; white-space: nowrap; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.seg button {
  display: flex; align-items: baseline; gap: 5px;
  background: var(--bg); border: 0; border-right: 1px solid var(--line);
  padding: 3px 9px; cursor: pointer; font-size: 12px; color: var(--ink-2);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--bg-hover); }
.seg button.on { background: var(--bg-sel); color: var(--ink); font-weight: 650; }
.seg button.fail.on { background: color-mix(in srgb, var(--dead) 14%, var(--bg)); }
.seg-n { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.cohort-state { margin-top: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cohort-state .cs-k { color: var(--ink-3); }
.cohort-state .cs-d { color: var(--ink-3); font-size: 11px; }
.cohort-warn {
  margin-top: 5px; background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn-ink); border-radius: 4px; padding: 4px 7px; font-size: 11.5px;
}

.patterns-scroll { flex: 1; overflow-y: auto; padding: 12px; }

.sec-head { margin: 0 0 10px; padding-left: 9px; border-left: 3px solid var(--accent); }
.sec-head h2 { font-size: 13px; margin: 0 0 3px; }
.sec-head p { margin: 0; font-size: 11.5px; color: var(--ink-2); max-width: 78ch; line-height: 1.45; }
.sec-post { border-left-color: var(--ink-3); }

.panel { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--bg-rail);
}
.panel-head h3 { font-size: 12.5px; margin: 0; }
.panel-ctl { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-ctl label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); }
.input-sel { width: auto; padding: 2px 4px; }

.sort-warn {
  margin: 8px 10px 0; background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn-ink); border-radius: 4px; padding: 6px 8px; font-size: 11.5px; line-height: 1.45;
}

.cohort-opt { font-size: 12px; margin-left: 12px; white-space: nowrap; }
.cov-warn { background: var(--bg-sunk); border-color: var(--line); color: var(--ink-2); }

.panel-details { margin-top: 12px; }
.panel-details > summary {
  padding: 7px 10px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  background: var(--bg-rail); list-style-position: inside;
}
.panel-details > summary span { font-weight: 400; color: var(--ink-3); }
.panel-details[open] > summary { border-bottom: 1px solid var(--line); }
.cov-body { padding: 10px; }
.cov-body h4 { font-size: 11.5px; margin: 14px 0 5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.cov-body h4:first-of-type { margin-top: 4px; }
.cov-lead, .cov-note { font-size: 11.5px; color: var(--ink-2); margin: 0 0 8px; max-width: 92ch; line-height: 1.45; }
.cov-note { color: var(--ink-3); margin-top: 5px; }
.cov-tbl { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cov-tbl th, .cov-tbl td { padding: 2px 10px 2px 0; text-align: left; }
.cov-tbl th { color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line); }
.cov-tbl td.num, .cov-tbl th.num { text-align: right; }
.cov-tbl tr:hover td { background: var(--bg-hover); }

.rank-plot { padding: 4px 10px 10px; overflow-x: auto; }
.rank-axis, .rank-rows { display: block; }

.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-tick, .viz-axlbl, .viz-baselbl {
  font-size: 10px; fill: var(--viz-muted); text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.viz-baselbl { text-anchor: start; }
.viz-axlbl { font-size: 10.5px; fill: var(--ink-2); }
.viz-bar { fill: var(--viz-bar); }
.viz-bar-dim { fill: var(--viz-bar-dim); }
.viz-ci { stroke: var(--viz-ci); stroke-width: 2; stroke-linecap: butt; opacity: .78; }
.viz-ci-cut { fill: none; stroke: var(--viz-ci); stroke-width: 2; opacity: .78; }
.viz-row.viz-dim .viz-ci, .viz-row.viz-dim .viz-ci-cut { opacity: .5; }
.viz-row.viz-dim .viz-lbl, .viz-row.viz-dim .viz-n,
.viz-row.viz-dim .viz-val, .viz-row.viz-dim .viz-lift { fill: var(--ink-3); }
.viz-lbl { font-size: 11.5px; fill: var(--ink); }
.viz-n { font-size: 10.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.viz-val { font-size: 11.5px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.viz-lift { font-size: 11.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.viz-hit { fill: transparent; }
.viz-row:hover .viz-hit { fill: var(--bg-hover); }

.rank-more {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 5px 0 5px 8px; margin: 4px 0; cursor: pointer;
  color: var(--accent); font-size: 11.5px;
}
.rank-more:hover { background: var(--bg-hover); }
.rank-band {
  margin: 10px 0 2px; padding: 4px 8px; border-radius: 4px;
  background: var(--bg-sunk); font-size: 11px; font-weight: 650; color: var(--ink-2);
}
.rank-band span { font-weight: 400; color: var(--ink-3); margin-left: 8px; }

.panel-foot {
  border-top: 1px solid var(--line); background: var(--bg-rail);
  padding: 6px 10px; font-size: 11px; color: var(--ink-2);
}
.panel-foot .foot-note { margin-top: 4px; color: var(--ink-3); line-height: 1.45; max-width: 92ch; }

.caveats-block { margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; }
.caveats-block p { margin: 0 0 5px; }
.caveats-block p:last-child { margin-bottom: 0; }

/* ── Detail panel (étape 3) ─────────────────────────────────────────── */
.detail {
  width: 340px; flex: 0 0 340px;
  border-left: 1px solid var(--line);
  background: var(--bg-rail);
  overflow-y: auto;
}
.detail[hidden] { display: none; }

.cohort-window { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); }
.input-yr { width: 52px; }
.cohort-universe { color: var(--ink-2); }
.brush-hint { padding: 6px 10px 0; font-size: 11px; color: var(--ink-3); }
.viz-row { cursor: pointer; }
.viz-row:focus { outline: none; }
.viz-row:focus .viz-hit { fill: var(--bg-sel); }

/* ── Outcome palette (graphique 1, boîtes ex post) ───────────────────── */
/* Ordre validé : violet / aqua / bleu / orange. Pires paires adjacentes —
   clair : CVD ΔE 23,1, vision normale 24,0 ; sombre : CVD 17,3, normale 20,9.
   Contraste ≥ 3:1 sur les deux surfaces. Jamais la couleur seule : légende
   permanente + infobulle par barre. */
:root {
  --o-public:   #4a3aa7;
  --o-acquired: #1baf7a;
  --o-active:   #2a78d6;
  --o-inactive: #eb6834;
  --viz-censor: rgba(139,148,158,.10);
  --viz-prev:   #2a78d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --o-public:   #9085e9;
    --o-acquired: #199e70;
    --o-active:   #3987e5;
    --o-inactive: #d95926;
    --viz-censor: rgba(155,164,174,.13);
    --viz-prev:   #3987e5;
  }
}
.viz-o-Public   { fill: var(--o-public); }
.viz-o-Acquired { fill: var(--o-acquired); }
.viz-o-Active   { fill: var(--o-active); }
.viz-o-Inactive { fill: var(--o-inactive); }

.panel-gap { margin-top: 12px; }
.chart-host { padding: 8px 10px 4px; overflow-x: auto; }
.chart { display: block; }
.ctl-note { font-size: 11px; color: var(--ink-3); }
.empty-note { color: var(--ink-3); font-size: 12px; padding: 10px; margin: 0; }

.viz-censor { fill: var(--viz-censor); }
.viz-censor-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.viz-annot { font-size: 10px; fill: var(--ink-3); }
.viz-size { fill: var(--ink-3); opacity: .45; }
.viz-nostart { opacity: .28; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 10px 8px; font-size: 11px; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.viz-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.viz-sw.viz-o-Public   { background: var(--o-public); }
.viz-sw.viz-o-Acquired { background: var(--o-acquired); }
.viz-sw.viz-o-Active   { background: var(--o-active); }
.viz-sw.viz-o-Inactive { background: var(--o-inactive); }
.viz-sw-hatch { background: repeating-linear-gradient(45deg, var(--ink-3) 0 2px, transparent 2px 4px); border: 1px solid var(--line); }
.viz-sw-censor { background: var(--viz-censor); border: 1px dashed var(--ink-3); }
.viz-sw-prev { background: var(--viz-prev); height: 3px; border-radius: 0; }
.viz-sw-comp { background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 6px); height: 3px; border-radius: 0; }

/* petites multiples */
.sm-grid { display: grid; gap: 10px 10px; }
.sm { margin: 0; }
.sm figcaption { font-size: 11.5px; font-weight: 600; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm figcaption span { font-weight: 400; color: var(--ink-3); }
.viz-prev { fill: none; stroke: var(--viz-prev); stroke-width: 1.8; stroke-linejoin: round; }
.viz-prev-dot { fill: var(--viz-prev); }
.viz-peak { font-size: 9.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.viz-completeness { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .8; }

/* boîtes */
.viz-whisk { stroke: var(--ink-2); stroke-width: 1.5; }
.viz-median { stroke: var(--bg); stroke-width: 2; }
.viz-box:hover .viz-hit { fill: var(--bg-hover); }

/* robustesse */
.viz-half { font-size: 10.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.viz-rb { font-size: 10.5px; font-weight: 600; }
.rb-holds { fill: var(--ok); }
.rb-fails { fill: var(--ink-3); }
.rb-weak { fill: var(--warn-ink); }
.rb-absent { fill: var(--ink-3); font-style: italic; }
.foot-robust { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

.lg-note { display: block; flex-basis: 100%; color: var(--ink-3); line-height: 1.45; max-width: 100ch; }
.lg-note b { color: var(--ink-2); }
.viz-margin { fill: var(--ink-3); font-weight: 400; }

/* ── Validation hors échantillon ─────────────────────────────────────── */
.oos-body { padding: 10px; }
.oos-ctl { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.oos-ctl label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); }
.oos-lead { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 10px; max-width: 100ch; }
.oos-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.oos-stat { flex: 1 1 320px; border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; background: var(--bg-rail); }
.oos-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.oos-v { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; margin: 1px 0 3px; }
.oos-ci { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.oos-note { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.oos-movers { border-left: 3px solid var(--accent); padding: 6px 0 6px 10px; margin: 12px 0; }
.oos-mover { font-size: 12.5px; line-height: 1.6; }
.oos-mover-note { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; font-style: italic; }
.oos-arrow { font-size: 10px; margin-right: 4px; }
.oos-arrow.up { color: var(--ok); }
.oos-arrow.down { color: var(--dead); }
.oos-tbl { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; margin: 8px 0; width: 100%; max-width: 900px; }
.oos-tbl th, .oos-tbl td { padding: 2px 10px 2px 0; text-align: left; }
.oos-tbl th { color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line); }
.oos-tbl td.num, .oos-tbl th.num { text-align: right; }
.oos-tbl tr:hover td { background: var(--bg-hover); }
.oos-tbl .oos-dim td { color: var(--ink-3); }
.oos-verdict { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; font-size: 12px; line-height: 1.5; }
.foot-cta { margin: 6px 0 2px; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; }
.linkish:hover { text-decoration: underline; }


/* ── Fiche société ───────────────────────────────────────────────────── */
/* Les règles de la fiche sont dans css/detail.css : la page de vente écrit
   le même balisage et charge cette feuille-là, sans le reste de celle-ci.
   Le shell charge les trois — voir index.html. */

/* ── Comparateur ─────────────────────────────────────────────────────── */
.cmp-empty { padding: 40px; color: var(--ink-2); max-width: 60ch; line-height: 1.5; }
.cmp-scroll { flex: 1; overflow: auto; padding: 10px 12px 30px; }
.cmp-tbl { border-collapse: collapse; font-size: 12px; }
.cmp-tbl th, .cmp-tbl td { padding: 3px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp-tbl thead th { border-bottom: 1px solid var(--line); vertical-align: bottom; min-width: 150px; }
.cmp-dim { color: var(--ink-3); font-weight: 500; white-space: nowrap; position: sticky; left: 0; background: var(--bg); z-index: 1; }
.cmp-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-tbl td.wrap { white-space: normal; min-width: 200px; font-size: 11.5px; color: var(--ink-2); }
.cmp-diff td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cmp-diff .cmp-dim { color: var(--ink); font-weight: 650; }
.cmp-same td { color: var(--ink-2); }
.cmp-name { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 650; cursor: pointer; color: var(--accent); }
.cmp-name:hover { text-decoration: underline; }
.cmp-unpin { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 13px; padding: 0 3px; }
.cmp-sub { font-size: 10.5px; color: var(--ink-3); font-weight: 400; max-width: 210px; line-height: 1.3; white-space: normal; }
.cmp-expost { font-size: 9.5px; background: var(--bg-sunk); border-radius: 3px; padding: 0 4px; margin-left: 5px; color: var(--ink-3); cursor: help; }
.cmp-h { font-size: 12.5px; margin: 22px 0 3px; }
.cmp-note { font-size: 11px; color: var(--ink-3); margin: 0 0 8px; max-width: 95ch; line-height: 1.45; }
.cmp-tags .cmp-mark { text-align: center; color: var(--accent); }
.cmp-shared .cmp-dim { font-weight: 650; color: var(--ink); }
.cmp-shared td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ── Témoin de fraîcheur ─────────────────────────────────────────────── */
.freshness { position: relative; }
.fr-chip {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 7px; cursor: pointer; font-size: 11px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fr-chip:hover { border-color: var(--line); background: var(--bg); }
.fr-icon { font-size: 10px; }
.fr-main b { color: var(--ink); font-weight: 600; }
.fr-state { color: var(--ink-3); }
.fr-caret { color: var(--ink-3); font-size: 8px; }
.fr-chip.fr-ok .fr-icon { color: var(--ok); }
.fr-chip.fr-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.fr-chip.fr-warn .fr-state, .fr-chip.fr-warn .fr-main b { color: var(--warn-ink); }
.fr-chip.fr-session { border-color: var(--accent); background: var(--bg-sel); }
.fr-chip.fr-dim { color: var(--ink-3); }
.fr-bad { color: var(--dead); font-weight: 700; }
.fr-soft { color: var(--warn-ink); font-weight: 700; }
span.fr-ok { color: var(--ok); }

.fr-pop {
  position: absolute; right: 0; top: 26px; z-index: 60;
  width: 460px; max-height: 72vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 26px rgba(0,0,0,.14); padding: 10px; font-size: 11.5px;
}
.fr-pop[hidden] { display: none; }
.fr-row { display: flex; gap: 8px; padding: 2px 0; }
.fr-k { flex: 0 0 118px; color: var(--ink-3); }
.fr-v { flex: 1; min-width: 0; }
.fr-note { margin-top: 8px; padding: 7px 8px; border-radius: 4px; line-height: 1.5; }
.fr-warn-box { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.fr-cmd { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.fr-cmd code { flex: 1; background: var(--bg); border: 1px solid var(--line); padding: 3px 6px; border-radius: 4px; user-select: all; font-size: 11px; }
.fr-sub { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.fr-sub summary { cursor: pointer; color: var(--ink-2); }
.fr-list { list-style: none; margin: 5px 0 0; padding: 0; }
.fr-list li { padding: 1px 0; line-height: 1.4; }
.fr-hint { color: var(--ink-3); font-size: 10.5px; }
.fr-diff { margin-top: 5px; line-height: 1.6; }
.fr-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.notice-young { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; padding: 6px 12px; line-height: 1.45; }

/* ── Onglet RFS ──────────────────────────────────────────────────────── */
.rfs-loading { padding: 40px; color: var(--ink-3); }
#rfs { overflow-y: auto; }
.rfs-head { padding: 10px 12px 0; border-bottom: 1px solid var(--line); background: var(--bg-rail); }
.rfs-reserve { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; max-width: 110ch; margin-bottom: 9px; }
.rfs-frieze { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 8px; }
.rfs-ed {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg);
  padding: 5px 9px; cursor: pointer; white-space: nowrap; min-width: 118px;
}
.rfs-ed:hover { background: var(--bg-hover); }
.rfs-ed.on { outline: 2px solid var(--accent); outline-offset: -1px; }
.rfs-ed-name { font-weight: 650; font-size: 12px; }
.rfs-ed-n, .rfs-ed-b { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rfs-ed-s { font-size: 10px; margin-top: 2px; }
.rfs-ed.ed-ok .rfs-ed-s { color: var(--ok); }
.rfs-ed.ed-lim { border-color: var(--warn-line); }
.rfs-ed.ed-lim .rfs-ed-s { color: var(--warn-ink); }
.rfs-ed.ed-no { background: var(--bg-sunk); }
.rfs-ed.ed-no .rfs-ed-name, .rfs-ed.ed-no .rfs-ed-s { color: var(--ink-3); }
.rfs-cal { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 11px; color: var(--ink-2); padding-bottom: 8px; }
.rfs-sep { color: var(--line); }
.rfs-hint { color: var(--ink-3); font-size: 10.5px; line-height: 1.4; }
.rfs-tabs { display: flex; gap: 2px; }
.rfs-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 5px 10px; cursor: pointer; color: var(--ink-2); font-size: 12.5px;
}
.rfs-tabs button.on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 650; }
.rfs-body { padding: 12px; }
.rfs-note {
  background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 10px; font-size: 11.5px; line-height: 1.55; max-width: 110ch; margin-bottom: 12px;
}
.rfs-block { margin-bottom: 20px; }
.rfs-block h3 { font-size: 13px; margin: 0 0 4px; }
.rfs-block h3 .dim { font-weight: 400; color: var(--ink-3); }
.rfs-block > p { font-size: 11.5px; color: var(--ink-2); margin: 0 0 8px; max-width: 105ch; line-height: 1.5; }
.rfs-highlight { border-left: 3px solid var(--accent); padding-left: 10px; }
.rfs-tbl { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; width: 100%; max-width: 1100px; }
.rfs-tbl th, .rfs-tbl td { padding: 3px 10px 3px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.rfs-tbl th { color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line); }
.rfs-tbl td.num, .rfs-tbl th.num { text-align: right; }
.rfs-tbl tr:hover td { background: var(--bg-hover); }
.rfs-items td { font-size: 11.5px; }
.rfs-items a { text-decoration: none; font-weight: 600; }
.rfs-items a:hover { text-decoration: underline; }
.rfs-tbl .up, .rfs-tbl .down, .rfs-tbl .flat { color: inherit; }
.up { color: var(--ok); }
.down { color: var(--dead); }
.flat { color: var(--ink-3); }
.rfs-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font: inherit; text-align: left; }
.rfs-link:hover { text-decoration: underline; }
.rfs-chip { background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 9px; padding: 0 7px; font-size: 10.5px; cursor: pointer; color: var(--ink-2); margin: 1px 0; }
.rfs-chip:hover { background: var(--bg-sel); color: var(--ink); }
.rfs-at { font-size: 9.5px; border-radius: 3px; padding: 0 4px; }
.rfs-at-partner { background: var(--bg-sel); color: var(--accent); }
.rfs-at-founder { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.rfs-at-external { background: var(--warn-bg); color: var(--warn-ink); }
.rfs-slow { font-size: 9.5px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 3px; padding: 0 4px; cursor: help; }
.th-no { color: var(--ink-3); font-style: italic; font-size: 11px; }
.rfs-unmeas { border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; margin-bottom: 6px; font-size: 11.5px; max-width: 105ch; }
.rfs-badge { font-size: 10.5px; font-weight: 400; border-radius: 3px; padding: 1px 6px; }
.rfs-badge.ed-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.rfs-badge.ed-lim, .rfs-badge.ed-no { background: var(--warn-bg); color: var(--warn-ink); }
.rfs-meta { font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px; }
.rfs-alert { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: 4px; padding: 6px 8px; font-size: 11.5px; margin-bottom: 8px; line-height: 1.5; }
.rfs-warn-i { color: var(--warn-ink); font-weight: 700; cursor: help; margin-left: 3px; }
.rfs-caveats { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 16px; font-size: 11.5px; color: var(--ink-2); max-width: 110ch; }
.rfs-caveats p { margin: 0 0 7px; line-height: 1.55; }

.rfs-epistemic {
  border-left: 3px solid var(--accent); background: var(--bg-sel);
  padding: 8px 10px; margin-bottom: 9px; border-radius: 0 4px 4px 0;
  font-size: 11.5px; line-height: 1.55; max-width: 110ch; color: var(--ink);
}
.rfs-epistemic a { font-weight: 600; }
.oos-contrast { border-left: 3px solid var(--accent); padding-left: 9px; color: var(--ink) !important; }
.rfs-cnt { color: var(--ink-3); font-weight: 400; font-size: 10.5px; white-space: nowrap; cursor: help; }
.rfs-noise {
  display: inline-block; width: 14px; text-align: center;
  font-size: 11px; background: var(--warn-bg); color: var(--warn-ink);
  border-radius: 3px; cursor: help; font-weight: 700;
}
.rfs-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 7px;
  font-size: 10.5px; color: var(--ink-3);
}
.rfs-legend b { color: var(--ink-2); }
/* Colour marks the sign, never the whole line: these figures are the least
   reliable content on the page and must not draw the eye first. */
.rfs-sign { font-weight: 700; }
.rfs-sign.up { color: var(--ok); }
.rfs-sign.down { color: var(--dead); }
.rfs-sign.flat { color: var(--ink-3); }
.rfs-metric { color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.rfs-sym { color: var(--ink-3); font-weight: 600; }
.rfs-detail { font-size: 10.5px; }
.rfs-kv { display: flex; gap: 6px; line-height: 1.45; }
.rfs-kv > span:first-child { flex: 0 0 68px; color: var(--ink-3); }
.rfs-kv > span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rfs-r-cont td:first-child { border-top: 0; }
.rfs-r-first > td { border-top: 1px solid var(--line); }
.rfs-items tr:first-child > th { border-top: 0; }
.rfs-toggle { margin-top: 6px; }
.rfs-tbl td.num { white-space: nowrap; }


/* ── Bloc Investisseurs de la fiche ──────────────────────────────────── */
.inv-row { border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
.inv-row:last-of-type { border-bottom: 0; }
.inv-head { display: flex; align-items: baseline; gap: 6px; }
.inv-fund { font-weight: 650; font-size: 12.5px; }
.inv-year { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.inv-via { font-size: 9.5px; border-radius: 3px; padding: 0 4px; margin-left: auto; }
.inv-via-domaine { background: color-mix(in srgb, var(--acq) 15%, transparent); color: var(--acq); }
.inv-via-nom { background: var(--warn-bg); color: var(--warn-ink); }
.inv-kv { display: flex; gap: 6px; font-size: 11.5px; padding: 1px 0; }
.inv-kv > span:first-child { flex: 0 0 92px; color: var(--ink-3); }
.inv-src { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.inv-former { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 4px; padding: 4px 6px; font-size: 10.5px; margin-top: 4px; line-height: 1.45; }
.inv-caveat { font-size: 10.5px; color: var(--ink-3); line-height: 1.45; margin-top: 8px;
  border-top: 1px solid var(--line-soft); padding-top: 6px; }
.rfs-ed-r { font-size: 9.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Evolution tab ─────────────────────────────────────────────────────── */
.ev-line { fill: none; stroke: var(--viz-bar); stroke-width: 1.6; stroke-linejoin: round; opacity: .85; }
.ev-line-trunc { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 2.5; opacity: .6; }
.ev-lbl { font-size: 10px; fill: var(--ink-2); }
.ev-lbl-trunc { fill: var(--ink-3); font-style: italic; }
.ev-bar { fill: var(--viz-bar); }
.ev-bar-gap { fill: var(--warn-ink); }
.ev-bar-artefact { fill: var(--dead); }
.ev-gap-key { color: var(--warn-ink); }
.ev-bulk td { background: var(--warn-bg); }
.ev-yes { color: var(--ok); font-weight: 600; }
.rfs-verdict-box { border-left: 3px solid var(--accent); padding-left: 10px; }
.d-traj { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.d-traj-pt { fill: var(--viz-bar); }
.d-traj-status { border-left: 2px solid var(--line); padding-left: 8px; margin: 6px 0; }
.ev-hyp-slow, .ev-hyp-fast { font-size: 10.5px; border-radius: 3px; padding: 1px 6px; }
.ev-hyp-slow { background: color-mix(in srgb, var(--warn-ink) 14%, transparent); color: var(--warn-ink); }
.ev-hyp-fast { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.d-traj-gap { fill: var(--bg-sunk); }

/* ── Europe Explorer ───────────────────────────────────────────────────── */
.eu-banner { background: var(--bg-sel); border: 1px solid var(--line); border-radius: 5px;
  padding: 9px 12px; margin: 10px 12px 8px; font-size: 12px; line-height: 1.55; max-width: 130ch; }
/* Same defect as `.layout` had: a height counted from the viewport in hard-coded
   pixels is wrong the day a bar is added above it. Flex measures what is
   actually there. */
.eu-body { display: grid; grid-template-columns: 268px 1fr; gap: 12px; padding: 0 12px 12px;
  flex: 1; min-height: 0; }
.eu-rail { overflow-y: auto; border-right: 1px solid var(--line); padding-right: 10px; }
.eu-rail-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.eu-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.eu-hint { font-size: 10.5px; color: var(--ink-3); line-height: 1.45; }
.eu-facet { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.eu-opts { display: flex; flex-direction: column; gap: 1px; max-height: 210px; overflow-y: auto; margin: 3px 0; }
.eu-opt { display: grid; grid-template-columns: 14px 1fr auto; gap: 5px; align-items: center;
  font-size: 11.5px; padding: 1px 2px; cursor: pointer; border-radius: 3px; }
.eu-opt:hover { background: var(--bg-hover); }
.eu-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-opt-n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 10.5px; }

/* min-height:0 is what makes the virtualisation work: without it a flex item's
   implicit min-height is its content, so .eu-scroll grew to 1 373 rows and the
   window computation rendered every one of them. */
.eu-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.eu-toolbar { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; flex-wrap: wrap; }
.eu-count { font-size: 13px; }
.eu-count .of { color: var(--ink-3); font-size: 11.5px; }
.eu-split { margin-left: 8px; font-size: 11px; color: var(--ink-2); cursor: help;
  border-bottom: 1px dotted var(--line); }
.eu-ms { margin-left: 6px; font-size: 10.5px; }
.eu-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }

.eu-table { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden; min-height: 0; }
.eu-head { display: grid; background: var(--bg-rail); border-bottom: 1px solid var(--line);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.eu-th { padding: 7px 8px; cursor: pointer; user-select: none; white-space: nowrap; }
.eu-th:hover { background: var(--bg-hover); }
.eu-th-flat { cursor: default; }
.eu-th-flat:hover { background: none; }
.eu-scroll { flex: 1; overflow-y: auto; position: relative; }
.eu-spacer { width: 1px; }
.eu-rows { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.eu-row { display: grid; height: 34px; align-items: center; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; }
.eu-row:hover { background: var(--bg-hover); }
.eu-td { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-td.num { text-align: right; font-variant-numeric: tabular-nums; }
.eu-name { font-weight: 500; }
.eu-src { font-size: 10.5px; background: var(--bg-sunk); border-radius: 3px; padding: 1px 6px; }
.eu-site { margin-left: 5px; color: var(--accent); text-decoration: none; font-size: 11px; }
.eu-flag { margin-left: 4px; font-size: 10px; color: var(--ink-3); cursor: help; }
.eu-flag-name { color: var(--warn-ink); }
.eu-flag-join { color: var(--dead); }
.eu-yc { color: var(--acq); cursor: help; }
.eu-empty { padding: 24px; color: var(--ink-3); font-size: 12.5px; }
.eu-fundsplit { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }
.eu-fundsplit b { color: var(--ink); }
.eu-manual { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 4px; padding: 6px 8px; font-size: 11.5px; margin-bottom: 8px; line-height: 1.5; }
.eu-caveats { display: flex; flex-direction: column; gap: 6px; margin: 0 12px 8px; max-width: 130ch; }
.eu-cav { font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
  border-left: 3px solid var(--line); padding-left: 9px; }
.eu-cav b { color: var(--ink); }
.eu-cav-zero { border-left-color: var(--warn-line); }
.eu-cav-note { display: block; margin-top: 2px; color: var(--ink-3); }
.in-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 5px; align-items: center; }
.in-range .input { width: 100%; }

/* `[hidden]` only sets display:none through the UA sheet, and an author
   `display` rule beats it. Europe and Incubators each own their rail, so the
   Explorer's must genuinely disappear there — it was still on screen. */
.rail[hidden] { display: none; }

/* ── Two-level navigation ──────────────────────────────────────────────── */
/* Subordinate to the tab above it, and it has to read that way: half the
   height, indented under the parent, sunk background rather than the topbar's.
   Buttons of the same weight as the level above cancel the hierarchy the two
   levels exist to create. */
.subtabs {
  display: flex; gap: 1px; align-items: stretch;
  flex: 0 0 26px; padding: 0 12px 0 26px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
}
.subtabs[hidden] { display: none; }
.subtab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3); font: inherit; font-size: 11.5px;
  padding: 0 10px; cursor: pointer; white-space: nowrap;
}
.subtab:hover { color: var(--ink-2); }
.subtab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.build { margin-left: 7px; font-size: 9.5px; font-weight: 400; color: var(--ink-3);
  letter-spacing: 0; text-transform: none; cursor: help; }

/* ── Sign-in gate ──────────────────────────────────────────────────────── */
.gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
  justify-content: center; background: var(--bg); }
.gate[hidden] { display: none; }
.gate-box { width: 320px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; padding: 22px; background: var(--bg-rail); }
.gate-box h1 { margin: 0; font-size: 17px; letter-spacing: .01em; }
.gate-sub { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.gate-box label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); }
.gate-actions { display: flex; gap: 6px; margin-top: 4px; }
.gate-actions .btn { flex: 1; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.gate-msg { font-size: 11.5px; min-height: 15px; color: var(--ink-2); line-height: 1.45; }
.gate-msg.is-error { color: var(--dead); }
.gate-msg.is-pending { color: var(--warn-ink); }
.gate-build { font-size: 9.5px; color: var(--ink-3); text-align: right; }
.signout { font-size: 11px; }