/* Move Well — the look.

   His call (2026-09-25, evening): "the app is still too dark… I like the rest of it to feel sunny
   and happy because that is what makes us want to get up and enjoy the day". So: light only,
   never dark (the dark scheme is gone on purpose). The Days Out NI key: the light sky blue and
   the gold of the sun, on a pale sunny paper. Eat Real's system underneath: white cards with a
   two-tone gradient outline in the card's own colours (--c / --cd), pill tabs, pill buttons that
   dip and spring back when tapped (the Light School's feel, in gold), eyebrows with a dash, one
   heavy sans, and a bouncy spring on everything you touch. */
:root {
  --paper: #F3FAFE; --paper-2: #E3F3FB; --card: #FFFFFF; --glass: rgba(255,255,255,.88);
  --ink: #1B3A4B; --ink-soft: #3F627A; --ink-mute: #6F91A6; --line: #D5E8F3; --line-2: #E4F1F8; --rule: #C3DCEA;

  --sky: #5FB1DD; --sky-d: #1F5E8A; --sky-l: #BFE4F5; --sky-p: #EAF6FC;
  --sun: #FFCE3D; --sun-d: #D99A00; --sun-p: #FFF6D6;
  --teal: #2BBFB0; --teal-d: #128A80; --teal-p: #E6F8F6;
  --zest: #FF9A3D; --zest-d: #DD6A14; --zest-p: #FFF1E4;
  --lime: #7FCB5A; --lime-d: #3E8F26; --lime-p: #EDF8E8;
  --violet: #8E7CE6; --violet-d: #5B49C4; --violet-p: #EFEDFB;
  --coral: #F2685B; --coral-d: #C93A3D; --coral-p: #FDECEC;

  --accent: var(--sky); --accent-d: var(--sky-d);
  --go: linear-gradient(135deg, #8AD0F0 0%, #5FB1DD 55%, #1F5E8A 100%);
  --gold: linear-gradient(135deg, #FFE68A 0%, #FFCE3D 55%, #E9A800 100%);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(31,94,138,.05), 0 4px 14px rgba(31,94,138,.08);
  --shadow-md: 0 2px 6px rgba(31,94,138,.06), 0 12px 30px rgba(31,94,138,.13);
  --r: 20px; --r-s: 14px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease: cubic-bezier(.22,.61,.36,1);
  --band: 38vh; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light only;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 16.5px/1.5 var(--sans); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(1.5rem, 6.2vw, 1.9rem); font-weight: 850; } h2 { font-size: 1.25rem; font-weight: 800; } h3 { font-size: 1.06rem; font-weight: 800; }
p { margin: 0 0 .8em; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
a { color: var(--accent-d); font-weight: 600; }
.small { font-size: .86em; } .muted { color: var(--ink-mute); } .soft { color: var(--ink-soft); }
.mt { margin-top: 1em; } .center { text-align: center; }

/* ================= the band: outside, the two of them ================= */
/* the scene and the tabs stay put while the page scrolls under them (his: "they should stay in
   place"). Fixed, not sticky: sticky dropped out on his older iPhone. main is padded by the stage's
   own height (--stage-h, measured in shell.js), so folding the scene away gives the page the room. */
#stage { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
main { padding-top: calc(var(--stage-h, 45vh) + 12px) !important; }
#band { position: relative; height: calc(var(--band) + var(--safe-t)); overflow: hidden; background: #BFE3F6; transition: height .5s var(--ease); isolation: isolate; }
#band .room-svg { position: absolute; inset: -2%; width: 104%; height: 104%; }
#stage.tucked #band { height: calc(58px + var(--safe-t)); }
#stage.tucked .fig, #stage.tucked #bubble { opacity: 0; pointer-events: none; }
.rays { animation: rays 60s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rays { to { transform: rotate(360deg); } }
.clouds { animation: drift 46s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
.mote { animation: mote var(--d) ease-in-out infinite; animation-delay: calc(var(--o) * -1); opacity: 0; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(6px, -14px); } 80% { opacity: .6; } 100% { transform: translate(-4px, -26px); opacity: 0; } }
/* Eat Real's framing: bigger than the band, from the knees up, so the faces read on a phone */
.fig { position: absolute; bottom: -31%; height: 128%; width: 66%; z-index: 3; cursor: pointer; transform-origin: 50% 100%; transition: opacity .3s, height .5s var(--spring), bottom .5s var(--spring); filter: drop-shadow(0 8px 14px rgba(30,60,30,.16)); }
.fig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fig.a { left: -6%; } .fig.t { right: -6%; left: auto; }
.fig.is-hidden { opacity: 0; }
#band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 4; background: linear-gradient(to bottom, transparent, rgba(241,247,252,.6)); pointer-events: none; }
/* the heads-up row: day left, sound / fold / help right */
#bandbar { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 9px); z-index: 6; display: flex; gap: 7px; align-items: center; padding: 0 10px; pointer-events: none; }
#bandbar > * { pointer-events: auto; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 18px; background: var(--glass); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(20,60,90,.14), inset 0 0 0 1px rgba(27,154,214,.32); font-weight: 750; font-size: 14.5px; transition: transform .2s var(--spring); }
.pill:active { transform: scale(.94); }
.pill.icon { width: 36px; padding: 0; justify-content: center; color: var(--sky-d); font-weight: 800; }
.pill.icon svg { width: 17px; height: 17px; }
.pill.off { color: var(--ink-mute); position: relative; overflow: hidden; }
.pill.off::after { content: ''; position: absolute; left: -3px; top: 50%; width: 42px; height: 3px; background: var(--coral-d); transform: rotate(-40deg); border-radius: 2px; box-shadow: 0 0 0 1.5px #fff; }
.spacer { flex: 1; }
#backbtn { position: absolute; left: 10px; bottom: 12px; z-index: 7; transition: transform .2s var(--spring), bottom .5s var(--ease); }
#backbtn[hidden] { display: none; }
#backbtn svg { width: 16px; height: 16px; }
#stage.tucked #backbtn { bottom: auto; top: calc(var(--safe-t) + 9px); }
#stage.tucked.hasback #daypill { visibility: hidden; }
#stage.hasback #bubble { bottom: 58px; }
#bubble { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; background: var(--glass); border-radius: 16px; padding: 9px 13px; font-size: .93rem; font-weight: 600; line-height: 1.4; box-shadow: var(--shadow-md); color: var(--ink); animation: pop .4s var(--spring); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#bubble .who { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky-d); margin-bottom: 1px; }
@keyframes pop { from { transform: translateY(8px) scale(.96); opacity: 0 } }
/* the light in the scene follows the clock */
/* a warm touch at dawn and dusk only; never a dark night scene (his: sunny, never dark). The day's light comes from the three. */
#band.dawn .daylight { opacity: .12 !important; } #band.dusk .daylight, #band.night .daylight { opacity: .14 !important; }

/* a ribbon across the scene for a win */
.hail { position: absolute; left: 50%; top: 50%; z-index: 7; transform: translate(-50%, -50%); min-width: 62%; max-width: 88%; text-align: center; padding: 10px 26px 11px; color: #fff; background: linear-gradient(135deg, var(--sun) 0%, var(--zest) 100%); border-radius: 14px; box-shadow: 0 10px 26px rgba(221,95,20,.32), inset 0 0 0 2px rgba(255,255,255,.55); animation: hailin .7s var(--spring) both; pointer-events: none; }
.hail::before, .hail::after { content: ""; position: absolute; top: 50%; width: 22px; height: 64%; transform: translateY(-38%); background: var(--zest-d); z-index: -1; }
.hail::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); } .hail::after { right: -12px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.hail b { display: block; font-size: 1.28rem; font-weight: 850; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 0 rgba(120,50,20,.25); }
.hail span { display: block; font-size: .8rem; font-weight: 750; opacity: .95; letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }
.hail.out { animation: hailout .55s var(--ease) both; }
@keyframes hailin { from { transform: translate(-50%, -260%) rotate(-5deg) scale(.7); } to { transform: translate(-50%, -50%); } }
@keyframes hailout { to { transform: translate(-50%, -300%) scale(.8); opacity: 0; } }

/* ================= tabs ================= */
#tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 9px 10px 7px; background: var(--paper); position: relative; z-index: 31; }
.tab { height: 40px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); font-weight: 750; font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: 5px; transition: transform .2s var(--spring); }
.tab:active { transform: scale(.95); }
.tab svg { width: 16px; height: 16px; opacity: .75; }
.tab.on { background: var(--go); color: #fff; box-shadow: 0 8px 18px rgba(14,109,166,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.tab.on svg { opacity: 1; }

/* ================= the page ================= */
main { padding: 12px 14px calc(40px + var(--safe-b)); max-width: 620px; margin: 0 auto; }
.page { animation: pagein .45s var(--ease) both; }
@keyframes pagein { from { transform: translateY(12px); opacity: 0 } }
.lede { color: var(--ink-soft); font-size: 1.02em; margin: -.2em 0 1em; }
.sec-title { font-size: 1.2rem; font-weight: 850; margin: 1.3em 0 .25em; letter-spacing: -.02em; }
.sec-sub { color: var(--ink-mute); font-size: .92em; margin: 0 0 .8em; }
.rowhead { display: flex; align-items: center; justify-content: space-between; margin: 1.3em 0 .6em; gap: 10px; }
.rowhead .sec-title { margin: 0; }
.foot { margin: 2em 0 0; text-align: center; font-size: .78em; color: var(--ink-mute); }
.foot .ver { display: inline-block; margin-top: .5em; padding: .15em .6em; border-radius: 9px; background: var(--paper-2); font-weight: 700; }

/* ================= building blocks ================= */
/* the gradient outline on every card, tile and surface, in the card's own two colours */
.card, .tile, .btn, .chip, .task, .stat, .today-card, .stagecard, .medal-cell, .steprow { --c: var(--sky); --cd: var(--sky-d); }
.card { position: relative; background: var(--card); border-radius: var(--r); padding: 18px 18px 16px; margin: 0 0 12px; box-shadow: var(--shadow-sm); }
.card::before, .tile::before, .today-card::before, .stat::before, .stagecard::before, .task::before, .medal-cell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; background: linear-gradient(135deg, var(--c), var(--cd)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .75; z-index: 1; }
.card.hero { padding: 20px; }
.card.flat { box-shadow: none; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--cd, var(--sky-d)); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c), var(--cd)); flex: none; }
.eyebrow.plain::before { display: none; }
.row { display: flex; gap: 10px; align-items: center; }
.btnrow { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }

/* buttons: pills that pop */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 46px; padding: .6em 1.25em; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1.6px var(--c); transition: transform .2s var(--spring), box-shadow .2s; }
.btn:active { transform: scale(.95); }
.press { animation: press .5s var(--spring); }
@keyframes press { 0% { transform: scale(1); } 35% { transform: scale(.94); } 100% { transform: scale(1); } }
.btn.primary { color: #2B2210; background: var(--gold); box-shadow: 0 10px 24px rgba(217,154,0,.32), inset 0 1px 0 rgba(255,255,255,.55); }
.btn.primary.sky { color: #fff; background: var(--go); box-shadow: 0 10px 22px rgba(31,94,138,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.big { min-height: 54px; font-size: 1.08rem; padding: .7em 1.6em; }
.btn.wide { width: 100%; }
.btn.small { min-height: 38px; padding: .4em 1em; font-size: .9rem; }
.btn.quiet { background: transparent; box-shadow: none; color: var(--ink-soft); font-weight: 700; min-height: 40px; padding: .4em .8em; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.6px var(--c); color: var(--cd); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; padding: .45em .95em; border-radius: 999px; background: var(--card); font-weight: 750; font-size: .88em; color: var(--ink-soft); box-shadow: inset 0 0 0 1.4px var(--line); white-space: nowrap; transition: transform .2s var(--spring); }
.chip.on { color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: 0 6px 14px rgba(20,60,90,.16); }
.chip:active { transform: scale(.95); }
.tag { display: inline-block; font-size: .72em; font-weight: 800; letter-spacing: .04em; padding: .2em .65em; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); white-space: nowrap; }
.tag.yours { background: var(--lime-p); color: var(--lime-d); }
.tag.here { background: var(--sky-p); color: var(--sky-d); }
.tag.nearly { background: var(--sun-p); color: var(--sun-d); }
.bar, .meter { height: 8px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.bar i, .meter i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c), var(--cd)); transition: width .6s var(--spring); }
.callout { position: relative; border-radius: 16px; padding: 12px 14px; margin: 0 0 12px; background: var(--sky-p); color: var(--ink-soft); font-size: .95em; }
.callout.warm { background: var(--sun-p); } .callout.calm { background: var(--teal-p); }
details.drop { padding: 0; }
details.drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 8px; font-weight: 800; font-size: 1em; color: var(--ink); }
details.drop > summary::-webkit-details-marker { display: none; }
details.drop > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.6px solid var(--cd); border-bottom: 2.6px solid var(--cd); transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--spring); }
details.drop[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.drop > :not(summary) { animation: dropin .35s var(--ease) both; }
@keyframes dropin { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.card > details.drop { border-top: 1.3px solid var(--line-2); margin-top: 8px; }

/* pictures of a movement */
.move { display: block; width: 100%; height: auto; border-radius: 14px; object-fit: cover; background: #E9F3F9; }
.move.drawn { display: block; } .move.drawn svg { display: block; width: 100%; height: auto; }
.thumb { flex: none; width: 82px; height: 82px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); background: #E9F3F9; }
.thumb .move { width: 100%; height: 100%; border-radius: 0; }
.thumb.big { width: 96px; height: 96px; }
.hero-pic { position: relative; overflow: hidden; border-radius: 18px; margin: 0 auto 12px; max-width: 360px; box-shadow: var(--shadow-sm); }
.hero-pic .move { border-radius: 0; }
.card > .pic.top { margin: -18px -18px 14px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; aspect-ratio: 720 / 420; position: relative; }
.card.hero > .pic.top { margin: -20px -20px 16px; }
.pic.top .move { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 0; }
.pic.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c), var(--cd)); }

