/* The Sheet layer (23 Sep 2026). Loaded last. It takes eyeshot-next's
   materials — the calmer grid, the navy/cream panels, the drafting-sheet card
   with coral registration ticks, the four score bands — and applies them to
   the existing app without changing its structure or its game fields.
   Tokens first, then shared components, then the surfaces that use them. */

/* ---------- tokens (every palette, both themes) ---------- */
:root[data-theme="dark"],:root[data-theme="dark"][data-palette]{
  --es-ground:#0F2440;--es-ground-2:#0B1B31;--es-surface:#16304F;--es-surface-2:#1D3B5E;
  --es-line:rgba(233,238,246,.14);--es-line-strong:rgba(233,238,246,.28);
  --es-ink:#F5F1E6;--es-ink-2:#C9D5E3;--es-ink-3:#A7B8CC;--es-coral:#FF7A5F;--es-coral-ink:#2A0E07;
  --es-btn:#F5F1E6;--es-btn-text:#0F2440;
  --es-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px rgba(3,10,22,.35);
  --es-shadow-soft:0 1px 0 rgba(255,255,255,.04) inset,0 6px 16px rgba(3,10,22,.22);
  --es-me:rgba(255,122,95,.14);
  --band-good:#8FDCB2;--band-ok:#F3D27C;--band-meh:#F5A878;--band-bad:#FF8E8A;--band-text:#0B1B31;--band-none:rgba(233,238,246,.10);
  --ground:var(--es-ground);--paper:var(--es-surface);--play-paper:var(--es-surface);--chip:var(--es-surface-2);
  --ink:var(--es-ink);--ink-2:var(--es-ink-2);--ink-3:var(--es-ink-3);--btn:var(--es-btn);--btn-text:var(--es-btn-text);
  --craft-card:var(--es-surface);--craft-border:var(--es-line);--craft-shadow:var(--es-shadow-soft);--surface-border:var(--es-line);
  --sheet-glow:transparent;--sheet-edge:transparent;--sheet-rule:transparent;--sheet-fine:rgba(155,190,230,.065);
  --grid:rgba(155,190,230,.06);--grid-major:rgba(155,190,230,.12);
  --good:var(--band-good);--ok:var(--band-ok);--meh:var(--band-meh);--bad:var(--band-bad);--on-grade:var(--band-text);
  --focus:#FFE3A3;
}
:root[data-theme="light"],:root[data-theme="light"][data-palette]{
  --es-ground:#F5EFDF;--es-ground-2:#EDE5D0;--es-surface:#FFFBF0;--es-surface-2:#F4EEDD;
  --es-line:rgba(23,40,60,.14);--es-line-strong:rgba(23,40,60,.3);
  --es-ink:#15263B;--es-ink-2:#33475F;--es-ink-3:#4E6078;--es-coral:#B23A27;--es-coral-ink:#FFF4EE;
  --es-btn:#15263B;--es-btn-text:#FFF6E2;
  --es-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 26px rgba(40,52,70,.12);
  --es-shadow-soft:0 1px 0 rgba(255,255,255,.6) inset,0 4px 14px rgba(40,52,70,.08);
  --es-me:rgba(196,67,47,.1);
  --band-good:#7DCFA0;--band-ok:#EFC862;--band-meh:#F0995F;--band-bad:#EE7F7B;--band-text:#0E1D30;--band-none:rgba(21,38,59,.08);
  --ground:var(--es-ground);--paper:var(--es-surface);--play-paper:var(--es-surface);--chip:var(--es-surface-2);
  --ink:var(--es-ink);--ink-2:var(--es-ink-2);--ink-3:var(--es-ink-3);--btn:var(--es-btn);--btn-text:var(--es-btn-text);
  --craft-card:var(--es-surface);--craft-border:var(--es-line);--craft-shadow:var(--es-shadow-soft);--surface-border:var(--es-line);
  --sheet-glow:transparent;--sheet-edge:transparent;--sheet-rule:transparent;--sheet-fine:rgba(39,103,141,.09);
  --grid:rgba(39,103,141,.09);--grid-major:rgba(39,103,141,.16);
  --good:var(--band-good);--ok:var(--band-ok);--meh:var(--band-meh);--bad:var(--band-bad);--on-grade:var(--band-text);
  --focus:#1E5A86;
}
.g-good{--band:var(--band-good)}.g-ok{--band:var(--band-ok)}.g-meh{--band:var(--band-meh)}.g-bad{--band:var(--band-bad)}

/* ---------- ground ---------- */
html,body{background-color:var(--es-ground)}
:root[data-theme] body,:root[data-theme] .page-dialog,:root[data-theme] #welcome{background-color:var(--es-ground)}
:root[data-theme] .app-nav{background:color-mix(in srgb,var(--es-ground) 92%,transparent)}

/* ---------- buttons: cream/navy primary, a solid quiet secondary, underlined text links ---------- */
:root[data-theme] .btn.primary{background:var(--es-btn);color:var(--es-btn-text);border:0;border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -8px rgba(3,10,22,.45)}
/* Secondary: never transparent. A surface-coloured fill with a hairline, so it
   reads as a real control on the grid without competing with the primary. */
:root[data-theme] .btn.ghost,:root[data-theme] .btn.secondary{background:var(--es-surface);color:var(--es-ink);border:1px solid var(--es-line-strong);border-radius:16px;box-shadow:var(--es-shadow-soft)}
:root[data-theme] .btn.ghost:active,:root[data-theme] .btn.secondary:active{background:var(--es-surface-2)}
.es-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;color:var(--es-ink);font:700 16px/1.2 var(--card-label,inherit);text-decoration:underline;text-decoration-color:var(--es-line-strong);text-decoration-thickness:2px;text-underline-offset:6px;cursor:pointer}
.es-link:hover{text-decoration-color:var(--es-ink-2)}
.es-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.es-links>.dot{color:var(--es-ink-3);font-weight:700}
.es-eyebrow{margin:0;font:700 12px/1.2 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}

/* ---------- the drafting sheet: double rule, coral registration ticks ---------- */
.es-sheet{position:relative;display:grid;gap:14px;padding:18px 18px 20px;background:var(--es-surface);color:var(--es-ink);border:1.5px solid var(--es-line-strong);border-radius:4px;box-shadow:inset 0 0 0 5px var(--es-surface),inset 0 0 0 6px var(--es-line),var(--es-shadow);text-align:left}
.es-sheet::before{content:"";position:absolute;inset:-1.5px;pointer-events:none;--t:var(--es-coral);
  background:linear-gradient(var(--t),var(--t)) left top/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) left top/2px 16px no-repeat,
  linear-gradient(var(--t),var(--t)) right top/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) right top/2px 16px no-repeat,
  linear-gradient(var(--t),var(--t)) left bottom/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) left bottom/2px 16px no-repeat,
  linear-gradient(var(--t),var(--t)) right bottom/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) right bottom/2px 16px no-repeat}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;padding:4px 6px 12px;border-bottom:1px solid var(--es-line);font:700 12.5px/1.3 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
