/* Typed — shared design tokens + page chrome.
   Every page links this BEFORE its own <style> block, so page CSS can
   override anything here. Change a token here and every page follows.

   Naming note: the accent variable is historically called --teal but the
   value is the brand amber #F0A93E. Page CSS references --teal everywhere,
   so keep the name; retheme by changing the value in this one place.
   --coral and --amber are legacy aliases used by index.html.

   Skin note: the chassis is deliberately colder and darker than the amber
   accent — the "amber instrument" look depends on that contrast, so if you
   lighten --bg/--surface, keep them in the blue side of the blue-green hue
   family or the amber stops glowing and starts looking merely beige.
   Page roots set background:transparent so the ambient layer on body
   (grid + aurora, below) shows through; --bg is still what nav bars and
   modals use to stay opaque over it. */

:root{
  --bg:#08111A; --surface:#0E1D2A; --surface-2:#16293A;
  --ink:#F4F1E8; --ink-soft:#97ABB8; --ink-faint:#7E999C; --line:#21394B;
  /* --ink-faint was #576F71, which failed WCAG AA everywhere it was used:
     3.30:1 on --bg, 2.93:1 on --surface, 2.55:1 on --surface-2, against a
     4.5:1 floor. It is not decorative — 309 rules use it, all for real text
     between 9.5px and 13px (section labels, breadcrumbs, nav tabs, the small
     print under the test-result inputs), and none of it is large enough to
     qualify for the 3:1 large-text allowance.
     #7E999C is the minimum lift that clears 4.5:1 on all three surfaces
     (5.86 / 5.20 / 4.53). Hue and saturation are identical — only lightness
     moves, 0.392 to 0.552 — so it reads as the same colour, just legible.
     Revert by putting #576F71 back here; nothing else references the old
     value. */
  --teal:#F0A93E; --teal-deep:#C9821F; --teal-tint:rgba(240,169,62,.14);
  --coral:#F0A93E; --coral-tint:rgba(240,169,62,.14);
  --amber:#F0A93E; --amber-tint:rgba(240,169,62,.14);
  --mint:#6FA98A; --mint-tint:rgba(111,169,138,.16);
  --lavender:#8D93C4; --lavender-tint:rgba(141,147,196,.16);
  --radius:14px;
  --radius-lg:16px; --radius-card:12px; --radius-sm:10px; --radius-chip:8px;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --glow:rgba(240,169,62,.22);

  /* --- glass ---------------------------------------------------------------
     body carries a fixed ambient field (dot grid + two aurora pools, below).
     Anything that FLOATS over the page shows it through frosted glass rather
     than covering it with a flat panel — on an instrument the bezel is smoked
     glass, so this follows the existing metaphor rather than importing one.

     Four parts, and all four matter:
       --glass-bg    the tint. Two depths: the default for chrome that only
                     ever has page behind it, and -deep for panels holding
                     body text, which need more cover to stay legible over
                     whatever happens to scroll under them.
       --glass-blur  includes saturate() and brightness(). Blur desaturates,
                     and the amber aurora is the entire reason to see through
                     at all, so it is pushed back up — without it the glass
                     reads grey. brightness lifts the backdrop a step so a
                     pane reads LIT rather than shaded; the tint on top keeps
                     text contrast where it was.
       --glass-edge  the rim. A shadow stack rather than one line: a bright
                     1px along the top (the cue that makes a surface read as
                     a PANE rather than a translucent div — still the part
                     doing the most work), faint 1px down each side so the
                     light wraps the corners, and a soft amber pool along the
                     inside bottom edge — ambient light refracted through the
                     body of the slab, which is what makes the glass read
                     liquid instead of dry.
       --glass-sheen a diagonal light-catch painted over the tint: warm white
                     from the upper-left, the faintest amber cast at the
                     lower-right. A gradient this quiet is invisible as a
                     gradient; it registers as curvature. Applied in the
                     liquid glass skin section near the end of this file.
     --glass-scrim (modal backdrops) keeps a little saturate for the same
     reason --glass-blur does: the page behind a sheet should go out of
     focus, not go grey.

     To tune the whole site, change these five values. To remove the effect,
     set --glass-bg/-deep to their opaque equivalents (--surface / --bg) and
     --glass-blur/-sheen to none. Deliberately NOT applied to cards or the
     toast — see the notes at .lib-card and .typed-toast-inner. */
  --glass-bg:rgba(14,29,42,.62);
  --glass-bg-deep:rgba(8,17,26,.78);
  --glass-blur:blur(20px) saturate(1.6) brightness(1.07);
  --glass-edge:
    inset 0 1px 0 rgba(244,241,232,.12),
    inset 1px 0 0 rgba(244,241,232,.04),
    inset -1px 0 0 rgba(244,241,232,.04),
    inset 0 -1px 0 rgba(240,169,62,.05),
    inset 0 -14px 28px -20px rgba(240,169,62,.16);
  --glass-scrim:blur(12px) saturate(1.25);
  --glass-sheen:linear-gradient(115deg,
    rgba(244,241,232,.085), rgba(244,241,232,.025) 24%, transparent 47%,
    transparent 62%, rgba(240,169,62,.045) 86%, rgba(240,169,62,.07));
}
/* --- theme skins ------------------------------------------------------------
   Three skins, switched by data-theme on <html> (set before first paint by
   typed-config.js, toggled from the pillar bar by typed-nav.js):

     (unset)  Dusk  — the amber instrument above. The default.
     noir     Noir  — OLED dark. The ground drops to true #000 so an OLED
                      panel switches those pixels off entirely: less light in
                      a dark room, measurably less battery on phones. Same
                      hue family as Dusk, just deeper, so the amber keeps its
                      contrast against a cold chassis.
     light    Light — warm paper chassis. The accent CANNOT stay #F0A93E:
                      bright amber on paper is ~1.9:1, so the skin swaps the
                      accent tokens for a deepened amber (#845305) that holds
                      4.5:1+ on all three light surfaces — same colour story,
                      opposite polarity. Values below were checked against
                      WCAG AA the same way --ink-faint's comment documents.

   Everything themed reads tokens, so overriding the tokens re-skins every
   page and every future component with nothing to remember. The handful of
   hard-coded colours (the soft-red warnings, the grade scale) get explicit
   light-mode lifts at the end of this block — they were tuned for a dark
   ground and sit just under AA on paper. */
