/* Built by `npm run css` from apps/web/styles/layout/*.css: edit those files, not this one. */
/* Layout v3 (cycle 21, owner: "needs major spacing / merging"): fewer, clearer surfaces.
   Panels group what belongs together; a summary comes first; long lists become timelines;
   legal detail is one compact table per page. Tokens in tokens.css; motion in motion.css. */

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

.wrap.wide { max-width: var(--wide); }

/* ---------- panels: one surface per idea ---------- */
.panel { background: var(--color-surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-4); box-shadow: var(--shadow-1); }
.panel > h2:first-child, .panel > summary:first-child { margin-top: 0; }
.panel > h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
details.panel { border-top: 1px solid var(--hairline); }
details.panel > summary { margin: 0; }
details.panel[open] > summary { margin-bottom: var(--space-3); }
@media (max-width: 760px) { .panel { padding: var(--space-4); border-radius: var(--radius-lg); } }

/* ---------- three-area screens: more air, the rail as a calm summary ---------- */
.screen { gap: 0 var(--space-6); padding-block: var(--space-5) var(--space-8); }
.screen-head { margin-bottom: var(--space-5); }
.screen-head h1 { font-size: var(--text-display-m); }
.screen-main > :first-child { margin-top: 0; }
/* The rail is the screen's one raised surface: the answer and the action. */
.rail-card { border-radius: var(--radius-xl); padding: var(--space-5); background: linear-gradient(180deg, color-mix(in srgb, var(--color-plan) 5%, var(--color-surface-1)), var(--color-surface-1) 45%); }
.screen-rail .hero { margin-bottom: var(--space-3); }
.rail-h { font-size: var(--text-sm); text-transform: none; }
.screen-rail { top: 92px; }

/* ---------- the route: numbered stops ---------- */

/* ---------- figure tiles ("What it takes") ---------- */
.takes { margin-top: var(--space-5); }

/* One grouped surface, divided, rather than a box per figure. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 0; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.tile { padding: var(--space-3) var(--space-4); background: var(--color-surface-1); min-width: 0; }
.tile dt { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-1); }
.tile dd { margin: 0; }

/* ---------- a switch, as one card ---------- */
.switch-card { position: relative; background: var(--color-surface-1); border: 1px solid var(--hairline); box-shadow: var(--shadow-1); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6) var(--space-4); margin: 0 0 var(--space-4); }
.sc-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-2); }

.sc-title { flex: 1; min-width: 0; }
.sc-bank { margin: 0; font: 600 var(--text-sm)/1.4 var(--font-text); color: var(--color-engine); }
.sc-title h2 { margin: 2px 0 0; font-size: var(--text-xl); }
.sc-pay { margin: 0; text-align: right; display: grid; justify-items: end; }
.sc-pay strong { font: 700 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--track-title); color: var(--color-money); }
.sc-pay span { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.sc-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); }
.sc-sub { margin: 0 0 var(--space-2); }
.sc-foot { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.sc-foot form { display: inline; }
@media (max-width: 560px) { .switch-card { padding: var(--space-4); } .sc-head { flex-wrap: wrap; } .sc-pay { width: 100%; justify-items: start; text-align: left; padding-left: 48px; } }

/* Conditions: what to do in plain words, the clause as a quiet line. Numbered (cycle 49), never drawn as boxes: nothing
   here can be ticked, so nothing may look tickable. The count runs on through "Show all". */
.switch-card{ counter-reset: cond; }
.switch-card .conds li{ position: relative; padding: var(--space-3) 0 var(--space-3) 2.25rem; counter-increment: cond; }
.switch-card .conds li::before{ content: counter(cond); position: absolute; left: 0; top: calc(var(--space-3) + 1px); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 600 var(--text-xs)/1 var(--font-text); color: var(--color-text); background: var(--fill-strong); font-variant-numeric: tabular-nums; }
.cond-note { font-size: var(--text-sm); margin-top: 2px; }
.switch-card details.more-conds { border-top: 1px solid var(--hairline); }

/* ---------- steps as a timeline, coloured by who acts ---------- */
.steps.track { position: relative; }
.steps.track li { position: relative; grid-template-columns: 9.5rem 1fr; gap: var(--space-4); padding: var(--space-3) 0 var(--space-3) 0; border-top: 0; }
.steps.track li + li { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-border) 60%, transparent); }

.steps.track li::after { content: ""; position: absolute; left: calc(9.5rem + var(--space-4) + 8px); top: 0; bottom: 0; width: 2px; background: var(--color-border); }
.steps.track li:first-child::after { top: 20px; } .steps.track li:last-child::after { bottom: calc(100% - 20px); }
  
/* Cycle 114 (V4.41): who acts reads from a 6 px dot in the role's colour; the word stays in muted ink (text never wears
   a series colour). A bank's payment is money in: its amount in the done colour (V4.39). */
.st-you .who, .st-switch .who, .st-bank .who { color: var(--color-text-muted); }
.st-you .who::before, .st-switch .who::before, .st-bank .who::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.st-you .who::before { background: var(--viz-you); } .st-switch .who::before { background: var(--viz-switch); } .st-bank .who::before { background: var(--viz-bank); }
.st-text { display: block; margin-top: 2px; }

@media (max-width: 760px) {
  .steps.track li { grid-template-columns: 1fr; gap: 2px; padding-left: 26px; }
  .steps.track li::after { left: 8px; }
   
}

/* ---------- "Before you start" in two columns ---------- */
.tick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
.tick-grid li:nth-child(2) { border-top: 0; }
@media (max-width: 760px) { .tick-grid { grid-template-columns: 1fr; } .tick-grid li:nth-child(2) { border-top: 1px solid var(--hairline); } }

/* ---------- Now: the one thing to do, as a focus card ---------- */
.focus { position: relative; margin-top: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--hairline);
  background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 70%), var(--color-surface-1); box-shadow: var(--shadow-2); }
.focus h1 { font-size: var(--text-display-s); }
.focus .row { margin-top: var(--space-3); }
.focus .focus-form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
@media (max-width: 760px) { .focus { padding: var(--space-4); } }
.done-list > summary { font-weight: 650; }

/* ---------- offers page: toolbar and cards ---------- */

.toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin: 0; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 550; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--color-accent); margin: 0; }
.toggle:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.toggle:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tb-status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Route stops share the row equally (they wrapped when a date range was long). */
.steps.track li { grid-template-columns: 10.5rem 1fr; }
.steps.track li::after { left: calc(10.5rem + var(--space-4) + 8px); }
@media (max-width: 760px) { .steps.track li { grid-template-columns: 1fr; } .steps.track li::after { left: 8px; } }
/* Notices line up with the page they belong to. */
.wrap.flush { max-width: var(--wide); padding-top: var(--space-3); }
/* Labels in sentence case (doctrine: uppercase mono only for dates and clause references). */
 .sc-sub { font: 650 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); }

/* Cycle 210 (QoL 5): read the situation from a statement. A promise list with ticks, then the facts as ticked rows
   (each one a full-width tap target), so keeping or dropping one is a single tap. */
.stmt .dz-file { display: grid; gap: var(--space-2); }
.stmt-promise { display: grid; gap: var(--space-2); margin: var(--space-4) 0; color: var(--color-text-muted); }
.stmt-promise li { display: flex; gap: var(--space-2); align-items: flex-start; }
.stmt-promise svg { flex: none; width: 20px; height: 20px; color: var(--color-done); margin-top: 0.15em; }
.stmt-help summary { cursor: pointer; font-weight: 600; }
.stmt-acct { border: 0; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.stmt-list { margin: var(--space-3) 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.stmt-list li + li { border-top: 1px solid var(--hairline); }
.stmt-list li { background: var(--color-surface-1); }
.stmt-list label { display: flex; gap: var(--space-3); align-items: center; min-height: 48px; padding: var(--space-2) var(--space-3); margin: 0; }
.stmt-list small { display: block; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Cycle 211 (big picture #10): the second number. Interest an offer gives access to sits under the headline figure,
   smaller and quieter, after a hairline: an addition you could have, never part of the total. The "+" is lighter
   than the figure so the eye reads it as "and", not as a sum. */
.also-interest { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.ai-fig { margin: 0; font: 650 var(--text-fig-s)/1.15 var(--font-display); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; color: var(--color-text); }
.ai-plus { font-weight: 400; color: var(--color-text-muted); margin-right: 0.15em; }
.ai-say { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 34rem; }
.sc-interest strong { font-weight: 600; color: var(--color-text); }
/* Cycle 216 (PSA): the allowance, under the interest it's about; amber only when it could pass it. */
.ai-psa { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 34rem; }
.ai-psa.is-over { color: var(--color-text); padding-left: var(--space-3); border-left: 2px solid var(--color-attention); }
/* ---------- cycle 21b: forms as a flow of numbered steps ---------- */
.form-flow { counter-reset: fstep; }
.form-flow > fieldset.fstep, .form-flow > fieldset:not(.qrow) { counter-increment: fstep; position: relative; margin: 0 0 var(--space-3); padding: var(--space-5) var(--space-6) var(--space-4) calc(var(--space-6) + 44px);
  background: var(--color-surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); min-width: 0; }
.form-flow > fieldset + fieldset { border-top: 1px solid var(--hairline); padding-top: var(--space-5); }
.form-flow > fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-2); font: 650 var(--text-lg)/1.35 var(--font-text); }
.form-flow > fieldset > legend + * { clear: both; }
.form-flow > fieldset::before { content: counter(fstep); position: absolute; left: var(--space-5); top: var(--space-5); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--fill-strong); color: var(--color-text); font: 600 var(--text-xs)/1 var(--font-text); font-variant-numeric: tabular-nums; }
.form-flow > fieldset:focus-within { border-color: color-mix(in srgb, var(--color-plan) 40%, transparent); }
.form-flow > fieldset:focus-within::before { background: var(--color-plan); color: var(--color-bg); }
.form-flow .yn .hint { clear: both; margin-bottom: var(--space-3); }
.form-flow .choices { margin-top: var(--space-1); }
.form-flow > section.q-group { border-radius: var(--radius-xl); margin: 0 0 var(--space-3); }
.form-flow details.card { border-radius: var(--radius-xl); }
@media (max-width: 560px) { .form-flow > fieldset.fstep, .form-flow > fieldset:not(.qrow) { padding: var(--space-4) var(--space-4) var(--space-3) calc(var(--space-4) + 40px); } .form-flow > fieldset::before { left: var(--space-3); top: var(--space-4); width: 28px; height: 28px; } }

/* The save button stays in reach on long forms. */
.form-actions { position: sticky; bottom: 0; z-index: 4; margin: var(--space-4) calc(-1 * var(--space-2)) 0; padding: var(--space-3) var(--space-2); gap: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, transparent, var(--color-bg) 30%); }
.form-actions .hint { margin: 0; flex: 1 1 18rem; }
body.has-tabbar .form-actions { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 761px) { body.has-tabbar .form-actions { bottom: 0; } }

/* Rail beside a form: what happens next, what's never asked. */
.rail-points { margin: 0; padding: 0; list-style: none; counter-reset: rp; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.rail-points li { counter-increment: rp; position: relative; padding-left: 34px; }
.rail-points li::before { content: counter(rp); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fill-strong); font: 600 var(--text-xs)/1 var(--font-text); color: var(--color-text); font-variant-numeric: tabular-nums; }
.never { display: grid; gap: 6px; font-size: var(--text-sm); }
.never li { position: relative; padding-left: 26px; }
.never li::before { content: "✕"; position: absolute; left: 4px; color: var(--color-problem); font-weight: 700; }

/* Quick check result */
.check-offer .quick { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); }
.assume-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3) var(--space-5); margin: var(--space-3) 0; }
.assume-grid h3 { margin-top: 0; }
.assume-grid ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.also-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.also-grid li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--fill); font-size: var(--text-sm); }
.also-amt { display: block; font: 700 var(--text-xl)/1.2 var(--font-display); color: var(--color-money); margin: 2px 0 var(--space-1); }
.change-answers { margin-top: var(--space-5); }
.change-answers > summary { color: var(--color-text); }

/* History */

.form-actions { background: var(--material); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid var(--hairline); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-inline: var(--space-3); margin-inline: 0; }
details.explain { border-top: 0; }
/* On phones a form comes first; what happens next follows it. */
@media (max-width: 999px) { .screen:has(.form-rail) { grid-template-areas: "head" "main" "rail"; } .screen:has(.form-rail) .screen-rail { margin-top: var(--space-4); } }
@media (max-width: 560px) { .form-actions .hint { display: none; } .form-actions > button { flex: 1 1 100%; } }

/* ---------- cycle 22: what an offer asks for, as chips ---------- */
.needs { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.needs li { font: 550 var(--text-xs)/1.3 var(--font-text); padding: 5px 10px; border-radius: var(--radius-pill); background: var(--fill); color: var(--color-text); white-space: nowrap; }

/* One offer's own page */
.crumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.crumbs a { color: var(--color-text-muted); }
/* Conditions here are facts about the offer, not tasks: numbered, never drawn as boxes that look tickable. */
.conditions-panel .conds { counter-reset: cond; }
.conditions-panel .conds li { position: relative; padding: var(--space-3) 0 var(--space-3) 2.25rem; counter-increment: cond; }
.conditions-panel .conds li::before { content: counter(cond); position: absolute; left: 0; top: calc(var(--space-3) + 1px); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 600 var(--text-xs)/1 var(--font-text); color: var(--color-text); background: var(--fill-strong); font-variant-numeric: tabular-nums; }
details.tech { margin-top: var(--space-4); border-top: 0; }
details.tech > summary { font-size: var(--text-sm); color: var(--color-text-muted); }
.fingerprint { margin: var(--space-2) 0 0; }
@media (min-width: 40rem) { .panel .fit { grid-template-columns: 1fr 1fr; } }

/* ---------- cycle 26: the offers as one comparison table ---------- */

.ot-wrap { border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: var(--space-6); }
.offer-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.offer-table thead th { padding: 14px var(--space-4); background: none; border-bottom: 1px solid var(--hairline); font: 600 var(--text-xs)/1.3 var(--font-text); letter-spacing: var(--track-caption); color: var(--color-text-muted); white-space: nowrap; }
.offer-table td, .offer-table tbody th { padding: var(--space-4); border-bottom: 1px solid var(--hairline); vertical-align: top; text-align: left; font-weight: 400; }
.offer-table tbody tr:last-child > * { border-bottom: 0; }
.offer-table .num { text-align: right; }
.ot-row { transition: background-color var(--dur-base, .28s) var(--ease-soft, ease); }
@media (hover: hover) and (pointer: fine) { .ot-row:hover { background: color-mix(in srgb, var(--color-plan) 5%, transparent); } }
.ot-row th a { display: grid; gap: 2px; color: var(--color-text); text-decoration: none; }
.ot-row th a:hover .ot-prod { text-decoration: underline; }
.ot-bank { font: 600 var(--text-xs)/1.3 var(--font-text); color: var(--color-engine); }
.ot-prod { font: 650 var(--text-md)/1.3 var(--font-text); }
.offer-table .offer-amount { display: block; margin: 0; font: 700 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--track-title); color: var(--color-money); white-space: nowrap; }
.ot-sub { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
.ot-warn { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-attention); }
.ot-none { color: var(--color-text-muted); }
.offer-table td strong { font: 650 var(--text-md)/1.3 var(--font-text); color: var(--color-text); }
.offer-table .needs { margin: 0; }
.ot-paid { color: var(--color-text-muted); max-width: 14rem; }
.ot-go { width: 48px; text-align: center; }
.ot-go a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); border: 0; color: var(--color-plan); text-decoration: none; transition: transform var(--dur-base, .28s) var(--ease-settle), border-color var(--dur-base, .28s); }
@media (hover: hover) and (pointer: fine) { .ot-row:hover .ot-go a { transform: translateX(3px); background: color-mix(in srgb, var(--color-plan) 16%, transparent); } }
@media (max-width: 900px) {
  .ot-wrap { border: 0; background: none; overflow: visible; }
  .offer-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .offer-table, .offer-table tbody { display: block; }
  .offer-table tr.ot-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); padding: var(--space-4); margin-bottom: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); }
  .offer-table tr.ot-row > * { display: block; padding: 0; border: 0; }
  .offer-table tr.ot-row > th { grid-column: 1; }
  .offer-table tr.ot-row > td.num { grid-column: 2; grid-row: 1; }
  .offer-table tr.ot-row > td:not(.num):not(.ot-go) { grid-column: 1 / -1; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--hairline); }
  .offer-table tr.ot-row > td:not(.num):not(.ot-go)::before { content: attr(data-label); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
  .offer-table .ot-go { display: none !important; }
  .ot-paid { max-width: none; }
}
.offer-table tbody th { font: 400 var(--text-sm)/1.4 var(--font-text); text-transform: none; letter-spacing: 0; color: var(--color-text); }
.offer-table tbody th .ot-prod { font: 650 var(--text-md)/1.3 var(--font-text); text-transform: none; letter-spacing: 0; }
.offer-table td .ot-none { font-size: var(--text-sm); }

/* ---------- cycle 27: bank marks (initials in each bank's colour; not logos) ---------- */
.bm { /* Bank marks (cycle 110, V4/P1): one size variable sets the box, the corner and the letters, so a mark is the same
   drawing at every size. Marks are graphics (the bank's name is beside or inside them as text), not body copy. */
  --bm: 40px; flex: none; display: inline-grid; place-items: center; width: var(--bm); height: var(--bm); border-radius: calc(var(--bm) * .3);
  font: 800 calc(var(--bm) * .325 + .5px)/1 var(--font-text); letter-spacing: -.02em; color: var(--mark-ink); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--mark-ring); }
.bm-lg { --bm: 48px; }
.bm-xl { --bm: 64px; }
.bm-santander { background: var(--bank-santander); }
.bm-hsbc { background: var(--bank-hsbc); }
.bm-first-direct { background: var(--bank-first-direct); box-shadow: inset 0 0 0 1px var(--mark-ring-strong); font-style: italic; }
.bm-lloyds { background: var(--bank-lloyds); }
.bm-natwest { background: var(--bank-natwest); }
.bm-rbs { box-shadow: inset 0 0 0 1px var(--mark-ring-strong); background: var(--bank-rbs); font-size: calc(var(--bm) * .27 + .5px); }
.bm-nationwide { background: var(--bank-nationwide); box-shadow: inset 0 -4px 0 var(--bank-nationwide-red); }
.bm-barclays { background: var(--bank-barclays); color: var(--bank-barclays-ink); }
/* Cycle 128 (W1.5): every bank in a grid has a mark; an unknown one is drawn in ink, never white on a pale fill. */
.bm-halifax { background: var(--bank-halifax); } .bm-bank-of-scotland { background: var(--bank-bank-of-scotland); font-size: calc(var(--bm) * .27 + .5px); }
.bm-co-op { background: var(--bank-co-op); color: var(--bank-co-op-ink); } .bm-metro { background: var(--bank-metro); } .bm-monzo { background: var(--bank-monzo); color: var(--bank-monzo-ink); }
.bm-starling { background: var(--bank-starling); } .bm-tsb { background: var(--bank-tsb); font-size: calc(var(--bm) * .27 + .5px); } .bm-ulster-bank { background: var(--bank-ulster-bank); }
.bm-virgin-money { background: var(--bank-virgin-money); }
.bm-other { background: var(--fill-strong); color: var(--color-text); }
/* A mark under 3:1 against the page gets an edge (WCAG 1.4.11), as an outline so it never fights a mark's own shadow.
   test/tokens.test.ts computes which marks need it in each theme. */
:root:not([data-theme="light"]) :is(.bm-hsbc-premier, .bm-natwest-premier, .bm-first-direct, .bm-lloyds, .bm-natwest, .bm-rbs, .bm-nationwide, .bm-halifax, .bm-bank-of-scotland, .bm-starling, .bm-tsb, .bm-ulster-bank, .bm-barclays-premier) { outline: 1px solid var(--mark-edge); outline-offset: -1px; }
:root[data-theme="light"] :is(.bm-barclays, .bm-co-op, .bm-monzo) { outline: 1px solid var(--mark-edge); outline-offset: -1px; }

/* In the table, the landing list and an offer's own page */
.ot-offer { display: flex !important; align-items: center; gap: 14px; }
.ot-names { display: grid; gap: 2px; min-width: 0; }
.od-title { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.od-title .eyebrow { margin-bottom: var(--space-1); } .od-title h1 { margin: 0; }
.ol-row a::before { content: none !important; }
.ol-row a > .bm { --bm: 36px; grid-area: n; }
.ol-row a { grid-template-columns: 36px minmax(0, 1fr) auto auto !important; }
@media (max-width: 480px) { .ol-row a { grid-template-columns: 36px minmax(0, 1fr) auto !important; } }

/* Cycle 29: a row of page actions keeps its distance from the card that follows (/start). */
.wrap > .row + .card { margin-top: var(--space-6); }

/* ---------- cycle 30: one raised surface per screen ----------
   Beside a summary rail, the rail (and Now's focus card) carry the answer and the action; the content
   next to them reads as plain sections divided by a hairline, not as more boxes competing for attention.
   Each switch keeps its own card: it is one object you act on. */
.screen-main > .panel { background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; box-shadow: none; padding: var(--space-5) 0; margin: 0; }
.screen-main > .panel:first-child { border-top: 0; padding-top: var(--space-2); }
.screen-main > .switch-card + .panel, .screen-main > .focus + .panel { border-top: 0; }
details.panel.done-list { padding-block: var(--space-4); }
@media (max-width: 760px) { .screen-main > .panel { padding: var(--space-4) 0; } }

/* ---------- cycle 31 ---------- */
/* Quick check result: the other offers as small cards that open the offer's page. */
.also-grid li { padding: 0; border: 0; background: none; }
.also-card { display: grid; gap: var(--space-2); height: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--fill); color: inherit; text-decoration: none; }
.also-top { display: flex; align-items: center; gap: var(--space-3); }
.also-name { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); min-width: 0; }
.also-card .also-amt { margin: 0; }
@media (hover: hover) and (pointer: fine) { .also-card:hover { background: var(--fill-strong); } }
/* Quick check: how many answers are given, beside the button. */
.qc-progress { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.qc-progress svg { flex: none; transform: rotate(-90deg); }
.qc-ring-bg { fill: none; stroke: var(--hairline-strong); stroke-width: 2.5; }
.qc-ring { fill: none; stroke: var(--color-plan); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.qc-progress.is-done { color: var(--color-done); } .qc-progress.is-done .qc-ring { stroke: var(--color-done); }
@media (max-width: 560px) { .form-actions .qc-progress { order: -1; flex: 1 1 100%; justify-content: center; } }
/* Header: the theme switch as an icon (its name is its label and tooltip). */
.theme-icon { width: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--color-text-muted); background: var(--fill); border: 0; }
@media (hover: hover) and (pointer: fine) { .theme-icon:hover { color: var(--color-text); background: var(--fill-strong); } }
/* How it works: what it does (ticks) and never does (crosses), at reading size. */
.card > ul.does, .card > ul.never, .hw-two ul.does, .hw-two ul.never { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-md); }
.card > ul.does li, .card > ul.never li, .hw-two ul.does li, .hw-two ul.never li { position: relative; padding-left: 32px; }
.card > ul.does li::before, .hw-two ul.does li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--color-done); font-weight: 700; }
.card > ul.never li::before, .hw-two ul.never li::before { left: 6px; }
/* Direct Debits at a glance: marks so the table scans (the words stay). */
.dd-table caption { text-align: left; font: 650 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); padding: 0 0 var(--space-2); }
.dd-table td, .dd-table th { vertical-align: middle; }
.dd-offer { display: inline-flex; align-items: center; gap: 10px; }
.dd-offer .bm { --bm: 28px; }
/* Cycle 89: in the Direct Debits table a "Yes" can be a stricter rule ("household bills only"), so it isn't green or ticked. */
.yn.is-yes { color: var(--color-text); font-weight: 650; }
.yn.is-no, .yn.is-none { color: var(--color-text-muted); }
.dd-table td strong { white-space: nowrap; }
.dd-table .dd-na { text-align: left; }
.dd-key { margin-top: var(--space-3); }

/* ---------- cycle 32: choosing your bank as tiles, not a drop-down (owner: "terrible") ----------
   Every bank in view, one tap to choose, a clear selected state. Native radio buttons underneath:
   arrow keys move between banks, screen readers hear one group, and it works without script. */
.bank-pick { border: 0; padding: 0; margin: var(--space-1) 0 var(--space-4); min-width: 0; }
.bank-pick > legend { padding: 0; margin: 0 0 var(--space-2); font-weight: 600; }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr)); gap: var(--space-2); } /* cycle 114 (V4.9): wider tiles, so no bank name wraps */
.bank-tile { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--fill); border: 1px solid transparent; font-weight: 550; font-size: var(--text-sm); line-height: 1.25; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.bank-tile input { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); background: transparent; display: grid; place-items: center; cursor: pointer; }
.bank-tile input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-accent); transform: scale(0); }
.bank-tile input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.bank-tile input:checked::before { transform: scale(1); }
.bank-tile:has(input:checked) { background: color-mix(in srgb, var(--color-accent) 13%, transparent); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.bank-tile:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bank-tile input:focus-visible { outline: none; }
.bank-tile .bm { --bm: 22px; box-shadow: none; flex: none; }
/* Cycle 125 (V3.11): the rest of the banks, one tap away; every option in full ink. */
.bank-more { border-top: 0; margin-top: var(--space-2); }
.bank-more > summary { min-height: 44px; font-weight: 600; color: var(--color-plan); }
.bank-more > summary::before { content: none; }
.bank-more[open] > summary { margin-bottom: var(--space-2); }
@media (hover: hover) and (pointer: fine) { .bank-tile:hover { background: var(--fill-strong); } .bank-tile:has(input:checked):hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } }
@media (max-width: 560px) { .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dd-field input { max-width: 12rem; }
/* On phones the tiles use the panel's full width (the step number column would leave them too narrow). */
@media (max-width: 560px) { .form-flow > fieldset .bank-pick { margin-left: -40px; } .bank-tile { padding: 0 var(--space-3); gap: var(--space-2); } }

/* ---------- cycle 33: the offers page (apple-design) ---------- */
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg-opts { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--fill); }
.seg-opts label { position: relative; z-index: 1; margin: 0; display: inline-flex; cursor: pointer; }
/* The real radio covers its whole label (invisible), so the control's own target is the label's size (WCAG 2.5.8). */
.seg-opts input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.seg-opts label span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: color-mix(in srgb, var(--color-text) 86%, transparent); white-space: nowrap; transition: color var(--motion-fast) var(--ease-settle); }
.seg-opts input:checked + span { color: var(--color-text); }
/* Cycle 110 (V0.15): unchosen options in (nearly) full ink, so they don't read as disabled; the chosen one sits on a raised
   thumb: surface-2 with a hairline in dark, white with a shadow in light. */
.seg-opts:not(.has-thumb) input:checked + span { background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 3px rgb(0 0 0 / .35); }
.seg-opts input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.seg-thumb { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--radius-sm); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 3px rgb(0 0 0 / .35); pointer-events: none; }
:root[data-theme="light"] .seg-thumb, :root[data-theme="light"] .seg-opts:not(.has-thumb) input:checked + span { background: var(--knob); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 3px 8px rgb(0 0 0 / .1); }
@media (prefers-reduced-motion: no-preference) { .seg-opts.is-ready .seg-thumb { transition: transform .32s var(--ease-settle), width .32s var(--ease-settle); } }
@media (hover: hover) and (pointer: fine) { .seg-opts label:hover span { color: var(--color-text); } }
.offer-table tr.ot-row[hidden] { display: none !important; }
.ot-empty { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--fill); text-align: center; }

