/* ReaNOS — "Atlas" design system.
   Focus × Console: a calm, spacious workspace that always tells you where you
   are. A persistent left rail (desktop) / slim top stepper (phone) carries the
   whole journey — frame → weigh → simulate → compare — so you are never lost,
   while the workspace itself stays quiet and one-thing-at-a-time. The ranked
   paths toggle between FOCUS (one at a time, with peek) and OVERVIEW (a calm
   grid). The room breathes: a slow ~16s inhale/exhale (--breath, driven by
   app.js) that the ambient light and the lead card swell and settle with, to
   gently steady the viewer's own breath for calmer thinking.
   Palette: aqua (clarity / action) · sage (committed) · amber (road not taken). */

:root{
  /* Ambient breath. app.js writes this 0→1→0 on a slow cycle. Rest = 0.5. */
  --breath:0.5;

  /* Ground & surfaces — deep cool indigo, soft and low-contrast. */
  --bg:#0c0e14;
  --bg-2:#11141c;
  --panel:#151922;
  --panel-2:#1b202b;
  --raise:#232936;
  --card-solid:#171c26;      /* opaque card fill (perf; no per-card blur) */
  --card-hi-solid:#1f2531;

  /* Text — cool off-white, softened for restful contrast. */
  --text:#e8eaf0;
  --text-2:#98a0b0;
  --text-3:#616a7c;
  --muted:var(--text-3);

  --line:rgba(150,160,185,0.14);
  --line-2:rgba(150,160,185,0.24);
  --line-soft:rgba(150,160,185,0.09);

  /* Semantic — aqua / sage / amber. */
  --accent:#a99bff;          /* violet — the core's light; primary action */
  --accent-deep:#7b5cff;
  --accent-ink:#12141c;      /* text on accent */
  --lived:#5fc79f;           /* sage — committed / resolved */
  --route:var(--lived);
  --whatif:#e0a95e;          /* amber — simulated / road not taken */
  --branch:var(--whatif);
  --danger:#e58aa0;
  --glow:color-mix(in oklab,var(--accent) 42%,transparent);

  /* Ambient field + breath. Empty --field = derive a contrasting colour from the
     background (default); set it to force a specific particle colour. --field-strength
     scales overall prominence (0..~1.5). */
  --field:;
  --field-strength:1;

  /* Ink colours that sit ON saturated fills (kept dark in both themes since the
     fill is always coloured). Tokenised so nothing hardcodes a hex. */
  --on-lived:#04241a;
  --on-danger:#2a0710;
  /* Modal backdrop + generic dark scrim — overridable per theme. */
  --overlay:rgba(8,10,15,.82);
  --scrim-1:rgba(0,0,0,.3);
  --scrim-2:rgba(0,0,0,.35);
  --scrim-3:rgba(0,0,0,.62);
  --tint-hover:rgba(255,255,255,.04);

  /* Glass */
  --glass:saturate(120%) blur(12px);

  /* Type */
  /* Type scale. h1/h2 are a touch larger and tighter than before, echoing the
     landing page's display type without inflating the dense working views. */
  --fs-h1:23px; --fs-h2:18px; --fs-body:15px; --fs-sm:13.5px; --fs-xs:12px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",monospace;

  /* Rhythm */
  /* Radii mirror the landing page: soft cards (16/20) and fully-round actions,
     so the app and the marketing site read as one product. */
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-calm:.35s var(--ease);

  --shadow-1:0 1px 3px rgba(0,0,0,.35);
  --shadow-2:0 24px 60px -22px rgba(0,0,0,.62);
  --focus:0 0 0 3px color-mix(in oklab,var(--accent) 42%,transparent);

  --rail-w:256px;
  --page-max:820px;
}

/* Semantic tints — derived so every faint fill tracks the palette. */
:root{
  --accent-06:color-mix(in oklab,var(--accent) 8%,transparent);
  --accent-10:color-mix(in oklab,var(--accent) 13%,transparent);
  --accent-14:color-mix(in oklab,var(--accent) 18%,transparent);
  --accent-30:color-mix(in oklab,var(--accent) 32%,transparent);
  --accent-45:color-mix(in oklab,var(--accent) 45%,transparent);
  --lived-10:color-mix(in oklab,var(--lived) 12%,transparent);
  --lived-16:color-mix(in oklab,var(--lived) 18%,transparent);
  --lived-40:color-mix(in oklab,var(--lived) 42%,transparent);
  --whatif-10:color-mix(in oklab,var(--whatif) 12%,transparent);
  --whatif-16:color-mix(in oklab,var(--whatif) 18%,transparent);
  --whatif-40:color-mix(in oklab,var(--whatif) 42%,transparent);
  --danger-10:color-mix(in oklab,var(--danger) 12%,transparent);
}

/* ── Light theme ────────────────────────────────────────────────────────────
   Overrides only the BASE tokens; every derived tint (color-mix) and every
   token-driven surface follows automatically. Applied via <html data-theme>.
   The accent/lived/whatif hues are kept (they read on light too) but slightly
   deepened for contrast on pale surfaces. */
:root[data-theme="light"]{
  --bg:#f4f6fa;
  --bg-2:#eaeef4;
  --panel:#ffffff;
  --panel-2:#f1f4f9;
  --raise:#e6ebf3;
  --card-solid:#ffffff;
  --card-hi-solid:#f4f7fb;

  --text:#1a1f2b;
  --text-2:#4a5464;
  --text-3:#78828f;
  --muted:var(--text-3);

  --line:rgba(45,60,85,0.14);
  --line-2:rgba(45,60,85,0.22);
  --line-soft:rgba(45,60,85,0.08);

  /* Deepen the semantic hues so they hold contrast on light surfaces. */
  --accent:#6b4de0;
  --accent-deep:#5539c0;
  --accent-ink:#ffffff;
  --lived:#2f9e73;
  --whatif:#c07d20;
  --danger:#c0435f;
  --on-lived:#ffffff;
  --on-danger:#ffffff;

  --overlay:rgba(30,40,60,0.42);
  --scrim-1:rgba(30,45,75,.10);
  --scrim-2:rgba(30,45,75,.12);
  --scrim-3:rgba(30,45,75,.20);
  --tint-hover:rgba(30,45,75,.05);

  --shadow-1:0 1px 3px rgba(30,45,75,.10);
  --shadow-2:0 24px 60px -22px rgba(30,45,75,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow:hidden;
}

/* ── Breathing ground + field ─────────────────────────────────────────────── */
.breath-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.breath-layer::before{
  content:'';position:absolute;
  left:calc(var(--rail-w) + (100vw - var(--rail-w))/2);top:44%;
  width:86vmax;height:86vmax;
  transform:translate(-50%,-50%) scale(calc(.85 + .22*var(--breath)));
  /* Stronger, wider aura — a clearly-felt swell of accent light that breathes.
     Scaled by --field-strength so a tenant can dial it up/down. */
  background:radial-gradient(circle,
    color-mix(in oklab,var(--accent) calc((16% + 13%*var(--breath)) * var(--field-strength)),transparent) 0%,
    color-mix(in oklab,var(--accent) calc((6% + 6%*var(--breath)) * var(--field-strength)),transparent) 34%,
    transparent 66%);
  opacity:calc(.55 + .45*var(--breath));
  transition:transform 1.6s linear,opacity 1.6s linear;
  mix-blend-mode:plus-lighter;
}
/* On light themes, plus-lighter would wash out — use normal blend there. */
:root[data-theme="light"] .breath-layer::before{mix-blend-mode:multiply}
#field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1}

/* ── App frame ────────────────────────────────────────────────────────────── */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh;height:100dvh}

/* ── Rail (desktop) ───────────────────────────────────────────────────────── */
.rail{
  background:color-mix(in oklab,var(--panel) 86%,transparent);
  border-right:1px solid var(--line);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  display:flex;flex-direction:column;padding:22px 16px;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 20px;border-bottom:1px solid var(--line)}
/* Now holds the real branching-node mark; the breathing halo sits behind it. */
.brand-glyph{width:30px;height:30px;flex:0 0 auto;position:relative;display:grid;place-items:center}
.brand-glyph svg{width:30px;height:30px;position:relative;z-index:1}
.brand-glyph::after{content:'';position:absolute;left:50%;top:44%;width:22px;height:22px;transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:0 0 calc(6px + 8px*var(--breath)) color-mix(in oklab,var(--accent) 50%,transparent);
  transition:box-shadow 1s linear}
.brand b{font-size:16px;font-weight:700;letter-spacing:.2px}
.brand b i{color:var(--accent);font-style:normal}

/* ── Easter egg: hover "NOS" and it flips to "SON" ──────────────────────────
   ReaNOS is an anagram of "reason"; this is the same joke told backwards.
   Pure CSS and pure decoration, so it costs nothing and cannot break the app.

   The letters live in ::before/::after rather than replacing text content, so
   the real "NOS" stays in the DOM for screen readers, copy-paste and search.
   The <i> is given a fixed inline-grid cell and both faces are stacked in it,
   so the wordmark cannot reflow or shift the rail when the swap happens —
   that was the same class of bug as the "Clari veo" flex-gap split.
   Applies anywhere the wordmark is rendered: rail, mobile bar, drawer. */
.brand-egg{
  display:inline-grid;
  vertical-align:baseline;
  font-style:normal;
  /* Both faces occupy the one grid cell, so width is the max of the two. */
}
.brand-egg::before,
.brand-egg::after{
  grid-area:1/1;
  transition:opacity .18s ease;
}
.brand-egg::before{content:attr(data-a);opacity:1}   /* NOS */
.brand-egg::after {content:attr(data-b);opacity:0}   /* SON */
.brand-egg:hover::before,
.brand-egg:focus-visible::before{opacity:0}
.brand-egg:hover::after,
.brand-egg:focus-visible::after{opacity:1}
/* The visible text is in pseudo-elements; hide the real letters without
   removing them from the accessibility tree or the clipboard. */
