:root{
  --porcelain:#F6F2E9;
  --porcelain-dim:#EDE7D8;
  --ink:#2B2320;
  --ink-soft:#5C5148;
  --jade:#3F5E42;
  --jade-pale:#E4EAE0;
  --jade-deep:#2A4130;
  --amber:#C17A3E;
  --amber-pale:#F1DFC7;
  --clay:#8B5E4A;
  --line:#D8CFB9;
  --white:#FFFEFB;
  --red:#B5504A;
  --glow:0 0 0 rgba(0,0,0,0);
  --heat-empty:#E4DCC5;
  --heat-fill:#4A7A3F;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --font-display:'Shippori Mincho',serif;
  --enso:#E3A15C; /* WS3: steep-timer ring — amber-bright on the light-theme jade-deep box */
  --nav-active:#3F5E42; --nav-inactive:#a29a86; /* WS6 bottom bar: active tab / avatar initial | muted inactive tab */
  --greeting-eye:#5c7a5e; --greeting-body:#47533f; /* WS2 greeting hero: eyebrow (muted jade) | body (green-ink on jade-pale) */
  --enso-track:rgba(255,255,255,.15); --timer-sub:#a9b8a2; --timer-soft:rgba(255,255,255,.14); /* WS3 timer box (foreground over the dark-green box) */
  /* WS1 Wrapped — seasonal-wash story-card fields (deeper than the app tokens on purpose) */
  --wc-jade:#2A4130; --wc-jade-fg:#F6F2E9; --wc-jade-soft:#CDE0C4;
  --wc-amber:#C17A3E; --wc-amber-fg:#2B1206; --wc-amber-soft:#5A3517;
  --wc-por:#F6F2E9; --wc-por-fg:#2B2320; --wc-por-soft:#5C5148; --wc-por-line:#E4DCC9;
  --wc-leaf:#3F5E42; --wc-leaf-lt:#8FBE83; --wc-enso:#E3A15C; --wc-bar:#3F5E42; --wc-frame:#CDC4AD;
  /* WS4 Flavour */
  --flav-onfg:#FFFEFB;               /* text on a selected (amber) flavour chip */
  --flav-radar-fill:rgba(63,94,66,.18);
}
html[data-theme="dark"]{
  --porcelain:#15140F;
  --porcelain-dim:#1E1C15;
  --ink:#EDE6D6;
  --ink-soft:#A79C87;
  --jade:#6F9A66;
  --jade-pale:#233024;
  --jade-deep:#8FBE83;
  --amber:#E3A15C;
  --amber-pale:#3A2C1A;
  --clay:#C99872;
  --line:#332F24;
  --white:#1C1A14;
  --red:#E08C82;
  --glow:0 0 18px rgba(227,161,92,.18);
  --heat-empty:#332F24;
  --heat-fill:#E3A15C;
  --enso:#2A4130; /* WS3: dark-jade ring on the dark-theme light-green timer box */
  --nav-active:#8FBE83; --nav-inactive:#8f866f; /* WS6 bottom bar (dark) */
  --greeting-eye:#7f9a78; --greeting-body:#c3cdb9; /* WS2 greeting hero (dark) */
  --enso-track:rgba(42,65,48,.26); --timer-sub:#2A4130; --timer-soft:rgba(21,20,15,.14); /* WS3 timer box (foreground over the light-green box) */
  /* WS1 Wrapped — dark fields never go full-bright */
  --wc-jade:#1E2C1E; --wc-jade-fg:#EDE6D6; --wc-jade-soft:#9DB79A;
  --wc-amber:#3A2415; --wc-amber-fg:#EAD0AE; --wc-amber-soft:#B98B5E;
  --wc-por:#1C1A14; --wc-por-fg:#EDE6D6; --wc-por-soft:#A79C87; --wc-por-line:#332F24;
  --wc-leaf:#8FBE83; --wc-leaf-lt:#8FBE83; --wc-enso:#E3A15C; --wc-bar:#8FBE83; --wc-frame:#2A261D;
  /* WS4 Flavour (dark) */
  --flav-onfg:#15140F;
  --flav-radar-fill:rgba(111,154,102,.2);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--porcelain);color:var(--ink);font-family:'Inter',sans-serif;transition:background .25s,color .25s;}
body{-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;}
.mono{font-family:var(--font-mono);}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
button{font-family:'Inter',sans-serif;cursor:pointer;}
#app{max-width:920px;margin:0 auto;padding:0 16px 92px;} /* WS6: bottom pad clears the fixed bottom bar + raised Log */
a{color:inherit;}

/* header */
.topbar{position:sticky;top:0;z-index:30;background:var(--porcelain);padding:18px 16px 10px;margin:0 -16px;border-bottom:1px solid var(--line);}
.topbar-inner{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.topbar-brandrow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.topbar-actions{display:flex;gap:8px;align-items:center;}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--line);background:var(--white);border-radius:10px;color:var(--ink);}
.icon-btn:hover{border-color:var(--jade);}
.icon-btn.active{border-color:var(--jade);background:var(--jade);color:var(--white);}
/* WS3 hairline icons — stroke-width via inherited CSS so it can be bumped on dark (thin strokes go faint) */
.hl{display:inline-block;vertical-align:middle;stroke-width:1.7;}
html[data-theme="dark"] .hl{stroke-width:1.9;}
.i-fav{color:var(--jade);flex:0 0 auto;}
.btn-log-wide{width:100%;justify-content:center;padding:12px;font-size:14px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--amber-pale), var(--amber) 60%, var(--clay));flex:0 0 auto;}
.brand h1{font-size:22px;margin:0;font-weight:700;letter-spacing:-.01em;}
.tabs{display:flex;gap:4px;background:var(--porcelain-dim);padding:4px;border-radius:10px;}
.tabs .tab{flex:1;text-align:center;white-space:nowrap;}
.tab{padding:8px 14px;border:none;background:transparent;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.tab.active{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.btn-log{background:var(--jade);color:var(--white);border:none;padding:9px 16px;border-radius:8px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;}
.btn-log:hover{background:var(--jade-deep);}

/* WS6 nav shell — header shrinks to wordmark + avatar; primary nav moves to a bottom bar; the five
   former header icons live in an avatar-opened hub sheet. */
.avatar-btn{width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--jade-pale);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--nav-active);padding:0;}
.avatar-btn:hover{border-color:var(--jade);}

/* bottom tab bar — Home · Teas · [Log raised] · Sessions · Insights (identical on every content screen) */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--white);border-top:1px solid var(--line);}
.bottomnav-inner{max-width:480px;margin:0 auto;padding:9px 16px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;}
.bn-item{background:none;border:none;padding:0;width:56px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--nav-inactive);}
.bn-item .bn-lbl{font-size:10px;font-weight:400;}
.bn-item.active{color:var(--nav-active);}
.bn-item.active .bn-lbl{font-weight:600;}
.bn-log{background:none;border:none;padding:0;width:60px;display:flex;flex-direction:column;align-items:center;}
.bn-log-circle{width:54px;height:54px;border-radius:50%;background:var(--jade);color:var(--porcelain);display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:0 6px 16px -4px rgba(63,94,66,.6);}
html[data-theme="dark"] .bn-log-circle{box-shadow:0 6px 16px -4px rgba(0,0,0,.6);}
.bn-log-lbl{font-size:10px;font-weight:600;color:var(--nav-active);margin-top:3px;}

