/* reset app shell: the page, the fixed glass chrome, screens and the pieces the design system leaves
   to the app. Components are in reset.css and every colour in tokens.css; nothing here names a colour.
   The glass rule (house rule no-page-animation): glass only on the fixed header and tab bar, the page
   ground is solid and scrolls, cards and sheets are solid, and chrome turns solid while content moves. */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-wght.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* A class that sets display must never beat the hidden attribute. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; height: var(--app-h, 100vh); overflow: hidden; }
a { color: var(--primary); text-decoration: none; }
.rs a:not(.btn):not(.tab):not(.meal-open):not(.cook-card):not(.list-row):not(.source):not(.moment-chip) { font-weight: 600; }

/* Chrome */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding-top: env(safe-area-inset-top, 0px); border-bottom: 0.5px solid var(--glass-edge); }
.top .nav-bar { border-bottom: 0; grid-template-columns: 1fr auto; padding: 0 8px 0 20px; }
.brandmark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 700 19px/1 var(--font); letter-spacing: -0.045em; }
.brandmark .ic { color: var(--primary); width: 24px; height: 24px; }
.top .tag-sample { margin-left: 8px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) + 4px); }
.tab { text-decoration: none; }
.tab .ic { width: 24px; height: 24px; }
main { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + var(--size-header-compact) + 8px) 0 calc(env(safe-area-inset-bottom, 0px) + var(--size-tab-bar) + 24px); }
main:focus { outline: none; }
.view { max-width: 430px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 359px) { .view { padding: 0 12px; } }
.view > .lt-header { padding: 4px 0 4px; }
.view.fade { animation: rs-fade-in var(--d-fast) var(--ease-standard) both; }

/* Running text inside cards and screens */
.prose { font: var(--t-body); letter-spacing: var(--t-body-track); color: var(--ink); }
.prose p + p { margin-top: 10px; }
.note { font: var(--t-footnote); color: var(--ink-2); }
.card.pad16 { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card h2, .group-title { font: var(--t-title-3); letter-spacing: var(--t-title-3-track); }
.section-label { padding: 12px 4px 0; }
.foot { text-align: center; font: var(--t-footnote); color: var(--ink-3); padding: 16px 0 8px; }
.foot .lockup { display: block; margin: 0 auto 8px; height: 28px; width: auto; }
.list-row a, a.list-row { color: var(--ink); }
.list-row .ic { color: var(--ink-3); }
.btn { text-decoration: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

/* Today */
.today-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.today-meals { display: flex; flex-direction: column; gap: 10px; }
.meal-open { display: contents; color: inherit; }
.meal-open .meal-body { cursor: pointer; }
.meal .ph { width: 76px; height: 76px; border-radius: 10px; }
.meal .water { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink-3); border-radius: 24px; }
.meal .water[aria-pressed="true"] { color: var(--primary); }
.meal-name { white-space: normal; }
@media (max-width: 359px), (max-height: 600px) {
  .today .meal { gap: 10px; padding: 6px 4px 6px 6px; border-radius: 13px; }
  .today .meal .photo, .today .meal .ph { width: 54px; height: 54px; border-radius: 9px; }
  .today .meal .meal-name { font-size: 15px; line-height: 19px; -webkit-line-clamp: 1; }
  .today .meal .por .amt { font-size: 12.5px; line-height: 16px; }
  .today .meal .meal-kicker { font-size: 10.5px; line-height: 13px; }
  .today .meal .meal-body { gap: 1px; }
  /* The compact card reads the slot name aloud but does not draw it, so each person keeps a full
     portion line and a cook day still fits 320 by 568. */
  .today .meal .meal-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .today .meal .por .who { width: 14px; height: 14px; font-size: 8px; }
  .today .meal .tick { --tv: 26px; }
  .today .lt-header { padding-bottom: 0; }
  .today .today-meals { gap: 8px; }
  .today .cook-card { padding: 6px 8px 6px 10px; gap: 10px; border-radius: 14px; }
  .today .cook-card .badge { width: 28px; height: 28px; border-radius: 8px; }
  .today .lt-header .t-large-title { font: var(--t-title-1); }
}
details.card > summary { list-style: none; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; font: var(--t-headline); cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { border-bottom: 0.5px solid var(--line); }
table.servings { width: 100%; border-collapse: collapse; font: var(--t-callout); font-feature-settings: var(--font-numeric); }
table.servings td, table.servings th { padding: 8px 16px; text-align: left; border-bottom: 0.5px solid var(--line); }
table.servings th { font: var(--t-footnote); color: var(--ink-3); font-weight: 600; }
.servings-wrap { padding-bottom: 8px; }
.servings-wrap .source { padding: 4px 16px 0; }

/* Kitchen */
.cook-step { font: var(--t-cook-step); letter-spacing: var(--t-cook-step-track); }
.step-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 0.5px solid var(--line); }
.step-row:last-child { border-bottom: 0; }
.step-row .t { font: var(--t-body); flex: 1; }
.step-row.is-on .t { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.total-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 0.5px solid var(--line); font: var(--t-callout); }
.total-row:last-child { border-bottom: 0; }
.total-row .what { flex: 1 1 100%; }
.check-row .box { border: 0; }
.check-row .act { margin-left: auto; }
.check-row button.box-btn { width: 48px; height: 48px; margin: -13px -13px -13px -13px; display: grid; place-items: center; }
.recall { display: flex; flex-direction: column; gap: 8px; }
.recall-item { padding: 10px 0; border-top: 0.5px solid var(--line); font: var(--t-footnote); color: var(--ink-2); }
.recall-item b { color: var(--ink); font-weight: 600; }

/* Setup */
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); }
.dots i.on { background: var(--primary); width: 18px; }
.choices { display: grid; gap: 10px; }
.choice { text-align: left; padding: 14px 16px; min-height: 64px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-1), var(--elev-rim); color: var(--ink); font: var(--t-body); }
.choice b { font: var(--t-headline); display: block; }
.choice span { font: var(--t-footnote); color: var(--ink-2); }
.choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary), var(--elev-1); background: var(--primary-tint); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week button { min-height: 48px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--control); font: var(--t-subhead); font-weight: 600; color: var(--ink); }
.week button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.setup-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; }
.err { background: var(--notice-tint); color: var(--ink); border-radius: var(--r-md); padding: 10px 14px; font: var(--t-footnote); }
select.input { appearance: none; -webkit-appearance: none; }
input.input, select.input, textarea.input { font-size: 17px; }
textarea.input { height: auto; padding: 12px 16px; }

/* Calendar */
.cal-card { padding: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; font: var(--t-headline); }

/* Progress */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trend svg { width: 100%; height: 120px; color: var(--primary); }

/* Finish and Welcome: the brand field */
/* The brand field carries the mark only; text stays on the solid ground below it. */
.hero { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--brand-field); padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.hero .mark { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--elev-2); }
.portions { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }

/* Sources */
.src { padding: 12px 16px; border-bottom: 0.5px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.src:last-child { border-bottom: 0; }
.src .who { font: var(--t-headline); }
.src .cred { font: var(--t-footnote); color: var(--ink-2); }
.src .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: var(--t-source); color: var(--ink-3); }
.src.is-target { box-shadow: inset 3px 0 0 var(--primary); }
.lic { display: inline-flex; height: 20px; padding: 0 7px; border-radius: 5px; align-items: center; background: var(--surface-2); color: var(--ink-2); font: 600 11px/14px var(--font); }

/* The castings' sheet and saved pill take the design system's surfaces, not their own defaults. */
:root { --sheet-bg: var(--surface); --sheet-ink: var(--ink); --sheet-edge: transparent; --sheet-scrim: var(--scrim);
  --ack-bg: var(--ink); --ack-ink: var(--bg); --ack-edge: transparent; --ack-top: 64px; }
