/* ============================================================================
   ZAHRA DESIGN SYSTEM
   One stylesheet, shared by every page. Design tokens + reusable component
   classes (.z-*). Mobile-first, feather-light (no web fonts, no framework),
   built to work on a cheap Android over 3G. Component classes map 1:1 to the
   template partials in web/templates/web/components/ — and to the message
   blocks we'll send over WhatsApp later.
   ========================================================================== */

:root{
  /* ZAHRA v3 — burgundy + lilac on TRUE WHITE. See docs/Zahra_v3_UX_Spec.docx.
     Two colour laws: (1) burgundy = action & emphasis, lilac = ambience & grouping,
     white = space — lilac is NEVER a button or body text; (2) one burgundy primary
     action per screen. Green/amber/red are FUNCTIONAL ONLY. */
  --bg:#ffffff; --surface:#f7f3fb; --cream:#fbf9fd; --paper:#ffffff; --ink:#4a152f; --muted:#6e6470;
  --line:#e9e1ef; --line-soft:#f2ecf6;
  --primary:#5b1a3a; --primary-press:#43122b;            /* burgundy buttons / solid fills */
  --accent:#7e4b8e; --accent-2:#6c3d7a; --accent-soft:#efe7f6;  /* orchid links/badges + lilac tint */
  --plum:#6c3d7a; --plum-soft:#efe7f6;                   /* legacy alias → orchid */
  --gold:#8a6a3f; --amber:#a85f1a; --gold-soft:#f3ece0;  /* warm-neutral notes only */
  --sage:#2c7a52; --sage-soft:#e7f1ea;          /* good / safe / research-backed */
  --warn:#a85f1a; --warn-soft:#f7eede; --warn-line:#ead8bf;  /* caution / skip */
  --block:#b23a2a; --block-soft:#f6e2dd;          /* unsafe / hard-block */
  --sunrise:#7e4b8e;            /* journey-meter fill (lilac/orchid family) */
  --glow:#ffffff;
  /* type */
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* shape & depth — one radius scale, one elevation */
  --r-sm:10px; --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(30,17,22,.04),0 8px 28px rgba(30,17,22,.06);
  --shadow-lg:0 24px 70px rgba(30,17,22,.18);
  --maxw:760px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* in-app "Reduce motion" toggle (Settings) — mirrors the OS media query */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
/* My Routine — Morning/Evening segment (glanceable, no scroll-to-switch) */
.rt-seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:16px 0 14px;background:var(--surface)}
.rt-seg button{border:0;background:transparent;font:600 14px/1 var(--sans);color:var(--muted);padding:10px 20px;cursor:pointer;transition:background .16s,color .16s}
.rt-seg button.on{background:var(--primary);color:#fff}
.rt-panel{animation:z-fadeup .2s ease both}
/* My Profile — editable field cards */
.pf-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px}
.pf-card .k{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-card .v{font-size:15px;color:var(--ink);margin-top:4px}
.pf-edit{flex:none;background:none;border:0;cursor:pointer;color:var(--accent-2);font:600 13px/1 var(--sans);display:flex;align-items:center;gap:5px}
.pf-edit:hover{text-decoration:underline}
/* Skin Journal — diary timeline */
.jt{position:relative;margin:18px 0 0;padding-left:22px}
.jt::before{content:"";position:absolute;left:6px;top:4px;bottom:8px;width:2px;background:var(--line)}
.jt-entry{position:relative;padding:0 0 16px}
.jt-entry::before{content:"";position:absolute;left:-22px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--primary);border:2px solid var(--bg)}
.jt-date{font:600 12px/1 var(--sans);color:var(--muted)}
.jt-body{font-size:14.5px;color:var(--ink);margin-top:3px;line-height:1.45}
/* Shelf group header */
.shelf-group{font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin:18px 2px 8px}
/* empty-state spot art */
.z-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.z-empty-art{width:104px;height:104px;margin-bottom:8px;opacity:.92}
/* My Skin section-nav — navigation row between the four decoupled screens */
.skin-nav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;padding-bottom:2px}
.skin-nav a{flex:none;font:600 13px/1 var(--sans);color:var(--muted);text-decoration:none;padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:var(--surface);white-space:nowrap}
.skin-nav a.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.skin-nav a:hover{color:var(--ink)}.skin-nav a.on:hover{color:#fff}
/* one global focus ring (accessibility) */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}

