/* =============================================================================
   ALMA · Game system  (apps/web/public/css/game-system.css)
   The one stylesheet every studio screen uses. Night-navy layered panels, one pale-gold accent,
   Marcellus with Barlow, clipped corners, hairlines and diamonds. Flat clipped buttons only.
   Ported from the approved round 4 prototype; class names are kept so markup can be copied from it.
   Order: tokens → base → ornaments → controls → cards → overlays → round 4 parts → studio shell → motion.

   Loaded by views/studio/_top.ejs (after /fonts/fonts.css). Pages add their own css after it.

   --- THE SHELL (rendered by _top/_bottom, styled at "studio shell" below) ---------------------------
   .app (container "app", so page rules can use @container app (max-width: 760px) for phones)
     .backdrop        fixed space art; GM.backdrop('sky'|'forge'|'done') crossfades it
     .shell > .rail   the left edge rail (desktop); .bottombar is the phone bar (≤ 760px)
     .shell > .main > .top    sticky top bar: kicker + h1, credits, Search, account menu
                    > main#main.gm-main   the page content (the document scrolls, not main)
   Page content helpers: .gm-page (standard padded page column), .gm-grid-2 (main + 380px side).

   --- MOTION (see "motion system" at the end) ---------------------------------------------------------
   Tokens: --ease-panel (expo out), --ease-soft, --ease-spring (small overshoot), --ease-in,
           --t-quick 160ms, --t-base 240ms, --t-panel 420ms, --t-fade 700ms, --stagger 45ms, --slide 40px.
   Only transform and opacity are animated. prefers-reduced-motion: everything becomes instant or a
   short fade; html.gm-lite (set by controls.js on low-end devices or Save-Data) drops the costly extras.
   Classes (CSS only, no JS needed):
     .gm-enter                 children slide in from the right, staggered (first 10 children)
       [data-from="left"|"up"|"fade"]  other directions
     .gm-rise                  one element rises in
     .gm-sweep                 a gold light sweeps across once (selection); GM.sweep(el) replays it
     .glow-select              the prototype's gold ring pulse (kept)
     .drift                    slow Ken Burns on banner art (kept)
     .gm-parallax              art inside follows the pointer a little; needs GM.parallax(el)
     .gm-xfade > *             stacked slides; the one with .on fades in (carousels)
     .gm-bars > *              bars grow from the bottom, staggered, when [data-reveal] scrolls in
     .gm-draw                  svg paths with pathLength="1" draw in when [data-reveal] scrolls in
     .gm-ink                   the sliding tab underline + diamond; made by GM.tabs(tablist)
     .gm-marker                a diamond that glides to the selected row; made by GM.marker(list)
     .pin                      pins drop with a small settle (gm-pin-drop)
     .gm-ignite                a forge stage diamond lights up (add the class when the stage starts)
     .gm-embers                rising embers; GM.embers(el) fills it (skipped in gm-lite)
     .gm-beam / .gm-crystal    the finish: a light beam, then the crystal reveal
     .gm-calm                  a failed run: a slow, calm fade-in
     .gauge.gm-fill .track i   fills by transform: set --v as a number 0…1 (not a percentage)
   Between pages the browser crossfades the content and keeps the rail, top bar and backdrop still
   (cross-document view transitions; the rail's diamond glides to the new tab).
   ============================================================================= */

:root {
  color-scheme: dark;

  /* --- colour ------------------------------------------------------------- */
  --void: oklch(0.12 0.024 262);          /* behind everything */
  --void-2: oklch(0.15 0.028 262);
  --layer-1: oklch(0.18 0.030 262 / 0.74); /* panels */
  --layer-2: oklch(0.23 0.034 262 / 0.82); /* raised panels, buttons */
  --layer-3: oklch(0.28 0.036 262 / 0.90); /* hover, popovers */
  --layer-solid: oklch(0.19 0.030 262);    /* when transparency is reduced */
  --line: oklch(0.90 0.04 85 / 0.14);      /* hairline */
  --line-2: oklch(0.90 0.05 85 / 0.30);    /* strong hairline */
  --fg: oklch(0.95 0.012 85);              /* ivory */
  --fg-2: oklch(0.79 0.02 255);
  --fg-3: oklch(0.66 0.02 255);
  --gold: oklch(0.85 0.09 85);             /* the only accent */
  --gold-hot: oklch(0.90 0.08 85);
  --gold-tint: oklch(0.85 0.09 85 / 0.12);
  --gold-glow: oklch(0.85 0.09 85 / 0.35);
  --on-gold: oklch(0.17 0.03 262);
  --good: oklch(0.80 0.12 165);
  --warn: oklch(0.83 0.12 75);
  --bad: oklch(0.74 0.14 25);
  --bad-tint: oklch(0.74 0.14 25 / 0.12);
  --good-tint: oklch(0.80 0.12 165 / 0.12);
  --scrim: oklch(0.08 0.02 262 / 0.72);

  /* --- type --------------------------------------------------------------- */
  --f-display: "Display Digits", "Marcellus", "Cormorant Garamond", Georgia, serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-label: "Barlow Condensed", "Barlow", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --t-hero: clamp(34px, 4.2vw, 56px);   /* banner and page heroes */
  --t-h1: clamp(26px, 2.6vw, 36px);     /* screen titles */
  --t-h2: 24px;                         /* panel titles */
  --t-h3: 18px;                         /* card names */
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 12px;                      /* condensed, tracked capitals */

  /* --- space and shape ---------------------------------------------------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --cut-lg: 16px; --cut: 10px; --cut-sm: 6px;   /* clipped-corner sizes */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px;     /* the three control heights */
  --rail: 88px;

  /* --- motion ------------------------------------------------------------- */
  --ease-panel: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out: panels and selections */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a small overshoot: pins, chips landing */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);        /* leaving */
  --t-quick: 160ms;   /* hover, press */
  --t-base: 240ms;    /* small moves: markers, ink */
  --t-panel: 420ms;   /* panel slide */
  --t-fade: 700ms;    /* background crossfade */
  --t-drift: 22s;     /* banner Ken Burns */
  --stagger: 45ms;    /* between siblings entering */
  --slide: 40px;      /* how far panels travel */
}
.theme-day {
  color-scheme: light;
  --void: oklch(0.95 0.012 85); --void-2: oklch(0.92 0.015 85);
  --layer-1: oklch(0.985 0.006 85 / 0.82); --layer-2: oklch(1 0 0 / 0.88); --layer-3: oklch(0.95 0.012 85 / 0.95); --layer-solid: oklch(0.985 0.006 85);
  --line: oklch(0.30 0.04 262 / 0.14); --line-2: oklch(0.30 0.04 262 / 0.30);
  --fg: oklch(0.22 0.03 262); --fg-2: oklch(0.42 0.03 262); --fg-3: oklch(0.52 0.03 262);
  --gold: oklch(0.55 0.11 75); --gold-hot: oklch(0.50 0.11 75); --gold-tint: oklch(0.55 0.11 75 / 0.14); --gold-glow: oklch(0.55 0.11 75 / 0.3); --on-gold: oklch(0.99 0.01 85);
}

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); }
body { margin: 0; color: var(--fg); background: var(--void); font: 400 var(--t-body)/1.55 var(--f-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3, h4, h5, p, ol, ul, dl, dd, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--gold); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type helpers */
.t-hero { font: 400 var(--t-hero)/1.04 var(--f-display); letter-spacing: 0.01em; }
.t-h1 { font: 400 var(--t-h1)/1.1 var(--f-display); letter-spacing: 0.03em; }
.t-h2 { font: 400 var(--t-h2)/1.15 var(--f-display); letter-spacing: 0.03em; }
.t-h3 { font: 400 var(--t-h3)/1.2 var(--f-display); letter-spacing: 0.03em; }
.t-small { font-size: var(--t-small); line-height: 1.5; }
.label { font: 600 var(--t-label)/1 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); }
.label-gold { color: var(--gold); }
.num { font: 600 15px/1 var(--f-label); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.mono { font: 400 12px/1.5 var(--f-mono); }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.good { color: var(--good); } .bad { color: var(--bad); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.stack { display: grid; gap: var(--s3); align-content: start; grid-template-columns: minmax(0, 1fr); }
.sp { flex: 1; }

/* --- ornaments ------------------------------------------------------------- */
.dia { display: inline-block; flex: none; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }
.dia.fill { background: var(--gold); }
.dia.lg { width: 10px; height: 10px; }
.orn { display: flex; align-items: center; gap: var(--s3); }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.orn::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.orn-left::before { display: none; }
.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, var(--line-2), transparent); }
.corner { position: relative; }
.corner::after { content: ""; position: absolute; right: 7px; top: 7px; width: 10px; height: 10px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); opacity: 0.7; pointer-events: none; }
.cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cut-lg { --cut: var(--cut-lg); }
.cut-sm { --cut: var(--cut-sm); }
/* Outlines are clipped away by clip-path, so clipped things show focus inside their edge. */
.cut:focus-visible, .btn:focus-visible, .chip:focus-visible, .card:focus-visible, .rtab:focus-visible, .tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--void); }