.sheet-scrim { z-index: var(--z-scrim); }
.sheet-scrim .sheet { position: relative; left: auto; right: auto; bottom: auto; max-width: 560px; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom, 0px)); gap: 12px; overflow: auto; font: var(--t-body); }
.sheet-scrim .sheet h2 { font: var(--t-title-2); letter-spacing: var(--t-title-2-track); }
.sheet .hero-photo { margin: 0 -20px; aspect-ratio: 3 / 2; border-radius: 0; width: calc(100% + 40px); }
.sheet .hero-photo .ic { width: 48px; height: 48px; }
.sheet ol.steps { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sheet .chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .sheet-scrim.open .sheet { animation: rs-sheet-up var(--spring-sheet-ms) var(--spring-sheet) both; }
  @keyframes rs-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .sheet-scrim.open .sheet { animation: rs-fade-in 120ms linear both; } }

/* Day celebration: the header counter */
.counter.bloom { animation: rs-bloom var(--d-day-celebrate) var(--ease-enter) both; }
@keyframes rs-bloom { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .counter.bloom, .view.fade { animation: none; } }

/* Pieces the design system draws as buttons and the app also needs as links */
.meal-open { grid-column: 1 / 3; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; border-radius: 10px; }
.meal.has-water { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.meal.has-water .meal-open { grid-column: 1 / 3; }
.seg a { height: 32px; border-radius: 8px; display: grid; place-items: center; font: 500 13px/18px var(--font); color: var(--ink-2); position: relative; }
.seg a::after { content: ""; position: absolute; inset: -8px 0; }
.seg a[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); font-weight: 600; box-shadow: var(--elev-1); }
.seg button.num { height: 40px; font-size: 15px; }
.recall-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--notice-tint); color: var(--notice); display: grid; place-items: center; flex: none; }
.hero { align-items: center; justify-content: center; min-height: 148px; }
.finish .hero { min-height: 180px; }
input, select, textarea { font-size: 17px; }

/* The legal pages: the same chrome and surfaces, a page that scrolls normally */
.legal { height: auto; overflow: auto; }
.legal main { position: static; padding: calc(env(safe-area-inset-top, 0px) + var(--size-header-compact) + 16px) 0 40px; }
.legal main > section { max-width: 720px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 12px; font: var(--t-body); }
.legal h1 { font: var(--t-large-title); letter-spacing: var(--t-large-title-track); }
.legal .card { padding: 16px; }
.legal .card ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal .muted { color: var(--ink-2); }
.legal .small { font: var(--t-footnote); }
.legal p { margin: 6px 0; }
.legal .grow { flex: 1; }

/* My recipes */
.food-dot { width: 36px; height: 36px; border-radius: 10px; background: var(--g-tint); color: var(--g); display: grid; place-items: center; flex: none; }
.serv-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 70px; gap: 8px; align-items: center; }
.card .photo.ph { width: 54px; height: 54px; border-radius: 10px; }

/* Paywall (store builds only) */
.paywall { gap: 14px; }
.paywall .pass-icon { border-radius: 15px; box-shadow: var(--elev-2); }
.paywall .perk { width: 26px; height: 26px; border-radius: 13px; background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; flex: none; }
.paywall .pass-offer { padding: 16px; box-shadow: inset 0 0 0 2px var(--primary); display: flex; align-items: center; gap: 12px; }
.paywall a.t-footnote { min-height: 48px; display: inline-flex; align-items: center; }

/* Pull to refresh (motion.js pullToRefresh): the reset mark drops in under the header. */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 58px); width: 40px; height: 40px; margin-left: -20px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--primary);
  box-shadow: 0 4px 14px rgba(11, 15, 18, 0.16); z-index: var(--z-header); opacity: 0; transform: translateY(-56px) scale(0.6); pointer-events: none; }
.ptr .ic { width: 22px; height: 22px; }
.ptr.ready { background: var(--primary); color: var(--on-primary); }
.ptr.back { transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard); }
.ptr.go .ic { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.go .ic { animation: none; } }

/* ===== Redesign, 9 Nov 2026: landing, tiles, drinks, food quality, rings, milestones, tester ===== */
/* Full-screen routes (the first screen and setup) have no header and no tabs. */
body[data-route="bare"] .top, body[data-route="bare"] .tabbar, body[data-route="bare"] #ptr { display: none; }
body[data-route="bare"] main { padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 calc(env(safe-area-inset-bottom, 0px) + 24px); }
body[data-route="land"] .top, body[data-route="land"] .tabbar, body[data-route="land"] #ptr { display: none; }
body[data-route="land"] main { padding: 0; background: var(--brand-plum); }

/* Landing: the logo opens into the stage (see welcome() in views.js for the idea) */
.landing.lx { position: relative; min-height: 100%; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px calc(env(safe-area-inset-bottom, 0px) + 18px); color: white; overflow: hidden; overflow: clip;
  background: var(--brand-field); --px: 0; --py: 0; }
.lx > * { position: relative; z-index: 1; width: 100%; max-width: 440px; }
/* clip, not hidden: focusing a dot must never scroll the page sideways under the glows (seen 10 Nov 2026) */
.lx-sky, .lx-grain { position: absolute !important; inset: 0; z-index: 0 !important; max-width: none !important; pointer-events: none; overflow: hidden; }
.lx-sky i { position: absolute; display: block; border-radius: 50%; filter: blur(48px); opacity: .55; will-change: transform; }
.lx-sky .b1 { display: none; width: 70vmax; height: 70vmax; left: -30vmax; top: -24vmax; background: var(--brand-copper); animation: lx-drift1 22s ease-in-out infinite alternate; }
.lx-sky .b2 { display: none; width: 60vmax; height: 60vmax; right: -28vmax; top: 22%; background: var(--brand-rose); animation: lx-drift2 26s ease-in-out infinite alternate; }
/* On black, one low orange glow under the button is the only light (the Apple palette, 10 Nov 2026). */
.lx-sky .b3 { width: 60vmax; height: 60vmax; left: 5%; bottom: -34vmax; background: var(--brand-copper); opacity: .2; filter: blur(70px); animation: lx-drift3 30s ease-in-out infinite alternate; }
@keyframes lx-drift1 { to { transform: translate(calc(14vmax + var(--px) * 3vmax), calc(10vmax + var(--py) * 3vmax)) scale(1.1); } }
@keyframes lx-drift2 { to { transform: translate(-12vmax, -8vmax) scale(.9); } }
@keyframes lx-drift3 { to { transform: translate(10vmax, -6vmax) scale(1.15); } }
.lx-grain { opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lx-word { margin: 0; text-align: center; font-size: 30px; font-weight: 750; letter-spacing: -0.035em; line-height: 1;
  opacity: 0; transform: translateY(-8px); animation: lx-rise .8s cubic-bezier(.05, .7, .1, 1) 1.5s forwards; }

/* Stage */
.lx-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; touch-action: pan-y; user-select: none; -webkit-user-select: none; min-height: 0; }
.lx-orbit { container-type: inline-size; position: relative; width: min(84vw, 340px, 46vh); aspect-ratio: 1; transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px)); }
.lx-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lx-halo { stroke: var(--brand-gold); stroke-width: 26; opacity: 0; filter: blur(10px); }
.lx-arc { stroke: var(--lc); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--lc) 55%, transparent)); stroke-width: 19.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lx-draw 1.05s cubic-bezier(.65, 0, .35, 1) .15s forwards, lx-thin .9s cubic-bezier(.65, 0, .35, 1) 1.65s forwards; }
.lx-r { stroke: white; stroke-width: 19.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lx-draw .6s cubic-bezier(.65, 0, .35, 1) .75s forwards; }
.lx-close { stroke: var(--brand-gold); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }
@keyframes lx-thin { to { stroke-width: 7; } }
@keyframes lx-pop { to { transform: scale(1); } }
@keyframes lx-rise { to { opacity: 1; transform: none; } }
/* Intro over: the logo's r and dots give way to the stage. */
[data-phase="story"] .lx-r { animation: lx-out .45s ease forwards; }
@keyframes lx-out { from { opacity: 1; } to { opacity: 0; transform: scale(.6); } }
/* Each dot's tap area is as large as the gap to its neighbour allows (24 px at the smallest ring, AA). */
.lx-dot { position: absolute; width: clamp(24px, 9.5cqw, 44px); height: clamp(24px, 9.5cqw, 44px); translate: -50% -50%; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; }
/* In the logo the dots are gold; when the story starts the ones still to come soften, so the same
   dots become the steps with no swap. */
