/* Gridward -- first product build.
 *
 * One design system, two token themes. Components below never hard-code a
 * theme colour: they read ``var(--...)`` only. ``:root`` is the default
 * diagnostic register (evidence paper-ink). ``[data-theme="executive"]`` is
 * the premium dark override the executive dashboard wears via ``<body
 * data-theme>``. Everything reads without colour as well as with it: every
 * state also carries a label and a shape.
 */

:root {
  /* diagnostic / evidence paper-ink (default) */
  --paper: #f6f3ec;
  --surface: #fffefc;
  --surface-sunk: #efece4;
  --paper-2: #f1ede4;
  --ink: #161a1e;
  --ink-2: #414b53;
  --ink-3: #59646d;
  --line: #e2dcd1;
  --line-strong: #cfc7b8;

  --teal: #0f5b58;
  --teal-ink: #0b4442;
  --teal-soft: #e2eeeb;
  --teal-line: #b9d4d1;

  --risk: #8f4519;
  --risk-soft: #f8eee3;
  --risk-line: #e8d4bd;
  --crit: #8a2b2b;
  --crit-soft: #f8e9e7;
  --crit-line: #e6c4c0;
  --good: #38633f;
  --good-soft: #e9f1e9;
  --good-line: #c6dac6;
  --watch: #6a5a1f;
  --watch-soft: #f6f1dd;
  --watch-line: #e3dbb4;
  --neutral-soft: #edebe4;
  --band-workable: #7d8f56;

  --radius: 3px;
  --gap: 1.25rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --skip-bg: var(--ink);
  --skip-ink: #ffffff;
  --btn-ink: #ffffff;
  --tier-pill-border: #cfe0dc;
  --avatar-bg: var(--ink);
  --avatar-ink: #ffffff;
}

[data-theme="executive"] {
  /* executive dark / premium */
  --paper: #0d1114;
  --surface: #141a1e;
  --surface-sunk: #1a2228;
  --paper-2: #1a2228;
  --ink: #eef2f0;
  --ink-2: #b8c2be;
  --ink-3: #7e8a86;
  --line: #243038;
  --line-strong: #33424c;

  --teal: #3db8a8;
  --teal-ink: #7fd4c8;
  --teal-soft: #14332f;
  --teal-line: #2a4a45;

  --risk: #d08a52;
  --risk-soft: #2a1d12;
  --risk-line: #4a3a24;
  --crit: #d97b7b;
  --crit-soft: #2e1818;
  --crit-line: #5a3030;
  --good: #7fbf8a;
  --good-soft: #15281a;
  --good-line: #2a4a30;
  --watch: #c4b06a;
  --watch-soft: #2a2614;
  --watch-line: #4a4428;
  --neutral-soft: #1c242a;
  --band-workable: #8aa05a;

  --skip-bg: #eef2f0;
  --skip-ink: #0d1114;
  --btn-ink: #0d1114;
  --tier-pill-border: #2a4a45;
  --avatar-bg: var(--ink);
  --avatar-ink: var(--paper);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Same page-canvas fallback the live website uses (gridward.agency
     html{background:#142e70}) so overscroll never flashes white. */
  background-color: #142e70;
}

body {
  margin: 0;
  /* Website-matched vertical blue fade. Colours are taken exactly from the
     live gridward.agency page gradient (body::before linear-gradient stops
     #101f58 → #214789 at 58% → #385b9b, the slightly lighter blue endpoint),
     re-cut vertical per product direction. Painted on <body> so one wash
     spans the whole document height and never restarts between sections.
     Theme cards/masthead/footer keep their own opaque surfaces. */
  background-color: #142e70;
  background-image: linear-gradient(180deg, #101f58 0%, #214789 58%, #385b9b 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

.mono { font-family: var(--mono); font-size: 0.85em; letter-spacing: -0.01em; }
.muted { color: var(--ink-3); }
.lede { color: var(--ink-2); font-size: 1.02rem; max-width: 68ch; }
.small { font-size: 0.85rem; }
.tiny { font-size: 0.78rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--skip-bg); color: var(--skip-ink);
  padding: 0.6rem 1rem; z-index: 20;
}
.skip:focus { left: 0; }

/* -- masthead ------------------------------------------------------------ */

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 0.7rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}

.wordmark { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.wordmark:hover { text-decoration: none; }
.wordmark-mark {
  width: 15px; height: 15px; background: var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 62%, 62% 100%, 0 100%);
}
.wordmark-text { font-weight: 650; letter-spacing: -0.02em; font-size: 1.02rem; }

.rail { display: flex; gap: 0.15rem; }
.rail-link {
  padding: 0.4rem 0.75rem; border-radius: var(--radius); color: var(--ink-2);
  font-size: 0.9rem;
}
.rail-link:hover { background: var(--neutral-soft); color: var(--ink); text-decoration: none; }
.rail-link.is-current { background: var(--teal-soft); color: var(--teal-ink); font-weight: 600; }

.masthead-tail { display: flex; align-items: center; gap: 1rem; }
.tier-pill {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--teal-ink); background: var(--teal-soft);
  border: 1px solid var(--tier-pill-border); border-radius: 999px; padding: 0.2rem 0.6rem;
}
.who { display: flex; align-items: center; gap: 0.55rem; }
.who-org { font-size: 0.85rem; color: var(--ink-2); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--avatar-bg); color: var(--avatar-ink);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}

