/* =====================================================================================================
   Client portal · styles (S5 Task PV; Z19, Z26; SPEC §11 "mobile-first; the hub's design tokens with TMC brand + client
   logo; WCAG 2.2 AA"). Consumes tokens.css (the brand's tokens, verbatim) and ports the hub's approved component
   patterns (hub.css: card surface, pill buttons, fields, stacked tables, the chart marks); no sidebar, no theme toggle
   (the OS preference through light-dark()).
   Mobile-first: one column from 320px, a 16px gutter, 2-up secondary numbers from 360px, tables stacked until 40rem.
   Focus rings only in keyboard mode ([data-input="keyboard"], set by portal.js on Tab; owner rule: never a ring after a
   click or a tap). Motion: one transition (the details marker's opacity), inside prefers-reduced-motion: no-preference.
   0 fonts · 1 roles · 2 base · 3 focus · 4 shell · 5 page head, note, states · 6 blocks · 7 tables, charts ·
   8 health, work · 9 buttons, fields · 10 sign-in pages · 11 lists (months, chooser, email) · 12 hover · 13 motion
   ===================================================================================================== */

/* ---------- 0 · fonts (self-hosted; metric-matched fallbacks, as hub.css) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-wght-latin.woff2?v=8f704806db') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-italic-400-latin.woff2?v=2bf0dbb1a4') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 100.8%; ascent-override: 87.1%; descent-override: 20.8%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Heavy Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold');
  font-weight: 700 900; size-adjust: 104%; ascent-override: 84.4%; descent-override: 20.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Times Italic');
  font-style: italic; size-adjust: 103.1%; ascent-override: 71.3%; descent-override: 25.7%; line-gap-override: 0%;
}

/* ---------- 1 · portal roles (hub.css values: chart series k1, axis, status marks; each pair AA in both schemes) ---------- */
:root {
  --surface: var(--bg-raised);
  --k1: light-dark(#7534D3, #8D5AE8);                     /* the bars and the latest point: 5.6:1 · 3.6:1 on the card */
  --axisline: light-dark(var(--neutral-200), var(--neutral-700));
  --good-icon: light-dark(#006300, #0CA30C);              /* status marks, always beside a word: ≥ 3:1 */
  --warn-icon: light-dark(#B57A00, #FAB219);
  --bad-icon: light-dark(#D03B3B, #E66767);
  --wash: color-mix(in oklab, var(--fg) 4%, transparent);
  --wash-2: color-mix(in oklab, var(--fg) 8%, transparent);
  --plate: var(--neutral-0);                              /* the client's logo always sits on light paper */
  --font-serif: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
}

/* ---------- 2 · base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--fg);
  font: var(--w-body) 1rem/1.55 var(--font-sans);
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { min-height: 44px; font: inherit; color: inherit; touch-action: manipulation; }
img { max-width: 100%; }
svg { display: block; }
time { font-variant-numeric: tabular-nums; }
::selection { background: var(--selection); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; }
.i--sm { width: 16px; height: 16px; }
.i--xs { width: 14px; height: 14px; }
.link { color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 3 · focus: a ring for the keyboard only ---------- */
:root:not([data-input="keyboard"]) :focus-visible { outline: none; }
:root[data-input="keyboard"] :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* scripting off: portal.js never runs, so the page stays in pointer mode; keyboard users still get the ring */
@media (scripting: none) {
  :root[data-input] :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
}
/* the skip link's target is focused by the browser, not chosen: no ring around the whole page */
:root[data-input] .main:focus-visible { outline: none; }

.skip {
  position: absolute; left: 12px; top: 8px; z-index: 300;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--bg-inverse); color: var(--fg-inverse); font-weight: var(--w-ui);
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- 4 · shell: header (TMC · the client's logo · switcher · sign out), main, footer ---------- */
.wrap { width: min(100% - 32px, 46rem); margin-inline: auto; }
.top { background: var(--bg); border-bottom: 1px solid var(--line); }
.top__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tmc out";
  align-items: center; gap: 6px 12px; padding-block: 6px;
}
.top__in--ctx { grid-template-areas: "tmc out" "ctx ctx"; padding-bottom: 10px; }
.top__tmc { grid-area: tmc; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-xs); }
.top__tmc-img { display: block; width: auto; height: 22px; }
.top__ctx { grid-area: ctx; display: flex; align-items: center; gap: 12px; min-width: 0; }
.top__logo {
  display: block; width: auto; height: 40px; max-width: 9rem; object-fit: contain;
  padding: 4px 8px; border-radius: var(--r-xs); background: var(--plate); border: 1px solid var(--line);
}
.top__out { grid-area: out; margin: 0; }

/* the business switcher: a native disclosure of links (works without script) */
.switch { position: relative; margin-left: auto; }
.switch__sum {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 16px;
  border-radius: var(--r-full); background: var(--wash); box-shadow: inset 0 0 0 1px var(--line);
  font: var(--w-ui) .875rem/1 var(--font-sans); white-space: nowrap;
}
.switch[open] > .switch__sum { background: var(--wash-2); }
.switch__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 110;
  width: min(18rem, calc(100vw - 32px)); margin: 0; padding: 6px; list-style: none;
  border-radius: var(--r-md); background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3);
}
.switch__a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px;
  border-radius: 12px; font: var(--w-ui) .9375rem/1.25 var(--font-sans); overflow-wrap: anywhere;
}
.switch__a[aria-current="page"] { background: var(--brand-soft); font-weight: var(--w-strong); }
.switch__a:active { background: var(--wash-2); }
.switch__tick { color: var(--brand); }

