/* ==========================================================================
   TIR-CMM design system
   Threat-Informed Response Capability Maturity Model
   Created by Reza Adineh. The response module of UTIOM.

   Palette: pastel mint, matcha and olive greens with orange, on black.
   Dark is the default theme; light is available via the toggle.

   Colour is validated, not chosen by eye. The three pastel greens are brand
   and chrome only: as data series they measure a normal-vision separation of
   ΔE 4.7, meaning even full colour vision cannot tell them apart on a chart.
   Data marks therefore use one green plus orange, separated on lightness
   because green-versus-orange is the canonical deuteranopia-confusable pair.
   ========================================================================== */

/* --- DARK IS THE DEFAULT -------------------------------------------------- */
:root {
  color-scheme: dark;

  /* surfaces & ink */
  --page:            #080a09;
  --surface-1:       #0d0f0d;
  --surface-2:       #141814;
  --surface-sunk:    #0a0c0a;
  --text-primary:    #f2f5f0;
  --text-secondary:  #b9c4b6;
  --text-muted:      #8b958a;
  --rule:            #1d221d;
  --rule-strong:     #2f372f;
  --border:          rgba(242, 245, 240, .10);

  /* brand pastels — chrome, accents and headings, never data marks */
  --brand-mint:      #a8e6cf;
  --brand-matcha:    #b7d3a8;
  --brand-olive:     #b5c99a;
  --brand-orange:    #f0aa6a;

  /* accent */
  --accent:          #a8e6cf;
  --accent-ink:      #cdf2e2;
  --accent-on:       #080a09;   /* ink ON the accent */
  --accent-wash:     #10201a;

  /* categorical data series — validated pair, CVD ΔE 15.8 (target 8) */
  --series-1:        #2e8b57;
  --series-2:        #f0aa6a;
  --series-3:        #b5c99a;

  /* ordinal ramp: Response Readiness Status 0 → 3 (validated, single hue) */
  --rrs-0:           #24503a;
  --rrs-1:           #2e7a4e;
  --rrs-2:           #4ca36a;
  --rrs-3:           #93d3a2;
  --rrs-na:          #141814;
  --rrs-ink-lo:      #f2f5f0;
  --rrs-ink-hi:      #080a09;

  /* status — reserved, never a data series, always with a glyph or label */
  --good:            #6ed9a8;
  --warning:         #f0c674;
  --serious:         #e8a05c;
  --critical:        #e86a6a;
  --good-text:       #6ed9a8;
  --critical-wash:   #2a1414;

  /* chart chrome */
  --grid:            #1d221d;
  --axis:            #2f372f;

  /* type & metrics */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --measure: 68ch;
  --wide: 1180px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
}

/* --- LIGHT: only when the viewer chooses it -------------------------------
   Black is the primary theme and is not overridden by an OS preference. --- */
:root[data-theme="light"] {
  color-scheme: light;
  --page:           #f5f8f3;
  --surface-1:      #fbfcfa;
  --surface-2:      #eef3ea;
  --surface-sunk:   #e6ece1;
  --text-primary:   #0c120e;
  --text-secondary: #47524a;
  --text-muted:     #7a857b;
  --rule:           #dde5d8;
  --rule-strong:    #bcc9b6;
  --border:         rgba(12, 18, 14, .12);

  --brand-mint:     #4fb08a;
  --brand-matcha:   #7fa86a;
  --brand-olive:    #7d8f5a;
  --brand-orange:   #c4701f;

  --accent:         #1f6b3f;
  --accent-ink:     #14502e;
  --accent-on:      #ffffff;
  --accent-wash:    #e6f2ea;

  --series-1:       #1f6b3f;
  --series-2:       #c4701f;
  --series-3:       #7d8f5a;

  --rrs-0:          #7fbe8f;
  --rrs-1:          #5aaa6c;
  --rrs-2:          #2e8b57;
  --rrs-3:          #1b5c39;
  --rrs-na:         #e6ece1;
  --rrs-ink-lo:     #0c120e;
  --rrs-ink-hi:     #ffffff;

  --good:           #14795a;
  --warning:        #b7791f;
  --serious:        #c4701f;
  --critical:       #b03030;
  --good-text:      #14795a;
  --critical-wash:  #fbeaea;

  --grid:           #dde5d8;
  --axis:           #bcc9b6;
  --shadow: 0 1px 2px rgba(12,18,14,.06), 0 4px 16px rgba(12,18,14,.05);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.22; font-weight: 620; letter-spacing: -0.015em; margin: 0 0 .5em; }