/* The trade-off: reward (up) against money to pay in (across). Top left gives the most for the least. */
.ofc { margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6) var(--space-4); border-radius: var(--radius-xl); background: var(--color-surface-1); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-2); }
.ofc-head h2 { margin: 0 0 var(--space-1); }
.ofc-head p { margin: 0 0 var(--space-4); color: var(--color-text-muted); max-width: 52rem; }
.ofc-plot { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--space-3); }
.ofc-y { position: relative; grid-row: 1; grid-column: 1; }
.ofc-y span { position: absolute; right: 0; transform: translateY(50%); font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-text-muted); }
.ofc-area { position: relative; grid-row: 1; grid-column: 2; height: 340px; margin: 22px 0 6px; border-left: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); }
.ofc-y { margin: 22px 0 6px; }
.ofc-gy { position: absolute; left: 0; right: 0; height: 1px; background: var(--hairline); }
.ofc-gx { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.ofc-best { position: absolute; left: 12px; top: 8px; font-size: var(--text-xs); font-weight: 650; color: var(--color-done); padding: var(--space-1) 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-done) 12%, transparent); }
.ofc-x { position: relative; grid-row: 2; grid-column: 2; height: 18px; }
.ofc-x span { position: absolute; transform: translateX(-50%); font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
.ofc-xt { grid-row: 3; grid-column: 2; margin: var(--space-2) 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.ofc-pt { position: absolute; z-index: 1; display: flex; align-items: center; gap: var(--space-2); transform: translate(-18px, 50%); color: var(--color-text); text-decoration: none; }
.ofc-pt .bm { --bm: 36px; box-shadow: 0 0 0 3px var(--color-surface-1), 0 6px 16px -6px rgb(0 0 0 / .6); }
.ofc-name { font-size: var(--text-sm); font-weight: 650; white-space: nowrap; text-shadow: 0 0 6px var(--color-surface-1), 0 0 2px var(--color-surface-1); }
.ofc-pt.is-right { flex-direction: row-reverse; transform: translate(calc(-100% + 18px), 50%); }
.ofc-tip { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 3; display: grid; gap: 2px; width: max-content; max-width: 16rem; padding: 10px var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop); font-size: var(--text-xs); color: var(--color-text-muted); opacity: 0; transform: translateY(4px) scale(.98); transform-origin: bottom left; pointer-events: none; }
.ofc-tip strong { font-size: var(--text-sm); color: var(--color-text); }
.ofc-pt.is-right .ofc-tip { left: auto; right: 0; transform-origin: bottom right; }
.ofc-pt:hover, .ofc-pt:focus-visible { z-index: 4; }
.ofc-pt:hover .ofc-tip, .ofc-pt:focus-visible .ofc-tip { opacity: 1; transform: none; }
.ofc-pt.is-out { opacity: .22; filter: grayscale(1); }
@media (prefers-reduced-motion: no-preference) {
  .ofc-tip { transition: opacity .16s var(--ease-settle), transform .16s var(--ease-settle); }
  .motion .ofc:not(.is-in) .ofc-pt { opacity: 0; transform: translate(-18px, 50%) scale(.7); }
  .motion .ofc:not(.is-in) .ofc-pt.is-right { transform: translate(calc(-100% + 18px), 50%) scale(.7); }
  .ofc-pt { transition: opacity .45s var(--ease-settle), transform .5s var(--ease-settle), filter .3s var(--ease-soft); }
}
@media (max-width: 760px) {
  .ofc { padding: var(--space-4); border-radius: var(--radius-xl); }
  .ofc-plot { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-2); }
  .ofc-area, .ofc-y { height: 280px; }
  .ofc-name { display: none; }
  .ofc-pt .bm { --bm: 30px; }
  .ofc-pt, .ofc-pt.is-right { transform: translate(-15px, 50%); flex-direction: row; }
}
@media (max-width: 760px) { .ofc-tip { display: none; } } /* on phones a tap opens the offer; the table says the rest */

/* ---------- cycle 34: the quick check (apple-design) ---------- */
/* What could fit, live beside the form: offers your answers rule out step back and say why. */
.fit-rail .fit-count { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.fit-rail .fit-count strong { font: 700 var(--text-2xl)/1 var(--font-display); color: var(--color-text); margin-right: var(--space-1); font-variant-numeric: tabular-nums; }
.fit-list { display: grid; gap: 2px; margin: 0 0 var(--space-3); }
.fit-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px var(--space-2); margin: 0 -8px; border-radius: var(--radius-md); }
.fit-item .bm { --bm: 30px; }
.fit-name { display: grid; min-width: 0; line-height: 1.25; }
.fit-name strong { font-size: var(--text-sm); }
.fit-why { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-amt { font: 650 var(--text-sm)/1 var(--font-text); color: var(--color-money); font-variant-numeric: tabular-nums; }
.fit-item.is-out .bm { filter: grayscale(1); opacity: .45; }
.fit-item.is-out strong, .fit-item.is-out .fit-amt { color: var(--color-text-muted); }
.fit-item.is-out .fit-why { color: var(--color-text-muted); }
.fit-note { margin: 0 0 var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .fit-item .bm, .fit-item strong, .fit-amt, .fit-why { transition: opacity .25s var(--ease-soft), filter .25s var(--ease-soft), color .25s var(--ease-soft); }
}
/* Yes / No as segmented controls; Direct Debits with − and +. */
.seg-yn { margin-top: var(--space-1); }
.seg-yn label span { min-width: 4.5rem; justify-content: center; min-height: 40px; font-size: var(--text-md); }
.stepper-field { display: inline-flex; align-items: center; gap: 6px; }
.stepper-field input { max-width: 5.5rem; text-align: center; -moz-appearance: textfield; }
.stepper-field.is-live input::-webkit-outer-spin-button, .stepper-field.is-live input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { width: var(--target-min); min-width: var(--target-min); padding: 0; border-radius: 50%; font-size: var(--text-xl); font-weight: 500; display: inline-grid; place-items: center; }
/* The room your money leaves, as you type. */
.qc-room { grid-column: 1 / -1; margin: var(--space-3) 0 0; padding: 10px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-done) 10%, transparent); color: var(--color-text); font-size: var(--text-sm); }
.qc-room.is-warn { background: color-mix(in srgb, var(--color-attention) 12%, transparent); }
/* The result's plan sits in its section without a second frame around it. */

/* ---------- cycle 35: the quick check, perfected ---------- */
/* The bank grid folds to the chosen bank; Change opens it again. */
.bank-pick.is-folded .bank-grid, .bank-pick.is-folded .bank-more { display: none; }
.bank-chosen { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); }
.bank-chosen::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); box-shadow: inset 0 0 0 6px var(--color-accent), inset 0 0 0 10px var(--color-on-accent); }
.bank-chosen-name { flex: 1; font-weight: 650; }
.bank-chosen .link { min-height: 40px; }
.bank-tile { min-height: 44px; }
/* A question that doesn't apply steps aside, saying why. */
.yn.is-skipped > .hint, .yn.is-skipped .seg-opts { display: none; }
.yn.is-skipped > legend { color: var(--color-text-muted); }
.yn-skip { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.yn-skip::before { content: "✓ "; color: var(--color-done); font-weight: 700; }
/* What could fit: one line per offer; a second line only to say why it's out. */
.fit-why:empty { display: none; }
.fit-item { padding-block: 5px; }
.qc-privacy { margin: var(--space-3) 0 0; font-size: var(--text-xs); }
@media (prefers-reduced-motion: no-preference) {
  .bank-chosen:not([hidden]), .yn-skip:not([hidden]) { animation: rise .28s var(--ease-settle) both; }
}

/* ---------- cycle 36: offers page, list first (mockup B, chosen by measurement) ---------- */
.of-head { margin: 0 0 var(--space-4); }
.of-head h1 { font-size: var(--text-display-s); margin: 0 0 6px; }
.of-meta { margin: 0; max-width: 62rem; color: var(--color-text-muted); }
/* Cycle 215 (DS-5): offers that opened this week, one quiet line above the table; the date is the bank's own. */
.of-new { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.of-new-k { font-weight: 600; margin-right: var(--space-2); }
.of-new a { font-weight: 600; color: var(--color-text); text-decoration-color: var(--color-text-muted); text-underline-offset: 0.2em; }
.of-new-d { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* What fits you: one row directly above the offers it filters. */
.of-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-3) 0; margin: 0 0 var(--space-3); border-bottom: 1px solid var(--hairline); }
.of-filters.is-live .of-apply { display: none; }
/* Cycle 65: the filters sit in one disclosure. Wide screens: always open, its summary hidden, the controls in the row.
   Phones: one row ("What fits you" and what's chosen) that opens the controls in place. */
.of-fit { flex: 1 1 100%; min-width: 0; border: 0; }
/* The results line: how many offers, Show all, and List or Chart on the right. */
.of-filters .tb-status { order: 1; }
.of-filters .of-views { order: 2; margin-left: auto; }
.of-fit > summary { display: none; }
.of-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.of-filters .of-fl { color: var(--color-text); }
.of-reset { margin-left: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-text, var(--color-plan)); }
.of-filters .tb-status { white-space: nowrap; margin: 0; }
/* The next step after the list: which of these you can get, and in what order. */
.of-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--hairline); }
.of-next > div { flex: 1 1 26rem; min-width: 0; }
.of-next h2 { margin: 0; font: 650 var(--text-md)/1.35 var(--font-text); color: var(--color-text); }
.of-next p { margin: var(--space-1) 0 0; max-width: 62ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.of-next .btn { flex: 0 0 auto; }
.of-filters .seg { display: flex; align-items: center; gap: 10px; }
.of-fl { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 550; white-space: nowrap; }
.of-filters .toggle { min-height: 40px; }
.of-views { margin-left: auto; }
.of-filters .tb-status { font-size: var(--text-sm); color: var(--color-text-muted); }
.seg-opts input:checked + span { color: var(--color-text); }
/* The list: one dense row per offer, the whole row opens the offer. */
.ot-wrap { margin-bottom: var(--space-5); }
.offer-table td, .offer-table tbody th { padding: var(--space-3) var(--space-4); vertical-align: middle; }
.offer-table thead th { padding: 10px var(--space-4); }
.offer-table tbody tr.ot-row { position: relative; }
.ot-offer::after { content: ""; position: absolute; inset: 0; }
.ot-offer:focus-visible { outline: none; }
.ot-row:has(.ot-offer:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.ot-names { gap: 0; }
.ot-names .ot-bank { font: 650 var(--text-md)/1.25 var(--font-text); color: var(--color-text); order: 0; }
.ot-names .ot-prod { font: 400 var(--text-xs)/1.3 var(--font-text) !important; color: var(--color-text-muted); }
.offer-table .offer-amount { font-size: var(--text-fig-s); }
.offer-table .needs { margin: 0 0 3px; gap: var(--space-1); }
.offer-table .needs li { font-size: var(--text-xs); padding: 3px var(--space-2); }
.ot-paid { display: block; max-width: none; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
.ot-none + .ot-paid { margin-top: 2px; }
.ot-go { width: 32px; color: var(--color-plan); }
.ot-go span { display: inline-block; transition: transform var(--dur-fast, .16s) var(--ease-settle); }
@media (hover: hover) and (pointer: fine) { .ot-row:hover .ot-go span { transform: translateX(3px); } }
.ot-sum { display: none; }
/* Not listed: fine print, like the bank details below it. */
/* Also checked (cycle 64): a quiet, dated reference under the offers; plain text, nothing greyed or struck through. */
.also-checked { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.ac-head h2 { font: 650 var(--text-md)/1.35 var(--font-text); margin: 0 0 var(--space-1); color: var(--color-text); }
.ac-head p { margin: 0 0 var(--space-3); max-width: 70ch; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); }
.ac-fold > summary { display: none; }
.ac-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.ac-list li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-3); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); line-height: 1.5; }
.ac-n { font-weight: 600; color: var(--color-text); }
.ac-f { color: var(--color-text-muted); }
.ac-stale { color: var(--color-attention); }
@media (max-width: 900px) {
  .ac-fold > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .ac-fold[open] > summary { border-bottom: 0; }
  .ac-list { grid-template-columns: 1fr; }
  .ac-list li { grid-template-columns: 1fr; gap: 2px; }
}
/* The chart view sits where the list was. */
.ofc { margin: 0 0 var(--space-5); }
@media (max-width: 900px) {
  /* Phones and narrow windows: a row per offer, name and reward on top, what it asks in one line below. */
  .offer-table tr.ot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) 14px; margin: 0; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; box-shadow: none; background: none; }
  .ot-wrap { border: 1px solid var(--hairline) !important; border-radius: var(--radius-xl); background: var(--color-surface-1) !important; overflow: hidden !important; box-shadow: var(--shadow-1); }
  .offer-table tbody tr.ot-row:first-child { border-top: 0; }
  .offer-table tr.ot-row > td:not(.num) { display: none !important; }
  .offer-table tr.ot-row > td.num { grid-column: 2; grid-row: 1; text-align: right; }
  .offer-table .offer-amount { font-size: var(--text-fig-s); }
  .ot-sum { display: block; margin: 6px 0 0 50px; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; }
  .ot-sum-paid { display: block; font-size: var(--text-xs); margin-top: 2px; }
  .of-filters { gap: var(--space-2) var(--space-3); align-items: flex-start; position: relative; }
  .of-fit { flex: 1 1 100%; }
  .of-filters:has(.of-views:not([hidden])) .of-fit > summary { margin-right: calc(8.5rem + var(--space-2)); }
  .of-filters .of-views:not([hidden]) { position: absolute; top: var(--space-3); right: 0; width: 8.5rem; }
  .of-filters .of-views .seg-opts { width: 100%; }
  .of-fit > summary { display: flex; align-items: center; gap: 2px var(--space-2); flex-wrap: wrap; min-height: 52px; padding: 6px var(--space-3); border-radius: var(--radius-md); background: var(--fill); cursor: pointer; list-style: none; }
  .of-fit > summary::before { order: 0; width: auto; }
  .of-fit-h { font-size: var(--text-sm); font-weight: 650; color: var(--color-text); }
  .of-fit-now { flex-basis: 100%; padding-left: 1.25rem; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
  .of-fit[open] > summary { margin-bottom: var(--space-3); }
  .of-ctrls { gap: var(--space-3); }
  .of-filters .of-views .seg-opts label span { min-height: 46px; }
  .of-filters .tb-status { flex-basis: 100%; margin: 0; }
  .of-filters .of-count { display: none; }
  .of-filters .tb-status:has(.of-reset:not([hidden])) { display: block; }
  .of-filters .tb-status:not(:has(.of-reset:not([hidden]))) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .of-reset { margin-left: 0; display: inline-flex; align-items: center; min-height: 44px; }
  .of-next { padding: var(--space-4); }
  .of-next .btn { width: 100%; justify-content: center; }
  .of-filters .seg { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .of-filters .seg-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .of-filters .seg-opts label span { justify-content: center; padding: 0 6px; width: 100%; }
  .of-filters .of-views { width: auto; flex-direction: row; margin-left: auto; }
  .of-filters .of-views .seg-opts { width: auto; }
}

.ot-row th a.ot-offer { gap: 14px; align-items: center; }
.of-count { font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  .ot-row th a.ot-offer { gap: var(--space-3); }
  .ot-sum { margin-left: 52px; }
  .ot-sum-paid { color: var(--color-text-muted); }
  .of-filters .tb-status { margin-left: 0; }
}
@media (max-width: 900px) { .offer-table tr.ot-row > td.num .ot-sub { display: none; } }

/* ---------- cycle 125: the quick check (V3.11–V3.15) ---------- */
/* One grouped surface: the five panels divided by hairlines, not five raised cards (V3.13). */
.qc-flow { background: var(--color-surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); }
.qc-flow > fieldset.fstep { margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.qc-flow > fieldset.fstep + fieldset.fstep { border-top: 1px solid var(--hairline); }
.qc-flow > fieldset.fstep:focus-within { border-color: var(--hairline); }
/* A panel's number turns into a tick once all of it is answered (V3.12). */
.qc-flow > fieldset.is-done::before { content: "✓"; background: var(--color-done); color: var(--color-bg); }
/* A panel with something missing is marked where it is, in the summary's words (V3.14). */
.qc-flow > fieldset.has-error { box-shadow: inset 4px 0 0 var(--color-problem); }
.field-err { clear: both; margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-problem); }
.err-card h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.err-card h2 svg { flex: none; color: var(--color-problem); }
.err-n { margin: var(--space-1) 0 var(--space-2); font-weight: 600; }
#err:focus { outline: none; } /* focused only so it is read out; its red edge already marks it */
/* Wide screens: the button and the count sit in the sticky rail, beside what could fit (V3.13). */
.qc-go { display: none; }
@media (min-width: 1000px) {
  .qc-go { display: grid; gap: var(--space-2); justify-items: center; margin: var(--space-3) 0 var(--space-4); }
  .qc-go > .primary { width: 100%; }
  .qc-flow .form-actions { display: none; }
}
/* Phones: the bar is inset, and everything in a panel shares one left edge (V3.12, V3.13). */
@media (max-width: 560px) {
  .qc-flow > fieldset.fstep { padding-left: var(--space-4); }
  .qc-flow > fieldset.fstep > legend { padding-left: 2.5rem; min-height: 28px; }
  .qc-flow > fieldset .bank-pick { margin-left: 0; }
  .qc-flow .form-actions { margin: var(--space-3) var(--space-2) var(--space-2); bottom: var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
}
/* What could fit, in two groups: could fit, and not for you yet with the reason (V3.15). */
.fit-h { margin: var(--space-3) 0 var(--space-1); font: 600 var(--text-sm)/1.4 var(--font-text); color: var(--color-text); }
.fit-h:first-of-type { margin-top: 0; }
.fit-hn { font-weight: 500; color: var(--color-text-muted); }
.fit-list.fit-out { margin-bottom: var(--space-2); }

/* ---------- cycle 42: the plan as cards (shared by the landing and the quick check) ----------
   One card per switch (what you do, on which day, ending with the day the bank pays), "then" between them, and what
   you keep. Each card carries its bank's colour as a glow, and a thread joins its steps. */
.pcs { max-width: 68rem; margin: var(--space-5) auto 0; display: flex; align-items: flex-start; gap: var(--space-3); }
.pc { position: relative; flex: 1 1 0; min-width: 0; padding: var(--space-4) var(--space-5) var(--space-3); border-radius: var(--radius-xl); background: var(--color-surface-1); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-2); overflow: hidden; }
.pc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; opacity: .4; pointer-events: none; background: linear-gradient(180deg, var(--pc-glow, var(--color-plan)), transparent); }
.pc-santander { --pc-glow: var(--bank-santander); } .pc-hsbc { --pc-glow: var(--bank-hsbc); } .pc-first-direct { --pc-glow: var(--glow-first-direct); } .pc-lloyds { --pc-glow: var(--glow-lloyds); }
.pc-natwest { --pc-glow: var(--glow-natwest); } .pc-rbs { --pc-glow: var(--glow-rbs); } .pc-nationwide { --pc-glow: var(--bank-nationwide-red); } .pc-barclays { --pc-glow: var(--bank-barclays); }
:root[data-theme="light"] .pc::before { opacity: .16; }
.pc-head { position: relative; display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.pc-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.pc-who small { font-size: var(--text-xs); color: var(--color-text-muted); }
.pc-who strong { font-size: var(--text-lg); font-weight: 650; }
.pc-amt { font: 700 var(--text-fig-m)/1 var(--font-display); letter-spacing: var(--track-title); color: var(--color-money); }
.pc-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 18px; }
.pc-steps::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 2px; border-radius: var(--radius-xs); background: linear-gradient(180deg, var(--hairline-strong), color-mix(in srgb, var(--color-done) 60%, transparent)); }
.pc-steps li { position: relative; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 10px; padding: var(--space-2) 0; font-size: var(--text-sm); }
.pc-steps li::before { content: ""; position: absolute; left: -18px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface-1); box-shadow: inset 0 0 0 2px var(--color-plan); }
.pc-steps time { font: 500 var(--text-xs)/1.6 var(--font-mono); color: var(--color-text-muted); }
.pc-steps li.is-paid::before { background: var(--color-done); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-done) 20%, transparent); }
.pc-steps li.is-paid span { color: var(--color-done); font-weight: 650; }
.pc-then { align-self: center; flex: none; font: 600 var(--text-sm)/1 var(--font-text); color: var(--color-text-muted); }
.pc-total { flex: .8 1 0; display: grid; align-content: start; gap: 6px; background: var(--color-surface-1); }
/* Cycle 125 (V3.5): what you keep, as the figure and the two lines it's made of. */
.pc-sum { margin: var(--space-2) 0 0; display: grid; gap: 2px; font-size: var(--text-sm); }
.pc-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-top: 1px solid var(--hairline); }
.pc-sum dt { color: var(--color-text-muted); } .pc-sum dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-total .pc-n { font-size: var(--text-xs); margin-top: var(--space-1); }
.pc-total::before { content: none; }
.pc-k { margin: 0; font-weight: 650; color: var(--color-heading); }
.pc-v { margin: 0; font: 700 var(--text-fig-l)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-n { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.pc-src { max-width: 62rem; margin: var(--space-3) auto 0; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
@media (max-width: 960px) { .pcs { flex-direction: column; } .pc-then { align-self: center; } .pc, .pc-total { flex: none; } } /* flex-basis 0 collapses stacked cards */
@media (max-width: 480px) { .pc { padding: var(--space-4); } .pc-steps li { grid-template-columns: 5.8rem minmax(0, 1fr); } }

/* ---------- cycle 46: your situation, in the quick check's vocabulary ---------- */
.seg-q { border: 0; margin: var(--space-4) 0 0; padding: 0; min-width: 0; }
.seg-q > legend { padding: 0; margin: 0 0 var(--space-2); font-weight: 600; }
.seg-q .seg-opts { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, auto); }
.seg-note { margin: var(--space-2) 0 0; max-width: 60ch; }
.seg-wide .seg-opts { grid-auto-columns: 1fr; width: 100%; max-width: 36rem; }
.seg-wide .seg-opts label span { white-space: normal; text-align: center; justify-content: center; min-height: 44px; padding: 6px var(--space-3); line-height: 1.3; }
.form-flow .dd-field { margin-top: var(--space-3); }
.form-flow > fieldset > details.more { margin-top: var(--space-4); }
@media (max-width: 560px) { .seg-wide .seg-opts { grid-auto-flow: row; } }

/* ---------- cycle 48: the questions (reports/design/2026-11-01-questions.md) ---------- */
.q-group > .hint { margin-top: var(--space-2); }
.form-stack .qrow, .qrow { padding: var(--space-3) 0; }
.qrow legend { font-weight: 500; margin-bottom: 6px; } /* cycle 114 (V4.17): questions at 500, so no wall of bold */
.qbody { gap: var(--space-2) var(--space-4); }
.q-aff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) 0; margin: 0; flex: 1 1 14rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.q-aff .bm { --bm: 24px; box-shadow: 0 0 0 2px var(--surface-under, var(--color-surface-1)); }
/* Cycle 113 (V0.26): a row of marks that stands for "these banks" overlaps like a stack, each ringed in the surface
   colour so the edges read; marks that each mean a different thing stay apart. */
.q-aff .bm + .bm, .q-gate-marks .bm + .bm { margin-left: -5px; }
.q-aff .bm + span:not(.bm), .q-aff .sr-only + span { margin-left: 6px; }
.q-seg { flex: none; }
.q-seg label span { min-height: 40px; padding: 0 var(--space-4); }
.q-rail .q-count { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.q-rail .q-count strong { font: 700 var(--text-fig-l)/1 var(--font-display); color: var(--color-text); margin-right: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .q-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .q-seg label span { justify-content: center; padding: 0 6px; width: 100%; }
}
.q-group > h2 + .qrow, .q-group > .hint + .qrow, .q-group > .hint + .q-rows > .qrow { box-shadow: none; }
@media (max-width: 560px) {
  #questions .form-actions { row-gap: 6px; }
  #questions .form-actions .qc-progress { order: -2; flex: 1 1 auto; justify-content: flex-start; }
  #questions .form-actions > a { order: -1; font-size: var(--text-sm); }
}

/* ---------- cycle 49: the decision page ----------
   The route is one track: where you start, then each bank's mark with what it pays and when, joined by a line that
   brightens towards the money. Under it, what the plan asks of you. Across on wide screens, down on phones. */
.rt { margin: 0 0 var(--space-5); padding: var(--space-5) var(--space-6) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); }
.rt-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); }
/* Cycle 56: the line runs from each stop to the next, never past the last one. */
.rt-track { --gap: var(--space-4); }
.rt-track > li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 19px; width: calc(100% + var(--gap)); height: 2px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--hairline), color-mix(in srgb, var(--color-plan) 70%, var(--hairline))); }
.rt-track > li { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--space-3); min-width: 0; }
.rt-track .bm { position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--color-surface-1), inset 0 0 0 1px var(--mark-ring); }
.rt-dot { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; }
.rt-dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface-1); border: 2px solid var(--color-text-muted); box-shadow: 0 0 0 5px var(--color-surface-1); }
.rt-text { display: grid; gap: 2px; min-width: 0; }
.rt-big { font: 600 var(--text-md)/1.3 var(--font-text); color: var(--color-text); }
.rt-amt { font: 700 var(--text-2xl)/1.05 var(--font-display); letter-spacing: var(--track-title); color: var(--color-money); font-variant-numeric: tabular-nums; }
.rt-small { font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); }
.rt-when { color: var(--color-text); }
.rt-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--hairline); }
.rt-facts > div { display: grid; gap: 2px; min-width: 0; }
.rt-facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.rt-facts dd { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.rt-facts dd strong { font: 650 var(--text-step)/1.3 var(--font-display); letter-spacing: var(--track-headline); color: var(--color-text); }
@media (max-width: 700px) {
  .rt { padding: var(--space-4); }
  .rt-track { grid-auto-flow: row; gap: var(--space-4); }
  .rt-track > li:not(:last-child)::after { left: 19px; top: 20px; width: 2px; height: calc(100% + var(--gap)); background: linear-gradient(180deg, var(--hairline), color-mix(in srgb, var(--color-plan) 70%, var(--hairline))); }
  .rt-track > li { grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
  .rt-facts { display: grid; gap: var(--space-3); }
}
/* What "after costs" is made of, under the figure. */
/* Cycle 111 (F5): what "after costs" is made of, as a receipt: a line per bank (its mark, linked to the offer), then the
   costs in the muted ink; amounts right-aligned in tabular figures. */
.value-sum { margin: 0 0 var(--space-3); padding: var(--space-2) 0; border-block: 1px solid var(--hairline); font-size: var(--text-sm); }
.value-sum .rc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
.value-sum dt { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-text); }
.value-sum dt .bm { --bm: 22px; box-shadow: none; }
.value-sum dt a { color: inherit; text-decoration-color: var(--hairline-strong); }
.value-sum dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--color-text); }
.value-sum .is-cost :is(dt, dd) { color: var(--color-text-muted); }
/* Cycle 111 (V0.5): a headline money figure: the pound sign smaller, pence small and raised. */
.fig { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-c { font-size: .62em; vertical-align: .42em; margin-right: .03em; }
.fig-p { font-size: .5em; vertical-align: .78em; margin-left: .02em; letter-spacing: 0; }
/* Each switch card: the bank's mark leads; where the terms come from sits in the foot, beside "Set aside". */
.switch-card .sc-head > .bm { margin-top: 2px; }
.switch-card .sc-foot { justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.switch-card .sc-foot .sc-meta { margin: 0; padding: 0; border: 0; font-size: var(--text-xs); max-width: 52ch; }
.switch-card .sc-foot form { flex: none; }
.switch-card .sc-foot button.link { padding-inline: 0; }
.switch-card details.more-conds + .sc-foot, .switch-card .hint + .sc-foot { margin-top: var(--space-3); }
@media (max-width: 560px) { .switch-card .sc-foot { flex-direction: column; align-items: flex-start; } .sc-pay { padding-left: 52px; } }

/* ---------- cycle 50: questions, the common answer first (reports/design/2026-11-01-questions-plan.md) ----------
   Each row on wide screens: the question and its banks on the left, the answer on the right (the legend is floated
   so it can take part in the grid; it stays the fieldset's legend). */
@media (min-width: 701px) {
  fieldset.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-5); }
  fieldset.qrow > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-1); }
  fieldset.qrow > .qbody { display: contents; }
  fieldset.qrow .q-aff { grid-column: 1; }
  fieldset.qrow .q-seg { grid-column: 2; grid-row: 1 / span 2; }
  fieldset.qrow > .qbody > span:empty { display: none; }
}
.q-group > h2 { margin: 0; }
.q-gate { margin: var(--space-4) 0 var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-plan) 6%, transparent); min-width: 0; }
.q-gate > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-2); font: 650 var(--text-lg)/1.35 var(--font-text); }
.q-gate-marks { clear: both; display: flex; flex-wrap: wrap; gap: var(--space-1) 0; margin: 0 0 var(--space-2); }
.q-gate-marks .bm { --bm: 28px; box-shadow: 0 0 0 2px var(--surface-under, var(--color-surface-1)); }
.q-gate-note { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.q-gate-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 26rem; }
.q-gate-seg label span { justify-content: center; width: 100%; min-height: 44px; }
.q-gate-fold { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-done); }
.q-gate-fold .link { padding-inline: 0; }
.q-rows > .qrow:first-child { box-shadow: none; }
@media (max-width: 560px) { .q-gate { padding: var(--space-4); } .q-gate-seg { max-width: none; } }
/* The plan as an agenda (cycle 50): months, each day once as a calendar tile, that day's steps beside it with the
   bank's mark. The colour of "who" is the same three as before (you, the switch service, the bank). Today is filled. */
.ag-panel > h2 { margin-bottom: 0; }
.ag-month { margin: var(--space-5) 0 var(--space-2); font: 650 var(--text-sm)/1.4 var(--font-text); letter-spacing: .02em; color: var(--color-text-muted); }
.ag-days, .ag-steps { list-style: none; margin: 0; padding: 0; }
.ag-day { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.ag-tile { display: grid; justify-items: center; align-content: start; gap: 2px; margin: 0; padding: var(--space-2) 0 9px; border-radius: var(--radius-md); background: var(--color-surface-2); height: max-content; }
.ag-wd { font: 650 var(--text-xs)/1.2 var(--font-text); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.ag-dn { font: 700 var(--text-fig-s)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-text); }
.ag-day.is-today .ag-tile { background: var(--color-plan); }
.ag-day.is-today .ag-wd, .ag-day.is-today .ag-dn { color: var(--color-bg); }
.ag-steps { display: grid; gap: var(--space-3); padding-top: 2px; }
.ag-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ag-step .bm { --bm: 28px; box-shadow: none; }
.ag-step .who { display: block; margin-bottom: 1px; font-size: var(--text-xs); font-weight: 600; }
.ag-step .st-text { display: block; }
.ag-panel > details { margin-top: var(--space-4); }
@media (max-width: 560px) { .ag-day { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); } .ag-dn { font-size: var(--text-xl); } .ag-wd { letter-spacing: .04em; } }

/* ---------- cycle 51: Now (reports/design/2026-11-02-now.md) ----------
   Under the one thing to do: where the switches stand. What has been received of what the plan counts, then the
   route from the start through each bank; the line is lit up to where you are. Across on wide screens, down on phones. */
.jr { margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-6) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); }

.jr-track { --gap: var(--space-4); list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); }
.jr-track > li { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--space-3); min-width: 0; }
/* The line to the next stop: from this marker's centre to the next one's; lit when the next stop has been reached. */
.jr-track > li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 19px; width: calc(100% + var(--gap)); height: 2px; border-radius: var(--radius-xs); background: var(--hairline); }
.jr-track > li.to-reached::after { background: var(--color-plan); }
.jr-track .bm { position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--color-surface-1), inset 0 0 0 1px var(--mark-ring); }
.jr-track > li:not(.is-reached) .bm { opacity: .55; }
.jr-dot { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; }
.jr-dot::after { content: "✓"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 var(--text-xs)/1 var(--font-text); background: var(--color-plan); color: var(--color-bg); box-shadow: 0 0 0 5px var(--color-surface-1); }
.jr-text { display: grid; gap: 2px; min-width: 0; width: 100%; }
.jr-big { font: 600 var(--text-md)/1.3 var(--font-text); }
.jr-amt { font: 700 var(--text-fig-s)/1.05 var(--font-display); letter-spacing: var(--track-title); color: var(--color-money); font-variant-numeric: tabular-nums; }
.jr-small { font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); }
.jr-when { color: var(--color-text); }
.jr-state { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.is-reached:not(.is-paid) > .jr-text .jr-state { color: var(--color-plan); }
.is-reached:not(.is-paid) > .jr-text .jr-state.is-late { color: var(--color-attention); } /* cycle 129: late is amber, never plan blue */
.is-paid .jr-state, .is-paid .jr-amt { color: var(--color-done); }
.jr-link { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
@media (max-width: 700px) {
  .jr { padding: var(--space-4); }
  .jr-track { grid-auto-flow: row; }
  .jr-track > li { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
  .jr-track > li:not(:last-child)::after { left: 19px; top: 20px; width: 2px; height: calc(100% + var(--gap)); }
}
/* One list: done folds away above a "Today" line, then what's coming, with "in 3 weeks" under each day. */

.ag-done { margin-top: var(--space-3); border-top: 0; }
.ag-done .ag-day { opacity: .72; }
.ag-rel { margin-top: var(--space-1); font-size: var(--text-xs); line-height: 1.2; text-align: center; color: var(--color-text-muted); }
.ag-note { display: block; margin-top: 3px; font-size: var(--text-xs); }
.ag-note .st { font-size: var(--text-xs); }
@media (max-width: 999px) { .screen:has(.tools-rail) { grid-template-areas: "head" "main" "rail"; } .screen:has(.tools-rail) .screen-rail { margin-top: var(--space-4); } }

/* ---------- cycle 52: your history (reports/design/2026-11-02-history.md) ----------
   One journal, newest first, grouped by day: the bank's mark (Pocketly's own for its decisions), what happened as a
   sentence, and under it who told us, when it was recorded if that was another day, and the moment's own link. */
.hx-panel > .hx-day:first-of-type { margin-top: 0; }
.hx-day { margin: var(--space-5) 0 var(--space-1); font: 650 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); }
.hx { list-style: none; margin: 0; padding: 0; }
.hx-ev { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.hx-ev .bm { --bm: 32px; box-shadow: none; }
/* Cycle 163 (W2.1): Pocketly's own entries are a hollow route node, never a bank-style tile, so they can't be taken for a bank. */
.pk-node { justify-self: center; align-self: start; margin-top: var(--space-1); width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid var(--color-plan); background: var(--color-bg); }
.hx-t { margin: 0; font-weight: 550; }
.hx-t .st { margin-left: 6px; }
.hx-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); margin: 3px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.hx-m .hx-date { font: 600 var(--text-xs)/1.3 var(--font-mono); color: var(--color-text); }
.hx-src { font-weight: 650; color: var(--color-text); }
.hx-src.is-doc { color: var(--color-done); }
.hx-sum { display: grid; gap: var(--space-2); margin: 0; }
.hx-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.hx-sum dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.hx-sum dd { margin: 0; font: 650 var(--text-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.hx-packs { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); }
.hx-packs li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.hx-packs .bm { --bm: 24px; box-shadow: none; }
.hx-asof { border-color: var(--hairline); }
.hx-asof > h2 { margin-bottom: var(--space-1); }

/* ---------- cycle 53: the evidence pack (reports/design/2026-11-02-evidence-pack.md) ----------
   A problem is three numbered steps: send the message (its copy button first), tell Pocketly the bank's reply, and where
   to go if you're still not happy. The step you're on is filled. The evidence reads like the History, oldest first. */
.pk-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.pk-st .bm { --bm: 28px; box-shadow: none; }
.pk-late { color: var(--color-attention); }
.pk-steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); counter-reset: pk; }
.pk-step { position: relative; padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 2.75rem); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); counter-increment: pk; }
.pk-step::before { content: counter(pk); position: absolute; left: var(--space-5); top: var(--space-5); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--text-sm)/1 var(--font-text); background: var(--color-surface-2); color: var(--color-text-muted); }
.pk-step.is-now { border-color: color-mix(in srgb, var(--color-plan) 40%, var(--hairline)); }
.pk-step.is-now::before { background: var(--color-plan); color: var(--color-bg); }
.pk-step h2 { margin: 2px 0 var(--space-2); font-size: var(--text-lg); }
.pk-step .small { margin: 0 0 var(--space-3); }
.pk-copy { margin: 0 0 var(--space-3); align-items: center; }
.pk-step textarea.letter { width: 100%; min-width: 0; min-height: 0; field-sizing: content; max-height: 34rem; background: var(--color-surface-2); border-color: transparent; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.6; }
.pk-step input.letter-subject { background: var(--color-surface-2); border-color: transparent; }
.pk-row { gap: var(--space-2); }
.pk-correct { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.pk-correct h3 { margin: 0 0 var(--space-2); }
.pk-panel > .small { margin: 0 0 var(--space-2); }
.pk-caveats { margin: var(--space-3) 0 0; padding-left: 1.1rem; }
.pk-fp { margin-top: var(--space-3); }
@media (max-width: 560px) {
  .pk-step { padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 2.5rem); }
  .pk-step::before { left: var(--space-3); top: var(--space-4); width: 28px; height: 28px; }
  .pk-copy .primary { width: 100%; justify-content: center; }
}

/* ---------- cycle 54: your data (reports/design/2026-11-02-your-data.md) ----------
   What's held as tiles (the situation across the top), what is never held beside it, the copy as the main action;
   sign-in; then starting again and deleting, folded at the bottom in one group. */
.dz-never { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; }
.dz-never li { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-text-muted); }
.dz-never li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: .2em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-text-muted); background: linear-gradient(135deg, transparent 45%, var(--color-text-muted) 45% 55%, transparent 55%); } /* cycle 116 (V5.54): a neutral "never" glyph, not a red cross */
/* Stat tiles (the review console's summary) and a grouped list of folds (the Direct Debits page). Kept from cycle 72; cycle 75 removed them by mistake. */
.dz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--space-3) 0 var(--space-4); background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.dz-tiles > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--color-surface-2); min-width: 0; }
.dz-tiles dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.dz-tiles dd { margin: 0; font: 700 var(--text-fig-s)/1.15 var(--font-display); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dz-group { border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); overflow: hidden; }
.dz-fold { border-top: 1px solid var(--hairline); margin: 0; scroll-margin-top: 104px; }
.dz-fold:first-child { border-top: 0; }
.dz-fold > summary { padding: var(--space-4) var(--space-5); min-height: 56px; }
.dz-body { padding: 0 var(--space-5) var(--space-5); }
.dz-body > p:first-child { margin-top: 0; }
@media (max-width: 640px) { .dz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A drawn checkbox (cycle 54): the native one in dark mode is a filled grey square that reads as disabled. */
/* Cycle 113 (V0.18): one numbered badge everywhere: a circle on --fill, Inter 600 13 in full ink; the accent only marks
   the current step of the journey (stepper). */
/* (cycle 110: the drawn checkbox is now every checkbox; see app.css "Drawn radios and checkboxes") */

/* ---------- cycle 55: Now, again (reports/design/2026-11-02-now-2.md) ----------
   One status surface: what to do (or until when there's nothing to do) with the route underneath, inside the same card.
   The rail is your money, then reminders. Steps already due can be marked done in the list. */
.focus > .st { margin: 0 0 var(--space-2); }
.focus { --fx: var(--space-6); --fy: var(--space-5); }
.focus > .jr { margin: var(--space-5) calc(-1 * var(--fx)) calc(-1 * var(--fy)); padding: var(--space-4) var(--fx); border: 0; border-top: 1px solid var(--hairline); border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: none; background: color-mix(in srgb, var(--color-bg) 22%, transparent); }
.focus > .jr .bm, .focus > .jr .jr-dot::after { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-surface-1) 100%, transparent); }
@media (max-width: 760px) { .focus { --fx: var(--space-4); --fy: var(--space-4); } }
.nw-big { margin: var(--space-1) 0 0; font: 700 var(--text-fig-l)/1 var(--font-display); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; color: var(--color-money); }
.nw-big.is-in { color: var(--color-done); }
.nw-of { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.nw-flows { display: grid; gap: var(--space-3); margin: 0; }
.nw-flows li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-sm); }
.nw-flows li > span:last-child { display: grid; gap: 1px; }
.nw-flows small { font-size: var(--text-xs); color: var(--color-text-muted); }
.nw-flows .bm { --bm: 28px; box-shadow: none; }
.nw-flows li.is-paid small { color: var(--color-done); }
.nw-tools { gap: var(--space-2); }
.nw-tools [data-push] { display: grid; gap: var(--space-2); }
.nw-tools [data-push][hidden] { display: none; }
.nw-tools .hint { margin: 0; }
.ag-act { display: block; margin-top: var(--space-2); }
.ag-act form { display: inline; }
.ag-act button { min-height: 36px; padding: 0 14px; font-size: var(--text-sm); }
.ag-panel > .ag-done { margin: var(--space-1) 0 0; border: 0; }
.ag-panel > .ag-done > summary { min-height: 36px; padding: 0; font-size: var(--text-sm); font-weight: 550; color: var(--color-text-muted); }
.ag-panel > .ag-done + .agenda > .ag-month:first-child, .ag-panel > h2 + .agenda > .ag-month:first-child { margin-top: var(--space-3); }

/* ---------- cycle 56: sign in / create an account (reports/design/2026-11-02-ten-pages.md) ----------
   Two doors side by side: new here (what an account gives you, then the one main button) and been here before. */
.wrap.narrow { max-width: 40rem; }
.sg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4); margin: var(--space-5) 0 var(--space-4); }
.sg > section { display: flex; flex-direction: column; align-items: stretch; padding: var(--space-5) var(--space-6); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-1); }
.sg > .sg-new { border-color: var(--hairline); }
.sg h2 { margin: 0 0 var(--space-2); }
.sg > section > .small { margin: 0 0 var(--space-3); }
.sg > section > button { width: 100%; justify-content: center; margin-top: auto; }
.sg-gets { list-style: none; display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; font-size: var(--text-sm); }
.sg-gets li { display: flex; gap: var(--space-2); }
.sg-gets li::before { content: "✓"; flex: none; font-weight: 800; color: var(--color-done); }
.sg > section > .hint { margin: var(--space-2) 0 0; }
.sg-email { margin: var(--space-2) 0 var(--space-4); }
.sg-email > summary { font-size: var(--text-sm); color: var(--color-text-muted); min-height: 40px; }
.sg-email[open] { padding-bottom: var(--space-2); }
.sg-foot { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 760px) { .sg { grid-template-columns: minmax(0, 1fr); } .sg > section { padding: var(--space-4); } }

/* Cycle 56: why an offer was left out: the reason, then the banks it rules out as marks with the products named. */
.rg-offers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rg-marks { display: inline-flex; gap: 3px; }
.rg-marks .bm { --bm: 22px; box-shadow: none; }
.af-all { margin: var(--space-3) var(--space-1) 0; }
/* Cycle 56: an offer's own page: the bank's name above its product (no eyebrow); how it goes as three stops. */
.od-bank { margin: 0 0 2px; font: 600 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); }
.od-n { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font: 700 var(--text-sm)/1 var(--font-text); background: var(--color-surface-2); color: var(--color-text); box-shadow: 0 0 0 5px var(--color-surface-1); }
/* Cycle 56: a past decision: comparison and replay as quiet lines. */
/* Cycle 91: one sentence that wraps as text, so the tick stays with its first word on a phone. */
.rs-line { margin: var(--space-4) 0; }
.rs-line > .st { margin-right: var(--space-1); }
.rs-line > a { white-space: nowrap; }
.rs-seal { margin: var(--space-4) 0; font-size: var(--text-sm); }
/* Cycle 56: Direct Debits explained: each offer's rule folded in one group, with its count at the right. */
.dd-group { margin-top: var(--space-3); }
.dd-sum { display: inline-flex; align-items: center; gap: var(--space-3); width: calc(100% - 2rem); vertical-align: middle; }
.dd-sum .bm { --bm: 28px; box-shadow: none; }
.dd-sum > span:nth-child(2) { flex: 1; min-width: 0; }
.dd-count { flex: none; font: 650 var(--text-sm)/1 var(--font-text); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); }
/* Cycle 56: message pages: one centred card, a sign of the moment, the way on, and two more places to go. */
.msg.wrap { max-width: 34rem; display: grid; place-items: center; min-height: 52vh; }
.msg-card { width: 100%; padding: var(--space-6); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-2); text-align: center; }
.msg-card h1 { font-size: var(--text-display-s); margin: var(--space-3) 0 var(--space-2); }
.msg-card .lede { margin-inline: auto; }
.msg-card form, .msg-card .btn { display: inline-flex; }
.msg-card .hint { margin-top: var(--space-4); }
/* Cycle 113 (V0.27): drawn icons in the tab bar's grammar, not letters and arrows typed as icons. */
.msg-more { display: flex; justify-content: center; gap: var(--space-4); margin: var(--space-4) 0 0; font-size: var(--text-sm); }
/* Cycle 56: legal pages: a switcher between the three, and a contents list beside the text (above it on phones). */
/* N6 (6 Nov 2026): the reference frame shares the page's edges: its contents list starts where the header's logo and every
   wide page start (the 1180 px column), and on phones it uses the body's one gutter, not a second one inside it. */
.lg { max-width: var(--wide); margin: 0 auto; padding-top: var(--space-5); }
.lg-toc-narrow { display: none; }
.lg-tabs { display: inline-flex; gap: 2px; padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-2); }
.lg-tabs a { padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-decoration: none; }
.lg-tabs a[aria-current="page"] { background: var(--color-surface-1); color: var(--color-text); box-shadow: var(--shadow-1); }
.lg-grid { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.lg-grid > .wrap.legal { margin: 0; padding-top: var(--space-4); }
.lg-side { position: sticky; top: 96px; padding-top: var(--space-6); }
.lg-toc-h { margin: 0 0 var(--space-2); font: 650 var(--text-xs)/1.4 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--hairline); }
.lg-toc a { display: block; padding: 6px 0 6px var(--space-3); margin-left: -2px; border-left: 2px solid transparent; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .lg-toc a:hover { color: var(--color-text); border-left-color: var(--color-plan); } }
.legal .sec { scroll-margin-top: var(--space-8); }
@media (max-width: 900px) { .lg-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .lg-side { position: static; padding-top: var(--space-4); }
  /* Phones: the title first, then the page's contents (folded), then the text. */
  .lg-side .lg-toc { display: none; } .lg-side.is-toc-only { display: none; } .lg-side { order: 1; } /* what's in the margin follows the text */ .lg-toc-narrow { display: block; margin: 0 0 var(--space-4); } }
/* Cycle 56: the review console: four counts first (warn and bad tinted), states as pills, reference tables folded. */
.rv-tiles { margin: var(--space-3) 0 var(--space-5); }
.rv-tiles .is-warn dd { color: var(--color-attention); } .rv-tiles .is-bad dd { color: var(--color-problem); }
/* Cycle 210: the operator's view. What needs the owner leads, each line marked by colour and a bar (never colour alone: the words say it). */
.rv-ops { margin: 0 0 var(--space-3); }
.ops .ops-needs { display: grid; gap: var(--space-2); }
.ops .ops-needs li { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--hairline); border-radius: var(--radius-sm); background: var(--color-surface-1); }
.ops .ops-needs li.is-warn { border-left-color: var(--color-attention); }
.ops .ops-needs li.is-bad { border-left-color: var(--color-problem); }
.ops .ops-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ops table td { vertical-align: middle; } .ops table .num { text-align: right; white-space: nowrap; }
.rv-bank { display: inline-flex; align-items: center; gap: var(--space-2); }
.rv-bank .bm { --bm: 24px; box-shadow: none; }
.rv-fold > summary h2 { display: inline; margin: 0; font-size: var(--text-xl); }
@media (max-width: 640px) { .rv-tiles, .ops .ops-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- cycle 57: the light theme (reports/design/2026-11-03-light-theme.md) ----------
   On white, a grey fill reads as "disabled": secondary buttons are white with a hairline and a soft shadow, like a
   raised control. Choices are marked by the accent's border and a faint tint, not a salmon fill. Tinted cards keep
   their tint faint. */
/* Cycle 112 (V0.20, ADR-015): secondary buttons are filled, never outlined: Apple's grey fill in light, no rim, no shadow. */
:root[data-theme="light"] :is(button, .btn):not(.primary):not(.link):not(.danger):not(.step-btn):not(.theme-icon):not(.toast-x) { background: var(--fill); border-color: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { :root[data-theme="light"] :is(button, .btn):not(.primary):not(.link):not(.danger):not(.step-btn):not(.theme-icon):not(.toast-x):hover { background: var(--fill-strong); } }
:root[data-theme="light"] :is(button.primary, .btn.primary) { box-shadow: none; }
:root[data-theme="light"] .bank-chosen, :root[data-theme="light"] .choice:has(input:checked), :root[data-theme="light"] .toggle:has(input:checked) { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-1)); }
:root[data-theme="light"] .mc-chips input:checked + span { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-1)); }
:root[data-theme="light"] .focus { background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 70%), var(--color-surface-1); border-color: var(--hairline); }
:root[data-theme="light"] .nav-cta { background: color-mix(in srgb, var(--color-plan) 10%, transparent); color: var(--color-heading); } /* cycle 121: 4.45:1 in plan blue; navy ink passes */
:root[data-theme="light"] .rt-track .bm, :root[data-theme="light"] .jr-track .bm { box-shadow: 0 0 0 5px var(--color-surface-1); }
:root[data-theme="light"] .lp-hero:has(.mc) .lp-hero-copy .btn.primary { background: var(--color-surface-1); border-color: var(--hairline-strong); box-shadow: var(--shadow-1); }

/* ---------- cycle 60: about the banks (FPO art. 22), a quiet reference (reports/design/2026-11-03-about-the-banks.md) ----------
   Three facts the banks share, then one row per deposit-taker with its banks' marks; capital as a short figure with its
   date. On phones each bank is a compact entry: name, then provider and figures on one wrapping line. */
.about-banks { border-top: 1px solid var(--hairline); padding-top: var(--space-5); margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); }
.about-banks h2 { font: 650 var(--text-sm)/1.4 var(--font-text); color: var(--color-text-muted); margin: 0 0 var(--space-2); letter-spacing: 0; }
.ab-lead { margin: 0 0 var(--space-4); max-width: 62rem; line-height: 1.5; }
.ab-bank { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--text-sm)/1.3 var(--font-text); }
.ab-bank .bm { --bm: 24px; box-shadow: none; }
.ab-bank > span:last-child { margin-left: var(--space-1); }
.ab-asat { color: var(--color-text-muted); }
.mono-num { font-variant-numeric: tabular-nums; }
.ab-lbl { display: none; }
.ab-fine { margin: var(--space-2) 0 0; }


/* ---------- cycle 61: mobile, all pages (reports/design/2026-11-03-mobile-audit.md; the numbers are the audit's) ---------- */
/* (12) Platform: no grey flash on tap (feedback comes from :active instead); the iOS 100vh fix; the status bar in the
   installed app sits over the header, so the header pads for it. */
html { -webkit-tap-highlight-color: transparent; }
/* Cycle 94 (mobile-native): a tap fires at once (no double-tap-zoom wait), and a long press on a control doesn't select
   its label or open the link callout. Content text stays selectable; hover that paints a background is gated to mice. */
:is(a, button, summary, label, [role="button"]) { touch-action: manipulation; }
:is(button, .btn, summary, .tabbar a, .bank-tile, .seg-opts label) { -webkit-user-select: none; user-select: none; }
:is(.btn, .tabbar a) { -webkit-touch-callout: none; }
body { min-height: 100dvh; }
.top { padding-top: max(var(--space-4), env(safe-area-inset-top, 0px)); }
@media (max-width: 760px) { .top { padding-top: max(var(--space-3), env(safe-area-inset-top, 0px)); } }
@media (pointer: coarse) { a:active { opacity: .65; } .tabbar a:active, .bank-tile:active, .seg-opts label:active span { opacity: .75; } }
/* (2) Jumps land below the sticky header, not under it. */
html { scroll-padding-top: var(--space-8); }
@media (max-width: 760px) { html { scroll-padding-top: 80px; } }
/* Cycle 131 (W14.2, WCAG 2.4.11): room under the sticky bars, so a control reached with Tab never sits beneath one. */
html:has(.tabbar) { scroll-padding-bottom: 6rem; }
html:has(main .form-actions) { scroll-padding-bottom: 9rem; }
/* (11) On phones the header slides away while reading down and returns on the way up (enhance.js). A transform: no reflow. */
@media (max-width: 760px) {
  .top { transition: transform .28s var(--ease-settle); will-change: transform; }
  .top.is-away { transform: translateY(calc(-100% - 2px)); }
}
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
/* (1) A task screen with its own bottom bar (situation, questions) hides the tab bar, as iOS does for a pushed screen:
   one bottom bar, not two. */
@media (max-width: 760px) {
  body.has-tabbar:has(main .form-actions) .tabbar { display: none; }
  body.has-tabbar:has(main .form-actions) { padding-bottom: 0; }
  body.has-tabbar:has(main .form-actions) .form-actions { bottom: 0; padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px)); }
}
/* (3) Confirmations float as a toast below the header, then leave (enhance.js). */
/* Cycle 76: at the bottom (above the tab bar on phones), where it can't cover the headline it confirms; it rises in and
   sinks out along the same path. */
/* Cycle 112 (V0.21): a toast: a done tick, the words, a close button; at most 24rem; above the tab bar on phones, bottom
   left on laptops (where the eye returns after acting, away from the page's own buttons). */
.flash-wrap.is-toast { position: fixed; z-index: 40; top: auto; bottom: calc(max(var(--space-3), env(safe-area-inset-bottom, 0px)) + 68px); left: 16px; right: 16px; max-width: 24rem; margin: 0 auto; padding: 0; }
.flash-wrap.is-toast .notice { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); box-shadow: var(--shadow-pop); background: color-mix(in srgb, var(--color-surface-2) 92%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.flash-wrap.is-toast .notice { position: relative; }
.flash-wrap.is-toast .notice::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-done); }
.flash-wrap.is-toast .notice::after { content: ""; position: absolute; left: calc(var(--space-4) + 7px); top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid var(--color-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.toast-x { flex: none; margin-left: auto; width: 36px; min-width: 36px; min-height: 36px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); box-shadow: none; }
.toast-x:hover { background: var(--fill); color: var(--color-text); }
@media (min-width: 761px) { .flash-wrap.is-toast { bottom: var(--space-5); left: var(--space-5); right: auto; width: 24rem; margin: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .flash-wrap.is-toast { animation: toast-in .32s var(--ease-settle) both; }
  .flash-wrap.is-toast.is-leaving { animation: toast-out .24s ease-in both; }
}
.flash-wrap.is-leaving { opacity: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }
/* (4) The tab bar: five places, an icon over each name. */
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Cycle 76 audit: a thicker material under the tab bar's labels, so a bright button scrolling beneath can't wash them out
   (Apple: vibrancy keeps text legible over moving content). */
.tabbar { background: color-mix(in srgb, var(--color-bg) 90%, transparent); }
.tabbar a { position: relative; flex-direction: column; gap: 2px; min-height: 56px; padding: 6px 2px var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.tabbar a svg { width: 24px; height: 24px; flex: none; }
.tabbar a[aria-current="page"] { font-weight: 700; }
.tabbar a[aria-current="page"] svg { stroke-width: 2.1; }
/* Cycle 112 (V1.7): badges calm: on the tab bar, a dot on the tab where the items are (the count is read out, not
   shown), and none on the tab you're on; on laptops, the count in a neutral pill. */
.tabbar .badge { position: absolute; top: 7px; left: calc(50% + 9px); margin: 0; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; box-shadow: 0 0 0 2px var(--color-bg); }
.tabbar a[aria-current="page"] .badge { display: none; }
.nav-wide .badge { background: var(--fill-strong); color: var(--color-text); font-weight: 650; }
/* (5) Thumb targets at least 44 px (Apple), on touch screens. */
@media (pointer: coarse) {
  .foot ul { gap: 0; }
  .foot ul a { display: flex; align-items: center; min-height: 44px; }
  .seg-opts label span, .mc-chips label span, .bank-tile, .lg-tabs a { min-height: 44px; }
  .lg-tabs a { display: inline-flex; align-items: center; }
  .nav-cta, .menu > summary, .menu-tools button.link, .theme-icon { min-height: 44px; }
  .top .brand { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  details.explain > summary { min-height: 44px; margin-block: -10px; }
  .menu-tools { gap: var(--space-2); }
  /* links that sit alone on a line (not in running text) get a taller hit area without moving anything */
  :is(.hx-m, .dd-table, .ab-table, .af-all, .rs-line, .jr-link, .dd-go) a, #questions .form-actions > a { display: inline-block; padding-block: var(--space-3); margin-block: -12px; }
  details:not(.explain) > summary { min-height: 44px; }
}
/* (6) The message fields: 16 px, so iOS doesn't zoom when they're tapped. */
@media (max-width: 760px) { .pk-step textarea.letter, .pk-step input.letter-subject { font-size: var(--text-md); } }
/* (7) Meaningful text no smaller than 12 px (cycle 110: the floor rose from 11 px; V0.2). */
/* (8) Buttons that wrap do it gracefully: balanced lines, normal leading, room above and below. */
button, .btn { line-height: 1.25; padding-block: 10px; text-wrap: balance; text-align: center; }
/* (9) Tables become lists on phones: the row's name, then each value with its label. */
@media (max-width: 560px) {
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td { display: block; }
  .stack-table tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
  .stack-table th, .stack-table td { border: 0; padding: 0; text-align: left; }
  .stack-table tbody th { margin-bottom: 6px; }
  .stack-table td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; font-size: var(--text-sm); }
  .stack-table td::before { content: attr(data-label); color: var(--color-text-muted); }
  .table-scroll:has(> .stack-table) { overflow: visible; }
}
/* (10) Long pages: the Direct Debits page and How it works offer the next step early; the legal contents fold on phones.
   Cycle 125 (V3.4): the plan's cards stack on phones (the sideways carousel hid all but one), what you keep first. */
@media (max-width: 760px) {
  .pcs { align-items: stretch; }
  .pcs > .pc-eq { display: none; }
  .pcs > .pc-total { order: -1; }
}
.dd-go { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--text-sm); }
.lg-toc-fold > summary { list-style: none; cursor: pointer; }
.lg-toc-fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .lg-toc-fold > summary { pointer-events: none; } .lg-toc-fold > summary::before { content: none; } }
@media (max-width: 900px) { .lg-toc-fold { margin-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); } .lg-toc-fold > summary { display: flex; align-items: center; min-height: 44px; } }

