/* FoP CPI Viewer mockup -- app styles. Tokens only (style/css/fop-tokens.css); no raw colours here.
 * Anything the kit does not cover is marked KIT GAP. */

/* Chart series colours (PM 2026-10-05): Your CPI = Common Wealth teal (the kit's --fop-mint, #00C0A3) drawn 3px; the published headline = the FoP black (--fop-dark-gray, #333333) at the kit's 2px. */
:root { --cpi-yours: var(--fop-mint); --cpi-headline: var(--fop-dark-gray); --cpi-yours-stroke: 3; }

html, body { overflow-x: hidden; }   /* belt and braces: the page itself never scrolls sideways */

/* KIT GAP: the kit has no banner/notice component. Built from tokens. */
.mock-banner {
  background: var(--fop-very-light-orange);
  color: var(--color-text);
  border-bottom: var(--border);
  padding: var(--space-2) var(--gutter);
  font-size: var(--size-small);
  font-weight: var(--weight-body);
  text-align: center;
}
.mock-banner strong { letter-spacing: var(--tracking-caps); }

.intro { padding: var(--space-6) 0 0; }
.intro h1 { margin-bottom: var(--space-2); }
.intro .fop-lede { margin-bottom: 0; }

#chart { position: relative; }
#chart svg { display: block; }
.fop-figure { padding-left: 0; padding-right: 0; margin-top: var(--space-5); }
.fop-figure__subtitle { min-height: 1.4em; }

/* ── The basket ── */
.basket { margin-top: var(--space-5); }
.basket__bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.basket__title { margin: 0; white-space: nowrap; }
.basket__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.basket__hint { margin: 0 0 var(--space-4); font-size: var(--size-small); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px;
  font: inherit; font-size: var(--size-small); font-weight: var(--weight-strong); color: var(--color-accent); background: var(--color-surface);
  border: var(--border); border-color: var(--color-accent); border-radius: var(--radius); cursor: pointer;
}
.icon-btn:hover { background: var(--color-highlight); }
.icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.icon-btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn__label { display: none; }
.fop-button--compact { min-height: 44px; padding: 0 var(--space-3); }
.reset__short { display: none; }
@media (min-width: 561px) { .icon-btn__label { display: inline; } }
@media (max-width: 560px) { .reset__long { display: none; } .reset__short { display: inline; } .basket__title { font-size: var(--size-h2); } }
.csv-msg {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  font-size: var(--size-small); background: var(--color-highlight); border: 1px solid var(--color-accent); border-radius: var(--radius);
}
.csv-msg[hidden] { display: none; }
.csv-msg__x { flex: none; min-width: 32px; min-height: 32px; margin: -4px -8px -4px 0; font: inherit; font-size: 1.25rem; line-height: 1; color: var(--color-accent); background: transparent; border: 0; cursor: pointer; }

/* Chart range buttons (one group; the selected one is marked) and the pay-period toggle share this style. Tokens only. */
.range, .money__period { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--space-3); }
.range__btn {
  font: inherit; font-size: var(--size-small); font-weight: var(--weight-strong); line-height: 1.2;
  padding: var(--space-2) var(--space-4); min-height: 36px;
  background: var(--color-surface); color: var(--color-accent); border: var(--border); border-radius: var(--radius);
  margin-left: -1px; cursor: pointer;
}
.range__btn:first-child { margin-left: 0; }
.range__btn:hover { background: var(--color-highlight); }
.range__btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-dark); border-color: var(--color-accent); position: relative; }
.range__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; position: relative; }

