/* SHARED·GAUGE (427) — the range gauge (Track · slate). (D-541/D-397 · D-593 · D-735)
 *
 * EXTRACTED 2026-08-20 from the live 502 read (web/css/cards/weeks/read.css) — Phase 2
 * block 8 of cc-wb-cascade-and-weeks-extract, LAST per AMENDMENT-1 §3. Values VERBATIM
 * (.wkr-gauge → gge): the finalised is-plain box-family form — neutral hairline, thick
 * slate left bar keeping the kind (item 10b), small-caps slate eyebrow, head row with
 * icon + trailing value, 6px track with the typical band and the round marker, min/max
 * scale, italic note.
 *
 * 🔴 THE EYEBROW/LABEL LINE (.k) IS A REQUIRED FIELD AND ITS REFERENCE WORDING IS
 * ANDREW'S (D-735: a reference figure draws SAMPLE values "and says so on the face of
 * the block"; D-593 binds the caption). The renderer REFUSES to draw without it — see
 * gauge.render.js. No caller passes a datum today, so nothing renders anywhere; the
 * WB page, gallery recipe and frames land WITH Andrew's sample-label copy (status
 * `todo` in cards.json until then — registered, deliberately not framed). */
.gge { background: var(--surface-card); border: 1px solid var(--border-hairline); border-left: var(--dim-4) solid var(--slate-700); border-radius: var(--radius-card); padding: var(--space-12) var(--space-16); margin: var(--space-16) 0 0; } /* token-exception */
.gge .k { font-family: var(--font-label); font-size: var(--text-body-sm); font-weight: var(--weight-600); text-transform: uppercase; letter-spacing: var(--tracking-05); color: var(--slate-700); margin-bottom: var(--space-4); }
.gge .bxh.gh { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-600); line-height: var(--leading-140); color: var(--slate-700); margin-bottom: var(--space-8); }
.gge .gt { min-width: 0; display: flex; align-items: center; gap: var(--space-8); }
.gge .gt svg { width: var(--dim-16); height: var(--dim-16); flex: none; }
.gge .gv { margin-left: auto; font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-600); color: var(--slate-700); }
.gge .track { position: relative; height: var(--dim-6); background: var(--surface-sunken); border-radius: var(--radius-3); }
.gge .typ { position: absolute; top: 0; bottom: 0; background: var(--slate-200); border: 1px solid var(--slate-700); border-radius: var(--radius-3); } /* token-exception */
.gge .mk { position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--dim-16); height: var(--dim-16); border-radius: var(--radius-round); background: var(--slate-700); border: var(--nudge-2) solid var(--surface-card); }
.gge .scale { display: flex; justify-content: space-between; margin-top: var(--space-4); font-size: var(--text-micro); color: var(--text-secondary); }
.gge .gn { font-size: var(--text-body-sm); color: var(--text-secondary); margin-top: var(--space-8); font-style: italic; }

/* ── 502 read-consumer machinery — lives HERE because check 16 gives each prefix ONE
   stylesheet owner (the 412/421 precedent). ── */
/* D-618.1 absorb: a lit container flattens the gauge into one uniform field */
.act-lit .gge { background: transparent; border-color: transparent; }
/* D-618.2 edge case: a section ending on the gauge pads the NEXT section's subhead up.
   The selector leads with .wkr-sec (WEEKS·READ's prefix), so the host-context rule
   (2026-08-25) places the rule in web/css/cards/weeks/read.css — see the .gge branch
   added there in the same commit. */