/* --- panel layers ---------------------------------------------------------- */
.panel { position: relative; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(14px) saturate(1.1); }
.panel-2 { background: var(--layer-2); }
.panel-pad { padding: var(--s4) var(--s5); }
.panel-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); min-height: 52px; }
.panel-head .t-h2 { flex: 1; min-width: 0; }
@media (prefers-reduced-transparency: reduce) { .panel, .panel-2 { background: var(--layer-solid); backdrop-filter: none; } }

/* --- buttons: flat, clipped, three sizes ------------------------------------ */
.btn { --cut: 8px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h-md); padding: 0 20px; border: 0; background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); font: 600 13px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; text-decoration: none; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-quick) var(--ease-soft), color var(--t-quick) var(--ease-soft); }
.btn:hover { background: var(--layer-3); color: var(--fg); }
.btn-gold { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.btn-gold:hover { background: var(--gold-hot); color: var(--on-gold); }
.btn-gold .dia { border-color: var(--on-gold); }
.btn-ghost { background: transparent; box-shadow: none; color: var(--fg-2); padding: 0 12px; }
.btn-ghost:hover { background: var(--gold-tint); color: var(--fg); }
.btn-danger { background: transparent; box-shadow: inset 0 0 0 1px oklch(0.74 0.14 25 / 0.55); color: var(--bad); }
.btn-danger:hover { background: var(--bad); color: var(--on-gold); }
.btn-icon { width: var(--h-md); padding: 0; }
.btn-sm { --cut: 6px; height: var(--h-sm); padding: 0 14px; font-size: 12px; }
.btn-sm.btn-icon { width: var(--h-sm); padding: 0; }
.btn-lg { --cut: 10px; height: var(--h-lg); padding: 0 28px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }
.btn .cost { font: 500 12px/1 var(--f-label); letter-spacing: 0.06em; opacity: 0.8; text-transform: none; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm .ico { width: 15px; height: 15px; }

/* --- chips, segmented, switches, ranges ------------------------------------- */
.chip { --cut: 6px; display: inline-flex; align-items: center; gap: 8px; height: var(--h-sm); padding: 0 14px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); font: 500 14px/1 var(--f-body); cursor: pointer; white-space: nowrap; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-quick), color var(--t-quick); }
.chip:hover { background: var(--gold-tint); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-on { color: var(--fg); background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); }
.chip .n { font: 600 12px/1 var(--f-label); color: var(--fg-3); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.seg > button { --cut: 6px; display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); text-align: left; cursor: pointer; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-quick); }
.seg > button:hover { background: var(--gold-tint); }
.seg > button[aria-pressed="true"] { background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); }
.seg b { font: 600 13px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; }
.seg span { font: 600 14px/1 var(--f-label); color: var(--fg-2); letter-spacing: 0.04em; }
.seg small { font-size: 12px; color: var(--fg-3); line-height: 1.35; }
.seg-mini { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line); }
.seg-mini button { height: 30px; padding: 0 12px; border: 0; background: transparent; color: var(--fg-2); font: 600 12px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.seg-mini button:hover { color: var(--fg); background: var(--gold-tint); }
.seg-mini button[aria-pressed="true"] { color: var(--on-gold); background: var(--gold); }
.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: var(--t-small); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 38px; height: 20px; flex: none; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--void-2); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); transition: background var(--t-quick); }
.switch .track::after { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; background: var(--fg-2); transform: rotate(45deg); transition: transform var(--t-panel) var(--ease-panel), background var(--t-quick); }
.switch input:checked + .track { background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); }
.switch input:checked + .track::after { transform: translateX(18px) rotate(45deg); background: var(--gold); }
.switch input:focus-visible + .track { box-shadow: inset 0 0 0 2px var(--gold); }
/* continuous range: a hairline track that fills gold up to a diamond thumb; --p is set from the value */
.range { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--gold) var(--p), var(--line-2) var(--p)); }
.range::-moz-range-track { height: 2px; background: var(--line-2); }
.range::-moz-range-progress { height: 2px; background: var(--gold); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border: 0; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--gold-tint); }
.range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 0; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--gold-tint); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--gold); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--gold); }
.kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 11px/1 var(--f-label); letter-spacing: 0.08em; color: var(--fg-2); }

/* --- inputs ---------------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field > .label { letter-spacing: 0.14em; }
.input, .select, .textarea { --cut: 6px; width: 100%; height: var(--h-md); padding: 0 12px; border: 0; background: oklch(0.10 0.022 262 / 0.7); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font-size: 15px; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: box-shadow var(--t-quick); }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:hover, .select:hover, .textarea:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--gold-tint); }
.textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.input-icon { position: relative; }
.input-icon .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.input-icon .input { padding-left: 38px; }
.hint { font-size: 12.5px; color: var(--fg-3); }
.blank { display: inline-block; min-width: 4ch; margin: 0 2px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--gold); background: var(--gold-tint); color: var(--fg); font: inherit; line-height: 1.5; }
.blank:focus { outline: none; background: oklch(0.85 0.09 85 / 0.22); }

/* --- tabs and the edge rail ------------------------------------------------- */
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; background: none; color: var(--fg-3); font: 600 13px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px; background: var(--gold); }
.tab[aria-selected="true"]::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -4px; background: var(--gold); transform: rotate(45deg); }
.tab .n { font: 600 11px/1 var(--f-label); padding: 2px 5px; background: var(--bad-tint); color: var(--bad); }
.rail { display: grid; align-content: start; justify-items: center; gap: 4px; padding: var(--s4) 0; border-right: 1px solid var(--line); background: oklch(0.10 0.024 262 / 0.62); backdrop-filter: blur(10px); }
.rtab { position: relative; display: grid; justify-items: center; gap: 7px; width: 76px; padding: 12px 0; border: 0; background: none; color: var(--fg-3); font: 600 11px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: color var(--t-quick); }
.rtab .ico { width: 22px; height: 22px; stroke-width: 1.3; }
.rtab:hover { color: var(--fg); }
.rtab[aria-current="page"] { color: var(--gold); }
.rtab[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: var(--gold); transform: rotate(45deg); }
.rtab[aria-current="page"]::after { content: ""; position: absolute; inset: 4px 6px; background: radial-gradient(closest-side, var(--gold-tint), transparent); z-index: -1; }

