/* Eat Real — one screen, Light School's shape.
   The room band sits on top the whole time with the two of them in it; the page underneath changes.
   Bright and fresh like the room: warm white, sage, sky and a little sunlight gold. Gradient outline
   on every card and button (house rule). One font family, heavy for headings. */
:root {
  --bg: #F6F4EE; --bg-2: #EFEBE1; --card: #FFFFFF; --glass: rgba(255,255,255,.86);
  --ink: #1F2A24; --ink-soft: #46544B; --ink-mute: #7A857D; --line: #E6E1D5; --line-2: #EEEAE0;

  --sage: #5FA776; --sage-d: #2E7A4C; --sage-l: #B7DCC1; --sage-p: #EAF5EC;
  --sky: #4A9ED4; --sky-d: #2D6FA8; --sky-l: #C2E1F4; --sky-p: #EAF4FB;
  --sun: #F5B83D; --sun-d: #D0860F; --sun-p: #FFF4DA;
  --coral: #EE7A5F; --coral-d: #C4513A;
  /* the names the content already uses */
  --leaf: var(--sage); --leaf-deep: var(--sage-d); --sky-deep: var(--sky-d);
  --butter: var(--sun); --butter-deep: var(--sun-d); --tomato: var(--coral); --tomato-deep: var(--coral-d);
  --berry: #C9407A; --plum: #7B4B9E; --rule-strong: #D9D2C1; --paper-card: #FFFFFF;

  --go: linear-gradient(135deg, #7ACB91 0%, #3E9A62 55%, #2E7A4C 100%);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(30,40,30,.05), 0 4px 14px rgba(30,40,30,.06);
  --shadow-md: 0 2px 6px rgba(30,40,30,.06), 0 12px 30px rgba(30,40,30,.10);
  --r: 20px; --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease: cubic-bezier(.22,.61,.36,1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #E8E4DA; }
body { color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
a { color: var(--sage-d); font-weight: 600; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .4em; }
h1 { font-size: clamp(1.55rem, 6.4vw, 2rem); font-weight: 850; }
h2 { font-size: 1.25rem; font-weight: 800; margin-top: 1.3em; }
h3 { font-size: 1.08rem; font-weight: 800; }
p { margin: 0 0 .8em; }
.small { font-size: .86em; color: var(--ink-mute); }
.mt { margin-top: 1em; }
.center { text-align: center; }

/* ================= the stage ================= */
.stage { position: relative; width: 100%; max-width: 480px; margin: 0 auto; height: var(--app-h, 100dvh); display: flex; flex-direction: column; background: var(--bg); overflow: hidden; box-shadow: 0 0 60px rgba(0,0,0,.08); }

/* the band: the room and the two of them. Tall for the welcome, a band after, a strip when tucked. */
.band { position: relative; flex: 0 0 auto; height: calc(38dvh + var(--safe-t)); overflow: hidden; background: #EFF1E0; transition: height .6s var(--ease); isolation: isolate; }
.stage.opening .band { height: calc(58dvh + var(--safe-t)); }
.stage.tucked .band { height: calc(58px + var(--safe-t)); }
.band .room { position: absolute; inset: -2%; will-change: transform; }
.band .room svg { width: 100%; height: 100%; display: block; }
.band .sun { position: absolute; inset: 0; background: radial-gradient(60% 55% at 18% 10%, rgba(255,240,190,.5), transparent 70%); mix-blend-mode: soft-light; pointer-events: none; animation: sunbreathe 7s ease-in-out infinite; z-index: 1; }
@keyframes sunbreathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.band .motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.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: .8; } 50% { transform: translate(6px, -14px); } 80% { opacity: .6; } 100% { transform: translate(-4px, -26px); opacity: 0; } }
.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(to bottom, transparent, rgba(246,244,238,.55)); pointer-events: none; z-index: 4; }

/* the two of them: from the knees up in the band, full length in the welcome */
.fig { position: absolute; z-index: 3; bottom: -31%; height: 128%; width: 66%; cursor: pointer; transform-origin: 50% 100%; transform: translateX(var(--par, 0px)); filter: drop-shadow(0 8px 14px rgba(50,45,30,.14)); transition: height .6s var(--ease), bottom .6s var(--ease), width .6s var(--ease), left .6s var(--ease), right .6s var(--ease); }
.fig svg { width: 100%; height: 100%; overflow: visible; display: block; }
.fig-apollo { left: -5%; } .fig-athena { right: -5%; }
.stage.opening .fig { height: 92%; bottom: 1%; width: 58%; }
.stage.opening .fig-apollo { left: -2%; } .stage.opening .fig-athena { right: -2%; }
.stage.tucked .fig { opacity: 0; pointer-events: none; }
.fig.is-hidden { visibility: hidden; }
.stage:not(.opening) .r-shadow { display: none; }
.fig.walk-in { animation: walkin 1.15s var(--ease) both; }
.fig.walk-in-left { animation: walkinl 1.15s var(--ease) both; }
@keyframes walkin { 0% { transform: translateX(70%); } 30% { transform: translateX(44%) translateY(-1.2%); } 55% { transform: translateX(20%); } 80% { transform: translateX(5%) translateY(-.8%); } 100% { transform: translateX(var(--par, 0)); } }
@keyframes walkinl { 0% { transform: translateX(-70%); } 30% { transform: translateX(-44%) translateY(-1.2%); } 55% { transform: translateX(-20%); } 80% { transform: translateX(-5%) translateY(-.8%); } 100% { transform: translateX(var(--par, 0)); } }
.fig.speaking { filter: drop-shadow(0 8px 14px rgba(50,45,30,.14)) drop-shadow(0 0 10px rgba(255,236,170,.55)); }

/* name plates, in the welcome */
.plate { position: absolute; bottom: 3%; z-index: 5; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFFDF6; background: rgba(31,42,36,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 9px; pointer-events: none; opacity: 0; transition: opacity .5s; }
.plate-apollo { left: 16%; } .plate-athena { right: 16%; }
.stage.opening .plate.on { opacity: 1; }

/* the heads-up row over the sky: day on the left, sound and help on the right (Light School's) */
.hud { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 9px); z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .right { display: flex; gap: 7px; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px; border-radius: 18px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(30,40,30,.12), inset 0 0 0 1px rgba(95,167,118,.35); font-weight: 750; font-size: 14.5px; color: var(--ink); transition: transform .2s var(--spring); }
.pill:active { transform: scale(.94); }
.pill svg { width: 18px; height: 18px; flex: none; }
.pill.back svg { width: 16px; height: 16px; }
.round { position: relative; overflow: hidden; width: 36px; height: 36px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(30,40,30,.12), inset 0 0 0 1px rgba(95,167,118,.35); display: grid; place-items: center; color: var(--sage-d); font-weight: 800; font-size: 16px; transition: transform .2s var(--spring); }
.round:active { transform: scale(.9); }
.round svg { width: 18px; height: 18px; }
.round.off { color: var(--ink-mute); }
.round.off::after { content: ''; position: absolute; left: -3px; top: 50%; width: 42px; height: 3px; background: #C4513A; transform: rotate(-40deg); border-radius: 2px; box-shadow: 0 0 0 1.5px #FFFDF6; }
.stage.onboard .hud .pill { visibility: hidden; }
/* Back: at the foot of the room above the page; up in the strip when the room is folded away */
#backbtn { position: absolute; left: 10px; bottom: 12px; z-index: 7; transition: transform .2s var(--spring), bottom .5s var(--ease); }
#backbtn[hidden] { display: none; }
.stage.tucked #backbtn { bottom: auto; top: calc(var(--safe-t) + 9px); }
.stage.tucked.hasback #daypill { visibility: hidden; }
.stage.hasback .cap { bottom: 58px; }

/* the handle at the foot of the band tucks the room away and brings it back */
.tuck { position: absolute; left: 50%; bottom: 4px; z-index: 6; transform: translateX(-50%); width: 46px; height: 20px; border-radius: 10px; background: var(--glass); box-shadow: 0 2px 8px rgba(30,40,30,.12); display: grid; place-items: center; color: var(--ink-mute); }
.tuck svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.stage.tucked .tuck svg { transform: rotate(180deg); }
.stage.opening .tuck, .stage.onboard .tuck { display: none; }

/* a caption over the foot of the band, only when the sound is off: the voice is enough otherwise */
.cap { position: absolute; left: 10px; right: 10px; bottom: 30px; z-index: 7; padding: 9px 13px; border-radius: 16px; background: rgba(255,255,255,.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-md); font-weight: 600; font-size: .95em; line-height: 1.4; animation: capin .35s var(--spring) both; }
.cap .who { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-d); margin-bottom: 2px; }
.cap .w span { display: inline-block; animation: wordin .4s var(--spring) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes capin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes wordin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the tabs, straight under the band, never moving */
.tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 9px 10px 7px; background: var(--bg); z-index: 3; }
.stage.onboard .tabs, .stage.opening .tabs { display: none; }
.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: 14px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .2s var(--spring); }
.tab:active { transform: scale(.95); }
.tab svg { width: 17px; height: 17px; opacity: .75; }
.tab.on { background: var(--go); color: #fff; box-shadow: 0 8px 18px rgba(46,122,76,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.tab.on svg { opacity: 1; }

/* the page underneath */
.view { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(34px + var(--safe-b)); }
.view > .page { animation: pagein .45s var(--ease) both; }
/* a slide, not a fade: if an animation ever stalls (a hidden tab does it), the page is still there */
@keyframes pagein { from { transform: translateY(12px); } to { transform: none; } }
.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(--bg-2); font-weight: 700; }

/* ================= building blocks ================= */
/* gradient outline on every card, per-card colour through --c/--cd */
.card, .tile, .btn, .chip, .choice, .opt, .today-card, .stat, .area, .prow, .leg, .beatcard, .stone, .face, .pillar { --c: var(--sage); --cd: var(--sky); }
.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, .pillar::before, .today-card::before, .stat::before, .area::before, .prow::before, .leg::before, .beatcard::before, .opt::before, .choice::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; }
.card.hero { padding: 20px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--cd, var(--sage-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)); }
.lede { color: var(--ink-soft); font-size: 1.02em; }
.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; }

