/* Goltrik's web pages. Every colour, size, radius and duration is a variable from assets/tokens.css, which the build
   generates from packages/ui/src/tokens.ts (the plan's "tokens as data"): this file holds no colour literal, and the
   build fails if one appears. Chrome (the invitation, the landing, the store sheet) follows the light/dark roles; the
   round is the stage chrome, theme-invariant, on the midnight base. The look is the Neon Noir Prism guide
   (docs/design/neon-noir-prism): Plus Jakarta Sans, self-hosted (assets/fonts, OFL; no runtime fetch), glass surfaces with
   an indigo rim, the primary pill on the action gradient with a soft purple glow, the stage's Play on the play gradient. */

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/PlusJakartaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--t-body-size); line-height: var(--t-body-line);
  background: var(--c-canvas); color: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
}
body[data-screen="round"] { overflow: hidden; background: var(--s-bg); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.round :focus-visible { outline-color: var(--c-focus); }
.visually-hidden, .offscreen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.safe-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- buttons: the guide's pills ------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  min-height: var(--l-button-height); padding: 0 var(--sp-xxl); border: 0; border-radius: var(--r-capsule);
  font-size: var(--t-button-size); line-height: var(--t-button-line); font-weight: var(--t-button-weight);
  text-decoration: none; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--m-feedback) var(--ease-standard), background-color var(--m-feedback) var(--ease-standard), opacity var(--m-feedback) var(--ease-standard);
}
.btn:active { transform: scale(var(--m-pressed-scale)); }
.btn:disabled { opacity: var(--m-disabled-opacity); cursor: default; transform: none; box-shadow: none; }
.btn.wide { width: 100%; }
/* the Primary Button: the action gradient, a soft glow */
.btn.primary { background: linear-gradient(100deg, var(--g-action-0), var(--g-action-1), var(--g-action-2)); color: var(--c-on-action); box-shadow: 0 0 var(--glow-radius) var(--c-glow); }
.btn.primary:active { background: linear-gradient(100deg, var(--g-action-pressed-0), var(--g-action-pressed-1), var(--g-action-pressed-2)); }
/* the Secondary Button: a dark pill with the indigo rim */
.btn.secondary { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 var(--rim-width) var(--c-rim); }
.btn.secondary:active { background: var(--c-surface-sunken); }
/* over the stage: the Play Button gradient, and the quieter pill on the scrim */
.btn.stage-primary { background: linear-gradient(100deg, var(--g-play-0), var(--g-play-1), var(--g-play-2)); color: var(--s-on-accent); box-shadow: 0 0 var(--glow-radius) var(--s-glow); }
.btn.stage-primary:active { background: linear-gradient(100deg, var(--g-play-pressed-0), var(--g-play-pressed-1), var(--g-play-pressed-2)); }
.btn.stage-secondary { background: var(--s-scrim); color: var(--s-ink); box-shadow: inset 0 0 0 var(--rim-width) var(--s-sheet-hairline); padding: 0 var(--sp-md); font-size: var(--t-secondary-size); }
.link {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--l-hit-min); padding: 0 var(--sp-sm);
  background: none; border: 0; color: var(--c-action-text); font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.link.stage { color: var(--s-ink-dim); font-size: var(--t-secondary-size); }

/* ---- the invitation (and the not-found page) ------------------------------------------------------------------------- */
.invite {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: var(--l-phone-column-max); margin: 0 auto;
  padding: max(var(--sp-xs), env(safe-area-inset-top)) max(var(--l-gutter), env(safe-area-inset-right)) max(var(--sp-xl), env(safe-area-inset-bottom)) max(var(--l-gutter), env(safe-area-inset-left));
}
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: var(--l-header-height); }
.wordmark { font-size: var(--t-section-size); line-height: var(--t-section-line); font-weight: 800; letter-spacing: -0.01em; }
.invite-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-md); padding-top: var(--sp-sm); }
.avatar {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-avatar-0); color: var(--c-ink); font-size: var(--t-title-size); font-weight: 700;
  box-shadow: 0 0 var(--glow-radius) var(--c-glow);
}
.invite h1 { margin: 0; font-size: var(--t-title-size); line-height: var(--t-title-line); font-weight: var(--t-title-weight); }
.sub { margin: 0; color: var(--c-ink-secondary); }
.meta { margin: 0; font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); color: var(--c-ink-secondary); }
/* the Content Card: the poster in a glass frame with the rim and the top highlight; 3:4, the gameplay frame (2026-10-16), so the
   poster is shown whole: as wide as the column allows while it stays within 44 % of the viewport's height */
