/* ============================================================================
   gym.css — GymFinder India, site layer. Loads after styles.css + data.css.

   VOICE: a municipal data bureau. The site is a REGISTER of fitness venues,
   published sheet by sheet. Everything here serves that: octagonal city
   crests stamped over counts, hairline ledger rules instead of cards,
   transit-style locality tokens, small-caps sheet numbering, and a fee-band
   strip drawn on one shared rupee axis.

   The base Identity A layer (Fraunces + warm paper + --site-accent) arrives
   from data.css and is NOT re-declared here. This file only adds the bureau.

   Pure CSS. No images, no extra webfonts, no libraries — the target device is
   a mid-range Android phone on a patchy 4G connection.
   ========================================================================== */

/* ---------------------------------------------------------- accent rescue
   data.css declares `--accent: var(--site-accent, #3C4A55)` on :root, but
   shell() sets --site-accent on <body>. Custom properties inherit downward
   only, so at :root the fallback wins and the ochre never lands — every
   Identity A site currently paints the neutral slate in light mode. That is
   a bug in a master another session owns, so it is re-derived HERE, at the
   element where --site-accent actually exists. When the master is fixed this
   rule resolves to exactly the same value and becomes a no-op. */
body[data-site="gym"] {
  --accent: var(--site-accent, #7A4E1D);
  --accent-2: var(--accent);
  --accent-3: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--paper));
}
/* Same root cause, second symptom: shell() writes --site-accent as an INLINE
   style, so data.css's dark-theme override of --site-accent can never win the
   cascade and the dark ochre stays at its light-mode value — unreadable on
   near-black. Set --accent itself (not --site-accent) so no inline declaration
   is competing. Value is data.css's own validated dark cut of the hue. */
:root[data-theme="dark"] body[data-site="gym"] { --accent: #D2A468; }

/* The shared brand mark ships with a hard-coded indigo fill from the days
   before per-site accents existed. Repaint it locally rather than editing a
   module seven other builds share. */
body[data-site="gym"] .brand svg [fill] { fill: var(--accent); }

/* ====================================================== 0. the masthead
   The ring's base hero is centred. A register is not: a bureau sets its
   masthead flush left, against the same gutter every rule below it runs to.
   This is the site's structural signature and it is deliberately unlike the
   centred heroes of its siblings. */
body[data-site="gym"] .hero { text-align: left; }
body[data-site="gym"] .hero h1 { margin-left: 0; max-width: 17ch; }
body[data-site="gym"] .hero .lede { margin-left: 0; margin-right: 0; max-width: 60ch; }
body[data-site="gym"] .hero .gsearch { margin-left: 0; }
body[data-site="gym"] .hero .atlas { margin-left: auto; margin-right: auto; }

/* The icon sprite is a definitions block, not content: it must never occupy a
   line box or it puts a stray gap at the top of every page. */
.gi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gi { display: block; width: 100%; height: 100%; }

/* ============================================================ 1. sheet marks
   Every major section on a register page is a numbered sheet. This is the
   site's typographic signature and the thing that stops a heading from being
   pasteable onto a sibling site. */
.sheet {
  display: block; margin-bottom: 6px;
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.sheet::after {
  content: ""; display: inline-block; width: 26px; height: 1px;
  margin: 0 0 4px 10px; background: var(--line-2); vertical-align: middle;
}
.sec { margin-bottom: 6px; }

/* Small-caps field label, used wherever the bureau names a column. */
.fieldlab {
  font-family: var(--sans); font-size: .67rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}

/* ============================================================== 2. the crest
   An octagonal municipal plate stamped over a count. One drawing, two sizes:
   the hero crest on a city page, and the badge that sits beside every city
   name anywhere in the site. */
.crest { width: 156px; }
.crest-plate { position: relative; }
.crest-fr { display: block; width: 100%; height: auto; }
.crest-fr .cf-o { fill: none; stroke: var(--accent); stroke-width: 1.3; }
.crest-fr .cf-i { fill: none; stroke: var(--line-2); stroke-width: .8; }
.crest-fr .cf-t { stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; }
.crest-n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.1rem); line-height: 1;
  letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: proportional-nums;
}
.crest-u {
  display: block; margin-top: 10px; text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); line-height: 1.5;
}

/* the badge cut of the same shape — no SVG, a clipped plate */
.cbadge {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px;
  padding: 0 7px; background: var(--accent-soft); color: var(--accent);
  font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1;
  clip-path: polygon(26% 0, 74% 0, 100% 30%, 100% 70%, 74% 100%, 26% 100%, 0 70%, 0 30%);
}
:root[data-theme="dark"] .cbadge { background: color-mix(in srgb, var(--accent) 17%, transparent); }

