/* SimpleTrustCenter design system: "The Register"
   Ported from docs/redesign/assets/styles.css (the mockups' system; see
   docs/redesign/CONCEPT.md). Organised as
   1. tokens (light, then the dark set under prefers-color-scheme)
   2. base  3. components  4. layout  5. themes (vendor brand, light and dark)
   6. shells (entry)
   No page-specific rules live here; pages only compose these classes.
   Deliberate differences from the mockups: --graphite and --pending are a
   little darker so text on the board passes 4.5:1, and a dark token set. */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Surfaces: records are white sheets laid on a cool board. */
  --neutral-board: #e4e7e3;
  --neutral-board-deep: #d6dad5;
  --neutral-sheet-tint: #f4f6f3;
  --neutral-rule-strong: #b7bdb6;
  --board: var(--neutral-board);
  --board-deep: var(--neutral-board-deep);
  --sheet: #ffffff;
  --sheet-tint: var(--neutral-sheet-tint);
  --ink: #15191e;
  --ink-2: #3b434c;
  --graphite: #565e68; /* mockup #646d78 was 4.2:1 on the board */
  --mist: #9aa3ad;
  --rule: #d9ddd7;
  --rule-strong: var(--neutral-rule-strong);

  /* Accent: the colour of controls. STC's own accent is ink (monochrome);
     a vendor theme overrides it with the vendor's primary colour. */
  --accent: var(--ink);
  --accent-hover: var(--ink-2);
  --on-accent: var(--sheet);
  --accent-tint: var(--sheet-tint);
  /* Accent used as text or a mark on the board or a sheet (brand name, person mark). */
  --accent-ink: var(--accent);

  /* Claret marks time and the seal; nothing else uses it. */
  --claret: #7a2e3b;
  --claret-ink: #5c1f2b;
  --claret-tint: #f4e8ea;

  /* State: shape first, hue second. */
  --current: #1f6b45;
  --current-tint: #e6f1ea;
  --upcoming: #2a55a8;
  --upcoming-tint: #e7edf8;
  --pending: #8a5800; /* mockup #9a6200 was 4.1:1 on the board */
  --pending-tint: #fbf1dc;
  --overdue: #b42318;
  --overdue-tint: #fbe9e7;

  /* Type */
  --font-ui: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-record: "Literata", "Iowan Old Style", "Charter", Georgia, serif;
  --fs-00: 11px;
  --fs-0: 12px;
  --fs-1: 13px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 18px;
  --fs-5: 22px;
  --fs-6: 28px;
  --fs-7: 36px;
  --lh-ui: 1.45;
  --lh-record: 1.6;
  --measure: 66ch;

  /* Space: 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Shape */
  --r-1: 3px;   /* inputs, stamps */
  --r-2: 6px;   /* buttons, tabs */
  --r-3: 12px;  /* sheets, dialogs */

  /* Elevation: sheets lie flat; only things that float get a shadow. */
  --shadow-sheet: 0 1px 0 rgba(21, 25, 30, 0.06), 0 0 0 1px rgba(21, 25, 30, 0.04);
  --shadow-float: 0 12px 32px rgba(21, 25, 30, 0.18), 0 1px 2px rgba(21, 25, 30, 0.12);

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --pad-sheet: 32px;
  --pad-pane: 24px;
  --spine-w: 236px;
  --margin-w: 224px;
  --focus: 0 0 0 2px var(--sheet), 0 0 0 4px var(--upcoming);
}

/* Dark: follows the system setting everywhere; there is no toggle. The board
   is the darkest surface and sheets sit one step lighter. Text tokens keep
   4.5:1 or better on board, sheet and the state tints. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --neutral-board: #111417;
    --neutral-board-deep: #1b1f24;
    --neutral-sheet-tint: #22272d;
    --neutral-rule-strong: #5c6570;
    --sheet: #1a1e23;
    --ink: #e7e9ec;
    --ink-2: #c4c9cf;
    --graphite: #a0a8b2;
    --mist: #6c7580;
    --rule: #30363d;
    --claret: #e08a99;
    --claret-ink: #f0b6c0;
    --claret-tint: #3b2228;
    --current: #62c28f;
    --current-tint: #17301f;
    --upcoming: #86aaf2;
    --upcoming-tint: #1b2844;
    --pending: #e2a744;
    --pending-tint: #372a10;
    --overdue: #f2867a;
    --overdue-tint: #3c1d1a;
    --shadow-sheet: 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================
   2. BASE
   ============================================================ */
/* Fonts are self-hosted: a vendor's public trust center must not call a
   third-party font CDN from the visitor's browser (home-region residency, R7). */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/literata-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("../fonts/literata-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/publicsans-normal.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--board);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  line-height: var(--lh-ui);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.2; }
h1 { font-family: var(--font-record); font-size: var(--fs-7); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-family: var(--font-record); font-size: var(--fs-5); font-weight: 500; }
h3 { font-size: var(--fs-3); font-weight: 600; }
h4 { font-size: var(--fs-2); font-weight: 600; }
p { margin: 0; }
p + p { margin-top: var(--s-3); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
small, .muted { color: var(--graphite); }
small { font-size: var(--fs-1); }
strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { box-shadow: none; }
::selection { background: var(--upcoming-tint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.record-text { font-family: var(--font-record); font-size: var(--fs-3); line-height: var(--lh-record); max-width: var(--measure); }
.record-text p + p { margin-top: 0.9em; }
.record-text h3 { font-family: var(--font-record); font-weight: 600; font-size: var(--fs-4); margin: 1.4em 0 0.5em; }
.record-text mark { background: var(--pending-tint); color: inherit; padding: 0 2px; }
.num { font-variant-numeric: tabular-nums; }
.t-small { font-size: var(--fs-1); }
.t-micro { font-size: var(--fs-0); }
.t-right { text-align: right; }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.stack--tight { gap: var(--s-2); }
.stack--loose { gap: var(--s-5); }
.gap-5 { margin-top: var(--s-5); }
.gap-6 { margin-top: var(--s-6); }
.gap-7 { margin-top: var(--s-7); }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; background: var(--sheet-tint); padding: 1px 5px; border-radius: var(--r-1); overflow-wrap: anywhere; }

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

/* ============================================================
   3. COMPONENTS
   ============================================================ */

/* ---- Button ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-4);
  border: 1px solid var(--accent); border-radius: var(--r-2);
  background: var(--accent); color: var(--on-accent);
  font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
.btn--secondary:hover { background: var(--accent-tint); border-color: var(--accent); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: var(--sheet-tint); border-color: var(--rule-strong); }
.btn--danger { background: var(--sheet); color: var(--overdue); border-color: var(--rule-strong); }
.btn--danger:hover { background: var(--overdue-tint); border-color: var(--overdue); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); color: var(--ink); cursor: pointer; text-decoration: none; }
.icon-btn:hover { border-color: var(--accent); background: var(--accent-tint); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--small { width: 22px; height: 22px; font-size: var(--fs-0); font-weight: 600; color: var(--graphite); border-color: var(--rule); }
.btn--danger-quiet { color: var(--overdue); }
.btn--danger-quiet:hover { background: var(--overdue-tint); }

/* ---- Stamp: a state mark. Shape carries meaning; colour is secondary.
   solid = in force, outline = waiting, dashed = scheduled, struck = ended. ---- */
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--ink); border-radius: var(--r-1);
  font-size: var(--fs-0); font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  color: var(--ink); background: var(--sheet); white-space: nowrap;
}
.stamp--solid { background: var(--ink); color: var(--sheet); }
.stamp--dashed { border-style: dashed; }
.stamp--struck { color: var(--graphite); border-color: var(--rule-strong); text-decoration: line-through; text-decoration-thickness: 1px; }
.stamp--current { border-color: var(--current); color: var(--current); }
.stamp--current.stamp--solid { background: var(--current); color: var(--sheet); }
.stamp--upcoming { border-color: var(--upcoming); color: var(--upcoming); }
.stamp--pending { border-color: var(--pending); color: var(--pending); }
.stamp--overdue { border-color: var(--overdue); color: var(--overdue); }
.stamp--overdue.stamp--solid { background: var(--overdue); color: var(--sheet); }
.stamp--quiet { border-color: var(--rule-strong); color: var(--graphite); }

/* ---- Rail: a span of time with dated nodes. The hero primitive. ---- */
.axis {
  position: relative; height: 22px; font-size: var(--fs-0); color: var(--graphite);
}
.axis__tick {
  position: absolute; left: var(--at); top: 0; transform: translateX(-50%);
  white-space: nowrap;
}
.axis__tick::after { content: ""; position: absolute; left: 50%; top: 16px; width: 1px; height: 6px; background: var(--rule-strong); }
.axis__tick--now { color: var(--claret); font-weight: 600; }
.axis__tick--now::after { background: var(--claret); width: 1.5px; }
.axis__tick--start { transform: none; }
.axis__tick--start::after { left: 0; }
.axis__tick--deadline { color: var(--claret); font-weight: 600; }
.axis__tick--deadline::after { background: none; width: 7px; height: 7px; top: 15px; margin-left: -3.5px; border: 1.5px solid var(--claret); transform: rotate(45deg); border-radius: 1px; }
.rail {
  position: relative; height: 44px;
}
.rail--tall { height: 64px; }
.rail__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--rule);
}
.rail__span {
  position: absolute; left: var(--from); width: calc(var(--to) - var(--from)); top: 50%; height: 2px; margin-top: -1px;
  background: var(--ink);
}
.rail__span--dashed { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px); }
.rail__span--claret { background: var(--claret); }
.rail__span--claret.rail__span--dashed { background: repeating-linear-gradient(90deg, var(--claret) 0 6px, transparent 6px 11px); }
.rail__span--soft { background: var(--rule-strong); }
.rail__node {
  position: absolute; left: var(--at); top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sheet); border: 2px solid var(--ink);
}
.rail__node--solid { background: var(--ink); }
.rail__node--dashed { border-style: dashed; }
.rail__node--current { border-color: var(--current); background: var(--current); }
.rail__node--upcoming { border-color: var(--upcoming); }
.rail__node--pending { border-color: var(--pending); }
.rail__node--overdue { border-color: var(--overdue); background: var(--overdue); }
.rail__node--ghost { border-color: var(--mist); }
.rail__node--deadline {
  border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg);
  border-color: var(--claret); background: var(--sheet); width: 11px; height: 11px;
}
.rail__node--deadline.rail__node--solid { background: var(--claret); }
.rail__node--draft {
  border-style: dotted; border-color: var(--graphite); background: var(--sheet-tint);
}
.rail__label {
  position: absolute; left: var(--at); top: 50%; transform: translate(-50%, 10px);
  font-size: var(--fs-0); color: var(--ink); white-space: nowrap; line-height: 1.2;
}
.rail__label--above { transform: translate(-50%, calc(-100% - 10px)); background: var(--sheet); padding: 0 4px; z-index: 1; }
.rail__label--left { transform: translate(-100%, 10px); margin-left: -8px; text-align: right; }
.rail__label--right { transform: translate(0, 10px); margin-left: 10px; }
.rail__label--above.rail__label--right { transform: translate(0, calc(-100% - 10px)); }
.rail__label--above.rail__label--left { transform: translate(-100%, calc(-100% - 10px)); }
.rail__label small { display: block; color: var(--graphite); font-size: var(--fs-00); }
.rail__label--muted { color: var(--graphite); }
.rail__now {
  position: absolute; left: var(--now); top: -6px; bottom: -6px; width: 0;
  border-left: 1.5px solid var(--claret); pointer-events: none;
}
.rail__now::before {
  content: attr(data-label); position: absolute; left: -50%; top: -18px; transform: translateX(-50%);
  font-size: var(--fs-00); font-weight: 600; color: var(--claret); white-space: nowrap;
}
.rail--through .rail__now { top: 0; bottom: 0; }
.rail--through .rail__now::before { display: none; }
.rail__tick { position: absolute; left: var(--at); top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--rule); pointer-events: none; }
.rail__legend { display: none; list-style: none; margin: var(--s-2) 0 0; font-size: var(--fs-1); gap: 6px; }
.rail__legend li { display: grid; grid-template-columns: 14px 1fr; gap: var(--s-2); align-items: baseline; }
.rail__legend li small { color: var(--graphite); }
.rail__legend .rail__node { position: static; transform: none; width: 10px; height: 10px; justify-self: center; align-self: center; }
.rail__legend .rail__node--deadline { transform: rotate(45deg); width: 9px; height: 9px; }
.rail__break { position: absolute; left: var(--at); top: 50%; width: 14px; height: 18px; transform: translate(-50%, -50%); background: var(--sheet); }
.rail__break::before, .rail__break::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--rule-strong); transform: skewX(-25deg); }
.rail__break::before { left: 3px; } .rail__break::after { left: 9px; }
.rail__note { font-size: var(--fs-0); color: var(--graphite); }
.rail__window { position: absolute; left: var(--from); width: calc(var(--to) - var(--from)); top: 8px; bottom: 8px; background: var(--claret-tint); border-radius: var(--r-1); }

