/* ============================================================================
 * G Road Test — base.css
 * ----------------------------------------------------------------------------
 * Theme-NEUTRAL structural skeleton. Mobile-first. No brand.
 *
 * Every visual decision that a theme might want to own is expressed through a
 * CSS custom property on :root. base.css both DEFINES neutral light defaults
 * for those properties AND uses them everywhere, so a theme can restyle the
 * whole sheet by overriding the variables (and adding its own signature rules)
 * without ever touching app.js or this file's structure.
 *
 * The class contract here is fixed; themes never change it.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * Design tokens — neutral light defaults. Themes override these.
 * ------------------------------------------------------------------------- */
:root {
  /* Surfaces & ink */
  --gx-bg: #f4f5f7;          /* page background */
  --gx-surface: #ffffff;     /* card background */
  --gx-surface-2: #eef0f3;   /* subtle raised / section head */
  --gx-ink: #1c2024;         /* primary text */
  --gx-muted: #687078;       /* secondary text */
  --gx-line: #d8dce1;        /* borders / dividers */

  /* Accent (brand / active / focus) */
  --gx-accent: #2563eb;
  --gx-accent-ink: #ffffff;  /* text/glyph on accent */

  /* Mark colours (state 1/2/3) */
  --gx-x: #b42318;           /* error ✗ */
  --gx-x-bg: #fdecea;
  --gx-check: #1f7a4d;       /* improvement ✓ */
  --gx-check-bg: #e6f4ec;
  --gx-na: #8a6d1f;          /* not-performed // */
  --gx-na-bg: #fbf3df;

  /* Severity dots */
  --gx-autofail: #b42318;
  --gx-major: #c2710c;
  --gx-minor: #8a9099;

  /* Geometry */
  --gx-radius: 12px;
  --gx-radius-sm: 7px;
  --gx-gap: 12px;

  /* Typography */
  --gx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gx-font-head: var(--gx-font);
  --gx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Elevation */
  --gx-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
}

/* ---------------------------------------------------------------------------
 * Reset-ish base
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gx-bg);
  color: var(--gx-ink);
  font-family: var(--gx-font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#app { display: block; }

h2, h3, h4 {
  font-family: var(--gx-font-head);
  margin: 0;
  line-height: 1.2;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

/* Visible focus for keyboard users across all interactive surfaces. */
:focus-visible {
  outline: 2px solid var(--gx-accent);
  outline-offset: 2px;
}

/* ===========================================================================
 * HEADER  (sticky top bar: brand + tally + actions)
 * ======================================================================== */
.gx-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gx-gap);
  padding: 10px 12px;
  background: var(--gx-surface);
  border-bottom: 1px solid var(--gx-line);
  box-shadow: var(--gx-shadow);
}

.gx-top__brand {
  font-family: var(--gx-font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}
.gx-top__sub {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--gx-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tally pills */
.gx-tally {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gx-surface-2);
  border: 1px solid var(--gx-line);
  font-variant-numeric: tabular-nums;
}
.gx-pill__ico {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.gx-pill__n {
  font-weight: 700;
  min-width: 1ch;
  text-align: center;
}
/* Colour-code each pill by meaning (themes may override). */
.gx-pill--x .gx-pill__ico { color: var(--gx-x); }
.gx-pill--check .gx-pill__ico { color: var(--gx-check); }
.gx-pill--na .gx-pill__ico { color: var(--gx-na); }
.gx-pill--rep .gx-pill__ico { color: var(--gx-accent); }

/* Actions: push to the right edge on wide screens. */
.gx-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.gx-btn {
  padding: 7px 12px;
  border-radius: var(--gx-radius-sm);
  border: 1px solid var(--gx-line);
  background: var(--gx-surface);
  color: var(--gx-ink);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.gx-btn:hover { background: var(--gx-surface-2); }
.gx-btn.is-flashed {
  background: var(--gx-accent);
  color: var(--gx-accent-ink);
  border-color: var(--gx-accent);
}
.gx-btn--danger { color: var(--gx-x); border-color: var(--gx-x); }
.gx-btn--danger:hover { background: var(--gx-x-bg); }
.gx-btn--danger.is-armed {
  background: var(--gx-x);
  color: #fff;
  border-color: var(--gx-x);
}

/* ===========================================================================
 * MAIN layout
 * ======================================================================== */
.gx-main {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--gx-gap);
  display: flex;
  flex-direction: column;
  gap: var(--gx-gap);
}

/* ---------------------------------------------------------------------------
 * Briefing (collapsible)
 * ------------------------------------------------------------------------- */
.gx-briefing {
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  overflow: hidden;
}
.gx-briefing__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  background: var(--gx-surface-2);
  border: 0;
  text-align: left;
  font-weight: 600;
}
.gx-briefing__toggle::after {
  content: "▸";
  color: var(--gx-muted);
  transition: transform 0.15s ease;
}
.gx-briefing[data-open="true"] .gx-briefing__toggle::after { transform: rotate(90deg); }

/* Collapse mechanism: hidden by default, revealed when [data-open=true]. */
.gx-briefing__body { display: none; padding: 14px; }
.gx-briefing[data-open="true"] .gx-briefing__body { display: block; }

.gx-brief-intro,
.gx-brief-scope { margin: 0 0 12px; }
.gx-brief-scope { color: var(--gx-muted); }

.gx-brief-block { margin: 0 0 16px; }
.gx-brief-block__title {
  font-size: 0.95rem;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gx-line);
}
.gx-brief-block ul { margin: 0; padding-left: 1.2em; }
.gx-brief-block li { margin: 2px 0; }

