/* Memuna: the real app's styles, on the design prototype's (prototype/remembrall-prototype.html, docs/blueprint.md §9).
   Cottagecore linen by day, and a starry night palette from 8 PM. */

/* The prototype's fonts, served from our own origin (Kevin's OK, 2026-10-18): IM Fell English (display),
   Nunito (body) and Nanum Pen Script (notes), Latin only; Courier Prime for codes; and 'Memuna Symbols', two tiny
   Noto subsets holding exactly the symbols the app shows (✦ ✧ ✓ ✕ and → ↻ ⋯ ☾ ♪), which the others lack. All SIL Open
   Font License, in public/fonts. No stock fonts anywhere (Kevin, 2026-10-18): every stack falls back only to these,
   fonts block rather than swap so the iPhone's own never flashes in while they load, and npm run check:fonts
   fails if the app shows a character none of them has. Emoji stay the iPhone's own, by design. */
@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/im-fell-english.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: block; src: url(/fonts/im-fell-english-italic.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: block; src: url(/fonts/nunito.woff2) format('woff2'); }
@font-face { font-family: 'Nanum Pen Script'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/nanum-pen-script.woff2) format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/courier-prime.woff2) format('woff2'); }
@font-face { font-family: 'Memuna Symbols'; font-display: block; src: url(/fonts/noto-symbols-2-subset.woff2) format('woff2'); unicode-range: U+2713, U+2715, U+2726-2727; }
@font-face { font-family: 'Memuna Symbols'; font-display: block; src: url(/fonts/noto-math-subset.woff2) format('woff2'); unicode-range: U+2192, U+21BB, U+22EF, U+263E, U+266A; }

:root {
  --paper: #F6F2E6;
  --sheet: #F6F2E6;
  --card: #FCFAF3;
  --ink: #3A3327;
  --muted: #776E5C;
  --line: rgba(58, 51, 39, .13);
  --line-strong: rgba(58, 51, 39, .28);
  --moss: #56693F;
  --moss-ink: #4A5C35;
  --on-moss: #F6F2E6;
  --sage: #A9B797;
  --chip: #ECE7D6;
  --rosehip: #B3402F;
  --rose-wash: #F3DDD5;
  --ember: #7E2418;
  --honey: #B9862A;
  --honey-wash: #F2E5C4;
  --mist: #C3D2BD;
  --mist2: #EEF2EA;
  --glass-in: rgba(255, 255, 255, .6);
  --glass-out: rgba(178, 196, 176, .65);
  --shadow: rgba(40, 32, 20, .45);
  --scrim: rgba(30, 26, 18, .35);
  --petal1: #E8B4A6;
  --petal2: #F4E3C1;
  --petal3: #B7C6A0;
  --lz-ink: #3F9A30;
  --sky: rgba(255, 240, 205, .45);
  --display: 'IM Fell English', 'Memuna Symbols', 'Nunito', serif;
  --body: 'Nunito', 'Memuna Symbols', sans-serif;
  --hand: 'Nanum Pen Script', 'Nunito', 'Memuna Symbols', cursive; /* Nunito for the punctuation the handwriting lacks */
  --code: 'Courier Prime', 'Memuna Symbols', monospace;
  /* D9: each partner's smoke color; the app sets --col-me and --col-them from the twelve */
  --col-me: #9DB0D6; --col-them: #D79AB8; --ink-me: #1E2A44; --ink-them: #3B1F2C;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #20241B; --sheet: #20241B; --card: #292E23; --ink: #ECE5D1; --muted: #A69D88;
    --line: rgba(236, 229, 209, .11); --line-strong: rgba(236, 229, 209, .26);
    --moss: #9DB57F; --moss-ink: #B6CB9C; --on-moss: #1B1F16; --sage: #5D6D4C; --chip: #333929;
    --rosehip: #E57A63; --rose-wash: rgba(229, 122, 99, .17); --ember: #A33A26;
    --honey: #E0B45A; --honey-wash: rgba(224, 180, 90, .17);
    --mist: #71886A; --mist2: #3C4A39; --glass-in: rgba(255, 255, 255, .16); --glass-out: rgba(120, 150, 120, .28);
    --shadow: rgba(0, 0, 0, .65); --scrim: rgba(0, 0, 0, .5);
    --petal1: #D9907E; --petal2: #E8CF96; --petal3: #8FA878; --lz-ink: #9BE07A; --sky: rgba(255, 240, 205, .12);
    color-scheme: dark;
  }
}
/* Time of day, from the phone's clock (the prototype's pretend clock): dawn and golden hour tint the sky,
   and from 8 PM the app turns to a starry night */
[data-phase="dawn"] { --sky: rgba(242, 178, 162, .5); }
[data-phase="golden"] { --sky: rgba(234, 156, 72, .42); }
/* In dark mode the washes are as soft as the dark day's sky: the light ones dropped the header's muted text to
   about 2.4:1 (B83) */
@media (prefers-color-scheme: dark) {
  [data-phase="dawn"] { --sky: rgba(242, 178, 162, .14); }
  [data-phase="golden"] { --sky: rgba(234, 156, 72, .12); }
}
[data-phase="night"] {
  --paper: #151A28; --sheet: #151A28; --card: #1F2537; --ink: #ECE6D4; --muted: #A9A6BA;
  --line: rgba(236, 230, 212, .12); --line-strong: rgba(236, 230, 212, .27);
  --moss: #A6C28A; --moss-ink: #BDD3A4; --on-moss: #151A28; --sage: #61745C; --chip: #2A3146;
  --rosehip: #EC8670; --rose-wash: rgba(236, 134, 112, .18); --ember: #A63A27;
  --honey: #E8C16A; --honey-wash: rgba(232, 193, 106, .16);
  --mist: #8DA3BF; --mist2: #3F4B68; --glass-in: rgba(255, 255, 255, .14); --glass-out: rgba(120, 140, 200, .3);
  --petal1: #DE9C8E; --petal2: #ECD39C; --petal3: #9EB98C; --lz-ink: #A6E58A;
  --scrim: rgba(0, 0, 0, .5); --shadow: rgba(0, 0, 0, .6);
  --sky: rgba(70, 92, 168, .55);
  color-scheme: dark;
}
@property --smoke { syntax: '<color>'; inherits: true; initial-value: #C3D2BD; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper) linear-gradient(to bottom, var(--sky), transparent 420px) no-repeat;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--moss); outline-offset: 2px; }
.noscript { padding: 24px; }

.app {
  max-width: 560px; margin: 0 auto;
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  padding-block: calc(env(safe-area-inset-top) + 28px) calc(env(safe-area-inset-bottom) + 32px);
  display: flex; flex-direction: column; gap: 22px;
}

/* Hero */
.hero { display: grid; justify-items: center; gap: 12px; text-align: center; padding-top: 12px; }
.wordmark { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.01em; }
.lede { color: var(--muted); max-width: 30ch; text-wrap: balance; }
.badge { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--honey); border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent); border-radius: 999px; padding: 3px 10px; }

/* The orb (CSS fallback underneath the WebGL canvas) */
.orb {
  --s: 44px; --smoke: var(--mist);
  position: relative; display: inline-block; flex: none;
  width: var(--s); height: var(--s); border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 50% 58%, var(--glass-in) 0, var(--glass-out) 100%);
  box-shadow: inset 0 calc(var(--s) * -.12) calc(var(--s) * .25) rgba(0, 0, 0, .16), 0 calc(var(--s) * .1) calc(var(--s) * .4) color-mix(in srgb, var(--smoke) 55%, transparent);
  transition: --smoke 1.4s ease;
}
.orb--gold { --smoke: var(--honey); }
.orb--red { --smoke: var(--rosehip); }
.orb--xl { --s: 132px; }
/* lit from within, it throws a halo of its own light (Kevin, 2026-10-20) */
.orb.has-gl { background: transparent; box-shadow: 0 0 calc(var(--s) * .3) color-mix(in srgb, var(--smoke) 75%, transparent), 0 0 calc(var(--s) * .85) color-mix(in srgb, var(--smoke) 50%, transparent), 0 calc(var(--s) * .12) calc(var(--s) * .5) color-mix(in srgb, var(--smoke) 40%, transparent); }
.orb .orb-gl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; touch-action: none; }
.orb.css-flare { animation: cssflare .8s ease; }
@keyframes cssflare { 30% { filter: brightness(1.5); transform: scale(1.05); } }

/* The painted art (art/README.md): fireflies about the orb, Morel's welcome, and a companion on some cards.
   Reduced motion stills the fireflies (below). */
.orb-wrap { position: relative; display: inline-block; }
.ff { position: absolute; width: 16px; pointer-events: none; animation: ffdrift 7s ease-in-out infinite alternate; }
.ff img { display: block; width: 100%; height: auto; animation: ffblink 2.6s ease-in-out infinite; }
.ff1 { left: -28px; top: 16px; } .ff2 { right: -32px; top: 50px; animation-delay: -2.4s; } .ff3 { left: 14px; bottom: -16px; animation-delay: -4.6s; }
.ff2 img { animation-delay: -1.1s; } .ff3 img { animation-duration: 3.3s; }
@media (prefers-color-scheme: light) { .ff { display: none; } } /* a firefly's glow only shows against the dark */
@keyframes ffdrift { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, -12px); } 100% { transform: translate(-6px, 6px); } }
@keyframes ffblink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.guide { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.guide-art { display: block; width: 54px; height: auto; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--shadow) 40%, transparent)); }
.bubble { position: relative; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 15px; line-height: 1.35; text-wrap: balance; }
.bubble::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: var(--card); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.card--art { position: relative; }
.card--art h2 { padding-right: 78px; }
.card-art { position: absolute; right: 12px; top: -18px; width: 68px; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--shadow) 40%, transparent)); }
.card-art--wide { width: 86px; top: -12px; }
.card-art--tall { width: 46px; top: -28px; }
.card-art--morel { width: 48px; top: -26px; }

/* Install guide */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--moss); color: var(--on-moss); font-weight: 800; }
.steps b { font-weight: 800; }
.steps .sub { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.share-glyph { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; color: var(--moss-ink); }
.notes { display: grid; gap: 6px; color: var(--muted); font-size: 14px; text-align: center; }
.address { font-family: var(--display); font-size: 20px; text-align: center; word-break: break-all; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--card); }

/* Cards and buttons */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 14px; display: grid; gap: 10px; box-shadow: 0 10px 22px -18px var(--shadow); }
.card h2 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 22px; }
.btn { border: 0; border-radius: 16px; padding: 13px 18px; font-weight: 800; font-size: 16px; background: var(--moss); color: var(--on-moss); }
.btn--quiet { background: transparent; color: var(--moss-ink); border: 1px solid var(--line-strong); }
.btn:active { transform: translateY(1px); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: grid; gap: 22px; }
.stack:empty { display: none; }