.poster-frame {
  position: relative; width: min(100%, calc(44vh * 3 / 4)); aspect-ratio: 3 / 4; flex: 0 0 auto; align-self: center; min-height: 180px;
  border-radius: var(--r-card-large); overflow: hidden; background: var(--s-bg); margin: var(--sp-xs) 0 var(--sp-sm);
  box-shadow: inset 0 0 0 var(--rim-width) var(--c-rim), inset 0 1px 0 var(--c-highlight), 0 6px 18px var(--c-scrim);
}
.poster-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; display: block; }
.missing .invite-body { justify-content: center; }

/* ---- the round: the stage ------------------------------------------------------------------------------------------- */
.round {
  position: fixed; inset: 0; background: var(--s-bg); color: var(--s-ink); overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.clip { position: absolute; overflow: hidden; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; background: transparent; }
.layer.off { visibility: hidden; }

.fist { position: absolute; z-index: 10; display: grid; place-items: center; touch-action: none; pointer-events: none; }
.fist.live { pointer-events: auto; cursor: pointer; }
/* the hold ring: ultraviolet, with its glow */
.ring { position: absolute; overflow: visible; pointer-events: none; transform: rotate(-90deg); opacity: 0; filter: drop-shadow(0 0 6px var(--s-glow)); }
.fist.show-ring .ring { opacity: 1; }
.ring .track { fill: none; stroke: var(--s-ring-track); stroke-width: 6; }
.ring .fill { fill: none; stroke: var(--s-accent); stroke-width: 6; }
.ring .fill.spring { transition: stroke-dashoffset 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ring .sel { fill: none; stroke: var(--s-accent); stroke-width: 3; stroke-dasharray: 7 6; opacity: 0; }
.ring .sel.on { opacity: 1; }
/* the still reveal (an answer with no reveal file, 2026-10-28): the fist with the marble ringed in the found colour, a wrong call
   in the missed colour, over the watch clip's last frame */
.fist.mark-truth .ring .fill { stroke: var(--s-found); }
.fist.mark-missed .ring .fill { stroke: var(--s-missed); }
.fist.mark-truth .ring .sel, .fist.mark-missed .ring .sel { opacity: 0; }
.ghost { width: 44px; height: 44px; border-radius: 50%; background: var(--s-ghost); opacity: 0; pointer-events: none; }
.fist.live.coach .ghost { animation: ghost 1.8s var(--ease-standard) infinite; }
@keyframes ghost {
  0% { transform: scale(0.6); opacity: 0; }
  25% { opacity: 1; }
  55% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

.prompt {
  position: absolute; z-index: 12; left: var(--sp-lg); right: var(--sp-lg); top: 20%; width: fit-content; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-xxs);
  padding: var(--sp-sm) var(--sp-xl); border-radius: var(--r-card-large);
  background: var(--s-scrim-strong); box-shadow: inset 0 0 0 var(--rim-width) var(--s-sheet-hairline); text-align: center; pointer-events: none; white-space: nowrap;
}
.p-title { font-size: var(--t-section-size); line-height: var(--t-section-line); font-weight: var(--t-section-weight); }
.p-sub { font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); color: var(--s-ink-dim); }
.prompt[data-kind="hint"] .p-sub { color: var(--s-accent); font-weight: 600; }
.prompt[data-kind="found"] .p-title { color: var(--s-found); }
.prompt[data-kind="missed"] .p-title { color: var(--s-missed); }
.prompt[data-kind="noCall"] .p-title { color: var(--s-ink-dim); white-space: normal; }

/* the countdown: the ring and its ticks in champagne gold */
.countdown {
  position: absolute; z-index: 12; right: var(--sp-md); top: var(--sp-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs);
  padding: var(--sp-sm); border-radius: var(--r-capsule); background: var(--s-scrim); pointer-events: none;
}
.cd-ring { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.cd-ring svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); overflow: visible; }
.cd-track { fill: none; stroke: var(--s-ring-track); stroke-width: 5; }
.cd-fill { fill: none; stroke: var(--s-clock); stroke-width: 5; stroke-dasharray: 160.22; }
.cd-num { font-size: var(--t-figure-size); line-height: var(--t-figure-line); font-weight: var(--t-figure-weight); font-variant-numeric: tabular-nums; }
.cd-ticks { display: flex; gap: 6px; }
.cd-ticks i { width: 8px; height: 8px; border-radius: 4px; background: var(--s-ring-track); }
.cd-ticks i.on { background: var(--s-clock); }