/* ---- Register: rows that share one time axis ---- */
.register { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto; align-items: center; }
.register > * { min-width: 0; }
.register__head { display: contents; }
.register__head > * { padding: var(--s-2) var(--s-3); font-size: var(--fs-0); color: var(--graphite); border-bottom: 1px solid var(--rule-strong); align-self: end; }
.register__row { display: contents; }
.register__row > * { padding: var(--s-3); border-bottom: 1px solid var(--rule); min-height: 84px; display: flex; flex-direction: column; justify-content: center; }
.register__row > .register__rail { padding: var(--s-3) var(--s-3); overflow: visible; }
.register__row > .register__end { align-items: flex-end; gap: var(--s-1); }
.register__row:hover > * { background: var(--sheet-tint); }
.register__row--selected > * { background: var(--sheet-tint); }
.register__row--link > * { cursor: pointer; }
.register__title { font-family: var(--font-record); font-size: var(--fs-3); font-weight: 500; line-height: 1.3; }
.register__title a { text-decoration: none; }
.register__title a:hover { text-decoration: underline; }
.register__sub { font-size: var(--fs-1); color: var(--graphite); margin-top: 2px; }
.register__dates { display: none; font-size: var(--fs-1); margin-top: var(--s-1); }
.register__since { font-size: var(--fs-1); color: var(--ink-2); margin-top: 2px; }
.rail__empty { position: absolute; left: 0; top: 50%; transform: translateY(-130%); font-size: var(--fs-0); color: var(--mist); padding-left: var(--s-3); }
.register__rail .rail { height: 60px; }
.register__rail .rail__now { top: calc(-1 * var(--s-3)); bottom: calc(-1 * var(--s-3) - 1px); }
.register__rail .rail__now::before { display: none; }
.register__axis { grid-column: 2; padding: 0 var(--s-3); position: relative; }
.register__axis .rail__now { top: 0; bottom: 0; }
.register__footer { grid-column: 1 / -1; padding: var(--s-3); font-size: var(--fs-1); color: var(--graphite); }

/* ---- Facts: label/value pairs for marginalia ---- */
.facts { display: grid; grid-template-columns: auto; gap: var(--s-3) 0; margin: 0; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: var(--fs-0); color: var(--graphite); }
.facts dd { margin: 0; font-size: var(--fs-2); overflow-wrap: anywhere; }
.facts--inline { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); gap: var(--s-3) var(--s-6); }
.facts--table div { grid-template-columns: 120px 1fr; align-items: baseline; gap: var(--s-3); }
.facts--table dt { font-size: var(--fs-1); }

/* ---- Ledger: dated entries, time in the margin ---- */
.ledger { list-style: none; border-top: 1px solid var(--rule); }
.ledger__entry {
  display: grid; grid-template-columns: 148px 18px 1fr; gap: 0 var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.ledger__when { font-size: var(--fs-1); color: var(--graphite); padding-top: 2px; }
.ledger__when b { display: block; color: var(--ink); font-weight: 500; }
.ledger__mark { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sheet); justify-self: center; }
.ledger__mark--solid { background: var(--ink); }
.ledger__mark--claret { border-color: var(--claret); background: var(--claret); border-radius: 1px; transform: rotate(45deg); width: 9px; height: 9px; }
.ledger__mark--muted { border-color: var(--mist); }
.ledger__mark--current { border-color: var(--current); background: var(--current); }
.ledger__what b { font-weight: 500; }
.ledger__what small { display: block; margin-top: 2px; }
.ledger__entry--future .ledger__when, .ledger__entry--future .ledger__what { color: var(--graphite); }
.ledger__entry--future .ledger__what b { font-weight: 400; }