/* Linking two phones (M3) */
.choices { display: grid; gap: 10px; }
.choice { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.choice b { font-weight: 800; font-size: 17px; }
.choice span { color: var(--muted); font-size: 14px; }
.choice:active { transform: translateY(1px); }
.code-input { font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; }
.code-big { font-family: var(--display); font-size: 40px; line-height: 1.1; letter-spacing: .08em; text-align: center; color: var(--moss-ink); padding: 4px 0; -webkit-user-select: all; user-select: all; }
.check { font-family: var(--display); font-size: 64px; line-height: 1; text-align: center; color: var(--honey); font-variant-numeric: tabular-nums; padding: 4px 0; }
.request { border-color: color-mix(in srgb, var(--honey) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--honey) 35%, transparent), 0 14px 28px -20px var(--shadow); }
.recovery { font-family: var(--code); font-size: 19px; letter-spacing: .04em; text-align: center; overflow-wrap: anywhere; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--paper); -webkit-user-select: all; user-select: all; }
.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.devices li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--chip) 70%, transparent); }
.devices li > span { display: grid; gap: 1px; min-width: 0; }
.devices small { color: var(--muted); font-size: 13px; }
.btn--small { padding: 8px 12px; font-size: 14px; border-radius: 12px; flex: none; }

/* Notifications (M2) */
.form { display: grid; gap: 10px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.field input { width: 100%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 17px; }
.btn--big { width: 100%; padding: 16px 18px; font-size: 18px; }
.btn[disabled] { opacity: .55; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row .btn { flex: 1 1 140px; }
.ok-line { font-weight: 800; color: var(--moss-ink); }
.status { font-size: 14px; color: var(--muted); min-height: 1em; }
.status.ok { color: var(--moss-ink); }
.status.warn { color: var(--honey); }
.status.bad { color: var(--rosehip); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.log li { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--chip) 70%, transparent); }
.log small { color: var(--muted); font-variant-numeric: tabular-nums; }
.log .log-sent span { color: var(--moss-ink); }
.log .log-dead span, .log .log-failed span { color: var(--rosehip); }
.log .log-retry span, .log .log-pending span { color: var(--honey); }

/* Diagnostics */
/* The labels keep a floor and long values wrap: one long value (the version after a deploy) squeezed every
   label to nothing, drawn over the values (B81) */
.diag { display: grid; grid-template-columns: minmax(40%, 1fr) minmax(0, auto); gap: 7px 12px; margin: 0; font-size: 14px; }
.diag dt { color: var(--muted); }
.diag dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.diag .ok { color: var(--moss-ink); }
.diag .warn { color: var(--honey); }
.diag .bad { color: var(--rosehip); }
.hint { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =====================================================================
   M5: the app, on the prototype's design. Linked, the page becomes the prototype's phone screen:
   the header with your orb and the cog, five tabs, sheets and magic windows, and the magic layers.
   ===================================================================== */
.app--shell { max-width: none; padding: 0; display: block; }
body.in-shell { overflow: hidden; background: var(--sheet); }
.shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--sheet); color: var(--ink); isolation: isolate; overflow: hidden; transition: background-color 1.6s ease, color 1.6s ease; }
.shell > .sky { position: absolute; inset: 0 0 auto 0; height: 340px; background: linear-gradient(to bottom, var(--sky), transparent); pointer-events: none; z-index: 0; transition: background 2.5s ease; }
canvas.ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.view { flex: 1; min-height: 0; width: 100%; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; position: relative; z-index: 1; }
.ghosts { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.ghost { position: absolute; margin: 0; pointer-events: none; }
h3 { margin: 0; }

/* The header: what day it is, the tab, your initials braided together, your orb, and the cog */
.app-head { position: relative; flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 14px; }
.head-text { min-width: 0; }
.app-head h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; }
.eyebrow { display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: 6px; }
.eyebrow svg { width: 11px; height: 11px; color: var(--honey); }
.app-head .orb-wrap { position: relative; flex: none; margin-right: 44px; }
.orb--lg { --s: 64px; }
.orb--mini { --s: 30px; }
.orb-btn { cursor: pointer; }
.orb--sleep { --smoke: color-mix(in srgb, var(--mist) 70%, #6b7aa8); }
.cog { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--muted); cursor: pointer; }
/* Tap targets of at least 44 pt (§9.3), through invisible hit areas that keep the look, as the initials do (B39) */
.cog::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.cog svg { width: 19px; height: 19px; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.cog:hover svg, .cog:focus-visible svg { transform: rotate(60deg); }
.moon { position: absolute; top: -9px; left: -11px; width: 20px; height: 20px; color: var(--honey); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--honey) 80%, transparent)); animation: moonfloat 5s ease-in-out infinite; pointer-events: none; }
.moon svg { width: 100%; height: 100%; }
@keyframes moonfloat { 50% { transform: translateY(-3px) rotate(-6deg); } }
.bond { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.init { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.init--me { background: var(--col-me); color: var(--ink-me); --ring: var(--col-me); }
.init--them { background: var(--col-them); color: var(--ink-them); --ring: var(--col-them); }
.bond .thread { position: relative; width: 56px; height: 10px; }
.bond .thread svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bond .thread path { fill: none; stroke-width: 1.7; stroke-linecap: round; opacity: .9; }
.bond .strand-a { stroke: var(--col-me); }
.bond .strand-b { stroke: var(--col-them); }
.bond .thread i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 8px 2px var(--honey); opacity: 0; }
.bond.pulse-out .thread i { animation: beadOut .8s ease-in-out; }
.bond.pulse-in .thread i { animation: beadIn .8s ease-in-out; }
@keyframes beadOut { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes beadIn { 0% { left: 100%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
/* Hold your partner's initial to send a glow (D9) */
button.init { border: 0; padding: 0; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button.init::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
button.init::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ring), 0 0 12px 3px var(--ring); opacity: 0; transform: scale(.7); pointer-events: none; }
button.init.charging::after { animation: charge .65s ease-out forwards; }
button.init.hint::after { animation: hintPulse 1.5s ease-in-out 4; }
@keyframes charge { to { opacity: 1; transform: scale(1.4); } }
@keyframes hintPulse { 50% { opacity: .9; transform: scale(1.25); } }

/* The tab's own scroll */
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 130px); display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.scroll > * { flex-shrink: 0; }
.pane { display: flex; flex-direction: column; gap: 10px; }
.group-h { display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; font-family: var(--display); font-style: italic; font-size: 19px; color: var(--muted); }
.pane > .group-h:first-child { margin-top: 0; }
.group-h svg { width: 18px; height: 18px; color: var(--sage); }
.group-h.is-urgent, .group-h.is-urgent svg { color: var(--rosehip); }

/* Reminder cards */
.rcard { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 12px; padding: 14px 14px 13px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 18px -16px var(--shadow); transition: background .6s, border-color .6s; }
.rcard.is-late { border-color: color-mix(in srgb, var(--rosehip) 45%, transparent); animation: smoulder 2.8s ease-in-out infinite; }
.rcard.is-late::before, .rcard.is-late::after { content: ''; position: absolute; top: -6px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rosehip) 32%, transparent), transparent 70%); filter: blur(5px); pointer-events: none; opacity: 0; animation: curl 3.4s ease-out infinite; }
.rcard.is-late::before { left: 16%; }
.rcard.is-late::after { left: 60%; animation-delay: 1.7s; }
@keyframes smoulder { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rosehip) 25%, transparent), 0 0 14px -4px color-mix(in srgb, var(--rosehip) 40%, transparent); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rosehip) 45%, transparent), 0 0 24px -2px color-mix(in srgb, var(--rosehip) 55%, transparent); } }
@keyframes curl { 0% { transform: translateY(8px) scale(.6); opacity: 0; } 25% { opacity: .7; } 100% { transform: translate(8px, -34px) scale(1.4); opacity: 0; } }
.rcard.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--honey-wash); } }
.rcard.incoming { opacity: 0; }
.rcard.materialize { animation: materialize 1.15s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes materialize {
  0% { opacity: 0; filter: blur(12px) brightness(1.5); transform: scale(.95) translateY(-8px); box-shadow: 0 0 46px 12px color-mix(in srgb, var(--honey) 55%, transparent); }
  55% { opacity: 1; filter: blur(1.5px) brightness(1.15); }
  100% { opacity: 1; filter: none; transform: none; }
}
.rcard.tremble { animation: tremble .65s ease, flareCard 1.3s ease; }
@keyframes tremble { 0%, 100% { transform: none; } 15% { transform: translateX(-4px) rotate(-.7deg); } 30% { transform: translateX(4px) rotate(.7deg); } 45% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } }
@keyframes flareCard { 30% { box-shadow: 0 0 26px 4px color-mix(in srgb, var(--rosehip) 55%, transparent); } }
.mark { grid-row: span 3; display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 1px; }
.mark svg { width: 18px; height: 18px; }
.mark .leaf-g { color: var(--sage); }
.mark .leaf-f { color: var(--moss); }
.mark .berry { color: var(--rosehip); }
.rcard h3 { font-size: 16px; font-weight: 800; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; }
.hand { font-family: var(--hand); font-size: 22px; line-height: 1; color: var(--moss-ink); overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.due { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.due svg { width: 12px; height: 12px; }
.due--late { background: var(--rose-wash); color: var(--rosehip); }
.due--got { background: var(--honey-wash); color: var(--ink); }
.due--amber { background: var(--honey-wash); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--honey) 45%, transparent); }
.due--night { background: color-mix(in srgb, #6b7aa8 22%, transparent); color: var(--ink); }
.due--rep { background: color-mix(in srgb, var(--moss) 16%, var(--chip)); }
.card-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.sbtn { position: relative; border: 1px solid var(--line-strong); background: transparent; border-radius: 12px; padding: 7px 14px; font-weight: 800; font-size: 14px; color: var(--ink); }
.sbtn--go { background: var(--moss); border-color: var(--moss); color: var(--on-moss); }
.sbtn--ghost { color: var(--moss-ink); }
.sbtn--more { margin-left: auto; padding-inline: 11px; letter-spacing: .1em; color: var(--muted); }
.sbtn--thanks { margin-left: auto; border-color: color-mix(in srgb, var(--honey) 60%, transparent); background: var(--honey-wash); color: var(--ink); box-shadow: 0 0 14px -3px color-mix(in srgb, var(--honey) 70%, transparent); }
.sbtn[disabled] { opacity: .55; }
/* about 36 px tall and the ⋯ 37 wide: 44 by 44 to the finger, unseen, in the gaps between buttons (B39) */
.sbtn::before { content: ''; position: absolute; inset: -4px min(0px, calc((100% - 44px) / 2)); }
.rcard.is-done { background: transparent; box-shadow: none; border-style: dashed; animation: none; }
.rcard.is-done::before, .rcard.is-done::after { display: none; }
.rcard.is-done h3 { text-decoration: line-through; text-decoration-color: var(--sage); color: var(--muted); }
.reply { grid-column: 2; font-family: var(--hand); font-size: 21px; line-height: 1.05; color: var(--rosehip); }
.warn-line { grid-column: 2; font-size: 13px; font-weight: 700; color: var(--rosehip); }
.thanked { color: var(--honey); font-weight: 800; }
.thanked-chip { margin-left: auto; align-self: center; font-size: 12.5px; font-weight: 800; color: var(--honey); }
/* Sent: sent, got it, done */
.progress { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; flex: 1 1 196px; min-width: 196px; }
.progress::before { content: ''; position: absolute; top: 5px; left: 6px; right: 33%; height: 2px; background: var(--line-strong); }
.progress li { position: relative; display: grid; gap: 1px; font-size: 12px; font-weight: 800; color: var(--muted); padding-top: 16px; }
.progress li::before { content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--line-strong); }
.progress li.on { color: var(--ink); }
.progress li.on::before { background: var(--moss); border-color: var(--moss); box-shadow: 0 0 8px color-mix(in srgb, var(--moss) 60%, transparent); }
.progress time { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sent-row { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.sent-btns { display: flex; gap: 6px; margin-left: auto; }
/* D14: a suggested change, waiting for the other one to say yes, counter, or keep it */
/* Comments on a reminder (Kevin, 2026-10-21): the latest on the card, and the 💬 that opens them all */
.cmt-row { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; min-width: 0; }
.cmt-last { margin: 0; min-width: 0; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-last b { color: var(--ink); font-weight: 800; }
.cmt-btn { flex: none; min-width: 44px; min-height: 32px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 4px 11px; font-weight: 800; font-size: 13px; }
.cmt-wrap { max-height: 46vh; overflow-y: auto; }
.cmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmt-list li { max-width: 86%; padding: 9px 12px; border-radius: 16px 16px 16px 5px; background: var(--chip); justify-self: start; display: grid; gap: 3px; }
.cmt-list li.mine { justify-self: end; border-radius: 16px 16px 5px 16px; background: color-mix(in srgb, var(--moss) 16%, var(--card)); }
.cmt-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.cmt-list small { color: var(--muted); font-size: 12px; }
.cmt-list .link { font-size: 12px; padding: 0; }
.cmt-empty { margin: 0; color: var(--muted); font-size: 14px; }
.proposal { grid-column: 2; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--honey) 13%, transparent); border: 1px dashed color-mix(in srgb, var(--honey) 55%, transparent); display: grid; gap: 6px; font-size: 14px; }
.proposal.is-mine { background: transparent; }
.proposal .card-actions { margin-top: 2px; }
.prop-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); }