:root[data-theme="noir"]{
  --bg:#000000; --surface:#0B1116; --surface-2:#131B23; --line:#1C2A36;
  --glass-bg:rgba(4,9,14,.55);
  --glass-bg-deep:rgba(0,0,0,.74);
}
:root[data-theme="noir"] body{
  background-color:#000;
  background-image:
    radial-gradient(rgba(240,169,62,.045) 1px, transparent 1px),
    radial-gradient(900px 520px at 78% -120px, rgba(240,169,62,.07), transparent 65%),
    radial-gradient(760px 560px at -8% 30%, rgba(111,169,138,.04), transparent 60%);
  background-size:22px 22px, auto, auto;
  background-attachment:fixed;
}
:root[data-theme="light"]{
  --bg:#EFEBDF; --surface:#FAF8F1; --surface-2:#E7E1D2;
  --ink:#1B2A35; --ink-soft:#44586A; --ink-faint:#4C6072; --line:#D5CDBB;
  --teal:#845305; --teal-deep:#6B4304; --teal-tint:rgba(132,83,5,.13);
  --coral:#845305; --coral-tint:rgba(132,83,5,.13);
  --amber:#845305; --amber-tint:rgba(132,83,5,.13);
  --mint:#2F6E52; --mint-tint:rgba(47,110,82,.14);
  --lavender:#4E5590; --lavender-tint:rgba(78,85,144,.13);
  --glow:rgba(160,105,15,.18);
  --glass-bg:rgba(250,248,241,.62);
  --glass-bg-deep:rgba(239,235,223,.82);
  --glass-blur:blur(20px) saturate(1.3) brightness(1.02);
  --glass-edge:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 1px 0 0 rgba(255,255,255,.30),
    inset -1px 0 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(132,83,5,.06),
    inset 0 -14px 28px -20px rgba(160,105,15,.12);
  --glass-sheen:linear-gradient(115deg,
    rgba(255,255,255,.55), rgba(255,255,255,.15) 24%, transparent 47%,
    transparent 62%, rgba(160,105,15,.04) 86%, rgba(160,105,15,.06));
}
:root[data-theme="light"] body{
  background-color:var(--bg);
  background-image:
    radial-gradient(rgba(132,83,5,.07) 1px, transparent 1px),
    radial-gradient(900px 520px at 78% -120px, rgba(200,140,30,.10), transparent 65%),
    radial-gradient(760px 560px at -8% 30%, rgba(47,110,82,.06), transparent 60%);
  background-size:22px 22px, auto, auto;
  background-attachment:fixed;
}
:root[data-theme="light"] ::selection{background:#845305;color:#FAF8F1;}
:root[data-theme="light"] html,
:root[data-theme="light"]{scrollbar-color:#D5CDBB transparent;}
/* Soft-red warnings and the neutral grade were tuned against the dark chassis
   and land under 4.5:1 on paper; the same hues, deepened. */
:root[data-theme="light"] .lib-caution-badge{color:#A4402C;background:rgba(164,64,44,.12);}
:root[data-theme="light"] .ts-dose-flag.over,
:root[data-theme="light"] .sc-flag-badge.high,
:root[data-theme="light"] .tb-med-sev.high{color:#A4402C;background:rgba(164,64,44,.13);}
:root[data-theme="light"] .ts-verdict-label.weak{color:#A4402C;}
:root[data-theme="light"] .tb-grade.strong{background:rgba(47,110,82,.14);color:#2F6E52;}
:root[data-theme="light"] .tb-grade.moderate{background:rgba(132,83,5,.13);color:#845305;}
:root[data-theme="light"] .tb-grade.limited{background:rgba(78,85,144,.13);color:#4E5590;}
:root[data-theme="light"] .tb-grade.insufficient{background:rgba(79,99,103,.13);color:#4F6367;}
:root[data-theme="light"] .ts-cost-grade-fill.moderate{background:#B47B18;}
:root[data-theme="light"] .dy-error{background:rgba(160,58,46,.08);border:1px solid rgba(160,58,46,.35);color:#A03A2E;}
/* On paper, glow is smudge: solid-amber controls keep a whisper of it and
   luminous hairlines step down. (Selectors defined in the instrument-skin
   section below; overridden here by the theme attribute's specificity.) */
:root[data-theme="light"] .sp-rail a.on{text-shadow:none;}

/* Fluid switch: while html carries .theme-anim (added for ~400ms around a
   toggle by typed-nav.js) every surface cross-fades instead of snapping.
   The reduced-motion block at the end of this file flattens these like any
   other transition. */
html.theme-anim, html.theme-anim body,
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .35s ease, color .35s ease,
    border-color .35s ease, fill .35s ease, stroke .35s ease,
    box-shadow .35s ease !important;
}

*{box-sizing:border-box;margin:0;padding:0;}

/* ambient layer — every page root is transparent, so this is the page
   background everywhere: base color, a faint amber dot grid, and two very
   low-opacity aurora pools (amber top-right, mint bottom-left). Fixed
   attachment so cards scroll over a still field, like a bench instrument. */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(rgba(240,169,62,.05) 1px, transparent 1px),
    radial-gradient(900px 520px at 78% -120px, rgba(240,169,62,.09), transparent 65%),
    radial-gradient(760px 560px at -8% 30%, rgba(111,169,138,.05), transparent 60%);
  background-size:22px 22px, auto, auto;
  background-attachment:fixed;
}
::selection{background:var(--teal);color:#08111A;}
html{scrollbar-color:#16293A transparent;}

/* pillar switcher — the cross-pillar bar injected into #pillar-nav by typed-nav.js.
   Sticks to the very top; each page's own nav then sticks directly beneath it at
   --typed-nav-offset, which typed-nav.js measures (the bar wraps on narrow
   screens, so the offset can't be a fixed number).
   On very short viewports there isn't room for two stacked bars, so the pillar
   bar reverts to scrolling away and the page nav takes the top slot. */
/* Sticky goes on the #pillar-nav wrapper, not on .pillar-switcher itself: a
   sticky element only sticks while its PARENT is in view, and the wrapper is
   no taller than the bar, so sticking the inner element would give it zero
   range. The wrapper's parent is the page root, which spans the document. */
#pillar-nav{position:sticky;top:0;z-index:40;overflow-anchor:none;}
.pillar-switcher{display:flex;align-items:center;gap:8px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge);padding:10px;}
/* One row, always. Tabs scroll sideways rather than wrapping, so a pinned bar
   never grows past ~50px; the account widget sits outside the scroller. */
/* Left-aligned by default so the first tab is never clipped when the row
   overflows; centred only once there is room for the whole row. */
.pillar-tabs{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
@media(min-width:860px){ .pillar-tabs{justify-content:center;} }
.pillar-tabs::-webkit-scrollbar{display:none;}
.pillar-tab{flex:0 0 auto;white-space:nowrap;}
@media(max-height:520px){
  /* Not enough vertical room for stacked bars — let this one scroll away. */
  #pillar-nav{position:static;}
}
/* Account widget — top-right of the tab row, outside the scroller so it
   never scrolls out of reach alongside the tabs. */
.nav-account{flex:0 0 auto;display:flex;align-items:center;gap:6px;}
.nav-account-btn{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--ink-faint);text-decoration:none;padding:6px 12px;border-radius:var(--radius-chip);border:1px solid var(--line);white-space:nowrap;transition:all .15s;}
.nav-account-btn:hover{color:var(--ink);border-color:var(--ink-faint);}
.nav-account-login{color:var(--teal);border-color:var(--teal-tint);background:var(--teal-tint);}
.nav-account-login:hover{color:var(--teal);border-color:var(--teal);}
.nav-account-logout{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--ink-faint);background:none;border:none;padding:6px 4px;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;transition:color .15s;white-space:nowrap;}
.nav-account-logout:hover{color:var(--ink);}
@media(max-width:400px){ .nav-account-btn,.nav-account-logout{font-size:10.5px;padding:5px 8px;} }

/* Second row inside #pillar-nav, holding the Easy/Complex/Clinician switcher
   (typed-mode.js). It's a max-height animation rather than a transform so it
   keeps participating in #pillar-nav's own height — trackNavOffset() in
   typed-nav.js measures that height, so every page's own sticky sub-nav
   (position:sticky; top:var(--typed-nav-offset)) automatically follows the
   ribbon up when it hides, with no per-page CSS needed. The border sits on
   the ribbon rather than .pillar-switcher above so the bar's bottom edge is
   always at whichever row is actually last, ribbon collapsed or not. */
/* overflow:hidden is what animates the max-height collapse, and it also clips
   this element's own backdrop-filter — which is fine, the pane is the bar. */
.mode-ribbon{max-height:56px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge);transition:max-height .22s ease;}
.mode-ribbon-hidden{max-height:0;border-bottom-color:transparent;}
.mode-ribbon-inner{display:flex;justify-content:center;}
.pillar-tab{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--ink-faint);text-decoration:none;padding:7px 16px;border-radius:var(--radius-chip);transition:all .15s;}
.pillar-tab .m{font-family:'IBM Plex Mono',monospace;color:inherit;}
.pillar-tab.active{background:var(--teal-tint);color:var(--teal);}
.pillar-tab:hover{color:var(--ink);}
/* secondary destinations (Home, Goals, For you, Calculators, Glossary) —
   same bar, quieter weight than the three pillars */
.pillar-tab-alt{font-size:11.5px;opacity:.75;}
.pillar-tab-alt.active{opacity:1;}
/* groups Home | the three pillars | the reference pages | your stack */
.pillar-div{flex:0 0 auto;width:1px;height:18px;background:var(--line);margin:0 3px;}
/* saved-count badge on the Your stack tab */
.pillar-tab-you{display:inline-flex;align-items:center;gap:6px;}
.pillar-badge{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-chip);background:var(--teal);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;}
.pillar-tab-you.active .pillar-badge{background:var(--bg);color:var(--teal);}

/* Skip-to-content — injected by typed-nav.js on every page.
   Off-screen until focused rather than display:none, because a hidden element
   cannot receive focus and the link would never be reachable. Sits above the
   sticky pillar bar (z-index 40) so it is visible when it appears. */
/* <main> is injected by typed-nav.js around each page's content.
   A plain block, deliberately NOT display:contents: that would guarantee zero
   layout effect, but display:contents has a history of dropping elements out
   of the accessibility tree, and the landmark is the entire point. Every page
   root is a plain block container (the one flex root, .ts-root, belongs to the
   standalone prototype, which does not load typed-nav.js), so a block wrapper
   changes nothing about how the content lays out. */
main#typed-main{display:block;}

.skip-link{position:absolute;left:8px;top:-56px;z-index:60;background:var(--teal);color:var(--bg);font-family:var(--font-body);font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:0 0 12px 12px;text-decoration:none;transition:top .15s ease;}
.skip-link:focus{top:0;}
/* The target takes tabindex="-1" so the link can move focus to it; that would
   otherwise draw a focus ring around the whole page body. */
[tabindex="-1"]:focus{outline:none;}

/* keyboard focus — visible ring for tab navigation without affecting mouse users */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* stack bar + stack-checker modal — shared by the three library pages.
   The stack itself lives in typed-stack.js (persistent, cross-pillar). */
.lib-stackbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;pointer-events:none;padding:0 20px 20px;}
.lib-stackbar-inner{pointer-events:auto;background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.4),var(--glass-edge);border-radius:var(--radius-chip);padding:8px 8px 8px 20px;display:flex;align-items:center;gap:16px;transform:translateY(120%);transition:transform .3s cubic-bezier(.22,.68,0,1.01);}
.lib-stackbar-inner.show{transform:translateY(0);}
.lib-stackbar-text{font-size:13px;font-weight:600;}
.lib-stackbar-text span{color:var(--teal);}
.lib-stackbar-btn{font-family:var(--font-body);font-weight:600;font-size:13.5px;background:var(--teal);color:var(--bg);border:none;padding:11px 20px;border-radius:var(--radius-chip);cursor:pointer;}
/* Blurring the BACKDROP (not just tinting it) is what sells a modal as glass:
   the page visibly goes out of focus behind the sheet, so the sheet reads as
   in front of it rather than merely on top of it. The dim stays — the blur is
   depth, the dim is focus. */
.lib-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:var(--glass-scrim);-webkit-backdrop-filter:var(--glass-scrim);z-index:50;align-items:flex-end;justify-content:center;}
.lib-modal-backdrop.show{display:flex;}
.lib-modal{background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);box-shadow:var(--glass-edge);border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:560px;width:100%;max-height:82vh;overflow-y:auto;padding:26px 24px 34px;}
.lib-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.lib-modal h2{font-family:var(--font-display);font-weight:600;font-size:21px;}
.lib-modal-close{background:var(--surface);border:1px solid var(--line);width:32px;height:32px;border-radius:50%;color:var(--ink);cursor:pointer;font-size:16px;}
.lib-modal-sub{font-size:12.5px;color:var(--ink-faint);margin-bottom:18px;}
.lib-selected-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.lib-selected-chip{font-size:12px;font-weight:600;background:var(--teal-tint);color:var(--teal);padding:6px 12px;border-radius:var(--radius-chip);display:flex;align-items:center;gap:6px;}
.lib-selected-chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;opacity:.7;}
.lib-rule{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);}
.lib-rule:first-of-type{border-top:none;}
.lib-rule-badge{flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;padding:3px 9px;border-radius:var(--radius-chip);margin-top:1px;white-space:nowrap;}
.lib-rule-badge.pair{background:var(--mint-tint);color:var(--mint);}
.lib-rule-badge.caution{background:var(--lavender-tint);color:var(--lavender);}
.lib-rule-text{font-size:13px;line-height:1.5;}
.lib-rule-text b{font-weight:600;}
.lib-no-rules{font-size:13px;color:var(--ink-soft);padding:16px 0;line-height:1.5;}
.lib-caution-badge{display:inline-flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;color:#E88B6E;background:rgba(232,139,110,.14);padding:4px 9px;border-radius:var(--radius-chip);margin-top:9px;cursor:help;}
.lib-modal-disclaimer{margin-top:18px;font-size:11px;color:var(--ink-faint);line-height:1.5;}

/* stack modal tabs */
.ts-tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-chip);padding:3px;margin-bottom:18px;}
.ts-tab{flex:1;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--ink-faint);background:none;border:none;padding:8px 10px;border-radius:var(--radius-chip);cursor:pointer;transition:background .15s,color .15s;}
.ts-tab:hover{color:var(--ink);}
.ts-tab.on{background:var(--teal);color:var(--bg);}
.ts-tabpanel{min-height:80px;}

