@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/archivo-500.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/archivo-600.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/archivo-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/archivo-800.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/archivo-900.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/space-mono-700.woff2') format('woff2'); }
@font-face { font-family:'Yeseva One'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/yeseva-one-400.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/chivo-400.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/chivo-500.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/chivo-600.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/chivo-700.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/chivo-800.woff2') format('woff2'); }
@font-face { font-family:'Chivo'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/chivo-900.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/ibm-plex-mono-700.woff2') format('woff2'); }
@font-face { font-family:'Alfa Slab One'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/alfa-slab-one-400.woff2') format('woff2'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/bitter-400.woff2') format('woff2'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/bitter-500.woff2') format('woff2'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/bitter-600.woff2') format('woff2'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/bitter-700.woff2') format('woff2'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/bitter-800.woff2') format('woff2'); }
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/archivo-black-400.woff2') format('woff2'); }
@font-face { font-family:'Bungee'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/bungee-400.woff2') format('woff2'); }
@font-face { font-family:'Work Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/work-sans-400.woff2') format('woff2'); }
@font-face { font-family:'Work Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/work-sans-500.woff2') format('woff2'); }
@font-face { font-family:'Work Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/work-sans-600.woff2') format('woff2'); }
@font-face { font-family:'Work Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/work-sans-700.woff2') format('woff2'); }
@font-face { font-family:'Work Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/work-sans-800.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/fraunces-900.woff2') format('woff2'); }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/mulish-400.woff2') format('woff2'); }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/mulish-500.woff2') format('woff2'); }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/mulish-600.woff2') format('woff2'); }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/mulish-700.woff2') format('woff2'); }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/mulish-800.woff2') format('woff2'); }
@font-face { font-family:'Big Shoulders Display'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/big-shoulders-display-900.woff2') format('woff2'); }
.chart { width:100%; height:auto; display:block; }
.chart > svg { width:100%; height:auto; display:block; }
.heat { width:auto; max-width:100%; height:auto; display:block; }
.heat > svg { width:auto; max-width:100%; height:auto; display:block; }
.bg { fill:var(--panel); }
.hm0 { fill:var(--lv0); stroke:var(--ink); stroke-width:1.5; }
.hm1 { fill:var(--lv1); stroke:var(--ink); stroke-width:1.5; }
.hm2 { fill:var(--lv2); stroke:var(--ink); stroke-width:1.5; }
.hm3 { fill:var(--lv3); stroke:var(--ink); stroke-width:1.5; }
.hm4 { fill:var(--lv4); stroke:var(--ink); stroke-width:1.5; }
.hm-lbl { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:10px; }
.band  { fill:var(--accent); opacity:0.22; stroke:none; }
.area  { fill:var(--accent); opacity:0.16; stroke:none; }
.line  { fill:none; stroke:var(--ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.forecast-area { fill:var(--accent); opacity:0.06; stroke:none; }
.forecast { fill:none; stroke:var(--ink); stroke-width:2.5; stroke-dasharray:2 6; stroke-linejoin:round; stroke-linecap:round; opacity:0.45; }
.nowline { stroke:var(--ink); stroke-width:1.5; stroke-dasharray:3 4; opacity:0.4; }
.nowlabel { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:9px; letter-spacing:.5px; text-anchor:middle; text-transform:uppercase; }
.preroll { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:2 5; opacity:0.5; stroke-linecap:round; }
.wk-line { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.wk-area { fill:var(--accent); opacity:0.10; stroke:none; }
.wk-flat { stroke:var(--muted); stroke-width:1.5; opacity:0.35; stroke-linecap:round; }
.wk-limit { stroke:var(--danger); stroke-width:1; stroke-dasharray:4 4; opacity:0.5; }
.wk-limit-label { fill:var(--danger); font-family:var(--font-mono); font-weight:700; font-size:9px; text-anchor:end; opacity:0.7; }
.wk-peak { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:10px; text-anchor:middle; }
.wk-lbl { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:11px; text-anchor:middle; }
.wk-lbl.today { fill:var(--ink); }
.col-link:hover .wk-area { opacity:0.2; }
.col-link:hover .wk-line { stroke-width:2; }
.sparkle-star { fill:var(--foam-hi); stroke:var(--accent-dk); stroke-width:.6; stroke-linejoin:round; }
.sparkle-mini { fill:var(--accent-dk); animation:twinkle 1.3s ease-in-out infinite; animation-delay:.4s; transform-box:fill-box; transform-origin:center; }
.sparkle-fleck { fill:var(--accent-dk); opacity:.85; animation:twinkle 1.1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.sparkle { animation:twinkle 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.sparkle--good .sparkle-star { stroke:var(--good); }
.sparkle--good .sparkle-mini, .sparkle--good .sparkle-fleck { fill:var(--good); }
.sparkle--warn .sparkle-star { stroke:var(--warning); }
.sparkle--warn .sparkle-mini, .sparkle--warn .sparkle-fleck { fill:var(--warning); }
.sparkle--hot .sparkle-star { stroke:var(--serious); }
.sparkle--hot .sparkle-mini, .sparkle--hot .sparkle-fleck { fill:var(--serious); }
.sparkle--crit .sparkle-star { stroke:var(--critical); }
.sparkle--crit .sparkle-mini, .sparkle--crit .sparkle-fleck { fill:var(--critical); }
@keyframes twinkle { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:var(--tw-op,.35); transform:scale(var(--tw-sc,.72)); } }
.mark  { fill:var(--accent-dk); stroke:var(--ink); stroke-width:1.5; }
.bar   { fill:var(--accent); stroke:var(--ink); stroke-width:1.5; }
.grid  { stroke:var(--line); stroke-width:1; }
.baseline { stroke:var(--ink); stroke-width:1.5; }
.limit { stroke:var(--danger); stroke-width:2; stroke-dasharray:6 5; opacity:0.9; }
.limit-label { fill:var(--danger); font-family:var(--font-mono); font-weight:700; font-size:11px; text-anchor:end; }
.ytick { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:11px; text-anchor:end; font-variant-numeric:tabular-nums; }
.xtick { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:11px; text-anchor:middle; font-variant-numeric:tabular-nums; }
.axis-label { fill:var(--muted); font-size:10px; text-anchor:end; }
.ytick-r { fill:var(--danger); font-family:var(--font-mono); font-weight:700; font-size:11px; text-anchor:start; font-variant-numeric:tabular-nums; opacity:0.85; }
.gl-peak { stroke:var(--danger); stroke-width:2; stroke-linecap:round; }
.gl-spared { fill:var(--danger); opacity:0.14; }
.gl-tag { fill:var(--danger); font-family:var(--font-mono); font-weight:700; font-size:10px; text-anchor:start; }

/* ── JS hover layer (priv/static/js/bac_hover.js). Inert until the script
   wires it up, but not optional: the script overlays a capture rect across
   the whole plot, and an SVG shape with no fill declared paints solid black. */
svg[data-bac-chart] .mark { transition:none; cursor:pointer; }
.bac-capture { fill:transparent; pointer-events:all; }
.bac-cross { pointer-events:none; }
.bac-cross-line { stroke:var(--ink); stroke-width:1; opacity:.35; }
.bac-cross-dot { fill:var(--panel); stroke:var(--ink); stroke-width:2; }
.mark-hit { fill:transparent; stroke:none; }
.mark-ring { fill:none; stroke:var(--accent); stroke-width:2; opacity:.55; pointer-events:none; }
.chip { pointer-events:none; }
.chip-sh { fill:var(--ink); opacity:.85; }
.chip-bg { fill:var(--panel); stroke:var(--ink); stroke-width:1.5; }
.chip-time, .chip-sub { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:10px; }
.chip-val { fill:var(--ink); font-family:var(--font-mono); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.chip-val.hot { fill:var(--danger); }
.chip-est { fill:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:9px; letter-spacing:.5px; text-transform:uppercase; }
.chip-name { fill:var(--ink); font-family:var(--font-mono); font-weight:700; font-size:12px; }
.limit-hit { stroke:transparent; stroke-width:14; fill:none; cursor:help; }
/* Only once JS marks the chart interactive is the label hover-gated; without
   JS (print, no-script) it stays visible so the limit is never hidden. */
.bac-live .limit-label { opacity:0; transition:opacity .12s ease-out; }
.bac-live .limit-label.lit { opacity:1; }
.bac-live .limit { transition:opacity .12s ease-out; }
.bac-live .limit.lit { opacity:1; }
* { box-sizing:border-box; }
body {
  margin:0; background-color:var(--paper); color:var(--ink);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size:7px 7px;
  font-family:var(--font-body); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:900px; margin:0 auto; padding:28px 20px 56px; }
a { color:var(--link); }
a:hover { color:var(--link-h); }

/* Masthead: brand + handle read as one lockup on the left (.header-id);
   the right group (.header-meta) holds the badge (live pill / period badge)
   and, on someone else's page, a quiet "@you" link back to your dashboard. */
header { display:flex; align-items:center; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; margin-bottom:20px; }
.header-id { display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap; }
.brand { font-family:var(--font-display); font-size:38px; line-height:.8; letter-spacing:.5px; text-transform:lowercase; color:inherit; text-decoration:none; }
.brand-b { color:var(--accent); }
.who { color:var(--muted); font-size:16px; font-weight:700; font-family:var(--font-mono); text-decoration:none; }
.who::before { content:"@"; color:var(--muted); }
.who:hover { color:var(--ink); text-decoration:underline; }
.header-meta { display:flex; align-items:center; gap:10px; margin-left:auto; }
.header-meta > * + * { padding-left:10px; border-left:1px solid var(--line); }
.viewer { color:var(--muted); font-size:16px; font-weight:700; font-family:var(--font-mono); text-decoration:none; white-space:nowrap; opacity:.7; transition:opacity .15s ease, color .15s ease; }
.viewer::before { content:"@"; color:var(--muted); }
.viewer:hover { opacity:1; color:var(--ink); text-decoration:underline; }
/* Settings is viewer-scoped, not subject-scoped — it rides in the header
   as a quiet gear next to the viewer handle rather than in the page tabs. */
/* The ⚙ glyph draws well inside its em box, so it reads a good bit smaller
   than its font-size suggests — hence a value well above the text beside it.
   Full opacity too: at this size the .7 wash was what made it hard to see. */
.settings-gear { font-size:28px; line-height:1; color:var(--muted); text-decoration:none; opacity:1;
                 display:inline-flex; align-items:center;
                 transition:opacity .15s ease, color .15s ease; }
.settings-gear:hover { opacity:1; color:var(--ink); }
.live { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:15px;
        font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--green); }
.live-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-ring);
            animation:blip 1.4s infinite; }
@keyframes blip { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
.period-badge { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:15px;
                font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted);
                padding:6px 14px; border:2px solid var(--line); border-radius:20px; }

/* Leaf pages (settings, measurements, …) keep the simple centered row —
   just one back link now that they're out of the tab group. */
.timenav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:20px; }
/* The shared nav row every analysis page wears: the five-tab destination
   group on the left, write actions pushed right. Time-shift lives in the
   body (.time-travel) and settings in the header (.settings-gear), so
   this row holds nothing but places you can go and things you can do. */
.pagenav { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
           gap:10px 16px; margin-bottom:20px; }
.pagenav-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-left:auto; }
/* Overview's "right now" line: one quiet row, not a second hero. Reads as
   a caption under the nav when dry; `.is-live` gives it the panel + border
   so an active session pulls the eye before the long-term charts do. */
.current-strip { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:-8px 0 20px;
                 font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.current-strip.is-live { padding:10px 14px; margin:-4px 0 22px; background:var(--panel);
                         border:2px solid var(--ink); border-radius:6px; box-shadow:3px 3px 0 var(--shadow); }
.cs-num { font-family:var(--font-display); font-size:22px; color:var(--ink); letter-spacing:.5px; }
.current-strip.is-live .cs-num { color:var(--accent); }
.cs-band { display:inline-flex; align-items:center; gap:7px; font-weight:700;
           text-transform:uppercase; letter-spacing:1.2px; font-size:11px; }
.cs-band .dot { width:8px; height:8px; border-radius:50%; }
.cs-last { font-variant-numeric:tabular-nums; }
.cs-go { margin-left:auto; color:var(--muted); font-weight:700; text-decoration:none;
         text-decoration-line:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.cs-go:hover { color:var(--ink); }
.tn-btns { display:flex; flex-wrap:wrap; gap:0; border:2px solid var(--ink); border-radius:6px; overflow:hidden;
           box-shadow:3px 3px 0 var(--shadow); }
.nav-btn {
  display:inline-block; padding:7px 11px; font-size:12.5px; font-weight:700;
  font-family:var(--font-mono); text-decoration:none; color:var(--muted); background:var(--panel);
  border-right:2px solid var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tn-btns .nav-btn:last-child { border-right:none; }
.nav-btn:hover { color:var(--ink); }
.nav-btn.on { background:var(--accent); color:var(--on-maint); }
/* Same tab, replayed instant: still where you are, but nothing about it
   is "now" any more — a muted fill says so, and clicking it returns. */
.nav-btn.on.past { background:var(--line); color:var(--ink); }
.model-switch .nav-btn.on { background:var(--green); color:var(--on-green); }
.nav-btn.off { color:var(--disabled); pointer-events:none; }

/* Quiet secondary links: the measurements link beside the add-a-drink
   button, and a leaf page's single way back up — muted mono, dotted
   underline, deliberately unlike the bordered tab buttons so it never
   reads as a peer destination. */
.nav-link { font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--muted);
            text-decoration:none; text-decoration-line:underline; text-decoration-style:dotted;
            text-underline-offset:3px; }
.nav-link:hover { color:var(--ink); }
.back-link { font-size:12.5px; }
.tn-when { color:var(--muted); font-size:12px; font-family:var(--font-mono); flex-basis:100%;
           font-variant-numeric:tabular-nums; }
.tn-title { font-family:var(--font-display); font-size:15px; color:var(--ink); padding:0 4px; letter-spacing:.3px; }

/* The one primary action: a solid gold button parked at the row's right. */
.drink-add{display:inline-block;padding:8px 13px;border:2px solid var(--ink);border-radius:6px;background:var(--accent);color:var(--on-maint);font-family:var(--font-mono);font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--shadow)}

/* Row between the hero and the charts: one-tap shortcuts on the left
   (text row first, quiet chips beneath), model switch on the right. */
.dash-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 16px;margin:0 4px 26px}
.dash-toolbar-left{display:flex;flex:1 1 0;flex-direction:column;gap:10px;min-width:0}
.dash-toolbar-left:empty{display:none}
.dash-toolbar .drink-chips{margin:0}
.dash-toolbar .drink-shortcuts{margin:0}
.dash-toolbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin:0 0 0 auto;flex:0 0 auto}
/* Time-shift moved out of the nav row and down here beside the model
   switch: both change *what instant you're looking at*, not where you are. */