.brand-egg > span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .brand-egg::before,.brand-egg::after{transition:none}
}
/* Tenant custom logo (SVG markup or image). Constrained so any upload fits the rail.
   An explicit height is REQUIRED — an inline <svg> with a viewBox but no width/height
   collapses to 0 when only max-height is set. width:auto then follows the viewBox. */
.brand-logo{display:inline-flex;align-items:center;height:30px;color:var(--text)}
.brand-logo svg{height:30px;width:auto;max-width:170px;display:block}
.brand-logo-img{height:30px;max-width:170px;width:auto;object-fit:contain;display:block}
/* Mark beside the wordmark in the mobile header and the drawer header. The rail
   shows glyph + wordmark on desktop; these two surfaces previously showed the
   word alone, so the app looked unbranded on a phone. */
/* No flex gap here: the wordmark's <i> is a flex child too, so a gap would split
   "Clari veo" / "Rea NOS". The glyph carries its own right margin instead. */
.brand-sm{display:inline-flex;align-items:center}
.brand-sm-glyph{width:22px;height:22px;flex:0 0 auto;display:block;line-height:0;margin-right:8px}
.brand-sm-glyph svg{width:22px;height:22px;display:block}
.brand-sm .brand-logo{height:22px}
.brand-sm .brand-logo svg,.brand-sm .brand-logo-img{height:22px}

.rail-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-3);margin:22px 8px 9px}

.steps{display:flex;flex-direction:column;gap:1px}
.step{
  display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-2);font-size:13.5px;transition:.2s;position:relative;
  background:none;border:none;text-align:left;width:100%;font-family:inherit;
}
.step:hover{background:var(--panel-2);color:var(--text)}
.step.active{background:var(--raise);color:var(--text)}
.step.active::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--accent)}
.step:disabled{opacity:.5;cursor:default}
.step:disabled:hover{background:none;color:var(--text-2)}
.step .n{
  width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;font-size:11px;font-family:var(--mono);color:var(--text-3);flex:0 0 auto;
}
.step.active .n{border-color:var(--accent);color:var(--accent)}
.step.done .n{background:var(--lived);border-color:var(--lived);color:var(--on-lived)}
/* timeline moment dots (in rail) */
.step .n.sage{border-color:var(--lived);color:var(--lived)}
.step.viewing{background:var(--raise)}
.step.viewing .n{border-color:var(--accent);color:var(--accent)}
.step .n.well{background:var(--lived);border-color:var(--lived);color:var(--on-lived)}
.step .n.poorly{border-color:var(--danger);color:var(--danger)}

.rail-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.railbtn{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--text-2);
  font-size:13px;cursor:pointer;background:none;border:none;text-align:left;width:100%;font-family:inherit;
}
.railbtn:hover{background:var(--panel-2);color:var(--text)}
/* Primary rail action — the audit-ready plan document (the deliverable). */
.railbtn-primary{background:var(--accent-10);color:var(--accent);font-weight:600}
.railbtn-primary:hover{background:var(--accent-14);color:var(--accent)}

/* ── Mobile stepper (hidden on desktop) ───────────────────────────────────── */
.mobetop{display:none}

/* ── Workspace ────────────────────────────────────────────────────────────── */
.work{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  height:58px;flex:0 0 auto;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
}
.crumbs{font-size:13px;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs b{color:var(--text)}
.crumbs .sep{color:var(--text-3);margin:0 5px}

.mode-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--accent);
  background:var(--accent-14);border:1px solid var(--accent-30);padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;
}
.mode-pill:hover{filter:brightness(1.1)}
.mode-pill .chevron{font-size:9px;opacity:.75}

.canvas{flex:1;overflow-y:auto;padding:34px 40px 60px}
/* The working column is anchored to the rail side (left), not floated dead-centre
   in a wide workspace — that left a large void on big screens. It keeps a
   comfortable reading measure but starts near the rail so the eye has an anchor. */
.canvas-inner{max-width:var(--page-max);margin:0 auto 0 0}

.workfoot{flex:0 0 auto;min-height:30px;padding:8px 28px;border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--text-2);display:flex;align-items:center}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
button{
  font-family:inherit;font-size:var(--fs-body);border-radius:var(--r-pill);padding:11px 22px;cursor:pointer;
  border:1px solid var(--line);background:var(--raise);color:var(--text);
  transition:filter .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .12s var(--ease);
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:none;box-shadow:var(--focus)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;letter-spacing:.1px}
button.secondary{background:transparent;color:var(--text-2)}
button.secondary:hover{color:var(--text);border-color:var(--line-2);filter:none}
button.ghost{background:transparent;color:var(--text-2)}
button.ghost:hover{color:var(--text);border-color:var(--line-2);filter:none}
button.round{width:44px;height:44px;padding:0;border-radius:50%;font-size:18px;background:transparent;color:var(--text-2)}
button.round:hover{border-color:var(--accent);color:var(--accent);filter:none}
button.danger{background:var(--danger);color:var(--on-danger)}
button.mini{padding:8px 12px;font-size:var(--fs-sm);border-radius:9px}
button:disabled{opacity:.45;cursor:default;filter:none;transform:none}

/* ── Situation strip ──────────────────────────────────────────────────────── */
.sit{
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:28px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:color-mix(in oklab,var(--panel) 55%,transparent);
}
.sit .tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lived);
  background:var(--lived-10);border-radius:6px;padding:4px 9px;font-weight:700;white-space:nowrap}
.sit.whatif .tag{color:var(--whatif);background:var(--whatif-10)}
.sit p{font-size:14px;color:var(--text-2);line-height:1.55}