/* dose totals */
.ts-dose-row{display:flex;gap:10px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);}
.ts-dose-row:first-child{border-top:none;padding-top:0;}
.ts-dose-flag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;padding:3px 9px;border-radius:var(--radius-chip);text-transform:uppercase;white-space:nowrap;flex:0 0 auto;margin-top:1px;}
.ts-dose-flag.over{background:rgba(232,139,110,.18);color:#E88B6E;}
.ts-dose-flag.doubled{background:var(--teal-tint);color:var(--teal);}
.ts-dose-head{font-size:13px;font-weight:600;color:var(--ink);line-height:1.45;}
.ts-dose-from{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);margin-top:4px;line-height:1.5;}
.ts-dose-ok{padding:13px 0;border-top:1px solid var(--line);}
.ts-dose-ok-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;color:var(--mint);margin-bottom:7px;}
.ts-dose-ok-list{display:flex;flex-wrap:wrap;gap:6px;}
.ts-dose-ok-list span{font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--surface-2);color:var(--ink-soft);padding:4px 10px;border-radius:var(--radius-chip);}
.ts-dose-note{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-faint);line-height:1.55;}
.ts-dose-note b{color:var(--ink-soft);}

/* what to drop */
.ts-verdict-group{margin-bottom:18px;}
.ts-verdict-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:9px;}
.ts-verdict-label.weak{color:#E88B6E;}
.ts-verdict-label.check{color:var(--teal);}
.ts-verdict-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);}
.ts-verdict-row:first-of-type{border-top:none;padding-top:0;}
.ts-verdict-count{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;background:var(--surface-2);color:var(--ink-soft);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 22px;margin-top:1px;}
.ts-verdict-body{flex:1;min-width:0;font-size:13px;line-height:1.5;}
.ts-verdict-body a{color:var(--ink);font-weight:600;text-decoration:none;}
.ts-verdict-body a:hover{color:var(--teal);}
.ts-verdict-body b{color:var(--ink);}
.ts-verdict-note{display:block;color:var(--ink-soft);margin-top:3px;line-height:1.55;}

/* tests to ask about */
.ts-test-row{padding:13px 0;border-top:1px solid var(--line);}
.ts-test-row:first-child{border-top:none;padding-top:0;}
.ts-test-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.ts-test-why{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:4px;}
.ts-test-from{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);margin-top:5px;}

/* daily schedule */
.ts-sched-slot{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start;}
.ts-sched-slot:first-child{border-top:none;padding-top:0;}
.ts-sched-time{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--teal);padding-top:4px;}
.ts-sched-items{display:flex;flex-wrap:wrap;gap:6px;}
.ts-sched-item{font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--radius-chip);}
.ts-sched-sep{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.6;}
.ts-sched-sep b{color:var(--ink);}
@media(max-width:560px){ .ts-sched-slot{grid-template-columns:1fr;gap:5px;} }
/* start-date / time-to-effect tracker (per stack item) */
.ts-start-track{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.ts-start-datelabel{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-faint);}
.ts-start-input{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:11.5px;padding:4px 6px;}
.ts-start-row{margin-top:9px;}
.ts-start-label{font-size:11.5px;font-weight:600;color:var(--ink-soft);}
.ts-start-period{font-weight:400;color:var(--ink-faint);}
.ts-start-bar{height:5px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:4px;}
.ts-start-fill{height:100%;border-radius:4px;background:var(--teal);}
.ts-start-fill.due{background:var(--mint);}
.ts-start-text{font-size:11px;color:var(--ink-faint);margin-top:3px;line-height:1.4;}

/* diet-gap inference */
.ts-diet-row{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);}
.ts-diet-row:first-child{border-top:none;padding-top:0;}
.ts-diet-label{flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-chip);white-space:nowrap;margin-top:1px;}
.ts-diet-row.covered .ts-diet-label{background:var(--mint-tint);color:var(--mint);}
.ts-diet-row.gap .ts-diet-label{background:var(--lavender-tint);color:var(--lavender);}
.ts-diet-body{font-size:13px;line-height:1.5;}
.ts-diet-body b{color:var(--ink);}
.ts-diet-note{display:block;color:var(--ink-soft);margin-top:4px;}

/* "eat this regularly" toggle on food library cards */
.lib-dietbtn{margin-top:9px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;font-size:11.5px;color:var(--ink-faint);background:var(--surface-2);border:1px solid var(--line);padding:6px 11px;border-radius:var(--radius-chip);cursor:pointer;}
.lib-dietbtn.on{background:var(--mint-tint);color:var(--mint);border-color:transparent;}

/* redundancy detector (inside dose totals) */
.ts-redund{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}

/* interaction graph */
.ts-graph-wrap{display:flex;justify-content:center;}
.ts-graph-svg{width:100%;max-width:380px;height:auto;}
.ts-graph-svg a{cursor:pointer;}
.ts-graph-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:10px;font-size:12px;color:var(--ink-soft);}
.ts-graph-legend span{display:flex;align-items:center;gap:6px;}
.ts-graph-swatch{width:16px;height:2px;display:inline-block;border-radius:2px;}
.ts-graph-swatch.pair{background:var(--mint);}
.ts-graph-swatch.caution{background:var(--lavender);border-top:2px dashed var(--lavender);height:0;}

/* 24-hour timeline */
.ts-tl-wrap{overflow-x:auto;}
.ts-tl-svg{width:100%;min-width:560px;height:auto;display:block;}
.ts-tl-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11.5px;color:var(--ink-soft);align-items:center;}
.ts-tl-legend span{display:flex;align-items:center;gap:6px;}
.ts-tl-swatch{width:14px;height:7px;border-radius:4px;background:var(--teal);display:inline-block;}
.ts-tl-swatch.light{opacity:.35;}
.ts-tl-hint{color:var(--ink-faint);margin-left:auto;}
.ts-tl-overlaps{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.ts-tl-overlap-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);line-height:1.5;padding:6px 0;}

/* cost breakdown */
.ts-cost-total{font-family:var(--font-display);font-weight:600;font-size:26px;margin-bottom:4px;}
.ts-cost-total span{font-family:var(--font-body);font-weight:400;font-size:12.5px;color:var(--ink-soft);margin-left:6px;}
.ts-cost-breakdown{margin:16px 0;display:flex;flex-direction:column;gap:9px;}
.ts-cost-grade-row{display:flex;flex-direction:column;gap:4px;}
.ts-cost-grade-bar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.ts-cost-grade-fill{height:100%;border-radius:4px;}
.ts-cost-grade-fill.strong{background:#6FA98A;}
.ts-cost-grade-fill.moderate{background:#F0A93E;}
.ts-cost-grade-fill.limited{background:#8D93C4;}
.ts-cost-grade-fill.insufficient{background:#8FA3A6;}
.ts-cost-grade-fill.ungraded{background:var(--ink-faint);}
.ts-cost-grade-label{font-size:12px;color:var(--ink-soft);}
.ts-cost-grade-label b{color:var(--ink);}
.ts-cost-grade-label span{color:var(--ink-faint);}
.ts-cost-items{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.ts-cost-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;}
.ts-cost-item-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;}
.ts-cost-input-wrap{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:3px;flex:0 0 auto;}
.ts-cost-input{width:56px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:inherit;padding:5px 6px;}
.ts-cost-input:focus{border-color:var(--teal);}

.lib-clearstack{margin-top:16px;font-family:var(--font-body);font-weight:600;font-size:12.5px;color:var(--ink-faint);background:none;border:1px solid var(--line);padding:9px 16px;border-radius:var(--radius-chip);cursor:pointer;}
.lib-clearstack:hover{color:var(--ink);border-color:var(--ink-faint);}
@media(max-width:560px){
  .lib-stackbar-inner{flex-direction:column;align-items:stretch;border-radius:var(--radius-card);padding:14px;}
}

/* --- simple document pages (about, privacy, terms, 404) ------------------- */
.doc-root{font-family:var(--font-body);color:var(--ink);background:transparent;min-height:100vh;padding-bottom:80px;}
.doc-container{max-width:720px;margin:0 auto;padding:0 24px;}
.doc-root a{color:inherit;}
.doc-nav{position:sticky;top:0;z-index:30;background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge);border-bottom:1px solid var(--line);padding:16px 0;}
.doc-nav .doc-container{display:flex;align-items:center;justify-content:space-between;}
.doc-logo{font-size:19px;text-decoration:none;}
.doc-logo .m{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--teal);}
.doc-logo .s{font-family:var(--font-display);font-weight:600;}
.doc-navback{font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;}
.doc-header{padding:44px 0 6px;}
.doc-kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}
.doc-h1{font-family:var(--font-display);font-weight:600;font-size:32px;letter-spacing:-.01em;margin-bottom:10px;}
.doc-updated{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);margin-bottom:26px;}
.doc-body h2{font-family:var(--font-display);font-weight:600;font-size:19px;margin:34px 0 10px;}
.doc-body h3{font-family:var(--font-display);font-weight:600;font-size:15.5px;margin:22px 0 8px;}
.doc-body p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px;}
.doc-body ul{margin:0 0 16px 20px;}
.doc-body li{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:7px;}
.doc-body a{color:var(--teal);font-weight:600;text-decoration:none;}
.doc-body a:hover{text-decoration:underline;}
.doc-body strong{color:var(--ink);font-weight:600;}
.doc-callout{background:var(--lavender-tint);border-radius:var(--radius-sm);padding:16px 20px;font-size:13.5px;line-height:1.6;display:flex;gap:12px;align-items:flex-start;margin:20px 0;}
.doc-callout.todo{background:var(--teal-tint);}
.doc-footer{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px;font-size:12.5px;color:var(--ink-soft);}
.doc-footer a{text-decoration:none;}
.doc-footer a:hover{color:var(--teal);}

/* shared site footer, injected by typed-nav.js */
.typed-sitefooter{margin-top:60px;border-top:1px solid var(--line);}
.typed-sitefooter-inner{max-width:1080px;margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-faint);}
.typed-sitefooter-links{display:flex;flex-wrap:wrap;gap:18px;}
.typed-sitefooter-links a{color:var(--ink-soft);text-decoration:none;}
.typed-sitefooter-links a:hover{color:var(--teal);}

/* --- shared detail-page blocks (typed-blocks.js) -------------------------- */
.tb-pending{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-soft);line-height:1.6;}