.time-travel{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.model-toggle{display:flex;align-items:center;gap:8px;margin:0 0 0 auto;flex:0 0 auto;align-self:flex-start}
/* Model switch + "j'ai fini mon verre": read as plain muted text with just
   a dropdown caret — no border/box/fill. `field-sizing:content` shrinks
   the control to the *selected* option so there's no dead space between
   a short label (Linéaire) and the caret. */
.model-select,.finish-select{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted);background:transparent;border:none;border-radius:0;padding:0 11px 0 0;cursor:pointer;box-shadow:none;field-sizing:content;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 4px) 55%,calc(100% - 0px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.model-select:hover,.finish-select:hover{color:var(--ink)}
.model-go,.finish-form [data-finish-submit]{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted);background:none;border:none;padding:2px 4px;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.model-go:hover,.finish-form [data-finish-submit]:hover{color:var(--ink)}
.drink-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:10px 0 18px}
.drink-shortcuts form{margin:0}
.finish-form{display:flex;align-items:center;gap:8px}
.shortcut-btn{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--muted);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.shortcut-btn:hover{color:var(--ink)}
.shortcut-btn .shortcut-detail{font-weight:400;color:var(--muted)}
@media (max-width:520px){
  .brand{font-size:30px}
  .nav-btn{padding:7px 9px;font-size:12px}
  .tn-btns{box-shadow:2px 2px 0 var(--shadow)}
}
/* Suggestion chips: quiet single-line pills — hairline border, no
   shadow, muted detail — so five of them read as one row of options,
   not five competing buttons. */