/* the header is sticky, so anchored and scrolled-to content must clear it */
h1, h2, h3, h4, [id] { scroll-margin-top: 76px; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); margin-top: 2.4em; }
h3 { font-size: 1.16rem; margin-top: 2em; }
h4 { font-size: 1rem; margin-top: 1.6em; color: var(--text-secondary); }
h2 + h3, h3 + h4 { margin-top: 1.1em; }

p, ul, ol { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .4em; }
li::marker { color: var(--text-muted); }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

strong { font-weight: 640; }
code, kbd { font-family: var(--mono); font-size: .875em; background: var(--surface-2); padding: .12em .38em; border-radius: 3px; }
pre { max-width: 100%; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.15rem; overflow-x: auto; font-size: .84rem; line-height: 1.6; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface-1); color: var(--text-primary);
  padding: .6rem 1rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.skip:focus { left: .5rem; top: .5rem; }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--measure); }
.prose-wide { max-width: 96ch; }
main { padding-bottom: 5rem; }
.section { padding: 3.5rem 0; }
.section + .section { border-top: 1px solid var(--rule); }

.lede { font-size: 1.16rem; line-height: 1.6; color: var(--text-secondary); max-width: 62ch; }

.eyebrow {
  font-size: .715rem; font-weight: 660; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 .85rem;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; gap: 1.25rem; height: 60px; }
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none;
  color: var(--text-primary); font-weight: 660; letter-spacing: -.02em; margin-right: auto;
  flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.brand .mark { flex: none; }
.brand .sub { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand .mark { font-size: 1.02rem; }
.brand .sub { font-size: .715rem; font-weight: 500; color: var(--text-muted); letter-spacing: .02em; }
/* The family bar carries the full name and the UTIOM/TID-CMM context, so the
   brand strapline is redundant on anything but a wide screen. */
@media (max-width: 1480px) { .brand .sub { display: none; } }

.nav-links { display: flex; gap: 1.1rem; align-items: center; flex: none; }
/* Between the mobile breakpoint and full width there are more links than room.
   Tighten spacing and drop the least-essential links rather than overflowing;
   every one of them remains in the drawer and the footer. */
@media (max-width: 1240px) { .nav-links { gap: .85rem; font-size: .93em; } }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: .875rem;
  font-weight: 500; white-space: nowrap; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a[aria-current="page"] { color: var(--text-primary); font-weight: 620; }
/* The CTA is a button that happens to live in the nav; the nav-link colour
   rule is more specific than .btn-primary and would otherwise win. */
.nav-links a.btn-primary { color: var(--accent-on); font-weight: 570; }
.nav-links a.btn-primary:hover { color: var(--accent-on); }
@media (max-width: 1090px) { .nav-links { display: none; } }

.theme-toggle {
  flex: none;
  background: none; border: 1px solid var(--rule); color: var(--text-secondary);
  border-radius: var(--radius); width: 34px; height: 30px; cursor: pointer;
  font-size: .9rem; line-height: 1; display: grid; place-items: center;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--rule-strong); }

.nav-menu { display: none; }
/* The drawer is mobile-only: it must be hidden at every width unless opened,
   otherwise it renders as a stray row of links beneath the desktop nav. */
