/* Six Degrees Daily. Light Rams panel, the degree sign as the system. See docs/BRAND.md. */

:root {
  /* color: every accent is a printed hex from the DR01/DR06 pin; one job each */
  --ground: #F4F1EB;
  --surface: #FDFCFA;
  --well: #ECE8E1;
  --ink: #261201;
  --ink-2: #5E5046;
  --ink-3: #736356;
  --hairline: rgba(38, 18, 1, .10);
  --hairline-2: rgba(38, 18, 1, .18);
  --signal: #ED8008;   /* the one primary action per screen; fill only (2.42:1) */
  --live: #ED3F1C;     /* you are here */
  --miss: #BF1B1B;     /* errors, always with × */
  --solved: #736B1E;   /* verified; never on --well */
  --hint: #AAB7BF;
  --focus: #261201;

  /* elevation: warm-ink shadows, never black */
  --e1: 0 1px 2px rgba(38, 18, 1, .04), 0 4px 12px rgba(38, 18, 1, .05);
  --e2: 0 2px 4px rgba(38, 18, 1, .05), 0 12px 24px -6px rgba(38, 18, 1, .10);
  --e3: 0 -16px 48px -8px rgba(38, 18, 1, .16);
  --e-toast: 0 16px 40px -12px rgba(38, 18, 1, .28);

  /* type: Google Sans Flex, four weights */
  --font: 'Google Sans Flex', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;

  /* space (4-pt) and form */
  --gutter: 20px;
  --r-tag: 6px; --r-poster: 10px; --r-photo: 12px; --r-control: 16px; --r-sheet: 28px;

  /* motion: arrive = ease-out or spring, move = ease-in-out, leave = faster than it came */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --spring: linear(0, .126, .369, .606, .789, .909, .978, 1.011, 1.022, 1.022, 1.017, 1.011, 1.006, 1.003, 1); /* k380 c30, 420ms */
  --t-press: 90ms; --t-1: 160ms; --t-2: 240ms; --t-3: 360ms; --t-spring: 420ms;

  --vvh: 100dvh;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #151311; --surface: #1F1C19; --well: #0F0E0C;
    --ink: #F1ECE4; --ink-2: #A69C90; --ink-3: #8F8579;
    --hairline: rgba(241, 236, 228, .10); --hairline-2: rgba(241, 236, 228, .18);
    --live: #FF5A36; --miss: #FF8A73; --solved: #B5AA3A; --focus: #ED8008;
    --e1: inset 0 1px 0 rgba(255, 255, 255, .06); --e2: inset 0 1px 0 rgba(255, 255, 255, .08);
    --e3: 0 -1px 0 rgba(255, 255, 255, .06); --e-toast: 0 0 0 1px rgba(255, 255, 255, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .theme-dark {
  --ground: #151311; --surface: #1F1C19; --well: #0F0E0C;
  --ink: #F1ECE4; --ink-2: #A69C90; --ink-3: #8F8579;
  --hairline: rgba(241, 236, 228, .10); --hairline-2: rgba(241, 236, 228, .18);
  --live: #FF5A36; --miss: #FF8A73; --solved: #B5AA3A; --focus: #ED8008;
  --e1: inset 0 1px 0 rgba(255, 255, 255, .06); --e2: inset 0 1px 0 rgba(255, 255, 255, .08);
  color-scheme: dark;
}

/* ---------- base + Butterick ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;     /* 17px body */
  line-height: 1.4;
  font-weight: 400;
  font-kerning: normal;
  font-synthesis: none;
  /* Kerning pairs, standard ligatures and contextual alternates on everywhere; figures stay
     proportional except where .num opts into tabular. Semibold (600) is the heaviest weight. */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(237, 128, 8, .28); }
input { caret-color: var(--signal); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b, strong { font-weight: 600; } /* semibold is the heaviest weight; the UA default is 700 */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 1; }
em { font-style: italic; }

/* Label: caps of four words or fewer, letterspaced (Butterick: 5-12%) */
.label { font-size: .75rem; line-height: 1.3; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---------- frame ---------- */

.app {
  height: var(--vvh);
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 12px);
}

.masthead { flex: none; height: 56px; display: flex; align-items: center; gap: 8px; }
.lockup { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.mark { width: 29px; height: 24px; flex: none; color: var(--ink); }
.wordmark { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.daily { align-self: center; margin-top: 2px; }
.tools { margin-left: auto; display: flex; gap: 2px; margin-right: -10px; }
.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-1) var(--ease-out), transform var(--t-spring) var(--spring);
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: var(--well); }
.icon-btn:active { transform: scale(.92); transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }

.stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; padding-bottom: 16px; }
.stage::-webkit-scrollbar { display: none; }