.main { padding: 24px 0 8px; }
.foot { margin-top: 40px; padding: 16px 0 28px; border-top: 1px solid var(--line); color: var(--fg-muted); font-size: .875rem; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 20px; }
.foot__by { padding-block: 10px; }
.foot__s { white-space: nowrap; }
.foot__out { margin: 0; }
.foot__btn {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--w-ui) .875rem/1.2 var(--font-sans); color: var(--fg-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

@media (min-width: 48rem) {
  .top__in, .top__in--ctx { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tmc ctx out"; padding-block: 10px; }
  .top__tmc-img { height: 26px; }
  .top__ctx:has(> .top__logo) { padding-left: 14px; border-left: 1px solid var(--line); }
  .main { padding-top: 32px; }
}
/* the lockup is drawn in ink and the brand purple: on the dark page it is shown in light, the purple kept as a lilac */
/* a pinned data-theme (only the staff preview sets one) wins over the system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .top__tmc-img, :root:not([data-theme="light"]) .plain-logo { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .top__tmc-img, :root[data-theme="dark"] .plain-logo { filter: invert(1) hue-rotate(180deg); }

/* ---------- 5 · page head, the note, calm states, more links ---------- */
.head { display: grid; gap: 6px; margin-bottom: 20px; }
.head__h {
  font: var(--w-heading) clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem)/1.06 var(--font-sans-heavy);
  letter-spacing: var(--track-heading); text-wrap: balance; overflow-wrap: anywhere;
}
.head__line { font-size: .9375rem; line-height: 1.4; color: var(--fg-muted); }

.note {
  display: grid; gap: 10px; margin-bottom: 16px; padding: 18px 18px 14px; border-radius: var(--r-md);
  background: var(--brand-soft);
}
.note__h { font: italic 400 1.3125rem/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--brand); text-wrap: balance; }
.note p { line-height: 1.6; text-wrap: pretty; }
.note__wide { display: none; }
.note__narrow { display: grid; }
/* two lines and "Read more" while the disclosure is closed; everything once it opens */
.note__narrow:has(> .note__more:not([open])) .note__lead {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.note__more > p { margin-top: 10px; }
.note__more[open] { display: flex; flex-direction: column; }
.note__more[open] > .note__sum { order: 1; }
.note__sum { display: inline-flex; align-items: center; gap: 8px; width: max-content; font: var(--w-ui) .9375rem/1 var(--font-sans); color: var(--fg-accent); }
.note__close { display: none; }
.note__more[open] .note__open { display: none; }
.note__more[open] .note__close { display: inline; }
@media (min-width: 40rem) {
  .note { padding: 22px 24px 20px; }
  .note__wide { display: grid; gap: 10px; }
  .note__narrow { display: none; }
}

.state { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px; border-radius: var(--r-md); background: var(--wash); }
.state__i { flex: none; margin-top: 2px; color: var(--brand); }
.state__t { line-height: 1.5; text-wrap: pretty; }

.more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.more__a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 18px;
  border-radius: var(--r-full); background: var(--wash); box-shadow: inset 0 0 0 1px var(--line);
  font: var(--w-ui) .9375rem/1 var(--font-sans);
}
.more__a:active { background: var(--wash-2); }
.more__i, .months__i, .chooser__i { transform: rotate(-90deg); color: var(--fg-muted); }
.more__a--back { padding: 0 18px 0 14px; }
.more__a--back .more__i { transform: rotate(90deg); }