.drink-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 0 0}
.drink-chips form{margin:0;flex:0 0 auto}
.drink-chip{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);background:none;border:1.5px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer;box-shadow:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.drink-chip:hover{border-color:var(--accent);background:var(--accent);color:var(--on-maint)}
.drink-chip .chip-detail{font-weight:400;color:var(--muted)}
.drink-chip:hover .chip-detail{color:inherit}
.drink-chip.chip-recent{border-style:dashed}
.undo-notice{display:flex;align-items:center;justify-content:space-between;gap:14px}
.undo-notice form{margin:0}
.undo-btn{color:var(--ink)}
.form-chips{margin:0 0 18px}
a.drink-chip{display:inline-block;text-decoration:none}
.chip-stomach{display:flex;align-items:center;gap:6px}
.chip-stomach[hidden]{display:none}
.seg-mini{font-family:var(--font-mono);font-size:12px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer}
.seg-mini.on{border-color:var(--ink);color:var(--ink);font-weight:700}
.size-presets{margin:-6px 0 16px}
.size-row{display:flex;flex-wrap:wrap;gap:8px}
.size-row[hidden]{display:none}
.size-btn{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);background:none;border:2px solid var(--ink);border-radius:6px;padding:6px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--shadow)}
.size-btn.on{background:var(--accent);color:var(--on-maint)}
.size-btn .size-cl{font-weight:400;color:var(--muted)}
.size-btn.on .size-cl{color:inherit}
.drink-details{margin:6px 0 12px;border:1px dashed var(--line);border-radius:8px;padding:0 14px}
.drink-details[open]{padding-bottom:10px}
.drink-details summary{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;padding:10px 0}
.drink-details summary:hover{color:var(--ink)}

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:2px 0 8px; }
.cal-dow { text-align:center; font-family:var(--font-mono); font-size:10px; font-weight:700;
           text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding-bottom:2px; }
.cal-cell {
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:2px solid var(--ink); border-radius:6px; text-decoration:none; color:var(--ink); font-size:12px;
  font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums;
}
.cal-pts { font-size:9px; font-weight:400; opacity:.85; }
.cal-cell.cal-today { outline:2px dashed var(--accent); outline-offset:2px; }
.cal-cell.cal-blank { visibility:hidden; border:none; }

/* History drill-down breadcrumbs: quiet mono trail, "today" pushed right. */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:-8px 0 16px;
          font-family:var(--font-mono); font-size:12px; font-weight:700; }
.crumbs a { color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--line); padding-bottom:1px; }
.crumbs a:hover { color:var(--ink); border-bottom-color:var(--ink); }
.crumb-sep { color:var(--muted); }
.crumb-here { color:var(--ink); }
.crumbs .crumb-today { margin-left:auto; color:var(--link); border-bottom:none;
                       text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.crumbs .crumb-today:hover { color:var(--link-h); }

/* Measurements page: per-day groups linking into the calendar. */
.m-day { margin-bottom:18px; }
.m-day:last-child { margin-bottom:6px; }
.m-day-head { display:flex; align-items:baseline; gap:10px; margin:0 0 4px;
              font-family:var(--font-mono); font-size:13px; font-weight:700; }
.m-day-head a { color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--line); }
.m-day-head a:hover { border-bottom-color:var(--ink); }
.m-day-count { color:var(--muted); font-size:11px; font-weight:400; }
td.dim { color:var(--muted); }
.cal-cell.hm0 { background:var(--lv0); }
.cal-cell.hm1 { background:var(--lv1); }
.cal-cell.hm2 { background:var(--lv2); }
.cal-cell.hm3 { background:var(--lv3); color:var(--on-green); }
.cal-cell.hm4 { background:var(--lv4); color:var(--on-green); }

.hero {
  border:3px solid var(--ink); border-radius:8px; box-shadow:9px 9px 0 var(--shadow);
  background:var(--panel); padding:26px 28px; margin-bottom:24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:28px 36px;
}
.hero-glass { display:flex; align-items:center; gap:38px; }
.hero-main { display:flex; flex-direction:column; gap:8px; }
.hero-readout { display:flex; flex-direction:column; gap:10px; }
.big { font-family:var(--font-display); font-size:64px; line-height:.82; letter-spacing:-1px; color:var(--accent-dk); }
.big .unit { font-size:24px; font-weight:400; color:var(--ink); letter-spacing:0; font-family:var(--font-display); }
.band { display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border:2.5px solid var(--ink);
        border-radius:30px; background:var(--pill); color:var(--on-pill); font-family:var(--font-mono);
        font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; width:fit-content; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.facts { list-style:none; margin:0; padding:0; display:grid; gap:16px 26px;
         grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); flex:1; min-width:220px; }
.facts li { display:flex; flex-direction:column; gap:5px; }
.facts .k { font-size:10.5px; font-family:var(--font-mono); font-weight:700; text-transform:uppercase;
            letter-spacing:1.5px; color:var(--muted); }
.facts .v { font-size:14px; font-family:var(--font-mono); font-weight:700; color:var(--ink);
            font-variant-numeric:tabular-nums; }
.facts .dim { color:var(--muted); font-weight:400; }

.cheeky-line { font-family:var(--font-mono); font-size:12px; color:var(--muted);
               font-style:italic; }

/* The post-log toast: the loudest line in the app, on purpose. */
.drink-cheer { font-family:var(--font-mono); font-weight:800; text-align:center;
               font-size:clamp(30px, 7vw, 52px); line-height:1.1; color:var(--accent);
               letter-spacing:1px; text-wrap:balance; overflow-wrap:anywhere;
               margin:10px 0 18px; }
/* …and the rest of the page lines up under it, centered. */
.drink-logged { text-align:center; }
.drink-logged .drink-sub { font-family:var(--font-mono); font-size:14px; color:var(--muted);
                           margin:4px 0 8px; }
.drink-logged .facts { justify-items:center; }
.drink-logged .facts li { align-items:center; }
.drink-logged .settings-actions { justify-content:center; }

/* Fresh-session celebration: an inline pill in the readout flow (no
   absolute positioning, so it can't escape the hero across themes). */
.apero-toast { display:inline-flex; align-items:center; gap:6px; margin-top:8px;
               font-family:var(--font-mono); font-weight:700; font-size:11px; text-transform:uppercase;
               letter-spacing:1px; padding:4px 11px; border:2px solid var(--ink); border-radius:20px;
               background:var(--pill); color:var(--on-pill); white-space:nowrap;
               box-shadow:3px 3px 0 var(--shadow); transform-origin:left center;
               animation:apero-pop .5s ease-out both, apero-bob 2.4s ease-in-out .5s infinite; }
.apero-umbrella { flex:none; transform:rotate(12deg); }
@keyframes apero-pop { 0% { opacity:0; transform:scale(.4) translateY(6px); }
                        70% { opacity:1; transform:scale(1.1) translateY(-2px); }
                        100% { opacity:1; transform:scale(1) translateY(0); } }
@keyframes apero-bob { 0%,100% { transform:translateY(0) rotate(-1deg); }
                        50% { transform:translateY(-2px) rotate(1deg); } }
/* Mobile overrides that must follow the base rules above (equal
   specificity — source order decides; an earlier attempt inside the
   mid-file media block silently lost to base rules defined below it).

   Hero: tighter padding/gaps so the readout column isn't starved, and
   the celebration pill wraps instead of punching out of the card.

   Toolbar: becomes a grid — shortcuts left / model switch right on the
   first row, then the chips get the FULL page width underneath as one
   swipeable edge-to-edge row (the flex layout squeezed them into the
   left column, which collapses badly on iOS where `field-sizing` is
   unsupported and the select renders at longest-option width).
   `display:contents` dissolves .dash-toolbar-left so its children
   place themselves on the grid directly. */
@media (max-width:520px){
  .hero{padding:20px 18px;gap:20px 24px}
  .hero-glass{gap:30px}
  .apero-toast{white-space:normal;max-width:100%;line-height:1.6}
  .dash-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 16px}
  .dash-toolbar-left{display:contents}
  .drink-shortcuts{grid-column:1;grid-row:1}
  .model-toggle{grid-column:2;grid-row:1;margin:0}
  .drink-chips,.chip-stomach{grid-column:1 / -1}
  .drink-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .drink-chips::-webkit-scrollbar{display:none}
}