/* --- tier badge -------------------------------------------------------------- */
.tier { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 11px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.tier .dia { width: 6px; height: 6px; }
.tier-free { color: var(--good); box-shadow: inset 0 0 0 1px oklch(0.80 0.12 165 / 0.5); }
.tier-free .dia { border-color: var(--good); }
.tier-best { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; font: 600 11px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; background: var(--layer-2); color: var(--fg-2); }
.badge-bad { background: var(--bad-tint); color: var(--bad); } .badge-good { background: var(--good-tint); color: var(--good); } .badge-gold { background: var(--gold-tint); color: var(--gold); }

/* --- cards ------------------------------------------------------------------- */
.card { position: relative; border: 0; padding: 0; text-align: left; color: var(--fg); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-quick), box-shadow var(--t-quick), transform var(--t-panel) var(--ease-panel); }
button.card, a.card { cursor: pointer; font: inherit; text-decoration: none; }
button.card:hover, a.card:hover { background: var(--layer-2); }
.card[aria-pressed="true"], .card[aria-current="true"], .card.is-on { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 0 var(--gold-glow); background: var(--layer-2); }
/* banner card: art with a vignette and a gradient mask into the panel colour */
.card-banner { display: grid; align-content: end; min-height: 300px; overflow: hidden; isolation: isolate; }
.card-banner .art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.2s var(--ease-panel); }
.card-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, oklch(0.12 0.024 262 / 0.92) 0%, oklch(0.12 0.024 262 / 0.55) 42%, transparent 70%), linear-gradient(0deg, oklch(0.12 0.024 262 / 0.95) 0%, transparent 55%), radial-gradient(120% 90% at 70% 40%, transparent 50%, oklch(0.08 0.02 262 / 0.6) 100%); }
.card-banner .copy { padding: var(--s6); display: grid; gap: var(--s2); max-width: 620px; }
/* roster card: emblem art on top, name and tier below */
.card-roster { display: grid; grid-template-rows: auto auto; overflow: hidden; }
.card-roster .em { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-bottom: 1px solid var(--line); }
.card-roster .em img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform var(--t-panel) var(--ease-panel), filter var(--t-panel); filter: saturate(0.85) brightness(0.82); }
.card-roster .em::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.12 0.024 262 / 0.8), transparent 55%); }
.card-roster:hover .em img, .card-roster[aria-pressed="true"] .em img { transform: scale(1.1) translateY(-2px); filter: saturate(1) brightness(1); }
.card-roster .em .tier { position: absolute; left: 10px; top: 10px; z-index: 1; background: oklch(0.12 0.024 262 / 0.7); }
.card-roster .info { padding: 10px 12px 12px; display: grid; gap: 3px; }
.card-roster .info b { font: 400 var(--t-h3)/1.15 var(--f-display); letter-spacing: 0.03em; }
.card-roster .info span { font-size: 12.5px; color: var(--fg-2); }
.card-roster[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 24px var(--gold-glow); z-index: 2; pointer-events: none; }
/* stat card */
.card-stat { padding: var(--s4); display: grid; gap: 6px; align-content: start; }
/* Condensed figures, not the display face: Marcellus draws 0 as a plain ring that reads as the letter O. */
.card-stat .v { font: 600 36px/1 var(--f-label); letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; }
.card-stat .v.bad { color: var(--bad); }
.card-stat small { font-size: 12.5px; color: var(--fg-2); }
/* list rows */
.list { display: grid; }
.list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 48px; padding: 8px var(--s4); border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); text-align: left; font: inherit; }
.list-row:last-child { border-bottom: 0; }
button.list-row { cursor: pointer; }
button.list-row:hover { background: var(--gold-tint); }
.list-row[aria-current="true"] { background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold); }
.list-row .t { min-width: 0; }
.list-row .t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .t small { color: var(--fg-3); font-size: 12.5px; }

/* --- stat bars and gauges ----------------------------------------------------- */
.statbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 13px; color: var(--fg-2); }
.statbar .track { height: 4px; background: var(--line); }
.statbar .track i { display: block; height: 100%; width: var(--v, 0%); background: var(--gold); transition: width var(--t-panel) var(--ease-panel); }
.statbar b { text-align: right; color: var(--fg); font: 600 14px/1 var(--f-label); letter-spacing: 0.04em; }
.gauge { display: grid; gap: 8px; }
.gauge .track { position: relative; height: 8px; background: oklch(0.10 0.022 262 / 0.8); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.gauge .track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: linear-gradient(90deg, var(--gold), var(--gold-hot)); transition: width 700ms var(--ease-panel); }
.gauge .track .held { position: absolute; top: -3px; bottom: -3px; left: var(--held, 100%); width: 1px; background: var(--fg-2); }

/* --- feedback: toast, empty, skeleton ------------------------------------------- */
.toast { --cut: 8px; position: fixed; left: 50%; bottom: 28px; z-index: 90; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 8px 0 16px; background: var(--layer-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -12px oklch(0 0 0 / 0.6); backdrop-filter: blur(16px); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transform: translate(-50%, 0); animation: toast-in var(--t-panel) var(--ease-panel) both; max-width: calc(100% - 32px); }
.toast.static { position: relative; left: auto; bottom: auto; transform: none; animation: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.empty { display: grid; justify-items: center; gap: var(--s2); padding: var(--s6) var(--s5); text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.empty .dia { width: 14px; height: 14px; margin-bottom: var(--s2); }
.empty p { color: var(--fg-2); max-width: 42ch; font-size: 14px; }
.skel { display: block; height: 12px; background: linear-gradient(90deg, var(--layer-2) 0%, oklch(0.32 0.04 262 / 0.9) 50%, var(--layer-2) 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- overlays: scrim, dialog, sheet, command palette ------------------------------ */
.scrim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding: 12vh var(--s4) var(--s4); background: var(--scrim); backdrop-filter: blur(6px); animation: fade var(--t-panel) var(--ease-soft) both; }
@keyframes fade { from { opacity: 0; } }
.dialog { --cut: 14px; width: min(560px, 100%); max-height: 76vh; overflow: auto; background: var(--layer-solid); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -20px oklch(0 0 0 / 0.8); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); animation: rise var(--t-panel) var(--ease-panel) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.dialog-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.dialog-body { padding: var(--s5); display: grid; gap: var(--s4); }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5) var(--s5); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; max-height: 80vh; overflow: auto; padding: var(--s3) var(--s4) var(--s5); background: var(--layer-solid); box-shadow: inset 0 1px 0 var(--line-2); clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); animation: sheet-in var(--t-panel) var(--ease-panel) both; }
.sheet.static { position: relative; animation: none; }
.sheet .grab { display: block; width: 36px; height: 3px; margin: 0 auto var(--s3); background: var(--line-2); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.palette { --cut: 12px; width: min(600px, 100%); background: var(--layer-solid); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -20px oklch(0 0 0 / 0.8); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); animation: rise var(--t-panel) var(--ease-panel) both; }
.palette input { width: 100%; height: 54px; padding: 0 var(--s5); border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font: 400 17px/1 var(--f-body); }
.palette input:focus { outline: none; }
.palette ul { list-style: none; padding: 6px; max-height: 360px; overflow: auto; display: grid; gap: 1px; }
.palette li { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3); cursor: pointer; color: var(--fg-2); }
.palette li b { color: var(--fg); font-weight: 500; }
.palette li[aria-selected="true"] { background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold); }
.palette .foot { display: flex; gap: var(--s4); padding: 10px var(--s5); border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-3); }

