/* Lipiget LDL Target — shared styles */
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --ink:#13203A; --muted:#5B6578; --line:#DCE1EA;
  --artery:#B3122E; --artery-soft:#F8E4E7; --gold:#B8860B;
  --ok:#14805E; --ok-soft:#E1F3EC; --warn:#B45F06; --warn-soft:#FCEBD7; --crit:#B3122E; --crit-soft:#F8E4E7;
  --bar:#0E1830; --bar-ink:#EEF2F8;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C1220; --surface:#141C2E; --ink:#E8EDF5; --muted:#9AA5B9; --line:#26314A;
  --artery:#F0546C; --artery-soft:#3A1520; --gold:#E0B44C;
  --ok:#3DC79A; --ok-soft:#0F2E25; --warn:#F2A54A; --warn-soft:#3A2510; --crit:#F0546C; --crit-soft:#3A1520;
  --bar:#05080F; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;min-height:100vh}
h1,h2,h3{font-family:var(--f-display);font-stretch:85%;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
.appbar{background:var(--bar);color:var(--bar-ink);padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 16px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.appbar .s{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.appbar .t{font-family:var(--f-display);font-stretch:80%;font-weight:800;font-size:1.45rem;line-height:1}
.appbar .who{font-size:.78rem;text-align:right;opacity:.85}
.appbar button.link{background:none;border:0;color:var(--bar-ink);opacity:.7;font:500 .74rem var(--f-body);padding:0;cursor:pointer;text-decoration:underline}
main{max-width:520px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:14px}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--artery)}
.muted{color:var(--muted)}
label.f{display:grid;gap:5px;font-size:.74rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
input,select{font:500 1rem var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%}
input[type=number],input.mono{font-family:var(--f-mono)}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--artery);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{border:0;background:var(--artery);color:#fff;font:600 1rem var(--f-body);padding:13px 16px;border-radius:12px;cursor:pointer;width:100%}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.err{background:var(--crit-soft);color:var(--crit);padding:10px 12px;border-radius:10px;font-size:.88rem}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{flex:1;border:0;background:transparent;font:600 .9rem var(--f-body);color:var(--muted);padding:9px;border-radius:7px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 .88rem var(--f-body);padding:8px 12px;border-radius:99px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--artery-soft);border-color:var(--artery);color:var(--artery);font-weight:600}
.chip[aria-pressed=true]::before{content:"✓ "}
.riskrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{font:700 .76rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.b-low{background:var(--ok-soft);color:var(--ok)}.b-mod{background:var(--warn-soft);color:var(--warn)}
.b-high,.b-vhigh{background:var(--crit-soft);color:var(--crit)}
.target{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);text-align:right}
.target b{font-family:var(--f-display);font-stretch:80%;font-size:1.7rem;color:var(--ink);font-weight:800}
.gauge{position:relative;height:58px;margin-inline:6px}
.track{position:absolute;left:0;right:0;top:22px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--ok-soft),var(--warn-soft) 50%,var(--crit-soft))}
.mk{position:absolute;top:14px;transform:translateX(-50%);display:grid;justify-items:center}
.mk i{display:block;width:3px;height:26px;border-radius:2px}
.mk em{font:500 .64rem var(--f-mono);font-style:normal;white-space:nowrap;margin-top:2px}
.mk.cur i{background:var(--ink)} .mk.cur em{color:var(--ink)}
.mk.tgt i{background:var(--ok)} .mk.tgt em{color:var(--ok);position:absolute;top:-15px}
.mk.prj i{background:var(--artery)} .mk.prj em{color:var(--artery)}
.need{display:flex;justify-content:space-between;font-size:.9rem}
.need b{font-family:var(--f-mono)}
.rec{border:1.5px solid var(--artery);border-radius:12px;padding:14px;display:grid;gap:4px;background:var(--surface)}
.rec .k{font:600 .68rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--artery)}
.rec .n{font-family:var(--f-display);font-stretch:80%;font-size:1.6rem;font-weight:800;line-height:1.1}
.rec .d{font-size:.88rem;color:var(--muted)}
.rec.atgoal{border-color:var(--ok)} .rec.atgoal .k{color:var(--ok)}
.fine{font-size:.72rem;color:var(--muted);line-height:1.45}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ladder button{font:500 .74rem var(--f-mono);text-align:center;padding:9px 4px;border-radius:8px;background:var(--bg);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.ladder button:hover:not(:disabled){border-color:var(--artery)}
.ladder button.on{background:var(--artery);border-color:var(--artery);color:#fff}
.ladder button.pick{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ladder button.cur{border-color:var(--ink);border-width:2px}
.ladder button:disabled{opacity:.45;cursor:default}
.rec.miss{border-color:var(--warn)} .rec.miss .k{color:var(--warn)}
.reset{background:none;border:0;padding:0;font:500 .78rem var(--f-body);color:var(--artery);text-decoration:underline;cursor:pointer;justify-self:start}
@media (prefers-reduced-motion:no-preference){.mk{transition:left .35s ease}}