/* ---------- route bar: the hero ---------- */

.routebar { padding: 8px 0 20px; }
.rb-top { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 14px; }
.rb-top .spacer { flex: 1; }
.rb-live { display: inline-flex; align-items: center; gap: 6px; }
.rb-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.rb-row { display: grid; grid-template-columns: 76px 1fr 76px; align-items: start; gap: 4px; }
.end { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.face { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--well); flex: none; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face::after, .photo::after, .poster::after, .still::after, .art::after, .kf::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.end.b .face { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--solved); }
.end-name { font-size: .9375rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rings { position: relative; height: 64px; display: flex; align-items: center; justify-content: space-evenly; }
.rings::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--hairline-2); transform-origin: left; }
.ring { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hairline-2); background: var(--ground);
  transition: background var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out); }
.ring.is-crossed { background: var(--ink); border-color: var(--ink); }
.ring.is-live { border-color: var(--live); }
.ring.is-over::after { content: '+1'; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.ring.just-crossed { animation: ring-fill var(--t-spring) var(--spring) both; }
@keyframes ring-fill { from { transform: scale(.4); background: var(--ground); } }
.routebar.is-compact { padding-bottom: 8px; }
.routebar.is-compact .rb-row { display: none; }
.routebar.is-compact .rb-top { margin-bottom: 0; }

/* hard-mode switch */
.switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 0; }
.switch .track { width: 34px; height: 20px; border-radius: 10px; background: var(--well); position: relative; box-shadow: inset 0 0 0 1px var(--hairline-2); transition: background var(--t-2) var(--ease-out); }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: var(--e1), 0 0 0 1px var(--hairline); transition: transform var(--t-spring) var(--spring); }
.switch[aria-checked="true"] .track { background: var(--ink); }
.switch[aria-checked="true"] .track::after { transform: translateX(14px); }

/* ---------- photos ---------- */

.photo { position: relative; display: block; width: 48px; height: 60px; border-radius: var(--r-photo); overflow: hidden; background: var(--well); flex: none; }
.photo img, .poster img, .still img, .kf img, .art img { width: 100%; height: 100%; object-fit: cover; }
img.loading { opacity: 0; }
img.loaded { opacity: 1; transition: opacity var(--t-2) var(--ease-out); }
.monogram {
  position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: .9375rem; color: var(--ink-2); letter-spacing: .02em;
  background: radial-gradient(circle, rgba(38, 18, 1, .08) 1.5px, transparent 2px) 0 0 / 12px 12px, var(--well);
}

/* ---------- the chain ---------- */

.chain { list-style: none; margin: 0; padding: 0; }
.hop-link { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 4px 0; }
.rail { justify-self: center; width: 1.5px; min-height: 40px; background: var(--hairline-2); transform-origin: top; }
.via { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 4px 0; }
.via.has-still { display: block; position: relative; max-width: 300px; }
.still { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-poster); overflow: hidden; background: var(--well); box-shadow: var(--e1); }
.poster { position: relative; display: block; width: 40px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--well); flex: none; }
.via-cap { display: block; }
.via.has-still .via-cap { margin-top: 8px; }
.via .t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.via .y { display: block; margin-top: 2px; }
.hop-node { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 4px 0; }
.hop-node .name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.hop-node.is-here .photo { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--live); overflow: hidden; }
.hop-node.is-target .photo { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--solved); }
.hop-node .meta { display: block; margin-top: 2px; }

.to-go { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 8px 0 4px; }
.dots { justify-self: center; width: 4px; min-height: 72px; background: radial-gradient(circle, var(--hairline-2) 1.6px, transparent 2px) 50% 0 / 4px 10px repeat-y; }
.to-go p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.to-go .count { color: var(--ink); font-weight: 600; }
.hint-line { margin: 10px 0 0 !important; padding-left: 16px; position: relative; color: var(--ink) !important; max-width: 60ch; }
.hint-line::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--hint); }
.hint-line.is-new { animation: rise var(--t-2) var(--ease-out) both; }
.hint-line.is-new::before { animation: pulse var(--t-3) var(--ease-out) both; }
@keyframes pulse { 50% { transform: scale(1.6); } }