/* ---- Fields ---- */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-1); font-weight: 500; }
.field__label .req { color: var(--graphite); font-weight: 600; margin-left: 2px; }
.field__help { font-size: var(--fs-0); color: var(--graphite); }
.field__error { font-size: var(--fs-0); color: var(--overdue); }
.field__changed { font-size: var(--fs-0); color: var(--pending); display: none; }
.field--changed .field__changed { display: block; }
.field--changed .input { border-color: var(--pending); }
.field--error .input { border-color: var(--overdue); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px;
  border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--sheet);
  transition: border-color var(--t-fast);
}
.input:hover { border-color: var(--graphite); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.input[readonly] { background: var(--sheet-tint); color: var(--ink-2); }
textarea.input { min-height: 88px; resize: vertical; line-height: 1.45; }
select.input { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.input-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.input-row--postal { grid-template-columns: 1fr 2fr; }
.check { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); align-items: start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.check--consent { padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); }
.check--consent:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.check b { font-weight: 500; }
.choice { display: grid; gap: var(--s-2); }
.choice label { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); cursor: pointer; }
.choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.choice input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.choice b { font-weight: 500; display: block; }
.choice small { display: block; margin-top: 2px; }
/* Switch: checkbox with role=switch */
.switch { display: inline-grid; grid-template-columns: 38px 1fr; gap: var(--s-3); align-items: center; cursor: pointer; }
.switch input { appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 11px; background: var(--rule-strong); position: relative; cursor: pointer; transition: background var(--t-fast); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); transition: transform var(--t-base) var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { box-shadow: var(--focus); border-radius: 11px; }
.switch b { font-weight: 500; }
.switch small { display: block; }
.reveal { display: none; }
.reveal--open { display: block; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.fieldset__legend { font-size: var(--fs-1); font-weight: 600; padding: 0; margin-bottom: var(--s-3); }

/* ---- Notice ---- */
.notice {
  display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s-3); align-items: start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  border: 1px solid var(--rule-strong); background: var(--sheet-tint);
  font-size: var(--fs-1);
}
.notice svg { width: 18px; height: 18px; margin-top: 1px; }
.notice b { font-weight: 600; }
.notice--warn { border-color: var(--pending); background: var(--pending-tint); }
.notice--danger { border-color: var(--overdue); background: var(--overdue-tint); }
.notice--info { border-color: var(--upcoming); background: var(--upcoming-tint); }
.notice--current { border-color: var(--current); background: var(--current-tint); }
.notice__actions { align-self: center; display: flex; gap: var(--s-2); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--rule); }
.tabs button, .tabs a {
  padding: var(--s-2) var(--s-3); border: 0; background: none; color: var(--graphite);
  font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.tabs .is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:hover, .tabs a:hover { color: var(--ink); }

/* ---- Table (for data that is not time: people, keys, emails) ---- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.table th { text-align: left; font-weight: 500; font-size: var(--fs-0); color: var(--graphite); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule-strong); }
.table td { padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tr:hover td { background: var(--sheet-tint); }
.table td.num, .table th.num { text-align: right; }

/* ---- Diff: textual additions and removals ---- */
.diff { font-family: var(--font-record); font-size: var(--fs-3); line-height: var(--lh-record); max-width: var(--measure); }
.diff p + p { margin-top: 0.9em; }
.diff ins { text-decoration: none; background: var(--current-tint); color: var(--current); box-shadow: inset 0 -1px 0 var(--current); }
.diff del { color: var(--overdue); background: var(--overdue-tint); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff__count { display: inline-flex; gap: var(--s-3); font-size: var(--fs-1); }
.diff__count .add { color: var(--current); font-weight: 600; }
.diff__count .del { color: var(--overdue); font-weight: 600; }

/* ---- Seal: the one ornament, used only when something is signed ---- */
.seal {
  width: 112px; height: 112px; display: grid; place-items: center; color: var(--claret);
  animation: seal-down 420ms var(--ease) both;
}
.seal svg { width: 100%; height: 100%; }
@keyframes seal-down {
  from { transform: scale(1.25) rotate(-6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.signature-block {
  font-family: var(--font-record); border: 1px solid var(--ink); border-radius: var(--r-1);
  padding: var(--s-4) var(--s-5); display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center;
  max-width: 560px; background: var(--sheet);
}
.signature-block__name { font-size: var(--fs-5); font-style: italic; }
.signature-block dl { margin: var(--s-2) 0 0; font-size: var(--fs-1); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); font-family: var(--font-ui); }
.signature-block dt { color: var(--graphite); }
.signature-block dd { margin: 0; }
.signature-block .seal { width: 84px; height: 84px; }

/* ---- Meter: plan capacity ---- */
.meter { display: grid; gap: var(--s-2); }
.meter__bar { height: 8px; border-radius: 4px; background: var(--rule); position: relative; overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--value); background: var(--accent); }
.meter__fill--warn { background: var(--pending); }
.meter__fill--full { background: var(--overdue); }
.meter__mark { position: absolute; top: -2px; bottom: -2px; left: var(--at); border-left: 1px solid var(--pending); }
.meter__text { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--graphite); }
.meter--strip { min-width: 300px; }

/* ---- Person ---- */
.person { display: inline-flex; align-items: center; gap: var(--s-2); }
.person__mark { width: 28px; height: 28px; border-radius: 50%; background: var(--board-deep); color: var(--ink); display: grid; place-items: center; font-size: var(--fs-00); font-weight: 600; }
.person__name { font-weight: 500; line-height: 1.2; }
.person small { display: block; line-height: 1.2; }

/* ---- Steps: a numbered sequence (the workflow really is one) ---- */
.steps { display: flex; gap: var(--s-5); list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-1); color: var(--graphite); }
.steps li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule-strong); display: grid; place-items: center; font-size: var(--fs-00); font-weight: 600; }
.steps .is-done { color: var(--ink); }
.steps .is-done::before { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.steps .is-active { color: var(--ink); font-weight: 600; }
.steps .is-active::before { border-color: var(--ink); border-width: 2px; }

/* ---- Preview pane (document or PDF) ---- */
.preview { border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); overflow: hidden; }
.preview__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--sheet-tint); border-bottom: 1px solid var(--rule); font-size: var(--fs-1); }
.preview__page { padding: var(--s-6) var(--s-7); font-family: var(--font-record); line-height: var(--lh-record); font-size: var(--fs-3); }
.preview__page h3 { font-family: var(--font-record); font-size: var(--fs-4); font-weight: 600; margin: 1.3em 0 0.4em; }
.preview__page h3:first-child { margin-top: 0; }
.preview__page h3 + p { margin-top: 0; }
.preview__page p + p { margin-top: 0.9em; }
.preview__page mark { background: var(--pending-tint); color: inherit; padding: 0 2px; }
.preview__page mark.is-changed { background: var(--pending-tint); box-shadow: inset 0 -1px 0 var(--pending); }
.preview--stale { position: relative; }
.preview--stale .preview__page { opacity: 0.4; filter: grayscale(1); }
.preview__stale-note { display: none; position: absolute; inset: 44px 0 auto 0; margin: var(--s-6) auto 0; width: max-content; max-width: 90%; padding: var(--s-3) var(--s-4); background: var(--sheet); border: 1px solid var(--pending); border-radius: var(--r-2); box-shadow: var(--shadow-float); font-family: var(--font-ui); font-size: var(--fs-1); text-align: center; }
.preview--stale .preview__stale-note { display: block; }

/* ---- Attention counts: not a stat grid; a short inline summary ---- */
.counts { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.counts div { display: grid; gap: 2px; }
.counts b { font-family: var(--font-record); font-size: var(--fs-6); font-weight: 400; line-height: 1; }
.counts small { color: var(--graphite); }
.counts--pending b { color: var(--pending); }
.counts--overdue b { color: var(--overdue); }

/* ---- Pill group / filter ---- */
.filters { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.filters button { border: 1px solid transparent; background: none; padding: 4px 10px; border-radius: 99px; font-size: var(--fs-1); color: var(--graphite); cursor: pointer; }
.filters button:hover { color: var(--ink); background: var(--sheet-tint); }
.filters .is-active { color: var(--ink); border-color: var(--accent); background: var(--sheet); }
.filters button .num { color: var(--graphite); margin-left: 4px; }

/* ---- Keyline box: a plain enclosure for a group of controls ---- */
.box { border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); }
.box--tint { background: var(--sheet-tint); border-color: transparent; }
.box__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.box > h4 + p { margin-top: 6px; }
.box__actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); }
.divider { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }

/* ---- Toast (prototype feedback) ---- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px); opacity: 0; background: var(--ink); color: var(--sheet); padding: 10px 16px; border-radius: var(--r-2); box-shadow: var(--shadow-float); font-size: var(--fs-1); transition: all var(--t-base) var(--ease); pointer-events: none; z-index: 40; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---- Phase 4: register rail, customers ----
   The customers register's end column (stamp, dates, row actions as small text buttons), the ledger's waiting and overdue marks, and the
   Overview's 60-day rail. Overdue uses --overdue, never claret: claret stays on today, deadlines and time left. */
.register--customers { align-items: stretch; }
/* The row's dates in words: off-screen beside the rail on wide screens (the rail is aria-hidden), shown when the rail is dropped. */
.register--customers .register__dates { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.register__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1) var(--s-3); margin-top: 2px; }
.register__actions form { margin: 0; display: inline-flex; }
.register__act { font: inherit; font-size: var(--fs-1); color: var(--accent-ink, var(--ink)); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--mist); text-underline-offset: 2px; cursor: pointer; }
.register__act:hover { text-decoration-color: currentColor; }
.register__act--danger { color: var(--overdue); }
.register__end .t-small { text-align: right; }
.register__pager { padding: var(--s-4) var(--s-7) 0; }
.register__pager:empty { display: none; }
.ledger__mark--pending { border-color: var(--pending); }
.ledger__mark--overdue { border-color: var(--overdue); background: var(--overdue); }
.ledger__mark--upcoming { border-color: var(--upcoming); border-style: dashed; }
.ledger__what .stamp { margin-left: var(--s-2); vertical-align: 1px; }
.ledger__what a { font-weight: 500; }
.ledger__group { margin-top: var(--s-6); font-size: var(--fs-1); color: var(--graphite); font-weight: 600; }
.ledger__group:first-child { margin-top: 0; }
.overview__rail { margin: var(--s-2) 0 var(--s-6); }
.overview__rail .axis { margin-bottom: var(--s-1); }
@media (max-width: 860px) {
  .register--customers .register__dates { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .register__actions { justify-content: flex-start; }
  .register__act { min-height: 44px; display: inline-flex; align-items: center; }
  .register__end .t-small { text-align: left; }
  .register__pager { padding: var(--s-4) var(--s-4) 0; }
  .overview__rail .axis__tick--minor { display: none; }
}

/* ============================================================
   4. LAYOUT
   ============================================================ */

/* App: spine | record. The spine is written straight on the board;
   the active entry is a tab that joins the white sheet. */
.app { display: grid; grid-template-columns: var(--spine-w) minmax(0, 1fr); min-height: 100dvh; background: var(--board); }
.spine { padding: var(--s-5) 0 var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 0; height: 100vh; overflow: auto; }
.spine__brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--fs-1); color: var(--ink-2); padding-right: var(--s-4); text-decoration: none; }
.spine__brand svg { width: 20px; height: 20px; }

/* Scope: what the items below apply to. A title when there is one trust
   center (or organization); the same block becomes a switcher with 2+. */
.scope { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); margin-right: var(--s-4); text-align: left; }
.scope__kicker { font-size: var(--fs-0); color: var(--graphite); }
.scope__name { font-family: var(--font-record); font-size: var(--fs-4); font-weight: 500; line-height: 1.2; color: var(--ink); }
.scope__sub { font-size: var(--fs-0); color: var(--graphite); }
.scope--switch { border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: transparent; grid-template-columns: 1fr 16px; align-items: center; cursor: pointer; padding: var(--s-2) var(--s-3); }
.scope--switch > span { display: grid; gap: 2px; }
.scope--switch:hover { background: var(--board-deep); }
.scope--switch svg { width: 16px; height: 16px; color: var(--graphite); }
.scope--section { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); }
.scope--section .scope__name { font-size: var(--fs-3); }
.spine__nav { display: grid; gap: 1px; }
.spine__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 7px var(--s-3) 7px var(--s-3); margin-right: var(--s-4);
  border-radius: var(--r-2); color: var(--ink-2); text-decoration: none; font-weight: 500;
  transition: background var(--t-fast);
}
.spine__item:hover { background: var(--board-deep); }
.spine__item .num { font-size: var(--fs-0); color: var(--graphite); min-width: 18px; text-align: right; }
.spine__item .num--alert { color: var(--overdue); font-weight: 600; }
.spine__item.is-active {
  background: var(--sheet); color: var(--ink); margin-right: 0;
  border-radius: var(--r-2) 0 0 var(--r-2); position: relative; z-index: 2;
  box-shadow: var(--shadow-sheet);
  clip-path: inset(-4px 0 -4px -4px);
}
.spine__foot { margin-top: auto; padding-right: var(--s-4); display: grid; gap: var(--s-3); }
.powered { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-00); color: var(--graphite); text-decoration: none; min-height: 44px; }
.powered svg { width: 14px; height: 14px; }
.powered:hover { color: var(--ink); }