/* ── Moment header (situation-entry & generic) ────────────────────────────── */
.moment-header{margin-bottom:18px}
.moment-header .kicker{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.moment-header.whatif-mode .kicker{color:var(--whatif)}
.moment-header h2{margin:6px 0 0;font-size:23px;font-weight:600;line-height:1.32;max-width:24ch}

/* ── Section head + toggle ────────────────────────────────────────────────── */
.section-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.section-h h2{font-size:var(--fs-h2);font-weight:600}
.section-h .sub{font-size:12.5px;color:var(--text-3);display:block;margin-top:3px;font-weight:400}
.view-toggle{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.view-toggle button{font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:var(--r-pill);border:none;background:none;
  color:var(--text-2);cursor:pointer;transition:.25s;display:flex;align-items:center;gap:6px}
.view-toggle button.on{background:var(--raise);color:var(--text);box-shadow:0 1px 2px var(--scrim-1)}
.view-toggle button:hover:not(.on){color:var(--text);filter:none}

/* ── FOCUS view (one path, with peek) ─────────────────────────────────────── */
.focus-view{display:none}
.focus-view.show{display:block}
.stagewrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
.peek{flex:0 0 auto;width:46px;align-self:stretch;max-height:250px;margin:auto 0;border-radius:16px;border:1px solid var(--line);
  opacity:.35;background:color-mix(in oklab,var(--panel) 40%,transparent);cursor:pointer;transition:.25s}
.peek:hover{opacity:.6}
.peek.empty{visibility:hidden}
.card-lg{
  flex:1;max-width:560px;margin:0 18px;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:30px 32px;
  background:color-mix(in oklab,var(--bg-2) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 calc(20px + 8px*var(--breath)) 60px -26px color-mix(in oklab,var(--accent) calc(38% + 30%*var(--breath)),transparent);
  transition:box-shadow 1s linear;
}
.card-lg .rank{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.card-lg .pct{font-size:34px;font-weight:600;color:var(--accent);font-family:var(--mono)}
.card-lg.mid .pct{color:var(--lived)} .card-lg.low .pct{color:var(--whatif)}
.card-lg .of{font-size:12px;color:var(--text-3);letter-spacing:1.5px;text-transform:uppercase}
.card-lg .title{font-size:24px;font-weight:500;margin-bottom:13px;line-height:1.3}
.card-lg .summary{font-size:16px;color:var(--text-2);line-height:1.6}
.card-lg .why{margin-top:18px;font-size:14px;color:var(--text-3);line-height:1.55;padding-top:16px;border-top:1px solid var(--line)}
.focus-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.dots{display:flex;gap:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.3s;cursor:pointer}
.dots i.on{background:var(--accent);transform:scale(1.3)}
.focus-actions{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── OVERVIEW view (calm grid) ────────────────────────────────────────────── */
.overview{display:none}
.overview.show{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.opt{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  background:var(--card-solid);transition:border-color var(--t-calm),transform var(--t-calm),box-shadow var(--t-calm);cursor:pointer;
}
.opt:hover{border-color:var(--line-2);transform:translateY(-2px);background:var(--card-hi-solid)}
.opt.lead{border-color:var(--accent-45);
  box-shadow:0 calc(14px + 7px*var(--breath)) 44px -22px color-mix(in oklab,var(--accent) calc(42% + 32%*var(--breath)),transparent);
  transition:box-shadow 1s linear,transform var(--t-calm),border-color var(--t-calm)}
.opt .meter{height:4px;background:var(--line)}
.opt .meter i{display:block;height:100%;background:var(--accent)}
.opt.mid .meter i{background:var(--lived)} .opt.low .meter i{background:var(--whatif)}
.opt .pad{padding:17px 17px 16px;display:flex;flex-direction:column;flex:1}
.opt .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;gap:8px}
.opt .pct{font-family:var(--mono);font-size:19px;font-weight:600}
.opt.lead .pct{color:var(--accent)} .opt.mid .pct{color:var(--lived)} .opt.low .pct{color:var(--whatif)}
.opt .badge{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);border-radius:5px;padding:3px 7px;white-space:nowrap}
.opt .title{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:8px;overflow-wrap:anywhere}
.opt .summary{font-size:13px;color:var(--text-2);line-height:1.5;margin-bottom:12px}
.opt .why{font-size:11.5px;color:var(--text-3);line-height:1.5;padding-left:10px;border-left:2px solid var(--line);margin-top:auto}
.opt .card-actions{display:flex;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.opt .card-actions button{flex:1;font-size:12.5px;padding:8px}
#panel.whatif .opt{border-style:dashed}

/* ── Enriched scenario fields (plausibility ≠ confidence ≠ evidence) ───────── */
/* Confidence / evidence chip row — the three-axis honesty made visible. */
.meta-row2{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.opt .meta-row2{margin:10px 0 2px;gap:6px}
.meta-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 9px 4px 8px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:color-mix(in oklab,var(--panel) 50%,transparent);white-space:nowrap}
.meta-chip .mc-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:0 0 auto}
.meta-chip .mc-k{color:var(--text-3);letter-spacing:.2px}
.meta-chip .mc-v{color:var(--text);font-weight:600}
/* confidence tones */
.meta-chip.conf-high .mc-dot{background:var(--lived)} .meta-chip.conf-high .mc-v{color:var(--lived)}
.meta-chip.conf-medium .mc-dot{background:var(--accent)} .meta-chip.conf-medium .mc-v{color:var(--accent)}
.meta-chip.conf-low .mc-dot{background:var(--whatif)} .meta-chip.conf-low .mc-v{color:var(--whatif)}
/* evidence tones */
.meta-chip.ev-strong .mc-dot{background:var(--lived)} .meta-chip.ev-strong .mc-v{color:var(--lived)}
.meta-chip.ev-moderate .mc-dot{background:var(--accent)} .meta-chip.ev-moderate .mc-v{color:var(--accent)}
.meta-chip.ev-weak .mc-dot{background:var(--whatif)} .meta-chip.ev-weak .mc-v{color:var(--whatif)}
.meta-chip.na{opacity:.65} .meta-chip.na .mc-v{color:var(--text-3);font-weight:500}

/* Assumptions + why-not-higher — the inspectable underpinnings. */
.scenario-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px}
.opt .scenario-detail{margin-top:12px;padding-top:12px;gap:9px}
.detail-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.assumptions ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.assumptions li{font-size:13px;color:var(--text-2);line-height:1.45;padding-left:16px;position:relative}
.opt .assumptions li{font-size:12px}
.assumptions li::before{content:'—';position:absolute;left:0;color:var(--text-3)}
.why-not{font-size:13px;color:var(--text-2);line-height:1.5}
.opt .why-not{font-size:12px}
.why-not .detail-label{display:inline;margin-right:6px}

/* ── Phase-1 transparency: flags + expandable "Why?" ──────────────────────── */
.flag-badges{display:flex;flex-wrap:wrap;gap:6px}
.flag-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);border:1px solid transparent;cursor:help}
.flag-badge.dup{color:var(--text-2);background:color-mix(in oklab,var(--text-3) 16%,transparent);border-color:var(--line)}
.flag-badge.incon{color:var(--whatif);background:var(--whatif-10);border-color:var(--whatif-40)}

/* Expandable "Why is this plausible?" — collapsed by default; calm surface. */
.why-block{border-top:1px solid var(--line-soft);padding-top:12px}
.why-block>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px}
.why-block>summary::-webkit-details-marker{display:none}
.why-toggle{font-size:12.5px;font-weight:600;color:var(--accent)}
.why-block>summary::before{content:'▸';color:var(--accent);font-size:10px;transition:transform .2s}
.why-block[open]>summary::before{transform:rotate(90deg)}
.why-block>summary:hover .why-toggle{filter:brightness(1.12)}
.why-body{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.why-row{display:grid;grid-template-columns:104px 1fr;gap:10px;font-size:13px;line-height:1.5}
.opt .why-row{grid-template-columns:92px 1fr;font-size:12px}
.why-k{color:var(--text-3);font-size:11px;letter-spacing:.4px;text-transform:uppercase;font-weight:700;padding-top:1px}
.why-v{color:var(--text-2)}
.what-changes{margin-top:4px;padding-top:10px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px}
.wc-row{font-size:13px;color:var(--text-2);line-height:1.45;display:flex;gap:8px;align-items:baseline}
.opt .wc-row{font-size:12px}
.wc-arrow{font-weight:700;flex:0 0 auto}
.wc-row.up .wc-arrow{color:var(--lived)} .wc-row.down .wc-arrow{color:var(--whatif)}

/* Plausibility-movement sparkline (Phase 3, §7.4). */
.spark-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plaus-spark{display:inline-flex;align-items:center;gap:8px}
.plaus-spark svg{display:block;background:color-mix(in oklab,var(--panel) 40%,transparent);border-radius:6px;padding:2px 3px}
.spark-label{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}

/* Causal chain (Phase 3, §7.2) — driver → path → lever, derived from the scenario. */
.causal-chain{margin-top:4px;padding-top:10px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.causal-node{font-size:12.5px;line-height:1.4;padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);max-width:100%}
.causal-node.driver{border-left:3px solid var(--whatif);color:var(--text)}
.causal-node.path{border-left:3px solid var(--accent);color:var(--text);font-weight:600}
.causal-node.lever{border-left:3px solid var(--lived)}
.causal-arrow{color:var(--text-3);font-size:12px;margin-left:12px;line-height:1}

/* ── Phase 4: adversarial challenge ───────────────────────────────────────── */
/* ── Response runbook (BCDR executable playbook) ─────────────────────────────── */
.runbook-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.runbook-btn{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);
  background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);cursor:pointer;transition:.2s}
.runbook-btn:hover{filter:brightness(1.08)}
.runbook-btn:disabled{opacity:.6;cursor:default}
.runbook-panel{border:1px solid var(--accent-30);border-radius:var(--r-md);background:var(--accent-06);padding:14px 15px}
.runbook-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rb-badge{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent)}
.rb-redo{background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text-2);
  width:26px;height:24px;cursor:pointer;font-size:13px}
.rb-redo:hover{color:var(--accent);border-color:var(--accent-45)}
.rb-k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-right:6px}
.rb-objective,.rb-activation{font-size:13.5px;line-height:1.5;margin-bottom:7px;color:var(--text)}
.rb-block{margin-top:12px}
.rb-block-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);margin-bottom:7px}
.rb-step{display:flex;gap:10px;align-items:flex-start;margin-bottom:7px}
.rb-num{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--accent-14);color:var(--accent);
  font-size:11px;font-weight:700;display:grid;place-items:center;font-family:var(--mono);margin-top:1px}
.rb-num-rec{background:var(--lived-16);color:var(--lived)}
.rb-step-body{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.45}
.rb-step-body b{font-weight:600;color:var(--text)}
.rb-step-meta{font-size:12px;color:var(--muted)}
.rb-role{font-size:13px;line-height:1.5;margin-bottom:4px;color:var(--text-2)}
.rb-role-n{font-weight:700;color:var(--text)}
.rb-decision{font-size:13px;line-height:1.5;margin-bottom:8px;display:flex;flex-direction:column;gap:2px}
.rb-decision b{color:var(--text)}
.rb-dec-opts{color:var(--text-2)}
.rb-dec-owner{font-size:12px;color:var(--muted)}
.rb-comm{margin-bottom:9px;padding:9px 11px;background:var(--panel-2);border-radius:var(--r-sm);border:1px solid var(--line-soft)}
.rb-comm-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.rb-comm-aud{font-weight:700;font-size:12.5px;color:var(--text)}
.rb-comm-meta{font-size:11.5px;color:var(--muted)}
.rb-comm-msg{font-size:13px;line-height:1.5;color:var(--text-2);font-style:italic}
.rb-deps{margin-top:12px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rb-dep{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px;font-size:12px;color:var(--text-2)}
.rb-standdown{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13px;line-height:1.5;color:var(--text-2)}

/* ── Living program: status chips + program panel ────────────────────────────── */
.ic-status-row{margin-top:10px}
.ic-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:4px 11px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel-2);color:var(--text-2);cursor:pointer;transition:.15s}
.ic-status:hover{border-color:var(--accent-45)}
.ic-status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ic-status.st-open{color:var(--text-3)}
.ic-status.st-in-progress{color:var(--whatif);border-color:var(--whatif-40);background:var(--whatif-10)}
.ic-status.st-done{color:var(--lived);border-color:var(--lived-40);background:var(--lived-10)}
.rail-overdue{width:7px;height:7px;border-radius:50%;background:var(--danger);margin-left:auto;flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--danger) 24%,transparent)}
.prog-banner{padding:11px 14px;border-radius:var(--r-md);font-size:13px;line-height:1.5;margin:4px 0 14px}
.prog-banner.overdue{background:var(--danger-10);border:1px solid color-mix(in oklab,var(--danger) 40%,transparent);color:var(--text)}
.prog-banner.ok{background:var(--lived-10);border:1px solid var(--lived-40);color:var(--text)}
.prog-progress{margin:6px 0 4px}
.prog-bar{height:8px;border-radius:5px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line-soft)}
.prog-bar span{display:block;height:100%;background:var(--lived);border-radius:5px;transition:width .3s}
.prog-nums{font-size:12.5px;color:var(--text-2);margin-top:6px}
.prog-log{max-height:200px;overflow-y:auto;margin-top:6px;border:1px solid var(--line-soft);border-radius:var(--r-md);padding:4px 0}
.prog-log-row{display:flex;gap:10px;padding:6px 12px;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.prog-log-row:last-child{border-bottom:none}
.prog-log-when{flex:0 0 auto;color:var(--muted);font-family:var(--mono);font-size:11.5px;min-width:56px}
.prog-log-text{color:var(--text-2);line-height:1.4}

/* ── Tabletop exercise ───────────────────────────────────────────────────────── */
#mode-modal.tt-modal{max-width:600px}
.tt-event{margin:8px 0 14px} .tt-ctx{margin-top:6px;color:var(--text-2);font-size:13px}
.tt-loading{padding:40px 10px;text-align:center} .tt-turnlabel{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:6px}
.tt-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12px}
.tt-turn{font-weight:700;color:var(--text-2)} .tt-clock{font-family:var(--mono);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px;color:var(--accent)}
.tt-esc{margin-left:auto;font-weight:700;color:var(--danger)} .tt-esc.calm{color:var(--lived)}
.tt-reaction{background:var(--whatif-10);border:1px solid var(--whatif-40);border-radius:var(--r-md);padding:9px 12px;font-size:13px;line-height:1.5;margin-bottom:12px}
.tt-headline{font-size:20px;margin:0 0 8px} .tt-situation{font-size:14.5px;line-height:1.6;color:var(--text);margin:0 0 12px}
.tt-k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;display:block;margin-bottom:6px}
.tt-pressures{margin-bottom:12px} .tt-pill{display:inline-block;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 11px;font-size:12px;color:var(--text-2);margin:0 6px 6px 0}
.tt-questions ul{margin:0 0 4px 18px;padding:0} .tt-questions li{font-size:13.5px;line-height:1.5;margin:4px 0;color:var(--text)}
.tt-response{margin-top:6px}
/* Report */
.tt-score{display:flex;gap:16px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin:6px 0 14px}
.tt-score-n{font-size:44px;font-weight:800;line-height:1;flex:0 0 auto} .tt-score-n span{font-size:16px;color:var(--muted);font-weight:600}
.tt-score.good .tt-score-n{color:var(--lived)} .tt-score.mid .tt-score-n{color:var(--whatif)} .tt-score.low .tt-score-n{color:var(--danger)}
.tt-score-r{font-size:13.5px;line-height:1.5;color:var(--text)} .tt-targets{margin-top:6px;font-size:12.5px;color:var(--text-2)}
.tt-summary{font-size:14px;line-height:1.6;margin:0 0 8px}
.tt-rblock{margin-top:14px} .tt-rblock-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);margin-bottom:7px}
.tt-rblock.well .tt-rblock-h{color:var(--lived)} .tt-rblock.gaps .tt-rblock-h{color:var(--danger)}
.tt-rblock ul{margin:0 0 0 18px;padding:0} .tt-rblock li{font-size:13.5px;line-height:1.5;margin:4px 0}
.tt-gap{font-size:13.5px;line-height:1.5;margin:6px 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tt-sev{font-size:10.5px;font-weight:700;text-transform:uppercase;padding:1px 7px;border-radius:4px;background:var(--panel-2);color:var(--text-2)}
.tt-sev-high{background:var(--danger-10);color:var(--danger)} .tt-sev-medium{background:var(--whatif-10);color:var(--whatif)}
.tt-gap-turn{font-size:11px;color:var(--muted);font-family:var(--mono)}
.tt-dec{margin:8px 0;font-size:13.5px;line-height:1.5} .tt-dec b{color:var(--text)}
.tt-upd{display:flex;align-items:baseline;gap:8px;font-size:13.5px;line-height:1.5;margin:6px 0}
.tt-upd-check{color:var(--accent);font-size:15px;flex:0 0 auto} .tt-upd-owner{font-size:11.5px;color:var(--muted);background:var(--panel-2);border-radius:var(--r-pill);padding:1px 8px}

.challenge-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.challenge-btn{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--danger);color:var(--danger);cursor:pointer;transition:.2s}
.challenge-btn:hover{background:var(--danger-10);filter:none}
.challenge-btn:disabled{opacity:.6;cursor:default}
.opt .challenge-btn{font-size:12px;padding:7px 12px}