/* -- page ---------------------------------------------------------------- */

.page { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.page-narrow { max-width: 780px; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.page-head .lede { margin-top: 0.4rem; }
.eyebrow {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--ink-3); margin-bottom: 0.4rem;
}

/* -- surfaces ------------------------------------------------------------ */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.85rem;
}
.card-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--ink-3); }
.card-sunk { background: var(--surface-sunk); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.stack > * + * { margin-top: 1rem; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-side { grid-template-columns: minmax(0, 1fr); }
  .masthead { grid-template-columns: 1fr auto; gap: 1rem; }
  .rail { grid-column: 1 / -1; order: 3; overflow-x: auto; }
}

/* -- readiness ----------------------------------------------------------- */

.readiness { display: flex; gap: 1.75rem; align-items: flex-start; flex-wrap: wrap; }
.readiness-score { display: flex; align-items: baseline; gap: 0.4rem; }
.readiness-value {
  font-family: var(--serif); font-size: 3.6rem; line-height: 0.95;
  font-weight: 600; letter-spacing: -0.03em;
}
.readiness-unit { font-size: 1rem; color: var(--ink-3); }
.readiness-bands { display: grid; gap: 0.3rem; margin-top: 0.9rem; min-width: 260px; flex: 1; }

.band-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.band-track { position: relative; height: 9px; background: var(--surface-sunk); border-radius: 2px; overflow: hidden; }
.band-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.band-fill.is-strong { background: var(--good); }
.band-fill.is-workable { background: var(--band-workable); }
.band-fill.is-exposed { background: var(--risk); }
.band-fill.is-critical { background: var(--crit); }
.band-fill.is-confidence { background: var(--teal); opacity: 0.75; }
.band-fill.is-coverage { background: var(--teal); opacity: 0.45; }

.confidence-strip {
  display: grid; grid-template-columns: 1fr; gap: 0.35rem;
  border-left: 2px solid var(--teal); padding-left: 0.9rem;
}

/* -- states -------------------------------------------------------------- */

.state {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 2px; padding: 0.16rem 0.5rem;
  border: 1px solid;
}
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state-act_now { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-line); }
.state-blocked { color: var(--risk); background: var(--risk-soft); border-color: var(--risk-line); }
.state-undetermined { color: var(--ink-2); background: var(--neutral-soft); border-color: var(--line-strong); }
.state-monitoring { color: var(--watch); background: var(--watch-soft); border-color: var(--watch-line); }
.state-settled { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }

.state-legend { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Assessment-lifecycle chips. Deliberately *not* the .state-* palette above:
   those belong to governed condition states, which come from the read model. A
   "run" badge must never be mistaken for a governed finding state. */
.chip { display: inline-block; font-size: 0.7rem; letter-spacing: 0.04em;
        text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 3px;
        border: 1px solid var(--line-strong); background: var(--paper-2);
        color: var(--ink-2); white-space: nowrap; }
.chip-done { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.chip-open { color: var(--ink-3); background: var(--paper-2); border-style: dashed; }
.chip-current { color: var(--teal-ink); background: var(--teal-soft); border-color: var(--teal-line); }
.chip-quiet { color: var(--ink-3); background: transparent; }

/* -- filter bar ---------------------------------------------------------- */

.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filter-bar .state { text-decoration: none; }
.filter-bar .state:hover { text-decoration: none; filter: brightness(0.96); }
.filter-bar .state:target { outline: 2px solid var(--teal); outline-offset: 2px; }

/* -- findings ------------------------------------------------------------ */

.findings { display: grid; gap: 0.5rem; }
.finding {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface);
  padding: 0.85rem 1rem;
}
.finding.is-act_now { border-left-color: var(--crit); }
.finding.is-blocked { border-left-color: var(--risk); }
.finding.is-undetermined { border-left-color: var(--ink-3); }
.finding.is-monitoring { border-left-color: var(--watch); }
.finding.is-settled { border-left-color: var(--good); }
.finding-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.finding-name { font-weight: 600; font-size: 0.98rem; }
.finding-id { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.finding-statement { color: var(--ink-2); margin: 0.4rem 0 0; font-size: 0.92rem; }
.finding-body { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.finding-detail { display: grid; gap: 0.5rem; }

.detail-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; font-size: 0.87rem; }
.detail-row dt { color: var(--ink-3); }
.detail-row dd { margin: 0; color: var(--ink-2); }

.finding-more { margin-top: 0.55rem; }
.finding-more[open] { margin-top: 0.55rem; }
.finding-more > summary {
  cursor: pointer; font-size: 0.82rem; color: var(--teal);
  list-style: none; display: inline-flex; align-items: center; gap: 0.35rem;
}
.finding-more > summary::-webkit-details-marker { display: none; }
.finding-more > summary::before { content: "▸"; font-size: 0.7em; }
.finding-more[open] > summary::before { content: "▾"; }

/* The findings screen's row fold: the chip, name and id ride the closed
   summary; the statement, prescription and methodology open on demand. */
.finding-fold > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: 0.55rem;
}
.finding-fold > summary::-webkit-details-marker { display: none; }
.finding-fold > summary::before {
  content: "▸"; color: var(--teal); font-size: 0.7em;
  flex: none; align-self: center; margin-top: 0.15rem;
}
.finding-fold[open] > summary::before { content: "▾"; }
.finding-fold-title {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
}
.finding-fold-head .state { flex: none; }
.finding-fold-body {
  margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}

/* -- empty-compact ------------------------------------------------------- */

.empty-compact {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 0.9rem 1rem; background: var(--surface);
}
.empty-compact .empty-label { font-weight: 600; font-size: 0.92rem; }
.empty-compact .empty-note { margin-top: 0.25rem; }

/* -- queue lanes --------------------------------------------------------- */

.lane-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 900px) { .lane-grid { grid-template-columns: 1fr; } }
.lane {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1rem 1.1rem;
}
.lane-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.75rem; margin-bottom: 0.6rem;
}
.lane-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--ink-3);
}
.lane-count { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
.lane-note { font-size: 0.82rem; color: var(--ink-2); margin: 0 0 0.6rem; }
.lane-items { display: grid; gap: 0.55rem; }
.lane-item {
  border-left: 3px solid var(--line-strong); padding: 0.45rem 0.7rem;
  background: var(--surface-sunk); border-radius: 2px;
}
.lane-item .lane-item-label { font-weight: 600; font-size: 0.92rem; }
.lane-item .lane-item-detail { font-size: 0.82rem; color: var(--ink-2); margin-top: 0.15rem; }

/* A lane fold: the governed sentence is the summary, the entries one click
   away. Same disclosure language as the finding fold below. */
.lane-more { margin-top: 0.45rem; }
.lane-more > summary {
  cursor: pointer; font-size: 0.84rem; color: var(--teal);
  list-style: none; display: inline-flex; align-items: center; gap: 0.35rem;
}
.lane-more > summary::-webkit-details-marker { display: none; }
.lane-more > summary::before { content: "▸"; font-size: 0.7em; }
.lane-more[open] > summary::before { content: "▾"; }
.lane-more .lane-items { margin-top: 0.55rem; }

/* A lane with nothing to show -- empty or withheld -- is a designed panel
   carrying the governed sentence, never a blank box. The kicker names which
   of the two governed reasons the read model gives; the explanation below it
   is still the read model's own words. */
.lane-panel {
  border: 1px dashed var(--line-strong); border-left: 3px solid var(--ink-3);
  background: var(--surface); border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.panel-kicker {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--ink-3); margin-bottom: 0.35rem;
}
.panel-sentence { font-size: 0.86rem; color: var(--ink-2); margin: 0; }
.withheld-label { font-weight: 600; font-size: 0.88rem; }
.withheld-why { font-size: 0.84rem; color: var(--ink-2); margin-top: 0.2rem; }

/* -- chain legs ---------------------------------------------------------- */

.chain { display: grid; gap: 1rem; }
.leg {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1rem 1.15rem;
}
.leg-part { padding: 0.65rem 0 0.65rem 0.9rem; }
.leg-part + .leg-part { border-top: 1px solid var(--line); margin-top: 0.55rem; }
.leg-constraint { border-left: 3px solid var(--teal); }
.leg-consequence { border-left: 3px solid var(--ink-3); }
.leg-action { border-left: 3px solid var(--risk); }
.leg-head { font-weight: 600; font-size: 0.98rem; margin: 0 0 0.35rem; }
.leg-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--ink-3); display: block; margin-bottom: 0.2rem;
}
.leg-why { font-size: 0.86rem; color: var(--ink-2); margin: 0.35rem 0 0; }
.leg-meta { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

/* The actions screen's chain fold: one summary row per condition -- name,
   id and the decision state -- with the three legs one click away. Inside
   an open entry the leg drops its own card chrome and sits flush. */
.chain-entry {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0.7rem 0.95rem;
}
.chain-entry > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.55rem;
}
.chain-entry > summary::-webkit-details-marker { display: none; }
.chain-entry > summary::before { content: "▸"; color: var(--teal); font-size: 0.7em; flex: none; }
.chain-entry[open] > summary::before { content: "▾"; }
.chain-entry-title {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
}
.chain-entry-name { font-weight: 600; font-size: 0.95rem; }
.chain-entry-state { font-size: 0.78rem; color: var(--ink-3); flex: none; }
.chain-entry[open] .leg {
  border: none; background: transparent;
  padding: 0.35rem 0 0; margin-top: 0.5rem;
  border-top: 1px dashed var(--line);
}