/* evidence grades */
.tb-grade{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;padding:4px 10px;border-radius:var(--radius-chip);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;flex:0 0 auto;}
.tb-grade-sm{font-size:8.5px;padding:2px 7px;}
.tb-grade.strong{background:rgba(111,169,138,.18);color:#6FA98A;}
.tb-grade.moderate{background:rgba(240,169,62,.16);color:#F0A93E;}
.tb-grade.limited{background:rgba(141,147,196,.18);color:#8D93C4;}
.tb-grade.insufficient{background:rgba(120,140,145,.16);color:#8FA3A6;}
.tb-ev-row{padding:14px 0;border-top:1px solid var(--line);}
.tb-ev-row:first-child{border-top:none;padding-top:0;}
.tb-ev-head{display:flex;gap:11px;align-items:flex-start;}
.tb-ev-claim{font-size:14px;line-height:1.45;color:var(--ink);font-weight:500;padding-top:1px;}
.tb-ev-note{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:7px;padding-left:0;}
/* harm/safety rows read differently: an Insufficient grade on "causes X" is
   reassuring, not a mark against the supplement. */
.tb-ev-kind{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);}
.tb-ev-row.kind-harm .tb-ev-claim,.tb-ev-row.kind-safety .tb-ev-claim{font-weight:400;color:var(--ink-soft);}
.tb-ev-key{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint);line-height:1.6;}
.tb-ev-key b{color:var(--ink-soft);}
.tb-ev-key a{color:var(--teal);font-weight:600;text-decoration:none;white-space:nowrap;}

/* blood-test-band logging (needIt section) */
.tb-need-row.routed{background:var(--teal-tint);border-radius:12px;margin:0 -10px;padding:12px 10px;}
.tb-testband{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.tb-testband-label{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.tb-testband-inputs{display:flex;gap:8px;}
.tb-testband-value{width:100px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:13px;padding:7px 9px;}
.tb-testband-unit{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:12px;padding:7px 9px;}
.tb-testband-result{margin-top:9px;font-size:12.5px;font-weight:600;padding:8px 11px;border-radius:10px;}
.tb-testband-result.low{background:var(--teal-tint);color:var(--teal);}
.tb-testband-result.ok{background:var(--mint-tint);color:var(--mint);}
.tb-testband-note{margin-top:9px;font-size:11px;color:var(--ink-faint);line-height:1.5;}

/* do you need this */
.tb-need-row{display:grid;grid-template-columns:172px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--line);}
.tb-need-row:first-child{border-top:none;padding-top:0;}
.tb-need-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding-top:2px;}
.tb-need-row.yes .tb-need-label{color:#6FA98A;}
.tb-need-row.no .tb-need-label{color:var(--ink-faint);}
.tb-need-row.check .tb-need-label{color:var(--teal);}
.tb-need-text{font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
.tb-need-row.yes .tb-need-text{color:var(--ink);}

/* forms */
.tb-forms-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);}
.tb-forms-row:first-child{border-top:none;padding-top:0;}
.tb-forms-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);padding-top:2px;}
.tb-forms-text{font-size:13.5px;line-height:1.6;color:var(--ink);}
.tb-forms-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-faint);line-height:1.55;}
.tb-forms-note a{color:var(--teal);font-weight:600;text-decoration:none;}

/* form comparison table */
.tb-ft-wrap{overflow-x:auto;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.tb-ft{width:100%;border-collapse:collapse;min-width:520px;}
.tb-ft th{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--line);}
.tb-ft td{font-size:12.5px;color:var(--ink-soft);line-height:1.5;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.tb-ft tr.best td{color:var(--ink);}
.tb-ft-name{font-weight:600;color:var(--ink) !important;white-space:nowrap;}
.tb-ft-pick{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;text-transform:uppercase;background:var(--mint-tint);color:var(--mint);padding:2px 7px;border-radius:var(--radius-chip);margin-left:5px;}
.tb-ft-cost{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ink) !important;}
.tb-cost{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--ink-faint);}

/* medication */
.tb-med-row{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);}
.tb-med-row:first-child{border-top:none;padding-top:0;}
.tb-med-sev{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;padding:4px 10px;border-radius:var(--radius-chip);text-transform:uppercase;white-space:nowrap;flex:0 0 auto;margin-top:1px;}
.tb-med-sev.high{background:rgba(232,139,110,.18);color:#E88B6E;}
.tb-med-sev.moderate{background:var(--lavender-tint);color:var(--lavender);}
.tb-med-drug{font-size:13.5px;font-weight:600;color:var(--ink);}
.tb-med-effect{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:3px;}
.tb-meds-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint);line-height:1.6;}
.tb-meds-note b{color:var(--ink-soft);}

/* context */
.tb-ctx-row{display:grid;grid-template-columns:172px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);}
.tb-ctx-row:first-child{border-top:none;padding-top:0;}
.tb-ctx-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--teal);padding-top:2px;}
.tb-ctx-text{font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
/* Reordered to the top and marked when it matches the site's global sex
   setting (typed-sex.js) — a highlight, not a filter, so nobody's caveat
   disappears just because it isn't the one flagged as relevant to you. */
.tb-ctx-row-you{margin:0 -16px;padding:12px 16px;border-top:none;border-radius:12px;background:var(--lavender-tint);}
.tb-ctx-row-you + .tb-ctx-row{border-top:none;margin-top:4px;}
.tb-ctx-you{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--lavender);background:var(--surface);border:1px solid var(--lavender);border-radius:var(--radius-chip);padding:2px 7px;margin-left:6px;vertical-align:middle;}

@media(max-width:560px){
  .tb-need-row,.tb-forms-row,.tb-ctx-row{grid-template-columns:1fr;gap:5px;}
}

/* decorative category motif — faint watermark in the detail hero */
.sp-hero{position:relative;overflow:hidden;}
.sp-hero > *:not(.sp-hero-motif){position:relative;z-index:1;}
.sp-hero-motif{position:absolute;top:18px;right:-14px;width:158px;height:158px;opacity:.07;pointer-events:none;z-index:0;}
.sp-hero-motif svg{width:100%;height:100%;display:block;}
@media(max-width:560px){ .sp-hero-motif{width:120px;height:120px;right:-20px;opacity:.06;} }

/* --- bento grid — the library's default card view ---------------------------
   The top of the result list becomes a woven band of mixed-size tiles: one
   hero (2x2), a wide tile (3x1), and standard cells, packed dense so filter
   changes re-weave without holes. Everything below the band stays the plain
   uniform grid — bento is a shop window, not a layout for 2,000 rows.
   Tiles highlight what the uniform cards can't fit: the mechanism tag chips,
   the nutrient-density meter (typed-density.js), and a large food visual. */
.lib-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:14px;margin-bottom:14px;grid-column:1 / -1;}
.lib-bento .lib-card{margin:0;}
.lib-tile{grid-column:span 2;display:flex;flex-direction:column;}
.lib-tile-hero{grid-column:span 4;grid-row:span 2;}
.lib-tile-wide{grid-column:span 3;}
.lib-tile-visual{position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:
  radial-gradient(120px 90px at 70% 25%, var(--teal-tint), transparent 70%),
  var(--surface-2);min-height:96px;margin-bottom:14px;overflow:hidden;}
.lib-tile-hero .lib-tile-visual{min-height:150px;}
.lib-tile-visual svg{width:64px;height:64px;}
.lib-tile-hero .lib-tile-visual svg{width:96px;height:96px;}
.lib-tile-visual .lib-tile-motif{position:absolute;right:-12px;bottom:-16px;width:110px;height:110px;opacity:.08;pointer-events:none;}
.lib-tile-visual .lib-tile-motif svg{width:100%;height:100%;}
.lib-mech-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.lib-mech-tag{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-chip);background:var(--lavender-tint);color:var(--lavender);}
@media(max-width:1023px){
  .lib-bento{grid-template-columns:repeat(4,1fr);}
  .lib-tile-hero{grid-column:span 4;grid-row:span 1;}
  .lib-tile-wide{grid-column:span 2;}
}
@media(max-width:560px){
  /* Two-up, not one: the hero and wide tiles span the row, the small tiles
     pair off beside each other — the bento rhythm survives the phone
     instead of flattening into a plain list. */
  .lib-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .lib-tile{grid-column:span 1;grid-row:span 1;}
  .lib-tile-hero,.lib-tile-wide{grid-column:span 2;grid-row:span 1;}
  .lib-tile-hero .lib-tile-visual{min-height:110px;}
  .lib-tile-visual{min-height:72px;margin-bottom:10px;}
  .lib-tile-visual svg{width:48px;height:48px;}
  .lib-bento .lib-tile .lib-card-hook{font-size:11px;}
}

/* nutrient density meter (typed-density.js) */
.td-meter{margin-top:11px;}
.td-meter-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.td-meter-label{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}
.td-meter-band{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;}
.td-meter-band.td-excellent{color:var(--mint);}
.td-meter-band.td-high{color:var(--mint);}
.td-meter-band.td-moderate{color:var(--teal);}
.td-meter-band.td-low{color:var(--ink-faint);}
.td-meter-bar{height:5px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:5px;}
.td-meter-fill{height:100%;border-radius:4px;}
.td-meter-fill.td-excellent,.td-meter-fill.td-high{background:var(--mint);}
.td-meter-fill.td-moderate{background:var(--teal);}
.td-meter-fill.td-low{background:var(--ink-faint);}

/* fact strip — full-width "Did you know?" band interleaved into library grids */
.lib-factstrip{grid-column:1 / -1;display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--fs-accent,var(--teal));border-radius:var(--radius-sm);padding:15px 20px;}
.lib-factstrip-motif{flex:0 0 44px;width:44px;height:44px;color:var(--fs-accent,var(--teal));opacity:.55;}
.lib-factstrip-motif svg{width:100%;height:100%;display:block;}
.lib-factstrip-body{flex:1;min-width:0;}
.lib-factstrip-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fs-accent,var(--teal));margin-bottom:5px;}
.lib-factstrip-text{font-size:13.5px;line-height:1.55;color:var(--ink);}
.lib-factstrip-link{display:inline-block;margin-top:7px;font-size:12px;font-weight:600;color:var(--fs-accent,var(--teal));text-decoration:none;}
.lib-factstrip-link:hover{text-decoration:underline;}
@media(max-width:560px){ .lib-factstrip-motif{display:none;} }

/* fun fact — a light break in an otherwise dense page */
.tb-funfact{display:flex;gap:14px;align-items:flex-start;background:var(--mint-tint);border:1px solid color-mix(in srgb, var(--mint) 22%, transparent);border-radius:var(--radius-card);padding:18px 20px;}
.tb-funfact-ic{width:36px;height:36px;border-radius:11px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--mint) 16%, transparent);color:var(--mint);}
.tb-funfact-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mint);margin-bottom:5px;}
.tb-funfact-text{font-size:14px;line-height:1.6;color:var(--ink);}

