/* kit/refine.css — OPT-IN visual refinement layer (proposal, 2026-11-04). Off unless <main id="page"> carries data-refine="1"
   (app/design-scope.js sets it when localStorage 'milo-design-refine' === '1'). Every rule is under :where([data-refine="1"]) (specificity 0),
   so the current look is untouched when the attribute is absent and a page's own rules still win ties.
   Only ONE rule uses #page (the tabular-figures rule): `font:` shorthands throughout the pages reset font-variant-numeric, so a
   zero-specificity rule can never win there.
   No new hues. Colour is the existing ink/blue/status families, with the text-unsafe shades deepened per docs/design-2026-11/FOUNDATIONS-AUDIT.md.
   Contrast targets: text >= 4.5:1, large figures and UI edges >= 3:1, on the page plane including the blue wash. */

:where([data-refine="1"]) {
  /* ---- ink ramp: one blue-black family. 1 primary, 2 secondary, glyph = tertiary TEXT (4.5+), ui = non-text marks (3+) */
  --ink-1:#101e2a; --ink-2:#2f3d49; --glyph:#485562; --rf-ui:#76838f;
  --ink-disabled:rgb(16 30 42/.5);
  /* ---- neutrals aliased to the one family (audit: --neu / --data-muted / --edge-hc were three near-duplicates) */
  --neu:#5f6d79; --data-muted:var(--neu); --edge-hc:var(--neu);
  --lg-ink:var(--ink-1); --lg-ink-3:var(--glyph); --lg-ink-5:var(--neu); --lg-ink-7:var(--rf-ui);
  --lg-line:#dfe5ea; --lg-faint:#eaeff3; --lg-canvas:#f3f6f9; --lg-mute:var(--neu);
  /* ---- one blue ramp from the brand blue: accent > hover > ink (text), tint / wash (fills), select / hover (rows) */
  --accent-ink:#14539f; --lg-info:var(--accent); --side-primary:var(--accent);
  --x-hover:rgb(29 106 208/.06); --x-select:rgb(29 106 208/.12);
  /* ---- status: text-safe shades (white-on-fill >= 4.5, text on the page plane >= 4.5) */
  --pos:#277a59; --ntc:#946200; --crt:#be3b33; --inf:#246f88;
  --lg-pos:var(--pos); --lg-warn:var(--ntc); --lg-neg:var(--crt);
  /* ---- hairlines: crisper, still decorative */
  --hair:rgb(16 30 42/.10); --hair-2:rgb(16 30 42/.18); --x-grid:rgb(16 30 42/.085);
  --rf-edge:rgb(16 30 42/.20); --rf-edge-hi:rgb(16 30 42/.34);
  /* ---- type scale (seven sizes) and weights (three) */
  --rf-fs-hero:56px; --rf-fs-metric:22px; --rf-fs-figure:20px; --rf-fs-section:14px; --rf-fs-body:13px; --rf-fs-label:12px; --rf-fs-micro:11px;
  --rf-w-reg:400; --rf-w-med:500; --rf-w-semi:600;
  --x-title:600 20px/1.2 var(--font-ui);
  /* ---- spacing, 4/8 */
  --rf-1:4px; --rf-2:8px; --rf-3:12px; --rf-4:16px; --rf-5:20px; --rf-6:24px; --rf-7:32px;
  /* ---- controls: 32 default, 28 dense (segmented control), radius = production's --r-ctl / --r-row */
  --rf-h-ctl:32px; --rf-h-dense:28px;
}

/* the page plane: a whiter sheet over the sky so secondary text sits on a lighter ground (desktop only, like concept.css) */
:where([data-refine="1"]):where(html:not(.is-phone) *){background-color:rgb(255 255 255/.74)}

/* tabular figures everywhere on the page (the only rule that needs an id, see the header) */
#page[data-refine="1"] *{font-variant-numeric:tabular-nums}

/* ================================================================ buttons: primary / secondary / ghost, one height, one radius, visible focus */
:where([data-refine="1"]) :where(.x-btn){height:var(--h-ctl);padding:0 12px;gap:6px;border-radius:var(--r-ctl);font:500 13px/1 var(--font-ui);color:var(--ink-1);
  background:rgb(255 255 255/.68);box-shadow:var(--sh-ctl);
  transition:transform var(--dur-press) var(--x-ease),background var(--dur-hover)}