/* -- evidence split / metric pairs --------------------------------------- */

.evidence-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 720px) { .evidence-split { grid-template-columns: 1fr; } }
.metric-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 720px) { .metric-pair { grid-template-columns: 1fr; } }
.metric {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-sunk); padding: 0.9rem 1rem;
}
.metric-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--ink-3);
}
.metric-value {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 600;
  letter-spacing: -0.02em; margin-top: 0.2rem;
}
.metric-note { font-size: 0.82rem; color: var(--ink-2); margin-top: 0.3rem; }

/* -- comparison ---------------------------------------------------------- */

.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 720px) { .comparison-grid { grid-template-columns: 1fr; } }
.compare-run {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1rem 1.1rem;
}
.compare-run .compare-kicker {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--ink-3);
}
.compare-figures { display: grid; gap: 0.45rem; margin-top: 0.7rem; }
.compare-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.75rem;
  font-size: 0.9rem;
}
.compare-pairs { margin-top: 1rem; }
.compare-pair {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); padding: 0.75rem 0.9rem;
  margin-bottom: 0.55rem;
}
.compare-pair .pair-condition { font-weight: 600; font-size: 0.92rem; }
.compare-pair .pair-note { font-size: 0.84rem; color: var(--ink-2); margin-top: 0.25rem; }

/* -- timeline / history -------------------------------------------------- */

.timeline { display: grid; gap: 0.65rem; }
.timeline-entry {
  border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: var(--radius); background: var(--surface); padding: 0.8rem 1rem;
}
.timeline-entry.is-not-latest { border-left-color: var(--line-strong); }
.timeline-top {
  display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; flex-wrap: wrap;
}
.timeline-meta { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.25rem; }
.lineage-chip {
  display: inline-block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; color: var(--teal-ink);
  background: var(--teal-soft); border: 1px solid var(--teal-line);
  border-radius: 999px; padding: 0.12rem 0.5rem; margin-left: 0.4rem;
}

/* -- lists and tables ---------------------------------------------------- */

.rows { display: grid; }
.row {
  display: grid; gap: 0.35rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; }
/* A long governed sentence plus its reason code must wrap instead of widening
   the page on a narrow viewport (the evidence refusals list). */