/* --- the app shell and backdrop ------------------------------------------------------ */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--void); }
/* max-width: none, or the global img cap undoes the 8% overscan and the drift shows a dark strip on the right. */
.backdrop img { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; opacity: 0; transition: opacity var(--t-fade) var(--ease-soft); }
.backdrop img.on { opacity: var(--dim, 0.3); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 30%, oklch(0.10 0.022 262 / 0.85) 85%), linear-gradient(0deg, oklch(0.12 0.024 262 / 0.6), transparent 40%); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 20px/1 var(--f-display); letter-spacing: 0.34em; color: var(--fg); text-decoration: none; }
.wordmark .dia { width: 9px; height: 9px; }

/* --- motion utilities ------------------------------------------------------------- */
.enter-from-right { animation: from-right var(--t-panel) var(--ease-panel) both; }
.enter-from-left { animation: from-left var(--t-panel) var(--ease-panel) both; }
.leave-to-left { animation: to-left 260ms var(--ease-soft) both; }
.leave-to-right { animation: to-right 260ms var(--ease-soft) both; }
@keyframes from-right { from { opacity: 0; transform: translateX(var(--slide)); } }
@keyframes from-left { from { opacity: 0; transform: translateX(calc(var(--slide) * -1)); } }
@keyframes to-left { to { opacity: 0; transform: translateX(calc(var(--slide) * -0.5)); } }
@keyframes to-right { to { opacity: 0; transform: translateX(calc(var(--slide) * 0.5)); } }
.stagger > * { animation: rise var(--t-panel) var(--ease-panel) both; }
.stagger > *:nth-child(2) { animation-delay: 40ms; } .stagger > *:nth-child(3) { animation-delay: 80ms; } .stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; } .stagger > *:nth-child(6) { animation-delay: 200ms; } .stagger > *:nth-child(n+7) { animation-delay: 240ms; }
.drift { animation: drift var(--t-drift) ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.glow-select { animation: glow 900ms var(--ease-panel) 1; }
@keyframes glow { 0% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 0 var(--gold-glow); } 40% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 8px oklch(0.85 0.09 85 / 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
  .drift { animation: none !important; }
}

/* --- layering fix: the backdrop sits on its own layer under the app (a body background would paint over a negative z-index) --- */
body { background: transparent; }
.backdrop { z-index: 0; }
.app, .kit-top, .kit { position: relative; z-index: 1; }

/* =============================================================================
   Round 4 · sliders, pop-outs, tables, pagination, pickers and pins
   ============================================================================= */

/* --- segmented slider: one track, one thumb that slides to the chosen stop (kind) --- */
.sl-seg { --n: 5; --i: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; background: oklch(0.10 0.022 262 / 0.7); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); touch-action: pan-y; user-select: none; }
.sl-seg .sl-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); transform: translateX(calc(var(--i) * 100%)); background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: transform var(--t-panel) var(--ease-panel); pointer-events: none; }
.sl-seg .sl-thumb::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -3px; background: var(--gold); transform: rotate(45deg); }
.sl-seg button { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 56px; padding: 8px 2px 12px; border: 0; background: none; color: var(--fg-3); font: 600 12px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--t-quick); }
.sl-seg button .ico { width: 20px; height: 20px; transition: color var(--t-quick); }
.sl-seg button:hover { color: var(--fg); }
.sl-seg button[aria-checked="true"] { color: var(--fg); }
.sl-seg button[aria-checked="true"] .ico { color: var(--gold); }
.sl-seg button:focus-visible { outline: none; }
.sl-seg:has(button:focus-visible) .sl-thumb { box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--void); }
.sl-seg.is-dragging { cursor: grabbing; }
.sl-seg.sl-compact button { min-height: 36px; padding: 0 2px; grid-auto-flow: column; gap: 8px; }
.sl-seg.sl-compact .sl-thumb::after { display: none; }

/* --- stepped slider: labelled stops on a rail; a hidden native range does keys and dragging (credits) --- */
.sl-step { --n: 5; --p: 0.25; display: grid; gap: 2px; }
.sl-track { position: relative; height: 30px; container-type: inline-size; }
.sl-rail { position: absolute; top: 14px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--line-2); }
.sl-rail > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(var(--p)); transform-origin: 0 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); transition: transform var(--t-panel) var(--ease-panel); }
.sl-dots { position: absolute; inset: -4px -5px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.sl-dots i { width: 9px; height: 9px; border: 1px solid var(--line-2); background: var(--void); transform: rotate(45deg); transition: background var(--t-panel), border-color var(--t-panel); }
.sl-dots i.on { background: var(--gold); border-color: var(--gold); }
.sl-dots i.custom { border-style: dashed; }
.sl-input { position: absolute; top: 0; left: calc(50% / var(--n) - 11px); width: calc(100% - 100% / var(--n) + 22px); height: 30px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sl-input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 30px; }
.sl-input::-moz-range-thumb { width: 22px; height: 30px; border: 0; }
.sl-knob { position: absolute; top: 5px; left: calc(50% / var(--n)); width: 20px; height: 20px; margin-left: -10px; transform: translateX(calc(var(--p) * (100cqw - 100cqw / var(--n)))); pointer-events: none; transition: transform var(--t-panel) var(--ease-panel); }
.sl-knob::before { content: ""; position: absolute; inset: 3px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 5px var(--gold-tint), 0 0 18px var(--gold-glow); transition: box-shadow var(--t-quick); }
.sl-input:focus-visible ~ .sl-knob::before { box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--gold), 0 0 18px var(--gold-glow); }
.sl-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sl-stops button { width: 100%; display: grid; justify-items: center; gap: 5px; padding: 6px 2px 2px; border: 0; background: none; color: var(--fg-3); text-align: center; cursor: pointer; }
.sl-stops b { font: 600 12px/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; }
.sl-stops span { font: 600 14px/1 var(--f-label); letter-spacing: 0.04em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sl-stops button:hover { color: var(--fg); }
.sl-stops button[aria-current="true"] { color: var(--gold); }
.sl-stops button[aria-current="true"] span { color: var(--fg); }
.sl-stops button:focus-visible { outline: none; box-shadow: inset 0 -1px 0 var(--gold); }

/* --- number pop-out: the Custom amount --------------------------------------- */
.popout { --cut: 10px; position: relative; display: grid; gap: 8px; padding: var(--s3) var(--s4); background: var(--layer-3); box-shadow: inset 0 0 0 1px var(--gold), 0 18px 40px -16px oklch(0 0 0 / 0.7); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); animation: rise var(--t-panel) var(--ease-panel) both; }
.popout .fair { font-size: 13px; }
.stepper { --cut: 6px; display: inline-grid; grid-template-columns: 34px minmax(0, 110px) 34px; height: var(--h-md); box-shadow: inset 0 0 0 1px var(--line-2); background: oklch(0.10 0.022 262 / 0.7); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.stepper button { border: 0; background: none; color: var(--fg-2); font: 600 18px/1 var(--f-label); cursor: pointer; }
.stepper button:hover { color: var(--fg); background: var(--gold-tint); }
.stepper input { width: 100%; min-width: 0; border: 0; background: none; color: var(--fg); text-align: center; font: 600 19px/1 var(--f-label); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }
.stepper:focus-within { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--gold-tint); }