/* Income and savings: optional, above the goods / services bar. Never changes shares or the chart. */
.money { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--color-surface); border: var(--border); border-radius: var(--radius); }
.money__select { width: 100%; max-width: 320px; padding: var(--space-2); font: inherit; font-family: var(--font-label); color: var(--color-text); background: var(--color-bg); border: var(--border); border-radius: var(--radius); }
.money__prompt { margin: var(--space-1) 0 0; font-size: var(--size-small); color: var(--color-accent); }
.money__takewrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); margin: var(--space-3) 0 var(--space-3); }
.money__take { margin: 0; font-size: var(--size-body); }
.money__how { font-size: var(--size-label); color: var(--color-accent); }
.money__take b { font-family: var(--font-label); font-weight: var(--weight-strong); color: var(--color-accent); }
.money__grid--savings { margin-top: var(--space-3); }
.money__hint { margin: 0 0 var(--space-3); font-size: var(--size-small); color: var(--color-text-muted); }
.money__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4) var(--space-5); }
.money__field { min-width: 0; }
.money__label { display: block; margin-bottom: var(--space-1); font-size: var(--size-small); font-weight: var(--weight-strong); }
.money__unit { font-weight: var(--weight-body); color: var(--color-text-muted); }
.money__pair { display: flex; align-items: center; gap: var(--space-3); }
.money__box { flex: none; display: inline-flex; align-items: center; width: 132px; padding: 0 var(--space-2); background: var(--color-bg); border: var(--border); border-radius: var(--radius); }
.money__dollar { font-family: var(--font-label); color: var(--color-text-muted); margin-right: var(--space-1); }
.money__box input { width: 100%; min-width: 0; padding: var(--space-2) 0; font: inherit; font-family: var(--font-label); color: var(--color-text); background: transparent; border: 0; outline: none; -moz-appearance: textfield; }
.money__box:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent); border-color: var(--color-accent); }
.money__box input:disabled { opacity: 0.45; }
.money__range { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.money__range:disabled { cursor: not-allowed; opacity: 0.45; }
.money__summary { margin: var(--space-3) 0 0; font-size: var(--size-body); }
.money__summary b { font-family: var(--font-label); font-weight: var(--weight-strong); color: var(--color-accent); }
.box__dollars {  margin-top: calc(-1 * var(--space-1)); font-family: var(--font-label); font-size: 0.75rem; color: var(--color-text); line-height: 1.3; }

/* Goods / services split: read-only, above the first row of boxes. Tokens only. */
.split { margin: 0 0 var(--space-5); }
.split__label { margin: 0 0 var(--space-2); font-size: var(--size-small); color: var(--color-text); }
.split__label b { font-family: var(--font-label); font-weight: var(--weight-strong); color: var(--color-accent); }
.split__key { white-space: nowrap; }
.split__dot { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-1); vertical-align: -1px; }
.split__dot--goods, .split__goods { background: var(--series-1); }
.split__dot--services, .split__services { background: var(--series-2); }
.split__bar { display: flex; height: 10px; border: var(--border); background: var(--color-surface); }
.split__goods, .split__services { display: block; height: 100%; transition: width var(--duration) var(--ease); }

.stack { position: relative; overflow-anchor: none; }          /* our own anchoring (app.js toggle) decides what stays put; the browser's would fight it */
.stack__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stack__lines path { fill: none; stroke: var(--color-accent); stroke-width: var(--stroke-axis); }

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--space-4) var(--space-2);
  position: relative;
}
.row + .row { margin-top: 40px; }   /* room for the connector bus between rows */