/* steeping: the bar recedes to a handle so the ritual owns the screen; tap/swipe up restores it */
.nav-recede{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:26px 0 calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(to top,var(--porcelain),transparent);}
.nav-recede-hint{font-size:10.5px;letter-spacing:.05em;color:var(--ink-soft);}
.nav-recede-handle{width:130px;height:4px;border-radius:2px;background:var(--line);}

/* avatar → hub bottom sheet */
.hub-scrim{position:fixed;inset:0;z-index:50;background:rgba(20,18,12,.32);}
.hub-sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-width:480px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-bottom:none;border-radius:22px 22px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -16px 36px -26px rgba(60,50,30,.5);}
.hub-grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px;}
.hub-id{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.hub-id-avatar{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--jade-pale);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--nav-active);}
.hub-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);}
.hub-sub{font-family:var(--font-mono);font-size:11px;color:var(--nav-inactive);}
.hub-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;border:none;border-top:1px solid var(--line);background:none;color:var(--ink);font-size:15px;text-align:left;}
.hub-row .hl{color:var(--ink-soft);flex:0 0 auto;}

/* WS2 Home — greeting hero + glance cards (greeting/running low/favourites/one number) */
.greeting-card{background:var(--jade-pale);border:1px solid var(--line);border-radius:20px;padding:24px 22px;}
.greeting-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--greeting-eye);}
.greeting-head{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1.15;color:var(--ink);margin:8px 0 12px;}
.greeting-body{font-size:16px;line-height:1.55;color:var(--greeting-body);}
.greeting-body span[onclick]{color:var(--jade-deep);font-weight:600;cursor:pointer;text-decoration:underline;}
.fav-row{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink);padding:6px 0;cursor:pointer;}
.week-card{display:flex;align-items:center;gap:16px;}
.week-num{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1;color:var(--jade);}
.week-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);line-height:1.35;}