.challenge-panel{border:1px solid var(--danger);border-radius:var(--r-md);
  background:color-mix(in oklab,var(--danger) 6%,transparent);padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.challenge-head{display:flex;align-items:center;gap:9px}
.ch-icon{color:var(--danger);font-size:14px}
.ch-title{flex:1;font-size:12.5px;font-weight:700;letter-spacing:.3px;color:var(--danger)}
.ch-dismiss{background:none;border:none;color:var(--text-3);font-size:14px;padding:2px 6px;cursor:pointer;line-height:1}
.ch-dismiss:hover{color:var(--text);filter:none}
.ch-finding{display:grid;grid-template-columns:130px 1fr;gap:11px;font-size:13px;line-height:1.5}
.opt .ch-finding{grid-template-columns:1fr;gap:2px}
.ch-k{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);font-weight:700;padding-top:2px}
.ch-v{color:var(--text-2)}
.ch-finding.counter .ch-v{color:var(--text);font-style:italic}
.ch-premortem .detail-label{color:var(--danger);opacity:.85}
.ch-premortem ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.ch-premortem li{font-size:13px;color:var(--text-2);line-height:1.45;padding-left:18px;position:relative}
.ch-premortem li::before{content:'☠';position:absolute;left:0;color:var(--danger);opacity:.7;font-size:11px}
.ch-confidence{display:grid;grid-template-columns:130px 1fr;gap:11px;font-size:13px;line-height:1.5;padding-top:10px;border-top:1px solid var(--line-soft)}
.opt .ch-confidence{grid-template-columns:1fr;gap:2px}
.ch-confidence.off .ch-v b{color:var(--whatif)}
.ch-confidence.ok .ch-v b{color:var(--lived)}

/* ── Evidence-driven recalculation panel (VISION §3.6, §5.9) ──────────────── */
.recalc-panel{
  margin:0 0 22px;border:1px solid var(--accent-30);border-radius:var(--r-lg);
  background:color-mix(in oklab,var(--accent) 8%,transparent);padding:16px 18px;
}
.recalc-head{display:flex;align-items:center;gap:9px}
.recalc-icon{color:var(--accent);font-size:15px;font-weight:700}
.recalc-title{font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--accent);flex:1}
.recalc-dismiss{background:none;border:none;color:var(--text-3);font-size:13px;padding:2px 6px;cursor:pointer;line-height:1}
.recalc-dismiss:hover{color:var(--text);filter:none}
.recalc-note{margin-top:10px;font-size:14px;color:var(--text);line-height:1.55}
.recalc-shifts{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.shift{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px}
.shift:hover{background:color-mix(in oklab,var(--panel) 40%,transparent)}
.shift-title{flex:1;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shift-vals{font-family:var(--mono);font-size:12.5px;color:var(--text-3);display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.shift-vals .was{color:var(--text-3)}
.shift-vals .arrow-to{opacity:.6}
.shift-vals .now{color:var(--text);font-weight:600}
.shift-delta{font-size:12px;font-weight:700;flex:0 0 auto;min-width:46px;text-align:right}
.shift.up .shift-delta{color:var(--lived)} .shift.up .now{color:var(--lived)}
.shift.down .shift-delta{color:var(--whatif)} .shift.down .now{color:var(--whatif)}
.shift.drop .shift-delta{color:var(--text-3)}

/* Per-card delta badge on the card that moved. */
.delta-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);margin-left:10px}
.delta-badge.up{color:var(--lived);background:var(--lived-10)}
.delta-badge.down{color:var(--whatif);background:var(--whatif-10)}
.card-lg .rank .delta-badge{font-size:12px;padding:3px 10px}
/* "new" badge on paths added via "explore other angles". */
.new-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-pill);margin-left:10px;color:var(--accent);background:var(--accent-14);border:1px solid var(--accent-30)}

/* ── Phase 3: scenario map (indented tree) ────────────────────────────────── */
.rail-foot .railbtn.active{background:var(--accent-14);color:var(--accent)}
.map-legend{display:flex;gap:18px;flex-wrap:wrap;margin:2px 0 20px}
.map-legend .ml{font-size:12px;color:var(--text-3);display:inline-flex;align-items:center;gap:6px}
.map-legend .ml.lived{color:var(--lived)} .map-legend .ml.whatif{color:var(--whatif)} .map-legend .ml.now{color:var(--accent)}

.case-tree{font-size:14px}
.tree-children{margin-left:15px;padding-left:16px;border-left:1.5px solid var(--line);display:flex;flex-direction:column}
.tree-node{position:relative}
.tree-row{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;background:none;border:1px solid transparent;
  border-radius:var(--r-sm);padding:9px 12px;cursor:pointer;color:var(--text);font-family:inherit;font-size:14px;transition:.2s}
.tree-row:hover{background:var(--panel-2);border-color:var(--line);filter:none}
.tree-node.viewing>.tree-row{border-color:var(--accent-45);background:var(--accent-06)}
.tree-bullet{flex:0 0 auto;font-size:13px;line-height:1.5;padding-top:1px}
.tree-node.lived>.tree-row .tree-bullet{color:var(--lived)}
.tree-node.whatif>.tree-row .tree-bullet{color:var(--whatif)}
.tree-node.now>.tree-row .tree-bullet{color:var(--accent)}
.tree-body{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tree-label{color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.tree-node.whatif>.tree-row .tree-label{color:var(--text-2)}
.tree-prob{font-family:var(--mono);font-size:12px;color:var(--text-3);flex:0 0 auto}
.tree-tag{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);flex:0 0 auto}
.tree-tag.now{color:var(--accent);background:var(--accent-14)}
.tree-tag.res-well{color:var(--lived);background:var(--lived-10)}
.tree-tag.res-mixed{color:var(--accent);background:var(--accent-10)}
.tree-tag.res-poorly{color:var(--danger);background:var(--danger-10)}
/* Dashed connector for what-if subtrees, mirroring the dashed what-if language. */
.tree-node.whatif>.tree-children{border-left-style:dashed;border-left-color:var(--whatif-40)}

/* ── Scenario Planner (BCDR) ──────────────────────────────────────────────── */
.picker-section-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin:20px 0 10px}
.mode-card.planner-card{border-color:var(--accent-30);background:color-mix(in oklab,var(--accent) 7%,var(--panel-2))}
.mode-card.planner-card:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,var(--raise))}

.planner-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
.planner-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800}
.planner-icon{font-size:20px}
.planner-tag{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);
  background:var(--accent-14);border:1px solid var(--accent-30);border-radius:var(--r-pill);padding:3px 9px}
.planner-intro h2{font-size:22px;font-weight:700;margin-bottom:8px}
.planner-sub{color:var(--text-2);font-size:15px;line-height:1.6;margin-bottom:22px;max-width:64ch}

.event-summary{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:16px 18px;margin-bottom:24px;
  background:color-mix(in oklab,var(--panel) 55%,transparent)}
.event-tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:700;padding-top:2px}
.event-body p{font-size:14.5px;color:var(--text);line-height:1.55}
.event-context{color:var(--text-2)!important;font-size:13px!important;margin-top:6px}
.event-edit{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:14px;padding:2px 6px}
.event-edit:hover{color:var(--text);filter:none}