/* before the first hop: the route at par, as slots to fill */
.ghost .rail { width: 0; background: none; border-left: 1.5px dashed var(--hairline-2); }
.ghost .photo, .ghost .poster { background: none; box-shadow: none; border: 1.5px dashed var(--hairline-2); }
.ghost .photo::after, .ghost .poster::after { content: none; }
.ghost .t, .ghost .name { color: var(--ink-3); font-weight: 500; }

/* known-for posters (actor card) */
.kf-row { display: flex; gap: 8px; }
.kf { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--well); }
.kf-cap { display: block; margin-top: 6px; font-size: .8125rem; font-weight: 500; line-height: 1.25; color: var(--ink-2); }
.kf-wrap { flex: 1; max-width: 88px; min-width: 0; }

/* hop snap: rail draws, still develops, photo snaps */
.enter .rail { animation: draw var(--t-2) var(--ease-out) both; }
.enter .still { animation: develop .6s var(--ease-out) 80ms both; }
.enter .poster, .enter .via-cap { animation: rise var(--t-2) var(--ease-out) 80ms both; }
.hop-node.enter .photo { animation: snap var(--t-spring) var(--spring) 140ms both; }
.hop-node.enter .name { animation: rise var(--t-2) var(--ease-out) 180ms both; }
@keyframes draw { from { transform: scaleY(0); } }
@keyframes develop { from { filter: grayscale(1) brightness(.85); opacity: .4; } }
@keyframes snap { from { transform: scale(.85); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.leaving { animation: leave var(--t-2) var(--ease-exit) both; }
@keyframes leave { to { opacity: 0; transform: translateY(-4px); } }

/* ---------- verdict ---------- */

.verdict { padding: 4px 0 20px; }
.verdict h2 { margin: 0; font-size: 1.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.verdict .label { display: block; margin: 8px 0 6px; }
.verdict .label.ok { color: var(--solved); }
.verdict .label.lost { color: var(--miss); }
.verdict p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.row-link {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 20px 0 0; padding: 14px 16px; min-height: 56px;
  border: 0; border-radius: var(--r-control); background: var(--surface); box-shadow: var(--e1); cursor: pointer; text-align: left;
  font-weight: 600; transition: transform var(--t-spring) var(--spring), box-shadow var(--t-2) var(--ease-out);
}
.row-link .sub { display: block; font-weight: 400; font-size: .9375rem; color: var(--ink-2); margin-top: 2px; }
.row-link .chev { margin-left: auto; color: var(--ink-3); font-size: 1.25rem; }
.row-link:active { transform: scale(.98); transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }

/* ---------- search results + picker ---------- */

.step-q { margin: 4px 0 14px; font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; }
.step-q b { color: var(--ink); }
.results { list-style: none; margin: 0; padding: 0; }
.results li + li .row-btn::before { content: ''; position: absolute; left: 72px; right: 12px; top: 0; height: 1px; background: var(--hairline); }
.row-btn {
  position: relative; width: 100%; min-height: 64px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 10px 12px; border: 0; border-radius: var(--r-photo); background: transparent; text-align: left; cursor: pointer;
  transition: background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.row-btn .photo { width: 44px; height: 55px; border-radius: 10px; }
.row-btn > span { min-width: 0; }
.row-btn .name { display: block; font-weight: 600; letter-spacing: -.01em; }
.row-btn .known { display: block; font-size: .9375rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-btn .chev { color: var(--ink-3); font-size: 1.25rem; }
.row-btn:hover, .row-btn.is-active { background: var(--surface); box-shadow: var(--e2); }
.row-btn.is-active::before, .row-btn:hover::before { opacity: 0; }
.results.in li { animation: rise var(--t-2) var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); }
.stale { opacity: .45; pointer-events: none; transition: opacity var(--t-1); }
.empty-note { padding: 24px 4px; color: var(--ink-2); max-width: 60ch; }
.empty-note b { color: var(--ink); }
.text-btn { border: 0; background: none; padding: 10px 0; color: var(--ink); font-weight: 600; cursor: pointer; }

.anchor { display: flex; gap: 12px; align-items: center; padding: 4px 0 16px; color: var(--ink-2); }
.anchor .face { width: 44px; height: 44px; }
.anchor b { color: var(--ink); }
.recent-faces { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 12px; }
.recent-faces::-webkit-scrollbar { display: none; }
.recent { flex: none; width: 96px; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; }
.recent .photo { width: 56px; height: 70px; margin: 0 auto 6px; }
.recent span:last-child { font-size: .75rem; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
.poster-btn { border: 0; padding: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--r-poster); min-width: 0; }
.art { position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-poster); overflow: hidden; background: var(--well); box-shadow: var(--e1);
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-2) var(--ease-out); }
.art .fallback { height: 100%; display: grid; place-items: center; padding: 8px; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.poster-btn:active .art { transform: scale(.96); transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }
.poster-btn .cap-t { display: -webkit-box; margin-top: 8px; font-size: .8125rem; font-weight: 500; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poster-btn .cap-y { display: block; margin-top: 2px; }
.posters.in .poster-btn { animation: rise var(--t-2) var(--ease-out) both; animation-delay: calc(min(var(--i), 8) * 25ms); }
.poster-btn.is-checking .art { box-shadow: var(--e2); transform: translateY(-2px); }
.checking { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--e1); display: grid; place-items: center; }
.checking::after { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hairline-2); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.poster-btn.is-miss .art img { opacity: .4; filter: grayscale(.6); }
.miss-badge { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--miss); color: #fff; display: grid; place-items: center; font-size: .875rem; font-weight: 600; }
.poster-btn.is-miss .cap-t { color: var(--miss); }
.poster-btn.just-missed .miss-badge { animation: snap var(--t-spring) var(--spring) both; }
.miss-line { display: flex; gap: 10px; align-items: baseline; margin: 0 0 16px; padding: 2px 0 2px 12px; border-left: 3px solid var(--miss); color: var(--miss); font-size: .9375rem; font-weight: 500; max-width: 60ch; }
.miss-line.is-new { animation: slide-down var(--t-2) var(--ease-out) both; }
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } }
.shake { animation: shake 280ms var(--ease-in-out); }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }

/* ---------- deck (thumb zone) ---------- */

.deck { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 10px; position: relative; }
.deck.is-scrolled::before { content: ''; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 0; height: 1px; background: var(--hairline); }
.prompt { margin: 0; font-size: .9375rem; color: var(--ink-2); padding: 0 4px; text-wrap: balance; }
.prompt b { color: var(--ink); font-weight: 600; }
.field {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px 4px 16px;
  border-radius: var(--r-control); background: var(--surface); box-shadow: var(--e1), inset 0 0 0 1px var(--hairline);
  transition: box-shadow var(--t-1) var(--ease-out);
}
.field:focus-within { box-shadow: var(--e2), inset 0 0 0 1.5px var(--ink); }
.field > svg { width: 20px; height: 20px; flex: none; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; }
.field input { flex: 1 1 0; width: 0; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 1.0625rem; font-weight: 500; outline: none; }
.field input::placeholder { color: var(--ink-3); font-weight: 400; }
.field input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--well); flex: none;
  font-size: .9375rem; font-weight: 600; animation: snap var(--t-spring) var(--spring) both; }
.pill .face { width: 28px; height: 28px; }
.pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field .clear { flex: none; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--well); font-size: .9375rem; font-weight: 600; cursor: pointer; }

.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  position: relative; min-height: 56px; border: 0; border-radius: var(--r-control); background: var(--surface); box-shadow: var(--e1), inset 0 0 0 1px var(--hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-2) var(--ease-out), opacity var(--t-1);
}
.key .label { font-size: .75rem; }
.key:active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 0 0 1px var(--hairline); transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }
.key:disabled { opacity: .4; cursor: default; }
.key .dot { position: absolute; top: 10px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--hint); }