.lx-dot i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--brand-gold); transform: scale(0);
  animation: lx-pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .6s, box-shadow .6s; }
.lx-dot.d0 i { animation-delay: 1s; } .lx-dot.d1 i { animation-delay: 1.1s; } .lx-dot.d2 i { animation-delay: 1.2s; } .lx-dot.d3 i { animation-delay: 1.3s; }
[data-phase="story"] .lx-dot i { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); transform: scale(1); animation: none; }
.lx-dot:focus-visible { outline: 2px solid white; outline-offset: -6px; border-radius: 50%; }
/* Done dots are gold; the dot playing grows and breathes. */
[data-step="1"] .d0 i, [data-step="2"] :is(.d0, .d1) i, [data-step="3"] :is(.d0, .d1, .d2) i, [data-step="4"] .lx-dot i { background: var(--brand-gold); box-shadow: 0 0 12px rgba(226, 199, 154, .7); }
[data-phase="story"][data-step="0"] .d0 i, [data-phase="story"][data-step="1"] .d1 i, [data-phase="story"][data-step="2"] .d2 i, [data-phase="story"][data-step="3"] .d3 i { background: var(--brand-gold); transform: scale(1.3); animation: lx-breathe 1.7s ease-in-out infinite; }
@keyframes lx-breathe { 50% { box-shadow: 0 0 0 7px rgba(226, 199, 154, .22), 0 0 18px rgba(226, 199, 154, .8); } }
/* All four done: the gap fills in gold and the ring glows, then it starts again. */
[data-step="4"] .lx-close { opacity: 1; animation: lx-draw .7s cubic-bezier(.65, 0, .35, 1) .1s forwards; }
[data-step="4"] .lx-halo { animation: lx-halo 1.8s ease-out .5s forwards; }
[data-step="4"] .lx-arc { stroke: var(--brand-gold); transition: stroke .6s .3s; }
[data-step="4"] .lx-r { animation: lx-draw .6s cubic-bezier(.65, 0, .35, 1) .55s both; stroke-dashoffset: 1; opacity: 1; stroke: var(--brand-gold); stroke-width: 12; }
@keyframes lx-halo { 30% { opacity: .55; } 100% { opacity: 0; } }