/* dimension setup */
.dim-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px}
.dim-item{display:flex;align-items:flex-start;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.dim-text{flex:1;min-width:0}
.dim-name-input{width:100%;background:none;border:none;color:var(--text);font-size:15px;font-weight:600;font-family:inherit;padding:0}
.dim-name-input:focus{outline:none}
.dim-why{font-size:13px;color:var(--text-2);line-height:1.5;margin-top:4px}
.dim-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13px;flex:0 0 auto}
.dim-del:hover{color:var(--danger);filter:none}
/* RTO/RPO target fields in dimension setup */
.dim-targets{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.target-field{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2)}
.target-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--text-3);padding:6px 9px;background:var(--raise);border-right:1px solid var(--line)}
.target-input{background:none;border:none;color:var(--text);font-size:13px;font-family:inherit;padding:6px 10px;width:110px}
.target-input:focus{outline:none}
.target-input::placeholder{color:var(--text-3)}
/* RTO/RPO shown on the matrix dimension header */
.pdh-targets{display:inline-flex;gap:8px;margin-left:4px}
.pdh-target{font-size:11px;color:var(--text-2);font-family:var(--mono);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px}
.pdh-target b{color:var(--accent);font-weight:700;margin-right:4px}
/* threatens-target line on an impact card */
.ic-target{margin-top:10px;font-size:13px;line-height:1.5;padding:8px 11px;border-radius:8px}
.ic-target.breach{background:var(--danger-10);border:1px solid color-mix(in oklab,var(--danger) 35%,transparent);color:var(--text)}
.ic-target.ok{background:var(--lived-10);border:1px solid var(--lived-40);color:var(--text-2)}
.ic-target-k{font-weight:700;margin-right:7px}
.ic-target.breach .ic-target-k{color:var(--danger)}
.ic-target.ok .ic-target-k{color:var(--lived)}

/* severity colours (1 minor → 5 critical) — used by pills + bars */
.pi-sev{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);flex:0 0 auto;text-align:center;display:inline-block}
.sev-0{background:var(--raise);color:var(--text-3)}
.sev-1{background:var(--lived-10);color:var(--lived)}
.sev-2{background:var(--lived-16);color:var(--lived)}
.sev-3{background:var(--accent-14);color:var(--accent)}
.sev-4{background:var(--whatif-16);color:var(--whatif)}
.sev-5{background:var(--danger-10);color:var(--danger)}

/* ── Matrix view ──────────────────────────────────────────────────────────── */
.plan-dim{margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;scroll-margin-top:80px}
.plan-dim-head{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;padding:11px 15px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.pdh-name{flex:0 0 auto}
.plan-dim-n{font-family:var(--mono);font-size:11px;color:var(--text-3);background:var(--raise);border-radius:var(--r-pill);padding:1px 8px}
.gap-flag{font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--whatif);background:var(--whatif-10);border:1px solid var(--whatif-40);border-radius:var(--r-pill);padding:2px 9px}
.pdh-map{margin-left:auto;font-size:12px;padding:6px 12px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--line);color:var(--accent);cursor:pointer}
.pdh-map:hover{border-color:var(--accent);filter:none}
.impact-card{padding:14px 15px;border-top:1px solid var(--line-soft)}
.impact-card:first-of-type{border-top:none}
.ic-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ic-plaus{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.ic-conf{font-size:11px;color:var(--text-3)}
.ic-del{margin-left:auto;background:none;border:none;color:var(--text-3);font-size:13px;cursor:pointer;padding:2px 4px}
.ic-del:hover{color:var(--danger);filter:none}
.ic-title{font-size:15px;font-weight:600;margin-bottom:5px}
.ic-summary{font-size:13.5px;color:var(--text-2);line-height:1.5}
.ic-meta{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-2);line-height:1.5}
.ic-k{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-right:7px}
.ic-knocks{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft)}
.ic-knock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);padding:5px 0;border-radius:6px}
.ic-knock.linked{cursor:pointer;padding-left:6px;margin-left:-6px}
.ic-knock.linked:hover{background:var(--panel-2)}
.kn-arrow{color:var(--text-3)}
.kn-dim{color:var(--accent);font-weight:600;flex:0 0 auto}
.kn-title{flex:1;min-width:0}
.kn-sev{font-size:9.5px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);flex:0 0 auto}
.plan-add{width:100%;text-align:left;padding:10px 15px;background:none;border:none;border-top:1px solid var(--line-soft);color:var(--text-3);font-size:13px;cursor:pointer;font-family:inherit}
.plan-add:hover{color:var(--accent);background:var(--panel-2);filter:none}

/* ── Register view ────────────────────────────────────────────────────────── */
.risk-register{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:13px}
.rr-row{display:grid;grid-template-columns:70px 88px 56px 130px 1fr 120px;gap:12px;align-items:center;padding:10px 15px;border-top:1px solid var(--line-soft)}
.rr-row:first-child{border-top:none}
.rr-header{background:var(--panel-2);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.rr-knock{background:color-mix(in oklab,var(--panel) 30%,transparent)}
.rr-risk{display:flex;align-items:center}
.rr-bar{height:7px;border-radius:4px;display:block;min-width:6px}
.rr-plaus{font-family:var(--mono);color:var(--text-3)}
.rr-dim{color:var(--text-2)}
.rr-impact{color:var(--text);overflow:hidden;text-overflow:ellipsis}
.rr-via{color:var(--text-3);font-size:11.5px}
.rr-owner{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:760px){
  .rr-row{grid-template-columns:54px 1fr 70px;gap:8px}
  .rr-sev,.rr-dim,.rr-owner{display:none}
  .rr-header .rr-sev,.rr-header .rr-dim,.rr-header .rr-owner{display:none}
}

/* ── Situation entry (start / add-context inputs) ─────────────────────────── */
.situation-input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-md);padding:14px 16px;font-size:15px;font-family:inherit;resize:vertical;min-height:72px;
  transition:border-color .2s,box-shadow .2s;
}
.situation-input::placeholder{color:var(--muted)}
.situation-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.situation-input.small{min-height:46px;font-size:var(--fs-body)}
.row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

.examples{margin-bottom:20px}
.examples-label{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:10px}
.example-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--accent-10);color:var(--accent);border:1px solid var(--accent-30);border-radius:var(--r-pill);
  padding:7px 15px;font-size:var(--fs-sm);font-weight:600}
.chip:hover{background:var(--accent-14);filter:none}

.guided{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:var(--fs-xs);color:var(--text-2);font-weight:700;letter-spacing:.3px}
.input-tip{margin-top:16px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;border-left:3px solid var(--accent);padding:2px 0 2px 12px}

/* ── Banners ──────────────────────────────────────────────────────────────── */
.whatif-banner,.risk-banner,.reasoning-banner{padding:12px 15px;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.55;margin-bottom:20px}
.whatif-banner{background:var(--whatif-10);border:1px solid var(--whatif-40);color:var(--whatif)}
.risk-banner{background:var(--whatif-10);border:1px solid var(--whatif-40);color:var(--whatif)}
.reasoning-banner{background:var(--accent-10);border:1px solid var(--accent-30);color:var(--accent)}

.empty{color:var(--muted);font-size:var(--fs-body);margin-top:20px}
/* Inviting empty state — a quiet bordered panel, not bare text floating in a void. */
.empty-state{
  margin-top:26px;padding:40px 32px;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  background:color-mix(in oklab,var(--panel) 40%,transparent);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.empty-mark{font-size:30px;color:var(--accent);opacity:.65;line-height:1;margin-bottom:4px}
.empty-title{font-size:16px;font-weight:600;color:var(--text)}
.empty-sub{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;max-width:46ch}
.empty-sub b{color:var(--text);font-weight:600}
.spinner{color:var(--accent);font-size:var(--fs-body);margin-top:20px;display:flex;align-items:center;gap:10px}
.spinner::before{content:'';width:14px;height:14px;border:2px solid var(--accent-30);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Compare view ─────────────────────────────────────────────────────────── */
.compare-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.compare-title{font-size:var(--fs-h2);font-weight:700;color:var(--whatif)}
.diverge-note{color:var(--text-2);font-size:var(--fs-body);margin-bottom:22px}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.track{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:color-mix(in oklab,var(--panel) 55%,transparent);box-shadow:var(--shadow-1)}
.track.lived{border-top:3px solid var(--lived)}
.track.whatif{border-top:3px solid var(--whatif);border-left:1px dashed var(--line);border-right:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.track.lived.projected{border-style:solid;border-top-style:dashed}
.track.lived.projected .track-head::after{content:' · projected';color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.track-head{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;font-weight:800}
.track.lived .track-head{color:var(--lived)} .track.whatif .track-head{color:var(--whatif)}
.track-step{display:flex;gap:13px;padding:9px 0;position:relative}
.track-step:not(:last-child) .track-dot::after{content:'';position:absolute;left:5px;top:16px;bottom:-9px;width:2px;background:var(--line)}
.track-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;margin-top:4px;position:relative}
.track.lived .track-dot{background:var(--lived)} .track.whatif .track-dot{background:var(--whatif)}
.track-body{font-size:var(--fs-body)} .track-label{line-height:1.45} .track-body .prob{margin-top:7px}
.epilogue{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:var(--fs-sm);font-style:italic;color:var(--text-2);line-height:1.55}
.epilogue .cum{font-style:normal;font-weight:800;color:var(--whatif)}

/* shared prob pill (compare + misc) */
.prob{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);align-self:flex-start}
.prob.high{background:var(--lived-16);color:var(--lived)}
.prob.mid{background:var(--accent-14);color:var(--accent)}
.prob.low{background:var(--whatif-16);color:var(--whatif)}

/* ── Mode-picker / modal overlay ──────────────────────────────────────────── */
#mode-overlay{position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
#mode-overlay.hidden{display:none}
#mode-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;max-width:820px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-2)}
#mode-modal h2{margin:0 0 5px;font-size:23px;font-weight:700}
.mode-sub{margin:0 0 22px;color:var(--text-2);font-size:var(--fs-body)}
#mode-modal.confirm-modal{max-width:440px}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}

/* Passphrase gate screen (app entry). */
#mode-modal.gate-modal{max-width:380px;text-align:center}
.gate-mark{margin:2px auto 16px;display:flex;justify-content:center}
#mode-modal.gate-modal h2{font-size:20px}
.gate-input{width:100%;margin-top:18px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-md);padding:13px 15px;font-size:16px;font-family:inherit;text-align:center;letter-spacing:1px}
.gate-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.gate-err{min-height:18px;margin-top:10px;font-size:13px;color:var(--danger)}
.gate-unlock{width:100%;margin-top:6px}

/* "My work" library list. */
.lib-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;max-height:52vh;overflow-y:auto}
.lib-row{display:flex;align-items:stretch;gap:6px}
.lib-open{flex:1 1 auto;display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;color:var(--text);
  transition:border-color .18s,background .18s,transform .1s;cursor:pointer}
