/* Charts in the data register (sections 7, 17 and 18). Blue for the answer, ink-2 for what people said and for the
   comparison, positive green for what people did; every distribution an ink line over sky-light with its mean tick and
   interval blue; line for tracks and the outline of the rest band.
   Numbers Switzer 500 tabular, 14 px and up; the sample line 13 px. --p (0 to 1) is the reveal: meters clip their fill
   by it and bars scale by it, so one custom property animates a whole block. */

/* Series colours, for any mark that takes currentColor or a background. */
.t-blue { color: var(--blue); } .t-i2 { color: var(--ink-2); } .t-pos { color: var(--positive); } .t-ink { color: var(--ink); }
.t-pale { color: var(--sky-pale); } .t-line { color: var(--line); } .t-cmp { color: var(--data-compare); }
.sw { display: inline-block; width: 8px; height: 8px; background: currentColor; flex: none; }

/* Tally meter: 2 px ticks on a 6 px period, 24 px tall, on a 1 px line track. */
.ch-meter { position: relative; height: 24px; min-width: 0; }
.ch-meter .trk { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.ch-meter .fil { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill) * 100%);
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px); clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0); }
/* Solid bar: 8 px, 0 radius. */
.ch-bar { position: relative; height: 8px; }
.ch-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill) * var(--p, 1) * 100%); background: currentColor; }

.n, .bn, .tv { font-family: var(--sans); font-weight: 500; font-feature-settings: var(--num-features); white-space: nowrap; color: var(--ink); }
.n { font-size: 15px; line-height: 1; min-width: 4ch; text-align: right; }
.smp { margin-top: var(--s5); color: var(--ink-2); }

/* Tally rows (atlas A4): label and value above the meter, 12 between, rows 40 apart; hover dims the others. */
.ch-tally { display: grid; row-gap: var(--s7); }
.ch-tally .trow { transition: opacity var(--t1) var(--ease); }
.ch-tally .trow .th { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); }
.ch-tally .trow .tl { font: 400 var(--ui)/1 var(--sans); color: var(--ink); text-box: trim-both cap alphabetic; }
.ch-tally .trow .tv { font-size: 17px; line-height: 1; min-width: 5ch; text-align: right; text-box: trim-both cap alphabetic; }
.ch-tally.big .tv { font-size: 24px; }
.ch-tally .trow .ch-meter { margin-top: var(--s3); }
.ch-tally .trow .tn { margin-top: var(--s3); }
.ch-tally:hover .trow:not(:hover), .ch-tally.is-hover .trow:not(:first-child), [data-state="hover"] .ch-tally .trow:not(:first-child) { opacity: 0.4; }

/* Big number. */
.ch-big .big, .ch-curves .cbig .big { text-box: trim-both cap alphabetic; }
.ch-big .bl, .ch-curves .cbig .bl { margin-top: var(--s2); color: var(--ink-2); font-weight: 400; }
.ch-big .smp { margin-top: var(--s4); }

/* Persona row: the persona mark (a 24 px circle with a 13 px initial), who, and the quote in the serif. */
.ch-persona { margin-top: var(--s5); padding-top: var(--s5); box-shadow: inset 0 1px 0 var(--line); }
.ch-persona .who { display: flex; align-items: center; gap: var(--s3); }
.ch-persona .who .ui { color: var(--ink-2); }
.ch-persona .pmk { flex: none; width: 24px; height: 24px; display: block; }
.ch-persona .pmk svg { display: block; fill: var(--ink); }
.ch-persona .qt { margin-top: var(--s3); font: 400 17px/1.4 var(--serif); color: var(--ink); text-box: trim-both cap alphabetic; }