/* WS5 Library — photo shelf + grid⇄rows density + one type-aware status line per tea */
.lib-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;}
.lib-head-actions{display:flex;align-items:center;gap:10px;}
.lib-count{font-size:12px;color:var(--ink-soft);margin:0 0 11px;}
.chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px;}
/* #19 Library search — quiet hairline; plain + functional (R3 restyles the header later) */
.lib-search{position:relative;margin:0 0 13px;}
.lib-search input{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:9px 30px 9px 12px;font-size:14px;color:var(--ink);}
.lib-search input::placeholder{color:var(--ink-soft);}
.lib-search input:focus{outline:none;border-color:var(--jade);}
.lib-search-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--ink-soft);font-size:13px;padding:0;}
.sess-tealink{cursor:pointer;}
.sess-viewtea{font-size:12.5px;color:var(--ink-soft);padding:0;white-space:nowrap;}
.density-toggle{display:flex;gap:3px;background:var(--porcelain-dim);border-radius:9px;padding:3px;}
.density-seg{display:flex;align-items:center;justify-content:center;padding:5px 8px;border:none;background:none;border-radius:6px;color:var(--nav-inactive);}
.density-seg.active{background:var(--white);color:var(--ink);}
.btn-add{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--porcelain);background:var(--jade);border:none;border-radius:999px;padding:6px 12px;}
.btn-add:hover{background:var(--jade-deep);}
/* type pill on the shelf — colour/bg come from the shared .t-* classes (fixed both themes) */
.shelf-pill{display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-size:10px;font-weight:600;line-height:1.4;border-radius:999px;padding:3px 9px;flex:0 0 auto;}
.shelf-status{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11.5px;}
.shelf-cbody .shelf-status{margin-top:8px;}
.shelf-name{font-family:var(--font-display);font-weight:600;color:var(--ink);}
/* photo / thumbnail fill: the user's image, a type-tinted stripe, or a kanji plate */
.shelf-img{background-size:cover;background-position:center;}
.shelf-ph{background:repeating-linear-gradient(135deg,var(--ph-a,#E7E0CE),var(--ph-a,#E7E0CE) 7px,var(--ph-b,#EFE9DA) 7px,var(--ph-b,#EFE9DA) 14px);}
.shelf-ph.t-oolong{--ph-a:#EBE2D6;--ph-b:#F2EBDF;}
.shelf-ph.t-black{--ph-a:#E6DCD0;--ph-b:#EFE7DB;}
.shelf-ph.t-yellow{--ph-a:#EAE6CE;--ph-b:#F2EEDC;}
html[data-theme="dark"] .shelf-ph{--ph-a:#242219;--ph-b:#2b2820;}
html[data-theme="dark"] .shelf-ph.t-green{--ph-a:#20241d;--ph-b:#272b23;}
html[data-theme="dark"] .shelf-ph.t-oolong{--ph-a:#25211a;--ph-b:#2c2820;}
.shelf-kanji{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);}
.shelf-kanji.t-white{background:#ECEAE2;} .shelf-kanji.t-white span{color:#cfc9b8;}
.shelf-kanji.t-puerh{background:#EAE0D3;} .shelf-kanji.t-puerh span{color:#cbbba3;}
html[data-theme="dark"] .shelf-kanji.t-white{background:#26241d;} html[data-theme="dark"] .shelf-kanji.t-white span{color:#494434;}
html[data-theme="dark"] .shelf-kanji.t-puerh{background:#2a241c;} html[data-theme="dark"] .shelf-kanji.t-puerh span{color:#544733;}
/* grid density */
.tea-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.shelf-card{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;}
.shelf-card:hover{border-color:var(--jade);}
.shelf-photo-wrap{position:relative;}
.shelf-photo{height:100px;}
.shelf-photo-wrap .shelf-pill{position:absolute;top:8px;left:8px;}
.shelf-photo-wrap .fav{position:absolute;top:8px;right:8px;display:flex;color:var(--jade);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));}
.shelf-cbody{padding:11px 12px 13px;}
.shelf-cbody .shelf-name{font-size:15px;line-height:1.25;min-height:37px;}
.shelf-kanji.shelf-photo span{font-size:32px;}
.shelf-rebuy{margin-top:6px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-soft);}
/* rows density */
.shelf-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;}
.shelf-row:last-child{border-bottom:none;}
.shelf-thumb{width:50px;height:50px;border-radius:11px;flex:0 0 auto;}
.shelf-kanji.shelf-thumb span{font-size:22px;}
.shelf-row-mid{flex:1;min-width:0;}
.shelf-row .shelf-name{font-size:15.5px;line-height:1.2;}
.shelf-row-meta{display:flex;align-items:center;gap:7px;margin-top:5px;}
.shelf-caret{color:var(--ink-soft);display:flex;transform:rotate(-90deg);flex:0 0 auto;opacity:.55;}

/* WS1 Forms — core trio + one fold (session setup); add-tea reuses the shape */
.trio-card{border:1px solid var(--line);background:var(--white);border-radius:16px;overflow:hidden;}
.trio-row{padding:13px 16px;border-top:1px solid var(--line);}
.trio-row:first-child{border-top:none;}
.trio-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;}
.trio-line{position:relative;display:flex;align-items:center;}
.trio-select{appearance:none;-webkit-appearance:none;width:100%;border:none;background:transparent;padding:0 26px 0 0;font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);cursor:pointer;}
.trio-select.trio-tea{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.22;}
.trio-caret{position:absolute;right:0;display:flex;color:var(--ink-soft);pointer-events:none;}
.trio-method-row{display:flex;align-items:center;justify-content:space-between;}
.trio-method-row .trio-eyebrow{margin-bottom:0;}
.seg-sm button{padding:6px 14px;font-size:13.5px;}
/* the "how are you arriving?" mood moment — amber-pale */
.mood-card{margin-top:14px;background:var(--amber-pale);border-radius:16px;padding:16px 16px 15px;}
.mood-title{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);}
.mood-sub{font-size:12.5px;color:var(--clay);margin:3px 0 12px;}
.mood-chips{display:flex;gap:7px;flex-wrap:wrap;}
.mood-chip{border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px;padding:7px 13px;font-size:13.5px;cursor:pointer;font-family:'Inter',sans-serif;}
.mood-chip.on{background:var(--amber);border-color:var(--amber);color:#fff;}
html[data-theme="dark"] .mood-chip.on{color:#15140F;}
/* the single-boolean disclosure (More details / Specifics) */
.fold-row{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px;cursor:pointer;}
.fold-label{font-size:15px;color:var(--ink-soft);font-weight:500;}
.fold-sub{color:var(--nav-inactive);font-weight:400;}
.fold-caret{display:flex;color:var(--ink-soft);}
.fold-grid,.specifics-body{margin-top:12px;}
/* primary form button + helper */
.begin-btn{width:100%;padding:16px 0;border-radius:14px;font-size:16px;font-weight:600;margin-top:20px;}
.form-helper{text-align:center;margin-top:10px;font-size:13px;color:var(--nav-inactive);}
/* add-tea photo dropzone */
.img-upload.dropzone{height:140px;flex-direction:column;gap:8px;border-radius:16px;font-size:14px;border-color:var(--line);}
.img-upload.dropzone.has-img{border-style:solid;}
.img-upload .hl{color:var(--ink-soft);}

/* generic */
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px;}
.section{margin-top:22px;}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.section-title h2{font-size:16px;margin:0;font-weight:600;}
.btn{border:1px solid var(--line);background:var(--white);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);}
.btn:hover{border-color:var(--jade);}
.btn-primary{background:var(--jade);color:var(--white);border:none;}
.btn-primary:hover{background:var(--jade-deep);}
.btn-ghost{background:transparent;border:none;color:var(--ink-soft);text-decoration:underline;}
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red);}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;font-family:var(--font-mono);letter-spacing:.02em;}
.grid{display:grid;gap:12px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:640px){.grid-3{grid-template-columns:repeat(2,1fr);}}

/* type colors */
.t-green{background:#EAF3E2;color:#3E6B2A;}
.t-black{background:#F2E4DC;color:#7A3B22;}
.t-oolong{background:#F5E9CE;color:#96631A;}
.t-puerh{background:#E9DED8;color:#5A3A28;}
.t-yellow{background:#FBF3D0;color:#8C7315;}
.t-white{background:#F1F0E8;color:#7A7660;}
.dot-green{background:#5B9440;}
.dot-black{background:#9A5330;}
.dot-oolong{background:#C79328;}
.dot-puerh{background:#6E4A34;}
.dot-yellow{background:#C6A825;}
.dot-white{background:#B4B097;}

/* stat card */
.stat{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center;}
.stat .num{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--jade-deep);}
.stat .lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px;}

.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.badge{border:1px solid var(--line);border-radius:10px;padding:12px 10px;text-align:center;background:var(--porcelain-dim);}
.badge.unlocked{background:var(--amber-pale);border-color:var(--amber);}
.badge.locked{opacity:.5;}
.badge-icon{width:26px;height:26px;line-height:26px;border-radius:50%;margin:0 auto 8px;font-family:var(--font-mono);font-size:13px;background:var(--line);color:var(--ink-soft);}
.badge.unlocked .badge-icon{background:var(--amber);color:var(--white);}
.badge-title{font-family:var(--font-mono);font-size:11.5px;font-weight:700;margin-bottom:4px;}
.badge-desc{font-size:10.5px;color:var(--ink-soft);line-height:1.3;}

/* brewing clock */
.clock-chart{display:flex;gap:4px;align-items:flex-end;height:90px;}
.clock-col{flex:1;display:flex;flex-direction:column;height:100%;}
.clock-bar-track{flex:1;display:flex;align-items:flex-end;}
.clock-bar{width:100%;border-radius:3px 3px 0 0;min-height:2px;}
.clock-lbl{font-family:var(--font-mono);font-size:9px;color:var(--ink-soft);text-align:center;margin-top:4px;}

/* type bars */
.typebar-row{margin-bottom:12px;}
.typebar-row:last-child{margin-bottom:0;}
.typebar-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;}
.typebar-track{height:10px;background:var(--porcelain-dim);border-radius:6px;overflow:hidden;}
.typebar-fill{height:100%;border-radius:6px;}
.typebar-sub{font-size:11.5px;color:var(--ink-soft);margin-top:3px;}

/* infusion dots (signature) */
.dots{display:inline-flex;gap:3px;vertical-align:middle;}
.dots .d{width:6px;height:6px;border-radius:50%;background:var(--line);}
.dots .d.on{background:var(--amber);}

/* stars */
.stars{display:inline-flex;gap:2px;}
.star{position:relative;width:16px;height:16px;display:inline-block;}
.star svg{width:16px;height:16px;display:block;}
.star .half-hit,.star .full-hit{position:absolute;top:0;bottom:0;width:50%;cursor:pointer;}
.star .half-hit{left:0;}
.star .full-hit{right:0;}
.starL{font-size:20px;}
.starL .star{width:22px;height:22px;}
.starL .star svg{width:22px;height:22px;}

/* teas grid */
.tea-card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .1s;}
.tea-card:hover{border-color:var(--jade);}
.tea-thumb{width:100%;height:120px;background:var(--jade-pale);background-size:cover;background-position:center;position:relative;}
.tea-thumb .fav{position:absolute;top:8px;right:8px;display:flex;color:var(--jade);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45));}
.tea-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:6px;}
.tea-body .name{font-weight:600;font-size:14px;line-height:1.25;}
.tea-meta{font-size:11px;color:var(--ink-soft);}
.stock-low{color:var(--red);font-weight:600;}

/* form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;}
.field input[type=text],.field input[type=number],.field input[type=url],.field input[type=datetime-local],.field select,.field textarea{
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:'Inter',sans-serif;background:var(--porcelain);color:var(--ink);
}
.field input[type=datetime-local]{color-scheme:light;}
html[data-theme="dark"] .field input[type=datetime-local]{color-scheme:dark;}

/* tag library */
.taglib{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.taglib-chip{background:transparent;border:1px dashed var(--line);color:var(--ink-soft);font-size:11.5px;padding:4px 9px;border-radius:20px;font-weight:600;font-family:'Inter',sans-serif;}
.taglib-chip:hover{border-color:var(--jade);color:var(--jade-deep);border-style:solid;}
.field textarea{resize:vertical;min-height:60px;}
.checkrow{display:flex;align-items:center;gap:8px;font-size:13px;}
.span2{grid-column:1/-1;}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(43,35,32,.45);display:flex;align-items:flex-start;justify-content:center;padding:30px 14px;overflow-y:auto;z-index:100;}
.modal{background:var(--porcelain);border-radius:16px;max-width:640px;width:100%;padding:22px;margin-bottom:40px;border:1px solid var(--line);}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-head h2{margin:0;font-size:19px;}
.close-x{background:none;border:none;font-size:20px;color:var(--ink-soft);line-height:1;}

/* tags */
.tagchip{display:inline-flex;align-items:center;gap:5px;background:var(--jade-pale);color:var(--jade-deep);font-size:11.5px;padding:4px 9px;border-radius:20px;font-weight:600;}
.tagchip button{background:none;border:none;color:var(--jade-deep);font-size:12px;padding:0;line-height:1;}
.tag-input-wrap{position:relative;}
.tag-suggest{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--line);border-radius:8px;margin-top:3px;max-height:150px;overflow-y:auto;z-index:10;}
.tag-suggest div{padding:7px 10px;font-size:12.5px;cursor:pointer;}
.tag-suggest div:hover{background:var(--jade-pale);}

/* timer */
/* WS3 breathing keyframes (ambient, CSS-only; honoured off under reduced-motion) */
@keyframes sc-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
@keyframes sc-breathe-slow{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes sc-halo{0%{transform:scale(.92);opacity:.45;}70%{opacity:0;}100%{transform:scale(1.4);opacity:0;}}
@keyframes sc-digit{0%,100%{opacity:.62;}50%{opacity:.82;}}

/* WS3 steeping — title bar (chevron · tea name · opt-in sound) */
.steep-titlebar{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:14px;}
.steep-back{background:none;border:none;padding:0;display:flex;color:var(--jade);}
.steep-title{flex:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);}
.steep-mute{background:none;border:none;padding:0;display:flex;color:var(--ink-soft);opacity:.85;}

/* WS3 brew-guide card — the steep schedule lives in these pills; tap one to time it */
.bg-card{background:var(--jade-pale);border-radius:15px;padding:13px 15px 14px;margin-bottom:13px;}
.bg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bg-hide{font-size:12px;color:var(--ink-soft);}
.steep-pills{display:flex;gap:7px;margin-top:11px;}
.steep-pill{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--font-mono);border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:11px;padding:7px 0;cursor:pointer;}
.steep-pill .sp-idx{font-size:10px;color:var(--ink-soft);}
.steep-pill .sp-dur{font-size:13.5px;}
.steep-pill.active{background:var(--amber);border-color:var(--amber);color:#fff;} /* amber both themes — sits on the pale guide card, not the inverting timer box */
html[data-theme="dark"] .steep-pill.active{color:#15140F;}
.steep-pill.active .sp-idx{color:inherit;opacity:.85;}
.steep-pill.active .sp-dur{font-weight:600;}

/* WS3 timer box — the glazed box stays; the ensō ring is its centre of gravity.
   Box bg flips (dark-green light / light-green dark) via --jade-deep; --porcelain is the on-box
   foreground (light on the dark box, dark on the light box). */
.timer-box{background:var(--jade-deep);color:var(--porcelain);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--glow);}
.timer-modebtns{display:flex;gap:6px;justify-content:center;background:rgba(0,0,0,.2);border-radius:10px;padding:4px;margin:0 auto;width:max-content;}
.timer-modebtns button{background:none;border:none;color:var(--porcelain);opacity:.72;padding:6px 16px;border-radius:7px;font-size:13px;font-weight:600;}
.timer-modebtns button.active{background:var(--porcelain);color:var(--jade-deep);opacity:1;}
.timer-target-input{width:70px;text-align:center;border-radius:6px;border:none;padding:4px;font-family:var(--font-mono);}
.timer-ring{position:relative;width:236px;height:236px;max-width:78vw;max-height:78vw;margin:14px auto 0;display:flex;align-items:center;justify-content:center;}
.timer-enso-wrap{position:absolute;inset:0;animation:sc-breathe 5.5s ease-in-out infinite;}
.timer-enso{width:100%;height:100%;transform:rotate(-4deg);}
.timer-enso .enso-track{stroke:var(--enso-track);}
.timer-enso .enso-arc{stroke:var(--enso);transition:stroke-dashoffset .9s linear;}
.timer-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.timer-display{font-family:var(--font-mono);font-weight:500;font-size:46px;line-height:1;letter-spacing:.01em;color:var(--porcelain);}
.timer-sub{font-family:var(--font-mono);font-size:11px;color:var(--timer-sub);margin-top:9px;letter-spacing:.09em;}
/* #13: tap-to-edit the countdown length inline (only while stopped) — a quiet dashed hint, not a popup. */
.timer-target-tap{background:none;border:none;color:var(--porcelain);font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;padding:2px 3px;border-bottom:1px dashed var(--timer-soft);opacity:.92;cursor:pointer;}
.timer-target-inline{width:48px;text-align:center;border:none;border-radius:5px;padding:2px 3px;font-family:var(--font-mono);font-size:11px;background:var(--porcelain);color:var(--jade-deep);}
.timer-ctrls{display:flex;gap:8px;margin-top:16px;}
.timer-ctrls button{flex:1;background:var(--porcelain);color:var(--jade-deep);border:none;padding:12px 0;border-radius:11px;font-weight:600;font-size:14px;}
.timer-ctrls button.soft{background:var(--timer-soft);color:var(--porcelain);}
.timer-ctrls button.wide{flex:1.4;}
.timer-focus{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--timer-soft);color:var(--porcelain);opacity:.85;font-size:13.5px;font-weight:600;cursor:pointer;}
@media (prefers-reduced-motion: reduce){ .timer-enso-wrap{animation:none;} .timer-enso .enso-arc{transition:none;} }

/* steep list */
.steep-item{border:1px solid var(--line);background:var(--white);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;}
.steep-item .steep-head{display:flex;justify-content:space-between;font-weight:600;}
.steep-item .steep-tags{margin-top:5px;}

/* calendar heatmap */
.heatmap{display:flex;gap:3px;flex-wrap:nowrap;}
.heat-cell{width:14px;height:14px;border-radius:3px;background:var(--heat-empty);}
.heat-week{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;}
.heat-today{box-shadow:0 0 0 2px var(--amber);}
.heatmap-wrap{overflow-x:auto;}
.heat-legend{display:flex;gap:14px;margin-top:10px;font-size:11px;color:var(--ink-soft);align-items:center;}
.heat-legend span{display:inline-flex;align-items:center;gap:5px;}
.heat-swatch{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto;}

/* list rows */
.rank-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.rank-row:last-child{border-bottom:none;}
.rank-num{font-family:var(--font-mono);color:var(--ink-soft);width:16px;}
.rank-row .rname{flex:1;font-weight:600;}
.rank-row .rval{font-family:var(--font-mono);color:var(--amber);font-weight:600;}

.empty{color:var(--ink-soft);font-size:13px;padding:20px 0;text-align:center;}
.img-upload{width:100%;height:110px;border:1.5px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-soft);background-size:cover;background-position:center;cursor:pointer;position:relative;overflow:hidden;}
.img-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;}

.session-hist{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;}
.session-hist-row{padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px;}
.session-hist-row:last-child{border-bottom:none;}

.detail-back{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px;background:none;border:none;margin-bottom:10px;}

/* ---------- auth / migration screens (v2) ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.auth-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 22px;max-width:380px;width:100%;box-shadow:var(--glow);}
.auth-sub{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 18px;text-align:center;}
.auth-card .field input[type=email]{border:1px solid var(--line);border-radius:8px;padding:10px 11px;font-size:14px;font-family:'Inter',sans-serif;background:var(--porcelain);color:var(--ink);width:100%;}
.auth-msg{font-size:12.5px;color:var(--ink-soft);margin-top:12px;text-align:center;line-height:1.45;min-height:16px;}
.auth-msg.ok{color:var(--jade-deep);font-weight:600;}

/* ---------- settings (v2.1) ---------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.set-row:last-of-type{border-bottom:none;}
.set-row .set-label{font-size:13.5px;font-weight:600;}
.set-row .set-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.seg{display:inline-flex;background:var(--porcelain-dim);border-radius:8px;padding:3px;gap:2px;}
.seg button{border:none;background:transparent;padding:6px 12px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft);font-family:'Inter',sans-serif;}
.seg button.active{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
/* iOS-style toggle */
.toggle{position:relative;width:44px;height:26px;flex:0 0 auto;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle .track{position:absolute;inset:0;background:var(--line);border-radius:20px;transition:background .18s;}
.toggle .track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--white);border-radius:50%;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.toggle input:checked + .track{background:var(--jade);}
.toggle input:checked + .track::after{transform:translateX(18px);}

/* vessel thumbnail in list */
.vessel-thumb{width:34px;height:34px;border-radius:8px;flex:0 0 auto;background:var(--jade-pale);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:16px;}

/* ---------- tiered achievements ---------- */
.badge-tier{display:inline-block;margin-left:5px;font-family:var(--font-mono);font-size:9px;color:var(--amber);vertical-align:middle;}
.badge.maxed{background:var(--amber-pale);border-color:var(--amber);}
.badge.maxed .badge-icon{background:var(--amber);color:var(--white);}
.badge-prog{height:5px;background:var(--porcelain-dim);border-radius:4px;overflow:hidden;margin-top:8px;}
.badge-prog-fill{height:100%;background:var(--jade);border-radius:4px;transition:width .4s ease;}
.badge.maxed .badge-prog-fill{background:var(--amber);}
.badge-prog-num{font-family:var(--font-mono);font-size:9px;color:var(--ink-soft);margin-top:4px;}

/* ---------- achievement unlock toast + confetti ---------- */
#toastHost{position:fixed;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2000;pointer-events:none;padding:0 16px;}
.toast{background:var(--jade-deep);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.28);max-width:440px;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;}
html[data-theme="dark"] .toast{background:var(--amber);color:#1C1A14;}
.toast.show{opacity:1;transform:translateY(0);}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:1999;overflow:hidden;}
.confetti i{position:absolute;top:-12px;width:9px;height:9px;border-radius:2px;animation:confetti-fall 1.6s ease-in forwards;}
@keyframes confetti-fall{
  0%{transform:translateY(0) rotate(0);opacity:1;}
  100%{transform:translateY(102vh) rotate(var(--rot,360deg));opacity:.7;}
}
@media (prefers-reduced-motion: reduce){ .confetti{display:none;} .toast{transition:opacity .3s;transform:none;} }

/* ---------- calendar ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-head strong{font-family:var(--font-display);font-size:16px;}
.cal-head .btn-ghost{font-size:22px;text-decoration:none;padding:0 10px;line-height:1;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dows{margin-bottom:4px;}
.cal-dow{text-align:center;font-family:var(--font-mono);font-size:9px;color:var(--ink-soft);padding:2px 0;}
.cal-cell{position:relative;aspect-ratio:1;border-radius:8px;background:var(--porcelain-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1.5px solid transparent;}
.cal-cell.blank{background:transparent;cursor:default;}
.cal-cell .cal-num{font-size:12px;color:var(--ink-soft);}
.cal-cell.has{background:var(--jade-pale);}
.cal-cell.has .cal-num{color:var(--ink);font-weight:600;}
.cal-cell.today{border-color:var(--amber);}
.cal-cell.sel{background:var(--jade);}
.cal-cell.sel .cal-num{color:#fff;}
.cal-dot{position:absolute;bottom:4px;right:5px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;background:var(--jade);color:#fff;font-family:var(--font-mono);font-size:9px;display:flex;align-items:center;justify-content:center;}
.cal-cell.sel .cal-dot{background:var(--amber);}

/* ---------- session rows ---------- */
.sess-row{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer;}
.sess-row:hover{border-color:var(--jade);}
.sess-thumb{width:44px;height:44px;border-radius:9px;flex:0 0 auto;background:var(--jade-pale);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:18px;}
.sess-main{flex:1;min-width:0;}
.sess-top{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.sess-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.sess-tags{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;}
.sess-chev{color:var(--ink-soft);font-size:20px;flex:0 0 auto;}

/* ---------- auth divider ---------- */
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:11px;margin:6px 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}

/* ---------- social ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;background:var(--jade-pale);background-size:cover;background-position:center;font-family:var(--font-display);font-weight:600;color:var(--jade-deep);font-size:15px;overflow:hidden;}
.user-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.user-row:last-child{border-bottom:none;}

/* v3 — quick log */
.hint{font-size:12px;color:var(--ink-soft);line-height:1.4;}
.infusion-stepper{display:inline-flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:12px;padding:8px 14px;background:var(--white);}
.infusion-stepper button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:19px;line-height:1;font-weight:600;display:flex;align-items:center;justify-content:center;}
.infusion-stepper button:hover{border-color:var(--jade);color:var(--jade);}
.infusion-stepper span{font-family:var(--font-mono);font-size:22px;min-width:1.5ch;text-align:center;color:var(--ink);}

/* v3 — library sort/filter controls */
.lib-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center;}
.lib-select{font-family:var(--font-mono);font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);}
.lib-chip{font-family:var(--font-mono);font-size:12px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);}
.lib-chip.active{background:var(--jade);color:var(--white);border-color:var(--jade);}
.lib-chip:hover{border-color:var(--jade);}