/* nutrition facts label */
.tb-nutr{font-family:'IBM Plex Mono',monospace;color:var(--ink);}
.tb-nutr-title{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;}
.tb-nutr-serving{font-size:12.5px;color:var(--ink-soft);margin-top:2px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.tb-nutr-rule-thick{height:7px;background:var(--ink);margin:6px 0;border-radius:1px;}
.tb-nutr-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;padding:5px 0;border-top:1px solid var(--line);}
/* Clickable nutrient names in running-total labels (diary, recipes) — a
   dotted underline says "this goes somewhere" without turning the whole
   label into a wall of link-colour. */
.tb-nutr-link{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--ink-faint);text-underline-offset:3px;}
.tb-nutr-link:hover{color:var(--teal);text-decoration-color:var(--teal);}
.tb-nutr-calories{border-top:none;font-size:20px;padding-top:2px;}
.tb-nutr-calories b:last-child{font-size:24px;}
.tb-nutr-dvhead{text-align:right;font-size:11px;font-weight:600;color:var(--ink-soft);padding-bottom:2px;}
.tb-nutr-dv{font-weight:700;white-space:nowrap;}
.tb-nutr-indent-1{padding-left:16px;}
.tb-nutr-indent-2{padding-left:32px;font-size:12px;color:var(--ink-soft);}
.tb-nutr-footnote{font-size:10.5px;color:var(--ink-faint);line-height:1.5;margin-top:8px;}
.tb-nutr-source{font-size:10.5px;color:var(--ink-faint);margin-top:4px;font-style:italic;}

/* mechanism scores, hydration & heatmap (typed-mechanism.js) */
.mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){ .mx-grid{grid-template-columns:1fr;} }
.mx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 20px;}
.mx-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mx-title{font-family:var(--font-display);font-weight:600;font-size:14.5px;}
.mx-band{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:var(--radius-chip);}
.mx-band.mx-good{background:var(--mint-tint);color:var(--mint);}
.mx-band.mx-mixed{background:var(--teal-tint);color:var(--teal);}
.mx-band.mx-poor{background:var(--lavender-tint);color:var(--lavender);}
.mx-score{font-family:var(--font-display);font-weight:600;font-size:30px;margin:10px 0 8px;}
.mx-score span{font-size:13px;font-weight:400;color:var(--ink-faint);}
.mx-bar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.mx-fill{height:100%;border-radius:4px;background:var(--teal);}
.mx-fill.mx-good{background:var(--mint);}
.mx-fill.mx-poor{background:var(--lavender);}
.mx-drivers{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
.mx-driver{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:var(--radius-chip);}
.mx-driver.up{background:var(--mint-tint);color:var(--mint);}
.mx-driver.down{background:var(--lavender-tint);color:var(--lavender);}
.mx-sub{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin-top:10px;}
.mx-note{font-size:11px;color:var(--ink-faint);line-height:1.55;margin-top:12px;}
.mx-hydro{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 20px;}
.mx-hydro-figures{font-size:13.5px;margin-bottom:8px;}
.mx-hydro-figures b{font-family:var(--font-display);font-size:19px;}
.mx-hydro-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.mx-waterbtn{font-family:var(--font-body);font-weight:600;font-size:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);padding:8px 13px;border-radius:var(--radius-chip);cursor:pointer;transition:all .15s;}
.mx-waterbtn:hover{border-color:var(--teal);color:var(--teal);}
.mx-waterbtn:disabled{opacity:.5;cursor:wait;}
.mx-hydro-lytes{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.mx-lyte-n{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;}
.mx-lyte-l{font-size:10.5px;color:var(--ink-faint);}
.mx-hydro-notes{margin-top:12px;font-size:12px;color:var(--ink-soft);line-height:1.55;display:flex;flex-direction:column;gap:6px;}

/* sufficiency heatmap (Trends) */
.hm-wrap{overflow-x:auto;}
.hm-row{display:flex;align-items:center;gap:8px;padding:2px 0;}
.hm-label{flex:0 0 110px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--ink-soft);text-align:right;padding-right:4px;}
.hm-cells{display:flex;gap:2px;flex:1;min-width:0;}
.hm-cell{flex:1 1 auto;min-width:4px;max-width:16px;height:14px;border-radius:3px;display:inline-block;}
.hm-empty{background:transparent;border:1px dashed var(--line);}
.hm-b0{background:var(--surface-2);}
.hm-b1{background:color-mix(in srgb, var(--teal) 18%, var(--surface-2));}
.hm-b2{background:color-mix(in srgb, var(--teal) 38%, var(--surface-2));}
.hm-b3{background:color-mix(in srgb, var(--teal) 62%, var(--surface-2));}
.hm-b4{background:var(--teal);}
.hm-b5{background:var(--mint);}
.hm-sum{flex:0 0 44px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint);text-align:right;}
.hm-headrow{margin-bottom:6px;}
.hm-cells-note{flex:1;font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--ink-faint);}
.hm-legend{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:10.5px;color:var(--ink-faint);flex-wrap:wrap;}
.hm-legend .hm-cell{flex:0 0 14px;}
.hm-legend-empty{display:flex;align-items:center;gap:5px;margin-left:14px;}

/* habit streaks & badges (typed-habits.js) */
.hb-row{display:flex;flex-wrap:wrap;gap:8px;}
.hb-chip{font-size:12px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);padding:7px 13px;border-radius:var(--radius-chip);}
.hb-chip b{font-family:var(--font-display);font-size:14px;color:var(--ink);}
.hb-chip.on{border-color:var(--teal);background:var(--teal-tint);color:var(--ink);}
.hb-chip.on b{color:var(--teal);}
.hb-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.hb-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--ink-faint);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-chip);padding:7px 12px;opacity:.55;cursor:help;}
.hb-badge.earned{opacity:1;color:var(--ink);border-color:var(--teal);background:var(--teal-tint);box-shadow:0 0 12px var(--glow);}
.hb-badge-ic{font-size:15px;}

/* hands-free cooking mode (typed-cook-mode.js) — fullscreen overlay */
.cm-launch{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:13.5px;background:var(--teal);color:var(--bg);border:none;padding:12px 20px;border-radius:var(--radius-chip);cursor:pointer;box-shadow:0 0 16px var(--glow);}
.cm-launch-hint{font-size:11.5px;color:var(--ink-faint);margin:8px 0 14px;line-height:1.5;}
.cm-overlay{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;font-family:var(--font-body);color:var(--ink);}
.cm-progresswrap{height:4px;background:var(--surface-2);}
.cm-progress{height:100%;background:var(--teal);box-shadow:0 0 10px var(--glow);transition:width .25s ease;}
.cm-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);}
.cm-title{flex:1;min-width:180px;}
.cm-name{font-family:var(--font-display);font-weight:600;font-size:16px;}
.cm-servings{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);margin-top:2px;}
.cm-mults{display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-chip);padding:3px;}
.cm-mult{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12px;color:var(--ink-faint);background:none;border:none;padding:6px 10px;border-radius:var(--radius-chip);cursor:pointer;}
.cm-mult.on{background:var(--teal);color:var(--bg);}
.cm-toggles{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cm-toggle{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:8px 13px;border-radius:var(--radius-chip);cursor:pointer;}
.cm-toggle.on{background:var(--teal-tint);border-color:var(--teal);color:var(--teal);}
.cm-close{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:16px;cursor:pointer;}
.cm-timersrow{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px;}
.cm-timersrow:not(:empty){padding:10px 18px 0;}
.cm-timer{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;background:var(--teal-tint);color:var(--teal);border:1px solid var(--teal);border-radius:var(--radius-chip);padding:6px 12px;}
.cm-timer.done{background:var(--mint-tint);color:var(--mint);border-color:var(--mint);animation:cm-flash 1s ease-in-out 3;}
@keyframes cm-flash{50%{opacity:.35;}}
.cm-timer button{background:none;border:none;color:inherit;cursor:pointer;font-size:12px;opacity:.7;padding:0;}
.cm-ingdrawer{border-bottom:1px solid var(--line);max-height:34vh;overflow-y:auto;padding:12px 18px;background:var(--surface);}
.cm-ings{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px 20px;}
.cm-ing{display:flex;gap:10px;font-size:13px;align-items:baseline;}
.cm-ing-qty{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-soft);flex:0 0 auto;}
.cm-ing-qty b{color:var(--teal);}
.cm-ing-name{color:var(--ink);}
.cm-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;overflow-y:auto;}
.cm-stepnum{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;}
.cm-steptext{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,4.2vw,34px);line-height:1.45;max-width:820px;}
.cm-steptimers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px;}
.cm-timerbtn{font-family:var(--font-body);font-weight:600;font-size:14px;background:var(--surface);border:1px solid var(--teal);color:var(--teal);padding:12px 20px;border-radius:var(--radius-chip);cursor:pointer;}
.cm-timerbtn:hover{background:var(--teal-tint);}
.cm-foot{display:flex;gap:12px;padding:16px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.cm-nav{flex:1;font-family:var(--font-body);font-weight:600;font-size:16px;padding:16px;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;}
.cm-nav:disabled{opacity:.4;cursor:default;}
.cm-nav-primary{background:var(--teal);border-color:var(--teal);color:var(--bg);box-shadow:0 0 16px var(--glow);}
@media(max-width:640px){
  .cm-head{padding:10px 14px;gap:10px;}
  .cm-toggle{font-size:11px;padding:7px 10px;}
  .cm-steptext{font-size:clamp(19px,5.6vw,26px);}
}

/* bioavailability & pairing panel (typed-bioavail.js) */
.bv-row{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);}
.bv-row:first-child{border-top:none;padding-top:0;}
.bv-badge{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;padding:4px 10px;border-radius:var(--radius-chip);text-transform:uppercase;white-space:nowrap;flex:0 0 auto;margin-top:1px;}
.bv-badge.inhibit{background:var(--lavender-tint);color:var(--lavender);}
.bv-badge.enhance{background:var(--mint-tint);color:var(--mint);}
.bv-badge.needs{background:var(--teal-tint);color:var(--teal);}
.bv-text{font-size:13px;line-height:1.55;color:var(--ink-soft);}
.bv-text b{color:var(--ink);}
.bv-est{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.bv-est-head{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);margin-bottom:8px;}
.bv-est-row{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:13px;line-height:1.5;}
.bv-est-nutrient{flex:0 0 130px;font-weight:600;color:var(--ink);}
.bv-est-detail{color:var(--ink-soft);}
.bv-est-detail b{color:var(--ink);}
.bv-pair-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.bv-pair-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);flex:0 0 auto;}
.bv-pair-chips{display:flex;flex-wrap:wrap;gap:6px;}
.bv-chip{font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink);padding:5px 11px;border-radius:var(--radius-chip);text-decoration:none;transition:background .15s,color .15s;}
.bv-chip:hover{background:var(--teal-tint);color:var(--teal);}
.bv-pair-why{font-size:11.5px;color:var(--ink-faint);flex-basis:100%;}
.bv-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-faint);line-height:1.55;}