/* --- tooltip: one element, placed by script over whatever is hovered or focused --- */
.tip { position: absolute; z-index: 30; left: var(--x, 0); top: var(--y, 0); transform: translate(-50%, calc(-100% - 10px)); width: max-content; max-width: 240px; padding: 7px 10px; background: var(--layer-solid); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px -10px oklch(0 0 0 / 0.7); font: 500 12.5px/1.35 var(--f-body); color: var(--fg-2); pointer-events: none; opacity: 0; transition: opacity var(--t-quick); }
.tip b { display: block; color: var(--fg); font-weight: 600; }
.tip.on { opacity: 1; }
.tip.below { transform: translate(-50%, 10px); }
.tip.below::after { top: -4px; bottom: auto; box-shadow: -1px -1px 0 var(--line-2); }
.tip::after { content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); bottom: -4px; width: 7px; height: 7px; margin-left: -4px; background: var(--layer-solid); box-shadow: 1px 1px 0 var(--line-2); transform: rotate(45deg); }

/* --- recommendation symbols: the real picks --------------------------------- */
.rec { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); font: 600 11.5px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.rec .ico { width: 14px; height: 14px; color: var(--gold); stroke-width: 1.7; }
.rec-free .ico { color: var(--good); }
.rec-best { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.rec-icon { width: 26px; padding: 0; justify-content: center; }

/* --- rating marks: cost, result, time; fewer is better ------------------------- */
.marks { display: grid; gap: 5px; }
.mk { display: grid; grid-template-columns: 50px auto minmax(0, 1fr); align-items: center; gap: 8px; font: 600 11px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.mk .d { display: inline-flex; gap: 5px; padding: 0 2px; }
.mk .d i { width: 7px; height: 7px; border: 1px solid var(--fg-3); transform: rotate(45deg); }
.mk .d i.on { background: var(--gold); border-color: var(--gold); }
.mk em { font: 500 12px/1.2 var(--f-body); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk.none .d i { border-style: dashed; opacity: 0.55; }
.mk.none em { color: var(--fg-3); }

/* --- expandable table rows ------------------------------------------------------- */
.xtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.xtable th { text-align: left; font: 600 11px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); padding: 0 12px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.xtable th.n, .xtable td.n { text-align: right; }
.xtable td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.xtable td.n { font: 600 14px/1 var(--f-label); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.xrow { cursor: pointer; transition: background var(--t-quick); }
.xrow:hover { background: oklch(0.85 0.09 85 / 0.06); }
.xrow:focus-visible { outline: none; background: var(--gold-tint); }
.xrow:focus-visible > td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.xrow .chev { width: 16px; height: 16px; color: var(--fg-3); transition: transform var(--t-panel) var(--ease-panel); }
.xrow[aria-expanded="true"] { background: var(--gold-tint); }
.xrow[aria-expanded="true"] > td { border-bottom-color: transparent; }
.xrow[aria-expanded="true"] > td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.xrow[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--gold); }
.xrow .peek { opacity: 0; transition: opacity var(--t-quick); }
.xrow:hover .peek, .xrow:focus-within .peek, .xrow[aria-expanded="true"] .peek { opacity: 1; }
.xdetail > td { padding: 0 12px 16px; background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold); }
.xd { display: grid; gap: var(--s3); padding-top: 2px; animation: rise var(--t-panel) var(--ease-panel) both; }

/* --- pagination ---------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager .pg { --cut: 5px; min-width: 32px; height: 32px; padding: 0 9px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); font: 600 13px/1 var(--f-label); letter-spacing: 0.08em; cursor: pointer; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); font-variant-numeric: tabular-nums; }
.pager .pg:hover { color: var(--fg); background: var(--gold-tint); }
.pager .pg[aria-current="page"] { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.pager .pg:disabled { opacity: 0.35; cursor: default; background: transparent; }
.pager .pg:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.pager .of { margin-left: auto; font-size: 12.5px; color: var(--fg-3); }

/* --- element picker overlay (inspector) and pin markers ------------------------------ */
.pk-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pk-box, .pk-sel { position: absolute; left: 0; top: 0; transform: translate(var(--x), var(--y)); width: var(--w); height: var(--h); }
.pk-box { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 1px var(--void); background: oklch(0.85 0.09 85 / 0.12); transition: transform 140ms var(--ease-panel), width 140ms var(--ease-panel), height 140ms var(--ease-panel); }
.pk-sel { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 1px var(--void), 0 0 0 4px oklch(0.85 0.09 85 / 0.25); background: oklch(0.85 0.09 85 / 0.08); }
.pk-sel .pk-n { position: absolute; right: -1px; top: -1px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--gold); color: var(--on-gold); font: 700 11px/18px var(--f-label); text-align: center; }
.pk-label { position: absolute; left: var(--x); top: var(--y); transform: translateY(calc(-100% - 4px)); display: inline-flex; gap: 8px; padding: 5px 8px; background: var(--void); box-shadow: inset 0 0 0 1px var(--gold); color: var(--fg); font: 500 11.5px/1 var(--f-mono); white-space: nowrap; }
.pk-label.below { transform: translateY(4px); }
.pk-label b { color: var(--gold); font-weight: 500; }
.pk-label span { color: var(--fg-3); }
.pin { position: absolute; left: var(--x); top: var(--y); z-index: 5; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; background: var(--gold); color: var(--on-gold); font: 700 12px/1 var(--f-label); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--void), 0 6px 14px -4px oklch(0 0 0 / 0.6); cursor: grab; touch-action: none; animation: gm-pin-drop 520ms linear both; }
.pin > span { transform: rotate(-45deg); }
.pin:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--gold); }
.pin.is-drag { cursor: grabbing; transform: rotate(45deg) scale(1.18); animation: none; }
.pin.done { background: var(--good); }
.pin.missing { background: var(--void); color: var(--warn); box-shadow: inset 0 0 0 2px var(--warn), 0 0 0 2px var(--void); }
.pin.flash { animation: pin-flash 1s var(--ease-panel) 2; }
@keyframes pin-in { from { transform: rotate(45deg) scale(0.4); opacity: 0; } }
@keyframes pin-flash { 40% { box-shadow: 0 0 0 2px var(--void), 0 0 0 12px var(--gold-glow); } }

/* --- the request field: obviously where to type --------------------------------------- */
.caret { display: inline-block; flex: none; width: 2px; height: 1.15em; margin-right: 10px; vertical-align: -0.2em; background: var(--gold); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
mark.blankmark { color: transparent; background: oklch(0.85 0.09 85 / 0.16); box-shadow: inset 0 -2px 0 var(--gold); }

/* --- question card: the builder asks once, waits, then uses its own pick ------------------- */
.qcard { --cut: 12px; display: grid; gap: var(--s3); padding: var(--s4) var(--s5); background: oklch(0.16 0.03 262 / 0.9); box-shadow: inset 0 0 0 1px var(--line-2), inset 3px 0 0 var(--gold); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); backdrop-filter: blur(14px); animation: rise var(--t-panel) var(--ease-panel) both; }
.qcard .q { font: 400 21px/1.25 var(--f-display); letter-spacing: 0.02em; }
.qcard .opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.countdown { display: grid; gap: 6px; }
.countdown .track { height: 3px; background: var(--line); }
.countdown .track i { display: block; height: 100%; width: var(--v, 100%); background: var(--fg-2); transition: width 1s linear; }