/* Nothing to show */
.empty { margin: 34px auto 0; display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--muted); max-width: 26ch; }
.empty h3 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 24px; color: var(--ink); }
.empty-orb { position: relative; width: 112px; height: 112px; }
.empty-orb .orb { --s: 112px; }
.motes i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--honey) 60%, transparent); opacity: 0; animation: mote 5.5s ease-in-out infinite; }
.motes i:nth-child(1) { left: -12px; top: 70px; }
.motes i:nth-child(2) { left: 120px; top: 50px; animation-delay: 1s; }
.motes i:nth-child(3) { left: 30px; top: -10px; animation-delay: 2.1s; }
.motes i:nth-child(4) { left: 95px; top: 104px; animation-delay: 3s; }
.motes i:nth-child(5) { left: 8px; top: 20px; animation-delay: 3.8s; }
.motes i:nth-child(6) { left: 112px; top: 0; animation-delay: 4.6s; }
@keyframes mote { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -30px); } }
.sprig { width: 120px; height: 28px; color: var(--sage); }
.soon-art { width: 84px; height: auto; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--shadow) 40%, transparent)); }

/* The + button and the tabs */
.fab { position: absolute; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); z-index: 5; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--moss); color: var(--on-moss); box-shadow: 0 10px 22px -8px var(--shadow); }
.fab svg { width: 26px; height: 26px; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px max(10px, env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--sheet) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar button { position: relative; border: 0; background: transparent; display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar button[aria-current="page"] { color: var(--moss-ink); }
.tabbar .count { position: absolute; top: 0; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--rosehip); color: #FFF8F0; font-size: 10.5px; line-height: 17px; }

/* The toast, with Undo for 8 seconds */
.toast { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 32; transform: translate(-50%, 16px); max-width: 88%; width: max-content; display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 20px; background: var(--ink); color: var(--sheet); font-weight: 700; font-size: 13.5px; text-align: center; opacity: 0; pointer-events: none; transition: .3s; overflow: hidden; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.has-action { pointer-events: auto; padding-right: 8px; }
.toast button { position: relative; border: 0; border-radius: 999px; padding: 5px 12px; background: var(--honey); color: #241B0A; font-weight: 800; }
/* Undo lasts 8 seconds: 44 pt to the finger, inside the toast's padding, which clips (overflow: hidden) (B39) */
.toast button::before { content: ''; position: absolute; inset: -9px -6px; }
/* On Lists it rises above the add bar and its suggestions, so it never covers the field or takes its taps (B85) */
.view[data-tab="lists"] ~ .toast { bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 164px); }
.toast.has-action::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--honey); transform-origin: left; animation: countdown 8s linear forwards; }
@keyframes countdown { to { transform: scaleX(0); } }
/* Words written in light across the screen */
.lightwrite {
  position: absolute; left: 7%; right: 7%; top: 33%; z-index: 45; padding: 18px 10px; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 30px; line-height: 1.15; color: var(--honey);
  text-shadow: 0 0 14px color-mix(in srgb, var(--honey) 70%, transparent), 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sheet) 88%, transparent), transparent);
  pointer-events: none; opacity: 0; transition: opacity .7s; text-wrap: balance;
}
.lightwrite.show { opacity: 1; }
.lightwrite.lw-calm { font-size: 24px; }
.ink { opacity: 0; filter: blur(5px); animation: inkIn .55s ease forwards; }
@keyframes inkIn { to { opacity: 1; filter: blur(0); } }

/* Sheets slide up; magic windows unfold in the middle (D14) */
.sheet-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.sheet-layer.open { pointer-events: auto; }
.backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .3s; }
.sheet-layer.open .backdrop { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 620px; margin: 0 auto; max-height: 93%; overflow-y: auto; scrollbar-width: none; background: var(--sheet); color: var(--ink); border-radius: 28px 28px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 30px); display: flex; flex-direction: column; gap: 18px; transform: translateY(100%); transition: transform .42s cubic-bezier(.2, .85, .2, 1); }
.sheet::-webkit-scrollbar { display: none; }
.sheet-layer.open .sheet { transform: none; }
.sheet > * { flex-shrink: 0; } /* a long sheet scrolls; nothing in it is squashed */
.grabber { flex: none; width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.sheet-head h3 { font-family: var(--display); font-weight: 400; font-size: 22px; }
.sheet-title { font-family: var(--display); font-size: 24px; line-height: 1.15; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.sheet--magic { inset: 0 14px; margin: auto; max-width: 520px; height: fit-content; max-height: 86%; border-radius: 26px; padding: 24px 18px 18px; gap: 14px; overflow-x: hidden;
  transform: scale(.55) rotate(-3deg); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.35, .35, 1), opacity .25s ease;
  border: 1px solid color-mix(in srgb, var(--honey) 50%, transparent);
  background: radial-gradient(130% 60% at 50% 0%, color-mix(in srgb, var(--honey) 18%, var(--sheet)), var(--sheet) 65%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--honey) 12%, transparent), 0 0 44px color-mix(in srgb, var(--honey) 40%, transparent), 0 26px 50px -22px rgba(0, 0, 0, .55); }
