:root{ color-scheme:light; /* native scrollbar/controls follow the theme */ --paper:#F7F4EE; --panel:#FDFBF7; --ink:#191714; --muted:#6E675C; --line:#E2DBCF; --pre:#0B6E63; --pre-ink:#084C44; --pre-soft:#DCEBE7; --post:#C2410C; --post-ink:#8F2E08; --post-soft:#F6E3D7; --crit:#B91C1C; --crit-soft:#F7DEDE; --warn:#B45309; --warn-soft:#F6EAD2; --ok:#166534; --ok-soft:#DFEEDD; --violet:#6D28D9; --violet-ink:#4C1D95; --violet-soft:#EDE7F6; --on-accent:#fff; --thead:#F3EEE3; /* surface accents */ --hero-line:transparent; --controls-bg:rgba(247,244,238,.92); --tip-bg:var(--ink); --tip-ink:#F2EDE3; --card-shadow:0 10px 26px -14px rgba(25,23,20,.35); --scdm-bg:#E9E4D8; --scdm-ink:var(--ink); --scdm-line:#8A8172; --ghost:#8A8172; /* hero surface — a dark "console" band that stays dark in BOTH themes. Values live here (base); a future theme can restyle by overriding this group. Per-theme --hero-line (border) is separate. */ --hero-bg:#14120F; --hero-ink:#F2EDE3; --hero-muted:#A79E8F; --hero-soft:#C9C0B0; --hero-sub:#B7AE9F; --hero-hl:#EDE7DA; --hero-ctrl-bg:#211E19; --hero-ctrl-line:#3A352C; --hero-ctrl-ink:#9A9080; --hero-stat-l:#8A8172; --hero-asym-bg:rgba(255,255,255,.03); --hero-asym-ink:#CFC6B5; --hero-glow-pre:rgba(18,107,98,.35); --hero-glow-post:rgba(194,65,12,.28); --serif:"Fraunces", Georgia, serif; --sans:"Instrument Sans", -apple-system, "Segoe UI", sans-serif; --mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace; --nav-h:32px; /* sticky section-nav strip: 8+8 wrap padding + 10px line + 3+3 link padding */ } :root[data-theme="dark"]{ color-scheme:dark; /* native scrollbar renders dark in dark mode */ /* hero band: paper is #14120F, so give the console band a darker distinct surface */ --hero-bg:#0F0D0B; --paper:#14120F; --panel:#1D1A15; --ink:#F2EDE3; --muted:#A79E8F; --line:#3A352C; --pre:#2DD4BF; --pre-ink:#7DD3C8; --pre-soft:#10332E; --post:#FB923C; --post-ink:#FDBA74; --post-soft:#3A2416; --crit:#F87171; --crit-soft:#3A1414; --warn:#FBBF24; --warn-soft:#3A2E14; --ok:#4ADE80; --ok-soft:#14301C; --violet:#C4B5FD; --violet-ink:#D6CBFA; --violet-soft:#241B3A; --on-accent:#14120F; --thead:#221E18; /* surface accents */ --hero-line:#2A251D; --controls-bg:rgba(20,18,15,.92); --tip-bg:#F2EDE3; --tip-ink:#14120F; --card-shadow:0 10px 26px -12px rgba(0,0,0,.75); --scdm-bg:#2A251D; --scdm-ink:#C9C0B0; --scdm-line:#6E675C; --ghost:#948B7C; } *{margin:0;padding:0;box-sizing:border-box} :focus-visible{outline:2px solid var(--post);outline-offset:2px} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} /* ============ HERO ============ */ .hero{--hero-pad-bottom:44px;background:var(--hero-bg);color:var(--hero-ink);padding:60px 0 var(--hero-pad-bottom);position:relative;overflow:hidden;border-bottom:1px solid var(--hero-line)} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(700px 340px at 82% -10%, var(--hero-glow-pre), transparent 65%), radial-gradient(560px 300px at 8% 115%, var(--hero-glow-post), transparent 65%);pointer-events:none} .hero .wrap{position:relative} .kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hero-muted);display:flex;align-items:center;gap:10px;margin-bottom:20px} .kicker::before{content:"";width:28px;height:2px;background:var(--hero-ink);display:inline-block} .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5.4vw,54px);line-height:1.06;letter-spacing:-0.015em;max-width:900px;text-wrap:balance} .hero h1 em{font-style:italic;font-weight:400;color:var(--hero-soft)} .hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:30px} .toggle{display:inline-flex;background:var(--hero-ctrl-bg);border:1px solid var(--hero-ctrl-line);border-radius:999px;padding:4px;gap:4px} .toggle button{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hero-ctrl-ink);background:transparent;border:none;border-radius:999px;padding:9px 18px;cursor:pointer;transition:all .25s} .toggle button:hover{color:var(--hero-hl)} .toggle button.on[data-sc="new"]{background:var(--post);color:var(--on-accent)} .toggle button.on[data-sc="old"]{background:var(--pre);color:var(--on-accent)} .theme-btn{ font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; background:var(--hero-ctrl-bg);color:var(--hero-hl);border:1px solid var(--hero-ctrl-line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:all .25s; } .theme-btn:hover{border-color:var(--hero-ink)} /* ============ TABS & CONTROLS ============ */ #sec-nav{position:sticky;top:0;z-index:60;background:var(--controls-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} #sec-nav .wrap{display:flex;gap:6px;padding-top:8px;padding-bottom:8px;overflow-x:auto;scrollbar-width:none} #sec-nav .wrap::-webkit-scrollbar{display:none} /* right-edge fade when tab strip overflows (phones) */ #sec-nav .wrap.more{mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)} #sec-nav a.tab-btn{font-family:var(--mono);font-size:10px;line-height:1;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;padding:6px 12px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:all .15s} #sec-nav a.tab-btn:hover{color:var(--ink);border-color:var(--line);background:var(--panel)} #sec-nav a.tab-btn.on{color:var(--pre-ink);background:var(--pre-soft);border-color:var(--pre)} #sec-nav a.tab-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px} #sec-nav a.tab-all{margin-left:auto;border:1px dashed var(--line)} #sec-nav a.tab-all.on{border-style:solid} /* Research sub-nav (chips under the Res tab) */ #research-subnav{position:sticky;top:var(--nav-h,44px);z-index:55;background:var(--controls-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} #research-subnav[hidden]{display:none} #research-subnav .wrap{display:flex;gap:6px;padding-top:8px;padding-bottom:8px;overflow-x:auto;scrollbar-width:none} #research-subnav .wrap::-webkit-scrollbar{display:none} #research-subnav a.sub-btn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;padding:5px 11px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:all .15s} #research-subnav a.sub-btn:hover{color:var(--ink);border-color:var(--line);background:var(--panel)} #research-subnav a.sub-btn.on{color:var(--pre-ink);background:var(--pre-soft);border-color:var(--pre)} body:not([data-active-tab]) #research-subnav{display:none} /* Tab visibility rules */ body[data-active-tab]:not([data-active-tab="all"]) section{display:none !important} body[data-active-tab="ledger-sec"] #ledger-sec, body[data-active-tab="plan-sec"] #plan-sec, body[data-active-tab="sim-sec"] #sim-sec, body[data-active-tab="hr-sec"] #hr-sec, body[data-active-tab="fine-sec"] #fine-sec, body[data-active-tab="trial-sec"] #trial-sec, body[data-active-tab="death-sec"] #death-sec, body[data-active-tab="dise-sec"] #dise-sec, body[data-active-tab="ing-sec"] #ing-sec, body[data-active-tab="age-sec"] #age-sec, body[data-active-tab="adult-sec"] #adult-sec, body[data-active-tab="vaxunvax-sec"] #vaxunvax-sec{display:block !important} section{padding:44px 0} .sec-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:10px} .sec-label::before{content:attr(data-n);color:var(--ink)} .sec-label:not([data-n])::before{display:none} h2{font-family:var(--serif);font-weight:600;letter-spacing:-0.01em;font-size:clamp(24px,3.4vw,32px);line-height:1.15;margin-bottom:8px;text-wrap:balance} .sec-intro{color:var(--muted);max-width:820px;margin-bottom:24px;font-size:15px} /* planner intro fold: matches the .plan-ctl-fold marker treatment */ #plan-intro>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px} #plan-intro>summary::-webkit-details-marker{display:none} #plan-intro>summary::before{content:"▸";font-size:14px;transition:transform .15s} #plan-intro[open]>summary::before{transform:rotate(90deg)} #plan-intro p{margin:12px 0 0;line-height:1.6} /* ============ DETAIL ============ */ .detail-top-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap} .btn-subtle{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s} .btn-subtle:hover{border-color:var(--ink);background:var(--panel)} .vax-quick-picker{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;max-width:100%} .vax-quick-picker::-webkit-scrollbar{display:none} .vax-pill{font-family:var(--mono);font-size:10px;font-weight:600;padding:4px 9px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s} .vax-pill:hover{color:var(--ink);border-color:var(--ink)} .vax-pill.on{color:var(--paper);background:var(--ink);border-color:var(--ink)} .vax-pill.core.on{background:var(--pre);border-color:var(--pre);color:#fff} .vax-pill.demoted.on{background:var(--post);border-color:var(--post);color:#fff} .vax-pill.scdm.on{background:var(--scdm-line);border-color:var(--scdm-line);color:#fff} .detail-grid{display:grid;grid-template-columns:minmax(360px,460px) 1fr;gap:36px;align-items:start} @media (max-width:880px){.detail-grid{grid-template-columns:1fr}} .pent-wrap{position:relative;display:flex;flex-direction:column;gap:14px} .pent-wrap .dcard-media{height:150px;margin:0;border-radius:12px} .pent-wrap .dcard-media:empty{display:none} .pent-wrap .dcard-media img,.pent-wrap .dcard-media .dmedia-emoji{border-radius:12px} .pent-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:2px} .pent-kicker{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .pent-scale{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.05em;color:var(--muted);opacity:.8} #big-pent{margin:2px 0} #big-pent svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto} .pent-legend{display:flex;gap:8px 18px;margin-top:2px;padding-top:12px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:10.5px;color:var(--muted);flex-wrap:wrap} .pent-legend .li{display:flex;align-items:center;gap:7px} .pent-legend .li.ma{font-size:9.5px;opacity:.85} .pent-legend .box{width:12px;height:12px;border-radius:3px;flex:none} /* Re-render feedback: on an animated re-render the active polygon gets a brief glow pulse and the value badges pop in while JS ticks the numbers up (renderDetail in pentagon-widget.js). --pent-glow is set to the active scenario color so the halo matches the stroke. The global prefers-reduced-motion rule above disables both keyframes. */ #big-pent.pent-flash #active-poly{animation:pentPulse .7s ease-out} #big-pent.pent-flash .pent-val{animation:pentVal .45s ease-out backwards} @keyframes pentPulse{ 0%{stroke-width:2.5;filter:drop-shadow(0 0 0 transparent)} 40%{stroke-width:4.5;filter:drop-shadow(0 0 9px var(--pent-glow,transparent))} 100%{stroke-width:2.5;filter:drop-shadow(0 0 0 transparent)} } @keyframes pentVal{ 0%{opacity:0;transform:translateY(3px)} 100%{opacity:1;transform:none} } @media (max-width:480px){ .pent-wrap{gap:10px} .pent-legend{gap:6px 14px} .pent-legend .li.ma{flex-basis:100%} } .d-status{margin-top:12px} .d-rows{margin-top:18px;display:flex;flex-direction:column;gap:10px} .d-row{display:flex;gap:14px;font-size:13.5px;line-height:1.55;border-top:1px dashed var(--line);padding-top:10px} .d-row .k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:118px;padding-top:2px} .d-row .v{flex:1} .d-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px} @media (max-width:560px){.d-scores{grid-template-columns:1fr 1fr}} .d-score{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px} .d-score .n{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1} .d-score .l{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.4} .tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px} .tag.core{background:var(--pre-soft);color:var(--pre-ink)} .tag.demoted{background:var(--post-soft);color:var(--post-ink)} .tag.scdm{background:var(--scdm-bg);color:var(--scdm-ink)} /* ============ VACCINE POPUP MODAL ============ */ /* Full-viewport overlay: a fixed backdrop behind a centered, self-scrolling shell. Replaces the old sticky #detail-sec side panel. body.modal-open locks page scroll. */ body.modal-open{overflow:hidden} #vax-modal[hidden]{display:none} #vax-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px} .modal-backdrop{position:absolute;inset:0;background:rgba(15,14,12,.62);backdrop-filter:blur(4px);animation:modalFade .18s ease both} @keyframes modalFade{from{opacity:0}to{opacity:1}} .modal-shell{position:relative;z-index:1;width:100%;max-width:980px;max-height:calc(100vh - 36px);overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -18px rgba(0,0,0,.5);animation:modalIn .2s ease both;scrollbar-width:thin} .modal-shell::-webkit-scrollbar{width:8px} .modal-shell::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} @keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .modal-shell .detail-top-bar{position:sticky;top:0;z-index:2;background:var(--panel);padding:14px 18px 10px;margin:0;border-bottom:1px solid var(--line)} .modal-shell h2#d-title{margin:18px 18px 4px} .modal-shell .detail-grid{padding:0 18px 18px;margin-top:6px} .modal-disease{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)} .modal-disease:empty{display:none} @media (max-width:880px){ .modal-shell .detail-grid{grid-template-columns:1fr} .modal-shell{max-height:calc(100vh - 24px)} #vax-modal{padding:12px} } /* ============ GRID ============ */ @keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .sc-crit{background:var(--crit-soft);color:var(--crit)} .sc-warn{background:var(--post-soft);color:var(--post-ink)} .sc-mid{background:var(--warn-soft);color:var(--warn)} .sc-ok{background:var(--ok-soft);color:var(--ok)} .death-box{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--paper)} .death-box.on{border-color:#E11D48;background:color-mix(in srgb, #E11D48 14%, var(--paper));box-shadow:0 0 0 1px #E11D48} .death-k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E11D48;margin-bottom:8px} .death-box:not(.on) .death-k{color:var(--muted)} .death-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} @media (max-width:640px){.death-grid{grid-template-columns:1fr 1fr}} .death-grid .dn{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1} .death-grid .dl{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px;line-height:1.35;text-transform:uppercase;letter-spacing:.06em} .death-cite{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.55;margin-top:10px} .death-cite a{color:inherit;text-decoration:underline} .death-mismatch{font-family:var(--mono);font-size:11.5px;color:var(--warn);margin-top:8px} #death-table tr.death-row td{background:color-mix(in srgb, #E11D48 12%, transparent)} #death-table .death-hot{color:#E11D48;font-weight:700} @media (max-width:480px){ .wrap{padding:0 16px} /* readability floor: 9–9.5px micro-labels blur on small phone screens; 10px mono is the minimum we'll show */ .d-score .l,.hr-basis, :is(.plan-honest-fold,.plan-honest .slider-how) summary,.tl-now,.tl-given,.excl .why{font-size:10px} /* ledger/trials stacked-row labels: tbody bumps specificity past the 640px base so the 10px floor actually lands */ table.ledger tbody td::before{font-size:10px} .plan-scale{flex-wrap:wrap;row-gap:2px} } /* ============ LEDGER ============ */ .tblwrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)} table.ledger{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel);min-width:980px} table.ledger th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:13px 14px;border-bottom:2px solid var(--line);background:var(--thead);white-space:nowrap} table.ledger td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5} table.ledger tr:last-child td{border-bottom:none} table.ledger .vname{font-family:var(--serif);font-size:15.5px;font-weight:600} table.ledger .mono{font-family:var(--mono);font-size:11.5px} table.ledger .num{font-family:var(--mono);font-weight:600;text-align:right} /* numeric headers (cols 6+ of the main ledger) line up with the .num cells; the trials table has no 6th column */ table.ledger th:nth-child(n+6){text-align:right} /* Trial N column holds stated cohort text, not a bare number — keep it left */ table.ledger td.trial-n{text-align:left} table.ledger .rank{font-family:var(--mono);color:var(--muted);font-size:11px} /* Net · old drops the 5-pt study-depth term, so its max is lower than Net · Trump — de-emphasize it */ table.ledger th.old{opacity:.65} table.ledger td.old{opacity:.8;font-size:12px;color:var(--muted)} table.ledger td.netcell{border-radius:6px} @media (max-width:640px){ /* stacked card rows: thead hidden, every cell becomes a labeled block (labels from td[data-l]) */ table.ledger{min-width:0;display:block} table.ledger thead{display:none} table.ledger tbody{display:block} table.ledger tbody tr{display:block;border:1px solid var(--line);border-radius:10px;margin:10px 0} table.ledger td{display:block;padding:9px 12px;border-bottom:1px dashed var(--line)} table.ledger td:last-child{border-bottom:none} table.ledger td::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} /* stacked rows label from the left — numeric cells align with their labels, not to the right edge */ table.ledger td.num{text-align:left} } /* ============ HIGH-RISK CARDS ============ */ .hr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:860px){.hr-grid{grid-template-columns:1fr}} .hr-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px} .hr-card.unclear{border-color:var(--warn);border-style:dashed} .hr-card .head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px} .hr-card .head h3{font-family:var(--serif);font-size:18px;font-weight:600} .hr-basis{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px} .hr-basis.pub{background:var(--pre-soft);color:var(--pre-ink)} .hr-basis.pkg{background:var(--warn-soft);color:var(--warn)} .hr-basis.timing{background:var(--scdm-bg);color:var(--scdm-ink)} .hr-card ul{margin-left:18px;font-size:13.5px;line-height:1.6} .hr-card li{margin:5px 0} .hr-card .hnote{font-size:12.5px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);line-height:1.55} .hr-card .hnote b{color:var(--ink)} .hr-card .babyline{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--crit);margin-top:10px} /* ============ PLANNER ============ */ #plan-sec{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .plan-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .plan-scen{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)} .plan-scen button{border:none;background:transparent;color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;padding:8px 13px;cursor:pointer;transition:all .15s;text-transform:uppercase} .plan-scen button.on{font-weight:700} .plan-scen button.on[data-pc="new"]{background:var(--post);color:var(--on-accent)} .plan-scen button.on[data-pc="old"]{background:var(--pre);color:var(--on-accent)} .dise-readout{font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-top:9px;line-height:1.5} .dise-readout b{font-size:14px;color:var(--pre-ink)} .plan-panel{display:grid;grid-template-columns:390px 1fr;gap:28px;align-items:start} @media (max-width:980px){.plan-panel{grid-template-columns:1fr} .plan-out{order:1} .plan-ctl{order:2}} .plan-ctl{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px} .plan-ctl h3{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:14px} .plan-ctl-fold>summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:0} .plan-ctl-fold>summary::-webkit-details-marker{display:none} .plan-ctl-fold>summary::before{content:"▸";font-size:14px;color:var(--muted);transition:transform .15s} .plan-ctl-fold[open]>summary::before{transform:rotate(90deg)} .plan-ctl-fold[open]>summary{margin-bottom:14px} .plan-ctl label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px} .plan-ctl label:first-of-type{margin-top:0} .plan-ctl .plan-group{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px} .plan-ctl input[type=range]{width:100%;accent-color:var(--post);cursor:pointer} .plan-ctl #age{accent-color:var(--ink)} .tol-readout{font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-top:9px;line-height:1.5} .tol-readout b{font-size:15px;color:var(--post-ink)} .plan-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.05em} .unit-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px;margin-top:12px;background:var(--panel)} .unit-toggle button{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:transparent;border:none;border-radius:999px;padding:6px 12px;cursor:pointer;transition:all .2s} .unit-toggle button:hover{color:var(--ink)} .unit-toggle button.on{background:var(--ink);color:var(--paper)} .chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;margin-top:13px;color:var(--ink);cursor:pointer} .chk input{margin-top:2px;accent-color:var(--post);width:16px;height:16px;cursor:pointer;flex:none} .chk small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.5} .chk .chk-sub{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.5} .chk.disabled{opacity:.55;cursor:not-allowed} .plan-honest{margin-top:14px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;font-size:12px;line-height:1.55;color:var(--muted)} .plan-honest b{color:var(--ink)} :is(.plan-honest-fold,.plan-honest .slider-how) summary{cursor:pointer;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 0} :is(.plan-honest-fold,.plan-honest .slider-how)[open] summary{color:var(--pre-ink)} .plan-honest-fold p{margin:6px 0 0} .plan-honest-fold{margin-top:8px} .plan-ctl .chk-first{margin-top:0} .plan-ctl .dise-label{margin-top:18px;color:var(--pre-ink);font-weight:600} #int-val{color:var(--ink)} .plan-honest .slider-how>div{margin-top:6px} #plan-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .pstat{flex:1;min-width:110px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-align:center} .pstat .n{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1} .pstat .l{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px} .tl{display:flex;flex-direction:column;gap:8px} .tl-visit{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px} @media (max-width:600px){.tl-visit{grid-template-columns:1fr}} .tl-visit.now{border-color:var(--post);border-width:2px} .tl-visit.past{opacity:.6} .tl-when{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.5} .tl-when b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink)} .tl-now{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--post-ink);background:var(--post-soft);border-radius:4px;padding:2px 6px;margin-left:4px} .tl-given{font-size:9px} .tl-doses{display:flex;flex-wrap:wrap;gap:7px} .dose-chip{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 9px;line-height:1.4} .dose-chip.invalid{border-color:var(--crit);color:var(--crit);border-style:dashed;cursor:help} .dose-chip.scdm{border-style:dashed} .tl-marker{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--post-ink);margin:8px 0 2px;display:flex;align-items:center;gap:10px} .tl-marker::after{content:"";flex:1;height:1px;background:var(--post);opacity:.5} .plan-excluded{margin-top:22px} .plan-excluded h3{font-family:var(--serif);font-size:17px;font-weight:600;margin-bottom:10px} .excl-chips{display:flex;flex-wrap:wrap;gap:8px} .excl{font-family:var(--mono);font-size:11px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;line-height:1.45} .excl.risk{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb, var(--crit) 35%, transparent)} .excl.sc{background:var(--post-soft);color:var(--post-ink);border-color:color-mix(in srgb, var(--post) 35%, transparent)} .excl.dise{background:var(--pre-soft);color:var(--pre-ink);border-color:color-mix(in srgb, var(--pre) 35%, transparent)} .excl.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb, var(--ok) 35%, transparent)} .excl.untested{background:var(--violet-soft);color:var(--violet-ink);border-color:color-mix(in srgb, var(--violet) 45%, transparent)} .excl.fraud{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 40%, transparent)} .excl.note{border-style:dashed;color:var(--muted)} .ev-readout{font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-top:9px;line-height:1.5} .ev-readout b{font-size:14px;color:var(--violet-ink)} .excl .why{display:block;font-size:9.5px;opacity:.85;margin-top:3px;font-weight:400} /* ============ CAVEAT ============ */ .caveat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 28px;font-size:14px;line-height:1.65} .caveat h3{font-family:var(--serif);font-size:18px;font-weight:600;margin-bottom:10px} .caveat ul{margin-left:20px} .caveat li{margin:8px 0} .caveat .fine{font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-top:16px;line-height:1.7} footer{padding:34px 0 56px} .foot{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.7} #tip{position:fixed;z-index:99;background:var(--tip-bg);color:var(--tip-ink);font-family:var(--mono);font-size:11px;line-height:1.5;padding:8px 11px;border-radius:8px;max-width:min(420px, calc(100vw - 24px));pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)} #tip.show{opacity:1} /* author-integrity flag on Thorsen-coauthored papers (Madsen 2002/2003) */ .cite-flag{cursor:help;text-decoration:underline dotted;text-underline-offset:3px} .cite-flag-mark{ display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;font-style:normal; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; color:var(--crit);background:var(--crit-soft);border-radius:999px; padding:1px 7px;margin-left:5px;white-space:nowrap;vertical-align:1px; } /* ============ STATIC-STYLE UTILITIES (extracted from inline style attrs) ============ */ .ml8{margin-left:8px} .mt10{margin-top:10px} .mt20{margin-top:20px} .ma{margin-left:auto} #leg-active{background:var(--post)} .box.ghost{background:transparent;border:2px dashed var(--ghost)} #age-readout{color:var(--muted)} .h3-violet{color:var(--violet-ink)} .k{font-weight:600} .k.orange{color:var(--post-ink)} .k.red{color:var(--crit)} .k.teal{color:var(--pre-ink)} .k.violet{color:var(--violet-ink)} .k.amber{color:var(--warn)} .u-muted{color:var(--muted)} .u-pre{color:var(--pre-ink)} .u-post{color:var(--post-ink)} .u-sec{font-size:10.5px} .na-tag{color:var(--warn);font-size:10.5px} .trial-n{font-size:14px} .trial-src{color:var(--muted);font-size:10.5px;line-height:1.6} /* ================= DISEASE FIELD GUIDE (sec 09) ================= */ .dise-ctl{display:flex;align-items:center;gap:10px;margin:6px 0 2px;flex-wrap:wrap} .dise-lbl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .dise-select{font-family:var(--sans);font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer} .dise-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)} .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:16px} #dise-grid.settled .dcard{animation:none} .dcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;animation:cardIn .4s both} .dcard:hover{transform:translateY(-3px);box-shadow:var(--card-shadow)} .dcard-media{position:relative;height:150px;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden} .dcard-media img{width:100%;height:100%;object-fit:cover;display:block} .dmedia-emoji{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:64px;line-height:1} .dcard-media.noimg img{display:none} .dcard-media.noimg .dmedia-emoji{display:flex} .dcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:11px;flex:1} .dcard h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.15;margin:0} .dagent{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:-6px} .dcard .dlbl{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .dhow{font-size:13px;line-height:1.55} .dhow,.dsevere{font-family:var(--sans);color:var(--ink)} .cont{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 9px;align-items:center} .cont-lbl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .cont-meter{display:flex;gap:3px} .cont-meter .pip{width:16px;height:6px;border-radius:3px;background:var(--line);display:block} .cont-meter .pip.on:nth-child(1),.cont-meter .pip.on:nth-child(2){background:var(--ok)} .cont-meter .pip.on:nth-child(3){background:var(--warn)} .cont-meter .pip.on:nth-child(4),.cont-meter .pip.on:nth-child(5){background:var(--crit)} .cont-r0{grid-column:1/-1;font-family:var(--mono);font-size:10px;color:var(--ink)} .sym-list{display:flex;flex-direction:column;gap:5px} .sym{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.4} .sym .sd{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto} .sym .sd.mild{background:var(--ok)} .sym .sd.mod{background:var(--warn)} .sym .sd.sev{background:var(--crit)} .dsevere{background:var(--crit-soft);border-left:3px solid var(--crit);border-radius:6px;padding:7px 10px} .dsevere .dlbl{color:var(--crit)} .dsevere{font-size:12.5px;line-height:1.45;font-family:var(--sans)} .dexp{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--pre-ink);background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .15s,border-color .15s} .dexp:hover{background:var(--pre-soft);border-color:var(--pre)} .dexp-body{display:none;flex-direction:column;gap:12px;padding-top:2px} .dcard.open .dexp-body{display:flex} .dx p{font-size:13px;line-height:1.5;margin:0} .dx ul{margin:4px 0 0;padding-left:16px} .dx li{font-size:12.5px;line-height:1.45;margin:2px 0} .dseason{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px} .dlink{margin-top:4px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--pre-ink);background:var(--pre-soft);border:1px solid var(--pre);border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .15s} .dlink:hover{background:var(--pre);color:#fff} /* ================= CHRONIC RISK BADGE IN TIMELINE ================= */ .dose-chronic { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; margin-left: 5px; padding: 1px 4px; border-radius: 4px; background: var(--crit-soft); color: var(--crit); vertical-align: 1px; } .dose-chronic.thimerosal { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; } [data-theme="dark"] .dose-chronic.thimerosal { background: #450a0a; color: #fca5a5; border: 1px solid #dc2626; } .chronic-stat .n { color: var(--crit); } .thim-pill { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #fee2e2; color: #991b1b; border: 1px solid #f87171; border-radius: 4px; padding: 1px 4px; vertical-align: 1px; } [data-theme="dark"] .thim-pill { background: #450a0a; color: #fca5a5; border-color: #dc2626; } .plan-thim-fold { margin-top: 14px; } .plan-thim-fold summary { font-weight: 600; color: var(--crit); cursor: pointer; user-select: none; } .thim-drawer { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ink); } .thimerosal-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 10px 0; line-height: 1.4; } .thimerosal-table th, .thimerosal-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .thimerosal-table th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg); } .thimerosal-table .rr-val { font-family: var(--mono); font-weight: 700; color: var(--crit); } .thim-note { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.45; } /* ================= SIMULATOR WIDGET (sec Sim) ================= */ #sim-sec { border-top: 1px solid var(--line); padding: 48px 0; background: var(--paper); } .sim-panel { display: grid; grid-template-columns: 280px 1fr; gap: 24px; margin-top: 20px; align-items: start; } @media (max-width: 900px) { .sim-panel { grid-template-columns: 1fr; } } .sim-left { display: flex; flex-direction: column; gap: 14px; align-items: center; /* Keep the baby + controls in view while the (taller) right column with the mosaic scrolls: pin just below the sticky section-nav. */ position: sticky; top: calc(var(--nav-h, 44px) + 12px); z-index: 1; } .sim-canvas-box { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; box-shadow: var(--card-shadow); width: 100%; max-width: 264px; box-sizing: border-box; } #sim-canvas { width: 240px; height: 240px; max-width: 100%; border-radius: 10px; cursor: pointer; image-rendering: pixelated; touch-action: manipulation; background: var(--bg); box-sizing: border-box; } #sim-canvas:focus-visible { outline: 2px solid var(--pre); } .sim-canvas-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 8px; font-weight: 600; } .sim-step-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--pre-ink); background: var(--pre-soft); border: 1px solid var(--pre); border-radius: 6px; padding: 2px 8px; margin-top: 4px; display: inline-block; } .sim-controls { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: center; } .sim-btn { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; transition: all 0.15s ease; } .sim-btn:hover { background: var(--bg); border-color: var(--muted); } .sim-btn.primary { background: var(--pre); color: #fff; border-color: var(--pre); } .sim-btn.primary:hover { filter: brightness(1.1); } .sim-btn.primary:disabled { background: var(--line); color: var(--muted); border-color: var(--line); cursor: not-allowed; } .sim-btn.subtle { color: var(--muted); font-size: 12px; } .sim-btn.running { background: var(--warn); color: #fff; border-color: var(--warn); } .sim-banner { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.45; color: var(--ink); width: 100%; box-sizing: border-box; } .sim-pill { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; } .sim-pill.ready { background: var(--line); color: var(--ink); } .sim-pill.active { background: var(--warn); color: #fff; } .sim-pill.complete { background: var(--ok); color: #fff; } .sim-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .sim-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; box-shadow: var(--card-shadow); box-sizing: border-box; } .sim-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .sim-card-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: inline-block; margin-bottom: 4px; padding: 1px 6px; border-radius: 4px; } .sim-card-tag.crit { background: var(--crit-soft); color: var(--crit); } .sim-card-tag.ok { background: var(--pre-soft); color: var(--pre-ink); } .sim-card h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0; color: var(--ink); } .sim-stat-big { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--crit); line-height: 1; } .sim-chronic-sub { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--crit); margin-top: 4px; } .sim-bar-wrap { position: relative; height: 14px; background: var(--line); border-radius: 7px; margin: 18px 0 26px; } .sim-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ok) 0%, var(--warn) 35%, var(--crit) 100%); border-radius: 7px; transition: width 0.35s ease-out; min-width: 14px; } .sim-bar-marker { position: absolute; top: -4px; width: 2px; height: 22px; background: var(--ink); opacity: 0.65; } .sim-bar-marker-label { position: absolute; top: 24px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; } .sim-chronic-fold { margin: 4px 0 0; } .sim-chronic-fold summary { cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 0; } .sim-chronic-fold summary::before { content: "▸"; color: var(--crit); transition: transform .2s; } .sim-chronic-fold[open] summary::before { transform: rotate(90deg); } .sim-chronic-fold summary::-webkit-details-marker { display: none; } .sim-chronic-fold-note { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 4px 0 10px; } .sim-chronic-cats { display: none; gap: 4px; margin-bottom: 14px; } .sim-chronic-fold[open] .sim-chronic-cats { display: grid; } .sim-chronic-cat { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-family: var(--mono); transition: background .15s; } .sim-chronic-cat:hover { background: var(--panel-2, rgba(255,255,255,.03)); } .sim-chronic-cat input { width: 15px; height: 15px; accent-color: var(--crit); cursor: pointer; flex: none; } .sim-chronic-cat-name { font-size: 12px; font-weight: 600; color: var(--ink); flex: 1; } .sim-chronic-cat-meta { font-size: 10px; font-weight: 600; color: var(--crit); } .sim-chronic-cat-pct { font-size: 11px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; } .sim-chronic-cat-track { flex: 1; height: 5px; margin-top: 4px; background: rgba(127,127,127,.18); border-radius: 3px; overflow: hidden; display: block; } .sim-chronic-cat-fill { display: block; height: 100%; width: 0; background: var(--crit); border-radius: 3px; transition: width .3s ease; } .sim-chronic-cat:has(input:not(:checked)) { opacity: .4; } .sim-chronic-thim { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-family: var(--mono); font-size: 11px; color: var(--ink); transition: background .15s; } .sim-chronic-thim:hover { background: var(--panel-2, rgba(255,255,255,.03)); } .sim-chronic-thim input { width: 15px; height: 15px; accent-color: var(--crit); cursor: pointer; flex: none; } .sim-chronic-thim span small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; } .sim-card-cite { font-size: 11.5px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; } .sim-prot-pill { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--pre-ink); background: var(--pre-soft); padding: 4px 8px; border-radius: 6px; } .sim-diseases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; } @media (max-width: 480px) { .sim-diseases-grid { grid-template-columns: 1fr; } } /* Population outcome mosaic (1,000,000 px) */ .sim-card-tag.viz { background: var(--violet-soft); color: var(--violet-ink); } .sim-mosaic-note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 8px 0 12px; } .sim-mosaic-note b { color: var(--ink); font-weight: 600; } .sim-mosaic-wrap { position: relative; display: flex; justify-content: center; background: #191d24; border-radius: 10px; padding: 12px; } #sim-mosaic { width: 100%; max-width: 620px; height: auto; display: block; border-radius: 4px; } .sim-mosaic-tip { position: absolute; pointer-events: none; font-family: var(--mono); font-size: 10px; font-weight: 600; color: #F2EDE3; background: #14120F; border: 1px solid #3A352C; border-radius: 6px; padding: 4px 8px; white-space: nowrap; opacity: 0; transition: opacity .12s; z-index: 5; } .sim-mosaic-tip.show { opacity: 1; } .sim-mosaic-distrib { margin-top: 14px; display: grid; gap: 6px; } .sim-mosaic-distrib-row { display: flex; align-items: center; gap: 10px; } .sim-mosaic-distrib-lbl { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 56px; flex: none; } .sim-mosaic-distbar { flex: 1; height: 14px; background: #191d24; border-radius: 7px; overflow: hidden; display: flex; } .sim-mosaic-distbar i { display: block; height: 100%; } .sim-mosaic-shift { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); margin-top: 8px; } .sim-mosaic-shift span { color: var(--muted); font-weight: 400; } .sim-mosaic-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .sim-mosaic-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 6px; cursor: pointer; user-select: none; transition: border-color .15s, box-shadow .15s; } .sim-mosaic-key:hover { border-color: var(--muted); } .sim-mosaic-key.pinned { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; } .sim-mosaic-key-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.25); } .sim-mosaic-key-count { color: var(--muted); font-weight: 400; } /* Mosaic zoom + minimap */ .sim-card-header-actions { display: flex; align-items: center; gap: 8px; } .sim-mosaic-zoom-btn { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .sim-mosaic-zoom-btn:hover { border-color: var(--muted); } .sim-mosaic-zoom-btn.active { border-color: var(--violet-ink); box-shadow: 0 0 0 1px var(--violet-ink) inset; } .sim-mosaic-zoom-slider { display: none; } .sim-mosaic-zoom-slider.show { display: block; width: 90px; height: 14px; accent-color: var(--violet-ink); } .sim-mosaic-view { position: relative; width: 100%; max-width: 620px; display: flex; justify-content: center; } .sim-mosaic-wrap.zoomed { cursor: grab; touch-action: none; } .sim-mosaic-wrap.zoomed:active { cursor: grabbing; } .sim-mosaic-mini-wrap { position: absolute; right: 18px; bottom: 18px; display: none; z-index: 6; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .sim-mosaic-wrap.zoomed .sim-mosaic-mini-wrap { display: block; } #sim-mosaic-mini { display: block; width: 92px; height: 92px; background: #191d24; border: 1px solid #3a4150; border-radius: 4px; cursor: crosshair; } .sim-mosaic-mini-close { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; display: grid; place-items: center; font: 700 11px/1 var(--mono); color: #F2EDE3; background: #14120F; border: 1px solid #3A352C; border-radius: 50%; cursor: pointer; padding: 0; } .sim-mosaic-mini-close:hover { border-color: var(--violet-ink); } .sim-dise-card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; transition: all 0.2s ease; } .sim-dise-card.full { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--bg)); } .sim-dise-card.partial { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--bg)); } .sim-dise-card.pulse { animation: simPulse 0.6s ease-out; } @keyframes simPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5); } 50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); } } .sim-dise-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .sim-dise-name { font-weight: 600; font-size: 12px; color: var(--ink); /* now a