.main { padding: var(--s-3) var(--s-5) var(--s-7) 0; min-width: 0; }
/* Top bar: page context on the left, the person on the right. The spine is
   for navigating the product; everything personal lives here. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; margin-bottom: var(--s-2); }
.bar__nav { display: none; }
.bar__crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-1); color: var(--graphite); min-width: 0; flex-wrap: wrap; }
.bar__crumbs a { color: var(--graphite); text-decoration: none; }
.bar__crumbs a:hover { color: var(--ink); text-decoration: underline; }
.bar__crumbs > * + *::before { content: "/"; color: var(--mist); margin-right: var(--s-2); }
.bar__crumbs b { color: var(--ink); font-weight: 500; }
.bar__me { position: relative; }
.me { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 2px var(--s-2) 2px 2px; border: 1px solid transparent; border-radius: 99px; background: transparent; cursor: pointer; }
.me:hover { background: var(--board-deep); }
.me b { font-weight: 500; }
.me svg { width: 14px; height: 14px; color: var(--graphite); }
.menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: 280px; background: var(--sheet); border-radius: var(--r-3); box-shadow: var(--shadow-float); padding: var(--s-2); text-align: left; }
.menu.is-open { display: block; }
.menu__section + .menu__section { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.menu__title { font-size: var(--fs-0); color: var(--graphite); padding: var(--s-2) var(--s-3) var(--s-1); }
.menu__item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-2); text-decoration: none; color: var(--ink); }
.menu__item:hover { background: var(--sheet-tint); }
.menu__item small { color: var(--graphite); }
.menu__item.is-current { background: var(--sheet-tint); font-weight: 500; }
.menu__hint { font-size: var(--fs-0); color: var(--graphite); padding: var(--s-1) var(--s-3) var(--s-2); }
.sheet {
  background: var(--sheet); border-radius: 0 var(--r-3) var(--r-3) 0;
  box-shadow: var(--shadow-sheet); min-height: calc(100vh - 2 * var(--s-5));
  position: relative; z-index: 1;
}
.sheet__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: end;
  padding: var(--s-6) var(--s-7) var(--s-5); border-bottom: 1px solid var(--rule);
}
.sheet__head h1 { margin-top: var(--s-2); }
.sheet__context { font-size: var(--fs-1); color: var(--graphite); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.sheet__context .stamp { height: 20px; }
.sheet__lede { margin-top: var(--s-3); color: var(--ink-2); max-width: 64ch; }
.sheet__actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sheet__strip { padding: var(--s-4) var(--s-7); border-bottom: 1px solid var(--rule); }
.sheet__body { padding: var(--s-6) var(--s-7) var(--s-7); }
.sheet__body--flush { padding: 0 0 var(--s-7); }
.disclosure { border-top: 1px solid var(--rule); }
.disclosure summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--s-2); font-weight: 500; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite); transform: rotate(-45deg); transition: transform var(--t-fast); margin-right: 4px; }
.disclosure[open] summary::before { transform: rotate(45deg); }
.seal--small { width: 72px; height: 72px; }
.done { display: grid; gap: var(--s-4); justify-items: start; }
.done h1 { font-size: var(--fs-7); }
.sheet__foot-reason { width: 100%; font-size: var(--fs-1); color: var(--graphite); text-align: right; }
.sheet__foot { padding: var(--s-4) var(--s-7); border-top: 1px solid var(--rule); display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--sheet-tint); border-radius: 0 0 var(--r-3) 0; position: sticky; bottom: 0; }

/* Record sheet: facts in the margin, the record in the body */
.record { display: grid; grid-template-columns: var(--margin-w) minmax(0, 1fr); gap: 0 var(--s-7); }
.record__margin { display: grid; gap: var(--s-5); align-content: start; padding-right: var(--s-5); border-right: 1px solid var(--rule); }
.record__margin .btn { white-space: normal; height: auto; min-height: 36px; padding-top: 7px; padding-bottom: 7px; text-align: left; justify-self: start; }
.record__body { min-width: 0; display: grid; gap: var(--s-6); align-content: start; }
.record__body > section { display: grid; gap: var(--s-4); }
.record__body > section > h2, .record__body > section > .row--heading { padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }

/* Two-up: form beside preview, etc. */
.two-up { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: start; }
.two-up--even { grid-template-columns: 1fr 1fr; }
.sticky { position: sticky; top: var(--s-5); }



/* ============================================================
   5. THEMES: the vendor's public identity
   A trust center and everything a vendor's customers see is themed by the
   vendor's brand tokens. The vendor sets --brand-primary, --brand-on-primary
   (server-checked for contrast) and a logo; everything else is derived.
   Time marks (claret) and the platform seal stay STC's: they are evidence,
   not branding. Defaults are the service default (deep blue) from the plan.
   ============================================================ */
[data-theme="brand"] {
  --brand-primary: #1e40af;
  --brand-on-primary: #ffffff;
  /* Decoration only (bar rule, hover underlines, icon-button hover), never text. Derived from the primary when unset. */
  --brand-accent: var(--brand-primary);
  --accent: var(--brand-primary);
  /* --brand-ink is set by the server: the primary when it reads as text on white, otherwise ink. */
  --accent-ink: var(--brand-ink, var(--brand-primary));
  --accent-hover: color-mix(in oklab, var(--brand-primary) 82%, black);
  --on-accent: var(--brand-on-primary);
  --accent-tint: color-mix(in oklab, var(--brand-primary) 7%, white);
  --board: color-mix(in oklab, var(--brand-primary) 7%, var(--neutral-board));
  --board-deep: color-mix(in oklab, var(--brand-primary) 14%, var(--neutral-board-deep));
  --sheet-tint: color-mix(in oklab, var(--brand-primary) 4%, var(--sheet));
  --rule-strong: color-mix(in oklab, var(--brand-primary) 18%, var(--neutral-rule-strong));
  --focus: 0 0 0 2px var(--sheet), 0 0 0 4px var(--brand-primary);
}
[data-theme="brand"] a:hover { text-decoration-color: var(--brand-accent); }
[data-theme="brand"] .spine__brand { color: var(--accent-ink); font-size: var(--fs-2); }
[data-theme="brand"] .spine__brand svg { width: 24px; height: 24px; }
[data-theme="brand"] .person__mark { background: var(--accent-tint); color: var(--accent-ink); }
/* Dark brand: mix towards white where the light theme mixes towards black or
   white, so hover, tints and brand-coloured text stay readable on dark. */
@media (prefers-color-scheme: dark) {
  [data-theme="brand"] {
    --accent-hover: color-mix(in oklab, var(--brand-primary) 82%, white);
    --accent-tint: color-mix(in oklab, var(--brand-primary) 16%, var(--sheet));
    --accent-ink: color-mix(in oklab, var(--brand-primary) 40%, white);
    --focus: 0 0 0 2px var(--sheet), 0 0 0 4px color-mix(in oklab, var(--brand-primary) 55%, white);
  }
}