/* buttons */
.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(.96); }
.btn.primary { color: #fff; background: var(--go); box-shadow: 0 10px 22px rgba(46,122,76,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary[style*="--c"] { background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: 0 10px 22px rgba(30,40,30,.18), 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.quiet { background: transparent; box-shadow: none; color: var(--ink-soft); font-weight: 700; min-height: 40px; padding: .4em .8em; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btnrow { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.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(30,40,30,.14); }
.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(--bg-2); color: var(--ink-soft); white-space: nowrap; }
.tag.yours { background: var(--sage-p); color: var(--sage-d); }
.tag.nearly { background: var(--sun-p); color: var(--sun-d); }
.tag.start, .tag.here { background: var(--sky-p); color: var(--sky-d); }

/* tiles */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--card); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s var(--spring); min-height: 132px; }
.tile:active { transform: scale(.97); }
.tile .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; box-shadow: 0 6px 14px rgba(30,40,30,.14); }
.tile .ic svg { width: 24px; height: 24px; }
.tile .nm { font-weight: 800; font-size: .98em; line-height: 1.2; }
.tile .tg { font-size: .82em; color: var(--ink-mute); line-height: 1.35; }
.tile .mt2 { margin-top: auto; font-size: .74em; font-weight: 800; letter-spacing: .04em; color: var(--cd); text-transform: uppercase; }
.tile .badge { position: absolute; top: 10px; right: 10px; font-size: .68em; font-weight: 800; padding: .2em .55em; border-radius: 9px; background: var(--sun-p); color: var(--sun-d); }
.tile.locked { opacity: .55; }

/* callouts and long copy */
.callout { position: relative; border-radius: 16px; padding: 12px 14px; margin: 0 0 12px; background: var(--sage-p); color: var(--ink-soft); font-size: .95em; }
.callout.gentle { background: var(--sky-p); }
.callout.honest { background: var(--sun-p); }
/* v31: "only if you already do this" — a step must never read as though we are asking anyone to start eating out,
   drinking, snacking or ordering in. The button beside it marks the step theirs on the spot. */
.callout.only { background: var(--sky-p); }
.callout.only .btn { margin-top: 10px; width: 100%; }
.prose h3 { margin: 1em 0 .35em; }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol, .card ul, .card ol { padding-left: 1.2em; margin: .3em 0 .8em; }
.prose li, .card li { margin: .25em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .88em; }
.prose td, .prose th { padding: .45em .3em; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.grade { font-size: .74em; font-weight: 800; padding: .15em .5em; border-radius: 8px; background: var(--bg-2); white-space: nowrap; }
.grade.est { background: var(--sage-p); color: var(--sage-d); } .grade.no { background: #FBE5E0; color: var(--coral-d); } .grade.pro { background: var(--sun-p); color: var(--sun-d); }
.field input, .field textarea, .ifthen textarea { width: 100%; font: inherit; padding: .7em .9em; border-radius: 14px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1.4px var(--line); color: var(--ink); resize: vertical; }
.field input:focus, .field textarea:focus, .ifthen textarea:focus { outline: none; box-shadow: inset 0 0 0 1.8px var(--sage); }
.ifthen label { display: block; font-weight: 700; margin-bottom: .4em; }

/* choices (lists you tap) */
.choices { display: grid; gap: 8px; }
.choice { position: relative; display: flex; align-items: center; gap: .6em; text-align: left; padding: 13px 15px; border-radius: 16px; background: var(--card); font-weight: 700; box-shadow: var(--shadow-sm); transition: transform .2s var(--spring); }
.choice:active { transform: scale(.98); }
.choice.on { color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.choice.on::before { opacity: 0; }

/* ================= today ================= */
.today-step .leg-label { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--cd); }
.today-step h1 { margin: .25em 0 .3em; }
.today-step p { color: var(--ink-soft); }
.split { display: grid; grid-template-columns: 1fr; gap: 12px; }
.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: 116px; transition: transform .2s var(--spring); }
.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); }
.rowhead { display: flex; align-items: center; justify-content: space-between; margin: 1.3em 0 .6em; }
.rowhead .sec-title { margin: 0; }
.hand-card { display: flex; align-items: center; gap: 12px; }
.hand-card .ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--coral), var(--berry)); color: #fff; }
.hand-card .ic svg { width: 26px; height: 26px; }