/* (9) The Direct Debits list on phones stays compact: each offer's answers as small labelled chips on one or two lines. */
@media (max-width: 560px) {
  .dd-table.stack-table tr { display: flex; flex-wrap: wrap; gap: 6px; }
  .dd-table.stack-table tbody th { flex-basis: 100%; margin-bottom: 2px; }
  .dd-table.stack-table td { display: inline-flex; gap: 6px; padding: var(--space-1) 10px; border-radius: var(--radius-pill); background: var(--fill); font-size: var(--text-xs); }
  .dd-table.stack-table td::before { content: attr(data-label); }
  .dd-table.stack-table td[data-label="Set up before the switch starts"]::before { content: "Set up before the switch"; }
  .dd-table.stack-table td[data-label="Standing orders also count"]::before { content: "Standing orders count"; }
  .dd-table.stack-table td:has(.is-none) { display: none; }
  .dd-table.stack-table td:first-of-type { display: inline-flex; }
}
@media (pointer: coarse) {
  /* (5) continued: a link alone in its paragraph, contents links, toggles, "Change"-style buttons, offer rows */
  p > a:only-child:not(.btn) { display: inline-block; padding-block: var(--space-3); margin-block: -12px; }
  .lg-toc a { min-height: 44px; display: flex; align-items: center; }
  .toggle, button.link, .ot-offer { min-height: 44px; }
  .dd-table a { padding-block: 14px; margin-block: -14px; }
}
@media (pointer: coarse) {
  .of-filters .toggle, .bank-chosen button, .bank-chosen .link { min-height: 44px; }
  .hx-packs a:not(.btn) { display: inline-block; padding-block: var(--space-3); margin-block: -12px; }
}
@media (max-width: 560px) { .stack-table caption { display: block; text-align: left; white-space: nowrap; } }
/* Cycle 62: Barclays Premier's mark: Barclays' blue on Premier's dark navy. */
.bm-hsbc-premier { background: var(--bank-hsbc-premier); color: var(--mark-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bank-hsbc) 70%, transparent); }
/* Cycle 213: NatWest Premier, like the other Premier marks: dark, with the bank's own colour as the ring. */
.bm-natwest-premier { background: var(--bank-natwest-premier); color: var(--mark-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bank-natwest) 80%, transparent); }
.bm-barclays-premier { background: var(--bank-barclays-ink); color: var(--bank-barclays); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bank-barclays) 70%, transparent); }
/* Cycle 62: the Premier group in the offers table: a quiet header row, then its offers. */
.offer-table .ot-group th { padding: var(--space-4) var(--space-4) var(--space-2); text-align: left; font: 400 var(--text-sm)/1.45 var(--font-text); color: var(--color-text-muted); border-top: 1px solid var(--hairline-strong); background: color-mix(in srgb, var(--color-plan) 4%, transparent); }
.rail-need { margin: var(--space-2) 0 var(--space-3); font: 400 var(--text-sm)/1.5 var(--font-text); color: var(--color-text); }
.rail-need .ot-group-k { margin-right: var(--space-1); }
.ot-group-k { display: inline-block; margin-right: var(--space-2); padding: 3px 10px; border-radius: var(--radius-pill); font: 650 var(--text-xs)/1.4 var(--font-text); color: var(--color-text); background: color-mix(in srgb, var(--color-plan) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-plan) 35%, transparent); }
@media (max-width: 760px) { .offer-table .ot-group, .offer-table .ot-group th { display: block; } }

/* Cycle 169 (W7.10): any reference page's own column sits in the editorial grid as the legal pages' does. */
.lg-grid > .wrap { margin: 0; padding-top: var(--space-4); max-width: 46rem; min-width: 0; }
.lg-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.lg-grid.is-solo > .wrap { margin: 0; max-width: none; } /* one section: the full width, paragraphs keep their own measure */
.lg-meta { margin-top: var(--space-5); }
.lg-meta .byline { display: grid; gap: var(--space-1); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
@media (max-width: 900px) { .lg-meta { margin-top: var(--space-2); } .lg-meta .byline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); border-top: 0; padding-top: 0; } }
/* ---------- cycle 66: the offer page (reports/design/2026-11-02-offer-page.md) ---------- */
/* Where each condition comes from: quiet text, not a code font. */
.conds .clause.cond-src { display: block; font: italic 400 var(--text-xs)/1.45 var(--font-text); letter-spacing: 0; color: var(--color-text-muted); }
/* After the conditions, on screens where the summary card isn't beside them: the next step, without scrolling back. */
.od-end { display: none; }
@media (max-width: 999px) {
  .od-end { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--hairline); }
  .od-end p { margin: 0 0 var(--space-1); font-weight: 650; color: var(--color-text); }
  .od-end .btn { justify-content: center; }
}

/* ---------- cycle 67: if you could move more (reports/design/2026-11-02-stairs-and-slack.md) ---------- */
.stairs .st-say { margin: var(--space-1) 0 var(--space-4); max-width: 62ch; color: var(--color-text); }
.st-plot { position: relative; height: 120px; margin: var(--space-6) 0 var(--space-6); }
.st-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-area { fill: color-mix(in srgb, var(--color-plan) 8%, transparent); }
.st-line { fill: none; stroke: var(--color-plan); stroke-width: 2.5; stroke-linejoin: round; }
.st-dot, .st-lbl, .st-x > span { position: absolute; }
.st-dot { width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: var(--color-plan); box-shadow: 0 0 0 3px var(--color-bg); }
.st-dot.is-next { background: var(--color-bg); box-shadow: inset 0 0 0 2.5px var(--color-done), 0 0 0 3px var(--color-bg); }
.st-lbl { white-space: nowrap; font-size: var(--text-xs); line-height: 1.3; color: var(--color-text-muted); transform: translateX(-50%); }
.st-lbl strong { color: var(--color-text); font-weight: 650; }
.st-lbl.is-next strong { color: var(--color-done); }
.st-lbl.at-start { transform: none; } .st-lbl.at-end { transform: translateX(-100%); }
.st-x { position: absolute; left: 0; right: 0; bottom: -26px; height: 18px; border-top: 1px solid var(--hairline); }
.st-x > span { top: 6px; font-size: var(--text-xs); color: var(--color-text-muted); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.st-x > span:first-child { transform: none; } .st-x > span:last-child { transform: translateX(-100%); }
.st-plot:not(.is-placed) :is(.st-dot, .st-lbl, .st-x) { display: none; }
.st-axis { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.st-try { margin: 0; }

/* Days to spare (cycle 67): from the plan's day to the terms' last day. A label first; the bar only shows how much. */
.sl { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.sl-track { position: relative; flex: 0 0 72px; height: 4px; border-radius: var(--radius-xs); background: var(--fill); overflow: hidden; }
.sl-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-xs); background: var(--color-plan); }
.sl.is-ok .sl-fill { background: var(--color-plan); } .sl.is-tight .sl-fill { background: var(--color-attention); }
.sl.is-tight .sl-lbl { color: var(--color-attention); font-weight: 600; }
.sl-w0 { width: 0; } .sl-w1 { width: 10%; } .sl-w2 { width: 20%; } .sl-w3 { width: 30%; } .sl-w4 { width: 40%; } .sl-w5 { width: 50%; } .sl-w6 { width: 60%; } .sl-w7 { width: 70%; } .sl-w8 { width: 80%; } .sl-w9 { width: 90%; } .sl-w10 { width: 100%; }
.focus-spare .sl { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.focus-spare .sl-track { flex-basis: 140px; height: 6px; border-radius: var(--radius-xs); }

/* ---------- cycle 68: from applying to the end (reports/design/2026-11-02-tracking.md) ---------- */
/* Tell Pocketly what happened: a grouped list; an option's fields appear once it's chosen (all show where :has isn't supported). */
.tell { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.tell-opts { margin: 0; padding: 0; border: 0; min-width: 0; }
.tell-opts > legend { padding: 0; margin: 0 0 var(--space-2); font-weight: 650; color: var(--color-text); }
.tell-opt { border-top: 1px solid var(--hairline); }
.tell-opt:last-child { border-bottom: 1px solid var(--hairline); }
.tell-row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px 2px; cursor: pointer; color: var(--color-text); }
.tell-row input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--color-plan); }
.tell-more { display: grid; gap: var(--space-2); padding: 0 0 var(--space-3) calc(20px + var(--space-3)); }
.tell-opt:not(:has(input:checked)) .tell-more { display: none; }
.tell-field { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 22rem; }
.tell-field input { font-size: var(--text-md); }
.tell-note { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.tell-note textarea { width: 100%; font: inherit; font-size: var(--text-md); }
.inline-date { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); margin-right: var(--space-2); }
.inline-date input { font-size: var(--text-md); }
.tell-link { margin: var(--space-3) 0 0; }
/* What to expect: quiet, under the action it explains. */
.expect { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.expect-h { margin: 0 0 var(--space-2); font: 650 var(--text-sm)/1.4 var(--font-text); color: var(--color-text); }
.expect-list { display: grid; gap: var(--space-2); margin: 0; }
.expect-list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); }
.expect-list dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); padding-top: 2px; }
.expect-list dd { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.expect-src { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 560px) { .expect-list > div { grid-template-columns: 1fr; gap: 2px; } }
/* On track: one line for the whole plan. */
.ontrack { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-weight: 650; font-size: var(--text-sm); color: var(--color-text); }
.ot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-done); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-done) 18%, transparent); }
.ontrack.is-today .ot-dot { background: var(--color-plan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-plan) 18%, transparent); }
.ontrack.is-needs .ot-dot { background: var(--color-attention); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-attention) 22%, transparent); }
.watch { display: grid; gap: 6px; margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.watch li { position: relative; padding-left: 1.25rem; }
.watch li::before { content: "✓"; position: absolute; left: 0; color: var(--color-done); font-weight: 700; }
/* Switch week: round ticks, like a checklist you'd keep yourself. */
.sw-list { display: grid; margin: var(--space-2) 0 0; }
.sw-list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--hairline); font-size: var(--text-sm); line-height: 1.5; }
.sw-list form { margin: 0; flex: 0 0 auto; }
.sw-check { width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--color-border-strong); background: transparent; }
@media (hover: hover) and (pointer: fine) { .sw-check:hover { border-color: var(--color-plan); } }
.sw-tick { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--color-done); color: var(--color-bg); font-weight: 800; font-size: var(--text-sm); }
.sw-list li.is-done > span:last-child { color: var(--color-text-muted); }
@media (pointer: coarse) { .sw-check { width: 30px; height: 30px; } .sw-list form { padding: 7px; margin: -7px; } }
/* The end of a plan. */
.end-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.end-facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.end-facts dd { margin: 2px 0 0; font-size: var(--text-lg); }
.end-keep { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.end-keep li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.jr-tell { font-size: var(--text-xs); }
/* The form fills the card even inside a row of buttons; its note appears once an answer is chosen (cycle 68 mockups). */
.row > form.tell, .row form.tell { display: grid; flex: 1 1 100%; min-width: 0; }
.tell:not(:has(input[name="action"]:checked)) .tell-note { display: none; }
.expect-get { display: grid; gap: 2px; margin: 0; }
.expect-get li { padding-left: 0.9rem; position: relative; } .expect-get li::before { content: ""; position: absolute; left: 0.15rem; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); }
/* Each link in a journey stop on its own 24 px line (WCAG 2.5.8, cycle 68). */
.jr-text .jr-link, .jr-text .jr-tell { display: flex; align-items: center; min-height: 24px; width: fit-content; }
.hx-note { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
/* ---------- cycle 69: your documents ---------- */
.tell-file { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.tell-file input { font-size: var(--text-sm); }
.tell:not(:has(input[name="action"]:checked)) .tell-file { display: none; }
.doc-list { display: grid; margin: var(--space-2) 0 var(--space-3); }
.doc-list li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--hairline); }
.doc-list li:last-child { border-bottom: 1px solid var(--hairline); }
.doc-ico { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--fill); font: 700 var(--text-xs)/1 var(--font-text); letter-spacing: .02em; color: var(--color-text-muted); }
.doc-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.doc-main a { overflow-wrap: anywhere; }
.doc-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.doc-list form { margin: 0; flex: 0 0 auto; }
.doc-add { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.hx-file { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--text-sm); }
.hx-file > svg { flex: none; color: var(--color-text-muted); }
.tell-file > span:first-child { font-weight: 600; color: var(--color-text); }
.tell-file .hint { font-weight: 400; }
.tell-file input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: var(--space-3); padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-text); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tell-file input[type=file]::file-selector-button:hover { border-color: var(--color-plan); } }

/* Reminders by email (cycle 70): the state leads (a dot, as on Now's "on track"), then the two choices as one grouped
   list, like a settings pane. Changing the address and forgetting it sit below, quieter. */
.em { scroll-margin-top: 104px; }
.watch li.watch-bad { color: var(--color-text); }
.watch li.watch-bad::before { content: "!"; color: var(--color-attention); }
/* Cycle 89: reminders being off isn't something Pocketly is watching: a plain dot, not a green tick. */
.watch li.watch-off { color: var(--color-text-muted); }
.watch li.watch-off::before { content: "○"; color: var(--color-text-muted); font-weight: 400; }

/* The complaint's clock (cycle 73): the date sent, the bank's 8 weeks, then the Ombudsman. */
.pk-clock { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.pk-sent { margin-top: var(--space-3); }
.pk-sent form, .pk-step .screen-only > form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }

/* Bring your situation up to date (cycle 73). */
.catchup { margin-bottom: var(--space-4); }
.catchup .row { align-items: center; gap: var(--space-4); }

/* A calendar to subscribe to (cycle 73). */
.cal-more { margin-top: var(--space-2); }
.cal-more > summary { font-size: var(--text-sm); }
.cal-url { width: 100%; max-width: none; font-size: var(--text-sm); }

/* What Pocketly did (History, cycle 73). */
.hx-pocketly { margin-top: var(--space-4); }
.hx-did { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; }
.hx-did li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-sm); }
.hx-when { color: var(--color-text-muted); }
.hx-state { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.hx-state.is-bad { color: var(--color-attention); }
@media (max-width: 520px) { .hx-did li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Bank emails (cycle 74): your address to copy, a list like a mail app's, one email as plain text. */

/* ---------- Cycle 75: grouped settings (Apple's inset grouped list) for Your data and Bank emails ----------
   A section title, its rows in one rounded group (separators inset to the text, as in iOS), a footer that explains.
   Rows are links (chevron), switches, values, or folds that open in place. */
.set, .set-head { max-width: 46rem; }
.set > h1, .set-head > h1 { margin-bottom: var(--space-3); }
.set-split > .set { padding: 0; }
.set-index { display: none; }
.set-split .set > .set-sec:first-child { margin-top: var(--space-5); }
/* Wide screens: an index of the page's sections beside it (macOS System Settings), the one you're reading marked. */
@media (min-width: 1100px) {
  .set-split { max-width: 68rem; display: grid; grid-template-columns: 13rem minmax(0, 46rem); grid-template-areas: ". head" "index body"; column-gap: var(--space-7); justify-content: center; }
  .set-split > .set-head { grid-area: head; }
  .set-split > .set { grid-area: body; }
  .set-index { grid-area: index; display: grid; gap: 2px; align-self: start; position: sticky; top: 96px; margin-top: var(--space-5); }
  .set-index a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 550; text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .set-index a:hover { color: var(--color-text); background: var(--fill); } }
  .set-index a[aria-current] { color: var(--color-text); background: var(--fill); }
  .set-index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
}
.set-me { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); }
.set-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 650 var(--text-lg)/1 var(--font-text); color: var(--color-text); background: var(--fill-strong); } /* cycle 117 (V5.50): neutral, no gradient */
.set-me-text { display: grid; gap: 2px; min-width: 0; }
.set-me-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.set-me-text strong { font-size: var(--text-lg); line-height: 1.3; letter-spacing: var(--track-headline); overflow-wrap: anywhere; }
.set-me-promise { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.set-me-promise svg { flex: none; color: var(--color-done); }
.set-sec { margin: var(--space-6) 0 0; scroll-margin-top: 104px; }
.set-sec > h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3) var(--space-1); font: 600 var(--text-xl)/var(--lead-headline) var(--font-display); letter-spacing: var(--track-headline); font-variation-settings: "opsz" 48; }
.set-group { list-style: none; margin: 0; padding: 0; background: var(--color-surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.set-group > li { position: relative; margin: 0; }
.set-group > li + li::before, .set-formwrap .set-row + .set-row::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--space-4) + 32px + var(--space-3)); border-top: 1px solid var(--hairline); }
.set-group > li.set-inset + li::before, .set-group > li + li.set-inset::before { left: 0; }
.set-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 60px; padding: 10px var(--space-4); margin: 0; color: var(--color-text); text-decoration: none; font: inherit; text-align: left; }
a.set-row, summary.set-row, label.set-row, button.set-row { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { a.set-row:hover, summary.set-row:hover, button.set-row:hover { background: var(--fill); } }
a.set-row:active, summary.set-row:active, button.set-row:active { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
a.set-row:focus-visible, summary.set-row:focus-visible, button.set-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.set-main { display: grid; gap: 2px; min-width: 0; }
.set-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.set-sub { font-size: var(--text-sm); line-height: var(--lead-caption); color: var(--color-text-muted); overflow-wrap: anywhere; }
.set-sub strong { color: var(--color-text); font-weight: 600; }
.set-end { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: end; color: var(--color-text-muted); }
.set-val { font-size: var(--text-md); color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-chev { flex: none; opacity: .7; }
/* Cycle 113 (V0.28): settings tiles are monochrome, ink on a quiet fill; colour only where it means something
   (red for an alert or for deleting). The rainbow said nothing. */
.set-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--color-text); background: var(--fill-strong); }
.set-ico.is-red { color: var(--mark-ink); background: var(--tile-red); }
.set-row.is-muted .set-title { color: var(--color-text-muted); font-weight: 500; }
.set-foot { margin: var(--space-2) var(--space-4) 0; font-size: var(--text-sm); line-height: var(--lead-caption); color: var(--color-text-muted); }
.set-foot > :first-child { margin-top: 0; }
.set-inset { padding: var(--space-3) var(--space-4) var(--space-4); }
.set-inset .hint:last-child, .set-inset .row:last-child { margin-bottom: 0; }
.set-empty { margin: 0; padding: var(--space-4); border: 1px dashed var(--hairline-strong, var(--hairline)); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: var(--text-sm); }
.set-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font: 650 var(--text-xs)/1.4 var(--font-text); letter-spacing: var(--track-caption); white-space: nowrap; }
.set-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.set-pill.is-on { color: color-mix(in srgb, var(--color-done) 62%, var(--color-text)); background: color-mix(in srgb, var(--color-done) 14%, transparent); }
.set-pill.is-wait { color: color-mix(in srgb, var(--color-plan) 62%, var(--color-text)); background: color-mix(in srgb, var(--color-plan) 14%, transparent); }
.set-pill.is-bad { color: color-mix(in srgb, var(--color-problem) 62%, var(--color-text)); background: color-mix(in srgb, var(--color-problem) 14%, transparent); }
.set-pill.is-off { color: var(--color-text-muted); background: var(--fill); }
.set-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font: 700 var(--text-xs)/1 var(--font-text); }
.set-sec > h2 .set-count { font-size: var(--text-xs); }
/* Rows that act: a form's button laid out as a row (iOS's red "Sign Out"-style rows). */
.set-group form { margin: 0; }
button.set-row { width: 100%; grid-template-columns: minmax(0, 1fr); min-height: 52px; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 600; color: var(--color-plan); }
button.set-row.is-danger { color: var(--color-problem); }
/* Folds: a row that opens in place. */
.set-fold { margin: 0; scroll-margin-top: 104px; }
.set-fold > summary { list-style: none; font-weight: inherit; }
details.set-fold > summary::before, details.set-fold[open] > summary::before { content: none; display: none; }
details.set-fold[open] > summary { margin-bottom: 0; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary::marker { content: ""; }
.set-disc { width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); opacity: .7; }
.set-fold[open] .set-disc { transform: rotate(225deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: no-preference) { .set-disc { transition: transform .2s var(--ease-settle); } }
.set-fold.is-danger > summary .set-title { color: var(--color-problem); }
.set-body { padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 32px + var(--space-3)); }
.set-body > p:first-child { margin-top: 0; }
.set-body .row:last-child, .set-body .form-stack:last-child { margin-bottom: 0; }
/* Switches (iOS): apply on change where scripts run; Save stays for when they don't. */
.set-formwrap fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.set-switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 24%, transparent); cursor: pointer; }
.set-switch input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--knob); box-shadow: 0 2px 5px rgb(0 0 0 / .28); }
.set-switch input[type="checkbox"]:checked { background: var(--color-accent); } /* cycle 116 (V5.52): toggles in the accent, not success green */
.set-switch input[type="checkbox"]:checked::after { transform: translateX(20px); }
.set-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .set-switch input[type="checkbox"] { transition: background .2s ease; } .set-switch input[type="checkbox"]::after { transition: transform .32s cubic-bezier(.32, .72, .25, 1); } }
@media (forced-colors: active) { .set-switch input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: 22px; height: 22px; } .set-switch input[type="checkbox"]::after { content: none; } }
.set-save { padding: var(--space-2) var(--space-4) var(--space-3) calc(var(--space-4) + 32px + var(--space-3)); }
.js .set-save[data-autosave-hide] { display: none; }
.set-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--color-problem) 8%, transparent); }
.set-alert .set-sub { color: var(--color-text); }
.set-alert form { margin-top: var(--space-2); }
.em-form, .em-choices { margin: 0; }
.em-actions { align-items: center; margin: 0; }
.em-change .em-form { padding-top: 0; }
.set-never-h { margin: var(--space-3) 0 var(--space-2); font-weight: 600; color: var(--color-text); }
.dz-never { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.dz-never li { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-text-muted); }
.dz-never li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: .2em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--color-text-muted); background: linear-gradient(135deg, transparent 45%, var(--color-text-muted) 45% 55%, transparent 55%); } /* cycle 116 (V5.54): a neutral "never" glyph, not a red cross */
.dz-download .set-title { color: var(--color-plan); }

/* Bank emails: the address as the page's one raised surface, three steps, then the emails as grouped rows. */
.inb-hero { margin: 0 0 var(--space-2); padding: var(--space-5); border-radius: var(--radius-xl); background: linear-gradient(180deg, color-mix(in srgb, var(--color-plan) 7%, var(--color-surface-1)), var(--color-surface-1) 60%); border: 1px solid var(--hairline-strong, var(--hairline)); box-shadow: var(--shadow-2); }
.inb-hero > h2 { margin: 0 0 var(--space-3); font: 650 var(--text-sm)/1.3 var(--font-text); letter-spacing: var(--track-caption); color: var(--color-text-muted); }
.inb-copy { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.inb-address { flex: 1 1 14rem; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--hairline); font: 600 var(--text-step)/1.35 var(--font-mono); letter-spacing: .01em; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.inb-copy button { flex: none; min-height: 44px; }
.inb-copied { flex: 1 1 100%; margin: 0; min-height: 0; }
.inb-copied:empty { display: none; }
.inb-copy.is-row { margin-top: var(--space-2); }
.inb-copy.is-row .inb-address { flex-basis: 12rem; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.inb-copy.is-row button { min-height: 40px; padding: 0 var(--space-4); }
.set-addr { align-items: start; }
.set-addr > .set-ico { margin-top: 2px; }
.inb-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--hairline); }
.inb-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.inb-steps strong { display: block; margin-bottom: 2px; }
.inb-steps span:not(.set-ico) { font-size: var(--text-sm); line-height: var(--lead-caption); color: var(--color-text-muted); }
.inb-how { margin-top: var(--space-4); border-top: 1px solid var(--hairline); }
.inb-how > summary { padding: var(--space-3) 0 0; font-weight: 600; font-size: var(--text-sm); }
.inb-how .inb-steps { margin-top: var(--space-3); padding-top: 0; border-top: 0; }
.inb-row { min-height: 68px; }
.inb-row .set-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.inb-row .set-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); }
.inb-when { font-size: var(--text-sm); white-space: nowrap; }
/* Cycle 95 (worst-case subjects at 320 px): a long unbroken subject uses both of its lines instead of "Your-current-…";
   on narrow phones the date and the row's spacing give the subject more room. */
.inb-row .set-title { overflow-wrap: anywhere; }
.inb-subject.is-long { font-size: var(--text-xl); line-height: var(--lead-headline); } /* a subject past 70 characters shouldn't fill the first screen */
@media (max-width: 400px) { .inb-row { gap: var(--space-2); padding-inline: var(--space-3); } .inb-when { font-size: var(--text-xs); } }
.inb-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border-radius: var(--radius-pill); font: 650 var(--text-xs)/1.5 var(--font-text); }
.inb-tag.is-read { color: color-mix(in srgb, var(--color-plan) 62%, var(--color-text)); background: color-mix(in srgb, var(--color-plan) 14%, transparent); }
.inb-tag.is-done { color: color-mix(in srgb, var(--color-done) 62%, var(--color-text)); background: color-mix(in srgb, var(--color-done) 14%, transparent); }
.bm-none { display: inline-grid; place-items: center; background: var(--color-surface-2); color: var(--color-text-muted); }
/* One email: who and when, Pocketly's reading with one action, then the email itself. */
.mail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; margin: 0 0 var(--space-5); }
.mail-head h1 { margin: 0 0 var(--space-1); font-size: var(--text-display-s); overflow-wrap: anywhere; }
.inb-from { margin: 0; overflow-wrap: anywhere; color: var(--color-text); }
.inb-from strong { font-weight: 650; }
.inb-from .muted { margin-left: var(--space-1); font-size: var(--text-sm); }
.mail-dates { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.mail-file, .mail { margin: 0 0 var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface-1); border: 1px solid var(--hairline); box-shadow: var(--shadow-1); }
.mail-file { border-color: var(--hairline-strong, var(--hairline)); box-shadow: var(--shadow-2); }
.mail-file > h2, .mail-top h2 { margin: 0 0 var(--space-3); font: 600 var(--text-xl)/var(--lead-headline) var(--font-display); letter-spacing: var(--track-headline); font-variation-settings: "opsz" 48; }
.mail-file .set-group { margin: var(--space-3) 0; box-shadow: none; }
.mail-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--space-1); font: 650 var(--text-xs)/1.4 var(--font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--color-engine); }
.mail-reading { margin: 0 0 var(--space-2); font: 600 var(--text-xl)/1.3 var(--font-display); letter-spacing: var(--track-headline); }
.mail-safe { margin: var(--space-3) 0 0; }
.tell-opts.is-compact .tell-opt { border: 0; }
.tell-opts.is-compact .tell-opt .tell-row { font-weight: 600; }
.tell-else, .tell-notefold { border-top: 1px solid var(--hairline); }
.tell-else > summary, .tell-notefold > summary { padding: var(--space-3) 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-plan); }
.tell-else[open] > summary { padding-bottom: var(--space-1); }
.tell-notefold .tell-note { padding-bottom: var(--space-3); }
.mail-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.mail-top h2 { margin-bottom: var(--space-2); }
.mail-top .hint { margin: 0; }
.inb-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 70vh; overflow: auto; margin: var(--space-2) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-2); font: var(--text-md)/1.65 var(--font-text); }
.mail-att-h { margin: var(--space-5) 0 var(--space-2); font: 650 var(--text-sm)/1.3 var(--font-text); color: var(--color-text-muted); }
.mail-atts { box-shadow: none; }
.mail-atts .doc-ico { width: 32px; height: 32px; }
.mail-done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-done) 9%, var(--color-surface-1)); border: 1px solid color-mix(in srgb, var(--color-done) 30%, transparent); }
.mail-done strong { display: block; margin-bottom: 2px; }
.mail-done > div > span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.mail-links { display: flex !important; gap: var(--space-4); margin-top: var(--space-2); font-weight: 600; }
.mail-more { margin: var(--space-2) 0 var(--space-6); }
/* Wide screens: the email and the filing card side by side, so you check it against the email as you file it. */
@media (min-width: 1024px) {
  .mail-page { max-width: 76rem; }
  .mail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--space-5); align-items: start; }
  .mail-grid > .mail-col { grid-row: 1; grid-column: 1; min-width: 0; }
  .mail-grid > .mail-act { grid-column: 2; position: sticky; top: 96px; }
}
@media (max-width: 700px) {
  .inb-steps { grid-template-columns: 1fr; }
  .inb-hero { padding: var(--space-4); }
  .mail-file, .mail { padding: var(--space-4); }
  .inb-text { padding: var(--space-3) var(--space-4); }
  .mail-head .bm { --bm: 44px; }
  .set-val { max-width: 9rem; }
}