/* --- quiet safety: the scan strip and the guarantees ---------------------------------------- */
.scan { --cut: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s3); padding: 10px var(--s4); background: var(--good-tint); box-shadow: inset 0 0 0 1px oklch(0.80 0.12 165 / 0.3); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); font-size: 13.5px; color: var(--fg-2); }
.scan > .ico { color: var(--good); }
.scan b { color: var(--fg); font-weight: 600; }
.scan.flag { background: oklch(0.83 0.12 75 / 0.12); box-shadow: inset 0 0 0 1px oklch(0.83 0.12 75 / 0.4); }
.scan.flag > .ico { color: var(--warn); }
.guarantees { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--s4); font-size: 12.5px; color: var(--fg-3); }
.guarantees li { display: inline-flex; align-items: center; gap: 6px; }
.guarantees .ico { width: 14px; height: 14px; color: var(--fg-3); }

/* --- small additions to chips and badges: icons, calmer states ------------------------------- */
.chip .ico { width: 15px; height: 15px; color: var(--fg-3); transition: color var(--t-quick); }
.chip:hover .ico, .chip[aria-pressed="true"] .ico { color: var(--gold); }
.badge { gap: 5px; }
.badge .ico { width: 12px; height: 12px; stroke-width: 1.8; }
.badge .dot { width: 6px; height: 6px; background: var(--warn); transform: rotate(45deg); }
.badge-calm { background: oklch(0.12 0.024 262 / 0.78); color: var(--fg-2); }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* =============================================================================
   Studio shell · views/studio/_top.ejs and _bottom.ejs
   The document scrolls; the rail and the top bar stick. The phone layout is a viewport query because the
   bottom bar is fixed and sits outside the .app container.
   ============================================================================= */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.strong { font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.pad { padding: var(--s4) var(--s5); }
.pad-x { padding: 0 var(--s5) var(--s4); }
.flip .ico { transform: scaleX(-1); }
.tight { gap: 6px; }
code { font: 400 0.92em var(--f-mono); color: var(--gold); }
.skip { position: absolute; left: var(--s3); top: var(--s3); z-index: 100; padding: 10px 14px; background: var(--gold); color: var(--on-gold); font: 600 13px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; translate: 0 -200%; }
.skip:focus { translate: 0 0; }

.app { position: relative; z-index: 1; container: app / inline-size; min-height: 100vh; min-height: 100dvh; }
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rail { position: sticky; top: var(--nav-h, 0px); z-index: 30; display: flex; flex-direction: column; align-items: center; height: calc(100vh - var(--nav-h, 0px)); height: calc(100dvh - var(--nav-h, 0px)); overflow-y: auto; scrollbar-width: none; view-transition-name: gm-rail; }
.rail .sp { flex: 1; }
.rail-mark { writing-mode: vertical-rl; font-size: 15px; letter-spacing: 0.42em; margin: var(--s2) 0 var(--s4); gap: 12px; }
.rtab[aria-disabled="true"] { opacity: 0.36; cursor: default; }
.rtab[aria-disabled="true"]:hover { color: var(--fg-3); }
.rtab .rt-sub { display: block; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
/* The current tab's diamond is a real element so it can glide between pages (view transitions). */
.rtab[aria-current="page"]::before { display: none; }
.rtab .rt-dia { position: absolute; left: -6px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: var(--gold); transform: rotate(45deg); }
.rail .rtab .rt-dia { view-transition-name: gm-rail-dia; }
.rtab .rt-live { position: absolute; right: 18px; top: 8px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); animation: gm-live 1.8s var(--ease-soft) infinite; }
@keyframes gm-live { 50% { opacity: 0.25; } }

.main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.top { position: sticky; top: var(--nav-h, 0px); z-index: 20; display: flex; align-items: center; gap: var(--s3); height: 64px; padding: 0 var(--s6); min-width: 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, oklch(0.12 0.024 262 / 0.9), oklch(0.12 0.024 262 / 0.66)); backdrop-filter: blur(14px) saturate(1.1); view-transition-name: gm-top; }
.top-mark { display: none; }
.top-title { display: grid; gap: 4px; min-width: 0; }
.top-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credit-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1 var(--f-label); letter-spacing: 0.08em; color: var(--fg-2); white-space: nowrap; text-decoration: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background var(--t-quick); }
a.credit-pill:hover { background: var(--gold-tint); color: var(--fg); }
.credit-pill b { color: var(--fg); font-size: 15px; font-variant-numeric: tabular-nums; }
/* clip, not hidden: the entrance slide must not widen phone pages, and sticky children keep working. */
.gm-main { display: block; min-width: 0; padding-bottom: var(--s6); overflow-x: clip; }
.gm-main:focus { outline: none; }
.gm-page { display: grid; gap: var(--s4); align-content: start; padding: var(--s5) var(--s6) var(--s6); grid-template-columns: minmax(0, 1fr); }
.gm-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s4); align-items: start; }

/* the account menu: a disclosure, so it opens without script */
.umenu { position: relative; }
.umenu > summary { --cut: 6px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 6px; list-style: none; cursor: pointer; color: var(--fg-2); font: 600 13px/1 var(--f-label); letter-spacing: 0.08em; box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-quick), color var(--t-quick); }
.umenu > summary::-webkit-details-marker { display: none; }
.umenu > summary:hover, .umenu[open] > summary { background: var(--gold-tint); color: var(--fg); }
.umenu > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.umenu .av { display: grid; place-items: center; width: 24px; height: 24px; background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); font: 400 13px/1 var(--f-display); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.umenu .uname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu .chev { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--t-base) var(--ease-panel); }
.umenu[open] .chev { transform: rotate(-90deg); }
.umenu-list { --cut: 10px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; min-width: 210px; padding: 6px; background: var(--layer-solid); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -18px oklch(0 0 0 / 0.8); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); animation: gm-in-up var(--t-base) var(--ease-panel) backwards; }
.umenu-list a, .umenu-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--fg-2); font: 500 14px/1 var(--f-body); text-align: left; text-decoration: none; cursor: pointer; }
.umenu-list a:hover, .umenu-list button:hover, .umenu-list a:focus-visible, .umenu-list button:focus-visible { outline: none; background: var(--gold-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--gold); }
.umenu-list .ico { width: 16px; height: 16px; color: var(--fg-3); }
.umenu-list hr { height: 1px; margin: 4px 6px; border: 0; background: var(--line); }
.umenu-list form { margin: 0; }
.umenu-who { padding: 8px 12px 10px; font-size: 12.5px; color: var(--fg-3); }
.umenu-who b { display: block; color: var(--fg); font-weight: 600; font-size: 14px; }

