/* A6 SURFACE TOKENS, PROPOSED (A6.1 storyboard; HRB_ADDENDUM_A6.md 6, common D12). One file, defined once, read by every later
   lane: the panel treatment, labels, the spacing scale, the type rhythm and the three motions. It sits over css/tokens.css (the
   ladder, inks and Weather ladder stay there, unchanged) and adds no colour of its own: every value below is built from an
   existing token. Proposed, not approved: the owner approves it at the storyboard stop, and A6 10's surface check reads it.
   A7 (HRB_ADDENDUM_A7.md 4.1, R-A7-3): section 6 below is the one type scale for every lane, Home, Index and Systems. Mono is for
   numbers, timestamps, code and API responses only; labels are sans, sentence case, normal letterspacing; headlines are the serif;
   nothing is set below 12px. A7b (the owner's type ruling of 2026-11-09T18:36:17Z, five fixes): regular weight for every sentence,
   semibold only for titles and key values; the display numeral in tight tabular sans figures; a fixed gap from a value to its
   quieter change; one face per timestamp line; the band word and today's change on one baseline beside the numeral.
   Language law: no em or en dashes. */
:root {
  /* ===== 1. PANELS (A6 6.2) =====
     No flat lighter fill behind content. A panel is the page surface with one fine top rule; corner ticks only on a live
     instrument; an optional, barely perceptible light from the top left, in the accent's own hue, that lifts the panel off the
     page without reading as a box. No box inside a box: tiles inside a panel are rows split by space and hairlines. */
  --panel-bg: transparent;
  --panel-rule: 1px solid var(--hairline-strong);          /* the single fine top rule */
  --panel-rule-live: 1px solid var(--accent-a40);          /* the same rule on a live instrument */
  --panel-light: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent-9) 22%, transparent) 0, transparent 62%);
  --panel-light-off: none;                                 /* the light is optional per panel; this is its off value */
  --panel-pad: var(--sp6-5) var(--sp6-5) var(--sp6-6);
  --tick-len: 8px;                                         /* corner ticks, live instruments only */
  --tick-ink: var(--accent);
  --row-rule: 1px solid var(--hairline);                   /* rows inside a panel: hairlines and space, never boxes */

  /* ===== 2. LABELS (A6 6.3, changed by A7 4.1) =====
     A label, eyebrow, caption, legend, map place name, button text or table header is sans, sentence case, normal
     letterspacing, 13px (secondary text), in the secondary ink (6.81 to 1 on surface 1, 5.10 to 1 on surface 3; the faint ink
     falls to 3.89 to 1 on surface 3, under A7 4.7's 4.5). One label per section outside instruments; labels inside instruments
     name data and may repeat. No label boxes. A badge is lowercase sans text with no border, or it is left out. */
  --label-size: var(--type-label);
  --label-track: normal;
  --label-ink: var(--secondary);
  --label-weight: 400;                                     /* Plex Sans 400 is the first paint face; 500 loads below the fold only */
  --label-family: var(--font6-text);
  --label-case: none;
  --inst-label-size: var(--type-label);                        /* a label inside an instrument */
  --inst-label-ink: var(--secondary);
  --badge-size: var(--type-label);                          /* lowercase, no border, no fill */
  --badge-ink: var(--secondary);
  --badge-track: normal;

  /* ===== 3. THE SPACING SCALE (A6 6.4: one scale, every gap snaps to it) =====
     A 4px base, doubling in the upper steps, so a gap is always one of nine values. */
  --sp6-1: 4px;
  --sp6-2: 8px;
  --sp6-3: 12px;
  --sp6-4: 16px;
  --sp6-5: 24px;
  --sp6-6: 32px;
  --sp6-7: 48px;
  --sp6-8: 64px;
  --sp6-9: 96px;

  /* ===== 4. TYPE RHYTHM (A6 6.4) =====
     Large numbers in tabular figures with tight, deliberate letterspacing; the label sits on a consistent baseline beneath its
     value, one step of the scale below it. */
  --num-features: 'tnum' 1, 'lnum' 1;
  --num-track-xl: -0.035em;                                /* 56px and up */
  --num-track-l: -0.02em;                                  /* 26px to 55px */
  --num-track-s: 0;                                        /* strip and table values */
  --num-lh: 1;
  --value-to-label: var(--sp6-2);                          /* the gap from a value's baseline area to its label */
  --strip-size: var(--type-label);                          /* strip and markets row text: sans labels, mono values (A7 7.1) */
  --strip-track: normal;
  --strip-row-h: 36px;                                     /* each strip row */
  --strip-sep-h: 10px;                                     /* the thin separator between items */

  /* ===== 5. THE THREE MOTIONS (A6 6.5, A5 2.4): Flight, Draw, Settle, and nothing else =====
     Built on the existing curves and durations. Under reduced motion each cuts to its final state. */
  --flight-dur: 0.9s;                                      /* the camera between places, eased great circle */
  --flight-ease: cubic-bezier(0.33, 0, 0.15, 1);
  --draw-dur: 0.7s;                                        /* lines and routes in their direction of travel */
  --draw-ease: var(--ease-in-out);
  --settle-dur: var(--dur-slow);                           /* numbers count to their value and stop; panels resolve */
  --settle-ease: var(--ease-out);
  --settle-stagger: var(--stagger);

  /* ===== 6. THE ONE TYPE SCALE (A7 4.1) =====
     Fourteen steps, named by their size. Every font size on the site is one of them, at every width: a role below moves along
     the scale between widths, the scale itself never changes, so a lint checks every computed size against this one list.
     Twelve steps are whole sizes the 4610 Home already renders at 1440 or 375 (12, 13, 15, 17, 20, 24, 28, 36, 44, 64, 88, 132);
     56 and 176 are the roles' steps at 1920 and up. The other sizes measured there on 9 Nov (10, 11, 13.33, 14, 16, 18, 21.84, 23,
     28.08, 30, 48, 66) each move to a step in the lanes' typography work. */
  --ty-12: 12px;      /* the floor: numbers and timestamps in dense rows and chart axes, mono only */
  --ty-13: 13px;      /* secondary text: labels, captions, legends, map place names, button text, table headers, source lines */
  --ty-15: 15px;      /* controls, list rows, card text: the smallest body size */
  --ty-17: 17px;      /* body */
  --ty-20: 20px;      /* lead */
  --ty-24: 24px;      /* titles */
  --ty-28: 28px;
  --ty-36: 36px;      /* section headlines */
  --ty-44: 44px;      /* the hero headline */
  --ty-56: 56px;
  --ty-64: 64px;      /* stat numerals */
  --ty-88: 88px;
  --ty-132: 132px;    /* the HRI numeral */
  --ty-176: 176px;

  /* Families. Mono for numbers, timestamps, code and API responses only; everything else sans or serif. */
  --font6-text: var(--sans);                                               /* IBM Plex Sans */
  --font6-head: 'Newsreader', 'DispA Fallback', Georgia, serif;            /* headlines only; the fallback is type.css's metric match */
  --font6-num: var(--mono);                                                /* IBM Plex Mono */

  /* Weights (A7b fix 1): regular (400) for body copy, leads, table text, labels, buttons and every sentence; semibold (600) only
     for titles and key values. Only the faces that load, so nothing is faux bold or faux italic: Newsreader loads 400 roman only,
     so the serif headline is 400 and never italic; Plex Sans 400 and Plex Mono 400 and 600 paint first, Plex Sans 600 loads below
     the fold (a sans title). */
  --w6-text: 400;                                          /* body, leads, table text, labels, buttons, sentences */
  --w6-title: 600;                                         /* a sans title: a card's country, a panel's title */
  --w6-value: 600;                                         /* a key value: a strip value, a score in a row */
  --w6-head: 400;                                          /* the serif headline */
  --w6-num: 400;                                           /* figures that are not key values: changes, times, axes */
  --w6-text-strong: var(--w6-title);                       /* kept for rules that already read it: a title, never a sentence */
  --w6-num-strong: var(--w6-value);                        /* kept for rules that already read it: a key value */

  /* The display numeral (A7b fix 2): the large HRI number sets in Plex Sans tabular lining figures, not mono, tight, so the
     decimal point sits close between its figures (the sans period is narrow; mono gives it a whole figure's width). */
  --font6-numeral: var(--sans);
  --w6-numeral: 400;
  --numeral-track: var(--num-track-xl);                    /* -0.035em, 56px and up */

  /* Value and change (A7b fix 3): one fixed gap from a value to its change; the change is one step smaller and regular weight,
     and carries its own colour, sign and arrow (the rising and falling pair, never colour alone). */
  --value-gap: var(--sp6-2);                               /* 8px, value to change, everywhere */
  --change-size: var(--ty-12);                             /* beside a 13px value in a strip or row */
  --change-size-l: var(--type-label);                      /* beside a large value or the numeral */
  --change-weight: var(--w6-num);                          /* 400, against the value's 600 */

  /* Roles at 1440 and 375 (the phone values are in the 720px block below). */
  --type-mono-min: var(--ty-12);
  --type-label: var(--ty-13);
  --type-secondary: var(--ty-13);
  --type-ui: var(--ty-15);
  --type-body: var(--ty-17);
  --type-lead: var(--ty-20);
  --type-title: var(--ty-24);
  --type-h2: var(--ty-36);
  --type-display: var(--ty-44);
  --type-stat: var(--ty-64);
  --type-num: var(--ty-132);

  /* Line height and tracking. Labels and body are never tracked; headlines and large numerals tighten slightly. */
  --lh6-label: 1.4;
  --lh6-body: 1.6;
  --lh6-title: 1.25;
  --lh6-head: 1.1;
  --lh6-display: 1.08;
  --tr6-text: normal;
  --tr6-head: -0.01em;
  --tr6-display: -0.012em;

  /* Line length for body copy: 36em of Plex Sans at the body size measures about 64 characters (A3 7.2), inside A7's 55 to 75. */
  --measure6: 36em;

  /* The nav, A7 4.1's one possible exception: sans, sentence case by default. The uppercase reading (the same three values as
     uppercase, 0.06em) is shown beside it at the A6.1 stop, and the owner's choice sets these three values. */
  --nav6-size: var(--type-label);
  --nav6-case: none;
  --nav6-track: normal;
}
@media (prefers-reduced-motion: reduce) {
  :root { --flight-dur: 0s; --draw-dur: 0s; --settle-dur: 0s; --settle-stagger: 0s; }
}
/* The roles move along the one scale; no width adds a size of its own. */
@media (max-width: 1180px) {
  :root { --type-h2: var(--ty-28); --type-display: var(--ty-36); --type-num: var(--ty-88); }
}
@media (max-width: 720px) {
  :root { --type-lead: var(--ty-17); --type-title: var(--ty-20); --type-h2: var(--ty-24); --type-display: var(--ty-28);
    --type-stat: var(--ty-44); --type-num: var(--ty-88); }
}
@media (min-width: 1920px) {
  :root { --type-label: var(--ty-15); --type-secondary: var(--ty-15); --type-ui: var(--ty-17); --type-body: var(--ty-20);
    --type-lead: var(--ty-24); --type-title: var(--ty-28); --type-h2: var(--ty-44); --type-display: var(--ty-56);
    --type-stat: var(--ty-88); --type-num: var(--ty-176); }
}
@media (min-width: 2400px) {
  :root { --type-body: var(--ty-24); --type-lead: var(--ty-28); --type-title: var(--ty-36); --type-h2: var(--ty-56);
    --type-display: var(--ty-64); }
}