/* Standards key/value rows */
.gx-std {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--gx-line);
}
.gx-std:last-child { border-bottom: 0; }
.gx-std__k { font-weight: 600; }
.gx-std__v { color: var(--gx-muted); }

/* Pretest collapsible list */
.gx-pretest__toggle {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: var(--gx-surface-2);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
}
.gx-pretest__list { display: none; margin-top: 8px; }
.gx-pretest[data-open="true"] .gx-pretest__list { display: block; }
.gx-pretest__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.9rem;
}
.gx-pretest__item input { margin-top: 3px; flex: none; }

.gx-brief-disclaimer {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--gx-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Legend
 * ------------------------------------------------------------------------- */
.gx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 12px;
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  font-size: 0.82rem;
}
.gx-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.gx-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--gx-radius-sm);
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid var(--gx-line);
  background: var(--gx-surface-2);
}
.gx-glyph--ok { background: var(--gx-surface); }
.gx-glyph--x { color: var(--gx-x); background: var(--gx-x-bg); border-color: var(--gx-x); }
.gx-glyph--check { color: var(--gx-check); background: var(--gx-check-bg); border-color: var(--gx-check); }
.gx-glyph--na { color: var(--gx-na); background: var(--gx-na-bg); border-color: var(--gx-na); }
.gx-glyph--r { color: var(--gx-accent); border-color: var(--gx-accent); }

/* Severity swatches for the legend — bare dots (NOT the boxed .gx-glyph), so the
 * legend key matches the in-row .gx-crit__sev dot exactly. Colour comes from each
 * theme's own --gx-minor/major/autofail tokens, so every theme's legend self-syncs. */
.gx-glyph--sev {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.gx-glyph--sev::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--gx-minor);
  box-shadow: 0 0 0 2px var(--gx-surface);
}
.gx-glyph--sev-major::before { background: var(--gx-major); }
.gx-glyph--sev-auto-fail::before {
  background: var(--gx-autofail);
  box-shadow: 0 0 0 1px var(--gx-surface), 0 0 0 2px var(--gx-autofail);
}

/* ---------------------------------------------------------------------------
 * Meta fields
 * ------------------------------------------------------------------------- */
.gx-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
}
.gx-field { display: flex; flex-direction: column; gap: 4px; }
.gx-field__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gx-muted);
}
.gx-field__input {
  padding: 8px 10px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  background: var(--gx-bg);
}
.gx-field__input:focus { background: var(--gx-surface); }

/* ===========================================================================
 * SECTIONS (the criteria cards)
 * ======================================================================== */
.gx-sections { display: flex; flex-direction: column; gap: var(--gx-gap); }

.gx-section {
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  overflow: hidden;
}

.gx-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gx-surface-2);
  border-bottom: 1px solid var(--gx-line);
}
.gx-section__name { font-size: 1rem; flex: 1 1 auto; }
.gx-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gx-muted);
}
/* Section with at least one mark gets a hot badge. */
.gx-section.is-hot .gx-section__count {
  background: var(--gx-x);
  color: #fff;
  border-color: var(--gx-x);
}
.gx-section__clear {
  padding: 4px 9px;
  border-radius: var(--gx-radius-sm);
  border: 1px solid var(--gx-line);
  background: var(--gx-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gx-muted);
}
.gx-section__clear:hover { color: var(--gx-x); border-color: var(--gx-x); }