.nav-drawer { display: none; border-top: 1px solid var(--rule); padding: .75rem 0 1.1rem; }
@media (max-width: 1090px) {
  .nav-menu { display: block; background: none; border: 1px solid var(--rule); color: var(--text-secondary);
    border-radius: var(--radius); height: 30px; padding: 0 .55rem; cursor: pointer; font-size: .8rem; }
  .nav-drawer.open { display: block; }
  .nav-drawer a { display: block; padding: .45rem 0; color: var(--text-secondary); text-decoration: none; font-size: .95rem; }
  .nav-drawer a:hover { color: var(--text-primary); }
}

.family-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--surface-1);
  font-size: .78rem;
  line-height: 1.4;
}
.family-bar .wrap {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  min-height: 30px; padding-top: .3rem; padding-bottom: .3rem;
  color: var(--text-muted);
}
.family-bar strong { color: var(--text-secondary); font-weight: 600; }
.family-bar a { color: var(--accent); text-decoration: none; font-weight: 560; }
.family-bar a:hover { text-decoration: underline; }
.family-bar .sep { color: var(--rule-strong); }
@media (max-width: 640px) { .family-bar .sep { display: none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem 1.15rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 570; font-family: inherit;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-ink); color: var(--accent-on); }
.btn-secondary { background: var(--surface-1); color: var(--text-primary); border-color: var(--rule-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: none; color: var(--text-secondary); border-color: var(--rule); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--rule-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: .38rem .7rem; font-size: .8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0; }

/* ==========================================================================
   Cards, grids, callouts
   ========================================================================== */

.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: var(--surface-1); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.35rem 1.4rem;
}
.card h3 { margin-top: 0; font-size: 1.02rem; }
.card p:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .12s; }
.card-link:hover { border-color: var(--rule-strong); text-decoration: none; }

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-wash);
  padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.6rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout-critical { border-left-color: var(--critical); background: var(--critical-wash); }

.pull {
  font-size: 1.22rem; line-height: 1.5; font-weight: 500; color: var(--text-primary);
  border-left: 3px solid var(--rule-strong); padding-left: 1.25rem; margin: 2rem 0; max-width: 58ch;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/* A grid or flex child defaults to min-width:auto, which stops a scroll
   container shrinking below its content and pushes the page wide instead.
   These declarations let the scrollers actually scroll. */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; max-width: 100%; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-size: .885rem; }
th, td { text-align: left; padding: .58rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 620; color: var(--text-secondary); font-size: .765rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; padding-top: .7rem; font-size: .8rem; color: var(--text-muted); text-align: left; }

/* ==========================================================================
   Badges & pills
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .715rem; font-weight: 620; letter-spacing: .03em;
  padding: .16rem .5rem; border-radius: 3px;
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--rule);
  white-space: nowrap;
}
.badge-accent { background: var(--accent-wash); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.badge-critical { background: var(--critical-wash); color: var(--critical); border-color: color-mix(in srgb, var(--critical) 35%, transparent); }
.badge-good { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-text); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.badge-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text-primary); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }

.domain-tag {
  display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.4rem; padding: 0 .35rem;
  font-family: var(--mono); font-size: .715rem; font-weight: 600;
  border-radius: 3px; background: var(--surface-sunk); color: var(--text-secondary); border: 1px solid var(--rule);
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.stat {
  background: var(--surface-1); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.stat-label { font-size: .755rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }
.stat-value { font-size: 2.1rem; font-weight: 640; line-height: 1.08; letter-spacing: -.03em; }
.stat-value.sm { font-size: 1.55rem; }
.stat-note { font-size: .8rem; color: var(--text-secondary); margin-top: .3rem; line-height: 1.4; }
.stat-value.is-critical { color: var(--critical); }
.stat-value.is-good { color: var(--good-text); }

/* ==========================================================================
   Charts — shared
   ========================================================================== */