.stamp {
  position: absolute; z-index: 12; left: 50%; top: 64%;
  padding: var(--sp-xs) 14px; border: 3px solid currentColor; border-radius: var(--r-sm);
  font-size: var(--t-stamp-size); line-height: var(--t-stamp-line); font-weight: var(--t-stamp-weight); letter-spacing: var(--t-stamp-tracking);
  transform: translateX(-50%) rotate(-7deg); animation: stamp var(--m-success) var(--ease-standard) both; pointer-events: none;
}
.stamp[data-kind="found"] { color: var(--s-found); }
.stamp[data-kind="missed"] { color: var(--s-missed); }
.stamp[data-kind="noCall"] { color: var(--s-ink-dim); }
@keyframes stamp {
  0% { opacity: 0; transform: translateX(-50%) rotate(-7deg) scale(1.6); }
  25% { opacity: 1; }
  60% { transform: translateX(-50%) rotate(-7deg) scale(0.94); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-7deg) scale(1); }
}

.sides { position: absolute; z-index: 12; left: var(--sp-lg); right: var(--sp-lg); bottom: var(--sp-lg); display: flex; gap: var(--sp-md); }
.side {
  flex: 1; min-height: var(--l-button-height); border: 0; border-radius: var(--r-capsule);
  background: var(--s-scrim-strong); color: var(--s-ink); box-shadow: inset 0 0 0 var(--rim-width) var(--s-sheet-hairline);
  font-size: var(--t-button-size); font-weight: var(--t-button-weight); cursor: pointer; touch-action: manipulation;
}
.side[aria-pressed="true"] { color: var(--s-accent); box-shadow: inset 0 0 0 var(--rim-strong) var(--s-accent), 0 0 var(--glow-radius) var(--s-glow); }

.chip {
  position: absolute; z-index: 14; min-height: var(--l-hit-min); padding: 0 var(--sp-lg); border: 0; border-radius: var(--r-capsule);
  background: var(--s-scrim-strong); color: var(--s-ink); box-shadow: inset 0 0 0 var(--rim-width) var(--s-sheet-hairline); font-size: var(--t-secondary-size); font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.chip-top { left: var(--sp-md); top: var(--sp-md); }
.chip-bottom { left: 50%; bottom: var(--sp-xxl); transform: translateX(-50%); }

.spinner {
  position: absolute; z-index: 14; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 3px solid var(--s-ring-track); border-top-color: var(--s-accent); animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  position: absolute; z-index: 16; left: var(--sp-xl); right: var(--sp-xl); top: 34%;
  display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-xl); border-radius: var(--r-card);
  background: var(--s-sheet); box-shadow: inset 0 0 0 var(--rim-width) var(--s-sheet-hairline), 0 0 var(--glow-radius) var(--s-glow); text-align: center;
}
.n-title { margin: 0; font-size: var(--t-section-size); line-height: var(--t-section-line); font-weight: var(--t-section-weight); }
.n-body { margin: 0; color: var(--s-ink-dim); }
.n-actions { display: flex; gap: var(--sp-md); justify-content: center; margin-top: var(--sp-sm); }