/* Breakdown grid (M3): audiences in rows, answers in columns, the answer cell blue in a 1 px ink line. */
.ch-grid { container: bgrid / inline-size; }
.ch-grid .gt { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--s3); align-items: stretch; }
.ch-grid .gh { font: 400 14px/1.2 var(--sans); color: var(--ink-2); padding: 0 var(--s2) var(--s3); text-box: trim-both cap alphabetic; align-self: end; }
.ch-grid .gn { display: grid; align-content: center; row-gap: var(--s2); padding: var(--s3) 0; box-shadow: inset 0 1px 0 var(--line); }
.ch-grid .gn .ui { color: var(--ink); text-box: trim-both cap alphabetic; }
.ch-grid .gn .cap { text-box: trim-both cap alphabetic; }
.ch-grid .gc { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: end; padding: var(--s4) var(--s2) var(--s3); box-shadow: inset 0 1px 0 var(--line); }
.ch-grid .gc .n { text-box: trim-both cap alphabetic; color: var(--ink-2); }
.ch-grid .gc.sel { box-shadow: inset 0 0 0 1px var(--ink); }
.ch-grid .gc.sel .n { color: var(--ink); }

/* Tally comparison: per question, the comparison in ink-2 above the answer in blue. */
.ch-compare { display: grid; row-gap: var(--s7); }
.ch-compare .tq > .ui { color: var(--ink); text-box: trim-both cap alphabetic; margin-bottom: var(--s4); }
.ch-compare .tl { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: var(--s3); align-items: end; }
.ch-compare .tl + .tl { margin-top: var(--s2); }
.ch-compare .tn2 { color: var(--ink-2); text-box: trim-both cap alphabetic; padding-bottom: 6px; font-size: 14px; }
.ch-compare .tl .n { text-box: trim-both cap alphabetic; padding-bottom: 6px; }

/* Butterfly: two audiences back to back, the reasons in the centre column, 8 px bars scaled by --p. A size container
   (r10): under 420 px of its own width each reason stands over its two bars. */
.ch-butterfly { display: grid; row-gap: var(--s5); container: bfly / inline-size; }
.ch-butterfly .bfh, .ch-butterfly .bfr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.9fr) minmax(0, 1fr); column-gap: var(--s4); align-items: center; }
.ch-butterfly .bfh .ui { display: flex; align-items: center; gap: var(--s2); color: var(--ink); text-box: trim-both cap alphabetic; }
.ch-butterfly .bfh .ui:first-child { justify-content: flex-end; }
.ch-butterfly .bl { font: 400 var(--ui)/1.3 var(--sans); text-align: center; color: var(--ink); text-wrap: balance; }
.ch-butterfly .bb { display: flex; align-items: center; gap: var(--s2); }
.ch-butterfly .bb.l { flex-direction: row-reverse; }
.ch-butterfly .bb i { display: block; height: 8px; background: currentColor; width: calc(var(--w) * (100% - 48px) * var(--p, 1)); }
.ch-butterfly .bb .n { min-width: 0; }
@container bfly (max-width: 419px) {
  .ch-butterfly .bfh, .ch-butterfly .bfr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--s2); }
  .ch-butterfly .bfh > span:nth-child(2) { display: none; }
  .ch-butterfly .bfr .bl { grid-column: 1 / -1; grid-row: 1; text-align: left; }
}