/* tiles */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s var(--spring); }
.tile:active { transform: scale(.97); }
.tile .pic { display: block; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; background: #E9F3F9; }
.tile .pic .move { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 0; }
.tile .lab { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tile .lab b { font-weight: 800; font-size: .98em; line-height: 1.2; }
.tile .lab span { color: var(--ink-mute); font-size: .82em; line-height: 1.35; }
.tile .lab .mt2 { margin-top: auto; padding-top: 6px; font-size: .72em; font-weight: 800; letter-spacing: .05em; color: var(--cd); text-transform: uppercase; }
.tile .badge { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: .68em; font-weight: 800; padding: .25em .6em; border-radius: 9px; background: var(--sun-p); color: var(--sun-d); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

/* the guide's words, in the page */
.hello { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 12px; }
.ava { flex: none; display: block; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, var(--sky-l), #FFE9B8); box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--sky-l), var(--shadow-sm); }
.ava svg { width: 100%; height: 100%; display: block; }
.bubble { position: relative; flex: 1; min-width: 0; background: var(--card); border-radius: 6px 18px 18px 18px; padding: 10px 14px 11px; box-shadow: var(--shadow-sm); }
.bubble .eyebrow { margin-bottom: .25em; font-size: .68rem; }
.bubble p { margin: 0; font-weight: 600; color: var(--ink-soft); line-height: 1.4; }
.bubble p b { color: var(--ink); font-weight: 800; }
.nameask { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.nameask .chip { padding: .45em .7em; font-size: .8em; }
.nameask input { flex: 1 1 90px; min-width: 0; font: inherit; font-size: 16px; padding: .5em .8em; border-radius: 12px; border: 1.4px solid var(--line); background: var(--paper); color: var(--ink); }

/* ================= today: the three, as tasks you open ================= */
.tasks { display: grid; gap: 8px; }
.task { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 10px 12px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform .2s var(--spring), box-shadow .3s; color: var(--ink); }
.task:active { transform: scale(.98); }
.task .thumb { width: 66px; height: 66px; border-radius: 14px; }
.task .tx { flex: 1; min-width: 0; }
.task b { display: block; font-size: 1.02em; line-height: 1.2; }
.task small { display: block; color: var(--ink-mute); font-size: .82em; line-height: 1.35; margin-top: 2px; }
.task .kind { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cd); }
.task .tick { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--rule); position: relative; transition: background .3s, box-shadow .3s; display: grid; place-items: center; color: transparent; }
.task .tick svg { width: 16px; height: 16px; }
.task .pts { flex: none; font-style: normal; font-weight: 850; font-size: .8em; color: var(--cd); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--c); border-radius: 10px; padding: 3px 7px; }
.task.on { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--c); }
.task.on .tick { background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: none; color: #fff; animation: tickpop .45s var(--spring); }
.task.on .pts { background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; box-shadow: none; }
.task.on b { color: var(--cd); }
.task.on .thumb { filter: saturate(.85); }
@keyframes tickpop { from { transform: scale(.4); } to { transform: none; } }
.tasks.fresh .task:last-child { animation: bonusin .45s var(--spring) both; }
.task.on { animation: taskdone .5s var(--spring); }
@keyframes taskdone { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: none; } }
.done-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.done-chips > span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-right: 2px; }
.dchip { border: 0; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 9px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.dchip b { opacity: .85; margin-left: 2px; }
@keyframes bonusin { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.done-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(99,190,67,.2), rgba(245,184,61,.18)); font-size: .92em; }
.done-banner .tk { flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #8BD07C, var(--lime-d)); display: grid; place-items: center; color: #fff; }
.done-banner .tk svg { width: 16px; height: 16px; }
.done-banner span { flex: 1; }
.done-banner small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-d); }
.done-banner b { display: block; font-size: 1.06em; color: var(--ink); }
.done-banner em { font-style: normal; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--sun), var(--zest)); border-radius: 12px; padding: 4px 9px; }
.pts-week { flex: none; font-size: 12px; font-weight: 800; color: var(--sky-d); background: rgba(27,154,214,.12); border-radius: 12px; padding: 5px 9px; align-self: flex-start; }
.ptsfloat { position: fixed; z-index: 99; font-weight: 900; font-size: 20px; color: var(--lime-d); pointer-events: none; animation: ptsup 1.1s var(--ease) forwards; text-shadow: 0 2px 6px rgba(255,255,255,.9); }
@keyframes ptsup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { transform: translateY(-6px) scale(1.15); opacity: 1; } 100% { transform: translateY(-46px) scale(1); opacity: 0; } }