.sheet-layer.open .sheet--magic { transform: none; opacity: 1; }
.magic-h { font-family: var(--display); font-weight: 400; font-size: 24px; text-align: center; line-height: 1.15; text-wrap: balance; }
.magic-kicker { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--honey); font-weight: 800; margin-bottom: -8px; overflow-wrap: anywhere; }
.magic-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.magic-sparks i { position: absolute; font-style: normal; color: var(--honey); font-size: 13px; opacity: .3; animation: mspark 2.6s ease-in-out infinite; }
.magic-sparks i:nth-child(1) { left: 8%; top: 6%; }
.magic-sparks i:nth-child(2) { right: 9%; top: 11%; font-size: 10px; animation-delay: -.9s; }
.magic-sparks i:nth-child(3) { left: 13%; bottom: 9%; animation-delay: -1.7s; }
.magic-sparks i:nth-child(4) { right: 11%; bottom: 15%; font-size: 16px; animation-delay: -.4s; }
.magic-sparks i:nth-child(5) { left: 49%; top: 2%; font-size: 9px; animation-delay: -2.1s; }
@keyframes mspark { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0); } 50% { opacity: .95; transform: scale(1.15) rotate(20deg); } }
.sheet .field > span, .sheet .field > legend { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; padding: 0; margin-bottom: 6px; }
.sheet .field > span i { text-transform: none; letter-spacing: 0; font-weight: 600; }
.sheet .field { border: 0; margin: 0; padding: 0; min-width: 0; text-align: left; }
.sheet .field input:not([type="radio"]):not([type="checkbox"]), .sheet .field textarea, .sheet input[type="text"], .sheet input[type="time"] { width: 100%; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 16px; resize: none; }
/* Yearly dates have no time (D12), so the time field shows only for "Just this once" (B79) */
form[data-form="addplan"]:has(input[name="kind"]:checked:not([value="plan"])) .plan-time { display: none; }
.sheet input[type="datetime-local"] { width: 100%; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; }
.sheet input::placeholder, .sheet textarea::placeholder { color: var(--muted); opacity: .7; }
.hand-input { font-family: var(--hand) !important; font-size: 23px !important; padding-block: 7px !important; color: var(--moss-ink) !important; }
.check-line { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; }
.check-line input { width: 18px; height: 18px; accent-color: var(--moss); flex: none; }
.sheet-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.sheet-note { font-size: 12.5px; color: var(--muted); text-align: center; text-wrap: balance; }
.link { border: 0; background: transparent; color: var(--moss-ink); font-weight: 700; justify-self: start; padding: 4px 0; }
.link--center { justify-self: center; align-self: center; }
.err { color: var(--rosehip); font-size: 13.5px; font-weight: 700; }
.err:empty { display: none; }
.btn--primary { background: var(--moss); color: var(--on-moss); box-shadow: 0 6px 14px -8px var(--moss); }
.btn--block { width: 100%; }
.btn--bird { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Choices are radio groups styled as chips: WebKit's own <select> styles break the strict CSP */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border-radius: 14px; background: var(--chip); border: 0; margin: 0; min-width: 0; }
.seg label { position: relative; }
/* A size of their own: `.field input { width: 100% }` made each hidden radio a whole sheet wide from its chip,
   so the compose sheet could be panned sideways (B38) */
.seg input, .chips input, .levels input, .swatches input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 8px; border-radius: 11px; font-weight: 800; font-size: 15px; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--line-strong); }
.seg input:focus-visible + span, .chips input:focus-visible + span, .levels input:focus-visible + span { outline: 2.5px solid var(--moss); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span, .chip-btn { display: grid; padding: 7px 12px; border-radius: 13px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 800; font-size: 13.5px; line-height: 1.2; cursor: pointer; text-align: left; }
.chips small, .chip-btn small { font-weight: 600; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.chips input:checked + span small { color: inherit; opacity: .75; }
.chips input:disabled + span { opacity: .4; }
.levels { display: grid; gap: 8px; }
/* Each level's own row only: the Firm words sit in a span of their own inside it, and took the row's box too (Joelle,
   2026-10-19) */
.levels label > span { display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; align-items: center; padding: 11px 13px; border-radius: 15px; border: 1px solid var(--line-strong); cursor: pointer; }
.levels label > span svg { grid-row: span 2; width: 26px; height: 26px; }
.levels .lv-g { color: var(--sage); } .levels .lv-f { color: var(--moss); } .levels .lv-u { color: var(--rosehip); } .levels .lv-t { color: var(--honey); }
.levels b { font-size: 15px; }
.levels em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.levels input:checked + span { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 10%, var(--card)); box-shadow: 0 0 0 1px var(--moss); }
.levels input:disabled + span { opacity: .4; }
.decline { display: grid; gap: 10px; }
/* Compose: quick sends, typed times, repeat (D9) */
.quick { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; margin: -6px 0; padding: 2px 0; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: none; border: 1px dashed var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; }
.detected { display: flex; align-items: center; gap: 8px; margin-top: -10px; padding: 7px 6px 7px 12px; border-radius: 13px; background: var(--honey-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--honey) 45%, transparent); font-size: 13.5px; font-weight: 800; }
.detected small { font-weight: 600; color: var(--muted); white-space: nowrap; }
.detected button { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-weight: 900; padding: 2px 8px; border-radius: 8px; }
.when-off { opacity: .4; }
.turns { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.turns input { width: 20px; height: 20px; accent-color: var(--moss); flex: none; }
/* Settings: one magic window from the cog */
.settings-sec { display: grid; gap: 8px; min-width: 0; }
.settings-sec + .settings-sec { padding-top: 12px; border-top: 1px solid var(--line); }
.us-sub { margin: 2px 4px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); }
.name-l { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 2px; }
.swatches label { position: relative; }
.swatches span { display: grid; justify-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: var(--muted); cursor: pointer; line-height: 1.1; text-align: center; }
.swatches i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 9%, var(--sw) 46%, color-mix(in srgb, var(--sw) 70%, #000) 100%); box-shadow: 0 4px 10px -4px var(--shadow); transition: box-shadow .2s, transform .2s; }
.swatches input:checked + span { color: var(--ink); }
.swatches input:checked + span i { transform: scale(1.08); box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--sw), 0 0 14px 2px var(--sw); }
.swatches input:disabled + span { opacity: .3; cursor: not-allowed; }
.swatches input:focus-visible + span i { outline: 2.5px solid var(--moss); outline-offset: 4px; }
.sheet .kinds { display: grid; gap: 8px; }
.sheet .check-row { font-size: 14.5px; }
.sheet .times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet .card { background: var(--card); }