.figure { background: var(--surface-1); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.35rem 1.1rem; margin: 1.5rem 0; }
.figure-title { font-size: .95rem; font-weight: 620; margin: 0 0 .2rem; }
.figure-sub { font-size: .82rem; color: var(--text-secondary); margin: 0 0 1rem; }
.figure figcaption { font-size: .78rem; color: var(--text-muted); margin-top: .85rem; line-height: 1.5; }

.legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--text-secondary); }
.legend li { display: flex; align-items: center; gap: .4rem; margin: 0; }
.legend .swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px var(--border) inset; }
.legend .swatch.line { height: 3px; border-radius: 2px; }

.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg text { font-family: var(--sans); fill: var(--text-muted); font-size: 11px; }
.chart-svg .tick { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--axis); stroke-width: 1; }
.chart-svg .label-primary { fill: var(--text-primary); font-size: 11.5px; font-weight: 560; }
.chart-svg .label-secondary { fill: var(--text-secondary); font-size: 11px; }

.tooltip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: .5rem .7rem; font-size: .8rem; line-height: 1.45; box-shadow: var(--shadow);
  max-width: 280px; transition: opacity .1s;
}
.tooltip.show { opacity: 1; }
.tooltip .tt-title { font-weight: 620; display: block; margin-bottom: .15rem; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 1.2rem; }
.tooltip .tt-row span:last-child { font-variant-numeric: tabular-nums; }

.table-view-toggle { margin-top: .9rem; }
.table-view-toggle summary { cursor: pointer; font-size: .8rem; color: var(--text-secondary); }
.table-view-toggle summary:hover { color: var(--text-primary); }

/* ==========================================================================
   Containment lattice
   ========================================================================== */

.lattice { overflow-x: auto; max-width: 100%; min-width: 0; }
.lattice table { border-collapse: separate; border-spacing: 2px; width: auto; min-width: 100%; }
.lattice th { font-size: .7rem; padding: .3rem .4rem; text-transform: none; letter-spacing: .02em; }
.lattice th.row-head { text-align: left; white-space: nowrap; color: var(--text-primary); font-weight: 600; text-transform: none; font-size: .78rem; }
.lattice td { padding: 0; border: 0; }
.lattice tbody tr:hover { background: none; }

.cell {
  width: 100%; min-width: 54px; height: 42px;
  display: grid; place-items: center; position: relative;
  border-radius: 3px; border: 0; cursor: pointer; font-family: var(--sans);
  font-size: .85rem; font-weight: 620; font-variant-numeric: tabular-nums;
  background: var(--rrs-na); color: var(--text-muted);
  transition: box-shadow .1s;
}
.cell[data-rrs="0"] { background: var(--rrs-0); color: var(--rrs-ink-lo); }
.cell[data-rrs="1"] { background: var(--rrs-1); color: var(--rrs-ink-lo); }
.cell[data-rrs="2"] { background: var(--rrs-2); color: var(--rrs-ink-hi); }
.cell[data-rrs="3"] { background: var(--rrs-3); color: var(--rrs-ink-hi); }
:root[data-theme="dark"] .cell[data-rrs="0"],
:root:where(:not([data-theme="light"])) .cell[data-rrs="0"] { color: var(--rrs-ink-lo); }
.cell[data-na="1"] { background: var(--rrs-na); color: var(--text-muted); cursor: default; font-size: .7rem; font-weight: 500; }
.cell:hover:not([data-na="1"]) { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); }
.cell:focus-visible { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent); outline: none; }

/* Tier-1/2 blind cells: status ring + glyph, never colour alone */
.cell.is-blind::after {
  content: "!"; position: absolute; top: 1px; right: 3px;
  font-size: .68rem; font-weight: 800; color: var(--critical);
}
.cell.is-blind { box-shadow: inset 0 0 0 2px var(--critical); }
.cell .tier { position: absolute; bottom: 1px; left: 3px; font-size: .58rem; font-weight: 600; opacity: .72; }