:where([data-refine="1"]) .x-btn svg{width:16px;height:16px;color:var(--glyph)}
@media (hover:hover){:where([data-refine="1"]) .x-btn:hover{background-color:rgb(255 255 255/.86)}}
:where([data-refine="1"]) .x-btn:active{transform:scale(.97)}
:where([data-refine="1"]) :where(.x-btn,.x-seg>button,.x-link,.btn,.h-lg):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:where([data-refine="1"]) .x-btn:disabled{color:var(--ink-disabled);cursor:default}
:where([data-refine="1"]) .x-btn.pri{background:var(--accent-sheen) var(--accent);color:var(--on-accent);box-shadow:0 0 0 .5px rgb(18 74 150/.6),0 1px 2px rgb(18 74 150/.24),inset 0 1px 0 rgb(255 255 255/.2)}
:where([data-refine="1"]) .x-btn.pri svg{color:inherit}
@media (hover:hover){:where([data-refine="1"]) .x-btn.pri:hover{background-color:var(--accent-hover)}}
:where([data-refine="1"]) .x-btn.pri:active{background-color:var(--accent-hover)}
:where([data-refine="1"]) .x-btn.pri:disabled{background:rgb(29 106 208/.34);box-shadow:none;color:#fff}
:where([data-refine="1"]) .x-btn.ghost,:where([data-refine="1"]) .btn.ghost{background:transparent;box-shadow:none}
@media (hover:hover){:where([data-refine="1"]) .x-btn.ghost:hover,:where([data-refine="1"]) .btn.ghost:hover{background:var(--x-hover);box-shadow:none}}
/* icon buttons (pager chevrons): ghost, dense, 28 */
:where([data-refine="1"]) .btn.ic{display:inline-grid;place-items:center;width:var(--rf-h-dense);height:var(--rf-h-dense);padding:0;border-radius:var(--r-ctl);color:var(--ink-2);background:transparent;box-shadow:none;transition:background var(--dur-hover)}
@media (hover:hover){:where([data-refine="1"]) .btn.ic:hover:not(:disabled){background:var(--x-hover);color:var(--ink-1)}}
:where([data-refine="1"]) .btn.ic:active:not(:disabled){background:var(--x-select)}
:where([data-refine="1"]) .btn.ic:disabled{color:var(--ink-disabled);opacity:1}
:where([data-refine="1"]) .x-link{color:var(--accent-ink);font:var(--rf-w-med) var(--rf-fs-body)/1 var(--font-ui)}

/* ================================================================ segmented control: same edge, radius and label weight as the buttons; dense height */
:where([data-refine="1"]) .x-seg{height:var(--h-dense);padding:2px;border-radius:var(--r-ctl);background:rgb(16 30 42/.07);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.05)}
:where([data-refine="1"]) .x-seg button{height:24px;padding:0 10px;border-radius:6px;font:500 12px/1 var(--font-ui);color:var(--ink-1)}
:where([data-refine="1"]) .x-seg button[aria-pressed=true]{color:var(--ink-1)}
:where([data-refine="1"]) .x-seg .x-pill{border-radius:6px;background:#fff;box-shadow:0 0 0 .5px rgb(16 30 42/.14),0 1px 2px rgb(16 30 42/.14)}

/* ================================================================ avatars, medals, status */
:where([data-refine="1"]) .x-av{color:var(--accent-ink);font-weight:var(--rf-w-semi);box-shadow:0 0 0 1px rgb(16 30 42/.12),inset 0 1px 0 #fff}
/* medal numerals: ink on the metals (white was 2.15 to 2.7); the metals themselves keep their hues */
:where([data-refine="1"]) .sb-rk.g1,:where([data-refine="1"]) .sb-rk.g2,:where([data-refine="1"]) .sb-rk.g3{color:var(--ink-1)}
:where([data-refine="1"]) .x-delta{font-weight:var(--rf-w-semi)}
:where([data-refine="1"]) .x-st{font-weight:var(--rf-w-med);color:var(--ink-1)}
:where([data-refine="1"]) .x-sub{color:var(--ink-2)}
:where([data-refine="1"]) .x-table th{color:var(--ink-2)}