.sheet-head p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
/* Who is playing: a quiet pill at the sheet's top right. A guest is told so, and it opens sign-in. */
.sheet-who{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:30px;margin:-6px -2px -6px auto;padding:0 11px 0 8px;border:1px solid var(--es-line);border-radius:999px;background:transparent;color:var(--es-ink-2);font:600 12px/1 var(--card-label,inherit);letter-spacing:.04em;text-transform:none;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.sheet-who::after{content:"";position:absolute;inset:-7px -3px}
.sheet-who svg{width:14px;height:14px;flex:none}
.sheet-who.is-guest{border-style:dashed}
/* Signed in: the player's own name reads as theirs, solid and in full ink. */
.sheet-who:not(.is-guest){min-height:32px;padding:0 12px 0 9px;border-color:var(--es-line-strong);background:var(--es-surface-2);color:var(--es-ink);font-weight:700;font-size:13px}
.sheet-who:not(.is-guest) svg{color:var(--coral,#ff8873)}
.sheet-who:hover,.sheet-who:focus-visible{border-color:var(--es-line-strong);color:var(--es-ink);background:var(--es-surface-2)}
.sheet-who>span{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phones: tighter tracking keeps the sheet line beside the pill; larger text
   may still wrap the date, and the pill stays at the top right. */
.sheet-head{align-items:flex-start}
.sheet-who{margin-top:-5px}
@media(max-width:430px){.sheet-head{letter-spacing:.09em}.sheet-head p{gap:4px 7px}.sheet-who{padding:0 9px 0 7px;font-size:11.5px}}
/* Today's five are tiles on the sheet; their order is the row, so no numbers. */
.daily-preview .daily-shot-number{display:none}

/* ---------- score tiles and dots (the strip) ---------- */
.es-dots{display:inline-flex;gap:5px;align-items:center}
.es-dots i{width:14px;height:14px;border-radius:3px;background:var(--band,var(--band-none));display:block}

/* ---------- bottom sheets slide up ---------- */
@keyframes es-rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes es-fade{from{opacity:0}}
dialog.es-bottom{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:88dvh;padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 22px);border:0;border-top:1px solid var(--es-line);border-radius:24px 24px 0 0;background:var(--es-ground);color:var(--es-ink);box-shadow:0 -12px 40px rgba(3,10,22,.3);overflow:auto;overscroll-behavior:contain}
dialog.es-bottom[open]{animation:es-rise .32s cubic-bezier(.2,.85,.25,1)}
dialog.es-bottom::backdrop{background:rgba(3,10,22,.55);animation:es-fade .2s ease}
dialog.es-bottom.is-closing{animation:es-rise .22s cubic-bezier(.4,0,1,1) reverse forwards}
dialog.es-bottom.is-closing::backdrop{opacity:0;transition:opacity .2s}
.es-grip{width:40px;height:5px;border-radius:3px;background:var(--es-line-strong);margin:0 auto 14px}
@media (prefers-reduced-motion:reduce){dialog.es-bottom[open],dialog.es-bottom.is-closing,dialog.es-bottom::backdrop{animation:none}}

/* ---------- Today: the whole intro is one drafting sheet ---------- */
.pen{color:var(--es-coral)}
body[data-phase="intro"] #play{position:relative;display:grid;gap:14px;padding:16px 18px 20px;margin-top:4px;background:var(--es-surface);border:1.5px solid var(--es-line-strong);border-radius:4px;box-shadow:inset 0 0 0 5px var(--es-surface),inset 0 0 0 6px var(--es-line),var(--es-shadow);overflow:visible}
body[data-phase="intro"] #play::before{content:"";position:absolute;inset:-1.5px;pointer-events:none;z-index:2;--t:var(--es-coral);
  background:linear-gradient(var(--t),var(--t)) left top/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) left top/2px 16px no-repeat,
  linear-gradient(var(--t),var(--t)) right top/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) right top/2px 16px no-repeat,
  linear-gradient(var(--t),var(--t)) left bottom/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) left bottom/2px 16px no-repeat,
  linear-gradient(var(--t),var(--t)) right bottom/16px 2px no-repeat,linear-gradient(var(--t),var(--t)) right bottom/2px 16px no-repeat}
body[data-phase="intro"] #play>.play-meta,body[data-phase="intro"] #play>#strip{display:none}
body[data-phase="intro"] #play>.instr:empty{display:none}
body[data-phase="intro"] #play .stage{width:100%;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;margin:0}
body[data-phase="intro"] #play .stage>canvas,body[data-phase="intro"] #play .stage>.timebar{display:none}
body[data-phase="intro"] #play .stage-ui{position:static;inset:auto;display:grid;gap:0;pointer-events:auto}
body[data-phase="intro"] .home-blueprint{display:grid;justify-items:start;gap:0;padding:0;margin:0;border:0;background:none;box-shadow:none;text-align:left}
body[data-phase="intro"] .home-blueprint::before{content:none}
body[data-phase="intro"] .home-blueprint>.sheet-head{justify-self:stretch;margin:0 0 4px}
body[data-phase="intro"] .home-blueprint>svg,body[data-phase="intro"] .home-blueprint>.today-sketch,body[data-phase="intro"] .home-blueprint>:is(img,picture,div):not(.sheet-head){justify-self:center}
body[data-phase="intro"] .home-headline{margin:6px 0 0;font:900 clamp(38px,11.5vw,52px)/.86 var(--display);text-transform:uppercase;letter-spacing:.004em;color:var(--es-ink);text-align:left}
body[data-phase="intro"] .home-promise{margin:12px 0 0;font:700 12.5px/1.3 var(--card-label,inherit);letter-spacing:.16em;text-transform:uppercase;color:var(--es-ink-2);text-align:left}
body[data-phase="intro"] .intro:not([hidden]){display:grid;gap:4px;text-align:left;padding:0 2px}
body[data-phase="intro"] .intro .big{font:900 clamp(40px,12vw,56px)/.9 var(--display);text-transform:uppercase;margin:4px 0 0}
body[data-phase="intro"] .dock{position:static;display:grid;gap:0;padding:0;margin:0;background:none;border:0;box-shadow:none}
body[data-phase="intro"] #controls{display:grid;gap:8px;padding:0;margin:0}
body[data-phase="intro"] #controls>.btn.primary{width:100%;min-height:58px;font-size:1.12rem}
body[data-phase="intro"] #controls>.home-links{margin:0 0 2px}
body[data-phase="intro"] .daily-preview{display:grid;gap:10px;margin:6px 0 0;padding:14px 0 0;border-top:1px dashed var(--es-line-strong)}
body[data-phase="intro"] .daily-preview-heading{padding:0 4px;display:flex;justify-content:space-between}
body[data-phase="intro"] .daily-preview-heading>b{font-size:12px}
:root[data-theme] body .daily-preview ol>li[data-family] .daily-shot{height:78px;min-height:78px;border:0;border-radius:12px;background:var(--band-none);box-shadow:inset 0 0 0 1.5px var(--es-line);color:var(--es-ink-2)}
:root[data-theme] body .daily-preview ol>li[data-family] .daily-shot>.game-icon{color:var(--es-ink-2)}
:root[data-theme] body .daily-preview ol>li[data-family] .daily-shot>.daily-shot-name{color:var(--es-ink-2);font-size:11px}
:root[data-theme] body .daily-preview ol>li[data-family][class*='g-'] .daily-shot{height:92px;min-height:92px;background:var(--band);box-shadow:none}
:root[data-theme] body .daily-preview ol>li[data-family][class*='g-'] .daily-shot>:is(b,.game-icon,.daily-shot-name){color:var(--band-text)}
body[data-phase="intro"] .home-headline{font-size:clamp(38px,11.5vw,50px)}
body[data-phase="intro"] .home-blueprint>svg{max-height:150px}

/* ---------- the shot: header, pills, the board, and a separate bottom card ---------- */
.shot-help-btn{display:none}
body:is([data-phase="play"],[data-phase="reveal"]) .shot-help-btn{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border:0;border-radius:12px;background:none;color:var(--es-ink);cursor:pointer}
body:is([data-phase="play"],[data-phase="reveal"]) .shot-help-btn svg{width:26px;height:26px}
body:is([data-phase="play"],[data-phase="reveal"]) #shot-heading{display:grid;justify-items:center;gap:2px;text-align:center;min-width:0}
body:is([data-phase="play"],[data-phase="reveal"]) #shot-heading>small{display:block;font:700 11.5px/1.3 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body:is([data-phase="play"],[data-phase="reveal"]) #shot-heading>.shot-heading-game{display:block;font:900 34px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--es-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body:is([data-phase="play"],[data-phase="reveal"]) #shot-heading>.shot-heading-game svg{display:none}

