/* ============================================================================
 * SHARED·FOURSTEPSCALE (1050) — the one-answer-out-of-four control.
 * Four equal tiles in a row; the parent taps exactly one. One tile is .on.
 * ============================================================================
 * EXTRACTED VERBATIM (2026-09-04, brief 701) from the logger templates' own
 * page-local <style> block — workbench/weaning/_bakeoffs/logger-10/, the
 * "THE FOUR-STEP SCALE" block at lines 189-201 of logger-01-form-perfected.html.
 * THE BLOCK IS THE SAME IN ALL TEN TEMPLATES, byte for byte:
 *
 *   for f in workbench/weaning/_bakeoffs/logger-10/*.html; do \
 *     sed -n '/^  \.st4 { display: grid/,/^  \.st4\.big \.st { font-size/p' \
 *     "$f" | md5 -q; done
 *   → 2e36a406… ten times, 13 lines each. Extracted once.
 *
 * WHAT OWNS WHAT:
 *   · THIS FILE — the four-step scale only: .fss (the grid), .fss-t (one
 *     tile), .on (the tapped one), .big (the glyph-face density). Nothing else.
 *   · 430 SHARED·SELECTIONPILL — a WRAP of pills for a choice of many. This is
 *     a FIXED grid of four ordinal steps. Different controls; neither replaces
 *     the other. The solids tool's "when" question (slot pills) stays on the
 *     pill row — brief 701's DO-NOT, kept.
 *
 * ONE DISCLOSED EXCEPTION — THE CLASS NAMES. The kept names (.st4 / .st) are
 * generic two-to-four-character tokens, and .st is already styled — scoped —
 * in another card's stylesheet (web/css/cards/phase/hero.css:108,
 * `.phz-body .st`). Namespaced under the card prefix (.fss / .fss-t), every
 * DECLARATION below is the kept block's own, byte for byte; only the selector
 * tokens change, and check 65 compares pixels, not names. Root class = .fss,
 * so the card is self-contained under its own root (D-470/475).
 *
 * THE GLYPH SLOT IS A PROP, NOT ART (D-427). `.fss-t svg` sizes whatever the
 * consumer hands it — 24px resting, 32px in the .big face. This file carries
 * no path data: the drawn reaction faces the templates fill the slot with are
 * template art, and D-427 stops hand-drawn glyphs. A tool fills the slot with
 * an honest glyph of its own or ships words only — the kept block's own words:
 * "Sleep has no face to draw and simply uses the word-only density".
 *
 * SELF-CONTAINMENT: every element the card renders — grid, tile, word, glyph —
 * gets its type, weight, colour and size explicitly below. The ONE host-
 * supplied property is box-sizing (web/css/app.css:35, the app's global
 * border-box reset), exactly as the kept source takes it.
 *
 * MICRO-STATES (D-422): the tiles are controls — :active and :focus-visible
 * both carried, straight from the kept block.
 *
 * CONTRAST, MEASURED 2026-09-04:
 *   .fss-t        --text-secondary #5a5a55 on --surface-well #f0ebe1 = 5.84:1 (pass)
 *   .fss-t.on     --text-on-accent #fffbf2 on --teal-700 #1c6e64    = 5.87:1 (pass)
 *   — see §CONTRAST below for the one disclosed fix and why.
 * ============================================================================ */

.fss { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.fss-t { min-height: var(--h-chip); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-4); border: var(--nudge-1) solid transparent;
  background: var(--surface-well); border-radius: var(--radius-control); padding: var(--space-8) var(--space-4);
  font-family: var(--font-body); font-size: var(--text-meta); font-weight: var(--weight-600);
  line-height: var(--leading-120); color: var(--text-secondary); cursor: pointer; text-align: center; }
.fss-t svg { width: var(--dim-24); height: var(--dim-24); }
/* 🔴 §CONTRAST — ONE DISCLOSED FIX, THE 440/450/904/910 BATCH'S OWN CLASS. The kept
 * block sets the tapped tile to --accent (#23867a) under cream text: 4.27:1 at the
 * tile's 12px/600 (WCAG 4.5 needed) — check 56 ratchets that as a NEW failure and
 * check 66 forbids accepting it in the same commit as component code. The fill moves
 * one step down the accent ladder to --teal-700 (#1c6e64, the token's own "hover /
 * pressed" role): cream text on it measures 5.87:1, measured 2026-09-04
 * ((L1+0.05)/(L2+0.05) over the two resolved hexes from tokens.css). The word stays
 * cream, the family stays teal, the tapped tile reads pressed-deeper. This is the port
 * correcting the pair, NOT a redesign — and it makes a pixel-diff against the kept
 * source's selected state permanently, correctly mismatched, which is why the mirror's
 * KEPT-REF measures the kept page's UNTOUCHED state (no template renders a selected
 * tile on load, so no kept page shows this region at all). */
.fss-t.on { background: var(--teal-700); color: var(--text-on-accent); border-color: var(--teal-700); }
.fss-t:active { border-color: var(--accent); }
.fss-t:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.fss.big .fss-t { min-height: var(--h-input); font-size: var(--text-body-sm); }
.fss.big .fss-t svg { width: var(--dim-32); height: var(--dim-32); }