:root{
  --top-gap:20px; /* gap between the status bar and the floating top buttons; iOS blurs the strip just below the status bar */
  --bg:#f4efe6;--bg-0:rgba(244,239,230,0);--card:#fffdf8;--glass:rgba(255,253,248,.8);--ink:#23201b;--muted:#7a7166;--line:#e4dccd;
  --accent:#5f6f3e;--accent-ink:#fff;--chip:#ece5d7;
  --tried:#2f6b55;--tried-bg:#dcefe6;--sample:#9a4a26;--sample-bg:#f7e2d6;
  --wish:#4a4390;--wish-bg:#e6e3fa;--skip:#8a8378;--skip-bg:#eeebe5;
  --star:#b8862f;--pred:#8b7fe0;--shadow:0 6px 22px rgba(35,32,27,.14);
  --ctl-top:rgba(255,255,255,.93);--ctl-bot:#fff;--ctl-ring:rgba(35,32,27,.09);--bg-half:rgba(244,239,230,.55);--ctl-soft:0 2px 6px rgba(35,32,27,.07),0 10px 24px rgba(35,32,27,.11);--ctl-tight:0 1px 3px rgba(35,32,27,.12);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1e1c19;--bg-0:rgba(30,28,25,0);--card:#282521;--glass:rgba(48,45,40,.78);--ink:#efe9de;--muted:#a59c8f;--line:#3a352e;
  --accent:#9db36a;--accent-ink:#1b1916;--chip:#35312b;
  --tried:#8fd3b6;--tried-bg:#1f3a30;--sample:#f0a986;--sample-bg:#43281c;
  --wish:#b9b2f5;--wish-bg:#2d2a4d;--skip:#a59c8f;--skip-bg:#2e2b26;
  --star:#e0b25e;--pred:#a89ff2;--shadow:0 6px 22px rgba(0,0,0,.45);
  --ctl-top:rgba(52,48,43,.93);--ctl-bot:#34302b;--ctl-ring:rgba(0,0,0,.45);--bg-half:rgba(30,28,25,.55);--ctl-soft:0 2px 6px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.4);--ctl-tight:0 1px 3px rgba(0,0,0,.45);
}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh;
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 16px calc(120px + env(safe-area-inset-bottom))}
body[data-view=group] .wrap,body[data-view=note] .wrap,body[data-view=notes] .wrap,body[data-view=log] .wrap,body[data-view=wear] .wrap,body[data-view=brand] .wrap,body[data-view=detail] .wrap{padding-top:calc(env(safe-area-inset-top) + var(--top-gap) + 56px)}
body[data-view=detail] .wrap,body[data-view=wear] .wrap{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
h1,h2,.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:600}
button,select,input,textarea{font:inherit;color:inherit}
.btn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:active{transform:scale(.98)}
.danger{color:#b4412b}
.muted{color:var(--muted)}
.small{font-size:13px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
/* ---------- floating controls ---------- */
.glass{background:var(--ctl-bot);background:linear-gradient(180deg,var(--ctl-top),var(--ctl-bot));border:0;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 0 0 1px var(--ctl-ring),var(--ctl-soft)}
.fab{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex:0 0 auto;position:relative;padding:0;-webkit-tap-highlight-color:transparent}
.fab:active{transform:scale(.95)}
.fab .dot{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--card)}
.dock{position:fixed;left:0;right:0;margin:0 auto;max-width:560px;bottom:calc(max(env(safe-area-inset-bottom),10px) + 8px);
  z-index:12;display:flex;gap:10px;align-items:center;padding:0 24px}
.searchpill{flex:1;min-width:0;height:50px;border-radius:25px;display:flex;align-items:center;gap:8px;padding:0 6px 0 16px;cursor:text}
.searchpill svg.i{color:var(--muted);width:20px;height:20px;flex:0 0 auto}
.searchpill input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:17px;height:100%;padding:0;-webkit-appearance:none;appearance:none}
.searchpill input::-webkit-search-cancel-button{display:none}
.searchpill input::placeholder{color:var(--muted)}
.clr{width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.clr[hidden]{display:none}
/* A light fade behind the controls (about half the old strength). It's part of the controls so it moves with them,
   and it's off while typing because iOS clips anything drawn below the controls when the keyboard is up. */
.dock::before{content:"";position:absolute;left:-100vw;right:-100vw;top:-110px;height:400vh;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg-0) 0,var(--bg-half) 104px)}
.searching .dock::before{display:none}
/* While the keyboard is up iOS clips floating elements just below them, so keep their shadow tight */
.searching .dock .glass{box-shadow:0 0 0 1px var(--ctl-ring),var(--ctl-tight)}
/* While the keyboard is up, lift the controls above it */
.kb .dock{bottom:calc(var(--kb) + 8px)}
#backBtn{position:fixed;top:calc(env(safe-area-inset-top) + var(--top-gap));left:12px;z-index:12;width:44px;height:44px}
body[data-view=home] #backBtn{display:none}
body[data-view=detail] .dock,body[data-view=wear] .dock{display:none}
/* ---------- home ---------- */
.logo-wrap{display:flex;justify-content:center;padding:calc(env(safe-area-inset-top) + 48px) 0 30px}
.logo-wrap .logo{will-change:transform,opacity;transform-origin:50% 50%}
.toppad{height:calc(env(safe-area-inset-top) + 40px)}
.logo{width:64px;height:64px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.activef{display:flex;justify-content:center;margin-top:12px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 8px 5px 12px;font-size:14px;cursor:pointer}
.fchip svg.i{width:16px;height:16px;color:var(--muted)}
.row{margin-top:8px}
.gtitle{display:inline-flex;align-items:center;gap:2px;max-width:100%;color:var(--ink);text-decoration:none;margin:18px 0 10px;
  font:600 21px/1.2 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.gtitle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtitle svg.i{width:20px;height:20px;flex:0 0 auto;color:var(--muted);stroke-width:2.2}
.gtitle:active{opacity:.6}
.car{display:grid;grid-auto-flow:column;grid-auto-columns:min(calc((100% - 8px) / 2),230px);gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  margin:0 -16px;padding:0 16px 4px;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car::-webkit-scrollbar{display:none}
.car>*{scroll-snap-align:start}
.car .tile .pic{aspect-ratio:1/1}
.tile.more{align-items:center;justify-content:center;font-weight:600;color:var(--muted);gap:4px;flex-direction:row;background:var(--chip);border-style:dashed}
.countline{color:var(--muted);font-size:13px;margin:14px 0 10px}
.pagehead h1{font-size:28px;margin:6px 0 0;line-height:1.15;overflow-wrap:anywhere}
.pagehead .countline{margin-top:4px}
.notescore{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0;font-size:14px;color:var(--muted)}
.notescore b{font-size:22px;color:var(--ink);font-weight:600;line-height:1}
.notesub{margin:4px 0 0;font-size:13px;color:var(--muted)}
.eyelink{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:1px}
.eyelink svg.i{width:13px;height:13px;stroke-width:2.4}
.notesentry{display:flex;justify-content:flex-end;margin:6px 0 -6px}
.notesentry a{color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:1px}
.notesentry svg.i{width:16px;height:16px;stroke-width:2.4}
.lb{list-style:none;margin:6px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.lb li+li{border-top:1px solid var(--line)}
.lb a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:4px 10px;padding:12px 14px;color:inherit;text-decoration:none}
.lb a:active{background:var(--chip)}
.lb .rk{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
.lb .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .av{font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px}
.lb .av svg{width:14px;height:14px;fill:var(--star);stroke:var(--star);stroke-width:1.7;stroke-linejoin:round}
.lb .bar{grid-column:2/4;height:4px;border-radius:2px;background:var(--chip);position:relative}
.lb .bar i{position:absolute;inset:0 auto 0 0;background:var(--star);border-radius:2px}
.lb .bar b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);opacity:.6}
.lb .sub{grid-column:2/4;font-size:12.5px;color:var(--muted)}
.lbh{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin:26px 0 8px}
.notechips.loose{display:flex;flex-wrap:wrap;gap:6px}
.notescore svg{width:18px;height:18px;display:block;fill:var(--star);stroke:var(--star);stroke-width:1.7;stroke-linejoin:round}
/* ---------- items ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.card{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px 10px 10px;text-decoration:none;color:inherit}
.card:active,.tile:active{opacity:.85}
.card .thumb{flex:0 0 58px;height:72px;border-radius:9px;overflow:hidden}
.card .m{flex:1;min-width:0}
.brand-l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .name{font-size:16px;font-weight:600;line-height:1.25}
.card .notes{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;min-width:0}
.tile .pic{position:relative;aspect-ratio:4/5}
.tile .t{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column}
.tile .t .meta{margin-top:auto;padding-top:6px}
.tile .name{font-size:15px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:6px}
.meta.one{flex-wrap:nowrap}
.meta.one .pill{white-space:nowrap}
.tile .meta.one{flex-wrap:wrap}
.tile .meta.one .pill{margin-left:auto}
.pic,.thumb{background:var(--chip);position:relative}
svg.ph{position:absolute;inset:0;width:100%;height:100%;display:block}
.pic img,.thumb img,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pill{font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;line-height:1.5}
.p-tried{background:var(--tried-bg);color:var(--tried)}
.p-sample{background:var(--sample-bg);color:var(--sample)}
.p-wish{background:var(--wish-bg);color:var(--wish)}
.p-skip{background:var(--skip-bg);color:var(--skip)}
.p-own{background:var(--chip);color:var(--ink)}
.p-disc{background:transparent;color:var(--muted);border:1px solid var(--line)}
.empty{color:var(--muted);text-align:center;padding:40px 0}
/* ---------- stars ---------- */
.rate{display:inline-flex;align-items:center}
.rate path{stroke-width:1.7;stroke-linejoin:round}
.rate .se{fill:none}
.rate.mine path{stroke:var(--star)} .rate.mine .sf{fill:var(--star)} .rate.mine .sh{fill:url(#half-mine)}
.rate.pred path{stroke:var(--pred)} .rate.pred .sf{fill:var(--pred)} .rate.pred .sh{fill:url(#half-pred)}
.rate.none path{stroke:var(--line);fill:none}
.rate.mini{gap:1px}
.rate.mini svg{width:14px;height:14px;display:block}
.rate.big{gap:4px}
.rate.big.none path{stroke:var(--muted)}
.star{position:relative;width:40px;height:40px}
.star svg{width:40px;height:40px;display:block}
.star .h{position:absolute;top:0;left:0;height:100%;width:50%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.star .h.r{left:50%}
.star .h.full{width:100%}
.bigscore{font-family:"Iowan Old Style",Georgia,serif;font-size:28px;font-weight:600;margin-left:8px;min-width:44px;color:var(--star)}
.rate.pred .bigscore{color:var(--pred)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;cursor:pointer;font-size:inherit}
/* ---------- detail ---------- */
.hero{position:relative;width:min(72vw,300px);aspect-ratio:1/1;margin:0 auto;border-radius:22px;overflow:hidden;background:var(--chip);
  box-shadow:0 0 0 1px var(--line),var(--shadow)}
.dhead{text-align:center;margin:18px auto 4px;max-width:520px}
.dhead .brand-l{font-size:13px;letter-spacing:.08em;white-space:normal}
.dhead h2{font-size:30px;margin:4px 0 8px;line-height:1.15;overflow-wrap:anywhere}
.dhead .meta{justify-content:center}
a.blink{display:inline-flex;align-items:center;gap:2px;color:var(--muted);text-decoration:none;max-width:100%}
a.blink svg.i{width:14px;height:14px;stroke-width:2.2;flex:0 0 auto}
a.blink:active{opacity:.6}
body[data-view=brand] .tile .brand-l,body[data-view=brand] .card .brand-l{display:none}
#moreBtn{position:fixed;top:calc(env(safe-area-inset-top) + var(--top-gap));right:12px;z-index:12;width:44px;height:44px;display:none}
body[data-view=detail] #moreBtn{display:inline-flex}
#wearEditBtn{position:fixed;top:calc(env(safe-area-inset-top) + var(--top-gap));right:12px;z-index:12;width:44px;height:44px;display:none}
body[data-view=wear] #wearEditBtn{display:inline-flex}
.menu{position:fixed;top:calc(env(safe-area-inset-top) + var(--top-gap) + 52px);right:12px;z-index:13;min-width:220px;border-radius:16px;padding:6px;
  display:flex;flex-direction:column;transform-origin:top right}
.menu[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.menu:not([hidden]){animation:pop .16s ease-out}@keyframes pop{from{opacity:0;transform:scale(.92)}}}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:none;padding:12px 12px;
  border-radius:10px;font-size:16px;color:var(--ink);cursor:pointer;text-align:left}
.menu button:active{background:var(--chip)}
.menu button svg.i{width:20px;height:20px;color:var(--muted)}
.menu .danger,.menu .danger svg.i{color:#b4412b}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
/* Dialogs focus a hidden target on open, so no button gets a highlight ring until you use a keyboard */
[data-focus-start]{outline:none}
button:focus:not(:focus-visible){outline:none}
.fhead .txt:focus,.sheet-h .btn:focus{outline:none}
.fhead .txt:focus-visible,.sheet-h .btn:focus-visible{text-decoration:underline;text-underline-offset:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:14px}
.panel h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.notechips{display:flex;flex-wrap:wrap;gap:6px}
a.chip{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:2px}
a.chip svg.i{width:14px;height:14px;color:var(--muted);stroke-width:2.2}
a.chip:active{opacity:.6}
.chip{background:var(--chip);border-radius:999px;padding:4px 10px;font-size:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:15px;align-items:center;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0}
.kv select,.kv input{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--bg);font-size:16px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 12px;font-size:14px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);resize:vertical;font-size:16px}
.shop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:13px;border-radius:999px;background:#5a31f4;color:#fff;text-decoration:none;font-weight:700;font-size:16px}
.linkout{display:flex;align-items:center;justify-content:center;width:100%;margin-top:10px;padding:12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}
label.tog{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
label.tog input{width:20px;height:20px;accent-color:var(--accent)}
.foot{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* ---------- dialogs ---------- */
dialog{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);width:min(520px,calc(100% - 32px));padding:18px;max-height:calc(100dvh - 40px)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
dialog input:not([type=file]),dialog select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:16px}
dialog.sheet{margin:auto auto 0;width:100%;max-width:min(560px,100%);border-radius:20px 20px 0 0;border-bottom:0;padding:14px 18px calc(18px + env(safe-area-inset-bottom));max-height:88dvh;overflow:auto}
.grab{width:36px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.sheet-h{display:flex;justify-content:space-between;align-items:center}
.sheet-h h2{margin:0;font-size:21px}
.olabel{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px;font-weight:600}
.orow{display:flex;flex-wrap:wrap;gap:8px}
/* full-screen forms */
dialog.full{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;border-radius:0;padding:0;background:var(--bg)}
dialog.full::backdrop{background:var(--bg)}
@media (prefers-reduced-motion:no-preference){dialog.full[open]{animation:rise .24s ease-out}@keyframes rise{from{transform:translateY(28px);opacity:0}}}
.fhead{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top) + 6px) 8px 6px;background:var(--bg);border-bottom:1px solid var(--line)}
.fhead h2{margin:0;font-size:18px;white-space:nowrap}
.txt{background:none;border:0;font-size:17px;padding:10px 8px;color:var(--accent);cursor:pointer;justify-self:start}
.fhead .txt.strong{font-weight:700;justify-self:end}
.fbody{max-width:560px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
dialog.full input:not([type=file]),dialog.full select{background:var(--card);padding:11px 12px}
/* iOS gives date fields a native minimum width that ignores width:100% and widens the page; drop the native look so they fit */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:46px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.ferr{color:#b4412b;font-size:14px;margin:14px 0 0}
.photo-pick{display:flex;align-items:center;gap:14px;width:100%;border:1px dashed var(--muted);background:var(--card);border-radius:14px;padding:10px;cursor:pointer;color:var(--ink);font-weight:600;font-size:16px;text-align:left}
.photo-pick .prev{width:72px;height:90px;border-radius:10px;background:var(--chip);overflow:hidden;flex:0 0 auto;position:relative}
.photo-pick .prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-pick small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.famrow{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:4px 4px 4px 12px;margin-top:8px}
.famline{display:flex;align-items:center;gap:2px}
#famDlg .famname{flex:1;min-width:0;width:auto;border:0;background:none;font-size:16px;padding:9px 0;outline:none}
.famcnt{color:var(--muted);font-size:13px;min-width:22px;text-align:right;margin-right:6px}
.ib2{width:38px;height:38px;border:0;background:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0}
.ib2:disabled{opacity:.25;cursor:default}
.ib2.danger{color:#b4412b}
.ib2 svg.i{width:20px;height:20px}
.famdel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 6px 8px 0;font-size:14px;border-top:1px solid var(--line);margin-top:4px}
#famDlg .famdel select{width:auto;flex:1;min-width:120px;padding:8px}
.famadd{display:flex;gap:8px;margin-top:16px}
.famadd input{flex:1}
.toast{position:fixed;left:50%;bottom:calc(max(env(safe-area-inset-bottom),10px) + 74px);transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;white-space:nowrap}
.toast.on{opacity:1}
/* Pages without the bottom bar: keep the toast low so it doesn't cover the buttons at the end of the page */
body[data-view=detail] .toast,body[data-view=wear] .toast{bottom:calc(max(env(safe-area-inset-bottom),10px) + 8px)}
/* With an Undo button the toast can be tapped while it shows */
.toast.on.act{pointer-events:auto}
.toast button{background:none;border:0;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:10px 12px;margin:-10px -12px -10px 6px;cursor:pointer}
/* ---------- wear log ---------- */
.dock .menu{position:absolute;top:auto;bottom:62px;right:24px;transform-origin:bottom right}
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rowhead .gtitle{min-width:0}
.seeall{color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:1px;flex:0 0 auto}
.seeall svg.i{width:16px;height:16px;stroke-width:2.4}
button.card,button.tile{width:100%;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.tile{padding:0}
.card.prompt{border-style:dashed}
.card.prompt .thumb{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.card>svg.i{color:var(--muted);flex:0 0 auto}
.wcount{position:absolute;right:5px;bottom:5px;z-index:1;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px;line-height:1.5}
.wmeta{display:flex;align-items:center;gap:6px}
.wmeta>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.react{display:inline-flex;flex:0 0 auto}
.react svg.i{width:16px;height:16px}
.react.up{color:var(--tried)}
.react.down{color:var(--sample)}
h2.lbh{font-family:inherit}
.wearbtn{margin-top:14px}
.wearbtn .btn{display:flex;justify-content:center;width:100%;padding:13px;border-radius:999px;font-weight:700;font-size:16px}
.wearbtn svg.i{width:18px;height:18px;color:var(--tried);stroke-width:2.4}
.wsearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 10px}
.wsearch svg.i{width:18px;height:18px;color:var(--muted);flex:0 0 auto}
#wearDlg .wsearch input{border:0;background:none;padding:11px 0;outline:none;min-width:0;flex:1}
.wsearch:focus-within{border-color:var(--muted)}
.wlist{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#wList>p{margin:12px 2px 0}
#wList>.olabel:first-child{margin-top:14px}
.wpick{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:8px 12px 8px 8px;text-align:left;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.wpick+.wpick{border-top:1px solid var(--line)}
.wpick:active{background:var(--chip)}
.wpick .thumb{flex:0 0 40px;height:50px;border-radius:7px;overflow:hidden}
.wpick .m{flex:1;min-width:0;display:flex;flex-direction:column}
.wpick .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpick .ck{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.wpick[aria-pressed=true] .ck{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wpick .ck svg.i{width:16px;height:16px;stroke-width:3}
.wmore{display:block;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:12px;color:var(--accent);font-weight:600;cursor:pointer}
.wreact button{display:inline-flex;align-items:center;gap:6px}
.wreact svg.i{width:18px;height:18px}
#wearErr{margin:8px 0 0}
/* layered wears: every layer's picture fanned out, base at the back */
.wstack{position:absolute;inset:9%}
.ws{position:absolute;border-radius:12%;overflow:hidden;background:var(--chip);box-shadow:0 0 0 1.5px var(--card),0 2px 6px rgba(0,0,0,.18)}
.thumb .ws{border-radius:6px}
.wnames>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .name.wnames{display:block;-webkit-line-clamp:unset}
.wnum{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;margin-right:6px;border-radius:999px;background:var(--chip);color:var(--muted);font-size:11px;font-weight:700;vertical-align:2px}
/* form: picked scents as an ordered stack */
.wlayers{list-style:none;margin:0 0 8px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wlayer{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 12px;min-height:50px}
.wlayer+.wlayer{border-top:1px solid var(--line)}
.wlayer .wnum{margin-right:4px;background:var(--accent);color:var(--accent-ink)}
.wlayer .m{flex:1;min-width:0;display:flex;flex-direction:column}
.wlayer .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wPicked .hint{margin:-2px 2px 10px}
/* wear page */
.fact{display:inline-flex;align-items:center;gap:5px;font-size:14px;background:var(--chip);border-radius:999px;padding:4px 11px}
.wnote{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.wlayers-v{list-style:none;margin:0;padding:0}
.wlayer-v+.wlayer-v{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.wl-head{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;margin-bottom:10px}
.wl-head:active{opacity:.7}
.wl-head .thumb{flex:0 0 46px;height:58px;border-radius:8px;overflow:hidden}
.wl-head .m{flex:1;min-width:0;display:flex;flex-direction:column}
.wl-head .name{font-weight:600;font-size:17px;line-height:1.25}
.wl-head>svg.i{color:var(--muted);flex:0 0 auto}
.wl-pos{font-size:12px;font-weight:600;color:var(--accent)}
/* home: the logo, today's date and today's wears read as one block above the library */
.logo-wrap.with-today{padding-bottom:12px}
.today{margin:0 0 10px}
.today-h{text-align:center;margin:0 auto 14px}
.today-h .brand-l{font-size:13px;letter-spacing:.08em}
.today-h h2{font-size:30px;line-height:1.15;margin:4px 0 0}
.todaycard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--ctl-soft)}
.todaycard .card{border:0;border-radius:0;background:none;padding:12px 14px 12px 12px}
.todaycard .card+.card{border-top:1px solid var(--line)}
.todaycard .card.prompt{border-style:none}
.tc-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:12px;color:var(--accent);font-weight:600;font-size:15px;cursor:pointer}
.tc-add svg.i{width:18px;height:18px}
.tc-add:active,.todaycard .card:active{background:var(--chip)}