/* ======================================================= 3. the register hero
   Set piece. Crest + fee-band strip side by side, locality tokens beneath.
   Rendered entirely server-side; no JS touches it. */
.reg {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s6); align-items: start;
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .reg { grid-template-columns: 1fr; gap: var(--s4); }
  .crest { width: 124px; }
}

/* ---- the fee band strip: three tiers on one shared rupee axis ---- */
.fb-head {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
.fb-title { font-size: .95rem; font-weight: 600; color: var(--ink); letter-spacing: -.012em; }
.fb-src {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.fb-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 124px;
  gap: 0 16px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.fb-row:first-of-type { border-top: 0; }
.fb-lab { font-size: .79rem; font-weight: 600; color: var(--ink-2); letter-spacing: -.008em; line-height: 1.3; }
.fb-bar { position: relative; display: block; }
.fb-track {
  display: block; position: relative; height: 17px;
  background-image:
    linear-gradient(90deg, var(--line) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 0 1px, transparent 1px);
  background-size: 100% 100%;
  background-position: 25% 0, 50% 0, 75% 0;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line-2);
}
.fb-fill {
  position: absolute; top: 2px; bottom: 1px;
  background: color-mix(in srgb, var(--accent) 34%, var(--paper));
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
}
:root[data-theme="dark"] .fb-fill { background: color-mix(in srgb, var(--accent) 40%, var(--paper)); }
.fb-val {
  display: block; text-align: right; font-size: .84rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.014em;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .fb-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .fb-bar { grid-column: 1 / -1; order: 3; }
  .fb-val { text-align: right; }
}
.fb-axis {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 124px;
  gap: 0 16px; margin-top: 2px; border-top: 1px solid var(--line-2);
}
@media (max-width: 560px) { .fb-axis { grid-template-columns: 1fr; } .fb-axis > span:first-child { display: none; } }
.fb-ticks { position: relative; height: 17px; }
.fb-ticks span {
  position: absolute; top: 3px; font-size: .67rem; color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fb-ticks span:first-child { left: 0; }
.fb-ticks span:last-child { right: 0; }
.fb-ticks span.mid { left: 50%; transform: translateX(-50%); }
.fb-foot { margin: 12px 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.fb-foot a { color: var(--accent); }

/* ---- locality tokens: transit-line plates ---- */
.tokens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tok {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--surface); text-decoration: none; line-height: 1;
}
.tok-n {
  display: grid; place-items: center; min-width: 26px; padding: 0 6px;
  background: var(--accent); color: #fff; font-size: .74rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .tok-n { color: #14181B; }
.tok-l {
  display: grid; place-items: center; padding: 7px 11px;
  font-size: .84rem; font-weight: 550; color: var(--ink-2); letter-spacing: -.008em;
}
a.tok:hover { border-color: var(--accent); }
a.tok:hover .tok-l { color: var(--accent); }
.tok.is-flat { background: var(--paper-2); border-style: dashed; }
.tok.is-flat .tok-n { background: var(--line-2); color: var(--ink-2); }
.tok-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); max-width: var(--measure); }

/* ================================================== 4. the ledger (listings)
   Signature layout move: listings are ruled rows in a register, not cards.
   A missing field prints an em dash in its own designed cell — the sparsity
   is typeset, so it reads as an honest blank rather than a broken box. */
.ledger { margin-top: var(--s3); border-top: 1px solid var(--line-2); }
.led {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 0 14px; align-items: baseline;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.led:hover { background: var(--paper-2); }
.led:hover .led-name { color: var(--accent); }
.led-ico { align-self: center; color: var(--accent); opacity: .85; }
.led-ico svg { display: block; width: 21px; height: 21px; }
.led-name {
  display: block; font-size: 1rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.014em; line-height: 1.35;
}
.led-sub {
  display: block; margin-top: 3px; font-size: .82rem; color: var(--muted);
  line-height: 1.45;
}
.led-sub b { color: var(--ink-2); font-weight: 600; }
.led-sub .sep { color: var(--line-2); margin: 0 6px; }
.led-f {
  display: flex; gap: 0 16px; align-self: center;
  font-variant-numeric: tabular-nums;
}
.led-f > span { display: block; min-width: 52px; text-align: right; }
.led-f i {
  display: block; font-style: normal; font-size: .62rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 3px;
}
.led-f b { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
/* The designed blank. It has to be visible — an em dash you cannot see is
   just a missing value again. */
.led-f b.nil { color: var(--faint); font-weight: 500; }
@media (max-width: 620px) {
  .led { grid-template-columns: 22px minmax(0, 1fr); }
  .led-f { grid-column: 2; margin-top: 8px; justify-content: flex-start; gap: 0 26px; }
  .led-f > span { text-align: left; min-width: 62px; }
  .led-f i { margin-bottom: 2px; }
}
.led-chain {
  display: inline-block; padding: 1px 6px; margin-right: 7px;
  border: 1px solid var(--line-2); border-radius: 2px;
  font-size: .68rem; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
}
.ledger-foot {
  margin: 12px 0 0; font-size: .8rem; color: var(--muted);
  padding-top: 10px; border-top: 1px solid var(--line-2); max-width: var(--measure);
}

/* ============================================================ 5. the atlas
   The home set piece: every city on the register plotted at its real
   coordinates, dot area proportional to entries. No coastline is drawn,
   because no coastline is in the data. */
.atlas {
  margin: var(--s5) auto 0; max-width: 620px;
  border-top: 1px solid var(--line); padding-top: var(--s4);
}
.atlas svg { display: block; width: 100%; height: auto; }
.atlas .at-dot { fill: var(--accent); opacity: .5; }
.atlas .at-dot.is-top { opacity: .95; }
.atlas .at-ring { fill: none; stroke: var(--accent); stroke-width: .8; opacity: .5; }
.atlas .at-lab {
  fill: var(--ink-2); font-family: var(--sans); font-size: 8.4px;
  font-weight: 600; letter-spacing: -.01em;
}
.atlas .at-tick { stroke: var(--line-2); stroke-width: .7; }
.atlas .at-ax {
  fill: var(--faint); font-family: var(--sans); font-size: 7px;
  font-weight: 600; letter-spacing: .1em;
}
.atlas-cap {
  margin: 14px auto 0; max-width: 62ch; text-align: center;
  font-size: .82rem; line-height: 1.62; color: var(--muted);
}
.atlas-key {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 12px; font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.atlas-key span { display: inline-flex; align-items: center; gap: 7px; }
.atlas-key i {
  display: block; border-radius: 50%; background: var(--accent); opacity: .6;
}

/* ======================================================== 6. the rank table
   The ranked civic table: a register index, with a crest badge on every row. */
.rank { border-top: 1px solid var(--line-2); }
.rank-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 0 16px; align-items: center; padding: 11px 2px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.rank-row:hover { background: var(--paper-2); }
.rank-row:hover .rk-name { color: var(--accent); }
.rk-i {
  font-size: .74rem; font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rk-name { font-size: .97rem; font-weight: 600; color: var(--ink); letter-spacing: -.014em; }
.rk-sub { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); font-weight: 400; }
.rk-fee {
  font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: -.012em;
}
@media (max-width: 620px) {
  .rank-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 12px; }
  .rk-fee { display: none; }
}

/* ============================================== 7. ledger stat row (hairline)
   Replaces the boxed stat cards: four figures divided by rules, SuburbIQ's
   move, in the bureau's own proportions. */
.citystats {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--s4); border-top: 1px solid var(--line-2);
}
.citystat {
  padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); background: none;
}
.citystat:last-child { border-right: 0; }
.citystat + .citystat { padding-left: 18px; }
.citystat b {
  display: block; font-family: var(--sans); font-size: 1.6rem; font-weight: 620;
  color: var(--ink); letter-spacing: -.032em; line-height: 1.1;
  font-variant-numeric: proportional-nums;
}
.citystat span {
  display: block; margin-top: 6px; font-size: .69rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted); line-height: 1.5;
}