.glass-wrap { position:relative; width:76px; height:136px; margin-right:10px; flex:none; }
.glass { position:absolute; border:3px solid var(--ink); background:var(--vessel); overflow:hidden; }
.glass-fill { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,var(--accent),var(--accent-dk)); }
.glass-foam { position:absolute; left:0; right:0; top:0; height:9px; background:var(--foam); border-top:2px solid var(--foam-hi); }
.glass-limit { position:absolute; left:0; right:0; border-top:2px dashed var(--danger); }
.glass-limit-label { position:absolute; right:-30px; font-family:var(--font-mono); font-size:9px;
                      font-weight:700; color:var(--danger); }
.glass-stem { position:absolute; left:calc(50% - 2.5px); width:5px; background:var(--ink); }
.glass-base { position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:44%; height:7px;
              box-sizing:border-box; background:var(--vessel); border:3px solid var(--ink); border-radius:2px; }

/* per-theme vessel silhouettes: bold clip-path outlines matching each drink */
.v-pint .glass, .v-stout .glass { left:0; right:0; bottom:0; height:100%; border-top:none; }
.v-pint .glass { border-radius:0 0 15px 15px; clip-path:polygon(6% 0,94% 0,84% 100%,16% 100%); }
.v-stout .glass { border-radius:0 0 12px 12px;
  clip-path:polygon(12% 0,88% 0,86% 44%,90% 52%,84% 100%,16% 100%,10% 52%,14% 44%); }
.v-tumbler .glass { left:5%; right:5%; bottom:0; height:66%; border-radius:0 0 8px 8px;
  clip-path:polygon(3% 0,97% 0,91% 100%,9% 100%); }
.v-jar .glass { left:9%; right:9%; bottom:0; height:86%; border-radius:0 0 10px 10px;
  clip-path:polygon(0 8%,10% 0,90% 0,100% 8%,100% 100%,0 100%); }
.v-jar .glass-band { position:absolute; left:6%; right:6%; top:8%; height:14px; z-index:3;
  border:3px solid var(--ink); background:var(--vessel); border-radius:3px; }
.v-wine .glass { left:13%; right:13%; bottom:46%; height:50%;
  clip-path:polygon(14% 0,86% 0,98% 40%,72% 100%,28% 100%,2% 40%); }
.v-wine .glass-stem { bottom:7px; height:calc(46% - 7px); }
.v-copa .glass { left:6%; right:6%; bottom:44%; height:54%;
  clip-path:polygon(30% 0,70% 0,90% 10%,100% 38%,88% 74%,66% 100%,34% 100%,12% 74%,0 38%,10% 10%); }
.v-copa .glass-stem { bottom:7px; height:calc(44% - 7px); }
.v-absinthe .glass { left:14%; right:14%; bottom:40%; height:56%;
  clip-path:polygon(16% 0,84% 0,80% 52%,94% 60%,86% 84%,66% 100%,34% 100%,14% 84%,6% 60%,20% 52%); }
.v-absinthe .glass-stem { bottom:7px; height:calc(40% - 7px); }

.card {
  border:3px solid var(--ink); border-radius:8px; box-shadow:9px 9px 0 var(--shadow);
  background:var(--panel); padding:20px 22px 14px; margin-bottom:24px;
}
.card h2 { font-family:var(--font-display); font-size:21px; text-transform:uppercase; letter-spacing:.4px;
           margin:0 0 12px; font-weight:400; }
.card h2 .sub { color:var(--muted); font-family:var(--font-mono); font-size:12px; font-weight:400;
                text-transform:none; letter-spacing:0; margin-left:8px; }
.empty { color:var(--muted); font-size:14px; font-family:var(--font-mono); padding:8px 2px 14px; }

/* Realtime comparison line under the hero: today vs yesterday/usual. */
.trend-compare { font-family:var(--font-mono); font-size:12px; color:var(--muted);
                 margin:6px 2px 14px; }

/* Estimated-BAC window switch (12h/24h/48h/72h), parked in the card title. */
.bac-window { float:right; display:inline-flex; gap:4px; }
.win-link { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--muted);
            text-decoration:none; text-transform:none; letter-spacing:0;
            border:2px solid var(--ink); border-radius:4px; padding:1px 6px; background:var(--panel); }
.win-link:hover { color:var(--ink); }
.win-link.on { background:var(--ink); color:var(--panel); }

/* Hero form pages (login/register/claim, settings, drink form, add-measurement):
   same panel/border/shadow language as `.card`, just roomier — one form is
   the whole page, so it can afford to be a centerpiece. */
.card.form-card { border-radius:22px; box-shadow:11px 11px 0 var(--shadow);
                   padding:clamp(24px,6vw,46px) clamp(20px,6vw,48px) clamp(20px,5vw,40px); }
.card.form-card h2 { font-size:clamp(26px,5vw,36px); letter-spacing:.01em; margin-bottom:18px; }

.duo { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.duo .card { margin-bottom:0; }
.duo { margin-bottom:24px; }
.metrics-card { border-color:var(--ink); }
.metrics-more { float:right; color:var(--link); font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:none; letter-spacing:0; }
.metrics-note { margin:-5px 0 18px; color:var(--muted); font-size:12px; }
.metrics-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.metric-period { border:2px solid var(--line); border-radius:5px; padding:14px; background:var(--glass); }
.metric-period h3 { margin:0 0 12px; font-family:var(--font-display); font-size:16px; text-transform:uppercase; letter-spacing:.4px; }
.metric-total { font-family:var(--font-mono); font-size:13px; }
.metric-total strong { font-size:30px; line-height:1; }
.metric-total span { color:var(--muted); }
.metric-change { min-height:20px; margin:8px 0 14px; color:var(--accent); font-family:var(--font-mono); font-size:11px; font-weight:700; }
.metric-change .dim { color:var(--muted); font-weight:400; }
.metric-period dl { display:grid; gap:8px; margin:0; }
.metric-period dl div { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:7px; }
.metric-period dt { color:var(--muted); font-size:11px; }
.metric-period dd { margin:0; font-family:var(--font-mono); font-size:12px; font-weight:700; text-align:right; }
.metric-indices { margin-top:13px; color:var(--muted); font-family:var(--font-mono); font-size:10px; }
.metric-indices strong { color:var(--ink); }

.hm-key { display:flex; align-items:center; gap:7px; margin-top:14px;
          color:var(--muted); font-family:var(--font-mono); font-weight:700; font-size:12px; }
.hm-key .hm-sw { width:15px; height:15px; border:2px solid var(--ink); border-radius:3px; display:inline-block; }
.hm-key span:first-child { margin-right:2px; }
.hm-sw.hm0 { background:var(--lv0); } .hm-sw.hm1 { background:var(--lv1); }
.hm-sw.hm2 { background:var(--lv2); } .hm-sw.hm3 { background:var(--lv3); }
.hm-sw.hm4 { background:var(--lv4); }

.bev { display:flex; flex-direction:column; gap:12px; padding:4px 0 8px; }
.bev-row { display:grid; grid-template-columns:150px 1fr 68px; align-items:center; gap:14px; }
.bev-name { font-size:13px; font-family:var(--font-mono); font-weight:700; color:var(--ink);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bev-track { border:2.5px solid var(--ink); border-radius:4px; background:var(--glass); height:18px; overflow:hidden; }
.bev-fill { height:100%; min-width:2px;
            background:repeating-linear-gradient(45deg,var(--accent),var(--accent) 7px,var(--accent-dk) 7px,var(--accent-dk) 14px); }
.bev-val { font-size:14px; font-family:var(--font-mono); font-weight:700; text-align:right;
           font-variant-numeric:tabular-nums; color:var(--ink); }
.bev-val .dim { color:var(--muted); font-size:12px; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--muted); font-weight:700; font-size:10.5px; font-family:var(--font-mono);
     text-transform:uppercase; letter-spacing:1.4px; padding:0 12px 10px 0; border-bottom:2.5px solid var(--ink); }
td { padding:11px 12px 11px 0; border-bottom:1.5px dashed var(--line); color:var(--ink); }
td.t { color:var(--ink); white-space:nowrap; font-family:var(--font-mono); font-weight:700; font-size:13px;
       font-variant-numeric:tabular-nums; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
                 font-family:var(--font-mono); color:var(--muted); }
td.num:nth-of-type(4), th.num:nth-of-type(2) { }
td.c { color:var(--accent); letter-spacing:1px; }
tbody tr:last-child td { border-bottom:none; }
td.edit { white-space:nowrap; padding-right:0; text-align:right; }.edit-link{font-family:var(--font-mono);font-size:12px;font-weight:700;}

footer { color:var(--muted); font-family:var(--font-mono); font-size:12px; margin-top:26px; text-align:center; }
footer strong { color:var(--ink); }
.foot-links { margin-top:12px; }
.foot-link { color:var(--muted); font-family:var(--font-mono); font-size:12px; text-decoration:none;
             border-bottom:1px dotted var(--line); padding-bottom:1px; }
.foot-link:hover { color:var(--ink); border-bottom-color:var(--ink); }

.col-link { cursor:pointer; }
.col-link:hover .bar { opacity:.75; }
.settings{display:grid;gap:22px;max-width:34rem}
.settings .fld{display:grid;gap:9px}
.settings .fld-k{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.settings .fld-hint{font-size:13px;color:var(--muted);font-weight:500}
.settings input[type="text"],.settings input[type="email"],.settings input[type="password"],.settings input[type="number"],.settings input[type="date"],.settings input[type="datetime-local"],.settings select{width:100%;padding:16px 18px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);font:inherit;font-size:17px;font-weight:600;outline:none;transition:border-color .12s,box-shadow .12s}
.settings textarea{width:100%;padding:14px 18px;border:2px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;resize:vertical;outline:none;transition:border-color .12s,box-shadow .12s}
.settings input:focus,.settings select:focus,.settings textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}