.row-top > * { min-width: 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 700; padding: 0 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--line-strong);
}
td { padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* A table that cannot fit its container scrolls inside it, so a narrow
   viewport never gains a page-level horizontal scrollbar. */
.table-scroll { overflow-x: auto; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-size: 0.9rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

/* -- forms --------------------------------------------------------------- */

.form-strip { display: grid; gap: 0.2rem; }
.field { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }
.field-label { font-size: 0.86rem; font-weight: 600; }
.field-hint { font-size: 0.8rem; color: var(--ink-3); }

.item-block {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; background: var(--surface);
}
.item-head { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: start; }
.item-text { font-weight: 600; }
.item-id { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.item-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.85rem; }
@media (max-width: 640px) { .item-answers { grid-template-columns: 1fr; } }

.answers-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.answers-row .choice {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.3rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); cursor: pointer;
  font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.answers-row .choice input { position: absolute; opacity: 0; pointer-events: none; }
.answers-row .choice:hover { border-color: var(--teal); }
.answers-row .choice.is-on { background: var(--teal); border-color: var(--teal); color: var(--btn-ink); font-weight: 600; }
.answers-row.is-unanswered .choice { border-style: dashed; }

input[type="text"], input[type="number"], select, textarea {
  font: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 0.42rem 0.55rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); width: 100%;
}
textarea { resize: vertical; min-height: 2.6rem; }
input:focus, select:focus, textarea:focus, .choice:focus-within {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}

.btn {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  padding: 0.55rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--teal); background: var(--teal); color: var(--btn-ink);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn:hover { background: var(--teal-ink); border-color: var(--teal-ink); text-decoration: none; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--neutral-soft); border-color: var(--ink-3); color: var(--ink); }
.btn-danger { background: var(--crit); border-color: var(--crit); }
.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* -- notices ------------------------------------------------------------- */

.notice {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--ink-3);
  background: var(--surface); border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-bottom: 1rem;
}
.notice h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.notice-risk { border-left-color: var(--risk); background: var(--risk-soft); border-color: var(--risk-line); }
.notice-crit { border-left-color: var(--crit); background: var(--crit-soft); border-color: var(--crit-line); }
.notice-good { border-left-color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.notice-teal { border-left-color: var(--teal); background: var(--teal-soft); border-color: var(--tier-pill-border); }
.notice-list { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.notice-list li { margin-bottom: 0.2rem; }

/* -- empty --------------------------------------------------------------- */

.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 2.25rem 1.5rem; text-align: center; background: var(--surface);
}
.empty h2 { margin-bottom: 0.4rem; }
.empty .btn { margin-top: 1rem; }

/* -- progress ------------------------------------------------------------ */

.progress { display: flex; align-items: center; gap: 0.7rem; }
.progress-track { flex: 1; height: 5px; background: var(--surface-sunk); border-radius: 999px; overflow: hidden; max-width: 260px; }
.progress-fill { height: 100%; background: var(--teal); }
.progress-label { font-size: 0.82rem; color: var(--ink-3); white-space: nowrap; }

.steps { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.82rem; }
.step { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-3); }
.step.is-done { color: var(--good); }
.step.is-current { color: var(--teal-ink); font-weight: 600; }
.step::after { content: "→"; color: var(--line-strong); margin-left: 0.1rem; }
.step:last-child::after { content: none; }

/* -- footer -------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 1rem 1.5rem; display: flex; justify-content: space-between;
  gap: 1.5rem; align-items: center; flex-wrap: wrap;
}
.foot-line { display: grid; gap: 0.15rem; font-size: 0.8rem; color: var(--ink-3); margin: 0; }
.persona { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-3); }
.persona select { width: auto; font-size: 0.8rem; padding: 0.25rem 0.4rem; }
/* Same narrow-screen contract as GTM for the synthetic-review switcher. */
.foot .persona { max-width: 100%; flex-wrap: wrap; }
.foot .persona select { max-width: 100%; min-width: 0; }
.dev-flag {
  font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--risk); background: var(--risk-soft);
  border: 1px solid var(--risk-line); border-radius: 2px; padding: 0.1rem 0.35rem;
}

/* -- flash --------------------------------------------------------------- */

.flash {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--teal);
  background: var(--teal-soft); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .rail-link, .state { transition: background-color 120ms ease, border-color 120ms ease; }
}

/* Results diagnostics must retain long governed identifiers without forcing
   grid tracks wider than the phone. Scope these rules to the results page. */