/* estimated glucose response (typed-glycemic.js) */
.gy-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;}
.gy-class{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-chip);}
.gy-class.gy-gentle{background:var(--mint-tint);color:var(--mint);}
.gy-class.gy-moderate{background:var(--teal-tint);color:var(--teal);}
.gy-class.gy-sharp{background:var(--lavender-tint);color:var(--lavender);}
.gy-sub{font-size:12px;color:var(--ink-soft);line-height:1.5;}
.gy-svg{width:100%;height:auto;display:block;}
.gy-tick{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:var(--ink-faint);}
.gy-peak{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;fill:var(--teal);}
.gy-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:11.5px;color:var(--ink-soft);}
.gy-key{display:flex;align-items:center;gap:6px;}
.gy-swatch{width:18px;height:0;border-top:2.4px solid var(--teal);display:inline-block;}
.gy-swatch.dashed{border-top:1.6px dashed var(--ink-faint);}
.gy-note{margin-top:10px;font-size:11px;color:var(--ink-faint);line-height:1.55;}

/* micronutrient radar (typed-radar.js) — sits beside the Nutrition Facts
   table; the table stays the exact, accessible record */
.tr-chips{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-chip);padding:3px;margin-bottom:6px;width:max-content;}
.tr-chip{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--ink-faint);background:none;border:none;padding:7px 14px;border-radius:var(--radius-chip);cursor:pointer;transition:background .15s,color .15s;}
.tr-chip:hover{color:var(--ink);}
.tr-chip.on{background:var(--teal);color:var(--bg);}
.tr-chart{display:flex;justify-content:center;}
.tr-svg{width:100%;max-width:400px;height:auto;display:block;}
.tr-axis{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;fill:var(--ink-soft);}
.tr-axis-pct{font-size:8.5px;font-weight:500;fill:var(--teal);}
.tr-axis-empty{opacity:.4;}
.tr-axis-empty .tr-axis-pct{fill:var(--ink-faint);}
.tr-note{font-size:11px;color:var(--ink-faint);line-height:1.5;margin-top:6px;}

/* label red flags (scanner) */
.sc-flags{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 20px;margin-bottom:18px;}
.sc-flags-head{font-family:var(--font-display);font-weight:600;font-size:15.5px;margin-bottom:14px;}
.sc-flag{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);}
.sc-flag:first-of-type{border-top:none;padding-top:0;}
.sc-flag-badge{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;padding:4px 10px;border-radius:var(--radius-chip);text-transform:uppercase;white-space:nowrap;flex:0 0 auto;margin-top:1px;}
.sc-flag-badge.high{background:rgba(232,139,110,.18);color:#E88B6E;}
.sc-flag-badge.med{background:var(--teal-tint);color:var(--teal);}
.sc-flag-badge.low{background:var(--lavender-tint);color:var(--lavender);}
.sc-flag-badge.ok{background:var(--mint-tint);color:var(--mint);}
.sc-flag-text{font-size:13px;line-height:1.55;color:var(--ink-soft);}
.sc-flag-text b{color:var(--ink);font-weight:600;}
.sc-match-dose{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--teal);background:var(--teal-tint);padding:2px 7px;border-radius:var(--radius-chip);margin-left:5px;}

/* review stamp */
.tb-review{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-chip);display:inline-block;}
.tb-review.ok{background:var(--mint-tint);color:var(--mint);}
.tb-review.stale{background:var(--teal-tint);color:var(--teal);}
.tb-review.pending{background:var(--surface-2);color:var(--ink-faint);}
/* Draft reads louder than "pending": pending means we have no date, draft
   means the entry is explicitly not through review yet. */
.tb-review.draft{background:var(--lavender-tint);color:var(--lavender);}

/* The reference tier: real foods with real nutrition, no writeup. Quieter
   than the draft notice, because "nobody has written this yet" is a smaller
   claim than "this has not been reviewed". */
.lib-tierbadge{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);background:var(--surface-2);border-radius:var(--radius-chip);padding:3px 9px;display:inline-block;margin-top:9px;}
.tb-draftnotice{display:flex;gap:11px;align-items:flex-start;background:var(--lavender-tint);border:1px solid var(--lavender);border-radius:var(--radius-sm);padding:13px 16px;margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--ink-soft);}
.tb-draftnotice b{color:var(--ink);}
.tb-draftnotice-mark{flex:0 0 auto;font-size:15px;line-height:1.4;color:var(--lavender);}

/* "Spotted an error?" line on detail pages */
.sp-feedback{margin-top:22px;font-size:12.5px;color:var(--ink-faint);line-height:1.6;}
.sp-feedback a{color:var(--teal);font-weight:600;text-decoration:none;}
.sp-feedback a:hover{text-decoration:underline;}

.lib-modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.lib-clearstack.primary{background:var(--teal);border-color:var(--teal);color:var(--bg);}
.lib-clearstack.primary:hover{color:var(--bg);opacity:.9;}

/* --- favourites (star) button — sits beside the existing stack +/✓ button -- */
.lib-favbtn{position:absolute;top:16px;right:52px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:2;}
.lib-favbtn.on{background:var(--teal-tint);border-color:var(--teal);color:var(--teal);}
.sp-favbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:600;font-size:12.5px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:8px 14px;border-radius:var(--radius-chip);cursor:pointer;}
.sp-favbtn.on{background:var(--teal-tint);border-color:var(--teal);color:var(--teal);}

/* --- recently viewed strip — library pages + home ------------------------- */
.lib-recent{margin-bottom:18px;}
.lib-recent-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px;}
.lib-recent-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.lib-recent-row::-webkit-scrollbar{display:none;}
.lib-recent-chip{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-chip);padding:7px 14px 7px 7px;text-decoration:none;color:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;}
.lib-recent-chip:hover{border-color:var(--teal);}
.lib-recent-ic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 24px;}

/* --- saved filter presets -------------------------------------------------- */
.lib-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-4px 0 14px;}
.lib-preset-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:600;font-size:12px;padding:6px 8px 6px 14px;border-radius:var(--radius-chip);border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
.lib-preset-chip:hover{color:var(--ink);}
.lib-preset-chip button{background:var(--surface-2);border:none;color:var(--ink-faint);cursor:pointer;font-size:11px;line-height:1;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.lib-preset-save{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--teal);background:none;border:1px dashed var(--line);padding:6px 14px;border-radius:var(--radius-chip);cursor:pointer;}
.lib-preset-save:hover{border-color:var(--teal);}

/* --- card grid / table view toggle ----------------------------------------- */
.lib-viewtoggle{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-chip);padding:2px;}
.lib-viewbtn{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--ink-faint);background:none;border:none;padding:7px 14px;border-radius:var(--radius-chip);cursor:pointer;}
.lib-viewbtn.on{background:var(--teal);color:var(--bg);}
.lib-table-wrap{overflow-x:auto;}
.lib-table{width:100%;border-collapse:collapse;min-width:640px;}
.lib-table th{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none;}
.lib-table th:hover{color:var(--ink-soft);}
.lib-table th.sorted{color:var(--teal);}
.lib-table td{font-size:13px;color:var(--ink-soft);padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
.lib-table tr:last-child td{border-bottom:none;}
.lib-table-name{color:var(--ink);font-weight:600;text-decoration:none;}
.lib-table-name:hover{color:var(--teal);}

/* --- "get this from food instead" button, supplement detail pages -----------
   Only rendered where the entry's amount.nutrient bridges to a food field
   (see typed-blocks.js), so it never promises an answer the data can't give. */
.tb-foodinstead{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px solid var(--mint);border-radius:var(--radius-sm);padding:14px 16px;text-decoration:none;color:inherit;transition:background .15s;}
.tb-foodinstead:hover{background:var(--mint-tint);}
.tb-foodinstead-ic{width:36px;height:36px;border-radius:10px;background:var(--mint-tint);color:var(--mint);flex:0 0 36px;display:flex;align-items:center;justify-content:center;}
.tb-foodinstead-body{flex:1;min-width:0;}
.tb-foodinstead-title{font-family:var(--font-display);font-weight:600;font-size:14.5px;}
.tb-foodinstead-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45;}

/* --- undo toast -------------------------------------------------------------
   Deliberately not the same fixed slot as .lib-stackbar (bottom, centred) —
   sits just above it so both can be visible without overlapping. */
.typed-toast{position:fixed;left:0;right:0;bottom:86px;z-index:45;display:flex;justify-content:center;pointer-events:none;padding:0 20px;}
/* Deliberately NOT glass, though it floats. It is inverted — ink background,
   bg-coloured text — because a toast confirms an action you just took and has
   seconds to be read. Frosting it would drop it from ~15:1 onto whatever
   happens to be behind, for an element whose entire job is being unmissable. */
.typed-toast-inner{pointer-events:auto;background:var(--ink);color:var(--bg);border-radius:var(--radius-chip);padding:10px 10px 10px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:13px;font-weight:600;transform:translateY(140%);opacity:0;transition:transform .25s cubic-bezier(.22,.68,0,1.01),opacity .25s;}
.typed-toast-inner.show{transform:translateY(0);opacity:1;}
.typed-toast-btn{font-family:var(--font-body);font-weight:600;font-size:13px;background:var(--bg);color:var(--ink);border:none;padding:8px 16px;border-radius:var(--radius-chip);cursor:pointer;}
/* real-time pairing alerts share the toast slot; the flag names which kind */
.typed-toast-flag{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:var(--radius-chip);margin-right:6px;vertical-align:1px;}
.typed-toast-flag.pair{background:var(--mint);color:var(--bg);}
.typed-toast-flag.caution{background:#E88B6E;color:var(--bg);}
.typed-toast-inner #typed-toast-text{max-width:520px;line-height:1.45;font-weight:500;}

/* --- command palette (Ctrl/Cmd+K) ------------------------------------------- */
.tp-palette-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:var(--glass-scrim);-webkit-backdrop-filter:var(--glass-scrim);z-index:80;align-items:flex-start;justify-content:center;padding:12vh 20px 0;}
.tp-palette-backdrop.show{display:flex;}
.tp-palette{background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);border-radius:var(--radius-card);max-width:560px;width:100%;max-height:64vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.5),var(--glass-edge);overflow:hidden;}
.tp-palette-input{font-family:var(--font-body);font-size:15px;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--line);padding:16px 18px;outline:none;}
.tp-palette-input::placeholder{color:var(--ink-faint);}
.tp-palette-results{overflow-y:auto;padding:8px;}
.tp-palette-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;text-decoration:none;color:inherit;}
.tp-palette-item.active{background:var(--surface-2);}
.tp-palette-ic{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;background:var(--teal-tint);color:var(--teal);font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;}
.tp-palette-name{font-size:13.5px;font-weight:600;}
.tp-palette-meta{font-size:11px;color:var(--ink-faint);margin-top:1px;}
.tp-palette-empty{padding:20px 14px;font-size:13px;color:var(--ink-faint);}
.tp-palette-hint{border-top:1px solid var(--line);padding:9px 16px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);display:flex;gap:14px;}
.tp-palette-hint kbd{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:inherit;}
.tp-palette-trigger{display:none;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-chip);padding:6px 11px;cursor:pointer;margin-left:auto;flex:0 0 auto;}
@media(min-width:860px){ .tp-palette-trigger{display:inline-flex;} }