.num-wrap{position:relative}
.num-wrap:has(.num-unit) input{padding-right:52px}
.num-unit{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--muted);pointer-events:none}

/* JS-injected [-]/[+] steppers beside the drink form's volume/ABV fields
   (drink_form.js): the .num-wrap moves into a flex .num-row with two
   .step-btn squares matching the input chrome. No JS → no row, no buttons. */
.num-row{display:flex;gap:10px}
.num-row .num-wrap{flex:1;min-width:0}
.step-btn{flex:none;width:54px;font-family:var(--font-mono);font-size:19px;font-weight:700;line-height:1;color:var(--muted);background:var(--panel);border:2px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .12s,color .12s}
.step-btn:hover{border-color:var(--ink);color:var(--ink)}
.step-btn:active{background:var(--accent);color:var(--on-maint);border-color:var(--ink)}
.step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.select-wrap::after{content:"⌃⌄";position:absolute;right:18px;top:50%;transform:translateY(-50%) scale(1,.7);font-family:var(--font-mono);font-weight:800;color:var(--accent);pointer-events:none;font-size:13px;letter-spacing:-2px}

.seg{display:flex;flex-wrap:wrap;gap:10px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg-btn{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--panel);border:2.5px solid var(--line);border-radius:12px;padding:12px 18px;transition:border-color .1s,background .1s,color .1s}
.seg input:checked + .seg-btn{color:var(--on-maint);background:var(--accent);border-color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.seg input:focus-visible + .seg-btn{outline:2px solid var(--accent);outline-offset:2px}

.theme-switch{display:flex;flex-wrap:wrap;gap:10px}
.theme-switch label{position:relative;cursor:pointer}
.theme-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.theme-swatch{display:inline-flex;align-items:center;gap:7px;padding:10px 16px 10px 10px;border:2.5px solid var(--line);border-radius:20px;background:var(--panel);color:var(--muted);font-family:var(--font-mono);font-weight:700;font-size:13px;transition:border-color .1s,color .1s,box-shadow .1s}
.theme-switch input:checked + .theme-swatch{color:var(--ink);border-color:var(--swatch, var(--ink));box-shadow:3px 3px 0 var(--swatch, var(--shadow))}
.theme-switch input:focus-visible + .theme-swatch{outline:2px solid var(--accent);outline-offset:2px}
.swatch-dot{width:16px;height:16px;border-radius:50%;background:var(--swatch);border:1.5px solid var(--ink);flex:none}
.swatch-dot-auto{background:var(--panel);border-style:dashed;border-color:var(--muted)}

.settings-actions{display:flex;gap:22px;align-items:center;margin-top:8px;flex-wrap:wrap}
.settings-actions button{font-family:var(--font-display);font-size:18px;letter-spacing:.03em;text-transform:uppercase;padding:15px 38px;border:3px solid var(--ink);border-radius:14px;background:var(--accent);color:var(--on-maint);font-weight:400;cursor:pointer;box-shadow:4px 4px 0 var(--shadow);transition:transform .1s,box-shadow .1s}
.settings-actions button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.settings-actions .cancel{font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--muted);text-decoration:none}
.settings-actions .cancel:hover{color:var(--ink);text-decoration:underline}
.notice{padding:10px 14px;border-radius:8px;margin:12px 0}
.notice.ok{background:var(--lv1);color:var(--ink)}
.notice.err{background:var(--danger);color:#fff}
.form-note{color:var(--muted);margin:-4px 0 16px;font-size:13px}

/* Login page: the quiet "forgot your password?" link under the password
   form, and the separate, clearly-distinct magic-link teaser card below it
   — see `session_html/new.html.heex`. Kept as its own card (not folded into
   the password form) so the two sign-in paths read as genuinely separate
   choices, not one form with an escape hatch. */
.forgot-password{margin:14px 0 0;font-size:13px}
.forgot-password a{color:var(--muted);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.forgot-password a:hover{color:var(--ink)}
.magic-link-teaser{margin-top:24px;padding:clamp(20px,5vw,32px) clamp(18px,5vw,32px)}
.magic-link-teaser h2{font-size:clamp(18px,3vw,22px);margin-bottom:10px}
.magic-link-cta{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;border:2.5px solid var(--ink);border-radius:12px;padding:11px 22px;background:var(--panel);box-shadow:3px 3px 0 var(--shadow);transition:transform .1s,box-shadow .1s}
.magic-link-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
.delete-drink{margin-top:18px}.delete-drink button{padding:8px 14px;border:2px solid var(--danger);border-radius:8px;background:transparent;color:var(--danger);font:inherit;cursor:pointer}

.settings-subnav{display:flex;flex-wrap:wrap;gap:12px;margin:-6px 0 22px}
.settings-subnav a{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--ink);text-decoration:none;border:2px solid var(--line);border-radius:10px;padding:8px 14px;transition:border-color .1s,color .1s}
.settings-subnav a:hover{border-color:var(--accent);color:var(--accent)}
.settings-group{display:grid;gap:22px}
.settings-group-title{font-family:var(--font-display);font-size:15px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0}
.fld-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}