.lib-open:hover{border-color:var(--accent-45);background:var(--raise);transform:translateY(-1px)}
.lib-open.current{border-color:var(--accent)}
.lib-ico{font-size:18px;flex:0 0 auto}
.lib-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.lib-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-sub{font-size:var(--fs-xs);color:var(--muted)}
.lib-del{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--muted);width:40px;cursor:pointer;font-size:14px;transition:color .15s,border-color .15s}
.lib-del:hover{color:var(--danger);border-color:var(--danger)}

/* Team screen. */
.team-invite{display:flex;gap:8px;margin:4px 0 2px}
.team-invite .gate-input{flex:1 1 auto;text-align:left;letter-spacing:0}
.team-invite .primary{flex:0 0 auto;white-space:nowrap}
.team-sec{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:700;margin:12px 2px 4px}
.team-sec:first-child{margin-top:2px}

/* Theme builder — palette grid + logo preview. */
.pal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 12px}
.pal-cell{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.pal-cell input[type=color]{width:100%;height:30px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);padding:2px;cursor:pointer}
.pal-hex{width:100%;font-family:var(--mono);font-size:12px;padding:5px 7px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);text-align:center}
.pal-label{font-size:var(--fs-xs);color:var(--muted);text-align:center}
.logo-preview{min-height:44px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r-md);padding:8px;margin:4px 0;color:var(--muted);font-size:var(--fs-xs)}
.logo-preview svg,.logo-preview img{max-height:36px;max-width:180px;width:auto}

/* Preset theme chips. */
.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.preset-chip{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:5px 11px 5px 6px;color:var(--text);cursor:pointer;font-size:var(--fs-xs);
  transition:border-color .15s,transform .1s,background .15s}
.preset-chip:hover{border-color:var(--accent-45);background:var(--raise);transform:translateY(-1px)}
.preset-chip:disabled{opacity:.5;cursor:default}
.preset-sw{position:relative;width:22px;height:22px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  border:1px solid var(--line-2)}
.preset-sw i{position:absolute;left:0;bottom:0;width:100%;height:50%}
.preset-sw b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%}
.preset-name{white-space:nowrap}

.mode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:18px;color:var(--text);
  transition:border-color .2s,transform .12s,background .2s,box-shadow .2s}
.mode-card:hover{border-color:var(--accent-45);transform:translateY(-3px);background:var(--raise);box-shadow:var(--shadow-2);filter:none}
.mode-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.mode-icon{font-size:30px;line-height:1}
.mode-name{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.mode-tagline{font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.risk-badge,.reasoning-badge{margin-top:5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;border-radius:6px;padding:3px 8px}
.risk-badge{color:var(--whatif);background:var(--whatif-10);border:1px solid var(--whatif-40)}
.reasoning-badge{color:var(--accent);background:var(--accent-10);border:1px solid var(--accent-30)}

/* ── Per-stage context refinement ─────────────────────────────────────────── */
.context-panel{margin-bottom:16px}
.context-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.context-item{display:flex;align-items:flex-start;gap:10px;background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-sm);line-height:1.5;color:var(--text-2)}
.context-item.data{border-left-color:var(--whatif)}
.context-text{flex:1;word-break:break-word}
.context-del{background:transparent;color:var(--muted);border:none;padding:0 2px;font-size:13px;flex:0 0 auto;line-height:1}
.context-del:hover{color:var(--danger);filter:none}
.context-actions{display:flex;gap:8px;flex-wrap:wrap}
button.chip-btn{padding:7px 13px;font-size:var(--fs-sm);border-radius:var(--r-pill);font-weight:600}
/* Quiet label grouping the refine cluster; primary Predict action sits below it. */
.refine-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin:2px 0 10px}
.generate-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.context-input-box{margin:8px 0 16px;padding:16px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);display:flex;flex-direction:column;gap:12px}

/* ── Evidence (Phase 2): segmented input + timeline ───────────────────────── */
.seg-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seg-label{font-size:12px;color:var(--text-3);font-weight:600;letter-spacing:.3px;min-width:78px}
.segmented{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg-btn{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);border:none;background:none;color:var(--text-2);cursor:pointer;transition:.2s}
.seg-btn.on{background:var(--raise);color:var(--text);box-shadow:0 1px 2px var(--scrim-1)}
.seg-btn:hover:not(.on){color:var(--text);filter:none}
.lock-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer}
.lock-row input{accent-color:var(--accent);width:16px;height:16px}

.evidence-heading{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:10px}
.evidence-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.evidence-item{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.evidence-item.fact{border-left-color:var(--lived)}
.evidence-item.assumption{border-left-color:var(--whatif)}
.evidence-item.locked{border-left-color:var(--accent);background:color-mix(in oklab,var(--accent) 6%,var(--panel-2))}
.ev-main{display:flex;align-items:baseline;gap:9px}
.ev-type{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;flex:0 0 auto;padding-top:1px}
.ev-type.fact{color:var(--lived)} .ev-type.assumption{color:var(--whatif)}
.ev-text{font-size:13.5px;color:var(--text);line-height:1.5;word-break:break-word}
.ev-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ev-rel{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--line)}
.ev-rel.rel-confirmed{color:var(--lived);background:var(--lived-10);border-color:var(--lived-40)}
.ev-rel.rel-reported{color:var(--text-2)}
.ev-rel.rel-uncertain{color:var(--whatif);background:var(--whatif-10);border-color:var(--whatif-40)}
.ev-when{font-size:11px;color:var(--text-3)}
.ev-lock{font-size:11px;padding:4px 10px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--line);color:var(--text-2);cursor:pointer;margin-left:auto}
.ev-lock.on{color:var(--accent);border-color:var(--accent-30);background:var(--accent-10)}
.ev-lock:hover{filter:none;color:var(--text)}
.ev-del{background:transparent;border:none;color:var(--text-3);font-size:13px;padding:2px 4px;cursor:pointer;line-height:1}
.ev-del:hover{color:var(--danger);filter:none}
.ev-lock:not(.on)~.ev-del,.evidence-item.assumption .ev-del{margin-left:auto}

/* attachments */
.attach-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.attach-item{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 10px 6px 6px;font-size:var(--fs-sm);color:var(--text-2);max-width:100%}
.attach-thumb{width:40px;height:40px;object-fit:cover;border-radius:var(--r-sm);flex:0 0 auto;background:var(--panel)}
.attach-doc{font-size:24px;width:40px;text-align:center;flex:0 0 auto}
.attach-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.attach-note{margin-top:8px;font-size:var(--fs-xs);color:var(--muted);line-height:1.4}

/* ── Closed-loop: outcome recorder + track record ─────────────────────────── */
.outcome-recorder{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:18px}
.outcome-q{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin-bottom:10px}
.outcome-btns{display:flex;gap:8px;flex-wrap:wrap}
.outcome-btn{background:transparent;border:1px solid var(--line);color:var(--text);font-size:var(--fs-sm)}
.outcome-btn.well:hover{border-color:var(--lived);color:var(--lived);background:var(--lived-10);filter:none}
.outcome-btn.mixed:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-10);filter:none}
.outcome-btn.poorly:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-10);filter:none}
.outcome-result{display:inline-flex;align-items:center;gap:10px;margin-bottom:6px}
.outcome-tag{font-weight:700;font-size:var(--fs-body)}
.outcome-result.well .outcome-tag{color:var(--lived)} .outcome-result.mixed .outcome-tag{color:var(--accent)} .outcome-result.poorly .outcome-tag{color:var(--danger)}
.outcome-vs{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.outcome-note{font-size:var(--fs-sm);color:var(--text-2);font-style:italic;margin:4px 0 10px}

.tr-headline{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.tr-stat{display:flex;flex-direction:column}
.tr-num{font-size:26px;font-weight:800;line-height:1}
.tr-lbl{font-size:var(--fs-xs);color:var(--muted);margin-top:3px}
.tr-verdict{margin-left:auto;font-weight:700;font-size:var(--fs-sm);padding:6px 12px;border-radius:var(--r-pill)}
.tr-verdict.good{color:var(--lived);background:var(--lived-16)}
.tr-verdict.over{color:var(--whatif);background:var(--whatif-16)}
.tr-verdict.under{color:var(--accent);background:var(--accent-14)}
.tr-verdict.none{color:var(--muted);background:var(--tint-hover)}
.tr-modes{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.tr-mode-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.tr-mode-name{font-weight:600;font-size:var(--fs-sm)}
.tr-mode-n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.tr-mode-verdict{margin-left:auto;font-size:var(--fs-xs);font-weight:700}
.tr-mode-verdict.good{color:var(--lived)} .tr-mode-verdict.over{color:var(--whatif)} .tr-mode-verdict.under{color:var(--accent)} .tr-mode-verdict.none{color:var(--muted)}
.tr-items{display:flex;flex-direction:column;gap:6px}
.tr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
.tr-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tr-item.well .tr-dot{background:var(--lived)} .tr-item.mixed .tr-dot{background:var(--accent)} .tr-item.poorly .tr-dot{background:var(--danger)}
.tr-text{flex:1;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-pred{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)}
.tr-res{font-size:var(--fs-xs);font-weight:700}
.tr-item.well .tr-res{color:var(--lived)} .tr-item.mixed .tr-res{color:var(--accent)} .tr-item.poorly .tr-res{color:var(--danger)}

/* ── Responsive: phone ────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--rail-w:0px}
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .breath-layer::before{left:50%}

  .mobetop{display:block;flex:0 0 auto;background:color-mix(in oklab,var(--panel) 90%,transparent);
    border-bottom:1px solid var(--line);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
    padding-top:env(safe-area-inset-top)}
  .mobetop .row1{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px}
  /* No gap — it's one word, "ReaNOS", not icon+label. */
  .mobetop .brand-sm{font-size:16px;font-weight:700;letter-spacing:.2px}
  .mobetop .brand-sm i{color:var(--accent);font-style:normal}
  .mstep{display:flex;align-items:center;padding:0 12px 12px;overflow-x:auto}
  .mstep .s{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--text-3);
    background:none;border:none;font-family:inherit;cursor:pointer}
  .mstep .s .b{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:10px;font-family:var(--mono)}
  .mstep .s.active{color:var(--text)} .mstep .s.active .b{border-color:var(--accent);color:var(--accent)}
  .mstep .s.done .b{background:var(--lived);border-color:var(--lived);color:var(--on-lived)}
  .mstep .line{height:1.5px;width:14px;background:var(--line-2);margin:0 2px 15px;flex:0 0 auto}

  .topbar{display:none}
  .canvas{padding:18px 14px 40px}
  .workfoot{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .card-lg{margin:0 4px;padding:22px 18px}
  .peek{width:10px}
  .overview.show{grid-template-columns:1fr;gap:12px}
  .tracks{grid-template-columns:1fr}
  .section-h{align-items:flex-start}
  .moment-header h2{font-size:20px}
  /* Situation strip: stack the tag above the text so the text gets full width
     instead of being squeezed into a narrow column beside the tag. */
  .sit{grid-template-columns:1fr;gap:9px}
  .sit .tag{justify-self:start}
  /* Recalc shift rows: let long titles wrap under the numbers rather than clip. */
  .shift{flex-wrap:wrap;gap:4px 10px}
  .shift-title{flex:1 1 100%;white-space:normal}
  /* Keep the view toggle from crowding the heading on narrow screens. */
  .view-toggle{align-self:stretch}
  .view-toggle button{flex:1;justify-content:center}
  .mode-grid{grid-template-columns:1fr}
  #mode-overlay{padding:12px;align-items:flex-start}
  #mode-modal{padding:20px 16px;border-radius:16px;max-height:calc(100dvh - 24px)}
}




/* Prose fallback. When the model answers in text rather than the structured
   spread this view needs, the old behaviour discarded the reply and showed a bare
   error — leaving the user unable to tell whether it had declined, hedged, or
   simply answered in the wrong shape. Show what it said. */
.prose-fallback{
  margin:18px 0 0;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--panel-2);border:1px solid var(--line);
}
.prose-fallback-h{
  font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;margin-bottom:10px;
}
.prose-fallback-b{
  font-size:var(--fs-body);color:var(--text);line-height:1.65;white-space:pre-wrap;
}
.prose-fallback-n{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;
}

/* Partial-spread notice. The model occasionally narrows on sensitive subjects and
   returns one or two scenarios instead of the three-to-six asked for. That is a
   legitimate answer but a degraded one — rendering it like a full spread would
   tell the user they have the whole picture when they do not. Uses the caution
   colour, not danger: nothing has failed, the answer is just narrower. */
.thin-warn{
  margin:0 0 18px;padding:11px 14px;border-radius:var(--r-md);
  background:var(--whatif-10);border:1px solid var(--whatif-40);
  color:var(--text);font-size:var(--fs-sm);line-height:1.55;
}
.thin-warn b{color:var(--whatif)}

/* ── Example library ────────────────────────────────────────────────────────
   Four examples show as chips on the start screen; the rest open in a picker.
   Each row leads with its tag and a one-line description, so you can find the
   one closest to your own situation rather than guessing from a label. */
.examples-more{
  margin-top:10px;background:none;border:0;padding:4px 0;
  color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
}
.examples-more:hover{filter:brightness(1.15);text-decoration:underline}
.ex-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-height:52vh;overflow-y:auto}
.ex-row{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;font-family:inherit;transition:border-color .18s,background .18s;
}
.ex-row:hover{border-color:var(--accent);background:var(--raise);filter:none}
.ex-tag{font-size:var(--fs-body);font-weight:600;color:var(--text);margin-bottom:3px}
.ex-blurb{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
@media (max-width:760px){ .ex-list{max-height:60vh} }

/* ── Mobile navigation drawer ────────────────────────────────────────────────
   Under 760px the rail is hidden, which previously left EVERY rail action
   (workspaces, new event, export, alerts, tasks, team, account, theme) with no
   route on a phone — the menu was reachable only by rotating to landscape.
   The drawer hosts the real rail nodes, moved in on open and returned on close,
   so there is one set of buttons and one set of listeners. */
.mob-menu-btn{display:none}
.mob-scrim{position:fixed;inset:0;background:var(--overlay);z-index:60;border:0}
.mob-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);z-index:61;
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 calc(12px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-100%);transition:transform .24s var(--ease);
}
.mob-drawer.open{transform:none}
.mob-drawer[hidden],.mob-scrim[hidden]{display:none}
.mob-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.mob-drawer-head .brand-sm{font-size:16px;font-weight:700}
.mob-drawer-head .brand-sm i{color:var(--accent);font-style:normal}
.mob-close{background:none;border:0;color:var(--text-2);font-size:18px;
  width:40px;height:40px;border-radius:50%;cursor:pointer;flex:0 0 auto}
.mob-close:hover{background:var(--panel-2);color:var(--text)}
.mob-drawer-body{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
/* The rail's own children keep their styling inside the drawer. */
.mob-drawer-body .rail-label{margin:16px 8px 8px}
.mob-drawer-body .rail-foot{margin-top:14px}

@media (max-width:760px){
  .mob-menu-btn{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:44px;height:44px;padding:0 11px;margin-left:-8px;
    background:none;border:0;cursor:pointer;flex:0 0 auto;
  }
  .mob-menu-btn span{display:block;height:2px;background:var(--text-2);border-radius:2px;transition:background .2s}
  .mob-menu-btn:hover span,.mob-menu-btn[aria-expanded="true"] span{background:var(--accent)}
  .mobetop .row1{gap:6px}
}

/* Touch targets on coarse pointers. */
@media (pointer:coarse){
  button,.chip,.mode-pill,.railbtn,.step{min-height:40px}
  .dots i{width:9px;height:9px}
}

/* Let flex/grid children shrink instead of overflowing. */
.mode-card,.opt,.track,.card-lg{min-width:0}

/* ── Ops surfaces: notifications, tasks, stakeholders ───────────────────────
   A three-column working shell (nav · list · detail), used ONLY by the new
   incident surfaces. Existing planner/runbook screens are untouched. Collapses
   to a single column on narrow viewports; the detail pane moves below the list. */
.ops-screen{position:fixed;inset:0;z-index:60;display:grid;
  grid-template-columns:210px minmax(0,1fr) 340px;grid-template-rows:auto 1fr;
  background:var(--bg);color:var(--text)}
.ops-head{grid-column:1/-1;display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.ops-head h2{margin:0;font-size:17px;letter-spacing:-.2px}
.ops-head .ops-sub{color:var(--text-3);font-size:13px;margin-left:2px}
.ops-head .ops-spacer{margin-left:auto}
.ops-nav{border-right:1px solid var(--line);background:var(--panel-2);padding:12px 8px;overflow:auto}
.ops-nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 11px;margin-bottom:3px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--text-2);font:inherit;font-size:13.5px}
.ops-nav button:hover{background:var(--raise);color:var(--text)}
.ops-nav button[aria-current="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--text);font-weight:600}
.ops-nav .ops-count{margin-left:auto;font-size:11.5px;color:var(--text-3);
  background:var(--raise);border-radius:99px;padding:1px 7px}
.ops-list{overflow:auto;padding:14px 16px}
.ops-detail{border-left:1px solid var(--line);background:var(--panel-2);overflow:auto;padding:16px}
.ops-detail h3{margin:0 0 10px;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-3)}
.ops-empty{color:var(--text-3);font-size:13.5px;padding:22px 4px;text-align:center}

/* Timeline cards */
.ops-card{border:1px solid var(--line);border-radius:10px;background:var(--card-solid);
  padding:12px 14px;margin-bottom:9px;cursor:pointer;transition:border-color .15s}
.ops-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ops-card[aria-selected="true"]{border-color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.ops-card.unread{border-left:3px solid var(--accent)}
.ops-row{display:flex;align-items:baseline;gap:9px}
.ops-title{font-weight:600;font-size:14px;flex:1;min-width:0}
.ops-time{color:var(--text-3);font-size:11.5px;white-space:nowrap}
.ops-body{color:var(--text-2);font-size:13px;margin-top:5px;line-height:1.45}
.ops-meta{color:var(--text-3);font-size:11.5px;margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

/* Severity + status pills */
.ops-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:2px 8px;border-radius:99px;text-transform:uppercase;white-space:nowrap}
.sev-critical{background:color-mix(in srgb,var(--danger) 22%,transparent);color:var(--danger)}
.sev-warning{background:color-mix(in srgb,#d9a300 24%,transparent);color:#d9a300}
.sev-info{background:var(--raise);color:var(--text-3)}
.st-open{background:var(--raise);color:var(--text-2)}
.st-in-progress{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.st-blocked{background:color-mix(in srgb,var(--danger) 20%,transparent);color:var(--danger)}
.st-done{background:color-mix(in srgb,var(--lived) 22%,transparent);color:var(--lived)}
.st-cancelled{background:var(--raise);color:var(--text-3)}
.ops-overdue{color:var(--danger);font-weight:600}

/* Bell */
.bell-wrap{position:relative;display:inline-flex}
.bell-badge{position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--danger);color:var(--accent-ink,#fff);
  font-size:10.5px;line-height:16px;text-align:center;font-weight:700}

/* Forms inside the detail pane */
.ops-field{margin-bottom:11px}
.ops-field label{display:block;font-size:12px;color:var(--text-3);margin-bottom:4px}
.ops-field input,.ops-field select,.ops-field textarea{width:100%;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--text);
  font:inherit;font-size:13.5px}
.ops-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

@media (max-width:900px){
  .ops-screen{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}
  .ops-nav{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .ops-nav button{width:auto;white-space:nowrap}
  .ops-detail{border-left:0;border-top:1px solid var(--line)}
}

/* "+ Task" — raise a tracked task from a runbook step, mitigation or tabletop
   finding. Quiet by default so it never competes with the content; it is an
   affordance on hover, and becomes a static confirmation once raised. */
.rb-task-btn{margin-left:auto;flex:0 0 auto;align-self:flex-start;
  border:1px solid var(--line);border-radius:99px;background:transparent;
  color:var(--text-3);font:inherit;font-size:11px;padding:2px 9px;cursor:pointer;
  opacity:.35;transition:opacity .15s,border-color .15s,color .15s;white-space:nowrap}
.rb-step:hover .rb-task-btn,.tt-upd:hover .rb-task-btn,.ic-status-row:hover .rb-task-btn,
.rb-task-btn:focus-visible{opacity:1}
.rb-task-btn:hover{border-color:var(--accent);color:var(--accent)}
.rb-task-btn.is-done{opacity:1;border-color:var(--lived);color:var(--lived);cursor:default}
.rb-task-btn:disabled{cursor:default}
/* .rb-step and .tt-upd are already flex rows (see above) — margin-left:auto on
   the button is enough. Only .ic-status-row needs to become one, so the chip and
   the button sit side by side. */
.ic-status-row{display:flex;align-items:center;gap:8px}

/* ══ Light-theme document credibility ═══════════════════════════════════════
   These override earlier rules deliberately (same specificity, later in the
   cascade). The dark theme is a reasoning workspace and the ambient field suits
   it; the LIGHT theme is what a CISO reads a continuity plan in, and decorative
   starfield behind an audit document reads as unserious. Light mode is now a
   document surface: quiet, high-contrast, print-adjacent. */

/* 1. Kill the ambient field in light mode. Not dimmed — off. A faint constellation
      behind a compliance table is worse than none: it looks like a rendering bug. */
:root[data-theme="light"] #field{display:none}
:root[data-theme="light"] .breath-layer{display:none}

/* 2. Establish hierarchy. Everything was one flat blue wash with nothing to
      separate nav from content from nested detail. */
:root[data-theme="light"]{
  --bg:#eef1f6;          /* page: slightly deeper, so white cards lift off it   */
  --panel:#ffffff;       /* rail                                                */
  --card-solid:#ffffff;  /* content cards                                       */
  --card-hi-solid:#f7f9fc;
  --line:rgba(28,42,68,0.16);
  --line-2:rgba(28,42,68,0.26);
}
/* Cards carry a real shadow rather than relying on a near-invisible border. */
:root[data-theme="light"] .dim-card,
:root[data-theme="light"] .impact-card,
:root[data-theme="light"] .runbook-panel{
  box-shadow:0 1px 2px rgba(16,30,54,.06), 0 4px 14px rgba(16,30,54,.05);
}
/* The runbook is nested INSIDE an impact card — inset it so the nesting reads. */
:root[data-theme="light"] .runbook-panel{
  background:#f7f9fc;
  border-color:rgba(28,42,68,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(16,30,54,.05);
}
/* The rail is a distinct surface, not part of the page wash. */
:root[data-theme="light"] .rail{
  background:#ffffff;
  border-right:1px solid rgba(28,42,68,.12);
}

/* 3. Use the width. `margin:0 auto 0 0` pinned the column left and left a third
      of a wide screen empty. Centre it and let it breathe on large displays. */
.canvas-inner{margin:0 auto}
@media (min-width:1500px){ :root{ --page-max:960px; } }

/* 4. "+ Task" was tuned on dark and is effectively invisible on light. Give it a
      real resting state — an affordance nobody can see is not an affordance. */
:root[data-theme="light"] .rb-task-btn{
  opacity:.75;
  border-color:rgba(28,42,68,.22);
  color:var(--text-2);
  background:#fff;
}
:root[data-theme="light"] .rb-step:hover .rb-task-btn,
:root[data-theme="light"] .tt-upd:hover .rb-task-btn,
:root[data-theme="light"] .ic-status-row:hover .rb-task-btn{opacity:1}

/* 5. Separate the rail's ACCOUNT group from navigation. Previously "Alerts",
      "Tasks", "Team" and the theme toggle sat in one undifferentiated list, so a
      destructive-ish action looked identical to a nav link. The first account
      button draws the divider; the rest inherit the quieter treatment. */
.railbtn.account-first{
  margin-top:10px; padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.railbtn.account-btn{color:var(--text-2)}
.railbtn.account-btn:hover{color:var(--text)}

/* 6. Deepen the runbook's nesting one more step. It is a document INSIDE an
      impact, and at a glance it was reading as a sibling card. */
.runbook-panel{border-left:3px solid color-mix(in srgb,var(--accent) 45%,transparent)}
:root[data-theme="light"] .runbook-head{
  border-bottom:1px solid rgba(28,42,68,.10); padding-bottom:8px; margin-bottom:10px;
}

/* ══ Readability pass ═══════════════════════════════════════════════════════
   Measured before changing: impact titles were 15px (barely above body), runbook
   steps 13.5px, meta 12px. That is a dashboard scale, not a document scale — and
   this content is read at 3am during an incident, often on a laptop screen, by
   an audience that skews older than a typical SaaS user. Sizes below are raised
   to a document scale and line-height opened up. Structural CSS is untouched;
   these are type-only overrides late in the cascade. */

/* Impact cards — the primary reading surface. */
.impact-card h3,.impact-card .ic-title{font-size:17px;line-height:1.35}
.impact-card .ic-sum,.impact-card>p{font-size:14.5px;line-height:1.55}
.ic-mit,.ic-owner{font-size:14px;line-height:1.55}
.ic-k{font-size:11.5px;letter-spacing:.07em}   /* the small-caps labels stay small — they are signposts, not prose */

/* Runbook — these are instructions someone FOLLOWS under pressure. */
.rb-step-body b{font-size:15px;line-height:1.45}
.rb-step-meta{font-size:13px}
.rb-block-h{font-size:12px;letter-spacing:.08em}
.rb-objective,.rb-activation,.rb-standdown{font-size:14.5px;line-height:1.55}
.rb-role,.rb-decision,.rb-comm{font-size:14px;line-height:1.5}
.rb-num{font-size:12.5px}

/* Navigation and chrome. */
.railbtn{font-size:14px}
.crumbs,.breadcrumb{font-size:13.5px}
.dim-name{font-size:14.5px}

/* Ops surfaces (notifications, tasks, stakeholders). */
.ops-title{font-size:14.5px}
.ops-body{font-size:14px;line-height:1.55}
.ops-meta{font-size:12.5px}
.ops-nav button{font-size:14px}

/* The printed/exported plan document is a formal deliverable — give it a proper
   reading size independent of the app chrome. */
.doc-body,.plan-doc p,.plan-doc td,.plan-doc th{font-size:14.5px;line-height:1.6}

/* Measure. At 14.5px in an 820px column, prose ran to ~104 characters per line —
   well past the 45-75 comfortable range, and the point where the eye loses its
   place returning to the next line. That matters most for someone reading a
   runbook under pressure. Constrain PROSE only; tables, step rows and metadata
   keep the full width because they are scanned, not read continuously. */
.impact-card .ic-sum,
.impact-card>p,
.rb-objective,
.rb-activation,
.rb-standdown,
.ops-body{max-width:72ch}

/* Runbook step text sits beside a number, so cap the body rather than the row. */
.rb-step-body{max-width:74ch}

/* Regenerate control. It was a 26x24 box with NO centring, so the glyph fell to
   the bottom-right corner — and my later padding-bottom on .runbook-head pushed
   it further out of line. Also gains a label: an unlabelled ↻ on an action that
   DISCARDS a generated runbook is a trap, and icon-only controls are the first
   thing to fail an accessibility review. */
.rb-redo{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:auto; height:auto; padding:5px 11px;
  border-radius:999px; font-size:12.5px; line-height:1;
  align-self:center; flex:0 0 auto; white-space:nowrap;
}
.rb-redo .rb-redo-ico{font-size:13px;line-height:1;display:inline-block}
:root[data-theme="light"] .rb-redo{background:#fff;border-color:rgba(28,42,68,.20);color:var(--text-2)}
:root[data-theme="light"] .rb-redo:hover{border-color:var(--accent);color:var(--accent)}

/* ══ Rail structure ═════════════════════════════════════════════════════════
   The action list was twelve undifferentiated buttons, so the deliverable
   ("Plan document") looked exactly as important as "Export (JSON)". Group
   headings restore hierarchy. */
.rail-group{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); padding:0 11px; margin:14px 0 5px;
}
.rail-group:first-child{margin-top:4px}

/* `margin-top:auto` pinned the action block to the bottom of the viewport, so a
   plan with one dimension showed a large void mid-rail. Cap it: the actions sit
   under the nav, and only float down once there is genuinely room to spare. */
.rail-foot{margin-top:28px}
@media (min-height:900px){ .rail-foot{margin-top:auto} }

/* The primary deliverable should read as the primary action. */
.railbtn-primary{position:relative}
:root[data-theme="light"] .railbtn-primary{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent-deep); font-weight:600;
}

/* Unmapped-dimension note in the plan header — a gap the user should see, not
   hunt for, but not alarming enough to warrant the danger colour. */
.sub-gap{color:var(--whatif);font-weight:600}