.results-page { overflow-wrap: anywhere; }
.results-page .grid > *,
.results-page .detail-row > *,
.results-page .kv > *,
.results-page .finding-head > *,
.results-page .row-top > * { min-width: 0; }
.results-page .detail-row { grid-template-columns: 8.5rem minmax(0, 1fr); }
.results-page .kv { grid-template-columns: auto minmax(0, 1fr); }
.results-page .row-top,
.results-page .card-head,
.results-page .finding-head { flex-wrap: wrap; }
@media (max-width: 480px) {
  body:has(.results-page) .masthead { grid-template-columns: minmax(0, 1fr); }
  body:has(.results-page) .masthead-tail { justify-content: space-between; flex-wrap: wrap; }
  body:has(.results-page) .who { min-width: 0; max-width: 100%; }
  body:has(.results-page) .who-org { min-width: 0; overflow-wrap: anywhere; }
  body:has(.results-page) .avatar { flex-shrink: 0; }
  .results-page .detail-row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .results-page table { table-layout: fixed; }
  .results-page table .nowrap { white-space: normal; }
  .results-page th:first-child { width: 60%; }
  .results-page th:not(:first-child) { width: 20%; }
}

/* ---------------------------------------------------------------------------
 * Gradient page furniture.
 *
 * With the body carrying the website-matched blue fade, any text that sits
 * directly on that fade (page headings, step rows) must switch to light ink
 * in both themes. Components that own an opaque surface -- cards, masthead,
 * footer, notices, empty states, forms -- keep their theme tokens untouched,
 * so contrast inside surfaces is unchanged from the approved build.
 * ------------------------------------------------------------------------ */