/* the three lights: one sun per thing, lit gold when it is done (the Light School's three) */
.lights { display: flex; justify-content: center; gap: 18px; margin: 2px 0 12px; }
.lights i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--rule); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--spring); }
.lights i svg { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.lights i svg path { fill: none; }
.lights i.lit { background: var(--gold); color: #7A4E00; box-shadow: 0 6px 16px rgba(217,154,0,.35), 0 0 0 4px rgba(255,206,61,.22); transform: scale(1.08); animation: lightup .6s var(--spring); }
/* the light grows: the scene's brightness follows the day's three (data-light 0..3) */
#band .dimmer { opacity: 0; transition: opacity 1.6s ease; }
#band .sun { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--spring), opacity 1.6s ease, filter 1.6s ease; }
#band .sun-glow, #band .sun-rays { transition: opacity 1.6s ease; }
#band[data-light="0"] .dimmer { opacity: .5; }
#band[data-light="0"] .sun { transform: scale(.74); filter: saturate(.6) brightness(1.04); }
#band[data-light="0"] .sun-glow { opacity: .25; } #band[data-light="0"] .sun-rays { opacity: .15; }
#band[data-light="1"] .dimmer { opacity: .3; }
#band[data-light="1"] .sun { transform: scale(.84); filter: saturate(.65); }
#band[data-light="1"] .sun-glow { opacity: .45; } #band[data-light="1"] .sun-rays { opacity: .45; }
#band[data-light="2"] .dimmer { opacity: .13; }
#band[data-light="2"] .sun { transform: scale(.94); filter: saturate(.9); }
#band[data-light="2"] .sun-glow { opacity: .75; } #band[data-light="2"] .sun-rays { opacity: .8; }
#band[data-light="3"] .sun { transform: scale(1.12); filter: saturate(1.1) brightness(1.05); }
#band.brighten .sun-core { animation: sunpulse 1.6s var(--spring); transform-box: fill-box; transform-origin: center; }
@keyframes sunpulse { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
#band.brighten::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 42% 12%, rgba(255,236,150,.75), rgba(255,236,150,0) 55%); animation: sunflash 1.6s ease-out forwards; }
@keyframes sunflash { from { opacity: 1; } to { opacity: 0; } }
@keyframes lightup { 0% { transform: scale(.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1.08); } }

/* the streak card */
.streak-card { display: block; padding: 14px 16px 12px; text-decoration: none; color: inherit; background: linear-gradient(160deg, #FFFBEC, var(--card) 55%); }
.streak-top { display: flex; align-items: center; gap: 12px; }
.flame { width: 40px; height: 48px; flex: none; filter: grayscale(.85) opacity(.55); transition: filter .6s; }
.flame.lit { filter: none; animation: flick 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes flick { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.04, .97) rotate(-1.5deg); } }
.streak-n b { display: block; font-size: 2.1em; font-weight: 900; line-height: 1; color: var(--cd); }
.streak-n span { font-size: .8em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.rank { margin-left: auto; width: 44%; text-align: right; }
.rank .rk { display: inline-block; font-weight: 900; font-size: .9em; color: #fff; background: linear-gradient(135deg, var(--sky), var(--violet-d)); border-radius: 10px; padding: 3px 9px; }
.rank .meter { margin: 6px 0 3px; height: 6px; }
.rank small { font-size: .74em; color: var(--ink-mute); font-weight: 700; }
.streak-say { margin: 8px 0 8px !important; font-weight: 700; color: var(--ink-soft); }
.weekbar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekbar i { font-style: normal; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .85em; color: var(--ink-mute); background: var(--paper); }
.weekbar i.ok { background: var(--go); color: #fff; }
.weekbar.slim i { height: 30px; border-radius: 10px; font-size: .74em; }
.weekbar i.now { box-shadow: inset 0 0 0 2px var(--sun); }
.weekbar i.now.ok { box-shadow: 0 0 0 2px var(--sun-p), 0 0 0 3.5px var(--sun); }
.next-medal { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1.4px solid var(--line-2); }
.next-medal b { display: block; font-size: .9em; font-weight: 800; } .next-medal small { color: var(--ink-mute); font-weight: 650; font-size: .8em; }
.scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 10px 0 4px; }
.scale span { font-size: 10.5px; font-weight: 800; text-align: center; padding: 6px 2px; border-radius: 9px; background: var(--paper); color: var(--ink-mute); }
.scale span.on { background: linear-gradient(135deg, var(--sky), var(--violet-d)); color: #fff; }
.scale span.past { background: rgba(27,154,214,.16); color: var(--sky-d); }

/* the progress card: the path bar, the medals won, the scale */
.progress-card { background: linear-gradient(160deg, var(--sky-p), var(--card) 60%); }
.progress-card .pathbar { margin: 8px 0 4px; }
.trophies { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.trophies .med svg { width: 34px; height: 34px; }
.trophies .more { font-size: .8em; font-weight: 800; color: var(--sky-d); margin-left: 4px; }
.trophies .none { font-size: .84em; color: var(--ink-mute); }
/* a word from one of them */
.wordcard { background: linear-gradient(160deg, var(--sun-p), var(--card) 65%); }
.wordline { font-size: 1.04em; font-weight: 650; line-height: 1.45; color: var(--ink); margin: 0 0 .3em; }

/* the tomorrow promise, and the faces that close the day */
.promise-card { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--sun-p); border-radius: 18px; padding: 12px 14px; margin: 0 0 12px; box-shadow: inset 0 0 0 1.4px rgba(255,206,61,.55); }
.promise-card span { font-size: .92em; line-height: 1.35; color: var(--ink-soft); } .promise-card b { color: var(--ink); display: block; }
.promise-card .btn { flex: none; }
.promise-card.kept { background: var(--lime-p); box-shadow: inset 0 0 0 1.4px rgba(127,203,90,.5); justify-content: flex-start; }
.promise-card.kept svg { flex: none; width: 26px; height: 26px; color: var(--lime-d); }
.faces { display: flex; gap: 10px; }
.face { flex: 1; height: 72px; border-radius: 18px; display: grid; place-items: center; gap: 2px; background: var(--paper); box-shadow: inset 0 0 0 1.4px var(--line); color: var(--ink-soft); transition: transform .2s var(--spring); }
.face svg { width: 30px; height: 30px; } .face small { font-size: .74em; font-weight: 800; }
.face:active { transform: scale(.94); }

/* small cards in a pair */
.today-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.today-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border-radius: 18px; background: var(--card); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); min-height: 108px; transition: transform .2s var(--spring); text-align: left; }
.today-card:active { transform: scale(.97); }
.today-card .kind { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cd); }
.today-card .line { font-weight: 800; line-height: 1.25; }
.today-card .sub { margin-top: auto; font-size: .8em; color: var(--ink-mute); }
.today-card > .tpic { margin: -13px -14px 4px; aspect-ratio: 720 / 400; overflow: hidden; border-radius: 18px 18px 0 0; background: #E9F3F9; }
.today-card > .tpic .move { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 0; }
.hand-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.hand-card .ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; }
.hand-card .ic svg { width: 26px; height: 26px; }
.hand-card b { display: block; } .hand-card .small { margin: 0; }

/* ================= the path ================= */
.pathtop h2 { font-size: 1.3rem; }
.pathtop.allin { background: linear-gradient(160deg, var(--lime-p), var(--card) 60%); }
.pathbar { display: flex; align-items: flex-start; gap: 4px; margin: 14px 0 6px; }
.pathbar .seg { flex: 1; min-width: 0; text-decoration: none; text-align: center; padding: 6px 0 0; }
.pathbar .seg span { display: block; height: 16px; border-radius: 6px; background: var(--line-2); overflow: hidden; box-shadow: inset 0 0 0 1.3px var(--line); }
.pathbar .seg i { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--cd)); transition: width .6s var(--spring); }
.pathbar .seg.in span { box-shadow: none; }
.pathbar small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 800; color: var(--ink-mute); }
.pathbar .endzone { flex: none; width: 50px; text-align: center; color: var(--ink-mute); }
.pathbar .endzone svg { display: block; width: 28px; height: 28px; margin: 0 auto -3px; padding: 5px; border-radius: 9px; background: var(--line-2); }
.pathbar .endzone small { font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pathbar .endzone.lit { color: var(--lime-d); }
.pathbar .endzone.lit svg { color: #fff; background: linear-gradient(135deg, var(--sun), var(--zest)); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(245,184,61,.1); } 50% { box-shadow: 0 0 0 7px rgba(245,184,61,.22); } }
details.stagecard { position: relative; background: var(--card); border-radius: var(--r); margin-bottom: 12px; box-shadow: var(--shadow-sm); padding: 0; }
details.stagecard.here { box-shadow: var(--shadow-md); }
details.stagecard > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
details.stagecard > summary::-webkit-details-marker { display: none; }
details.stagecard > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.6px solid var(--cd); border-bottom: 2.6px solid var(--cd); transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--spring); margin-right: 4px; }
details.stagecard[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.stagecard > .body { padding: 0 16px 16px; animation: dropin .35s var(--ease) both; }
.leg-thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--c), var(--cd)); }
.leg-thumb .move { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 0; }
.leg-thumb .n { position: absolute; left: 4px; top: 4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 850; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.leg-thumb .n svg { width: 13px; height: 13px; }
.stagecard h3 { margin: 0; }
.leg-sub { font-size: .84em; color: var(--ink-mute); margin-top: 3px; }
.leg-sub .tag { margin-right: .3em; }
.leg-meter { height: 8px; border-radius: 5px; background: var(--line-2); overflow: hidden; margin: 6px 0 3px; }
.leg-meter i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c), var(--cd)); transition: width .6s var(--spring); }
.leg-tag { font-weight: 750; margin: 0 0 .4em; color: var(--ink); }
.steprows { margin-top: 12px; border-radius: 16px; background: var(--paper); overflow: hidden; }
.steprow { display: flex; align-items: center; border-top: 1.3px solid var(--line-2); }
.steprow:first-child { border-top: 0; }
.steprow .stick { flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.steprow .stick i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 2px var(--rule); color: transparent; transition: transform .35s var(--spring), background .2s; }
.steprow .stick svg { width: 15px; height: 15px; }
.steprow .stick:active i { transform: scale(.85); }
.steprow.done .stick i { background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: none; color: #fff; }
.steprow.today .stick i { background: var(--card); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); color: var(--cd); }
.steprow .txt { flex: 1; min-width: 0; padding: 9px 30px 9px 0; text-align: left; color: var(--ink); position: relative; }
.steprow .txt::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2.4px solid var(--ink-mute); border-bottom: 2.4px solid var(--ink-mute); transform: translateY(-50%) rotate(-45deg); opacity: .6; }
.steprow .txt span { display: block; font-weight: 750; font-size: .95em; line-height: 1.25; }
.steprow .txt small { display: block; font-size: .76em; font-weight: 600; color: var(--ink-mute); }
.steprow.done .txt span { color: var(--cd); }
.steprow .steps { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
.steprow .steps i { width: 16px; height: 5px; border-radius: 3px; background: var(--line); }
.steprow .steps i.on { background: linear-gradient(90deg, var(--c), var(--cd)); }
.goals { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.goal { display: inline-flex; align-items: center; gap: 7px; padding: .45em .9em .45em .6em; border-radius: 999px; background: var(--paper); font-size: .86em; font-weight: 700; color: var(--ink-soft); box-shadow: inset 0 0 0 1.3px var(--line); text-align: left; }
.goal .dot { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--rule); display: grid; place-items: center; flex: none; color: transparent; }
.goal .dot svg { width: 11px; height: 11px; }
.goal.got { color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: none; }
.goal.got .dot { background: rgba(255,255,255,.25); box-shadow: none; color: #fff; }
.pathline { display: inline-block; margin: -.35em 0 .8em; font-size: .8em; font-weight: 800; color: var(--cd); text-decoration: none; }
.pathline::after { content: " ›"; }

/* a routine's movement list, and an ability's page */
.abil { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1.3px solid var(--line-2); }
.abil:first-child { border-top: 0; padding-top: 2px; }
.abil .txt { display: block; flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); }
.abil .txt b { display: block; font-weight: 800; line-height: 1.2; }
.abil .txt span { display: block; font-size: .84em; color: var(--ink-mute); line-height: 1.35; margin-top: 2px; }
.abil .txt .meta { font-size: .76em; font-weight: 800; letter-spacing: .04em; color: var(--cd); text-transform: uppercase; margin-top: 4px; }
.lvl { display: flex; gap: 6px; flex-wrap: wrap; }

/* ================= you ================= */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: .3em 0 12px; }
.stat { position: relative; background: var(--card); border-radius: 16px; padding: 11px 8px; text-align: center; box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: 1.4em; font-weight: 850; letter-spacing: -.02em; color: var(--cd); }
.stat span { font-size: .72em; color: var(--ink-mute); font-weight: 700; line-height: 1.25; display: block; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 10px 0 8px; }
.month i { display: block; height: 18px; border-radius: 6px; background: var(--line-2); }
.month i.on { background: linear-gradient(135deg, #8BD07C, var(--lime-d)); }
.month i.big { background: linear-gradient(135deg, var(--sun), var(--zest)); }
.month i.now { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink-mute); }
.month-key { display: flex; gap: 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-mute); margin-bottom: 6px; }
.month-key span { display: inline-flex; align-items: center; gap: 5px; }
.month-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.medal-cell { position: relative; background: var(--card); border-radius: 16px; padding: 12px 6px 10px; text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.medal-cell b { font-size: .8em; font-weight: 800; line-height: 1.2; margin-top: 4px; }
.medal-cell small { font-size: .68em; color: var(--ink-mute); font-weight: 650; line-height: 1.25; }
.medal-cell:not(.on) b { color: var(--ink-mute); }
.medal-cell:not(.on)::before { opacity: .25; }
.medal-cell.on { --c: var(--sun); --cd: var(--zest); }
.med svg { filter: drop-shadow(0 3px 5px rgba(60,50,20,.16)); }
.switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--paper); border-radius: 16px; padding: 12px 14px; margin-top: 10px; }
.switchrow b { display: block; font-weight: 800; } .switchrow small { color: var(--ink-mute); font-weight: 600; font-size: .8em; }
.switch { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .25s var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s var(--spring); }
.switch.on { background: var(--go); } .switch.on::after { transform: translateX(18px); }