/* Public trust center: no spine, one centred column, vendor brand. */
.public { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-5) var(--s-8); }
.public-page { min-height: 100dvh; background: var(--board); }
.public__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: 0; border-bottom: 1px solid var(--rule-strong); }
.public__bar-left { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }
.public__back { font-size: var(--fs-1); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.public__back:hover { text-decoration: underline; }
.public__brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: var(--fs-4); }
.public__brand svg { width: 28px; height: 28px; }
.public__brand small { font-weight: 400; color: var(--graphite); font-size: var(--fs-1); }
.public__nav { display: flex; align-items: center; gap: var(--s-4); font-weight: 500; }
.public__sub { color: var(--ink-2); font-weight: 400; }
.public__nav a { text-decoration: none; }
.public__nav a:hover { text-decoration: underline; }
.public__hero { padding: var(--pad-sheet) 0 var(--pad-pane); max-width: 64ch; }
.public__hero h1 { font-size: var(--fs-7); }
.public__hero p { margin-top: var(--s-4); font-size: var(--fs-3); color: var(--ink-2); max-width: 56ch; }
.public__card { background: var(--sheet); border-radius: var(--r-3); box-shadow: var(--shadow-sheet); padding: var(--s-5) var(--s-6); display: grid; gap: var(--s-3); }
.public__card h2 { font-size: var(--fs-4); }
.public__docs { background: var(--sheet); border-radius: var(--r-3); box-shadow: var(--shadow-sheet); }
.public__docs > h2 { padding: var(--s-5) var(--s-6) var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-4); }
.public__doc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-5); align-items: center; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--rule); }
.public__doc:last-child { border-bottom: 0; }
.public__doc h3 { font-family: var(--font-record); font-size: var(--fs-4); font-weight: 500; }
.public__doc h3 a { text-decoration: none; }
.public__doc h3 a:hover { text-decoration: underline; }
.public__doc p { font-size: var(--fs-1); color: var(--graphite); margin-top: 2px; }
.public__doc .row { justify-content: flex-end; }
.public__doc--link { cursor: pointer; }
.public__doc--link:hover { background: var(--sheet-tint); }
.public__doc .stamp { white-space: normal; height: auto; min-height: 22px; padding: 2px 8px; }
.public__doc p b { color: var(--ink-2); font-weight: 500; }
.public__doc p .desc { color: var(--graphite); }
.public__doc p .desc::before { content: " · "; }
.public__docs--quiet { box-shadow: none; border: 1px solid var(--rule-strong); background: transparent; }
.public__docs--quiet .public__doc--link:hover { background: var(--sheet); }
.public__docs > .public__note { padding: var(--s-3) var(--s-6) 0; font-size: var(--fs-1); color: var(--ink-2); }
.public__docs > h2 + .public__note { padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
/* C2: customer-side markers are inline text with a leading dot; stamps are backend-only */
.marker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--ink-2); white-space: nowrap; }
.marker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); flex: 0 0 auto; }
.marker--upcoming { color: var(--upcoming); } .marker--upcoming::before { background: var(--upcoming); }
.marker--current { color: var(--current); } .marker--current::before { background: var(--current); }
.marker--pending { color: var(--pending); } .marker--pending::before { background: var(--pending); }
.marker--overdue { color: var(--overdue); } .marker--overdue::before { background: var(--overdue); }
.public__doc .marker + .row, .public__doc .row--actions { gap: var(--s-3); }
.public__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-6) 0 0; margin-top: var(--s-7); border-top: 1px solid var(--rule-strong); font-size: var(--fs-1); color: var(--graphite); }
.public__foot a { color: inherit; }
.public__foot, .public__fine, .entry__context { color: var(--ink-2); }
.public__narrow { max-width: 600px; margin: var(--s-7) auto 0; display: grid; gap: var(--s-5); }
.public__card--form { gap: var(--s-4); }
.public__title { font-size: var(--fs-6); }
.public__fine { text-align: center; }
.public__nav .person { gap: var(--s-2); }
.public__article { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 76ch; gap: var(--s-7); align-items: start; padding-top: var(--s-6); }
.public__article--wide { max-width: none; }
.public__article-head { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); margin-bottom: var(--s-5); }
.public__article-head .row--between { align-items: baseline; }
.public__article-head .muted { color: var(--ink-2); }
.public__article-head h1 { font-size: var(--fs-7); }
.public__article-head .row { margin-top: var(--s-2); }
.versions { list-style: none; display: grid; }
.versions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.versions b { font-weight: 500; }
.versions small { display: block; }
.versions .row { gap: var(--s-3); }
/* Entry card (O1 to O3c, R4): centred on the board, inside the trust-center frame */
.entry { width: min(100%, 440px); margin: var(--s-7) auto 0; background: var(--sheet); border-radius: var(--r-3); box-shadow: var(--shadow-sheet); padding: var(--pad-sheet); display: grid; gap: var(--s-4); }
.entry--wide { width: min(100%, 600px); }
.entry--done { width: min(100%, 560px); justify-items: start; grid-template-columns: minmax(0, 1fr); }
.entry--done .actions { width: 100%; }
.entry__strip { display: flex; gap: var(--s-3); font-size: var(--fs-1); color: var(--graphite); }
.entry__strip .is-active { color: var(--ink); font-weight: 600; }
.entry__strip .is-done { color: var(--ink); }
.entry__strip li + li::before { content: "·"; margin-right: var(--s-3); color: var(--mist); }
.entry__strip { list-style: none; }
.entry__context { font-size: var(--fs-1); }
.entry h1 { font-size: var(--fs-6); }
.entry p { color: var(--ink-2); }
.entry .field { gap: var(--s-2); }
/* C1: the actions row. Back left, primary right, aligned to the edges of its container. */
.actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.actions__left, .actions__right { display: flex; align-items: center; gap: var(--s-3); }
.actions__right { margin-left: auto; }
.actions__reason { font-size: var(--fs-1); color: var(--ink-2); }
.actions--article { padding-top: var(--s-5); border-top: 1px solid var(--rule); margin-top: var(--s-6); }
/* O2: one input drawn as six cells so paste, autofill and screen readers work */
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.code-input { width: calc(6 * 48px + 4px); max-width: 100%; height: 56px; padding: 0 0 0 16px; border: 0; border-radius: var(--r-1); background: repeating-linear-gradient(90deg, var(--sheet) 0 44px, transparent 44px 48px) padding-box, repeating-linear-gradient(90deg, var(--rule-strong) 0 44px, transparent 44px 48px) border-box; box-shadow: none; font: 24px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: calc(48px - 1ch); color: var(--ink); outline: 1px solid var(--rule-strong); outline-offset: -1px; }
.code-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.code-cells { display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; }
.code-cells b { height: 56px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); display: grid; place-items: center; font: 24px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--sheet); }
.code-cells b.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.code-cells b.is-empty::after { content: ""; width: 1px; height: 24px; background: var(--ink); animation: caret 1s steps(2) infinite; }
@keyframes caret { to { opacity: 0; } }
.field__error { display: block; }
.field__error[hidden] { display: none; }
/* O4: one dismissable notice line above the document list */
.notice-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--pad-pane); margin-bottom: var(--s-4); background: var(--sheet); border-radius: var(--r-2); box-shadow: var(--shadow-sheet); font-size: var(--fs-2); }
.notice-line button { background: none; border: 0; color: var(--ink-2); cursor: pointer; width: 36px; height: 36px; border-radius: var(--r-2); display: grid; place-items: center; }
.notice-line button:hover { background: var(--sheet-tint); }
.notice-line button svg { width: 16px; height: 16px; }
/* R2/R3: read-only organization facts inside the article */
.facts--block { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); padding: var(--pad-pane); background: var(--sheet); border-radius: var(--r-2); box-shadow: var(--shadow-sheet); }
.facts--block div { gap: 4px; }
.facts--block .facts__wide { grid-column: 1 / -1; }
.facts--block dd { color: var(--ink); }
.article-section { display: grid; gap: var(--s-4); }
.article-section > h2 { font-size: var(--fs-4); }
.article-section > .row--between { align-items: baseline; }
.article-section + .article-section { margin-top: var(--s-6); }
.public__article .choice label { background: var(--sheet); }
.public__article .check--consent { background: var(--sheet); }
.public__article .preview { background: var(--sheet); }
/* R3: the preview's state bar goes amber after an edit */
.preview__warn { display: none; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--pending-tint); border-bottom: 1px solid var(--pending); font-size: var(--fs-1); }
.preview--stale .preview__warn { display: flex; }
.preview--stale .preview__stale-note { display: none; }
/* H2/H3: organization switcher and account menu in the bar */
.orgswitch { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; min-height: 40px; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-2); background: transparent; font-weight: 500; font-size: var(--fs-2); color: var(--ink); cursor: pointer; }
.orgswitch:hover { background: var(--board-deep); }
.orgswitch > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgswitch svg { width: 14px; height: 14px; color: var(--graphite); flex: 0 0 auto; }
.orgswitch--static { cursor: default; font-weight: 400; color: var(--ink-2); }
.orgswitch--static:hover { background: transparent; }
.bar__org { position: relative; }
.menu__item .check { width: 14px; height: 14px; display: inline-block; }
.menu__item svg { width: 14px; height: 14px; color: var(--accent); }
.public__nav .person__mark { width: 28px; height: 28px; }
.public__nav .me { padding: 0; min-width: 40px; }
.public__nav .me b, .public__nav .me > svg { display: none; }
.signed-block { display: grid; gap: var(--s-2); padding: var(--pad-pane); background: var(--sheet); border-radius: var(--r-2); box-shadow: var(--shadow-sheet); margin-bottom: var(--s-6); }
.signed-block .row { margin-top: var(--s-2); }
.public__grace { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--pending-tint); border: 1px solid var(--pending); border-radius: var(--r-2); font-size: var(--fs-1); margin-top: var(--s-4); }