/* theme toggle — one compact cycle button (Dusk / Noir / Light), typed-nav.js */
.tp-theme-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--ink-faint);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-chip);cursor:pointer;transition:color .15s,border-color .15s;}
.tp-theme-btn:hover{color:var(--teal);border-color:var(--teal);}

/* --- floating action bar (phones) — typed-nav.js -----------------------------
   A glass dock pinned to the bottom of small screens, with a raised amber
   "+" in the centre opening the quick-log sheet. Desktop never sees it.
   Everything that already floats at the bottom (stack bar, undo toast) steps
   up above it via the body.has-actionbar overrides at the end. */
.tp-dock{display:none;}
@media(max-width:859px){
  .tp-dock{
    position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:55;display:flex;align-items:stretch;justify-content:space-around;gap:2px;
    background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    background-image:var(--glass-sheen);
    border:1px solid var(--line);border-radius:22px;
    box-shadow:0 12px 30px rgba(0,0,0,.4),var(--glass-edge);
    padding:8px 6px calc(8px);
  }
  body.has-actionbar{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  body.has-actionbar .lib-stackbar{bottom:calc(72px + env(safe-area-inset-bottom));}
  body.has-actionbar .typed-toast{bottom:calc(150px + env(safe-area-inset-bottom));}
}
.tp-dock-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--ink-faint);padding:4px 2px;border-radius:14px;transition:color .15s;}
.tp-dock-item.active{color:var(--teal);}
.tp-dock-ic{width:22px;height:22px;display:block;}
.tp-dock-ic svg{width:100%;height:100%;display:block;}
.tp-dock-label{font-family:var(--font-body);font-size:9.5px;font-weight:600;letter-spacing:.01em;}
.tp-dock-plus{
  flex:0 0 auto;align-self:center;width:52px;height:52px;margin-top:-26px;
  border-radius:50%;border:none;cursor:pointer;
  background:var(--teal);color:var(--bg);
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 18px var(--glow);
  display:flex;align-items:center;justify-content:center;
}
.tp-dock-plus svg{width:24px;height:24px;}
.tp-dock-plus[aria-expanded="true"] svg{transform:rotate(45deg);}
.tp-dock-plus svg{transition:transform .2s ease;}

/* the quick-log sheet the + opens */
.tp-sheet-backdrop{display:none;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);backdrop-filter:var(--glass-scrim);-webkit-backdrop-filter:var(--glass-scrim);align-items:flex-end;justify-content:center;}
.tp-sheet-backdrop.show{display:flex;}
.tp-sheet{
  width:100%;max-width:480px;
  background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  background-image:var(--glass-sheen);
  border:1px solid var(--line);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--glass-edge);
  padding:10px 14px calc(96px + env(safe-area-inset-bottom));
}
.tp-sheet-grabber{width:38px;height:4px;border-radius:3px;background:var(--line);margin:4px auto 12px;}
.tp-sheet-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;color:inherit;text-decoration:none;padding:13px 10px;border-radius:12px;cursor:pointer;font-family:var(--font-body);}
.tp-sheet-item:hover{background:var(--surface-2);}
.tp-sheet-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;}
.tp-sheet-ic svg{width:20px;height:20px;}
.tp-sheet-label{display:block;font-size:14px;font-weight:600;color:var(--ink);}
.tp-sheet-sub{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px;}
@media(prefers-reduced-transparency: reduce){
  .tp-sheet-backdrop{background:rgba(0,0,0,.72);}
}

/* --- one-time welcome card — points first-time visitors at the stack,
   compare, and mode toggle without a fragile multi-step spotlight tour ----- */
.tp-welcome{position:fixed;right:20px;bottom:20px;z-index:60;max-width:300px;background:var(--glass-bg-deep);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--teal);border-radius:var(--radius-card);padding:16px 18px;box-shadow:0 16px 40px rgba(0,0,0,.4),var(--glass-edge);}
.tp-welcome-title{font-family:var(--font-display);font-weight:600;font-size:14.5px;margin-bottom:6px;}
.tp-welcome-text{font-size:12.5px;color:var(--ink-soft);line-height:1.55;}
.tp-welcome-text b{color:var(--ink);}
.tp-welcome-close{margin-top:12px;font-family:var(--font-body);font-weight:600;font-size:12.5px;background:var(--teal);color:var(--bg);border:none;padding:8px 16px;border-radius:var(--radius-chip);cursor:pointer;}
@media(max-width:560px){ .tp-welcome{left:16px;right:16px;max-width:none;} }

/* --- resume-plan indicator on the nav tab ----------------------------------- */
.pillar-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block;margin-left:2px;}

/* --- glossary inline tooltips ------------------------------------------------
   Complex/Clinician mode only — Easy mode avoids the jargon in the first
   place, so there is nothing to gloss there. */
.gloss-term{border-bottom:1px dotted var(--ink-faint);cursor:help;position:relative;}
.gloss-pop{display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:240px;background:var(--ink);color:var(--bg);font-family:var(--font-body);font-weight:400;font-size:12px;line-height:1.5;padding:10px 12px;border-radius:10px;z-index:20;box-shadow:0 10px 26px rgba(0,0,0,.4);}
.gloss-term:hover .gloss-pop,.gloss-term:focus .gloss-pop{display:block;}
@media(max-width:560px){ .gloss-pop{width:200px;} }

/* --- upper-limit gauge (dose & safety block) -------------------------------- */
.tb-ulgauge{margin-top:10px;}
.tb-ulgauge-bar{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;position:relative;}
.tb-ulgauge-fill{height:100%;border-radius:5px;background:var(--mint);}
.tb-ulgauge-fill.high{background:var(--teal);}
.tb-ulgauge-fill.over{background:#E88B6E;}
.tb-ulgauge-label{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);margin-top:5px;}

/* --- personal notes on a saved item (you.html) ------------------------------ */
.yo-note{margin-top:10px;width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:inherit;font-size:12px;padding:8px 10px;resize:vertical;min-height:36px;}
.yo-note:focus{border-color:var(--teal);}
.yo-note::placeholder{color:var(--ink-faint);}

/* --- drag-to-reorder saved items (you.html) ---------------------------------- */
.yo-item{cursor:grab;}
.yo-item.dragging{opacity:.4;}
.yo-item.drop-target{border-color:var(--teal);}
.yo-drag{color:var(--ink-faint);flex:0 0 auto;font-size:13px;line-height:1;padding:2px;}

/* --- "evidence updated since you last looked" badge -------------------------- */
.tb-newevidence{display:inline-flex;align-items:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;color:var(--lavender);background:var(--lavender-tint);padding:4px 9px;border-radius:var(--radius-chip);cursor:help;}

/* --- favourites block (you.html) --------------------------------------------- */
.yo-fav-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;text-decoration:none;color:inherit;}
.yo-fav-row:hover{border-color:var(--teal);}

/* --- print ----------------------------------------------------------------
   The stack summary is meant to be taken to a pharmacist. On screen the
   print area is hidden; when printing, it is the only thing on the page. */
#typed-print-area{display:none;}
@media print{
  @page{margin:16mm;}
  body{background:#fff !important;}
  /* hide the app, show the summary */
  body > *:not(#typed-print-area){display:none !important;}
  #typed-print-area{display:block !important;font-family:var(--font-body),system-ui,sans-serif;color:#111;font-size:11pt;line-height:1.5;}
  #typed-print-area .tp-head{border-bottom:2px solid #111;padding-bottom:8pt;margin-bottom:14pt;}
  #typed-print-area .tp-title{font-family:'Fraunces',Georgia,serif;font-size:20pt;font-weight:600;}
  #typed-print-area .tp-meta{font-size:9pt;color:#555;margin-top:3pt;}
  #typed-print-area h2{font-size:11pt;font-weight:700;margin:14pt 0 5pt;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #bbb;padding-bottom:3pt;break-after:avoid;}
  #typed-print-area .tp-list{margin:0 0 0 16pt;padding:0;}
  #typed-print-area .tp-list li{margin-bottom:5pt;break-inside:avoid;}
  #typed-print-area .tp-small{font-size:9pt;color:#555;}
  #typed-print-area .tp-foot{margin-top:18pt;padding-top:8pt;border-top:1px solid #bbb;font-size:9pt;color:#444;}
  #typed-print-area .tp-foot p{margin-bottom:4pt;}
  a[href]::after{content:none !important;}
}

/* respect OS-level reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* body map — front/back muscle diagram, typed-body-map.js. Used on move.html
   in place of the absorption-pathway component the other two pillars use;
   a movement isn't absorbed anywhere, so it gets its own visual. */
.bm-wrap{display:flex;flex-direction:column;gap:18px;}
.bm-figures{display:flex;justify-content:center;gap:28px;}
.bm-figure-col{display:flex;flex-direction:column;align-items:center;gap:8px;}
.bm-figure-label{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);}
.bm-figure{width:120px;height:auto;}
.bm-region{stroke-width:2px;transition:fill .2s,stroke .2s;}
.bm-legend{display:flex;flex-direction:column;gap:8px;}
.bm-legend-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);line-height:1.5;}
.bm-legend-row b{color:var(--ink);}
.bm-legend-empty{font-size:13px;color:var(--ink-soft);line-height:1.6;}
.bm-swatch{width:13px;height:13px;border-radius:4px;flex:0 0 auto;}
.bm-swatch.primary{background:var(--teal);}
.bm-swatch.secondary{background:var(--teal-tint);border:1.5px solid var(--teal);}
@media(max-width:420px){ .bm-figures{gap:14px;} .bm-figure{width:96px;} }