/* the sundial: the eating window read off the sun */
.ring-card { text-align: center; }
.dialwrap { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.sundial { width: 100%; height: 100%; }
.sundial .face { fill: url(#dialFace); stroke: #D9C37F; stroke-width: 1.5; }
.sundial .night { fill: none; stroke: rgba(45,111,168,.12); stroke-width: 14; stroke-linecap: round; }
.sundial .tick { stroke: #B89A50; stroke-width: 1.2; } .sundial .tick.major { stroke-width: 2; }
.sundial .numeral { font-size: 9px; font-weight: 800; fill: #8A6A1E; text-anchor: middle; }
.sundial .target { fill: none; stroke: rgba(95,167,118,.28); stroke-width: 14; stroke-linecap: round; }
.sundial .window { fill: none; stroke: url(#dialSun); stroke-width: 14; stroke-linecap: round; }
.sundial .shade { stroke: rgba(40,30,10,.22); stroke-width: 3; stroke-linecap: round; }
.sundial .gnomon { fill: #8A6A1E; }
.sundial .sun { fill: #FFD64A; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255,200,60,.8)); }
.dialwrap .mid { position: absolute; left: 0; right: 0; top: 60%; line-height: 1.1; }
.dialwrap .mid b { display: block; font-size: 1.35em; font-weight: 850; }
.dialwrap .mid small { font-size: .7em; color: var(--ink-mute); font-weight: 700; }
.phase { font-weight: 700; color: var(--ink-soft); margin: .4em 0 .7em; font-size: .92em; }
.phase:empty { display: none; }
.rbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
/* v31: the eating clock takes a real time, so a bite can be written down an hour later from memory */
.bitetimes { display: grid; gap: 8px; margin: .2em 0 .5em; }
.biterow { display: flex; align-items: center; gap: 8px; }
.biterow > span { flex: 1 1 auto; text-align: left; font-weight: 800; color: var(--ink-soft); font-size: .95em; }
.biterow input[type=time] { flex: 0 0 auto; font: inherit; font-size: 1.15rem; font-weight: 800; color: var(--ink); padding: .4em .6em; border-radius: 13px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1.6px var(--sky-l); -webkit-appearance: none; appearance: none; min-height: 46px; }
.biterow .chip { flex: 0 0 auto; margin: 0; }

/* ================= the path ================= */
.leg { position: relative; background: var(--card); border-radius: var(--r); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.leg.locked { opacity: .6; }
.leg-head { display: flex; gap: 12px; align-items: center; }
.leg-num { width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center; font-weight: 850; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.leg h3 { margin: 0; }
.leg-sub { font-size: .86em; color: var(--ink-mute); }
.stones { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.stone { position: relative; display: inline-flex; align-items: center; gap: .35em; padding: .45em .8em; border-radius: 999px; font-size: .86em; font-weight: 750; text-decoration: none; color: var(--ink-soft); background: var(--bg); box-shadow: inset 0 0 0 1.3px var(--line); }
.stone.done { background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; box-shadow: none; }
.stone.next { color: var(--ink); box-shadow: inset 0 0 0 2px var(--c), 0 0 0 4px rgba(95,167,118,.12); animation: glow 2.4s ease-in-out infinite; }
.stone.skipped { color: var(--sage-d); background: var(--sage-p); box-shadow: none; }
.stone.locked { opacity: .55; pointer-events: none; }
.stone .tick { width: 14px; height: 14px; }
@keyframes glow { 0%, 100% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px rgba(95,167,118,.1); } 50% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 7px rgba(95,167,118,.2); } }

/* a step */
.step-page .leg-label { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

/* ================= food ================= */
.recipe-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: .2em 0 .8em; }
.recipe-meta span { font-size: .82em; font-weight: 750; padding: .3em .75em; border-radius: 999px; background: var(--bg-2); color: var(--ink-soft); }
.ingr li { margin: .2em 0; }

/* ================= 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; }
.stat span { font-size: .72em; color: var(--ink-mute); font-weight: 700; line-height: 1.25; display: block; }
.faces { display: flex; gap: 10px; }
.face { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1.4px var(--line); transition: transform .2s var(--spring); }
.face.on { background: var(--sun-p); box-shadow: inset 0 0 0 2px var(--sun); transform: scale(1.06); }
.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(--bg); }
.weekbar i.ok { background: var(--go); color: #fff; }
.weekbar i.pass { background: var(--sky-p); color: var(--sky-d); }
.mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini3 .choice { justify-content: center; padding: 9px 4px; font-size: .88em; }

/* ================= the welcome and taking stock ================= */
.beatcard { position: relative; background: var(--card); border-radius: 22px; padding: 16px 18px 14px; box-shadow: var(--shadow-md); }
.beatcard .who { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--cd); }
.beatcard h2 { margin: .2em 0 .35em; font-size: 1.3rem; }
.beatcard .bt { font-size: 1.04em; color: var(--ink-soft); min-height: 4.6em; }
.beatcard .bt span { display: inline-block; opacity: 0; }
.beatcard.say .bt span { animation: wordin .45s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
.bfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.beatdots { display: flex; gap: 5px; }
.beatdots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: all .3s var(--spring); }
.beatdots i.done { background: var(--sage-l); }
.beatdots i.on { width: 20px; background: var(--go); }

.promise h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); margin-bottom: .2em; }
.pillars { display: grid; gap: 10px; margin: 14px 0 16px; }
.pillar { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); animation: pagein .5s var(--ease) both; }
.pillar:nth-child(2) { animation-delay: .12s; } .pillar:nth-child(3) { animation-delay: .24s; }
.pillar .ic { width: 46px; height: 46px; border-radius: 15px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: 0 8px 16px rgba(30,40,30,.14); }
.pillar .ic svg { width: 26px; height: 26px; }
.pillar b { display: block; font-size: 1.05em; font-weight: 850; }
.pillar span { color: var(--ink-soft); font-size: .93em; line-height: 1.4; }

.progress { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin: 2px 2px 14px; }
.progress i { display: block; height: 100%; background: var(--go); border-radius: 3px; transition: width .5s var(--ease); }
.question .qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.question .sico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.question .sico svg { width: 18px; height: 18px; }
.question .sname { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cd); }
.question .qcount { margin-left: auto; font-size: .8em; font-weight: 700; color: var(--ink-mute); }
.question h1 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); margin: .1em 0 .2em; }
.question .sub { color: var(--ink-mute); font-size: .92em; }
.opts { display: grid; gap: 8px; margin-top: 10px; }
.opt { position: relative; display: flex; align-items: center; gap: 11px; text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); font-weight: 700; transition: transform .2s var(--spring); }
.opt:active { transform: scale(.98); }
.opt .oico { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--cd); background: var(--bg); }
.opt .oico svg { width: 19px; height: 19px; }
.opt .otext { flex: 1; line-height: 1.3; }
.opt .otick { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.6px var(--line); }
.opt .otick svg { width: 14px; height: 14px; }
.opt.on { background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; }
.opt.on::before { opacity: 0; }
.opt.on .oico { background: rgba(255,255,255,.22); color: #fff; }
.opt.on .otick { background: #fff; color: var(--cd); box-shadow: none; }
.qfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.areas { display: grid; gap: 8px; margin: 12px 0; }
.area { position: relative; display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.area .aico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.area .aico svg { width: 22px; height: 22px; }
.area .ahead { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.area p { margin: .2em 0 0; font-size: .88em; color: var(--ink-soft); }
.pathlist { display: grid; gap: 7px; }
.prow { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 15px; background: var(--card); box-shadow: var(--shadow-sm); }
.prow .pn { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; font-weight: 850; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.prow .pt { flex: 1; } .prow .pt b { display: block; font-size: .95em; } .prow .pt span { font-size: .8em; color: var(--ink-mute); }
.prow.later { opacity: .6; }
.beats { display: grid; gap: 10px; margin: 12px 0 16px; }
.beat { position: relative; display: flex; gap: 12px; text-align: left; }
.beat .bico { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), var(--cd)); }
.beat .bico svg { width: 24px; height: 24px; }
.beat b { display: block; } .beat span { font-size: .92em; color: var(--ink-soft); }

/* ================= overlays ================= */
.veil { position: absolute; inset: 0; z-index: 30; background: rgba(31,42,36,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; }
.sheet { width: 100%; max-height: 82%; overflow-y: auto; background: var(--bg); 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(--line); margin: -6px auto 12px; }
.sheet li { margin: .45em 0; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetin { from { transform: translateY(60px); } to { transform: none; } }
.toast { position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); z-index: 40; 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; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.confetti { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; z-index: 35; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.update-banner { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 50; background: var(--go); color: #fff; font-weight: 800; text-align: center; padding: .85em; border-radius: 16px; box-shadow: var(--shadow-md); cursor: pointer; }
.pop { animation: popin .5s var(--spring) both; }
@keyframes popin { from { transform: scale(.95); } to { transform: none; } }

@media (min-width: 700px) { .tile-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ================= the plan ================= */
.plan { display: grid; gap: 10px; margin: 14px 0; }
.stage-card { position: relative; background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); }
.stage-card::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; }
.stage-head { display: flex; gap: 12px; align-items: flex-start; }
.stage-head b { display: block; font-size: 1.02em; }
.stage-head span { font-size: .84em; color: var(--ink-mute); line-height: 1.35; display: block; }
.stage-head .when { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cd); }
.plansteps { list-style: none; padding: 0; margin: 10px 0 0 52px; display: grid; gap: 5px; }
.plansteps li { font-weight: 700; font-size: .92em; display: flex; gap: 8px; align-items: baseline; }
.plansteps .d { flex: none; width: 50px; font-size: .78em; font-weight: 800; color: var(--ink-mute); }
.plansteps .more { color: var(--ink-mute); font-weight: 600; font-size: .85em; padding-left: 58px; }
.stage-yours { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: var(--sage-p); color: var(--sage-d); font-size: .92em; }
.stage-yours svg { width: 16px; height: 16px; flex: none; }
.stage-yours span { margin-left: auto; font-size: .82em; font-weight: 700; }

/* today: what is next, tonight, and the builder's view bar */
.next-card { display: flex; gap: 12px; align-items: center; }
.next-card .when { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.stepof { font-size: .8em; font-weight: 750; color: var(--ink-mute); margin: -.1em 0 .5em; }
.meter { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin: .2em 0 .9em; }
.meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c), var(--cd)); }
.previewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .84em; font-weight: 700; }
.previewbar button { color: var(--sun); font-weight: 800; }
.stagebtns { display: grid; gap: 8px; margin: .6em 0 1em; }
.stagebtn { text-align: left; padding: 11px 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1.4px var(--line); }
.stagebtn b { display: block; } .stagebtn small { color: var(--ink-mute); }
.stagebtn.on { box-shadow: inset 0 0 0 2px var(--sage); background: var(--sage-p); }

/* ================= v9: the coaching layer ================= */
/* the light in the room follows the clock */
.band .daylight { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease); }
.band.dawn .daylight { opacity: 1; background: linear-gradient(115deg, rgba(255,170,110,.34) 0%, rgba(255,214,160,.16) 45%, transparent 78%); }
.band.dusk .daylight { opacity: 1; background: linear-gradient(245deg, rgba(255,128,56,.36) 0%, rgba(255,176,104,.20) 45%, rgba(126,92,168,.16) 100%); }
.band.night .daylight { opacity: 1; background: linear-gradient(to bottom, rgba(24,34,84,.50), rgba(40,48,96,.30) 60%, rgba(255,190,120,.10)); mix-blend-mode: multiply; }
.band.night .sun { opacity: .25; }

/* the run, on Today */
.run-card { display: block; padding: 14px 14px 12px; }
.run-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; margin-bottom: 10px; }
.run-n b { display: block; font-size: 1.7em; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(135deg, var(--sun-d), var(--coral-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.run-n span { font-size: .72em; font-weight: 700; color: var(--ink-mute); }
.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; }

/* how are you feeling */
.feel-card h3 { margin-bottom: .6em; }
.feelrow { display: flex; flex-wrap: wrap; gap: 7px; }
.feelrow .chip { font-size: .92em; padding: .55em 1em; }
.feel-say { margin: .85em 0 .2em; font-weight: 650; color: var(--ink-soft); }

/* medals */
.medal { display: block; flex: none; filter: drop-shadow(0 3px 5px rgba(60,50,20,.16)); }
.medal:not(.earned) { filter: none; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.medal-cell { 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.on { box-shadow: var(--shadow-sm), inset 0 0 0 1.6px var(--sun); }
.medal-veil { align-items: center; padding: 18px; }
.medal-veil .sheet { border-radius: 26px; text-align: center; max-width: 420px; margin: 0 auto; }
.medal-veil .grab { display: none; }
.medal-won h2 { margin: .3em 0 .25em; font-size: 1.5rem; }
.medal-big { position: relative; display: grid; place-items: center; height: 176px; margin-top: 4px; }
.medal-big .medal { position: relative; z-index: 1; animation: medalin .9s var(--spring) both; }
.medal-big .rays { 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: raysspin 16s linear infinite; }
@keyframes medalin { from { transform: translateY(-46px) scale(.3) rotate(-24deg); } to { transform: none; } }
@keyframes raysspin { to { transform: rotate(360deg); } }

/* a switch row in the help sheet */
.switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--card); border-radius: 16px; padding: 12px 14px; margin-top: 12px; box-shadow: var(--shadow-sm); }
.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); }

/* ================= v10: going along with you ================= */
/* a banner across the room for a win */
.hail { position: absolute; left: 50%; top: 50%; z-index: 6; 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(--coral) 100%); border-radius: 14px; box-shadow: 0 10px 26px rgba(196,81,58,.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(--coral-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; } }

/* 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), var(--sage-l)); box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--sage-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: 5px; 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(--bg); color: var(--ink); }

/* a fresh start */
.fresh h3 { margin-bottom: .35em; } .fresh .choices { margin-top: .4em; }

/* the tomorrow promise */
.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(245,184,61,.5); }
.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; padding: .7em 1.05em; font-size: .92em; }
.promise-card.kept { background: var(--sage-p); box-shadow: inset 0 0 0 1.4px var(--sage-l); justify-content: flex-start; }
.promise-card.kept svg { flex: none; width: 26px; height: 26px; color: var(--sage-d); }