.page-head { color: #f4f8ff; }
.page-head .notice { color: var(--ink); }
.page-head .eyebrow { color: rgba(232, 240, 255, 0.82); }
.page-head .lede { color: rgba(240, 245, 255, 0.92); }
.page-head .muted { color: rgba(232, 240, 255, 0.82); }
.page-head .progress-label { color: rgba(232, 240, 255, 0.82); }
.finding-groups > section > h2 { color: #f4f8ff; }
.finding-groups > section > h2 .muted,
.finding-groups > section > p { color: rgba(232, 240, 255, 0.82); }
.page-head a:not(.btn) { color: #cfe6ff; }
.page-head a:not(.btn):hover { color: #9df3ff; }

.steps { color: rgba(240, 245, 255, 0.82); }
.steps .step { color: rgba(240, 245, 255, 0.82); }
.steps .step.is-current { color: #cfe6ff; }
.steps .step.is-done { color: #9df3ff; }
.steps .step::after { color: rgba(240, 245, 255, 0.62); }

/* Contrast floor, measured against the LIGHTEST gradient stop (#385b9b), the
   worst case for light ink:
     #f4f8ff page-head ............ 6.28:1
     #cfe6ff / #9df3ff links ...... 5.23:1 / 5.32:1
     rgba(...,0.92) lede .......... 5.48:1
     rgba(...,0.82) eyebrow/muted/steps/step ... 4.52-4.72:1  (>= 4.5:1)
   The step separator (::after, 0.62) is decorative punctuation, not text, and
   sits at 3.42:1 -- above the 3:1 non-text floor. In practice .page-head and
   .steps render near the dark top of the fade, where every ratio is higher. */

/* Keep the same content readable on narrow screens, including expanded
   diagnostics and long workspace names. Tables retain their own scroll area. */
.page, .foot { overflow-wrap: anywhere; }
.grid > *, .detail-row > *, .kv > *, .finding-head > *,
.card-head > *, .page-head > *, .masthead > * { min-width: 0; }
.detail-row { grid-template-columns: 8.5rem minmax(0, 1fr); }
.kv { grid-template-columns: auto minmax(0, 1fr); }
.card-head, .finding-head, .row-top { flex-wrap: wrap; }
.readiness-bands { min-width: min(260px, 100%); }
.rail-link, .avatar { flex-shrink: 0; }
.table-scroll { max-width: 100%; }
.table-scroll:focus-visible, a:focus-visible, button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.page-head a:focus-visible, .page-head button:focus-visible,
.steps a:focus-visible { outline-color: #9df3ff; }
@media (max-width: 480px) {
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .masthead-tail { justify-content: space-between; flex-wrap: wrap; }
  .who { min-width: 0; max-width: 100%; }
  .who-org { min-width: 0; overflow-wrap: anywhere; }
  .detail-row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
/* Long workspace identifiers must not overlap desktop navigation. */
.masthead-tail { min-width: 0; }
.who { min-width: 0; }
.who-org { min-width: 0; max-width: 20rem; overflow-wrap: anywhere; }

/* Approved compact dimensional RPM instrument. Display-only and static. */
.rpm-instrument { position:relative; width:100%; max-width:18rem; margin:0 auto; }
.rpm-dial { display:block; width:100%; height:auto; overflow:visible; }
.rpm-score { position:absolute; top:76.5%; left:0; width:100%; text-align:center; margin:0; color:#c8fcff; font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.5px; text-shadow:0 0 13px #7cdfee35; font-variant-numeric:tabular-nums; }
.rpm-score span { font-size:.34em; font-weight:550; letter-spacing:.1px; color:#b3cbd5; margin-left:5px; }
.rpm-score.is-unavailable { font-size:14px; letter-spacing:0; top:80%; }
.rpm-ticks { stroke:#d9eaf1; stroke-width:2; }
.rpm-major-ticks { stroke:#f2fbff; stroke-width:3; }
.rpm-scale-labels { fill:#e4f2fa; font-size:17px; font-weight:700; text-anchor:middle; }
.rpm-face-label { fill:#a8c4d2; font-size:10px; letter-spacing:2px; text-anchor:middle; }
.rpm-target-label { fill:#ffb6a7; font-size:10px; text-anchor:middle; font-weight:650; letter-spacing:.6px; }
.evaluation-meter { width:100%; max-width:18rem; margin:0 0 1.25rem; }
.evaluation-meter .rpm-state { color:#f4f8ff; font-size:.8rem; margin:.4rem 0 0; }
.diagnostic .dial-panel { max-width:18rem; }
.diagnostic .diagnostic-overview { grid-template-columns:minmax(0,18rem) minmax(0,1fr); }
@media(max-width:600px) { .diagnostic .diagnostic-overview { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .rpm-instrument, .rpm-instrument * { animation:none!important; transition:none!important; } }

/* Local visual candidate: horizontal blue atmosphere, no geometry or state changes. */
body { background-image:linear-gradient(90deg,#101f58 0%,#214789 58%,#385b9b 100%); }
:root { --gw-panel-fade:linear-gradient(90deg,#e3ebf5 0%,#fffefc 100%); }
[data-theme="executive"] { --gw-panel-fade:linear-gradient(90deg,#132c65 0%,#28558f 100%); }
.masthead, .card, .finding, .empty-compact, .lane, .lane-panel, .leg, .chain-entry,
.compare-run, .compare-pair, .timeline-entry, .item-block, .answers-row .choice,
.empty, .foot, .notice:not(.notice-risk):not(.notice-crit):not(.notice-good) {
 background-image:var(--gw-panel-fade);
}
/* Explicit foreground for the neutral panel's actual surface in each theme. */
[data-theme="executive"] { --ink:#eef2f0; --ink-2:#d4e0ed; --ink-3:#bfcee0; }
/* State notices, input fields, bars and RPM dial colours retain their existing tokens. */

/* GTM category tiles keep their approved pale surface and dark semantic scores. */
.diagnostic-category { color:#161a1e; }
.diagnostic-category .muted { color:#59646d; }
[data-theme="executive"] .card a:not(.btn):not(.state-tab):not(.state):not(.chip),
[data-theme="executive"] .masthead .rail-link { color:#baf5ff; }

/* Saved Evaluation and GTM lists become readable cards on narrow screens.
   Desktop table layout and all record links/actions remain unchanged. */
@media (max-width: 700px) {
  .saved-list, .saved-list tbody { display: block; width: 100%; }
  .saved-list thead { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .saved-list tbody tr { display: block; padding: 1rem 0;
    border-bottom: 1px solid var(--line); }
  .saved-list tbody tr:first-child { padding-top: 0; }
  .saved-list tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .saved-list tbody td { display: block; width: auto; min-width: 0 !important;
    padding: .4rem 0; border: 0; text-align: left; white-space: normal;
    overflow-wrap: break-word; word-break: normal; }
  .saved-list tbody td::before { content: attr(data-label); display: block;
    margin-bottom: .2rem; font-family: var(--sans); font-size: .75rem;
    font-weight: 600; color: var(--ink-3); }
  .saved-list tbody td[data-label="Company and person"]::before { content: none; }
  .saved-list tbody td:first-child strong { font-size: 1rem; }
  .saved-list tbody td:first-child .small { margin-top: .25rem; }
  .saved-list .nowrap { white-space: normal; }
}