/* v3 — session photos */
.session-photo{width:100%;max-height:280px;object-fit:cover;border-radius:12px;margin-top:10px;display:block;}
.session-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 auto;}

/* v3 — onboarding + achievements page */
.ob-hero{text-align:center;padding:34px 16px 10px;}
.ob-hero .brand-mark{margin:0 auto 14px;width:46px;height:46px;}
.ob-hero h1{font-family:var(--font-display);font-size:30px;margin:0 0 10px;color:var(--ink);}
.ob-lede{max-width:440px;margin:0 auto;color:var(--ink-soft);font-size:14px;line-height:1.6;}
.ob-steps{margin-top:18px;display:flex;flex-direction:column;gap:2px;}
.ob-step{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);}
.ob-step:last-child{border-bottom:none;}
.ob-check{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:14px;font-weight:600;background:var(--jade-pale,#e7ede6);color:var(--jade);border:1px solid var(--line);}
.ob-step.done .ob-check{background:var(--jade);color:var(--white);border-color:var(--jade);}
.ob-step-body{flex:1;min-width:0;}
.ob-step-title{font-weight:600;font-size:14.5px;color:var(--ink);}
.ob-step-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.ob-step.done .ob-step-title{color:var(--ink-soft);}
.ob-btn{flex:0 0 auto;}
.ob-done-tag{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;color:var(--jade);text-transform:uppercase;letter-spacing:.08em;}
.btn.active-ghost{border-color:var(--jade);color:var(--jade);}

/* v3 — recap card */
.recap-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.recap-toggle button{font-family:var(--font-mono);font-size:11.5px;padding:6px 11px;background:var(--white);color:var(--ink-soft);border:none;}
.recap-toggle button.active{background:var(--jade);color:var(--white);}
.recap-range{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.03em;}
.recap-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);margin-top:8px;font-size:13px;}
.recap-line:first-of-type{margin-top:12px;}
.recap-k{color:var(--ink-soft);font-size:12px;}
.recap-v{font-weight:600;display:flex;align-items:center;gap:6px;}

