/* ============================================================================
   MIRA CONTENT ENGINE — interface

   Built on the Mira Staffing design kit:
     Layouts and brand instructions/Mira Staffing Branding/
       tokens/tokens.css      — the token block below is pasted verbatim
       BRAND.md               — colour, type, voice
       IMPLEMENTATION.md      — component recipes
       patterns/left-nav.md   — the 256px rail
       patterns/docs-tab.md   — the How to use tab

   The rule that governs everything here: #C3A544 is a FILL colour at 2.4:1 on
   white. Any brass carrying words is #7A621B. Text on a brass button is navy.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens ---
   Pasted from tokens/tokens.css. Do not write a hex anywhere below this block.
   --------------------------------------------------------------------------- */

:root {
  /* ---- brand ---- */
  --brand-primary: #c3a544;        /* brass — fills, dots, borders, buttons */
  --brand-primary-hover: #a38729;
  --brand-ink: #7a621b;            /* text-safe brass — links, active labels */
  --brand-accent: #f6efd9;         /* the brass tint */
  --brand-navy: #1f2e48;           /* ink, and the text colour ON brass fills */

  /* ---- neutrals ---- */
  --text-heading: #1f2e48;
  --text-body: #4a5468;
  --text-muted: #77808f;
  --surface: #ffffff;              /* cards, panels, rail */
  --surface-alt: #fbf9f3;          /* the page — cream. Never a card colour. */
  --surface-raised: #f6f2e8;       /* hovers, table header rows */
  --surface-sunken: #f8f5ec;       /* inputs, code wells */
  --border-subtle: #e4dfd1;
  --border-strong: #d5cdb8;

  /* ---- status: foreground paired with its own tint ---- */
  --status-success: #1a7f4b;
  --status-success-bg: #e8f5ee;
  --status-caution: #b7791f;
  --status-caution-bg: #fdf4e3;
  --status-danger: #b3261e;
  --status-danger-bg: #f7e9e8;
  --status-neutral: #77808f;
  --status-neutral-bg: #f2f0ea;

  /* ---- chart series, in order. No blue, by design. ---- */
  --chart-1: #c3a544;
  --chart-2: #1f2e48;
  --chart-3: #77808f;
  --chart-4: #1a7f4b;
  --chart-5: #b3261e;

  /* ---- shape ---- */
  --radius: 10px;
  --radius-sm: 8px;
  --border-width: 1px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);   /* the one shadow */

  /* ---- type ---- */
  --font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;        /* weights 500 / 600 / 700 — no 400 */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;        /* weights 400 / 500 / 600 — no 700 */
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --eyebrow-tracking: 0.16em;

  /* ---- layout constants ---- */
  --nav-rail-width: 256px;
  --nav-brand-height: 72px;
  --nav-item-height: 44px;
  --nav-icon-size: 18px;
  --section-rail-width: 248px;
  --measure: 75ch;

  --page-max: 1440px;
  --page-pad: 32px;
}

/* ------------------------------------------------------------------ base --- */

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

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

body {
  margin: 0;
  font: 14px/1.5 var(--font-body);
  color: var(--text-body);
  background: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  letter-spacing: 0;            /* the tracking budget is spent on eyebrows */
  margin: 0;
}
h1 { font-size: 24px; line-height: 31px; font-weight: 600; }
h2 { font-size: 20px; line-height: 26px; font-weight: 600; }
h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
h4 { font-size: 20px; line-height: 28px; font-weight: 600; }

p { margin: 0; }

a { color: var(--brand-ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The eyebrow — uppercase, tracked, brass-ink. Never black. */
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--brand-ink);
}

.muted  { color: var(--text-muted); }
.faint  { color: var(--text-muted); opacity: .8; }
.bright { color: var(--text-heading); font-weight: 600; }

/* app.js emits .serif for editorial accents. The brand has no serif —
   it renders as a Poppins display line instead. */
.serif {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0;
}

.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ layout: app shell --- */

.app { display: block; }

/* --- the rail (patterns/left-nav.md) --- */

.nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--nav-rail-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: var(--border-width) solid var(--border-subtle);
}

/* zone 1 — brand row, 72px border-box, does not shrink */
.nav__brand {
  flex: none;
  height: var(--nav-brand-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-decoration: none;
}
.nav__brand img { height: 26px; width: auto; display: block; }
.nav__brand span {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.2;
}

/* zone 2 — nav list, fills and scrolls */
.nav__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.nav__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--nav-item-height);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text-body);
  /* colour only — a nav item that moves under the cursor feels broken */
  transition: color .12s ease, background-color .12s ease;
}
.nav__list a svg {
  flex: none;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
}
/* Hover and active share a background. Only the text colour separates them,
   so hovering the item you are already on produces no visual change. */
.nav__list a:hover { background: var(--brand-accent); color: var(--text-heading); }
.nav__list a[aria-current="page"] { background: var(--brand-accent); color: var(--brand-ink); }

.nav__count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--brand-ink);
  color: var(--surface);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* zone 3 — account footer */
.acct {
  flex: none;
  border-top: var(--border-width) solid var(--border-subtle);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acct > div { min-width: 0; padding-left: 4px; }
.acct__n {
  display: block;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct__p {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct__out {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}
.acct__out:hover { background: var(--brand-accent); color: var(--text-heading); }
.acct__out svg { width: 16px; height: 16px; }

/* --- main column --- */

.page {
  margin-left: var(--nav-rail-width);
  min-height: 100vh;
}

.page__in {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--page-pad) 56px;
}

/* page header bar — 72px so its divider lines up with the rail's */
.page__head {
  height: var(--nav-brand-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--page-pad);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface);
}
.page__head .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.view { display: none; }
.view.on { display: block; }

.view__head { margin-bottom: 20px; }
.view__head h1 { margin: 4px 0 6px; }
.view__head p { max-width: var(--measure); color: var(--text-body); }

/* ----------------------------------------------------------------- cards --- */

.card {
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.card__head h3 { margin: 0; }
.card__head .right { margin-left: auto; }

.grid { display: grid; gap: 16px; }
/* min-width:0 is load-bearing: without it the 300-cell matrix forces its grid
   column wider than the viewport and the whole page scrolls sideways. */
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: 1.6fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.stack { min-width: 0; }
.stack > * + * { margin-top: 16px; }

/* --------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-subtle);
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--surface-raised); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* primary — brass fill, NAVY text. White on #C3A544 is 2.4:1. */
.btn--go {
  height: 36px;
  padding: 0 18px;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-navy);
}
.btn--go:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }

.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }

.btn--danger { background: var(--status-danger); border-color: var(--status-danger); color: #fff; }
.btn--danger:hover { background: #96201a; border-color: #96201a; }

/* ---------------------------------------------------------------- inputs --- */

.field { margin-bottom: 14px; }
.field > label,
.lbl {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-heading);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(195, 165, 68, .20);
}

/* The UA default track is near-black, which is far too heavy on cream. */
input[type="range"] {
  width: 100%;
  height: 18px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  background: var(--surface);
}
.check:hover { background: var(--surface-raised); }
.check input { accent-color: var(--brand-primary); margin: 0; }

/* label · slider · value. The label is a taxonomy pill and must be allowed to
   truncate rather than push the value out of the row. */
.weight {
  display: grid;
  grid-template-columns: minmax(0, 148px) 1fr 26px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.weight .pill {
  min-width: 0;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  line-height: 18px;
}
.weight b {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  font-weight: 600;
}

/* ------------------------------------------------------- badges and pills --- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-accent);
  border: var(--border-width) solid rgba(195, 165, 68, .30);
  color: var(--brand-ink);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc, var(--brand-primary)); flex: none; }

/* status pills: tint + its own foreground, always with a word, never colour alone */
.st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}
.st--go     { background: var(--status-success-bg); color: var(--status-success); }
.st--hold   { background: var(--status-caution-bg); color: var(--status-caution); }
.st--nogo   { background: var(--status-danger-bg);  color: var(--status-danger); }
.st__n { font-size: 10.5px; }
.st__v { font-variant-numeric: tabular-nums; }

/* .tag is the same status pill under the name app.js emits in seven places. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
}
.tag--go   { background: var(--status-success-bg); color: var(--status-success); }
.tag--hold { background: var(--status-caution-bg); color: var(--status-caution); }
.tag--nogo { background: var(--status-danger-bg);  color: var(--status-danger); }
.tag--idle { background: var(--status-neutral-bg); color: var(--status-neutral); }

/* service rows in the Integrations card */
.svc {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.svc:last-child { border-bottom: none; }
.svc__n { font-size: 13px; font-weight: 600; color: var(--text-heading); min-width: 0; }
/* Wraps rather than truncating: these carry meaning (a fact's label, an
   account name) and an ellipsis loses it. */
.svc__d {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  min-width: 0;
  max-width: 45%;
  flex: none;
}

/* ---------------------------------------------------------------- tables --- */

.tbl-wrap { overflow-x: auto; }

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.tbl th {
  text-align: left;
  background: var(--surface-raised);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--border-width) solid var(--border-subtle);
  white-space: nowrap;
}
table.tbl td {
  padding: 10px 12px;
  border-bottom: var(--border-width) solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-body);
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td:first-child { font-weight: 600; color: var(--text-heading); }
table.tbl .num { text-align: right; }

/* ------------------------------------------------------- status callouts --- */

.banner {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--status-neutral-bg);
  color: var(--text-body);
  font-size: 13px;
}
.banner strong { display: block; color: var(--text-heading); font-weight: 600; margin-bottom: 2px; }
.banner--warn  { background: var(--status-caution-bg); }
.banner--bad   { background: var(--status-danger-bg); }
.banner--good  { background: var(--status-success-bg); }

.empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* integration dots in the page header — colour is never the only signal,
   the service name is always spelled out beside it */
.dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-neutral);
  flex: none;
}
.dot--ok::before   { background: var(--status-success); }
.dot--warn::before { background: var(--status-caution); }
.dot--bad::before  { background: var(--status-danger); }
.dot--ok   { color: var(--text-body); }
.dot--warn { color: var(--status-caution); }
.dot--bad  { color: var(--status-danger); }

.checks { display: flex; flex-wrap: wrap; gap: 8px; }

.hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  margin-top: 6px;
  max-width: var(--measure);
}

.runbar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.runbar__msg { margin-left: auto; font-size: 13px; text-align: right; max-width: 40ch; }

/* ------------------------------------------------------------ stat tiles --- */

.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fig {
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 16px 18px;
}
.fig__n {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.fig__l {
  display: block;
  font-family: var(--font-heading);
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--brand-ink);
  margin-top: 4px;
}
.fig__d { font-size: 12px; line-height: 16px; color: var(--text-muted); margin-top: 4px; }

/* -------------------------------------------------------------- log feed --- */

.log {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 18px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.log > div, .log__row { display: flex; gap: 10px; padding: 1px 0; }
.log__row--error .log__m, .log__row--error { color: var(--status-danger); }
.log__t { color: var(--text-muted); flex: none; }
.log__m { color: var(--text-body); min-width: 0; }
.log__m b { color: var(--text-heading); font-weight: 600; }
.log__m.ok  { color: var(--status-success); }
.log__m.bad { color: var(--status-danger); }

/* ----------------------------------------------------------- codex views --- */

.metaphor, .hook, .rule {
  padding: 14px 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.metaphor:last-child, .hook:last-child, .rule:last-child { border-bottom: none; }

.metaphor__t, .hook__t, .rule__t {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-heading);
}
.metaphor__m, .hook__h { font-size: 13px; color: var(--text-body); margin-top: 3px; max-width: var(--measure); }
/* app.js already emits a bold "Never" lead-in, so no ::before eyebrow here —
   two of them read as a duplicate. */
.metaphor__n {
  font-size: 13px;
  color: var(--status-danger);
  margin-top: 5px;
  max-width: var(--measure);
}
.metaphor__n b {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  margin-right: 4px;
}
.hook__n, .rule__id {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.rule__b { font-size: 13px; color: var(--text-body); margin-top: 4px; max-width: var(--measure); }
.rule__s { margin-left: auto; }

.banned { display: flex; flex-wrap: wrap; gap: 8px; }
.banned span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 10px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--status-danger);
}