/* --- instrument skin: light, glow, and motion ------------------------------
   Additive layer over per-page styles. Only touches properties the pages
   never set (box-shadow, pseudo-elements, position where unset), so load
   order doesn't matter. The prefers-reduced-motion block above also
   freezes everything added here. */

/* solid-amber controls emit light */
.tw-btn-primary,.tw-cta,.tw-signup-btn-primary,.lib-stackbar-btn,
.lib-chip.on,.lib-viewbtn.on,.ts-tab.on,.mode-btn.on,
.lib-clearstack.primary,.tp-welcome-close{box-shadow:0 0 16px var(--glow);}

/* luminous hairline along the top edge of major cards — inset from the
   corners so it never pokes past the border radius */
.sp-card,.tw-pos-card,.tw-trust-card,.tw-week,.tw-demo,.sc-flags{position:relative;}
.sp-card::before,.lib-card::before,.tw-pos-card::before,.tw-trust-card::before,
.tw-hero-visual::before,.tw-week::before,.tw-demo::before,.sc-flags::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,169,62,.38),transparent);
  pointer-events:none;
}

/* absorption pathway reads as a live trace: the progress line glows and
   carries marching dashes; the active node gets a halo and a sonar ring */
.tw-path-progress,.sp-path-progress{box-shadow:0 0 10px var(--glow);}
.tw-path-progress::after,.sp-path-progress::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(8,17,26,.55) 7px 10px);
  animation:tp-dash .8s linear infinite;
}
@keyframes tp-dash{to{background-position-x:10px;}}
.sp-pnode .circ,.tw-pnode .circ{position:relative;}
.sp-pnode.active .circ,.tw-pnode.on .circ{box-shadow:0 0 16px var(--glow);}
.sp-pnode.active .circ::after,.tw-pnode.on .circ::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(240,169,62,.55);pointer-events:none;
  animation:tp-pulse 2.2s ease-out infinite;
}
@keyframes tp-pulse{0%{transform:scale(.9);opacity:.8;}70%,100%{transform:scale(1.35);opacity:0;}}

/* readout caret on the stage captions — the panel is "printing" its line */
.tw-hv-caption::after,.sp-stagepanel .txt::after{
  content:"";display:inline-block;width:7px;height:13px;margin-left:6px;
  background:var(--teal);opacity:.85;vertical-align:-1px;
  animation:tp-blink 1.1s steps(1) infinite;
}
@keyframes tp-blink{50%{opacity:0;}}

/* --- layout: spec-sheet structure ------------------------------------------
   Detail pages read as numbered technical dossiers: every section gets a
   counter prefix and a hairline top rule, and on wide screens a fixed rail
   (built by the section-rail block in typed-blocks.js) indexes them. The
   homepage's section kickers pick up the same numbering. */
html{scroll-behavior:smooth;}
#content{counter-reset:spsec;}
#content .sp-section-label::before{
  counter-increment:spsec;
  content:counter(spsec,decimal-leading-zero) " · ";
  color:var(--teal);
}
#content .sp-section{
  border-top:1px solid var(--line);padding-top:16px;
  scroll-margin-top:calc(var(--typed-nav-offset,0px) + 84px);
}
.tw-root{counter-reset:twsec;}
.tw-root .tw-section .tw-kicker::before{
  counter-increment:twsec;
  content:counter(twsec,decimal-leading-zero) " · ";
  color:var(--teal);
}

/* section rail — 720px column + 172px rail + gap needs ~1180px to breathe */
.sp-rail{
  display:none;position:fixed;z-index:20;
  top:calc(var(--typed-nav-offset,0px) + 130px);
  left:calc(50% - 560px);width:172px;
  max-height:calc(100vh - var(--typed-nav-offset,0px) - 190px);
  overflow-y:auto;scrollbar-width:none;
}
.sp-rail::-webkit-scrollbar{display:none;}
@media(min-width:1180px){ .sp-rail{display:block;} }
.sp-rail-head{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);padding:0 0 9px 12px;}
.sp-rail a{
  display:flex;gap:8px;align-items:baseline;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.4;
  color:var(--ink-faint);text-decoration:none;
  padding:6px 8px 6px 12px;border-left:2px solid var(--line);
  transition:color .15s,border-color .15s;
}
.sp-rail a .n{flex:0 0 auto;opacity:.65;}
.sp-rail a:hover{color:var(--ink-soft);}
.sp-rail a.on{color:var(--teal);border-left-color:var(--teal);text-shadow:0 0 8px var(--glow);}
.sp-rail a.on .n{opacity:1;}

/* library console — controls in a sticky left column, results right.
   The pages only add the three wrapper divs; everything inside keeps its
   ids, so the filter/search scripts don't know the layout changed. */
.lib-console{display:grid;grid-template-columns:252px minmax(0,1fr);gap:30px;align-items:start;}
.lib-controls{
  position:sticky;top:calc(var(--typed-nav-offset,0px) + 72px);
  max-height:calc(100vh - var(--typed-nav-offset,0px) - 92px);
  overflow-y:auto;scrollbar-width:thin;
  padding-right:24px;border-right:1px solid var(--line);
}
.lib-controls-head{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.lib-controls-head::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--teal);box-shadow:0 0 8px var(--glow);
  animation:tp-live 2.4s ease-in-out infinite;
}
@keyframes tp-live{50%{opacity:.4;}}
.lib-main{min-width:0;}
@media(max-width:1023px){
  .lib-console{grid-template-columns:1fr;gap:0;}
  .lib-controls{position:static;max-height:none;overflow:visible;padding-right:0;border-right:none;margin-bottom:20px;}
}

/* --- liquid glass skin ------------------------------------------------------
   The glass tokens up top decide WHERE glass is; this section makes the
   material behave like glass. Same additive contract as the instrument skin:
   it only touches background-image, pseudo-elements, and position where the
   pages never set them, so load order doesn't matter. Three layers:

   sheen — the --glass-sheen light-catch, painted onto every pane this file
   owns. background-image stacks over background-color, so it adds to the
   tint without touching it. Page-owned panes that set the background
   SHORTHAND (.tw-nav and the per-page sub-navs) reset the image layer and
   keep plain frost — acceptable: they still pick up the edge, blur, and
   brightness upgrades through the tokens. */
.pillar-switcher,.mode-ribbon,.doc-nav,.lib-stackbar-inner,.lib-modal,
.tp-palette,.tp-welcome{
  background-image:var(--glass-sheen);
}

/* sweep — a one-shot specular band that crosses a sheet as it opens: the
   light finding the new pane. Hung off the .show class (or, for the welcome
   card, off the element's own creation), so display:none -> flex restarts it
   on every open with no JS. At rest the band sits at translateX(0), fully
   left of the pane, and every host clips (the modal's overflow-y:auto makes
   overflow-x auto, which still clips negative offsets) — so nothing shows
   until a .show re-runs the animation. Persistent chrome (nav bars, ribbon)
   deliberately gets NO sweep: it would replay on every full page load of a
   static site, and a glint you see forty times an hour stops being light and
   starts being a bug.
   The global prefers-reduced-motion block freezes this to .01ms like every
   other animation; the `both` fill then parks the band off-pane, invisible. */
.lib-modal,.tp-palette{position:relative;}
.tp-welcome,.lib-stackbar-inner{overflow:hidden;}
.lib-modal::after,.tp-palette::after,.tp-welcome::after,.lib-stackbar-inner::after{
  content:"";position:absolute;top:-8%;bottom:-8%;left:-42%;width:38%;
  background:linear-gradient(105deg,transparent,rgba(244,241,232,.05) 40%,rgba(244,241,232,.10) 50%,rgba(244,241,232,.05) 60%,transparent);
  transform:skewX(-9deg);
  pointer-events:none;
}
.lib-modal-backdrop.show .lib-modal::after,
.tp-palette-backdrop.show .tp-palette::after,
.tp-welcome::after,
.lib-stackbar-inner.show::after{
  animation:lg-sweep .95s cubic-bezier(.3,.55,.25,1) .1s both;
}
@keyframes lg-sweep{
  from{transform:skewX(-9deg) translateX(0);}
  to{transform:skewX(-9deg) translateX(460%);}
}

/* refraction — Chromium only. The transient sheets pass their backdrop
   through an SVG displacement filter (feTurbulence, injected by typed-nav.js)
   AFTER the blur, so the frosted field behind the sheet takes on a slow
   liquid waviness. Order matters: displacing first and blurring second would
   average the ripple straight back out. Gated behind html.lg-refract (set by
   typed-nav.js from userAgentData, itself Chromium-only) because Safari and
   Firefox drop a backdrop-filter chain containing an SVG url() reference
   entirely — taking the blur down with it. Everyone else keeps plain frost.
   Only the four transient surfaces refract; the always-on nav bars would pay
   the displacement cost on every scrolled frame for a texture nobody is
   looking at. Under reduced transparency --glass-blur is `none`, which makes
   this whole list grammar-invalid and the declaration fall away on its own —
   but the media block below also switches it off explicitly rather than
   leaning on that. */
html.lg-refract .lib-modal,
html.lg-refract .tp-palette,
html.lg-refract .tp-welcome,
html.lg-refract .lib-stackbar-inner{
  backdrop-filter:var(--glass-blur) url(#lg-refract);
  -webkit-backdrop-filter:var(--glass-blur) url(#lg-refract);
}

/* --- reduced transparency ---------------------------------------------------
   macOS and Windows both expose "reduce transparency", set by people who get
   motion-sick from moving texture or simply cannot parse text over it. Honour
   it by collapsing every glass surface back to an opaque panel.

   Doing it by overriding the TOKENS rather than the rules means this stays
   correct for any surface added later: a new element that uses var(--glass-bg)
   and var(--glass-blur) is covered the moment it is written, with nothing to
   remember. Layout is byte-identical either way — only the tint changes. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --glass-bg:var(--surface);
    --glass-bg-deep:var(--bg);
    --glass-blur:none;
    --glass-scrim:none;
    --glass-edge:none;
    --glass-sheen:none;
  }
  .lib-modal-backdrop,.tp-palette-backdrop{background:rgba(0,0,0,.72);}
  /* the liquid layers imply glass; on an opaque panel they'd just be smudge */
  .lib-modal::after,.tp-palette::after,.tp-welcome::after,.lib-stackbar-inner::after{display:none;}
  html.lg-refract .lib-modal,html.lg-refract .tp-palette,
  html.lg-refract .tp-welcome,html.lg-refract .lib-stackbar-inner{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}