/* v3 — heatmap weekday labels + caption */
.heat-labels{margin-right:2px;}
.heat-label{height:14px;line-height:14px;font-size:10px;color:var(--ink-soft);text-align:right;padding-right:4px;font-family:var(--font-mono);}
.heat-caption{font-size:11px;color:var(--ink-soft);margin-top:8px;}

/* v3 — tea passport */
.pp-map{padding:4px 0;}
.pp-mark{fill:var(--clay);stroke:var(--white);stroke-width:1.4;cursor:pointer;}
.pp-mark:hover{fill:var(--amber);}
.pp-mark.sel{fill:var(--jade);stroke:var(--amber);stroke-width:2.2;}
.pp-detail{margin-top:14px;min-height:64px;}
.pp-detail-empty{color:var(--ink-soft);font-size:13px;line-height:1.5;}
.pp-rname{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);}
.pp-rsub{font-size:11.5px;color:var(--ink-soft);margin-top:1px;}
.pp-teachips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.pp-teachip{font-size:12px;background:var(--porcelain-dim);color:var(--jade-deep);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;}
.pp-teachip:hover{border-color:var(--jade);}
.pp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.pp-chip{font-size:11.5px;color:var(--ink-soft);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;}
.pp-chip .n{color:var(--clay);font-weight:600;}
.pp-chip.sel{border-color:var(--jade);background:var(--porcelain-dim);color:var(--jade-deep);}
.pp-unmapped{font-size:11.5px;color:var(--ink-soft);margin-top:14px;line-height:1.5;}

/* WS3 — focus mode: a breath-led place. Always dark (a meditative night state), not theme-flipped. */
.focus-screen{position:fixed;inset:0;z-index:60;background:#100F0B;overflow:hidden;}
.focus-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%, rgba(227,161,92,.14), transparent 60%);pointer-events:none;}
.focus-mala{position:absolute;top:150px;right:26px;display:flex;flex-direction:column;gap:13px;align-items:center;}
.mala-dot{width:8px;height:8px;border-radius:50%;background:#332F24;}
.mala-dot.on{background:#E3A15C;}
.focus-head{position:relative;text-align:center;padding:44px 24px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7c745f;}
.focus-ringwrap{position:relative;width:276px;height:276px;max-width:82vw;max-height:82vw;margin:96px auto 0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.focus-halo{position:absolute;width:100%;height:100%;border-radius:50%;border:1.5px solid #E3A15C;animation:sc-halo 6s ease-out infinite;}
.focus-enso-breathe{position:absolute;inset:0;filter:drop-shadow(0 0 20px rgba(227,161,92,.4));animation:sc-breathe-slow 6s ease-in-out infinite;}
.focus-enso{width:100%;height:100%;transform:rotate(-4deg);}
.focus-enso .enso-track{stroke:#2a271e;}
.focus-enso .enso-arc{stroke:#E3A15C;transition:stroke-dashoffset .9s linear;}
.focus-center{position:relative;text-align:center;}
.focus-digit{font-family:var(--font-mono);font-weight:400;font-size:36px;color:#8f866f;line-height:1;animation:sc-digit 6s ease-in-out infinite;}
.focus-cue{font-family:var(--font-display);font-size:16px;color:#A79C87;margin-top:16px;}
.focus-foot{position:absolute;left:0;right:0;bottom:44px;text-align:center;}
.focus-foot-chip{display:inline-flex;align-items:center;gap:7px;color:#6b6455;font-size:13px;margin-bottom:12px;}
.focus-foot-chip .mono{letter-spacing:.05em;}
.focus-foot-hint{font-size:12px;color:#7c745f;letter-spacing:.04em;cursor:pointer;}
@media (prefers-reduced-motion: reduce){ .focus-halo,.focus-enso-breathe,.focus-digit{animation:none;} .focus-enso .enso-arc{transition:none;} }

/* v3 — consumption forecast */
.forecast-line{font-size:12px;color:var(--ink-soft);margin-top:6px;line-height:1.45;}
.forecast-line b{color:var(--ink);}

/* v3 — vendor manager */
.vendor-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.vendor-row input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-size:13px;}
.vendor-count{font-size:11px;color:var(--ink-soft);white-space:nowrap;font-family:var(--font-mono);}

/* ============================================================================
   WS1 — SlowCup Wrapped: swipeable seasonal-wash story cards (v3.64)
   Horizontal CSS scroll-snap; the only JS is dot-tracking + share (bindDynamic).
   ============================================================================ */
.wrap{margin-top:6px;}
.wrap-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px;}
.wrap-head-brand{display:flex;align-items:center;gap:7px;}
.wrap-head-brand svg{width:16px;height:16px;color:var(--jade);}
.wrap-head-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.wrap-close{background:none;border:none;font-size:20px;line-height:1;color:var(--ink-soft);padding:2px 6px;}

.wrap-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;height:clamp(440px,72vh,592px);border-radius:16px;}
.wrap-track::-webkit-scrollbar{display:none;}
.wrap-card{flex:0 0 100%;scroll-snap-align:center;height:100%;box-sizing:border-box;padding:26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden;border-radius:16px;}
.wrap-card + .wrap-card{margin-left:10px;}
.wf-jade{background:var(--wc-jade);color:var(--wc-jade-fg);}
.wf-amber{background:var(--wc-amber);color:var(--wc-amber-fg);}
.wf-por{background:var(--wc-por);color:var(--wc-por-fg);}

.wrap-cat{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;position:relative;}
.wf-jade .wrap-cat{color:var(--wc-jade-soft);}
.wf-amber .wrap-cat{color:var(--wc-amber-soft);}
.wf-por .wrap-cat{color:var(--wc-por-soft);}
.wrap-body{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;}
.wrap-foot{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;position:relative;}
.wf-jade .wrap-foot{color:var(--wc-jade-soft);}
.wf-amber .wrap-foot{color:var(--wc-amber-soft);}
.wf-por .wrap-foot{color:var(--wc-por-line);}

.wrap-display{font-family:var(--font-display);font-weight:700;line-height:1.15;text-wrap:pretty;}
.wrap-sub{font-size:13px;line-height:1.55;margin-top:10px;}
.wf-jade .wrap-sub{color:var(--wc-jade-soft);}
.wf-amber .wrap-sub{color:var(--wc-amber-soft);}
.wf-por .wrap-sub{color:var(--wc-por-soft);}
.wrap-sub-mono{font-family:var(--font-mono);font-size:11px;margin-top:14px;}
.wf-jade .wrap-sub-mono{color:var(--wc-jade-soft);}
.wf-amber .wrap-sub-mono{color:var(--wc-amber-soft);}
.wf-por .wrap-sub-mono{color:var(--wc-por-soft);}

/* cover */
.wrap-enso-bg{position:absolute;right:-38px;top:70px;width:236px;height:236px;color:var(--wc-enso);opacity:.2;}
.wrap-cover-title{font-size:clamp(44px,13vw,52px);line-height:1.0;}
.wrap-cover-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:none;margin-top:16px;color:var(--wc-jade-soft);}
.wrap-cover-foot{display:flex;align-items:center;justify-content:space-between;position:relative;}
.wrap-cover-foot span{font-family:var(--font-mono);font-size:10px;color:var(--wc-jade-soft);}

/* big mono number (sessions / discoveries) */
.wrap-bignum{display:flex;align-items:baseline;gap:10px;}
.wrap-big{font-family:var(--font-mono);font-size:clamp(64px,20vw,84px);font-weight:600;line-height:.78;}
.wf-por .wrap-big{color:var(--wc-leaf);}
.wrap-big-unit{font-family:var(--font-mono);font-size:13px;}
.wf-por .wrap-big-unit{color:var(--wc-por-soft);}
.wrap-lead{font-size:clamp(21px,6vw,24px);margin-top:22px;}
.wrap-lead-sm{font-weight:500;font-size:17px;margin-top:18px;line-height:1.35;}

/* time at the table */
.wrap-hero{font-size:clamp(44px,13vw,52px);line-height:.95;}
.wrap-hero-lead{font-weight:500;font-size:21px;margin-top:12px;line-height:1.3;}

/* companion */
.wrap-teaname{font-size:clamp(24px,7vw,27px);}
.wrap-count{display:flex;align-items:baseline;gap:8px;margin-top:20px;}
.wrap-x{font-family:var(--font-mono);font-size:44px;font-weight:600;color:var(--wc-enso);line-height:.8;}
.wrap-x-sub{font-family:var(--font-mono);font-size:12px;color:var(--wc-jade-soft);}

/* rhythm bars */
.wrap-bars{display:flex;align-items:flex-end;gap:10px;height:76px;margin-top:20px;}
.wrap-bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
.wrap-bar-slot{height:100%;display:flex;align-items:flex-end;}
.wrap-bar-fill{width:100%;background:var(--wc-bar);border-radius:4px 4px 0 0;min-height:3px;}
.wrap-bar-lbl{font-family:var(--font-mono);font-size:8.5px;color:var(--wc-por-soft);text-align:center;margin-top:5px;}

/* discoveries */
.wrap-big-unit-lg{font-weight:500;font-size:19px;}
.wrap-names{font-family:var(--font-mono);font-size:11.5px;line-height:1.9;color:var(--wc-amber-soft);margin-top:20px;}
.wrap-names-more{opacity:.7;}

/* standout (plate) */
.wc-standout{padding:13px;background:var(--wc-por);}
.wrap-plate{border:1px solid var(--wc-frame);border-radius:14px;height:100%;box-sizing:border-box;padding:22px 20px;display:flex;flex-direction:column;position:relative;}
.wrap-hanko{position:absolute;top:16px;right:16px;}
.wrap-hanko svg{width:30px;height:30px;}
.wrap-plate .wrap-cat{color:var(--wc-por-soft);}
.wrap-eyebrow-clay{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);}
.wrap-standout-name{font-size:clamp(24px,7vw,27px);color:var(--wc-por-fg);margin-top:8px;}
.wrap-stars{margin-top:11px;}
.wrap-stars .stars svg{width:16px;height:16px;}
.wrap-plate .wrap-sub{color:var(--wc-por-soft);}
.wrap-plate-foot{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--wc-por-line);}

/* keep / share */
.wrap-seigaiha{position:absolute;inset:0;color:var(--wc-jade-soft);opacity:.13;}
.wrap-seigaiha svg{width:100%;height:100%;}
.wrap-keep-lines{font-size:clamp(22px,6.5vw,24px);line-height:1.32;}
.wrap-keep-tag{font-weight:500;font-size:16px;color:var(--wc-jade-soft);margin-top:16px;}
.wrap-share-wrap{position:relative;}
.wrap-share{width:100%;background:var(--wc-enso);color:#2B1206;text-align:center;border:none;border-radius:10px;padding:13px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;}
.wrap-share-note{font-family:var(--font-mono);font-size:9.5px;color:var(--wc-jade-soft);text-align:center;margin-top:9px;}

/* leaf accents on cards */
.wrap-leaf{width:24px;height:24px;color:var(--wc-leaf-lt);}
.wf-por .wrap-leaf{color:var(--wc-leaf);}
.wrap-leaf-foot{width:22px;height:22px;}

/* dot indicators */
.wrap-dots{display:flex;gap:6px;justify-content:center;align-items:center;padding:15px 0 4px;}
.wrap-dot{width:6px;height:6px;border-radius:3px;background:var(--line);border:none;padding:0;transition:width .2s,background .2s;}
.wrap-dot.active{width:20px;background:var(--wc-enso);}

/* ============================================================================
   WS2 — Insights: the reflective room (v3.65). One hero observation, then quieter
   readings separated by hairline top-borders (not boxed same-weight cards). A tiny
   shared data-viz family: one stroke weight, one palette, no axes. Observations in
   Shippori, numbers in the ledger mono. Rendered as insights-surface dashLayout cards.
   ============================================================================ */
.ins-hero{background:var(--jade-pale);border-radius:15px;padding:16px 15px;}
.ins-hero-eyebrow{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--jade);opacity:.85;}
.ins-hero-title{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,6.2vw,25px);line-height:1.18;color:var(--ink);margin-top:6px;}
.ins-hero-sub{font-size:12px;color:var(--ink-soft);margin-top:9px;line-height:1.45;}
.ins-bars{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:14px;}
.ins-bar{flex:1;background:var(--jade);border-radius:2px 2px 0 0;min-height:3px;}

/* hairline-separated observation sections */
.ins-sec{border-top:1px solid var(--line);padding-top:14px;margin-top:16px;}
.ins-obs{font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.35;color:var(--ink);}
.ins-cap{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-soft);margin-top:2px;}
.ins-spark{width:100%;height:32px;margin-top:8px;display:block;}
.ins-shape{width:100%;height:38px;margin-top:8px;display:block;}

/* type distribution — one slim stacked bar in the fixed type colors + mono legend */
.ins-typebar{height:10px;border-radius:6px;overflow:hidden;display:flex;margin-top:10px;}
.ins-typebar span{display:block;height:100%;}
.ins-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-family:var(--font-mono);font-size:9px;color:var(--ink-soft);}
.ins-legend span{display:inline-flex;align-items:center;}
.ins-sw{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px;}

/* two quiet notes — leaf (most reached-for) + hanko (highest note); not a leaderboard */
.ins-notes{display:flex;flex-direction:column;gap:12px;}
.ins-note{display:flex;align-items:center;gap:10px;}
.ins-note-ic{width:20px;height:20px;flex:0 0 auto;}
.ins-note-leaf{color:var(--jade);}
.ins-note-k{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.ins-note-v{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;}
.ins-note-v .stars svg{width:13px;height:13px;}

/* wrapped teaser — a quiet deep-jade strip (fixed both themes, like the WS1 fields) → WS1 */
.ins-teaser{margin-top:16px;background:#2A4130;border-radius:13px;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.ins-teaser-k{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#CDE0C4;}
.ins-teaser-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:#F6F2E9;margin-top:2px;}
.ins-teaser-arrow{color:#E3A15C;font-size:20px;line-height:1;}

/* social — sticky inline notice (v3.66, replaces the socialErr alert) + quiet feed "load more" */
.social-notice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--red);border-radius:12px;padding:12px 14px;margin-bottom:16px;background:var(--porcelain-dim);}
.social-notice-msg{flex:1;font-size:13px;line-height:1.5;color:var(--ink);}
.social-notice-x{background:none;border:none;color:var(--ink-soft);font-size:18px;line-height:1;padding:0 4px;cursor:pointer;}
.feed-more{text-align:center;margin:4px 0 12px;}

/* ============ WS4 Flavour ============ */
/* Capture — inline flavour chips beneath the steeping timer */
.flav-capture{margin:16px 0 4px;}
.flav-prompt{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;}
.flav-q{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);}
.flav-opt{font-size:11px;color:var(--ink-soft);}
.flav-fam{margin-bottom:13px;}
.flav-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;}
.flav-chips{display:flex;flex-wrap:wrap;gap:8px;}
.flav-chip{font-size:13.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;line-height:1;}
.flav-chip.on{background:var(--amber);border-color:var(--amber);color:var(--flav-onfg);font-weight:600;}
.flav-chip.static{cursor:default;}
.flav-chip button{background:none;border:none;color:inherit;font-size:12px;padding:0 0 0 5px;cursor:pointer;line-height:1;}
.flav-more{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--jade);font-size:14px;padding:5px 0;cursor:pointer;}
.flav-more svg,.flav-door svg{width:18px;height:18px;flex:0 0 auto;}
.flav-free{border-top:1px solid var(--line);margin-top:10px;padding-top:12px;}
.flav-door{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font-size:14px;padding:2px 0;cursor:pointer;}
.flav-freesel{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.flav-reassure{display:block;text-align:center;font-size:11px;color:var(--ink-soft);margin-top:16px;}

/* Session story — the finish summary */
.sess-story{margin-bottom:6px;}
.story-name{font-family:var(--font-display);font-weight:700;font-size:24px;margin:6px 0 4px;color:var(--ink);}
.story-meta{font-size:12px;color:var(--ink-soft);margin-bottom:14px;}
.story-tasted{margin-bottom:14px;}
.story-tasted .eyebrow{margin-bottom:8px;}
.readback-card{border:1px solid var(--line);background:var(--white);border-radius:16px;padding:14px 16px;margin-bottom:14px;}
.readback-obs{font-family:var(--font-display);font-size:16px;color:var(--ink);margin-bottom:12px;line-height:1.45;}
.readback-steps{display:flex;flex-direction:column;gap:8px;}
.readback-step{display:flex;gap:10px;align-items:baseline;}
.rb-idx{font-size:10px;color:var(--ink-soft);flex:0 0 46px;text-transform:uppercase;letter-spacing:.06em;}
.rb-chips{display:flex;flex-wrap:wrap;gap:6px;}
.rb-chip{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--porcelain-dim);color:var(--ink);}
.story-mood{background:var(--jade-pale);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--ink);}

/* History cards — flavour chip row */
.hist-chip{display:inline-flex;align-items:center;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);margin:2px 5px 0 0;}
.hist-chip.more{opacity:.7;}

/* Tea-page profile — the honesty ladder */
.flavp{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;}
.flavp-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;}
.flavp-title{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.flavp-count{font-family:var(--font-mono);font-size:11px;color:var(--amber);flex:0 0 auto;}
.flavp-badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:2px 7px;display:inline-flex;align-items:center;gap:4px;font-weight:400;}
.flavp-badge.unlocked{color:var(--amber);border-color:var(--amber);}
.flavp-badge svg{width:12px;height:12px;}
.flavp-views{display:inline-flex;gap:2px;background:var(--porcelain-dim);border-radius:8px;padding:3px;margin-bottom:14px;}
.flavp-views button{background:none;border:none;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);padding:4px 12px;border-radius:6px;cursor:pointer;}
.flavp-views button.on{background:var(--white);color:var(--ink);}
.flavp-chips{display:flex;flex-wrap:wrap;gap:8px;}
.flavp-chip{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);}
.flavp-x{color:var(--ink-soft);}
.flavp-bars{display:flex;flex-direction:column;gap:11px;}
.flavp-bar-top{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink);margin-bottom:5px;}
.flavp-track{height:8px;background:var(--porcelain-dim);border-radius:4px;overflow:hidden;}
.flavp-fill{height:100%;background:var(--jade);border-radius:4px;}
.flavp-fill.warm{background:var(--amber);}
.flavp-foot{font-family:var(--font-display);font-size:14.5px;color:var(--ink-soft);margin-top:14px;}
.flavp-radar{display:flex;justify-content:center;padding:6px 0;}
.flavp-radar svg{width:230px;max-width:100%;height:auto;}
.flavp-radar-ring,.flavp-radar-spoke{fill:none;stroke:var(--line);stroke-width:1;}
.flavp-radar-poly{fill:var(--flav-radar-fill);stroke:var(--jade);stroke-width:2;stroke-linejoin:round;}
.flavp-radar-dot{fill:var(--jade);}
.flavp-radar-label{font-family:var(--font-mono);font-size:9.5px;fill:var(--ink-soft);}
.flavp-cloud{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline;padding:4px 0;}
.flavp-cloud-term{color:var(--ink);line-height:1.1;}

/* WS4 thumb placeholders (no emoji) — .sess-thumb.shelf-ph needs (0,2,0) to beat .sess-thumb's bg */
.sess-thumb.shelf-ph{background:repeating-linear-gradient(135deg,var(--ph-a,#E7E0CE),var(--ph-a,#E7E0CE) 7px,var(--ph-b,#EFE9DA) 7px,var(--ph-b,#EFE9DA) 14px);}
.sess-thumb.shelf-kanji span{font-size:20px;}
.vessel-thumb.is-ph{background:repeating-linear-gradient(135deg,var(--porcelain-dim),var(--porcelain-dim) 6px,var(--white) 6px,var(--white) 12px);}