/* ── Design system tokens ── */
:root {
/* Surface + text — warm paper palette, gentler than pure white. */
--color-background-primary: #f6f2ea;
--color-background-secondary: #ebe5d9;
--color-text-primary: #0c0a09;
--color-text-secondary: #57534e;
--color-text-tertiary: #a8a29e;
--color-border-primary: #78716c;
--color-border-secondary: #d6d3d1;
--color-border-tertiary: #dcdad7;
/* Brand (single source of truth) — Direction C: warm green-teal */
--color-brand: #1F7A6B;
--color-brand-hover: #176258;
--color-brand-soft: #7CC4B6;
/* Accent — soft coral, used sparingly for warmth */
--color-accent-coral: #E8967A;
--color-accent-coral-soft: #F5C9B8;
/* Tier palette — gently desaturated for the Approachable Health Reference voice */
--t1c:#1F8A7A;--t1bg:#E6F4F1;--t1tx:#0F4A41;
--t2c:#5A7BC4;--t2bg:#ECF0F7;--t2tx:#2D3F6E;
--t3c:#C2872B;--t3bg:#FBF1DE;--t3tx:#6B4716;
--t4c:#B85046;--t4bg:#FAE8E5;--t4tx:#6B231D;
--slp:#5E59B2;--slpbg:#EDECF7;--slptx:#26215C;
/* Warning / medical-alert */
--color-warn-bg: #FBF1DE;
--color-warn-border: #E5C66B;
--color-warn-text: #6B4716;
--color-warn-text-strong: #4A3010;
/* Focus ring */
--focus-ring: 0 0 0 2px rgba(31,122,107,.45);
/* Z-index scale */
--z-sticky: 40;
--z-dropdown: 100;
--z-modal: 1000;
--z-toast: 2000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* scrollbar-gutter:stable reserves space for the vertical scrollbar even on
pages whose content fits in the viewport. Without this, navigating between
a tall page (Articles, Index) and a shorter page (Discover) makes the
scrollbar appear/disappear, shifting content horizontally by ~15px and
producing a "slight shift" on cross-page navigation. */
body{
font-family:'Mona Sans','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
font-size:14px;
line-height:1.5;
background:var(--color-background-secondary);
color:var(--color-text-primary);
min-height:100vh;
padding:0 1rem 4rem;
-webkit-font-smoothing:antialiased;
}
input,button{font-family:inherit}
.container{max-width:1200px;margin:0 auto;position:relative}
.page-header{padding:2.25rem 0 1.25rem;border-bottom:0.5px solid var(--color-border-tertiary);margin-bottom:1.5rem}
.page-title{font-size:48px;font-weight:600;letter-spacing:-1.4px;color:var(--color-text-primary);margin:0;line-height:1.1}
@media(max-width:900px){.page-title{font-size:40px;letter-spacing:-1.2px}}
@media(max-width:600px){.page-title{font-size:32px;letter-spacing:-1px}}
.page-sub{font-size:13px;color:var(--color-text-secondary);margin-top:5px}
.page-sub span{display:inline-block;margin-right:14px}
.page-sub span::before{content:'·';margin-right:6px;opacity:.5}
.page-sub span:first-child::before{display:none}
/* ── Supplement dashboard CSS (from v12) ── */
.pg{padding:1.25rem 0}
.ev-card{border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.5rem 1.25rem 1.1rem;margin-bottom:1rem;background:var(--color-background-primary);text-align:center}
.ev-number{font-size:42px;font-weight:600;color:var(--color-brand);line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.ev-plus{font-size:28px;font-weight:500;color:var(--t2c)}
.ev-label{font-size:13px;color:var(--color-text-secondary);margin-top:.45rem}
.ev-divider{width:40px;height:1px;background:var(--color-border-tertiary);margin:.85rem auto}
.ev-sub{font-size:11px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:.85rem}
.ev-pulse{width:6px;height:6px;border-radius:50%;background:var(--color-brand);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.logo-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:20px;row-gap:16px;max-width:900px;margin:8px auto .4rem;padding:6px 0;width:100%}
.logo-strip .logo-icon.logo-hidden{display:none}
.logo-icon{width:32px;height:32px;flex-shrink:0;opacity:.4;transition:opacity .15s;filter:invert(1)}.logo-icon:hover{opacity:.7}
/* Fixed-size cell — every logo sits in an identical bounding box so visual size and spacing are uniform. */
.lk{display:flex;align-items:center;justify-content:center;text-decoration:none;transition:opacity .2s;width:120px;height:30px;line-height:0;flex:0 0 120px;padding:0}
.lk .mk{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:brightness(0) saturate(0);opacity:.38;transition:opacity .2s}
.lk:hover .mk{opacity:.7}
@media(max-width:900px){.logo-strip{column-gap:14px;row-gap:14px;max-width:620px}.lk{width:110px;height:28px;flex:0 0 110px}}
@media(max-width:540px){.logo-strip{column-gap:10px;row-gap:12px;max-width:360px}.lk{width:94px;height:24px;flex:0 0 94px}}
.smb{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:6px;border:none;background:none;font-size:12px;color:var(--color-text-secondary);cursor:pointer;border-top:0.5px solid var(--color-border-tertiary);padding-top:.6rem;transition:color .15s}.smb:hover{color:var(--color-text-primary)}
.chv{transition:transform .25s}.chv.open{transform:rotate(180deg)}
.src-detail{display:none;padding-top:.85rem;border-top:0.5px solid var(--color-border-tertiary);margin-top:.6rem;text-align:left}.src-detail.open{display:block}
.src-desc-text{font-size:12px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:.85rem}
.src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
@media(max-width:460px){.src-grid{grid-template-columns:repeat(2,1fr)}}
.src-item{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:8px;padding:.55rem .65rem;display:flex;align-items:center;gap:7px;text-decoration:none;transition:all .15s;cursor:pointer}.src-item:hover{background:var(--color-background-primary);border-color:var(--color-border-primary)}
.src-il{width:28px;height:28px;flex-shrink:0;filter:invert(1);opacity:.5}.src-in{font-size:11px;font-weight:500;color:var(--color-text-primary);line-height:1.2}
.src-is{font-size:10px;color:var(--color-text-tertiary);line-height:1.3;margin-top:1px}
/* Sources — Option C card grid */
.src-cards-c{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:640px){.src-cards-c{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.src-cards-c{grid-template-columns:1fr}}
.src-card-c{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:12px;padding:16px}
.src-card-c-top{margin-bottom:8px}
.src-card-c-badge{font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:999px;display:inline-block}
.src-card-c.cat1 .src-card-c-badge{background:var(--t1bg);color:var(--t1tx)}
.src-card-c.cat2 .src-card-c-badge{background:var(--t2bg);color:var(--t2tx)}
.src-card-c.cat3 .src-card-c-badge{background:var(--t4bg);color:var(--t4tx)}
.src-card-c.cat4 .src-card-c-badge{background:rgba(31,122,107,.08);color:var(--color-brand)}
.src-card-c.cat5 .src-card-c-badge{background:var(--t2bg);color:var(--t2tx)}
.src-card-c-num{font-size:28px;font-weight:800;line-height:1;letter-spacing:-1.5px;margin-bottom:3px}
.src-card-c-num small{font-size:11px;font-weight:500;letter-spacing:0;opacity:.55}
.src-card-c.cat1 .src-card-c-num{color:var(--t1c)}
.src-card-c.cat2 .src-card-c-num{color:var(--t2c)}
.src-card-c.cat3 .src-card-c-num{color:var(--t4c)}
.src-card-c.cat4 .src-card-c-num{color:var(--color-brand)}
.src-card-c.cat5 .src-card-c-num{color:var(--t2c)}
.src-card-c-title{font-size:11.5px;font-weight:700;color:var(--color-text-primary);margin-bottom:10px;line-height:1.35}
.src-card-c-divider{height:1px;background:var(--color-border-tertiary);margin-bottom:10px}
.src-card-c-names{display:flex;flex-direction:column;gap:5px}
.src-card-c-name{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--color-text-secondary);line-height:1.3}
.src-card-c-name::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0;opacity:.55}
.src-card-c.cat1 .src-card-c-name::before{background:var(--t1c)}
.src-card-c.cat2 .src-card-c-name::before{background:var(--t2c)}
.src-card-c.cat3 .src-card-c-name::before{background:var(--t4c)}
.src-card-c.cat4 .src-card-c-name::before{background:var(--color-brand)}
.src-card-c.cat5 .src-card-c-name::before{background:var(--t2c)}
.src-card-c-more{font-size:10px;color:var(--color-text-tertiary);margin-top:3px;padding-left:10px}
a.src-card-c-name{text-decoration:none;color:var(--color-text-secondary)}
a.src-card-c-name:hover{color:var(--color-text-primary)}
.new-src{font-size:9px;padding:1px 5px;border-radius:10px;background:var(--t2bg);color:var(--t2tx);font-weight:500;margin-left:4px;vertical-align:middle}
.gs-wrap{position:relative;margin-bottom:1rem}
.gs-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-text-tertiary)}
.gs-inp{width:100%;padding:11px 40px;border-radius:10px;border:0.5px solid var(--color-border-secondary);background:var(--color-background-primary);color:var(--color-text-primary);font-size:14px;outline:none;transition:border-color .15s}.gs-inp:focus{border-color:var(--color-border-primary)}.gs-inp::placeholder{color:var(--color-text-tertiary)}
.gs-clr{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:var(--color-background-secondary);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:14px}.gs-clr.vis{display:flex}
.gs-res{display:none}.gs-res.vis{display:block}
.gs-ac{position:absolute;top:100%;left:0;right:0;background:var(--color-background-primary);border:0.5px solid var(--color-border-secondary);border-top:none;border-radius:0 0 10px 10px;max-height:240px;overflow-y:auto;z-index:20;display:none}
.gs-ac.vis{display:block}
.gs-ac-item{padding:8px 14px;font-size:13px;color:var(--color-text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:0.5px solid var(--color-border-tertiary)}
.gs-ac-item:last-child{border-bottom:none}
.gs-ac-item:hover,.gs-ac-item.active{background:var(--color-background-secondary)}
.gs-ac-tag{font-size:10px;color:var(--color-text-tertiary);white-space:nowrap}
.gs-meta{font-size:12px;color:var(--color-text-secondary);margin-bottom:.75rem}.gs-meta b{color:var(--color-text-primary)}
.sr-grid{display:grid;grid-template-columns:1fr;gap:9px}
.sc,.sr-card{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:12px;padding:0;overflow:hidden;transition:all .15s;display:flex;cursor:pointer}.sc:hover{border-color:var(--color-border-secondary);box-shadow:0 2px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.sc-score-side{width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;flex-shrink:0}
.sc-score-side.score-high{background:linear-gradient(180deg,var(--t1c),#0F766E)}.sc-score-side.score-mid{background:linear-gradient(180deg,var(--t2c),#3B5FC0)}.sc-score-side.score-low{background:linear-gradient(180deg,var(--t3c),#A16207)}.sc-score-side.score-bad{background:linear-gradient(180deg,var(--t4c),#991B1B)}
.sc-score-num{font-size:20px;font-weight:700;color:#fff;line-height:1}
.sc-score-label{font-size:7px;color:rgba(255,255,255,.7);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
.sc-inner{padding:.85rem 1rem;flex:1;min-width:0}
.sc-bar-row{display:flex;gap:6px;margin-top:10px}
.sc-bar-item{flex:1}
.sc-bar-label{font-size:9px;color:var(--color-text-tertiary);margin-bottom:3px}
.sc-bar-track{height:6px;background:var(--color-background-secondary);border-radius:3px;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}
.sc-expand{display:none;padding-top:6px}.sc-expand.open{display:block}
.sc-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:6px 4px 2px;border:none;border-top:1px solid var(--color-border-tertiary);background:none;font-size:11px;color:var(--color-text-tertiary);cursor:pointer;margin-top:6px;gap:4px;transition:color .15s}.sc-toggle:hover{color:var(--color-text-secondary)}
.sc-toggle-chv{transition:transform .2s;display:inline-block}.sc-toggle-chv.open{transform:rotate(180deg)}
.sc-score{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--color-text-primary);flex-shrink:0;position:relative}
.sc-score svg{position:absolute;top:0;left:0;width:40px;height:40px;transform:rotate(-90deg)}
.sc-score circle{fill:none;stroke-width:3;stroke-linecap:round}
.sc-score .bg{stroke:var(--color-border-tertiary)}
.sc-score .fg{transition:stroke-dashoffset .6s ease}
.score-high{color:var(--t1c)}.score-mid{color:var(--t2c)}.score-low{color:var(--t3c)}.score-bad{color:var(--t4c)}
.sc-top,.sr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:8px}
.sc-name,.sr-name{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.sc-tag,.sr-tag{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.sc-tag-pill{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary)}
.sc-desc,.sr-desc{font-size:12px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:10px}
.sc-desc.sc-desc-top{margin:2px 0 12px;padding:0;background:transparent;border-radius:0;border-left:0;font-size:12px;line-height:1.6;color:var(--color-text-secondary)}
.sc-interact{font-size:12px;color:var(--color-text-secondary);background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:8px;padding:8px 10px;margin-bottom:8px;line-height:1.55}
.sc-interact-title{font-size:11px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.sc-interact-list{display:flex;flex-wrap:wrap;gap:4px}
.sc-interact-pill{font-size:11px;padding:2px 7px;border-radius:10px;background:var(--t3bg);color:var(--t3tx);font-weight:500}
.sc-interact-pill.danger{background:var(--t4bg);color:var(--t4tx)}
.sc-interact-safe{font-size:11px;color:var(--t1c);font-style:italic}
.sc-onset-info{font-size:12px;color:var(--color-text-secondary);background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:8px;padding:6px 10px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sc-onset-label{font-size:11px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}
.sc-food-info{background:var(--t1bg);border-color:rgba(13,148,136,.15)}
/* Info table (key/value rows) */
.sc-info-table{border-top:1px dashed var(--color-border-tertiary);margin-bottom:10px}
.sc-info-row{display:flex;align-items:baseline;padding:11px 2px;border-bottom:1px dashed var(--color-border-tertiary);font-size:12px;color:var(--color-text-secondary);line-height:1.6;gap:16px}
.sc-info-row:last-child{border-bottom:1px dashed var(--color-border-tertiary)}
.sc-info-tinted{background:transparent}
.sc-info-lbl{width:88px;font-size:9px;font-weight:700;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;padding-top:2px}
.sc-info-val{flex:1;min-width:0;color:var(--color-text-secondary)}
.sc-info-badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:600;background:var(--t1bg);color:var(--t1tx);margin-right:6px}
.sc-excess-info{background:var(--t4bg);border-color:rgba(185,28,28,.12)}
/* Dose-warning numbered-steps block (variant D) */
.sc-dose-warn-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-tertiary);margin:14px 0 4px;display:flex;align-items:center;gap:6px}
.sc-dose-warn-h svg{color:var(--t4c);flex-shrink:0}
.sc-dose-steps{position:relative;padding-left:2px;margin-bottom:10px}
.sc-dose-steps::before{content:'';position:absolute;left:13px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,var(--t4c) 0%,var(--t3c) 50%,var(--t2c) 100%);opacity:.25}
.sc-ds-row{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:12.5px;position:relative}
.sc-ds-num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;z-index:1;border:3px solid var(--color-background-primary,#fff)}
.sc-ds-row.sc-ds-risk .sc-ds-num{background:var(--t4c);box-shadow:0 0 0 1px var(--t4c)}
.sc-ds-row.sc-ds-upper .sc-ds-num{background:var(--t3c);box-shadow:0 0 0 1px var(--t3c)}
.sc-ds-row.sc-ds-long .sc-ds-num{background:var(--t2c);box-shadow:0 0 0 1px var(--t2c)}
.sc-ds-body{flex:1;padding-top:2px;min-width:0}
.sc-ds-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.sc-ds-row.sc-ds-risk .sc-ds-k{color:var(--t4c)}
.sc-ds-row.sc-ds-upper .sc-ds-k{color:var(--t3c)}
.sc-ds-row.sc-ds-long .sc-ds-k{color:var(--t2c)}
.sc-ds-v{color:var(--color-text-secondary);line-height:1.5;font-size:12px}
/* Medication interactions — numbered-steps layout (variant D) */
.sc-mi-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-tertiary);margin:14px 0 4px;display:flex;align-items:center;gap:6px}
.sc-mi-h svg{color:var(--color-text-tertiary);flex-shrink:0}
.sc-mi-wrap{position:relative;padding-left:2px;margin-bottom:10px}
.sc-mi-wrap.sc-mi-rail::before{content:'';position:absolute;left:13px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,var(--t4c) 0%,var(--t3c) 100%);opacity:.25}
.sc-mi-row{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:12.5px;position:relative}
.sc-mi-num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;z-index:1;border:3px solid var(--color-background-primary,#fff)}
.sc-mi-row.sc-mi-avoid .sc-mi-num{background:var(--t4c);box-shadow:0 0 0 1px var(--t4c)}
.sc-mi-row.sc-mi-caution .sc-mi-num{background:var(--t3c);box-shadow:0 0 0 1px var(--t3c)}
.sc-mi-body{flex:1;padding-top:2px;min-width:0}
.sc-mi-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sc-mi-row.sc-mi-avoid .sc-mi-k{color:var(--t4c)}
.sc-mi-row.sc-mi-caution .sc-mi-k{color:var(--t3c)}
.sc-mi-dot{color:var(--color-border-secondary);opacity:.6}
.sc-mi-med{color:var(--color-text-primary);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
.sc-mi-v{color:var(--color-text-secondary);line-height:1.5;font-size:12px}
.sc-dose,.sr-dose{font-size:11px;padding:3px 7px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:5px;color:var(--color-text-secondary);display:inline-block}
.sc-dose b,.sr-dose b{color:var(--color-text-primary);font-weight:500}
.rt-section{margin-top:8px;padding-top:7px;border-top:0.5px solid var(--color-border-tertiary)}
.rt-row{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.rt-lbl{font-size:10px;color:var(--color-text-tertiary);width:55px;flex-shrink:0}
.rt-dots{display:flex;gap:2.5px}
.rt-dot{width:8px;height:8px;border-radius:50%;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary)}
.rt-dot.on-e{background:var(--t1c);border-color:transparent}.rt-dot.on-s{background:var(--t2c);border-color:transparent}.rt-dot.on-d{background:var(--t4c);border-color:transparent}
.rt-text{font-size:10px;color:var(--color-text-tertiary)}
.nbadge{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--t3bg);color:var(--t3tx);font-weight:500;flex-shrink:0}
.tbadge{font-size:10px;font-weight:500;padding:2px 6px;border-radius:20px}
.tfirst{font-size:10px;font-weight:500;padding:2px 6px;border-radius:20px;background:var(--t3bg);color:var(--t3tx)}
.sc-bgs,.sr-bgs{display:flex;gap:4px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.sr-card{flex-direction:column;padding:1rem}
.sr-card:focus-within{outline:2px solid var(--color-border-primary);outline-offset:2px}
.warn-badge{font-size:10px;padding:2px 6px;border-radius:20px;background:var(--color-warn-bg);color:var(--color-warn-text);border:0.5px solid var(--color-warn-border);font-weight:500}
mark{background:rgba(186,117,23,.2);color:inherit;border-radius:2px;padding:0 1px}
.tab-bar{display:flex;border-bottom:0.5px solid var(--color-border-tertiary);margin-bottom:1.25rem}
.tab-btn{padding:9px 16px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:var(--color-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}.tab-btn.active{color:var(--color-text-primary);border-bottom-color:var(--color-text-primary)}
.card-box{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.25rem}
.sec-lbl{font-size:11px;font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.age-wrap{display:flex;align-items:center;gap:12px;margin-bottom:1.1rem}
.age-stepper{display:flex;align-items:center;gap:0}
.age-stepper-btn{width:36px;height:36px;border-radius:50%;border:0.5px solid var(--color-border-secondary);background:var(--color-background-secondary);color:var(--color-text-primary);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;padding:0}.age-stepper-btn:hover{background:var(--color-background-primary);border-color:var(--color-border-primary)}.age-stepper-btn:active{transform:scale(.92)}
.age-input{width:56px;text-align:center;font-size:28px;font-weight:600;color:var(--color-text-primary);background:none;border:none;outline:none;font-family:inherit;-moz-appearance:textfield;padding:0}.age-input::-webkit-outer-spin-button,.age-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.age-sub{font-size:12px;color:var(--color-text-secondary)}
.sex-row{display:flex;gap:8px}
.sx-btn{flex:1;padding:9px;border-radius:8px;border:0.5px solid var(--color-border-secondary);background:var(--color-background-secondary);color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.sx-btn.on-m{background:#1565C0;color:#fff;border-color:transparent}
.sx-btn.on-f{background:#B5256E;color:#fff;border-color:transparent}
.sx-btn.on-p{background:#8E24AA;color:#fff;border-color:transparent}
.cond-chip.on{background:#0D7377;color:#fff;border-color:transparent}
.beta-banner{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem}
.beta-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--color-brand);color:#fff;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}
.beta-title{font-size:13px;font-weight:500;color:var(--color-text-primary);display:flex;align-items:center;gap:7px;margin-bottom:6px}
.beta-text{font-size:11px;color:var(--color-text-tertiary);line-height:1.6}
.beta-dna{font-size:11px;color:var(--color-text-secondary);margin-top:6px;padding:6px 9px;background:rgba(31,122,107,.08);border-radius:6px;border-left:2px solid var(--color-brand);line-height:1.5}
.med-section{margin-top:1rem}
.med-label{font-size:11px;font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;display:flex;align-items:center;gap:6px}
.med-label-opt{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--color-text-tertiary)}
.med-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:.5rem}
.med-chip{padding:4px 10px;border-radius:20px;font-size:11px;cursor:pointer;border:0.5px solid var(--color-border-secondary);background:var(--color-background-secondary);color:var(--color-text-secondary);transition:all .15s;user-select:none;white-space:nowrap}
.med-chip.on{background:var(--color-brand);color:#fff;border-color:transparent}
.med-chip:hover:not(.on){background:var(--color-background-primary);border-color:var(--color-border-primary)}
/* Tighter chips inside the Medications section so the 4 default chips fit on one line at 540px container width. */
#pf-sec-meds .med-chips{gap:4px}
#pf-sec-meds .med-chip{padding:4px 8px;font-size:10.5px}
.med-note{font-size:11px;color:var(--color-text-tertiary);line-height:1.5;font-style:italic}
/* Phase 2 / Item #2 — drug typeahead (specific medications) */
.drug-typeahead-wrap{display:flex;flex-direction:column;gap:6px}
.drug-typeahead-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}
.drug-typeahead-hint{font-size:11px;color:var(--color-text-tertiary);line-height:1.5}
.drug-typeahead-input-wrap{position:relative}
.drug-typeahead-input{width:100%;padding:8px 11px;border:1px solid var(--color-border-secondary);border-radius:7px;font-family:inherit;font-size:13px;background:#fff;color:var(--color-text-primary);box-sizing:border-box}
.drug-typeahead-input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(31,122,107,.12)}
.drug-typeahead-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--color-border-secondary);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.08);z-index:50;max-height:280px;overflow-y:auto}
.drug-typeahead-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:0.5px solid var(--color-border-tertiary)}
.drug-typeahead-item:last-child{border-bottom:none}
.drug-typeahead-item:hover,.drug-typeahead-item.drug-ta-active{background:rgba(31,122,107,.06)}
.drug-typeahead-empty{padding:10px 12px;font-size:12px;color:var(--color-text-secondary);font-style:italic;line-height:1.4}
/* "Popular X" / "More X" header that prefixes self-populated dropdowns when the input is empty. */
.drug-typeahead-hdr,.drug-typeahead-popular-hdr,.ac-hdr,.gs-ac-hdr{
font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-text-tertiary);
padding:8px 12px 6px;
border-bottom:0.5px solid var(--color-border-tertiary);
background:var(--color-background-secondary);
position:sticky;top:0;
}
.drug-ta-name{color:var(--color-text-primary);font-weight:500}
.drug-ta-class{font-size:10.5px;color:var(--color-text-tertiary);font-style:italic}
.drug-chips{display:none;flex-wrap:wrap;gap:6px;margin-top:6px}
.drug-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(31,122,107,.08);color:var(--color-brand);border:0.5px solid rgba(31,122,107,.25);padding:3px 4px 3px 10px;border-radius:14px;font-size:11.5px;font-weight:500}
.drug-chip-name{padding-right:2px}
.drug-chip-remove{background:transparent;border:none;color:var(--color-brand);font-size:14px;line-height:1;cursor:pointer;padding:0 6px;border-radius:50%;font-weight:600;font-family:inherit}
.drug-chip-remove:hover{background:rgba(31,122,107,.15)}
/* Phase 3 / Item #6 — form-specific evidence callout in supplement modal */
.supp-form-note{background:rgba(202,138,4,.06);border-left:3px solid #CA8A04;padding:10px 14px;border-radius:6px;margin:14px 0}
.supp-form-note-label{color:#7A5300!important}
.supp-form-note .supp-modal-val{font-size:13px;line-height:1.55;color:var(--color-text-primary)}
.go-btn{width:100%;padding:11px;border-radius:8px;border:none;background:var(--color-text-primary);color:var(--color-background-primary);font-size:14px;font-weight:500;cursor:pointer;margin-top:1rem;transition:opacity .15s}.go-btn:active{opacity:.85}.go-btn:disabled{opacity:.5;cursor:not-allowed}
.loading-overlay{display:none;text-align:center;padding:3rem 1rem}
.loading-overlay.vis{display:block}
.loading-ring{width:48px;height:48px;border:3px solid var(--color-border-tertiary);border-top-color:var(--color-text-primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1.25rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:14px;font-weight:500;color:var(--color-text-primary);margin-bottom:6px}
.loading-sub{font-size:12px;color:var(--color-text-secondary)}
.loading-bar-wrap{width:200px;height:4px;background:var(--color-border-tertiary);border-radius:2px;margin:1rem auto 0;overflow:hidden}
.loading-bar{height:100%;width:0;background:var(--color-text-primary);border-radius:2px;transition:width .15s linear}
.errmsg{font-size:12px;color:var(--t4tx);background:var(--t4bg);padding:7px 11px;border-radius:8px;margin-top:8px;display:none}
.profile-bar{background:var(--color-background-secondary);border-radius:12px;padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px;border:0.5px solid var(--color-border-tertiary)}
.profile-bar-text{font-size:14px;font-weight:600;color:var(--color-text-primary)}.profile-bar-sub{font-size:12px;color:var(--color-text-secondary);margin-top:1px}
.edit-btn{font-size:12px;font-weight:600;padding:5px 14px;border-radius:999px;border:1px solid var(--color-brand);background:var(--color-background-primary);color:var(--color-brand);cursor:pointer;transition:all .15s}
.edit-btn:hover{background:var(--color-brand);color:#fff}
.med-alert{background:#FFF8E1;border:0.5px solid #F9A825;border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem}
.med-alert-hdr{font-size:12px;font-weight:500;color:var(--color-warn-text-strong);margin-bottom:.5rem;display:flex;align-items:center;gap:5px}
.med-alert-item{font-size:11px;color:var(--color-warn-text);margin-bottom:4px;padding:5px 8px;background:rgba(255,255,255,.6);border-radius:6px}
.med-alert-item b{color:var(--color-warn-text-strong)}
/* ── Supplement-supplement interaction UI ── */
#supp-alert-box{margin-bottom:1rem}
.supp-alert{background:#FEF2F2;border:0.5px solid rgba(220,38,38,.25);border-left:3px solid #DC2626;border-radius:10px;padding:.85rem 1rem}
.supp-alert-clean{background:#F0FDF4;border-color:#16A34A}
.supp-alert-clean .supp-alert-hdr{color:#166534}
.supp-alert-clean .supp-alert-sub{font-size:11px;color:#166534;margin-top:4px}
/* Positive pairings block — warm cream with gold accent (legacy — no longer rendered, kept for back-compat) */
.supp-alert-pair{background:#FFFBEB;border:0.5px solid rgba(217,119,6,.25);border-left:3px solid #D97706;border-radius:10px;padding:.85rem 1rem;margin-bottom:.75rem}
.supp-alert-pair .supp-alert-hdr{color:#854D0E}
.supp-alert-pair-item{color:#713F12;border-left:3px solid #D97706;background:rgba(255,255,255,.75)}
.supp-alert-pair-item b{color:#713F12;font-weight:600}
.supp-alert-sev-pair{background:#D97706;color:#fff}
.supp-alert-pair .supp-alert-foot{color:#713F12;border-top:0.5px solid rgba(217,119,6,.25);opacity:.8}
.supp-alert-hdr{font-size:12px;font-weight:600;color:#991B1B;margin-bottom:.5rem;display:flex;align-items:center;gap:5px}
.supp-alert-item{font-size:11px;color:#7F1D1D;margin-bottom:4px;padding:6px 8px;background:rgba(255,255,255,.7);border-radius:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.supp-alert-item b{color:#991B1B;font-weight:600}
.supp-alert-avoid{border-left:3px solid #DC2626}
.supp-alert-caution{border-left:3px solid #F59E0B;color:#78350F}
.supp-alert-caution b{color:#78350F}
.supp-alert-sev{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;background:#DC2626;color:#fff;letter-spacing:.04em;text-transform:uppercase}
.supp-alert-caution .supp-alert-sev{background:#F59E0B}
.supp-alert-reason{opacity:.8}
.supp-alert-more{font-size:11px;color:#991B1B;padding:6px 8px;font-style:italic}
.supp-alert-foot{font-size:10px;color:#7F1D1D;margin-top:8px;padding-top:6px;border-top:0.5px solid rgba(220,38,38,.2);opacity:.8}
/* Expanded supplement-interaction section inside renderCard */
.sc-si-h{color:#991B1B !important}
.sc-si-h svg{color:#991B1B !important}
.sc-si-count{font-size:9px;padding:1px 6px;border-radius:10px;background:#DC2626;color:#fff;letter-spacing:.03em}
.sc-si-partners{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.sc-si-pill{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--t4bg,#FEE2E2);color:var(--t4tx,#991B1B);font-weight:500;display:inline-flex;align-items:center;gap:3px}
.sc-si-pill-count{font-weight:600;opacity:.7;font-size:9px}
.sc-si-pill-more{background:var(--color-background-secondary,#F3F4F6);color:var(--color-text-tertiary,#6B7280);border:1px solid var(--color-border-secondary,#d6d3d1);cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:.01em;transition:all .15s}
.sc-si-pill-more:hover{background:var(--color-border-secondary,#d6d3d1);color:var(--color-text-secondary)}
.sc-si-pill-more:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sc-si-pill-more[aria-expanded="true"]{background:rgba(31,122,107,.08);border-color:var(--color-brand-soft);color:var(--color-brand)}
.sc-si-chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 6px;border-radius:8px;background:var(--t3bg,#FEF3C7);color:var(--t3tx,#92400E);font-weight:600;cursor:help}
.sc-si-chip.danger{background:var(--t4bg,#FEE2E2);color:var(--t4tx,#991B1B)}
/* Per-card conflict rows in the profile plan view */
/* Note: the red inset bar on cards with conflicts was removed at request — the inline
"Interacts with other supplements in your plan" block already communicates the caution,
so the outer accent is redundant and reads as visual noise. */
.supp-card-has-conflict{box-shadow:none}
.supp-card-tag.sct-warn{background:#FEF3C7;color:#92400E}
.supp-card-tag.sct-danger{background:#FEE2E2;color:#991B1B;font-weight:600}
.supp-card-conflicts{margin:10px 0 4px;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid #FECACA;border-radius:8px;background:#FEF9F9}
.supp-card-conflicts-hdr{font-size:11px;font-weight:600;color:#991B1B;margin-bottom:3px;letter-spacing:.01em;display:flex;align-items:center;gap:6px;text-transform:uppercase}
.supp-card-conflicts-hdr::before{content:"\26A0";font-size:13px;color:#DC2626;line-height:1}
.supp-card-conflict-row{font-size:11px;padding:5px 8px;border-radius:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;line-height:1.45}
.supp-card-conflict-avoid{background:#FEF2F2;border-left:3px solid #DC2626;color:#7F1D1D}
.supp-card-conflict-caution{background:#FFFBEB;border-left:3px solid #F59E0B;color:#78350F}
.supp-card-conflict-sev{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;background:#DC2626;color:#fff;letter-spacing:.04em;text-transform:uppercase}
.supp-card-conflict-caution .supp-card-conflict-sev{background:#F59E0B}
.supp-card-conflict-reason{font-weight:500}
.supp-card-conflict-with{opacity:.85}
/* Phase 2 / Item #2 — drug-supplement conflict block (parallel to supplement-supplement) */
.supp-card-drug-conflicts{border-color:#DDD6FE;background:#F5F3FF}
.supp-card-drug-conflicts .supp-card-conflicts-hdr{color:#5B21B6}
.supp-card-drug-conflicts .supp-card-conflicts-hdr::before{color:#7C3AED}
.supp-card-drug-avoid{background:#FEF2F2;border-left:3px solid #DC2626;color:#7F1D1D}
.supp-card-drug-caution{background:#FFFBEB;border-left:3px solid #F59E0B;color:#78350F}
.supp-card-drug-extra{background:#ECFDF5;border-left:3px solid #10B981;color:#065F46}
.supp-card-drug-avoid .supp-card-conflict-sev{background:#DC2626}
.supp-card-drug-caution .supp-card-conflict-sev{background:#F59E0B}
.supp-card-drug-extra .supp-card-conflict-sev{background:#10B981}
.supp-card-drug-disclaimer{margin-top:6px;font-size:9.5px;color:var(--color-text-tertiary);font-style:italic;letter-spacing:.01em;line-height:1.45}
/* Inline-chip layout for in-card stack conflicts. Replaces the old nested .supp-card-conflicts box. */
.sc-conflicts{margin:10px 0 6px;display:flex;flex-direction:column;gap:5px;padding:8px 0;border-top:0.5px solid var(--color-border-tertiary);border-bottom:0.5px solid var(--color-border-tertiary)}
.sc-conflict-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;line-height:1.55}
.sc-conflict-lead{font-weight:600;font-size:11px;letter-spacing:.005em}
.sc-conflict-lead-caution{color:#B91C1C}
.sc-conflict-lead-avoid{color:#7F1D1D}
.sc-conflict-chip{display:inline-flex;align-items:center;font-size:11px;padding:2px 8px;border-radius:11px;font-weight:500;border:0.5px solid;line-height:1.4}
.sc-conflict-chip-caution{background:#FEF2F2;border-color:#FCA5A5;color:#991B1B}
.sc-conflict-chip-avoid{background:#DC2626;border-color:#DC2626;color:#FFFFFF}
.sc-conflict-why{color:var(--color-text-secondary);font-size:11px;font-style:italic;margin-left:2px}
/* Phase 3 / FU-B — drug-supp section in the top-of-plan stack alert */
.supp-alert-section-divider{margin:12px -12px 6px;padding:6px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5B21B6;background:rgba(31,122,107,.05);border-top:1px solid rgba(31,122,107,.15);border-bottom:1px solid rgba(31,122,107,.15)}
.supp-alert-drug-avoid{background:#FEF2F2;border-left:3px solid #DC2626}
.supp-alert-drug-caution{background:#FFFBEB;border-left:3px solid #F59E0B}
.supp-alert-drug-extra{background:#ECFDF5;border-left:3px solid #10B981}
.supp-card-tag.sct-pair{background:#D1FAE5;color:#065F46;font-weight:600}
.pri-sec{margin-bottom:1.5rem}
.pri-hdr{display:flex;align-items:center;gap:8px;margin-bottom:.7rem;padding-bottom:6px;border-bottom:0.5px solid var(--color-border-tertiary)}
.pri-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pri-ttl{font-size:13px;font-weight:500;color:var(--color-text-primary)}.pri-cnt{font-size:12px;color:var(--color-text-secondary);margin-left:auto}
.rc{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:10px;padding:.8rem .95rem;margin-bottom:7px}
.rc.has-warn{border-color:#F9A825}
.rc-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.rc-name{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.rc-why{font-size:12px;color:var(--color-text-secondary);line-height:1.5;margin-bottom:7px}
.rc-warn{font-size:11px;color:var(--color-warn-text);background:var(--color-warn-bg);border:0.5px solid var(--color-warn-border);border-radius:6px;padding:5px 8px;margin-bottom:7px;line-height:1.5}
.rc-dose{font-size:11px;padding:3px 8px;border-radius:5px;background:var(--color-background-secondary);color:var(--color-text-secondary);border:0.5px solid var(--color-border-tertiary);display:inline-block}
.rc-dose b{color:var(--color-text-primary);font-weight:500}
.disc{font-size:11px;color:var(--color-text-tertiary);line-height:1.6;padding:9px 12px;border:0.5px solid var(--color-border-tertiary);border-radius:8px;margin-bottom:1rem}
.sleep-sec{margin-bottom:1.5rem}
.sleep-hdr{display:flex;align-items:center;gap:8px;margin-bottom:.85rem;padding-bottom:6px;border-bottom:0.5px solid var(--color-border-tertiary)}
.sleep-ttl{font-size:13px;font-weight:500;color:var(--color-text-primary)}.sleep-sub{font-size:12px;color:var(--color-text-secondary);margin-left:auto}
.sleep-timeline{position:relative;padding-left:28px}
.sleep-timeline::before{content:'';position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--color-border-tertiary)}
.sleep-item{position:relative;margin-bottom:10px}.sleep-item:last-child{margin-bottom:0}
.sleep-dot{position:absolute;left:-22px;top:10px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--slp);background:var(--slpbg)}
.sleep-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:10px;padding:.75rem .9rem}
.sleep-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.sleep-nw{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sleep-name{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.sleep-timing{font-size:11px;font-weight:500;padding:3px 8px;border-radius:20px;background:var(--slpbg);color:var(--slptx);white-space:nowrap}
.sleep-note{font-size:12px;color:var(--color-text-secondary);line-height:1.45;margin-bottom:6px}
.sleep-pills{display:flex;gap:5px;flex-wrap:wrap}
.sleep-pill{font-size:11px;padding:3px 7px;border-radius:5px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary)}
.sleep-pill b{color:var(--color-text-primary);font-weight:500}
.sleep-opt{font-size:11px;padding:3px 7px;border-radius:5px;background:var(--t3bg);color:var(--t3tx)}
/* DESKTOP filter chips — top:90px must match #main-sticky in index.css.
Earlier this said top:68px but #main-sticky won via id-specificity, so
the actual sticky position was 90px. Aligning them here removes the
confusion. The 90px value sits below the .beta-bar (32px) + .site-nav
(~58px content + border). If you change either height, update this. */
.sticky-bar{position:sticky;top:90px;z-index:12;padding:.75rem 0 .5rem;margin:0 -1rem;padding-left:1rem;padding-right:1rem;background:var(--color-background-secondary);border-bottom:1px solid var(--color-border-tertiary);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.sfbar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:0;padding:8px 0}
.sfbtn{padding:6px 14px;border-radius:8px;border:0.5px solid var(--color-border-secondary);font-size:12px;font-weight:500;cursor:pointer;background:var(--color-background-secondary);color:var(--color-text-secondary);transition:all .15s}.sfbtn:hover:not([class*=on-]){background:var(--color-background-primary);border-color:var(--color-border-primary)}
.sfbtn.on-all{background:var(--color-text-primary);color:var(--color-background-primary);border-color:transparent}
.sfbtn.on-az{background:#2d2d2d;color:#fff;border-color:transparent}.sfbtn.on-t1{background:linear-gradient(135deg,var(--t1c),#0F766E);color:#fff;border-color:transparent}
.sfbtn.on-t2{background:linear-gradient(135deg,var(--t2c),#3B5FC0);color:#fff;border-color:transparent}
.sfbtn.on-t3{background:linear-gradient(135deg,var(--color-brand),var(--color-brand-hover));color:#fff;border-color:transparent}
.sfbtn.on-t4{background:linear-gradient(135deg,var(--t4c),#991B1B);color:#fff;border-color:transparent}
.sbox{padding:7px 12px;border-radius:20px;border:0.5px solid var(--color-border-secondary);font-size:13px;background:var(--color-background-secondary);color:var(--color-text-primary);outline:none;width:100%;margin-bottom:.85rem;font-family:inherit}.sbox::placeholder{color:var(--color-text-tertiary)}
.tier-sec{margin-bottom:1.25rem}
/* Load-more — V4 progress-aware row (2026-04-29) */
.tier-more{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border:1px solid var(--color-border-tertiary);border-radius:10px;background:var(--color-background-primary);cursor:pointer;width:100%;margin-top:9px;transition:all .15s;font-family:inherit;text-align:left;color:inherit}
.tier-more:hover{border-color:var(--color-brand)}
.tier-more:disabled{opacity:.6;cursor:default}
.tier-more-l{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.tier-more-cta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--color-text-primary);transition:color .15s}
.tier-more:hover .tier-more-cta{color:var(--color-brand)}
.tier-more-progress{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--color-text-tertiary)}
.tier-more-progress b{font-weight:600;color:var(--color-text-secondary);font-variant-numeric:tabular-nums}
.tier-more-bar{display:inline-block;flex:1;max-width:140px;height:3px;background:var(--color-border-tertiary);border-radius:2px;overflow:hidden}
.tier-more-fill{display:block;height:100%;background:var(--color-brand);border-radius:2px;transition:width .35s ease}
.tier-more-arr{font-size:18px;color:var(--color-text-tertiary);transition:all .15s;flex-shrink:0;line-height:1}
.tier-more:hover .tier-more-arr{color:var(--color-brand);transform:translateX(2px)}
.tier-more-spin{width:13px;height:13px;border:2px solid var(--color-border-tertiary);border-top-color:var(--color-brand);border-radius:50%;animation:spin .6s linear infinite;display:none;flex-shrink:0}
.tier-more.loading .tier-more-spin{display:inline-block}
.tier-more.loading .tier-more-text{opacity:.55}
.sc.tier-hidden{display:none}.sc.tier-visible{display:flex}
.tier-hdr{display:flex;align-items:stretch;margin-bottom:.75rem;border-radius:12px;border:1px solid var(--color-border-tertiary);overflow:hidden;background:var(--color-background-primary)}
.tier-hdr-side{width:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;flex-shrink:0;color:#fff}
.tier-hdr-t1 .tier-hdr-side{background:linear-gradient(180deg,var(--t1c),#0F766E)}
.tier-hdr-t2 .tier-hdr-side{background:linear-gradient(180deg,var(--t2c),#3B5FC0)}
.tier-hdr-az .tier-hdr-side{background:linear-gradient(180deg,#2d2d2d,#1a1a1a)}
.tier-hdr-top25 .tier-hdr-side{background:linear-gradient(180deg,var(--t1c),var(--t2c))}
.tier-hdr-t3 .tier-hdr-side{background:linear-gradient(180deg,var(--t3c),#A16207)}
.tier-hdr-t4 .tier-hdr-side{background:linear-gradient(180deg,var(--t4c),#991B1B)}
.tier-hdr-num{font-size:22px;font-weight:700;line-height:1}
.tier-hdr-sublabel{font-size:7px;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-top:2px}
.tier-hdr-content{padding:10px 16px;flex:1;display:flex;align-items:center}
.tier-ttl{font-size:14px;font-weight:600;color:var(--color-text-primary)}.tier-cnt{font-size:11px;color:var(--color-text-tertiary);font-weight:500}
.tier-desc{font-size:11px;color:var(--color-text-tertiary);line-height:1.5;margin-top:1px}
.scards{display:grid;grid-template-columns:1fr;gap:8px}
/* ── List card v2 (2026-04-29) — minimal click-through to detail modal ── */
.sc.t1{--lc-accent:#0D9488;--lc-tint:rgba(13,148,136,.10);--lc-tint-bd:rgba(13,148,136,.22)}
.sc.t2{--lc-accent:#4B7BE5;--lc-tint:rgba(75,123,229,.10);--lc-tint-bd:rgba(75,123,229,.22)}
.sc.t3{--lc-accent:#CA8A04;--lc-tint:rgba(202,138,4,.10);--lc-tint-bd:rgba(202,138,4,.22)}
.sc.t4{--lc-accent:#B91C1C;--lc-tint:rgba(185,28,28,.08);--lc-tint-bd:rgba(185,28,28,.22)}
.sc{text-decoration:none;color:inherit}
.sc:hover{border-color:var(--lc-accent,var(--color-brand))}
.lc-score{flex:0 0 64px;display:flex;align-items:center;justify-content:center;background:var(--lc-tint);color:var(--lc-accent);padding:10px 6px;line-height:1;border-right:1px solid var(--lc-tint-bd)}
.lc-score-num{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.lc-mid{flex:1;padding:11px 16px;display:flex;flex-direction:column;gap:5px;min-width:0}
.lc-row1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lc-name{font-size:14px;font-weight:600;color:var(--lc-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-cats{font-size:11px;color:var(--color-text-tertiary);flex-shrink:0;font-weight:500}
.lc-row2{display:flex;align-items:flex-start;gap:14px;font-size:11.5px;color:var(--color-text-secondary);min-width:0}
.lc-desc{flex:1;min-width:0;font-size:12px;color:var(--color-text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-cau{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#B91C1C;font-weight:600;flex-shrink:0;white-space:nowrap;line-height:1.5}
.lc-arr{flex:0 0 24px;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);transition:color .15s,transform .15s;font-size:18px;align-self:center}
.sc:hover .lc-arr{color:var(--lc-accent);transform:translateX(2px)}
@media(max-width:540px){
.lc-row1{flex-direction:column;align-items:flex-start;gap:2px}
.lc-cats{font-size:10.5px}
.lc-row2{flex-direction:column;gap:4px;align-items:flex-start}
.lc-cau{order:-1;line-height:1.4}
.lc-mid{padding:10px 12px}
.lc-score{flex:0 0 56px}
}
.empty{text-align:center;padding:2rem;color:var(--color-text-tertiary);font-size:13px}
.pop-head{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(31,122,107,.06),rgba(31,122,107,.02));border:1px solid rgba(31,122,107,.14);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.pop-head-ic{width:40px;height:40px;border-radius:10px;background:var(--color-brand);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(31,122,107,.25)}
.pop-head-mid{flex:1;min-width:0}
.pop-head-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand);margin-bottom:2px}
.pop-head-t{font-size:15px;font-weight:600;color:var(--color-text-primary);margin-bottom:4px;line-height:1.3}
.pop-head-t b{color:var(--color-brand);font-weight:600}
.pop-head-m{font-size:11.5px;color:var(--color-text-tertiary);line-height:1.55}
.sum-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:1rem}
.sum-chip{font-size:12px;padding:3px 10px;border-radius:20px;font-weight:500}
.cp{font-size:11px;background:rgba(0,0,0,.08);padding:1px 7px;border-radius:10px;margin-left:4px}
.footer{text-align:center;padding:1.5rem 0 1rem;font-size:11px;color:var(--color-text-tertiary);border-top:1px solid var(--color-border-tertiary);margin-top:1.5rem;line-height:1.8}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--color-text-secondary);text-decoration:underline;cursor:pointer;letter-spacing:inherit}
.link-btn:hover{color:var(--color-brand)}
.link-btn:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:2px}
.early-access{border:0.5px solid var(--color-border-tertiary);border-radius:12px;background:var(--color-background-primary);padding:2rem 1.5rem;margin-top:2rem;text-align:center;position:relative;overflow:hidden}
.early-access::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--t1c),var(--t2c),var(--color-brand))}
.ea-badge{font-size:10px;font-weight:600;padding:3px 10px;border-radius:10px;background:var(--color-brand);color:#fff;text-transform:uppercase;letter-spacing:.06em;display:inline-block;margin-bottom:10px}
.ea-title{font-size:20px;font-weight:600;color:var(--color-text-primary);letter-spacing:-.3px;margin-bottom:6px}
.ea-sub{font-size:13px;color:var(--color-text-secondary);line-height:1.6;max-width:600px;margin:0 auto 1.25rem}
.ea-features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:1.5rem}
.ea-feat{font-size:11px;padding:5px 12px;border-radius:20px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary);display:flex;align-items:center;gap:5px}
.ea-feat-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ea-form{display:flex;gap:8px;max-width:420px;margin:0 auto}
@media(max-width:500px){.ea-form{flex-direction:column}}
.ea-input{flex:1;padding:10px 14px;border-radius:8px;border:0.5px solid var(--color-border-secondary);background:var(--color-background-secondary);color:var(--color-text-primary);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s}.ea-input:focus{border-color:var(--color-border-primary)}.ea-input::placeholder{color:var(--color-text-tertiary)}
.ea-btn{padding:10px 20px;border-radius:8px;border:none;background:var(--color-brand);color:#fff;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .15s;white-space:nowrap}.ea-btn:hover{opacity:.9}.ea-btn:active{opacity:.8}
.ea-note{font-size:10px;color:var(--color-text-tertiary);margin-top:10px}
.ea-success{display:none;font-size:14px;font-weight:500;color:var(--t1c);margin-top:10px}
.ea-coming{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:1.25rem;padding-top:1rem;border-top:0.5px solid var(--color-border-tertiary)}
.ea-coming-item{font-size:10px;padding:4px 10px;border-radius:20px;border:0.5px dashed var(--color-border-secondary);color:var(--color-text-tertiary)}
.meth-section{border:0.5px solid var(--color-border-tertiary);border-radius:12px;background:var(--color-background-primary);margin-top:2rem;overflow:hidden}
.meth-header{padding:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.meth-header:hover{background:var(--color-background-secondary)}
.meth-title{font-size:16px;font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:8px}
.meth-subtitle{font-size:12px;color:var(--color-text-secondary);margin-top:3px}
.meth-body{display:none;padding:0 1.25rem 1.25rem;border-top:0.5px solid var(--color-border-tertiary)}.meth-body.open{display:block}
.meth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin-top:1rem}
@media(max-width:700px){.meth-grid{grid-template-columns:1fr}}
.meth-card{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:10px;padding:1rem}
.meth-card-icon{margin-bottom:8px;opacity:.5}
.meth-card-icon svg{width:22px;height:22px}
.meth-card-title{font-size:13px;font-weight:600;color:var(--color-text-primary);margin-bottom:4px}
.meth-card-status{font-size:10px;font-weight:500;padding:2px 7px;border-radius:10px;display:inline-block;margin-bottom:6px}
.meth-status-done{background:var(--t1bg);color:var(--t1tx)}
.meth-status-progress{background:var(--t2bg);color:var(--t2tx)}
.meth-status-planned{background:var(--t3bg);color:var(--t3tx)}
.meth-card-text{font-size:12px;color:var(--color-text-secondary);line-height:1.6}
.meth-card-text ul{margin:.4rem 0 0 1rem;padding:0}
.meth-card-text li{margin-bottom:3px}
.meth-changelog{margin-top:1rem;padding:1rem;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:10px}
.meth-changelog-title{font-size:12px;font-weight:600;color:var(--color-text-primary);margin-bottom:.5rem}
.meth-log-item{font-size:11px;color:var(--color-text-secondary);line-height:1.6;padding:3px 0;border-bottom:0.5px solid var(--color-border-tertiary)}
.meth-log-item:last-child{border-bottom:none}
.meth-log-date{font-weight:500;color:var(--color-text-tertiary);margin-right:6px}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:1rem;margin-bottom:1.25rem}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr}}
.intro-card{border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.25rem 1.25rem 1.1rem;background:var(--color-background-primary)}
.intro-title{font-size:15px;font-weight:600;color:var(--color-text-primary);margin-bottom:.6rem;display:flex;align-items:center;gap:8px}
.intro-np{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--t1bg);color:var(--t1tx);text-transform:uppercase;letter-spacing:.06em}
.intro-text{font-size:12.5px;color:var(--color-text-secondary);line-height:1.7}
.intro-text p{margin-bottom:.6rem}
.intro-text p:last-child{margin-bottom:0}
.intro-points{list-style:none;padding:0;margin:.6rem 0 0}
.intro-points li{font-size:12px;color:var(--color-text-secondary);line-height:1.6;padding:4px 0 4px 20px;position:relative}
.intro-points li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--t1c);opacity:.7}
.ev-sidebar{border:0.5px solid var(--color-border-tertiary);border-radius:12px;padding:1.25rem;background:var(--color-background-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* ── Utility classes extracted from inline styles ── */
.beta-bar{background:var(--color-brand);color:rgba(255,255,255,.75);text-align:center;padding:0 1rem;font-size:9px;font-weight:500;letter-spacing:.02em;margin:0 -1rem;width:calc(100% + 2rem);position:sticky;top:0;z-index:20;height:32px;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1}
.beta-bar-badge{background:rgba(255,255,255,.2);padding:1px 7px;border-radius:8px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-right:6px}
.beta-bar-pulse{width:7px;height:7px;border-radius:50%;background:#6EE7B7;flex:0 0 auto;box-shadow:0 0 6px rgba(110,231,183,.9),0 0 0 0 rgba(110,231,183,.7);animation:ss-beta-pulse 1.8s ease-out infinite}
.beta-bar-num{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.01em}
.beta-bar-sep{padding:0 2px}
@keyframes ss-beta-pulse{0%{box-shadow:0 0 6px rgba(110,231,183,.95),0 0 0 0 rgba(110,231,183,.7)}70%{box-shadow:0 0 6px rgba(110,231,183,.95),0 0 0 7px rgba(110,231,183,0)}100%{box-shadow:0 0 6px rgba(110,231,183,.95),0 0 0 0 rgba(110,231,183,0)}}
@media(prefers-reduced-motion:reduce){.beta-bar-pulse{animation:none;box-shadow:0 0 6px rgba(110,231,183,.95)}}
@media(max-width:560px){.beta-bar{font-size:10.5px;gap:6px}.beta-bar-tag{display:none}.beta-bar-sep{display:none}}
.page-header--center{text-align:center;border-bottom:none}
.page-logo-label{font-size:13.5px;font-weight:800;color:var(--color-brand);letter-spacing:.07em;text-transform:uppercase;margin-bottom:16px}
.page-logo-label span{font-weight:500;opacity:.4;letter-spacing:.04em}
.page-subtitle{margin-top:14px;font-size:17px;color:var(--color-text-tertiary);line-height:1.55;max-width:620px;margin-left:auto;margin-right:auto;font-weight:400}
@media(max-width:600px){.page-subtitle{font-size:15px;max-width:100%}}
.stat-row{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin-bottom:.85rem;text-align:center}
.stat-col{flex:1;min-width:160px;padding:.5rem 1rem}
.stat-col--bordered{border-right:0.5px solid var(--color-border-tertiary)}
.stat-number{font-size:36px}
.stat-sub{font-size:10px;color:var(--color-text-tertiary);margin-top:2px}
.stat-pulse{justify-content:center;margin-top:4px}
.mission-section{border:0.5px solid var(--color-border-tertiary);border-radius:12px;background:var(--color-background-primary);padding:1.5rem;margin-top:2rem}
.mission-title{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-bottom:.6rem;display:flex;align-items:center;gap:8px}
.mission-text{font-size:13px;color:var(--color-text-secondary);line-height:1.8}
.mission-text p{margin-bottom:.75rem}
.mission-text p:last-child{margin-bottom:0}
.mission-more{display:none;font-size:13px;color:var(--color-text-secondary);line-height:1.8;margin-top:.75rem}
.mission-more p{margin-bottom:.75rem}
.mission-more p:last-child{margin-bottom:0}
.mission-toggle{border:none;background:none;color:var(--color-text-tertiary);font-size:11px;cursor:pointer;padding:8px 0 0;font-family:inherit}
.tier-explain{display:flex;gap:12px;align-items:flex-start}
.tier-explain-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tier-explain-icon span{font-size:11px;font-weight:700;color:#fff}
.tier-explain-title{font-size:12px;font-weight:600;color:var(--color-text-primary)}
.tier-explain-desc{font-size:11px;color:var(--color-text-secondary);line-height:1.5;margin-top:2px}
.tier-explain-grid{display:flex;flex-direction:column;gap:10px}
.tier-explain-wrap{margin-top:1rem;padding:1rem;background:var(--color-background-secondary);border:1px solid var(--color-border-tertiary);border-radius:10px}
.tier-explain-heading{font-size:13px;font-weight:600;color:var(--color-text-primary);margin-bottom:.75rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.noscript-msg{text-align:center;padding:3rem 1rem;font-size:16px;color:var(--color-text-secondary);line-height:1.6}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:500px){.profile-grid{grid-template-columns:1fr}}
@media(max-width:600px){
#v-input [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
#v-input [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}
.sched-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:600px){.sched-grid{grid-template-columns:1fr}}
/* ── Letter anchors for A-Z view ── */
.az-letter-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:1rem;position:sticky;top:90px;z-index:9;background:var(--color-background-secondary);padding:8px 0}
.az-letter-btn{width:32px;height:32px;border-radius:8px;border:0.5px solid var(--color-border-secondary);background:var(--color-background-primary);color:var(--color-text-secondary);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.az-letter-btn:hover{background:var(--color-text-primary);color:var(--color-background-primary);border-color:transparent}
.az-letter-btn.active{background:var(--color-text-primary);color:var(--color-background-primary);border-color:transparent}
.az-letter-btn.disabled{opacity:.3;cursor:default;pointer-events:none}
.az-letter-heading{font-size:20px;font-weight:700;color:var(--color-text-primary);padding:1rem 0 .5rem;border-bottom:1px solid var(--color-border-tertiary);margin-bottom:.5rem;scroll-margin-top:140px}
/* ── Site navigation ── */
.site-nav{background:var(--color-background-secondary);border-bottom:none;position:sticky;top:32px;z-index:15;margin:0 -1rem;padding:18px 1rem 12px;width:calc(100% + 2rem);box-shadow:none}
/* Grid: brand-left | tabs-centered | empty-right.
Two equal `1fr` columns on either side keep the centered tabs perfectly
centered relative to the viewport. No search bar in this layout.
The empty third column mirrors the brand column's width so tabs stay
visually centered regardless of how long the wordmark gets. */
/* min-height pinned to the brand-svg height (22px) so the nav is the same
height whether or not the page renders the .site-nav-brand element.
Without this, brand-less pages (index, discover, landing) render the nav
2px shorter than detail pages, producing a tiny vertical shift on each
navigation. */
.site-nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;min-height:22px;max-width:1200px;margin:0 auto;padding:0 20px;gap:16px}
/* Brand on the left — SS shield + wordmark, links to home */
.site-nav-brand{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--color-text-primary);transition:opacity .15s ease}
.site-nav-brand:hover{opacity:.78}
.site-nav-brand svg{width:22px;height:22px;color:var(--color-brand);flex-shrink:0}
.site-nav-brand-name{font-size:14.5px;font-weight:700;letter-spacing:-.3px;line-height:1;color:var(--color-text-primary)}
.site-nav-brand-name span{color:var(--color-text-tertiary);font-weight:500}
/* Tabs — sit inside one rounded pill; active tab is a filled pill */
.site-nav-tabs{grid-column:2;justify-self:center;display:inline-flex;gap:0;background:#fff;border:1px solid var(--color-border-tertiary);border-radius:999px;padding:5px}
/* Search bar removed (the form was deleted from every page). These
selectors stay as safety nets in case any leftover markup slips in. */
.nav-search,.nav-ac{display:none !important}
/* Mobile: drop the brand to give tabs the full width, and let the tabs
horizontal-scroll if the device is extremely narrow. */
@media(max-width:600px){
.site-nav{height:auto}
.site-nav-brand{display:none}
.site-nav-inner{grid-template-columns:1fr;padding:8px 16px;height:auto;gap:0}
.site-nav-tabs{grid-column:1;justify-self:center;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.site-nav-tabs::-webkit-scrollbar{display:none}
}
/* Universal autocomplete dropdown under the nav search */
.nav-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--color-background-primary);border:1px solid var(--color-border-secondary);border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06);max-height:480px;overflow-y:auto;display:none;z-index:60}
.nav-ac.open{display:block}
.nav-ac-group{padding:6px 0}
.nav-ac-group + .nav-ac-group{border-top:1px solid var(--color-border-tertiary)}
.nav-ac-grp-h{font-size:9.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--color-text-tertiary);padding:6px 14px 4px}
.nav-ac-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 14px;cursor:pointer;text-decoration:none;color:var(--color-text-primary);font-size:13px;line-height:1.3}
.nav-ac-item:hover,.nav-ac-item.focus{background:rgba(31,122,107,.06)}
.nav-ac-name{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.nav-ac-name > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.nav-ac-tag{font-size:10.5px;color:var(--color-text-tertiary);padding:2px 7px;border-radius:999px;background:var(--color-background-secondary);border:1px solid var(--color-border-tertiary);flex-shrink:0;white-space:nowrap}
.nav-ac-tier{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0}
.nav-ac-tier-t1{background:var(--t1bg);color:var(--t1tx)}
.nav-ac-tier-t2{background:var(--t2bg);color:var(--t2tx)}
.nav-ac-tier-t3{background:var(--t3bg);color:var(--t3tx)}
.nav-ac-tier-t4{background:var(--t4bg);color:var(--t4tx)}
.nav-ac-empty{padding:18px 14px;font-size:13px;color:var(--color-text-tertiary);text-align:center}
.nav-ac-foot{display:block;padding:10px 14px;font-size:12px;color:var(--color-text-secondary);background:var(--color-background-secondary);border-top:1px solid var(--color-border-tertiary);border-radius:0 0 10px 10px;text-decoration:none}
.nav-ac-foot:hover{color:var(--color-brand);background:rgba(31,122,107,.06)}
.nav-ac-foot kbd{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10px;padding:1px 5px;border-radius:3px;background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);color:var(--color-text-primary)}
/* Tabs are anchors on every page. Hard-reset font + box so they render
identically regardless of element type. Pill-shaped, with a filled
purple pill for the active tab — the active state never shifts size
because every tab is the same shape. */
.site-nav-tab,
button.site-nav-tab,
a.site-nav-tab{
font: 600 11px/1 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
display:inline-flex;align-items:center;justify-content:center;
height:20px;padding:0 18px;box-sizing:border-box;margin:0;
color:var(--color-text-secondary);
border:0;border-radius:999px;
background:none;cursor:pointer;text-decoration:none;
-webkit-appearance:none;appearance:none;
-webkit-text-size-adjust:100%;text-size-adjust:100%;
outline:none;
transition:color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.site-nav-tab:hover{color:var(--color-text-primary);background:rgba(31,122,107,.06)}
.site-nav-tab.active{background:var(--color-brand);color:#fff;box-shadow:0 2px 6px rgba(31,122,107,.20)}
.site-nav-tab.active:hover{background:var(--color-brand-hover);color:#fff}
.site-nav-tab:focus-visible{outline:2px solid var(--color-brand-soft);outline-offset:2px}
/* Icon variant — used for the Profile tab so it reads as "my account" rather
than text. Sized to match the text tabs exactly (16px row height) so the
pill row stays uniform — no bulging, no off-center alignment. The circle
reads as a subtle avatar slot. */
.site-nav-tab.site-nav-tab-icon{
padding:0;width:20px;height:20px;border-radius:50%;
background:rgba(31,122,107,.08);
color:#1F7A6B;
margin-left:10px;
}
.site-nav-tab.site-nav-tab-icon:hover{
background:rgba(31,122,107,.16);
color:var(--color-brand);
}
.site-nav-tab.site-nav-tab-icon.active{
background:var(--color-brand);
color:#fff;
box-shadow:0 2px 6px rgba(31,122,107,.25);
}
.site-nav-tab.site-nav-tab-icon.active:hover{background:var(--color-brand-hover);color:#fff}
.site-nav-tab.site-nav-tab-icon svg{display:block}
/* ===========================================================
MOBILE STICKY HEADER — single source of truth (≤600px)
===========================================================
Stack (top to bottom, all position:fixed, all opaque):
0 ─ 22px .beta-bar (z:31) green live-count strip
22 ─ 70px .site-nav (z:30) tabs
70 ─ 114px #ix-sticky-bar (z:29) search field
114 ─ 158px #main-sticky (z:28) filter chips (38px chips)
158+ body content starts (body padding-top:158px)
Why fixed (not sticky):
- .sticky-bar / #main-sticky lives deep inside .container in the
DOM. Sticky elements are constrained to their containing block,
which made them unreliable as siblings scrolled past — content
could leak through during overflow-clip glitches on iOS Safari.
- Three independent fixed layers with explicit tops eliminates any
chance of a gap where content can show through.
Why !important:
- Both index.css and styles.css declare these elements; index.css
wins via load order + #id specificity. !important here pins the
layout to a single source of truth (this block).
- JS in index.js writes inline `style.top` to filterBar in some
flows; without !important an inline style of e.g. '48px' would
override our '92px' and re-introduce the gap.
If you need to change a height, update body padding-top to match
nav-h + search-h + filter-h. Keep them in sync.
=========================================================== */
@media(max-width:600px){
/* === Bar 0: green live-count strip ===
Per user request, restored on mobile. Compact 22px tall: only
shows the pulse dot + the live count. The 'tag' chips
('Actively refining', 'Updated recently') are hidden on
≤560px by an existing rule and remain hidden — they don't fit. */
.beta-bar{
display:flex !important;
position:fixed !important;
top:0 !important;
left:0 !important; right:0 !important;
width:100% !important;
margin:0 !important;
height:22px !important;
padding:0 12px !important;
font-size:10px !important;
background:var(--color-brand) !important;
color:rgba(255,255,255,.85) !important;
z-index:31 !important;
box-shadow:none !important;
}
/* === Bar 1: nav === */
/* No box-shadow / border-bottom on the nav: the cream nav strip
blends into the cream page background, and any 1px line reads as
a stray hairline divider at the top of the page (user feedback). */
.site-nav{
position:fixed; top:22px; left:0; right:0; width:100%;
margin:0; padding:6px 12px; height:48px;
background:var(--color-background-secondary);
z-index:30;
box-shadow:none;
border-bottom:none;
overflow:hidden;
}
.site-nav .site-nav-inner{
width:100%; height:100%; position:relative; background:transparent;
}
/* === Bar 2: sticky search field === */
#ix-sticky-bar{
display:block !important;
position:fixed !important;
top:70px !important; /* beta 22 + nav 48 */
left:0; right:0; width:100%;
margin:0;
padding:6px 14px;
height:44px;
box-sizing:border-box;
background:var(--color-background-secondary) !important;
border-bottom:none;
z-index:29 !important;
/* Override the desktop hide-by-default transform/opacity. */
transform:none !important;
opacity:1 !important;
pointer-events:auto !important;
/* Override desktop's transition that fades it in/out — on mobile
it's permanent, no need for a transition cost. */
transition:none !important;
}
/* Tighten the inner search field to fill the 44px bar nicely. */
#ix-sticky-bar .ix-search{ height:32px; min-height:0; }
/* Hide the duplicate hero search input on mobile — the sticky one
is always visible right below the nav. */
.ix-hero #ix-hero-form{ display:none; }
/* === Bar 3: filter chips === */
/* Use both selectors and !important so we beat #main-sticky's id
specificity and any inline `style.top` written by index.js. */
.sticky-bar,
#main-sticky{
position:fixed !important;
top:114px !important; /* beta 22 + nav 48 + search 44 */
left:0 !important; right:0 !important;
width:100% !important;
margin:0 !important;
padding:6px 14px !important; /* tighter than before; see chip below */
box-sizing:border-box;
background:var(--color-background-secondary) !important;
border-bottom:none;
box-shadow:none;
z-index:28 !important;
height:44px; /* fixed bar height: 6+32+6 */
}
/* === Body push-down — tab-aware ===
Non-index pages: 70px (beta 22 + nav 48). Other tabs on
index.html match this default.
Supplements tab only: 158px (beta 22 + nav 48 + search 44 + filter 44).
The class is set on from the inline head script for
first-paint correctness, and mirrored to for selectors
elsewhere that key on body.tab-*. */
body{ padding-top:70px !important; }
html.tab-supplements body,
body.tab-supplements{ padding-top:158px !important; }
/* Belt-and-suspenders: explicitly hide the search/filter bars on
non-supplements tabs. Their parent #supplements-view is already
display:none on those tabs so this is redundant on a healthy
load, but it's cheap insurance against any flash-of-bars during
a tab transition. */
html:not(.tab-supplements) body #ix-sticky-bar,
html:not(.tab-supplements) body #main-sticky,
html:not(.tab-supplements) body .sticky-bar,
body:not(.tab-supplements) #ix-sticky-bar,
body:not(.tab-supplements) #main-sticky,
body:not(.tab-supplements) .sticky-bar{
display:none !important;
}
/* === A-Z bar sits below the chip bar (not part of fixed stack) === */
.az-letter-bar{ top:158px !important; z-index:27; }
}
/* ============================================================
MOBILE POLISH PASS (≤600px) — supplements to the audit findings
============================================================ */
@media(max-width:600px){
/* (#1) Article-card vertical category label was 5.5px — illegible.
Bump to 9px and lighten letter-spacing so the rotated label still
reads in a 64px side panel. */
.article-side-label{ font-size:9px !important; letter-spacing:.06em !important; }
/* (#2) Filter chip dropdowns — user wants them shorter. 32px tall
keeps them inside the 44px-tall fixed filter bar (with 6px
padding above/below). Touch target is below Apple's HIG min but
the chips are wide and well-spaced so mis-taps are rare. */
.cdd-btn{ min-height:32px !important; height:32px !important; padding:6px 12px !important; font-size:13px !important; line-height:1.1 !important; }
.sfbar{ gap:8px !important; }
/* (#3) A-Z letter buttons — 36px with at-least-8px gap so the row
is reliably tappable. */
.az-letter-btn{ width:36px !important; height:36px !important; }
.az-letter-bar{ gap:8px !important; }
/* (#5) Articles hero was 460px tall on mobile — eats the fold.
Pull it down to ~340px so the article list shows above the fold. */
.hero{ min-height:340px !important; }
.hero-slide{ inset:32px 16px 80px 16px !important; }
/* (#7) Footer contributor form input/button — 44px target. */
.site-footer-contrib-form input,
.site-footer-contrib-form button{ min-height:44px !important; }
}
/* ============================================================
SITE-WIDE QUALITY (all viewports)
============================================================ */
/* (#6) Anchor jumps shouldn't bury the heading under the fixed nav.
Apply scroll-margin-top to all heading + id-anchored elements so
in-page links land below the chrome. */
:where(h1,h2,h3,h4,h5,h6,[id]){ scroll-margin-top:60px; }
:where(html){ scroll-padding-top:60px; }
/* (#9) Horizontal-scroll backstop.
PREVIOUS VERSION USED overflow-x:hidden — that breaks position:sticky
on every descendant because the browser treats the unset axis as
overflow:auto, turning / into a new scroll container
that anchors sticky differently. Symptom: sticky bars detach during
scroll-up. Fixed by switching to overflow:clip (Safari 16+, Chrome 90+,
Firefox 81+) which clips overflow WITHOUT creating a scroll container,
so sticky positioning is preserved.
Also moved off — clipping on body is sufficient to catch any
width:calc(100%+2rem) bleed-out and avoids touching the root viewport
element where overflow rules have additional spec-defined side effects. */
body{ overflow-x:clip; }
/* Mobile flicker mitigations:
- Reduce backdrop-filter blur (very expensive on iOS Safari and re-rasterises every scroll frame).
- Suppress sticky :hover transforms after touch.
NOTE: previously also GPU-promoted .site-nav/.sticky-bar/.az-letter-bar
via will-change:transform + translateZ(0). That created a new
stacking context per element, which on iOS Safari let sibling page
content composite ON TOP of the bars during scroll — i.e. the
"content showing through the sticky bar" bug. Removed those
promotions; the explicit z-index ladder in the mobile sticky-header
block above is sufficient and behaves correctly. */
@media(max-width:600px){
.hero-counter,.hero-slide-badge,.hero-arrow,.cat-hero-kicker,.cat-hero-counter,.cat-hero-icon{
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
}
@media (hover: none){
.articles-card:hover,.cat-card:hover{transform:none!important;box-shadow:none!important;}
.site-nav-tab:hover{background:transparent!important;color:var(--color-text-secondary)!important;}
.site-nav-tab.active:hover{background:var(--color-brand)!important;color:#fff!important;}
}
@media(max-width:420px){.site-nav-tab{min-height:36px;padding:6px 12px;font-size:11.5px;display:inline-flex;align-items:center}.pf-sex-opt{font-size:11px}
/* The icon variant must stay a circle — override the text-tab mobile padding
and grow it to match the new 36px row height so the avatar slot doesn't
squish into a tall pill. */
.site-nav-tab.site-nav-tab-icon{width:36px;height:36px;min-height:0;padding:0;flex-shrink:0}
}
/* ── Articles section ── */
.articles-section{max-width:1200px;margin:0 auto;padding:1.5rem 1rem 1.25rem}
.articles-hdr{margin-bottom:1.5rem}
.articles-hdr-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.articles-hdr-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;padding:4px 10px;border-radius:20px;background:linear-gradient(135deg,var(--color-brand),#4B7BE5);color:#fff;text-transform:uppercase;letter-spacing:.08em}
.articles-hdr-title{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--color-text-primary);margin-bottom:8px;line-height:1.2}
.articles-hdr-sub{font-size:14px;color:var(--color-text-secondary);max-width:680px;line-height:1.6}
.articles-hdr-stats{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--color-text-tertiary);letter-spacing:.01em}
.articles-hdr-stat{display:inline-flex;align-items:center;gap:3px}
.articles-hdr-stat b{font-weight:700;color:var(--color-text-secondary)}
.articles-hdr-stat-sep{color:var(--color-border-secondary);font-weight:400}
/* Hero carousel */
.hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:2rem;height:340px;background:linear-gradient(160deg,#1F7A6B 0%,#155b50 100%);color:#F8F4ED;box-shadow:0 10px 40px rgba(15,91,80,0.18);cursor:pointer}
.hero::before{content:'';position:absolute;top:-50%;right:-15%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.1),transparent 70%);pointer-events:none;z-index:2}
.hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.06),transparent 70%);pointer-events:none;z-index:2}
.hero-pattern-bg{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .7s ease;pointer-events:none}
.hero-pattern-bg.active{opacity:1}
.hero-pattern-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-pattern-A,.hero-pattern-C,.hero-pattern-D{background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:48px 48px}
.hero-pattern-B,.hero-pattern-E{background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(115deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(115deg,#000 0%,#000 55%,transparent 100%)}
.hero-counter{position:absolute;top:26px;right:32px;z-index:4;font-family:'Mona Sans',var(--font-display,inherit);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(248,244,237,.62);font-variant-numeric:tabular-nums}
.hero-counter::before{content:'EDITOR\'S PICK · ';color:rgba(248,244,237,.78)}
.hero-slide{position:absolute;inset:36px 36px 80px 36px;z-index:3;opacity:0;transition:opacity .5s ease,transform .6s ease;transform:translateY(8px);pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
.hero-slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
.hero-slide-top{display:flex;align-items:center;gap:8px}
.hero-slide-featured{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;padding:4px 9px;border-radius:4px;background:rgba(255,215,0,0.25);color:#FFE066;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,215,0,0.4)}
.hero-slide-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-transform:uppercase;letter-spacing:.08em;color:#fff}
.hero-slide-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-slide-headline{font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.01em;max-width:720px;margin:14px 0 12px;color:#fff}
.hero-slide-desc{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.88);max-width:660px;margin-bottom:18px}
.hero-slide-meta{display:flex;align-items:center;gap:14px;font-size:11px;color:rgba(255,255,255,0.75)}
.hero-slide-meta-dot{opacity:.5}
.hero-slide-read{display:none}
.hero-dots{display:none}
.hero-dot{display:none}
/* Variant 4: arrows + Read article CTA grouped at bottom-right of hero */
.hero-controls{position:absolute;bottom:28px;right:30px;display:flex;align-items:center;gap:10px;z-index:5}
.hero-arrow{width:40px;height:40px;border-radius:10px;background:rgba(248,244,237,0.14);border:1px solid rgba(248,244,237,0.22);color:#F8F4ED;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s;padding:0}
.hero-arrow svg{width:14px;height:14px}
.hero-arrow:hover{background:rgba(248,244,237,0.28)}
.hero-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Mona Sans',var(--font-display,inherit);font-size:13px;font-weight:700;letter-spacing:.01em;background:#F8F4ED;color:#155b50;padding:11px 18px;border-radius:10px;border:none;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.hero-cta::after{content:'→';font-size:15px;line-height:1}
.hero-cta:hover{background:#fff;transform:translateX(2px)}
/* Make sure slide meta/headline never sit under the controls */
.hero-slide{inset:36px 36px 92px 36px}
.hero-slide-meta{padding-right:230px}
/* Coral progress bar pinned to bottom; restarts each rotation via JS */
.hero-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(248,244,237,0.12);z-index:5;overflow:hidden}
.hero-progress-fill{position:absolute;left:0;top:0;height:100%;width:0;background:#E8967A;border-radius:0 2px 2px 0;transform-origin:left center}
.hero-progress-fill.run{animation:heroProgressFill 12s linear forwards}
@keyframes heroProgressFill{from{width:0}to{width:100%}}
@media(max-width:600px){.hero{height:auto;min-height:460px}.hero-slide{inset:54px 20px 96px 20px}.hero-slide-headline{font-size:20px}.hero-slide-desc{font-size:13px}.hero-slide-meta{flex-wrap:wrap;padding-right:0}.hero-controls{right:18px;bottom:22px;gap:8px}.hero-cta{padding:10px 14px;font-size:12px}.hero-arrow{width:36px;height:36px}.hero-counter{top:14px;right:16px;left:16px;text-align:right;font-size:10px}.hero-counter::before{content:'PICK · '}.articles-hdr-title{font-size:22px}.articles-hdr-top{gap:10px}.articles-hdr-stats{font-size:9px;gap:6px}}
/* Legacy .articles-filter-row + .articles-dd-* + .articles-search-* styles removed
along with the toolbar redesign (now lives in index.css under .rs-toolbar). */
.articles-no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;background:var(--color-background-secondary);border:1px dashed var(--color-border-tertiary);border-radius:12px;margin-bottom:12px}
.articles-no-results-title{font-size:14px;font-weight:600;color:var(--color-text-primary);margin-top:10px}
.articles-no-results-sub{font-size:12px;color:var(--color-text-tertiary);margin-top:4px}
.article-card.article-featured{border-color:rgba(59,95,192,.3);box-shadow:0 2px 10px -2px rgba(59,95,192,.15);margin-bottom:8px}
.article-card.article-featured:hover{border-color:rgba(59,95,192,.45);box-shadow:0 4px 14px -2px rgba(59,95,192,.25);transform:translateY(-1px)}
.feat-kicker{display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:4px;background:rgba(75,123,229,.1);color:#4B7BE5;margin-right:5px;vertical-align:middle}
.feat-kicker svg{width:8px;height:8px}
.article-list{display:flex;flex-direction:column;gap:8px}
.article-card{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:12px;overflow:hidden;display:flex;cursor:pointer;transition:all .15s}
.article-card:hover{border-color:var(--color-border-tertiary);box-shadow:0 2px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.article-side{width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 6px;flex-shrink:0;gap:4px}
.article-side-div{width:24px;height:1px;margin:2px 0}
.article-side-stat{font-size:11px;font-weight:700}
.article-side-label{font-size:5.5px;text-transform:uppercase;letter-spacing:.04em}
/* guide — matches .article-cat color (--t2c) */
.article-card[data-category="guide"] .article-side{background:rgba(var(--t2c-rgb,59,95,192),.08);background:color-mix(in srgb,var(--t2c) 10%,transparent)}
.article-card[data-category="guide"] .article-side svg,.article-card[data-category="guide"] .article-side-stat{color:var(--t2c)}
.article-card[data-category="guide"] .article-side-div{background:var(--t2c);opacity:.2}
.article-card[data-category="guide"] .article-side-label{color:var(--t2c);opacity:.5}
/* breakthrough — matches --t1c */
.article-card[data-category="breakthrough"] .article-side{background:color-mix(in srgb,var(--t1c) 10%,transparent)}
.article-card[data-category="breakthrough"] .article-side svg,.article-card[data-category="breakthrough"] .article-side-stat{color:var(--t1c)}
.article-card[data-category="breakthrough"] .article-side-div{background:var(--t1c);opacity:.2}
.article-card[data-category="breakthrough"] .article-side-label{color:var(--t1c);opacity:.5}
/* myth/reality check — matches --t3c */
.article-card[data-category="myth"] .article-side{background:color-mix(in srgb,var(--t3c) 10%,transparent)}
.article-card[data-category="myth"] .article-side svg,.article-card[data-category="myth"] .article-side-stat{color:var(--t3c)}
.article-card[data-category="myth"] .article-side-div{background:var(--t3c);opacity:.2}
.article-card[data-category="myth"] .article-side-label{color:var(--t3c);opacity:.5}
/* safety — matches --t4c */
.article-card[data-category="safety"] .article-side{background:color-mix(in srgb,var(--t4c) 10%,transparent)}
.article-card[data-category="safety"] .article-side svg,.article-card[data-category="safety"] .article-side-stat{color:var(--t4c)}
.article-card[data-category="safety"] .article-side-div{background:var(--t4c);opacity:.2}
.article-card[data-category="safety"] .article-side-label{color:var(--t4c);opacity:.5}
/* kids — matches --color-brand */
.article-card[data-category="kids"] .article-side{background:color-mix(in srgb,var(--color-brand) 10%,transparent)}
.article-card[data-category="kids"] .article-side svg,.article-card[data-category="kids"] .article-side-stat{color:var(--color-brand)}
.article-card[data-category="kids"] .article-side-div{background:var(--color-brand);opacity:.2}
.article-card[data-category="kids"] .article-side-label{color:var(--color-brand);opacity:.5}
.article-content{flex:1;min-width:0;padding:.85rem 1rem}
.article-cat{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.article-card[data-category="guide"] .article-cat{color:var(--t2c)}
.article-card[data-category="breakthrough"] .article-cat{color:var(--t1c)}
.article-card[data-category="myth"] .article-cat{color:var(--t3c)}
.article-card[data-category="safety"] .article-cat{color:var(--t4c)}
.article-card[data-category="kids"] .article-cat{color:var(--color-brand)}
.article-title{font-size:13px;font-weight:600;color:var(--color-text-primary);line-height:1.4;margin-bottom:3px}
.article-desc{font-size:11px;color:var(--color-text-secondary);line-height:1.5}
.article-meta{font-size:10px;color:var(--color-text-tertiary);margin-top:4px}
/* ── Plan toggle switches ── */
.plan-toggle{width:32px;height:18px;border-radius:9px;background:#d6d3d1;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s;border:none;padding:0}
.plan-toggle.on{background:#0D9488}
.plan-toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.plan-toggle.on::after{left:16px}
.plan-item-off{opacity:.35}
.plan-item-off .plan-item-name{text-decoration:line-through}
.plan-add-row{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer;color:var(--color-brand);font-size:11px;font-weight:500;transition:opacity .15s}
.plan-add-row:hover{opacity:.7}
.plan-search{width:100%;padding:7px 10px;border:1px solid var(--color-border-secondary);border-radius:6px;font-size:12px;font-family:inherit;outline:none;margin-top:4px}
.plan-search:focus{border-color:var(--color-brand)}
.plan-search-results{max-height:150px;overflow-y:auto;border:1px solid var(--color-border-secondary);border-top:none;border-radius:0 0 6px 6px;background:var(--color-background-primary)}
.plan-search-item{padding:6px 10px;font-size:11px;cursor:pointer;border-bottom:1px solid var(--color-border-tertiary)}
.plan-search-item:hover{background:var(--color-background-secondary)}
.plan-search-item:last-child{border-bottom:none}
/* ── Custom dropdowns ── */
.cdd{position:relative;display:inline-block}
.cdd-btn{padding:6px 10px;border-radius:8px;border:1px solid var(--color-border-secondary);font-size:12px;font-family:inherit;background:var(--color-background-secondary);color:var(--color-text-secondary);cursor:pointer;outline:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:all .15s}
.cdd-btn:hover{border-color:var(--color-border-primary)}
.cdd-open .cdd-btn{border-color:var(--color-brand);box-shadow:0 0 0 1px rgba(31,122,107,.15)}
.cdd-btn.on{background:linear-gradient(135deg,var(--color-brand),var(--color-brand-hover));color:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(31,122,107,.25)}
.cdd-btn.on:hover{border-color:transparent;filter:brightness(1.05)}
.cdd-open .cdd-btn.on{box-shadow:0 0 0 2px rgba(31,122,107,.3),0 2px 6px rgba(31,122,107,.25)}
.cdd-btn svg{flex-shrink:0;transition:transform .15s}
.cdd-open .cdd-btn svg{transform:rotate(180deg)}
.cdd-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:160px;max-height:280px;overflow-y:auto;background:var(--color-background-primary);border:1px solid var(--color-border-secondary);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:200;padding:4px}
.cdd-menu.open{display:block}
.cdd-item{padding:6px 10px;font-size:12px;color:var(--color-text-secondary);border-radius:6px;cursor:pointer;transition:background .1s;white-space:nowrap}
.cdd-item:hover{background:var(--color-background-secondary);color:var(--color-text-primary)}
#pop-filter-menu{min-width:200px}
#pop-filter-menu .cdd-item{padding:9px 10px;display:block}
#pop-filter-menu .pop-lbl{color:var(--color-text-primary);display:block;line-height:1.3;font-size:12px}
#pop-filter-menu .pop-ct{color:var(--color-text-tertiary);font-size:10.5px;font-weight:500;display:block;margin-top:2px;letter-spacing:.01em}
#pop-filter-menu .cdd-item:hover .pop-lbl{color:var(--color-brand)}
/* ── Article full body ── */
.article-full{max-width:720px;margin:0 auto}
.article-full h2{font-size:28px;font-weight:700;line-height:1.25;color:var(--color-text-primary);margin-bottom:6px}
.article-full h3{font-size:17px;font-weight:600;color:var(--color-text-primary);margin-top:1.75rem;margin-bottom:.5rem}
.article-full p{font-size:14px;color:var(--color-text-secondary);line-height:1.8;margin-bottom:1rem}
.article-full ul,.article-full ol{font-size:14px;color:var(--color-text-secondary);line-height:1.8;margin-bottom:1rem;padding-left:1.5rem}
.article-full li{margin-bottom:.4rem}
.article-full strong,.article-full b{color:var(--color-text-primary)}
.article-full .article-cat{margin-bottom:8px}
.article-full .article-meta{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border-tertiary)}
.article-hidden{display:none!important}
.legend-pill{cursor:pointer;border-radius:8px;padding:4px 8px;transition:background .15s}
.legend-pill:hover{background:var(--color-background-primary)}
.legend-pill.active{background:var(--color-background-primary);outline:1.5px solid var(--color-brand)}
/* Results header — Purple gradient banner */
/* 2026-04-28 — Mockup 3 (Title-first, no card). Editorial header on the page canvas,
no card chrome, large title, soft pill chips, search input flush below. */
.res-banner{background:transparent;border:none;border-radius:0;padding:4px 4px 0;color:var(--color-text-primary);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;position:relative;overflow:visible;flex-wrap:wrap}
.res-banner::before{display:none}
.res-banner-body{flex:1;position:relative;min-width:200px}
.res-banner-title{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--color-text-primary);line-height:1.15}
.res-banner-sub{font-size:12px;opacity:1;color:#64748B;margin-top:4px;line-height:1.4}
.res-banner-chips{display:flex;gap:8px;margin-top:14px;flex-basis:100%}
.res-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:14px;background:#FFFFFF;font-size:12px;font-weight:500;border:0.5px solid #E2E8F0;color:#1F2A3D;line-height:1.3;white-space:nowrap}
.res-chip .rc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.res-chip .rc-num{font-weight:600;color:#0F172A;font-variant-numeric:tabular-nums}
.res-banner-edit{padding:8px 16px;border-radius:8px;background:#FFFFFF;border:0.5px solid #CBD5E1;color:#0F172A;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;flex-shrink:0;position:relative;letter-spacing:.005em}
.res-banner-edit:hover{background:#F8FAFC;border-color:#94A3B8}
@media(max-width:600px){.res-banner{flex-direction:column;align-items:flex-start;gap:14px}.res-banner-edit{width:100%;text-align:center}.res-banner-chips{flex-wrap:wrap}}
/* Profile form — Option C minimal */
.pf-wrap{max-width:540px;margin:0 auto}
.pf-hero{text-align:center;padding:12px 20px 10px}
.pf-title{font-size:18px;font-weight:700;margin-bottom:2px}
.pf-sub{font-size:12px;color:var(--color-text-tertiary);max-width:360px;margin:0 auto;line-height:1.35}
.pf-basics{display:flex;align-items:center;gap:10px;background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.pf-group{display:flex;flex-direction:column;gap:4px}
.pf-group-age{width:80px;flex-shrink:0}
.pf-group-sex{flex:1}
.pf-group-weight{width:90px;flex-shrink:0}
.pf-divider{width:1px;height:48px;background:var(--color-border-tertiary);flex-shrink:0}
.pf-label{display:block;font-size:9px;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}
.pf-input{width:100%;padding:8px 10px;border:1.5px solid var(--color-border-secondary);border-radius:8px;font-size:16px;font-weight:700;font-family:inherit;text-align:center;outline:none;background:var(--color-background-primary);color:var(--color-text-primary);-moz-appearance:textfield}
.pf-input::-webkit-outer-spin-button,.pf-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pf-input:focus{border-color:var(--color-brand)}
.pf-sex-pill{display:flex;background:var(--color-background-secondary);border-radius:10px;padding:3px;gap:2px}
.pf-sex-opt{flex:1;padding:8px 0;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;color:var(--color-text-tertiary);background:transparent;transition:all .15s;font-family:inherit;text-align:center}
.pf-sex-opt:hover:not(.on-m):not(.on-f):not(.on-fp){color:var(--color-text-primary);background:rgba(31,122,107,.04)}
.pf-sex-opt.on-m,.pf-sex-opt.on-f,.pf-sex-opt.on-fp{background:var(--color-brand);color:#fff;box-shadow:0 2px 6px rgba(31,122,107,.25)}
.pf-sections{display:flex;flex-direction:column;gap:8px}
.pf-section{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:14px}
.pf-sec-toggle{width:100%;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:none;border:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--color-text-primary)}
.pf-sec-toggle:hover{background:rgba(0,0,0,.01)}
/* 2026-04-28 UX simplification: sections always expanded — pf-sec-header replaces the toggle button. */
.pf-sec-header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:var(--color-text-primary)}
.pf-sec-left{display:flex;align-items:center;gap:8px}
.pf-sec-emoji{font-size:16px}
.pf-sec-count{font-size:11px;font-weight:500;color:var(--color-brand);background:rgba(31,122,107,.08);padding:2px 8px;border-radius:99px;display:none}
.pf-sec-count.has-count{display:inline-block}
.pf-sec-arrow{font-size:10px;color:var(--color-text-tertiary);transition:transform .2s}
.pf-section.pf-open .pf-sec-arrow{transform:rotate(180deg)}
.pf-sec-body{padding:0 18px 16px;display:none}
.pf-section.pf-open .pf-sec-body{display:block}
.pf-submit{width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:600;margin-top:14px;background:var(--color-brand)}
.pf-hint{text-align:center;font-size:11px;color:var(--color-text-tertiary);margin-top:8px;padding-bottom:8px}
@media(max-width:600px){.pf-basics{flex-wrap:wrap;gap:8px}.pf-divider{display:none}.pf-group-age{width:auto;flex:1}.pf-group-weight{width:auto;flex:1}.pf-group-sex{width:100%;order:3}.pf-wrap{max-width:100%}}
/* Blood work */
.bw-upload-zone{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px dashed var(--color-border-secondary);border-radius:10px;cursor:pointer;transition:all .15s}
.bw-upload-zone:hover{border-color:var(--color-brand);background:rgba(31,122,107,.02)}
.bw-upload-zone.dragging{border-color:var(--color-brand);background:rgba(31,122,107,.04)}
.bw-upload-icon{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#E9D5FF,var(--color-brand));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bw-uploaded-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#E6F7F5;border:1px solid rgba(13,148,136,.2);border-radius:10px;font-size:11px;color:#065F56;font-weight:500}
.bw-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bw-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--color-background-secondary);border:0.5px solid transparent;transition:all .15s}
.bw-row:focus-within{border-color:var(--color-brand);background:var(--color-background-primary)}
.bw-row-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bw-row-info{flex:1;min-width:0}
.bw-row-name{font-size:10px;font-weight:600}
.bw-row-range{font-size:8px;color:var(--color-text-tertiary)}
.bw-row input{width:56px;padding:4px 6px;border:0.5px solid var(--color-border-secondary);border-radius:5px;font-size:11px;font-family:inherit;text-align:center;outline:none}
.bw-row input:focus{border-color:var(--color-brand)}
.bw-row-unit{font-size:8px;color:var(--color-text-tertiary);width:30px;flex-shrink:0}
.bw-row-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:none}
.bw-row.has-val .bw-row-dot{display:block}
.bw-results-hdr{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:10px;margin-bottom:8px}
.bw-score-badge{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#E9D5FF,var(--color-brand));display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.bw-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--color-border-tertiary);border-radius:10px;overflow:hidden;margin-bottom:8px}
.bw-summary-item{padding:10px;text-align:center;border-right:0.5px solid var(--color-border-tertiary)}
.bw-summary-item:last-child{border-right:none}
/* Blood-work compact list (Mockup 1, 2026-04-28). One row per biomarker with click-to-expand
detail. Optimal markers collapse into a single summary row at the bottom.
Class names use .bw-list-* prefix to avoid collision with .bw-row* used by the manual-entry grid. */
.bw-list-row{display:grid;grid-template-columns:14px 1fr 110px 90px;gap:12px;align-items:center;padding:10px 14px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-left-width:3px;border-radius:6px;margin-bottom:4px;cursor:pointer;transition:border-color .12s,background .12s}
.bw-list-row:hover{background:var(--color-background-secondary)}
.bw-list-row.bw-list-crit{border-left-color:var(--t4c)}
.bw-list-row.bw-list-low{border-left-color:var(--t3c)}
.bw-list-row.bw-list-elev{border-left-color:var(--t2c)}
.bw-list-row.bw-list-opt{border-left-color:var(--t1c)}
.bw-list-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#94A3B8}
.bw-list-row.bw-list-crit .bw-list-dot{background:var(--t4c)}
.bw-list-row.bw-list-low .bw-list-dot{background:var(--t3c)}
.bw-list-row.bw-list-elev .bw-list-dot{background:var(--t2c)}
.bw-list-row.bw-list-opt .bw-list-dot{background:var(--t1c)}
.bw-list-name{font-size:12px;font-weight:600;color:var(--color-text-primary);letter-spacing:-.005em;line-height:1.3;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;overflow:hidden}
.bw-list-pill{font-size:9px;font-weight:600;padding:1px 7px;border-radius:9px;letter-spacing:.02em;text-transform:uppercase;line-height:1.4;flex-shrink:0;white-space:nowrap}
.bw-list-pill-opt{background:#DCFCE7;color:#166534}
.bw-list-mini{position:relative;height:4px;border-radius:2px;overflow:visible;background:#eee;width:100%}
.bw-list-mini-fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--t4c),var(--t3c) 35%,var(--t1c) 55%,var(--t2c))}
.bw-list-mini-mark{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;border:2px solid var(--color-background-primary);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:translateX(-50%)}
.bw-list-val{text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.005em;line-height:1.1;white-space:nowrap}
.bw-list-unit{display:block;font-size:9px;color:var(--color-text-tertiary);font-weight:400;margin-top:2px}
/* Inline detail panel — hidden by default, expands when the row is clicked */
.bw-list-detail{display:none;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:0 0 6px 6px;border-top:0;margin-top:-4px;margin-bottom:4px;padding:12px 16px}
.bw-list-detail.bw-list-detail-open{display:block}
.bw-list-desc{font-size:11.5px;color:var(--color-text-secondary);line-height:1.5;margin-bottom:8px}
.bw-list-bar{position:relative;height:6px;border-radius:3px;background:#eee;overflow:visible}
.bw-list-fill{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--t4c),var(--t3c) 35%,var(--t1c) 55%,var(--t2c))}
.bw-list-fill-highonly{background:linear-gradient(90deg,var(--t1c) 0%,var(--t1c) 60%,var(--t2c) 75%,var(--t4c) 100%)}
.bw-list-mark{position:absolute;top:-2px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transform:translateX(-50%)}
.bw-list-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--color-text-tertiary);margin-top:5px;font-variant-numeric:tabular-nums}
.bw-list-supps{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.bw-supp-rec{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--color-background-primary);border-radius:7px;border:0.5px solid var(--color-border-tertiary)}
.bw-supp-rec-sc{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;font-variant-numeric:tabular-nums}
.bw-supp-rec-body{flex:1;min-width:0}
.bw-supp-rec-name{font-size:11px;font-weight:600;color:var(--color-text-primary);line-height:1.3}
.bw-supp-rec-note{font-size:9.5px;color:var(--color-text-tertiary);margin-top:1px;line-height:1.35}
.bw-list-optimal-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 16px}
.bw-list-optimal-item{display:flex;justify-content:space-between;font-size:11px;color:var(--color-text-secondary);padding:4px 0;border-bottom:0.5px dashed var(--color-border-tertiary)}
.bw-list-optimal-val{font-variant-numeric:tabular-nums;font-weight:500;color:var(--color-text-primary)}
.bw-list-optimal-unit{color:var(--color-text-tertiary);font-weight:400;margin-left:2px}
@media(max-width:560px){.bw-list-row{grid-template-columns:14px 1fr 70px}.bw-list-mini{display:none}}
@media(max-width:600px){.bw-grid{grid-template-columns:1fr}.bw-summary-strip{grid-template-columns:1fr 1fr}}
/* Article link in supplement cards */
.art-chip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;color:var(--color-brand);font-weight:500;text-decoration:none;padding:4px 9px;border-radius:6px;background:rgba(31,122,107,.05);border:0.5px solid rgba(31,122,107,.1);pointer-events:none}
.art-list{margin-top:10px}
.art-list-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-tertiary);margin-bottom:2px}
.art-mini{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--color-border-tertiary);cursor:pointer;text-decoration:none;transition:background .15s}
.art-mini:last-child{border-bottom:0}
.art-mini:hover{background:var(--color-background-secondary)}
.art-mini-ic{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.art-mini-mid{flex:1;min-width:0}
.art-mini-t{font-size:13px;font-weight:500;line-height:1.3;color:var(--color-text-primary)}
.art-mini-m{font-size:10px;margin-top:2px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.art-mini-dot{color:var(--color-border-secondary);margin:0 4px}
.art-mini-arr{color:var(--color-text-tertiary);font-size:18px;font-weight:300;flex-shrink:0}
/* Legacy art-mini-side used in article-related lists */
.art-mini-side{width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:3px;flex-shrink:0}
.art-mini-side svg{opacity:.9}
.art-mini-side-div{width:16px;height:1px;background:rgba(255,255,255,.2)}
.art-mini-side-stat{font-size:9px;font-weight:700;color:#fff}
.art-mini-side-label{font-size:5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.04em}
.art-mini-body{flex:1;padding:8px 10px;min-width:0}
.art-mini-cat{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.art-mini-title{font-size:11px;font-weight:600;color:var(--color-text-primary);line-height:1.3;margin-top:2px}
.art-mini-meta{font-size:9px;color:var(--color-text-tertiary);margin-top:3px}
/* Supplements in article (Option D) */
.art-supps-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-border-tertiary)}
.art-supps-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.art-supps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.art-supp-card{display:flex;align-items:stretch;border:1px solid var(--color-border-tertiary);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s}
.art-supp-card:hover{border-color:var(--color-border-secondary);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.art-supp-score{width:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;padding:6px 4px}
.art-supp-score-num{font-size:15px;font-weight:800;color:#fff}
.art-supp-score-label{font-size:5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-top:1px}
.art-supp-body{flex:1;padding:8px 10px;min-width:0}
.art-supp-name{font-size:11.5px;font-weight:600;color:var(--color-text-primary)}
.art-supp-meta{font-size:8.5px;color:var(--color-text-tertiary);margin-top:2px;line-height:1.4}
@media(max-width:600px){.art-supps-grid{grid-template-columns:1fr}}
/* Article key points card */
.art-kp-card{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:12px;padding:14px 16px;margin-top:14px}
.art-kp-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-tertiary);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.art-kp-label::before{content:'';display:inline-block;width:14px;height:2px;background:var(--color-brand);border-radius:1px}
.art-kp-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.art-kp-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--color-text-secondary)}
.art-kp-num{width:18px;height:18px;border-radius:50%;background:#F3E8FF;color:var(--color-brand);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
/* Supplement shelf at top of article */
.art-supps-top{margin-top:12px}
.art-supps-top-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
/* First body paragraph after kp/supp header */
.art-body-first{margin-top:20px !important;padding-top:20px;border-top:1px solid var(--color-border-tertiary)}
/* Related articles section */
.art-related-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-border-tertiary)}
.art-related-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);margin-bottom:10px;display:flex;align-items:center;gap:6px}
/* Supplement modal sections */
.supp-modal-section{padding:10px 0;border-bottom:0.5px solid var(--color-border-tertiary)}
.supp-modal-section:last-child{border-bottom:none}
.supp-modal-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-tertiary);margin-bottom:4px}
.supp-modal-val{font-size:12px;color:var(--color-text-secondary);line-height:1.6}
/* Article sources */
.art-sources{margin-top:20px;padding-top:14px;border-top:1px solid var(--color-border)}
.art-sources h3{font-size:0.78rem;color:var(--color-text-tertiary)}
.art-sources ol{font-size:0.68rem;line-height:1.65;color:var(--color-text-tertiary)}
.art-sources li{margin-bottom:3px}
.src-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(107,114,128,.35);text-underline-offset:2px;transition:all .15s}
.src-link:hover{color:var(--color-text-secondary);text-decoration-color:var(--color-text-secondary)}
/* Data revisions log — 2-column layout */
.revs-cols{columns:2;column-gap:28px;-webkit-columns:2}
.rev-row{display:flex;gap:8px;font-size:10px;line-height:1.5;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:6px}
.rev-date{color:var(--color-text-tertiary);white-space:nowrap;min-width:74px;font-weight:500}
.rev-txt{color:var(--color-text-secondary)}
@media(max-width:600px){.revs-cols{columns:1;-webkit-columns:1}}
/* ── About page ── */
.abt-body{padding:0;background:transparent;border-radius:0}
.abt-sec{margin-bottom:32px}
.abt-sec h2{font-size:17px;font-weight:800;margin-bottom:3px}
.abt-sec>p{font-size:11px;color:var(--color-text-tertiary);margin-bottom:14px}
/* Evidence tier cards 2×2 */
.abt-tiers-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.abt-tier-card{border-radius:12px;background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);overflow:hidden;transition:box-shadow .2s}
.abt-tier-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.abt-tc-bar{height:3px}
.abt-tc-green .abt-tc-bar{background:linear-gradient(90deg,var(--t1c),#4ADE80)}
.abt-tc-blue .abt-tc-bar{background:linear-gradient(90deg,var(--t2c),#60A5FA)}
.abt-tc-amber .abt-tc-bar{background:linear-gradient(90deg,var(--t3c),#FCD34D)}
.abt-tc-red .abt-tc-bar{background:linear-gradient(90deg,var(--t4c),#FCA5A5)}
.abt-tc-body{padding:14px 16px}
.abt-tc-num{font-size:28px;font-weight:800;line-height:1;margin-bottom:2px}
.abt-tc-green .abt-tc-num{color:var(--t1c)}
.abt-tc-blue .abt-tc-num{color:var(--t2c)}
.abt-tc-amber .abt-tc-num{color:var(--t3c)}
.abt-tc-red .abt-tc-num{color:var(--t4c)}
.abt-tc-name{font-size:11px;font-weight:700;margin-bottom:5px;color:var(--color-text-primary)}
.abt-tc-desc{font-size:9.5px;color:var(--color-text-tertiary);line-height:1.5;margin-bottom:8px}
.abt-tc-pill{display:inline-block;font-size:8px;font-weight:600;padding:2px 8px;border-radius:999px}
.abt-tc-green .abt-tc-pill{background:#dcfce7;color:#166534}
.abt-tc-blue .abt-tc-pill{background:#dbeafe;color:#1e40af}
.abt-tc-amber .abt-tc-pill{background:#fef3c7;color:#92400e}
.abt-tc-red .abt-tc-pill{background:#fee2e2;color:#991b1b}
/* How it works — feature cards */
.abt-feature-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.abt-feature-card{padding:16px;border-radius:12px;background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);transition:box-shadow .2s}
.abt-feature-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.abt-feature-icon-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-shrink:0}
.abt-feature-step{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4B7BE5;margin-bottom:4px}
.abt-feature-title{font-size:12px;font-weight:800;color:var(--color-text-primary);margin-bottom:4px;line-height:1.3}
.abt-feature-text{font-size:10px;color:var(--color-text-secondary);line-height:1.65}
.abt-how-status{display:inline-block;font-size:8px;font-weight:600;padding:2px 7px;border-radius:5px;margin-bottom:6px}
.abt-how-status.done{background:#dcfce7;color:#15803d}
.abt-how-status.progress{background:#fef3c7;color:#a16207}
.abt-how-status.planned{background:#fee2e2;color:#b91c1c}
/* Roadmap */
.abt-road{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.abt-road-card{padding:16px;border-radius:10px;border:1px solid var(--color-border-tertiary);background:var(--color-background-primary);position:relative;overflow:hidden}
.abt-road-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.abt-road-card.st-done::before{background:var(--t1c)}
.abt-road-card.st-soon::before{background:#0D9488}
.abt-road-card.st-prog::before{background:var(--color-brand)}
.abt-road-card.st-plan::before{background:var(--color-border-secondary)}
.abt-road-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.abt-road-badge{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.badge-active{background:#dcfce7;color:#15803d}
.badge-soon{background:#ccfbf1;color:#0f766e}
.badge-progress{background:#fef3c7;color:#b45309}
.badge-planned{background:var(--color-background-secondary);color:var(--color-text-tertiary)}
.abt-road-stage{font-size:8px;font-weight:600;color:var(--color-text-tertiary);letter-spacing:.06em;text-transform:uppercase}
.abt-road-title{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--color-text-primary)}
.abt-road-desc{font-size:10px;color:var(--color-text-secondary);line-height:1.5}
/* Sources grouped */
.abt-src-cats{display:flex;flex-direction:column;gap:18px}
.abt-src-cat{display:flex;flex-direction:column}
.abt-src-cat-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.abt-src-cat-line{flex:1;height:1px;background:var(--color-border-tertiary)}
.abt-src-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.abt-src{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:8px;border:1px solid var(--color-border-tertiary);text-decoration:none;color:inherit;transition:all .12s}
.abt-src:hover{border-color:var(--color-brand);background:rgba(31,122,107,.02);box-shadow:0 2px 8px rgba(31,122,107,.06)}
.abt-src-logo{width:24px;height:24px;flex-shrink:0;filter:invert(1);opacity:.5;margin-top:1px}
.abt-src-info{flex:1;min-width:0}
.abt-src-name{font-size:11px;font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;justify-content:space-between}
.abt-src-name span{font-size:9px;color:var(--color-text-tertiary);font-weight:400}
.abt-src-desc{font-size:9px;color:var(--color-text-tertiary);line-height:1.4;margin-top:2px}
/* Collapsed state: only first 3 sources visible */
.abt-src-cat.collapsed .abt-src-grid > .abt-src:nth-child(n+4){display:none}
.abt-src-more{margin-top:8px;padding:8px 14px;background:none;border:1px dashed var(--color-border-tertiary);border-radius:8px;font-size:10px;font-weight:600;color:var(--color-brand);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;align-self:center;transition:all .15s}
.abt-src-more:hover{border-color:var(--color-brand);background:rgba(31,122,107,.04)}
.abt-src-more svg{transition:transform .2s}
.abt-src-cat:not(.collapsed) .abt-src-more svg{transform:rotate(180deg)}
.abt-src-cat.collapsed .abt-src-more-hide{display:none}
.abt-src-cat:not(.collapsed) .abt-src-more-show{display:none}
/* Mission */
.abt-mission-sec{padding:24px;border-radius:12px;background:var(--color-background-secondary);margin-bottom:20px}
.abt-mission-heading{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--color-text-primary);line-height:1.15;margin-bottom:16px}
.abt-mission-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
.abt-mission-pullstat{background:linear-gradient(135deg,var(--color-brand) 0%,#4B7BE5 100%);border-radius:14px;padding:18px;color:#fff;margin-bottom:12px}
.abt-pull-num{font-size:28px;font-weight:800;line-height:1}
.abt-pull-label{font-size:11px;opacity:.85;margin-top:4px;line-height:1.5}
.abt-mission-text{font-size:11px;color:var(--color-text-secondary);line-height:1.8;margin-bottom:10px}
.abt-mission-text:last-child{margin-bottom:0}
.abt-values-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.abt-values-list li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:var(--color-background-primary);border:1px solid var(--color-border-tertiary)}
.abt-value-icon{min-width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--color-brand),#4B7BE5);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.abt-value-title{font-size:10px;font-weight:700;color:var(--color-text-primary);margin-bottom:2px}
.abt-value-desc{font-size:9px;color:var(--color-text-tertiary);line-height:1.5}
/* Disclaimer */
.abt-disclaimer{padding:16px 20px;border-radius:10px;border:1px solid var(--color-border-tertiary);background:var(--color-background-primary)}
.abt-disclaimer-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--t4c);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.abt-disclaimer ul{padding-left:16px;font-size:10.5px;color:var(--color-text-secondary);line-height:1.7}
.abt-disclaimer li{margin-bottom:3px}
/* Contributor CTA */
.abt-cta{text-align:center;padding:28px 24px;background:linear-gradient(135deg,#f3e8ff,#ede9fe);border-radius:12px;overflow:hidden;margin-top:4px}
.abt-cta h3{font-size:16px;font-weight:700;margin-bottom:4px}
.abt-cta p{font-size:11px;color:var(--color-text-secondary);margin-bottom:14px;max-width:340px;margin-left:auto;margin-right:auto}
.abt-cta-roles{display:flex;justify-content:center;gap:8px 14px;margin-bottom:16px;flex-wrap:wrap}
.abt-cta-role{font-size:10px;display:flex;align-items:center;gap:4px;color:var(--color-text-secondary);white-space:nowrap}
.abt-cta-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.abt-cta-email{display:flex;gap:6px;max-width:320px;margin:0 auto}
.abt-cta-email input{flex:1;padding:8px 12px;border:1px solid rgba(31,122,107,.2);border-radius:8px;font-size:11px;font-family:inherit;outline:none;background:rgba(255,255,255,.7)}
.abt-cta-email input:focus{border-color:var(--color-brand);background:#fff}
.abt-cta-email button{padding:8px 18px;background:var(--color-brand);color:#fff;border:none;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.abt-cta-email button:hover{background:#6A1B8A}
@media(max-width:600px){.abt-tiers-grid,.abt-feature-rows,.abt-road{grid-template-columns:1fr}.abt-mission-grid{grid-template-columns:1fr}.abt-src-grid{grid-template-columns:1fr 1fr}}
/* Article modal overlay */
.art-modal{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto;padding:0 20px}
.art-modal.open{display:flex;justify-content:center;align-items:flex-start}
.art-modal-pane{background:var(--color-background-primary);border-radius:14px;max-width:740px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:artModalIn .2s ease-out;margin:40px 0}
@keyframes artModalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.art-modal-chrome{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--color-background-primary);border-radius:14px 14px 0 0;border-bottom:1px solid var(--color-border-tertiary)}
.art-modal-nav{display:flex;gap:4px}
.art-nav-btn{width:36px;height:36px;border-radius:10px;border:none;background:var(--color-background-secondary);color:var(--color-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.art-nav-btn:hover:not(:disabled){background:var(--color-border-secondary);color:var(--color-text-primary)}
.art-nav-btn:disabled{opacity:.3;cursor:default}
.art-modal-close{width:36px;height:36px;border-radius:10px;border:none;background:var(--color-background-secondary);color:var(--color-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.art-modal-close:hover{background:var(--color-border-secondary);color:var(--color-text-primary)}
.art-modal-actions{display:flex;align-items:center;gap:6px}
.art-share-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;border:none;background:var(--color-background-secondary);color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;flex-shrink:0}
.art-share-btn:hover{background:var(--color-border-secondary);color:var(--color-text-primary)}
.art-share-btn:active{transform:scale(.96)}
.art-share-btn.copied{background:#E6F7F5;color:#065F56}
.art-share-label{font-size:13px;font-weight:500;letter-spacing:.01em}
@media(max-width:500px){.art-share-label{display:none}.art-share-btn{padding:0;width:36px;justify-content:center}}
.art-share-toast{position:absolute;top:58px;right:12px;background:#0c0a09;color:#fff;font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s;pointer-events:none;z-index:5;display:flex;align-items:center;gap:6px}
.art-share-toast.show{opacity:1;transform:translateY(0)}
.art-modal-body{padding:1.25rem 2.5rem 2.5rem}
.art-modal-body h2{font-size:1.5rem;font-weight:700;line-height:1.25;margin:0.4rem 0}
.art-modal-body h3{font-size:1.05rem;font-weight:600;margin:1.5rem 0 0.6rem;color:var(--color-text-primary)}
.art-modal-body p{font-size:0.92rem;line-height:1.7;color:var(--color-text-secondary);margin:0 0 1rem}
.art-modal-body .article-cat{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-brand)}
.art-modal-body .article-meta{font-size:12px;color:var(--color-text-tertiary);margin-bottom:1.5rem}
@media(max-width:600px){.art-modal{padding:0}.art-modal-pane{border-radius:0;min-height:100vh;margin:0}.art-modal-body{padding:1.25rem 1.25rem 2rem}.art-modal-chrome{border-radius:0}}
/* ══ Add supplement (user add) ══ */
/* Mockup 3 — search lives flush on the canvas; no card chrome around it. */
.add-supp-card{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:18px;margin-top:14px;position:relative}
.add-supp-row{display:flex;align-items:center;gap:0;position:relative}
.add-supp-icon{display:none}
.add-supp-txt{flex:1;min-width:0}
.add-supp-txt{display:none}
.add-supp-input{flex:1;width:100%;border:0.5px solid #E2E8F0;border-radius:10px;padding:11px 14px 11px 38px;font-size:13px;outline:none;font-family:inherit;background:#FFFFFF;color:#0F172A;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:13px center;background-size:14px 14px}
.add-supp-input::placeholder{color:#94A3B8}
.add-supp-input:focus{border-color:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.ac-dropdown{position:absolute;left:12px;right:12px;top:calc(100% - 4px);background:var(--color-background-primary);border:1px solid var(--color-border-secondary);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:6px;max-height:340px;overflow-y:auto;z-index:20}
.ac-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer}
.ac-row:hover,.ac-row.on{background:rgba(31,122,107,.06)}
.ac-score{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}
.ac-info{flex:1;min-width:0}
.ac-name{font-size:13px;font-weight:600;color:var(--color-text-primary,#111)}
.ac-meta{font-size:11px;color:var(--color-text-tertiary,#777);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ac-tag{font-size:9px;font-weight:500;padding:2px 6px;border-radius:5px;background:#f5f4f2;color:#777}
.ac-tag.eff{background:#D1FAE5;color:#065F46}
.ac-tag.safe{background:#DBEAFE;color:#1E40AF}
.ac-tag.tier{background:#F3F0FF;color:#5B21B6}
.ac-tag.already{background:#FEE2E2;color:#991B1B;margin-left:auto;flex-shrink:0}
.ac-empty{padding:16px;text-align:center;font-size:12.5px;color:var(--color-text-tertiary,#888)}
.sc-remove{position:absolute;top:12px;right:44px;background:transparent;border:none;color:#b5b5b5;font-size:18px;cursor:pointer;line-height:1;padding:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:5px;z-index:2}
.sc-remove:hover{color:#B91C1C;background:rgba(185,28,28,.08)}
.supp-card-tag.sct-added{background:#DBEAFE;color:#1E40AF}
@media(max-width:640px){
.add-supp-row{flex-wrap:wrap}
.add-supp-input{flex:0 0 100%;order:3}
.add-supp-txt{flex:1}
.ac-dropdown{left:8px;right:8px}
}
/* ══ Selectable supplement cards ══ */
.supp-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.supp-card{background:#fbf8f2;border:1.5px solid var(--color-border-tertiary);border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .15s;position:relative;display:flex;flex-direction:column;gap:8px}
.supp-card:hover{border-color:#ccc;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.supp-card.sc-selected{border-color:var(--color-brand);background:#fbf8f2}
.supp-card-check{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:7px;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;transition:all .15s;background:#fff}
.supp-card.sc-selected .supp-card-check{background:var(--color-brand);border-color:var(--color-brand)}
.supp-card.sc-selected .supp-card-check::after{content:'\2713';color:#fff;font-size:13px;font-weight:700}
.supp-card-top{display:flex;align-items:center;gap:10px}
.supp-card-score{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
/* score color set via inline style */
.supp-card-name{font-size:13px;font-weight:700;line-height:1.2;padding-right:24px}
.supp-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.supp-card-tag{font-size:9px;font-weight:500;padding:3px 7px;border-radius:6px;background:#f5f4f2;color:#777}
.supp-card-tag.sct-eff{background:#D1FAE5;color:#065F46}
.supp-card-tag.sct-safe{background:#DBEAFE;color:#1E40AF}
.supp-card-bw{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;color:#B91C1C;background:#FEE2E2;padding:2px 7px;border-radius:5px}
.supp-card-desc{font-size:11px;color:#666;line-height:1.45}
.supp-card-tag.sct-tier{background:#F3F0FF;color:#5B21B6}
.supp-card-tag.sct-cat{background:#FEF6E0;color:#7A5300}
.supp-card-tag.sct-dim{background:#f5f4f2;color:#999}
.supp-card-tag.sct-pair{background:#FEF3C7;color:#854D0E;font-weight:600;border:0.5px solid rgba(217,119,6,.4)}
/* Inline rating row — Efficacy / Safety / Research with a teal star, matching the detail-page style. */
.sct-rating{display:inline-flex;align-items:baseline;gap:3px;font-size:10.5px;color:var(--color-text-secondary);padding:3px 0;margin-right:6px;line-height:1}
.sct-rating-lbl{font-weight:400;letter-spacing:.005em}
.sct-rating-num{font-weight:600;color:var(--color-text-primary);margin-left:3px;font-variant-numeric:tabular-nums}
.sct-rating-star{color:#0D9488;font-size:10.5px;margin-left:1px}
.supp-card-why{font-size:10px;color:#555;line-height:1.45;margin-top:auto;padding-top:6px;border-top:1px solid #f0eeeb}
.supp-card-why-label{display:block;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-brand);margin-bottom:3px}
/* Phase 0 / Item #9 — last-reviewed badge on supplement cards */
.supp-card-reviewed{font-size:9px;color:var(--color-text-tertiary);font-weight:500;margin-top:6px;padding-top:5px;border-top:1px dashed #f0eeeb;letter-spacing:.01em;cursor:help}
/* Phase 0 / Item #9 — last-reviewed badge inside article modal */
.article-reviewed{font-size:11px;color:var(--color-text-tertiary);font-weight:500;margin:4px 0 16px;padding:5px 9px;display:inline-block;background:rgba(31,122,107,.04);border-radius:5px;letter-spacing:.01em;cursor:help}
/* Phase 0 / Item #3 — citation funding/COI badges (rendered by processArticleSources) */
.cite-fund-badge{display:inline-block;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;margin-left:4px;letter-spacing:.02em;cursor:help;vertical-align:1px;white-space:nowrap}
.cite-fund-industry-badge{background:#FEF3C7;color:#92400E;border:0.5px solid rgba(217,119,6,.4)}
.cite-fund-mixed-badge{background:#FEF6E0;color:#7A5300;border:0.5px solid rgba(202,138,4,.3)}
.cite-coi-badge{background:#FDE8E8;color:#991B1B;border:0.5px solid rgba(185,28,28,.3)}
/* Subtle row tint so industry-funded citations are scannable in the list */
.art-sources li.cite-fund-industry{background:linear-gradient(90deg,rgba(254,243,199,.5) 0%,transparent 60%);padding-left:6px;border-left:2px solid rgba(217,119,6,.5);margin-left:-8px}
.art-sources li.cite-fund-mixed{background:linear-gradient(90deg,rgba(254,246,224,.4) 0%,transparent 60%);padding-left:6px;border-left:2px solid rgba(202,138,4,.4);margin-left:-8px}
/* Phase 1 / Item #1 — source-key tag rendered before the citation text */
.cite-src-tag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;padding:1px 6px 1px 4px;border-radius:5px;background:rgba(31,122,107,.06);color:var(--color-brand);border:0.5px solid rgba(31,122,107,.18);margin-right:6px;letter-spacing:.01em;cursor:help;vertical-align:1px;white-space:nowrap}
.cite-src-logo{width:11px;height:11px;display:inline-block;vertical-align:middle;flex-shrink:0;object-fit:contain}
.art-sources li.cite-has-src{padding-left:0}
/* Phase 0 / Item #10 — feedback ("Flag inaccuracy") trigger + modal */
.article-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 16px}
.article-flag-btn{font-size:11px;font-weight:500;color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border-secondary);border-radius:5px;padding:4px 9px;cursor:pointer;font-family:inherit;letter-spacing:.01em;transition:all .15s}
.article-flag-btn:hover{background:rgba(31,122,107,.05);border-color:var(--color-brand-soft);color:var(--color-brand)}
.article-flag-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.fb-lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary);margin:12px 0 5px}
.fb-req{color:#B91C1C;font-weight:600;text-transform:none;letter-spacing:0}
#fb-modal textarea,#fb-modal input[type="url"],#fb-modal input[type="email"]{width:100%;padding:9px 11px;border:1px solid var(--color-border-secondary);border-radius:7px;font-family:inherit;font-size:13px;background:#fff;color:var(--color-text-primary);box-sizing:border-box;resize:vertical}
#fb-modal textarea:focus,#fb-modal input:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(31,122,107,.12)}
.fb-hint{font-size:10.5px;color:var(--color-text-tertiary);margin-top:4px;line-height:1.4}
.fb-err{font-size:12px;color:#B91C1C;background:#FDE8E8;border:1px solid rgba(185,28,28,.25);border-radius:6px;padding:8px 10px;margin-top:10px}
.fb-submit{padding:9px 18px;border-radius:7px;background:var(--color-brand);color:#fff;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.fb-submit:hover:not(:disabled){background:var(--color-brand-hover)}
.fb-submit:disabled{opacity:.6;cursor:not-allowed}
.fb-cancel{padding:9px 14px;border-radius:7px;background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border-secondary);font-size:13px;cursor:pointer;font-family:inherit}
.fb-cancel:hover{background:#f5f4f2}
/* Tier section headers */
.tier-sec-hdr{display:flex;align-items:center;gap:8px;padding:14px 0 10px;font-size:13px;font-weight:700}
.tier-sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tier-sec-count{font-size:11px;font-weight:500;color:#999;margin-left:2px}
/* Selection sticky bar */
.sel-bar{position:sticky;bottom:0;left:0;right:0;z-index:50;padding:12px 0;pointer-events:none}
.sel-bar-inner{max-width:820px;margin:0 auto;background:#1a1a1a;border-radius:14px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 -4px 20px rgba(0,0,0,.15);pointer-events:auto}
.sel-bar-left{display:flex;align-items:center;gap:12px;color:#fff}
.sel-bar-count{font-size:22px;font-weight:700}
.sel-bar-label{font-size:12px;color:rgba(255,255,255,.7)}
.sel-bar-btn{padding:12px 28px;border-radius:10px;background:var(--color-brand);color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.sel-bar-btn:hover{background:#6A1B9A}
/* Plan overlay modal */
.plan-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.4);overflow-y:auto;padding:20px}
.plan-overlay.open{display:flex;justify-content:center;align-items:flex-start}
.plan-card{background:#fff;border-radius:20px;max-width:600px;width:100%;margin:40px auto;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.plan-hdr{background:linear-gradient(135deg,var(--color-brand),#0F4A41);padding:28px 28px 20px;color:#fff;position:relative}
.plan-hdr h2{font-size:22px;font-weight:700;margin-bottom:2px}
.plan-hdr p{font-size:12px;opacity:.7}
.plan-close-btn{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.25);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2}
.plan-close-btn:hover{background:rgba(255,255,255,.4)}
.plan-body{padding:20px 24px 28px}
.plan-time-sec{margin-bottom:20px}
.plan-time-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f0eeeb}
.plan-time-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
/* Plan summary rows */
.plan-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f8f7f5}
.plan-row:last-child{border-bottom:none}
.plan-row-score{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.plan-row-name{font-size:13px;font-weight:600;flex:none}
.plan-row-tags{display:flex;gap:4px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.plan-row-tag{font-size:9px;font-weight:500;padding:2px 8px;border-radius:20px;background:#F3F0FF;color:var(--color-brand)}
.plan-edit-row{text-align:center;padding:10px 0 0}
.plan-edit-btn{font-size:11px;color:var(--color-brand);background:none;border:1px solid #E9D5FF;border-radius:8px;padding:6px 16px;cursor:pointer;font-family:inherit;font-weight:600;transition:all .15s}
.plan-edit-btn:hover{background:rgba(31,122,107,.04);border-color:var(--color-brand)}
/* Email report preview */
.plan-preview{padding:0 24px 20px}
.plan-ep-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-brand);margin-bottom:12px;text-align:center;padding-top:16px;border-top:1px solid #eee}
.plan-ep-card{border:1px solid #e8e6e1;border-radius:14px;overflow:hidden;position:relative}
.plan-ep-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,#fff);pointer-events:none}
.plan-ep-hdr{background:linear-gradient(135deg,var(--color-brand),#0F4A41);padding:16px 20px;color:#fff;position:relative;overflow:hidden}
.plan-ep-hdr::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.05)}
.plan-ep-hdr h3{font-size:14px;font-weight:700;position:relative}
.plan-ep-hdr p{font-size:10px;opacity:.6;margin-top:2px;position:relative}
.plan-ep-body{padding:14px 18px}
.plan-ep-sec-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#0D9488;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.plan-ep-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.plan-ep-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid #f5f4f2}
.plan-ep-row:last-child{border-bottom:none}
.plan-ep-badge{width:22px;height:22px;border-radius:6px;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.plan-ep-info{flex:1}
.plan-ep-name{font-size:11px;font-weight:600}
.plan-ep-dose{font-size:9px;color:#888;margin-top:1px}
.plan-ep-why{font-size:8px;color:var(--color-brand);margin-top:3px;line-height:1.4}
.plan-ep-more{font-size:10px;color:var(--color-brand);font-weight:600;text-align:center;padding:10px 0 4px}
/* Footer */
.plan-footer{padding:16px 24px;background:#f9f8f6;border-top:1px solid #eee;display:flex;gap:8px;align-items:center}
.plan-email-input{flex:1;padding:11px 14px;border-radius:10px;border:1px solid #ddd;font-size:13px;font-family:inherit;outline:none;min-width:0}
.plan-email-input:focus{border-color:var(--color-brand)}
.plan-footer .plan-foot-btn{text-align:center;padding:11px 20px;font-size:13px;font-weight:600;border-radius:10px;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.plan-footer .plan-foot-btn.plan-btn-dark{background:#1a1a1a;color:#fff}
.show-more-cards-btn{font-size:12px;color:var(--color-brand);border:1px solid #E9D5FF;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s}
.show-more-cards-btn:hover{background:rgba(31,122,107,.03);border-color:var(--color-brand)}
@media(max-width:600px){.supp-cards{grid-template-columns:1fr}.sel-bar-inner{border-radius:12px;padding:12px 16px}.plan-card{margin:10px auto;border-radius:16px}}
/* ── Profile Gate (coming soon overlay) ── */
.gate-page{max-width:440px;margin:0 auto;padding:40px 20px 60px;text-align:center}
.gate-hero{margin-bottom:28px}
.gate-icon{width:56px;height:56px;border-radius:16px;background:var(--color-background-primary);border:1px solid rgba(31,122,107,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.gate-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-brand);margin-bottom:10px}
.gate-title{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--color-text-primary);line-height:1.1;margin:0 0 12px}
.gate-desc{font-size:13px;line-height:1.6;color:var(--color-text-secondary);max-width:360px;margin:0 auto}
.gate-steps{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:14px;overflow:hidden;margin-bottom:24px;text-align:left}
.gate-step{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--color-border-tertiary)}
.gate-step:last-child{border-bottom:0}
.gate-step-num{width:28px;height:28px;border-radius:8px;background:rgba(31,122,107,.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--color-brand);flex-shrink:0}
.gate-step-text{font-size:12.5px;color:var(--color-text-secondary);line-height:1.5}
.gate-step-text strong{color:var(--color-text-primary);display:block;margin-bottom:3px;font-size:13px;letter-spacing:-.1px}
.gate-optional{font-weight:400;color:var(--color-text-tertiary);font-size:11px}
.gate-form{display:flex;gap:8px;margin-bottom:8px}
.gate-input{flex:1;padding:11px 14px;border:1px solid var(--color-border-secondary);border-radius:10px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;background:var(--color-background-primary);color:var(--color-text-primary)}
.gate-input:focus{border-color:var(--color-brand)}
.gate-btn{padding:11px 20px;background:#1a1a1a;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}
.gate-btn:hover{background:#333}
.gate-btn-purple{background:var(--color-brand)}
.gate-btn-purple:hover{background:#6A1B8A}
.gate-success{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#065F56;background:#E6F7F5;border-radius:10px;padding:10px 14px;font-weight:500;margin-bottom:8px}
.gate-privacy{font-size:10px;color:var(--color-text-tertiary);margin:0 0 28px}
.gate-trust{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.gate-trust-item{font-size:11px;color:var(--color-text-tertiary)}
.gate-trust-dot{width:3px;height:3px;border-radius:50%;background:var(--color-text-tertiary);opacity:.4}
@media(max-width:600px){.gate-page{padding:32px 16px 48px}.gate-title{font-size:24px}.gate-form{flex-direction:column}}
/* Research category hero - rotating slim banner */
.cat-hero{position:relative;border-radius:14px;overflow:hidden;height:110px;margin:18px 0 22px;cursor:pointer;color:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.18);transition:transform .2s}
.cat-hero:hover{transform:translateY(-2px)}
.cat-hero::before{content:'';position:absolute;top:-60%;right:-10%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 60%);pointer-events:none;z-index:2}
.cat-hero::after{content:'';position:absolute;bottom:-50%;left:-5%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 60%);pointer-events:none;z-index:2}
.cat-hero-bg{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;z-index:0}
.cat-hero-bg.active{opacity:1}
.cat-hero-bg-guide{background:linear-gradient(135deg,#2563EB,#1E3A8A)}
.cat-hero-bg-breakthrough{background:linear-gradient(135deg,#16A34A,#14532D)}
.cat-hero-bg-myth{background:linear-gradient(135deg,#EA580C,#7C2D12)}
.cat-hero-bg-safety{background:linear-gradient(135deg,#DC2626,#7F1D1D)}
.cat-hero-bg-kids{background:linear-gradient(135deg,#0D9488,#115E59)}
.cat-bg-deco{position:absolute;right:0;top:0;height:100%;width:280px;pointer-events:none}
.cat-hero-kicker{position:absolute;top:12px;left:18px;z-index:4;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.92);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:3px 9px;border-radius:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cat-hero-nav{position:absolute;top:10px;right:14px;z-index:4;display:flex;align-items:center;gap:6px}
.cat-hero-counter{font-size:10px;font-weight:600;color:rgba(255,255,255,.82);background:rgba(0,0,0,.22);padding:4px 9px;border-radius:20px;font-variant-numeric:tabular-nums;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cat-hero-slide{position:absolute;inset:0;padding:0 26px;display:flex;align-items:center;gap:18px;opacity:0;transition:opacity .4s ease,transform .5s ease;transform:translateY(6px);pointer-events:none;z-index:3}
.cat-hero-slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
.cat-hero-icon{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:14px}
.cat-hero-text{flex:1;min-width:0;margin-top:14px}
.cat-hero-title{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin-bottom:2px;color:#fff}
.cat-hero-meta{font-size:11px;color:rgba(255,255,255,.82);font-weight:500}
.cat-hero-meta b{color:#fff;font-weight:700}
.cat-hero-cta{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:rgba(255,255,255,.95);color:#18181B;padding:8px 14px;border-radius:20px;flex-shrink:0;transition:transform .15s,background .15s;margin-top:14px}
.cat-hero:hover .cat-hero-cta{background:#fff;transform:translateX(2px)}
.cat-hero-arrow{width:24px;height:24px}
.cat-hero-arrow svg{width:10px;height:10px}
@media(max-width:600px){.cat-hero{height:104px}.cat-hero-slide{padding:0 16px;gap:12px}.cat-hero-icon{width:36px;height:36px}.cat-hero-title{font-size:16px}.cat-hero-meta{font-size:10px}.cat-hero-cta{padding:6px 11px;font-size:10px}.cat-hero-kicker{font-size:8px;padding:2px 7px;left:14px}.cat-hero-nav{right:12px;gap:5px}.cat-bg-deco{width:210px}}
/* Reader mode — clean article-only view when opened in a separate window */
body.reader-mode{background:#FAF9F7}
body.reader-mode .beta-bar,
body.reader-mode .site-nav,
body.reader-mode #supplements-view,
body.reader-mode #about-view,
body.reader-mode #research-list-view,
body.reader-mode .articles-hdr,
body.reader-mode .rs-toolbar,
body.reader-mode .cat-hero,
body.reader-mode .article-card,
body.reader-mode .article-featured,
body.reader-mode .article-list,
body.reader-mode footer,
body.reader-mode .foot,
body.reader-mode #footer,
body.reader-mode .article-full > div > button:first-child{display:none !important}
body.reader-mode #research-view{display:block !important;padding:0;background:transparent}
body.reader-mode .articles-section{padding:0;max-width:none;margin:0}
body.reader-mode .article-full{background:#fff;max-width:760px;margin:32px auto 60px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.06);overflow:hidden}
body.reader-mode .article-full > div{padding:44px 52px !important;max-width:none !important}
/* Floating close button — replaces sticky nav, eliminates top-clip issue */
.reader-close-fab{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--color-background-primary);border:1px solid var(--color-border-secondary);box-shadow:0 2px 12px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:var(--z-dropdown);color:var(--color-text-secondary);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s,background .15s;padding:0}
.reader-close-fab:hover{background:var(--color-background-primary);transform:scale(1.08);color:var(--color-text-primary)}
.reader-close-fab:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
@media(max-width:760px){body.reader-mode .article-full{margin:16px 10px 40px;border-radius:10px}body.reader-mode .article-full > div{padding:28px 22px !important}.reader-close-fab{top:12px;right:12px;width:36px;height:36px}}
/* ── Performance: replace transition:all with targeted props ── */
.src-item{transition:background-color .15s,border-color .15s}
.sc,.sr-card{transition:border-color .15s,box-shadow .15s,transform .15s}
.sfbtn{transition:background-color .15s,border-color .15s,color .15s}
.tab-btn{transition:color .15s,border-bottom-color .15s}
.tier-more{transition:background-color .15s,border-color .15s,color .15s}
.article-card{transition:border-color .15s,box-shadow .15s,transform .15s}
.supp-card{transition:border-color .15s,box-shadow .15s}
.bw-upload-zone{transition:border-color .15s,background-color .15s}
.bw-row{transition:border-color .15s,background-color .15s}
.med-chip{transition:background-color .15s,border-color .15s,color .15s}
.art-mini{transition:border-color .15s,box-shadow .15s}
.abt-src{transition:background-color .12s,border-color .12s}
/* ── Accessibility: keyboard focus-visible states ── */
.src-item:focus-visible{outline:2px solid var(--color-border-primary);outline-offset:2px}
.sc:focus-visible{outline:2px solid var(--color-border-primary);outline-offset:2px}
.sfbtn:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.tab-btn:focus-visible,.site-nav-tab:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.tier-more:focus-visible{outline:2px solid var(--color-border-primary);outline-offset:2px}
.article-card:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.supp-card:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.bw-upload-zone:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.abt-src:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.smb:focus-visible{outline:2px solid var(--color-border-primary);outline-offset:2px}
.gs-clr:focus-visible{outline:2px solid var(--color-border-primary);outline-offset:2px}
button:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
/* ── Visual: source grid alignment fix ── */
.src-grid{align-items:start}
.src-item{height:100%;box-sizing:border-box}
/* ── Visual: supplement card score-side min-height for short cards ── */
.sc-score-side{min-height:80px}
/* ── Visual polish: typography & spacing refinements ── */
/* Logo strip: slightly more opaque icons (0.4→0.45) for better brand legibility */
.logo-icon{opacity:.45}
/* Stat sub-labels: 10px→11px for improved readability */
.stat-sub{font-size:11px}
/* Source item descriptions: 10px→10.5px, small but legible */
.src-is{font-size:10.5px;line-height:1.35}
/* Source grid: 7px→8px gap, consistent with 8-unit spacing rhythm */
.src-grid{gap:8px}
/* Filter chip bar: 5px→6px gap for better button separation */
.sfbar{gap:6px}
/* WCAG 2.1 AA — honor prefers-reduced-motion for users with vestibular sensitivity. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.ev-pulse{animation:none}
.loading-ring{animation:none;border-top-color:transparent}
}
/* Accessibility — skip-to-content link (visually hidden until focused) */
.skip-link{position:absolute;left:0;top:-40px;background:var(--color-brand);color:#fff;padding:8px 16px;z-index:10000;text-decoration:none;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:-4px}
/* Theme-toggle button is hidden in markup (stub kept only so old cached links
don't error). All its styling has been removed along with dark-mode rules. */
/* ═════════════════════════════════════════════════════════════════
HEADER · CONCEPT 1 — Unified peer-chip filter + docked title card
All .sfbtn and .cdd-btn in .sfbar render identically: same shape,
same border, same typography. Active state uses a neutral solid
ink chip (no tier-specific gradients) so Tier has no elevated
visibility over Category / A–Z / For. The context title card
(.pop-head) gets a tier-aware left accent bar and docks into the
scards below for one continuous surface.
═════════════════════════════════════════════════════════════════ */
/* — Peer chip row — */
.sfbar{gap:8px;padding:10px 0;align-items:center}
.sfbar .sfbtn,
.sfbar .cdd-btn{
padding:7px 13px;
border-radius:10px;
border:1px solid var(--color-border-secondary);
background:var(--color-background-primary);
color:var(--color-text-secondary);
font-size:12.5px;
font-weight:500;
font-family:inherit;
display:inline-flex;
align-items:center;
gap:6px;
white-space:nowrap;
box-shadow:none;
transition:border-color .15s, color .15s, background .15s;
}
.sfbar .sfbtn:hover:not([class*="on-"]),
.sfbar .cdd-btn:hover:not(.on){
border-color:var(--color-border-primary);
color:var(--color-text-primary);
background:var(--color-background-primary);
}
/* All active / selected chips look identical — solid brand purple, white text. No tier-specific colors. */
.sfbar .sfbtn[class*="on-"],
.sfbar .cdd-btn.on{
background:var(--color-brand);
color:#fff;
border-color:transparent;
box-shadow:none;
filter:none;
}
.sfbar .sfbtn[class*="on-"]:hover,
.sfbar .cdd-btn.on:hover{
background:var(--color-brand);
filter:brightness(1.08);
}
/* Dropdown-open ring — neutral, matches active chip */
.sfbar .cdd-open .cdd-btn{
border-color:var(--color-text-primary);
box-shadow:0 0 0 1px rgba(12,10,9,.08);
}
.sfbar .cdd-open .cdd-btn.on{
box-shadow:0 0 0 2px rgba(12,10,9,.18);
}
.sfbar .sfbtn:focus-visible,
.sfbar .cdd-btn:focus-visible{
outline:2px solid var(--color-text-primary);
outline-offset:2px;
}
/* — Context title card — tier-aware, docks into cards below — */
.pop-head{
--pop-accent:var(--color-brand);
--pop-accent-bg:var(--brand-soft, #E6F4F1);
--pop-accent-ink:#26215C;
display:flex;
gap:16px;
align-items:stretch;
background:var(--color-background-primary);
border:1px solid var(--color-border-tertiary);
border-radius:12px 12px 0 0;
padding:18px 20px;
margin:0 0 0;
position:relative;
overflow:hidden;
}
.pop-head::before{display:none}
.pop-head-ic{display:none !important}
.pop-head-mid{flex:1;min-width:0;align-self:center}
.pop-head-lbl{
display:inline-flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;
color:var(--pop-accent-ink);
margin-bottom:5px;
opacity:.9;
}
.pop-head-lbl::before{
content:'';
width:6px;height:6px;border-radius:50%;
background:var(--pop-accent);
flex-shrink:0;
}
.pop-head-t{
font-size:18px;font-weight:700;
color:var(--color-text-primary);
margin-bottom:4px;
line-height:1.25;
letter-spacing:-.01em;
}
.pop-head-t b{color:var(--pop-accent-ink);font-weight:700}
.pop-head-m{
font-size:12.5px;
color:var(--color-text-secondary);
line-height:1.55;
max-width:680px;
}
/* Tier-specific accent — applied via class on .pop-head */
.pop-head.head-t1{--pop-accent:var(--t1c);--pop-accent-bg:var(--t1bg);--pop-accent-ink:var(--t1tx)}
.pop-head.head-t2{--pop-accent:var(--t2c);--pop-accent-bg:var(--t2bg);--pop-accent-ink:var(--t2tx)}
/* Trending (t3) banner uses brand purple instead of amber — keeps t3 amber intact elsewhere (caution pills, score gradient). */
.pop-head.head-t3{--pop-accent:#1F7A6B;--pop-accent-bg:#E6F4F1;--pop-accent-ink:#0F4A41}
.pop-head.head-t4{--pop-accent:var(--t4c);--pop-accent-bg:var(--t4bg);--pop-accent-ink:var(--t4tx)}
/* Unproven banner uses amber/caution tone — distinct from Trending (purple) to signal 'evidence unclear'. */
.pop-head.head-unproven{--pop-accent:#B45309;--pop-accent-bg:#FEF3C7;--pop-accent-ink:#78350F}
/* Dock the pop-head to the cards below: pop-head has rounded top only,
cards form a shared container with rounded bottom. */
.pop-head + .scards{
border:1px solid var(--color-border-tertiary);
border-top:0;
border-radius:0 0 12px 12px;
overflow:hidden;
background:var(--color-background-primary);
padding:10px;
margin-top:0;
}
/* When docked, tighten card spacing and make each feel part of the group */
.pop-head + .scards .sc,
.pop-head + .scards .sr-card{
margin-bottom:8px;
box-shadow:none;
}
.pop-head + .scards .sc:last-child,
.pop-head + .scards .sr-card:last-child{margin-bottom:0}
/* When no title card (e.g. search results), scards stays standalone */
.tier-sec > .scards:first-child{
border:0;background:transparent;padding:0;border-radius:0;
}
@media(max-width:600px){
.pop-head{padding:16px;gap:12px}
.pop-head-ic{width:38px;height:38px;border-radius:9px}
.pop-head-t{font-size:15.5px}
.pop-head-m{font-size:12px}
}
/* Become-a-Contributor CTA (About page) — moved out of inline