/* ---- the result sheet, over the stage: the midnight glass with the indigo rim along its top ------------------------- */
.sheet {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: var(--l-phone-column-max); max-height: 78%;
  display: flex; flex-direction: column; gap: var(--sp-md); overflow-y: auto; touch-action: pan-y;
  padding: var(--sp-xxl) max(var(--l-gutter), env(safe-area-inset-right)) max(var(--sp-lg), env(safe-area-inset-bottom)) max(var(--l-gutter), env(safe-area-inset-left));
  background: var(--s-sheet); border-radius: var(--r-card-large) var(--r-card-large) 0 0; box-shadow: inset 0 var(--rim-strong) 0 var(--s-sheet-hairline), 0 -4px 28px var(--s-glow);
  animation: sheet-in var(--m-transition) var(--ease-enter) both;
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h2 { margin: 0; font-size: var(--t-title-size); line-height: var(--t-title-line); font-weight: var(--t-title-weight); }
.sheet[data-outcome="found"] h2 { color: var(--s-found); }
.sheet[data-outcome="missed"] h2 { color: var(--s-missed); }
.sheet p { margin: 0 0 var(--sp-xs); color: var(--s-ink-dim); }
.row { display: flex; gap: var(--sp-md); }
.row > * { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.row > #s-replay { flex-grow: 1.55; }
.row > .row-note { flex-grow: 1.55; margin: 0; align-self: center; white-space: normal; color: var(--s-ink-dim); font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); }
.links { display: flex; justify-content: center; gap: var(--sp-md); flex-wrap: wrap; }
.links > * { white-space: nowrap; }

/* ---- the store sheet, the badges, notify me ------------------------------------------------------------------------- */
.getapp { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: var(--c-scrim); }
.getapp-panel {
  width: 100%; max-width: var(--l-phone-column-max); display: flex; flex-direction: column; gap: var(--sp-md);
  padding: var(--sp-xl) max(var(--l-gutter), env(safe-area-inset-right)) max(var(--sp-xxl), env(safe-area-inset-bottom)) max(var(--l-gutter), env(safe-area-inset-left));
  background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-card-large) var(--r-card-large) 0 0;
  box-shadow: inset 0 var(--rim-strong) 0 var(--c-rim), 0 -4px 28px var(--c-glow);
  animation: sheet-in var(--m-transition) var(--ease-enter) both;
}
.getapp-head { display: flex; align-items: center; justify-content: space-between; }
.getapp-head h2 { margin: 0; font-size: var(--t-section-size); line-height: var(--t-section-line); font-weight: var(--t-section-weight); }
.stores { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-md); }
.badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 156px; min-height: 52px;
  padding: var(--sp-xs) var(--sp-lg); border: 0; border-radius: var(--r-md); background: var(--c-ink); color: var(--c-canvas);
  text-decoration: none; text-align: left; cursor: pointer; touch-action: manipulation;
}
.badge-small { font-size: 11px; line-height: 13px; }
.badge-big { font-size: 19px; line-height: 22px; font-weight: 600; }
.badge-soon { margin: 0; font-size: var(--t-meta-size); line-height: var(--t-meta-line); font-weight: var(--t-meta-weight); color: var(--c-ink-secondary); }
.notify { display: flex; flex-direction: column; gap: var(--sp-sm); width: 100%; text-align: left; }
.notify p { margin: 0; }
.notify-title { font-weight: 600; }
.notify-body, .notify-note { color: var(--c-ink-secondary); font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); }
.notify-row { display: flex; gap: var(--sp-sm); }
.notify-row input {
  flex: 1; min-width: 0; min-height: var(--l-button-height); padding: 0 var(--sp-lg); border-radius: var(--r-capsule);
  border: var(--rim-width) solid var(--c-rim); background: var(--c-surface-sunken); color: var(--c-ink); font: inherit; font-size: 16px;
}
.notify-row .btn { padding: 0 var(--sp-xl); }

/* ---- the landing ---------------------------------------------------------------------------------------------------- */
.landing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-xl); text-align: center;
  min-height: 100vh; min-height: 100dvh; max-width: var(--l-phone-column-max); margin: 0 auto;
  padding: max(var(--sp-xxl), env(safe-area-inset-top)) var(--l-gutter) max(var(--sp-xxl), env(safe-area-inset-bottom));
}
/* the wordmark: the guide's Display / Hero sample, the ink in Bold; a gradient text would be the guide document's own title, not a component, and its gold end read 1.46:1 on the light base */
.landing-name {
  margin: 0; font-size: calc(var(--t-title-size) * 1.75); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em;
  color: var(--c-ink); /* the guide's hero: the wordmark in the ink (white on midnight, the ink on the light base), no gradient text */
}
.landing-line { margin: 0; font-size: var(--t-section-size); line-height: var(--t-section-line); color: var(--c-ink-secondary); max-width: 26em; }
/* the home page's demo: the warm-up trick's watch clip on a loop, muted (ADR 023: one video, replaced by replacing the demo trick) */
.landing-demo { width: min(100%, calc(44vh * 3 / 4)); aspect-ratio: 3 / 4; border-radius: var(--r-card-large); background: var(--s-bg); object-fit: cover; }
.landing-foot { font-size: var(--t-meta-size); color: var(--c-ink-secondary); }
#stores { width: 100%; }