/* Scenes live inside the ring and enter from the side they were swiped from. */
.lx-scenes { position: absolute; inset: 11%; transform: translateX(var(--drag, 0px)); transition: transform .45s cubic-bezier(.34, 1.3, .64, 1); }
.lx-stage.dragging .lx-scenes { transition: none; }
.lx-scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; visibility: hidden; }
[data-phase="story"][data-step="0"] .sn0, [data-step="1"] .sn1, [data-step="2"] .sn2, [data-step="3"] .sn3 { visibility: visible; animation: lx-in .6s cubic-bezier(.34, 1.3, .64, 1) forwards; }
[data-dir="-1"] .lx-scene { --from: -36px; }
@keyframes lx-in { from { opacity: 0; transform: translateX(var(--from, 36px)) scale(.92); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.lx-scene .k-paper { fill: white; } .lx-scene .k-copper { fill: var(--brand-copper); } .lx-scene .k-rose { fill: var(--brand-rose); }
.lx-scene .k-plum { fill: var(--brand-plum); } .lx-scene .k-gold { fill: var(--brand-gold); } .lx-scene .k-dairy { fill: var(--dairy); }
.lx-scene .k-leaf { fill: var(--vegetables); } .lx-scene .k-leafsm { fill: var(--vegetables); stroke: var(--vegetables); stroke-width: 3; stroke-linecap: round; }
.lx-scene .k-stem { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-linecap: round; }
.lx-scene .k-tomato { fill: var(--protein); } .lx-scene .k-carrot { fill: var(--brand-copper); } .lx-scene .k-grain { fill: var(--grains); }
.lx-scene .k-day { fill: var(--brand-plum); opacity: .22; } .lx-scene .k-pick { fill: var(--brand-rose); }
.lx-scene .k-weave { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 2.5; stroke-linecap: round; }
.lx-scene .k-shine { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 5; stroke-linecap: round; }
.lx-scene .k-tickmark { fill: none; stroke: var(--brand-plum); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lx-scene g, .lx-scene path, .lx-scene circle, .lx-scene ellipse, .lx-scene rect { transform-box: fill-box; }
/* 0: calendar */
.sc-cal { transform-origin: 50% 0; }
[data-step="0"] .sc-cal { animation: lx-flip .8s cubic-bezier(.34, 1.4, .64, 1) .1s both; }
@keyframes lx-flip { from { transform: perspective(400px) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
.sc-circle { fill: none; stroke: var(--brand-gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: center; transform: rotate(-90deg); }
[data-step="0"] .sc-circle { animation: lx-draw .7s cubic-bezier(.65, 0, .35, 1) .9s forwards; }
.sc-spark { fill: var(--brand-gold); transform-origin: center; transform: scale(0); }
[data-step="0"] .sc-spark { animation: lx-spark .7s cubic-bezier(.34, 1.56, .64, 1) forwards; }
[data-step="0"] .p1 { animation-delay: 1.45s; } [data-step="0"] .p2 { animation-delay: 1.6s; } [data-step="0"] .p3 { animation-delay: 1.75s; }
@keyframes lx-spark { 60% { transform: scale(1.25) rotate(45deg); } 100% { transform: scale(1) rotate(90deg); } }
/* 1: basket */
.sc-shop .it { opacity: 0; }
[data-step="1"] .sc-shop .it { animation: lx-drop .75s cubic-bezier(.3, 1.5, .55, 1) both; }
[data-step="1"] .it2 { animation-delay: .35s; } [data-step="1"] .it3 { animation-delay: .6s; } [data-step="1"] .it4 { animation-delay: .85s; } [data-step="1"] .it1 { animation-delay: .15s; }
@keyframes lx-drop { from { transform: translateY(-90px) rotate(-18deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.sc-basket { transform-origin: 50% 100%; }
[data-step="1"] .sc-basket { animation: lx-give .9s ease-out .45s, lx-give .9s ease-out 1.1s; }
@keyframes lx-give { 0%, 100% { transform: none; } 20% { transform: scale(1.05, .93); } 45% { transform: scale(.98, 1.03); } }
/* 2: pot */
.sc-lid { transform-origin: 50% 100%; }
[data-step="2"] .sc-lid { animation: lx-lid 1.1s ease-in-out .3s infinite; }
@keyframes lx-lid { 0%, 60%, 100% { transform: none; } 20% { transform: translateY(-7px) rotate(-4deg); } 40% { transform: translateY(-2px) rotate(2deg); } }
.sc-steam .st { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
[data-step="2"] .sc-steam .st { animation: lx-steam 1.9s ease-in-out infinite; }
[data-step="2"] .st.s2 { animation-delay: .45s; } [data-step="2"] .st.s3 { animation-delay: .9s; }
@keyframes lx-steam { 0% { stroke-dashoffset: 1; opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-14px); } }
.sc-flame path { transform-origin: 50% 100%; }
[data-step="2"] .sc-flame .f1 { animation: lx-flick .5s ease-in-out infinite alternate; } [data-step="2"] .sc-flame .f2 { animation: lx-flick .42s ease-in-out .1s infinite alternate; } [data-step="2"] .sc-flame .f3 { animation: lx-flick .55s ease-in-out .2s infinite alternate; }
@keyframes lx-flick { from { transform: scale(1, .82); } to { transform: scale(.92, 1.12); } }
/* 3: bowl */
.sc-fill .fi { opacity: 0; }
[data-step="3"] .sc-fill .fi { animation: lx-drop .7s cubic-bezier(.3, 1.5, .55, 1) both; }
[data-step="3"] .f1 { animation-delay: .2s; } [data-step="3"] .f2 { animation-delay: .45s; } [data-step="3"] .f3 { animation-delay: .7s; } [data-step="3"] .f4 { animation-delay: .95s; }
.sc-tick { transform-origin: center; transform: scale(0); }
[data-step="3"] .sc-tick { animation: lx-badge .6s cubic-bezier(.34, 1.56, .64, 1) 1.55s forwards; }
@keyframes lx-badge { 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Captions: one at a time, rising out of a soft blur. */
.lx-caps { position: relative; width: 100%; height: 44px; transform: translate(calc(var(--px) * 3px), 0); }
.lx-cap { position: absolute; inset: 0; margin: 0; text-align: center; font-size: 30px; font-weight: 720; letter-spacing: -0.03em; line-height: 44px; opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity .45s, transform .6s cubic-bezier(.05, .7, .1, 1), filter .45s; }
[data-phase="story"][data-step="0"] .cn0, [data-step="1"] .cn1, [data-step="2"] .cn2, [data-step="3"] .cn3, [data-step="4"] .cn4 { opacity: 1; transform: none; filter: none; transition-delay: .15s; }
.lx-pause { position: absolute; right: 0; bottom: 0; /* clear of the logo's dots, which sit top right */ width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255, 255, 255, .14); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .4s; }
[data-phase="story"] .lx-pause { opacity: 1; }
.lx-pause i { width: 10px; height: 12px; border-left: 3px solid white; border-right: 3px solid white; }
.lx-pause[aria-pressed="true"] i { width: 0; height: 0; border-left: 11px solid white; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.lx-pause:focus-visible { outline: 2px solid white; outline-offset: 2px; }

/* Call to action: a slow light passes over the button. */
.lx-cta { display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(16px); animation: lx-rise .8s cubic-bezier(.05, .7, .1, 1) 1.8s forwards; }
.btn.land-btn { position: relative; overflow: hidden; height: 58px; border-radius: 20px; background: var(--brand-copper); color: black; font-size: 18px; font-weight: 720; letter-spacing: -0.01em;
  box-shadow: 0 12px 34px rgba(223, 170, 109, .28); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn.land-btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); animation: lx-shine 4.2s ease-in-out 3s infinite; }
.btn.land-btn:active { transform: scale(.96); }
@keyframes lx-shine { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.land-links { display: flex; justify-content: center; align-items: center; gap: 8px; }
.land-link { color: white; font-size: 16px; font-weight: 600; padding: 10px 8px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.landing .foot { color: rgba(255, 255, 255, .72); padding: 4px 0 0; margin: 0; }
/* At night the light is lower: the same field, dimmer glows. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx-sky i { opacity: .26; } :root:not([data-theme="light"]) .lx-sky .b3 { opacity: .14; } }
:root[data-theme="dark"] .lx-sky i { opacity: .26; } :root[data-theme="dark"] .lx-sky .b3 { opacity: .14; }
@media (max-height: 700px) { .lx-word { font-size: 26px; } .lx-cap { font-size: 26px; } .lx-stage { gap: 8px; } }

/* Leaving: setup opens out of the button as a growing circle (where the browser can). */
html.vt-reveal::view-transition-old(root) { animation: none; }
html.vt-reveal::view-transition-new(root) { animation: lx-reveal .65s cubic-bezier(.65, 0, .35, 1); }
@keyframes lx-reveal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 80%)); } to { clip-path: circle(150% at var(--vx, 50%) var(--vy, 80%)); } }

@media (prefers-reduced-motion: reduce) {
  .lx-sky i, .btn.land-btn::after { animation: none; }
  .lx-word, .lx-cta { animation: none; opacity: 1; transform: none; }
  .lx-arc { animation: none; stroke-dashoffset: 0; stroke-width: 7; } .lx-r { animation: none; opacity: 0; }
  .lx-dot i { animation: none !important; transform: none; } .lx-pause { opacity: 1; transition: none; }
  .lx-scene *, .lx-scene { animation: none !important; filter: none !important; }
  .lx-scene .it, .lx-scene .fi { opacity: 1; } .sc-circle { stroke-dashoffset: 0; } .sc-spark, .sc-tick { transform: none; } .sc-steam .st { opacity: .8; stroke-dashoffset: 0; }
  [data-step="0"] .sn0, [data-step="1"] .sn1, [data-step="2"] .sn2, [data-step="3"] .sn3 { visibility: visible; opacity: 1; }
  [data-step="0"] .cn0 { opacity: 1; transform: none; filter: none; }
  .lx-cap { transition: opacity .2s; transform: none; filter: none; }
  [data-step="4"] .lx-close { animation: none; stroke-dashoffset: 0; }
}

/* Setup */
.setup-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.setup-bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary); transition: width .45s cubic-bezier(.05, .7, .1, 1); }
.setup-count { margin-top: -4px; }
.std-line { display: flex; align-items: center; gap: 6px; }
.nudges { display: flex; flex-direction: column; gap: 10px; }
.nudge { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .25s, background .25s; }
.nudge[aria-checked="true"] { border-color: var(--primary); background: var(--primary-tint); }
.nudge-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.nudge-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nudge-t b { font-weight: 600; } .nudge-t span { font: var(--t-footnote); color: var(--ink-2); }
.sw { width: 51px; height: 31px; border-radius: 16px; background: var(--ink-3); position: relative; flex: none; transition: background .25s; opacity: .55; }
.sw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0, 0, 0, .22); transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
[aria-checked="true"] > .sw { background: var(--primary); opacity: 1; }
[aria-checked="true"] > .sw i { transform: translateX(20px); }
.terms-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--surface-2); margin-top: 4px; }
.terms-row input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--primary); }
.btn[data-waiting] { opacity: .45; }