/* KIT GAP: no "category box" component. A raised panel (kit's white surface, square corners) with a state for the open one. */
.box {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.box.is-leaf { cursor: default; }
.box:not(.is-leaf):hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
.box.is-open { background: var(--color-highlight); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

.box__head { display: flex; align-items: flex-start; gap: var(--space-1); }
.box__name {
  flex: 1; min-width: 0;
  font: inherit; font-size: var(--size-label); font-weight: var(--weight-strong); line-height: 1.25;
  text-align: left; color: var(--color-text);
  background: none; border: 0; padding: 0; cursor: inherit;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: break-word;
}
.box__chev {
  flex: none; width: 8px; height: 8px; margin: 5px 2px 0 0;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg); transition: transform var(--duration) var(--ease);
}
.box.is-open .box__chev { transform: rotate(-135deg); margin-top: 8px; }

.box__share { font-family: var(--font-label); font-size: var(--size-label); color: var(--color-text-muted); white-space: nowrap; }
.box__total { margin-top: calc(-1 * var(--space-1)); font-family: var(--font-label); font-size: var(--size-label); color: var(--color-text-muted); white-space: nowrap; }
.box__value { font-family: var(--font-label); font-size: var(--size-h3); font-weight: var(--weight-strong); color: var(--color-accent); margin-right: var(--space-1); }

.box input[type=range] { width: 100%; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.box input[type=range]:disabled { cursor: not-allowed; opacity: 0.45; }

/* "data from 1993" / "data to 2024" / "data 1993\2013 2024": a BLS series' start (only if after 1967, the chart start) and/or end (only if ended); bottom-right of the box, below the sparkline if any */
/* Footer row: only the lock toggle, at the bottom-right (data notes moved to the Methods page). */
.box__foot { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--space-1); margin-top: auto; min-height: 32px; }
.spark + .box__foot { margin-top: 0; }
.box__lock {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 -6px -6px 0; padding: 0;
  color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.box__lock:hover { color: var(--color-accent); background: var(--color-highlight); }
.box__lock:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.box__lock svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.box__lock[aria-pressed="true"] { color: var(--color-accent); }
.box__lock[aria-pressed="true"] .lock__body { fill: currentColor; }
.box.is-locked { border-color: var(--color-accent); }
.slider { position: relative; display: block; }
.slider::after {                                                  /* the part of the track this slider cannot reach (100% minus locked siblings) */
  content: ""; position: absolute; right: 7px; top: 50%; width: calc((100% - 14px) * var(--locked, 0)); height: 6px; transform: translateY(-50%); pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--fop-medium-gray) 0 2px, transparent 2px 4px); opacity: 0.7;
}
.tile__lock { display: inline-block; margin-left: 3px; vertical-align: -1px; fill: var(--color-accent); stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; }

/* Sparkline: weight distribution of the subcomponents (bar heights relative to the largest share in the set) */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-top: auto; border-bottom: var(--stroke-axis) solid var(--color-rule); }
.spark__bar { flex: 1 1 0; max-width: 16px; min-height: 2px; background: var(--series-5); }
.box.is-open .spark__bar { background: var(--series-1); }

@media (max-width: 560px) {
  .row + .row { margin-top: 32px; }
  .fop-figure__subtitle { font-size: clamp(0.8125rem, 4.3vw, var(--size-body)); }       /* both numbers + their dots stay on one line down to 320px */
  .fop-figure__title { font-size: clamp(0.9rem, 4.6vw, var(--size-h3)); }       /* leaves room for the two logos beside it down to 320px */
  .fop-figure { padding-top: var(--space-4); }
}

/* Phone drill-down: a row with an open box is ONE line. The open box sits on the left at normal box width; its siblings are small tiles
 * filling the right half (columns chosen in JS so tiles stay >= 44px tall; the area grows taller if they cannot). */
.row--tiles { grid-template-columns: var(--open-w, 50%) minmax(0, 1fr); align-items: stretch; }
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(44px, 1fr); gap: 4px; min-width: 0; }
.tile {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 3px 2px;
  font: inherit; text-align: left; color: var(--color-text); background: var(--color-surface); border: var(--border); border-radius: var(--radius); cursor: pointer;
}
.tile:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
.tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.tile.is-leaf { cursor: default; }
.tile__name {
  font-size: 0.625rem; font-weight: var(--weight-strong); line-height: 1.15; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
}
.tile__pct { font-family: var(--font-label); font-size: 0.75rem; color: var(--color-accent); }
.tiles[data-cols="2"] .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last tile fills its line */

/* Pinned chart: appears once the main chart has scrolled out of view. Solid background, subtle bottom border. The page keeps scroll padding at
 * the top so scrollIntoView lands below it. Tokens only. */
:root { --pin-h: 176px; }
html { scroll-padding-top: calc(var(--pin-h) + var(--space-3)); }
.pin {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--pin-h); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--gutter) var(--space-2);
  background: var(--color-bg); border: 0; border-bottom: 1px solid var(--fop-aux-gray); border-radius: 0;
  font: inherit; color: var(--color-text); text-align: left; cursor: pointer;
}
.pin[hidden] { display: none; }
.pin__label { display: block; max-width: var(--page-max); width: 100%; margin: 0 auto; font-size: var(--size-small); font-weight: var(--weight-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin__chart { display: block; flex: 1 1 auto; min-height: 0; max-width: var(--page-max); width: 100%; margin: 0 auto; overflow: hidden; }
.pin__chart svg { display: block; }
.pin:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.fop-chart--compact text { font-size: 10px; }
@media (max-width: 560px) {
  :root { --pin-h: 132px; }
}

/* Methods page */
.methods { max-width: var(--measure); }
.methods__back { margin: var(--space-4) 0; font-size: var(--size-small); }
.methods__draft { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); font-size: var(--size-small); background: var(--fop-very-light-orange); border: 1px solid var(--fop-orange); border-radius: var(--radius); }
.methods h1 { margin-bottom: var(--space-2); }
.methods section { scroll-margin-top: var(--space-4); }
.methods h2 { margin-bottom: var(--space-3); }
/* Methods accordion: every section is a native <details> (works without JavaScript), closed on load. The summary holds the question as an <h2>;
 * a chevron (the same one the category boxes use) shows open / closed; the summary is at least 44px tall. Deep links open the section (methods.js). */
/* the Methods page has no pinned chart, so no scroll padding for it (the viewer page keeps its own) */
html:has(.methods) { scroll-padding-top: 0; }
.methods .acc { border-bottom: 1px solid var(--fop-aux-gray); }
.methods .acc:first-of-type { margin-top: var(--space-5); border-top: 1px solid var(--fop-aux-gray); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-1);
  cursor: pointer; list-style: none; color: var(--color-text);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--color-highlight); }
.acc summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.acc summary h2 { margin: 0; font-size: var(--size-h3); font-weight: var(--weight-strong); line-height: 1.3; }
.acc summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: -3px 6px 0 0; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg);
}
.acc details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.acc details[open] > summary h2 { color: var(--color-accent); }
.acc__body { padding: var(--space-2) var(--space-1) var(--space-5); }
.methods code { font-family: var(--font-mono); font-size: 0.9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Per-paycheck field in the dollar block: looks like the text around it, a dashed underline shows on hover and focus. Same line height, no extra row. */
.box__dollars > span { display: block; }
.box__dollars > span:not(.d-pc) { position: relative; pointer-events: none; }   /* paint the lines above and below the per-paycheck field over its enlarged tap area: its focus background (highlight) otherwise hides the bottom of the "$X/yr" line and the top of the "% of take-home" line while typing; pointer-events: none lets a tap in the overlap reach the field */
.d-input {
  font: inherit; color: inherit; line-height: inherit; background: transparent; border: 0; border-radius: var(--radius);
  padding: 5px 4px; margin: -5px -4px; height: calc(1.3em + 10px); box-sizing: border-box; min-width: 2ch; max-width: 100%; text-align: left; vertical-align: baseline;
}   /* the padding (cancelled by the negative margin) enlarges the tap area without changing the layout */
.d-input:enabled:hover { text-decoration: underline dashed var(--color-grid); text-underline-offset: 2px; cursor: text; }
.d-input:enabled:focus { outline: none; text-decoration: underline var(--color-accent); text-underline-offset: 2px; background: var(--color-highlight); }
.d-input:disabled { opacity: 1; color: inherit; cursor: default; -webkit-text-fill-color: currentColor; }
.d-note { color: var(--color-accent); font-size: var(--size-label); line-height: 1.25; }
.d-note:empty { display: none !important; }

/* ── Walk me through ──
 * The button: in the heading row beside the title on a laptop; on a phone one compact full-width button under the heading row (the row itself is
 * full: title + two icon buttons + Reset). The overlay is full-screen, one question per screen. Tokens only. */
.walk-btn { flex: none; white-space: nowrap; margin-left: var(--space-3); }
.basket__actions { margin-left: auto; }
@media (max-width: 560px) {
  .basket__bar { flex-wrap: wrap; row-gap: var(--space-2); }
  .basket__bar .walk-btn { order: 3; flex: 1 1 100%; margin: 0; }
  .basket__actions { order: 2; }
}
html.walk-open, html.walk-open body { overflow: hidden; }
.walk {
  --walk-pad: max(var(--gutter), calc((100% - 640px) / 2));
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text); font-size: var(--size-body);
}
.walk__bar { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--walk-pad) var(--space-1) var(--walk-pad); min-height: 52px; }
.walk__count { font-size: var(--size-small); font-weight: var(--weight-strong); }
.walk__close { min-width: 44px; min-height: 44px; margin-right: -12px; font: inherit; font-size: 1.75rem; line-height: 1; color: var(--color-accent); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer; }
.walk__close:hover { background: var(--color-highlight); }
.walk__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--fop-aux-gray); }
.walk__fill { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width var(--duration) var(--ease); }
.walk__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--walk-pad) var(--space-5); }
.walk__title { margin: 0 0 var(--space-3); font-size: var(--size-h2); }
.walk__title:focus { outline: none; }
.walk__lead, .walk__prompt { margin: 0 0 var(--space-4); }
.walk__points { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.walk__points li { margin-bottom: var(--space-2); }
.walk__foot { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--walk-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-bg); border-top: 1px solid var(--fop-aux-gray); }
.walk__btn { min-height: 44px; padding: 0 var(--space-3); white-space: nowrap; }
.walk__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.walk__next { margin-left: auto; min-width: 72px; }
.walk__units { display: flex; margin: 0 0 var(--space-3); }
.walk__unit {
  flex: 1 1 0; min-height: 44px; margin-left: -1px; padding: 0 var(--space-1); font: inherit; font-size: var(--size-small); font-weight: var(--weight-strong);
  color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-accent); cursor: pointer;
}
.walk__unit:first-child { margin-left: 0; }
.walk__unit[aria-checked="true"] { color: var(--color-on-dark); background: var(--color-accent); }
.walk__choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.walk__choice {
  flex: 1 1 auto; min-height: 44px; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--size-small); font-weight: var(--weight-strong); text-align: center;
  color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: var(--radius); cursor: pointer;
}
.walk__choice[aria-checked="true"] { color: var(--color-on-dark); background: var(--color-accent); }
.walk__money { display: flex; align-items: center; width: 100%; max-width: 280px; min-height: 52px; padding: 0 var(--space-3); background: var(--color-surface); border: var(--border); border-radius: var(--radius); }
.walk__money:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent); border-color: var(--color-accent); }
.walk__input { flex: 1 1 auto; min-width: 0; padding: var(--space-2) 0; font: inherit; font-family: var(--font-label); font-size: 1.25rem; color: var(--color-text); background: transparent; border: 0; outline: none; }
.walk__echo { min-height: 1.4em; margin: var(--space-1) 0 var(--space-2); font-size: var(--size-small); color: var(--color-text-muted); }
.walk__hint, .walk__typical { margin: 0 0 var(--space-2); font-size: var(--size-small); }
.walk__typical { color: var(--color-text-muted); }
.walk__fields { display: grid; gap: var(--space-4); margin: 0 0 var(--space-3); }
.walk__fields .money__select { max-width: none; font-size: 1rem; min-height: 44px; }
.walk__fields .money__box { width: 100%; max-width: 240px; }
.walk__fields .money__box input { font-size: 1.0625rem; min-height: 28px; }
.walk__take { margin: 0 0 var(--space-2); font-size: var(--size-small); min-height: 1.4em; }
.walk__error { margin: 0; font-size: var(--size-small); color: var(--color-accent); min-height: 1.4em; }
.walk__sum { margin: 0 0 var(--space-3); }
.walk__sum b { font-family: var(--font-label); font-weight: var(--weight-strong); color: var(--color-accent); }
.walk__options { display: grid; gap: var(--space-4); margin: 0 0 var(--space-4); }
.walk__option .walk__btn { width: 100%; white-space: normal; padding: var(--space-2) var(--space-3); }
.walk__optionnote { margin: var(--space-1) 0 0; font-size: var(--size-small); color: var(--color-text-muted); }
.walk__details { margin: 0 0 var(--space-3); font-size: var(--size-small); }
.walk__details summary { cursor: pointer; min-height: 32px; font-weight: var(--weight-strong); color: var(--color-accent); }
.walk__answers { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
.walk__answers dt { font-weight: var(--weight-strong); }
.walk__answers dd { margin: 0; }
.walk__locknote { margin: 0; font-size: var(--size-small); color: var(--color-text-muted); }
.walk__confirm { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: var(--color-bg); }
.walk__confirm[hidden] { display: none; }
.walk__confirmbox { width: 100%; max-width: 420px; padding: var(--space-5); background: var(--color-surface); border: var(--border); border-radius: var(--radius); }
.walk__confirmtitle { margin: 0 0 var(--space-2); font-size: var(--size-h3); }
.walk__confirmrow { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }

/* No category name breaks mid-word. Box names: from 421px (three columns) the columns can be as narrow as 128px, which leaves ~88px for the name beside the chevron; the longest
 * words (Nonprescription, Communication, noncarbonated) are 96px at 13px, so names are 12px and the box padding 10px there (92px of room, longest word 89px).
 * Tile names (phone): 2px side padding gives the longest tile word room at 360px; narrower phones fall back to fewer tile columns (layoutTiles). */
@media (min-width: 421px) {
  .box { padding-left: 10px; padding-right: 10px; }
  .box__name { font-size: 0.75rem; }
}

/* The chart subtitle and the pinned label always name both numbers; a dot in each line's colour keys them to the lines (text stays the text colour). */
.cpi-key::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 5px 1px 0; border-radius: 50%; vertical-align: middle; }
.cpi-key--yours::before { background: var(--cpi-yours); }
.cpi-key--headline::before { background: var(--cpi-headline); }
@media (max-width: 400px) { .pin__label { font-size: clamp(0.6875rem, 3.7vw, var(--size-small)); } }