/* Stacked bars: one bar per segment, three bands, the shares in a column at the right. */
.ch-stacked { display: grid; row-gap: var(--s5); }
.ch-stacked .sleg { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.ch-stacked .lg { display: inline-flex; align-items: center; gap: var(--s2); font: 400 14px/1 var(--sans); color: var(--ink-2); }
.ch-stacked .srow { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; column-gap: var(--s4); align-items: center; }
.ch-stacked .sn { display: grid; row-gap: var(--s2); }
.ch-stacked .sn .ui, .ch-stacked .sn .cap { text-box: trim-both cap alphabetic; }
.ch-stacked .sbar { display: flex; height: 24px; clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0); }
.ch-stacked .sb { flex: 0 0 calc(var(--w) * 100%); background: currentColor; }
.ch-stacked .sb + .sb { box-shadow: inset 1px 0 0 var(--page); }
/* The rest band is the bar's empty remainder, drawn as an outline in line, never a grey fill. */
.ch-stacked .sb.t-line { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.ch-stacked .sw.t-line { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
.ch-stacked .sv { display: grid; grid-template-columns: repeat(3, 4ch); column-gap: var(--s3); }
.ch-stacked .sv .n.dim { color: var(--ink-2); font-weight: 400; }

/* Two curves with the big number. */
.ch-curves { position: relative; container: chart / inline-size; }
.ch-curves .cplot { position: relative; margin-top: var(--s7); }   /* room above the tallest peak for its name and mean */
.ch-curves .ctag { position: absolute; font: 400 14px/1 var(--sans); white-space: nowrap; font-feature-settings: var(--num-features); }
.ch-curves .ctag.l { transform: translate(calc(-100% - 8px), -100%); }
.ch-curves .ctag.r { transform: translate(8px, -100%); }
.ch-curves .ctag .cm { display: block; margin-top: var(--s1); font: 400 var(--label)/1 var(--sans); color: var(--ink-2); }
.ch-curves .ctag.l .cm { text-align: right; }
.ch-curves .c-i2 { color: var(--ink-2); } .ch-curves .c-ink { color: var(--ink); }
.ch-curves .cbig { position: absolute; left: 0; top: 0; z-index: 1; }
.ch-curves .cbig .bn { font-size: 56px; letter-spacing: var(--num-ls); }
.ch-curves .cbig .big { display: flex; align-items: baseline; gap: var(--s5); }
.ch-curves .cbig .ca { font: 500 24px/1 var(--sans); font-feature-settings: var(--num-features); color: var(--ink-2); letter-spacing: 0; }
.ch-curves .cbig .ca .n { font-size: inherit; color: inherit; min-width: 0; }
@container chart (max-width: 520px) { .ch-curves .cbig { position: static; margin-bottom: var(--s6); } .ch-curves .cbig .bn { font-size: 40px; } .ch-curves .cbig .ca { font-size: 17px; } }
.ch-axis { display: flex; justify-content: space-between; margin-top: calc(var(--s6) + 14px); font: 400 14px/1 var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); }
.ch-axis span { text-box: trim-both cap alphabetic; }

/* SVG chart text: values and axes 14 px (ONS), series names 15 px. */
svg.ch-svg { display: block; overflow: visible; }
svg.ch-svg text { font-family: var(--sans); font-feature-settings: var(--num-features); }
svg.ch-svg .v { font-size: 14px; fill: var(--ink-2); }
svg.ch-svg .t { font-size: 15px; fill: var(--ink); }

/* The attention lattice sits over the tested screen and never leaves it. */
/* Attention is the finding, so its marks are blue; each carries a 2 px ring of page, so it reads over the text of
   the page it sits on. */
.ch-attention { position: absolute; left: 0; top: 0; pointer-events: none; }
.ch-attention circle { fill: var(--blue); stroke: var(--page); stroke-width: var(--halo, 4px); paint-order: stroke; }

/* Narrow rules (round eight's gaps). The breakdown grid under 440 px: each audience's name on its own row over its
   cells, the heads over the cells only. Stacked bars under 440 px: each bar under its name, the shares under the bar. */
@container bgrid (max-width: 439px) {
  .ch-grid .gt { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .ch-grid .gt > span:first-child { display: none; }
  .ch-grid .gn { grid-column: 1 / -1; padding-top: var(--s4); }
  .ch-grid .gc { box-shadow: none; padding-top: var(--s2); }
  .ch-grid .gh { font-size: 14px; text-wrap: balance; }
}
.ch-stacked { container: stk / inline-size; }
@container stk (max-width: 439px) {
  .ch-stacked .srow { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .ch-stacked .sv { justify-self: start; }
}

/* ---------- Stat cards (atlas C4; round nine, from the validation page): a row of four, an ink hairline above each,
   the number Switzer 500 tabular at 56 (40 when narrow), its label 8 below, one line 16 below the label; hairline to
   number 24. The row is a size container (r10): four abreast from 760 px of its own width, two by two under it, one
   column under 440. A.stat() and A.stats() build them; a row written by hand puts its cards in .ch-stats-in. */
.ch-stats { container: stats / inline-size; }
.ch-stats-in, .ch-stats:not(:has(> .ch-stats-in)) { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s9); }
.ch-stat { box-shadow: inset 0 1px 0 var(--ink); padding-top: var(--s5); }
.ch-stat .big { font-size: 56px; }
.ch-stat .label { margin-top: var(--s4); }
.ch-stat .body { margin-top: var(--s4); font-size: var(--ui); line-height: var(--ui-lh); max-width: 22em; }
@container stats (max-width: 759px) { .ch-stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container stats (max-width: 439px) { .ch-stats-in { grid-template-columns: 1fr; row-gap: var(--s7); } .ch-stat .big { font-size: 40px; } }
/* A tally whose rows stand 32 apart, for a tally inside a product screen. */
.ch-tally.tight { row-gap: var(--s6); }
/* Table cells with parts (A.table): a second line in ink-2 13 px 4 below, a status mark, a tally. */
/* The outer cells carry no side padding: the table's text stands on its container's edges (round eleven). */
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .td-sub { display: block; margin-top: var(--s1); font: 400 var(--label)/1.4 var(--sans); color: var(--ink-2); }
.table td:has(.td-sub) { padding-block: var(--s3); height: auto; }
.table .st { display: inline-flex; align-items: center; gap: var(--s2); }
.table .st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.table .st.off i { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
.table .mk { display: inline-flex; align-items: center; gap: var(--s2); }
.table .mk svg { flex: none; fill: var(--ink); }
.table .st.off { color: var(--ink-2); }
.table .off-dash { color: var(--ink-3); }
.table .td-tally { display: grid; grid-template-columns: minmax(64px, 1fr) auto; column-gap: var(--s3); align-items: end; }

/* ---------- Why Archetypes (A.alternatives, section 19): marks over the time and cost axes. A mark places on entering
   the view, 60 ms after the one before, on the data curve; its line shows on hover and focus; Archetypes' always. */
/* The cost chart (A.alternatives): five rows on one time axis. The names at 15 in ink, Archetypes 500; the lines 2 px,
   the others ink-2, Archetypes blue; the mark rides the line's tip as it draws and the cost shows as it arrives; what a
   method gives shows on hover and focus (a tap focuses a row on a phone), on a page halo where it crosses the axis and
   the gridlines; the names and costs break the gridlines the same way. */
.ch-alt { position: relative; }
.wb-row { outline: none; }
.wb-row .wb-l { fill: var(--ink); }
.wb-row.us .wb-l { font-weight: 500; }
.wb-line { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.wb-row.us .wb-line { stroke: var(--blue); }
.wb-mark { transform: translateX(calc((var(--p, 1) - 1) * var(--len))); }
.wb-c { opacity: clamp(0, (var(--p, 1) - 0.8) * 5, 1); }
.wb-row.us .wb-c { fill: var(--ink); }
.wb-l, .wb-c, .wb-w { paint-order: stroke; stroke: var(--page); stroke-width: 6px; stroke-linejoin: round; }
.wb-w { opacity: 0; transition: opacity var(--t1) var(--ease); }
.wb-row:hover .wb-w, .wb-row:focus .wb-w, [data-state="hover"] .wb-w { opacity: 1; }
.wb-ring { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.wb-row:focus-visible .wb-ring { opacity: 1; }

/* The result block over the curves (A.resultBlock, shared with the walk): in flow, 24 under its foot to the plot. */
.ch-curves .cbig { position: relative; margin-bottom: var(--s5); }
.ch-curves .cbig .wo-res { position: static; opacity: 1; }
.ch-curves .cbig .wo-res > * { position: static; opacity: 1; }

/* ---------- The interval (A.interval, r11): the verdict as a label, 12 to the finding at the h3 size, 16 to its line;
   40 to the two rows, each the option's letter and text over a 24 px track holding its 95 % range (8 px, the option's
   tone) and its share as a 2 px ink tick, the share's figure after the range; the axis under both. ---------- */
.ch-interval { display: grid; row-gap: var(--s7); }
.ch-interval .iv-verdict { color: var(--ink-2); font-weight: 400; }
.ch-interval .iv-finding { margin-top: var(--s3); }
.ch-interval .iv-line { margin-top: var(--s4); color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.ch-interval .iv-rows { display: grid; row-gap: var(--s4); }
.ch-interval .iv-k { display: flex; gap: var(--s3); font: 400 var(--ui)/1 var(--sans); color: var(--ink-2); text-box: trim-both cap alphabetic; }
.ch-interval .iv-k b { font-weight: 500; color: var(--ink); }
.ch-interval .iv-track { position: relative; height: 24px; margin-top: var(--s3); box-shadow: inset 0 -1px 0 var(--line); }
.ch-interval .iv-range { position: absolute; bottom: 4px; height: 8px; background: var(--ink-2); transform-origin: left; transform: scaleX(var(--p, 1)); }
.ch-interval .t-blue .iv-range { background: var(--blue); }
.ch-interval .t-cmp .iv-range { background: var(--data-compare); }
.ch-interval .iv-tick { position: absolute; bottom: 0; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); opacity: var(--p, 1); }
.ch-interval .iv-v { position: absolute; bottom: 5px; margin-left: var(--s3); font: 500 14px/1 var(--sans); color: var(--ink); font-feature-settings: var(--num-features); opacity: var(--p, 1); }
.ch-interval .iv-ticks { position: relative; height: 13px; margin-top: var(--s1); }
.ch-interval .iv-ticks span { position: absolute; transform: translateX(-50%); font: 400 13px/1 var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); }
.ch-interval .iv-ticks span:first-child { transform: none; }
.ch-interval .iv-ticks span:last-child { transform: translateX(-100%); }

/* ---------- Quotes on the distribution (A.quoteCurve, r11): three panels on a row (white, a 1 px line, padding 16), the
   curve 48 under or over them, the axis under the curve; the leaders drawn in one SVG over the block. Under 768 the
   panels stack, the leaders go, and each panel's score line stands in for them. ---------- */
.ch-quotes { position: relative; display: grid; row-gap: var(--s8); --leaders: on; }
.ch-quotes .qrow3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ch-quotes .qpanel { padding: var(--s4); background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.ch-quotes .who { display: flex; align-items: center; gap: var(--s3); }
.ch-quotes .who .ui { color: var(--ink); font-weight: 500; }
.ch-quotes .qw { margin-top: var(--s3); color: var(--ink-2); }
.ch-quotes .pmk { flex: none; width: 24px; height: 24px; display: block; }
.ch-quotes .pmk svg { display: block; fill: var(--ink); }
.ch-quotes .qa { margin-top: var(--s4); color: var(--ink); }
.ch-quotes .qs { display: none; font-weight: 400; color: var(--ink-2); }
.ch-quotes .qt { margin-top: var(--s3); font: 400 17px/1.4 var(--serif); color: var(--ink); text-box: trim-both cap alphabetic; }
.ch-quotes .cplot { position: relative; }
.ch-quotes .cplot svg.ch-svg, .ch-quotes .cplot > svg { display: block; }
.ch-quotes .qmk { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.ch-quotes .qmk svg { display: block; fill: var(--blue); }
.ch-quotes .caxis { margin-top: calc(-1 * var(--s8) + var(--s3)); }
.ch-quotes .qleads { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
@media (max-width: 767px) {
  .ch-quotes { --leaders: none; }
  .ch-quotes .qrow3 { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .ch-quotes .qs { display: inline; }
  .ch-quotes .qleads { display: none; }
}
/* The same one-column form when the chart's own box is narrow (r12): a page that holds the chart in a column declares
   the column a size container (container-type: inline-size), and under 720 px of it the panels stack and the
   leaders go, as they do under 768 of the viewport. The threshold is 540: at 1440 the chart stands in six columns (554 px) with
   its three panels abreast, as approved; at 1200 (514 px) they stack. */
@container (max-width: 539px) {
  .ch-quotes { --leaders: none; }
  .ch-quotes .qrow3 { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .ch-quotes .qs { display: inline; }
  .ch-quotes .qleads { display: none; }
}