/* ==========================================================================
   Rhythm Garden — shared design system
   "A garden that remembers work, not a wallet."
   --------------------------------------------------------------------------
   One locked token system for the whole Prelude flavor set. Screens compose
   from these tokens + the canonical partials in _kit.html; no screen inlines
   a raw oklch()/hex or a bare font-family. Growth always maps 1:1 to a real
   musical event (a piece practised, a spot smoothed, minutes spent) — never a
   grade, never currency. A quiet day is dormant soil, never a punished one.
   Display: Quicksand (roman). Body: Nunito Sans.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,600;1,6..12,700&family=Quicksand:wght@500;600;700&display=swap");

:root{
  /* --- paper & ink ------------------------------------------------------ */
  --paper:oklch(96.5% .022 130);
  --surface:oklch(98.5% .014 130);
  --surface-2:oklch(97% .018 120);
  --ink:oklch(32% .04 142);
  --ink-soft:oklch(50% .035 143);
  --ink-faint:oklch(64% .03 135);
  --line:oklch(89% .025 122);
  --line-soft:oklch(93% .018 126);

  /* --- garden greens ---------------------------------------------------- */
  --leaf:oklch(58% .13 145);
  --leaf-deep:oklch(45% .11 147);
  --leaf-2:oklch(68% .1 130);
  --leaf-2-deep:oklch(54% .09 130);
  --leaf-pale:oklch(90% .05 138);

  /* --- bloom (warm flower) --------------------------------------------- */
  --bloom:oklch(78% .09 20);
  --bloom-deep:oklch(60% .12 22);
  --bloom-pale:oklch(92% .045 22);

  /* --- sun / sunbeam ---------------------------------------------------- */
  --sun:oklch(85% .1 90);
  --sun-deep:oklch(70% .12 82);

  /* --- soil & clay ------------------------------------------------------ */
  --soil:oklch(88% .025 88);
  --soil-line:oklch(79% .03 85);
  --soil-deep:oklch(66% .04 82);
  --clay:oklch(74% .07 55);
  --clay-deep:oklch(56% .08 48);

  /* --- water (the watering-can rewards) -------------------------------- */
  --water:oklch(76% .08 225);
  --water-deep:oklch(58% .11 235);
  --water-pale:oklch(92% .04 225);

  --on-leaf:oklch(98% .012 145);

  /* --- spacing (4pt) ---------------------------------------------------- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;--s10:40px;

  /* --- radius ----------------------------------------------------------- */
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:28px;--r-2xl:34px;--r-pill:999px;

  /* --- motion ----------------------------------------------------------- */
  --ease-grow:cubic-bezier(.18,.95,.32,1.06);
  --ease-sway:cubic-bezier(.45,0,.55,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-1:.4s;--dur-2:.6s;

  --font-display:"Quicksand",ui-rounded,"Nunito Sans",system-ui,sans-serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,sans-serif;

  --shadow-sm:0 1px 2px oklch(30% .04 140/.06),0 10px 26px oklch(30% .04 140/.08);
  --shadow:0 1px 2px oklch(40% .04 145/.08),0 12px 28px oklch(40% .04 145/.1);
  --shadow-soft:0 1px 1px oklch(40% .04 145/.06),0 4px 12px oklch(40% .04 145/.08);
}

*{box-sizing:border-box}
html,body{overflow-x:clip;margin:0;height:100%}
body{
  font-family:var(--font-body);color:var(--ink);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 72%,oklch(93% .035 100) 100%);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-style:normal;font-family:var(--font-display);margin:0}

/* --- portrait screen shell ---------------------------------------------- */
.screen{width:100%;max-width:100vw;height:100%;min-height:100dvh;display:flex;flex-direction:column;
  position:relative;overflow-x:clip}

.status{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 24px 4px;
  font-family:var(--font-body);font-weight:800;font-size:14px;color:var(--ink)}
.status .r{display:flex;gap:7px;align-items:center;color:var(--ink)}

.content{flex:1;overflow-y:auto;overflow-x:clip;padding:var(--s2) 22px 100px;min-width:0}
.content.flush{padding-bottom:34px} /* no tab bar (onboarding / sub-pages) */

/* --- headings & header row ---------------------------------------------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-top:var(--s2)}
.head .k{font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--ink-faint);letter-spacing:.02em}
h1{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1;letter-spacing:.01em;
  color:var(--ink);overflow-wrap:anywhere;min-width:0}
h2.block-title{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink)}

/* the hand-drawn vine divider (see _kit.html for the <svg>) */
.divider{display:block;width:100%;height:14px;margin:6px 0 var(--s4);color:var(--leaf-2);opacity:.55}

/* --- generic block ------------------------------------------------------ */
.block{margin-top:var(--s6)}
.block .bh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s3);gap:var(--s2)}
.block .bh h2{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink)}
.block .bh .m{font-size:11.5px;color:var(--ink-faint);white-space:nowrap}

/* --- cards -------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card.pad{padding:var(--s4)}
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 130% at 90% -10%, oklch(78% .09 20/.16), transparent 58%),
    radial-gradient(90% 120% at -10% 110%, oklch(68% .1 130/.16), transparent 55%),
    linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);
  padding:var(--s6) var(--s6) var(--s5)}

/* --- buttons ------------------------------------------------------------ */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:var(--font-display);font-weight:600;font-size:17px;padding:15px 18px;border-radius:var(--r-md);
  border:none;cursor:pointer;transition:transform var(--dur-1) var(--ease-grow),filter var(--dur-1) var(--ease-soft)}