/* S2 pills: done = glyph + score in its band, pending = glyph, current = outlined */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0;background:none;border:0}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot{display:flex;align-items:center;justify-content:center;gap:5px;height:34px;min-height:34px;min-width:0;padding:0 4px;border:0;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--es-line);color:var(--es-ink-2);font:700 14px/1 var(--card-label,inherit);transform:none;opacity:1}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot .slot-label{display:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot .em{display:grid;place-items:center;width:18px;height:18px;margin:0;color:inherit;background:none;border:0}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot .em svg{width:17px;height:17px}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot .slot-score{position:static;display:inline;font:inherit;color:inherit;background:none;padding:0;margin:0;transform:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot.done{background:var(--band);color:var(--band-text);box-shadow:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot.done.g-bad{background-image:repeating-linear-gradient(135deg,rgba(11,27,49,.16) 0 2px,transparent 2px 7px)}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot.active{box-shadow:inset 0 0 0 2px var(--es-ink);color:var(--es-ink)}
:root[data-theme] body[data-phase="reveal"] #strip .slot.pop{box-shadow:inset 0 0 0 2px var(--es-ink)}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot::before,:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot::after{content:none}

/* the board: a flat surface object, no grid inside */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #stage{border:1px solid var(--es-line);border-radius:20px;background-color:var(--es-surface);background-image:none;box-shadow:var(--es-shadow-soft);overflow:hidden}

/* the bottom card: instruction while playing, the stamp and Next after */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock{display:grid;gap:10px;align-content:start;margin-top:auto;padding:14px 14px 14px;background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow)}
/* The instruction is the field's caption: plain text just under it, Lock in
   beneath, and the reveal's score card in the same place. */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock{margin-top:0}
:root[data-theme] body[data-phase="play"] #play>.dock{padding:4px 2px 0;background:none;border:0;box-shadow:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock>.instr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;padding:0 2px;font:400 15.5px/1.4 var(--card-label,inherit);color:var(--es-ink);text-align:left;background:none;border:0}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock>.instr:empty{display:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock>.instr>.em,:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock>.instr>.ev-name{display:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock>.instr>.limit{margin-left:auto;font:700 12px/1 var(--card-label,inherit);letter-spacing:.08em;color:var(--es-ink-3)}
body[data-phase="reveal"] #play>.dock>.instr{display:none!important}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #controls{display:grid;gap:10px;margin:0;padding:0}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #controls:empty{display:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #controls>.btn{width:100%;min-height:54px}
body[data-phase="reveal"] #play>.dock{animation:es-card-rise .22s cubic-bezier(.2,.9,.25,1) both}
@keyframes es-card-rise{from{transform:translateY(16px);opacity:0}}

/* the stamp: a coral ring with the score's band as the inner ring */
:root[data-theme] body #controls .score-chip{display:grid;gap:4px;margin:0;padding:2px 0 0;background:none;border:0;box-shadow:none}
:root[data-theme] body #controls .score-chip .score-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:0}
:root[data-theme] body #controls .score-chip .n{--band:var(--band-none);display:grid;place-items:center;width:70px;height:70px;min-width:0;border-radius:50%;background:none;color:var(--es-ink);box-shadow:inset 0 0 0 3.5px var(--es-coral),inset 0 0 0 7px var(--es-surface),inset 0 0 0 9.5px var(--band);transform:rotate(-7deg);font:900 36px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums;animation:es-stamp .18s cubic-bezier(.2,1.3,.4,1) .3s both}
:root[data-theme] body #controls .score-chip .n.g-good{--band:var(--band-good)}:root[data-theme] body #controls .score-chip .n.g-ok{--band:var(--band-ok)}:root[data-theme] body #controls .score-chip .n.g-meh{--band:var(--band-meh)}:root[data-theme] body #controls .score-chip .n.g-bad{--band:var(--band-bad)}
:root[data-theme] body #controls .score-chip .n>span{font:inherit;color:inherit}
:root[data-theme] body #controls .score-chip .d{display:grid;gap:2px;min-width:0;text-align:left}
:root[data-theme] body #controls .score-chip .d>b{font:700 1.235rem/1.15 var(--card-label,inherit);color:var(--es-ink)}
:root[data-theme] body #controls .score-chip .d>span{font:700 .882rem/1.3 var(--card-label,inherit);color:var(--es-ink);opacity:.82}
:root[data-theme] body #controls .score-chip .d>.shot-population{font-weight:400;font-size:.794rem;color:var(--es-ink-2);opacity:1}
:root[data-theme] body #controls .score-chip .shot-save:empty{display:none}
/* enlarged text: the stamp sits above its words, and nothing in the dock may widen the page */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #controls>*{min-width:0}
:root[data-theme].enlarged-text body #controls .score-chip .score-line{grid-template-columns:minmax(0,1fr);justify-items:start}
:root[data-theme].enlarged-text body #controls .score-chip .d{width:auto;max-width:100%}
/* the stamp drops the gold chip, so a perfect shot's legend keeps the sheet's ink in both themes */
:root[data-theme] body #controls .score-chip.is-perfect .shot-legend{color:var(--es-ink-2)}
:root[data-theme] body #controls .score-chip.is-perfect .shot-legend>span::before{filter:none}
@keyframes es-stamp{from{transform:scale(1.15) rotate(-5deg);opacity:0}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){:root[data-theme] body #controls .score-chip .n,body[data-phase="reveal"] #play>.dock{animation:none}}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot{flex-direction:row;flex-wrap:nowrap}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot .em{opacity:1;position:static;transform:none}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot .slot-score{font-variant-numeric:tabular-nums}

/* ---------- the finished sheet (results, and Today once played) ---------- */
body[data-phase="results"] #results{display:grid;gap:16px;align-content:start}
:root[data-theme] body[data-phase="results"] #results>.result-ticket.es-sheet{display:grid;gap:12px;padding:16px 16px 20px;margin:4px 0 0;background:var(--es-surface);background-image:none;border:1.5px solid var(--es-line-strong);border-radius:4px;box-shadow:inset 0 0 0 5px var(--es-surface),inset 0 0 0 6px var(--es-line),var(--es-shadow);overflow:visible;text-align:left}
:root[data-theme] body[data-phase="results"] #results>.result-ticket.es-sheet::after{content:none}
.result-sheet .complete-stamp{justify-self:start;margin:4px 0 -2px 4px;padding:6px 10px 5px;font:900 21px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--es-coral);border:2px solid var(--es-coral);border-radius:3px;transform:rotate(-2deg);transform-origin:left center}
.result-sheet .sheet-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;padding:0 4px}
.result-sheet .sheet-total strong{font:900 clamp(92px,28vw,122px)/.84 var(--display);letter-spacing:-.01em;color:var(--es-ink);font-feature-settings:"zero" 0}
.result-sheet .sheet-total .of{font:900 32px/1 var(--display);color:var(--es-ink-2);margin-left:-4px}
.result-sheet .sheet-total .save{font:700 14px/1.2 var(--card-label,inherit);color:var(--es-ink-2)}
:root[data-theme] body .result-sheet .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 0;padding:0 2px}
:root[data-theme] body .result-sheet .tiles>.tile{display:grid;justify-items:center;align-content:center;gap:3px;min-height:84px;margin:0;padding:8px 2px 7px;border:0;border-radius:12px;background:var(--band);color:var(--band-text);box-shadow:none;cursor:pointer}
:root[data-theme] body .result-sheet .tiles>.tile.g-bad{background-image:repeating-linear-gradient(135deg,rgba(11,27,49,.14) 0 2px,transparent 2px 7px)}
:root[data-theme] body .result-sheet .tiles>.tile .em{width:20px;height:20px;margin:0;color:var(--band-text);background:none;border:0;opacity:.85}
:root[data-theme] body .result-sheet .tiles>.tile .em svg{width:18px;height:18px}
:root[data-theme] body .result-sheet .tiles>.tile .s{font:900 clamp(26px,7.4vw,34px)/1 var(--display);color:var(--band-text);font-variant-numeric:tabular-nums}
:root[data-theme] body .result-sheet .tiles>.tile .nm{font:700 11px/1.1 var(--card-label,inherit);color:var(--band-text);max-width:calc(100% - 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme] body .result-sheet .tiles>.tile:active{transform:scale(.97)}
.result-sheet .sheet-rank{min-height:1.4em;margin:2px 0 0;padding:0 4px;font:700 18px/1.4 var(--card-label,inherit);color:var(--es-ink)}
.result-sheet .sheet-rank:empty{display:none}
:root[data-theme] body .result-sheet .sheet-actions{display:grid;gap:4px;margin:4px 0 0;padding:0}
:root[data-theme] body .result-sheet .sheet-actions>.btn.primary{width:100%;min-height:58px;font-size:1.1rem}
.result-sheet .share-status:empty{display:none}
.result-sheet .sheet-foot{display:grid;gap:8px;margin:4px 0 0;padding:14px 4px 0;border-top:1px dashed var(--es-line-strong);font:400 15px/1.35 var(--card-label,inherit);color:var(--es-ink-2)}
.result-sheet .sheet-foot p{margin:0}
.result-sheet .sheet-foot b{color:var(--es-ink);font-variant-numeric:tabular-nums}
.result-sheet .vs{margin:0}
body[data-phase="results"] .result-field,body[data-phase="results"] .result-account,body[data-phase="results"] .result-groups{margin:0}
body[data-phase="results"] .result-account:has(#compare:empty){display:none}
body[data-phase="results"] .result-field:has(#dist:empty){display:none}

/* ---------- Sign it sheet ---------- */
.sign-sheet{display:grid;gap:12px;padding:0 2px}
.sign-sheet h2{margin:0;font:900 32px/1.02 var(--display);color:var(--es-ink)}
.sign-sheet .sign-why{margin:0;color:var(--es-ink-2);font-size:15px;line-height:1.4}
.sign-sheet .sign-line{display:flex;align-items:flex-end;gap:12px;margin:10px 0 6px;padding:14px 16px 12px;border:1.5px solid var(--es-line-strong);border-radius:4px;background:var(--es-surface);box-shadow:inset 0 0 0 4px var(--es-surface),inset 0 0 0 5px var(--es-line)}
.sign-sheet .sign-line span{flex:none;font:700 12.5px/1.6 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2)}
.sign-sheet .sign-line input{flex:1;min-width:0;padding:2px 2px 4px;border:0;border-bottom:1.5px solid var(--es-line-strong);border-radius:0;background:transparent;color:var(--es-ink);font:900 26px/1.1 var(--display);letter-spacing:.04em;outline:none}
.sign-sheet .sign-line input:focus{border-bottom-color:var(--es-coral)}
.sign-sheet .btn.primary{width:100%;min-height:56px}
.sign-sheet .es-link{justify-self:center}
.sign-sheet .sign-status{margin:0;min-height:1.2em;color:var(--es-coral);font-size:14px;text-align:center}
.sign-sheet .sign-status:empty{display:none}
dialog.es-bottom .dlg{padding:0;border:0;background:none;box-shadow:none;max-width:none}
dialog.es-bottom h2{font:900 30px/1.05 var(--display)}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile.g-good{--result-color:var(--band-good)}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile.g-ok{--result-color:var(--band-ok)}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile.g-meh{--result-color:var(--band-meh)}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile.g-bad{--result-color:var(--band-bad)}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile{background-color:var(--result-color);color:var(--band-text);min-height:86px;padding:9px 2px 8px;gap:3px}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile .nm{display:block;width:100%;height:auto;padding:0 2px;text-align:center;font:700 11px/1.15 var(--card-label,inherit);text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile .s{font:900 clamp(26px,7.4vw,34px)/1 var(--display)}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile .em,:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile .em svg{width:18px;height:18px}
.result-sheet .sheet-foot{text-align:left}
:root[data-theme] body .result-sheet #result-standing{margin:2px 0 0;min-height:0}
.result-account .es-link{justify-self:start}
dialog.es-bottom .dlg>h2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
dialog.es-bottom .dlg>h2 .icon-btn{flex:none}
#dlg-shot-help .dlg{display:grid;gap:12px}
#dlg-shot-help .btn.primary{width:100%}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile .nm{align-self:stretch;justify-self:stretch;flex:none;width:auto!important;max-width:none!important;min-width:0}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile{justify-content:stretch;grid-template-columns:minmax(0,1fr)}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #controls>.btn.primary:disabled{opacity:1;background:transparent;color:var(--es-ink-3);box-shadow:inset 0 0 0 1.5px var(--es-line-strong)}
/* The header's ? replaces the old inline help button. */
body:is([data-phase="play"],[data-phase="reveal"]) #instr .shot-help{display:none}
body[data-phase="intro"] #controls>.btn{margin:0;max-width:100%;width:100%;box-sizing:border-box}
body[data-phase="intro"] #play,body[data-phase="intro"] #play .stage,body[data-phase="intro"] #play .stage-ui,body[data-phase="intro"] .home-blueprint,body[data-phase="intro"] .sheet-head,body[data-phase="intro"] #controls,body[data-phase="intro"] .dock{min-width:0;max-width:100%}
body[data-phase="intro"] #play{grid-template-columns:minmax(0,1fr)}
.sheet-head p>span{overflow-wrap:anywhere}
body[data-phase="intro"] .home-headline,body[data-phase="intro"] .home-promise{max-width:100%;overflow-wrap:anywhere}
body[data-phase="intro"] #controls>*{min-width:0;max-width:100%}
body[data-phase="intro"] #controls>.btn{white-space:normal;height:auto;min-height:58px;padding-block:10px;text-align:center}
:root[data-theme] body[data-phase="intro"] .daily-preview ol{grid-template-columns:repeat(5,minmax(0,1fr));min-width:0}
:root[data-theme] body[data-phase="intro"] .daily-preview ol>li{min-width:0}
body[data-phase="intro"] .home-blueprint>svg{max-width:100%}

/* ---------- review fixes (23 Sep) ---------- */
/* The bottom card always carries the instruction, even on shots with no control (draw, hold, tap). */
body[data-phase="play"] #play>.dock:has(#instr:not(:empty)){display:grid!important}
/* The card spans the same width as the pills; the board stays square and centred above it. */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.dock{width:auto;align-self:stretch;box-sizing:border-box}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #play>.stage{align-self:center}
/* Header: × | caption over title | ?, on the same gutters as the pills. */
body:is([data-phase="play"],[data-phase="reveal"]) .app-header{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;column-gap:8px;width:100%;max-width:none;margin:0;padding-inline:0!important}
body:is([data-phase="play"],[data-phase="reveal"]) .app-header>.wm-h1{grid-column:1;grid-row:1;margin:0;justify-self:start}
body:is([data-phase="play"],[data-phase="reveal"]) .app-header>.wm-h1 #home{width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0}
body:is([data-phase="play"],[data-phase="reveal"]) .app-header>#shot-heading{grid-column:2;grid-row:1;margin:0;justify-self:center}
body:is([data-phase="play"],[data-phase="reveal"]) .app-header>.shot-help-btn{grid-column:3;grid-row:1;margin:0;justify-self:end}
body:is([data-phase="play"],[data-phase="reveal"]) .app-header>.header-actions{display:none}
body:is([data-phase="play"],[data-phase="reveal"]) #shot-heading>small{white-space:normal;text-wrap:balance}
/* The finished sheet keeps its registration ticks (older layers masked this pseudo-element). */
:root[data-theme] body[data-phase="results"] #results>.result-ticket.es-sheet::before{content:"";display:block;position:absolute;inset:-1.5px;height:auto;width:auto;z-index:2;opacity:1;mask-image:none;-webkit-mask-image:none;background-color:transparent}
.sheet-head .sheet-status{margin-left:0;padding:3px 8px;border-radius:999px;background:var(--band-none);color:var(--es-ink-2);letter-spacing:.1em;font-size:.72em}
.sheet-head .sheet-status[data-state="Saved"]::before{content:"✓ ";color:var(--band-good)}
.sheet-head .sheet-status:is([data-state="Not counted"],[data-state="Removed"]){color:var(--es-coral)}
.result-sheet .sheet-foot{text-align:left}
.result-sheet .sheet-foot .next-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.result-sheet .sheet-foot .next-in .es-link{min-height:32px;font-size:15px}
.result-sheet .sheet-keep:empty{display:none}
.result-sheet .sheet-keep{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;color:var(--es-ink-3);font-size:14px}
.result-sheet .sheet-keep .es-link{min-height:32px;padding:0;font-size:14px}
/* Distribution: quiet ink bars, the player's bar and marker in the red pen. */
:root[data-theme] .score-distribution{--medal:var(--es-coral);background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow-soft)}
:root[data-theme] .distribution-bars>i{background:var(--es-ink-3);opacity:.32}
:root[data-theme] .distribution-bars>i.is-you{background:var(--es-coral);opacity:1}
:root[data-theme] .distribution-copy>small{font-size:.78rem;text-wrap:pretty}
/* A new day's sheet lands on Today (app.js landSheet). The view transition holds
   both cards: the next sheet is laid a few pixels above its place, a hair off
   square, and settles onto its registration while the old sheet fades beneath
   it. The page around the card only cross-fades, so nothing else moves.
   Reduced motion keeps the cross-fade alone. */
@supports(view-transition-name:today-sheet){
 :root[data-sheet-landing="leaving"] body[data-phase="intro"] #play,:root[data-sheet-landing="leaving"] body[data-phase="results"] #results>.result-ticket{view-transition-name:today-sheet-old}
 :root[data-sheet-landing="landing"] body[data-phase="intro"] #play,:root[data-sheet-landing="landing"] body[data-phase="results"] #results>.result-ticket{view-transition-name:today-sheet}
 :root[data-sheet-landing]::view-transition-group(root),:root[data-sheet-landing]::view-transition-group(eyeshot-page),:root[data-sheet-landing]::view-transition-group(today-sheet-old),:root[data-sheet-landing]::view-transition-group(today-sheet){animation:none}
 :root[data-sheet-landing]::view-transition-old(root),:root[data-sheet-landing]::view-transition-old(eyeshot-page),:root[data-sheet-landing]::view-transition-old(today-sheet-old){mix-blend-mode:normal;animation:es-sheet-under .32s cubic-bezier(.2,.8,.2,1) both}
 :root[data-sheet-landing]::view-transition-new(root),:root[data-sheet-landing]::view-transition-new(eyeshot-page){mix-blend-mode:normal;animation:none}
 :root[data-sheet-landing]::view-transition-new(today-sheet){mix-blend-mode:normal;transform-origin:0 0;animation:es-sheet-land .32s cubic-bezier(.2,.8,.2,1) both}
}
/* Both sheets sit on the same line of the table, so a new sheet laid over a
   finished one covers it edge for edge (the intro card's top margin, per width). */
body[data-phase="results"] #results{margin-top:4px}
@media (min-width:600px) and (max-width:899.98px){body:not(.native-app)[data-phase="results"] #results{margin-top:24px}}
@media (min-width:900px){body:not(.native-app)[data-phase="results"] #results{margin-top:28px}}
@keyframes es-sheet-land{from{opacity:0;transform:translateY(-14px) rotate(-.6deg)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes es-sheet-under{to{opacity:0}}
@keyframes es-sheet-appear{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){:root[data-sheet-landing]::view-transition-new(today-sheet){animation-name:es-sheet-appear}}
/* The stamp: its outer ring is the score's band, the red pen draws the inner line. */
:root[data-theme] body #controls .score-chip .n{box-shadow:inset 0 0 0 3.5px var(--band),inset 0 0 0 7px var(--es-surface),inset 0 0 0 8.5px var(--es-coral)}
/* Native results: the sheet carries its own title block. */
.native-app[data-phase="results"] #shot-heading{display:none!important}
/* Bottom sheets on native: keep the extra breathing room above the home indicator, and ride the keyboard. */
.native-app dialog.es-bottom{padding-bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 22px)}
.keyboard-open dialog.es-bottom[open]{bottom:var(--keyboard-inset-bottom,0px);max-height:var(--keyboard-viewport-height,88dvh);padding-bottom:16px}
/* The line itself shows focus (its rule turns coral); no box around the field. */
.sign-sheet .sign-line:focus-within,.sign-sheet .sign-line input:focus,.sign-sheet .sign-line input:focus-visible{outline:none}
/* How to play: the two expanders read as rows. */
#dlg-help details{border-top:1px solid var(--es-line)}
#dlg-help details:last-of-type{border-bottom:1px solid var(--es-line)}
#dlg-help summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:700;cursor:pointer;list-style:none}
#dlg-help summary::-webkit-details-marker{display:none}
#dlg-help summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--es-ink-3);border-bottom:2px solid var(--es-ink-3);transform:rotate(45deg);transition:transform .2s}
#dlg-help details[open]>summary::after{transform:rotate(225deg)}
/* Text that must grow with the player's text size. */
.sheet-head{font-size:.78rem}.es-link{font-size:1rem}.es-eyebrow{font-size:.75rem}
body:is([data-phase="play"],[data-phase="reveal"]) #shot-heading>small{font-size:.72rem}
.result-sheet .sheet-foot{font-size:.94rem}
/* Desktop: the sheet is an object on the table, not a banner. */
@media (min-width:760px){
  body[data-phase="intro"] #play,body[data-phase="results"] #results{max-width:600px;margin-inline:auto;width:100%}
}
/* Challenge landing: part of the sheet, calmer. */
:root[data-theme] body[data-phase="intro"] .challenge-landing{margin:0;padding:6px 0 0;text-align:left;max-width:none}
:root[data-theme] body[data-phase="intro"] .challenge-landing h2{margin:6px 0 0;font:900 clamp(38px,11vw,52px)/.95 var(--display);text-transform:uppercase}
:root[data-theme] body[data-phase="intro"] .challenge-landing .challenge-total{justify-content:flex-start;flex-wrap:wrap}
:root[data-theme] body[data-phase="intro"] .challenge-landing .challenge-edition{font:700 .78rem/1.3 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-2);padding-bottom:12px;border-bottom:1px solid var(--es-line)}
:root[data-theme] body[data-phase="intro"] .challenge-landing>p:last-of-type{text-align:left}
/* Head-to-head: leads the results when a friend's challenge was played. */
:root[data-theme] #results>#duel:not(:empty){margin:4px 0 0}
:root[data-theme] #duel .challenge-table{display:grid;gap:12px;margin:0;padding:18px 16px;background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow);color:var(--es-ink);text-align:left}
:root[data-theme] #duel .challenge-kicker{margin:0;font:700 .75rem/1.2 var(--card-label,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--es-coral)}
:root[data-theme] #duel .challenge-verdict{display:grid;gap:2px}
:root[data-theme] #duel .challenge-verdict b{font:900 clamp(34px,10vw,46px)/.95 var(--display);text-transform:uppercase;color:var(--es-ink)}
:root[data-theme] #duel .challenge-verdict span{font-weight:700;color:var(--es-ink-2)}
:root[data-theme] #duel .challenge-standings{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--es-line)}
:root[data-theme] #duel .challenge-standings li{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 4px;border:0;border-bottom:1px solid var(--es-line);background:none;border-radius:0}
:root[data-theme] #duel .challenge-standings li.me{background:var(--es-me);border-radius:10px;border-bottom-color:transparent}
:root[data-theme] #duel .challenge-standings .tot{font:900 22px/1 var(--display)}
:root[data-theme] #duel .you-marker{display:none}
:root[data-theme] #duel .challenge-next{display:grid;gap:8px}
:root[data-theme] #duel .challenge-next .btn{width:100%;min-height:52px}
/* On a challenge reveal: one quiet line for the rival, and Next stays on screen. */
#controls:has(.shot-challenge) .shot-population{display:none}
:root[data-theme] #controls .shot-challenge{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding:8px 2px 0;border:0;border-top:1px solid var(--es-line);background:none;font:400 .88rem/1.3 var(--card-label,inherit);color:var(--es-ink-2)}
:root[data-theme] #controls .shot-challenge>span:first-child{display:none}
:root[data-theme] #controls .shot-challenge b{color:var(--es-ink)}
:root[data-theme] #controls .shot-challenge strong{font-weight:700;color:var(--es-ink)}
:root[data-theme] #controls .shot-challenge .ghost-mark-legend{flex-basis:100%;font-size:.8rem;color:var(--es-ink-3)}
:root[data-theme] body[data-phase="intro"] #controls>.btn.es-link{justify-self:center;width:auto;min-height:44px;margin:0 auto;padding:0 6px;background:none;border:0;box-shadow:none;color:var(--es-ink);font-size:1rem}
:root[data-theme] body .daily-preview ol>li[data-family][class*='g-'] .daily-shot{height:78px;min-height:78px}
:root[data-theme] body .daily-preview ol>li[data-family][class*='g-'] .daily-shot>.daily-shot-name{display:none}
:root[data-theme] body .daily-preview ol>li[data-family][class*='g-'] .daily-shot>b{font:900 26px/1 var(--display)}
/* Shot recap: title and score read left to right like the rest of the app. */
:root[data-theme] #dlg-reveal #reveal-body>h2{display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;font:900 28px/1 var(--display);text-transform:uppercase}
:root[data-theme] #dlg-reveal #reveal-body>h2 .icon-btn{margin-left:auto}
:root[data-theme] #dlg-reveal .recap-score{justify-content:flex-start;text-align:left}

/* ---------- result tiles: readable names at every size (triage 23 Sep) ---------- */
/* A shot name never drops below 12px or hides behind an ellipsis; it wraps at its soft hyphen. */
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile .nm{font-size:max(12px,.706rem);line-height:1.1;white-space:normal;overflow-wrap:anywhere;hyphens:manual;text-overflow:clip;overflow:visible}
/* Enlarged text: the five become rows, icon · name · score, so nothing is squeezed. */
:root[data-theme].enlarged-text body .result-sheet .tiles{grid-template-columns:minmax(0,1fr);gap:8px}
:root[data-theme].enlarged-text body[data-phase="results"] .result-sheet .tiles>.tile{grid-template-columns:auto minmax(0,1fr) auto;justify-items:start;align-items:center;min-height:56px;padding:10px 14px;gap:12px;text-align:left}
:root[data-theme].enlarged-text body[data-phase="results"] .result-sheet .tiles>.tile .em{order:0}
:root[data-theme].enlarged-text body[data-phase="results"] .result-sheet .tiles>.tile .nm{order:1;font-size:1rem;text-align:left;overflow-wrap:anywhere}
:root[data-theme].enlarged-text body[data-phase="results"] .result-sheet .tiles>.tile .s{order:2;justify-self:end}
/* Short screens (small phones, landscape tablets): the eye and headline give up
   height so Today's five stay above the tab bar on first view. */
@media (max-height:820px){
  body[data-phase="intro"] .home-blueprint>svg{max-height:72px}
  body[data-phase="intro"] .home-headline{font-size:clamp(34px,10vw,44px)}
  body[data-phase="intro"] .home-promise{margin-top:8px}
}
@media (max-height:600px){
  body[data-phase="intro"] .home-blueprint>svg{display:none}
}
@media (max-height:820px) and (min-width:600px){
  body[data-phase="intro"] .home-headline br{display:none}
}
@media (max-height:600px){
  body[data-phase="intro"] .home-headline{margin-top:2px;font-size:32px}
  body[data-phase="intro"] .home-blueprint>.sheet-head{padding-bottom:8px}
  body[data-phase="intro"] .daily-preview{margin-top:2px;padding-top:8px;gap:8px}
  :root[data-theme] body[data-phase="intro"] .daily-preview ol>li[data-family] .daily-shot{height:66px;min-height:66px}
}
@media (max-height:820px){
  body[data-phase="intro"] .daily-preview{margin-top:2px;padding-top:10px;gap:8px}
  :root[data-theme] body[data-phase="intro"] .daily-preview ol>li[data-family] .daily-shot{height:66px;min-height:66px}
}
/* Number entry with the keyboard up: the instruction now rides in the bottom card,
   so the field gives up that height and Lock in stays above the keyboard. */
body.keyboard-open[data-phase="play"]:has(.estimate-field) .stage{max-width:min(100%,max(110px,calc(var(--keyboard-viewport-height,100svh) - 372px - var(--safe-area-inset-top,env(safe-area-inset-top)))))}
/* On Today a notice (update needed, offline, recovered set) leads the card, above
   its actions, so it is never left under the native tab bar. */
body[data-phase="intro"] #play>.dock>#instr:not(:empty){order:-1}
/* The welcome's Play now is the sheet's primary button, with its own readable ink
   (the old coral fill failed contrast once the primary ink turned navy). */
:root[data-theme] .welcome #welcome-guest{background:var(--es-btn);color:var(--es-btn-text)}
/* The score, as it was: one big numeral in its band's ink, no ring. A perfect
   shot keeps the gold plate and crown. (AJ preferred this to the stamp.) */
:root[data-theme="dark"]{--band-ink-good:var(--band-good);--band-ink-ok:var(--band-ok);--band-ink-meh:var(--band-meh);--band-ink-bad:var(--band-bad)}
:root[data-theme="light"]{--band-ink-good:#23804C;--band-ink-ok:#8A6600;--band-ink-meh:#B0530F;--band-ink-bad:#B83A2E}
:root[data-theme] body #controls .score-chip .n{width:auto;height:auto;min-width:64px;border-radius:0;box-shadow:none;transform:none;background:none;place-items:center start;font:900 64px/.86 var(--display);letter-spacing:-.01em;color:var(--es-ink);animation:es-score-pop .28s cubic-bezier(.2,1.3,.4,1) .15s both}
:root[data-theme] body #controls .score-chip .n.g-good{color:var(--band-ink-good)}
:root[data-theme] body #controls .score-chip .n.g-ok{color:var(--band-ink-ok)}
:root[data-theme] body #controls .score-chip .n.g-meh{color:var(--band-ink-meh)}
:root[data-theme] body #controls .score-chip .n.g-bad{color:var(--band-ink-bad)}
@keyframes es-score-pop{from{transform:scale(.85);opacity:0}}
:root[data-theme] body #controls .score-chip.is-perfect{position:relative;padding:14px 16px;background:var(--perfect-metal)!important;border:1px solid var(--perfect-metal-edge);border-radius:16px;box-shadow:inset 0 1px 0 #fff9dc,inset 0 -2px 0 #76531744,0 6px 16px -8px #402d1755}
:root[data-theme] body #controls .score-chip.is-perfect :is(.n,.d>b,.d>span){color:#241a08!important;opacity:1}
@media (prefers-reduced-motion:reduce){:root[data-theme] body #controls .score-chip .n{animation:none}}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile.is-perfect{background:var(--perfect-metal)!important;box-shadow:inset 0 1px 0 #fff9dc,inset 0 -2px 0 #76531744;overflow:visible}
:root[data-theme] body[data-phase="results"] .result-sheet .tiles>.tile.is-perfect :is(.s,.nm,.em){color:#241a08}
:root[data-theme] body .daily-preview ol>li[data-family].is-perfect .daily-shot{background:var(--perfect-metal)!important;overflow:visible}
:root[data-theme] body .daily-preview ol>li[data-family].is-perfect .daily-shot>:is(b,.game-icon,.daily-shot-name){color:#241a08}
/* "View your groups" and a single group's button on the results page. */
:root[data-theme] body .result-groups>.btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0 18px;font-size:1rem}
/* Native: the whole unplayed sheet rests above the floating tab bar. The eye gives way first. */
.native-app body[data-phase="intro"] .home-blueprint>.today-sketch,.native-app body[data-phase="intro"] .home-blueprint>svg,body.native-app[data-phase="intro"] .home-blueprint>.today-sketch,body.native-app[data-phase="intro"] .home-blueprint>svg{max-height:clamp(44px,calc(100svh - 792px),134px)}
body.native-app[data-phase="intro"] #play{gap:12px;padding-bottom:16px}
body.native-app[data-phase="intro"] .daily-preview{margin-top:2px;padding-top:12px}
:root[data-theme] body #controls .score-chip.is-perfect :is(.shot-legend,.shot-legend>span){color:#241a08!important}
/* A segmented control's first placement lands without sliding. */
[data-segment-instant]::before,[data-segment-instant]>*::before{transition:none!important}
/* ---------- where you landed: a small real histogram inside the sheet ---------- */
.result-sheet .sheet-standing{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"spark more" "rank more";align-items:center;gap:6px 10px;width:100%;margin:2px 0 0;padding:10px 12px 10px;border:1px solid var(--es-line);border-radius:14px;background:var(--band-none);color:var(--es-ink);text-align:left;cursor:pointer;font:inherit}
.result-sheet .sheet-standing:active{transform:scale(.99)}
.result-sheet .sheet-standing:disabled{cursor:default}
.result-sheet .sheet-standing .spark-slot{grid-area:spark;display:block;min-width:0}
.result-sheet .sheet-standing .spark-slot:empty{display:none}
.result-sheet .sheet-standing .sheet-rank{grid-area:rank;margin:0;padding:0;font:700 1rem/1.3 var(--card-label,inherit)}
.result-sheet .sheet-standing .sheet-standing-more{grid-area:more;display:grid;place-items:center;color:var(--es-ink-3)}
.result-sheet .sheet-standing .sheet-standing-more svg{width:18px;height:18px}
.spark{position:relative;display:block;height:40px}
.spark-bars{display:flex;align-items:flex-end;gap:2px;height:100%}
.spark-bars>i{flex:1;min-width:0;border-radius:2px 2px 0 0;background:var(--es-ink-3);opacity:.35}
.spark-bars>i.is-you{background:var(--es-coral);opacity:1}
.spark-marker{position:absolute;left:var(--position);top:-4px;bottom:0;border-left:1.5px solid var(--es-coral)}
.spark-marker::before{content:"";position:absolute;top:-2px;left:-4.5px;width:7px;height:7px;border-radius:50%;background:var(--es-coral)}
/* The detail sheet */
.standing-sheet{display:grid;gap:16px}
.standing-sheet #dist:empty{display:none}
.standing-sheet .result-groups{display:grid;gap:8px}
.standing-sheet .result-groups:empty{display:none}
.standing-sheet .score-distribution{box-shadow:none}
/* Score strips are rounded squares everywhere (AJ preferred them to circles). */
:root[data-theme] :is(.es-dots,.group-score-strip,.recent-score-strip,.member-score-track)>i{border-radius:3px!important}
/* ---------- wide screens: Today is a landscape sheet ---------- */
@media (min-width:900px){
  body:not(.native-app)[data-phase="intro"] #play{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:48px;row-gap:0;align-items:center;width:min(100%,980px);max-width:980px;min-height:0!important;height:auto!important;margin:28px auto 40px;padding:26px 36px 34px}
  body:not(.native-app)[data-phase="intro"] #play>.stage,body:not(.native-app)[data-phase="intro"] #play .stage-ui,body:not(.native-app)[data-phase="intro"] #play .home-blueprint{display:contents}
  body:not(.native-app)[data-phase="intro"] #play .sheet-head{grid-column:1/-1;grid-row:1;margin:0 0 22px}
  body:not(.native-app)[data-phase="intro"] #play .home-blueprint>svg,body:not(.native-app)[data-phase="intro"] #play .home-blueprint>.today-sketch{grid-column:1;grid-row:2;justify-self:start;max-height:150px;margin:0 0 10px}
  body:not(.native-app)[data-phase="intro"] #play .home-headline{grid-column:1;grid-row:3;margin:0;font-size:clamp(48px,4.8vw,68px)}
  body:not(.native-app)[data-phase="intro"] #play .home-promise{grid-column:1;grid-row:4;margin:14px 0 0;align-self:start}
  body:not(.native-app)[data-phase="intro"] #play .intro:not([hidden]){grid-column:1;grid-row:3/5;align-self:start}
  body:not(.native-app)[data-phase="intro"] #play>.dock{grid-column:2;grid-row:2/5;align-self:center;width:100%}
  body:not(.native-app)[data-phase="intro"] #play>.dock #controls>.btn.primary{min-height:60px}
}
@media (min-width:600px) and (max-width:899.98px){
  body:not(.native-app)[data-phase="intro"] #play{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;grid-template-areas:none!important;min-height:0!important;height:auto!important;max-width:560px;margin:24px auto 40px}
  body:not(.native-app)[data-phase="intro"] #play>*{grid-column:auto!important;grid-row:auto!important}
}
/* The finished sheet fits one phone screen: the stamp sits on the total's shoulder,
   the standing strip and actions are compact. (AJ: no card under the floating bar.) */
.result-sheet .sheet-total{position:relative;padding-right:0}
.result-sheet .sheet-total .complete-stamp{position:absolute;right:2px;top:4px;margin:0;font-size:17px;padding:5px 8px 4px;transform:rotate(-4deg);transform-origin:right top;background:var(--es-surface)}
:root[data-theme] body[data-phase="results"] #results>.result-ticket.es-sheet{gap:10px;padding-top:12px;margin-top:0}
.result-sheet .sheet-head{padding-bottom:10px}
.result-sheet .sheet-total strong{font-size:clamp(84px,25vw,112px)}
.result-sheet .sheet-standing{padding:8px 12px;gap:4px 10px}
.result-sheet .sheet-standing .spark{height:28px}
:root[data-theme] body .result-sheet .sheet-actions>.btn.primary{min-height:54px}
.result-sheet .sheet-actions .es-link{min-height:38px}
.result-sheet .sheet-foot{padding-top:10px;margin-top:0}
/* Drawn once (24 Sep). The standing strip keeps its size while the day's field
   loads: a flat row of bars holds the histogram's place and the rank keeps its
   line, so the actions below never move when the numbers arrive. The Drawn by
   line is the same height signed or not. */
.result-sheet .sheet-standing .spark-slot:empty{display:block;height:28px}
.result-sheet .sheet-standing .spark-slot:empty::before{content:"";display:block;height:100%;background:repeating-linear-gradient(90deg,var(--es-ink-3) 0 calc((100% - 48px) / 25),transparent 0 calc((100% - 48px) / 25 + 2px)) left bottom/100% 2px no-repeat;opacity:.35}
.result-sheet .sheet-standing .sheet-rank:empty{display:block;min-height:1.3em}
.sheet-head>p:last-child{min-height:20px}
@media (max-width:359px){.result-sheet .sheet-total .complete-stamp{position:static;display:inline-block;margin:0 0 4px}.result-sheet .sheet-total{flex-direction:column-reverse;align-items:flex-start}}
/* ---------- a perfect 100 is gold everywhere (24 Sep) ----------
   The finished sheet's gold plate and crown travel to every place one shot's
   score shows: the in-play strip, the dot strips, and plain lists of numbers.
   A 100 is never the green of an ordinary good shot. */
:root[data-theme]{--perfect-glyph:var(--perfect-metal)}
:root[data-theme="light"]{--perfect-glyph:linear-gradient(125deg,#946a1f 0%,#c99a3c 42%,#e2b957 58%,#a0762a 100%)}
/* the strip during a run: the gold plate, with a small crown on its shoulder */
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot.done.is-perfect{overflow:visible;background:var(--perfect-metal);color:#241a08;box-shadow:inset 0 0 0 1px var(--perfect-metal-edge),inset 0 1px 0 #fff9dc,inset 0 -2px 0 #76531740}
:root[data-theme] body[data-phase="reveal"] #strip .slot.done.is-perfect.pop{box-shadow:inset 0 0 0 2px var(--perfect-metal-edge),inset 0 1px 0 #fff9dc,inset 0 -2px 0 #76531740}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot>.perfect-crown{display:block;top:-9px;right:-3px;width:17px;height:16px;transform:rotate(14deg)}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot.done.is-perfect .em{filter:none;color:#3d2b0c}
:root[data-theme] body:is([data-phase="play"],[data-phase="reveal"]) #strip .slot>.perfect-crown svg{stroke-width:2}
/* dot and bar strips (You, Stats, a player's history): a gold square with a hairline edge */
:root[data-theme] :is(.es-dots,.recent-score-strip,.member-score-track)>i.is-perfect{background:var(--perfect-metal)!important;box-shadow:inset 0 0 0 1px var(--perfect-metal-edge),inset 0 1px 0 #fff9dc99}
/* plain lists of numbers (shot by shot, history, a shot's results): gold ink behind a small crown */
.es-perfect{color:var(--perfect-ink)!important;white-space:nowrap}
.es-perfect::before{content:"";display:inline-block;width:.95em;height:.72em;margin-right:.24em;vertical-align:-.02em;background:var(--perfect-glyph);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2 17 1 5l7 5 5-9 5 9 7-5-1 12Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2 17 1 5l7 5 5-9 5 9 7-5-1 12Z'/%3E%3C/svg%3E") center/contain no-repeat}
.es-perfect>small{color:inherit;opacity:.72}
/* the recap of one shot: its 100 in gold ink beside the crowned note */
:root[data-theme] #dlg-reveal .recap-score.is-perfect{color:var(--perfect-ink)}

:root[data-theme] body[data-phase="results"] #shot-heading{display:none}

/* Native guest entry: the headline, one action and optional account access. */
:root[data-theme] #welcome{display:flex;align-items:stretch;justify-content:flex-start;width:min(100%,440px);min-height:100svh;padding:max(24px,var(--safe-area-inset-top,env(safe-area-inset-top))) 24px max(24px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)));gap:0;text-align:left;background-image:none}
/* The welcome lies on the page's own drafting grid, the whole way down. */
:root[data-theme] #welcome{background-color:transparent}
/* Handing off to the first shot: the welcome covers the app until the shot is drawn. */
:root[data-theme] body.welcome-leaving #welcome{position:fixed;inset:0;z-index:80;width:auto;max-width:none;margin:0;background-color:var(--es-ground);background-image:var(--sheet-background);background-size:100vw 100dvh,100vw 100dvh,100px 100px,100px 100px,20px 20px,20px 20px}
#welcome>.welcome-wordmark{width:auto;height:auto;margin:0 0 clamp(42px,9svh,86px);font-size:1rem}
#welcome .welcome-brand h1{margin:0;font:750 clamp(32px,10vw,44px)/1.1 var(--display);letter-spacing:-.045em;text-transform:none}
#welcome .welcome-brand>p{margin:16px 0 0;font:400 1rem/1.5 var(--card-label);color:var(--es-ink-2)}
#welcome .welcome-brand{margin:0 0 32px}
#welcome .welcome-actions{margin:0;display:grid;gap:0}
#welcome #welcome-guest{min-height:54px;font-size:1rem}
#welcome .welcome-help{justify-self:center;margin:8px 0;min-height:44px;font-size:.85rem}
#welcome .welcome-account{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--es-line);text-align:center;font-size:.8rem}
#welcome .welcome-account summary{min-height:44px;display:grid;place-items:center;cursor:pointer;list-style:none;color:var(--es-ink-2)}
#welcome .welcome-account summary::-webkit-details-marker{display:none}
#welcome .welcome-account summary:hover{text-decoration:underline;text-underline-offset:4px}
#welcome .welcome-reason{margin:4px 0 16px;font-size:.8rem;color:var(--es-ink-2)}
#welcome .welcome-legal{margin:auto 0 0!important;padding-top:24px;text-align:center;font-size:.68rem!important;color:var(--es-ink-2)}
@media(max-height:650px){
  #welcome>.welcome-wordmark{margin-bottom:30px}
}

@media(max-height:720px){
  #welcome>.welcome-wordmark{margin-bottom:32px}
  #welcome .welcome-brand{margin-bottom:24px}
}

/* Leave the transient status message below the entry links at the scroll end. */
body.web-app[data-phase="intro"] #app{padding-bottom:112px}



/* An unarmed shot has the same solid material as its game field. */
:root[data-theme] body.shot-ready #play{
  width:100%;max-width:520px;min-height:0!important;height:auto!important;flex:none!important;
  padding:22px;margin:16px auto 24px;gap:20px;
  background:var(--es-surface);border:1px solid var(--es-line);border-radius:20px;box-shadow:var(--es-shadow)
}
:root[data-theme] body.shot-ready #stage{width:100%;max-width:none;height:auto;min-height:0;aspect-ratio:auto;margin:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body.shot-ready #cv,body.shot-ready #rotation-host{display:none}
body.shot-ready .stage-ui{position:static;inset:auto;height:auto;display:block;padding:0}
#shot-ready{padding:0;text-align:left;color:var(--ink)}
#shot-ready .ready-summary{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:16px}
#shot-ready .ready-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--es-surface-2);color:var(--study-blue)}
#shot-ready .ready-mark>.game-icon{width:36px;height:36px}
#shot-ready .ready-what{display:grid;gap:5px;min-width:0}
#shot-ready .ready-family{margin:0;font:700 .68rem/1.2 var(--card-label);letter-spacing:.14em;text-transform:uppercase;color:var(--es-ink-3)}
#shot-ready h2{margin:0;font:700 clamp(1.02rem,4.4vw,1.18rem)/1.3 var(--card-label);letter-spacing:0;color:var(--es-ink);text-transform:none}
body.shot-ready #instr:empty,body.shot-ready #hint:empty{display:none}
body.shot-ready #shot-heading{margin-bottom:8px}
:root[data-theme] body.shot-ready #play>.dock{padding:0;margin:0;background:none;border:0;box-shadow:none;gap:0}
:root[data-theme] body.shot-ready #controls{gap:4px}
:root[data-theme] body.shot-ready #controls>#shot-ready-play{min-height:52px;border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 5px 14px -9px rgba(3,10,22,.35)}
:root[data-theme] body.shot-ready #controls>#shot-ready-practice{justify-self:center;width:auto;max-width:100%;min-height:44px;padding:0 10px;background:none;border:0;border-radius:8px;box-shadow:none;font-size:.85rem;font-weight:500;text-decoration:underline;text-decoration-color:var(--es-line-strong);text-underline-offset:4px}
@media(max-height:680px){:root[data-theme] body.shot-ready #play{padding:18px;margin-top:8px;gap:16px}}
@media(max-width:359px){:root[data-theme] body.shot-ready #play{padding:16px;gap:16px}#shot-ready .ready-summary{grid-template-columns:48px minmax(0,1fr);gap:12px}#shot-ready .ready-mark{width:48px;height:48px;border-radius:14px}#shot-ready .ready-mark>.game-icon{width:28px;height:28px}}
#controls>.rehearsal-back{min-height:44px}


/* ---------- How to play: a centred card with a shot playing itself ---------- */
@keyframes es-pop{from{opacity:0;transform:translateY(12px) scale(.97)}}
dialog.es-modal{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--es-line);border-radius:20px;background:var(--es-surface);color:var(--es-ink);box-shadow:var(--es-shadow)}
dialog.es-modal::backdrop{background:rgba(3,10,22,.55);backdrop-filter:blur(3px)}
dialog.es-modal[open]{animation:es-pop .26s cubic-bezier(.2,.85,.25,1)}
dialog.es-modal[open]::backdrop{animation:es-fade .22s ease}
dialog.es-modal.is-closing{animation:es-pop .17s cubic-bezier(.4,0,1,1) reverse forwards}
dialog.es-modal.is-closing::backdrop{opacity:0;transition:opacity .17s}
dialog.is-dismissing::backdrop{opacity:0;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){dialog.es-modal[open],dialog.es-modal.is-closing,dialog.es-modal[open]::backdrop{animation:none}}
.help-modal{position:relative;display:grid;gap:14px;padding:18px 22px 20px;margin:0;border:0;background:none;box-shadow:none;max-width:none}
.help-modal>*{margin:0}
.help-close{position:absolute;top:10px;right:10px;z-index:1;min-width:44px;min-height:44px;color:var(--es-ink-2)}
#dlg-help h2{margin:2px 0 0;font:900 34px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--es-ink)}
.help-demo{margin:28px 0 2px}
.help-demo svg{display:block;width:100%;height:auto}
.demo-field{fill:var(--es-ground);stroke:var(--es-line)}
.demo-grid{stroke:var(--es-line);stroke-width:1;opacity:.55}
.demo-dot{fill:var(--es-ink)}
.demo-truth{stroke:var(--truth,var(--study-blue));stroke-width:3;stroke-dasharray:7 7;stroke-linecap:round;opacity:0;animation:demo-truth 5.2s ease-in-out infinite}
.demo-stroke{stroke:var(--pencil);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:demo-stroke 5.2s cubic-bezier(.45,.05,.4,1) infinite}
.demo-score{transform-box:fill-box;transform-origin:center;opacity:0;animation:demo-score 5.2s cubic-bezier(.2,.9,.3,1.3) infinite}
.demo-score rect{fill:var(--band-good)}
.demo-score text{fill:var(--band-text,#142333);font:900 25px/1 var(--display);text-anchor:middle}
@keyframes demo-stroke{0%,8%{stroke-dashoffset:1;opacity:1}38%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes demo-truth{0%,40%{opacity:0}48%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes demo-score{0%,52%{opacity:0;transform:scale(.6)}58%{opacity:1;transform:scale(1.06)}62%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
.help-steps{display:grid;gap:4px;padding:0;list-style:none;counter-reset:help}
.help-steps li{counter-increment:help;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:8px 10px 8px 8px;border-radius:12px;animation:help-step 5.2s ease infinite}
.help-steps li::before{content:counter(help);grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--es-line-strong);font:700 13px/1 var(--card-label,inherit);color:var(--es-ink-2)}
.help-steps b{font-size:.98rem;line-height:1.3}
/* A shade nearer the ink than ink-2, so it still reads on the lit row (AA). */
.help-steps span{font-size:.86rem;line-height:1.4;color:color-mix(in srgb,var(--es-ink-2) 70%,var(--es-ink))}
.help-steps li:nth-child(2){animation-name:help-step-2}
.help-steps li:nth-child(3){animation-name:help-step-3}
/* The step being demonstrated lifts: a tinted row and a coral number. */
.help-steps li::before{animation:inherit;animation-name:help-num}
.help-steps li:nth-child(2)::before{animation-name:help-num-2}
.help-steps li:nth-child(3)::before{animation-name:help-num-3}
@keyframes help-step{0%,38%{background:color-mix(in srgb,var(--es-ink) 8%,transparent)}42%,100%{background:transparent}}
@keyframes help-step-2{0%,40%{background:transparent}44%,54%{background:color-mix(in srgb,var(--es-ink) 8%,transparent)}58%,100%{background:transparent}}
@keyframes help-step-3{0%,56%{background:transparent}60%,92%{background:color-mix(in srgb,var(--es-ink) 8%,transparent)}96%,100%{background:transparent}}
@keyframes help-num{0%,38%{background:var(--pencil);border-color:var(--pencil);color:var(--es-ground)}42%,100%{background:transparent;border-color:var(--es-line-strong);color:var(--es-ink-2)}}
@keyframes help-num-2{0%,40%{background:transparent;border-color:var(--es-line-strong);color:var(--es-ink-2)}44%,54%{background:var(--pencil);border-color:var(--pencil);color:var(--es-ground)}58%,100%{background:transparent;border-color:var(--es-line-strong);color:var(--es-ink-2)}}
@keyframes help-num-3{0%,56%{background:transparent;border-color:var(--es-line-strong);color:var(--es-ink-2)}60%,92%{background:var(--pencil);border-color:var(--pencil);color:var(--es-ground)}96%,100%{background:transparent;border-color:var(--es-line-strong);color:var(--es-ink-2)}}



.help-daily{font-size:.86rem;line-height:1.45;color:var(--es-ink-2)}
#dlg-help .btn.primary{width:100%;min-height:52px}
.help-more{border-top:1px solid var(--es-line)}
.help-more+.help-more{border-top:1px solid var(--es-line)}
.help-more:last-of-type{border-bottom:1px solid var(--es-line)}
#dlg-help .ev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0 0 14px;padding:0;list-style:none;background:none;box-shadow:none}
#dlg-help .ev-list li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start;padding:9px 10px;border:1px solid var(--es-line);border-radius:12px}
#dlg-help .ev-list li>span:first-child{grid-row:span 2;color:var(--es-ink-2)}
#dlg-help .ev-list li>span:first-child svg{width:20px;height:20px}
#dlg-help .ev-list li b{font-size:.82rem;line-height:1.25;text-transform:none;letter-spacing:0}
#dlg-help .ev-list li>span:last-child{font-size:.74rem;line-height:1.35;color:var(--es-ink-2)}
.help-tagline{font-size:.78rem;color:var(--es-ink-3);text-align:center}
@media (prefers-reduced-motion:reduce){
  .demo-stroke{animation:none;stroke-dashoffset:0}.demo-truth,.demo-score{animation:none;opacity:1}
  .help-steps li,.help-steps li::before{animation:none}
}

/* ---------- Today's hero: the target is drawn, the lids draw in ----------
   The iris and pupil never move. The upper arch draws left to right with a
   gentle start and a soft landing, the pen lifts, then the lower arch draws
   (timings inline in todaySketch). Each strand starts fully off its path (the
   dash sits just before the start) so a round cap never shows as a dot early. */
.today-sketch .draw{stroke-dasharray:1 2;stroke-dashoffset:0;animation:hero-draw .36s cubic-bezier(.35,0,.25,1) both}
.today-sketch .draw.lid-bottom{animation-timing-function:cubic-bezier(.3,0,.3,1)}
@keyframes hero-draw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
/* Held until the launch screen has gone, so the whole gesture is seen. */
html:not([data-hero-ready]) .today-sketch .draw{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.today-sketch .draw{animation:none}}
/* The reminder sheet reads as one centred card, headline included. */
#dlg-reminder-intro .reminder-intro h2{text-align:center}