/* ================= the player: a glance from across the room ================= */
#play { position: fixed; inset: 0; background: var(--paper); z-index: 60; display: flex; flex-direction: column; animation: fade .3s; padding-top: var(--safe-t); }
@keyframes fade { from { opacity: 0 } }
#play .pbar { height: 6px; background: var(--line-2); }
#play .pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--cd)); transition: width .5s var(--spring); }
#play .top { padding: 10px 14px 4px; display: flex; align-items: center; gap: 8px; }
#play .stage { flex: 1 1 auto; display: grid; place-items: center; padding: 0 14px; min-height: 0; }
#play .stage > div { width: 100%; max-width: 420px; }
#play .shot { animation: shotin .45s var(--spring); }
#play .shot .move { max-height: 38vh; width: auto; max-width: 100%; margin: 0 auto; border-radius: 22px; box-shadow: var(--shadow-md); }
@keyframes shotin { from { opacity: 0; transform: scale(.96) } }
#play .foot { flex: 0 0 auto; padding: 6px 16px calc(14px + var(--safe-b)); max-width: 520px; width: 100%; margin: 0 auto; }
#play .now { text-align: center; }
#play .now .eyebrow { justify-content: center; }
#play .now .eyebrow::before { display: none; }
#play h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); margin: 0 0 .1em; line-height: 1.1; color: var(--ink); }
#play .nextup { font-size: .95em; font-weight: 700; color: var(--ink-mute); min-height: 1.4em; }
#play .clock { display: grid; place-items: center; margin: 6px 0 8px; }
#ring { width: 128px; height: 128px; display: block; }
#ring circle { fill: none; stroke-width: 10; }
#ring .t { stroke: var(--line-2); }
#ring .v { stroke: var(--cd); stroke-linecap: round; transition: stroke-dashoffset .95s linear; }
#ring text { font-weight: 900; font-size: 40px; fill: var(--ink); text-anchor: middle; letter-spacing: -.02em; }
#play .pbtns { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 8px; }
#play .pbtns .btn { min-height: 58px; font-size: 1.1rem; padding: 0; }
#play details.drop > summary { justify-content: center; padding: 10px 0 4px; font-size: .9em; color: var(--ink-mute); }
#play details.drop > summary::after { margin-left: 2px; }
ol.how { margin: 0 0 6px; padding: 0 0 0 1.35em; color: var(--ink-soft); text-align: left; }
ol.how li { margin: 0 0 .32em; }
ol.how.big { font-size: 1rem; color: var(--ink); margin: 6px 0 14px; }
#play ol.how { max-width: 400px; margin: 0 auto 8px; font-size: .93rem; max-height: 22vh; overflow: auto; }
.linky { font-size: .84rem; color: var(--ink-mute); text-decoration: underline; font-weight: 600; }
@media (max-height: 700px) { #play .shot .move { max-height: 30vh; } #ring { width: 104px; height: 104px; } }

/* ================= sheets, toasts, confetti ================= */
.veil { position: fixed; inset: 0; z-index: 70; background: rgba(18,48,63,.38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: fade .25s; }
.sheet { width: 100%; max-width: 620px; max-height: 86%; overflow-y: auto; background: var(--paper); border-radius: 24px 24px 0 0; padding: 18px 18px calc(22px + var(--safe-b)); box-shadow: 0 -10px 40px rgba(0,0,0,.15); animation: sheetin .45s var(--spring) both; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--rule); margin: -6px auto 12px; }
.sheet h2 { margin: .2em 0 .3em; }
.sheet .hero-pic { max-width: 300px; }
.sheet ol.how { font-size: 1rem; color: var(--ink); }
@keyframes sheetin { from { transform: translateY(60px); } to { transform: none; } }
.veil.centre { align-items: center; padding: 18px; }
.veil.centre .sheet { border-radius: 26px; text-align: center; max-width: 420px; }
.veil.centre .grab { display: none; }
.medal-big { position: relative; display: grid; place-items: center; height: 176px; margin-top: 4px; }
.medal-big svg.med { position: relative; z-index: 1; animation: medalin .9s var(--spring) both; }
.medal-big .rays2 { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(245,184,61,.30) 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); animation: rays 16s linear infinite; }
@keyframes medalin { from { transform: translateY(-46px) scale(.3) rotate(-24deg); } to { transform: none; } }
.toast { position: fixed; left: 50%; bottom: calc(22px + var(--safe-b)); z-index: 90; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .6em 1.1em; border-radius: 999px; font-weight: 700; font-size: .92em; box-shadow: var(--shadow-md); animation: toastin .35s var(--spring) both; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.confetti { position: fixed; top: -12px; width: 8px; height: 14px; border-radius: 2px; z-index: 85; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.pop { animation: popin .5s var(--spring) both; }
@keyframes popin { from { transform: scale(.95); } to { transform: none; } }
.newbuild { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 95; background: var(--go); color: #fff; border-radius: 16px; padding: 13px 16px; font-weight: 800; text-align: center; box-shadow: var(--shadow-md); animation: sheetin .4s var(--spring); }
.ver { position: fixed; right: 9px; bottom: 7px; font-size: .64rem; color: var(--ink-mute); opacity: .45; z-index: 5; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- projects: one bigger thing, step by step (2026-09-25) ---------- */
.projhead { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.projhead .pic { width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.projhead .pic img, .projhead .pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.projpicks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.projpick { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 9px; border: 0; border-radius: 14px; background: #fff; text-align: left; font: inherit; font-size: .8rem; line-height: 1.25; color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,60,90,.08), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }
.projpick .pic { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.projpick .pic img, .projpick .pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.psteps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pstep { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--paper-2); }
.pstep .stick { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: var(--c); font: 800 .9rem/1 inherit; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); cursor: pointer; }
.pstep .stick i { font-style: normal; display: grid; place-items: center; }
.pstep .stick svg { width: 18px; height: 18px; }
.pstep.done .stick { background: var(--c); color: #fff; box-shadow: none; }
.pstep.done .ptxt { color: var(--ink-mute); }
.pstep.next { background: #fff; box-shadow: 0 3px 12px rgba(20,60,90,.1), inset 0 0 0 2px var(--c); }
.pstep .ptxt { flex: 1; font-weight: 650; line-height: 1.35; }
.pstep .ptxt small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-top: 2px; }

/* ---------- the welcome tour v2 (the Light School's: a hole in a dimmed page, a small caption beside it) ---------- */
.tourlayer { position: fixed; inset: 0; z-index: 90; pointer-events: auto; }
.thole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(16,40,64,.58), 0 0 0 3px var(--sun), 0 0 26px 6px rgba(255,206,61,.55); transition: all .5s var(--spring); pointer-events: none; }
.tcap { position: fixed; left: 12px; right: 12px; max-width: 520px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 11px 14px 10px; box-shadow: 0 10px 34px rgba(10,30,50,.35); animation: tcapIn .45s var(--spring) both; }
@keyframes tcapIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.tcap-top { display: flex; align-items: center; gap: 8px; }
.tcap-top .ava { flex: none; }
.tcap-top b { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-d); }
.tcap-line { font-size: .98rem; font-weight: 600; line-height: 1.42; margin: 7px 0 9px; color: var(--ink); }
.tcap-line span { opacity: 0; animation: tword .3s ease forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes tword { to { opacity: 1; } }
.tcap-btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tcap-install { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.tcap-install .ti { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 12px; background: var(--sky-p, #E3F3FB); font-weight: 700; font-size: .88rem; color: var(--sky-d); }
.tcap-install .ti svg { width: 20px; height: 20px; }
.tcap-install .ti b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sky-d); color: #fff; font-size: .7rem; }
.tour-spot { position: relative; z-index: 3; outline: 3px solid var(--sun); outline-offset: 4px; border-radius: 18px; animation: tourGlow 1.6s ease-in-out infinite; }
#scenelights.tour-spot, #tabs.tour-spot { z-index: 8; }
@keyframes tourGlow { 0%, 100% { outline-color: rgba(255,206,61,1); box-shadow: 0 0 0 6px rgba(255,206,61,.25); } 50% { outline-color: rgba(255,206,61,.55); box-shadow: 0 0 0 14px rgba(255,206,61,.08); } }

/* the fold handle at the foot of the scene (from Eat Real) */
.tuck { position: absolute; left: 50%; bottom: 5px; z-index: 7; transform: translateX(-50%); width: 50px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: var(--glass); box-shadow: 0 2px 8px rgba(20,60,90,.16); display: grid; place-items: center; color: var(--sky-d); cursor: pointer; }
.tuck svg { width: 17px; height: 17px; transition: transform .4s var(--spring); }
#stage.tucked .tuck svg { transform: rotate(180deg); }
body.touring main { padding-bottom: 55vh; }   /* room to scroll the last card up into the open part of the page */
.chips.lens { flex-wrap: wrap; overflow: visible; }   /* all three lengths visible on a phone, never cut off */
/* the player's ready screen: the clock waits (dimmed, full), Go glows until tapped */
#play.ready #ring { opacity: .45; }
#ppause.go { animation: goGlow 1.4s ease-in-out infinite; }
@keyframes goGlow { 0%, 100% { box-shadow: 0 6px 18px rgba(217,154,0,.3), 0 0 0 0 rgba(255,206,61,.55); } 50% { box-shadow: 0 6px 18px rgba(217,154,0,.3), 0 0 0 10px rgba(255,206,61,0); } }
/* the ready screen shows the steps open: a smaller picture, and the screen scrolls rather than
   letting the picture paint over the name */
#play { overflow-y: auto; }
#play .stage { flex: 1 0 auto; }
#play.ready .shot .move { max-height: 26vh; }
#play.ready #ring { width: 92px; height: 92px; }
#play.ready ol.how { max-height: none; }

/* list rows (his, 2026-09-26, the Light School's way): picture left, words right, one under another */
.lrows { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.task.lrow { text-decoration: none; }
.task.lrow .thumb { width: 84px; height: 84px; flex: none; overflow: hidden; }
.task.lrow .thumb img, .task.lrow .thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.task.lrow small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task.lrow .chev { flex: none; width: 20px; height: 20px; color: var(--cd); opacity: .7; }
.task.lrow .chev svg { width: 100%; height: 100%; }
.task.lrow { box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }

/* the light grows, visibly: a ring and sparks leave the sun, a label says how far the day has come */
.sunring { position: absolute; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 4px rgba(255,226,120,.95), 0 0 30px 10px rgba(255,206,61,.6); animation: sunring 1.3s ease-out forwards; }
@keyframes sunring { from { transform: scale(.6); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.spark { position: absolute; z-index: 4; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #FFD95A; box-shadow: 0 0 8px 2px rgba(255,210,80,.8); pointer-events: none; animation: spark 1.2s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes spark { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
.sunlabel { position: absolute; z-index: 6; transform: translateX(-50%); white-space: nowrap; pointer-events: none; padding: 6px 13px; border-radius: 16px; background: rgba(255,255,255,.94); color: #8A5A00; font-weight: 850; font-size: .9rem; box-shadow: 0 6px 18px rgba(217,154,0,.35), inset 0 0 0 2px var(--sun); animation: sunlabel 2.6s var(--spring) forwards; }
@keyframes sunlabel { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.wrow { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.wrow input { width: 6.5em; font: inherit; font-size: 1.3em; font-weight: 800; padding: 10px 12px; border-radius: 14px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; color: var(--ink); }
.wrow input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lime-d); }
.wrow span { font-weight: 800; color: var(--ink-mute); }
.wchart { display: block; width: 100%; height: auto; margin-top: 12px; }
/* v33 weigh-in: morning + night, the line, personal best */
.wlab { display: block; font-size: .8em; font-weight: 800; color: var(--ink-soft); margin: 6px 0 0; }
.wlab input[type=date] { font: inherit; font-weight: 750; margin-left: 6px; padding: 6px 10px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; color: var(--ink); }
.wpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.wpair .wrow input { width: 7em; max-width: 100%; min-width: 0; }
.wpair.st { grid-template-columns: 1fr; }
@media (max-width: 380px) { .wpair { grid-template-columns: 1fr; } }
.wrange { margin: 0 0 .8em; font-size: .9em; color: var(--ink-soft); }
.wrange:empty { display: none; }
.wempty { margin: 10px 0 0; }
.wchart .wg-grid { stroke: var(--line); stroke-width: 1; }
.wchart .wg-lab { font-size: 10px; font-weight: 700; fill: var(--ink-mute); font-family: var(--sans); }
.wchart .wg-lab.strong { fill: var(--lime-d); font-weight: 850; }
.wchart .wg-lab.ideal { fill: var(--sky-d); font-weight: 850; }
.wchart .wg-ideal { stroke: var(--sky); stroke-width: 1.6; stroke-dasharray: 5 4; }
.wchart .wg-range { stroke: var(--sun); stroke-width: 5; stroke-linecap: round; opacity: .6; }
.wchart .wg-night { fill: var(--sun); }
.wchart .wg-line { fill: none; stroke: var(--lime-d); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wchart .wg-dot { fill: #fff; stroke: var(--lime-d); stroke-width: 2; }
.wchart .wg-pb { fill: var(--sun); stroke: var(--sun-d); stroke-width: 2.4; }
.wkey { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .74em; font-weight: 700; color: var(--ink-mute); }
.wkey span { display: inline-flex; align-items: center; gap: 5px; }
.wkey i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.wkey .k-line { background: var(--lime-d); }
.wkey .k-range { width: 5px; height: 12px; background: var(--sun); opacity: .7; }
.wkey .k-pb { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 2px var(--sun-d); }
.wkey .k-ideal { height: 0; border-top: 2px dashed var(--sky); border-radius: 0; }
.wlog { display: flex; flex-direction: column; }
.wlrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: .9em; }
.wlrow:last-child { border-bottom: 0; }
.wlrow b { min-width: 4.2em; }
.wlrow span { flex: 1; color: var(--ink-soft); }
.wlrow .btn { min-height: 34px; font-size: .85em; }
.wstats .stat b { font-size: 1.12em; white-space: nowrap; }
.prose p { margin: .55em 0; line-height: 1.55; } .prose p:first-child { margin-top: 0; }
.wpair .wrow input { width: 100%; min-width: 0; } .wpair .wrow { min-width: 0; } .wpair > div { min-width: 0; }   /* both boxes fit on a phone */
details.card.drop { padding: 12px 16px; } details.card.drop > summary { padding: 2px 0; }
#play .nextup:empty { display: none; }
#musicbtn.off { color: var(--ink-mute); opacity: .7; }
/* the path's two lists: the standard, going further */
.seg2 { display: flex; gap: 6px; padding: 4px; margin: 4px 0 12px; border-radius: 18px; background: var(--paper-2); }
.seg2 button { flex: 1; border: 0; border-radius: 14px; padding: 9px 6px; font: inherit; font-weight: 800; font-size: .92rem; background: transparent; color: var(--ink-mute); cursor: pointer; }
.seg2 button small { font-weight: 700; opacity: .75; margin-left: 3px; }
.seg2 button.on { background: #fff; color: var(--sky-d); box-shadow: 0 2px 8px rgba(20,60,90,.12); }
.upbox { margin: 12px 0 4px; padding: 11px 13px; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }