/* teacha
   Phone first: one column, bottom tab bar, sheets slide up. From 900px the tab bar becomes a side rail and sheets open as a right-hand drawer. */


*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--sans);font-variation-settings:"SOFT" 100;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--green-text)}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s{width:16px;height:16px}
svg.i.f{fill:currentColor;stroke:none}
.muted{color:var(--muted)}
.small{font-size:0.7813rem}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- shell */
#app{display:flex;flex-direction:column;height:100%}
main{flex:1;min-height:0;position:relative}
.pane{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 calc(var(--nav) + 36px + env(safe-area-inset-bottom))}
.pane-in{max-width:760px;margin:0 auto;padding:0 16px}
.banner{margin:8px 16px 0;padding:10px 12px;border-radius:var(--r-xs);background:var(--fill);color:var(--ink-2);font-size:0.8125rem;display:flex;gap:8px;align-items:flex-start;padding-top:max(10px,env(safe-area-inset-top))}

/* bottom tabs (rail from 900px) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 8px env(safe-area-inset-bottom)}
.tabs-in{max-width:560px;margin:0 auto;height:var(--nav);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:6px 0 0;border:0;background:none;color:var(--muted);font-size:0.75rem;font-weight:500;text-decoration:none}
.tab svg.i{width:23px;height:23px}
.tab[aria-current="page"]{color:var(--leaf);font-weight:600}
.tab-fab{position:relative;display:flex;justify-content:center}
.fab{position:relative;width:58px;height:58px;margin-top:-22px;border:0;border-radius:50%;background:var(--seal);color:var(--on-seal);display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg),0 10px 20px -8px rgba(194,59,38,.6)}
.fab svg.i{width:27px;height:27px;stroke-width:1.9}
.fab-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--leaf);border:2px solid var(--seal)}
.fab-label{display:none;margin-top:4px;font-size:0.75rem;font-weight:600;color:var(--ink);white-space:nowrap}

/* ---------------------------------------------------------------- page headers */
.head{padding:22px 0 0}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title{font-family:var(--serif);font-weight:450;font-size:2.5rem;line-height:1.1;letter-spacing:-.01em;color:var(--deep)}
.sub{margin-top:8px;font-size:0.8438rem;color:var(--muted)}
.head-acts{display:flex;gap:8px;flex:none}
.rbtn{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--deep);box-shadow:var(--shadow);display:grid;place-items:center;flex:none}
:root[data-theme="dark"] .rbtn{box-shadow:inset 0 0 0 1px var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rbtn{box-shadow:inset 0 0 0 1px var(--line)}}
.rbtn .dot,.icon-btn .dot{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--deep);color:var(--on-deep);font-size:0.75rem;font-weight:700;line-height:18px;text-align:center}
.h-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 10px;font-size:0.75rem;font-weight:600;line-height:1.333;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.h-label .link{letter-spacing:0;text-transform:none}
.h-label:has(.link){margin-bottom:14px}
.h-label:first-child{margin-top:8px}

/* ---------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:0.9063rem;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--line-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.03)}
.btn.deep{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn.ghost{border-color:transparent;background:none}
.btn.danger{color:var(--danger);border-color:transparent;background:var(--danger-soft)}
.btn.sm{height:36px;padding:0 12px;font-size:0.8438rem;border-radius:12px}
.btn.lg{height:56px;font-size:1rem;border-radius:var(--r-md)}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:default}
.btn[aria-pressed="true"]{background:var(--green-soft);border-color:transparent;color:var(--green-text)}
.link{background:none;border:0;padding:0;color:var(--green-text);font-weight:600;font-size:0.8438rem;text-decoration:none}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--fill);color:var(--deep);flex:none}
.icon-btn.sm{width:36px;height:36px}
.search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-sm);background:var(--fill);color:var(--muted)}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--green)}
.search input{flex:1;min-width:0;align-self:stretch;border:0;background:none;outline:none;color:var(--ink);font-size:1rem}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:0 16px 2px}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--fill);color:var(--ink);font-size:0.875rem;font-weight:500;white-space:nowrap}
.pill small{font-size:0.7813rem;color:var(--muted)}
.pill[aria-pressed="true"]{background:var(--cta);color:var(--on-cta);font-weight:600}
.pill[aria-pressed="true"] small{color:inherit;opacity:.75}
.pill .fd{width:9px;height:9px}
.chips{display:flex;gap:10px 8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:0;background:var(--fill);color:var(--ink);font-size:0.8438rem;font-weight:500;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--cta);color:var(--on-cta);font-weight:600}
.chip.sm{height:30px;padding:0 11px;font-size:0.8125rem}
.chip .fd{width:9px;height:9px}
.segs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:12px;background:var(--fill)}
.segs button{height:36px;border:0;border-radius:9px;background:none;color:var(--muted);font-size:0.8438rem;font-weight:500;white-space:nowrap;padding:0 8px}
.segs button[aria-pressed="true"],.segs button[aria-selected="true"]{background:var(--surface);color:var(--deep);font-weight:600;box-shadow:0 1px 3px rgba(30,32,36,.12)}
.segs.sm button{height:30px;font-size:0.8125rem}

.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips.scroll::-webkit-scrollbar{display:none}
.ttile-img,.ttile-b,.trow-extra,.li .t,.li .s{display:block}
.legend i{display:inline-block}
.sheet-foot .btn.lg:not(.primary){flex:none}

/* family dot */
.fd{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--fc)}
.f-green{--fc:var(--f-green)} .f-yellow{--fc:var(--f-yellow)} .f-white{--fc:var(--f-white)} .f-oolong{--fc:var(--f-oolong)} .f-dark{--fc:var(--f-dark)} .f-black{--fc:var(--f-black)}

/* rating pill, badges, stock bar */
.rate{display:inline-flex;align-items:center;gap:4px;height:auto;padding:0;border-radius:0;background:none;color:var(--ink);box-shadow:none;font-size:0.875rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rate svg.i{width:15px;height:15px;color:var(--leaf)}
.rate.none{background:none;box-shadow:none;color:var(--muted);font-weight:500;font-size:0.7813rem;padding:0}
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:999px;font-size:0.75rem;font-weight:600;background:var(--fill);color:var(--ink-2);white-space:nowrap}
.badge svg.i{width:13px;height:13px}
.badge.new{background:var(--green-soft);color:var(--green-text)}
.badge.warn{background:var(--coral-soft);color:var(--coral-text)}
.stockbar{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:0.75rem;color:var(--muted)}
.stockbar i{display:block;width:48px;height:4px;border-radius:2px;background:var(--fill);overflow:hidden;flex:none}
.stockbar i b{display:block;height:4px;border-radius:2px;background:var(--green)}
.stockbar.low i b{background:var(--f-yellow)}