.lattice-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .9rem; font-size: .78rem; color: var(--text-secondary); }
.lattice-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.lattice-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 1px var(--border) inset; }

/* ==========================================================================
   Assessment tool
   ========================================================================== */

.tool-shell { display: grid; grid-template-columns: 216px 1fr; gap: 2.2rem; align-items: start; }
.tool-shell > * { min-width: 0; }
@media (max-width: 940px) { .tool-shell { grid-template-columns: 1fr; gap: 1.2rem; } }

.steps { position: sticky; top: 76px; list-style: none; margin: 0; padding: 0; font-size: .845rem; }
@media (max-width: 940px) { .steps { position: static; display: flex; overflow-x: auto; gap: .4rem; padding-bottom: .5rem; } }
.steps li { margin: 0; }
.steps button {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid var(--rule);
  padding: .42rem .7rem; color: var(--text-secondary); cursor: pointer;
  font-family: inherit; font-size: inherit; line-height: 1.35;
}
@media (max-width: 940px) { .steps button { white-space: nowrap; border-left: 0; border-bottom: 2px solid var(--rule); width: auto; } }
.steps button:hover { color: var(--text-primary); background: var(--surface-2); }
.steps button[aria-current="step"] { color: var(--text-primary); font-weight: 620; border-color: var(--accent); background: var(--surface-2); }
.steps .n { font-family: var(--mono); font-size: .72rem; color: var(--text-muted); min-width: 1.1rem; }
.steps button[aria-current="step"] .n { color: var(--accent); }
.steps .done { color: var(--good-text); font-weight: 700; }

.panel { display: none; }
.panel.active { display: block; }
.panel > h2 { margin-top: 0; }

.field { margin-bottom: 1.4rem; }
.field > label, .field-label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .3rem; }
.field .hint { font-size: .83rem; color: var(--text-secondary); margin: 0 0 .6rem; line-height: 1.5; }

input[type="text"], input[type="number"], select, textarea {
  font-family: inherit; font-size: .92rem; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: .45rem .6rem; width: 100%; max-width: 30rem;
}
input[type="number"] { max-width: 9rem; font-variant-numeric: tabular-nums; }
textarea { min-height: 7rem; font-family: var(--mono); font-size: .8rem; max-width: 100%; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .5rem; }
.check {
  display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-1); cursor: pointer;
}
.check:hover { border-color: var(--rule-strong); }
.check input { margin: .25rem 0 0; flex: none; accent-color: var(--accent); }
.check .t { font-weight: 570; font-size: .9rem; display: block; }
.check .d { font-size: .79rem; color: var(--text-secondary); line-height: 1.4; display: block; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }

.repeater-row { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--rule); }
.repeater-row .col { flex: 1 1 9rem; min-width: 7rem; }
.repeater-row .col label { font-size: .74rem; color: var(--text-muted); display: block; margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .04em; }
.repeater-row input, .repeater-row select { max-width: none; }