/* ---------- 6 · blocks: one card per block, the number first ---------- */
.blocks { display: grid; gap: 16px; }
.blk {
  display: grid; gap: 16px; min-width: 0; padding: 18px 16px 14px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.blk__h { font: var(--w-strong) 1.0625rem/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.blk__top { display: grid; gap: 14px; align-items: end; min-width: 0; }
.blk__num { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.big {
  font: 760 clamp(2.25rem, 1.9rem + 2vw, 3.25rem)/1 var(--font-sans-heavy); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap;   /* a number never breaks mid-number (FR-C I2) */
}
.big--xl { font-size: clamp(2.5rem, 2.1rem + 3vw, 4.25rem); }
.big__l { font: var(--w-ui) .9375rem/1.3 var(--font-sans); color: var(--fg-muted); }

/* a comparison: the arrow (decoration) and the words; the first letter of the sentence capitalised */
.cmp { display: flex; align-items: baseline; gap: 6px; font: var(--w-ui) .9375rem/1.35 var(--font-sans); color: var(--fg); }
.cmp__g { flex: none; align-self: center; display: inline-flex; color: var(--fg-accent); }
.cmp__g svg { display: block; width: 0.6875rem; height: 0.6875rem; }
.cmp__g--dash svg { width: 0.75rem; height: 0.75rem; }
.cmp__t { min-width: 0; }
.cmp__t::first-letter { text-transform: uppercase; }

.trend { display: grid; gap: 6px; min-width: 0; }
.trend .spark { width: 100%; max-width: 15rem; height: auto; }
.trend__cap { font-size: .8125rem; line-height: 1.45; color: var(--fg-muted); }

/* secondary numbers: as many columns as fit a whole figure (a long number takes its line; it is never cut mid-number) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.kpis--big { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.kpi { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--wash); }
.kpi__n { font: 700 1.5rem/1.1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; }
.kpi__u { font-size: .875rem; font-weight: var(--w-ui); letter-spacing: 0; color: var(--fg-muted); white-space: normal; }   /* the unit may wrap; the number may not */
.kpi__l { font-size: .875rem; line-height: 1.3; color: var(--fg-muted); }
.kpi .cmp { margin-top: 2px; font-size: .8125rem; }
.kpis--big .kpi__n { font: 760 clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem)/1.05 var(--font-sans-heavy); letter-spacing: -.03em; }

.sub { display: grid; gap: 6px; min-width: 0; }
.sub__h { font: var(--w-strong) .9375rem/1.3 var(--font-sans); }
.rows { display: grid; margin: 0; padding: 0; list-style: none; }
.rows__i { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.rows__k { min-width: 0; overflow-wrap: anywhere; }
.rows__v { margin-left: auto; font-weight: var(--w-ui); font-variant-numeric: tabular-nums; text-align: right; }
.none { color: var(--fg-muted); line-height: 1.5; }
.asof { padding-top: 10px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--fg-muted); }

@media (min-width: 40rem) {
  .blk { gap: 18px; padding: 22px 24px 16px; }
  .blk__top:has(> .trend) { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
  .trend__cap { font-size: .75rem; }
}

/* ---------- 7 · tables (stacked rows on phones: no sideways scroll), charts (the hub's marks) ---------- */
.table-wrap { min-width: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tbl th, .tbl td { padding: 8px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.tbl thead th { padding-top: 0; border-top: 0; font: var(--w-strong) .8125rem/1.2 var(--font-sans); color: var(--fg-muted); }
.tbl tbody th { font-weight: var(--w-ui); }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl--dense th, .tbl--dense td { padding-block: 6px; }
/* stacked (the base): each row a small block, the column names as labels */
.tbl--stack thead { display: none; }
.tbl--stack, .tbl--stack tbody, .tbl--stack tr { display: block; }
.tbl--stack tr { padding: 10px 0; border-top: 1px solid var(--line); }
.tbl--stack tbody tr:first-child { padding-top: 0; border-top: 0; }
.tbl--stack th, .tbl--stack td {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 10px; padding: 2px 0; border: 0;
  text-align: left; white-space: normal; overflow-wrap: anywhere;
}
.tbl--stack tbody th { display: block; padding-bottom: 4px; font-weight: var(--w-strong); }
.tbl--stack td::before { content: attr(data-label); font-size: .8125rem; line-height: 1.75; color: var(--fg-muted); }
.tbl--stack .num { text-align: left; }
/* the latest contacts on a phone: the name and the date on one line, how they found you and the service below */
@media (max-width: 39.99rem) {
  .blk--recent .tbl--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .blk--recent .tbl--stack tbody th { grid-row: 1; grid-column: 2; justify-self: end; padding: 0; font-weight: var(--w-body); font-size: .875rem; color: var(--fg-muted); }
  .blk--recent .tbl--stack td { display: block; padding: 0; }
  .blk--recent .tbl--stack td:nth-child(2) { grid-row: 1; grid-column: 1; font-weight: var(--w-strong); }
  .blk--recent .tbl--stack td:nth-child(2)::before { content: none; }
  .blk--recent .tbl--stack td::before { display: block; font-size: .75rem; line-height: 1.5; }
}
@media (min-width: 40rem) {
  .tbl--stack { display: table; }
  .tbl--stack thead { display: table-header-group; }
  .tbl--stack tbody { display: table-row-group; }
  .tbl--stack tr { display: table-row; padding: 0; border: 0; }
  .tbl--stack th, .tbl--stack td { display: table-cell; padding: 9px 12px; border-top: 1px solid var(--line); }
  .tbl--stack thead th { padding-top: 0; border-top: 0; }
  .tbl--stack tbody th { padding-bottom: 9px; font-weight: var(--w-ui); }
  .tbl--stack th:first-child, .tbl--stack td:first-child { padding-left: 0; }
  .tbl--stack th:last-child, .tbl--stack td:last-child { padding-right: 0; }
  .tbl--stack td::before { content: none; }
  .tbl--stack .num { text-align: right; }
}

.chart { display: grid; gap: 8px; min-width: 0; }
.chart__plot { position: relative; }
.chart__svg { display: block; width: 100%; overflow: visible; font-family: var(--font-sans); }
.chart__svg text { pointer-events: none; }
.lbl { font-size: 14px; fill: var(--fg); }
.val { font-size: 14px; font-weight: 650; fill: var(--fg); font-variant-numeric: tabular-nums; }
.axis { stroke: var(--axisline); stroke-width: 1; shape-rendering: crispEdges; }
.fl.k1 { fill: var(--k1); }
.hit { fill: transparent; }
.dot { stroke: var(--surface); stroke-width: 2; }
.spark { flex: none; overflow: visible; }
.spark__ln { fill: none; stroke: var(--fg-subtle); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__table > summary { font: var(--w-ui) .875rem/1.2 var(--font-sans); color: var(--fg-accent); }
.chart__table[open] > summary { margin-bottom: 4px; }

/* ---------- 8 · health (a word and an icon per check), what we did ---------- */
.sites { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--wash); }
.site__h { font: var(--w-strong) .9375rem/1.3 var(--font-sans); overflow-wrap: anywhere; }
.checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: .9375rem; line-height: 1.4; }
.check__i { margin-top: 2px; }
.check--ok .check__i { color: var(--good-icon); }
.check--warn .check__i { color: var(--warn-icon); }
.check--bad .check__i { color: var(--bad-icon); }
.check--wait .check__i { color: var(--fg-muted); }
/* several sites: two columns on wider screens only when they pair up evenly (no orphan) */
@media (min-width: 40rem) {
  .sites:has(> .site:nth-child(even):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.work { display: grid; margin: 0; padding: 0; list-style: none; }
.work__i { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.work__i:first-child { padding-top: 0; border-top: 0; }
.work__d { font: var(--w-ui) .875rem/1.55 var(--font-sans); color: var(--fg-muted); }
.work__t { line-height: 1.55; overflow-wrap: anywhere; }

/* ---------- 9 · buttons (the hub's pill idiom), fields ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-button);
  font: var(--w-ui) 1rem/1.15 var(--font-sans); letter-spacing: -.004em; text-align: center;
  cursor: pointer; user-select: none;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: .875rem; }
.btn--wide { width: 100%; }
.btn--primary { color: var(--on-brand); background: var(--grad-brand); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .22), var(--shadow-2); }
.btn--ghost { color: var(--fg); background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }

.field { display: grid; gap: 6px; }
.field__label { font: var(--w-ui) .9375rem/1.3 var(--font-sans); }
.field__input {
  width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--r-sm);
  background: var(--bg-raised); color: var(--fg); font: inherit; font-size: 1rem;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
/* a text field shows it is active by its border in every mode (not a ring) */
.field__input:focus { box-shadow: inset 0 0 0 2px var(--brand); }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad-icon); }
.field__input--code { font: 600 1.375rem/1 var(--font-mono); letter-spacing: .24em; font-variant-numeric: tabular-nums; }

/* ---------- 10 · sign-in and error pages (also PR's errors.mjs: body.plain > main.plain-main) ---------- */
.plain { display: grid; align-content: start; justify-items: center; gap: 20px; padding: 28px 16px 48px; }
.plain-head { width: min(100%, 26rem); }
.plain-logo { display: block; width: auto; height: 24px; }
.plain-main {
  display: grid; gap: 16px; width: min(100%, 26rem); padding: 26px 20px 24px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
}
.plain-main h1, .plain-h {
  font: var(--w-heading) clamp(1.625rem, 1.35rem + 1.2vw, 2rem)/1.1 var(--font-sans-heavy);
  letter-spacing: var(--track-heading); text-wrap: balance;
}
.plain-main p { line-height: 1.55; text-wrap: pretty; }
.plain-main a:not(.btn) { color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plain-form { display: grid; gap: 14px; margin: 0; }
.plain-note { font-size: .875rem; color: var(--fg-muted); }
.plain-err {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--bad-icon) 10%, transparent); font-weight: var(--w-ui); line-height: 1.45;
}
.plain-err__i { flex: none; margin-top: 3px; color: var(--bad-icon); }
@media (min-width: 40rem) {
  .plain { min-height: 100svh; align-content: center; padding-block: 40px; }
  .plain-main { padding: 32px 30px 30px; }
  .plain-logo { height: 28px; }
}

/* ---------- 11 · months, chooser, the email preference ---------- */
.months, .chooser { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.months__a, .chooser__a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 18px;
  border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.months__a { min-height: 56px; font: var(--w-ui) 1rem/1.25 var(--font-sans); }
.chooser__a { min-height: 64px; font: var(--w-strong) 1.0625rem/1.25 var(--font-sans); overflow-wrap: anywhere; }
.months__a:active, .chooser__a:active { background: var(--wash-2); }
.chooser__n { min-width: 0; }

.panel {
  display: grid; justify-items: start; gap: 12px; padding: 18px 16px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.pref__state { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; }
.pref__i--on { color: var(--good-icon); }
.pref__i--off { color: var(--fg-muted); }
.pref__txt { color: var(--fg-muted); line-height: 1.5; }
.pref { margin: 0; }
@media (min-width: 40rem) {
  .panel { padding: 22px 24px; }
}

/* ---------- details: every disclosure has the same marker (a chevron that turns when open) ---------- */
summary { min-height: 44px; cursor: pointer; list-style: none; touch-action: manipulation; }
summary::-webkit-details-marker { display: none; }
.chart__table > summary, .note__sum, .switch__sum { display: inline-flex; align-items: center; gap: 8px; width: max-content; }
.chart__table > summary::after, .note__sum::after, .switch__sum::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-inline: 2px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6;
}
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); opacity: 1; }

/* ---------- 12 · hover: only where a real pointer hovers (no sticky hover after a tap) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--grad-brand-hover); }
  .btn--ghost:hover, .switch__sum:hover, .more__a:hover { background: var(--wash-2); }
  .switch__a:hover { background: var(--wash); }
  .switch__a[aria-current="page"]:hover { background: var(--brand-soft); }
  .months__a:hover, .chooser__a:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-2); }
  .field__input:hover:not(:focus) { box-shadow: inset 0 0 0 1px var(--fg-muted); }
  summary:hover::after { opacity: 1; }
  .foot__btn:hover, .link:hover { text-decoration-thickness: 2px; }
}

/* ---------- 13 · motion: the one transition (the details marker's opacity) ---------- */
@media (prefers-reduced-motion: no-preference) {
  summary::after { transition: opacity 160ms var(--e-out); }
}

/* ---------- 14 · tour (SPEC-TOUR): "How to read this page", the first-visit line, the click-guided tour ----------
   public/tour.js builds the overlay and sets positions as transforms; only opacity moves, inside the no-preference guard
   at the end. Focus rings follow the page's keyboard mode (section 3). */
:root {
  --z-tour: 300;
  --tour-dim: light-dark(rgb(20 16 31 / .5), rgb(0 0 0 / .62));
}
/* the head's tour line: the plain link and the first-visit offer share one grid cell, so the line has one height whichever
   shows; tour.js adds .is-on (no answer stored in this browser) and the offer takes the link's place. No layout shift on a
   first or a later visit, no empty band on a later one. One line down to 320px (the question drops below 380px). */
.tour-offer { display: grid; justify-items: start; align-items: center; font-size: .9375rem; color: var(--fg-muted); }
.tour-offer > * { grid-area: 1 / 1; }
.tour-offer:not(.is-on) .tour-offer__first, .tour-offer.is-on .tour-offer__link { visibility: hidden; }
.tour-offer__first { display: flex; align-items: center; gap: 0 12px; white-space: nowrap; }
.tour [hidden] { display: none; }
.tour-offer__link, .tour-offer__a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 379.98px) {
  .tour-offer__t { display: none; }
}
.tour-offer__no { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--fg-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the docked card's height (tour.js): room under the page's last line */
.is-touring body { padding-bottom: var(--tour-dock, 0px); }
.tour { position: relative; z-index: var(--z-tour); opacity: 0; }
.tour.is-on { opacity: 1; }
.tour__shade { position: fixed; inset: 0; z-index: var(--z-tour); }
.tour--text .tour__shade { background: var(--tour-dim); }
.tour__ring {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r-md); pointer-events: none;
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 5px var(--bg-raised), 0 0 0 100vmax var(--tour-dim);
}
.tour--text .tour__ring { display: none; }
.tour__card {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-tour) + 1); width: min(22rem, calc(100% - 32px));
  display: grid; gap: 14px; padding: 18px 18px 16px; border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3);
  opacity: 0;
}
.tour__card.is-in { opacity: 1; }
.tour__card.is-docked {
  top: auto; right: 0; bottom: 0; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.tour__card.is-docked.is-top { top: 0; bottom: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.tour__count { font: var(--w-strong) .75rem/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }
.tour__title { margin-top: 8px; padding-right: 72px; font: var(--w-heading) 1.125rem/1.25 var(--font-sans-heavy); letter-spacing: var(--track-tight); text-wrap: balance; }
.tour__body { margin-top: 6px; line-height: 1.5; text-wrap: pretty; }
.tour__hint { margin-top: 8px; font-size: .875rem; color: var(--fg-muted); }
.tour__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tour__x {
  position: absolute; top: 8px; right: 8px; padding: 0 12px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--fg-muted); font: var(--w-ui) .875rem/1 var(--font-sans); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .tour__x:hover, .tour-offer__no:hover { color: var(--fg); }
}
@media (prefers-reduced-motion: no-preference) {
  .tour, .tour__card { transition: opacity 240ms var(--e-out); }
}