.bottombar { display: none; }
.backdrop { view-transition-name: gm-backdrop; }
.backdrop picture { display: contents; }

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: oklch(0.10 0.024 262 / 0.9); backdrop-filter: blur(12px); view-transition-name: gm-bottombar; }
  .bottombar .rtab { width: auto; min-height: 58px; padding: 9px 0; gap: 6px; font-size: 10.5px; }
  .bottombar .rtab .ico { width: 20px; height: 20px; }
  .bottombar .rtab .rt-dia { left: 50%; top: 3px; margin: 0 0 0 -3px; width: 6px; height: 6px; view-transition-name: gm-bar-dia; }
  .bottombar .rtab .rt-live { right: calc(50% - 18px); top: 6px; }
  .main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  /* On a phone the site header and the bottom bar carry the navigation: the title row stays for screen readers. */
  .top { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .top-mark { display: inline-flex; font-size: 16px; letter-spacing: 0.28em; }
  .top-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hide-sm { display: none !important; }
  .gm-page { padding: var(--s3); gap: var(--s3); }
  .gm-grid-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .umenu .uname { display: none; }
  .umenu > summary { padding: 0 6px; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* --- the command palette (studio-palette.js): a modal dialog in the kit's palette style --------------- */
dialog.gm-pal { width: min(620px, calc(100% - 24px)); max-width: none; max-height: none; margin: 12vh auto auto; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: visible; }
dialog.gm-pal::backdrop { background: var(--scrim); backdrop-filter: blur(6px); animation: fade var(--t-base) var(--ease-soft) both; }
dialog.gm-pal[open] .palette { animation: gm-pal-in var(--t-base) var(--ease-panel) both; }
@keyframes gm-pal-in { from { opacity: 0; translate: 0 -10px; scale: 0.985; } }
.palette .pal-in { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.palette .pal-in .ico { position: absolute; left: var(--s5); color: var(--gold); pointer-events: none; }
.palette .pal-in input { border: 0; padding-left: calc(var(--s5) + 30px); }
.palette .pal-in .kbd { position: absolute; right: var(--s4); }
.palette ul { margin: 0; }
.palette li { position: relative; grid-template-columns: 96px minmax(0, 1fr) auto; }
.palette li .g { font: 600 11px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.palette li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette li small { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.palette li[aria-selected="true"] .g { color: var(--gold); }
.palette li.none { display: block; padding: var(--s4); cursor: default; color: var(--fg-3); }
.palette .pal-sec { padding: 10px var(--s3) 4px; font: 600 11px/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); cursor: default; min-height: 0; display: block; }
.palette .foot .kbd { margin-right: 2px; }
@media (max-width: 760px) {
  dialog.gm-pal { margin-top: 8vh; }
  .palette li { grid-template-columns: 70px minmax(0, 1fr); }
  .palette li small { display: none; }
  .palette .foot { display: none; }
}

/* =============================================================================
   Motion system · tokens are in :root. Transform and opacity only (plus the individual translate,
   scale and rotate properties, which compose with an element's own transform so rotated diamonds
   keep their angle). Entrances use a backwards fill, so nothing stays locked after it has played.
   ============================================================================= */
@keyframes gm-in-right { from { opacity: 0; translate: var(--slide) 0; } }
@keyframes gm-in-left { from { opacity: 0; translate: calc(var(--slide) * -1) 0; } }
@keyframes gm-in-up { from { opacity: 0; translate: 0 16px; } }
@keyframes gm-in-fade { from { opacity: 0; } }
@keyframes gm-out-left { to { opacity: 0; translate: calc(var(--slide) * -0.5) 0; } }

/* screen entrance: the main's children, and anything marked .gm-enter, slide in from the edge in turn */
.gm-main > *, .gm-enter > * { animation: gm-in-right var(--t-panel) var(--ease-panel) backwards; animation-delay: calc(var(--gm-i, 0) * var(--stagger)); }
.gm-main > :nth-child(2), .gm-enter > :nth-child(2) { --gm-i: 1; }
.gm-main > :nth-child(3), .gm-enter > :nth-child(3) { --gm-i: 2; }
.gm-main > :nth-child(4), .gm-enter > :nth-child(4) { --gm-i: 3; }
.gm-main > :nth-child(5), .gm-enter > :nth-child(5) { --gm-i: 4; }
.gm-main > :nth-child(6), .gm-enter > :nth-child(6) { --gm-i: 5; }
.gm-main > :nth-child(7), .gm-enter > :nth-child(7) { --gm-i: 6; }
.gm-main > :nth-child(8), .gm-enter > :nth-child(8) { --gm-i: 7; }
.gm-main > :nth-child(9), .gm-enter > :nth-child(9) { --gm-i: 8; }
.gm-main > :nth-child(n+10), .gm-enter > :nth-child(n+10) { --gm-i: 9; }
.gm-enter[data-from="left"] > * { animation-name: gm-in-left; }
.gm-enter[data-from="up"] > * { animation-name: gm-in-up; }
.gm-enter[data-from="fade"] > * { animation-name: gm-in-fade; }
.gm-main.gm-still > *, .gm-enter.gm-still > * { animation: none; }
.gm-rise { animation: gm-in-up var(--t-panel) var(--ease-panel) backwards; }
.gm-leave { animation: gm-out-left 200ms var(--ease-in) both; pointer-events: none; }

/* buttons and cards: a small press and lift (flat, no 3D) */
.btn, .chip, .seg-mini button, .pager .pg { transition: background var(--t-quick) var(--ease-soft), color var(--t-quick) var(--ease-soft), box-shadow var(--t-quick) var(--ease-soft), scale 120ms var(--ease-soft); }
.btn:active:not([disabled]):not([aria-disabled="true"]), .chip:active, .pager .pg:active:not(:disabled) { scale: 0.97; }
a.card, button.card { transition: background var(--t-quick), box-shadow var(--t-quick), translate var(--t-panel) var(--ease-panel); }
a.card:hover, button.card:hover { translate: 0 -2px; }

/* selection: a gold light sweeps across once. CSS-only form uses ::after; GM.sweep(el) adds a child instead */
.gm-sweep { isolation: isolate; overflow: hidden; }
.gm-sweep::after, .gm-ray { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 28%, oklch(0.92 0.08 85 / 0.10) 42%, oklch(0.92 0.08 85 / 0.32) 50%, oklch(0.92 0.08 85 / 0.10) 58%, transparent 72%); translate: -110% 0; animation: gm-sweep 820ms var(--ease-soft) both; }
@keyframes gm-sweep { to { translate: 110% 0; } }

/* the diamond marker that glides to the selected item (GM.marker), and the sliding tab ink (GM.tabs) */
.gm-marker { position: absolute; left: 0; top: 0; z-index: 3; width: 7px; height: 7px; margin: -4px 0 0 -4px; background: var(--gold); pointer-events: none; transform: translate(var(--mx, 0), var(--my, 0)) rotate(45deg); transition: transform var(--t-base) var(--ease-panel), opacity var(--t-quick); }
.gm-marker.is-off { opacity: 0; }
.tabs.gm-has-ink { position: relative; }
.tabs.gm-has-ink .tab[aria-selected="true"]::after, .tabs.gm-has-ink .tab[aria-selected="true"]::before { display: none; }
.gm-ink { position: absolute; left: 0; bottom: 0; z-index: 2; width: 1px; height: 1px; background: var(--gold); pointer-events: none; transform-origin: 0 0; transform: translateX(var(--ix, 0)) scaleX(var(--iw, 0)); transition: transform var(--t-base) var(--ease-panel); }
.gm-ink-dia { position: absolute; left: 0; bottom: -3px; z-index: 2; width: 7px; height: 7px; margin-left: -4px; background: var(--gold); pointer-events: none; transform: translateX(var(--ic, 0)) rotate(45deg); transition: transform var(--t-base) var(--ease-panel); }
.tabs.gm-has-ink { overflow-y: hidden; padding-bottom: 4px; margin-bottom: -4px; }

/* carousels: stacked slides crossfade; banner art drifts and follows the pointer */
.gm-xfade { display: grid; }
.gm-xfade > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--t-fade) var(--ease-soft), visibility 0s linear var(--t-fade); }
.gm-xfade > .on { opacity: 1; visibility: visible; transition: opacity var(--t-fade) var(--ease-soft), visibility 0s; }
.gm-parallax .art, .gm-parallax [data-depth] { translate: calc(var(--mx, 0) * var(--depth, 14px)) calc(var(--my, 0) * var(--depth, 14px)); transition: translate 700ms var(--ease-panel); }

/* reveal on scroll ([data-reveal], watched by controls.js): .gm-wait before, .is-in when it scrolls in */
.gm-wait[data-reveal="rise"] { opacity: 0; }
.is-in[data-reveal="rise"] { animation: gm-in-up var(--t-panel) var(--ease-panel) backwards; }
.gm-wait.gm-bars > *, .gm-wait .gm-bars > * { scale: 1 0; }
.gm-bars > * { transform-origin: 50% 100%; }
.is-in.gm-bars > *, .is-in .gm-bars > * { animation: gm-grow-y 640ms var(--ease-panel) backwards; animation-delay: calc(var(--gm-i, 0) * 24ms); }
@keyframes gm-grow-y { from { scale: 1 0; } }
.gm-wait .gm-draw [pathLength], .gm-wait.gm-draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .gm-draw [pathLength], .is-in.gm-draw [pathLength] { stroke-dasharray: 1; animation: gm-draw 1000ms var(--ease-soft) backwards; }
@keyframes gm-draw { from { stroke-dashoffset: 1; } }
.gm-wait .gm-fade-in, .gm-wait.gm-fade-in { opacity: 0; }
.is-in .gm-fade-in, .is-in.gm-fade-in { animation: gm-in-fade 600ms var(--ease-soft) 300ms backwards; }

/* gauges that fill by transform: set --v to a number from 0 to 1 */
.gauge.gm-fill .track i { width: 100%; transform: scaleX(var(--v, 0)); transform-origin: 0 50%; transition: transform 700ms var(--ease-panel); }
.statbar.gm-fill .track i { width: 100%; transform: scaleX(var(--v, 0)); transform-origin: 0 50%; transition: transform var(--t-panel) var(--ease-panel); }

/* pins drop in with a small settle */
@keyframes gm-pin-drop {
  0% { opacity: 0; translate: 0 -18px; scale: 0.6; animation-timing-function: var(--ease-in); }
  55% { opacity: 1; translate: 0 2px; scale: 1.08; animation-timing-function: var(--ease-soft); }
  78% { translate: 0 -1px; scale: 0.98; }
  100% { translate: 0 0; scale: 1; }
}

/* forge: stages ignite, embers rise, the beam and the crystal, and a calm fade for a failed run */
.gm-ignite { position: relative; animation: gm-ignite 620ms var(--ease-spring) both; }
.gm-ignite::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, var(--gold-glow), transparent); pointer-events: none; animation: gm-flare 900ms var(--ease-soft) both; }
@keyframes gm-ignite { 0% { scale: 0.6; opacity: 0.4; } 60% { scale: 1.25; opacity: 1; } 100% { scale: 1; } }
@keyframes gm-flare { 0% { opacity: 0; scale: 0.4; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.9; } }
.gm-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.gm-embers i { position: absolute; bottom: -8px; left: var(--x, 50%); width: var(--s, 3px); height: var(--s, 3px); background: var(--gold-hot); box-shadow: 0 0 6px 1px var(--gold-glow); opacity: 0; transform: rotate(45deg); animation: gm-ember var(--d, 4s) linear var(--delay, 0s) infinite; will-change: translate, opacity; }
@keyframes gm-ember { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 0.9; } 70% { opacity: 0.55; } 100% { opacity: 0; translate: var(--dx, 12px) var(--rise, -300px); } }
.gm-beam { position: absolute; left: 50%; top: 0; bottom: 0; width: min(46%, 420px); translate: -50% 0; pointer-events: none; background: linear-gradient(180deg, oklch(0.96 0.06 85 / 0.55), oklch(0.90 0.08 85 / 0.12) 70%, transparent); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: gm-beam 1100ms var(--ease-panel) both; }
@keyframes gm-beam { from { opacity: 0; scale: 0.4 0; } 40% { opacity: 1; } }
.gm-crystal { animation: gm-crystal 900ms var(--ease-spring) 380ms both; }
@keyframes gm-crystal { from { opacity: 0; translate: 0 26px; scale: 0.86; } }
.gm-calm { animation: gm-in-fade 900ms var(--ease-soft) both; }