.btn svg{flex:0 0 auto}
.btn-leaf{background:var(--leaf);color:var(--on-leaf);box-shadow:0 8px 20px oklch(58% .13 145/.38)}
.btn-leaf:hover{filter:brightness(1.04)}
.btn-leaf:active{transform:translateY(2px) scale(.99)}
.btn-leaf:disabled{opacity:.5;box-shadow:none;cursor:default}
.btn-soft{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.btn-soft:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--leaf-deep);border:none;font-weight:700}
.btn-inline{background:none;border:none;color:var(--leaf-deep);font-family:var(--font-body);font-weight:700;
  font-size:15px;cursor:pointer;padding:6px 4px}
.btn-danger{background:var(--paper);color:var(--bloom-deep);border:1.5px solid oklch(60% .12 22/.4)}

/* icon button (top-right chrome affordances) */
.iconbtn{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-soft);box-shadow:var(--shadow-soft);cursor:pointer;flex:0 0 auto}
.iconbtn:active{transform:scale(.94)}

/* --- fields ------------------------------------------------------------- */
.field-label{display:block;font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:.03em;
  color:var(--ink-faint);text-transform:uppercase;margin-bottom:var(--s2)}
.field{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:14px 16px;font-size:17px;color:var(--ink);min-height:52px}
.field.big{font-family:var(--font-display);font-weight:600;font-size:22px}
.field .cursor{width:2px;height:22px;background:var(--leaf);border-radius:1px;animation:blink 1.1s steps(2) infinite}
.field .mono{font-family:"Nunito Sans",ui-monospace,monospace;letter-spacing:.04em}

/* --- chips & badges ----------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:700;font-size:12px;
  color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}
.chip svg{flex:0 0 auto}
.badge-leaf{display:inline-flex;align-items:center;gap:6px;background:oklch(58% .13 145/.13);color:var(--leaf-deep);
  font-weight:800;font-size:11px;letter-spacing:.03em;border-radius:var(--r-pill);padding:5px 12px;text-transform:uppercase}
.badge-bloom{display:inline-flex;align-items:center;gap:6px;background:oklch(78% .09 20/.2);color:var(--bloom-deep);
  font-weight:800;font-size:11px;letter-spacing:.03em;border-radius:var(--r-pill);padding:5px 12px}
.badge-sun{display:inline-flex;align-items:center;gap:6px;background:oklch(85% .1 90/.4);color:var(--sun-deep);
  border:1px solid oklch(78% .1 88/.5);font-weight:800;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:4px 10px 4px 8px}

/* --- avatar ------------------------------------------------------------- */
.avatar{border-radius:var(--r-pill);display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(150deg,var(--leaf-2),var(--leaf-deep));color:var(--on-leaf);
  font-family:var(--font-display);font-weight:700}
.avatar.sm{width:34px;height:34px;font-size:14px}
.avatar.md{width:46px;height:46px;font-size:18px}
.avatar.lg{width:64px;height:64px;font-size:24px}
.avatar.xl{width:96px;height:96px;font-size:36px}
.avatar.sun{background:radial-gradient(60% 60% at 42% 34%,oklch(92% .07 92),var(--sun) 55%,var(--bloom) 100%)}

/* --- reassurance / anti-fail-state copy --------------------------------- */
.reassure{margin:var(--s6) 4px 0;font-family:var(--font-body);font-style:italic;font-weight:700;
  font-size:15px;color:var(--ink-soft);line-height:1.4;text-align:center}
.lead{font-family:var(--font-body);font-style:italic;font-weight:700;font-size:19px;color:var(--ink);line-height:1.2;margin:0}
.sub{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0}

/* --- tab bar (Today · Pieces · Rhythm · Family) ------------------------- */
.tabs{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  padding:9px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
  background:oklch(97.5% .018 128/.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);z-index:5}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-faint);
  font-size:10.5px;font-weight:800;text-decoration:none;flex:1;border-radius:var(--r-md)}
.tab-ic{width:34px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill)}
.tab.on{color:var(--leaf-deep)}
.tab.on .tab-ic{background:oklch(58% .13 145/.14)}
.tab svg{width:21px;height:21px}

/* --- garden art helpers (shared plant vocabulary) ----------------------- */
.plant .soil{fill:var(--soil);stroke:var(--soil-line);stroke-width:1}
.plant .stem{fill:none;stroke:var(--leaf-deep);stroke-width:3;stroke-linecap:round}
.plant .leaf{fill:var(--leaf)}
.plant .leaf.leaf-b{fill:var(--leaf-2)}
.plant .petal{fill:var(--bloom)}
.plant .bloom-center{fill:var(--sun-deep)}
.plant .bud{fill:var(--bloom)}
.stem-final{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--grow,1))}
.stem-grow{transform-box:fill-box;transform-origin:50% 100%;animation:growUp .85s var(--ease-grow) both;animation-delay:var(--delay,0ms)}
.leaf-grow{transform-box:fill-box;transform-origin:50% 100%;animation:growUp .6s var(--ease-grow) both}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.6s var(--ease-sway) infinite}

/* --- links, focus ------------------------------------------------------- */
a{color:inherit}
:focus-visible{outline:3px solid var(--leaf-deep);outline-offset:2px}

/* --- keyframes ---------------------------------------------------------- */
@keyframes growUp{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pulseGlow{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.75}}
@keyframes blink{50%{opacity:0}}
@keyframes drip{0%{transform:translateY(-4px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
  .stem-grow,.leaf-grow{opacity:1!important;transform:none!important}
}