.gx-section__hint {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--gx-muted);
  border-bottom: 1px solid var(--gx-line);
}

/* Group */
.gx-group { padding: 4px 0; }
.gx-group__name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gx-muted);
  padding: 8px 12px 4px;
}

/* ---------------------------------------------------------------------------
 * Criterion row — flex: [num] [text grows] [cells]
 * ------------------------------------------------------------------------- */
.gx-crit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gx-line);
}
.gx-crit:last-child { border-bottom: 0; }

.gx-crit__num {
  flex: none;
  width: 1.6em;
  text-align: right;
  color: var(--gx-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.gx-crit__text {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

/* Severity dot — colour encodes severity, title carries the word. */
.gx-crit__sev {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  background: var(--gx-minor);
}
.gx-crit[data-sev="major"] .gx-crit__sev { background: var(--gx-major); }
.gx-crit[data-sev="auto-fail"] .gx-crit__sev { background: var(--gx-autofail); }

.gx-crit__label { font-weight: 700; }
.gx-crit__detail { color: var(--gx-muted); font-size: 0.9rem; }

/* Leading option letters A–F inside the detail. */
.gx-opt {
  display: inline-block;
  min-width: 1.3em;
  text-align: center;
  font-weight: 700;
  color: var(--gx-ink);
  font-size: 0.78rem;
  font-family: var(--gx-font-mono);
}

.gx-crit__help {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gx-line);
  background: var(--gx-surface);
  color: var(--gx-muted);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gx-crit__help:hover { color: var(--gx-accent); border-color: var(--gx-accent); }

/* Repeated criterion highlight (>=2 marked cells). */
.gx-crit.is-repeated {
  background: var(--gx-na-bg);
}
/* Repeated-habit badge — a clear labeled pill on the row (a status, not a
 * control). Hidden until recompute() flags the criterion .is-repeated. */
.gx-crit__repeat {
  display: none;
  align-items: center;
  align-self: center;
  gap: 4px;
  margin-left: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gx-accent);
  background: var(--gx-surface);
  border: 1px solid var(--gx-accent);
}
.gx-crit.is-repeated .gx-crit__repeat { display: inline-flex; }

/* ---------------------------------------------------------------------------
 * Cells
 * ------------------------------------------------------------------------- */
.gx-cells {
  flex: none;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.gx-cell {
  min-width: 36px;
  min-height: 36px;
  padding: 3px 4px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  background: var(--gx-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.gx-cell:hover { border-color: var(--gx-accent); }
.gx-cell__cap {
  font-size: 0.6rem;
  color: var(--gx-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gx-cell__mark {
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 1em;
}
/* Visual gap before a separator column (e.g. left vs right turns). */
.gx-cell--sep { margin-left: 12px; }

/* Mark states — colour PLUS the glyph (set by JS) keep them distinguishable
 * beyond colour alone, satisfying the a11y bar. */
.gx-cell--s1 { background: var(--gx-x-bg); border-color: var(--gx-x); }
.gx-cell--s1 .gx-cell__mark { color: var(--gx-x); }
.gx-cell--s2 { background: var(--gx-check-bg); border-color: var(--gx-check); }
.gx-cell--s2 .gx-cell__mark { color: var(--gx-check); }
.gx-cell--s3 { background: var(--gx-na-bg); border-color: var(--gx-na); }
.gx-cell--s3 .gx-cell__mark { color: var(--gx-na); }

/* ---------------------------------------------------------------------------
 * Completed row
 * ------------------------------------------------------------------------- */
.gx-completed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--gx-line);
  background: var(--gx-surface-2);
}
.gx-completed__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gx-muted);
  margin-right: 4px;
}
.gx-comp {
  min-width: 36px;
  min-height: 32px;
  padding: 2px 6px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  background: var(--gx-surface);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.gx-comp__cap { font-size: 0.6rem; color: var(--gx-muted); font-weight: 600; }
.gx-comp__tick { font-size: 0.9rem; font-weight: 700; min-height: 1em; color: var(--gx-check); }
.gx-comp.is-on { background: var(--gx-check-bg); border-color: var(--gx-check); }

/* ---------------------------------------------------------------------------
 * Notes
 * ------------------------------------------------------------------------- */
.gx-notes { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.gx-notes__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gx-muted);
}
.gx-notes__area {
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  background: var(--gx-bg);
  resize: vertical;
  font-family: inherit;
}
.gx-notes__area:focus { background: var(--gx-surface); }
/* Live char-counter under each notes box: longer notes -> longer share link. */
.gx-notes__count {
  align-self: flex-end;
  margin-top: 2px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--gx-muted);
}
.gx-notes__count.is-near { color: var(--gx-na); }
.gx-notes__count.is-full { color: var(--gx-x); font-weight: 700; }

/* ===========================================================================
 * DECISION (result)
 * ======================================================================== */
.gx-decision {
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gx-decision > h2 { font-size: 1.05rem; }

.gx-verdict { display: flex; flex-wrap: wrap; gap: 10px; }
.gx-vopt {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  background: var(--gx-bg);
  font-weight: 600;
}
.gx-vopt--meets.is-selected {
  border-color: var(--gx-check);
  background: var(--gx-check-bg);
  color: var(--gx-check);
}
.gx-vopt--fail.is-selected {
  border-color: var(--gx-x);
  background: var(--gx-x-bg);
  color: var(--gx-x);
}

.gx-disq { display: flex; flex-direction: column; gap: 6px; }
.gx-disq__head {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gx-muted);
}
.gx-disq__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.gx-comments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* ===========================================================================
 * SUMMARY (debrief)
 * ======================================================================== */
.gx-summary {
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: 14px;
}
.gx-summary > h2 { font-size: 1.05rem; margin-bottom: 10px; }

.gx-sum__empty { color: var(--gx-muted); margin: 0; }
.gx-sum__section { margin-bottom: 14px; }
.gx-sum__sectitle {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gx-muted);
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gx-line);
}
.gx-sum__line { padding: 3px 0; font-size: 0.9rem; }
.gx-sum__label { font-weight: 600; }
.gx-sum__detail { color: var(--gx-muted); }
.gx-sum__marks { font-family: var(--gx-font-mono); font-weight: 700; }
.gx-sum__attention { margin-top: 10px; }
.gx-sum__attention ul { margin: 0; padding-left: 1.2em; }

/* ===========================================================================
 * FOOTER
 * ======================================================================== */
.gx-foot {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 12px 32px;
  font-size: 0.76rem;
  color: var(--gx-muted);
  text-align: center;
}

/* ===========================================================================
 * HELP MODAL — centered with backdrop
 * ======================================================================== */
.gx-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.gx-modal[hidden] { display: none; }

.gx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
}
.gx-modal__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--gx-surface);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.30);
  -webkit-overflow-scrolling: touch;
}
.gx-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--gx-line);
  position: sticky;
  top: 0;
  background: var(--gx-surface);
}
.gx-modal__sev {
  flex: none;
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--gx-minor);
}
.gx-modal__sev--major { background: var(--gx-major); }
.gx-modal__sev--auto-fail { background: var(--gx-autofail); }
.gx-modal__title { flex: 1 1 auto; font-size: 0.95rem; line-height: 1.3; }
.gx-modal__close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gx-line);
  background: var(--gx-surface);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--gx-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gx-modal__close:hover { background: var(--gx-surface-2); }

.gx-modal__body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.gx-help h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gx-muted);
  margin-bottom: 3px;
}
.gx-help p { margin: 0; font-size: 0.92rem; }
.gx-help--tip {
  padding: 10px 12px;
  background: var(--gx-surface-2);
  border-radius: var(--gx-radius-sm);
  border-left: 3px solid var(--gx-accent);
}

/* Lock body scroll while the modal is open. */
body.gx-noscroll { overflow: hidden; }

/* ===========================================================================
 * AUTOSAVE INDICATOR — quiet "Saved" pill that pulses on each persist.
 * ======================================================================== */
.gx-saved {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gx-check);
  background: var(--gx-check-bg);
  border: 1px solid var(--gx-check);
  /* Hidden until the first save reveals it; stays unobtrusive thereafter. */
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gx-saved::before {
  content: "✓";
  font-weight: 700;
  line-height: 1;
}
.gx-saved.is-visible { opacity: 0.75; }
.gx-saved.is-pulse { animation: gx-saved-pulse 1.2s ease; }

@keyframes gx-saved-pulse {
  0%   { opacity: 1; transform: scale(1.06); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.75; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gx-saved { transition: none; }
  .gx-saved.is-pulse { animation: none; }
}

/* ===========================================================================
 * STORAGE WARNING — banner shown only when localStorage is unavailable.
 * Uses the error colour so the data-loss risk reads as serious.
 * ======================================================================== */
.gx-storage-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gx-x-bg);
  border-bottom: 1px solid var(--gx-x);
  color: var(--gx-x);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}
.gx-storage-warn__text { flex: 1 1 auto; min-width: 0; }
.gx-storage-warn__dismiss {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gx-x);
  background: transparent;
  color: var(--gx-x);
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gx-storage-warn__dismiss:hover { background: var(--gx-x); color: var(--gx-surface); }

/* ===========================================================================
 * SHARED-SHEET BANNER — shown when the sheet was opened from a share link.
 * Informational (accent-edged), not an error: offers keep-or-discard so the
 * viewer's own saved sheet is never silently replaced.
 * ======================================================================== */
.gx-share-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
  background: var(--gx-surface-2);
  border-bottom: 2px solid var(--gx-accent);
  color: var(--gx-ink);
  font-size: 0.85rem;
  line-height: 1.35;
}
.gx-share-banner__text { flex: 1 1 240px; min-width: 0; }
.gx-share-banner__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Primary (accent-filled) button variant — the keep-this-sheet action. */
.gx-btn--accent {
  background: var(--gx-accent);
  color: var(--gx-accent-ink);
  border-color: var(--gx-accent);
}
.gx-btn--accent:hover { background: var(--gx-accent); filter: brightness(1.06); }

/* ===========================================================================
 * SHARED-LINK ERROR — a #s= link arrived but couldn't be decoded (truncated /
 * corrupt). Uses the error colour: a broken link is a real, surfaced failure.
 * ======================================================================== */
.gx-share-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gx-x-bg);
  border-bottom: 1px solid var(--gx-x);
  color: var(--gx-x);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}
.gx-share-error__text { flex: 1 1 auto; min-width: 0; }
.gx-share-error__dismiss {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gx-x);
  background: transparent;
  color: var(--gx-x);
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gx-share-error__dismiss:hover { background: var(--gx-x); color: var(--gx-surface); }

/* ===========================================================================
 * RESPONSIVE — below 520px the criterion text takes the full row and the
 * cells wrap underneath it.
 * ======================================================================== */
@media (max-width: 520px) {
  .gx-crit { align-items: stretch; }
  .gx-crit__num { order: 1; width: auto; }
  .gx-crit__text { order: 2; flex: 1 1 calc(100% - 2em); }
  .gx-cells {
    order: 3;
    flex: 1 1 100%;
    margin-top: 4px;
    margin-left: 2em; /* align under the text, clear of the number gutter */
  }
  .gx-cell { flex: 1 1 auto; }
  .gx-actions { width: 100%; margin-left: 0; }
  .gx-actions .gx-btn { flex: 1 1 auto; text-align: center; }
  /* Shared-sheet banner buttons go full-width too, matching the header. */
  .gx-share-banner__actions { width: 100%; }
  .gx-share-banner__actions .gx-btn { flex: 1 1 auto; text-align: center; }
}

/* Slightly roomier tap targets on coarse pointers. */
@media (pointer: coarse) {
  .gx-cell { min-width: 40px; min-height: 40px; }
}

/* ===========================================================================
 * PRINT — hide chrome, expand everything, keep the marks.
 * ======================================================================== */
@media print {
  :root {
    --gx-bg: #fff;
    --gx-surface: #fff;
    --gx-surface-2: #fff;
    --gx-shadow: none;
  }
  body { font-size: 11px; }

  /* Force mark colours to print. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide interactive chrome. */
  .gx-top,
  .gx-actions,
  .gx-section__clear,
  .gx-crit__help,
  .gx-pretest__toggle,
  .gx-storage-warn,
  .gx-share-banner,
  .gx-share-error,
  .gx-modal {
    display: none !important;
  }

  .gx-main { max-width: none; padding: 0; gap: 8px; }

  /* Expand all collapsibles so nothing is hidden on paper. */
  .gx-briefing__body,
  .gx-briefing[data-open] .gx-briefing__body,
  .gx-pretest__list,
  .gx-pretest[data-open] .gx-pretest__list {
    display: block !important;
  }

  /* Avoid awkward splits. */
  .gx-section,
  .gx-decision,
  .gx-summary { break-inside: avoid; box-shadow: none; }
  .gx-crit { break-inside: avoid; }
}