/* a chip flying into the change box (GM.fly makes a fixed clone; this is its layer) */
.gm-fly { position: fixed; left: 0; top: 0; z-index: 95; margin: 0; pointer-events: none; will-change: transform, opacity; }

/* count-up numbers keep their width while they change */
[data-count] { font-variant-numeric: tabular-nums; }

/* toasts made by GM.toast() stack at the foot */
.toast[data-gm] { transition: opacity var(--t-base), translate var(--t-base) var(--ease-panel); }
.toast[data-gm].is-out { opacity: 0; translate: 0 10px; }

/* between pages: the content crossfades, the rail, top bar and backdrop stay, the rail's diamond glides */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 220ms; }
::view-transition-group(gm-rail-dia), ::view-transition-group(gm-bar-dia) { animation-duration: var(--t-panel); animation-timing-function: var(--ease-panel); }
::view-transition-group(gm-backdrop) { animation-duration: var(--t-fade); }
::view-transition-old(gm-rail), ::view-transition-new(gm-rail), ::view-transition-old(gm-top), ::view-transition-new(gm-top), ::view-transition-old(gm-bottombar), ::view-transition-new(gm-bottombar) { animation: none; }
::view-transition-old(gm-rail), ::view-transition-old(gm-top), ::view-transition-old(gm-bottombar) { display: none; }

/* low-end devices and Save-Data (html.gm-lite, set by controls.js): keep the look, drop the costly parts */
.gm-lite .panel, .gm-lite .top, .gm-lite .rail, .gm-lite .bottombar, .gm-lite .qcard { backdrop-filter: none; }
.gm-lite .panel { background: var(--layer-solid); }
.gm-lite .drift, .gm-lite .gm-embers, .gm-lite .rtab .rt-live { animation: none; }
.gm-lite .gm-embers { display: none; }
.gm-lite .gm-parallax .art, .gm-lite .gm-parallax [data-depth] { translate: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .gm-main > *, .gm-enter > *, .gm-rise, .is-in[data-reveal="rise"], .is-in .gm-fade-in, .is-in.gm-fade-in, .gm-calm, .gm-crystal { animation: gm-in-fade 140ms linear backwards !important; }
  .gm-wait[data-reveal="rise"], .gm-wait .gm-fade-in, .gm-wait.gm-fade-in { opacity: 1; }
  .gm-wait.gm-bars > *, .gm-wait .gm-bars > * { scale: none; }
  .gm-wait .gm-draw [pathLength], .gm-wait.gm-draw [pathLength] { stroke-dashoffset: 0; }
  .gm-embers, .gm-ray, .gm-sweep::after { display: none; }
  .gm-parallax .art, .gm-parallax [data-depth] { translate: none; }
  .rtab .rt-live { animation: none; }
  a.card:hover, button.card:hover { translate: none; }
}