/* Responsive: the spine narrows, then the margin stacks above the body. */
@media (max-width: 1180px) {
  :root { --spine-w: 208px; --margin-w: 192px; }
  .axis__tick--minor { display: none; }
  .sheet__head, .sheet__strip, .sheet__body, .sheet__foot { padding-left: var(--s-6); padding-right: var(--s-6); }
  .record { gap: 0 var(--s-6); }
  .two-up { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .register { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) auto; }
}
@media (max-width: 1060px) {
  .record { grid-template-columns: 1fr; gap: var(--s-5); }
  .record__margin { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 var(--s-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; }
}
/* Top bar and drawer: below 860px the spine is the same element, slid in
   from the left. One nav model for every role; the switchers stay inside. */
.topbar, .spine__backdrop, .spine__close { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .bar {
    position: sticky; top: 0; z-index: 20; min-height: 56px; margin: 0 calc(-1 * var(--s-4)) var(--s-4);
    padding: 6px var(--s-3); background: var(--board); border-bottom: 1px solid var(--rule-strong);
  }
  .bar__nav { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-2); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
  .bar__nav:hover { background: var(--board-deep); }
  .bar__nav svg { width: 22px; height: 22px; }
  .bar__crumbs { flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis; }
  .bar__crumbs > *::before { display: none; }
  .bar__crumbs > *:not(:last-child) { display: none; }
  .bar__crumbs b { font-size: var(--fs-2); }
  .me { padding: 0; min-width: 44px; min-height: 44px; justify-content: center; }
  .me b, .me svg { display: none; }
  .menu { width: min(300px, calc(100vw - 32px)); }
  .spine {
    position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); height: 100vh; z-index: 31;
    padding: var(--s-4) 0 var(--s-4) var(--s-4); background: var(--board); box-shadow: var(--shadow-float);
    transform: translateX(-104%); transition: transform var(--t-base) var(--ease); overflow: auto;
  }
  .app.is-nav-open .spine { transform: none; }
  .spine__backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(21, 25, 30, 0.35); opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
  .app.is-nav-open .spine__backdrop { opacity: 1; pointer-events: auto; }
  .spine__close { display: grid; justify-self: end; width: 44px; height: 44px; margin-right: var(--s-2); border: 0; background: transparent; border-radius: var(--r-2); display: grid; place-items: center; cursor: pointer; }
  .spine__close svg { width: 20px; height: 20px; }
  .spine__item { padding: 11px var(--s-3); min-height: 44px; }
  .spine__item.is-active { margin-right: var(--s-4); border-radius: var(--r-2); clip-path: none; box-shadow: none; }
  .scope { padding-left: var(--s-3); }

  .main { padding: 0 var(--s-4) var(--s-7); }
  .sheet { border-radius: var(--r-3); min-height: 0; }
  .sheet__head, .sheet__strip, .sheet__body, .sheet__foot { padding-left: var(--s-4); padding-right: var(--s-4); }
  .sheet__head { grid-template-columns: 1fr; padding-top: var(--s-5); padding-bottom: var(--s-4); }
  .sheet__head h1 { font-size: var(--fs-6); }
  .sheet__actions { justify-content: stretch; }
  .sheet__actions .btn { flex: 1 1 auto; justify-content: center; }
  .sheet__foot { border-radius: 0 0 var(--r-3) var(--r-3); z-index: 5; flex-wrap: nowrap; }
  .sheet__foot .row { flex-wrap: nowrap; }
  .sheet__foot .row:last-of-type { flex: 1 1 auto; justify-content: flex-end; }
  .sheet__foot .row:last-of-type .btn:not(.btn--quiet):not(.btn--danger) { flex: 1 1 auto; justify-content: center; }
  .sheet__foot .btn { white-space: normal; height: auto; text-align: center; padding-top: 8px; padding-bottom: 8px; }
  .sheet__foot .row { min-width: 0; }
  .sheet__foot > .t-small { display: none; }
  .sheet__foot-reason { text-align: center; }
  .btn, .input { min-height: 44px; }
  .btn { padding: 0 var(--s-4); }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .filters button { min-height: 44px; white-space: nowrap; }
  .tabs button, .tabs a, .table td a, .sheet__context a, .public__foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .counts { gap: var(--s-4) var(--s-5); }
  .steps { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  .counts b { font-size: var(--fs-5); }
  .meter--strip { min-width: 0; width: 100%; }
  .record { grid-template-columns: 1fr; gap: var(--s-5); }
  .record__margin { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 var(--s-5); grid-template-columns: 1fr; }
  .record__body > section > h2 { font-size: var(--fs-4); }
  .facts--inline { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
  .ledger__entry { grid-template-columns: 18px 1fr; }
  .ledger__mark { grid-row: 1 / span 2; }
  .ledger__when { grid-column: 2; display: flex; gap: var(--s-2); }
  .ledger__when b { display: inline; }
  .ledger__what { grid-column: 2; }
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .table td { display: block; border: 0; padding: 0; }
  .table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-0); color: var(--graphite); }
  .table td.t-right { text-align: left; }
  .table tr:hover td { background: transparent; }
  .signature-block { grid-template-columns: 1fr; max-width: none; }
  .signature-block .seal { justify-self: end; }
  .preview__page { padding: var(--s-4); }
  .preview__bar { flex-wrap: wrap; }
  .two-up { grid-template-columns: 1fr; }
  .rail--tall { height: 44px; }
  .rail--tall .rail__label { display: none; }
  .rail--tall .rail__now::before { display: none; }
  .rail__legend { display: grid; }
  /* Registers stack into cards; the rail keeps the position, stamps carry the words. */
  .register { grid-template-columns: 1fr; }
  .register__head, .register__axis { display: none; }
  .register__row > * { border-bottom: 0; min-height: 0; padding: var(--s-2) var(--s-4); }
  .register__row > *:first-child { padding-top: var(--s-4); }
  .register__row > *:last-child { border-bottom: 1px solid var(--rule); padding-bottom: var(--s-4); }
  .register--ahead .register__rail { display: none; }
  .register--ahead .register__row > .register__end .stamp:not(a) { display: none; }
  .register__rail .rail { height: 36px; }
  .register__rail .rail__empty { top: 0; transform: none; padding-left: 0; }
  .register__rail .rail__label { display: none; }
  .register__dates { display: block; }
  .register__rail .rail__now { top: -4px; bottom: -4px; }
  .register__row > .register__end { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s-2) var(--s-3); }
  .register__end a.t-small { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-1); }
  a.stamp { position: relative; }
  a.stamp::before { content: ""; position: absolute; inset: -11px 0; }
  .notice { grid-template-columns: 18px 1fr; }
  .notice__actions { grid-column: 2; }
  .input-row, .input-row--3 { grid-template-columns: 1fr; }
  .input-row--postal { grid-template-columns: 1fr 2fr; }
  .choice label, .check--consent { min-height: 44px; }
  /* Public page, mobile first in effect: one column, big targets. */
  .public { padding: 0 var(--s-4) var(--s-7); }
  /* H5: two rows. Row 1 brand and person; row 2 Subscribe or back on the left, the organization on the right. */
  .public__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px auto; align-items: center; gap: 0 var(--s-3); min-height: 0; }
  .public__bar-left { display: contents; }
  .public__brand { grid-row: 1; grid-column: 1; }
  .public__brand small { display: none; }
  .public__nav { display: contents; }
  .public__nav .bar__me, .public__nav .btn { grid-row: 1; grid-column: 2; justify-self: end; }
  .public__brand { min-width: 0; }
  .public__brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .public__sub, .public__back { grid-row: 2; grid-column: 1 / -1; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
  .public__bar-left .public__back ~ .public__nav .public__sub, .public__bar--sub .public__sub { display: none; }
  .bar__org { grid-row: 2; grid-column: 1 / -1; justify-self: end; }
  .orgswitch { max-width: 56vw; min-height: 44px; }
  .orgswitch--static { font-size: var(--fs-1); }
  .public__bar--brand-only { grid-template-rows: 56px; }
  .public__hero { padding: var(--s-5) 0 var(--s-4); }
  .public__nav .menu, .bar__org .menu { position: fixed; left: var(--s-4); right: var(--s-4); top: 64px; width: auto; }
  .public__nav .menu .menu__item, .bar__org .menu .menu__item { min-height: 44px; }
  .public__hero h1 { font-size: 32px; }
  .public__hero p { font-size: var(--fs-2); }
  .public__card { padding: var(--s-4); }
  .public__card .row { flex-direction: column; align-items: stretch; }
  .public__card .btn { justify-content: center; }
  .public__docs > h2 { padding: var(--s-4) var(--s-4) var(--s-3); }
  .public__doc { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-4); }
  .public__doc > .icon-btn { grid-row: 1; grid-column: 2; align-self: start; }
  .public__doc > .btn, .public__doc > .row--actions { grid-column: 1 / -1; justify-content: center; margin-top: var(--s-2); }
  .public__doc > .row--actions { justify-content: space-between; }
  .public__doc > .marker { grid-column: 1; }
  .public__docs > .public__note { padding-left: var(--s-4); padding-right: var(--s-4); }
  .icon-btn { width: 44px; height: 44px; }
  .entry { margin-top: var(--s-5); padding: var(--s-4); }
  .actions { gap: var(--s-2); }
  .actions .btn { min-height: 44px; white-space: normal; text-align: center; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .actions__left, .actions__right { min-width: 0; }
  .actions__left { flex: 0 1 auto; }
  .actions__right { flex: 1 0 45%; justify-content: flex-end; }
  .actions__right .btn:not(.btn--quiet) { flex: 1 1 auto; justify-content: center; }
  .actions__reason { display: none; }
  .code-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .code-cells b { height: 44px; }
  .facts--block { grid-template-columns: 1fr; padding: var(--s-4); }
  .notice-line { padding: var(--s-3) var(--s-4); }
  .public__article { gap: var(--s-5); padding-top: var(--s-4); }
  .public__article-head h1 { font-size: var(--fs-6); }
  .public__article-head .row .btn:not(.btn--quiet) { flex: 1 1 auto; justify-content: center; }
  .public__article-head .row--between .btn--quiet { padding-left: 0; min-height: 36px; }
  .public__doc .row { justify-content: flex-start; }
  .public__doc .row a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-1); }
  .public__foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   6. SHELLS: STC's entry pages (staff and operator sign-in, password,
   two-factor, invitations, errors). Wordmark bar, centred entry card,
   quiet footer with the region. STC identity: monochrome ink, no theme.
   ============================================================ */
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 50; padding: var(--s-2) var(--s-3); background: var(--sheet); color: var(--ink); border-radius: var(--r-2); box-shadow: var(--shadow-float); }
.skip:focus { top: var(--s-2); }
.brandmark__dot { fill: var(--claret); stroke: none; }
.entry-page { width: 100%; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; max-width: 1080px; margin: 0 auto; padding: 0 var(--s-5); }
.entry-page .public__brand { color: var(--ink); }
.entry-page__main { min-width: 0; }
.entry-page .entry { margin-top: var(--s-8); align-self: start; }
.entry-page__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; font-size: var(--fs-0); color: var(--ink-2); }
.entry-page__foot a { color: inherit; }
.entry__lead { display: grid; gap: var(--s-2); }
.entry__alt { font-size: var(--fs-1); }
.entry h2 { font-size: var(--fs-4); }
.entry__form { display: grid; gap: var(--s-4); }
.entry .divider { margin: var(--s-2) 0; }
.entry .facts--table div { grid-template-columns: 120px minmax(0, 1fr); }
.notice ul { list-style: disc; padding-left: 1.2em; margin-top: var(--s-1); }
.notice > div > b { display: block; }
.codes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.codes .code { display: block; padding: var(--s-2) var(--s-3); font-size: var(--fs-2); text-align: center; }
@media (max-width: 860px) {
  .entry-page { padding: 0 var(--s-4); }
  .entry-page .entry { margin-top: var(--s-5); }
  .entry-page__foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .entry .facts--table div { grid-template-columns: 1fr; gap: 2px; }
}
/* Narrow phones: the bar keeps the wordmark whole; every bar action is repeated in the card. */
@media (max-width: 480px) {
  .entry-page .public__nav { display: none; }
}