/* Cycle 78: a mail service's forwarding confirmation (its code to copy), and the setup steps. */
.inb-confirm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-plan) 9%, var(--color-surface-1)); border: 1px solid color-mix(in srgb, var(--color-plan) 30%, transparent); box-shadow: var(--shadow-1); }
.inb-confirm h2 { margin: 2px 0 var(--space-1); font: 600 var(--text-xl)/var(--lead-headline) var(--font-display); letter-spacing: var(--track-headline); font-variation-settings: "opsz" 48; }
.inb-confirm .small { margin: 0 0 var(--space-3); }
.inb-code { margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--hairline); font: 650 var(--text-xl)/1.3 var(--font-mono); letter-spacing: .12em; user-select: all; -webkit-user-select: all; }
.inb-confirm-act { align-items: center; margin: var(--space-3) 0 0; }
.inb-confirm-act form { margin: 0; }
.mail-act > .inb-confirm { margin-top: 0; }
.inb-howto { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--lead-caption); }
.inb-howto li::marker { color: var(--color-text-muted); font-weight: 650; }

/* Cycle 76 audit: a bank's term quoted on Now reads as a quotation, as on the decision, not as code. */
.clause { font: italic 400 var(--text-sm)/1.5 var(--font-text); letter-spacing: 0; color: var(--color-text-muted); }
/* Cycle 76 audit: on a phone, a date field beside the main button leaves both cramped: they stack. */
@media (max-width: 560px) {
  .focus form:has(> .inline-date) { display: grid; gap: var(--space-3); width: 100%; }
  .focus form:has(> .inline-date) > .inline-date { margin: 0; font-size: var(--text-sm); }
  .focus form:has(> .inline-date) > button { width: 100%; }
}
/* Cycle 76 audit: small targets made at least 24 px (WCAG 2.5.8) where they stand alone. */
details.more > summary { min-height: 44px; }
.form-actions > a, .form-actions .link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-1); }
.rail-card > .expect:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tell-fwd h2 { margin-bottom: var(--space-2); }
.tell-fwd .inb-copy { margin: var(--space-3) 0; }
.tell-fwd-more { margin: 0; }
/* Cycle 76 audit: the offer names in the Direct Debits table are links people tap: at least 24 px high. */
.dd-table th[scope="row"] a, .dd-table td a { display: inline-flex; align-items: center; min-height: 28px; }
/* Cycle 89: a bank late paying reads as attention in the journey, not as calm progress. */
.jr-state.is-late { color: var(--color-attention); }
.nw-late { color: var(--color-attention); }
.nowrap { white-space: nowrap; }

/* Cycle 101 (C5): recording a part-payment, or one from a source the terms exclude, folded under the main button. */
.pay-more { margin: 0 0 var(--space-3); }
.pay-more > summary { font-size: var(--text-sm); color: var(--color-plan); }
.pay-more[open] > summary { margin-bottom: var(--space-2); }
.check-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.check-row input { width: 20px; height: 20px; flex: none; }
/* Cycle 102: "not now" (C11), what Pocketly assumed (E11), what would change it (E9), confidence (E10). */
.panel.caution { border-left: 4px solid var(--color-attention); background: var(--color-surface-2); padding: var(--space-4); margin: 0 0 var(--space-4); border-radius: var(--radius-md); }
.panel.caution h2 { margin-top: 0; }
.assumed, .flips { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.assumed li, .flips li { margin: 0 0 var(--space-1); }
/* Cycle 103 (B4): guides, offer changes, census, complaints. */
.guide-list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: var(--space-4) 0 0; }
.guide-card { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface-1); text-decoration: none; color: inherit; }
.guide-card strong { font-size: var(--text-lg); }
.guide-card span { color: var(--color-text-muted); font-size: var(--text-sm); }
.guide-card:hover strong, .guide-card:focus-visible strong { text-decoration: underline; }
.rs-list { display: grid; gap: var(--space-4); margin: var(--space-4) 0; }
.rs-offer h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.pay-table td, .pay-table th { vertical-align: top; }
.hw-list { display: grid; gap: var(--space-3); margin: var(--space-4) 0; counter-reset: hw; }
.hw-list > li { counter-increment: hw; padding-left: 2.2em; position: relative; }
.hw-list > li::before { content: counter(hw); position: absolute; left: 0; top: 0.1em; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-sm); background: var(--color-surface-2); }
.hw-list h2 { font-size: var(--text-md); margin: 0 0 var(--space-1); }
.corrections li, .change-log li { padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.corrections time, .change-log time { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.census { max-width: 36rem; }
.cl-bank { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; margin-right: var(--space-2); }
.cl-what { display: inline; }
.cl-sha { display: block; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.signposts { margin-top: var(--space-2); }
.seg-field { border: 0; padding: 0; margin: var(--space-3) 0 0; }
.seg-field legend { font-size: var(--text-sm); font-weight: 600; padding: 0; }
.rt-adds { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
/* J11 (cycle 103): the plan on one page. */
.op-banks { display: grid; gap: var(--space-4); margin: var(--space-4) 0; }
.op-bank h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.op-steps li { padding: var(--space-1) 0; border-bottom: 1px solid var(--hairline); }
.op-steps strong { display: inline-block; min-width: 11em; margin-right: var(--space-2); }
@media print {
  .one-page { font-size: 10.5pt; }
  .one-page .op-bank { break-inside: avoid; }
  .one-page .op-banks { gap: 8pt; margin: 8pt 0; }
  .foot { display: none; }
}
/* J12 (cycle 103): "Was this right?" */
.fb { display: grid; gap: var(--space-2); max-width: 36rem; margin: var(--space-4) 0 0; }
.fb textarea { width: 100%; }
.fb button { justify-self: start; }
.fb-done { margin: var(--space-4) 0 0; }
.pk-replies { margin: var(--space-3) 0 0; }
.pk-step textarea.reply-letter { width: 100%; min-width: 0; min-height: 0; field-sizing: content; max-height: 28rem; background: var(--color-surface-2); border-color: transparent; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.6; }
@media (max-width: 760px) { .pk-step textarea.reply-letter { font-size: var(--text-md); } }
/* Cycle 105 (E8): banking history. */
.hy-bank legend { display: flex; align-items: center; gap: var(--space-2); }
.hy-q { margin: 0 0 var(--space-1); font-weight: 600; }
.hy-had { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; }
.hy-had .hy-q { flex-basis: 100%; }
.hy-bank:not(:has(input[name^="h_"][value="yes"]:checked)) .hy-more { display: none; }
.hy-more { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
.hy-sub { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.hy-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; }
.hy-what { min-width: 5.5rem; font-weight: 600; padding-bottom: var(--space-2); }
.hy-f { display: grid; gap: 2px; font-size: var(--text-sm); }
.hy-year { width: 6.5rem; }

/* Cycle 110 (V0.12): the UK date field: Day, Month, Year boxes and the date read back under them. */
.date-field { border: 0; padding: 0; margin: var(--space-3) 0 var(--space-2); min-width: 0; }
.date-field > legend { padding: 0; margin-bottom: var(--space-1); font-weight: 600; }
.df-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.df-part { margin: 0; display: grid; gap: var(--space-1); font: 500 var(--text-sm)/1.2 var(--font-text); color: var(--color-text-muted); }
.df-part input { width: 3.75rem; max-width: none; padding: 0 var(--space-2); text-align: center; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.df-y input { width: 5.25rem; }
.df-read { margin: var(--space-2) 0 0; min-height: 1.45em; font-size: var(--text-sm); line-height: var(--lead-caption); color: var(--color-text-muted); }
.df-read:empty { min-height: 0; margin: 0; }
.df-read.is-bad { color: var(--color-problem); }
:is(.inline-date, .tell-field).date-field > legend { font: 500 var(--text-sm)/1.3 var(--font-text); color: var(--color-text-muted); }
/* Cycle 112 (V1.2): Help's closing section sits apart from the task cards. */
.help-more { margin-top: var(--space-6); }
.menu > summary.is-account { color: var(--color-text); }
/* Cycle 113 (V0.17): what a step waits for is a muted caption, never a coloured state. */
.dep-note { font-size: var(--text-sm); color: var(--color-text-muted); }
/* Cycle 113 (V0.23): the empty state: a small scene of what will be here (cycle 165) (date tiles and lines, fading out), then one
   sentence, the time it takes and one action. */
.empty { max-width: 34rem; margin: var(--space-4) 0 var(--space-6); }
.empty-text { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.5; }
.empty-time { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
/* Cycle 113 (V9.2): the development-only component catalogue. */
.cat-sec { margin: 0 0 var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cat-conds { max-width: 30rem; }
.cat-form { max-width: 30rem; }
/* Cycle 113 (V0.14): the file drop zone. The input stays in the page (keyboard and screen readers reach it); the box is
   what you see, focus rings it, and a file dragged over it lights it. */
.dz-file { position: relative; }
.dz-box { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--field); color: var(--color-text-muted); cursor: pointer; }
.dz-box svg { flex: none; color: var(--color-plan); }
.dz-say strong { color: var(--color-plan); font-weight: 650; }
.dz-file.has-file .dz-box { border-style: solid; color: var(--color-text); }
.dz-file.is-over .dz-box { border-color: var(--color-plan); background: color-mix(in srgb, var(--color-plan) 8%, var(--field)); }
.dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dz-file:focus-within .dz-box { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .dz-box:hover { border-color: var(--color-plan); } }
.cat .lede { max-width: 40rem; }
.screen-rail:empty { display: none; }
/* Cycle 114 (F1): the plan drawn to scale. A lane per switch (the bank's mark and name on the left), months along the
   top, Today as a line through every lane. Marks by shape and colour (validated for colour blindness: blue and green,
   ΔE 17 deutan in dark, 24 in light): an ink dot where you ask, an ink ring where the switch completes, a blue bar
   while your money is away, a green bracket and its amount for the payment window. */
/* Cycle 114 (F4): spare cash as a step line, the buffer dashed, the money under the line softly filled. */
.cash { margin: 0 0 var(--space-2); }
.cash-svg { display: block; }
.cash-area { fill: color-mix(in srgb, var(--color-plan) 12%, transparent); }
.cash-line { fill: none; stroke: var(--color-plan); stroke-width: 2; stroke-linejoin: round; }
.cash-floor { stroke: var(--color-text-muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cash-low { stroke: var(--color-text); stroke-width: 1.5; }
.cash-bill { stroke: var(--color-attention, var(--color-text-muted)); stroke-width: 1.5; }
.cash-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.cash-cap strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.tl-panel > h2 { margin-bottom: var(--space-4); }
.cash-k { white-space: nowrap; }
/* Cycle 114 (V4.32): a condition as one line that opens to its note and source. */
details.cond-d { border-top: 0; }
details.cond-d > summary { display: block; min-height: 0; font-weight: 450; list-style: none; cursor: pointer; padding-right: 1.5rem; position: relative; }
details.cond-d > summary::before { content: none; }
details.cond-d > summary::after { content: ""; position: absolute; right: 4px; top: .45em; width: 7px; height: 7px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); transform: rotate(45deg); }
details.cond-d[open] > summary { margin-bottom: var(--space-2); }
details.cond-d[open] > summary::after { transform: rotate(225deg); top: .7em; }
details.cond-d .cond-note { display: block; margin-bottom: var(--space-2); }
@media (prefers-reduced-motion: no-preference) { details.cond-d > summary::after { transition: transform var(--motion-fast) var(--ease-settle); } }
.conds li.cond-c > details { margin: 0; }
/* Cycle 114 (V4.6): going back or "not now" is a text link, never a second full-size button. */
.rail-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); color: var(--color-text-muted); font-weight: 600; }
/* Cycle 114 (V4.34): the next step stays in reach on phones once the rail's button has scrolled away: a translucent bar
   above the tab bar (Apple's material: blur, saturate, a hairline of light on top), sliding in along the same path it
   leaves by. Hidden on laptops, where the rail stays beside the page. */
.next-bar { display: none; }
@media (max-width: 900px) {
  .next-bar { position: fixed; z-index: 29; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) max(16px, env(safe-area-inset-right, 0px)) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--material); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid var(--hairline);
    transform: translateY(110%); visibility: hidden; }
  body.has-tabbar .next-bar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--space-2); }
  .next-bar.is-shown { transform: none; visibility: visible; }
  .next-fig { font: 700 var(--text-fig-s)/1 var(--font-display); color: var(--color-money); display: inline-flex; align-items: baseline; gap: 6px; }
  .next-fig small { font: 500 var(--text-xs)/1 var(--font-text); color: var(--color-text-muted); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .next-bar { transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .34s; } .next-bar.is-shown { transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .next-bar { transition: opacity .2s ease, visibility 0s linear .2s; transform: none; opacity: 0; } .next-bar.is-shown { opacity: 1; transition: opacity .2s ease, visibility 0s; } }
@media (prefers-reduced-transparency: reduce) { .next-bar { background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.q-aff-all > span:first-child { font-weight: 600; color: var(--color-text); }
/* Cycle 114 (F2): this plan against the best single switch, row by row, tabular. */
.alt-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-2); font-size: var(--text-sm); }
.alt-table th, .alt-table td { padding: 6px 0; text-align: right; border-top: 1px solid var(--hairline); }
.alt-table thead th, .alt-table thead td { border-top: 0; font-weight: 600; color: var(--color-text-muted); font-size: var(--text-xs); }
.alt-table tbody th { text-align: left; font-weight: 450; color: var(--color-text-muted); }
.alt-table td { font-variant-numeric: tabular-nums; padding-left: var(--space-3); }
.alt-table tbody tr:first-child td { font-weight: 700; color: var(--color-text); }
/* Cycle 114 (V4.44): a past decision is marked as a snapshot, its route at reduced emphasis. */
.snap-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.snap-route { filter: saturate(.55); } /* emphasis lowered by colour, never by opacity (text keeps its contrast) */
/* Cycle 114 (V4.35): feedback is one line until you say "Partly" or "No". */
.fb-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.fb-line > legend { float: left; margin: 0 var(--space-2) 0 0; padding: 0; font-weight: 600; }
.fb-send { min-height: 36px; }
.fb:not(:has(input[value="partly"]:checked, input[value="no"]:checked)) :is(.fb-more, .fb-hint) { display: none; }
.fb-more { margin-top: var(--space-3); }
/* Cycle 114 (V4.8): a term that explains itself: dotted underline, the explanation opens under it. */
details.explain.is-term { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
details.explain.is-term > summary { min-height: 24px; padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: underline dotted; text-decoration-color: var(--color-text-muted); text-underline-offset: 4px; }
@media (max-width: 900px) { body:has(.next-bar.is-shown) .flash-wrap.is-toast { bottom: calc(max(var(--space-3), env(safe-area-inset-bottom, 0px)) + 136px); } }
/* Cycle 114 (V4.4): on phones, the five steps as a thin segmented bar under "Step 3 of 5". */
.stepper-bar { display: none; }
@media (max-width: 760px) {
  .stepper-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); margin-top: 6px; }
  .stepper-bar i { height: 3px; border-radius: var(--radius-pill); background: var(--fill-strong); }
  .stepper-bar i.is-done { background: var(--color-done); } .stepper-bar i.is-now { background: var(--color-accent); }
}
/* Cycle 114 (V4.15): the joint-account note only once "Yes" is chosen, as an attention note. */
.seg-q:not(:has(input[value="1"]:checked)) + .joint-note { display: none; }
.joint-note { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-attention) 10%, transparent); color: var(--color-text); }
/* Cycle 114 (V4.40): a quiet stretch in the agenda, a dashed line and its length. */
.ag-gap { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ag-gap::before, .ag-gap::after { content: ""; height: 0; border-top: 1px dashed var(--hairline-strong); }
.ag-gap::before { flex: 0 0 3.25rem; } .ag-gap::after { flex: 1; }
/* Cycle 116 (V5.1): where you are in your switches, instead of the setup stepper. */
.sw-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.sw-head > span { display: inline-flex; align-items: center; gap: 6px; }
.sw-head > span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-muted); margin-right: var(--space-2); }
.sw-head .bm { --bm: 20px; box-shadow: none; }
.sw-head > span:first-child { color: var(--color-text); font-weight: 600; }
/* Cycle 116 (V5.4, V5.5): the focus card's glow says what kind of moment it is: the accent only when there's something to
   do; plan blue and calm while waiting; amber when something is late or needs checking; red for a problem. */
.focus:has(> .st-wait) { background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--color-plan) 7%, transparent), transparent 70%), var(--color-surface-1); }
.focus:has(> .st-late) { background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--color-attention) 10%, transparent), transparent 70%), var(--color-surface-1); }
.focus:has(> .st-problem) { background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--color-problem) 9%, transparent), transparent 70%), var(--color-surface-1); }
:root[data-theme="light"] .focus:has(> :is(.st-wait, .st-late, .st-problem)) { background-color: var(--color-surface-1); }
/* Cycle 116 (V5.9): a switch's progress as dots: done (green), current (accent, wider), to come (fill); amber when late. */
.jr-dots { display: flex; gap: var(--space-1); margin: 6px 0 2px; }
.jr-dots i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--fill-strong); }
.jr-dots i.is-done { background: var(--color-done); }
.jr-dots i.is-now { width: 16px; background: var(--color-plan); }
.jr-dots.is-late i.is-now { background: var(--color-attention); }
/* Cycle 116 (F7): the money tracker: a segment per reward by amount and state, named underneath. */
.nw-track { display: block; margin: var(--space-3) 0 var(--space-2); }
.nw-seg.is-in { fill: var(--color-done); } .nw-seg.is-late { fill: var(--color-attention); } .nw-seg.is-due { fill: var(--fill-strong); }
.nw-legend { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--text-xs); }
.nw-legend li { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.nw-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fill-strong); }
.nw-legend .is-in .nw-dot { background: var(--color-done); } .nw-legend .is-late .nw-dot { background: var(--color-attention); }
.nw-st { margin-left: auto; color: var(--color-text-muted); }
.nw-legend .is-late .nw-st { color: var(--color-attention); font-weight: 600; }
/* Cycle 117 (F10): the complaint's clock: three dated stops on a line; done ticked green, current ringed, late amber. */
.cclock { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-3) 0; padding: 0; position: relative; }
.cclock::before { content: ""; position: absolute; left: 8px; right: 33%; top: 7px; height: 2px; background: var(--hairline-strong); }
.cclock li { position: relative; display: grid; gap: 2px; padding-right: var(--space-2); font-size: var(--text-xs); }
.cc-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface-1); box-shadow: inset 0 0 0 2px var(--hairline-strong); margin-bottom: 6px; }
.cclock .is-done .cc-dot { background: var(--color-done); box-shadow: none; }
.cclock .is-now .cc-dot { box-shadow: inset 0 0 0 2px var(--color-plan), 0 0 0 4px color-mix(in srgb, var(--color-plan) 18%, transparent); }
.cclock .is-late .cc-dot { background: var(--color-attention); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-attention) 18%, transparent); }
.cc-l { color: var(--color-text-muted); }
.cc-d { font-weight: 650; color: var(--color-text); font-variant-numeric: tabular-nums; }
/* Cycle 118 (F11): the evidence pack is a sheet of paper in both themes: what a bank or the Ombudsman will read, shown as
   they'll see it. Inside it the ink, muted ink, lines and links are the paper's (the tokens are re-pointed, so every
   component inside follows). */
.screen-main > .panel.pk-paper, .panel.pk-paper { --color-heading: var(--paper-ink); --color-text: var(--paper-ink); --color-text-muted: var(--paper-muted); --hairline: var(--paper-line); --hairline-strong: var(--paper-line); --color-plan: var(--paper-link);
  --color-surface-1: var(--paper); --color-surface-2: var(--paper); --fill: rgb(0 0 0 / .05); --fill-strong: rgb(0 0 0 / .08); --color-done: var(--paper-done); --color-attention: var(--paper-attention); --color-problem: var(--paper-problem);
  background: var(--paper); color: var(--paper-ink); border: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 18px 40px -18px rgb(0 0 0 / .45); border-radius: var(--radius-sm); padding: var(--space-6) var(--space-6) var(--space-5); }
.pk-paper a { color: var(--paper-link); }
.pp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 2px solid var(--paper-ink); }
.pp-head h2 { margin: 0; }
.pp-head p { margin: 2px 0 0; }
.pp-date { font: 500 var(--text-xs)/1.4 var(--font-mono); color: var(--paper-muted); white-space: nowrap; }
.pp-sub { margin: var(--space-5) 0 var(--space-2); font: 650 var(--text-xs)/1.4 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-muted); }
.proof { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.proof th, .proof td { padding: var(--space-2) var(--space-2) var(--space-2) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--paper-line); }
.proof thead th { border-top: 0; font: 600 var(--text-xs)/1.3 var(--font-text); color: var(--paper-muted); }
.proof tbody th { font-weight: 500; }
.proof td:last-child { color: var(--paper-muted); }
@media (max-width: 560px) { .pk-paper { padding: var(--space-4); } .pp-head { grid-template-columns: auto minmax(0, 1fr); } .pp-date { grid-column: 1 / -1; } .proof thead { display: none; } .proof tr { display: grid; grid-template-columns: 1fr auto; } .proof td:last-child { grid-column: 1 / -1; border-top: 0; padding-top: 0; } .proof td { border-top: 0; } }
/* Cycle 118 (F15): the plan complete: the amount paid as the figure, the banks lit with a tick, then the facts. */
.end-hero { margin: var(--space-2) 0 var(--space-2); font: 700 var(--text-display-m)/1 var(--font-display); color: var(--color-done); display: flex; align-items: baseline; gap: var(--space-2); }
.end-hero small { font: 500 var(--text-sm)/1 var(--font-text); color: var(--color-text-muted); }
.end-route { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-4); }
.end-route .bm { --bm: 28px; box-shadow: 0 0 0 2px var(--color-done); }
.end-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-done); color: var(--color-bg); font: 700 var(--text-xs)/1 var(--font-text); }
.end-actions { margin: var(--space-4) 0 var(--space-2); }
.screen-main > .panel.pk-paper { margin: var(--space-4) 0 var(--space-5); }
@media (max-width: 560px) { .proof td:last-child { font-size: var(--text-xs); } .proof tr { border-top: 1px solid var(--paper-line); } .proof tbody th, .proof td { border-top: 0; } }
/* Cycle 119 (F18): the switch on a working-day ruler. Columns sized to the gaps (1 working day, then 6, then the years
   after), a line through the stops; on phones, the same stops down a vertical line. */
.ruler { margin: var(--space-4) 0 var(--space-6); }
.ruler-track { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; grid-template-columns: 1fr 1.4fr 3fr 2.6fr; position: relative; }
.ruler-track::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--color-plan) 0 70%, transparent 70%) , repeating-linear-gradient(90deg, var(--hairline-strong) 0 6px, transparent 6px 10px); }
.ruler-stop { position: relative; display: grid; gap: var(--space-1); padding-right: var(--space-3); }
.ruler-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface-1); box-shadow: inset 0 0 0 2px var(--color-plan); margin-bottom: 6px; position: relative; }
.ruler-stop.is-zero .ruler-dot { background: var(--color-plan); }
.ruler-stop.is-tail .ruler-dot { box-shadow: inset 0 0 0 2px var(--hairline-strong); }
.ruler-day { font: 700 var(--text-sm)/1.2 var(--font-text); font-variant-numeric: tabular-nums; }
.ruler-what { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; }
@media (max-width: 560px) {
  .ruler-track { grid-template-columns: 1fr; gap: var(--space-3); padding-left: var(--space-5); }
  .ruler-track::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: var(--color-plan); }
  .ruler-dot { position: absolute; left: calc(-1 * var(--space-5)); top: 1px; margin: 0; }
}
/* Cycle 119 (V3.33): a guide ends with where to go next. */
.guide-next { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.guide-next .guide-card { flex: 1 1 18rem; height: auto; }
.guide-next .btn { align-self: center; }
/* Cycle 119 (V3.37): one size per role. A step or list-item title is Inter 17/600 everywhere (it was 16–18 px in
   Fraunces or Inter, sometimes smaller than the body text); section titles stay Fraunces 22. */
:is(.hw-list, .rs-offer, .op-bank) h2, .pk-step h2 { font: 600 var(--text-step)/1.35 var(--font-text); letter-spacing: -.005em; word-spacing: 0; }
.cp-mail { align-items: center; gap: var(--space-3); } .cp-addr { font-size: var(--text-sm); color: var(--color-text-muted); }
/* Cycle 119 (F21): the effort meter: five small marks, ink where the offer asks for it, faint where it doesn't. */
.effort { display: inline-flex; gap: 3px; margin: 6px 0 0; }
.ef { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-chip); color: var(--color-text-muted); opacity: .35; }
.ef.is-on { opacity: 1; color: var(--color-text); background: var(--fill-strong); }
/* Cycle 120 (V6.4): the offline page: wordmark, a wifi-off glyph, a way forward. */
.off-brand { margin: 0 0 var(--space-4); font: 700 var(--text-xl)/1 var(--font-display); }
.off-brand .dot { color: var(--color-plan); }
/* Cycle 126 (F12): Tell shows where the switch is: passed stages ticked and dated, the next one marked; the answers
   that move it on, then (below a line) the ones that don't; the save bar stays in reach. */