/* ---------------------------------------------------------------- tea rows and tiles */
.trows{display:flex;flex-direction:column;gap:8px}
.trow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px 10px 10px;border:0;border-radius:24px;background:var(--surface);box-shadow:var(--shadow);color:inherit;text-align:left;text-decoration:none}
.trow:hover{box-shadow:var(--shadow-2)}
.th{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;display:block;background:var(--fill)}
.th.ph-leaf{display:grid;place-items:center;background:var(--green-soft);color:var(--fc)}
.th.ph-leaf svg.i{width:26px;height:26px}
.trow-main{display:flex;flex-direction:column;min-width:0}
.trow-name{font-family:var(--serif);font-weight:500;font-size:1.125rem;line-height:1.2;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trow-meta{margin-top:4px;font-size:0.8125rem;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0}
.trow-meta .fd{width:8px;height:8px}
.trow-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow-extra{margin-top:7px;font-size:0.75rem;color:var(--muted)}
.trow-extra .badge{height:22px;font-size:0.75rem}
.trow-side{display:flex;flex-direction:column;align-items:flex-end;align-self:start;gap:7px;padding-top:2px}
.trow-side .price+.price{margin-top:-6px;font-size:0.75rem}
.price{font-size:0.75rem;color:var(--muted);white-space:nowrap}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ttile{display:flex;flex-direction:column;width:100%;padding:0;border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;color:inherit;text-align:left}
.ttile-img{position:relative;aspect-ratio:1;background:var(--fill)}
.ttile-img img{width:100%;height:100%;object-fit:cover;display:block}
.ttile-img .ph-leaf{position:absolute;inset:0;display:grid;place-items:center;background:var(--green-soft);color:var(--fc)}
.ttile-img .ph-leaf svg.i{width:34px;height:34px}
.ttile-img .rate{position:absolute;left:8px;bottom:8px}
.ttile-b{padding:10px 12px 12px}
.ttile-name{font-family:var(--serif);font-weight:500;font-size:1.0313rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ttile-meta{margin-top:4px;font-size:0.7813rem;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.ttile-meta .fd{width:8px;height:8px}
.list-end{padding:18px 0 0;display:flex;justify-content:center}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.empty h3{color:var(--ink);font-family:var(--serif);font-weight:500;font-size:1.3125rem;margin-bottom:6px}
.empty p{max-width:34ch;margin:0 auto 14px}

/* horizontal shelves (home, similar teas) */
.shelf{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.shelf::-webkit-scrollbar{display:none}
.scard{flex:none;width:152px;scroll-snap-align:start;display:flex;flex-direction:column;padding:0;border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;color:inherit;text-align:left}
.scard .ttile-img{aspect-ratio:4/3}
.scard .ttile-b{padding:9px 11px 11px}
.scard .ttile-name{font-size:0.9688rem}
.scard .why{margin-top:5px;font-size:0.75rem;color:var(--green-text);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------------------------------- generic cards and lists */
.box{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:16px}
.box+.box{margin-top:10px}
.glist{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.li{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;border:0;background:none;color:inherit;text-align:left;font-size:0.9375rem;text-decoration:none}
.li+.li::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line)}
button.li:hover,a.li:hover{background:color-mix(in srgb,var(--fill) 45%,transparent)}
.li .grow{flex:1;min-width:0}
.li .t{font-weight:600;font-size:0.9063rem;line-height:1.3}
.li .s{color:var(--muted);font-size:0.7813rem;margin-top:1px}
.li .v{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.li .chev{color:var(--line-2)}
.li .th{width:44px;height:44px;border-radius:12px}
.glist .li>.th:first-child{margin-left:-6px}
.li .th.ph-leaf svg.i{width:20px;height:20px}
.drow{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:46px;padding:12px 16px;font-size:0.9375rem}
.drow+.drow::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line)}
.drow dt{color:var(--ink);flex:none;max-width:45%}
.drow dd{margin:0;color:var(--muted);text-align:right;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.drow.stack{flex-direction:column;align-items:stretch;gap:4px}
.drow.stack dd{text-align:left;color:var(--ink-2);font-size:0.9063rem;line-height:1.5}
dl.glist{margin:0}
.note{font-size:0.8125rem;color:var(--muted);margin-top:10px;line-height:1.385}
.note svg.i{vertical-align:-3px;margin-right:4px}
.callout{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--coral-soft);color:var(--coral-text);font-size:0.8438rem;line-height:1.4}
.callout.soft{background:var(--fill);color:var(--ink-2)}
.callout.mint{background:var(--green-soft);color:var(--green-text)}
.callout svg.i{flex:none;margin-top:1px}

/* ---------------------------------------------------------------- home */
.steps-mini{display:flex;gap:4px;margin-top:8px}
.steps-mini i{flex:1;height:4px;border-radius:2px;background:var(--fill)}
.steps-mini i.on{background:var(--green)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{padding:12px 14px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.tile b{display:block;font-family:var(--serif);font-weight:500;font-size:1.75rem;line-height:1.1;color:var(--deep);white-space:nowrap}
.tile span{display:block;margin-top:2px;font-size:0.7813rem;color:var(--muted)}

/* ---------------------------------------------------------------- sheets */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;animation:fade .2s ease}
.sheet{position:fixed;left:0;right:0;bottom:0;top:max(12px,env(safe-area-inset-top));z-index:41;background:var(--bg);display:flex;flex-direction:column;border-radius:var(--r-sheet) var(--r-sheet) 0 0;overflow:hidden;overflow:clip;animation:up .26s cubic-bezier(.2,.8,.2,1);box-shadow:0 -8px 30px rgba(20,24,28,.12)}
.sheet.full{top:0;border-radius:0}
.sheet::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--line-2);z-index:3}
.sheet.full::before{display:none}
/* a short sheet, sized to what it holds (phones only: computers show sheets as side panels) */
.sheet.fit{top:auto;max-height:calc(100% - max(12px,env(safe-area-inset-top)))}
.sheet.fit .sheet-body{flex:0 1 auto;padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px))}
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{animation:none}}
.sheet-head{display:flex;align-items:center;gap:10px;min-height:60px;padding:16px 12px 6px 16px;background:var(--bg)}
.sheet-head h2{flex:1;min-width:0;font-family:var(--serif);font-weight:450;font-size:1.75rem;line-height:1.15;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-body{flex:1;overflow-y:auto;padding:8px 16px 28px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet-foot{display:flex;gap:10px;align-items:center;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.sheet-foot .btn.primary,.sheet-foot .btn.grow{flex:1}
.sheet-foot .icon-btn{width:52px;height:52px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.sec{margin-bottom:6px}
.sec+.sec{margin-top:6px}

/* ---------------------------------------------------------------- tea page */
.tea-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative}
.tea-hero{position:relative;height:300px;background:var(--fill);overflow:hidden}
.tea-hero img{width:100%;height:100%;object-fit:cover;display:block}
.tea-hero .ph-leaf{position:absolute;inset:0;display:grid;place-items:center;color:var(--fc);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--fc) 16%,var(--green-soft)) 0,var(--green-soft) 70%)}
.tea-hero .ph-leaf svg.i{width:64px;height:64px;stroke-width:1.3;opacity:.8}
.hb-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:8px;padding:14px 16px 10px;padding-top:max(14px,env(safe-area-inset-top));pointer-events:none;transition:background .2s,box-shadow .2s}
.hb-bar>*{pointer-events:auto}
.hb-bar .bar-t{flex:1;min-width:0;font-family:var(--serif);font-weight:500;font-size:1.125rem;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.hb{width:44px;height:44px;border:0;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.14);background:var(--hb-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--deep);display:grid;place-items:center;flex:none}
.sheet.scrolled .hb-bar{background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.sheet.scrolled .hb-bar .bar-t{opacity:1}
.sheet.scrolled .hb{background:var(--fill)}
.tea-main{position:relative;margin-top:-28px;padding:22px 20px 24px;background:var(--bg);border-radius:28px 28px 0 0}
.eyebrow{font-size:0.75rem;line-height:1.333;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-on-bg);display:flex;align-items:center;gap:7px}
.eyebrow .fd{width:8px;height:8px}
.tea-title{margin:6px 0 8px;font-family:var(--serif);font-weight:450;font-size:2.25rem;line-height:1.11;letter-spacing:-.01em;color:var(--deep)}
.tea-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:0.8438rem;color:var(--muted)}
.tea-meta span{display:inline-flex;align-items:center;gap:4px}
.tea-meta svg.i{width:15px;height:15px}
.tea-tabs{position:sticky;top:68px;z-index:4;margin:16px -4px 0;padding:0 4px}
.tea-tabs .segs{box-shadow:0 0 0 4px var(--bg)}
.tea-panel{padding-top:2px;min-height:calc(100vh - 230px)}
.tea-panel .h-label:first-child{margin-top:22px}
.legend{display:flex;align-items:center;gap:12px;font-size:0.75rem;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:500}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend .sw-y{width:12px;height:12px;border-radius:3px;background:var(--green-soft);border:2px solid var(--green)}
.legend .sw-t{width:14px;border-top:2px dashed var(--muted)}
.legend .sw-b{width:14px;border-top:2px dashed var(--deep)}
.hexbox{padding:6px 0 4px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.hex{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;overflow:visible}
.hex .ring,.hex .axis{fill:none;stroke:var(--line);stroke-width:1}
.hex .typ{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4}
.hex .typ.only{fill:var(--green-soft);fill-opacity:.7;stroke:var(--green);stroke-dasharray:4 4}
.hex .mine{fill:var(--green);fill-opacity:.25;stroke:var(--green);stroke-width:2;stroke-linejoin:round}
.hex .other{fill:none;stroke:var(--deep);stroke-width:2;stroke-dasharray:6 4}
.hex .pt{fill:var(--green);stroke:var(--surface);stroke-width:1.5}
.hex .lbl{font:400 0.75rem var(--sans);fill:var(--muted)}
.hex .lbl tspan{font-weight:700;fill:var(--deep)}
.hex-cap{margin:8px 0 0;font-size:0.7813rem;color:var(--muted);text-align:center;padding:0 16px 10px}
.notes{display:flex;flex-wrap:wrap;gap:6px}
.nchip{display:inline-flex;align-items:center;gap:5px;font-size:0.8438rem;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--green-soft);color:var(--green-text)}
.nchip.typ{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.nchip small{font-weight:700;opacity:.8}
.nchip svg.i{width:13px;height:13px}
.prose{font-size:0.9375rem;line-height:1.55;color:var(--ink)}
.prose+.prose{margin-top:8px}
.vnotes{margin-top:12px}
.origin-card{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.origin-card .minimap{margin:0;border:0;border-radius:0}
.origin-foot{display:flex;align-items:center;gap:12px;padding:12px 14px 14px}
.origin-foot .grow{flex:1;min-width:0}
.origin-foot b{display:block;font-size:0.9375rem;font-weight:600;line-height:1.3}
.origin-foot span{display:block;font-size:0.8125rem;color:var(--muted);margin-top:1px}
.tea-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.brews{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.brew{border-radius:var(--r-md);padding:12px 14px;background:var(--surface);box-shadow:var(--shadow)}
.brew b{font-size:0.875rem;display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.brew .vals{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin-top:8px;font-size:0.8438rem;color:var(--ink-2);align-items:center}
.brew .vals svg.i{width:15px;height:15px;color:var(--muted)}
.brew.best{background:var(--green-soft);box-shadow:none}
.brew.best b,.brew.best .vals,.brew.best .vals svg.i{color:var(--green-text)}
.tag-typ{font-size:0.75rem;color:var(--muted);font-weight:500}

/* origin mini map */
.minimap{position:relative;display:block;width:100%;padding:0;border:0;background:var(--map-sea);cursor:pointer;color:inherit;text-align:left}
.mm{display:block;width:100%;height:auto;aspect-ratio:640/300}
.mm-sea{fill:var(--map-sea)}
.mm-grat{fill:none;stroke:var(--map-border);stroke-width:1;opacity:.6}
.mm-land{fill:var(--map-land);stroke:var(--map-coast);stroke-width:1.2;stroke-linejoin:round}
.mm-land.on{fill:var(--map-land-on)}
.mm-drop{fill:var(--fc);stroke:var(--surface);stroke-width:3}
.mm-hole{fill:var(--surface)}
.mm-shadow{fill:var(--shade);opacity:.16}
.mm-approx{fill:var(--fc);fill-opacity:.12;stroke:var(--fc);stroke-width:2.5;stroke-dasharray:7 6}
.mm-dot{fill:var(--fc);stroke:var(--surface);stroke-width:3}
.mm-label{font:600 1.5rem var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--map-sea);stroke-width:7px;stroke-linejoin:round}
.mm-sub{font:500 1.1875rem var(--sans);fill:var(--ink-2);paint-order:stroke;stroke:var(--map-sea);stroke-width:6px;stroke-linejoin:round}
.mm-gsea{fill:var(--surface)}
.mm-gland{fill:var(--line-2)}
.mm-gland.on{fill:var(--fc)}
.mm-gdot{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.mm-gring{fill:none;stroke:var(--line-2);stroke-width:2}

/* photos */
.ph-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.ph-row::-webkit-scrollbar{display:none}
.ph{position:relative;flex:none;width:96px;height:96px;border-radius:var(--r-sm);overflow:hidden;border:0;background:var(--fill);padding:0;color:var(--muted);font-size:0.7813rem;font-weight:500;cursor:pointer}
div.ph{cursor:default}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-lab{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.58);color:var(--on-photo);font-size:0.75rem;font-weight:600}
.ph.add{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ph.add svg.i{width:22px;height:22px}
.photo-view{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);display:grid;place-items:center}
.photo-view img{max-width:100%;max-height:100%}
.photo-view .icon-btn{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;background:rgba(255,255,255,.14);color:var(--on-photo)}
.photo-view .pv-rm{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--surface);color:var(--danger)}

/* ---------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.field>.lab{font-size:0.9375rem;line-height:1.333;font-weight:600;color:var(--ink)}
.field .hint{font-size:0.8125rem;line-height:1.385;color:var(--muted)}
.inp,.sel,textarea.inp{width:100%;height:52px;padding:0 14px;border-radius:14px;border:1px solid transparent;background:var(--fill);font-size:1rem;color:var(--ink)}
textarea.inp{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.45}
.inp:focus,.sel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.stepper{display:flex;align-items:center;height:46px;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.stepper button{width:44px;height:100%;border:0;background:none;font-size:1.25rem;color:var(--ink-2)}
.stepper button:active{background:var(--fill)}
.stepper input{flex:1;min-width:0;align-self:stretch;width:100%;border:0;background:none;text-align:center;font-weight:600;font-size:1.0625rem;font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield;color:var(--ink)}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper .u{font-size:0.7813rem;color:var(--muted);margin-right:2px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px}
.toggle+.toggle{border-top:1px solid var(--line)}
.toggle b{font-size:0.9375rem;font-weight:500}
.switch{position:relative;width:50px;height:30px;border-radius:15px;border:0;background:var(--line-2);flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch[aria-checked="true"]{background:var(--green)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.switch:disabled{opacity:.5}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--fill)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--fill)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;margin-top:-10px;background:var(--surface);border:2px solid var(--line-2);box-shadow:0 1px 3px rgba(0,0,0,.15)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
input[type=range].mine::-webkit-slider-thumb{border-color:var(--green);background:var(--green)}
input[type=range].mine::-moz-range-thumb{border-color:var(--green);background:var(--green)}
.slider{margin-bottom:12px}
.slider-top{display:flex;justify-content:space-between;align-items:baseline;font-size:0.875rem;font-weight:600}
.slider-top span{font-weight:500;color:var(--muted);font-size:0.7813rem}
.slider-ends{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--muted);margin-top:-2px}
.stars{display:flex;gap:6px;touch-action:none;user-select:none;width:max-content}
.stars svg{width:44px;height:44px;stroke:var(--leaf);stroke-width:1.5;fill:none;stroke-linejoin:round}
.stars svg .half{fill:var(--leaf);stroke:none}
.stars svg.on{fill:var(--leaf)}
.rating-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rating-val{font-family:var(--serif);font-size:2.125rem;font-weight:500;color:var(--deep)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border-radius:999px;font-size:0.8438rem;font-weight:500;border:0;background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.tag.mine{box-shadow:none;background:var(--green-soft);color:var(--green-text);font-weight:600}
.tag.add{box-shadow:none;background:var(--fill);color:var(--ink)}
.wheel{border-radius:var(--r-md);padding:12px;margin-top:10px;background:var(--surface);box-shadow:var(--shadow)}
.wheel .pills{margin:0 -12px 10px;padding:0 12px 2px}
details.more{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);margin-top:14px}
details.more>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;font-size:0.9063rem;display:flex;justify-content:space-between;align-items:center}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary svg{transform:rotate(180deg)}
details.more>.in{padding:0 16px 16px}
.total{display:flex;align-items:baseline;justify-content:space-between;padding:10px 12px;border-radius:12px;background:var(--fill);margin-top:6px}
.total b{font-family:var(--serif);font-weight:500;font-size:1.5rem}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photo{position:relative;width:88px;height:88px;border-radius:12px;overflow:hidden;background:var(--fill)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo button{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:none;color:var(--on-photo);display:grid;place-items:center}
.photo button::before{content:"";position:absolute;top:9px;left:9px;width:26px;height:26px;border-radius:13px;background:rgba(0,0,0,.55)}
.photo button svg{position:relative;width:14px;height:14px}
.add-photo{width:88px;height:88px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--surface);display:grid;place-items:center;color:var(--muted);cursor:pointer}

/* ---------------------------------------------------------------- tasting flow */
.tf-head{padding:16px 12px 10px 16px;background:var(--bg)}
.tf-top{display:flex;align-items:center;gap:12px}
.tf-top .grow{flex:1;min-width:0}
.tf-top .th{width:44px;height:44px;border-radius:12px}
.tf-top .th.ph-leaf svg.i{width:20px;height:20px}
.tf-name{font-family:var(--serif);font-weight:500;font-size:1.1875rem;line-height:1.15;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-sub{font-size:0.7813rem;color:var(--muted)}
.tf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.tf-step{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0;background:none;color:var(--muted);font-size:0.75rem;font-weight:600;text-align:left}
.tf-step i{display:block;width:100%;height:4px;border-radius:2px;background:var(--fill)}
.tf-step[aria-current="step"]{color:var(--deep)}
.tf-step.done i,.tf-step[aria-current="step"] i{background:var(--green)}
.tf-step.done{color:var(--ink-2)}
.guide-card{border-radius:24px;padding:16px;background:var(--surface);box-shadow:var(--shadow)}
.guide-card+.guide-card{margin-top:10px}
.gk{display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-on-bg)}
.gk .gi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-text)}
.gk .gi svg.i{width:15px;height:15px}
.gq{margin-top:8px;font-family:var(--serif);font-weight:500;font-size:1.1875rem;line-height:1.3;color:var(--deep)}
.gt{margin-top:6px;font-size:0.9063rem;line-height:1.5;color:var(--ink-2)}
.g-this{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:0.8125rem;color:var(--muted)}
.g-tip{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--fill);font-size:0.8438rem;line-height:1.45;color:var(--ink-2)}
.g-tip .i{flex:none;margin-top:1px;color:var(--muted)}
.g-last{margin-top:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);font-size:0.8438rem;color:var(--ink-2);display:grid;gap:3px}
.g-last b{color:var(--ink)}
.g-score{font-weight:700;color:var(--ink)}
.g-note{font-style:italic}
.gsteps{list-style:none;margin:0;padding:0}
.gsteps li{position:relative;padding:0 0 14px 24px;font-size:0.9063rem;line-height:1.5;color:var(--ink-2)}
.gsteps li::before{content:"";position:absolute;left:1px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--fc)}
.gsteps li::after{content:"";position:absolute;left:5.5px;top:21px;bottom:3px;width:1px;background:var(--line-2)}
.gsteps li:last-child{padding-bottom:0}
.gsteps li:last-child::after{display:none}
.gsteps b{display:block;color:var(--ink);font-size:0.8438rem;font-weight:600;margin-bottom:1px}
.tm{display:flex;flex-direction:column;align-items:center;padding:18px 16px 16px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.tm-inf{font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dial{position:relative;width:min(64vw,248px);aspect-ratio:1;margin:12px 0 6px}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .bg{fill:none;stroke:var(--fill);stroke-width:7}
.dial .fg{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.dial.done .fg{stroke:var(--accent-edge)}
.dial .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial .t b{font-family:var(--serif);font-weight:500;font-size:clamp(44px,15vw,60px);line-height:1;color:var(--deep);font-variant-numeric:tabular-nums}
.dial .t span{margin-top:6px;font-size:0.8125rem;color:var(--muted)}
.tm-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.tm-ctl .go{width:72px;height:72px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);box-shadow:none;display:grid;place-items:center}
.tm-ctl .go svg.i{width:30px;height:30px;stroke-width:2}
.tm-ctl .go.pause{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.tm-ctl .icon-btn{width:52px;height:52px}
.tm-ctl .lab{display:block;font-size:0.75rem;font-weight:600;color:var(--muted);text-align:center;margin-top:4px}
.tm-hint{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:14px;border-radius:var(--r-md);background:var(--green-soft);color:var(--green-text);font-size:0.9063rem;line-height:1.45;font-weight:500}
.tm-hint .i{flex:none;margin-top:2px}
.infusions{margin-top:10px}
.inf{display:grid;grid-template-columns:28px 56px 1fr;gap:8px;align-items:center;padding:8px 16px;font-size:0.8438rem}
.inf+.inf{border-top:1px solid var(--line)}
.inf b{font-family:var(--serif);font-weight:500;font-size:1.125rem;color:var(--deep)}
.inf input{height:38px;border:0;border-radius:10px;background:var(--fill);padding:0 10px;font-size:0.9375rem;min-width:0;color:var(--ink)}
.brewsum{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:0.8438rem;color:var(--ink-2)}
.brewsum span{display:inline-flex;align-items:center;gap:5px}
.brewsum svg.i{width:15px;height:15px;color:var(--muted)}

/* ---------------------------------------------------------------- explore map */
.map-wrap{position:absolute;inset:0;background:var(--map-sea)}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#map .land{fill:var(--map-land);stroke:none}
#map .land.on{fill:var(--map-land-on)}
#map .borders{fill:none;stroke:var(--map-border);stroke-width:.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#map .coast{fill:none;stroke:var(--map-coast);stroke-width:.8px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
#map .lab-in{font:500 0.75rem var(--sans);fill:var(--map-label);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--map-land);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
#map .lab.on .lab-in{fill:var(--map-label-on);font-weight:600;stroke:var(--map-land-on)}
#map-measure{visibility:hidden}
#map .pin{cursor:pointer}
#map .pin .ring{fill:var(--surface);stroke:none}
#map .pin .approx{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:1.5 2.5;opacity:.8}
#map .pin text{font:700 0.75rem var(--sans);fill:var(--on-photo);text-anchor:middle;dominant-baseline:central;pointer-events:none}
#map .pin.sel .ring{fill:var(--deep)}
.map-top{position:absolute;top:0;left:0;right:0;z-index:3;padding:14px 12px 0;padding-top:max(14px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.map-top>*{pointer-events:auto}
.map-title{display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.map-title h1{font-family:var(--serif);font-weight:500;font-size:1.75rem;line-height:1.1;color:var(--deep);padding:0 4px;text-shadow:0 0 8px var(--map-sea),0 0 2px var(--map-sea)}
.map-top .segs{box-shadow:var(--shadow-2);background:var(--surface);width:max-content;max-width:100%}
.map-top .segs button[aria-pressed="true"]{background:var(--cta);color:var(--on-cta);box-shadow:none}
.map-top .pills{margin:0 -12px;padding:0 12px 4px}
.map-top .chip{box-shadow:var(--shadow-2);background:var(--surface)}
.map-top .chip[aria-pressed="true"]{background:var(--cta)}
.map-ctl{position:absolute;right:12px;bottom:calc(var(--nav) + 30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;z-index:3}
.map-ctl .icon-btn{background:var(--surface);box-shadow:var(--shadow-2)}
.map-note{position:absolute;left:12px;bottom:calc(var(--nav) + 30px + env(safe-area-inset-bottom));z-index:3;font-size:0.7813rem;color:var(--ink-2);background:var(--surface);border-radius:12px;padding:8px 12px;max-width:64%;box-shadow:var(--shadow-2)}
.map-card{position:absolute;left:12px;right:12px;bottom:calc(var(--nav) + 26px + env(safe-area-inset-bottom));z-index:4;background:var(--surface);border-radius:26px;box-shadow:var(--shadow-2);padding:14px 14px 6px;max-height:48%;overflow-y:auto;max-width:520px}
.map-card h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--deep)}
.map-card .li{padding-left:0;padding-right:0}
.map-card .li+.li::before{left:0}

/* ---------------------------------------------------------------- you */
.bar{display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;gap:10px;align-items:center;font-size:0.8438rem}
.bar>span:first-child{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .fill{height:100%;border-radius:4px;background:var(--green)}
.bar .v{color:var(--ink);font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right;font-weight:600}

.ins{margin:0;padding:0 0 0 18px;display:grid;gap:10px;font-size:0.9063rem;line-height:1.5;color:var(--ink)}
.ins li::marker{color:var(--green)}
.gpart{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.gpart:first-of-type{border-top:0;padding-top:4px}
.gp-t{font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.15;color:var(--deep)}
.gp-s{margin-top:3px;font-size:0.8438rem;color:var(--muted)}
.gpart .gq{margin-top:16px}
.gq-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:0.9063rem;font-weight:600;color:var(--ink)}
.gq-l span{font-size:0.75rem;font-weight:500;color:var(--muted)}
.gpart textarea.inp{margin-top:12px}
.goals-prof .drow.stack dd{color:var(--ink)}
.goals-prof .drow.stack dt{font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

.nx-busy{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.nx-busy .spin{width:14px;height:14px}

/* ---------------------------------------------------------------- misc */
#toast{position:fixed;left:50%;bottom:calc(var(--nav) + 34px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;background:var(--deep);color:var(--on-deep);padding:11px 16px;border-radius:14px;font-size:0.875rem;font-weight:500;box-shadow:var(--shadow-2);max-width:calc(100% - 32px);display:flex;gap:12px;align-items:center}
.modal-back{position:fixed;inset:0;z-index:70;background:var(--scrim);display:grid;place-items:center;padding:20px}
.modal{background:var(--surface);border-radius:30px;padding:22px 16px 16px;max-width:380px;width:100%;box-shadow:var(--shadow-2)}
.modal h3{font-family:var(--serif);font-weight:500;font-size:1.3125rem;color:var(--deep);margin:0 4px 6px}
.modal p{color:var(--ink-2);margin:0 4px 18px;font-size:0.9063rem}
.modal .acts{display:flex;gap:8px;justify-content:flex-end}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:40px 4px;justify-content:center}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--green);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.cmp{width:100%;border-collapse:collapse;font-size:0.875rem}
.cmp th,.cmp td{padding:10px 12px;vertical-align:top;text-align:left}
.cmp tr+tr th,.cmp tr+tr td{border-top:1px solid var(--line)}
.cmp thead th{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--deep)}
.cmp th[scope=row]{color:var(--muted);font-weight:500;width:26%}
.wrap-x{overflow-x:auto}

/* ---------------------------------------------------------------- explore: map | learn */
.hl-v{letter-spacing:0;text-transform:none;font-weight:500}
.ps-acts .btn{max-width:100%}
.ps-acts .btn span{overflow:hidden;text-overflow:ellipsis}

/* learning path */
.pstart{display:grid;gap:8px;justify-items:start}
.pstart h3{font-family:var(--serif);font-weight:500;font-size:1.3125rem;line-height:1.2;color:var(--deep);margin-top:4px}
.pstart p{font-size:0.9063rem;line-height:1.5;color:var(--ink-2)}
.ps-acts{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pbusy{display:flex;gap:12px;align-items:center}
.pbusy .spin{flex:none}
.pbusy div>b{display:block;font-weight:600;font-size:0.9063rem;color:var(--ink)}
.pbusy div>span{display:block;font-size:0.8125rem;color:var(--muted);margin-top:1px}
.ph-busy{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:0.8438rem;color:var(--muted)}
.ph-busy .spin{width:14px;height:14px}
.ps-cmp{margin-top:8px;font-size:0.875rem;line-height:1.5;color:var(--ink-2)}
.ps-cmp b{color:var(--ink);font-weight:600;margin-right:2px}
.pc-learn{margin-top:6px;font-size:0.9063rem;line-height:1.5;color:var(--ink)}
.pcard.done .btn{margin-top:12px}
.popts+.pcard.done{margin-top:10px}
.path-card .pc-learn{margin-top:8px}
.pc-look{display:flex;gap:6px;align-items:flex-start;margin-top:10px;font-size:0.8438rem;line-height:1.45;color:var(--ink-2)}
.pc-look svg.i{flex:none;margin-top:1px;color:var(--green-on-bg)}
.pnote{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);background:var(--green-soft);color:var(--green-text);font-size:0.8438rem;line-height:1.45}
.pnote>svg.i{flex:none;margin-top:1px}
.pnote b{display:block;font-weight:600}
.pnote span{display:block;margin-top:2px;color:var(--ink-2)}
.pnote .link{display:inline-block;margin-top:6px;color:var(--green-text)}
.popts{margin-top:10px;padding:14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-2)}
.popt{display:block;width:100%;margin-top:8px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:inherit;text-align:left}
.popt:hover{border-color:var(--accent-edge)}
.popt b{display:block;font-weight:600;font-size:0.9375rem;color:var(--ink)}
.popt span{display:block;margin-top:2px;font-size:0.8438rem;line-height:1.45;color:var(--ink-2)}
.po-own{margin-top:14px}
.po-own label{display:block;margin-bottom:6px;font-size:0.8125rem;font-weight:600;color:var(--ink-2)}
.po-row{display:flex;gap:8px}
.po-row .inp{flex:1;min-width:0}
.po-row .btn{flex:none}
.popts .small{margin-top:10px}

/* map of tea */
.tm-intro{font-size:0.8438rem;line-height:1.45;color:var(--muted)}
.tm-fam{padding:12px 0}
.tm-fam+.tm-fam{border-top:1px solid var(--line)}
.tm-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tm-h b{font-size:0.9063rem;font-weight:600;color:var(--ink)}
.tm-h span:last-child{margin-left:auto;font-size:0.7813rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tm-chip{gap:5px}
.tm-chip svg.i{width:14px;height:14px}
.tm-chip.on{background:var(--green-soft);color:var(--green-text);font-weight:600}
.tm-chip.other{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.tm-chip.other.on{background:var(--green-soft);box-shadow:none;color:var(--green-text)}
.tm-ctry{padding-top:12px;border-top:1px solid var(--line);font-size:0.8438rem;line-height:1.5;color:var(--ink-2)}
.tm-ctry b{display:block;margin-bottom:2px;font-size:0.9063rem;color:var(--ink)}
.lm-desc{margin:8px 0 4px}

/* words of tea */
.gl{display:inline;margin:0;padding:0;border:0;border-radius:3px;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:inherit;text-transform:inherit;cursor:pointer;
  text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--green);text-decoration-thickness:1.5px;text-underline-offset:3px}
.gl:hover{color:var(--green-text)}
.glw{white-space:nowrap}
.gl-search{margin-bottom:4px}
.gl-cat{margin:18px 0 8px;font-size:0.8125rem;font-weight:600;color:var(--ink-2)}
.gl-count{margin:10px 0 8px}
.gl-item+.gl-item{border-top:1px solid var(--line)}
.gl-item>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;cursor:pointer;font-weight:600;font-size:0.9063rem}
.gl-item>summary::-webkit-details-marker{display:none}
.gl-item>summary .grow{flex:1;min-width:0}
.gl-item>summary svg.i{flex:none;color:var(--muted);transition:transform .2s}
.gl-item[open]>summary svg.i{transform:rotate(180deg)}
.gl-item p{padding:0 16px 14px;font-size:0.9063rem;line-height:1.55;color:var(--ink-2)}
.gloss-card .eyebrow{margin-bottom:6px}
.gloss-card p{line-height:1.55}

/* the story of a tea */
.story h4{margin:16px 0 4px;font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-on-bg)}
.story h4:first-child{margin-top:0}
.story p{font-size:0.9375rem;line-height:1.6;color:var(--ink)}
.story p.story-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:0.7813rem;line-height:1.45;color:var(--muted)}
.story-ask p{margin-bottom:12px;font-size:0.9063rem;line-height:1.5;color:var(--ink-2)}

/* ---------------------------------------------------------------- phases 3 and 4 */
/* Home tools */
.gloss-card .acts{flex-wrap:wrap}
/* picker */
/* quick note */
.qn-tea{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.qn-tea .th{width:44px;height:44px;border-radius:12px}
.qn-tea .grow{flex:1;min-width:0}
.qn-tea b{display:block;font-family:var(--serif);font-weight:500;font-size:1.1875rem;line-height:1.2;color:var(--deep)}
.qn-tea span span{display:block;font-size:0.7813rem;color:var(--muted)}
.qn-notes{min-height:132px;font-size:1rem;line-height:1.5}
.qn-mic{display:flex;align-items:center;gap:6px}
.qn-mic svg.i{color:var(--green-on-bg)}
/* tips */
.tipcard{border-radius:28px;padding:16px 14px 14px;background:var(--green-soft);color:var(--ink)}
.tc-k{display:flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-text)}
.tipcard p{margin-top:6px;font-size:0.9375rem;line-height:1.5}
.tc-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:0.8125rem;color:var(--ink-2)}
.tc-try b{padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.tipcard .btn{margin-top:12px}
.tipcard .tc-note{margin-top:8px;font-size:0.7813rem;color:var(--ink-2)}
.tipcard+.h-label{margin-top:18px}
#tf-body .tipcard,#tf-body .tip-ask,#tf-body>.pbusy{margin-top:16px}
.tip-ask p{font-size:0.9063rem;line-height:1.5;color:var(--ink-2);margin-bottom:12px}
.li .tip-line{display:flex;gap:5px;align-items:flex-start;margin-top:4px;color:var(--green-text)}
.li .tip-line svg.i{flex:none;margin-top:1px;width:13px;height:13px}
/* the end of a tasting, or of a practice */
.done-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 8px 6px}
.done-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green-text)}
.done-ic svg.i{width:26px;height:26px}
.done-hero h2{font-family:var(--serif);font-weight:500;font-size:1.625rem;line-height:1.15;color:var(--deep)}
.done-score{display:flex;align-items:baseline;gap:6px;color:var(--deep)}
.done-score svg.i{width:24px;height:24px;color:var(--leaf);align-self:center}
.done-score b{font-family:var(--serif);font-weight:500;font-size:2.125rem}
.done-score span{color:var(--muted);font-size:0.875rem}
.done-path b{display:block;font-weight:600;font-size:0.9375rem}
.done-path p{margin-top:2px;font-size:0.875rem;color:var(--ink-2)}
.done-path .glist{margin-top:10px;box-shadow:none;border:1px solid var(--line)}
/* practice */
.pr-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-text)}
.qz-bar{display:flex;gap:4px;margin-top:12px}
.qz-bar i{flex:1;height:5px;border-radius:3px;background:var(--fill)}
.qz-bar i.ok{background:var(--green)}
.qz-bar i.no{background:var(--danger)}
.qz-bar i.cur{background:var(--accent-edge)}
.qz-topic{margin-top:10px;font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-on-bg)}
.qz-q{margin:8px 0 16px;font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.3;color:var(--deep)}
.qz-opts{display:grid;gap:8px}
.qz-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-align:left;font-size:0.9375rem;line-height:1.35}
.qz-opt .grow{flex:1;min-width:0}
.qz-l{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--ink-2);font-size:0.8125rem;font-weight:700}
.qz-opt.right{background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green)}
.qz-opt.right .qz-l{background:var(--green-text);color:var(--surface)}
.qz-opt.right svg.i{color:var(--green-text)}
.qz-opt.wrong{background:color-mix(in srgb,var(--danger) 10%,var(--surface));box-shadow:inset 0 0 0 2px var(--danger)}
.qz-opt.wrong .qz-l{background:var(--danger);color:var(--surface)}
.qz-opt.wrong svg.i{color:var(--danger)}
.qz-opt.dim{opacity:.55}
.qz-opt[aria-disabled="true"]{cursor:default}
.qz-fb{margin-top:14px;padding:14px 16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.qz-fb b{display:block;font-weight:700;font-size:0.9375rem}
.qz-fb.ok b{color:var(--green-text)}
.qz-fb.no b{color:var(--danger)}
.qz-fb p{margin-top:6px;font-size:0.9063rem;line-height:1.55;color:var(--ink-2)}
.qz-fb .link{display:inline-flex;align-items:center;gap:6px;margin-top:10px}
.qz-hint{flex:1;margin:0;text-align:center;font-size:0.8438rem;color:var(--muted);padding:14px 0}
.qz-links{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:10px}
.qz-fb .qz-links .link{margin-top:0}
.link.quiet{color:var(--muted)}
.qz-step{display:flex;gap:7px;align-items:flex-start;margin-top:10px;font-size:0.8438rem;line-height:1.45;color:var(--muted)}
.qz-step svg.i{flex:none;margin-top:2px}
.qz-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:2px 0 4px}
.qz-dots i{width:10px;height:10px;border-radius:50%;background:var(--fill)}
.qz-dots i.ok{background:var(--green)}
.qz-dots i.no{background:var(--danger)}
.done-hero .link{margin-top:2px}
.qz-miss{display:grid;gap:8px}
.qm-q{font-weight:600;font-size:0.9375rem;line-height:1.4;color:var(--ink)}
.qm-a{display:flex;gap:7px;align-items:flex-start;margin-top:8px;font-size:0.9063rem;font-weight:600;color:var(--green-text)}
.qm-a svg.i{flex:none;margin-top:2px}
.qm-why{margin-top:6px;font-size:0.875rem;line-height:1.5;color:var(--ink-2)}
/* what you know, styles tasted and aromas named, on You */
.kn-d{font-size:0.8438rem;font-weight:600;color:var(--green-text)}
.kn-spark{display:block;width:100%;height:40px;margin:10px 0 0;color:var(--green)}
.kn-rows,.st-rows{display:flex;flex-direction:column;margin:10px -8px 0}
.kn-row,.st-row{display:grid;align-items:center;gap:10px;min-height:42px;padding:4px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font-size:0.9063rem;text-align:left;width:100%}
.kn-row{grid-template-columns:minmax(0,10.5em) minmax(0,1fr) 2.2em 16px}
.st-row{grid-template-columns:4.6em minmax(0,1fr) auto 16px;min-height:44px}
.kn-row:hover,.st-row:hover{background:var(--fill)}
.kn-row svg.i,.st-row svg.i{color:var(--muted)}
.kn-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kn-track{height:8px;border-radius:4px;background:var(--green-soft);overflow:hidden}
.kn-track i{display:block;height:100%;border-radius:4px;background:var(--green)}
.kn-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.st-dots{display:flex;flex-wrap:wrap;gap:6px}
.st-dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.st-dots i.on{background:var(--fc);box-shadow:none}
.st-n{font-size:0.8125rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ar-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ar-row{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:10px;align-items:start;font-size:0.9063rem}
.ar-row > span:first-child{padding-top:5px;color:var(--ink-2)}
.ar-chips{display:flex;flex-wrap:wrap;gap:6px}
.ar-chips span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--fill);font-size:0.8438rem;color:var(--ink)}
.facts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.facts li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow);font-size:0.9375rem;line-height:1.5}
.facts li svg.i{flex:none;margin-top:4px;color:var(--green-text)}
/* weekly recap */
.rc-nav{display:flex;gap:8px;margin-left:auto}
.rc-range{margin:0 0 12px;font-size:0.875rem;color:var(--ink-2)}
.rc-strip{padding:12px}
.dstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:100%}
.ds{display:flex;flex-direction:column;align-items:center;gap:5px}
.ds-d{font-size:0.75rem;font-weight:600;color:var(--muted)}
.ds-c{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--ink);font-size:0.8125rem;font-weight:700;font-variant-numeric:tabular-nums}
.ds.on .ds-c{background:var(--green-soft);color:var(--green-text);box-shadow:inset 0 0 0 2px var(--green)}
.ds.today .ds-c{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--green)}
.ds.on.today .ds-c{box-shadow:inset 0 0 0 2px var(--green),0 0 0 2px var(--surface),0 0 0 4px var(--green)}
.ds.fut .ds-c{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.ds-q{width:5px;height:5px;border-radius:50%;background:transparent}
.ds-q.on{background:var(--accent-edge)}
.rc-strip+.tiles{margin-top:10px}
.tiles+.rc-note,.tiles+.pbusy,.tiles+.tip-ask,.tiles+.note{margin-top:10px}
.rc-note p{font-size:0.9375rem;line-height:1.6;color:var(--ink)}
.rc-note .rc-next{margin-top:10px;font-size:0.9063rem;color:var(--ink-2)}
.rc-note .rc-next b{display:block;color:var(--green-text);font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}
.rc-note p.story-note{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:0.7813rem;color:var(--muted)}
.rc-hl .chips{margin-top:6px}
/* Ask Claude */
.ask-body{display:flex;flex-direction:column}
.msgs{display:flex;flex-direction:column;gap:10px;padding:6px 0 4px}
.msg{max-width:88%;padding:10px 14px;border-radius:18px;font-size:0.9375rem;line-height:1.5;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--fill);color:var(--ink);border-bottom-right-radius:6px}
.msg.cl{align-self:flex-start;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);border-bottom-left-radius:6px}
.msg.cl p+p,.msg.cl p+ul,.msg.cl ul+p,.msg.cl p+ol,.msg.cl ol+p{margin-top:8px}
.msg.cl ul,.msg.cl ol{margin:0;padding-left:20px}
.msg.cl li+li{margin-top:4px}
.msg.err{background:color-mix(in srgb,var(--danger) 9%,var(--surface));color:var(--ink)}
.msg.err .link{margin-top:6px;display:inline-block}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite both}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}}
.tref{display:inline-flex;align-items:center;gap:5px;margin:0 1px;padding:0 8px;height:26px;vertical-align:baseline;border:0;border-radius:999px;background:var(--green-soft);color:var(--green-text);font:inherit;font-size:0.875rem;font-weight:600}
.tref .fd{width:7px;height:7px}
.ask-empty{padding:8px 0}
.ask-empty p{font-size:0.9375rem;line-height:1.5;color:var(--ink-2)}
.ask-sug,.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ask-sug .chip,.ask-chips .chip{height:auto;min-height:36px;padding:8px 13px;white-space:normal;text-align:left;line-height:1.3}
.ask-chips{margin-top:0}
.ask-bar{display:flex;align-items:flex-end;gap:8px;width:100%}
.ask-bar textarea{flex:1;min-width:0;min-height:48px;max-height:132px;padding:12px 14px;border:1px solid var(--line-2);border-radius:22px;background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;line-height:1.4;resize:none}
.ask-bar textarea:focus{outline:none;border-color:var(--accent-edge);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)}
.sheet-foot .icon-btn.ask-send{width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--on-cta)}
.sheet-foot .icon-btn.ask-send:disabled{opacity:.45}
/* scan a label */
.scan-lead{margin:2px 0 18px;font-size:0.9375rem;line-height:1.5;color:var(--ink-2)}
.scan-src{display:flex;flex-direction:column;gap:10px}
.scan-src .btn{gap:10px}
.scan-ph{display:block;overflow:hidden;border-radius:var(--r-md);background:var(--fill)}
.scan-ph img{display:block;width:100%;height:100%;object-fit:cover}
.scan-ph.big{width:100%;max-height:260px;aspect-ratio:4/3;margin-bottom:12px}
.scan-ph.sm{flex:none;width:76px;height:76px}
.scan-top{display:flex;gap:14px;align-items:center}
.scan-top .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.scan-name{font-family:var(--serif);font-weight:500;font-size:1.3125rem;line-height:1.2;color:var(--deep)}
.scan-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.scan-none p{margin-bottom:10px;color:var(--ink-2)}
.scan-cues h4{margin:12px 0 4px;font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-on-bg)}
.scan-cues h4:first-child{margin-top:0}
.scan-cues ul{margin:0;padding-left:18px}
.scan-cues li,.scan-cues p{font-size:0.9375rem;line-height:1.5}
.scan-note{margin-top:14px}

.icon-btn:disabled{opacity:.35;cursor:default}

/* ---------------------------------------------------------------- Today · Taste · Teas · Learn · Me */
.segs button small{margin-left:5px;font-size:0.75rem;font-weight:500;color:var(--muted)}
.h-label .rbtn.sm{width:36px;height:36px;margin:-8px 0}
.h-label .kn-d{letter-spacing:0;text-transform:none}
/* Today: the week, one next thing, two tiles */
.wkstrip{display:block;width:100%;margin:16px 0 0;padding:12px 8px 10px;border:0;border-radius:28px;background:var(--surface);box-shadow:var(--shadow);color:inherit}
.hero{margin-top:16px;padding:16px 16px 14px;border-radius:26px;background:var(--green-soft);color:var(--green-text)}
.hero-img{position:relative;display:block;flex:none;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px var(--surface);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-img .ph-leaf{position:absolute;inset:0;display:grid;place-items:center;color:var(--fc);background:var(--surface)}
.hero-img .ph-leaf svg.i{width:30px;height:30px;stroke-width:1.4;opacity:.85}
.hero-top{display:flex;gap:14px;align-items:flex-start}
.hero-b{flex:1;min-width:0}
.hero-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface);color:var(--green-text)}
.hero-ic svg.i{width:24px;height:24px}
.hero-t{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:1.5625rem;line-height:1.15;letter-spacing:-.01em;color:var(--green-text)}
.hero-l{margin-top:6px;font-size:0.9063rem;line-height:1.45;color:var(--green-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero .steps-mini{margin-top:12px}
.hero-acts{display:flex;gap:8px;margin-top:16px}
.hero-acts .btn{min-width:0}
.hero-acts .btn.primary{flex:1}
@media (min-width:640px){
  .hero:not(.plain){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .hero:not(.plain) .hero-img{aspect-ratio:auto;height:100%;max-height:none;min-height:230px}
  .hero:not(.plain){border-radius:32px}
  .hero:not(.plain) .hero-b{align-self:end;padding:22px 18px 18px}
}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.mini{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:14px;border:0;border-radius:26px;background:var(--surface);box-shadow:var(--shadow);color:inherit;text-align:left}
.mini-top{display:block;margin-bottom:12px}
.mini b{display:block;max-width:100%;font-size:0.9375rem;font-weight:600;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini>span:last-child{display:block;max-width:100%;margin-top:2px;font-size:0.8125rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-text)}
.mini.warn .mini-ic{background:var(--coral-soft);color:var(--coral-text)}
.mini-th{width:40px;height:40px;border-radius:12px;object-fit:cover;display:block;background:var(--fill)}
.mini-th.ph-leaf{display:grid;place-items:center;background:var(--green-soft);color:var(--fc)}
.mini-ring{position:relative;display:block;width:40px;height:40px;flex:none}
.mini-ring>span{position:absolute;inset:0;display:grid;place-items:center;font-size:0.8125rem;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
.mini-ring>span svg.i{color:var(--green-text)}
.ring{display:block;width:40px;height:40px}
.ring circle{fill:none;stroke:var(--fill);stroke-width:4}
.ring circle.on{stroke:var(--green);stroke-linecap:round}
/* the Taste button */
.tab-fab{flex-direction:column;align-items:center}
.fab{width:58px;height:58px;margin-top:-22px}
.fab-label{display:block}
.ways{display:grid;gap:8px}
.way{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 16px 10px 10px;border:0;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);color:inherit;text-align:left}
.way:disabled{opacity:.55;cursor:default}
.way .grow{flex:1;min-width:0}
.way b{display:block;font-size:0.9688rem;font-weight:600;color:var(--ink)}
.way .grow span{display:block;margin-top:1px;font-size:0.8125rem;color:var(--muted)}
.way>svg.i{color:var(--line-2)}
.way-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-text)}
.tm-again{margin:22px 0 10px}
.again{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px 4px}
.again::-webkit-scrollbar{display:none}
.ag{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;border:0;background:none;color:inherit}
.ag-img{position:relative;display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--surface)}
.ag-img img{width:100%;height:100%;object-fit:cover;display:block}
.ag-img .ph-leaf{position:absolute;inset:0;display:grid;place-items:center;background:var(--green-soft);color:var(--fc)}
.ag-n{width:100%;font-size:0.75rem;line-height:1.25;text-align:center;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Teas */
.col-segs{margin-top:16px}
#col-list .search{margin-top:10px}
.fam-pills{margin-top:10px}
.pane.map-on{overflow:hidden;padding:0}
#col-map{position:absolute;inset:0}
/* tea page: a line of facts, then how to brew it */
.tea-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:12px;font-size:0.875rem;color:var(--ink-2)}
.tl-score{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--deep)}
.tl-score svg.i{width:16px;height:16px;color:var(--leaf)}
.tl-dot{color:var(--line-2)}
.brew3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.bt{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.bt b{font-family:var(--serif);font-weight:500;font-size:1.4375rem;line-height:1.1;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bt span{font-size:0.75rem;color:var(--muted)}
.bt-src{margin-top:6px;font-size:0.75rem;color:var(--muted)}
/* Learn: practice, the path as a trail, and two ways to look things up */
.prow{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;padding:12px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);color:inherit;text-align:left}
.prow .grow{flex:1;min-width:0}
.prow b{display:block;font-size:0.9688rem;font-weight:600;color:var(--ink)}
.prow .grow span{display:block;margin-top:1px;font-size:0.8125rem;color:var(--muted)}
.prow-go{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--green-soft);color:var(--green-text);font-size:0.875rem;font-weight:600}
/* the path card: a soft card like teacha's others, rounded and padded */
.ptop{padding:16px 16px 14px;border-radius:26px}
.ptop .pseg i:not(.ok):not(.mv):not(.sk):not(.cur){background:var(--surface)}
.ptop-t{font-family:var(--serif);font-weight:500;font-size:1.4375rem;line-height:1.15;color:var(--deep)}
.ptop-n{margin-top:8px;font-size:0.7813rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ptop .ph-busy{margin-top:8px}
.pcard.done{margin-top:12px;padding:14px;border-radius:28px;background:var(--green-soft)}
.pcard.done .eyebrow{margin:2px 2px 0;color:var(--green-text)}
.pcard.done .btn{width:100%;margin-top:12px}
.trail{list-style:none;margin:14px 0 0;padding:0}
.tr{position:relative}
.tr+.tr{margin-top:8px}
.tr+.tr::before{content:"";position:absolute;left:27px;top:-8px;width:2px;height:8px;background:var(--line-2)}
.tr.done+.tr::before{background:var(--green)}
.tr-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--ink-2);font-size:0.8438rem;font-weight:700;font-variant-numeric:tabular-nums}
.tr.done .tr-n{background:var(--green-soft);color:var(--green-text)}
.tr.skip .tr-n{background:none;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--muted)}
.tr.cur .tr-n{background:var(--deep);color:var(--on-deep)}
.tr-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 20px 12px 12px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);color:inherit;text-align:left}
.tr-row .grow{flex:1;min-width:0}
.tr-row b{display:block;font-weight:600;font-size:0.9063rem;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-row .grow span{display:block;font-size:0.7813rem;color:var(--muted)}
.tr-row>svg.i{color:var(--line-2)}
.tr.skip .tr-row b{color:var(--muted)}
.tr.cur{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:26px;background:var(--surface);box-shadow:var(--shadow-2)}
.tr-card{flex:1;min-width:0}
.tr-card .eyebrow{min-height:32px}
.tr-t{margin-top:2px;font-family:var(--serif);font-weight:500;font-size:1.3125rem;line-height:1.2;color:var(--deep)}
.tr-learn{margin-top:6px;font-size:0.9063rem;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tr-teas{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tr-tea{position:relative;padding:0;border:0;background:none;border-radius:12px}
.tr-tea .th{width:52px;height:52px;border-radius:12px}
.tr-tea .th.ph-leaf svg.i{width:22px;height:22px}
.tr-tea.on .th{opacity:.6}
.tr-ok{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--cta);color:var(--on-cta);box-shadow:0 0 0 2px var(--surface)}
.tr-ok svg.i{width:12px;height:12px;stroke-width:2.6}
.tr-acts{display:flex;gap:8px;margin-top:14px}
.tr-acts .btn{min-width:0}
.tr-acts .btn.primary{flex:1}
.tr-acts .btn span{overflow:hidden;text-overflow:ellipsis}
.pm-why{margin:0 0 12px}
.pm-why+.note{margin:0 0 12px}
.step-learn{margin-top:8px}
.sheet-foot .btn.primary span{overflow:hidden;text-overflow:ellipsis}
/* Me */
.mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.mstat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:12px;border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);color:inherit;text-align:left}
.mstat b{font-family:var(--serif);font-weight:500;font-size:1.875rem;line-height:1.05;color:var(--deep);font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mstat b small{font-size:1rem;font-weight:500;color:var(--muted);margin-left:1px}
.mstat span{font-size:0.7813rem;line-height:1.3;color:var(--muted)}
.sheet-body>.mstats:first-child{margin-top:4px}
.mrows{margin-top:26px}
.mrows .li{min-height:56px;padding-left:11px}
.mrows .li+.li::before{left:57px}
.mrow-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--fill);color:var(--ink-2)}
.mrow-ic svg.i{width:18px;height:18px}
.mrow-v{flex:none;max-width:45%;font-size:0.8438rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-top .li{min-height:56px}
.set-top .segs{flex:none;width:210px}
.set-top .li+.li .segs{width:116px}
.set-top+.h-label{margin-top:22px}
.ar-chips small{margin-left:3px;font-size:0.75rem;font-weight:600;color:var(--muted)}
.aromas-t .ar-rows{margin-top:0}
.map-title .head-acts{pointer-events:auto}
.map-title .rbtn{box-shadow:var(--shadow-2)}
.map-top .pills{margin:-8px -12px -14px;padding:8px 12px 16px}
.map-top .chip{box-shadow:0 1px 3px rgba(30,32,36,.16),0 0 0 1px rgba(30,32,36,.04)}
.tl-low{display:inline-flex;align-items:center;gap:4px;color:var(--coral-text);font-weight:600}
.tl-low svg.i{width:14px;height:14px}
.kn-rows:first-child,.st-rows:first-child{margin-top:-6px}
.empty-know p{font-size:0.9063rem;line-height:1.5;color:var(--ink-2)}
.empty-know .btn{margin-top:12px}
.mstat b{font-size:1.75rem}
.sheet .mstat b{font-size:1.5rem}

.nxt{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.nxt .th{margin-top:0}
.nx-why{display:block;margin-top:6px;font-size:0.875rem;line-height:1.4;color:var(--ink)}
/* the teas a path is made of, instead of an icon */
.tstack{display:flex;align-items:center}
.tstack img{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;background:var(--surface);box-shadow:0 0 0 3px var(--surface)}
.tstack img+img{margin-left:-16px}
.sheet .popts{margin-top:0;padding:0;background:none;box-shadow:none}
.sheet .popt{border-radius:22px;padding:14px 16px;background:var(--surface);border-color:transparent;box-shadow:var(--shadow)}
.learn .duo{margin-top:26px}
.mstat,.bt{border-radius:var(--r)}
.empty-know .link{display:inline-flex;align-items:center;gap:2px;margin-top:10px}
/* numbers line up */
.price,.tea-line,.mrow-v,.segs small,.stockbar,.h-label>span:last-child,.trow-side,.ar-chips small,.ag-n,.ptop-n,.mini>span:last-child{font-variant-numeric:tabular-nums}
/* no lone words at the end of a paragraph */
p,.hero-l,.tr-learn,.mini>span:last-child,.way .grow span{text-wrap:pretty}
.hero-t,.tr-t,.ptop-t,.tea-title,.qz-q,.sheet-head h2{text-wrap:balance}
/* a tap shows: cards and buttons give a little when pressed */
.btn,.mini,.way,.tr-row,.prow,.mstat,.hero-img,.ttile,.trow,.scard,.ag,.li,.chip,.pill,.qz-opt,.rbtn,.icon-btn,.fab,.st-row,.kn-row,.tr-tea,.popt{transition:transform .12s ease,background-color .15s}
.btn:active,.rbtn:active,.icon-btn:active,.chip:active,.fab:active,.tr-tea:active{transform:scale(.96)}
.mini:active,.way:active,.tr-row:active,.prow:active,.mstat:active,.hero-img:active,.ttile:active,.trow:active,.scard:active,.ag:active,.qz-opt:active,.popt:active{transform:scale(.985)}
button.li:active,.st-row:active,.kn-row:active{background:var(--fill)}
#toast:not([hidden]){animation:toast-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.qz-opt.right{animation:pop .28s ease}
.qz-opt.wrong{animation:shake .32s ease}
@keyframes pop{40%{transform:scale(1.02)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  .btn,.mini,.way,.tr-row,.prow,.mstat,.hero-img,.ttile,.trow,.scard,.ag,.li,.chip,.pill,.qz-opt,.rbtn,.icon-btn,.fab,.st-row,.kn-row,.tr-tea,.popt{transition:none}
  .btn:active,.rbtn:active,.icon-btn:active,.chip:active,.fab:active,.tr-tea:active,.mini:active,.way:active,.tr-row:active,.prow:active,.mstat:active,.hero-img:active,.ttile:active,.trow:active,.scard:active,.ag:active,.qz-opt:active,.popt:active{transform:none}
  #toast:not([hidden]),.qz-opt.right,.qz-opt.wrong{animation:none}
}
.h-label .nx-busy{margin:0;letter-spacing:0;text-transform:none;font-weight:500}

/* ---------------------------------------------------------------- tasting in three steps: note and rating bar, a round per cup */
.tf-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.tm{padding:16px 16px 14px}
.dial{width:min(52vw,208px);margin:10px 0 4px}
.nr-btn{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:58px;height:52px;padding:0;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:0.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.nr-btn svg.i{width:20px;height:20px}
.nr-btn.on{border-color:transparent;background:var(--green-soft);color:var(--green-text)}
.nr-dot{position:absolute;top:8px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.nr-btn:active{transform:scale(.96)}
.round{margin-top:12px}
.rd-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rd-time{font-size:0.8125rem;font-weight:600;color:var(--muted)}
.round .gq{font-size:1.125rem}
.rd-parts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:0.9063rem;line-height:1.45;color:var(--ink)}
.rd-parts b{margin-right:4px;font-weight:600;color:var(--green-text)}
.rd-hint{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:0.8438rem;line-height:1.45;color:var(--ink-2)}
.rd-hint svg.i{flex:none;margin-top:2px;color:var(--green-on-bg)}
.rd-path{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--green-soft);color:var(--ink);font-size:0.8438rem;line-height:1.45}
.rd-path svg.i{flex:none;margin-top:2px;color:var(--green-text)}
.rd-path b{margin-right:3px;font-weight:600;color:var(--green-text)}
.rd-q{margin-top:18px}
.rd-l{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:0.875rem;font-weight:600;color:var(--ink)}
.rd-l small{font-size:0.75rem;font-weight:500;color:var(--muted)}
.rd-q .segs button{font-size:0.875rem}
.round .chip svg.i{width:14px;height:14px}
.round .chip[aria-pressed="true"]{background:var(--green-soft);color:var(--green-text)}
.rd-help{margin-top:8px;font-size:0.7813rem;line-height:1.45;color:var(--muted)}
.rd-help b{font-weight:600;color:var(--ink-2)}
.rd-q .inp{height:44px}
.rd-next{width:100%;margin-top:18px}
.cup .cup-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fill);font-size:0.8125rem;font-weight:700;color:var(--ink-2)}
.cup .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-focus{font-size:0.875rem!important;color:var(--ink-2)}
.tc-focus b{font-weight:600;color:var(--ink)}
.tc-busy{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:0.8125rem;color:var(--ink-2)}
.tc-busy .spin{flex:none;width:14px;height:14px}

/* ---------------------------------------------------------------- learning path: how to taste a step, where each tea stands */
.tstat,.li .s.tstat{display:flex;align-items:center;gap:5px}
.li .s.tstat{margin-top:3px}
.tstat>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tstat svg.i{flex:none;width:14px;height:14px}
.tstat.done{font-weight:600;color:var(--green-text)}
.tstat.have,.tstat.had{color:var(--ink-2)}
.tstat.buy{color:var(--coral-text)}
.tstat.prev{color:var(--muted)}
.tr-list{margin-top:12px;border:1px solid var(--line);border-radius:16px;box-shadow:none}
.tr-list .li{min-height:56px;padding:8px 12px}
.tr-list .li .th{width:40px;height:40px;border-radius:10px}
.tr-list .li+.li::before{left:12px}
.mode-box{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--green-soft);color:var(--ink-2);font-size:0.8438rem;line-height:1.45}
.mode-box b{display:flex;align-items:center;gap:6px;font-size:0.9063rem;font-weight:600;color:var(--green-text)}
.li .st-look{margin-top:3px;white-space:normal}
.pc-with{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pc-wl{font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pc-tea{display:flex;align-items:center;gap:10px}
.pc-tea .th{width:40px;height:40px;border-radius:10px}
.pc-tea .grow{display:flex;flex-direction:column;min-width:0;font-size:0.8125rem}
.pc-tea b{font-size:0.9063rem;font-weight:600;color:var(--ink)}
.rd-ref{display:block;margin-top:6px;font-size:0.8125rem;line-height:1.45;color:var(--ink-2)}
.rd-ref b{margin-right:4px;font-weight:600;color:var(--ink)}
.pc-ref{font-size:0.7813rem;line-height:1.4;color:var(--muted)}
.tr-refs{display:flex;gap:6px;align-items:flex-start;margin-top:10px;font-size:0.8125rem;line-height:1.45;color:var(--ink-2)}
.tr-refs>svg.i{flex:none;margin-top:2px;color:var(--green-on-bg)}
.tr-refs .link{font-size:0.8125rem}
.rd-cmp{display:block;margin-top:6px;font-weight:500;color:var(--ink)}
.known .pc-with{margin-top:10px}

/* ---------------------------------------------------------------- learning path v3: objectives, slots, briefs and the end of a step */
.pseg{display:flex;gap:4px;margin-top:12px}
.pseg i{flex:1;height:6px;border-radius:3px;background:var(--fill)}
.pseg i.ok{background:var(--green)}
.pseg i.mv{background:var(--green);opacity:.4}
.pseg i.sk{background:none;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pseg i.cur{background:var(--deep)}
.ptop-o{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:0.875rem;line-height:1.45;color:var(--ink-2)}
.ptop-o svg.i,.obj svg.i{flex:none;margin-top:2px;color:var(--green-on-bg)}
.obj{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--green-soft);font-weight:600;font-size:0.9375rem;line-height:1.4;color:var(--ink)}
.obj svg.i{color:var(--green-text)}
.sheet .obj{margin-top:10px}
.tr-card .obj{margin-top:10px}
.slot+.slot{border-top:1px solid var(--line)}
.slots .slot .li+.alts,.tr-list .slot .li+.alts{margin-top:-4px}
.alts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 12px 10px 64px}
.tr-list .alts{padding-left:64px}
.alts-l{font-size:0.7813rem;color:var(--muted);margin-right:2px}
.alt{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:30px;padding:0 10px 0 3px;border:0;border-radius:999px;background:var(--fill);color:var(--ink);font-size:0.7813rem;font-weight:500}
.alt>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alt .th{width:24px;height:24px;border-radius:50%;flex:none}
.alt .th.ph-leaf svg.i{width:13px;height:13px}
.alt.have{background:var(--green-soft);color:var(--green-text)}
.alt svg.i{flex:none;width:13px;height:13px}
.vs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.vs-l{font-size:0.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.vs-t{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:32px;padding:0 11px 0 3px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:0.8125rem;font-weight:500}
.vs-t>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-t .th{width:26px;height:26px;border-radius:50%;flex:none}
.vs-t .th.ph-leaf svg.i{width:13px;height:13px}
.tr-chk{display:grid;gap:8px;justify-items:start;margin-top:12px}
.tr-chk .qt{margin:0}
.tr-chk-l{display:flex;align-items:center;gap:6px;margin-top:12px;font-weight:600;font-size:0.875rem;color:var(--green-text)}
.tr-retry{margin-top:12px}
.tr-retry p{margin-top:4px;font-size:0.875rem;line-height:1.45;color:var(--ink-2)}
.vd{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:0.8125rem;font-weight:700;letter-spacing:.01em}
.vd.ok{background:var(--cta);color:var(--on-cta)}
.vd.part{background:var(--coral-soft);color:var(--coral-text)}
.vd.no{background:var(--danger-soft);color:var(--danger)}
.vd.thin{background:var(--fill);color:var(--ink-2)}
.vd svg.i{width:14px;height:14px;stroke-width:2.4}
.chk{display:grid;gap:10px;justify-items:start}
.chk-sum{font-size:0.9375rem;line-height:1.5;color:var(--ink)}
.chk .link{font-size:0.8438rem}
.qt{margin:0;padding:2px 0 2px 12px;border-left:3px solid var(--green);width:100%}
.qt p{font-family:var(--serif);font-size:1.0313rem;line-height:1.4;color:var(--deep);font-style:italic}
.qt cite{display:block;margin-top:3px;font-style:normal;font-size:0.75rem;color:var(--muted)}
.ans{margin-top:14px;text-align:center}
.ans-q{font-weight:600;font-size:0.9375rem;color:var(--ink)}
.ans-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ans-b .btn{padding:0 8px;border-radius:999px}
.ans-b .ans-yes{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.retry .ans{margin-top:12px}
.ans-was{margin-top:8px;font-size:0.8125rem;color:var(--muted)}
.got{display:flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:0.875rem;color:var(--green-text)}
.got.mv{color:var(--muted)}
.retry{display:grid;gap:10px}
.retry>p{font-size:0.9063rem;line-height:1.5;color:var(--ink)}
.retry .glist{box-shadow:none;border:1px solid var(--line)}
.retry .pc-look{margin-top:0}
.retry>.link{justify-self:start;font-size:0.8438rem}
.lrn{display:grid;gap:10px}
.kw{display:flex;gap:8px;align-items:flex-start;font-size:0.9063rem;line-height:1.4;color:var(--ink)}
.kw svg.i{flex:none;margin-top:2px;color:var(--green)}
.kw small{display:block;margin-top:2px;font-size:0.75rem;color:var(--muted)}
.brief{background:var(--surface)}
.bf-intro{margin-top:10px;font-size:0.9063rem;line-height:1.5;color:var(--ink-2)}
.bf-known{display:grid;gap:8px;margin-top:12px}
.bk{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:14px;background:var(--bg)}
.bk .th{width:40px;height:40px;border-radius:10px;flex:none}
.bk .grow{min-width:0}
.bk b{display:block;font-size:0.8438rem;font-weight:600;color:var(--ink)}
.bk span{display:block;margin-top:2px;font-size:0.8438rem;line-height:1.4;color:var(--ink-2)}
.bf-look,.bf-brew{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.bf-l{display:inline-flex;align-items:center;gap:5px;margin-right:2px;font-size:0.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bf-chip{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--green-soft);color:var(--green-text);font-size:0.8125rem;font-weight:500;line-height:1.3}
.bf-brew b{padding:5px 10px;border-radius:999px;background:var(--fill);font-size:0.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.bf-use{display:flex;align-items:center;gap:10px;margin-top:8px}
.bf-use .bf-why{flex:1;min-width:0;font-size:0.7813rem;line-height:1.4;color:var(--muted)}
.bf-use .btn{flex:none;height:32px}
.bf-ok{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:0.8125rem;font-weight:600;color:var(--green-text)}
.bf-busy,.bf-by{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:0.7813rem;color:var(--muted)}
.bf-busy .spin{width:14px;height:14px}
.brief>.btn,.brief>.link{margin-top:12px}
.popt .po-top{display:flex;align-items:baseline;gap:8px;margin-top:0}
.po-top b{flex:1;min-width:0}
.popt .po-n{flex:none;margin:0;font-size:0.75rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.popt .po-out{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-weight:500;color:var(--green-text)}
.po-out svg.i{flex:none;margin-top:2px}
.pn-obj{display:flex!important;gap:5px;align-items:flex-start;font-weight:600;color:var(--ink)!important}
.pn-obj svg.i{flex:none;margin-top:2px}
.hero-l svg.i{width:15px;height:15px;vertical-align:-2px;margin-right:4px;color:var(--green-on-bg)}
.hero-buy{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--coral-soft);color:var(--coral-text);font-size:0.75rem;font-weight:600}
.done-path .pseg{margin:0 0 12px}
.done-path .obj{margin-top:8px}
.done-path p{display:flex;align-items:center;gap:6px}
.done-path .btn{width:100%;margin-top:12px}
.pcard.done .tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px}
.pcard.done .tile{background:var(--surface)}
.pcard.done .tile b{font-size:1.5rem}
.tr.moved .tr-n{background:var(--green-soft);color:var(--green-text);opacity:.65}

.ans+.ps-acts,.box+.ps-acts,.got+.ps-acts{margin-top:18px}


/* ---------------------------------------------------------------- two accents: mint for the guide and actions, coral for your own past, slate for what you tap now */
.rate{background:none;color:var(--ink);box-shadow:none}
.rate svg.i{color:var(--leaf)}
.rate.none{background:none;color:var(--muted)}
.tl-score svg.i{color:var(--leaf)}
.nchip{background:var(--green-soft);color:var(--green-text);box-shadow:none}
.legend .sw-y{background:var(--coral-soft);border-color:var(--coral)}
.hex .mine.yours{fill:var(--coral);fill-opacity:.22;stroke:var(--coral)}
.hex .pt.me{fill:var(--coral)}
.brew.best{background:var(--green-soft);box-shadow:none}
.brew.best b,.brew.best .vals,.brew.best .vals svg.i{color:var(--coral-text)}
.ds.on .ds-c{background:var(--green-soft);color:var(--green-text);box-shadow:inset 0 0 0 2px var(--green)}
.ar-chips span{background:var(--green-soft);color:var(--green-text);box-shadow:none}
.ar-chips small{color:var(--coral-text);opacity:.8}
.qt{border-left-color:var(--coral)}
.stars svg{stroke:var(--leaf)}
.stars svg .half,.stars svg.on{fill:var(--leaf)}
.tag.mine{background:var(--deep);color:var(--on-deep)}
.me-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;background:var(--cel-soft);color:var(--cel-ink);font-weight:600;font-size:0.75rem;white-space:nowrap}
.me-chip svg.i{width:12px;height:12px;color:var(--leaf)}

/* ---------------------------------------------------------------- tasting: header, progress, rows */
.tf-head .tf-top .icon-btn{flex:none}
.tf-body{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.tf-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:0;background:var(--green-soft);color:var(--green-text);font-size:0.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.tf-chip svg.i{width:15px;height:15px}
.tf-chip.ready{background:var(--accent);color:var(--accent-ink)}
.tf-prog{display:flex;gap:5px;padding:0 2px}
.tf-seg{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0;background:none;color:var(--muted);font-size:0.75rem;font-weight:500;text-align:left;white-space:nowrap;overflow:hidden}
.tf-seg i{display:block;width:100%;height:5px;border-radius:3px;background:var(--line)}
.tf-seg.done i{background:var(--deep)}
.tf-seg.cur{flex:1.8;color:var(--ink);font-weight:600}
.tf-seg.cur i{background:var(--green)}
.tf-seg.sel{color:var(--ink);font-weight:700}
.tf-seg.open{flex:.7}
.tf-seg.open i{background:none;border:1.5px dashed var(--line-2)}
button.tf-seg{cursor:pointer}
.tf-row{display:flex;gap:12px;align-items:flex-start;padding:0 2px}
.tf-row>svg.i{flex:none;margin-top:9px;color:var(--muted)}
.tf-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tf-segs button[aria-pressed="true"]{background:var(--cta);color:var(--on-cta);font-weight:600;box-shadow:none}
.tf-cmp{font-size:0.7813rem;line-height:1.4;color:var(--muted);padding-left:4px}
.tf-cmp b{font-weight:600;color:var(--ink)}
.tf-cmp .me,.tf-cmp.me{color:var(--coral-text);font-weight:600}
.tf-chips{display:flex;flex-wrap:wrap;gap:10px 8px}
.tc{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-size:0.8438rem;font-weight:500;box-shadow:var(--shadow);white-space:nowrap}
:root[data-theme="dark"] .tc:not(.past):not(.typ){box-shadow:inset 0 0 0 1px var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tc:not(.past):not(.typ){box-shadow:inset 0 0 0 1px var(--line)}}
.tc.on{background:var(--cta);color:var(--on-cta);font-weight:600;box-shadow:none}
.tc.on::before{content:"";width:5px;height:9px;margin:-3px 1px 0 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tc.was{background:transparent;box-shadow:inset 0 0 0 1.5px var(--deep);color:var(--ink-2)}
.tc.past{background:var(--green-soft);color:var(--green-text);font-weight:600;box-shadow:none}
.tc.typ{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2);color:var(--ink-2)}
.tc.srch{width:36px;padding:0;justify-content:center;color:var(--ink-2)}
.tc .nd{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1.5px var(--on-deep)}
.tcw{position:relative;display:inline-flex}
.tq{position:absolute;top:-6px;right:-6px;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:var(--green-soft);color:var(--green-text);font-size:0.75rem;font-weight:700;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)}
.tq::after{content:'';position:absolute;inset:-7px;border-radius:50%}
.tf-note{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 8px 0 16px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);cursor:text}
.tf-note input{flex:1;min-width:0;height:54px;border:0;background:none;outline:none;font-size:1rem;color:var(--ink)}
.tf-note input::placeholder{color:var(--muted)}
.tf-note:focus-within{box-shadow:inset 0 0 0 2px var(--green)}
.tf-note .mic{width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green-text);display:grid;place-items:center;flex:none}
.tf-back{align-self:center;display:inline-flex;align-items:center;gap:4px;padding:8px}
#tf-taps{display:flex;flex-direction:column;gap:24px}
.wheel-add{display:flex;gap:8px;margin-top:12px}
.wheel-add .inp{height:40px}
.wheel .tf-chips{margin-top:2px}

/* ---------------------------------------------------------------- the guide card (mint) */
.gc{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;border-radius:24px;background:var(--green-soft)}
.gc-top{display:flex;align-items:center;gap:10px}
.gc-by{display:flex;align-items:center;gap:7px;flex:none;font-size:0.8125rem;font-weight:600;color:var(--green-text)}
.gc-by+.gc-prog{margin-left:6px}
.gc-prog{flex:1;display:flex;gap:4px}
.gc-prog i{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--green) 22%,transparent)}
.gc-prog i.on{background:var(--green)}
.gc-a{margin-top:2px;font-family:var(--serif);font-weight:500;font-size:1.25rem;line-height:1.25;color:var(--ink)}
.gc-q{font-size:0.9063rem;line-height:1.45;color:var(--ink)}
.gc-w{font-size:0.8125rem;line-height:1.5;color:var(--green-text)}
.gc-w .me{color:var(--ink);font-weight:600}
.gc-div{height:1px;background:color-mix(in srgb,var(--green) 25%,transparent)}
.gc-leaf{display:flex;gap:10px;align-items:flex-start}
.gc-leaf svg.i{flex:none;margin-top:1px;color:var(--green-text)}
.gc-leaf p{font-size:0.8438rem;line-height:1.45;color:var(--ink)}
.gc-notes{display:flex;min-height:44px;align-items:center;gap:10px;margin-top:4px;padding:10px 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--green) 25%,transparent);background:none;color:var(--green-text);font-size:0.8125rem;font-weight:600;text-align:left}
.gc-notes>span:nth-child(2){flex:1}
.gc-stack{display:flex;align-items:center;padding-left:9px}
.gc-stack i{display:grid;place-items:center;width:24px;height:24px;margin-left:-9px;border-radius:50%;border:2px solid var(--green-soft);background:color-mix(in srgb,var(--leaf) 30%,var(--surface));font-style:normal;font-size:0.75rem;font-weight:700;color:var(--ink)}
.gc-stack i:nth-child(2){background:color-mix(in srgb,var(--leaf) 60%,var(--surface))}
.gc-stack i:last-child{background:var(--cta);color:var(--on-cta)}
.gc-busy{display:flex;flex-direction:column;gap:8px;padding:6px 0 4px;flex:1}
.gc-busy .sk{display:block;height:11px;border-radius:6px;background:color-mix(in srgb,var(--green) 20%,transparent);animation:skp 1.2s ease-in-out infinite}
.gc-busy .sk.w1{width:82%;height:16px}.gc-busy .sk.w2{width:94%}.gc-busy .sk.w3{width:64%}
@keyframes skp{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.gc-busy .sk{animation:none}}

/* ---------------------------------------------------------------- 1 · meet the tea */
.ti-hero{position:relative;height:220px;flex:none;overflow:hidden;background:var(--fill)}
.ti-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ti-hero .ph-leaf{position:absolute;inset:0;display:grid;place-items:center;color:var(--fc);background:color-mix(in srgb,var(--fc) 14%,var(--bg))}
.ti-hero .ph-leaf svg.i{width:56px;height:56px;stroke-width:1.3}
.ti-btn{position:absolute;top:max(14px,env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;border:0;background:var(--hb-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--deep);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:pointer}
.ti-btn.l{left:16px}.ti-btn.r{right:16px}
.ti-main{position:relative;margin-top:-24px;padding:20px 16px 24px;border-radius:26px 26px 0 0;background:var(--bg);display:flex;flex-direction:column;gap:14px}
.ti-title{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:1.875rem;line-height:1.1;letter-spacing:-.01em;color:var(--deep)}
.ti-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;font-size:0.8125rem;color:var(--muted)}
.cw-wrap{display:flex;flex-direction:column;gap:8px}
.cw-l{display:flex;align-items:center;gap:6px;padding:0 4px;font-size:0.75rem;font-weight:600;color:var(--muted)}
.cw{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cw-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:12px;border:0;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:left;color:inherit}
.cw-top{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.cw-top .th{width:32px;height:32px;border-radius:10px;flex:none}
.cw-top .th.ph-leaf svg.i{width:16px;height:16px}
.cw-n{font-size:0.875rem;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cw-s{font-size:0.75rem;color:var(--muted)}
.cw-me{font-size:0.75rem;font-weight:600;color:var(--coral-text)}
.cw-q{font-size:0.75rem;font-style:italic;color:var(--muted)}

/* ---------------------------------------------------------------- 2 · set up the brew */
.tf-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border-radius:13px;background:var(--fill)}
.tf-methods button{height:38px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:0.875rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.tf-methods button svg.i{width:14px;height:14px}
.tf-methods button[aria-pressed="true"]{background:var(--cta);color:var(--on-cta);font-weight:600}
.tf-other{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.tf-body>.note{margin-top:-6px}
.btip{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:22px;background:var(--green-soft)}
.btip-t{display:flex;gap:10px;align-items:flex-start}
.btip-t p{margin-top:3px;font-family:var(--serif);font-weight:500;font-size:1.0625rem;line-height:1.3;color:var(--ink)}
.btip-last{display:flex;gap:6px;align-items:flex-start;font-size:0.7813rem;line-height:1.4;font-weight:600;color:var(--coral-text)}
.btip-last svg.i{flex:none;margin-top:1px;width:15px;height:15px}
.btip-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.btip-try b{height:30px;padding:0 11px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:0.8125rem;font-weight:600;display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.btip-try .btn{margin-left:auto;height:32px}
.btip-ok{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:0.8125rem;font-weight:600;color:var(--green-text)}
.bs{padding:2px 12px 2px 14px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.bs-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.bs-row+.bs-row{border-top:1px solid var(--line)}
.bs-row>svg.i,.bstock>svg.i{flex:none;color:var(--muted)}
.bs-l{flex:1;min-width:0;font-size:0.875rem;font-weight:500;line-height:1.25}
.bs-l small{display:block;margin-top:2px;font-size:0.75rem;font-weight:500;color:var(--muted)}
.bs-l small:empty{display:none}
.bs-l small.me{color:var(--coral-text);font-weight:600}
.bs-step{display:flex;align-items:center;gap:2px;flex:none}
.bs-step button{width:44px;height:44px;border-radius:12px;border:0;background:var(--fill);color:var(--deep);display:grid;place-items:center}
.bs-step input{width:50px;height:44px;padding:0;border:0;background:none;text-align:right;font-family:var(--serif);font-size:1.3125rem;font-weight:500;color:var(--deep);outline:none;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.bs-step input::-webkit-outer-spin-button,.bs-step input::-webkit-inner-spin-button{-webkit-appearance:none}
.bs-step input:focus{box-shadow:0 2px 0 var(--green)}
.bs-step .u{width:30px;box-sizing:border-box;padding:0 2px 0 3px;font-size:0.75rem;color:var(--muted)}
.bstock{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- 3 · steeping */
.tm2{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0}
.tm2-lab{font-size:0.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ring2{position:relative;width:min(62vw,240px);aspect-ratio:1}
.ring2 svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring2 .bg{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:12}
.ring2 .fg{fill:none;stroke:var(--green);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.ring2 .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ring2 .t b{font-family:var(--serif);font-weight:500;font-size:clamp(48px,16vw,64px);line-height:1;color:var(--deep);font-variant-numeric:tabular-nums}
.ring2 .t span{font-size:0.8125rem;color:var(--muted)}
.tm2-ctl{display:flex;align-items:center;gap:12px}
.tm2-ctl .icon-btn{width:56px;height:56px;background:var(--surface);box-shadow:var(--shadow)}
.tm2-ctl .icon-btn svg.i{width:24px;height:24px}
.tm2-ctl .btn{height:56px;padding:0 20px;border-radius:28px}

/* ---------------------------------------------------------------- 5 · finish */
.fin-stars{padding:0}
.fin-stars .rating-row{justify-content:center;gap:16px}
.fc-grid{stroke:var(--line);stroke-width:1}
.fc-line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.fc-pt{fill:var(--green);stroke:var(--surface);stroke-width:2}
.fc-on{fill:var(--deep)}
.fc-off{fill:var(--line)}
.fc-t{font:500 0.75rem var(--sans);fill:var(--muted)}
.fc-n{font:500 0.7813rem var(--sans);fill:var(--ink)}
.fc-cols{display:grid;margin-top:2px}
.fc-cols button{height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);font-size:0.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.fc-cols button:hover{background:var(--fill);color:var(--ink)}
.fin-sum{position:relative;padding:12px 14px 8px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.fin-ta{display:block;width:100%;min-height:118px;padding:2px 22px 4px 0;border:0;background:none;resize:vertical;font-size:0.9375rem;line-height:1.5;color:var(--ink);outline:none}
.fin-edit{position:absolute;top:12px;right:12px;color:var(--muted)}
.fin-busy{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:0.8125rem;color:var(--muted)}
.fin-busy .spin{width:14px;height:14px;flex:none}
.fin-path{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:left;color:inherit}
.fin-path .grow{flex:1;min-width:0}
.fin-path .grow b{display:block;font-size:0.875rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-path .grow small{display:block;margin-top:1px;font-size:0.7813rem;color:var(--muted)}
.fin-path>svg.i{color:var(--line-2);flex:none}
.fin-pseg{display:flex;gap:3px;flex:none}
.fin-pseg i{width:14px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--green) 25%,transparent)}
.fin-pseg i.on{background:var(--green)}
.fin-photos{margin-top:2px}
.fin-brew{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}

/* ---------------------------------------------------------------- your notes */
.pn{padding:14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.pn+.pn{margin-top:10px}
.pn-top{display:flex;align-items:center;gap:10px}
.pn-top .th{width:40px;height:40px;border-radius:12px}
.pn-top .grow{flex:1;min-width:0}
.pn-top b{display:block;font-size:0.9063rem;font-weight:600}
.pn-top .grow span{display:block;font-size:0.7813rem;color:var(--muted)}
.pn-tags{margin-top:10px;font-size:0.8125rem;font-weight:600;color:var(--coral-text)}
.pn-note{margin-top:8px;font-family:var(--serif);font-size:1rem;line-height:1.45;color:var(--deep);font-style:italic;padding-left:12px;border-left:3px solid var(--coral)}
.pn-cups{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:0.8125rem;line-height:1.4;color:var(--ink-2)}
.pn-cups b{font-weight:600;color:var(--ink);margin-right:4px}
.tm-quick{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:12px;padding:10px}

/* ---------------------------------------------------------------- touch targets
   Small controls keep their look; an invisible layer grows each tap area to at least 44px. */
.chip,.pill,.tag,.alt,.tref,.segs button,.btn.sm,.icon-btn.sm,.rbtn.sm,.link,.tf-methods button,.tc{position:relative}
.chip::after,.pill::after,.tag::after,.alt::after,.tref::after,.segs button::after,.btn.sm::after,.icon-btn.sm::after,.rbtn.sm::after,.link::after,.tf-methods button::after,.tc::after,.switch::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.inf input{height:44px}
/* sideways-scrolling rows clip anything outside them, so they get room for the taller tap areas (layout unchanged) */
.pills{margin-top:5px;margin-bottom:-7px;padding-top:7px;padding-bottom:9px}
.wheel .pills{margin-top:-7px;margin-bottom:3px;padding-top:7px;padding-bottom:9px}

/* ---------------------------------------------------------------- phone held sideways: slimmer tab bar */
@media (orientation:landscape) and (max-height:500px){
  :root{--nav:48px}
  .tabs{padding-top:0}
  .tabs-in{align-items:center}
  .tab{flex-direction:row;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:0;font-size:0.75rem}
  .tab svg.i{width:21px;height:21px}
  .fab{width:44px;height:44px;margin-top:0}
  .fab svg.i{width:22px;height:22px}
  .fab-label{display:none!important}
  .pane{padding-bottom:calc(var(--nav) + 20px + env(safe-area-inset-bottom))}
}

/* what the mouth words mean: one link under the chips instead of a "?" on each */
.mdefs-t{display:inline-block;margin:12px 0 8px}
.mdefs{display:grid;gap:6px;margin:8px 0 0;font-size:0.875rem;line-height:1.45}
.mdefs div{margin:0}
.mdefs dt{display:inline;font-weight:600}
.mdefs dd{display:inline;margin:0 0 0 4px;color:var(--ink-2)}
/* the cup tabs clip their text, so they grow their tap area with padding instead */
.tf-prog .tf-seg{padding:8px 0;margin:-8px 0}
/* map pins: an invisible 44px circle under each pin */
#map .pin .pin-hit{fill:transparent}

/* ---------------------------------------------------------------- Steep sheet (Board:Steep) */
.steep-segs{margin-top:4px}
.steep-segs button{height:40px;font-size:0.9375rem}
.steep-hint{margin:10px 2px 0;font-size:0.875rem;line-height:1.4;color:var(--muted)}
.steep-h{margin:20px 2px 8px;color:var(--muted)}
.steep-rows{display:flex;flex-direction:column;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.steep-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 12px 8px 10px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:left}
.steep-row:first-child{border-top:0}
.steep-row .th{width:48px;height:48px;border-radius:12px;flex:none}
.steep-row .grow{flex:1;min-width:0}
.steep-row .t{display:block;font-family:var(--serif);font-size:1.125rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steep-row .s{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:0.8125rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steep-row>svg.i{color:var(--muted)}
.steep-more{display:flex;gap:8px;margin-top:14px}
.steep-more .btn{flex:1}

/* ---------------------------------------------------------------- Today (Board:Today) */
.overline{display:block;font-size:0.75rem;line-height:1.333;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.head .overline{margin-bottom:2px}
.wk-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 8px 10px}
.wk-line{font-size:0.875rem;font-weight:600;color:var(--ink)}
.hero.resume{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--green-soft);color:var(--green-text);box-shadow:none}
.rs-play{flex:none;width:50px;height:50px;border-radius:50%;background:var(--cta);color:var(--on-cta);display:grid;place-items:center}
.rs-play svg.i{width:20px;height:20px;margin-left:2px}
.rs-b{flex:1;min-width:0}
.rs-over{font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rs-t{margin-top:2px;font-family:var(--serif);font-weight:450;font-size:1.375rem;line-height:1.2;color:inherit}
.rs-l{margin-top:2px;font-size:0.8125rem}
.rs-acts{display:flex;gap:8px;margin-top:12px}
.hero.resume .rs-go{flex:1;background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.hero.resume .btn.ghost{color:var(--green-text)}
.again-h{display:flex;align-items:baseline;justify-content:space-between;margin:24px 2px 14px}
.again-h h2{font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.27;color:var(--ink)}
.again-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
.again-row::-webkit-scrollbar{display:none}
.again-card{flex:none;width:160px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 8px 12px;border:0;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-align:left}
.ac-img{display:block;width:100%;height:84px;margin-bottom:6px;border-radius:14px;overflow:hidden;background:var(--surface)}
.ac-img img{width:100%;height:100%;object-fit:cover;display:block}
.ac-img .ph-leaf{display:grid;place-items:center;height:100%;color:var(--fc)}
.ac-f{display:flex;align-items:center;gap:6px;padding:0 4px;font-size:0.75rem;color:var(--ink-2)}
.ac-n{max-width:100%;padding:0 4px;font-family:var(--serif);font-size:1.1875rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-s{padding:0 4px;font-size:0.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mini.warn b{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--coral-soft);color:var(--coral-text);font-size:0.75rem}

/* ---------------------------------------------------------------- Setup (Board:Setup) */
.bs-src{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:-2px 2px 0;font-size:0.8125rem;color:var(--muted)}
.bs-step input{font-size:1.5rem;font-variant-numeric:tabular-nums}
.bs-step button{border-radius:50%}

/* ---------------------------------------------------------------- Timer (Board:Timer): white, with a green ring */
.sheet:has(.tf-body.steeping) .tf-head,.sheet:has(.tf-body.steeping) .sheet-foot{background:transparent}
.tm2-ctl{display:flex;align-items:center;justify-content:center;gap:12px}
.tm-adj{min-width:76px;height:52px;border-radius:999px;background:var(--fill);border-color:transparent;font-variant-numeric:tabular-nums}
.steeping #tm-go{width:56px;height:56px;background:var(--cta);color:var(--on-cta);box-shadow:none}

/* ---------------------------------------------------------------- Cup notes (Board:CupNotes) */
.cn-sec{display:flex;flex-direction:column;gap:10px}
.cn-h{font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.27;color:var(--ink)}
.cn-hint{margin-top:-6px;font-size:0.875rem;color:var(--muted)}
.cup-sum{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:18px;background:var(--cel-soft);color:var(--cel-ink);font-size:0.9375rem;line-height:1.4}
.cup-sum .overline{color:var(--cel-ink)}

/* ---------------------------------------------------------------- Finish and seal (Board:Finish) */
.fin-head .tf-top .grow{visibility:hidden}
.fin-body{gap:18px}
.fin-top{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 0 0}
.confetti{position:absolute;top:-10px;left:50%;width:300px;height:110px;transform:translateX(-50%);pointer-events:none}
.seal{position:relative;width:88px;height:88px;border-radius:16px;background:var(--stamp);color:var(--on-seal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-5deg);box-shadow:0 8px 18px -10px rgba(214,58,38,.7)}
.seal svg{width:34px;height:34px}
.seal b{font-size:0.75rem;font-weight:700;letter-spacing:.14em}
.seal span{font-family:var(--serif);font-size:0.75rem;font-variant-numeric:tabular-nums}
.fin-name{margin-top:12px;font-family:var(--serif);font-weight:450;font-size:2.125rem;line-height:1.1;color:var(--ink)}
.fin-line{margin-top:4px;font-size:0.875rem;color:var(--muted)}
.fin-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 14px;border-radius:22px;background:var(--fill)}
.fin-card h3{font-family:var(--serif);font-weight:450;font-size:1.3125rem;color:var(--ink)}
.fin-card .stars{gap:4px}
.fin-card .stars svg{width:48px;height:48px}
.fin-card .rating-row{justify-content:center}
.score-word{font-size:0.9375rem;font-weight:600;color:var(--green-text)}
.fin-words .overline,.fin-leaves .overline{margin:0 2px 8px}

/* ---------------------------------------------------------------- Quick note (Board:QuickNote) */
.qn-tea .grow>span{display:flex;align-items:center;gap:6px}
.qn-score{margin-top:14px;padding:14px 12px 10px;border-radius:22px;background:var(--fill)}
.qn-sh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 4px}
.qn-sh h3{font-family:var(--serif);font-weight:450;font-size:1.3125rem;color:var(--ink)}
.score-line{font-size:0.875rem;font-weight:600;color:var(--green-text);font-variant-numeric:tabular-nums}
.qn-score .stars{gap:4px}
.qn-score .stars svg{width:48px;height:48px}

/* ---------------------------------------------------------------- Teas (Board:Teas) */
.ph{display:grid;place-items:center;background:var(--fill);color:var(--fc,var(--muted))}
.ph svg.i{width:42%;height:42%;max-width:40px;max-height:40px;stroke-width:1.6}
.ttile-img>.ph,.ac-img>.ph,.hero-img>.ph,.tea-hero>.ph{position:absolute;inset:0;width:100%;height:100%}
.trow{grid-template-columns:56px minmax(0,1fr) auto;padding:10px 14px 10px 10px;border-radius:22px}
.trow .th{width:56px;height:56px;border-radius:16px}
.trow-name{font-size:1.1875rem;line-height:1.25;-webkit-line-clamp:1}
.trow-side{gap:6px}
.badge.plain{background:var(--fill);color:var(--ink-2)}
.badge.wish{background:var(--fill);color:var(--ink-2)}
.badge.new{background:var(--cel-soft);color:var(--cel-ink)}

/* ---------------------------------------------------------------- Tea page (Board:Tea) */
.tea-hero.gal{height:262px;background:var(--fill)}
.tea-hero.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.30),transparent 38%,transparent 62%,rgba(0,0,0,.38));pointer-events:none}
.gal-prev,.gal-next{position:absolute;top:96px;bottom:30px;z-index:2;border:0;background:none;padding:0}
.gal-prev{left:0;width:45%}
.gal-next{right:0;width:55%}
.gal-count{position:absolute;left:16px;bottom:40px;z-index:3;display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:rgba(22,32,27,.62);color:var(--on-photo);font-size:0.75rem;font-weight:600;pointer-events:none}
.gal-dots{position:absolute;right:18px;bottom:50px;z-index:3;display:flex;gap:6px;pointer-events:none}
.gal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.gal-dots i.on{background:var(--on-photo)}
.tea-hero.gal.ph::after{display:none}
.gal-add{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-2)}
.gal-add svg.i{width:22px;height:22px;color:var(--fc)}
.tea-go{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;margin-top:14px}
.hex .mine,.hex .mine.yours{fill:var(--fc,var(--leaf));fill-opacity:.22;stroke:var(--fc,var(--leaf))}
.hex .pt{fill:var(--fc,var(--leaf))}

/* ---------------------------------------------------------------- Compare (Board:Compare): each tea in its family colour */
.cmp-hex .hex .series.a{fill:var(--ca);fill-opacity:.18;stroke:var(--ca);stroke-width:2;stroke-dasharray:none}
.cmp-hex .hex .series.b{fill:none;stroke:var(--cb);stroke-width:2;stroke-dasharray:6 4}
.cmp-hex .hex .pt{fill:var(--ca)}
.cmp-hex .legend .sw-y{background:color-mix(in srgb,var(--ca) 22%,transparent);border-color:var(--ca)}
.cmp-hex .legend .sw-b{border-top-color:var(--cb)}
.cmp-hex .legend{font-size:0.8125rem;color:var(--ink-2)}

/* ---------------------------------------------------------------- Learn and Ask (Board:Learn, Board:Ask) */
.ask-pill{border-radius:999px;height:40px;padding:0 14px}
.learn .pstart,.learn .ptop{background:var(--green-soft);color:var(--green-text);box-shadow:none}
.learn .pstart .hero-t,.learn .ptop-t{color:var(--green-text)}
.practice-h{display:flex;align-items:baseline;justify-content:space-between;margin:26px 2px 10px}
.practice-h h2{font-family:var(--serif);font-weight:500;font-size:1.375rem;line-height:1.27;color:var(--ink)}
.practice-h span{font-size:0.8125rem;color:var(--muted)}
.practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.practice-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:116px;padding:14px;border:0;border-radius:22px;color:var(--ink);text-align:left}
.practice-tile .pt-ic{display:grid;place-items:center;width:36px;height:36px;margin-bottom:8px;border-radius:12px;background:var(--surface)}
.practice-tile b{font-size:0.9375rem;font-weight:600;line-height:1.3}
.practice-tile>span:last-child{font-size:0.8125rem;color:var(--ink-2)}
.practice-tile{background:var(--surface);box-shadow:var(--shadow)}
.practice-tile .pt-ic{background:var(--green-soft);color:var(--green-text)}
.ask-card{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:16px;padding:0 16px;border:0;border-radius:999px;background:var(--fill);color:var(--muted);font-size:1rem;text-align:left}
.ask-card svg.i{color:var(--cel-ink)}

/* ---------------------------------------------------------------- Journal (Board:Journal) */
.jt-segs{margin-top:16px}
.jt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.jt-tile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:18px}
.jt-tile b{font-family:var(--serif);font-weight:450;font-size:1.75rem;line-height:1.1;color:var(--green);font-variant-numeric:tabular-nums}
.jt-tile span{font-size:0.8125rem;line-height:1.3;color:var(--ink-2)}
.jt-tile{background:var(--surface);box-shadow:var(--shadow)}
.jt-card{margin-top:12px;padding:14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.jt-card .overline{margin-bottom:10px}
.fam-bar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden}
.fam-seg{display:block;min-width:6px;background:var(--fc)}
.fam-keys{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:0.8125rem;color:var(--ink)}
.fam-key{display:inline-flex;align-items:center;gap:6px}
.fam-note{margin-top:8px;font-size:0.875rem;color:var(--muted)}
.jt-palate{margin-top:12px;padding:12px 14px;border-radius:18px;background:var(--cel-soft);color:var(--cel-ink);font-size:0.9375rem;line-height:1.45}
.jt-palate .overline{color:var(--cel-ink);margin-bottom:2px}
.jt-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 14px 8px 10px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:left}
.jt-row:first-child{border-top:0}
.jt-row .th{width:48px;height:48px;border-radius:14px;flex:none}
.jt-row .grow{flex:1;min-width:0}
.jt-row .t{display:block;font-family:var(--serif);font-size:1.125rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-row .s{display:block;margin-top:2px;font-size:0.8125rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-empty{margin:4px 2px 0;font-size:0.875rem}

/* ---------------------------------------------------------------- Welcome (Board:Welcome) */
.welcome{position:fixed;inset:0;z-index:70;overflow-y:auto;background:var(--bg);padding:max(48px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}
.wl-in{max-width:420px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.wl-mark svg{width:72px;height:72px;display:block}
.wl-word{margin-top:18px;font-family:var(--serif);font-weight:450;font-size:3.5rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.wl-word .cha{color:var(--word)}
.wl-tag{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:1.125rem;line-height:1.45;color:var(--ink-2)}
.wl-lines{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;text-align:left;width:100%}
.wl-lines li{display:flex;align-items:center;gap:12px;font-size:1rem;line-height:1.4;color:var(--ink)}
.wl-lines svg.i{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--cel-soft);color:var(--cel-ink)}
.wl-acts{display:grid;gap:8px;width:100%;margin-top:auto;padding-top:32px}
.wl-acts .btn{width:100%}

/* ---------------------------------------------------------------- teacha brand on Today: the logo bar, Teacha's byline, the tagline */
.brand-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding-top:12px}
.bb-h{display:flex;margin:0;font:inherit}
.bb-logo{display:inline-flex;align-items:center;gap:10px}
.bb-logo .mark{width:34px;height:34px;flex:none}
.bb-word{font-family:var(--serif);font-weight:500;font-size:1.75rem;line-height:1;letter-spacing:-.015em;color:var(--ink)}
.bb-word b{font-weight:500;color:var(--word)}
.today .head{padding-top:12px}
.mark{display:block;flex:none}
.mark.xs{width:20px;height:20px}
.ts-by{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:0.8125rem;font-weight:600;color:var(--cel-ink)}
.brand-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin:30px 0 6px;font-family:var(--serif);font-style:italic;font-size:0.9375rem;color:var(--muted)}
.loading .mark.ld{width:40px;height:40px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.9);opacity:.75}}
@media (prefers-reduced-motion:reduce){.loading .mark.ld{animation:none}}
.ask-head .mark.av{width:44px;height:44px}

/* ---------------------------------------------------------------- the name teacha, wherever it is written: the wordmark */
.tw{font-family:var(--serif);font-weight:500;font-size:1.1em;letter-spacing:-.01em;white-space:nowrap}
.tw b{font-weight:inherit;color:var(--word)}
.btn.primary .tw b{color:var(--word-on-cta)}
#toast .tw b,.tag.mine .tw b{color:var(--word-inv)}
/* sign-in (getteacha.app): reuses the welcome layout */
body.signed-out #app,body.signed-out #sheets,body.signed-out nav{display:none}
.signin .wl-acts{margin-top:40px}
.si-form{display:grid;gap:14px;width:100%;margin-top:32px;text-align:left}
.si-form .btn{width:100%;margin-top:4px}
.si-form .link{justify-self:center;min-height:44px}
.si-err{margin-top:2px;font-size:.9375rem;line-height:1.4;color:var(--danger)}
.si-msg{font-size:.9375rem;line-height:1.4;color:var(--green-text)}
.signin .si-err:first-child{margin-top:24px}
.si-closed{margin-top:24px;display:grid;gap:8px;font-size:1rem;line-height:1.45;text-align:center;overflow-wrap:anywhere}
.acct-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.banner .link{margin-left:auto;min-height:44px;padding:0 4px;display:inline-flex;align-items:center;flex:none}
.move{margin-top:14px}
.acct-legal a{color:var(--green-text);font-weight:600}

/* moving in: the import dialog */
.imp{max-height:calc(100dvh - 40px);overflow:auto}
.imp-steps{list-style:none;margin:6px 0 14px;padding:0;display:grid;gap:12px}
.imp-step{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start}
.imp-mark{width:24px;height:24px;display:grid;place-items:center;color:var(--muted)}
.imp-step.done .imp-mark{color:var(--green-text)}
.imp-step.fail .imp-mark{color:var(--danger)}
.imp-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.imp-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:imp-spin .8s linear infinite}
@keyframes imp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.imp-spin{animation-duration:2.4s}}
.imp-label{font-weight:600;color:var(--ink)}
.imp-step.wait .imp-label{color:var(--muted)}
.imp-detail{font-size:.875rem;color:var(--ink-2);line-height:1.4}
.imp-step.fail .imp-detail{color:var(--danger)}
.imp-bar{height:6px;border-radius:3px;background:var(--line);margin:6px 0 2px;overflow:hidden}
.imp-bar i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .2s}
.modal .imp-sum{color:var(--ink);margin-bottom:16px}
.modal .imp-note{color:var(--muted);margin-bottom:0;font-size:.875rem}

/* admin: invite people */
.inv-form{display:flex;gap:8px;align-items:center}
.inv-form .inp{flex:1;min-width:0}
.inv-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.inv-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.inv-list .grow{min-width:0}
.inv-list .t{display:block;overflow-wrap:anywhere;color:var(--ink)}
.inv-list .note{display:block;margin:0}