/* ============================================================
   7. APP SHELL: the backend for vendor staff and operators
   (_AppLayout). Spine and top bar as in section 4; here only what
   the product adds: the phone drawer opens with a checkbox (no
   script needed), menus are <details>, and the shared components
   the backend pages are built from (panel, empty state, compact
   select, document preview, pager).
   ============================================================ */
.spine__toggle { display: none; }
.scope-switch, .bar__me { position: relative; }
.scope-switch > summary, .bar__me > summary { list-style: none; }
.scope-switch > summary::-webkit-details-marker, .bar__me > summary::-webkit-details-marker { display: none; }
.scope-switch { margin-right: var(--s-4); }
.scope-switch > .scope { margin-right: 0; }
.scope-switch > .menu { left: 0; right: auto; width: 100%; min-width: 220px; }
.scope-switch[open] > .scope svg { transform: rotate(180deg); }
details[open] > .menu { display: block; }
a.scope__sub { text-decoration: underline; text-decoration-color: var(--mist); }
a.scope__sub:hover { color: var(--ink); }
.menu form { margin: 0; }
button.menu__item { width: 100%; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.main > .sheet { display: block; }
@media (max-width: 860px) {
  /* Visually hidden but focusable: Space opens and closes the drawer from the keyboard; the menu button shows the focus. */
  .spine__toggle { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .spine__toggle:focus-visible ~ .main .bar__nav { box-shadow: var(--focus); }
  .spine { visibility: hidden; transition: transform var(--t-base) var(--ease), visibility 0s linear var(--t-base); }
  .spine__toggle:checked ~ .spine { transform: none; visibility: visible; transition: transform var(--t-base) var(--ease); }
  .spine__toggle:checked ~ .spine__backdrop { opacity: 1; pointer-events: auto; }
  .scope-switch > .menu { position: static; width: auto; min-width: 0; margin-top: var(--s-2); box-shadow: none; border: 1px solid var(--rule); }
  .menu__item { min-height: 44px; }
}

/* Panel: a titled section of a sheet (the backend's card). Heading over a rule, then the content. */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
.panel__head { display: grid; gap: var(--s-1); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.panel__head h2 { font-size: var(--fs-4); }
.panel__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; align-content: start; }
.panel__body > form, .stack > form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.panel--danger .panel__head { border-bottom-color: var(--overdue); }
.sheet__body > .stack--loose > .panel + .panel { margin-top: var(--s-3); }

/* Empty state: says what is missing and what to do next. */
.empty { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-5); border: 1px dashed var(--rule-strong); border-radius: var(--r-2); }
.empty h2 { font-size: var(--fs-3); }

/* Tables in a sheet scroll inside themselves; on a phone they stack (section 5). */
.table-wrap { overflow-x: auto; min-width: 0; }
.table-wrap:focus-visible { box-shadow: var(--focus); }
.table caption { text-align: left; }
.cell { display: grid; gap: 2px; justify-items: start; min-width: 0; overflow-wrap: anywhere; }
.cell > .row { justify-content: flex-start; }
.table-actions { gap: var(--s-2); }
.person-label { display: grid; gap: 1px; }
.pager { display: grid; gap: var(--s-2); }

/* Compact select: the short label sits inside the box as a prefix. */
.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.compact__box { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 0 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--sheet); max-width: 100%; }
.compact__box:hover { border-color: var(--graphite); }
.compact__box:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.compact__box label { font-size: var(--fs-1); color: var(--graphite); white-space: nowrap; }
.compact__box select { appearance: none; flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; min-height: 34px; padding: 0 30px 0 2px; border: 0; background: transparent; font-weight: 500; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.compact__box select:focus { outline: none; box-shadow: none; }
.compact--error .compact__box { border-color: var(--overdue); }

/* Facts list on backend pages: label and value pairs. */
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0; }
.dl dt { color: var(--graphite); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.code, .hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-1); overflow-wrap: anywhere; }
.input[type="file"] { padding: 4px 6px; }
.input[type="file"]::file-selector-button { min-height: 28px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--sheet); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }

/* Document preview (backend): the web frame is fitted to its content by stc-preview.js; the PDF frame keeps a bounded viewport. */
.docpreview { display: grid; gap: var(--s-3); }
.docpreview__tabs { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; background: var(--sheet-tint); border: 1px solid var(--rule); border-radius: var(--r-2); }
.docpreview__tabs button { min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--graphite); font-weight: 500; cursor: pointer; }
.docpreview__tabs button[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-strong); }
.docpreview__tabs[hidden], .docpreview__panel[hidden] { display: none; }
.docpreview__frame { display: block; width: 100%; height: 560px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: #fff; }
.docpreview__frame--web { height: 240px; max-height: 720px; }
.docpreview__frame--pdf { height: clamp(420px, 78vh, 820px); }
.docpreview__larger, .docpreview__hint-narrow { display: none; }
@media (max-width: 700px) {
  .docpreview__frame--pdf { height: auto; aspect-ratio: 10 / 14.5; min-height: 340px; max-height: 80vh; }
  .docpreview__larger { display: flex; margin-top: var(--s-2); }
}
/* Keep 560px in step with NARROW in stc-preview.js: no PDF frame on a phone, the full-window PDF is the way to read it. */
@media (max-width: 560px) {
  .docpreview__frame--pdf { display: none; }
  .docpreview__tabs ~ .docpreview__panel .docpreview__frame--pdf { display: block; }
  .docpreview__tabs ~ .docpreview__panel .docpreview__larger { display: flex; }
  .docpreview__hint-wide { display: none; }
  .docpreview__hint-narrow { display: block; }
  .docpreview__larger { display: none; }
}

/* Backend page details until phases 3, 4 and 7 redesign the contents. */
:is(.stack, .fieldset, .panel__body, form) > .btn { justify-self: start; align-self: flex-start; }
.list { list-style: disc; padding-left: 1.2em; display: grid; gap: var(--s-1); }
.list--numbered { list-style: decimal; }
.cell--wrap { overflow-wrap: anywhere; }
.qr { display: block; width: 240px; height: 240px; max-width: 100%; background: #fff; padding: var(--s-2); border-radius: var(--r-2); }
.fieldset--pair .input-row { align-items: start; }
.sheet__strip .tabs { border-bottom: 0; }
.sheet__strip { padding-top: var(--s-2); padding-bottom: 0; }
.sheet__strip .tabs a { margin-bottom: 0; }
.diff--compare { padding: var(--s-4) var(--s-5); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); overflow-wrap: anywhere; max-width: none; }
.diff--compare ins, .diff--compare del { padding: 0 2px; border-radius: 2px; }
.review-reject { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--rule-strong); }

/* Field schema editor: one card per field, constraints that fit the chosen type. */
.schema { display: grid; gap: var(--s-4); }
.schema-card { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sheet); }
.schema-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s-3); }
.schema-name { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; overflow-wrap: anywhere; }
.schema-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); align-items: start; }
.schema-grid .wide { grid-column: 1 / -1; }
.schema-grid > .compact { align-self: end; }
.schema-group { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--rule-strong); }
.schema-group-title { font-size: var(--fs-0); font-weight: 600; color: var(--graphite); }
.schema-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 560px) { .schema-grid { grid-template-columns: minmax(0, 1fr); } .schema-grid > .compact { align-self: stretch; } }
@supports selector(:has(*)) {
  .schema-card [data-group] { display: none; }
  .schema-card:has(select option:is([value="Text"], [value="MultilineText"], [value="Email"]):checked) [data-group="length"] { display: grid; }
  .schema-card:has(select option:is([value="Number"], [value="Integer"]):checked) [data-group="range"] { display: grid; }
  .schema-card:has(select option:is([value="Text"], [value="Email"]):checked) [data-group="pattern"] { display: grid; }
  .schema-card:has(select option[value="Choice"]:checked) [data-group="options"] { display: grid; }
}

.search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.search > .field { flex: 1 1 260px; max-width: 420px; }

/* ============================================================
   8. TRUST CENTER SHELL (_TrustCenterLayout): the vendor's public face.
   The layout puts data-theme="brand", the brand tokens (primary, text on
   it, brand ink, optional accent, the two font stacks) and three
   attributes on <html>: data-header (light | brand | dark), data-corners
   (square | soft | round) and data-background (white | paper | grey).
   The same attributes on a wrapper drive the branding settings preview.
   ============================================================ */