/* sub-capability scoring rows */
.domain-block { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; background: var(--surface-1); }
.domain-head { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.domain-head h3 { margin: 0; font-size: .97rem; }
.domain-head .wt { font-size: .78rem; color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.domain-head .dscore { font-family: var(--mono); font-size: .88rem; font-weight: 600; color: var(--accent); min-width: 2.6rem; text-align: right; }

.sub-row { padding: .7rem 1rem; border-bottom: 1px solid var(--rule); }
.sub-row:last-child { border-bottom: 0; }
.sub-top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sub-id { font-family: var(--mono); font-size: .74rem; color: var(--text-muted); flex: none; min-width: 3.2rem; }
.sub-name { font-weight: 560; font-size: .9rem; flex: 1 1 14rem; }
.sub-desc { font-size: .81rem; color: var(--text-secondary); margin: .3rem 0 .5rem 3.8rem; line-height: 1.45; }
@media (max-width: 600px) { .sub-desc { margin-left: 0; } }

.scale { display: flex; gap: 3px; flex: none; }
.scale input { position: absolute; opacity: 0; width: 0; height: 0; }
.scale label {
  width: 30px; height: 27px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 3px; font-size: .8rem; font-weight: 600;
  color: var(--text-secondary); background: var(--surface-1); font-variant-numeric: tabular-nums;
}
.scale label:hover { border-color: var(--accent); color: var(--text-primary); }
.scale input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }
.scale input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.scale input:checked + label.na { background: var(--text-muted); border-color: var(--text-muted); }

.evidence { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .45rem; margin-left: 3.8rem; font-size: .8rem; color: var(--text-secondary); }
.evidence select { width: auto; min-width: 19rem; max-width: 24rem; padding: .25rem .45rem; font-size: .82rem; }
@media (max-width: 600px) { .evidence { margin-left: 0; } }
.evidence input[type="text"] { max-width: 20rem; padding: .25rem .45rem; font-size: .82rem; }
.evidence input[type="checkbox"] { accent-color: var(--accent); }
.evidence.r3-fired { color: var(--critical); }

.wizard-nav { display: flex; gap: .7rem; justify-content: space-between; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }

.live-score {
  position: sticky; bottom: 0; background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--rule);
  padding: .55rem 0; margin-top: 2rem; z-index: 30;
  display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: baseline; font-size: .84rem;
}
.live-score b { font-family: var(--mono); font-size: 1rem; font-weight: 640; color: var(--text-primary); }
.live-score .k { color: var(--text-muted); }

.constraint-row { display: flex; gap: .7rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: .87rem; }
.constraint-row:last-child { border-bottom: 0; }
.constraint-row .cid { font-family: var(--mono); font-weight: 640; min-width: 1.9rem; }
.constraint-row .cname { font-weight: 560; min-width: 12rem; }
.constraint-row .ceffect { margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; }
.constraint-row.binding .cid { color: var(--critical); }
.constraint-row.binding { background: var(--critical-wash); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; }

.result-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.6rem 0 2rem; align-items: stretch; }
.result-hero .stat { display: flex; flex-direction: column; }
.result-hero .stat-note { margin-top: auto; padding-top: .3rem; }

/* --- readiness meters ---------------------------------------------------- */
.meter { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.meter:last-of-type { border-bottom: 0; }
.meter-head { display: flex; align-items: baseline; gap: .6rem; }
.meter-name { font-weight: 620; font-size: .97rem; }
.meter-value { margin-left: auto; font-family: var(--mono); font-size: 1.05rem; font-weight: 640; font-variant-numeric: tabular-nums; }
.meter-verdict { font-size: .715rem; font-weight: 660; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .45rem; border-radius: 3px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--text-secondary); }
.meter-verdict[data-v="critical"] { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); background: var(--critical-wash); }
.meter-verdict[data-v="serious"] { color: var(--text-primary); border-color: color-mix(in srgb, var(--serious) 55%, transparent); background: color-mix(in srgb, var(--serious) 15%, transparent); }
.meter-verdict[data-v="warning"] { color: var(--text-primary); border-color: color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.meter-verdict[data-v="good"] { color: var(--good-text); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 12%, transparent); }
.meter-q { font-size: .84rem; color: var(--text-secondary); margin: .1rem 0 .5rem; }
.meter-track { position: relative; height: 14px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; }
.meter-track i { position: absolute; top: 0; left: 0; height: 100%; border-radius: 4px; display: block; }
.meter-fill { background: var(--series-1); }
.meter-ghost { background: var(--series-2); opacity: .38; }
.meter-track u { position: absolute; top: 0; width: 1px; height: 100%; background: var(--page); opacity: .85; }
.meter-note { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--text-secondary); margin-top: .4rem; }
.meter-note b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 640; }
.meter-note .gap { color: var(--text-muted); }
.meter-note.is-capped .gap { color: var(--critical); }
.meter-note .gap.ok { color: var(--good-text); }
.meter-desc { font-size: .82rem; color: var(--text-secondary); margin-top: .4rem; line-height: 1.5; }