/* a leg walked */
.legwin .ribbon { display: inline-block; margin: 2px auto 0; }
.legwin .ribbon span { display: inline-block; padding: .35em 1.1em; border-radius: 999px; color: #fff; font-weight: 850; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, var(--sun), var(--coral)); box-shadow: 0 6px 16px rgba(196,81,58,.28); }
.legwin h2 { font-size: 1.7rem; }

/* ================= v11: the section pictures ================= */
.pic { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 720 / 448; background: linear-gradient(135deg, var(--sage-p), var(--sky-p)); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic.wide { margin: .2em 0 14px; box-shadow: var(--shadow-sm); }
/* bleeds to the top edges of the card it leads */
.card > .pic.top, .leg > .pic.top, .stage-card > .pic.top { margin: -18px -18px 14px; border-radius: var(--r) var(--r) 0 0; aspect-ratio: 720 / 360; }
.card.hero > .pic.top { margin: -20px -20px 16px; }
.leg > .pic.top { margin: -16px -16px 14px; aspect-ratio: 720 / 300; }
.stage-card > .pic.top { margin: -14px -14px 12px; border-radius: 18px 18px 0 0; aspect-ratio: 720 / 260; }
.leg.locked > .pic.top img { filter: saturate(.35) brightness(1.06); }
.pic.top.done img { filter: saturate(.9); } .pic.top.done::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,.55), transparent 55%); }
.pic.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c), var(--cd)); }
.medal-won > .pic.top { margin: -18px -18px 10px; border-radius: 26px 26px 0 0; aspect-ratio: 720 / 300; }
.legwin .medal-big { margin-top: -64px; }
/* in a tile */
.tile > .tpic, .today-card > .tpic { margin: -14px -14px 2px; border-radius: 18px 18px 0 0; aspect-ratio: 720 / 400; }
.today-card > .tpic { margin: -13px -14px 4px; }
.tile .badge { z-index: 1; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
/* small, beside words */
.pic.thumb { flex: none; width: 58px; height: 58px; aspect-ratio: auto; border-radius: 15px; box-shadow: var(--shadow-sm); }
.pic.thumb.big { width: 72px; height: 72px; border-radius: 18px; }
/* the gradient outline runs over the top of a picture, so a card with one still has its whole border */
.tile::before, .today-card::before, .card::before, .leg::before, .stage-card::before { z-index: 1; }

/* v12 — the step page: the step, exactly what to do, Done; everything else folds underneath */
.step-top h1 { margin: .15em 0 .25em; }
.step-do { font-size: 1.22em; font-weight: 800; line-height: 1.3; color: var(--ink); margin: .2em 0 .5em; }
.step-top .btn.big { flex: 1 1 60%; }
.btnrow.center { justify-content: center; }
details.drop { padding: 0; }
details.drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; font-weight: 800; font-size: 1.02em; 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) { padding: 0 18px 16px; animation: dropin .35s var(--ease) both; }
@keyframes dropin { from { transform: translateY(-6px); } to { transform: none; } }
details.drop .prose > :first-child { margin-top: 0; }
.water-rung { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.water-rung:first-of-type { border-top: 0; }
.water-rung .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--c, var(--sky)), var(--cd, var(--sky-d))); }
.water-rung b { display: block; }
.water-rung .price { font-size: .86em; font-weight: 700; color: var(--sage-d); }
.water-first h2 { margin: .1em 0 .35em; }
details.drop.inner { margin: 10px -4px 0; border-radius: 16px; background: rgba(108,180,226,.08); box-shadow: inset 0 0 0 1px rgba(45,111,168,.14); }
details.drop.inner > summary { padding: 12px 14px; font-size: .96em; }
details.drop.inner > :not(summary) { padding: 0 14px 12px; }
.water-first .rule { font-weight: 800; color: var(--cd); margin: 14px 0 6px; }
.water-rung .price { display: block; margin-top: 1px; }

/* v12 — the Path folds: the leg you are on open, the rest one line each */
details.leg { padding: 0; }
details.leg > summary { list-style: none; cursor: pointer; padding: 14px 16px; }
details.leg > summary::-webkit-details-marker { display: none; }
details.leg > 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.leg[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.leg > .leg-body { padding: 0 16px 16px; animation: dropin .35s var(--ease) both; }
details.leg .leg-body > .pic.wide { margin-top: 0; margin-bottom: 10px; aspect-ratio: 720 / 300; }
details.leg.here { box-shadow: var(--shadow-md); }
.leg-tag { font-weight: 750; margin: 0; color: var(--ink); }
details.leg.locked { opacity: .72; }
details.leg.locked .pic.wide img { filter: saturate(.35) brightness(1.06); }

/* v12 — Let go of weight */
.tasks { display: grid; gap: 8px; }
.task { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--line); transition: transform .2s var(--spring), box-shadow .3s; }
.task:active { transform: scale(.98); }
.task span { flex: 1; } .task b { display: block; font-size: 1.02em; } .task small { display: block; color: var(--ink-mute); font-size: .84em; line-height: 1.35; margin-top: 2px; }
.task .tick { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); position: relative; transition: background .3s, box-shadow .3s; }
.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; animation: tickpop .45s var(--spring); }
.task.on .tick::after { content: ""; position: absolute; left: 10.5px; top: 6.5px; width: 7px; height: 13px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
.task.on b { color: var(--cd); }
@keyframes tickpop { from { transform: scale(.4); } to { transform: none; } }
.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(--sage-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(--sage-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(--sage-d); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wchart .wg-dot { fill: #fff; stroke: var(--sage-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(--sage-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; }
.cap.long { font-size: 13px; line-height: 1.35; padding: 7px 11px; }
/* v23: his phone showed a wall and a clock, the plate cut off. The strip was too thin for pictures whose subject sits low:
   show nearly the whole picture, and weight the crop towards the table */
.step-top > .pic.top { aspect-ratio: 720 / 410; }
.pic.top img { object-position: 50% 68%; }
.step-top h1 { font-size: 1.7em; }

/* v13 — bonus points and the pace */
.task .pts { flex: none; font-style: normal; font-weight: 850; font-size: .82em; color: var(--cd); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px var(--c); border-radius: 10px; padding: 3px 7px; }
.task.on .pts { background: linear-gradient(135deg, var(--c), var(--cd)); color: #fff; box-shadow: none; }
.bonus-card .tasks { gap: 7px; }
.bonus-card .task { padding: 10px 12px; }
.pts-week { flex: none; font-size: 12px; font-weight: 800; color: var(--sage-d); background: rgba(95,167,118,.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(--sage-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; } }
.next-card .faster { font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
.pace-card .chip { font-weight: 600; }

/* v14 — the streak on Today, the scale, our words */
.streak-card { display: block; padding: 14px 16px 12px; }
.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(--sage), var(--sky-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); }
.more-today > div > .card { box-shadow: none; }
.words dt { font-weight: 900; margin-top: 10px; color: var(--ink); }
.words dd { margin: 2px 0 0; color: var(--ink-soft); }
.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(--bg); color: var(--ink-mute); }
.scale span.on { background: linear-gradient(135deg, var(--sage), var(--sky-d)); color: #fff; }
.scale span.past { background: rgba(95,167,118,.18); color: var(--sage-d); }

/* v15 — the end of the day */
.review .feast { display: block; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; border: 0; border-radius: 16px; font: inherit; color: var(--ink); background: rgba(155,123,192,.08); box-shadow: inset 0 0 0 1.5px rgba(123,75,158,.28); transition: transform .2s var(--spring), background .3s; }
.review .feast:active { transform: scale(.98); }
.review .feast b { display: block; color: var(--plum); }
.review .feast small { display: block; color: var(--ink-mute); font-size: .84em; margin-top: 2px; }
.review .feast.on { background: linear-gradient(135deg, #C9A7E0, var(--plum)); box-shadow: none; }
.review .feast.on b, .review .feast.on small { color: #fff; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 14px 0 8px; }
.month i { display: block; height: 16px; border-radius: 6px; background: var(--line-2); }
.month i.d-ideal { background: linear-gradient(135deg, var(--sun), var(--coral)); }
.month i.d-real { background: linear-gradient(135deg, #7ACB91, var(--sage-d)); }
.month i.d-feast { background: linear-gradient(135deg, #C9A7E0, var(--plum)); }
.month i.d-day { background: #D9E6EE; }
.month i.now { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink-mute); }
.month-say { margin: 0 0 4px !important; }
.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; }
.month-key i.d-ideal { background: linear-gradient(135deg, var(--sun), var(--coral)); }
.month-key i.d-real { background: linear-gradient(135deg, #7ACB91, var(--sage-d)); }
.month-key i.d-feast { background: linear-gradient(135deg, #C9A7E0, var(--plum)); }

/* v16 — bonuses open like the Light School's tasks; the hero moves on once today's step is done */
.done-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: rgba(95,167,118,.12); font-size: .9em; color: var(--sage-d); }
.done-banner .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #7ACB91, var(--sage-d)); position: relative; }
.done-banner .tick::after { content: ""; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 10px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }
.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; }
.bonus-card .tasks.fresh .task:last-child { animation: bonusin .45s var(--spring) both; }
@keyframes bonusin { from { transform: translateY(8px) scale(.96); } to { transform: none; } }
.ls-card .btn { display: inline-block; }
.bonus-card h3.bump { animation: bump .5s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: var(--sage-d); } 100% { transform: none; } }
.review-mini { display: flex; gap: 12px; align-items: center; }
.review-mini b { display: block; font-size: 1.05em; margin: .15em 0 .1em; }
.review-mini small { display: block; color: var(--ink-mute); font-size: .84em; }
.month.mini { flex: none; width: 118px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0; }
.month.mini i { height: 22px; border-radius: 5px; }
.done-banner { padding: 12px 14px; margin: -4px 0 14px; background: linear-gradient(135deg, rgba(122,203,145,.22), rgba(245,184,61,.18)); }
.done-banner .tick { width: 32px; height: 32px; }
.done-banner .tick::after { left: 11.5px; top: 6.5px; width: 7px; height: 13px; border-width: 0 3px 3px 0; }
.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(--sage-d); }
.done-banner b { display: block; font-size: 1.08em; color: var(--ink); }
.done-banner em { font-style: normal; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--sun), var(--coral)); border-radius: 12px; padding: 4px 9px; }
.today-step > .done-banner:first-child { margin-top: 0; }

/* ================= v19: the Path, open. One bar to the end zone, a bar and a status per stage, a tick per step ================= */
.pathtop h2 { font-size: 1.3rem; }
.pathtop.allin { background: linear-gradient(160deg, var(--sage-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 .seg.flex span { background: repeating-linear-gradient(135deg, var(--line-2) 0 5px, var(--card) 5px 10px); }
.pathbar .seg.flex i { opacity: .75; }
.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(--sage-d); }
.pathbar .endzone.lit svg { color: #fff; background: linear-gradient(135deg, var(--sun), var(--coral)); animation: glow 2.4s ease-in-out infinite; }
.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 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.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-meter { height: 8px; border-radius: 5px; background: var(--line-2); overflow: hidden; margin: 6px 0 5px; }
.leg-meter i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c), var(--cd)); transition: width .6s var(--spring); }
details.leg .leg-sub .tag { margin-right: .3em; }
.steprows { margin-top: 12px; border-radius: 16px; background: var(--bg); 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-strong); color: transparent; transition: transform .35s var(--spring), background .2s; }
.steprow .stick svg { width: 15px; height: 15px; }
.steprow .stick:active i { transform: scale(.85); }
.steprow .stick:disabled { opacity: .35; }
.steprow.done .stick i, .steprow.mine .stick i { background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: none; color: #fff; }
.steprow.mine .stick i { background: var(--sage-p); color: var(--sage-d); box-shadow: inset 0 0 0 2px var(--sage-l); }
.steprow a { flex: 1; min-width: 0; padding: 9px 30px 9px 0; text-decoration: none; color: var(--ink); position: relative; }
.steprow a::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 a span { display: block; font-weight: 750; font-size: .95em; line-height: 1.25; }
.steprow a small { display: block; font-size: .76em; font-weight: 600; color: var(--ink-mute); }
.steprow.next { background: var(--card); box-shadow: inset 3px 0 0 var(--c); }
.steprow.next a small { color: var(--cd); font-weight: 800; }
.pathline { display: inline-block; margin: -.35em 0 .8em; font-size: .8em; font-weight: 800; color: var(--cd); text-decoration: none; }
.pathline::after { content: " ›"; }

/* v20: extras sit under a stage, outside what locks it in; Fasting is shown, not ticked */
.extras { margin-top: 14px; padding-top: 12px; border-top: 1.3px dashed var(--line); display: flex; flex-wrap: wrap; gap: 7px; }
.extras-head { flex: 1 0 100%; font-size: .8em; color: var(--ink-mute); margin-bottom: 2px; }
.extras-head b { color: var(--ink-soft); }
.extra { display: inline-flex; align-items: center; gap: .35em; padding: .42em .8em; border-radius: 999px; font-size: .84em; font-weight: 700; text-decoration: none; color: var(--ink-soft); background: var(--bg); box-shadow: inset 0 0 0 1.3px var(--line); }
.extra.done { color: var(--sage-d); background: var(--sage-p); box-shadow: none; }
.extra .tick { width: 13px; height: 13px; }
.power { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--sky-p); }
.power-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.power-row .dots { flex: none; width: 92px; display: flex; gap: 5px; }
.power-row .dots i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 2px var(--sky-l); color: #fff; }
.power-row .dots i.on { background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: none; }
.power-row .dots svg { width: 14px; height: 14px; }
.power-row b { display: block; font-size: .95em; line-height: 1.2; }
.power-row small { display: block; font-size: .78em; color: var(--ink-mute); font-weight: 600; }
.power .btn { font-size: .9em; }

/* v21: a stage's first opening is an event: picture, a few short beats, our words, said aloud */
.intro .pic.wide { margin: 0 0 12px; border-radius: 18px; overflow: hidden; aspect-ratio: 720 / 330; }
.intro .eyebrow { color: var(--cd); }
.ibeat { position: relative; padding: 0 0 0 16px; margin: 0 0 12px; }
.ibeat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--c), var(--cd)); }
.ibeat b { display: block; font-size: 1.02em; font-weight: 850; margin-bottom: 1px; }
.ibeat p { margin: 0; color: var(--ink-soft); font-size: .95em; }
.ourwords { background: var(--card); border-radius: 16px; padding: 12px 14px; margin: 4px 0 14px; box-shadow: var(--shadow-sm); }
.ourwords .words { margin: .4em 0 0; }
.dialpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.dialpair figure { margin: 0; text-align: center; background: var(--card); border-radius: 16px; padding: 10px 8px; box-shadow: var(--shadow-sm); }
.dialpair svg { width: 84px; height: 84px; display: block; margin: 0 auto 4px; }
.dialpair figcaption { font-size: .76em; color: var(--ink-mute); line-height: 1.3; }
.dialpair figcaption b { display: block; font-size: 1.15em; color: var(--ink); }
.introbtn { margin: .6em 0 0; --c: var(--sky); --cd: var(--sky-d); }
.subhead { padding: 12px 14px 8px; font-weight: 850; font-size: .92em; color: var(--cd); border-top: 1.3px solid var(--line-2); background: var(--card); }
.subhead small { display: block; font-weight: 600; font-size: .84em; color: var(--ink-mute); margin-top: 1px; }

/* v22: a stage opens as its own page under the two of them; the first window step asks the two times */
.intro h1 { margin-bottom: .25em; }
.intro .pic.wide { margin: 0 0 12px; }
span.stick { flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.usual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: .2em 0 1em; }
.usual label { display: block; font-size: .8em; font-weight: 800; color: var(--ink-soft); }
.usual input { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 1.25rem; font-weight: 800; color: var(--ink); padding: .5em .5em; border-radius: 14px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 1.6px var(--sky-l); -webkit-appearance: none; appearance: none; min-height: 50px; }
.usual-say { grid-column: 1 / -1; margin: 0; font-size: .95em; color: var(--ink-soft); }
.usual-say:empty { display: none; }
.wins-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 14px; }
a.chip { text-decoration: none; }

/* v23: the stage page leads with the next step; the explanation is a drop-down. Working on it. */
.about { margin: 0 0 12px; }
.about > div { padding-top: 4px; }
.nextup { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 4px; box-shadow: var(--shadow-md); }
.nextup .eyebrow { color: var(--cd); }
.nextup b { display: block; font-size: 1.12em; font-weight: 850; line-height: 1.2; margin: 1px 0 2px; }
.nextup span { display: block; font-size: .88em; color: var(--ink-soft); line-height: 1.35; }
.workrow { margin-top: 12px; padding-top: 12px; border-top: 1.3px dashed var(--line); }
.workrow.on .btn:first-child { background: var(--sun-p); }

/* v24: the eating-days tracker under the dial; a video slot */
.wtrack { margin-top: 14px; padding-top: 12px; border-top: 1.3px dashed var(--line); text-align: center; }
.wt-hint { margin: .9em 0 0; text-align: center; }
.wt-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; align-items: end; height: 92px; margin-top: 8px; }
.wtrack.wide .wt-bars { grid-template-columns: repeat(30, 1fr); gap: 1.5px; height: 76px; }
.wt-span { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.wt-span .chip { margin: 0; opacity: .6; }
.wt-span .chip.on { opacity: 1; box-shadow: inset 0 0 0 1.8px var(--sage); }
.wt-day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.wt-day span { font-size: 9.5px; font-weight: 800; color: var(--ink-soft); line-height: 1.3; }
.wt-day i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #FFE08A, var(--sun)); } /* gold, never red: a long day is a day, not a miss */
.wt-day.in i { background: linear-gradient(180deg, #7ACB91, var(--sage-d)); }
.wt-day.none i { background: var(--line-2); border-radius: 3px; }
.wt-day small { font-size: 9.5px; font-weight: 700; color: var(--ink-mute); margin-top: 3px; }
.videocard video { display: block; width: 100%; border-radius: 14px; background: #000; aspect-ratio: 16 / 9; }
/* v29: a chosen YouTube video sits at the bottom of a stage, a step or the craving answer. It is a picture with a
   play button until it is pressed — pressing it is what loads YouTube, so nothing of theirs runs on an unopened page. */
.videocard video, .videocard iframe { display: block; width: 100%; border: 0; border-radius: 14px; background: #000; aspect-ratio: 16 / 9; }
.videocard .vplay { display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; cursor: pointer; }
.videocard .vplay img { display: block; width: 100%; height: 100%; object-fit: cover; }
.videocard .vplay i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--c), var(--cd)); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.videocard .vplay i::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.videocard .vplay:active i { transform: translate(-50%, -50%) scale(.9); }
@media (hover: hover) { .videocard .vplay:hover i { transform: translate(-50%, -50%) scale(1.09); } }
.videocard .vchan { color: var(--ink-mute); margin: .45em 0 0; }
/* v30: what one of them says when you put something back on the path, inside the stage drop-down */
.slipsaid { border-left: 3px solid var(--sage); padding-left: 12px; margin: 0 0 14px; }
.slipsaid h3 { margin-top: 0; }

/* v25: Ready-made */
.card ul.readylist, .readylist { list-style: none; margin: 0; padding: 0; }
.readylist li { padding: 9px 0; border-top: 1.3px solid var(--line-2); }
.readylist li:first-child { border-top: 0; padding-top: 2px; }
.readylist b { display: block; font-size: .98em; }
.readylist span { display: block; font-size: .86em; color: var(--ink-soft); line-height: 1.4; }

/* v26: three phases. A bar's lighter part = being practised and fresh; the walk */
.leg-meter, .pathbar .seg span { position: relative; }
.leg-meter b, .pathbar .seg span b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c), var(--cd)); opacity: .32; transition: width .6s var(--spring); }
.leg-meter i, .pathbar .seg span i { position: relative; }
.repbar { margin: .2em 0 1em; }
.repbar .leg-meter { height: 10px; margin: 0 0 6px; }
.walkrow { background: var(--card); border-radius: 16px; padding: 12px 14px; margin: 0 0 10px; box-shadow: var(--shadow-sm); }
.walkrow b { display: block; font-size: 1em; line-height: 1.25; }
.walkrow span { display: block; font-size: .84em; color: var(--ink-mute); margin: 2px 0 9px; line-height: 1.35; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg3 button { min-height: 44px; border-radius: 12px; font-weight: 800; font-size: .9em; background: var(--bg); color: var(--ink-soft); box-shadow: inset 0 0 0 1.4px var(--line); transition: transform .3s var(--spring); }
.seg3 button:active { transform: scale(.96); }
.seg3 button.on { color: #fff; box-shadow: none; background: linear-gradient(135deg, var(--c), var(--cd)); }
.seg3 button.on[data-v="some"] { background: linear-gradient(135deg, var(--sun), var(--coral)); }
.seg3 button.on[data-v="not"] { background: var(--ink-mute); }
.walk .pic.wide { aspect-ratio: 720 / 300; margin: 0 0 12px; }

/* v33 the real food pyramid */
.pyr { display: block; width: 100%; max-width: 420px; height: auto; margin: 6px auto 4px; }
.pyr-tier { cursor: pointer; outline: none; }
.pyr-tier polygon { fill: var(--f); stroke: var(--cd); stroke-width: 2; stroke-linejoin: round; transition: transform .25s var(--spring); transform-box: fill-box; transform-origin: center; }
.pyr-tier:hover polygon, .pyr-tier:focus-visible polygon { transform: scale(1.03); }
.pyr-tier:active polygon { transform: scale(.97); }
.pyr-name { font-family: var(--sans); font-size: 14px; font-weight: 850; fill: var(--ink); pointer-events: none; }
.pyr-how { font-family: var(--sans); font-size: 10.5px; font-weight: 750; fill: var(--cd); pointer-events: none; letter-spacing: .02em; }
.pyr-rule { margin: .6em 0 0; font-weight: 650; color: var(--ink-soft); }
details.pyr-d > summary { justify-content: flex-start; gap: 12px; }
details.pyr-d > summary::after { margin-left: auto; }
.pyr-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--cd); box-shadow: inset 0 0 0 2px var(--cd); }
.pyr-mini { width: 48px; height: 42px; flex: none; }
.pyr-mini path { fill: var(--sun-p); stroke: var(--sun-d); stroke-width: 1.4; stroke-linejoin: round; }
.wstats .stat b { font-size: 1.12em; white-space: nowrap; }

/* the builder's key on the gate: a quiet link, then a small field (2026-09-26) */
.linkbtn { display: block; margin: .9em auto 0; background: none; border: 0; padding: 6px 10px; font: inherit; font-size: .85rem; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.codeform { display: flex; gap: 8px; justify-content: center; margin: .9em auto 0; max-width: 260px; }
.codeform input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }

/* v36: the weight card on Today — the number, a small line, this morning's box */
.wq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: inherit; }
.wq-big { display: block; font-size: 1.75rem; font-weight: 900; line-height: 1.1; margin: .1em 0 .1em; }
.wq-spark { width: 104px; height: 44px; flex: none; }
.wq-spark polyline { fill: none; stroke: var(--sage-d); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wq-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wq-row .wlab { margin: 0; font-weight: 700; }
.wq-row .wrow { margin: 0; flex: 1; min-width: 120px; }
.wq-done { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--sage-d); }
.wq-done span { flex: 1; color: var(--ink); }
.wq-done a { font-size: .9rem; color: var(--ink-mute); }
.wq-more { display: block; margin-top: 10px; color: var(--ink-mute); text-decoration: none; }

/* v37: the door — a phone will not play a sound before a touch, so on the way in one tap starts the room */
.door { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 38vh 0 0; border: 0; margin: 0; background: linear-gradient(180deg, rgba(255,251,240,.18), rgba(255,251,240,.62) 55%, rgba(255,251,240,.8)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; font: inherit; color: var(--ink); transition: opacity .4s ease; -webkit-tap-highlight-color: transparent; }
.door.out { opacity: 0; pointer-events: none; }
.door-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 34px 18px; border-radius: 26px; background: var(--card); box-shadow: 0 14px 40px rgba(30,40,30,.18); animation: doorIn .6s var(--spring) both; }
.door-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, var(--sun), var(--sage), var(--sky)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.door-card small { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--sage-d); }
.door-card b { font-size: 1.35rem; font-weight: 900; }
.door-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; color: #fff; background: linear-gradient(135deg, var(--sage), var(--sky)); animation: doorPulse 1.8s ease-in-out infinite; }
.door-ic svg { width: 26px; height: 26px; }
@keyframes doorIn { from { transform: translateY(14px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes doorPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(95,167,118,.45); } 50% { box-shadow: 0 0 0 12px rgba(95,167,118,0); } }

/* v37: the Light School as one quiet line at the very foot of Today */
.ls-line { display: flex; align-items: center; gap: 12px; margin: 22px 2px 8px; padding: 12px 16px; border-radius: 14px; text-decoration: none; color: var(--ink-soft); font-weight: 650; font-size: .92rem; box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.ls-line span { flex: 1; }
.ls-line small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1px; }
.ls-line i { font-style: normal; font-size: 1.3rem; color: var(--ink-mute); }