/* Rows that go away collapse in place (app.js collapseGhost); no animation at all if the reader prefers reduced motion (app.js also skips it). */
.row-ghost { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .row-ghost, .stack__lines { transition: none !important; } }

/* Common Wealth logo, top right of the header. The link is 44px square (tap target) but its vertical margin cancels the extra height, so the header is as tall as before. */
.fop-masthead__cw { margin: -2px 0 -2px auto; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius); }
.fop-masthead__cw img { display: block; height: 34px; width: auto; }
.fop-masthead__cw:hover { background: var(--color-highlight); }

/* Chart frame logos (decorative; the header CW logo is the link): the FoP mark and the Common Wealth logo in the top-right corner of the chart-title row, so a screenshot of
 * the chart is branded. They are positioned over the right end of the title row (the title gets matching right padding), so the subtitle keeps its full width and the
 * header adds no height. They shrink on narrow screens (20px at 320px, up to 28px). The pinned chart has none. */
.fop-figure__head { position: relative; --logo-h: 28px; }
@media (max-width: 560px) { .fop-figure__head { --logo-h: clamp(20px, 5.5vw, 22px); } }       /* phones: no taller than the title line, so the logos never touch the subtitle */
.fop-figure__titles { min-width: 0; }
.fop-figure__title { padding-right: calc(var(--logo-h) * 2.62 + 16px); }
.fop-figure__logos { position: absolute; top: 1px; right: 0; display: flex; align-items: center; gap: 4px; }
.fop-figure__logos img { height: var(--logo-h); width: auto; }