/* Ghost effects: dust, amber, a paper bird, a golden moth */
.note-ghost { padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: 15px; text-align: center; box-shadow: 0 0 26px 5px color-mix(in srgb, var(--honey) 45%, transparent); animation: condense .6s ease-in forwards; }
@keyframes condense { 0% { transform: none; opacity: 1; } 70% { transform: scale(.22); filter: blur(2px) brightness(1.8); opacity: .95; } 100% { transform: scale(.05); opacity: 0; } }
.ghost.dissolve { animation: dissolve .95s ease-in forwards; }
@keyframes dissolve { 0% { opacity: 1; filter: none; transform: none; } 35% { opacity: .95; filter: blur(.5px) brightness(1.25) sepia(.5); } 100% { opacity: 0; filter: blur(9px) brightness(1.7) sepia(.9); transform: translateY(-16px) scale(1.03); } }
.ghost.amber { overflow: hidden; animation: amber 1.3s ease-in forwards; }
.ghost.amber::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 214, 120, .55), rgba(214, 150, 40, .85) 55%, rgba(255, 226, 160, .5)); opacity: 0; animation: amberfill .45s ease forwards; }
@keyframes amberfill { to { opacity: .9; } }
@keyframes amber { 0% { transform: none; } 35% { transform: scale(1.025); filter: drop-shadow(0 0 14px rgba(232, 180, 80, .9)); } 100% { transform: translateY(150px) scale(.82); opacity: 0; } }
.ghost.fold { animation: fold .5s ease-in forwards; }
@keyframes fold { 0% { transform: none; } 50% { transform: scale(.7, .35) rotate(-4deg); } 100% { transform: scale(.15) rotate(-12deg); opacity: 0; } }
.bird { position: absolute; left: 0; top: 0; width: 60px; height: 40px; z-index: 2; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.bird svg { display: block; overflow: visible; }
.bird polygon { stroke: rgba(90, 70, 40, .35); stroke-width: .6; stroke-linejoin: round; }
.bird .wing-l { fill: #FBF6EA; transform-origin: 30px 22px; animation: flap .28s ease-in-out infinite alternate; }
.bird .wing-r { fill: #F1E8D3; transform-origin: 30px 22px; animation: flap .28s ease-in-out infinite alternate; }
.bird .body { fill: #E9DDC2; }
.bird .head { fill: #E0D1B1; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
.moth { position: absolute; left: 0; top: 0; width: 46px; height: 34px; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 214, 120, .95)); }
.moth svg { display: block; overflow: visible; }
.moth .wl, .moth .wr { transform-origin: 23px 17px; animation: mflap .14s ease-in-out infinite alternate; }
@keyframes mflap { to { transform: scaleX(.35); } }

/* Morel: a word when your partner's been away (D9), and his tours */
.nudge { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 18px -16px var(--shadow); }
.nudge p { font-size: 14.5px; font-weight: 700; line-height: 1.38; margin-bottom: 10px; }
.nudge .btn { padding: 10px 12px; font-size: 15px; }
.morel-face { display: block; width: 40px; margin-inline: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15)); }
.morel-face img { display: block; width: 100%; height: auto; }
.morel-face.talking img { transform-origin: 50% 90%; animation: mChat .3s ease-in-out 6 alternate; }
@keyframes mChat { to { transform: translateY(-1.5px) rotate(-2deg); } }
/* Morel's tours (Kevin, 2026-10-18; blueprint §12, as in the prototype): Morel and his speech bubble move over the page
   in their own layer (.mlayer), so nothing on it shifts when he comes or goes. .gm is the point his feet stand on;
   .gm-body squashes, stretches and rocks about it; .gm-flip turns him to face what he's showing; .gm-ride carries what
   he rides in on. */
.mlayer { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; transition: opacity .3s; }
.mlayer.lost { opacity: 0; }
.mlayer.lost .tour { pointer-events: none; }
.gm, .gm-body, .gm-flip, .gm-ride { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.gm { transform-origin: 0 0; transition: opacity .25s; }
.gm.fade { opacity: 0; }
.gm-body { transform-origin: 0 0; transition: scale .3s ease; }
/* his tour frames: the canvas is 70.7px tall so he's 66px cap to feet (GM_H); his feet sit 4.9% above its bottom, 52.3% across */
.gmf { position: absolute; left: 0; bottom: 0; height: 70.7px; width: auto; max-width: none; display: none; translate: -52.3% 4.9%; filter: drop-shadow(0 5px 6px rgba(40, 32, 20, .22)); }
.gmf.on { display: block; }
/* Walking: one painting, the first goodbye wave, shown three times (everything above his feet, and each foot on its own,
   just behind it), so his feet can step while his cap stays still. The joins fade into each other, so a foot that moves
   leaves no edge; each foot starts narrow, so it brings none of his belly along. */
.gm-walk { display: none; filter: drop-shadow(0 5px 6px rgba(40, 32, 20, .22)); }
.gm.walking .gm-walk { display: block; }
.gmw { position: absolute; left: 0; bottom: 0; height: 70.7px; width: auto; max-width: none; translate: -52.3% 4.9%; }
.gmw-top { -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 89.5%); mask-image: linear-gradient(to bottom, #000 88%, transparent 89.5%); }
.gmw-back, .gmw-front { -webkit-mask-image: linear-gradient(to bottom, transparent 86.5%, #000 88.5%); mask-image: linear-gradient(to bottom, transparent 86.5%, #000 88.5%); }
.gmw-back { clip-path: polygon(15% 86%, 36% 86%, 38% 92%, 38% 100%, 6% 100%, 6% 92%); }
.gmw-front { clip-path: polygon(41% 86%, 70% 86%, 78% 92%, 78% 100%, 38% 100%, 38% 92%); }
.gm-ride img, .gm-ride .bird { position: absolute; left: 0; top: 0; max-width: none; }
.mlayer > .gm-free { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
/* His grappling exit: the rope (two strokes, so it shows on day and night) and the hook, over the page */
.gm-rope { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gm-rope-shade { stroke: rgba(70, 44, 20, .55); stroke-width: 3; stroke-linecap: round; }
.gm-rope-line { stroke: #F1E3BF; stroke-width: 1.6; stroke-linecap: round; }
.gm-claw { position: absolute; left: 0; top: 0; max-width: none; height: auto; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(40, 32, 20, .3)); }
/* His moonwalk: each glide painting as a still top half and two feet of their own (split between his legs), so the
   planted foot can stay put on the floor while he glides backwards and the other slides back past it */
.gm-moon { display: none; filter: drop-shadow(0 5px 6px rgba(40, 32, 20, .22)); }
.gm.moonwalking .gm-moon { display: block; }
.gm-moon > div { position: absolute; left: 0; top: 0; }
.gmm { position: absolute; left: 0; bottom: 0; width: auto; max-width: none; }
.gmm-top { -webkit-mask-image: linear-gradient(to bottom, #000 87%, transparent 89%); mask-image: linear-gradient(to bottom, #000 87%, transparent 89%); }
.gmm-back, .gmm-front { -webkit-mask-image: linear-gradient(to bottom, transparent 86.5%, #000 88.5%); mask-image: linear-gradient(to bottom, transparent 86.5%, #000 88.5%); }
.gmm-back { clip-path: polygon(0 85%, 30% 85%, 32% 100%, 0 100%); }
.gmm-front { clip-path: polygon(30% 85%, 100% 85%, 100% 100%, 32% 100%); }
/* His ball, as he rolls: a canvas centred on him */
.gm-ball { position: absolute; left: 0; top: 0; translate: -50% -50%; display: none; filter: drop-shadow(0 5px 6px rgba(40, 32, 20, .22)); }
.gm.rolling .gm-ball { display: block; }
.mlayer .tour { position: absolute; left: 0; top: 0; width: min(270px, calc(100% - 24px)); pointer-events: auto; transition: opacity .25s ease, scale .25s ease; }
.mlayer .tour.away { visibility: hidden; opacity: 0; scale: .94; pointer-events: none; transition: none; }
.say-bubble { position: relative; display: grid; gap: 8px; padding: 12px 14px 10px; border-radius: 20px; background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--lz-ink) 45%, var(--line)); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--ink) 55%, transparent); }
.say-bubble::before { content: ''; position: absolute; left: var(--tx, 30px); width: 14px; height: 14px; margin-left: -7px; background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--lz-ink) 45%, var(--line)); transform: rotate(45deg); }
.tour[data-tail="down"] .say-bubble::before { bottom: -8.5px; border-top: 0; border-left: 0; }
.tour[data-tail="up"] .say-bubble::before { top: -8.5px; border-bottom: 0; border-right: 0; }
.say { font-size: 14.5px; font-weight: 700; line-height: 1.38; }
.tour-btns { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.say-dots { display: inline-flex; gap: 4px; }
.say-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.say-dots i.on { background: var(--lz-ink); }
.coach-on { outline: 2px dashed var(--lz-ink); outline-offset: 3px; animation: coach 1.6s ease-in-out infinite; }
/* Rounds the outline only on boxes without corners of their own: the + button and the orb stay round (B69) */
:where(.coach-on) { border-radius: 12px; }
@keyframes coach { 50% { outline-color: transparent; } }
/* Linking and devices, inside the app */
.pane .card, .settings-sec .card { padding: 14px; }

:root[data-calm="1"] *, :root[data-calm="1"] *::before, :root[data-calm="1"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .magic-sparks i { animation: none; opacity: .6; }
  .sheet, .toast, .sheet--magic { transition: opacity .2s !important; }
}

/* Checkbox rows, and How we use Memuna's table (it scrolls inside its section) */
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--moss); flex: none; }
.kinds { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.kinds legend { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; margin-bottom: 6px; padding: 0; }
#usage-body { min-width: 0; display: grid; gap: 10px; }
.usage-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.usage { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.usage th, .usage td { padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.usage th:first-child, .usage td:first-child, .usage thead th:nth-child(2) { text-align: left; }
.usage thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* The twelve smoke colors, for the swatches (no inline styles under the strict CSP) */
.sw-sage { --sw: #7FA36C; }
.sw-mint { --sw: #8ED1B4; }
.sw-seaglass { --sw: #6FB5A3; }
.sw-peacock { --sw: #2E8C9A; }
.sw-ice { --sw: #79C0E3; }
.sw-storm { --sw: #8593A6; }
.sw-moonlight { --sw: #9DB0D6; }
.sw-midnight { --sw: #4D68B0; }
.sw-lavender { --sw: #A891DC; }
.sw-orchid { --sw: #C67FD3; }
.sw-plum { --sw: #8C4F8F; }
.sw-rose { --sw: #D79AB8; }

/* =====================================================================
   M6: Lists, on the prototype's design (D9: going to the store, suggestions from past items)
   ===================================================================== */
.view[data-tab="lists"] .scroll { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 230px); }
.list-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; flex: none; }
.list-chips::-webkit-scrollbar { display: none; }
.lchip { flex: none; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 14px; }
.lchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.lchip--new { border-style: dashed; color: var(--muted); }
/* Editing the lists (press and hold a list, as on the iPhone's Home Screen): each wiggles, a minus at its top right */
.lchip-wrap { position: relative; flex: none; display: flex; }
.list-chips.editing { padding-top: 10px; padding-right: 10px; }
.list-chips.editing .lchip-wrap { animation: lwiggle .3s ease-in-out infinite alternate; }
.list-chips.editing .lchip-wrap:nth-child(2n) { animation-delay: -.15s; animation-duration: .27s; }
@keyframes lwiggle { from { rotate: -2deg; } to { rotate: 2deg; } }
.lchip-del { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--sheet); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.lchip-del::before { content: ""; position: absolute; inset: -10px; } /* a 44 pt target */
.lchip-del svg { width: 16px; height: 16px; }
.list-chips .lchip-wrap.popping { animation: lpop .18s ease-in forwards; }
@keyframes lpop { 40% { scale: 1.15; opacity: 1; } to { scale: .2; opacity: 0; } }
.lchip--done { background: var(--moss); border-color: var(--moss); color: #fff; }
@media (prefers-reduced-motion: reduce) { .list-chips.editing .lchip-wrap { animation: none; } }
.newlist { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.newlist-row { display: flex; gap: 8px; }
.nl-q { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.nl-q legend, .nl-field > span { font-size: 12.5px; font-weight: 800; color: var(--muted); padding: 0; margin-bottom: 6px; }
.nl-store { display: grid; gap: 12px; }
.nl-field { display: grid; }
.nl-emoji span { font-size: 19px; line-height: 1; padding: 6px 9px; }
.nl-preview { margin: 0; font-weight: 800; font-size: 13.5px; color: var(--muted); }
.newlist input:not([type="radio"]) { flex: 1; min-width: 0; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 16px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 18px; position: relative; overflow: hidden; }
.items li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); background: var(--card); position: relative; }
.items li:first-child { border-top: 0; }
.items .txt { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.items.got .txt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--sage); font-weight: 600; }
.items.shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--honey) 40%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.2s ease forwards; pointer-events: none; z-index: 2; }
@keyframes sheen { to { transform: translateX(100%); } }
.items li.fresh { animation: freshItem 2.8s ease; }
@keyframes freshItem { 0%, 35% { background: color-mix(in srgb, var(--honey) 30%, var(--card)); box-shadow: inset 4px 0 0 var(--honey); } }
.tick-btn { position: relative; flex: none; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--line-strong); }
.tick-btn::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; } /* 44 pt to the finger, within the row (B39) */
.tick-btn svg { width: 26px; height: 26px; overflow: visible; }
.tick-btn .tick { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .4s ease; }
.tick-btn[aria-pressed="true"] { color: var(--moss); }
.tick-btn[aria-pressed="true"] .tick { stroke-dashoffset: 0; }
.by { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.by--me { background: var(--col-me); color: var(--ink-me); } .by--them { background: var(--col-them); color: var(--ink-them); }
.basket-h { display: flex; justify-content: space-between; align-items: center; margin: 6px 4px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); }
.basket-h button { border: 0; background: transparent; color: var(--moss-ink); font-weight: 800; font-size: 12px; text-transform: none; letter-spacing: 0; padding: 16px 10px 10px; margin: -16px -10px -10px; } /* about 44 pt tall, same look: it reaches the lists above and below, no further (B39) */
.storebar { display: flex; }
.btn-store { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 13.5px; }
.ribbon { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--honey) 14%, var(--card)); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.ribbon button { margin-left: auto; flex: none; }
.addbar { position: absolute; left: 12px; right: 12px; bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 66px); z-index: 5; display: grid; gap: 6px; }
.additem { display: flex; gap: 8px; padding: 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 10px 24px -14px var(--shadow); }
.additem input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font: inherit; font-size: 16px; outline: none; }
.additem button { border: 0; border-radius: 13px; background: var(--moss); color: var(--on-moss); font-weight: 800; padding: 8px 16px; }
.suggest { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.suggest:empty { display: none; }
.suggest span { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); padding-left: 4px; }
.suggest button { flex: none; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 13px; }

/* =====================================================================
   M6b: the shared calendar (D12), on the prototype's design
   ===================================================================== */
:root { --cal-plan: #2F8C9C; --cal-mem: #8C6FC4; }
@media (prefers-color-scheme: dark) { :root { --cal-plan: #7FD3C8; --cal-mem: #B9A4E0; } }
[data-phase="night"] { --cal-plan: #7FD3C8; --cal-mem: #B9A4E0; }
.cal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.cal-head h3 { text-align: center; font-family: var(--display); font-weight: 400; font-size: 23px; }
.cal-nav { height: 40px; border: 0; border-radius: 12px; background: transparent; font-family: var(--body); font-size: 28px; line-height: 1; color: var(--moss-ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 10px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.cal-wd { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); padding-bottom: 3px; }
.cal-cell { aspect-ratio: 1; min-width: 0; border: 0; border-radius: 10px; background: transparent; display: grid; grid-template-rows: 1fr 6px; justify-items: center; align-items: center; padding: 2px 0 4px; font-size: 13.5px; color: var(--ink); }
.cal-cell b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.cal-cell.is-out { visibility: hidden; }
.cal-cell.is-today b { background: var(--moss); color: var(--on-moss); }
.cal-cell.is-sel { box-shadow: inset 0 0 0 1.5px var(--moss); background: color-mix(in srgb, var(--moss) 12%, transparent); }
.cal-cell .dots { display: flex; gap: 2px; }
.cal-cell .dots i, .cal-legend i, .cal-list li::before { width: 5px; height: 5px; border-radius: 50%; display: inline-block; flex: none; }
.d-date { background: var(--honey); } .d-plan { background: var(--cal-plan); } .d-rem { background: var(--sage); } .d-mem { background: var(--cal-mem); }
.cal-cell .dots i.d-emo { width: auto; height: auto; background: none; border-radius: 0; font-style: normal; font-size: 10px; line-height: 1; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; gap: 5px; align-items: center; }
.cal-day { display: grid; gap: 10px; }
.cal-day h3 { font-family: var(--display); font-weight: 400; font-size: 20px; }
.us-list { list-style: none; margin: 0; padding: 0; display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.us-list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.us-list li:first-child { border-top: 0; }
.us-list .t { flex: 1; min-width: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.us-list .t small { display: block; font-family: var(--body); font-weight: 600; font-size: 12px; color: var(--muted); }
.us-empty { padding: 4px 6px; font-size: 13px; color: var(--muted); }
.us-hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: -4px; }
.us-more { justify-self: start; border: 1px dashed var(--line-strong); background: transparent; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px; color: var(--moss-ink); }
.cal-list li { flex-wrap: wrap; }
/* a plan's address (opens in Maps) and note (Kevin, 2026-10-22) */
.cal-addr { display: block; margin-top: 2px; font-family: var(--body); font-weight: 700; font-size: 12.5px; color: var(--moss); text-decoration: none; }
.us-list .t small.cal-note { color: var(--ink); font-weight: 500; white-space: pre-wrap; }
.plan-only { display: grid; gap: 10px; }
.plan-only[hidden] { display: none; }
.heads-up span { font-size: 13px; padding: 6px 10px; }
.cal-list li::before { content: ''; width: 8px; height: 8px; }
.cal-list li.k-date::before { background: var(--honey); } .cal-list li.k-plan::before { background: var(--cal-plan); }
.cal-list li.k-rem::before { background: var(--sage); } .cal-list li.k-mem::before { background: var(--cal-mem); }
.cal-list .hand { font-family: var(--hand); font-weight: 400; font-size: 22px; line-height: 1.05; }
.cal-list .proposal { flex-basis: 100%; grid-column: auto; }
.cal-edit { margin-left: auto; flex: none; border: 1px solid var(--line-strong); background: transparent; border-radius: 10px; padding: 3px 9px; font-size: 13px; font-weight: 800; color: var(--moss-ink); }
.cal-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-soon { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.cal-soon p { font-size: 13.5px; } .cal-soon b { font-weight: 800; }
.magic-remove { color: var(--rosehip); }
.sheet--magic input[type="date"] { width: 100%; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; }
.sheet--magic textarea.mem { width: 100%; border: 1px solid var(--line-strong); background: var(--card); border-radius: 12px; padding: 10px 12px; font: 400 22px/1.15 var(--hand); color: var(--ink); resize: none; }
/* A memory's emoji: any one from the phone's keyboard, or a recent one in a tap */
.emo-row { display: flex; align-items: center; gap: 10px; }
.emo-spot { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--honey) 60%, var(--line-strong)); background: var(--card); display: grid; place-items: center; }
.sheet--magic .emo-spot input[type="text"] { width: 100%; height: 100%; border: 0; background: transparent; text-align: center; font-size: 28px; line-height: 1; padding: 0; border-radius: 50%; color: var(--ink); caret-color: transparent; }
.emo-spot input::placeholder { font-size: 13px; color: var(--muted); }
.emo-spot:focus-within { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--honey) 30%, transparent); }
.emo-quick { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.emo-quick button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: transparent; font-size: 20px; line-height: 1; padding: 0; }
.emo-quick button[aria-pressed="true"] { border-color: var(--honey); background: color-mix(in srgb, var(--honey) 16%, transparent); }
/* A memory comes back, now and then, as a surprise; the envelope opens as it's read */
.memory-card { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 4px 6px 2px; }
.memory-card .env { position: relative; width: 96px; animation: moonfloat 4.4s ease-in-out infinite; }
.memory-card .env img { display: block; width: 100%; height: auto; }
.memory-card .env .env-open { position: absolute; inset: 0; height: 100%; opacity: 0; animation: envOpen .7s ease .9s both; }
.env-shut { animation: envShut .7s ease .9s both; }
@keyframes envOpen { to { opacity: 1; } }
@keyframes envShut { to { opacity: 0; } }
.memory-card .when { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.memory-card blockquote { margin: 0; font-family: var(--hand); font-size: 30px; line-height: 1.05; color: var(--ink); text-wrap: balance; }
.memory-card .who { font-size: 13px; color: var(--muted); }
.memory-card .row2 { width: 100%; }

/* =====================================================================
   M6b: Us, on the prototype's design: the sky, the jar, the monthly letter, dates and things to remember (D9)
   ===================================================================== */
.us-sec, .letter-wrap, .us-glow { display: grid; gap: 10px; }
.starfield { position: relative; height: 214px; border-radius: 22px; overflow: hidden; background: radial-gradient(130% 100% at 50% 0%, #2E3B66 0%, #161B30 58%, #0D1020 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 24px -16px var(--shadow); }
.starfield::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 72% 36%, rgba(255, 255, 255, .35), transparent), radial-gradient(1px 1px at 44% 64%, rgba(255, 255, 255, .3), transparent), radial-gradient(1px 1px at 88% 12%, rgba(255, 255, 255, .4), transparent), radial-gradient(1px 1px at 28% 82%, rgba(255, 255, 255, .3), transparent), radial-gradient(1px 1px at 60% 8%, rgba(255, 255, 255, .35), transparent); }
.starfield .lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.starfield .lines path { fill: none; stroke: rgba(240, 232, 205, .2); stroke-width: .6; vector-effect: non-scaling-stroke; }
.star { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.star i { position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2); border-radius: 50%; background: var(--sc); box-shadow: 0 0 6px 1px var(--sc); }
.star.tw i { animation: twinkle var(--tw) ease-in-out infinite; }
.star.gold i { box-shadow: 0 0 9px 3px color-mix(in srgb, #F6D27A 70%, transparent); }
.star[aria-pressed="true"] i { box-shadow: 0 0 0 3px rgba(255, 243, 200, .35), 0 0 14px 4px #FFF3C8; }
.star.born i { animation: born 1.2s cubic-bezier(.2, .8, .2, 1) var(--bd) both; }
@keyframes twinkle { 50% { opacity: .45; transform: scale(.8); } }
@keyframes born { 0% { opacity: 0; transform: translateY(70px) scale(.4); } 70% { opacity: 1; transform: scale(1.7); } 100% { opacity: 1; transform: none; } }
.sky-month { position: absolute; bottom: 7px; transform: translateX(-50%); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: rgba(240, 232, 205, .5); pointer-events: none; }
.sky-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font-family: var(--display); font-style: italic; font-size: 17px; color: rgba(240, 232, 205, .7); }
.sky-cap { min-height: 2.7em; padding: 0 6px; font-size: 13px; line-height: 1.35; color: var(--muted); text-align: center; text-wrap: balance; margin-top: -4px; }
.jar-card { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 18px -16px var(--shadow); }
.jar { position: relative; width: 92px; height: 114px; }
.jar .glass { position: absolute; left: 6px; right: 6px; top: 20px; bottom: 0; border-radius: 16px 16px 26px 26px / 12px 12px 28px 28px; background: linear-gradient(100deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .14)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent), inset 7px 0 10px -7px rgba(255, 255, 255, .7), 0 10px 18px -12px var(--shadow); }
.jar .neck { position: absolute; left: 20px; right: 20px; top: 9px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 20%, transparent); }
.jar .lid { position: absolute; left: 16px; right: 16px; top: 0; height: 10px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#CDA563, #8E6A2E); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); transform-origin: 0 100%; }
.jar.opening .lid { animation: lidOff 1s ease forwards; }
@keyframes lidOff { to { transform: translate(-14px, -12px) rotate(-40deg); opacity: 0; } }
.jar .flies { position: absolute; left: 6px; right: 6px; top: 20px; bottom: 0; }
.fly { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 7px 2px var(--fc); animation: flyDrift var(--fd) ease-in-out var(--fdl) infinite alternate, flyBlink var(--fb) ease-in-out var(--fbl) infinite; }
.fly.gold { --fc: #F6D27A; width: 7px; height: 7px; }
.fly.rise { animation: flyRise 1.5s cubic-bezier(.45, 0, .2, 1) var(--rd) forwards; }
@keyframes flyDrift { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--dx1), var(--dy1)); } 100% { transform: translate(var(--dx2), var(--dy2)); } }
@keyframes flyBlink { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes flyRise { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--rx), -190px) scale(.6); } }
.jar-text h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.1; }
.jar-text p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.letter { position: relative; padding: 16px 16px 14px; border-radius: 16px; background: linear-gradient(#FBF6E8, #F2E9D2); color: #3A3327; border: 1px solid rgba(58, 51, 39, .14); box-shadow: 0 10px 22px -16px var(--shadow); }
.letter::after { content: ''; position: absolute; right: 14px; top: -9px; width: 26px; height: 26px; border-radius: 47% 53% 50% 50%; background: radial-gradient(circle at 38% 32%, #E07A66, #B3402F 55%, #7E2418); box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
.letter h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 20px; }
.letter p { margin-top: 6px; font-family: var(--hand); font-size: 22px; line-height: 1.08; color: #4A5C35; }
.letter small { display: block; margin-top: 8px; font-size: 11.5px; color: #776E5C; }
.letter-garden { margin-top: 4px; font-family: var(--hand); font-size: 19px; line-height: 1.05; color: #4A5C35; }
.letter-mem ul { margin: 2px 0 0; padding-left: 1.1em; font-family: var(--hand); font-size: 19px; line-height: 1.1; color: #4A5C35; }
.letter-mem li span { font-family: var(--body); font-size: 11.5px; color: #776E5C; }
.letters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.letters button { border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 12px; color: var(--muted); }
.letters button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.btn--glow { border: 1px solid color-mix(in srgb, var(--col-them) 70%, transparent); background: color-mix(in srgb, var(--col-them) 18%, var(--card)); color: var(--ink); box-shadow: 0 0 18px -6px var(--col-them); }
.us-list .t small.gift { margin-top: 2px; color: var(--moss-ink); font-family: var(--hand); font-weight: 400; font-size: 19px; line-height: 1.05; }
.us-list .when { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); }
.us-list .when.soon { color: var(--honey); }
.lock { flex: none; font-size: 10.5px; font-weight: 800; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 6px; padding: 1px 6px; }

/* ---------- Hide Sammy (D10): one of you hides Sammy behind something, the other finds Sammy (prototype Versions 8 to 10) ---------- */
.lz-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Sammy, painted in four frames: standing, two steps for scurrying, and a dance (art/README.md) */
.sammy { position: relative; }
.sammy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.sammy .sf0 { opacity: 1; }
/* The page's own layer for a peek, so it scrolls with the page: no height, and no gap in the page (.scroll's 10px).
   Under the + button and the tab bar, like the rest of the page. */
.lz-layer { position: relative; z-index: 3; height: 0; margin-bottom: -10px; pointer-events: none; }
/* A peek: only the part outside the thing Sammy hides behind shows, so it works behind words, pictures and buttons alike */
.lz-peek { position: absolute; z-index: 7; padding: 10px; margin: -10px; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
/* By the tab bar, the + or the header, a peek takes only touches on Sammy himself: its wider reach covered part of a
   tab or the +, and a tap meant for them found Sammy instead (Kevin, 2026-10-21) */
.view > .lz-peek { padding: 0; margin: 0; }
.lz-win { position: relative; display: block; overflow: hidden; width: 22px; height: 18px; }
.lz-top .lz-win, .lz-bottom .lz-win { width: 18px; height: 22px; }
/* The painted head (or tail) comes out from behind its left edge, facing right: turned to come out of the side it peeks from */
.lz-or { position: absolute; left: 50%; top: 50%; width: 22px; height: 18px; transform: translate(-50%, -50%); }
.lz-left .lz-or { transform: translate(-50%, -50%) scaleX(-1); }
.lz-top .lz-or { transform: translate(-50%, -50%) rotate(-90deg); }
.lz-bottom .lz-or { transform: translate(-50%, -50%) rotate(90deg); }
.lz-or img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 0 50%; }
.lz-move { animation: lzPeek 6s ease-in-out infinite; }
.lz-tail .lz-move { transform-origin: 0 50%; animation: lzWag 3.6s ease-in-out infinite; }
@keyframes lzPeek { 0%, 62%, 100% { transform: translateX(-4px); } 70%, 88% { transform: translateX(0); } }
@keyframes lzWag { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } }
/* The one who hid Sammy sees a faint Sammy, to remember where */
.lz-peek.lz-mine { pointer-events: none; opacity: .5; }
.lz-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 18px -16px var(--shadow); }
.lz-card > div { display: grid; gap: 6px; justify-items: start; }
.lz-card h3 { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.1; }
.lz-card p { font-size: 13px; color: var(--muted); line-height: 1.35; }
.lz-card .lz-hint { color: var(--moss-ink); font-weight: 800; }
.lz-art { width: 64px; height: 46px; }
.lz-art .lz-svg { animation: lzIdle 3.2s ease-in-out infinite; }
@keyframes lzIdle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) translateY(-1px); } }
/* Hiding: Sammy waits on a perch until dragged onto something, above the tab bar (and the + button, a hiding place too) */
.lz-dock { position: absolute; left: 12px; right: 12px; bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 70px); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 20px; background: color-mix(in srgb, var(--sheet) 90%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 26px -14px var(--shadow); }
.view[data-tab="mine"] .lz-dock, .view[data-tab="sent"] .lz-dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }
.view.liz-mode .addbar { display: none; }
/* The magical directions: three steps, lit one at a time as you go */
.lz-steps { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lz-dock .lz-steps-h { font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.1; color: var(--lz-ink); }
.lz-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; counter-reset: lz; }
.lz-steps li { position: relative; padding-left: 22px; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--muted); transition: color .3s; counter-increment: lz; }
.lz-steps li::before { content: counter(lz); position: absolute; left: 0; top: -1px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; border: 1.5px solid var(--line-strong); color: var(--muted); background: var(--card); transition: .3s; }
.lz-steps li.on { color: var(--ink); }
.lz-steps li.on::before { border-color: var(--lz-ink); color: var(--card); background: var(--lz-ink); box-shadow: 0 0 10px color-mix(in srgb, var(--lz-ink) 60%, transparent); }
.lz-dock .link { flex: none; align-self: center; }
.lz-grab { flex: none; width: 58px; height: 42px; border: 0; padding: 0; background: transparent; touch-action: none; cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lz-grab .lz-svg { animation: lzIdle 2.4s ease-in-out infinite; }
.lz-grab.away { opacity: .2; }
body.lz-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
.lz-drag { position: absolute; left: 0; top: 0; width: 58px; height: 42px; z-index: 2; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .28)); }
/* While Sammy is carried, every place Sammy can hide shows a faint outline, and the one under Sammy a bright one */
.lz-can { outline: 1.5px dashed color-mix(in srgb, #4FAF3C 55%, transparent); outline-offset: 2px; }
.lz-target { outline: 2px dashed #4FAF3C; outline-offset: 3px; }
/* Sammy scurries in (and across the screen of the one who hid Sammy, once Sammy's found) */
.lz-run { position: absolute; left: 0; top: 0; width: 58px; height: 42px; z-index: 3; pointer-events: none; }
.lz-run .lz-svg { animation: lzWiggle .3s ease-in-out infinite alternate; }
.lz-run .sammy .sf0, .lz-drag .sammy .sf0 { opacity: 0; }
.lz-run .sammy .sf1, .lz-drag .sammy .sf1 { opacity: 1; }
.lz-run .sammy .sf2, .lz-drag .sammy .sf2 { opacity: 1; animation: lzSwap .24s linear infinite; }
@keyframes lzWiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
/* Found: "You found Sammy!" pops up, letter by letter (each letter's delay is set in app.js), while Sammy dances */
.lz-cheer { position: absolute; left: 5%; right: 5%; top: 20%; display: grid; justify-items: center; gap: 8px; text-align: center; isolation: isolate; transition: opacity .6s, transform .6s; }
.lz-cheer::before { content: ''; position: absolute; inset: -40px -14px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--sheet) 94%, transparent) 55%, color-mix(in srgb, var(--sheet) 55%, transparent) 78%, transparent); }
.lz-cheer strong { font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1.05; color: var(--lz-ink); text-shadow: 0 0 18px color-mix(in srgb, var(--lz-ink) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent); }
.lz-cheer strong i { display: inline-block; font-style: italic; white-space: pre; animation: cheerPop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.lz-cheer span { font-weight: 800; font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--sheet) 82%, transparent); padding: 4px 12px; border-radius: 999px; animation: cheerSub .5s ease .75s both; }
.lz-cheer.out { opacity: 0; transform: translateY(-14px); }
@keyframes cheerPop { from { opacity: 0; transform: translateY(18px) scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes cheerSub { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lz-dance { position: absolute; left: 0; top: 0; width: 58px; height: 42px; z-index: 3; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .22)); }
/* The dance: the happy pose swapping with a step, and a wiggle */
.lz-dance .sammy { animation: lzBob .3s ease-in-out infinite alternate; }
.lz-dance .sammy .sf0 { opacity: 0; }
.lz-dance .sammy .sf2 { opacity: 1; }
.lz-dance .sammy .sf3 { opacity: 1; animation: lzSwap .5s linear infinite; }
@keyframes lzSwap { 0%, 59.9% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes lzBob { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
/* Morel steps aside while Sammy is being hidden */
.mlayer.hush { opacity: 0; }
.mlayer.hush .tour { pointer-events: none; }

/* ---------- The Wishing Garden (D11, D13): your sky above, your painted garden below (from the prototype, Versions 11 to 13) ---------- */
.garden { border-radius: 22px; overflow: hidden; box-shadow: 0 12px 24px -16px var(--shadow); background: #0E1222; } /* the night sky, behind the dips in the hills */
.garden .starfield { height: 150px; border-radius: 0; box-shadow: none; }
.garden .sky-month { bottom: 20px; }
/* The meadow: clear above its hills, so they rise against your sky */
.ground { position: relative; height: 190px; }
.ground::before { content: ''; position: absolute; left: 0; right: 0; top: -13px; bottom: 0; background: url(/art/backdrop.webp) 50% 0 / cover no-repeat; pointer-events: none; }
.gi, .dandelion, .g-bud { position: absolute; border: 0; padding: 0; background: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gi { transform: translateX(-50%) scale(var(--g, 1)); transform-origin: 50% 100%; transition: filter .3s; }
/* A painting and what lies on it (a glow, the frames it swaps between), kept to the painting's own shape */
.ga { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); }
.ga > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gi[aria-pressed="true"] { filter: drop-shadow(0 0 6px rgba(244, 241, 224, .8)); }
.gi.sprout { animation: sprout 1.1s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes sprout { from { transform: translateX(-50%) scale(0); opacity: 0; } 50% { opacity: 1; } to { transform: translateX(-50%) scale(var(--g, 1)); } }
.gi.fading { opacity: .62; filter: saturate(.55); } /* its last few days: going to seed, or about to move on */
/* The garden is alive: trees and flowers sway from the root, lamps flicker, the pond shimmers, glowcaps pulse,
   the moon gate's light breathes, and creatures breathe and blink. Calmer magic and reduced motion still it. */
.sway { transform-origin: 50% 100%; animation: sway 4.6s ease-in-out infinite alternate; }
.sway--slow { animation-duration: 7.5s; }
@keyframes sway { from { rotate: -1.3deg; } to { rotate: 1.3deg; } }
.breathe { transform-origin: 50% 100%; animation: breathe 3.8s ease-in-out infinite; }
@keyframes breathe { 50% { scale: 1 1.025; } }
.flicker { mix-blend-mode: screen; animation: flicker 3.1s linear infinite; }
@keyframes flicker { 0%, 100% { opacity: .9; } 8% { opacity: .6; } 12% { opacity: .95; } 33% { opacity: .76; } 37% { opacity: 1; } 61% { opacity: .68; } 66% { opacity: .92; } 84% { opacity: .8; } }
.shimmer { mix-blend-mode: screen; animation: shimmer 5.5s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: .35; translate: -1px 0; } 50% { opacity: .95; translate: 1px 0; } }
.pulse { mix-blend-mode: screen; animation: pulse 4.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.ground:not(.night) .flicker, .ground:not(.night) .pulse { opacity: .28; animation: none; } /* by day the lamps and glowcaps rest */
.gate-light { position: absolute; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 255, 244, .3), rgba(127, 224, 208, .1) 62%, transparent); mix-blend-mode: screen; animation: moonbreath 6s ease-in-out infinite; pointer-events: none; }
@keyframes moonbreath { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
.ground:not(.night) .gate-light { opacity: .15; animation: none; }
/* The owl blinks at night (and sleeps all day) */
.blink { opacity: 0; animation: blink 6.2s linear infinite; }
@keyframes blink { 0%, 93.9% { opacity: 0; } 94%, 96.4% { opacity: 1; } 96.5%, 100% { opacity: 0; } }
/* Morel, the garden's mushroom keeper: four painted frames swapped in place, and a lantern that flickers */
.morel { position: absolute; border: 0; padding: 0; background: none; line-height: 0; transform: translateX(-50%); -webkit-tap-highlight-color: transparent; }
.morel-fig { position: relative; display: block; }
.morel-fig img { display: block; width: 100%; height: auto; }
.morel-fig img + img { position: absolute; inset: 0; height: 100%; opacity: 0; }
.morel-fig .mf-blink { animation: blink 5.3s linear infinite; }
.morel.talking .mf-talk { animation: mTalk .34s linear 5; }
@keyframes mTalk { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
.morel.waving .mf-wave { animation: mWave 1.1s linear infinite; }
@keyframes mWave { 0%, 54.9% { opacity: 1; } 55%, 100% { opacity: 0; } }
.morel-fig img.m-lamp { inset: auto; left: 39%; top: 68%; width: 46%; height: auto; translate: -50% -50%; mix-blend-mode: screen; opacity: .85; animation: flicker 2.7s linear infinite; pointer-events: none; }
.morel.hop { animation: mHop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mHop { 40% { transform: translateX(-50%) translateY(-7px); } }
.morel-shop { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.morel-shop .sheet-title { text-align: left; }
.morel-shop .wish-have { text-align: left; }
@keyframes sayIn { from { opacity: 0; transform: translateX(-8px) scale(.94); } to { opacity: 1; transform: none; } }
/* In the garden, a tap on Morel gets a bubble above him */
.g-say { position: absolute; right: 3%; bottom: 31%; z-index: 12; max-width: 72%; padding: 9px 12px; border-radius: 16px 16px 6px 16px; background: var(--card); color: var(--ink);
  font-size: 13.5px; font-weight: 700; line-height: 1.35; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); pointer-events: none; animation: sayIn .3s ease-out both; }
.g-say::after { content: ''; position: absolute; right: 34px; bottom: -6px; width: 12px; height: 12px; background: var(--card); transform: rotate(45deg); }
.g-say.bye { opacity: 0; transition: opacity .4s; }
.ground.coach-on { outline-offset: -5px; border-radius: 0; }
/* ---------- Growing older, and dressing up (D13) ---------- */
/* Grown and wise creatures (their paintings show their age), and a grown pair of hedgehogs */
.ga.aged { width: 82%; margin-inline: auto; }
.gi[data-g="frog"] .ga.aged { width: 64%; }
.hh-pair > img { inset: auto; bottom: 0; width: 58%; height: auto; }
.hh-pair > img:nth-child(1) { left: 0; }
.hh-pair > img:nth-child(2) { right: 0; transform: scaleX(-1); }
.ga > img.hh-baby { inset: auto; right: -16%; bottom: 0; width: 30%; height: auto; }
.hh-pair > img.hh-baby { right: -26%; width: 46%; }
.acc { position: absolute; transform: translate(-50%, -50%); pointer-events: none; line-height: 0; z-index: 2; }
.acc img { display: block; width: 100%; height: auto; }
/* By day: the hedgehogs asleep, curled up (art/ARTWORK-INVENTORY.md), and Sammy on the lookout on top of the rock */
.hh-curled > img { width: 48%; }
.hh-curled > img:nth-child(1) { left: 2%; }
.hh-curled > img:nth-child(2) { right: 2%; }
.hh-curled > img.hh-baby { right: -16%; width: 26%; }
.ga > img.sammy-up { inset: auto; left: 14%; bottom: 46%; width: 70%; height: auto; }
/* With the charm, a grown owl, frog or snail has a little one beside it (the snail's follows behind) */
.ga > img.kid { left: 62%; }
.gi[data-g="snail"] .ga > img.kid { left: -58%; }
/* The apple tree in blossom stands on the ground of its place */
.ga > img.on-ground { object-position: 50% 100%; }
/* The owl's turn about the garden */
.owl-fly { position: absolute; left: 0; top: 0; width: 60px; z-index: 12; pointer-events: none; }
.owl-fly img { display: block; width: 100%; height: auto; }
.gi.away { opacity: 0; transition: opacity .3s; }
.dress { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.dress button { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dress button[aria-pressed="true"] { border-color: var(--lz-ink); box-shadow: 0 0 0 1.5px var(--lz-ink); }
.dress .acc-art { width: 46px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#22402F, #132820); }
.dress .acc-art img { width: 36px; height: 30px; object-fit: contain; }
.wish-sec { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
/* At night the snail wanders the meadow, out to the right and back, turning round and inching along. Its place
   comes from the clock (--crawl-at), so a redraw (a tap, the other phone) carries on where it was. It slides with
   translate, measured in the ground's width (cqw), not left/bottom: those snap to whole pixels, and at a snail's pace
   (about a pixel a second) that read as ticking across the screen. */
.ground { container-type: inline-size; }
.g-crawl { animation: crawl 600s linear infinite; animation-delay: var(--crawl-at, 0s); will-change: translate; }
@keyframes crawl { 0% { translate: -29cqw -2px; } 12% { translate: -17cqw -6px; } 25% { translate: -3cqw -3px; } 37% { translate: 11cqw -7px; }
  50% { translate: 27cqw -2px; } 62% { translate: 14cqw -8px; } 75% { translate: -1cqw -4px; } 87% { translate: -16cqw -7px; } 100% { translate: -29cqw -2px; } }
.g-crawl > .ga { animation: snailface 600s step-end infinite; animation-delay: var(--crawl-at, 0s); }
@keyframes snailface { 0% { transform: none; } 50% { transform: scaleX(-1); } }
.g-crawl > .ga > img:first-child { transform-origin: 30% 100%; animation: inch 5s ease-in-out infinite; }
@keyframes inch { 50% { transform: scaleX(1.025) scaleY(.985); } }
[data-calm="1"] .g-crawl > .ga > img:first-child { animation: none; }
/* A family of fireflies, painted, drifting about the garden: faint by day, bright at night */
.g-flies { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.g-flies i { position: absolute; width: 16px; opacity: .3; animation: flyabout 9s ease-in-out infinite alternate; }
.g-flies i img { display: block; width: 100%; height: auto; animation: flyBlink 2.6s ease-in-out infinite; }
.g-flies i:nth-child(2n) img { animation-delay: -1.3s; } .g-flies i:nth-child(3n) img { animation-duration: 3.4s; }
.g-flies.night i { opacity: 1; }
.g-flies i:nth-child(1) { left: 12%; top: 30%; } .g-flies i:nth-child(2) { left: 30%; top: 55%; animation-delay: -2s; } .g-flies i:nth-child(3) { left: 46%; top: 22%; animation-delay: -4s; }
.g-flies i:nth-child(4) { left: 61%; top: 48%; animation-delay: -6s; } .g-flies i:nth-child(5) { left: 74%; top: 26%; animation-delay: -1s; } .g-flies i:nth-child(6) { left: 86%; top: 52%; animation-delay: -3s; } .g-flies i:nth-child(7) { left: 22%; top: 72%; animation-delay: -5s; }
@keyframes flyabout { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, -12px); } 100% { transform: translate(-10px, 8px); } }
/* Each reminder between you is a bud: it droops while it's late, opens when it's done, and glows gold with thanks */
.g-bud { bottom: 1%; width: 4.4%; z-index: 6; transform: translateX(-50%); } /* behind the creatures, so a bud never takes a tap meant for one */
.g-bud img { display: block; width: 100%; height: auto; }
.g-bud.open { width: 5.6%; }
.g-bud.gold img { animation: goldGlow 2.6s ease-in-out infinite; }
@keyframes goldGlow { 50% { filter: drop-shadow(0 0 5px rgba(255, 217, 138, .95)); } }
/* The wish dandelion: its ten seeds fill in as you two do things for each other, and blow away with a wish */
.dandelion { transform: translateX(-50%); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .65s; }
.dl-plant { display: block; width: 100%; height: auto; }
.dl-head { position: absolute; left: 49.6%; top: 11.1%; width: 33%; height: 0; }
.seed { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 18.1% 99%; transform: translate(-18.1%, -99%) rotate(var(--r)); opacity: .16; transition: opacity .6s; }
.seed img { display: block; width: 100%; height: auto; }
.seed.on { opacity: 1; }
.dandelion.blow .seed img { animation: seedfly 1.5s ease-out both; animation-delay: calc(var(--i) * 50ms); }
@keyframes seedfly { to { transform: translate(150%, -320%) rotate(30deg); opacity: 0; } }
/* Ready, it's the painted full puffball; blown, the bare head shows again while its seeds fly */
.dl-full { position: absolute; left: 0; bottom: 0; width: 106.8%; height: auto; }
.dandelion.is-ready .dl-plant, .dandelion.is-ready .dl-head { visibility: hidden; }
.dandelion.blow .dl-plant, .dandelion.blow .dl-head { visibility: visible; }
.dandelion.blow .dl-full, .dandelion.blow .dl-glow { opacity: 0; transition: opacity .25s; }
.dl-glow { position: absolute; left: 47%; top: 18%; width: 110%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 224, .45), transparent); pointer-events: none; animation: pulse 2.8s ease-in-out infinite; }
.dandelion.is-ready { animation: wishGlow 2.8s ease-in-out infinite; }
.dandelion.charging { animation: none; transform: translateX(-50%) scale(1.1); filter: drop-shadow(0 0 10px rgba(244, 241, 224, 1)); }
@keyframes wishGlow { 50% { filter: drop-shadow(0 0 9px rgba(244, 241, 224, .95)); } }
.btn--wish { justify-self: center; border: 0; border-radius: 999px; padding: 9px 20px; font-weight: 800; font-size: 14.5px; background: var(--lz-ink); color: var(--card); box-shadow: 0 0 16px color-mix(in srgb, var(--lz-ink) 45%, transparent); margin-top: -4px; }
.puffs { display: inline-flex; gap: 4px; vertical-align: middle; }
.puff { width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--lz-ink); }
.puff.on { background: var(--lz-ink); box-shadow: 0 0 6px color-mix(in srgb, var(--lz-ink) 60%, transparent); }
.wish-have { font-size: 13.5px; color: var(--muted); line-height: 1.4; text-align: center; }
.wish-offers { display: grid; gap: 10px; }
.offer { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.offer-art { width: 64px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(#22402F, #132820); }
.offer-art > svg { width: 52px; max-height: 48px; }
.offer-art > img { width: 46px; height: 42px; object-fit: contain; }
.offer-art .ga { width: auto; height: 50px; max-width: 60px; }
.offer b { display: block; font-size: 15px; line-height: 1.2; }
.offer small { display: block; margin: 2px 0 5px; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.offer .saving { font-size: 12px; font-weight: 800; color: var(--lz-ink); }
/* The real app's own: Morel stays out of sight while he gives the garden's tour, the line and buttons under the garden,
   and a dot on the Us tab while a wish is ready */
.morel.g-away { visibility: hidden; }
/* back home after his tour, he fades in as the touring Morel fades out where he stands */
.morel.g-back { animation: gBack .3s ease-out; }
@keyframes gBack { from { opacity: 0; } }
.garden-cap { display: grid; gap: 8px; justify-items: center; margin-top: -4px; }
.garden-cap .sky-cap { margin-top: 0; }
.g-more { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.g-more .us-more { justify-self: auto; }
.tabbar [data-tab="us"].has-wish::after { content: ''; position: absolute; top: 2px; left: calc(50% + 9px); width: 8px; height: 8px; border-radius: 50%; background: var(--lz-ink); box-shadow: 0 0 8px var(--lz-ink); }
.wish-sheet .wish-sec { margin-bottom: -8px; }
@media (prefers-reduced-motion: reduce) { .sway, .breathe, .flicker, .shimmer, .pulse, .g-crawl, .g-flies i, .dandelion.is-ready { animation: none; } }