/* STRIMA — design system premium. Couleurs différenciées, hiérarchie claire, espaces respirants. */
:root {
  --paper: #f5f2ec; --raised: #faf8f4; --sunken: #ede8df; --rule: #dcd5c8; --rule-strong: #8f8069;
  --ink: #191512; --ink-2: #4a433a; --ink-3: #6b6256;
  --mark: #105664; --mark-wash: #ddf8fd; --mark-deep: #0b3d47;
  --live: #2f6b3f; --live-wash: #e6f5ea;
  --bad: #9b2c1f; --bad-wash: #f8e4df;
  --warn: #7a5410; --warn-wash: #f6ead2;
  /* couleurs différenciantes par section — sobres, lisibles */
  --sec-ops: #1a5276; --sec-ops-wash: #e8f0f6;       /* opérationnel : bleu nuit */
  --sec-dir: #1e6e3f; --sec-dir-wash: #e5f3eb;        /* direction : vert forêt */
  --sec-meet: #7d5a29; --sec-meet-wash: #f5efe3;      /* réunion : bronze */
  --serif: "Source Serif 4", Charter, Georgia, serif;
  --sans: "Public Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius: 10px; --radius-sm: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141210; --raised: #1c1a16; --sunken: #0e0d0b; --rule: #2e2a23; --rule-strong: #665d50;
    --ink: #ede8de; --ink-2: #cfc7b8; --ink-3: #a59b8a;
    --mark: #1db8d4; --mark-wash: #0e2b33; --mark-deep: #2eeaff;
    --live: #6fbf85; --live-wash: #142e1c;
    --bad: #f08a7a; --bad-wash: #3a1d17;
    --warn: #e3b25c; --warn-wash: #33270f;
    --sec-ops: #5dade2; --sec-ops-wash: #162a36;
    --sec-dir: #58d68d; --sec-dir-wash: #14291c;
    --sec-meet: #d4a44a; --sec-meet-wash: #2a2110;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141210; --raised: #1c1a16; --sunken: #0e0d0b; --rule: #2e2a23; --rule-strong: #665d50;
  --ink: #ede8de; --ink-2: #cfc7b8; --ink-3: #a59b8a;
  --mark: #1db8d4; --mark-wash: #0e2b33; --mark-deep: #2eeaff;
  --live: #6fbf85; --live-wash: #142e1c;
  --bad: #f08a7a; --bad-wash: #3a1d17;
  --warn: #e3b25c; --warn-wash: #33270f;
  --sec-ops: #5dade2; --sec-ops-wash: #162a36;
  --sec-dir: #58d68d; --sec-dir-wash: #14291c;
  --sec-meet: #d4a44a; --sec-meet-wash: #2a2110;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); }
body { min-height: 100vh; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
.mono, code { font-family: var(--mono); font-size: 13px; }
.dim { color: var(--ink-3); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
[hidden] { display: none !important; }

/* bandeau démo */
.demo-band { background: var(--warn-wash); border-bottom: 1px solid var(--rule); color: var(--warn); font-size: 12px; padding: 5px 20px; letter-spacing: 0.02em; }
.demo-band b { letter-spacing: 0.06em; }

/* ─── NAVIGATION SIMPLIFIÉE ─────────────────────────────────── */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 31px); }
nav.side {
  border-right: 1px solid var(--rule); padding: 20px 10px; display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: 0; height: calc(100vh - 31px); overflow-y: auto; background: var(--raised);
}
.brand { font-family: var(--serif); font-size: 18px; font-weight: 600; padding: 0 12px 2px; letter-spacing: 0.02em; }
.brand-sub { font-size: 11px; color: var(--ink-3); padding: 0 12px 16px; }
nav.side a {
  text-decoration: none; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-2);
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; transition: background .12s, color .12s;
}
nav.side a:hover { background: var(--sunken); color: var(--ink); }
nav.side a.on { background: var(--mark-wash); color: var(--mark); font-weight: 600; }
nav.side .sep {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  padding: 16px 12px 5px; display: flex; align-items: center; gap: 8px;
}
nav.side .sep::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
nav.side .count { font-size: 11px; background: var(--bad); color: #fff; border-radius: 99px; padding: 1px 7px; margin-left: auto; font-variant-numeric: tabular-nums; }
nav.side .sec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
nav.side .foot { margin-top: auto; font-size: 12px; color: var(--ink-3); padding: 8px 12px 0; border-top: 1px solid var(--rule); display: grid; gap: 4px; }
.linklike { background: none; border: 0; padding: 0; color: var(--ink-3); text-decoration: underline; cursor: pointer; font-size: 12px; text-align: left; }

main { padding: 24px 32px 80px; max-width: 1280px; width: 100%; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.head p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ─── KPIs ──────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--raised); margin-bottom: 22px; overflow: hidden; }
.kpi { padding: 14px 16px; border-right: 1px solid var(--rule); }
.kpi:last-child { border-right: 0; }
.kpi .l { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi .v { font-family: var(--serif); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .s { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.kpi .down { color: var(--bad); }

/* ─── BLOCS & CARTES ────────────────────────────────────────── */
section.block { margin: 0 0 24px; }
section.block > .bh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.card { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; }

/* ─── TABLES ────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--ink-3); padding: 9px 10px; border-bottom: 2px solid var(--rule-strong); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }
td { padding: 10px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr.click { cursor: pointer; transition: background .1s; }
tr.click:hover td { background: var(--sunken); }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--raised); }
.tablewrap table th:first-child, .tablewrap table td:first-child { padding-left: 14px; }
.tablewrap tr:last-child td { border-bottom: 0; }
td.changed { background: var(--warn-wash); }
.was { text-decoration: line-through; color: var(--ink-3); margin-right: 6px; }

/* ─── PILLS ─────────────────────────────────────────────────── */
.pill { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--rule-strong); color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.pill.haute { border-color: var(--bad); color: var(--bad); background: var(--bad-wash); }
.pill.moyenne { border-color: var(--warn); color: var(--warn); background: var(--warn-wash); }
.pill.ok { border-color: var(--live); color: var(--live); background: var(--live-wash); }
.pill.mark { border-color: var(--mark); color: var(--mark); background: var(--mark-wash); }

/* ─── BARRE ─────────────────────────────────────────────────── */
.bar { height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; min-width: 80px; }
.bar > i { display: block; height: 100%; background: var(--mark); border-radius: 3px; }

/* ─── MARQUE ────────────────────────────────────────────────── */
.marked { box-shadow: inset 4px 0 0 var(--mark); }
.marked .mtitle { color: var(--mark); }

/* ─── ALERTES ───────────────────────────────────────────────── */
.alert { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; padding: 14px 18px; border-bottom: 1px solid var(--rule); transition: background .1s; }
.alert:hover { background: var(--sunken); }
.alert:last-child { border-bottom: 0; }
.alert .t { font-weight: 600; font-size: 14px; }
.alert .r { color: var(--ink-2); font-size: 13px; }
.alert .side { text-align: right; font-size: 13px; }

/* ─── BOUTONS — premium, colorés par contexte ───────────────── */
.btn {
  appearance: none; border: 1px solid var(--rule-strong); background: var(--raised); padding: 8px 16px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; transition: all .12s;
}
.btn:hover { background: var(--sunken); border-color: var(--ink-3); }
.btn.primary { background: var(--mark); color: #fff; border-color: var(--mark); }
.btn.primary:hover { background: var(--mark-deep); border-color: var(--mark-deep); }
.btn.ops { background: var(--sec-ops); color: #fff; border-color: var(--sec-ops); }
.btn.ops:hover { opacity: 0.9; }
.btn.dir { background: var(--sec-dir); color: #fff; border-color: var(--sec-dir); }
.btn.dir:hover { opacity: 0.9; }
.btn.danger { border-color: var(--bad); color: var(--bad); background: var(--bad-wash); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ─── GRILLES ───────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }

/* ─── FACTS ─────────────────────────────────────────────────── */
dl.facts { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
dl.facts dt { color: var(--ink-3); font-weight: 500; }
dl.facts dd { margin: 0; }
.formula { font-family: var(--mono); font-size: 13.5px; background: var(--sunken); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; white-space: nowrap; }
.formula .eq { color: var(--ink); font-weight: 600; }

/* ─── ONGLETS ───────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--rule); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  text-decoration: none; padding: 9px 16px; color: var(--ink-3); border-bottom: 2px solid transparent;
  margin-bottom: -2px; font-size: 13px; font-weight: 500; transition: color .12s, border-color .12s;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--mark); border-bottom-color: var(--mark); font-weight: 600; }

/* ─── CHAÎNE ────────────────────────────────────────────────── */
.chain { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--raised); overflow: hidden; }
.chain > div { padding: 12px 14px; border-right: 1px solid var(--rule); }
.chain > div:last-child { border-right: 0; }
.chain .l { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.chain .v { font-family: var(--serif); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chain .s { font-size: 12px; color: var(--ink-2); }

/* ─── DOCUMENTS ─────────────────────────────────────────────── */
.doc { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--raised); font-size: 13.5px; transition: border-color .12s; }
.doc:hover { border-color: var(--mark); }
.doc .dh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.doc q { display: block; color: var(--ink-2); margin-top: 6px; quotes: none; font-size: 13px; line-height: 1.5; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper); cursor: pointer; text-decoration: none; transition: all .12s; }
.chip:hover { border-color: var(--mark); color: var(--mark); background: var(--mark-wash); }

/* ─── TIMELINE ──────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.timeline .live { color: var(--live); font-size: 11px; font-weight: 600; }

/* ─── DÉCISIONS ─────────────────────────────────────────────── */
.decision { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px; }
textarea, input[type=text], input[type=password], select {
  width: 100%; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; transition: border-color .12s;
}
textarea { min-height: 64px; resize: vertical; }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; border-color: var(--mark); }

/* ─── ASSISTANT ─────────────────────────────────────────────── */
.ask { display: flex; gap: 8px; }
.ask input { flex: 1; font-size: 15px; padding: 11px 13px; border-radius: var(--radius-sm); }
.answer h3 { margin-bottom: 8px; }
.answer .sec { margin-top: 14px; }
.answer .sec > .k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.answer ul { margin: 0; padding-left: 18px; }
.answer li { margin: 3px 0; }

/* ─── SVG ───────────────────────────────────────────────────── */
svg text { font-family: var(--sans); }
.chart { width: 100%; height: auto; }

/* ─── PITCH ─────────────────────────────────────────────────── */
.slides { position: fixed; inset: 0; background: var(--paper); z-index: 50; display: grid; grid-template-rows: 1fr auto; }
.slide { padding: 7vh 9vw; display: flex; flex-direction: column; justify-content: center; gap: 2.4vh; max-width: 1400px; margin: 0 auto; width: 100%; }
.slide .eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mark); font-weight: 600; }
.slide h1 { font-size: clamp(28px, 4.4vw, 52px); line-height: 1.08; max-width: 18ch; }
.slide p, .slide li { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 55ch; }
.slide ul { margin: 0; padding-left: 1.1em; display: grid; gap: 1vh; }
.slide .flow { display: flex; gap: 0; flex-wrap: wrap; font-size: clamp(13px, 1.2vw, 16px); }
.slide .flow span { padding: 10px 14px; border: 1px solid var(--rule-strong); margin: -1px 0 0 -1px; background: var(--raised); }
.slide .flow span.marked { box-shadow: inset 0 -3px 0 var(--mark); font-weight: 600; }
.slide b { color: var(--ink); font-weight: 600; }
.slidebar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.rule-marked { position: relative; height: 2px; background: var(--rule); margin: 1vh 0; max-width: 200px; }
.rule-marked::after { content: ""; position: absolute; top: -1px; left: var(--at, 38%); width: 54px; height: 3px; background: var(--mark); }

/* ─── CONNEXION ─────────────────────────────────────────────── */
.login { max-width: 400px; margin: 12vh auto; padding: 0 16px; }
.login form { display: grid; gap: 12px; margin-top: 18px; }
.err { color: var(--bad); font-size: 13px; min-height: 20px; }

/* ─── SÉLECTEUR DE RÔLE ─────────────────────────────────────── */
.role-selector { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.role-btns { display: flex; gap: 4px; }
.role-btn {
  appearance: none; border: 1px solid var(--rule); background: var(--paper); padding: 6px 14px;
  border-radius: 99px; cursor: pointer; font-size: 12.5px; color: var(--ink-3); transition: all .12s;
}
.role-btn:hover { border-color: var(--mark); color: var(--mark); }
.role-btn.on { background: var(--mark); color: #fff; border-color: var(--mark); }

/* ─── HOME GRID — hiérarchie par couleur ────────────────────── */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
.home-block.marked { background: var(--bad-wash); border: 1px solid var(--bad); border-left: 4px solid var(--bad); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px; }
.home-block.marked h3 { color: var(--bad); font-size: 15px; margin-bottom: 12px; }
.home-block { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.home-block h3 { margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.home-item {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin: 0 -12px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); gap: 12px; transition: background .1s;
}
.home-item:first-child { margin-top: -4px; }
.home-item:hover { background: var(--sunken); }
.home-item .t { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.home-item .dim { margin-top: 2px; }
.home-more { display: block; font-size: 12.5px; color: var(--mark); text-decoration: none; margin-top: 10px; padding: 6px 0; font-weight: 600; }
.home-more:hover { text-decoration: underline; }

/* ─── RECHERCHE HOME ────────────────────────────────────────── */
.search-home { background: var(--mark); border-radius: var(--radius); padding: 24px 26px; color: #fff; }
.search-home h3 { color: #fff; margin-bottom: 12px; font-size: 16px; }
.search-home .ask input { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 15px; padding: 11px 13px; border-radius: var(--radius-sm); }
.search-home .ask input::placeholder { color: rgba(255,255,255,0.55); }
.search-home .btn.primary { background: #fff; color: var(--mark); border-color: #fff; font-weight: 600; }
.search-home .btn.primary:hover { background: rgba(255,255,255,0.9); }
.search-home .chip { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); }
.search-home .chip:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }

/* ─── WORKFLOW CARDS ────────────────────────────────────────── */
.workflow-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.workflow-card {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; transition: all .15s;
}
.workflow-card:hover { border-color: var(--mark); box-shadow: 0 2px 16px rgba(16,86,100,0.06); transform: translateY(-1px); }
.workflow-card h3 { font-size: 15px; }
.workflow-card .dim { flex: 1; line-height: 1.5; }
.wf-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }

/* ─── FORGE ORCHESTRATION ───────────────────────────────────── */
.forge-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; background: var(--mark-wash); border: 1px solid var(--mark); border-radius: var(--radius-sm); }
.forge-step { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.forge-step.done { color: var(--mark); font-weight: 600; }
.forge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); flex-shrink: 0; }
.forge-step.done .forge-dot { background: var(--mark); }
.forge-arrow { color: var(--ink-3); margin: 0 4px; font-size: 11px; }

/* ─── EN-TÊTE PROJET ────────────────────────────────────────── */
.project-header { margin-bottom: 22px; padding: 18px 22px; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius); border-top: 3px solid var(--mark); }
.ph-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ph-top h1 { font-size: 22px; }
.ph-sub { color: var(--ink-2); font-size: 13.5px; margin-bottom: 14px; }
.project-stats { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rule); }
.ps { display: flex; flex-direction: column; gap: 2px; }
.ps .dim { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ps b { font-family: var(--serif); font-size: 17px; color: var(--ink); }

/* ─── RÉPONSE ───────────────────────────────────────────────── */
.answer-block { margin-top: 16px; }

/* ─── PARCOURS DÉMO ─────────────────────────────────────────── */
.demo-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding: 14px 0; }
.df-step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.df-step b { font-size: 13px; }
.df-num { width: 26px; height: 26px; border-radius: 50%; background: var(--mark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.df-arrow { color: var(--ink-3); margin: 0 6px; font-size: 13px; flex-shrink: 0; }

/* ─── PLAN 2D (métré) ──────────────────────────────────────── */
.plan-canvas-wrap {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--raised);
  padding: 16px; margin-bottom: 18px; position: relative; overflow: hidden;
}
.plan-canvas-wrap canvas { display: block; width: 100%; cursor: crosshair; background: #fff; border-radius: var(--radius-sm); }
.plan-toolbar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.plan-toolbar .btn.active { background: var(--mark); color: #fff; border-color: var(--mark); }
.dim-tag {
  position: absolute; background: var(--mark); color: #fff; font: 600 11px var(--mono);
  padding: 2px 6px; border-radius: 3px; pointer-events: none; white-space: nowrap;
}

/* ─── FOCUS & ACTIVE ────────────────────────────────────────── */
.btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.btn:active { transform: scale(0.97); opacity: 0.85; }
.chip:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.chip:active { background: var(--sunken); }
.role-btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.role-btn:active { transform: scale(0.97); }
.home-item:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; border-radius: var(--radius-sm); }
.alert:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }
tr.click:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }
.tabs a:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.linklike:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* ─── SKIP LINK ─────────────────────────────────────────────── */
.skip-link { position: absolute; top: -100%; left: 16px; background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 100; font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 0; }

/* ─── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  nav.side { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-top: 1px solid var(--rule); padding: 8px; z-index: 40; justify-content: center; background: var(--raised); }
  nav.side .sep, nav.side .brand-sub, nav.side .foot, nav.side .brand { display: none; }
  nav.side a { font-size: 12px; padding: 6px 10px; }
  main { padding: 16px 14px 80px; min-width: 0; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .chain { grid-template-columns: repeat(3, 1fr); }
  dl.facts { grid-template-columns: 1fr; }
  .tablewrap table { min-width: 680px; }
  nav.side .count { margin-left: 4px; }
  .home-grid { grid-template-columns: 1fr; }
  .workflow-cards { grid-template-columns: 1fr; }
  .project-stats { gap: 14px; }
  .demo-flow { flex-direction: column; align-items: stretch; }
  .df-arrow { transform: rotate(90deg); text-align: center; margin: 4px 0; }
}