html[data-theme="brand"] { background: var(--board); }
.tc-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--board); }
.tc-bar { background: var(--sheet); border-top: 3px solid var(--brand-accent); border-bottom: 1px solid var(--rule-strong); }
.tc-bar > .public__bar { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-5); border-bottom: 0; }
.tc-main { width: 100%; padding-bottom: 0; }
.tc-foot { width: 100%; }
.tc-name { font-family: var(--font-record); font-weight: 500; font-size: var(--fs-5); line-height: 1.1; }
.public__brand { min-height: 44px; }
.tc-logo { display: block; height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.tc-logo--tile { background: #ffffff; padding: 4px 6px; border-radius: var(--r-1); box-sizing: content-box; }
@media (prefers-color-scheme: dark) {
  .tc-logo--tile-dark { background: #ffffff; padding: 4px 6px; border-radius: var(--r-1); box-sizing: content-box; }
}

/* Header style: the bar filled with the primary, or near-black. Text in the bar inherits the bar's colour. */
[data-header="brand"] .tc-bar { background: var(--brand-primary); color: var(--brand-on-primary); border-bottom-color: transparent; }
[data-header="dark"] .tc-bar { background: #15191e; color: #f3f4f6; border-bottom-color: transparent; }
:is([data-header="brand"], [data-header="dark"]) .tc-bar :is(.public__brand, .public__brand small, .public__sub, .public__back) { color: inherit; }
:is([data-header="brand"], [data-header="dark"]) .tc-bar .btn--secondary { background: transparent; color: inherit; border-color: currentColor; }
:is([data-header="brand"], [data-header="dark"]) .tc-bar .btn--secondary:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
:is([data-header="brand"], [data-header="dark"]) .tc-bar :focus-visible { box-shadow: 0 0 0 2px currentColor; outline: none; }
@media (prefers-color-scheme: dark) {
  [data-header="dark"] .tc-bar { background: #0b0d10; }
}

/* Corner style: square drops every radius; round enlarges them and makes buttons pills. Soft is the Register default. */
[data-theme="brand"][data-corners="square"] { --r-1: 0px; --r-2: 0px; --r-3: 0px; }
[data-theme="brand"][data-corners="round"] { --r-1: 6px; --r-2: 12px; --r-3: 20px; }
[data-corners="round"] :is(.btn, .icon-btn) { border-radius: 999px; }

/* Page background. Grey is the Register board tinted with the primary (section 5). White and paper replace it in the light scheme;
   in the dark scheme they become subtle variants of the dark board (white the deepest, paper warm) so the setting still shows. */
@media (prefers-color-scheme: light) {
  [data-theme="brand"][data-background="white"] { --board: #ffffff; --board-deep: color-mix(in oklab, var(--brand-primary) 6%, #eef0ee); --shadow-sheet: 0 0 0 1px var(--rule); }
  [data-theme="brand"][data-background="paper"] { --neutral-board: #f3efe6; --neutral-board-deep: #e7e1d4; --neutral-sheet-tint: #f8f5ef; --neutral-rule-strong: #c2baa8; --board: var(--neutral-board); }
}
@media (prefers-color-scheme: dark) {
  [data-theme="brand"][data-background="white"] { --board: #0d0f12; }
  [data-theme="brand"][data-background="paper"] { --board: #16130f; }
}

/* Document rows on the trust center: one marker, one download. */
.tc-main > .public__docs + .public__docs { margin-top: var(--s-6); }
.public__foot > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.public__docs > .public__note:only-of-type:last-child { padding-bottom: var(--s-5); }
.public__article-head .marker { white-space: normal; }
.public__article .disclosure { margin-top: var(--s-6); }
.public__article .disclosure > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.versions li[aria-current="true"] b::after { content: " (this page)"; font-weight: 400; color: var(--graphite); }
.public__compare { display: grid; gap: var(--s-4); }
.public__compare-labels { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-2); }
.public__compare-labels li { display: inline-flex; gap: var(--s-2); align-items: baseline; }
.public__compare-labels .muted { color: var(--graphite); }
.public__compare form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.tc-status { display: grid; gap: var(--s-3); }
@media (max-width: 860px) {
  .tc-bar > .public__bar { padding: 0 var(--s-4); }
  .tc-logo { height: 28px; max-width: 150px; }
}

/* Branding settings: a small copy of the trust center, themed like the real one. */
.theme-preview { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--board); color: var(--ink); font-family: var(--font-ui); }
.theme-preview .tc-bar > .public__bar { min-height: 56px; }
.theme-preview__body { display: grid; gap: var(--s-4); padding: var(--s-5); }
.theme-preview__body h3 { font-family: var(--font-record); font-size: var(--fs-6); font-weight: 400; }
.theme-preview__body .public__docs > h2 { font-size: var(--fs-3); }
.theme-preview .public__doc { grid-template-columns: minmax(0, 1fr) auto; }
.theme-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }

/* Phase 3: documents register, rail, publish flow */
.filters a { display: inline-flex; align-items: center; border: 1px solid transparent; padding: 4px 10px; border-radius: 99px; font-size: var(--fs-1); color: var(--graphite); text-decoration: none; }
.filters a:hover { color: var(--ink); background: var(--sheet-tint); }
.filters a .num { color: var(--graphite); margin-left: 4px; }
.docs__notices { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-7) 0; }
.docs__notices--inset { padding: 0 0 var(--s-5); }
.docs__empty { padding: var(--s-8) var(--s-7); }
.docs__upload { padding: var(--s-7); border-top: 1px solid var(--rule); }
.docs__upload > * { max-width: 760px; }
.docs__upload h2 { margin-top: 0; }
.register__row--draft .register__end .stamp { text-decoration: none; }
.register__end a.stamp:hover { background: var(--pending-tint, var(--sheet-tint)); }
.ledger__what .stamp { margin-left: var(--s-2); vertical-align: 1px; }
.ledger__what small { display: block; }
.ledger__links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--fs-1); }
.confirm { position: relative; margin-top: var(--s-4); }
.confirm > summary { list-style: none; cursor: pointer; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm__panel { margin-top: var(--s-3); padding: var(--s-4); border: 1px solid var(--overdue); border-radius: var(--r-2); background: var(--sheet); display: grid; gap: var(--s-3); max-width: 420px; }
.confirm__panel p { margin: 0; }
.confirm--up .confirm__panel { position: absolute; bottom: calc(100% + var(--s-2)); left: 0; width: min(420px, 80vw); margin: 0; box-shadow: var(--shadow-sheet); z-index: 5; }
/* The scheduled time and the re-signing deadline only show when chosen. */
.publish__schedule, .publish__deadline { display: none; }
form:has(input[name="When"][value="later"]:checked) .publish__schedule { display: grid; }
form:has(input[name="MandatoryReplacement"]:checked) .publish__deadline { display: grid; }
@media (max-width: 720px) {
  .filters a { min-height: 44px; white-space: nowrap; }
  .docs__notices { padding: var(--s-4) var(--s-4) 0; }
  .docs__empty, .docs__upload { padding: var(--s-5) var(--s-4); }
  .confirm--up .confirm__panel { width: calc(100vw - 32px); }
  .docs__register .rail__empty { padding-left: 14px; }
}

/* Phase 6: customer journey */
.bar__switch { position: relative; }
.bar__switch > summary { list-style: none; }
.bar__switch > summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) { .bar__org .menu { left: 0; right: auto; } }
.input--code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-5); letter-spacing: 0.3em; text-align: center; max-width: 220px; }
.choice__item { display: grid; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sheet); }
.choice__item.is-checked { border-color: var(--accent); background: var(--accent-tint); }
.link-button { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }
.link-button:hover { color: var(--ink); }
.cell-break { display: block; margin-top: 2px; }
.stamp--declined { border-color: var(--rule-strong); color: var(--ink-2); border-style: dashed; }
.decline { position: relative; }
.decline > summary { list-style: none; }
.decline > summary::-webkit-details-marker { display: none; }
.decline__form { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-4); width: min(420px, 80vw); border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); }
.decline__form p { margin: 0; }
.decline[open] .decline__form { position: absolute; bottom: calc(100% + var(--s-2)); left: 0; z-index: 5; box-shadow: var(--shadow-float); margin: 0; }
.tc-status { margin-bottom: var(--s-5); }
:is([data-header="brand"], [data-header="dark"]) .tc-bar :is(.orgswitch, .orgswitch--static, .me) { color: inherit; }
:is([data-header="brand"], [data-header="dark"]) .tc-bar :is(.orgswitch, .me):hover { background: color-mix(in srgb, currentColor 12%, transparent); }
@media (max-width: 720px) {
  .decline__form { width: calc(100vw - 32px); }
  .decline[open] .decline__form { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); width: auto; }
  .link-button { min-height: 44px; }
}

/* Phase 7: remaining backend */
.dev-note { padding: var(--s-2) var(--s-3); border: 1px dashed var(--rule-strong); border-radius: var(--r-2); font-size: var(--fs-1); color: var(--graphite); }
.dev-frame { display: block; width: 100%; height: 960px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--board); }
.dev-text { padding: var(--s-3); overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sheet); font: var(--fs-1)/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.h-small { font-size: var(--fs-2); font-weight: 600; }
.box > .h-small + p { margin-top: var(--s-1); }
.billing-meter { max-width: 420px; }
.billing-rail { display: grid; gap: var(--s-2); padding: 28px 8px 0; }
.billing-rail .rail__label { font-size: var(--fs-00); }
.ledger-mail td:first-child { white-space: nowrap; }
.ledger-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); align-items: end; }
.ledger-filters > .btn { justify-self: start; }

/* Paddle billing (step 5A): plan cards with a monthly/yearly choice. Tokens only, so dark mode follows. */
.plan-period { gap: var(--s-2); }
.plan-period .fieldset__legend { margin-bottom: 0; }
.plan-period__options { display: inline-flex; gap: var(--s-1); padding: 3px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet-tint); justify-self: start; }
.plan-period__option { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-1); cursor: pointer; font-weight: 500; }
.plan-period__option input { accent-color: var(--accent); margin: 0; }
.plan-period__option:has(input:checked) { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-period__option:has(input:focus-visible) { box-shadow: var(--focus); }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.plan-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--sheet); }
.plan-card > .btn { justify-self: start; margin-top: var(--s-2); }
.plan-card--current { border-color: var(--accent); background: var(--accent-tint); }
.plan-card__price { font-size: var(--fs-5); font-weight: 600; letter-spacing: -0.01em; }
.plan-card__price .t-small { display: block; margin-top: 2px; font-weight: 400; letter-spacing: 0; color: var(--graphite); }
.shell-notice { padding: var(--s-4) var(--pad-pane) 0; }
[data-paddle-billing] [hidden] { display: none; }