.toast {
  position: fixed; z-index: 60; left: 50%; top: max(var(--sp-lg), env(safe-area-inset-top)); transform: translate(-50%, -8px);
  max-width: calc(100% - 2 * var(--sp-lg)); padding: var(--sp-sm) var(--sp-lg); border-radius: var(--r-card);
  background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 var(--rim-width) var(--c-rim-strong), 0 0 var(--glow-radius) var(--c-glow);
  font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); font-weight: 600;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--m-transition) var(--ease-standard), transform var(--m-transition) var(--ease-standard);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.noscript { padding: var(--l-gutter); }

/* ---- the legal pages (docs/legal/*.md, built by build.mjs) and the footer that links them ------------------------------
   Reading first: the body type on the canvas, a comfortable measure, no glass and no glow; the draft banner is the one
   framed thing, in the gold rim, until build.mjs's LEGAL_REVIEWED flips. */
.legal {
  max-width: 42rem; margin: 0 auto;
  padding: max(var(--sp-xs), env(safe-area-inset-top)) max(var(--l-gutter), env(safe-area-inset-right)) max(var(--sp-xxl), env(safe-area-inset-bottom)) max(var(--l-gutter), env(safe-area-inset-left));
}
.legal .wordmark { color: var(--c-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--l-hit-min); }
.draft-banner {
  margin: var(--sp-xs) 0 var(--sp-lg); padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-card);
  background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 var(--rim-strong) var(--c-rim-gold);
  font-size: var(--t-secondary-size); line-height: var(--t-secondary-line);
}
.draft-banner p { margin: 0; }
.draft-banner strong { color: var(--c-gold-text); font-weight: 800; }
.legal-doc { overflow-wrap: break-word; }
.legal-doc h1 { margin: var(--sp-sm) 0 var(--sp-lg); font-size: var(--t-title-size); line-height: var(--t-title-line); font-weight: var(--t-title-weight); }
.legal-doc h2 { margin: var(--sp-xxxl) 0 var(--sp-sm); font-size: var(--t-section-size); line-height: var(--t-section-line); font-weight: var(--t-section-weight); scroll-margin-top: var(--sp-lg); }
.legal-doc h3 { margin: var(--sp-xxl) 0 var(--sp-xs); font-size: var(--t-body-size); line-height: var(--t-body-line); font-weight: 700; scroll-margin-top: var(--sp-lg); }
.legal-doc p { margin: 0 0 var(--sp-md); }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--sp-md); padding-left: var(--sp-xl); }
.legal-doc li { margin: 0 0 var(--sp-xs); }
.legal-doc a { color: var(--c-action-text); text-underline-offset: 2px; }
.legal-doc strong { font-weight: 700; }
.legal-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; padding: 0 var(--sp-xxs); border-radius: var(--r-sm); background: var(--c-surface-sunken); }
.legal-doc blockquote { margin: 0 0 var(--sp-md); padding: var(--sp-xs) var(--sp-lg); border-left: var(--rim-strong) solid var(--c-rim); color: var(--c-ink-secondary); }
.legal-doc hr { border: 0; border-top: 1px solid var(--c-hairline); margin: var(--sp-xxl) 0; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--sp-lg); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0; border-bottom: 1px solid var(--c-hairline); }
.legal-doc th { font-weight: 700; }
.legal-doc mark.ph { background: var(--c-selection); color: var(--c-on-selection); border-radius: var(--r-sm); padding: 0 var(--sp-xxs); }
.legal-toc { margin: 0 0 var(--sp-xl); padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-card); background: var(--c-surface-sunken); font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); }
.legal-toc p { margin: 0 0 var(--sp-xs); font-weight: 700; }
.legal-toc ul { margin: 0; padding: 0; list-style: none; }
.legal-toc li { margin: 0; }
.legal-toc a { display: block; padding: var(--sp-xs) 0; color: var(--c-action-text); }
.reviewer-notes { margin-top: var(--sp-huge); padding: var(--sp-xxs) var(--sp-lg) var(--sp-sm); border-radius: var(--r-card); background: var(--c-surface-sunken); font-size: var(--t-secondary-size); line-height: var(--t-secondary-line); }
.reviewer-notes h2 { margin-top: var(--sp-lg); }
.legal-foot { margin-top: var(--sp-xxxl); padding-top: var(--sp-sm); border-top: 1px solid var(--c-hairline); }
.invite .legal-foot { margin-top: var(--sp-xl); }
.landing-foot .legal-links { margin-top: var(--sp-sm); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--sp-lg); font-size: var(--t-meta-size); line-height: var(--t-meta-line); }
.legal-links a { display: inline-flex; align-items: center; min-height: var(--l-hit-min); color: var(--c-ink-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ---- the directional highlights (packages/ui tokens.ts `glint`, the app's Glints.tsx; the guide's section 6) ---------------
   Two glints over the rim, one light source: the warm one bends around the upper right corner, the cool one around the lower left
   (a sheet's around its two top corners), each fading out along the edges. Drawn as a ring the rim's width (padding + a mask that
   keeps only the padding box's border), coloured by two radial gradients centred on the corners; the reach is the corner radius
   plus the fade (20 on a card, 16 on a pill: the tokens' `fade` / `fadePill`). Decoration only: no pointer events, no text. */
.btn, .getapp-panel { position: relative; }
.btn.primary::after, .btn.stage-primary::after, .btn.secondary::after, .side::after,
.poster-frame::after, .notice::after, .toast::after, .sheet::after, .getapp-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  padding: var(--rim-width);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}
/* the primary pills: the strong width, a pill's end */
/* (in the stage's colours on both bases: the gradient is the same on either, as in the app) */
.btn.primary::after {
  padding: var(--rim-strong);
  background:
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 100% 0, var(--s-glint-warm), transparent),
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 0 100%, var(--s-glint-cool), transparent);
}
.btn.stage-primary::after {
  padding: var(--rim-strong);
  background:
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 100% 0, var(--s-glint-warm), transparent),
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 0 100%, var(--s-glint-cool), transparent);
}
/* the secondary pills: the quiet strength (0.55, the tokens' glint.quiet) */
.btn.secondary::after { opacity: 0.55;
  background:
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 100% 0, var(--c-glint-warm), transparent),
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 0 100%, var(--c-glint-cool), transparent);
}
.side::after { opacity: 0.55;
  background:
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 100% 0, var(--s-glint-warm), transparent),
    radial-gradient(circle calc(var(--l-button-height) / 2 + var(--sp-lg)) at 0 100%, var(--s-glint-cool), transparent);
}
/* the cards */
.poster-frame::after, .toast::after {
  background:
    radial-gradient(circle calc(var(--r-card) + var(--sp-xl)) at 100% 0, var(--c-glint-warm), transparent),
    radial-gradient(circle calc(var(--r-card) + var(--sp-xl)) at 0 100%, var(--c-glint-cool), transparent);
}
.notice::after {
  background:
    radial-gradient(circle calc(var(--r-card) + var(--sp-xl)) at 100% 0, var(--s-glint-warm), transparent),
    radial-gradient(circle calc(var(--r-card) + var(--sp-xl)) at 0 100%, var(--s-glint-cool), transparent);
}
/* a sheet has only a top rim: the cool glint moves to its upper left corner */
.sheet::after { padding: var(--rim-strong);
  background:
    radial-gradient(circle calc(var(--r-card-large) + var(--sp-xl)) at 100% 0, var(--s-glint-warm), transparent),
    radial-gradient(circle calc(var(--r-card-large) + var(--sp-xl)) at 0 0, var(--s-glint-cool), transparent);
}
.getapp-panel::after { padding: var(--rim-strong);
  background:
    radial-gradient(circle calc(var(--r-card-large) + var(--sp-xl)) at 100% 0, var(--c-glint-warm), transparent),
    radial-gradient(circle calc(var(--r-card-large) + var(--sp-xl)) at 0 0, var(--c-glint-cool), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .fist.live.coach .ghost { animation: none; opacity: 0.8; }
  .stamp, .sheet, .getapp-panel { animation: none; }
}