.gold-card {
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.gold-card__copy { font-size: 13px; line-height: 1.6; white-space: pre-line; margin: 10px 0 12px; color: var(--text-body); }
.gold-card__why {
  border-top: var(--border-width) solid var(--border-subtle);
  padding-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.gold-card__why b { color: var(--brand-ink); font-weight: 600; }

/* --------------------------------------------------------------- matrix ---- */

.matrix-wrap { overflow-x: auto; padding-bottom: 4px; }
table.matrix { border-collapse: collapse; font-family: var(--font-mono); }
table.matrix th {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 3px;
  text-align: center;
}
table.matrix th.rowhead {
  text-align: left;
  padding-right: 14px;
  white-space: nowrap;
  min-width: 150px;
  color: var(--text-body);
}
table.matrix td { padding: 2px; }
table.matrix td.grp, table.matrix th.grp { padding-left: 8px; }

.cell {
  width: 26px;
  height: 20px;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 3px;
  background: var(--surface-sunken);
  transition: background-color .18s ease, border-color .18s ease;
}
.cell.lit { border-color: var(--pc, var(--brand-primary)); background: var(--pc, var(--brand-primary)); }
.cell.used { background: var(--surface-raised); border-style: dashed; }
/* the cell currently being written */
.cell.pending {
  border-color: var(--brand-primary);
  background: var(--brand-accent);
  animation: cell-pulse 1.1s ease-in-out infinite;
}
@keyframes cell-pulse { 50% { opacity: .45; } }

/* -------------------------------------------------------- review variants -- */

.variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 16px; }

.vcard {
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vcard[hidden] { display: none; }
.vcard__bar { height: 3px; background: var(--pc, var(--brand-primary)); }
.vcard__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.vcard__seq { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.vcard__coord {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
}
.vcard__body { padding: 16px; flex: 1; }
.vcard__copy {
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-line;
  color: var(--text-body);
  max-width: var(--measure);
}
.vcard__why {
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-muted);
}
.stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(104px, 50%), 1fr));
  border-top: var(--border-width) solid var(--border-subtle);
}
.stations > div {
  padding: 9px 12px;
  border-right: var(--border-width) solid var(--border-subtle);
  min-width: 0;
}
.stations > div:last-child { border-right: none; }
.vnote {
  padding: 11px 16px;
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--status-caution-bg);
  font-size: 12.5px;
  color: var(--text-body);
}
.vnote--bad { background: var(--status-danger-bg); }
.vcard__acts {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-raised);
}
.vcard__acts .right { margin-left: auto; }

/* ------------------------------------------------------------ star chart --- */

.chart-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
#chart { width: 100%; height: auto; display: block; }
.star { cursor: pointer; transition: opacity .12s ease; }
.star:hover { opacity: 1 !important; }
.readout__copy {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--text-body);
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
}

/* --------------------------------------------------------------- docs tab -- */

.docs {
  display: grid;
  grid-template-columns: var(--section-rail-width) 1fr;
  gap: 20px;
  align-items: start;
}
.docs__rail {
  position: sticky;
  top: 32px;
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs__rail button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.docs__rail button:hover { background: var(--brand-accent); color: var(--text-heading); }
.docs__rail button[aria-current="true"] { background: var(--brand-accent); color: var(--brand-ink); }

/* min-width:0 is not optional — without it a wide table widens the page */
.docs__panel {
  min-width: 0;
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 24px;
}
.docs__head { border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 16px; margin-bottom: 16px; }
.docs__head h2 { margin-bottom: 6px; }
.docs__head p { max-width: 70ch; color: var(--text-body); }
.docs__blocks { display: flex; flex-direction: column; gap: 16px; }

.docs__blocks h4 { margin-top: 8px; }
.docs__blocks p { font-size: 14px; line-height: 22px; max-width: var(--measure); color: var(--text-body); }
.docs__blocks ul,
.docs__blocks ol { margin: 0; padding-left: 20px; max-width: var(--measure); display: flex; flex-direction: column; gap: 6px; }
.docs__blocks li { font-size: 14px; line-height: 22px; color: var(--text-body); }

.docs__shot {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}
.docs__shot img { width: 100%; height: auto; display: block; }
.docs__shot figcaption {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface);
}

.note {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--status-neutral-bg);
}
.note--gap { background: var(--status-danger-bg); }
.note__i { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--text-muted); }
.note--gap .note__i { color: var(--status-danger); }
.note__t { font-size: 14px; font-weight: 600; color: var(--text-heading); margin-bottom: 2px; }
.note__x { font-size: 14px; line-height: 21px; color: var(--text-body); max-width: var(--measure); }

/* ----------------------------------------------------------- guided tour --
   tour.js. One fixed layer holds the spotlight, the welcome card and the
   step popover. The spotlight is a hole whose box-shadow IS the scrim, so
   the cut-out can glide and resize without a second element. The scrim is
   the brand navy; separation comes from it and the hairline, never from a
   second shadow.
   --------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tour {
  --tour-scrim: rgba(31, 46, 72, .56);
  position: fixed;
  inset: 0;
  z-index: 100;
  /* The page underneath is inert; only the cards themselves take the pointer. */
  pointer-events: none;
  opacity: 0;
  transition: opacity .36s ease;
}
.tour.is-on { opacity: 1; }
.tour.is-leaving { opacity: 0; transition-duration: .44s; }

.tour__spot {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  box-shadow: 0 0 0 2px transparent, 0 0 0 200vmax var(--tour-scrim);
  transition: box-shadow .3s ease;
  will-change: transform;
}
.tour__spot.has-ring {
  box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0 200vmax var(--tour-scrim);
}

/* A screen the tour switches to fades in under the spotlight. */
.view.tour-in { animation: tour-view-in .34s ease both; }
@keyframes tour-view-in { from { opacity: 0; } }

/* --- welcome card --- */

/* tour.js keeps this box on the visible part of the page (see tourVP). */
.tour__veil {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}

.tour__card {
  pointer-events: auto;
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .32s ease .06s, transform .56s cubic-bezier(.2, .8, .2, 1) .06s;
}
.tour__card.is-on { opacity: 1; transform: none; }
.tour__card.is-out {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity .2s ease, transform .26s ease;
}
/* Start tour: the words go first, then the white, leaving only the frame —
   which is exactly where the spotlight is waiting to take over. */
.tour__card-in { padding: 24px; transition: opacity .16s ease; }
.tour__card.is-dissolving {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: background-color .22s ease .1s, border-color .22s ease .1s;
}
.tour__card.is-dissolving .tour__card-in { opacity: 0; }

.tour__logo { display: block; height: 28px; width: auto; margin-bottom: 20px; }
.tour__card h2 { font-size: 22px; line-height: 28px; margin-bottom: 8px; }
.tour__lede { font-size: 14px; line-height: 22px; color: var(--text-body); }

/* The everyday loop, drawn with the menu's own icons so they are recognised
   in the rail afterwards. */
.tour__loop {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0 16px;
  padding: 0;
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.tour__loop li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
}
.tour__loop li + li { border-left: var(--border-width) solid var(--border-subtle); }
/* The divider carries a notch pointing onward: the order is the point. */
.tour__loop li + li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--surface-sunken);
  border-top: var(--border-width) solid var(--border-strong);
  border-right: var(--border-width) solid var(--border-strong);
  transform: rotate(45deg);
}
.tour__loop svg { width: 18px; height: 18px; margin-bottom: 6px; color: var(--brand-ink); }
.tour__loop b {
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text-heading);
}
.tour__loop span { font-size: 12px; line-height: 16px; color: var(--text-muted); }

.tour__guide {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-accent);
}
.tour__guide > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--brand-ink); }
.tour__guide p { font-size: 13px; line-height: 20px; color: var(--text-body); }
.tour__guide a { font-weight: 600; text-underline-offset: 2px; white-space: nowrap; }
.tour__guide a svg { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; }

.tour__card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--border-width) solid var(--border-subtle);
}
.tour__note { flex: 1 1 200px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.tour__acts { display: flex; gap: 8px; margin-left: auto; }
.tour__acts .btn { height: 36px; padding: 0 16px; }

/* --- step popover --- */

.tour__pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 360px;
  pointer-events: auto;
  padding: 14px 16px 14px 18px;
  background: var(--surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  opacity: 0;
  visibility: hidden;
  transform: var(--tour-from, translateY(6px));
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.tour__pop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .24s ease, transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.tour__top { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 2px; }
.tour__x {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0 -6px 0 auto;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.tour__x:hover { background: var(--surface-raised); color: var(--text-heading); }
.tour__x svg { width: 14px; height: 14px; }

.tour__pop h3 { font-size: 16px; line-height: 22px; margin-bottom: 6px; }
.tour__pop p { font-size: 14px; line-height: 22px; color: var(--text-body); }
.tour__pop p b { font-weight: 600; color: var(--text-heading); }

.tour__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: var(--border-width) solid var(--border-subtle);
}
.tour__foot .btn { height: 32px; padding: 0 14px; }
.tour__prog { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.tour__track {
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: var(--border-subtle);
  overflow: hidden;
}
.tour__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  transition: width .45s cubic-bezier(.65, 0, .35, 1);
}
.tour__n {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The notch that points at the spotlight. tour.js sets --ax / --ay so it
   tracks the target's visible middle; a docked or centred card has none. */
.tour__arrow {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 0 solid var(--border-subtle);
  transform: rotate(45deg);
}
.tour__pop:is([data-side="right"], [data-side="left"], [data-side="top"], [data-side="bottom"]) .tour__arrow { display: block; }
.tour__pop[data-side="right"] .tour__arrow  { left: -7px;   top: calc(var(--ay, 50%) - 6px); border-left-width: 1px;  border-bottom-width: 1px; }
.tour__pop[data-side="left"] .tour__arrow   { right: -7px;  top: calc(var(--ay, 50%) - 6px); border-top-width: 1px;   border-right-width: 1px; }
.tour__pop[data-side="bottom"] .tour__arrow { top: -7px;    left: calc(var(--ax, 50%) - 6px); border-top-width: 1px;  border-left-width: 1px; }
.tour__pop[data-side="top"] .tour__arrow    { bottom: -7px; left: calc(var(--ax, 50%) - 6px); border-right-width: 1px; border-bottom-width: 1px; }

@media (max-width: 520px) {
  .tour__card-in { padding: 20px; }
  .tour__loop { grid-template-columns: 1fr; }
  .tour__loop li { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 10px; }
  .tour__loop svg { margin-bottom: 0; }
  .tour__loop li + li { border-left: none; border-top: var(--border-width) solid var(--border-subtle); }
  .tour__loop li + li::before { left: 22px; top: -5px; margin-top: 0; transform: rotate(135deg); }
}

/* Windows high contrast drops box-shadows — and with them the scrim. Keep
   the spotlight visible as an outline instead. */
@media (forced-colors: active) {
  .tour__spot { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  .grid--2, .grid--3, .chart-wrap { grid-template-columns: 1fr; }
  .figs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --page-pad: 16px; }
  .nav {
    position: static;
    width: auto;
    height: auto;
    flex-direction: column;
    border-right: none;
    border-bottom: var(--border-width) solid var(--border-subtle);
  }
  .nav__list { flex-direction: row; overflow-x: auto; padding: 8px; }
  .nav__list a { white-space: nowrap; }
  .acct { display: none; }
  .page { margin-left: 0; }
  .page__head { height: auto; padding: 12px var(--page-pad); flex-wrap: wrap; }
  .figs { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; }
  .docs__rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .docs__rail button { width: auto; }
  .variants { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .nav, .page__head .right { display: none; }
  .page { margin-left: 0; }
}