/* Today: countdown, Up next, tiles */
.left-line { display: flex; align-items: center; gap: 6px; font: var(--t-subhead); color: var(--ink-2); margin-top: -6px; font-feature-settings: var(--font-numeric); }
.left-line [data-left] { font-weight: 650; color: var(--ink); }
.next-line { display: flex; align-items: center; gap: 10px; background: var(--primary-tint); color: var(--ink); border-radius: 16px; padding: 12px 14px; font-weight: 600; }
.ring-count { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.ring-count .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-count .rc { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ring-count .rc b { font: var(--t-num-md); } .ring-count .rc span { font: var(--t-footnote); color: var(--ink-3); }
.ring-bg { stroke: var(--line); } .ring-fg { transition: stroke-dasharray .9s cubic-bezier(.05, .7, .1, 1); }
.r-meal .ring-fg { stroke: var(--primary); } .r-drink .ring-fg { stroke: var(--dairy); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; border-radius: 26px; min-height: 172px; background: var(--tint); color: var(--deep); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .35s, box-shadow .35s, color .35s; }
.tile-tick { width: 100%; height: 100%; min-height: 172px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; padding: 16px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tile:active { transform: scale(.96); }
.tile-ic { margin-bottom: auto; } .tile-ic .ic { width: 48px; height: 48px; }
.tile-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; margin-top: 8px; }
.tile-n { font-size: 16px; font-weight: 650; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-por { display: inline-flex; align-items: center; gap: 6px; font: var(--t-footnote); opacity: .85; margin-top: 2px; }
.tile-por .who { width: 18px; height: 18px; font-size: 10px; }
.tile-chk { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; opacity: .5; display: grid; place-items: center; transition: all .3s; }
.tile-chk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tile.is-done { background: var(--deep-solid); color: var(--bg); }
.tile.is-done .tile-chk { background: var(--bg); border-color: var(--bg); opacity: 1; color: var(--deep-solid); }
.tile.is-done .tile-chk svg { stroke-dashoffset: 0; }
/* The moment of a tick: the tile floods with its colour from the finger, the check draws, the icon pops. */
.tile-tick, .tile-open { position: relative; z-index: 1; }
.tile.just-done { background: var(--tint); animation: tile-ink .55s ease forwards; }
.tile.just-done::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--deep-solid); clip-path: circle(0 at var(--fx, 50%) var(--fy, 50%)); animation: tile-flood .6s cubic-bezier(.3, 0, .2, 1) forwards; }
.tile.just-done .tile-chk path { animation: chk-draw .45s cubic-bezier(.65, 0, .35, 1) .22s both; }
.tile.just-done .tile-chk { animation: tile-pop .5s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
.tile.just-done .tile-ic .ic { animation: tile-pop .56s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
@keyframes tile-flood { to { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); } }
@keyframes tile-ink { 0% { color: var(--deep); } 45%, 100% { color: var(--bg); } }
@keyframes chk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tile-pop { from { transform: scale(.55) rotate(-12deg); } to { transform: none; } }
.tile.is-now { box-shadow: 0 0 0 3px var(--deep-solid), 0 12px 26px -10px var(--deep-solid); }
.now-pill { display: inline-block; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 10px; margin-left: 6px; vertical-align: 1px; }
.tile-open { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: inherit; background: rgba(255, 255, 255, .35); }
.tile.is-done .tile-open { background: rgba(255, 255, 255, .2); }
.tile.m-breakfast { --tint: var(--meal-breakfast-tint); --deep: var(--on-meal-breakfast); --deep-solid: var(--meal-breakfast); }
.tile.m-lunch { --tint: var(--meal-lunch-tint); --deep: var(--on-meal-lunch); --deep-solid: var(--meal-lunch); }
.tile.m-snack { --tint: var(--meal-snack-tint); --deep: var(--on-meal-snack); --deep-solid: var(--meal-snack); }
.tile.m-dinner { --tint: var(--meal-dinner-tint); --deep: var(--on-meal-dinner); --deep-solid: var(--meal-dinner); }
@media (prefers-reduced-motion: reduce) { .tile, .tile-chk .ic, .ring-fg, .setup-bar i { transition: none; } .tile.is-done .tile-ic .ic { animation: none; } }

/* Drinks */
.ring-wrap { position: relative; width: 54px; height: 54px; display: grid; place-items: center; flex: none; }
.ring-wrap .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-wrap .ic { width: 22px; height: 22px; color: var(--dairy); }
.drink-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.drink { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 10px; border-radius: 18px; border: 0; background: var(--dairy-tint); color: var(--on-dairy); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.drink:active { transform: scale(.9); }
.drink b { font-size: 17px; } .drink span { text-align: center; line-height: 1.15; }

/* Food quality */
.q-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; }
.q-who { width: 100%; font: var(--t-footnote); color: var(--ink-3); font-weight: 600; }
.q-big { font: var(--t-num-lg); letter-spacing: var(--t-num-lg-track); } .q-unit { color: var(--ink-2); }
.q-sm { font: var(--t-footnote); color: var(--ink-2); background: var(--surface-2); padding: 3px 8px; border-radius: 10px; }
.q-gap { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font: var(--t-subhead); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 12px; font: var(--t-footnote); font-weight: 600; }
.chips .chip .ic { width: 14px; height: 14px; }
.chip.g-vegetables { background: var(--vegetables-tint); color: var(--on-vegetables); } .chip.g-fruits { background: var(--fruits-tint); color: var(--on-fruits); }
.chip.g-grains { background: var(--grains-tint); color: var(--on-grains); } .chip.g-protein { background: var(--protein-tint); color: var(--on-protein); }
.chip.g-dairy { background: var(--dairy-tint); color: var(--on-dairy); } .chip.g-fats { background: var(--fats-tint); color: var(--on-fats); }

/* Progress */
.rings-card { display: flex; align-items: center; gap: 18px; }
.rings { position: relative; width: 132px; height: 132px; flex: none; }
.rings > .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.rings .inner { position: absolute; inset: 20px; } .rings .inner .ring { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring-legend { display: flex; flex-direction: column; gap: 12px; }
.ring-legend span { display: block; font: var(--t-footnote); color: var(--ink-2); }
.ring-legend b { font: var(--t-num-md); }
.lab-m::before, .lab-d::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 5px; margin-right: 6px; background: var(--primary); }
.lab-d::before { background: var(--dairy); }
.followed-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--brand-copper), var(--brand-rose)); color: white; }
.followed-card .ic { width: 40px; height: 40px; flex: none; }
.followed-card b { display: block; font-size: 22px; font-weight: 750; } .followed-card span { font: var(--t-footnote); opacity: .9; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 6px; border-radius: 20px; background: var(--surface); box-shadow: var(--elev-1); font: var(--t-footnote); color: var(--ink-3); }
.badge .bi { width: 52px; height: 52px; border-radius: 26px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.badge.got { color: var(--ink); } .badge.got .bi { background: var(--primary); color: var(--on-primary); }
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.q-tile { border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.q-tile b { font: var(--t-num-md); } .q-tile span { font: var(--t-footnote); }
.q-tile.t-a { background: var(--grains-tint); color: var(--on-grains); } .q-tile.t-b { background: var(--vegetables-tint); color: var(--on-vegetables); }
.q-tile.t-c { background: var(--fruits-tint); color: var(--on-fruits); } .q-tile.t-d { background: var(--protein-tint); color: var(--on-protein); }

/* Settings */
.nudge-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.stepper { display: inline-flex; align-items: center; gap: 10px; } .stepper b { min-width: 2ch; text-align: center; font: var(--t-num-md); }
.wf-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: var(--brand-field-deep); color: white; text-decoration: none; margin-top: 12px; }
.wf-card b { display: block; font-size: 17px; } .wf-card span span { font: var(--t-footnote); opacity: .85; }
.wf-card > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wf-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-weight: 800; font-size: 20px; flex: none; }
.version-line { text-align: center; font: var(--t-footnote); color: var(--ink-3); margin: -6px 0 8px; }
button.list-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* Tester panel */
.t-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