/* --- blueprint ----------------------------------------------------------- */
.bp-bucket { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-1); margin-bottom: 1.1rem; overflow: hidden; }
.bp-head { padding: .85rem 1.1rem; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.bp-head h3 { margin: 0; font-size: 1.02rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.bp-head .window { font-size: .78rem; font-weight: 500; color: var(--text-secondary); font-family: var(--mono); }
.bp-head .count { margin-left: auto; font-size: .78rem; color: var(--text-muted); font-weight: 500; }
.bp-head p { margin: .35rem 0 0; font-size: .82rem; color: var(--text-secondary); line-height: 1.5; }
.bp-item { padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule); }
.bp-item:last-child { border-bottom: 0; }
.bp-item .bp-act { font-size: .93rem; line-height: 1.5; margin: 0 0 .35rem; }
.bp-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; font-size: .78rem; color: var(--text-secondary); }
.bp-meta .bp-win { color: var(--good-text); }
.bp-meta .bp-win::before { content: "→ "; }
.bp-empty { padding: 1rem 1.1rem; font-size: .85rem; color: var(--text-muted); }

/* --- findings ------------------------------------------------------------ */
.finding { border-left: 3px solid var(--rule-strong); padding: .1rem 0 .1rem 1.1rem; margin: 1.1rem 0; }
.finding[data-sev="critical"] { border-left-color: var(--critical); }
.finding[data-sev="serious"] { border-left-color: var(--serious); }
.finding[data-sev="warning"] { border-left-color: var(--warning); }
.finding h4 { margin: 0 0 .3rem; font-size: .97rem; color: var(--text-primary); font-weight: 620; }
.finding p { margin: 0 0 .4rem; font-size: .88rem; line-height: 1.55; }
.finding .fix { font-size: .86rem; color: var(--text-primary); background: var(--surface-2);
  border-radius: var(--radius); padding: .45rem .65rem; margin: 0; }
.finding .fix::before { content: "What to do "; font-weight: 640; color: var(--text-muted); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .15rem; }

.report-prose p { font-size: .95rem; line-height: 1.68; max-width: 74ch; }

.roadmap-item { display: flex; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.roadmap-item .rank { font-family: var(--mono); font-size: .78rem; color: var(--text-muted); min-width: 1.6rem; }
.roadmap-item .rlabel { flex: 1 1 auto; min-width: 0; }
.roadmap-item .rbar { flex: 0 0 140px; height: 8px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; }
.roadmap-item .rbar i { display: block; height: 100%; border-radius: 4px; }
.roadmap-item .rimp { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--text-secondary); min-width: 3rem; text-align: right; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; font-size: .85rem; color: var(--text-secondary); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.6rem; margin-bottom: 1.8rem; }
.footer-grid h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 0 0 .5rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .3rem; }
.footer-grid a { color: var(--text-secondary); text-decoration: none; }
.footer-grid a:hover { color: var(--text-primary); text-decoration: underline; }
.footer-legal { padding-top: 1.3rem; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--text-muted); }
.footer-legal p { margin: 0 0 .3rem; }

/* ==========================================================================
   Utilities & print
   ========================================================================== */

.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.tc { text-align: center; } .tr { text-align: right; }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
/* .mono often holds URLs and schema ids; let them break rather than push the
   page wide on a narrow phone. Breaking only happens when it will not fit. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media print {
  .site-header, .site-footer, .wizard-nav, .steps, .live-score, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .panel { display: block !important; page-break-before: always; }
  .figure, .card { break-inside: avoid; }
}

@media (forced-colors: active) {
  .cell { forced-color-adjust: none; }
  .card, .figure, .stat { border: 1px solid CanvasText; }
}