/* The one panel treatment, as a class any lane applies (A6 6.2). */
.panel6 { position: relative; background: var(--panel-bg); border-top: var(--panel-rule); padding: var(--panel-pad); }
.panel6.lit { background-image: var(--panel-light); }
.panel6.live { border-top: var(--panel-rule-live); }
.panel6.live::before, .panel6.live::after { content: ''; position: absolute; width: var(--tick-len); height: var(--tick-len); border: 0 solid var(--tick-ink); }
.panel6.live::before { left: 0; top: -1px; border-width: 1px 0 0 1px; }
.panel6.live::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.label6 { font-family: var(--label-family); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--label-ink); font-weight: var(--label-weight); line-height: var(--lh6-label); }
.badge6 { font-family: var(--label-family); font-size: var(--badge-size); letter-spacing: var(--badge-track); text-transform: none; color: var(--badge-ink); border: 0; background: none; padding: 0; }
.num6 { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); line-height: var(--num-lh); }

/* A7 4.1 as classes any lane applies. .mono6 is the only way text becomes mono: a figure, a time standing alone, code or an API
   response; never a run of words, and never switched on mid line (A7b fix 4: a line with words and a time is .stamp6). */
.mono6 { font-family: var(--font6-num); font-weight: var(--w6-num); letter-spacing: var(--num-track-s); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); text-transform: none; }
.head6 { font-family: var(--font6-head); font-weight: var(--w6-head); font-style: normal; letter-spacing: var(--tr6-head); line-height: var(--lh6-head); text-wrap: balance; }
.body6 { font-family: var(--font6-text); font-size: var(--type-body); line-height: var(--lh6-body); letter-spacing: var(--tr6-text); max-width: var(--measure6); text-wrap: pretty; }
.nav6 { font-family: var(--font6-text); font-size: var(--nav6-size); letter-spacing: var(--nav6-track); text-transform: var(--nav6-case); }
/* A7b fix 2: the display numeral. */
.numeral6 { font-family: var(--font6-numeral); font-weight: var(--w6-numeral); letter-spacing: var(--numeral-track); line-height: var(--num-lh); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); }
/* A7b fix 3: a value and its change, one fixed gap; the change smaller, regular, in its colour with its sign and arrow. */
.val6 { font-family: var(--font6-num); font-weight: var(--w6-value); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); letter-spacing: var(--num-track-s); }
.chg6 { font-family: var(--font6-num); font-size: var(--change-size); font-weight: var(--change-weight); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); margin-left: var(--value-gap); }
.chg6.up { color: var(--movement-up-text); } .chg6.dn { color: var(--down-text); } .chg6.flat { color: var(--secondary); }
.chg6-l { font-size: var(--change-size-l); }
/* A7b fix 4: one face per timestamp line: words and a time together set in sans with tabular figures ("Computed 09 Nov 2026,
   00:03 UTC"); a time standing alone may be .mono6. */
.stamp6 { font-family: var(--font6-text); font-weight: var(--w6-text); font-size: var(--label-size); letter-spacing: var(--label-track); color: var(--label-ink); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-features); }
/* A7b fix 5: beside the numeral, the band word and today's change share one baseline, and the pair sits on the numeral's last
   baseline. .numeral-row6 holds the numeral and .numeral-meta6; .numeral-meta6 holds the band word and the change. */
.numeral-row6 { display: flex; align-items: last baseline; gap: var(--sp6-4); }
.numeral-meta6 { display: inline-flex; align-items: baseline; gap: var(--value-gap); }
/* Sitewide, as A7 4.1 asks of every headline and every paragraph: no single word last lines in a heading, no orphan in prose. */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
/* A7c: a value with its change, and an arrow with its figure, never wrap apart (found at 375 in a narrow table column). Put
   .pair6 on the element that holds the value and its change ("78.1 ▲ +0.4"), or on the change alone, which holds its arrow,
   sign and figure. Spaces inside it do not break, so the pair moves to the next line whole, and a table column or a flex or grid
   item is never narrower than the pair (its min-content width is the pair's width). It sets nothing else. */
.pair6 { white-space: nowrap; }