/* Short screens: the four tiles still fit above the tab bar with nothing scrolled (US-7, 320 by 568). */
@media (max-height: 700px) {
  .tile, .tile-tick { min-height: 118px; height: 118px; } .tile-tick { padding: 12px 14px; overflow: hidden; } .tile-k { white-space: nowrap; }
  .tile-ic .ic { width: 28px; height: 28px; } .tile-por { display: none; } .tile-k { line-height: 14px; } .now-pill { font-size: 10px; line-height: 14px; padding: 0 6px; vertical-align: 0; } .tile-chk { top: 10px; right: 10px; width: 26px; height: 26px; }
  .tile-k { margin-top: 4px; font-size: 11px; } .tile-n { font-size: 14.5px; }
  .tile-open { width: 36px; height: 36px; right: 6px; bottom: 6px; }
  .today .ring-count { width: 56px; height: 56px; } .today .ring-count .ring { width: 56px; height: 56px; }
}
/* Keep the name and portions clear of the recipe button in the tile's corner. */
.tile-n, .tile-por { padding-right: 34px; box-sizing: border-box; max-width: 100%; }
.tag.tag-on { background: var(--primary-tint); color: var(--primary); }

/* ===== Motion pass, 10 Nov 2026: entrances, carried values, the 4 of 4 moment, tab moves ===== */
/* Entering a screen: the tiles settle in turn; Progress tiles and earned milestones follow. */
.view.enter .tile { animation: rs-settle .55s cubic-bezier(.34, 1.35, .64, 1) both; }
.view.enter .tile:nth-child(2) { animation-delay: 60ms; } .view.enter .tile:nth-child(3) { animation-delay: 120ms; } .view.enter .tile:nth-child(4) { animation-delay: 180ms; }
.view.enter .q-tile, .view.enter .badge { animation: rs-settle .5s cubic-bezier(.34, 1.35, .64, 1) both; }
.view.enter .q-tile:nth-child(2), .view.enter .badge:nth-child(2) { animation-delay: 70ms; } .view.enter .q-tile:nth-child(3), .view.enter .badge:nth-child(3) { animation-delay: 140ms; }
.view.enter .q-tile:nth-child(4), .view.enter .badge:nth-child(4) { animation-delay: 210ms; } .view.enter .badge:nth-child(5) { animation-delay: 280ms; } .view.enter .badge:nth-child(6) { animation-delay: 350ms; }
.view.enter .badge.got .bi { animation: tile-pop .6s cubic-bezier(.34, 1.56, .64, 1) .45s both; }
@keyframes rs-settle { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* A number that just went up gives a small hop. */
.bump { display: inline-block; animation: num-bump .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes num-bump { 40% { transform: scale(1.22); } }
/* Four of four: the ring flashes gold. */
.counter.gold .ring-fg { animation: ring-gold 1.6s ease .1s; }
@keyframes ring-gold { 15%, 60% { stroke: var(--brand-gold); filter: drop-shadow(0 0 6px var(--brand-gold)); } }
/* A drink flies into its ring. */
.fly-drop { position: fixed; z-index: 60; width: 14px; height: 18px; pointer-events: none; background: var(--dairy); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
/* Presses answer with a small spring. */
:where(.btn, .cook-card, .list-row, .drink, .badge, .tile-open) { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
:where(.btn, .cook-card, a.list-row, button.list-row, .drink, .tile-open):active { transform: scale(.96); }
/* The tab just chosen gives a small hop. */
nav.tabbar a[aria-current="page"] .ic { animation: tab-hop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tab-hop { 40% { transform: translateY(-3px) scale(1.12); } }
/* Between tabs the page moves the way you are going; the header and tab bar stay put. */
.top { view-transition-name: rs-top; } nav.tabbar { view-transition-name: rs-tabbar; }
html.vt-tab::view-transition-old(root) { animation: vt-out .2s cubic-bezier(.4, 0, 1, 1) both; }
html.vt-tab::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.05, .7, .1, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateX(calc(var(--vt-dir, 1) * -18px)); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(calc(var(--vt-dir, 1) * 26px)); } }
@media (prefers-reduced-motion: reduce) {
  .view.enter .tile, .view.enter .q-tile, .view.enter .badge, .view.enter .badge.got .bi, .bump, .counter.gold .ring-fg, nav.tabbar a[aria-current="page"] .ic { animation: none; }
  .tile.just-done, .tile.just-done::before, .tile.just-done .tile-chk, .tile.just-done .tile-chk path, .tile.just-done .tile-ic .ic { animation: none; }
  .tile.just-done { background: var(--deep-solid); color: var(--bg); } .tile.just-done::before { display: none; }
  :where(.btn, .cook-card, .list-row, .drink, .badge, .tile-open) { transition: none; }
}
/* A counted number inside a label keeps the label's size. */
.followed-card b > span, .q-tile b > span { font: inherit; opacity: 1; }

/* ===== Depth and gloss, 10 Nov 2026 ("glossy, depth and texture"): light from above, a specular
   edge on anything you can press, coloured shadows under colour, rings that glow like Activity. ===== */
/* Cards: frosted panes, see the Silk glass section at the end. */
/* Meal tiles: a glass highlight across the top, a lit rim, and a shadow in the tile's own colour. */
.tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 12px 26px -14px var(--deep-solid); }
.tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, 0) 52%); }
.tile.is-done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 30px -12px var(--deep-solid); }
/* Buttons that act are lit from above, with a glow in their own colour. */
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, white) 0%, var(--primary) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 8px 18px -8px var(--primary); }
.btn.land-btn { background: linear-gradient(100deg, var(--silk-2) 0%, var(--silk-3) 42%, var(--silk-4) 68%, var(--silk-5) 100%); color: black; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 34px -8px rgba(172, 216, 222, .4); }
.drink { position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px -8px var(--dairy); }
.drink::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%); }
/* Rings glow like Activity rings: a gradient on a dim track of the same colour. */
.r-meal .ring-fg { stroke: url(#rg-meal); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--silk-2) 55%, transparent)); }
.r-meal .ring-bg { stroke: color-mix(in srgb, var(--silk-1) 22%, transparent); }
.r-drink .ring-fg { stroke: url(#rg-drink); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--dairy) 50%, transparent)); }
.r-drink .ring-bg { stroke: color-mix(in srgb, var(--dairy) 20%, transparent); }
/* The days-followed card and the studio card carry the same lit glass edge. */
.followed-card, .wf-card { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -14px var(--brand-copper); }
.followed-card::after, .wf-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%); }
/* The glass header and tab bar get a hairline of light on their inner edge. */
.top.glass { box-shadow: inset 0 -.5px 0 var(--glass-edge); } nav.tabbar.glass { box-shadow: inset 0 .5px 0 var(--glass-edge); }
@media (prefers-reduced-transparency: reduce) { .tile::after, .drink::after, .followed-card::after, .wf-card::after { display: none; } }

.followed-card { background: linear-gradient(120deg, var(--brand-plum) 0%, var(--silk-1) 45%, color-mix(in srgb, var(--silk-5) 80%, black) 100%); }
.lx-cap { text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }

/* ===== Silk glass, 10 Nov 2026 ("gloss, polish, depth, texture, the Apple hallmark, glassiness").
   Behind every screen: the silk ribbon as a still frame (backdrop.js) high behind the large title,
   fading into the light it throws, with a fine grain. On it: frosted panes, lit from above, a bright
   rim, a soft shadow tinted by the light. Real blur only on fixed chrome and sheets, which turn solid
   while anything beneath them moves (.is-moving), so scrolling stays smooth. ===== */
:root, [data-theme="light"] {
  --pane: rgba(255, 255, 255, .68); --pane-strong: rgba(255, 255, 255, .86);
  --pane-sheen: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, 0) 46%);
  --pane-rim: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 .5px rgba(255, 255, 255, .8), inset 0 -.5px 0 rgba(11, 15, 18, .05);
  --pane-shadow: 0 1px 2px rgba(11, 15, 18, .05), 0 14px 34px -14px rgba(31, 90, 115, .28);
  --sheet-glass: rgba(248, 250, 251, .88);
  --tile-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, 0) 50%);
}
[data-theme="dark"] {
  --pane: rgba(30, 38, 44, .5); --pane-strong: rgba(24, 30, 35, .8);
  --pane-sheen: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .025) 30%, rgba(255, 255, 255, 0) 46%);
  --pane-rim: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 .5px rgba(255, 255, 255, .08);
  --pane-shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 18px 40px -16px rgba(0, 0, 0, .9);
  --sheet-glass: rgba(20, 25, 29, .86);
  --tile-sheen: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 34%, rgba(255, 255, 255, 0) 50%);
}
/* the backdrop */
.app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.app-bowl { position: absolute; top: calc(-70vw + env(safe-area-inset-top, 0px)); right: -66vw; width: 160vw; max-width: 760px; aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(closest-side, black 55%, rgba(0, 0, 0, .5) 80%, transparent 100%); mask-image: radial-gradient(closest-side, black 55%, rgba(0, 0, 0, .5) 80%, transparent 100%); }
@media (min-width: 600px) { .app-bowl { top: -380px; right: -360px; } }
.bowl { display: block; width: 100%; height: 100%; overflow: visible; }
.bowl path { fill: none; stroke-linecap: round; }
.app-bowl .bw-q { stroke: color-mix(in srgb, var(--mc) 6%, transparent); }
.app-bowl .bw-past .bw-q, .app-bowl .bw-today .bw-q { stroke: color-mix(in srgb, var(--mc) 10%, transparent); }
.app-bowl .bw-q.on { stroke: color-mix(in srgb, var(--mc) 28%, transparent); }
.app-bowl .bw-today .bw-q.on { stroke: color-mix(in srgb, var(--mc) 42%, transparent); }
.app-bowl .bw-dot { fill: var(--mc); opacity: .3; }
.app-grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="light"] .app-grain { opacity: .07; mix-blend-mode: multiply; }
body[data-route="land"] .app-bg, body[data-route="bare"] .app-bg { display: none; }
main { z-index: 1; }
/* panes */
.card, .badge, .choice, .q-tile { background: var(--pane-sheen), var(--pane); box-shadow: var(--pane-rim), var(--pane-shadow); }
.card.followed-card { background: linear-gradient(120deg, var(--brand-plum) 0%, var(--silk-1) 45%, color-mix(in srgb, var(--silk-5) 80%, black) 100%); }
/* the large title stays crisp where the silk passes behind it */
.lt-header { text-shadow: 0 0 14px var(--bg), 0 0 4px var(--bg); }
.group { background: var(--pane-sheen), var(--pane-strong); box-shadow: var(--pane-rim), var(--pane-shadow); }
.followed-card, .wf-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 16px 36px -14px color-mix(in srgb, var(--silk-1) 70%, transparent); }
/* meal tiles: a lit glass face over the group colour */
.tile::after { background: var(--tile-sheen); }
.tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 14px 28px -16px var(--deep-solid); }
[data-theme="dark"] .tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(255, 255, 255, .08), 0 16px 30px -16px rgba(0, 0, 0, .9); }
/* chrome: real glass */
.top.glass { box-shadow: inset 0 -.5px 0 var(--glass-edge), 0 1px 0 rgba(255, 255, 255, .04); }
nav.tabbar.glass { box-shadow: inset 0 .5px 0 var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sheet-scrim .sheet { background: var(--pane-sheen), var(--sheet-glass); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 -18px 50px -20px rgba(0, 0, 0, .45); }
[data-theme="dark"] .sheet-scrim .sheet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -18px 50px -20px rgba(0, 0, 0, .9); }
/* the light and dark button */
.nav-actions { display: flex; align-items: center; }
.theme-btn { border: 0; background: transparent; padding: 0; cursor: pointer; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.theme-btn:active { transform: scale(.88) rotate(-20deg); }
.theme-btn .ic { animation: theme-in .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes theme-in { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
html.vt-theme .top, html.vt-theme nav.tabbar { view-transition-name: none; }
html.vt-theme::view-transition-new(root) { animation-duration: .7s; }
/* Reduce transparency: everything solid, no backdrop texture. */
@media (prefers-reduced-transparency: reduce) {
  .card, .badge, .choice, .q-tile, .group { background: var(--surface); }
  .glass, .sheet-scrim .sheet { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-bowl, .app-grain { display: none; }
}
@media (prefers-reduced-motion: reduce) { .app-bowl, .theme-btn .ic { animation: none; } }

/* ===== The day ring, 10 Nov 2026: one day, clockwise, in its four meals, each in the light of its hour.
   Colour says when, not what. The four dots run dinner back to breakfast, dusk to dawn. ===== */
.m-breakfast { --mc: var(--meal-breakfast); } .m-lunch { --mc: var(--meal-lunch); } .m-snack { --mc: var(--meal-snack); } .m-dinner { --mc: var(--meal-dinner); }
.ring.day-ring, .ring-count .ring.day-ring, .rings > .ring.day-ring { transform: none; overflow: visible; }
.day-ring path { fill: none; stroke-linecap: round; }
.day-ring .dr-bg { stroke: color-mix(in srgb, var(--mc) 20%, transparent); }
.day-ring .dr-q { stroke: var(--mc); filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--mc) 55%, transparent)); }
.day-ring .dr-q[stroke-dasharray^="0 "] { opacity: 0; }
.day-ring .dr-dot { fill: var(--mc); }

/* First screen: the logo ring in its four meals, drawn clockwise one after another, and the bowl of
   fourteen days filling outward around it (a sample reset, every meal ticked). Always on black, so the
   brand day colours, whatever the theme. */
.lx .m-breakfast { --lc: var(--day-breakfast); --mc: var(--day-breakfast); } .lx .m-lunch { --lc: var(--day-lunch); --mc: var(--day-lunch); }
.lx .m-snack { --lc: var(--day-snack); --mc: var(--day-snack); } .lx .m-dinner { --lc: var(--day-dinner); --mc: var(--day-dinner); }
.lx-arc.lq0 { animation-delay: .15s, 1.65s; animation-duration: .38s, .9s; } .lx-arc.lq1 { animation-delay: .45s, 1.65s; animation-duration: .38s, .9s; }
.lx-arc.lq2 { animation-delay: .75s, 1.65s; animation-duration: .38s, .9s; } .lx-arc.lq3 { animation-delay: 1.05s, 1.65s; animation-duration: .38s, .9s; }
.lx-bowl { position: absolute; inset: -60%; width: 220%; height: 220%; overflow: visible; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, black 70%, transparent 100%); mask-image: radial-gradient(closest-side, black 70%, transparent 100%); }
.lx-bowl path { fill: none; stroke-linecap: round; }
.lx-bowl .bw-q { stroke: color-mix(in srgb, var(--mc) 9%, transparent); }
.lx-bowl .bw-q.on { stroke: var(--mc); opacity: 0; animation: bw-in .5s ease forwards; animation-delay: calc(2.1s + var(--i) * 42ms); }
@keyframes bw-in { 0% { opacity: 0; } 40% { opacity: .75; } 100% { opacity: .2; } }
.lx-dot.d0 { --dc: var(--day-dinner); } .lx-dot.d1 { --dc: var(--day-snack); } .lx-dot.d2 { --dc: var(--day-lunch); } .lx-dot.d3 { --dc: var(--day-breakfast); }
.lx-dot i { background: var(--dc); }
[data-step="1"] .d0 i, [data-step="2"] :is(.d0, .d1) i, [data-step="3"] :is(.d0, .d1, .d2) i, [data-step="4"] .lx-dot i { background: var(--dc); box-shadow: 0 0 12px color-mix(in srgb, var(--dc) 70%, transparent); }
[data-phase="story"][data-step="0"] .d0 i, [data-phase="story"][data-step="1"] .d1 i, [data-phase="story"][data-step="2"] .d2 i, [data-phase="story"][data-step="3"] .d3 i { background: var(--dc); }
@keyframes lx-breathe { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dc) 22%, transparent), 0 0 18px color-mix(in srgb, var(--dc) 80%, transparent); } }
.lx-close, [data-step="4"] .lx-r { stroke: var(--day-snack); } .lx-halo { stroke: var(--day-snack); }
[data-step="4"] .lx-arc { stroke: var(--lc); }
.btn.land-btn { background: linear-gradient(100deg, var(--day-breakfast) 0%, var(--day-lunch) 36%, var(--day-snack) 68%, var(--day-dinner) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 34px -8px color-mix(in srgb, var(--day-snack) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .lx-bowl .bw-q.on { animation: none; opacity: .2; } }

/* ===== Two tabs, 10 Nov 2026: Today is where you act, Progress is where you read. Kitchen and Calendar
   are opened from the moment they matter (cook day, plan the next reset) and carry a way back. ===== */
nav.tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.back-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 -8px -6px; color: var(--primary); font: var(--t-body); font-weight: 600; text-decoration: none; }
.go-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--r-lg); background: var(--pane-sheen), var(--pane); box-shadow: var(--pane-rim), var(--pane-shadow); color: var(--ink); text-decoration: none; font-weight: 650; }
.go-row > span:first-of-type { white-space: nowrap; } .go-row .go-sub { flex: 1; min-width: 0; font: var(--t-footnote); font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-row .ic:first-child { color: var(--primary); } .go-row:active { transform: scale(.98); }

/* Today: where you stand at the top, the meal due now big, the rest of the day small */
.ring-count.big { width: 104px; height: 104px; margin: -10px -6px -14px 0; }
.ring-count.big .rc b { font-size: 30px; }
.day-ring.is-tap .dr-hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: pointer; }
.day-ring.is-tap { pointer-events: none; } .day-ring.is-tap .dr-hit { pointer-events: stroke; }
.today-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.today-stats .pill { font-size: 13.5px !important; }
.today-stats .pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; white-space: nowrap; border-radius: 999px; background: var(--pane-sheen), var(--pane); box-shadow: var(--pane-rim); font: var(--t-subhead); color: var(--ink-2); font-feature-settings: var(--font-numeric); }
.today-stats .pill b, .today-stats [data-left] { color: var(--ink); font-weight: 650; }
.today-meals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile.is-hero { grid-column: 1 / -1; min-height: 168px; }
.tile.is-hero .tile-tick { min-height: 168px; }
.tile.is-hero .tile-n { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.tile.is-small { min-height: 128px; border-radius: 22px; }
.tile.is-small .tile-tick { min-height: 128px; padding: 12px; gap: 1px; }
.tile.is-small .tile-ic .ic { width: 30px; height: 30px; }
.tile.is-small .tile-chk { top: 10px; right: 10px; width: 26px; height: 26px; }
.tile.is-small .tile-k { font-size: 10.5px; margin-top: 4px; }
.tile.is-small .tile-n { font-size: 13px; font-weight: 600; -webkit-line-clamp: 2; }
.tile.is-small .tile-at { font: var(--t-caption-1, 500 11px/14px var(--font)); opacity: .75; margin-top: 2px; }
.tile.is-small .tile-open { width: 32px; height: 32px; right: 6px; bottom: 6px; border-radius: 16px; }
/* Short phones (320 by 568): every meal still fits above the tab bar without scrolling */
@media (max-height: 640px) {
  .today-stats .pill:nth-child(2) { display: none; }
  .ring-count.big { width: 84px; height: 84px; margin: -6px -4px -8px 0; }
  .tile.is-hero, .tile.is-hero .tile-tick { min-height: 104px; }
  .tile.is-hero .tile-ic, .tile.is-hero .tile-por { display: none; }
  .tile.is-hero .tile-n { font-size: 17px; }
  .tile.is-small, .tile.is-small .tile-tick { min-height: 96px; }
  .tile.is-small .tile-ic .ic { width: 24px; height: 24px; }
  .tile.is-small .tile-n { -webkit-line-clamp: 1; }
  .today .cook-card, .today .banner.cook { padding-top: 8px; padding-bottom: 8px; }
  .today .cook-card .s, .today .cook-card br, .today .banner.cook .bs { display: none; }
}
@media (max-width: 359px) { .today-meals { gap: 8px; } .tile.is-small .tile-tick { padding: 10px; } .tile.is-small .tile-n { font-size: 12.5px; } }
/* Drinks: one row, tap a drink to add one, the ring fills */
.drinks-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; }
.drinks-row .ring-wrap { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.drinks-row .ring-wrap .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.drinks-row .dr-total { position: relative; font-size: 17px; }
.drinks-row .drink-row { flex: 1; margin-top: 0; gap: 6px; }
.drinks-row .drink { flex-direction: row; justify-content: center; gap: 4px; padding: 0; min-height: 48px; border-radius: 16px; font-size: 15px; }
.drinks-row .drink .ic { width: 20px; height: 20px; }
.drinks-row .drink:active { transform: scale(.9); }
.drinks-row .dr-undo { flex: none; width: 40px; height: 40px; color: var(--ink-3); }

/* Progress: the bowl, every day as a ring, the trend, one milestone */
.bowl-card { padding: 16px 16px 14px; }
.bowl-wrap { width: min(250px, 70vw); margin: 0 auto; aspect-ratio: 1; }
.p-bowl .bw-q { stroke: color-mix(in srgb, var(--mc) 12%, transparent); }
.p-bowl .bw-past .bw-q, .p-bowl .bw-today .bw-q { stroke: color-mix(in srgb, var(--mc) 24%, transparent); }
.p-bowl .bw-q.on { stroke: var(--mc); }
.p-bowl .bw-today .bw-q { stroke-width: 2.6; filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--mc) 70%, transparent)); }
.p-bowl .bw-dot { fill: var(--mc); }
.stats.big { margin-top: 10px; text-align: center; }
.stats.big .stat b { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; margin-top: 10px; }
.day-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; padding: 4px 0; border: 0; border-radius: 14px; background: none; color: var(--ink-2); font: var(--t-caption-1, 500 12px/14px var(--font)); cursor: pointer; }
.day-cell .ring { width: 38px; height: 38px; }
.day-cell.is-today { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--ink); font-weight: 700; }
.day-cell.is-ahead { opacity: .45; cursor: default; }
.day-cell:active:not([disabled]) { transform: scale(.92); }
.trend { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; align-items: end; height: 86px; margin-top: 12px; }
.trend .tb { display: block; height: var(--h); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--primary) 70%, transparent); transform-origin: bottom; animation: tb-grow .6s cubic-bezier(.2, .8, .2, 1) both; }
.trend .tb.is-today { background: var(--accent); }
.trend .tb.is-ahead { background: var(--line); animation: none; }
@keyframes tb-grow { from { transform: scaleY(0); } }
.miles .badge-ic { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-tint); color: var(--on-accent-tint); flex: none; }
.miles .got-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.miles .got { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--primary-tint); color: var(--on-primary-tint); font: var(--t-footnote); font-weight: 600; }
/* one day, opened from Progress */
.ds-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .ds-head .ring { flex: none; }
.ds-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--line); }
.ds-row .ds-dot { width: 12px; height: 12px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 2px var(--mc); }
.ds-row.on .ds-dot { background: var(--mc); }
.ds-row .ic { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .trend .tb { animation: none; } }