.tell-stages { list-style: none; margin: 0 0 var(--space-5); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); counter-reset: none; }
.tell-stages li { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--space-1); padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.tell-stages li::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--hairline-strong); }
.tell-stages li:first-child::before { content: none; }
.tell-stages li.is-done::before, .tell-stages li.is-next::before { background: var(--color-done); }
.ts-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface-1); box-shadow: inset 0 0 0 2px var(--hairline-strong); display: grid; place-items: center; }
.is-done .ts-dot { background: var(--color-done); box-shadow: none; }
.is-done .ts-dot::after { content: ""; width: 4px; height: 8px; border: solid var(--color-bg); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.is-next .ts-dot { box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.tell-stages .ts-l { color: var(--color-text); font-weight: 600; line-height: 1.3; }
.tell-stages li:not(.is-done):not(.is-next) .ts-l { color: var(--color-text-muted); font-weight: 500; }
.ts-at { font-variant-numeric: tabular-nums; }
.is-next .ts-at { color: var(--color-accent-text); font-weight: 600; }
.tell-or { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.tell-opt:has(+ .tell-or) { border-bottom: 1px solid var(--hairline); }
@media (max-width: 640px) {
  .tell-stages { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--space-3); }
  .tell-stages li { grid-template-columns: 16px minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
  .tell-stages li::before { top: -50%; left: 7px; width: 2px; height: 100%; }
  .ts-at { justify-self: end; }
}
/* ---------- cycle 132: the chart kit (W3.1, views/viz.ts) ----------
   One drawing language for time and money. Colour follows the roles (W1.1): ink for what you do (ask, completes), plan
   blue for your money away, the money ink for a payment still to come, green only once it's received, amber when late.
   Every chart leads with its summary sentence and carries the same facts as a table. */
.vz { margin: 0; }
.vz-sum { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.vz-draw { display: grid; }
.vz-lane { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.vz-lane + .vz-lane:not(.vz-axis) { border-top: 1px solid var(--hairline); }
.vz-who { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; font-size: var(--text-sm); font-weight: 600; }
.vz-who > span:not(.bm) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-who .bm { --bm: 24px; box-shadow: none; }
.vz-wait { flex-basis: 100%; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.vz-svg { display: block; overflow: visible; }
.vz-tick { stroke: var(--hairline); stroke-width: 1; }
.vz-month { fill: var(--color-text-muted); font: 500 var(--text-xs) var(--font-text); }
.vz-today { stroke: var(--color-text); stroke-width: 1.5; stroke-dasharray: 2 3; }
.vz-today-l { fill: var(--color-text); font: 650 var(--text-xs) var(--font-text); }
.vz-base { stroke: var(--hairline-strong); stroke-width: 2; stroke-linecap: round; }
.vz-ask { fill: var(--color-text); stroke: var(--color-surface-1); stroke-width: 2; }
.vz-step { fill: var(--color-text-muted); }
.vz-complete, .vz-complete-range { fill: var(--color-surface-1); stroke: var(--color-text); stroke-width: 2; }
.vz-away { fill: color-mix(in srgb, var(--color-plan) 55%, transparent); stroke: var(--color-plan); stroke-width: 1.5; }
.vz-quiet { fill: none; stroke: var(--hairline-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.vz-pay { fill: color-mix(in srgb, var(--color-money) 8%, transparent); stroke: var(--color-money); stroke-width: 1.5; }
.vz-paid { fill: var(--color-done); stroke: var(--color-surface-1); stroke-width: 2; }
.vz-late { fill: color-mix(in srgb, var(--color-attention) 22%, transparent); stroke: var(--color-attention); stroke-width: 1.5; }
.vz-ghost { fill: none; stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 3 2; }
.vz-amt { fill: var(--color-money); font: 700 var(--text-xs) var(--font-text); font-variant-numeric: tabular-nums; }
.vz-amt.is-paid { fill: var(--color-done); }
.vz-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--text-xs); color: var(--color-text-muted); }
.vz-k { display: inline-flex; align-items: center; gap: var(--space-1); }
.vz-k::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.vz-k-ask::before { background: var(--color-text); }
.vz-k-complete::before { box-shadow: inset 0 0 0 2px var(--color-text); }
.vz-k-away::before { width: 18px; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-plan) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--color-plan); }
.vz-k-pay::before { width: 18px; height: 12px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1.5px var(--color-money); }
.vz-k-paid::before { background: var(--color-done); }
.vz-k-late::before { width: 18px; height: 12px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--color-attention) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--color-attention); }
.vz-table { margin-top: var(--space-3); border-top: 0; }
.vz-table > summary { min-height: 32px; font-size: var(--text-sm); color: var(--color-plan); }
.vz-table table { font-size: var(--text-sm); }
.vz-spark .vz-svg { height: 24px; }
.vz-route-spark .vz-lane { grid-template-columns: 2rem minmax(0, 1fr); }
/* The complaint ring (W3.7). */
.vz-ringfig { display: flex; align-items: center; gap: var(--space-4); }
.vz-ringfig .vz-sum { margin: 0; color: var(--color-text); }
.vz-ring-bg { fill: none; stroke: var(--fill-strong); stroke-width: 7; }
.vz-ring { fill: none; stroke: var(--color-plan); stroke-width: 7; stroke-linecap: round; }
.vz-ring.is-late { stroke: var(--color-attention); } .vz-ring.is-done { stroke: var(--color-done); }
.vz-ring-n { fill: var(--color-text); font: 700 var(--text-lg) var(--font-text); font-variant-numeric: tabular-nums; }
.vz-ring-u { fill: var(--color-text-muted); font: 500 var(--text-xs) var(--font-text); }
@media (max-width: 560px) { .vz-lane { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2); } .vz-who > span:not(.bm), .vz-wait { display: none; } }
@media print { .vz-table { display: none; } .vz-away { fill: none; } }
.vz-inline .vz-svg { height: 40px; }
.vz-ring-svg { flex: none; }
.vz + .vz, .vz + .vz-ringfig { margin-top: var(--space-5); }

/* ---------- cycle 134: Now as a home (W4.1, W4.5, W4.6) ---------- */
/* On phones, where the rail follows the steps, a band says first where things stand; wide screens have the rail. */
.now-band { display: none; }
@media (max-width: 999px) {
  .now-band { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--hairline); }
  .now-band .ontrack { margin: 0; }
  .now-band p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .now-band .nb-money strong { color: var(--color-money); font-variant-numeric: tabular-nums; }
}
/* The focus card's controls stack at every width: a date over its button, the button its natural size (it stretched to
   about 344 × 110 px beside the date boxes). */
.focus form:has(> .inline-date) { display: grid; gap: var(--space-3); justify-items: start; }
.focus form:has(> .inline-date) > button { width: auto; }
@media (max-width: 560px) { .focus form:has(> .inline-date) > button { width: 100%; } }
/* The rest of what's coming, one tap away. */
.ag-more { margin-top: var(--space-2); }
.ag-more > summary { font-size: var(--text-sm); }
.rem-on { margin: 0; }
.expect-fold > summary { min-height: 40px; }
.expect-fold > summary.expect-h { margin: 0; }
.expect-fold[open] > summary { margin-bottom: var(--space-2); }
@media (max-width: 999px) { .tools-rail .rail-money { display: none; } }
.now-band .nb-held { color: var(--color-text); }

/* ---------- cycle 135: how Pocketly knows (W4.3) and the late-payment ladder (W4.4) ---------- */
.ts-src { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.watch li.is-stale { color: var(--color-text-muted); }
.watch li.is-stale::before { content: "○"; color: var(--color-text-muted); font-weight: 400; }
.ladder { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--hairline); display: grid; gap: var(--space-2); }
.ladder li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; color: var(--color-text-muted); }
.ladder .ld-n { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fill); font: 650 var(--text-xs)/1 var(--font-text); }
.ladder .ld-t { font-weight: 600; font-size: var(--text-sm); }
.ladder .ld-w { font-size: var(--text-xs); }
.ladder li.is-done .ld-n { background: var(--color-done); color: var(--color-bg); }
.ladder li.is-now { color: var(--color-text); }
.ladder li.is-now .ld-n { background: var(--color-attention); color: var(--color-bg); }
/* Cycle 136 (W4.2): your own cash at each bank, as a bar; once moved back, quiet. */
.nw-cash { display: block; margin-top: var(--space-1); }
.nw-cash-bg { fill: var(--fill); } .nw-cash-fill { fill: color-mix(in srgb, var(--color-plan) 70%, transparent); }
.nw-flows li.is-back .nw-cash-fill { fill: var(--fill-strong); }
.nw-flows li.is-back small { color: var(--color-done); }
/* Cycle 137 (W5.6): on a dark screen the evidence pack's paper is toned down, not a glaring white block. */
:root:not([data-theme="light"]) .pk-paper { background: color-mix(in srgb, var(--paper) 95%, var(--color-bg)); }

/* ---------- cycle 138 (W5.1): one home for each switch ---------- */
.sp-next li { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); }
.sp-next li:first-child { border-top: 0; padding-top: 0; }
.sp-next li > span { font-weight: 600; }
.sp-next small, .sp-mail small { color: var(--color-text-muted); font-size: var(--text-xs); }
.sp-mail li { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); min-width: 0; }
.sp-mail a { overflow-wrap: anywhere; }
.sp-rec > .hx-ev:first-child { border-top: 0; padding-top: 0; }
/* The stage list's "how we know" sits under its date on phones, not squeezed into the dot's column. */
@media (max-width: 640px) { .tell-stages .ts-src { grid-column: 3; justify-self: end; margin-top: calc(-1 * var(--space-1)); } }
/* Cycle 138 (W5.2): the stage list is the input: one vertical track at every width; the next stage holds the choices,
   and the note, file and Save appear once one is chosen (in normal flow, so Save never covers an option). */
.tell-stages.is-input { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0 0 var(--space-2); border-bottom: 0; }
.tell-stages.is-input li { grid-template-columns: 16px minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; column-gap: var(--space-3); row-gap: 0; padding: var(--space-2) 0; font-size: var(--text-sm); }
.tell-stages.is-input li::before { content: ""; top: 0; bottom: 0; left: 7px; width: 2px; height: auto; }
.tell-stages.is-input li:first-child::before { top: 16px; }
.tell-stages.is-input li:last-child::before { bottom: auto; height: 16px; }
.tell-stages.is-input li.is-next::before { background: linear-gradient(var(--color-done) 16px, var(--hairline-strong) 16px); }
.tell-stages.is-input .ts-at { justify-self: end; }
.tell-stages.is-input .ts-src { grid-column: 3; justify-self: end; margin-top: calc(-1 * var(--space-1)); }
.ts-choices { grid-column: 2 / -1; justify-self: stretch; margin-top: var(--space-2); }
.ts-choices .tell-opt:last-child { border-bottom: 0; }
.tell-save { margin-top: var(--space-4); }
.tell:has(.is-input):not(:has(input[name="action"]:checked)) :is(.tell-save, .tell-note, .tell-file) { display: none; }
.tell-exc { display: grid; }
/* Cycle 139 (W4.1): Now under 1,700 px on a phone. The rail's status line repeats the band, so it goes; reminders and
   Pocketly's checks fold under one line (open without script, and always open on wide screens, where the summary hides);
   the journey keeps each switch's amount, date and state, and its link to the switch page (Tell is there now). */
.rail-fold > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; cursor: pointer; }
.rf-state { margin-left: auto; font: 500 var(--text-xs) var(--font-text); color: var(--color-text-muted); }
@media (min-width: 1000px) { .rail-fold > summary { display: none; } }
@media (max-width: 999px) { .tools-rail > .ontrack { display: none; } .tools-rail:has(> .rail-fold:not([open])) { padding-block: var(--space-2); } }
@media (max-width: 640px) { .focus .jr :is(.jr-start, .jr-dots, .jr-tell) { display: none; } }
@media (max-width: 640px) {
  .focus .jr .jr-text { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: 0; align-items: center; }
  .focus .jr .jr-amt { font-size: var(--text-lg); }
  .focus .jr .jr-text > :not(.jr-amt) { grid-column: 2; }
  .focus .jr .jr-text > .jr-amt { grid-row: span 3; align-self: start; }
  .focus .jr .jr-state { margin-top: 0; }
  .screen:has(.tools-rail) { padding-bottom: var(--space-5); }
}
.rail-fold > summary.rail-h { border-top: 0; padding-top: 0; }
/* The ladder folds to its current rung on phones (open without script; always open on wider screens). */
.ladder-fold { margin-top: var(--space-4); border-top: 1px solid var(--hairline); }
.ladder-fold > summary { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
.ladder-fold > .ladder { margin-top: 0; border-top: 0; }
@media (min-width: 641px) { .ladder-fold > summary { display: none; } .ladder-fold > .ladder { padding-top: var(--space-3); } }

/* ---------- N2 (6 Nov 2026): reminders asked at the moment a plan starts; while off, said plainly ---------- */
.remind { margin: var(--space-4) 0; }
.remind.is-new { border-color: var(--color-accent); }
.remind h2 { margin-top: 0; }
.rm-ways { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.rm-ways form { margin: 0; }
.rm-pend { margin: 0 0 var(--space-2); }
.now-band .nb-remind { color: var(--color-text); }

/* ---------- N3 (6 Nov 2026): one way to tell Pocketly; while a bank decides, one button opens the stage list ---------- */
.heard > summary { list-style: none; display: inline-flex; width: auto; }
.heard > summary::-webkit-details-marker { display: none; }
.heard[open] > summary { margin-bottom: var(--space-4); }
/* ---------- cycle 140 (W6.1): every offer, accounted for ---------- */
.ledger .lg-list { display: grid; margin-top: var(--space-3); }
.lg-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.lg-row .bm { --bm: 32px; box-shadow: none; }
.lg-main { display: grid; gap: var(--space-1); min-width: 0; }
.lg-main p { margin: 0; }
.lg-name { font-weight: 600; }
.lg-name a { color: inherit; }
.lg-why { font-size: var(--text-sm); color: var(--color-text-muted); }
.lg-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); min-height: 22px; border-radius: var(--radius-pill); font: 600 var(--text-xs) var(--font-text); }
.lg-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lg-chip.is-plan { color: var(--color-done); background: color-mix(in srgb, var(--color-done) 14%, transparent); }
.lg-chip.is-ask { color: var(--color-plan); background: color-mix(in srgb, var(--color-plan) 14%, transparent); }
.lg-chip.is-out { color: var(--color-text-muted); background: var(--fill); }
.lg-val { margin: 0; font: 700 var(--text-md) var(--font-text); font-variant-numeric: tabular-nums; color: var(--color-money); white-space: nowrap; }
.is-ask .lg-val { color: var(--color-plan); font-weight: 600; }
.lg-none { color: var(--color-text-muted); font-weight: 400; }
.is-out .lg-name { font-weight: 500; }
.lg-ask { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.lg-q { font-size: var(--text-sm); }
.lg-btns { gap: var(--space-2); flex-wrap: wrap; }
.lg-btns button { min-height: 36px; padding-inline: var(--space-3); font-size: var(--text-sm); }
.lg-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline-strong); font-weight: 600; }
.lg-total strong { color: var(--color-money); font-variant-numeric: tabular-nums; font-size: var(--text-lg); }
.ledger.is-compact { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.ledger.is-compact > .small { margin: 0; }
.ledger.is-compact .lg-row { grid-template-columns: 24px minmax(0, 1fr) auto; padding: var(--space-2) 0; }
.ledger.is-compact .lg-row .bm { --bm: 24px; }
.ledger.is-compact .lg-name { font-size: var(--text-sm); }
.ledger.is-compact .lg-val { font-size: var(--text-sm); }
.lg-status { line-height: 1; }
/* ---------- cycle 140 (W6.4): a receipt on each condition ---------- */
.rc { display: inline-flex; align-items: center; margin-left: var(--space-1); padding: 0 var(--space-2); min-height: 22px; border-radius: var(--radius-pill); font: 600 var(--text-xs)/1.2 var(--font-text); text-decoration: none; vertical-align: 1px; white-space: nowrap; }
.rc:hover { text-decoration: underline; }
.rc-answer { color: var(--color-plan); background: color-mix(in srgb, var(--color-plan) 12%, transparent); }
.rc-planned { color: var(--color-text); background: var(--fill); }
.rc-later { color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.rc-bank { color: var(--color-text-muted); background: var(--fill); }
.rc-ch { font-weight: 500; }
@media (max-width: 560px) { .rc { white-space: normal; } }
.cond-c.has-rc { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: start; }
.cond-c.has-rc > .rc { margin: var(--space-2) 0 0; }
@media (max-width: 560px) { .cond-c.has-rc { grid-template-columns: minmax(0, 1fr); } .cond-c.has-rc > .rc { justify-self: start; margin: var(--space-1) 0 0; } }
/* ---------- cycle 141 (W6.5, W6.13): the decision's months at a glance; on phones the comparison follows them ---------- */
.rt-map > h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.rt-map .rt-facts { margin-top: var(--space-4); }
.alt-narrow { display: none; }
@media (max-width: 999px) { .alt-wide { display: none; } .alt-narrow { display: block; } .alt-narrow > .rail-h { margin-top: 0; } }
/* ---------- cycle 143 (W6.8, W6.9): why this order; how sure ---------- */
.why-order { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.why-order > h3, .why-order > summary > h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.wo-list { display: grid; gap: var(--space-3); }
.wo-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-sm); }
.wo-list .bm { --bm: 24px; box-shadow: none; }
.wo-list .cond-src { margin-left: var(--space-1); }
.sure { margin: var(--space-3) 0 0; border-top: 1px solid var(--hairline); }
.sure > summary { min-height: 40px; font-size: var(--text-sm); }
.sure-kv { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
/* ---------- cycle 237 (PB-4): plan B inside an offer notice ---------- */
.pb-line { display: block; margin-top: var(--space-2); }
/* ---------- cycle 144 (W6.6): what if ---------- */
.wi-list { display: grid; margin-top: var(--space-3); }
.wi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.wi-l { font-size: var(--text-sm); }
.wi-v { justify-self: end; display: grid; justify-items: end; align-content: start; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-money); white-space: nowrap; }
.wi-d { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.wi-d.is-down { color: var(--color-attention-text, var(--color-attention)); }
.wi-d.is-up { color: var(--color-done); }
.wi-b { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-text-muted); }
.wi-b:empty { display: none; }
.wi-row.is-flip .wi-l { font-weight: 600; }
/* ---------- cycle 144 (W6.7): choosable alternatives ---------- */
.alac-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.alac-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.alac-card > .vz, .alac-card > form, .alac-card > .alac-tag { grid-column: 1 / -1; }
.alac-card .vz-who > span:not(.bm) { display: none; }
.alac-card.is-mine { border-color: color-mix(in srgb, var(--color-plan) 50%, var(--hairline)); }
.alac-card p { margin: 0; }
.alac-name { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.alac-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-money); }
.alac-tag { font-size: var(--text-xs); color: var(--color-plan); }
.alac-card .vz-sum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* read out, not shown: the card says it */
.alac-go { width: 100%; min-height: 36px; font-size: var(--text-sm); }
.whatif > .small, .planb > .small { margin: 0; }
/* ---------- cycle 145 (W6.11): the re-check page ---------- */
.held-list { display: grid; gap: var(--space-3); }
.held-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.held-list .bm { --bm: 32px; box-shadow: none; }
.held-list li > span { display: grid; gap: 2px; }
.held-list small { font-size: var(--text-xs); color: var(--color-text-muted); }
.rc-wait { margin: 0; color: var(--color-done); }
/* ---------- cycle 146 (W6.12): then and now ---------- */
.then-now > .small { margin: 0 0 var(--space-3); }
.tn-table { width: 100%; font-size: var(--text-sm); }
.tn-table th[scope="row"] { font-weight: 500; color: var(--color-text-muted); text-align: left; }
.tn-table td, .tn-table th { padding: var(--space-2) var(--space-2) var(--space-2) 0; vertical-align: top; }
.tn-table tr.is-changed td:last-child { font-weight: 650; color: var(--color-text); }
.tn-table tr.is-changed th[scope="row"] { color: var(--color-text); font-weight: 600; }
.tn-table tr.is-changed th[scope="row"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-2); vertical-align: 2px; border-radius: 50%; background: var(--color-attention); }
.tn-table tr:not(.is-changed) td { color: var(--color-text-muted); }
.then-now .row { margin-top: var(--space-4); }
/* ---------- cycle 147 (W6.3): banking history by family ---------- */
.hy-none { margin: 0 0 var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); font-weight: 600; }
.hy-none-h { margin: 0 0 var(--space-4); }
.hy-family { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4) var(--space-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.hy-fam-h { margin: 0; font-size: var(--text-md); }
.hy-aff { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.hy-family > .hy-bank { margin: 0; padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--hairline); background: none; box-shadow: none; }
.hy-family > .hy-bank > legend { float: left; width: 11rem; padding: var(--space-1) 0 0; font-size: var(--text-sm); }
.hy-family .hy-had { justify-content: flex-start; }
.hy-family .hy-had .hy-q { flex-basis: auto; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hy-family .hy-more { clear: both; }
/* Ticked "never with any": the rows that aren't Yes go quiet (still answerable). */
form:has(input[name="never_all"]:checked) .hy-bank:not(:has(input[value="yes"]:checked)) .hy-had { opacity: .55; }
@media (max-width: 560px) { .hy-family > .hy-bank > legend { width: 100%; padding-top: var(--space-2); } .hy-family .hy-had { clear: both; } }
.hy-family > .hy-bank { padding: var(--space-1) 0; }
.hy-family > .hy-bank > legend { width: 15rem; padding: 0; align-items: flex-start; }
.hy-family > .hy-bank > legend .bm { --bm: 24px; box-shadow: none; }
.hy-bn { display: grid; gap: 0; line-height: 1.35; }
.hy-row-aff { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.hy-family .hy-had .check-row { min-height: 32px; }
.hy-family .hy-had { margin: 0; min-height: 32px; }
.hy-family > .hy-bank > legend { padding-top: var(--space-1); }
.hy-family { padding-bottom: 0; }
/* ---------- cycle 208: the other person's banks (same page, their words) ---------- */
.hy-rj { margin-top: var(--space-1); font-size: var(--text-sm); }
.hy-remove { margin: var(--space-4) 0 0; }
.hy-remove button { padding-inline: 0; color: var(--color-problem); }
.hy-other { margin: var(--space-5) 0 0; font-weight: 600; }
/* Cycle 149 (W6.13): on wide screens a toast sits at the bottom right, away from the content column it used to cover. */
@media (min-width: 1000px) { .flash-wrap.is-toast { left: auto; right: var(--space-5); } }
/* ---------- cycle 151 (W7.7, W7.8): the source stamp; the bank's total against what's counted ---------- */
.stamp { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.st-ring { flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-done); }
.stamp.is-warn .st-ring { box-shadow: inset 0 0 0 2px var(--color-attention); }
.stamp.is-stale .st-ring { box-shadow: inset 0 0 0 2px var(--color-text-muted); }
.st-fp { display: inline-block; vertical-align: baseline; }
.st-fp > summary { display: inline; min-height: 0; font-size: var(--text-xs); color: var(--color-plan); }
.st-fp code { margin-left: var(--space-1); font-size: var(--text-xs); }
.hvc { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--fill); font-size: var(--text-sm); }
.hvc strong { font-variant-numeric: tabular-nums; }
/* ---------- cycle 152 (W3.4): the payout clock ---------- */
.pay-clock, .od-clock { margin: 0 0 var(--space-5); }
.pay-clock > h2, .od-clock > h2 { margin-top: 0; }
/* ---------- cycle 153 (W7.2): offer comparison ---------- */
.cmp-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-top: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.cmp-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg); border-top: 0; font-weight: 650; }
.cmp-table thead a { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; }
.cmp-table thead .bm { --bm: 24px; box-shadow: none; }
.cmp-table tbody th { width: 11rem; font-weight: 500; color: var(--color-text-muted); }
.cmp-table tr.is-diff th { color: var(--color-text); font-weight: 600; }
.cmp-mark { color: var(--color-plan); font-weight: 700; }
.cmp-word { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-plan) 14%, transparent); color: var(--color-plan); font-size: var(--text-xs); font-weight: 600; }
.cmp-same { margin-top: var(--space-4); }
.cmp-pick { margin-top: var(--space-5); }
.cmp-pick fieldset { border: 0; padding: 0; margin: 0; }
.cmp-pick legend { font-weight: 650; margin-bottom: var(--space-2); }
.cmp-opts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.cmp-fold { margin: var(--space-4) 0; }
.cmp-fold .cmp-pick { margin-top: var(--space-2); }
@media (max-width: 560px) { .cmp-table tbody th { width: 7rem; } .cmp-table { min-width: 34rem; } }
.cmp > .lede { margin-bottom: var(--space-4); } .cmp-scroll { margin: 0; }
.cmp-table tr.is-same th { font-weight: 500; }
/* ---------- cycle 154 (W7.5): the offer calendar ---------- */
.of-cal .vz-sum { margin-bottom: var(--space-2); }
.vz-k-complete-range::before { width: 18px; height: 8px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px var(--color-text); }
.vz-k-quiet::before { width: 18px; height: 6px; border-radius: 0; box-shadow: none; border: 1px dashed var(--hairline-strong); }
/* ---------- cycle 155 (W7.4, W3.5): am I clear yet? look-back bars ---------- */
.cy { margin: var(--space-5) 0; }
.cy-form fieldset { border: 0; padding: 0; margin: 0; }
.cy-form legend { font-weight: 650; }
.cy-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); }
.cy-g { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 13rem; font-weight: 600; font-size: var(--text-sm); padding-bottom: var(--space-2); }
.cy-g .bm { --bm: 22px; box-shadow: none; }
.cy-form button { margin-top: var(--space-3); }
.cy-axis { margin-top: var(--space-4); padding-left: calc(2rem + var(--space-3)); }
.cy-list { display: grid; gap: var(--space-3); }
.cy-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.cy-list li > .bm { --bm: 32px; box-shadow: none; }
.cy-list p { margin: 0; }
.cy-name { font-weight: 600; }
.cy-name a { color: inherit; }
.cy-v { font-size: var(--text-sm); }
.cy-ok .cy-v { color: var(--color-done); } .cy-no .cy-v { color: var(--color-text-muted); } .cy-maybe .cy-v { color: var(--color-attention); }
.cy-list .vz-lane { grid-template-columns: minmax(0, 1fr); }
.cy-axis .vz-lane { grid-template-columns: minmax(0, 1fr); }
/* ---------- cycle 156 (W7.12): the register strip ---------- */
.ab-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 var(--space-5); }
.ab-strip .ab-row { display: block; padding: var(--space-2) 0; border-top: 1px solid var(--hairline); line-height: 1.55; }
.ab-strip .ab-row > span { margin-right: var(--space-1); }
.ab-strip .ab-bank { display: inline-flex; gap: var(--space-1); vertical-align: -3px; font-size: var(--text-xs); }
.ab-strip .ab-bank .bm { --bm: 20px; }
.ab-strip .ab-bank > span:last-child { margin-left: 0; }
.ab-strip .ab-bank > span:last-child::after { content: ":"; }
.ab-strip .ab-legal::after, .ab-strip .ab-reg::after { content: "·"; margin-left: var(--space-2); color: var(--color-text-muted); }
.ab-strip .ab-lbl { color: var(--color-text-muted); }
.ab-strip .ab-asat { color: var(--color-text-muted); }
.ab-strip .ab-cap strong { font-variant-numeric: tabular-nums; }
.ab-strip .ab-lbl { display: inline; }

/* Cycle 205: the decision on a phone opens with the answer, the route, your money and the switches. What repeats them
   or explains them folds under one line (data-fold-narrow: open without script and on wider screens, where these look
   as they did: no toggle, the headings as headings). The three facts under the charts repeat the charts' own summaries. */