.btn {
  min-height: 56px; width: 100%; border: 0; border-radius: var(--r-control); cursor: pointer;
  font-size: 1.0625rem; font-weight: 600; color: #261201; background: var(--signal); box-shadow: var(--e1);
  transition: transform var(--t-spring) var(--spring), box-shadow var(--t-2) var(--ease-out);
}
.btn:active { transform: scale(.97); box-shadow: none; transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }
.btn-quiet { background: var(--surface); color: var(--ink); box-shadow: var(--e1), inset 0 0 0 1px var(--hairline); }
.btn .swap { display: inline-block; }
.btn .swap.in { animation: rise var(--t-1) var(--ease-out) both; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-btn { border: 0; background: none; padding: 12px 4px; color: var(--ink-2); font-weight: 500; cursor: pointer; }

/* ---------- empty / error / loading ---------- */

.state { min-height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 32px 8px; }
.state h2 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; }
.state p { margin: 0; color: var(--ink-2); max-width: 32ch; }
.state .btn { max-width: 220px; margin-top: 8px; }
.six { display: flex; gap: 10px; margin-bottom: 8px; }
.six i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hairline-2); }
.six.filling i { animation: fill-seq 2.4s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 200ms); }
@keyframes fill-seq { 0%, 100% { background: transparent; border-color: var(--hairline-2); } 30%, 60% { background: var(--ink); border-color: var(--ink); } }
.six .x { border-color: var(--miss); position: relative; }
.six .x::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .625rem; line-height: 1; color: var(--miss); font-weight: 600; }
.skeleton { display: grid; gap: 12px; }
.skeleton i { display: block; height: 64px; border-radius: var(--r-control); background: linear-gradient(90deg, var(--well), var(--surface), var(--well)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- solve moment (always dark) ---------- */

.solved-burst { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: #151311; color: #F1ECE4; animation: fade var(--t-2) var(--ease-out) both; }
.solved-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: saturate(.75); animation: still-in 2.6s var(--ease-out) both; }
.solved-burst::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 45%, transparent, #151311 92%); }
@keyframes still-in { from { transform: scale(1.1); opacity: 0; } }
.solved-stack { position: relative; z-index: 2; display: grid; justify-items: center; gap: 20px; }
.solved-route { display: flex; align-items: center; gap: 0; position: relative; }
.solved-route .face { width: 56px; height: 56px; box-shadow: 0 0 0 2px #151311; animation: snap var(--t-spring) var(--spring) both; animation-delay: calc(var(--i) * 220ms); }
.solved-route .face::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.solved-route .face:first-child, .solved-route .face:last-child { box-shadow: 0 0 0 2px #151311, 0 0 0 3.5px #B5AA3A; }
.solved-route .seg { width: 34px; height: 1.5px; background: rgba(241, 236, 228, .5); position: relative; transform-origin: left; animation: draw-x var(--t-2) var(--ease-out) both; animation-delay: calc(var(--i) * 220ms - 110ms); }
.solved-route .seg i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #F1ECE4; animation: snap var(--t-spring) var(--spring) both; animation-delay: calc(var(--i) * 220ms); }
@keyframes draw-x { from { transform: scaleX(0); } }
.solved-num { display: grid; justify-items: center; gap: 6px; animation: num-in .7s var(--ease-out) both; animation-delay: var(--land); }
.solved-num .big { font-size: 7rem; line-height: 1; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.solved-num .label { color: #B5AA3A; }
.solved-num .milestone { color: var(--signal); }
@keyframes num-in { from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px); } }
.solved-out { animation: fade-out var(--t-2) var(--ease-exit) both; }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- sheets ---------- */

.sheet-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(21, 19, 17, .32); animation: fade 380ms var(--ease-out) both; }
.sheet-scrim.out { animation: fade-out 260ms var(--ease-exit) both; }
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 480px; max-height: 90dvh;
  border: 0; padding: 0; z-index: 21; overflow: auto; overscroll-behavior: contain;
  background: var(--ground); color: var(--ink); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--e3);
  animation: sheet-in 380ms var(--ease-out) both;
}
.sheet.out { animation: sheet-out 260ms var(--ease-exit) both; }
.sheet[open] { display: block; }
.sheet::backdrop { background: transparent; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.sheet-in { padding: 10px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--hairline-2); margin: 0 auto 16px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sheet h2 { margin: 0; font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.sheet h2:focus { outline: none; }
.sheet h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.sheet p { color: var(--ink-2); margin: 0 0 12px; max-width: 60ch; }
.sheet .sub { display: block; margin-top: 8px; }
.close { width: 44px; height: 44px; flex: none; margin: -6px -10px 0 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.close svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.close:hover { background: var(--well); }
.section { margin-top: 28px; }
.section > .label { display: block; margin-bottom: 10px; }
.sheet .in > * { animation: rise var(--t-2) var(--ease-out) both; }

/* results sheet */
.recap { display: flex; align-items: center; margin: 4px 0 20px; }
.recap .face { width: 32px; height: 32px; }
.recap .seg { width: 22px; height: 1.5px; background: var(--hairline-2); position: relative; }
.recap .seg i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0 20px; }
.stat { text-align: center; }
.stat b { display: block; font-size: 2.125rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.week { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.week .label { display: block; margin-bottom: 8px; }
.week i { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--hairline-2);
  font-style: normal; font-size: .75rem; font-weight: 600; line-height: 1; }
.week .w-solved i { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.week .w-gave_up i { border-color: var(--miss); color: var(--miss); }
.week .w-playing i { border-color: var(--live); }
.week .w-none i { opacity: .4; }
.proof { margin: -4px 0 16px !important; }
.proof b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dist { display: grid; gap: 8px; margin-bottom: 8px; }
.dist-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.dist-bar { height: 24px; border-radius: 6px; position: relative; }
.dist-bar i { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; min-width: 24px;
  border-radius: 6px; background: var(--hairline-2); color: var(--ink); font-style: normal; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transform-origin: left; animation: grow var(--t-3) var(--ease-out) both; }
.dist-bar i.is-today { background: var(--ink); color: var(--ground); }
@keyframes grow { from { transform: scaleX(0); } }

/* leaderboard */
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--well); border-radius: 14px; padding: 4px; margin-bottom: 16px; position: relative; }
.tabs button { position: relative; z-index: 1; min-height: 40px; border: 0; border-radius: 10px; background: none; font-weight: 600; cursor: pointer; color: var(--ink-2); transition: color var(--t-1); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--surface); box-shadow: var(--e1); transition: transform var(--t-2) var(--ease-in-out); }
.tabs[data-at="all"] .thumb { transform: translateX(100%); }
.board-head { margin: 0 0 8px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { animation: rise var(--t-2) var(--ease-out) both; animation-delay: calc(min(var(--i), 10) * 30ms); }
.board-row { width: 100%; min-height: 56px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center;
  padding: 8px 4px; border: 0; border-bottom: 1px solid var(--hairline); background: none; text-align: left; cursor: pointer; }
.board-row.me { background: var(--surface); box-shadow: var(--e1); border-radius: var(--r-photo); border-bottom-color: transparent; padding-inline: 10px; }
.board-row .rank { font-size: .9375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.board-row .h { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .score { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.board-row .score .label { margin-left: 6px; }
.board-row .chev { color: var(--ink-3); }
.board-row.all { grid-template-columns: 24px minmax(0, 1fr) 48px 44px 36px; gap: 8px; cursor: default; }
.board-row.all .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.board-cols { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px 44px 36px; gap: 8px; padding: 0 4px 6px; }
.board-cols .label { white-space: nowrap; }
.board-cols .label { text-align: right; }
.board-row.locked .chev { visibility: hidden; }
.tag { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-tag); background: var(--ink); color: var(--ground); margin-left: 6px; vertical-align: 2px; }
.lock-note { color: var(--ink-2); padding: 8px 10px; border-radius: 10px; margin: 0 0 8px; }
.lock-note.flash { animation: flash var(--t-3) var(--ease-out); }
@keyframes flash { from { background: var(--well); } }
.nudge { animation: nudge 200ms var(--ease-in-out); }
@keyframes nudge { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }

/* pages inside a sheet (player chain) */
.page-in { animation: push-in var(--t-3) var(--ease-in-out) both; }
.page-back { animation: push-back var(--t-3) var(--ease-in-out) both; }
@keyframes push-in { from { transform: translateX(40%); opacity: 0; } }
@keyframes push-back { from { transform: translateX(-30%); opacity: 0; } }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 8px -6px; padding: 0 6px; border: 0; background: none; font-weight: 600; color: var(--ink); cursor: pointer; }

/* routes */
.route-card { background: var(--surface); box-shadow: var(--e1); border-radius: var(--r-control); margin-bottom: 10px; overflow: hidden; animation: rise var(--t-2) var(--ease-out) both; animation-delay: calc(min(var(--i), 8) * 40ms); }
.route-card > button { width: 100%; border: 0; background: none; text-align: left; padding: 14px 16px; cursor: pointer; display: grid; gap: 8px; }
.route-card .recap { margin: 0; }
.route-card .seg { transform-origin: left; animation: draw-x var(--t-3) var(--ease-in-out) both; animation-delay: calc(min(var(--i), 8) * 40ms + 120ms); }
.route-card .via-line { font-size: .9375rem; color: var(--ink-2); }
.route-card .via-line em { color: var(--ink); }
.route-card > button { grid-template-columns: 1fr auto; align-items: center; }
.route-card .recap { grid-row: 1; grid-column: 1; }
.route-card .count { grid-row: 1; grid-column: 2; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.route-card .count.label { font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.route-card .via-line { grid-column: 1 / -1; }
.route-card .detail { padding: 0 16px 12px; interpolate-size: allow-keywords; }
.route-card[open] > button { padding-bottom: 6px; }
.route-card .detail .chain { animation: rise var(--t-2) var(--ease-out) both; }

/* claim + install + onboarding */
.claim { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.claim-form { display: grid; gap: 10px; margin-top: 12px; }
.claim-form .at { color: var(--ink-3); font-weight: 600; }
.claim-form .count { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-right: 8px; }
.claim .err { color: var(--miss); font-size: .9375rem; min-height: 1.4em; margin: 0; }
.install { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.install img { border-radius: 11px; box-shadow: 0 0 0 1px var(--hairline); }
.install p { margin: 0 !important; }
.install .btn-row, .install .link-btn { grid-column: 1 / -1; }
.ios-share { width: 17px; height: 17px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.how-route { background: var(--surface); box-shadow: var(--e1); border-radius: 20px; padding: 18px 16px 16px; margin: 0 0 20px; }
.how-route .rb-row { grid-template-columns: 84px 1fr 84px; }
.how-route .face { width: 56px; height: 56px; }
.how-route .rings { height: 56px; }
.rules { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 12px; }
.rules li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; color: var(--ink-2); max-width: 60ch; }
.rules li b { color: var(--ink); }
.rules .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: .8125rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.how-actions { display: grid; gap: 4px; }
.attrib { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.attrib img { width: 72px; height: auto; flex: none; }
.deck-attrib { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; font-size: .75rem; color: var(--ink-3); }
.deck-attrib img { width: 44px; opacity: .85; }
.footer-attrib { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 4px; font-size: .75rem; color: var(--ink-3); }
.footer-attrib img { width: 48px; opacity: .85; }

/* toast: above the deck; at the top while a sheet is open */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 168px); transform: translateX(-50%); z-index: 40;
  max-width: calc(100% - 40px); padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--ground);
  font-size: .9375rem; font-weight: 500; text-align: center; box-shadow: var(--e-toast); animation: toast-in var(--t-2) var(--ease-out) both;
}
body.has-sheet .toast { top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: auto; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- launch screen (motion is driven from app.js) ---------- */

#launch .l-ring { position: absolute; left: 50%; top: 42%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--ink); background: var(--ground); }
#launch .l-ring.first { border-color: var(--signal); }
#launch .l-line { position: absolute; left: 50%; top: 42%; width: 240px; height: 1.5px; margin: -.75px 0 0 -120px; background: var(--hairline-2); transform-origin: left; transform: scaleX(0); }
#launch .l-face { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; }
#launch .l-face-in { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--well); opacity: 0; }
#launch .l-face-in img { width: 100%; height: 100%; object-fit: cover; }
#launch .l-wait { position: absolute; left: 0; right: 0; top: calc(42% + 48px); text-align: center; font-size: .9375rem; color: var(--ink-2); opacity: 0; transition: opacity var(--t-3); }
#launch .l-wait.on { opacity: 1; }

/* ---------- reduced motion: remove distance and time, never state ---------- */

@media (prefers-reduced-motion: reduce) {
  .enter .rail, .enter .still, .enter .poster, .enter .via-cap, .hop-node.enter .photo, .hop-node.enter .name,
  .results.in li, .posters.in .poster-btn, .board li, .route-card, .route-card .seg, .sheet .in > *, .pill,
  .hint-line.is-new, .miss-line.is-new, .btn .swap.in, .ring.just-crossed,
  .solved-route .face, .solved-route .seg, .solved-route .seg i, .solved-num, .solved-still, .dist-bar i, .route-card .detail .chain {
    animation: fade 150ms ease both !important; animation-delay: 0s !important;
  }
  .shake, .nudge, .leaving, .hint-line.is-new::before, .poster-btn.just-missed .miss-badge, .page-in, .page-back, .lock-note.flash { animation: none !important; }
  .sheet, .sheet.out { animation-name: fade, fade-out; animation-duration: 150ms !important; }
  .sheet { animation-name: fade; } .sheet.out { animation-name: fade-out; }
  .six.filling i, .skeleton i, .checking::after { animation: none !important; }
  .key, .btn, .icon-btn, .art, .row-link, .switch .track::after, .tabs .thumb { transition-property: background, box-shadow, opacity, color !important; }
}

@media (min-width: 560px) {
  body { display: grid; place-items: center; }
  .app { height: min(var(--vvh), 940px); width: 440px; }
}

/* actor card: tap any face */
.actor-btn { display: block; padding: 0; border: 0; background: none; border-radius: inherit; cursor: pointer;
  transition: transform var(--t-spring) var(--spring); }
.end .actor-btn { border-radius: 50%; }
.hop-node .actor-btn { border-radius: var(--r-photo); }
.actor-btn:active { transform: scale(.94); transition-duration: var(--t-press); transition-timing-function: var(--ease-out); }
.actor-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.actor-photos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 16px; padding: 0 var(--gutter) 4px; }
.actor-photos::-webkit-scrollbar { display: none; }
.actor-photo { position: relative; flex: none; width: 128px; aspect-ratio: 4 / 5; border-radius: var(--r-photo); overflow: hidden; background: var(--well);
  scroll-snap-align: start; box-shadow: var(--e1); animation: rise var(--t-2) var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.actor-photo:first-child { width: 160px; }
.actor-photo img { width: 100%; height: 100%; object-fit: cover; }
.actor-photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); }
.bio { color: var(--ink) !important; max-width: 60ch; hanging-punctuation: first; }
@media (prefers-reduced-motion: reduce) { .actor-photo { animation: fade 150ms ease both !important; animation-delay: 0s !important; } }

/* what's new */
.releases { list-style: none; margin: 0; padding: 0; }
.release { padding: 18px 0; border-top: 1px solid var(--hairline); }
.release:first-child { border-top: 0; padding-top: 4px; }
.rel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.rel-v { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.release.latest .rel-v { background: var(--signal); color: #261201; border-radius: var(--r-tag); padding: 1px 7px; }
.release h3 { margin: 0 0 8px; font-size: 1.375rem; letter-spacing: -.015em; line-height: 1.2; }
.release ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-2); max-width: 60ch; }
.release li::marker { color: var(--ink-3); }

/* settings rows in a sheet: hard mode, daily nudge */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.setting + .setting { margin-top: 0; }
.setting p { margin: 0 !important; }

/* swipe to close: the drag zone belongs to the gesture, not to scrolling */
.sheet-grab, .sheet-head { touch-action: none; }
.sheet-grab { height: 5px; margin: 0 auto; padding: 0; position: relative; }
.sheet-grab::before { content: ''; position: absolute; inset: -12px -40px -14px; } /* a 44px-tall target around the 5px handle */
.sheet-in > .sheet-grab, .sheet-in > div > .sheet-grab { margin-bottom: 16px; }

/* search morph: the puzzle's faces and rings fold away; the label row glides */
.routebar .rb-top { view-transition-name: rb-top; }
.routebar .rb-row { view-transition-name: rb-row; }
/* Chrome that persists across the morph keeps its own snapshot, so it never blinks with the page. */
.masthead { view-transition-name: masthead; }
#deck .field { view-transition-name: field; }
::view-transition-group(field) { animation-duration: var(--t-2); animation-timing-function: var(--ease-in-out); }
::view-transition-group(rb-top) { animation-duration: var(--t-2); animation-timing-function: var(--ease-in-out); }
/* Old leaves first (120ms), new arrives after (100ms delay), so the two never double-expose. */
::view-transition-old(rb-row) { animation: vt-fold 120ms var(--ease-exit) both; }
::view-transition-new(rb-row) { animation: vt-unfold var(--t-2) var(--ease-out) both; }
::view-transition-old(root) { animation-duration: 120ms; }
::view-transition-new(root) { animation-duration: 140ms; animation-delay: 100ms; }
@keyframes vt-fold { to { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes vt-unfold { from { opacity: 0; transform: translateY(-8px) scale(.96); } }

/* photo into the field */
.fly-photo { position: fixed; z-index: 50; margin: 0; pointer-events: none; overflow: hidden; box-shadow: var(--e2); }
.pill.landing .face { opacity: 0; }
.pill.landing { animation: none; }