.api-key-token{display:block;margin-top:8px;padding:10px 14px;border-radius:8px;background:var(--panel);color:var(--ink);font-family:var(--font-mono);font-size:14px;word-break:break-all;user-select:all}
.api-keys-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.api-key-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border:2px solid var(--line);border-radius:14px}
.api-key-info{display:grid;gap:4px}
.api-key-mask{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.api-key-revoke button,.logout-form button{padding:8px 14px;border:2px solid var(--danger);border-radius:8px;background:transparent;color:var(--danger);font:inherit;cursor:pointer}
.logout-form{margin-top:12px}
.vibe-meter{margin:0 0 1rem;padding:.75rem 1rem;border-radius:.75rem;background:var(--panel);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
.vibe-label{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-weight:600}
.vibe-mood{color:var(--ink)}
.vibe-pct{color:var(--muted);font-variant-numeric:tabular-nums}
.vibe-bar{margin:.4rem 0 .5rem;height:.6rem;border-radius:999px;background:color-mix(in srgb, var(--ink) 10%, transparent);overflow:hidden}
.vibe-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, var(--good), var(--warning) 60%, var(--critical));transition:width .3s ease}
.vibe-counts{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.85em;color:var(--muted)}
.vibe-count{white-space:nowrap}
.push-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--panel);color:var(--ink);border-top:3px solid var(--ink);box-shadow:0 -4px 0 var(--shadow);font-family:var(--font-mono);font-size:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.push-banner[hidden]{display:none}
.push-banner-actions{display:flex;gap:10px;flex-wrap:wrap}
.push-banner-actions button{font-family:var(--font-mono);font-weight:700;font-size:13px;padding:9px 16px;border:2px solid var(--ink);border-radius:10px;background:var(--accent);color:var(--on-maint);cursor:pointer}
.push-banner-actions button.push-banner-dismiss{background:transparent;color:var(--muted);border-color:var(--line)}
.crown{margin-right:.3rem;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.crown-holder{outline:2px solid var(--accent);outline-offset:2px}

/* Recipes: the list row's inline actions (log / edit / delete) and the
   ingredient-row form. The row's three inputs are grid columns under the
   name/cl/abv labels; on a phone the remove button drops to its own line. */
.recipe-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;justify-content:flex-end}
.recipe-actions form{margin:0}
.shortcut-btn.danger{color:var(--danger)}
.shortcut-btn.danger:hover{color:var(--danger)}
.ingredient-rows{display:grid;gap:10px}
.ingredient-row{display:grid;grid-template-columns:1fr 90px 90px auto;gap:10px;align-items:center}
.ingredient-row input{border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:15px;font-weight:600;padding:10px 12px;outline:none;transition:border-color .12s,box-shadow .12s;min-width:0;width:100%}
.ingredient-row input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.ing-add{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted);background:none;border:none;padding:8px 2px;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.ing-add:hover{color:var(--ink)}
.ing-remove{font-family:var(--font-mono);font-size:12px;color:var(--danger);background:none;border:none;padding:8px 4px;cursor:pointer}
.ing-remove:hover{text-decoration:underline}
.recipe-total{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin:14px 0 0}
.recipe-total strong{color:var(--ink);font-variant-numeric:tabular-nums}
.recipe-total[hidden]{display:none}

/* Mobile touch + above-the-fold pass. Sits at the very end of the page
   stylesheet so it overrides every base rule above at equal specificity,
   under the same ≤520px breakpoint the rest of the small-screen layout
   uses.

   The `.facts` grid is declared `repeat(auto-fit,minmax(150px,1fr))`, but
   inside the flex hero it is sized intrinsically — before the flex layout
   knows the final width — so the `1fr` tracks collapse and the six stats
   stack into one tall column (~320px on a phone), burying the charts.
   Forcing two tracks keeps the readout right under the glass. */
@media (max-width:520px){
  .hero .facts,.drink-logged .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}

  /* Tap targets up to a touch-friendly size: the header gear, nav tabs,
     suggestion chips, BAC-window links, edit links and the quiet
     back/cancel links were sub-44px text or thin pills — awkward for a
     thumb. Padding grows the hit area; the gear's negative margins keep
     its visual position while the hitbox grows. */
  .nav-btn{padding:9px 11px}
  .drink-chip{padding:8px 13px}
  .win-link{padding:8px 10px;border-radius:6px}
  .settings-gear{padding:6px 5px;margin:-6px -5px}
  .edit-link{display:inline-block;padding:9px 7px;font-size:13px}
  .nav-link,.back-link{padding:9px 2px}
  .settings-actions .cancel{padding:9px 3px}

  /* The recent-drinks table's Note column is empty here — dropping it lets
     When/Drink/Volume/Points fit without sideways scrolling, and the Edit
     link owns the last column on its own. */
  .table-wrap table th:nth-child(5),
  .table-wrap table td:nth-child(5){display:none}
  .table-wrap table th:last-child,
  .table-wrap table td:last-child{padding-right:0}

  /* The one primary action: on a phone the add-a-drink CTA gets its own
     full-width row under the tabs instead of a small button off to the
     right, so a thumb can hit it without aiming. */
  .pagenav-actions{width:100%}
  .drink-add{width:100%;text-align:center;padding:12px 13px}

  /* The two-card `.duo` grid declares `minmax(320px,1fr)` — below ~360px
     viewport that floor is wider than the container, shoving the page
     40px sideways. Drop the floor so the cards fill the wrap. */
  .duo{grid-template-columns:minmax(0,1fr)}

  /* Seven 1fr calendar tracks plus 6px gaps outgrow a ≤320px wrap by a
     few px. `minmax(0,1fr)` lets tracks share the available width. */
  .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* Recipe form ingredient rows on a phone: name/cl/abv share one line, the
   remove button drops beneath them (full-width row, left-aligned). */
@media (max-width:520px){
  .ingredient-row{grid-template-columns:minmax(0,1fr) 80px 80px;grid-auto-rows:auto}
  .ing-remove{grid-column:1 / -1;justify-self:start}
}
:root, :root[data-theme="beerpunk"] { --accent:#dd9433;--accent-dk:#c9781e;--critical:#d23b1e;--danger:#d23b1e;--disabled:#b9a988;--dot:#00000014;--foam:#fdf6e4;--glass:#f4ead1;--good:#3f6b45;--green:#3f6b45;--green-ring:#3f6b4533;--ink:#1a1712;--line:#d8c9a6;--link:#b5661a;--link-h:#8a4a10;--lv0:#efe3c8;--lv1:#f0c98f;--lv2:#dd9433;--lv3:#b5661a;--lv4:#6b3a10;--muted:#8a7a5f;--on-green:#fbf6e7;--on-maint:#1a1712;--on-pill:#1a1712;--panel:#fbf6e7;--paper:#efe1c1;--pill:#f0c24a;--serious:#c9781e;--shadow:#1a1712;--warning:#dd9433;--font-display:'Anton',sans-serif;--font-body:'Archivo',sans-serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root, :root[data-theme="beerpunk"] { --accent:#e6a53f;--accent-dk:#f0b95a;--critical:#ef6b52;--danger:#ef6b52;--disabled:#5c4e37;--dot:#ffffff10;--foam:#3a2f1e;--glass:#0e0b07;--good:#7aa66a;--green:#7aa66a;--green-ring:#7aa66a44;--ink:#f2e4c6;--line:#3a2f1e;--link:#e6a53f;--link-h:#f0b95a;--lv0:#241c11;--lv1:#5c4014;--lv2:#a3701f;--lv3:#d99a35;--lv4:#f0c66a;--muted:#a08a63;--on-green:#14100a;--on-maint:#14100a;--on-pill:#14100a;--panel:#211a11;--paper:#14100a;--pill:#e6a53f;--serious:#f0b95a;--shadow:#000000;--warning:#e6a53f;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="grapepunk"] { --accent:#a34d86;--accent-dk:#6e2a52;--critical:#c62b52;--danger:#c62b52;--disabled:#b7a0b3;--dot:#00000014;--foam:#fbf4f8;--glass:#efe0ec;--good:#4a7a3f;--green:#4a7a3f;--green-ring:#4a7a3f33;--ink:#241019;--line:#d3bfcf;--link:#a34d86;--link-h:#5e2247;--lv0:#e7d6e2;--lv1:#dcaecb;--lv2:#a34d86;--lv3:#6e2a52;--lv4:#3e112c;--muted:#8a6c81;--on-green:#f7eef4;--on-maint:#f7eef4;--on-pill:#241019;--panel:#f7eef4;--paper:#ece0ea;--pill:#d98fc0;--serious:#6e2a52;--shadow:#241019;--warning:#a34d86;--font-display:'Yeseva One',serif;--font-body:'Chivo',sans-serif;--font-mono:'IBM Plex Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="grapepunk"] { --accent:#c25a9e;--accent-dk:#d97ab5;--critical:#f0637f;--danger:#f0637f;--disabled:#5a3a52;--dot:#ffffff10;--foam:#3a2033;--glass:#0f0710;--good:#88bd6e;--green:#88bd6e;--green-ring:#88bd6e44;--ink:#f2dcea;--line:#3a2033;--link:#d97ab5;--link-h:#e79ac9;--lv0:#241120;--lv1:#5a2a4c;--lv2:#9c4a7d;--lv3:#c25a9e;--lv4:#e79ac9;--muted:#a878a0;--on-green:#160a13;--on-maint:#160a13;--on-pill:#160a13;--panel:#241120;--paper:#160a13;--pill:#c25a9e;--serious:#d97ab5;--shadow:#000000;--warning:#c25a9e;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="liquorpunk"] { --accent:#a8611f;--accent-dk:#6b3410;--critical:#c0392b;--danger:#c0392b;--disabled:#bfa889;--dot:#00000014;--foam:#faf1de;--glass:#f0e0c4;--good:#4a6b3f;--green:#4a6b3f;--green-ring:#4a6b3f33;--ink:#241608;--line:#d9c3a0;--link:#8a4415;--link-h:#5c2c0c;--lv0:#ecdcc0;--lv1:#d9a85f;--lv2:#a8611f;--lv3:#6b3410;--lv4:#3a1a06;--muted:#8a6d4a;--on-green:#f5ead9;--on-maint:#f5ead9;--on-pill:#241608;--panel:#f5ead9;--paper:#e8d4b8;--pill:#c9862f;--serious:#6b3410;--shadow:#241608;--warning:#a8611f;--font-display:'Alfa Slab One',sans-serif;--font-body:'Bitter',serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="liquorpunk"] { --accent:#c9772f;--accent-dk:#e6923f;--critical:#e6604a;--danger:#e6604a;--disabled:#5c4527;--dot:#ffffff10;--foam:#3a2810;--glass:#100a03;--good:#84a86a;--green:#84a86a;--green-ring:#84a86a44;--ink:#f0dfc0;--line:#3a2810;--link:#e6923f;--link-h:#f0ab5a;--lv0:#241608;--lv1:#6b4014;--lv2:#a8611f;--lv3:#d9902f;--lv4:#f0b95a;--muted:#a3854f;--on-green:#150d05;--on-maint:#150d05;--on-pill:#150d05;--panel:#241608;--paper:#150d05;--pill:#c9772f;--serious:#e6923f;--shadow:#000000;--warning:#c9772f;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="moonshine"] { --accent:#9aab6e;--accent-dk:#6d7c47;--critical:#c2372a;--danger:#c2372a;--disabled:#b3b8a3;--dot:#00000014;--foam:#fbfcf7;--glass:#eef0e4;--good:#4a7a3f;--green:#4a7a3f;--green-ring:#4a7a3f33;--ink:#1c1f16;--line:#cdd1bd;--link:#5c6b3f;--link-h:#3d4829;--lv0:#e9ebdf;--lv1:#cdd6a8;--lv2:#9aab6e;--lv3:#6d7c47;--lv4:#3d4626;--muted:#7d8570;--on-green:#f2f4ea;--on-maint:#1c1f16;--on-pill:#1c1f16;--panel:#f2f4ea;--paper:#e4e6dc;--pill:#c7d19a;--serious:#6d7c47;--shadow:#1c1f16;--warning:#9aab6e;--font-display:'Archivo Black',sans-serif;--font-body:'Archivo',sans-serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="moonshine"] { --accent:#b9c98a;--accent-dk:#cdd6a8;--critical:#e6604a;--danger:#e6604a;--disabled:#4a4e3e;--dot:#ffffff10;--foam:#33362a;--glass:#0a0c07;--good:#8fc26e;--green:#8fc26e;--green-ring:#8fc26e44;--ink:#e6e9da;--line:#33362a;--link:#cdd6a8;--link-h:#dee6c2;--lv0:#1c1f16;--lv1:#4a5236;--lv2:#7d8f52;--lv3:#a8bd72;--lv4:#cdd6a8;--muted:#9aa08a;--on-green:#0f110b;--on-maint:#0f110b;--on-pill:#0f110b;--panel:#1c1f16;--paper:#0f110b;--pill:#b9c98a;--serious:#cdd6a8;--shadow:#000000;--warning:#b9c98a;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="absinthepunk"] { --accent:#4ca832;--accent-dk:#2f7a1c;--critical:#c23b2b;--danger:#c23b2b;--disabled:#a8c49c;--dot:#00000014;--foam:#f6fbf1;--glass:#e3f0da;--good:#2f7a1c;--green:#2f7a1c;--green-ring:#2f7a1c33;--ink:#12210f;--line:#c2dab5;--link:#2f7a1c;--link-h:#1c5410;--lv0:#e0eed8;--lv1:#a8e07a;--lv2:#4ca832;--lv3:#2f7a1c;--lv4:#164512;--muted:#6a8a5f;--on-green:#eef5e8;--on-maint:#12210f;--on-pill:#12210f;--panel:#eef5e8;--paper:#dce8d4;--pill:#8ed46a;--serious:#2f7a1c;--shadow:#12210f;--warning:#4ca832;--font-display:'Bungee',sans-serif;--font-body:'Work Sans',sans-serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="absinthepunk"] { --accent:#6ad442;--accent-dk:#8ee868;--critical:#e6604a;--danger:#e6604a;--disabled:#3a5233;--dot:#ffffff10;--foam:#22381e;--glass:#081008;--good:#7fd460;--green:#7fd460;--green-ring:#7fd46044;--ink:#dcf0d0;--line:#22381e;--link:#8ee868;--link-h:#aef592;--lv0:#122112;--lv1:#2f5426;--lv2:#4ca832;--lv3:#6ad442;--lv4:#a0f07e;--muted:#7fa870;--on-green:#0a140a;--on-maint:#0a140a;--on-pill:#0a140a;--panel:#122112;--paper:#0a140a;--pill:#6ad442;--serious:#8ee868;--shadow:#000000;--warning:#6ad442;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="ginpunk"] { --accent:#1f8a8a;--accent-dk:#146060;--critical:#c23b2b;--danger:#c23b2b;--disabled:#a0c4c0;--dot:#00000014;--foam:#f4fbfa;--glass:#e0f0ee;--good:#2f7a5a;--green:#2f7a5a;--green-ring:#2f7a5a33;--ink:#0d211f;--line:#bcdad6;--link:#146060;--link-h:#0d3d3d;--lv0:#dcf0ee;--lv1:#7fd0cc;--lv2:#1f8a8a;--lv3:#146060;--lv4:#0a3838;--muted:#5f8a86;--on-green:#eaf4f2;--on-maint:#0d211f;--on-pill:#0d211f;--panel:#eaf4f2;--paper:#d6e6e4;--pill:#5fc4c0;--serious:#146060;--shadow:#0d211f;--warning:#1f8a8a;--font-display:'Fraunces',serif;--font-body:'Mulish',sans-serif;--font-mono:'IBM Plex Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="ginpunk"] { --accent:#3ab8b8;--accent-dk:#5fd4d0;--critical:#e6604a;--danger:#e6604a;--disabled:#2e4c4a;--dot:#ffffff10;--foam:#1e3634;--glass:#061110;--good:#5fbd8e;--green:#5fbd8e;--green-ring:#5fbd8e44;--ink:#d0eeec;--line:#1e3634;--link:#5fd4d0;--link-h:#8ee8e4;--lv0:#0f211f;--lv1:#1e4a48;--lv2:#1f8a8a;--lv3:#3ab8b8;--lv4:#7fe0dc;--muted:#6fa8a4;--on-green:#081615;--on-maint:#081615;--on-pill:#081615;--panel:#0f211f;--paper:#081615;--pill:#3ab8b8;--serious:#5fd4d0;--shadow:#000000;--warning:#3ab8b8;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="stoutpunk"] { --accent:#3a2416;--accent-dk:#1a0f08;--critical:#c0392b;--danger:#c0392b;--disabled:#b3a488;--dot:#00000014;--foam:#faf5e6;--glass:#e8dfc8;--good:#3f6b45;--green:#3f6b45;--green-ring:#3f6b4533;--ink:#140d08;--line:#d3c7a8;--link:#3a2416;--link-h:#1a0f08;--lv0:#e8e0cc;--lv1:#b89a6a;--lv2:#7a5432;--lv3:#3a2416;--lv4:#140d08;--muted:#7a6a52;--on-green:#f2ede0;--on-maint:#f2ede0;--on-pill:#f2ede0;--panel:#f2ede0;--paper:#e2dbc9;--pill:#5c3d24;--serious:#3a2416;--shadow:#140d08;--warning:#7a5432;--font-display:'Big Shoulders Display',sans-serif;--font-body:'Chivo',sans-serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="stoutpunk"] { --accent:#c9a35c;--accent-dk:#e6c079;--critical:#e6604a;--danger:#e6604a;--disabled:#3a2f1e;--dot:#ffffff10;--foam:#3a2f1e;--glass:#050302;--good:#7aa66a;--green:#7aa66a;--green-ring:#7aa66a44;--ink:#ede4cc;--line:#241a10;--link:#e6c079;--link-h:#f0d69a;--lv0:#140d08;--lv1:#3a2814;--lv2:#6b4a24;--lv3:#c9a35c;--lv4:#f0d69a;--muted:#8f7c5c;--on-green:#080503;--on-maint:#080503;--on-pill:#080503;--panel:#140d08;--paper:#080503;--pill:#c9a35c;--serious:#e6c079;--shadow:#000000;--warning:#c9a35c;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="neonpunk"] { --accent:#ff2fd4;--accent-dk:#e619c0;--critical:#ff2f5f;--danger:#ff2f5f;--disabled:#4a3a68;--dot:#ffffff14;--foam:#1f0f38;--glass:#130923;--good:#39ff8f;--green:#39ff8f;--green-ring:#39ff8f33;--ink:#f0e6ff;--line:#2e1f4a;--link:#2ff0ff;--link-h:#7ffbff;--lv0:#150a28;--lv1:#4a1f6b;--lv2:#9a2fb0;--lv3:#e619c0;--lv4:#ff6ef5;--muted:#9a7fc4;--on-green:#0d0518;--on-maint:#0d0518;--on-pill:#0d0518;--panel:#170a28;--paper:#0d0518;--pill:#2ff0ff;--serious:#e619c0;--shadow:#000000;--warning:#ff2fd4;--font-display:'Bungee',sans-serif;--font-body:'Archivo',sans-serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="neonpunk"] { --accent:#ff3df0;--accent-dk:#ff6ef5;--critical:#ff3d6b;--danger:#ff3d6b;--disabled:#3a2a55;--dot:#ffffff10;--foam:#241640;--glass:#08030f;--good:#4dff9e;--green:#4dff9e;--green-ring:#4dff9e44;--ink:#f5ecff;--line:#241640;--link:#3df5ff;--link-h:#8ffaff;--lv0:#150a28;--lv1:#4a1f6b;--lv2:#9a2fb0;--lv3:#e619c0;--lv4:#ff6ef5;--muted:#8f70bf;--on-green:#050208;--on-maint:#050208;--on-pill:#050208;--panel:#0f0620;--paper:#050208;--pill:#3df5ff;--serious:#ff6ef5;--shadow:#000000;--warning:#ff3df0;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="vaporpunk"] { --accent:#3fb8b0;--accent-dk:#278a83;--critical:#e8607a;--danger:#e8607a;--disabled:#c9aecb;--dot:#00000014;--foam:#fdf6fc;--glass:#f0dcee;--good:#5fae7a;--green:#5fae7a;--green-ring:#5fae7a33;--ink:#3a1f42;--line:#e3c7e0;--link:#278a83;--link-h:#1a5f5a;--lv0:#e0f0ee;--lv1:#9fdad2;--lv2:#3fb8b0;--lv3:#278a83;--lv4:#134a46;--muted:#8f6a94;--on-green:#3a1f42;--on-maint:#3a1f42;--on-pill:#3a1f42;--panel:#fdf3fb;--paper:#f5e6f5;--pill:#f2a8c4;--serious:#278a83;--shadow:#3a1f42;--warning:#3fb8b0;--font-display:'Yeseva One',serif;--font-body:'Mulish',sans-serif;--font-mono:'IBM Plex Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="vaporpunk"] { --accent:#4fd4c8;--accent-dk:#7fe8de;--critical:#ff7a94;--danger:#ff7a94;--disabled:#4a3a55;--dot:#ffffff10;--foam:#3a2848;--glass:#0f0a18;--good:#7fd49a;--green:#7fd49a;--green-ring:#7fd49a44;--ink:#f0dcf0;--line:#3a2848;--link:#7fe8de;--link-h:#b0f5ee;--lv0:#221731;--lv1:#2f4a48;--lv2:#3fa89c;--lv3:#4fd4c8;--lv4:#a0f0e6;--muted:#a888b0;--on-green:#160f22;--on-maint:#160f22;--on-pill:#160f22;--panel:#221731;--paper:#160f22;--pill:#f5a0c8;--serious:#7fe8de;--shadow:#000000;--warning:#4fd4c8;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="tikipunk"] { --accent:#ff7a1f;--accent-dk:#cc5a0a;--critical:#e6304a;--danger:#e6304a;--disabled:#c4ac7f;--dot:#00000014;--foam:#fdf7e6;--glass:#f5e8c4;--good:#2f8a4a;--green:#2f8a4a;--green-ring:#2f8a4a33;--ink:#2e1a0a;--line:#e0c896;--link:#cc5a0a;--link-h:#8a3a05;--lv0:#f0e4c0;--lv1:#f0b06a;--lv2:#ff7a1f;--lv3:#cc5a0a;--lv4:#6b2e05;--muted:#8a6a3f;--on-green:#faf1dc;--on-maint:#2e1a0a;--on-pill:#2e1a0a;--panel:#faf1dc;--paper:#f0dfb8;--pill:#1fb8b0;--serious:#cc5a0a;--shadow:#2e1a0a;--warning:#ff7a1f;--font-display:'Alfa Slab One',sans-serif;--font-body:'Chivo',sans-serif;--font-mono:'Space Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="tikipunk"] { --accent:#ff9a3f;--accent-dk:#ffb86a;--critical:#ff5a6a;--danger:#ff5a6a;--disabled:#5c4527;--dot:#ffffff10;--foam:#3a2810;--glass:#0f0a04;--good:#5fbd7a;--green:#5fbd7a;--green-ring:#5fbd7a44;--ink:#f5e6c4;--line:#3a2810;--link:#ffb86a;--link-h:#ffd49a;--lv0:#241708;--lv1:#6b4014;--lv2:#cc7a1f;--lv3:#ff9a3f;--lv4:#ffcf9a;--muted:#a3854f;--on-green:#140d05;--on-maint:#140d05;--on-pill:#140d05;--panel:#241708;--paper:#140d05;--pill:#2fd4c8;--serious:#ffb86a;--shadow:#000000;--warning:#ff9a3f;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }
:root[data-theme="monochrome"] { --accent:#1a1a1a;--accent-dk:#000000;--critical:#c0392b;--danger:#c0392b;--disabled:#c4c4c4;--dot:#00000014;--foam:#fafafa;--glass:#e6e6e6;--good:#5a5a5a;--green:#2a2a2a;--green-ring:#2a2a2a33;--ink:#111111;--line:#dcdcdc;--link:#404040;--link-h:#000000;--lv0:#e8e8e8;--lv1:#b5b5b5;--lv2:#7a7a7a;--lv3:#454545;--lv4:#111111;--muted:#767676;--on-green:#ffffff;--on-maint:#ffffff;--on-pill:#ffffff;--panel:#ffffff;--paper:#f0f0f0;--pill:#4a4a4a;--serious:#1a1a1a;--shadow:#111111;--warning:#333333;--font-display:'Archivo Black',sans-serif;--font-body:'Work Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace; --vessel: var(--glass); --foam-hi: #fff; }
@media (prefers-color-scheme: dark) { :root[data-theme="monochrome"] { --accent:#e6e6e6;--accent-dk:#ffffff;--critical:#e6604a;--danger:#e6604a;--disabled:#3a3a3a;--dot:#ffffff10;--foam:#2a2a2a;--glass:#1c1c1c;--good:#9a9a9a;--green:#cfcfcf;--green-ring:#cfcfcf44;--ink:#f0f0f0;--line:#2a2a2a;--link:#cfcfcf;--link-h:#ffffff;--lv0:#161616;--lv1:#3a3a3a;--lv2:#6a6a6a;--lv3:#a0a0a0;--lv4:#f0f0f0;--muted:#9a9a9a;--on-green:#0a0a0a;--on-maint:#0a0a0a;--on-pill:#0a0a0a;--panel:#161616;--paper:#0a0a0a;--pill:#cfcfcf;--serious:#e6e6e6;--shadow:#000000;--warning:#c9c9c9;
  --vessel: color-mix(in srgb, var(--panel) 82%, var(--ink) 18%);
  --foam-hi: color-mix(in srgb, var(--foam) 35%, #fff);
} }