:is(.why-order, .vs-fold, .lg-fold) > summary { list-style: none; }
:is(.why-order, .vs-fold, .lg-fold) > summary :is(h2, h3) { display: inline; margin: 0; }
.lg-fold > summary .lg-count { display: block; margin-top: var(--space-2); font-weight: 400; }
@media (min-width: 761px) {
  :is(.why-order, .vs-fold, .lg-fold) > summary { pointer-events: none; }
  :is(.why-order, .vs-fold, .lg-fold, .alt-fold) > summary::before { display: none; }
  .alt-fold > summary { display: none; }
  :is(.why-order, .vs-fold, .lg-fold).sec-fold > summary, :is(.why-order, .vs-fold, .lg-fold) > summary { min-height: 0; padding: 0; margin: 0; } /* as they were: plain headings */
  .why-order > summary { margin-bottom: var(--space-2); } .why-order > summary > h3 { display: block; margin: 0; }
  .vs-fold > summary .rail-h { display: block; }
}
@media (max-width: 760px) {
  .rt-map > .rt-facts { display: none; }
  .alt-narrow .alac-card.is-mine { display: none; } /* the route at the top is this plan; the line below says what the extra switch adds */
  :is(.why-order, .vs-fold, .lg-fold, .alt-fold) > summary { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 44px; cursor: pointer; }
  .lg-fold > summary .lg-count { flex: 1 1 100%; margin: 0; }
  .alt-fold > summary { flex-wrap: nowrap; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
  .why-order { margin-top: var(--space-3); border-top: 1px solid var(--hairline); padding-top: var(--space-2); }
}
/* In a source line the stamp flows as text, so its full stop doesn't drop to a line of its own when the line wraps. */
.sc-meta .stamp { display: inline; } .sc-meta .stamp .st-ring { display: inline-block; margin-right: var(--space-1); vertical-align: baseline; }
/* ---------- cycle 242 (CF-3, CF-4): money going out, and what it means for the switch ---------- */
.out-pay { margin: var(--space-3) 0; max-width: 12rem; }
.out-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: end; margin: 0 0 var(--space-3); }
@media (max-width: 560px) { .out-row { grid-template-columns: 1fr 1fr; } .out-row > :first-child { grid-column: 1 / -1; } }
.cf-advice > .small { margin: 0; }
.cf-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.cf-list li { font-size: var(--text-sm); }
/* ---------- cycle 249 (M7 RE-1): a page per bank ---------- */
.bk-list { display: grid; gap: 0; margin: var(--space-3) 0 var(--space-5); border-top: 1px solid var(--hairline); }
.bk-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.bk-list.is-none a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.bk-name { font-weight: 600; }
.bk-amt { color: var(--color-text-muted); font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.bk-list.is-none .bk-amt { text-align: left; }
@media (hover: hover) { .bk-list a:hover .bk-name { text-decoration: underline; } }
.bk-title { display: flex; gap: var(--space-3); align-items: center; }
.bk-title h1 { margin: 0; }
.bk-offer { margin: var(--space-3) 0; }
.bk-watch { margin-bottom: var(--space-4); }
.bk-hist { display: grid; gap: var(--space-2); }
.bk-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); font-size: var(--text-sm); }
/* Cycle 250 (M7 RE-2): the questions. The answer is the lede; then each offer, its mark, its words and its clause. */
.ex .lede { max-width: 62ch; }
.ex-list { display: grid; gap: 0; margin: var(--space-2) 0 var(--space-5); border-top: 1px solid var(--hairline); }
.ex-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.ex-list p { margin: 0; max-width: 68ch; }
.ex-who { font-weight: 600; }
.ex-list .ex-who { margin-bottom: var(--space-1); }
.ex-a strong { font-weight: 650; color: var(--color-text); } .ex-a .ex-more { color: var(--color-text-muted); } /* N6: the answer for that bank leads, the detail follows */
.ex-who a { color: inherit; }
.ex-who .muted { font-weight: 400; font-size: var(--text-sm); }
.ex h2 .muted { font: 400 var(--text-sm)/1 var(--font-text); font-variant-numeric: tabular-nums; }
.ex-more { margin-top: var(--space-6); }
.ex-more ul, .ex-qs { display: grid; gap: var(--space-2); }
.ex-qs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin-top: var(--space-3); }
/* Cycle 251 (M7 RE-3): a pair of banks; the table is the offer comparison's own. */
.pr .cmp-scroll { margin: var(--space-3) 0; }
.bk-cmp { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2); }
/* Two offers fit a phone's width: no sideways scroll for a pair. */
@media (max-width: 560px) { .pr .cmp-table { min-width: 0; } .pr .cmp-table tbody th { width: 6.5rem; } }
/* Cycle 252 (M7 RE-6): sharing an example; what the link holds, said before it's shared. */
.shr .shr-link { margin-bottom: 0; }
.shx .lede { max-width: 62ch; }
.shx-list { display: grid; margin: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.shx-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.shx-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---------- cycle 157 (W7.11): layered privacy, the retention chart ---------- */
.p30-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.p30-grid h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.p30-grid p { margin: 0; }
.ret { margin: var(--space-5) 0 0; }
.ret-axis { position: relative; height: 18px; margin-left: 12rem; margin-right: 7rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.ret-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ret-rows { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.ret-rows li { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 7rem; align-items: center; gap: 0; font-size: var(--text-sm); }
.ret-l { padding-right: var(--space-3); }
.ret-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--fill); }
.ret-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--color-plan); }
.ret-bar.is-open { background: linear-gradient(90deg, var(--color-plan) 85%, transparent); }
.ret-v { padding-left: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 560px) { .ret-axis { margin-left: 0; margin-right: 0; } .ret-rows li { grid-template-columns: minmax(0, 1fr) auto; } .ret-track { grid-column: 1 / -1; grid-row: 2; } }
.ret-w0 { width: 0%; } .ret-w1 { width: 1%; } .ret-w2 { width: 2%; } .ret-w3 { width: 3%; } .ret-w4 { width: 4%; } .ret-w5 { width: 5%; } .ret-w6 { width: 6%; } .ret-w7 { width: 7%; } .ret-w8 { width: 8%; } .ret-w9 { width: 9%; } .ret-w10 { width: 10%; } .ret-w11 { width: 11%; } .ret-w12 { width: 12%; } .ret-w13 { width: 13%; } .ret-w14 { width: 14%; } .ret-w15 { width: 15%; } .ret-w16 { width: 16%; } .ret-w17 { width: 17%; } .ret-w18 { width: 18%; } .ret-w19 { width: 19%; } .ret-w20 { width: 20%; } .ret-w21 { width: 21%; } .ret-w22 { width: 22%; } .ret-w23 { width: 23%; } .ret-w24 { width: 24%; } .ret-w25 { width: 25%; } .ret-w26 { width: 26%; } .ret-w27 { width: 27%; } .ret-w28 { width: 28%; } .ret-w29 { width: 29%; } .ret-w30 { width: 30%; } .ret-w31 { width: 31%; } .ret-w32 { width: 32%; } .ret-w33 { width: 33%; } .ret-w34 { width: 34%; } .ret-w35 { width: 35%; } .ret-w36 { width: 36%; } .ret-w37 { width: 37%; } .ret-w38 { width: 38%; } .ret-w39 { width: 39%; } .ret-w40 { width: 40%; } .ret-w41 { width: 41%; } .ret-w42 { width: 42%; } .ret-w43 { width: 43%; } .ret-w44 { width: 44%; } .ret-w45 { width: 45%; } .ret-w46 { width: 46%; } .ret-w47 { width: 47%; } .ret-w48 { width: 48%; } .ret-w49 { width: 49%; } .ret-w50 { width: 50%; } .ret-w51 { width: 51%; } .ret-w52 { width: 52%; } .ret-w53 { width: 53%; } .ret-w54 { width: 54%; } .ret-w55 { width: 55%; } .ret-w56 { width: 56%; } .ret-w57 { width: 57%; } .ret-w58 { width: 58%; } .ret-w59 { width: 59%; } .ret-w60 { width: 60%; } .ret-w61 { width: 61%; } .ret-w62 { width: 62%; } .ret-w63 { width: 63%; } .ret-w64 { width: 64%; } .ret-w65 { width: 65%; } .ret-w66 { width: 66%; } .ret-w67 { width: 67%; } .ret-w68 { width: 68%; } .ret-w69 { width: 69%; } .ret-w70 { width: 70%; } .ret-w71 { width: 71%; } .ret-w72 { width: 72%; } .ret-w73 { width: 73%; } .ret-w74 { width: 74%; } .ret-w75 { width: 75%; } .ret-w76 { width: 76%; } .ret-w77 { width: 77%; } .ret-w78 { width: 78%; } .ret-w79 { width: 79%; } .ret-w80 { width: 80%; } .ret-w81 { width: 81%; } .ret-w82 { width: 82%; } .ret-w83 { width: 83%; } .ret-w84 { width: 84%; } .ret-w85 { width: 85%; } .ret-w86 { width: 86%; } .ret-w87 { width: 87%; } .ret-w88 { width: 88%; } .ret-w89 { width: 89%; } .ret-w90 { width: 90%; } .ret-w91 { width: 91%; } .ret-w92 { width: 92%; } .ret-w93 { width: 93%; } .ret-w94 { width: 94%; } .ret-w95 { width: 95%; } .ret-w96 { width: 96%; } .ret-w97 { width: 97%; } .ret-w98 { width: 98%; } .ret-w99 { width: 99%; } .ret-w100 { width: 100%; }
.ret-x0 { left: 0%; } .ret-x1 { left: 1%; } .ret-x2 { left: 2%; } .ret-x3 { left: 3%; } .ret-x4 { left: 4%; } .ret-x5 { left: 5%; } .ret-x6 { left: 6%; } .ret-x7 { left: 7%; } .ret-x8 { left: 8%; } .ret-x9 { left: 9%; } .ret-x10 { left: 10%; } .ret-x11 { left: 11%; } .ret-x12 { left: 12%; } .ret-x13 { left: 13%; } .ret-x14 { left: 14%; } .ret-x15 { left: 15%; } .ret-x16 { left: 16%; } .ret-x17 { left: 17%; } .ret-x18 { left: 18%; } .ret-x19 { left: 19%; } .ret-x20 { left: 20%; } .ret-x21 { left: 21%; } .ret-x22 { left: 22%; } .ret-x23 { left: 23%; } .ret-x24 { left: 24%; } .ret-x25 { left: 25%; } .ret-x26 { left: 26%; } .ret-x27 { left: 27%; } .ret-x28 { left: 28%; } .ret-x29 { left: 29%; } .ret-x30 { left: 30%; } .ret-x31 { left: 31%; } .ret-x32 { left: 32%; } .ret-x33 { left: 33%; } .ret-x34 { left: 34%; } .ret-x35 { left: 35%; } .ret-x36 { left: 36%; } .ret-x37 { left: 37%; } .ret-x38 { left: 38%; } .ret-x39 { left: 39%; } .ret-x40 { left: 40%; } .ret-x41 { left: 41%; } .ret-x42 { left: 42%; } .ret-x43 { left: 43%; } .ret-x44 { left: 44%; } .ret-x45 { left: 45%; } .ret-x46 { left: 46%; } .ret-x47 { left: 47%; } .ret-x48 { left: 48%; } .ret-x49 { left: 49%; } .ret-x50 { left: 50%; } .ret-x51 { left: 51%; } .ret-x52 { left: 52%; } .ret-x53 { left: 53%; } .ret-x54 { left: 54%; } .ret-x55 { left: 55%; } .ret-x56 { left: 56%; } .ret-x57 { left: 57%; } .ret-x58 { left: 58%; } .ret-x59 { left: 59%; } .ret-x60 { left: 60%; } .ret-x61 { left: 61%; } .ret-x62 { left: 62%; } .ret-x63 { left: 63%; } .ret-x64 { left: 64%; } .ret-x65 { left: 65%; } .ret-x66 { left: 66%; } .ret-x67 { left: 67%; } .ret-x68 { left: 68%; } .ret-x69 { left: 69%; } .ret-x70 { left: 70%; } .ret-x71 { left: 71%; } .ret-x72 { left: 72%; } .ret-x73 { left: 73%; } .ret-x74 { left: 74%; } .ret-x75 { left: 75%; } .ret-x76 { left: 76%; } .ret-x77 { left: 77%; } .ret-x78 { left: 78%; } .ret-x79 { left: 79%; } .ret-x80 { left: 80%; } .ret-x81 { left: 81%; } .ret-x82 { left: 82%; } .ret-x83 { left: 83%; } .ret-x84 { left: 84%; } .ret-x85 { left: 85%; } .ret-x86 { left: 86%; } .ret-x87 { left: 87%; } .ret-x88 { left: 88%; } .ret-x89 { left: 89%; } .ret-x90 { left: 90%; } .ret-x91 { left: 91%; } .ret-x92 { left: 92%; } .ret-x93 { left: 93%; } .ret-x94 { left: 94%; } .ret-x95 { left: 95%; } .ret-x96 { left: 96%; } .ret-x97 { left: 97%; } .ret-x98 { left: 98%; } .ret-x99 { left: 99%; } .ret-x100 { left: 100%; }
.p30 .vz-sum { margin-bottom: var(--space-2); }
/* The full notice under its headings: open without script and on wide screens; folded on phones (enhance.js). */
.sec-fold > summary { min-height: 44px; padding: var(--space-2) 0; }
.sec-fold > summary h2 { display: inline; margin: 0; font-size: var(--text-lg); }
.sec-fold[open] > summary { margin-bottom: var(--space-2); }
/* ---------- cycle 158 (W7.6): for your answers ---------- */
.mine { max-width: var(--wide); margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--color-surface-1); font-size: var(--text-sm); }
.mine p { margin: 0; }
.mine-k { display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-plan) 14%, transparent); color: var(--color-plan); font-weight: 650; font-size: var(--text-xs); }
.mine.is-no .mine-k { background: var(--fill); color: var(--color-text-muted); }
.mine-act { display: flex; align-items: center; gap: var(--space-3); }
.mine-act form { margin: 0; }
@media (max-width: 1340px) { .mine { margin-left: var(--space-4); margin-right: var(--space-4); } }
/* ---------- cycle 159 (W7.9): guides as a series ---------- */
.gs-sec { margin-top: var(--space-6); }
.gs-sec > h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.gs-card { display: grid; gap: var(--space-1); }
.gs-cover { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); }
.gs-fig { font: 700 var(--text-2xl)/1 var(--font-display); color: var(--color-plan); font-variant-numeric: tabular-nums; }
.gs-what { font-size: var(--text-xs); color: var(--color-text-muted); }
.byline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.rs-fold > summary .rs-fold-h { font-size: var(--text-lg); }
.gs-list { margin: 0; }
/* ---------- cycle 160 (W7.3): the Direct Debit counter ---------- */
.ddc { margin: var(--space-4) 0 var(--space-5); }
.ddc-form fieldset { border: 0; padding: 0; margin: 0; }
.ddc-form legend { font-weight: 650; }
.ddc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 var(--space-3); }
.ddc-k { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.ddc-sum { margin: 0 0 var(--space-3); }
.ddc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
.ddc-col { padding: var(--space-3); border-radius: var(--radius-md); background: var(--fill); }
.ddc-col h3 { display: flex; justify-content: space-between; margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.ddc-col p { margin: 0 0 var(--space-2); }
.ddc-col ul { font-size: var(--text-sm); }
.ddc-col.is-dd { box-shadow: inset 3px 0 0 var(--color-plan); } .ddc-col.is-so { box-shadow: inset 3px 0 0 var(--hairline-strong); } .ddc-col.is-card { box-shadow: inset 3px 0 0 var(--color-attention); }
.ddc-n { font-variant-numeric: tabular-nums; }
.ddc-verdicts { display: grid; gap: 0; margin: var(--space-4) 0; }
.ddc-verdicts li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
.ddc-bank { min-width: 9rem; font-weight: 600; }
.ddc-verdicts .is-ok > span:nth-child(2) { color: var(--color-done); font-weight: 600; } .ddc-verdicts .is-short > span:nth-child(2) { color: var(--color-text-muted); }
.ddc-verdicts .clause { flex-basis: 100%; }
.ddc-change { margin-top: var(--space-3); }
@media (max-width: 560px) { .lp-sec .offer-list > .ol-row:nth-child(n+4) { display: none; } } /* cycle 161: three on a phone; "Compare every offer" follows */
/* Spot illustrations (cycle 165, W2.3): muted ink lines, the accent for the coin and the route's end, paper in the
   card surface; so every scene follows the theme. */
.scene { display: block; width: 9rem; height: auto; color: var(--color-text-muted); }
.scene .sc-a { color: var(--color-accent); }
.scene .sc-p { fill: var(--color-surface-1); }
.msg-card > .scene { margin: 0 auto var(--space-2); }
.empty-scene { margin: 0 0 var(--space-4); }
.empty-scene.is-small { width: 6rem; margin-bottom: var(--space-2); }
.set-empty > .empty-scene { width: 6rem; margin: 0 auto var(--space-3); }
@media (forced-colors: active) { .scene .sc-a { color: CanvasText; } .scene .sc-p { fill: Canvas; } }
/* N6: the method page leads with its promises. */
.promises { margin: var(--space-3) 0 var(--space-6); font-size: var(--text-lg); line-height: 1.5; }
.promises strong { font-weight: 650; }
/* Pocketly Review (cycle 168, W2.6): the reviewer console as its own sub-brand. A teal top rule and a mono "Review" tag
   beside the mark (teal is the reasoning layer's colour), its own three links, and dense mono tables: a working tool,
   not the consumer app. */
body.is-review { border-top: 4px solid var(--color-engine); }
.rv-brand { gap: var(--space-2); }
.rv-tag { margin-left: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-chip);
  font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--color-engine); }
.rv-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-right: auto; margin-left: var(--space-5); font-size: var(--text-sm); }
.rv-nav a { color: var(--color-text-muted); text-decoration: none; min-height: var(--target-min); display: inline-flex; align-items: center; }
.rv-nav a[aria-current] { color: var(--color-text); text-decoration: underline; text-underline-offset: .3em; }
.rv-top .top-tools { display: flex; align-items: center; gap: var(--space-3); }
.is-review main table { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.is-review main :is(th, td) { padding: var(--space-1) var(--space-2); }
.rv-foot .foot-base { padding-block: var(--space-4); }
.rv-enrol { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.rv-qr { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }
.rv-qr svg { display: block; border-radius: var(--radius-sm); }
.rv-key { margin: 0 0 var(--space-4); font-size: var(--text-lg); word-spacing: .4em; }
@media (max-width: 40em) { .rv-enrol { grid-template-columns: 1fr; justify-items: start; } .rv-nav { margin-left: 0; order: 3; width: 100%; } }
/* Cycle 214 (ADR-023): leads from the offer sweep, one card each: whose page, what it said (quoted), one primary action. */
.lead-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); }
.lead-card { padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.lead-head { display: flex; gap: var(--space-3); align-items: center; }
.lead-bank { margin: 0; font-weight: 650; }
.lead-kind { margin: 0; }
.lead-ev { display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
.lead-ev q { font-style: italic; color: var(--color-text); }
.lead-act { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lead-act input { flex: 1 1 14rem; }
.reg-list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.reg-who, .reg-read { display: grid; gap: 0.125rem; min-width: 0; }
.reg-who { flex: 1; }
.reg-read { text-align: right; font-variant-numeric: tabular-nums; max-width: 50%; }
.reg-list small { color: var(--color-text-muted); }
/* Cycle 215 (DS-4): drafted changes, each field with the sentence before and after. */
.draft-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.draft-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); }
.draft-what { margin: 0 0 var(--space-1); }
.draft-what s { color: var(--color-text-muted); }
.draft-edit { margin-top: var(--space-3); }
/* Cycle 216 (RS-1): each offer's clock as a list: the bank, the days left (the one number to scan), and who acts.
   Colour only when a person must act soon. Three columns on wide screens, stacked on phones. */
.ops-clock { display: grid; margin: var(--space-3) 0 0; }
.ops-clock li { display: grid; grid-template-columns: minmax(12rem, 1.2fr) 7rem minmax(0, 2fr); gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.oc-bank { display: grid; gap: var(--space-1); min-width: 0; }
.oc-left { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.oc-left strong { font-size: var(--text-lg); color: var(--color-text); }
.oc-left.is-warn strong { color: var(--color-attention); }
.oc-left.is-bad strong { color: var(--color-problem); }
.oc-who { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.oc-who strong { color: var(--color-text); }
@media (max-width: 40em) {
  .ops-clock li { grid-template-columns: minmax(0, 1fr) auto; }
  .oc-who { grid-column: 1 / -1; }
  /* The console's header on a phone: brand and sign-out on one row, its links below. */
  .rv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .rv-top .rv-brand { grid-column: 1; grid-row: 1; }
  .rv-top .top-tools { grid-column: 2; grid-row: 1; position: static; width: auto; margin: 0; }
  .rv-top .rv-nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; }
}
/* Cycle 216 (RS-2): the hand-capture form, first on a source the bank's site won't let Pocketly read. */
.hand-fast { border-left: 3px solid var(--color-plan); }
.hand-fast input[type="file"] { width: 100%; min-height: 44px; }
/* ---------- cycle 248 (M7 RE-7): reach, in counts ---------- */
.reach-days { display: block; width: 100%; height: 48px; margin: var(--space-3) 0; }
.reach-days rect { fill: var(--color-plan); }
.reach-t td:first-child { position: relative; }
.reach-bar { display: block; width: 100%; height: 4px; margin-top: var(--space-1); }
.reach-bar rect { fill: var(--color-plan); opacity: .55; }
/* Page archetypes (cycle 170, W1.3): each kind of page sets its own type roles, density and surfaces, so a form reads
   like every other form and a record like every other record (views/archetype.ts maps every route to one).
   Ledger: records of money and dates; tables set their figures in tabular numerals, and rows sit close.
   Sheet: one form at a time; a calmer headline, so the question leads.
   Settings: grouped lists; the smallest headline of all, the groups carry the page.
   Reference: reading; an editorial headline and a measure kept for long text.
   Poster and console have their own stylesheets (landing.css; 9c-review.css). */
[data-kind="ledger"] main table { font-variant-numeric: tabular-nums; }
[data-kind="ledger"] main :is(th, td) { padding-block: var(--space-2); }
[data-kind="sheet"] main h1:not(.hero) { font-size: var(--text-display-s); }
[data-kind="settings"] main h1 { font-size: var(--text-2xl); }
[data-kind="reference"] main h1 { font-size: var(--text-display-m); line-height: var(--lead-display); }
[data-kind="reference"] main .wrap > p:not(.lede):not(.crumbs):not(.byline) { max-width: 68ch; }
/* Phase G (cycles 171 on): Now's lenses, and the pages between switches. */
/* Cycle 171 (W4.8): Everything / Today / This week, as a segmented row of links (each its own address). */
.lens { display: inline-flex; gap: 2px; margin: 0 0 var(--space-3); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-2); }
.lens a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-decoration: none; }
.lens a[aria-current="page"] { background: var(--color-surface-1); color: var(--color-text); box-shadow: var(--shadow-1); }
@media (hover: hover) and (pointer: fine) { .lens a:not([aria-current]):hover { color: var(--color-text); } }
.lens-wrap { max-width: 40rem; }
.lens-wrap h1 { margin-top: var(--space-2); }
.lens-none { margin-top: var(--space-4); }
/* Cycle 172 (W4.7): several switches at once, a row each at the top of Now. */
.sw-stack { display: grid; margin: 0 0 var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface-1); overflow: hidden; }
.sw-stack > li + li { border-top: 1px solid var(--hairline); }
.sws-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark main next" "mark dots next"; align-items: center; gap: var(--space-1) var(--space-3);
  min-height: var(--target-min); padding: var(--space-3) var(--space-4); color: var(--color-text); text-decoration: none; }
.sws-row > .bm { grid-area: mark; --bm: 32px; }
.sws-main { grid-area: main; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; min-width: 0; }
.sws-bank { font-weight: 650; }
.sws-state { font-size: var(--text-sm); color: var(--color-text-muted); }
.sws-dots { grid-area: dots; display: flex; gap: var(--space-1); }
.sws-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fill-strong); }
.sws-dots i.is-done { background: var(--color-plan); }
.sws-next { grid-area: next; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; text-align: right; }
.sws-next time { display: block; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .sws-row:hover { background: var(--fill); } }
/* Cycle 173 (W5.5): the message as it will read: a sheet of paper, the blanks marked until they're filled. */
.letter-preview { margin: var(--space-3) 0 0; padding: var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--color-surface-1); box-shadow: var(--shadow-1); }
.lp-subject { margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); font-weight: 650; }
.lp-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-md); line-height: var(--lead-body); }
.ph { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: color-mix(in srgb, var(--color-attention) 18%, transparent); color: inherit; }
.ph.is-filled { background: color-mix(in srgb, var(--color-done) 14%, transparent); }
.ph-fill { margin: var(--space-3) 0 0; }
.ph-fill > summary { min-height: var(--target-min); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.ph-fields { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ph-fields label { display: grid; gap: var(--space-1); }
/* Cycle 174 (W5.7): a payment landing. The receipt line in place of "Recorded", a milestone row in History. */
.flash.is-receipt { border-left: 3px solid var(--color-done); font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-ev.is-milestone .hx-t { font-weight: 650; }
.hx-ev.is-milestone > .bm { box-shadow: 0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-done); }
/* Cycle 175 (W5.3): proof strength per condition. Four steps, each its own mark: your word (hollow), your screenshot,
   the bank's email, the bank's confirmation (solid, done green). Shape and words carry it, not colour alone. */
.pf-sum { margin: 0 0 var(--space-3); font-weight: 600; }
.pf-lvl { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.pf-lvl::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid currentColor; }
.pf-lvl.is-word { color: var(--color-text-muted); }
.pf-lvl.is-screenshot::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.pf-lvl.is-email::before { background: currentColor; border-radius: var(--radius-xs); }
.pf-lvl.is-confirmation { color: var(--color-done); } .pf-lvl.is-confirmation::before { background: currentColor; }
.pf-on { color: var(--color-text-muted); }
.pf-files { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.pf-add { margin-top: var(--space-1); font-size: var(--text-sm); border-top: 0; }
.pf-add > summary { min-height: var(--target-min); display: inline-flex; align-items: center; cursor: pointer; color: var(--color-plan); font-weight: 600; }
.pf-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.pf-form label { display: grid; gap: var(--space-1); }
/* Cycle 176 (W5.4): an email that changes the plan: each step that moves, from and to. */
.pm-card { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, var(--color-attention) 45%, var(--hairline)); border-left-width: 3px; border-radius: var(--radius-md); background: var(--color-surface-1); }
.pm-card > h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.pm-card > p { margin: 0 0 var(--space-3); }
.pm-list { display: grid; gap: var(--space-2); }
.pm-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-3); align-items: center; }
.pm-list .bm { --bm: 28px; grid-row: span 2; }
.pm-t { font-weight: 600; }
.pm-d { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pm-from { color: var(--color-text-muted); text-decoration: line-through; }
.pm-d small { color: var(--color-text-muted); }
/* Cycle 177 (W8.1): the switching passport: a row per banking group, each offer's look-back as a bar, your rewards as dots. */
.psp { max-width: 52rem; }
.psp-chart { margin-top: var(--space-2); } .psp-chart .vz-lane { grid-template-columns: minmax(0, 1fr); }
.psp-list { display: grid; gap: var(--space-4); margin: 0 0 var(--space-4); }
.psp-row { padding: var(--space-4) var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.psp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.psp-head h3 { margin: 0; font-size: var(--text-lg); }
.psp-head .bm { --bm: 28px; }
.psp-had { flex-basis: 100%; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.psp-offers { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.psp-o { padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.psp-o-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 0; font-weight: 600; }
.psp-v { font-size: var(--text-sm); }
.psp-o.is-clear .psp-v { color: var(--color-done); } .psp-o.is-not .psp-v { color: var(--color-problem); } .psp-o.is-unsure .psp-v { color: var(--color-attention); }
.psp-accs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.psp-accs li { display: inline-flex; align-items: center; gap: var(--space-2); } .psp-accs .bm { --bm: 24px; }
.psp-accs small { color: var(--color-text-muted); }
/* Cycle 178 (W8.6): the next possible switch, when a plan ends. */
.end-next { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0 0 var(--space-3); }
.end-next .bm { --bm: 28px; }
/* Cycle 179 (W8.4): the lifetime ledger on History: a calm total, then each year and each payment, each opening its pack. */
.lt { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.lt > h2 { margin: 0; font-size: var(--text-md); color: var(--color-text-muted); }
.lt-total { margin: var(--space-1) 0 var(--space-3); font: 700 var(--text-fig-m)/1.1 var(--font-display); color: var(--color-money); font-variant-numeric: tabular-nums; }
.lt-total small { margin-left: var(--space-2); font: 400 var(--text-sm)/1 var(--font-text); color: var(--color-text-muted); }
.lt-years { display: grid; gap: var(--space-3); margin: 0; }
.lt-years dt { display: flex; justify-content: space-between; padding-bottom: var(--space-1); border-bottom: 1px solid var(--hairline); font-weight: 650; }
.lt-sum { font-variant-numeric: tabular-nums; }
.lt-years dd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; margin: var(--space-2) 0 0; }
.lt-years dd .bm { --bm: 24px; } .lt-years dd small { color: var(--color-text-muted); }
.lt-years dd a { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Cycle 180 (W8.3): your switching year: facts, then three short tables; on paper, one A4 sheet. */
.yr { max-width: 46rem; }
.yr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.yr-facts > div { padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.yr-facts dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.yr-facts dd { margin: var(--space-1) 0 0; font: 700 var(--text-fig-s)/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-money); }
.yr h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); }
.yr-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.yr-t :is(th, td) { padding: var(--space-2); border-bottom: 1px solid var(--hairline); text-align: left; }
.yr-t .num { text-align: right; } .yr-t .bm { --bm: 20px; }
.yr-banks { display: grid; gap: var(--space-2); } .yr-banks .bm { --bm: 20px; } .yr-banks small { color: var(--color-text-muted); }
.yr-foot { margin-top: var(--space-5); color: var(--color-text-muted); }
/* Cycle 181 (W8.7): the seasonal re-check, between switches. */
.rc-card { margin-bottom: var(--space-5); }
.rc-card > h2 { margin-top: 0; }
.rc-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding-left: var(--space-5); }
/* Cycle 182 (W8.5): History as a ledger with a story: a time spine through the days, an amounts column, what changed. */
.hx-filter { margin-top: var(--space-4); flex-wrap: wrap; }
.hx-packlinks { margin: 0 0 var(--space-3); }
.hx-panel ul.hx { position: relative; }
.hx-panel ul.hx::before { content: ""; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px; background: var(--hairline); }
.hx-panel .hx-ev > :first-child { position: relative; z-index: 1; }
.hx-ev:has(> .hx-amt) { grid-template-columns: 32px minmax(0, 1fr) auto; }
.hx-amt { margin: 0; align-self: start; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
.hx-amt.is-in { color: var(--color-done); }
.hx-chg { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0; }
.hx-chg span { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--fill); font-size: var(--text-xs); font-weight: 600; }
/* Cycle 183 (W8.2): offer watch. */
.nfy { margin-bottom: var(--space-4); }
.nfy > h2 { margin-top: 0; }
.nfy-list { display: grid; gap: var(--space-3); }
.nfy-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.nfy-list .bm { --bm: 32px; }
.nfy-main { display: grid; gap: var(--space-1); } .nfy-main a { font-weight: 650; } .nfy-main small { color: var(--color-text-muted); }
.ow-form { display: grid; gap: var(--space-3); padding: var(--space-3) 0; }
.ow-form label:not(.ow-check) { display: grid; gap: var(--space-1); }
.ow-check { display: flex; align-items: center; gap: var(--space-2); }
/* Cycle 185 (W10.4): a button that waits on the server shows a small spinner in place of its arrow; still under reduced
   motion (a ring, not turning); a note if it comes back unanswered or the device is offline. */
button.is-busy { display: inline-flex; align-items: center; gap: var(--space-2); }
button.is-busy::after { content: ""; width: .9em; height: .9em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) { button.is-busy::after { animation: busy-turn .8s linear infinite; } }
@keyframes busy-turn { to { transform: rotate(1turn); } }
.busy-note { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-attention); }
/* Cycle 189 (W9.5): wayfinding. "On this page" folded under the headline; a reading-progress line on long reference pages. */
.otp { margin: var(--space-2) 0 var(--space-3); border-top: 0; }
.otp > summary { font-size: var(--text-sm); color: var(--color-text-muted); }
.otp-n { margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--fill); font-size: var(--text-xs); }
.otp-list { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); padding-left: var(--space-6); font-size: var(--text-sm); }
.read-line { position: fixed; top: 0; left: 0; z-index: 30; height: 3px; width: 0; background: var(--color-plan); pointer-events: none; }
@media print { .read-line { display: none; } }
/* Cycle 190 (W10.1): installed, Pocketly is an app: no marketing footer (the signed-out one); the compact footer keeps
   its legal links. */