/* ============================================================= 8. fee tables */
.fee-table th[scope="row"] { min-width: 190px; line-height: 1.35; }
.fee-table thead th { min-width: 132px; line-height: 1.3; }
.fee-table td.rng { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fee-note {
  margin: 14px 0 0; padding: 0 0 0 var(--s3);
  border-left: 2px solid var(--line-2);
  font-size: .85rem; line-height: 1.65; color: var(--ink-2); max-width: var(--measure);
}
.fee-note b { color: var(--ink); }

.tiercards { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin-top: var(--s4); border-top: 1px solid var(--line-2); }
.tiercard {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 18px 20px 20px 0; background: none;
}
.tiercard:last-child { border-right: 0; }
.tiercard + .tiercard { padding-left: 20px; }
.tiercard h3 { margin: 0 0 8px; font-size: 1.06rem; }
.tiercard .price {
  font-family: var(--sans); font-size: 1.2rem; font-weight: 620; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.028em; margin: 0;
}
.tiercard .price span {
  display: block; margin-top: 5px; font-size: .67rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.tiercard p { margin: 11px 0 0; font-size: .87rem; line-height: 1.62; color: var(--ink-2); }
.tiercard ul { margin: 11px 0 0; padding-left: 17px; font-size: .85rem; line-height: 1.62; color: var(--ink-2); }
.tiercard .watch { margin-top: 12px; padding-top: 10px; font-size: .81rem; color: var(--muted); border-top: 1px solid var(--line); }

/* ============================================================ 9. fact table */
.facts { margin-top: 4px; }
.facts dl { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.facts dt, .facts dd { padding: 12px 15px 12px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.facts dt {
  font-size: .69rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); padding-top: 15px;
}
.facts dd { color: var(--ink); word-break: break-word; }
@media (max-width: 560px) {
  .facts dl { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 2px; }
  .facts dd { padding-top: 2px; }
}

/* =========================================================== 10. staleness
   A bureau notice, not a warning sticker: ruled, quiet, and permanent. */
.stale {
  display: flex; gap: 12px; align-items: flex-start;
  margin: var(--s3) 0 0; padding: 13px 0 13px var(--s3);
  border-left: 2px solid var(--accent);
  font-size: .85rem; line-height: 1.62; color: var(--ink-2);
  max-width: var(--measure);
}
.stale svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 3px; color: var(--accent); }
.stale b { color: var(--ink); }
.stale a { color: var(--accent); font-weight: 600; }

/* ========================================================== 11. bar ledger */
.barlist { margin-top: var(--s3); display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.barrow {
  display: grid; grid-template-columns: minmax(96px, 26%) 1fr auto;
  gap: 14px; align-items: center; font-size: .88rem;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.barrow a, .barrow span.nm { color: var(--ink-2); text-decoration: none; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow a:hover { color: var(--accent); }
.barrow .track { height: 8px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.barrow .fill { display: block; height: 100%; background: var(--accent); opacity: .55; }
.barrow .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; min-width: 3ch; text-align: right; }

/* ========================================================= 12. region index */
.region-h {
  margin: var(--s5) 0 2px; font-family: var(--sans); font-size: .72rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.region-h + p { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }

.citygrid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); border-top: 1px solid var(--line-2); }
.citygrid a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); background: none; text-decoration: none;
}
.citygrid a:nth-child(odd) { padding-left: 0; }
.citygrid a:hover { background: var(--paper-2); }
.citygrid a:hover b { color: var(--accent); }
.citygrid a b { display: block; font-size: .93rem; color: var(--ink); font-weight: 600; letter-spacing: -.014em; }
.citygrid a b + span { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); }
.citygrid a > span:first-child { min-width: 0; }

/* the type mark inside a chip */
.chip-ico { display: inline-block; width: 15px; height: 15px; margin-right: 2px; vertical-align: -3px; color: var(--accent); }
.chip-ico svg { display: block; width: 100%; height: 100%; }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip.is-chain {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  font-weight: 600; letter-spacing: .02em;
}

/* ============================================================== 13. search */
.gsearch { position: relative; max-width: 520px; margin: var(--s4) 0 0; }
.gsearch input {
  width: 100%; padding: 13px 16px; font: inherit; font-size: 1rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.gsearch input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================ 14. submit box */
.submitbox { border-top: 1px solid var(--line-2); padding: var(--s4) 0 0; margin-top: var(--s3); background: none; }
.submitbox ol { margin: 10px 0 0; padding-left: 20px; line-height: 1.75; }
.submitbox .mailbtn {
  display: inline-block; margin-top: var(--s3); padding: 12px 22px;
  border-radius: var(--radius-sm); background: var(--accent); color: #fff;
  font-weight: 600; text-decoration: none; font-size: .92rem;
}
:root[data-theme="dark"] .submitbox .mailbtn { color: #14181B; }

/* ========================================================= 15. attribution
   Provenance as ornament: a hairline, small caps, en-dashes. */
.odbl {
  font-size: .78rem; color: var(--muted); line-height: 1.7; margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line-2); max-width: var(--measure);
}
.odbl a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.odbl strong { color: var(--ink-2); font-weight: 600; }

/* ============================================================== 16. scatter */
.citystrip { border: 0; border-top: 1px solid var(--line); background: none; padding: var(--s3) 0 0; }
.citystrip .cs-dot { fill: var(--accent); opacity: .45; }
.citystrip .cs-dot.is-big { opacity: .95; }
.citystrip-cap { font-size: .8rem; color: var(--muted); margin-top: 12px; max-width: var(--measure); }

/* =============================================================== 17. motion
   There is none, beyond state feedback. A register does not animate. */
@media (prefers-reduced-motion: reduce) {
  .led, .rank-row, .citygrid a, .tok { transition: none !important; }
}

/* ====================================== 18. the answer block, bureau cut
   AAA+++ §4/§6.2. The shared .answer.aaa is open typography on paper; the
   register sets it flush left against the same gutter every rule below it
   runs to, and gives the kicker its own hairline so the figure reads as a
   stamped return rather than a marketing statistic.

   `.is-range` exists because a rupee RANGE is two numbers and a dash: at the
   shared --fs-stat it wraps on a phone, and a display figure that wraps is a
   broken figure. Type size only — no layout property here moves, so the CLS
   budget is untouched. */
body[data-site="gym"] .answer.aaa {
  margin: var(--s4) 0 var(--s3);
  max-width: var(--measure);
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}
body[data-site="gym"] .answer.aaa h2.sec { margin-bottom: 6px; }
body[data-site="gym"] .answer.aaa .kicker { display: block; margin-bottom: 10px; }
body[data-site="gym"] .answer.aaa .stat-display { margin: 0 0 10px; color: var(--ink); }
body[data-site="gym"] .answer.aaa .stat-display .u { color: var(--muted); }
body[data-site="gym"] .answer.aaa p { max-width: 62ch; }
.stat-display.is-range {
  font-size: clamp(1.9rem, 5.4vw, 3.1rem);
  letter-spacing: -.015em;
  white-space: nowrap;
}
.stat-display.is-range .u { font-size: .3em; }

/* The method mini-spec sits inside the register's own measure, and its step
   numbers pick up the ochre rather than the shared neutral. */
body[data-site="gym"] .method { max-width: var(--measure); }
body[data-site="gym"] .method li::before { color: var(--accent-deep); }

/* Sheet-level provenance. The shared .srcline already sets the mono voice and
   the hairline; the register only tightens where it sits relative to a table
   or a ledger, which both end on their own rule. */
body[data-site="gym"] .ledger + .srcline,
body[data-site="gym"] .tablewrap + .srcline,
body[data-site="gym"] .facts + .srcline { margin-top: var(--s3); }

/* The vintage chip inside a table caption: a stamped date, not a sentence. */
table.data caption .vintage {
  display: inline-block; margin-left: .5em; padding: 2px 7px;
  border: 1px solid var(--line-2); border-radius: 3px;
  color: var(--muted); text-transform: uppercase; white-space: nowrap;
}

/* ================================================ 19. dark: the drawn hand
   The bureau hand must survive warm basalt without turning into a lightbox.
   Every stroke resolves to --ink-2 or --line-2 (never #fff, which on basalt
   reads as a hole punched in the paper), and the plate rules step down rather
   than up. Geometry is untouched — this is colour only. */
:root[data-theme="dark"] .crest-fr .cf-i { stroke: var(--line-2); }
:root[data-theme="dark"] .atlas .at-lab { fill: var(--ink-2); }
:root[data-theme="dark"] .atlas .at-ax { fill: var(--faint); }
:root[data-theme="dark"] .atlas .at-tick { stroke: var(--line-2); }
:root[data-theme="dark"] .atlas .at-dot { opacity: .62; }
:root[data-theme="dark"] .citystrip .cs-dot { opacity: .58; }
:root[data-theme="dark"] .citystrip .cs-dot.is-big { opacity: 1; }
:root[data-theme="dark"] .cs-grid { stroke: var(--line); }
:root[data-theme="dark"] .cs-lab { fill: var(--faint); }
:root[data-theme="dark"] .gi { color: var(--ink-2); }

/* The fee derivation is quoted in prose on /verification, outside a .method
   block, so the mono wash is restated here rather than duplicating the
   shared rule's selector. Scrolls inside itself: a formula must never widen
   the page on a phone. */
body[data-site="gym"] .prose > .formula {
  font-family: var(--mono);
  font-size: .8125rem;
  background: var(--accent-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0;
  overflow-x: auto;
  white-space: pre;
  color: var(--ink-2);
}