/* ── Premium polish system (motion + loading) ───────────────────────── */
@keyframes z-fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes z-pop{0%{transform:scale(.96);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
@keyframes z-spin{to{transform:rotate(360deg)}}
@keyframes z-shimmer{to{background-position:-200% 0}}
.z-fadeup{animation:z-fadeup .24s ease both}
.z-pop{animation:z-pop .2s ease both}
.z-btn,.z-chip,.card,.z-tile{transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.z-btn:active{transform:scale(.97)}
.z-btn.primary:hover{box-shadow:0 4px 14px rgba(91,26,58,.18);transform:translateY(-1px)}
/* button working state: <button class="z-btn primary is-busy"> with data-busy label */
.z-btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.z-btn.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:z-spin .7s linear infinite}
.z-btn.ghost.is-busy::after{border-color:var(--accent-2);border-top-color:transparent}
/* skeleton shimmer */
.z-skel{background:linear-gradient(90deg,var(--surface) 25%,var(--line) 37%,var(--surface) 63%);background-size:200% 100%;animation:z-shimmer 1.3s linear infinite;border-radius:10px;height:14px;margin:8px 0}
/* "Updated" pill */
.z-updated{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--sans);color:var(--accent-2);background:var(--accent-soft);padding:5px 10px;border-radius:99px;animation:z-pop .22s ease both}

/* ── Account control (Claude-style, pinned bottom-left) ─────────────── */
.z-acct-wrap{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);position:relative}
.z-acct-feedback{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;color:var(--muted);font:500 13px/1 var(--sans);padding:9px 8px;border-radius:8px;text-decoration:none}
.z-acct-feedback:hover{background:var(--surface);color:var(--ink)}
.z-acct-feedback svg{width:17px;height:17px;flex:none}
.z-acct-chip{display:flex;align-items:center;gap:10px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:8px 10px;text-align:left}
.z-acct-chip:hover{background:var(--cream)}
.z-acct-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font:600 12px/30px var(--sans);text-align:center}
.z-acct-id{flex:1;min-width:0}
.z-acct-id b{display:block;font:600 13.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-acct-id span{font-size:11.5px;color:var(--muted)}
.z-acct-chev{flex:none;color:var(--muted)}
.z-acct-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(36,16,36,.16);padding:8px;display:none}
.z-acct-menu.open{display:block;animation:z-fadeup .16s ease both}
.z-acct-menu .hd{padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.z-acct-menu .hd b{display:block;font:600 14px/1.2 var(--sans);color:var(--ink)}
.z-acct-menu .hd span{font-size:12px;color:var(--muted)}
.z-acct-menu a,.z-acct-menu button{display:flex;align-items:center;gap:10px;width:100%;text-decoration:none;color:var(--ink);font:500 13.5px/1 var(--sans);padding:9px 10px;border-radius:8px;border:0;background:none;cursor:pointer;text-align:left}
.z-acct-menu a:hover,.z-acct-menu button:hover{background:var(--surface)}
.z-acct-menu .sep{height:1px;background:var(--line-soft);margin:6px 4px}
.z-acct-menu svg{width:16px;height:16px;flex:none;color:var(--muted)}

/* ── Inline Zahra bubble (every page except Talk) ──────────────────── */
.z-bubble-fab{position:fixed;right:18px;bottom:78px;z-index:60;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--primary);color:#fff;box-shadow:0 8px 24px rgba(91,26,58,.28);display:flex;align-items:center;justify-content:center}
.z-bubble-fab:hover{transform:translateY(-2px)}
.z-bubble{position:fixed;right:18px;bottom:78px;z-index:61;width:min(340px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 48px rgba(36,16,36,.2);padding:14px;display:none}
.z-bubble.open{display:block;animation:z-fadeup .18s ease both}
.z-bubble .bx{position:absolute;top:8px;right:8px;background:none;border:0;cursor:pointer;color:var(--muted)}
.zb-head{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);color:var(--ink);padding:2px 0 10px;border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.zb-av{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font:600 11px/24px var(--sans);text-align:center}
.zb-body{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.zb-z{background:var(--surface);color:var(--ink);font-size:14px;line-height:1.5;padding:9px 12px;border-radius:12px;align-self:flex-start;max-width:90%}
.zb-u{background:var(--primary);color:#fff;font-size:14px;line-height:1.5;padding:9px 12px;border-radius:12px;align-self:flex-end;max-width:90%}
.zb-form{display:flex;gap:8px;align-items:center}
.zb-form .z-field{margin:0;flex:1}
.zb-form .z-btn{flex:none;padding:10px 12px}
@media(min-width:900px){.z-bubble-fab,.z-bubble{bottom:24px}}

*{box-sizing:border-box}
html,body{margin:0}
/* Global 80% scale — the whole UI (text + spacing) reads less full/dense. Tweak --ui-zoom to taste. */
:root{--ui-zoom:.8}
html{zoom:var(--ui-zoom)}
/* keep full-height sidebars filling the viewport under zoom (100vh would otherwise render at 80vh) */
.z-sidebar{height:calc(100vh / var(--ui-zoom))!important}
.sidebar{height:calc(100vh / var(--ui-zoom))!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);
  font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
a{color:var(--accent-2)}
/* A <button> that reads like an inline link — used for in-place "ask Zahra" (opens the bubble, never redirects). */
.z-linkbtn{background:none;border:none;color:var(--accent-2);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.z-linkbtn:hover{color:var(--ink)}
/* Mobile: inputs must be ≥16px or iOS zooms in on focus (jarring). */
@media(max-width:600px){input,textarea,select{font-size:16px!important}}
img{max-width:100%}
.z-wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.z-serif{font-family:var(--serif)}
.z-muted{color:var(--muted)}

/* ── Consistent top nav (every page; brand always returns home) ───────── */
.z-topnav{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;
  padding:11px 16px;margin:0 -16px 16px;background:rgba(255,253,251,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.z-topnav .brand{display:flex;align-items:center;gap:8px;font:700 16px/1 var(--serif);
  letter-spacing:-.2px;color:var(--ink);text-decoration:none}
.z-topnav .brand .z-mark{width:28px;height:28px;font-size:15px}
.z-topnav .links{margin-left:auto;display:flex;align-items:center;gap:15px;font-size:13.5px}
.z-topnav .links a{color:var(--muted);text-decoration:none}
.z-topnav .links a:hover{color:var(--ink)}
@media(max-width:560px){.z-topnav .links{gap:11px;font-size:12.5px}.z-topnav .links .hide-sm{display:none}}

/* ── App header ───────────────────────────────────────────────────────── */
.z-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:11px;
  padding:11px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
/* the bloom mark IS the avatar everywhere (no more "Z"): bloom.svg as background, text hidden */
.z-mark{width:34px;height:34px;border-radius:50%;background:var(--accent-soft) url("bloom.9164537be692.svg") center/58% no-repeat;
  color:transparent;font-size:0;flex:none;border:1px solid var(--line)}
.z-header .name{font-weight:600;font-size:15px;line-height:1.1}
.z-header .sub{font-size:12px;color:var(--muted)}
.z-beta{margin-left:auto;font:700 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border-radius:999px;padding:5px 9px}

/* ── Headings ─────────────────────────────────────────────────────────── */
.z-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);font-weight:700}
.z-h1{font:600 24px/1.25 var(--serif);margin:6px 0 0;letter-spacing:.2px}
.z-h2{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.z-section{display:flex;align-items:center;gap:9px;margin:24px 0 10px}
.z-section .ln{flex:1;height:1px;background:var(--line)}
.z-section .ic{font-size:17px}

/* ── Card / Tile ──────────────────────────────────────────────────────── */
.z-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
.z-tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:11px}
.z-tile.hero{border-color:var(--accent-soft);box-shadow:0 2px 4px rgba(91,26,58,.08),0 10px 30px rgba(91,26,58,.08)}
.z-tile h3{margin:0 0 4px;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.z-tile.hero h3{color:var(--accent-2)}

/* ── Step (within routine card) ──────────────────────────────────────── */
.z-step{padding:13px 16px}
.z-step+.z-step{border-top:1px solid var(--line-soft)}
.z-step .topline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.z-step .name{font:600 17px/1.25 var(--serif)}
.z-step .ingredient{color:var(--accent-2);font-weight:600;font-size:13.5px;margin-top:5px}
.z-step .why{color:var(--muted);font-size:14px;margin-top:4px}
.z-step .freq{color:var(--muted);font-size:12.5px;margin-top:5px}

/* ── Badges ───────────────────────────────────────────────────────────── */
.z-badge{font:700 10px/1 var(--sans);letter-spacing:.04em;border-radius:6px;padding:3px 6px;
  display:inline-flex;align-items:center;gap:3px;text-transform:uppercase;vertical-align:middle}
.z-badge.first{background:var(--accent);color:#fff}
.z-badge.research{background:var(--sage-soft);color:var(--sage);cursor:pointer;border:none}
.z-badge.mf{color:var(--accent-2);background:var(--accent-soft)}
/* the universal info affordance — opens the evidence drawer everywhere */
.z-info{appearance:none;border:none;background:none;cursor:pointer;color:var(--accent);
  font-size:13px;padding:0 2px;line-height:1;vertical-align:middle}
.z-info::before{content:"ⓘ"}

/* ── Product card (PRICES HIDDEN until the real catalog lands) ─────────── */
.z-product{display:block;background:var(--cream);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:10px 12px;text-decoration:none;color:inherit;margin-top:8px}
.z-product .pn{font-size:14px;font-weight:600}
.z-product .pn .brand{color:var(--muted);font-weight:400}
.z-product .meta{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.z-product .why{color:var(--muted);font-size:13px;margin-top:4px}
.z-product .buy{color:var(--muted);font-size:11.5px;margin-top:6px}

/* ── Chips ────────────────────────────────────────────────────────────── */
.z-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0}
.z-chip{background:var(--accent-soft);border:none;color:var(--accent-2);border-radius:999px;
  padding:8px 13px;font:500 13px/1.2 var(--sans);cursor:pointer;text-align:left}
.z-chip:active{background:#e3d5f0}
.z-chip.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.z-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:13px;padding:13px 16px;font:600 14.5px/1 var(--sans);
  cursor:pointer;text-decoration:none}
.z-btn.primary{background:var(--primary);color:#fff}
.z-btn.primary:active{background:var(--primary-press)}
.z-btn.ghost{background:var(--accent-soft);color:var(--accent-2)}
.z-btn.block{width:100%}
.z-btn:disabled{opacity:.5;cursor:default}
.z-btn-row{display:flex;gap:9px;flex-wrap:wrap}

/* ── Verdict (Product Check) ──────────────────────────────────────────── */
.z-verdict{border-radius:var(--r);padding:14px 16px;margin-top:12px;font-size:15px}
.z-verdict .v-head{font:600 16px/1.2 var(--serif);display:flex;align-items:center;gap:8px}
.z-verdict.good{background:var(--sage-soft);color:var(--sage)}
.z-verdict.fine{background:var(--gold-soft);color:#7a5a36}
.z-verdict.skip{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.z-verdict.unsafe{background:var(--block-soft);color:var(--block);border:1px solid var(--warn-line)}

/* ── Notes / disclaimers / escalation ─────────────────────────────────── */
.z-note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:12px 15px;font:italic 16px/1.6 var(--serif);color:var(--ink)}
.z-adjust{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 15px;color:var(--muted);font-size:13.5px}
.z-esc{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r);
  padding:13px 15px;color:var(--warn);font-size:14px;display:flex;gap:9px}
.z-disclaimer{color:var(--muted);font-size:11.5px;line-height:1.5}
.z-lock{color:var(--muted);font-size:11.5px;text-align:center;padding:6px 0}

/* ── Progress meter (fade journey / completeness) ─────────────────────── */
.z-meter{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin:8px 0}
.z-meter .track{flex:1;height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.z-meter .fill{height:100%;background:var(--sunrise);transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ── Rating (👍/👎) ───────────────────────────────────────────────────── */
.z-rate{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--muted);font-size:12.5px}
.z-rate button{appearance:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;
  width:34px;height:30px;font-size:15px;cursor:pointer}
.z-rate button.on{border-color:var(--accent);background:var(--accent-soft)}

/* ── Evidence drawer (bottom-sheet; same content as /learn entry) ─────── */
.z-drawer-scrim{position:fixed;inset:0;background:rgba(43,33,28,.38);opacity:0;
  pointer-events:none;transition:opacity .22s;z-index:40}
.z-drawer-scrim.open{opacity:1;pointer-events:auto}
.z-drawer{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--paper);
  border-radius:20px 20px 0 0;max-width:var(--maxw);margin:0 auto;max-height:86vh;overflow:auto;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  padding:8px 18px calc(20px + env(safe-area-inset-bottom))}
.z-drawer.open{transform:translateY(0)}
.z-drawer .handle{width:40px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 12px}
.z-drawer h4{font:600 20px/1.2 var(--serif);margin:0}
.z-drawer .grade{font:700 10px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;display:inline-block;margin-top:6px}
.z-drawer .grade.verified{background:var(--sage-soft);color:var(--sage)}
.z-drawer .grade.emerging{background:var(--gold-soft);color:#7a5a36}
.z-drawer .grade.traditional{background:var(--line-soft);color:var(--muted)}
.z-drawer .lbl{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 5px}
.z-drawer .src{background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13.5px;margin-top:7px}
.z-drawer .src .doi{color:var(--accent);font-size:12.5px}

/* ── Floating feedback button (bottom-left, every page; clear of header & send) ─ */
.z-fab-feedback{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:14px;z-index:30;
  border:none;cursor:pointer;background:var(--ink);color:#fff;border-radius:999px;
  font:600 12px/1 var(--sans);padding:10px 13px;display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(44,29,36,.28);opacity:.94}
.z-fab-feedback:active{opacity:1}

/* ── Toast ────────────────────────────────────────────────────────────── */
.z-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:#fff;padding:9px 15px;border-radius:999px;font-size:13px;z-index:60;
  opacity:0;pointer-events:none;transition:.25s}
.z-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Modal (beta shell, whatsapp, feedback, forget-me) ───────────────── */
.z-modal-scrim{position:fixed;inset:0;background:rgba(28,17,22,.5);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:.18s}
.z-modal-scrim.open{opacity:1;pointer-events:auto}
.z-modal{background:var(--paper);border-radius:22px;width:100%;max-width:430px;
  padding:26px 22px calc(24px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;
  box-shadow:0 24px 70px rgba(28,17,22,.32);transform:translateY(10px) scale(.985);transition:.2s}
.z-modal-scrim.open .z-modal{transform:none}
.z-field{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;
  background:var(--cream);margin:8px 0}
.z-field:focus{outline:none;border-color:var(--accent)}

/* ── Footnote footer (every content page) ─────────────────────────────── */
.z-footer{border-top:1px solid var(--line);margin-top:40px;background:#fff;
  padding:20px 16px calc(22px + env(safe-area-inset-bottom))}
.z-footer-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;font-size:12.5px}
.z-footer-in a{color:var(--muted);text-decoration:none}
.z-footer-in a:hover{color:var(--ink)}
.z-footer-c{color:var(--muted);font-size:11.5px;width:100%;margin-top:2px}


/* ── The Ritual: full-screen, calm, one step at a time (eyes on the mirror).
   Shared by the chat workspace and the /r/<token> share page. ─────────────── */
.ritual{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;flex-direction:column;padding:16px 18px}
body.ritual-open{overflow:hidden}
body.ritual-open .ritual{display:flex}
.ritual-top{display:flex;align-items:center;gap:9px;flex:none}
.ritual-top .sp{flex:1}
.r-ibtn{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:600 13px/1 var(--sans);cursor:pointer;color:var(--muted)}
.r-ibtn.on{border-color:var(--accent);color:var(--accent-2)}
.ritual-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;max-width:560px;margin:0 auto;width:100%}
.r-dots{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.r-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.2s}
.r-dot.on{background:var(--accent);transform:scale(1.25)}
.r-dot.done{background:var(--accent-soft)}
.r-kick{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.r-name{font:600 clamp(24px,5vw,32px)/1.1 var(--serif);color:var(--ink);margin:0}
.r-ing{color:var(--accent-2);font-weight:600;font-size:16px}
.r-why{color:var(--muted);font-size:15px;max-width:450px;line-height:1.55;margin:0}
.r-prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;font-size:14px}
.r-line{font:italic 500 19px/1.4 var(--serif);color:var(--ink);max-width:460px}
.ritual-foot{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 0 calc(8px + env(safe-area-inset-bottom))}
.ritual-foot .z-btn{min-width:200px}
.r-soon{font-size:12px;color:var(--muted);max-width:420px;text-align:center;line-height:1.5}
/* GRWZ camera mirror (opt-in; never stored) + anti-pilling timer */
.r-mirror{width:100%;max-width:320px;aspect-ratio:3/4;object-fit:cover;border-radius:18px;
  margin:10px auto 0;display:block;transform:scaleX(-1);background:#1a0f14;flex:none}
.r-timer{font:700 clamp(44px,13vw,72px)/1 var(--serif);color:var(--accent-2);margin:4px 0 2px}

/* ── Intake: focused full-screen guided start (creates the journey) ──────── */
.intake{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(40,16,30,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.intake-card{background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(36,16,36,.32);width:min(480px,100%);max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;padding:14px 16px 18px;animation:z-pop .22s ease both}
.ik-opts{display:flex;flex-direction:column;gap:9px;width:100%;max-width:430px;margin:6px auto 0}
.ik-opt{appearance:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px 16px;
  font:500 15px/1.25 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.ik-opt:hover{border-color:var(--accent)}
.ik-opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600}

/* intake free-type input */
.ik-type{width:100%;max-width:430px;margin:8px auto 0;display:block;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font:inherit;background:#fff;color:var(--ink)}
.ik-type::placeholder{color:var(--muted)}
.ik-type:focus{outline:none;border-color:var(--accent)}

/* ── Unified app shell for content pages (matches the chat sidebar) ───────── */
.z-app{display:flex;min-height:100vh}
.z-sidebar{width:248px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column}
.z-side-brand{display:flex;align-items:center;gap:9px;font:700 18px/1 var(--serif);color:var(--ink);text-decoration:none;padding:4px 8px 12px;letter-spacing:-.3px}
.z-side-brand .z-mark{width:30px;height:30px}
.z-side-link{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;border-radius:10px;padding:9px 11px;font-size:14px}
.z-side-link:hover{background:var(--accent-soft)}
.z-side-link svg{width:17px;height:17px;color:var(--muted);flex:none}
.z-side-link.cta{background:var(--primary);color:#fff;justify-content:center;font-weight:600;margin-bottom:8px}
.z-side-link.cta:hover{background:var(--primary-press)}
.z-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.z-side-foot a{display:block;color:var(--muted);text-decoration:none;padding:3px 2px}
.z-side-foot a:hover{color:var(--ink)}
.z-main{flex:1;min-width:0;display:flex;flex-direction:column}
.z-main>.z-wrap{flex:1;width:100%;padding-top:22px}
.z-mobtop{display:none;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);z-index:6}
.z-mobtop .menu{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink);padding:0}
.z-mobtop b{font:700 15px/1 var(--serif)}
.z-scrim{display:none}
@media(max-width:820px){
  .z-sidebar{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow-lg)}
  body.zs-open .z-sidebar{transform:none}
  .z-scrim{display:block;position:fixed;inset:0;background:rgba(30,17,22,.4);z-index:39;opacity:0;pointer-events:none;transition:.2s}
  body.zs-open .z-scrim{opacity:1;pointer-events:auto}
  .z-mobtop{display:flex}
}

/* owner vs visitor on a shared routine page */
.visitor-only{display:none}
body.visitor .visitor-only{display:block}
body.visitor .owner-only{display:none}

/* "What I'm using" shelf add form */
.shelf-add{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.shelf-add input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;background:#fff;color:var(--ink)}
.shelf-add input:focus{outline:none;border-color:var(--accent)}

/* ── Final polish: tactile press + gentle entrance (honors reduced-motion) ── */
.z-btn,.ik-opt,.z-chip,.card,.rt-row,.grwz-strip{transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease}
.z-btn:active,.ik-opt:active,.z-chip:active,.card:active,.grwz-strip:active{transform:translateY(1px)}
@keyframes z-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row,.z-tile,.z-verdict{animation:z-rise .26s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion: reduce){.row,.z-tile,.z-verdict{animation:none}}

/* ── v3 mobile bottom tab bar (phones only; desktop uses the sidebar) ───── */
.z-tabbar{display:none}
@media(max-width:820px){
  .z-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(10px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .z-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;text-decoration:none;color:var(--muted);
    font:600 10.5px/1 var(--sans);padding:5px 2px}
  .z-tab svg{width:22px;height:22px}
  .z-tab.on{color:var(--accent-2)}
  /* keep page content clear of the fixed bar */
  .z-main{padding-bottom:64px}
  body.has-tabbar{padding-bottom:64px}
}
/* "You" sheet (bottom) */
.z-sheet-scrim{position:fixed;inset:0;background:rgba(43,33,28,.38);z-index:45}
.z-sheet{position:fixed;left:0;right:0;bottom:0;z-index:46;background:var(--paper);
  border-radius:20px 20px 0 0;max-width:var(--maxw);margin:0 auto;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg)}
.z-sheet-grab{width:40px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 12px}
.z-sheet-h{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin:0 2px 8px}
.z-sheet-link{display:block;color:var(--ink);text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line-soft);font-size:15px}
.z-sheet-link:hover{color:var(--accent-2)}

/* ── Tabbed dashboard (the /r "Your skin" page) ───────────────────────── */
.pchips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0}
.pchip{font:600 11.5px/1 var(--sans);color:var(--ink);background:#f0ecf3;border-radius:999px;padding:7px 11px;text-transform:capitalize}
.aj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:14px}
.aj-h{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.aj-goal{font:600 17px/1.3 var(--serif);color:var(--ink);text-transform:capitalize}
.aj-when{font-size:11.5px;color:var(--muted);margin-top:7px}
.dash-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:22px 0 18px;overflow-x:auto}
.dash-tab{appearance:none;background:none;border:none;cursor:pointer;padding:11px 12px;font:600 14px/1 var(--sans);
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.dash-tab:hover{color:var(--ink)}
.dash-tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.dash-actions{display:flex;flex-direction:column;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
/* Collapsible "My Routine" sections (native <details> accordion) */
.dash-sec{border-top:1px solid var(--line)}
.dash-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:16px 2px;font:600 17px/1 var(--serif);color:var(--ink)}
.dash-sec>summary::-webkit-details-marker{display:none}
.dash-sec>summary::after{content:"›";margin-left:auto;color:var(--muted);font-size:20px;transition:transform .2s}
.dash-sec[open]>summary::after{transform:rotate(90deg)}
.dash-secbody{padding:2px 2px 20px}
/* Top-right account avatar + dropdown menu */
.acct{position:relative;display:flex;align-items:center}
.acct-av{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--accent-soft);
  color:var(--accent-2);font:600 13px/1 var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center}
.acct-menu{position:absolute;top:38px;right:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);min-width:190px;padding:6px;z-index:50}
.acct-menu a{display:block;padding:9px 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.acct-menu a:hover{background:var(--accent-soft)}
.acct-email{padding:7px 11px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line-soft);
  margin-bottom:4px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}