@media (display-mode: standalone) { .foot:not(.foot-compact) { display: none; } }
/* Cycle 191 (W11.2): a toast never covers the end of the page: the page keeps its height as room below. */
body.has-toast main { padding-bottom: var(--toast-h, 0px); }

/* Cycle 194 (W1.7): compact density on ledger pages (Your data › Display). The spacing and type tokens step down one
   notch inside the page, the date tiles and bank marks narrow, decorative step dots go (the step is written beside
   them), and the rows per switch at the top give way to the route, which says the same with amounts. Same content, about a quarter
   less height on a phone. */
body.is-compact[data-kind="ledger"] main { --space-3: .5rem; --space-4: .625rem; --space-5: .875rem; --space-6: 1.25rem; --space-7: 1.75rem; --space-8: 2.5rem;
  --text-md: .9375rem; --text-lg: 1rem; --text-step: 1rem; --text-display-s: 1.375rem; --text-display-m: 1.625rem; --text-display-l: 1.875rem;
  --text-fig-l: 1.875rem; --text-fig-m: 1.625rem; --text-fig-s: 1.25rem; font-size: var(--text-md); line-height: 1.4; }
body.is-compact[data-kind="ledger"] main :is(.lede, p, li) { line-height: 1.4; }
body.is-compact[data-kind="ledger"] .ag-day { grid-template-columns: 3.5rem minmax(0, 1fr); padding: var(--space-2) 0; }
body.is-compact[data-kind="ledger"] .ag-tile { padding-bottom: var(--space-1); }
body.is-compact[data-kind="ledger"] .ag-steps { gap: var(--space-2); }
body.is-compact[data-kind="ledger"] .ag-step { grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2); }
body.is-compact[data-kind="ledger"] .ag-step .bm { --bm: 22px; }
body.is-compact[data-kind="ledger"] .bm { --bm: 28px; }
body.is-compact[data-kind="ledger"] :is(.jr-dots, .sws-dots) { display: none; }
/* The route in the focus card already names each switch, its amount, its dates and its link: compact drops the row per switch above it. */
body.is-compact[data-kind="ledger"] main:has(.focus .jr) .sw-stack { display: none; }
body.is-compact[data-kind="ledger"] .tell-row { min-height: 44px; margin: 0; padding-block: 2px; } /* still a full-size touch target */
.ow-set { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ow-set legend { margin-bottom: var(--space-2); font-weight: 600; }
.ow-check small { font-weight: 400; color: var(--color-text-muted); }

/* Cycle 195 (W12.3): plain view (Your data › Display). Every page in its simplest form: a chart is its summary and its
   table (opened by the server), with no drawing; decorative scenes and progress bars go; nothing moves (motion.css); text is a
   little larger and every control at least 48 px tall. */
html.is-plain { font-size: 106.25%; }
html.is-plain :is(.vz-draw, .vz-key, .vz-table > summary, .psp-chart, .nw-track, .scene, .jr-dots, .sws-dots) { display: none; }
html.is-plain .vz-table { margin-top: var(--space-2); }
html.is-plain :is(button, .btn, select, input:not([type=checkbox], [type=radio], [type=hidden]), .tabbar a) { min-height: 48px; }
html.is-plain main a:not(.btn, .set-row, .sws-row) { text-decoration: underline; text-underline-offset: .2em; }

/* Cycle 196 (W12.1): large text, designed. At 200% text nothing is cut off: the offers table scrolls inside its card
   (a table keeps its rows), short reasons and progress lines wrap instead of trailing off, rows of controls wrap, and
   segmented lenses take a second line rather than run off the page. */
.ot-wrap { overflow-x: auto; }
.fit-why { white-space: normal; overflow: visible; text-overflow: clip; }
.qc-progress, .cash-k { white-space: normal; }
.form-actions { flex-wrap: wrap; }
.form-actions > :is(button, .btn) { max-width: 100%; white-space: normal; }
.lens { flex-wrap: wrap; max-width: 100%; }
.bank-tile { min-width: 0; } .bank-name { min-width: 0; overflow-wrap: break-word; }
/* A container measured in rem follows the text size: in a group under 20rem (320 px at normal size, which no phone
   reaches, but 640 px at 200%), a row's end (a date, a count) moves under its title instead of squeezing it to a word. */
.set-group { container: set / inline-size; }
@container set (max-width: 20rem) { .set-row { grid-template-columns: auto minmax(0, 1fr); } .set-row > .set-end { grid-column: 2; justify-self: start; } }
/* Yes / No / I'm not sure: the options wrap onto a second line when the words are large. */
.seg-q:not(.seg-wide) .seg-opts { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.seg-q:not(.seg-wide) .seg-opts label { flex: 1 0 auto; min-width: 5.5rem; }
.seg-q:not(.seg-wide) .seg-opts label span { width: 100%; justify-content: center; }
@container set (max-width: 20rem) { .inb-row .set-title { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } }
/* A chart under 20rem wide (only when the text is large) is its summary and its table: enhance.js opens the table. */
figure.vz { container: vz / inline-size; }
@container vz (max-width: 20rem) { .vz-draw, .vz-key, .vz-table > summary { display: none; } }
.next-bar { flex-wrap: wrap; } .next-bar :is(button, .btn) { max-width: 100%; white-space: normal; }
.dd-group :is(strong, .muted) { min-width: 0; overflow-wrap: break-word; }
.ow-form, .ow-form > *, .ow-set > * { min-width: 0; }
/* The description sits beside its option while it has 10rem; with large text it moves underneath. */
.ow-check { flex-wrap: wrap; overflow-wrap: break-word; } .ow-check small { flex: 1 1 10rem; }
.bank-chosen:not([hidden]) { flex-wrap: wrap; } .bank-chosen-name { min-width: 0; overflow-wrap: break-word; }

/* Cycle 199 (W13.3): one primary message per page; what supports it is one line deeper. */
.lg-more { margin-top: var(--space-2); border-top: 1px solid var(--hairline); }
.lg-more > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.whatif .sec-fold > summary .small, .planb .sec-fold > summary .small { margin-left: var(--space-2); color: var(--color-text-muted); }

/* Cycle 200 (W9.4): find anything. One box, results grouped by kind, the words searched for marked. */
.sr { max-width: 46rem; }
.sr-form label { display: block; margin-bottom: var(--space-2); font-weight: 600; }
.sr-box { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.sr-box:focus-within { border-color: var(--color-plan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-plan) 18%, transparent); }
.sr-box > svg { flex: none; color: var(--color-text-muted); }
.sr-box input { flex: 1; min-width: 0; border: 0; background: none; padding-inline: 0; }
.sr-box input:focus { outline: none; box-shadow: none; } /* the box around it takes the focus ring */
.sr-key kbd { padding: 0 var(--space-1); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font: inherit; }
.sr-group { margin-top: var(--space-5); }
.sr-group h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.sr-n { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--fill); font-size: var(--text-xs); color: var(--color-text-muted); }
.sr-list { display: grid; gap: var(--space-1); }
.sr-hit { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.sr-hit:hover, .sr-hit:focus-visible { background: var(--fill); }
.sr-title { font-weight: 600; color: var(--color-plan); text-decoration: underline; text-underline-offset: .2em; }
.sr-snip { font-size: var(--text-sm); color: var(--color-text-muted); }
.sr-hit mark { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: inherit; }
.sr-none { margin-top: var(--space-5); }
.top-search { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-pill); color: var(--color-text-muted); }
.top-search:hover { color: var(--color-text); background: var(--fill); }
.top-search.nav-narrow { display: none; }
@media (max-width: 760px) { .top .top-search.nav-narrow { display: inline-flex; margin-left: auto; } .top .top-search.nav-narrow + .menu { margin-left: 0; } }
.offline-asof { margin-top: var(--space-3); } /* cycle 201: the offline copy of Now says when it is from (sw.js) */

/* Cycle 203 (W10.3): "File it on which switch?" after sharing from the phone: one large target per switch. */
.sh { max-width: 36rem; }
.sh-list { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.sh-form { margin: 0; }
.sh-pick { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); text-align: left; }
.sh-pick span { display: grid; gap: var(--space-1); }
.sh-file { margin-bottom: var(--space-2); } .sh-pick small { font-weight: 400; color: var(--color-text-muted); }
.sh-packs { display: grid; gap: var(--space-1); margin-top: var(--space-2); }

/* Cycle 206: large text on a phone. Measured in rem, so they never trigger at normal size on a phone. The tab bar can't
   fit five labels at 200%: it shows its icons, each tab keeping its name for screen readers (as a phone's own tab bar
   does at the largest sizes); the paper pack's header stacks the mark above the title, and its date wraps. */
.tabbar { container: tabs / inline-size; }
@container tabs (max-width: 20rem) {
  .tabbar a > span:not(.badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.pk-paper { container: paper / inline-size; }
@container paper (max-width: 15rem) { .pp-head { grid-template-columns: minmax(0, 1fr); } .pp-head h2 { overflow-wrap: break-word; } }
@media (max-width: 560px) { .pp-date { white-space: normal; } }
/* Cycle 212 (ADR-021): plan for two. One figure for the household with each person's share beneath it; each person a
   card whose heading carries their amount; their switches as rows (mark, account and dates, amount); their questions
   in the card that needs them. "Their own cash" fields show only when chosen (no script needed). */
.hh .hh-own { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.hh:has(input[name="cash"][value="shared"]:checked) .hh-own { display: none; }
.hh-cash-q { margin-bottom: var(--space-2); }
.hh-person h2 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.hh-sum { font-variant-numeric: tabular-nums; }
.hh-title { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.hh-none { margin: 0 0 var(--space-3); }
.hh-switches { display: grid; margin: 0 0 var(--space-3); border-top: 1px solid var(--hairline); }
.hh-switches li { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.hh-sw { flex: 1; min-width: 0; display: grid; gap: 0.125rem; }
.hh-sw small { color: var(--color-text-muted); }
.hh-amt { font-weight: 650; font-variant-numeric: tabular-nums; }
.hh-qs ol { display: grid; gap: var(--space-3); }
.hh-q p { margin: 0 0 var(--space-2); }
.hh-cash { margin-top: var(--space-3); }
.hh-after { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.hh-split { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 var(--space-3); border-top: 1px solid var(--hairline); }
.hh-split div { padding: var(--space-2) 0; }
.hh-split dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.hh-split dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Cycle 225 (EC-2): the group's next window beside its name, and the rule that binds under an offer. */
.psp-next { margin: 0 0 0 auto; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.psp-why { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
/* ---------- cycle 239 (HH2-1): the other order, offered quietly in the rail ---------- */
.hh-order { margin: 0 0 var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
.hh-order p { margin: 0 0 var(--space-2); }
.hh-order button.link { padding-inline: 0; }
/* ---------- cycle 240 (HH2-3): the other person's switches on Now ---------- */
.whose { display: inline-block; margin-right: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--fill); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; vertical-align: 0.1em; }
.whose-line { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.lens-who { margin-top: calc(-1 * var(--space-2)); }
.hh-track { margin: var(--space-3) 0 0; }
.hh-track .small { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.hh-consent { margin: var(--space-2) 0; }
/* ---------- cycle 245 (M6 MY, ADR-030): the next three years ---------- */
.yrs { min-width: 0; }
@media (min-width: 1000px) { .yrs .screen { grid-template-rows: auto 1fr; } }
.yrs-chart { margin: var(--space-3) 0; }
.yrs-lane.is-later { opacity: .72; }
.yrs-sep { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.yrs-list, .yrs-keep { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.yrs-keep li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.yrs-costs { margin: 0 0 var(--space-3); border-top: 1px solid var(--hairline); }
.yrs-costs div { padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.yrs-costs dt { font-size: var(--text-xs); color: var(--color-text-muted); } .yrs-costs dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.yrs-guard { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.yrs-borrow fieldset { margin: 0; padding: 0; border: 0; }
.yrs-borrow-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* N4 (6 Nov 2026): the offers catalogue's two views, by offer and by bank, the same switch on both. */
.cat-view { margin-bottom: var(--space-4); }
/* Cycle 219 (M2, EV-3): a statement checked against a switch. One card per condition: the progress as the terms count it
   (a thin native progress bar: the number is the words above it), then the lines behind it, the ones that didn't count
   first because that's what people need to see. Calm: colour only for met (green) and "check these" (amber). */
.ev .ev-rec { border-left: 3px solid var(--color-plan); }
.ev-rec h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.ev-picks { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ev-picks small { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
.ev-cond { display: grid; gap: var(--space-2); }
.ev-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ev-head h2 { margin: 0; font-size: var(--text-lg); }
.ev-met { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-done); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.ev-met svg { width: 16px; height: 16px; }
.ev-say { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ev-bar { appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
.ev-bar::-webkit-progress-bar { background: var(--color-surface-2); border-radius: var(--radius-pill); }
.ev-bar::-webkit-progress-value { background: var(--color-plan); border-radius: var(--radius-pill); }
.ev-bar::-moz-progress-bar { background: var(--color-plan); border-radius: var(--radius-pill); }
.ev-cond.is-met .ev-bar::-webkit-progress-value { background: var(--color-done); }
.ev-cond.is-met .ev-bar::-moz-progress-bar { background: var(--color-done); }
.ev-h3 { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.ev-lines { display: grid; margin: 0; }
.ev-lines li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-top: 1px solid var(--hairline); font-size: var(--text-sm); }
.ev-when { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ev-what { min-width: 0; overflow-wrap: anywhere; }
.ev-what small { display: block; color: var(--color-text-muted); }
.ev-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-lines.is-out .ev-what { color: var(--color-text-muted); }
.ev-lines.is-unclear .ev-what small { color: var(--color-attention); }
.ev-fold summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
@media (max-width: 40em) { .ev-lines li { grid-template-columns: minmax(0, 1fr) auto; } .ev-when { grid-column: 1 / -1; } }
/* Cycle 220 (EV-5): where a condition stands from the person's statement, wherever the condition is listed; and the
   statement line under a recorded event. Quiet: the same size as the notes around them. */
.ev-prog { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text); }
.ev-src { color: var(--color-text-muted); }
.ev-src-fold { font-size: var(--text-sm); color: var(--color-text-muted); }
.ev-src-fold summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.ev-src-fold ul { margin: var(--space-1) 0 0 var(--space-5); font-variant-numeric: tabular-nums; }
/* Cycle 222 (EV-6): what was recorded automatically, each with its Undo beside it. */
.ev-undo { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
.ev-undo li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); }
.ev-undo form { margin: 0; flex: none; }
.ev .ev-auto { border-left: 3px solid var(--color-done); }
.ev-auto h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
/* Cycle 223 (NU-1): why a step needs you now, only when it does; amber words, no badge or alarm. */
.nu-why { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-attention); }
/* Cycle 229 (QC-1): the quick check as a front door (minicheck.ts). Three questions in a quiet panel; chips and
   segments as on the landing's mini check, a primary button, nothing else. */
.qm { margin: var(--space-6) 0; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface-1); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-1); }
.qm h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); letter-spacing: -0.01em; }
.qm-k { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.qm-q { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.qm-q > legend { padding: 0; margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.qm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qm-chips label { position: relative; margin: 0; cursor: pointer; }
.qm-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.qm-chips label > span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--fill); font-size: var(--text-sm); font-weight: 550; border: 1px solid transparent; }
.qm-chips input:checked + span { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-1)); border-color: var(--color-accent); }
.qm-chips input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .qm-chips label:hover > span { background: var(--fill-strong); } }
.qm .seg-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 30rem; }
.qm .seg-opts label span { justify-content: center; padding: 0 var(--space-1); }
.qm button.primary { margin-top: var(--space-1); }
@media (forced-colors: active) { .qm-chips input:checked + span { border: 2px solid Highlight; } }
/* The result's line about the offer you came from (QC-3). */
.qm-focus { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); border-left: 3px solid var(--color-plan); }
.qm-focus.is-in { border-left-color: var(--color-done); }
.qm-focus.is-out { border-left-color: var(--color-attention); }
/* Cycle 230 (IMP): your switching tracker into your history. */
.hy-import { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.hy-import svg { flex: none; width: 20px; height: 20px; }
.hy-kept { margin: 0 0 var(--space-3); }
.imp-paste { margin: var(--space-3) 0; }
.imp-paste textarea { width: 100%; font: var(--text-sm)/1.45 var(--font-mono, ui-monospace, monospace); }
.imp-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.imp-map-f label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.imp-map-f select { width: 100%; }
.imp-rows > li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--hairline); }
.imp-rows > li:first-child { border-top: 0; }
.imp-what { display: grid; gap: .125rem; font-size: var(--text-sm); }
.imp-what strong { font-size: var(--text-md); }
.imp-line { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.imp-problem { color: var(--color-problem); font-weight: 550; }
.imp-skipped { color: var(--color-text-muted); font-size: var(--text-sm); }
.imp-map { margin-top: var(--space-5); }
/* Cycle 231 (HELP): "Ask about this switch": questions as chips, the answer in a quiet card with the clause it rests on. */
.ask-a { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ask-a h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.ask-a p { margin: 0 0 var(--space-2); }
.ask-a > p:last-child { margin-bottom: 0; }
.ask-cite { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 3px solid var(--hairline-strong); color: var(--color-text-muted); font-size: var(--text-sm); }
.ask-cite span { font-weight: 600; color: var(--color-text); }
.ask-qs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ask-qs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--fill); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 550; }
.ask-qs a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ask-qs a:hover { background: var(--fill-strong); } }
@media (forced-colors: active) { .ask-qs a { border: 1px solid LinkText; } }
/* Cycle 232 (FD-2): the developers page. */
.dev-list dt { margin-top: var(--space-4); font-weight: 600; }
.dev-list dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.dev-code { overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); font: var(--text-sm)/1.55 var(--font-mono, ui-monospace, monospace); }
/* Cycle 233 (QR): the quarterly report pages. */
.qr-list > li > a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--color-text); }
.qr-list > li > a span { color: var(--color-text-muted); }
.qr-method dt { margin-top: var(--space-3); font-weight: 600; }
.qr-method dd { margin: var(--space-1) 0 0; }
.qr-table td.num { font-variant-numeric: tabular-nums; }
.qr-table tbody th { font-size: var(--text-md); font-weight: 600; color: var(--color-text); }
.dev-code:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Cycle 234 (BR-4): savers and cashback, below the offers, not counted. */
.sc-section { margin: var(--space-5) 0 0; }
/* N6: the offers page ends at the switching offers; one quiet line leads to savers and cashback. */
.of-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: var(--space-6) 0 0; font-weight: 600; }
.of-more .muted { font-weight: 400; font-size: var(--text-sm); }
.sc-section h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }
.sc-list > li { border-top: 1px solid var(--hairline); }
.sc-list > li:last-child { border-bottom: 1px solid var(--hairline); }
.sc-item > summary { display: grid; grid-template-columns: 1.25rem auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; cursor: pointer; list-style: none; min-height: 44px; }
.sc-item > summary::-webkit-details-marker { display: none; }
.sc-name { display: grid; gap: .125rem; min-width: 0; }
.sc-name span { color: var(--color-text-muted); font-size: var(--text-sm); }
.sc-n { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.sc-n small { color: var(--color-text-muted); font-size: var(--text-xs); }
.sc-body { padding: 0 0 var(--space-4); }
.sc-body dt { margin-top: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.sc-body dd { margin: .125rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sc-item > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sc-item > summary:hover strong { text-decoration: underline; } }
@media (max-width: 560px) {
  .sc-item > summary { grid-template-columns: 1.25rem auto 1fr; row-gap: var(--space-1); }
  .sc-n { grid-column: 3; justify-items: start; text-align: left; display: flex; gap: var(--space-2); align-items: baseline; }
}
/* N3 (6 Nov 2026): the first questions as one set of controls, here and in the quick check. */
.entry-q { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.entry-q > legend { padding: 0; margin: 0 0 var(--space-2); font-weight: 600; }
.qm .entry-q > legend, .qm .bank-pick > legend { font-size: var(--text-sm); }
.dd-choice .hint { margin: var(--space-2) 0 0; }
.qm .bank-pick { margin-bottom: var(--space-4); }
/* ---------- 7 Nov 2026: How it works, the plan in motion (owner: "very mundane ... show something in motion") ----------
   The example plan is a scene you play by scrolling. Without script it is an ordinary list of dated steps. With script
   (.early: motion.js, before the first paint, so nothing jumps) the steps scroll past a stage that stays: the date ticks
   through the real days, the pay-in travels to the bank and back, the wait passes on the timeline, the reward lands.
   Everything moving is a transform or opacity, set from the scroll position (enhance.js), so it can be scrubbed both ways. */
.hw-hero { max-width: 48rem; }
.hw-hero h1 { margin: 0; font: 700 var(--text-hero)/1.02 var(--font-display); letter-spacing: -.032em; }
.hw-hero .lede { margin-top: var(--space-4); }
.mv { margin: var(--space-8) 0 0; }
.mv-intro { max-width: 46rem; }
.mv-intro h2 { margin: 0; font: 700 var(--text-3xl)/1.08 var(--font-display); letter-spacing: -.024em; }
.mv-lede { margin: var(--space-3) 0 0; font-size: var(--text-lg); color: var(--color-text-muted); }
.mv-body { margin-top: var(--space-6); }
.mv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.mv-step { padding: var(--space-4) 0 0; border-top: 1px solid var(--hairline); }
.mv-when { margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--color-plan); font-variant-numeric: tabular-nums; }
.mv-step h3 { margin: var(--space-1) 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-display); letter-spacing: -.018em; }
.mv-step p:last-child { margin: 0; color: var(--color-text-muted); }
.mv-stage { display: none; }
.early .mv-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.early .mv-steps { gap: 0; padding-bottom: 12vh; }
.early .mv-step { display: flex; flex-direction: column; justify-content: center; min-height: 52vh; padding: 0; border: 0; color: var(--color-text-muted); transition: color 320ms ease-out; }
/* Steps not in play step back in colour, not opacity: the muted ink keeps every word at AA contrast. */
.early .mv-step:not(.is-on) .mv-when, .early .mv-step:not(.is-on) h3 { color: var(--color-text-muted); }
.early .mv-step h3, .early .mv-step .mv-when { transition: color 320ms ease-out; }
.early .mv-step.is-on { color: var(--color-text); }
.early .mv-stage { display: grid; gap: var(--space-6); position: sticky; top: max(var(--space-8), calc(50vh - 13rem)); padding: var(--space-6); border-radius: var(--radius-xl);
  background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--color-plan) 12%, transparent), transparent 60%), var(--color-surface-1); box-shadow: var(--shadow-2); }
.mv-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.mv-day { margin: 0; font: 700 var(--text-fig-l)/1 var(--font-display); letter-spacing: -.03em; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.mv-count { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-scene { display: grid; grid-template-columns: minmax(0, 1fr) var(--space-6) minmax(0, 1fr); grid-template-areas: "lane lane lane" "you . bank"; row-gap: var(--space-2); }
.mv-you { grid-area: you; } .mv-bank { grid-area: bank; }
.mv-acct { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow 320ms ease-out; }
.mv-acct.is-hot { box-shadow: inset 0 0 0 2px var(--color-plan); }
.mv-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 650; }
.mv-k { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.mv-fig { font: 650 var(--text-fig-m)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--color-money); font-variant-numeric: tabular-nums; }
.mv-fig.is-paid { color: var(--color-done); }
.mv-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.mv-lane { grid-area: lane; position: relative; height: 3rem; }
.mv-path { position: absolute; top: 50%; left: 25%; right: 25%; border-top: 2px dashed var(--hairline-strong); }
.mv-coin, .mv-gift { position: absolute; left: 0; top: 50%; margin-top: -1rem; height: 2rem; display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-pill); font: 650 var(--text-sm)/1 var(--font-text); white-space: nowrap; will-change: transform; color: var(--color-bg); }
.mv-coin { background: var(--color-plan); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--color-plan) 70%, transparent); }
.mv-gift { background: var(--color-done); opacity: 0; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--color-done) 70%, transparent); }
.mv-rail { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--fill-strong); }
.mv-fill { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-plan); transform: scaleX(0); transform-origin: left center; }
.mv-head { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: var(--color-text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-plan) 35%, transparent); z-index: 1; }
.mv-tick { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: var(--color-surface-1); box-shadow: inset 0 0 0 2px var(--hairline-strong); transition: background 200ms ease-out, box-shadow 200ms ease-out; }
.mv-tick.is-past { background: var(--color-plan); box-shadow: none; }
.mv-tick.is-pay.is-past { background: var(--color-done); }
.mv-ends { display: flex; justify-content: space-between; margin-top: calc(var(--space-4) * -1); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 860px) {
  .hw-hero h1 { font-size: var(--text-3xl); }
  .early .mv-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .early .mv-stage { order: -1; z-index: 2; top: var(--space-2); gap: var(--space-4); padding: var(--space-4); }
  .early .mv-step { min-height: 40vh; }
  .mv-day { font-size: var(--text-fig-m); }
  .mv-fig { font-size: var(--text-fig-s); }
  .mv-acct { padding: var(--space-3); }
  .mv-k { margin-top: var(--space-2); }
  .mv-note { display: none; }
  .mv-scene { grid-template-columns: minmax(0, 1fr) var(--space-3) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .early .mv-step, .mv-acct, .mv-tick { transition: none; } }
@media (forced-colors: active) { .mv-coin, .mv-gift, .mv-head, .mv-fill { forced-color-adjust: none; } }

/* The four steps on one line that draws itself as the section rises into view; each step lights in turn. */
.hw-path { margin: var(--space-8) 0 0; }
.hw-path h2 { margin: 0; font: 700 var(--text-3xl)/1.08 var(--font-display); letter-spacing: -.024em; max-width: 30rem; }
.hw-steps { position: relative; list-style: none; margin: var(--space-6) 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.hw-steps::before { content: ""; position: absolute; top: 1rem; left: 1rem; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-plan), color-mix(in srgb, var(--color-plan) 10%, transparent)); transform-origin: left center; }
.hw-step { position: relative; }
.hw-n { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-plan); color: var(--color-plan); font: 650 var(--text-sm)/1 var(--font-text); }
.hw-step h3 { margin: var(--space-4) 0 var(--space-2); font: 650 var(--text-xl)/1.25 var(--font-display); }
.hw-step p { margin: 0 0 var(--space-2); }
.hw-it { font-size: var(--text-sm); color: var(--color-text-muted); }
.hw-go { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion .hw-path:not(.is-in) .hw-steps::before { transform: scaleX(0); }
  .motion .hw-path .hw-steps::before { transition: transform 1.1s var(--ease-settle) .15s; }
  .motion .hw-path:not(.is-in) .hw-step { opacity: 0; transform: translateY(var(--space-3)); }
  .motion .hw-path .hw-step { transition: opacity .6s var(--ease-settle), transform .6s var(--ease-settle); }
  .motion .hw-path .hw-step:nth-child(2) { transition-delay: .2s; } .motion .hw-path .hw-step:nth-child(3) { transition-delay: .4s; } .motion .hw-path .hw-step:nth-child(4) { transition-delay: .6s; }
}
@media (max-width: 900px) {
  .hw-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-left: var(--space-7); }
  .hw-steps::before { top: 1rem; bottom: 1rem; left: 1rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-plan), color-mix(in srgb, var(--color-plan) 10%, transparent)); transform-origin: center top; }
  .motion .hw-path:not(.is-in) .hw-steps::before { transform: scaleY(0); }
  .hw-n { position: absolute; left: calc(var(--space-7) * -1); top: 0; }
  .hw-step h3 { margin-top: 0; }
}

/* What it does and never does: two plain columns, no boxes. */
.hw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.hw-two h2 { margin: 0 0 var(--space-4); font: 650 var(--text-2xl)/1.2 var(--font-display); }
.hw-info { margin: var(--space-7) 0 0; max-width: 46rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.hw-info h2 { margin: 0 0 var(--space-2); font: 650 var(--text-md)/1.3 var(--font-text); color: var(--color-text); }
@media (max-width: 700px) { .hw-two { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }