:root{--bg:#f4f6f9;--card:#ffffff;--ink:#141a21;--muted:#657080;--line:#e4e8ee;--accent:#2563eb;--accent-ink:#fff;
 --A:#16a34a;--B:#65a30d;--C:#d97706;--D:#ea580c;--F:#dc2626;--radius:16px;--shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1117;--card:#161b22;--ink:#e6edf3;--muted:#8b97a5;--line:#2a3340;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--bg:#0d1117;--card:#161b22;--ink:#e6edf3;--muted:#8b97a5;--line:#2a3340}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
a{color:var(--accent)}.wrap{max-width:920px;margin:0 auto;padding:0 16px 48px}
.muted{color:var(--muted)}.small{font-size:.9rem}
h1{font-size:2rem;margin:0 0 4px;letter-spacing:-.02em;text-transform:capitalize}h2{font-size:1.15rem;margin:0 0 12px;letter-spacing:-.01em}h3{font-size:1rem;margin:16px 0 6px}

/* ---- app bar + search ---- */
.appbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.appbar .in{max-width:920px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{font-weight:800;font-size:1.1rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.brand b{color:var(--accent)}
.search{position:relative;flex:1;max-width:560px}
.search input{width:100%;padding:12px 44px 12px 42px;font-size:1rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);outline:none;box-shadow:var(--shadow)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.search .ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.search .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;padding:6px 10px;cursor:pointer;border-radius:50%;display:none}
.search.has-text .clear{display:block}
.search .clear:hover{background:var(--line)}
.panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:none;z-index:30}
.search.open .panel{display:block}
.dym{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.95rem}
.dym button{border:0;background:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:0}
.hit{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--ink);cursor:pointer}
.hit[aria-selected="true"],.hit:hover{background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.hit .g{width:36px;height:36px;border-radius:10px;font-size:1.1rem}
.hit .t{flex:1;min-width:0}.hit .n{font-weight:700;text-transform:capitalize}.hit .n mark{background:none;color:var(--accent);padding:0}
.hit .s{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hit .via{font-size:.8rem;color:var(--muted);white-space:nowrap}
.empty{padding:16px 14px;color:var(--muted);font-size:.95rem}
.empty b{color:var(--ink)}

/* ---- grade chips ---- */
.g{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;border-radius:12px;flex:none}
.g-A{background:var(--A)}.g-B{background:var(--B)}.g-C{background:var(--C)}.g-D{background:var(--D)}.g-F{background:var(--F)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:700;color:#fff}

/* ---- home ---- */
.hero-home{text-align:center;padding:40px 0 18px}
.hero-home h1{font-size:2.3rem;text-transform:none;margin:0 0 8px}
.hero-home p{max-width:560px;margin:0 auto;color:var(--muted);font-size:1.05rem}
.search.big input{padding:16px 48px 16px 48px;font-size:1.1rem}
.search.big .ico{left:18px;width:20px;height:20px}
.legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.rail{position:sticky;top:62px;z-index:10;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:8px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px)}
.rail a{font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.rail a.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow)}.rail a.off{opacity:.3;pointer-events:none}
.letter{font-size:.85rem;font-weight:800;color:var(--muted);margin:22px 0 8px;letter-spacing:.08em}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:8px 0;text-decoration:none;color:var(--ink);transition:transform .08s ease,box-shadow .08s ease}
.row:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.row .g{width:52px;height:52px;font-size:1.6rem}
.row .name{font-weight:700;text-transform:capitalize;font-size:1.05rem}
.row .sub{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mini{display:flex;gap:4px}.row .mini span{font-size:.7rem;font-weight:800;color:#fff;border-radius:5px;padding:1px 6px}
.row .arrow{color:var(--muted);font-size:1.3rem}
.count{color:var(--muted);font-size:.9rem;text-align:center;margin:8px 0 0}

/* ---- report page ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)}
.hero{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.grade{font-size:4.5rem;font-weight:800;line-height:1;width:110px;height:110px;border-radius:24px;display:flex;align-items:center;justify-content:center;color:#fff}
.scores{display:grid;gap:10px}.score{display:grid;grid-template-columns:150px 1fr 44px;gap:10px;align-items:center}
.bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;border-radius:5px}
ul.why{margin:6px 0 0;padding-left:18px}ul.why li{margin:3px 0}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kv div{background:var(--bg);border-radius:10px;padding:10px}.kv b{display:block;font-size:1.3rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}td,th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--muted);font-weight:600}
.tbl{overflow-x:auto}
.warn{border-left:4px solid var(--F);background:color-mix(in srgb,var(--F) 8%,var(--card))}
.q li{margin:8px 0}.tags span{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px 8px;margin:2px 4px 2px 0;font-size:.85rem}
details summary{cursor:pointer;font-weight:600;margin:8px 0}
footer{color:var(--muted);font-size:.85rem;padding:20px 0 40px}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;margin:14px 0 0}

@media(max-width:600px){
 .appbar .in{gap:10px}.brand{font-size:1rem}
 .hero{grid-template-columns:1fr}.grade{width:90px;height:90px;font-size:3.5rem}.score{grid-template-columns:96px 1fr 40px}
 .hero-home{padding:26px 0 12px}.hero-home h1{font-size:1.8rem}
 .row{grid-template-columns:46px 1fr}.row .arrow{display:none}.row .g{width:46px;height:46px;font-size:1.4rem}
 .rail{top:58px}.rail a{width:24px;height:24px}
 .hit .via{display:none}
}

/* My Rx */
.myrx-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;color:var(--ink);white-space:nowrap;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.myrx-link:hover,.myrx-link.on{border-color:var(--accent);color:var(--accent)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;cursor:pointer}
.btn.on,.btn.ghost{background:var(--card);color:var(--accent)}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.btn:hover{filter:brightness(1.05)}
.hero .btn{margin-top:12px}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
#myrx-list .row{grid-template-columns:52px 1fr auto}
#myrx-list .row .body{text-decoration:none;color:inherit;min-width:0}
#myrx-list .row .g{display:flex;align-items:center;justify-content:center;border-radius:14px;color:#fff;font-weight:800;text-decoration:none}
#myrx-list .rm{border:0;background:transparent;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:6px 10px;border-radius:50%}
#myrx-list .rm:hover{background:var(--line);color:var(--ink)}
@media print{.appbar,.tools,.back,#myrx-list .rm,.search{display:none!important}.card{box-shadow:none;border-color:#ccc}body{background:#fff;color:#000}}

/* My Rx v2: the list is the page */
.myrx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin:18px 0 10px}
.myrx-head h1{margin:0;font-size:2rem}
.myrx-head p{margin:4px 0 0}
.myrx .tools{margin:0}
.btn.sm{padding:7px 12px;font-size:.85rem}
.btn.danger{color:var(--F)}
.myrx .card.med{padding:14px 16px;margin:10px 0}
.med .top{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center}
.med .g{width:52px;height:52px;font-size:1.6rem;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;text-decoration:none}
.med .body{text-decoration:none;color:inherit;min-width:0}
.med .name{font-weight:700;text-transform:capitalize;font-size:1.1rem}
.med .sub{font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.med .mini{display:flex;gap:4px;margin-top:3px}.med .mini span{font-size:.7rem;font-weight:800;color:#fff;border-radius:5px;padding:1px 6px}
.med .rm{border:0;background:transparent;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:4px 10px;border-radius:50%;align-self:start}
.med .rm:hover{background:var(--line);color:var(--ink)}
.note{display:block;margin-top:10px}
.note>span{display:flex;justify-content:space-between;margin-bottom:4px}
.note .saved{font-style:normal;color:var(--A)}
.note textarea{width:100%;box-sizing:border-box;min-height:48px;resize:none;overflow:hidden;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem;line-height:1.4}
.note textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.card.empty{text-align:center;padding:36px 20px}
.card.empty .big{font-size:3rem;line-height:1;color:var(--accent);font-weight:800}
.card.empty h2{margin:8px 0 6px}
.card.quiet{margin-top:18px}
.card.quiet summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.card.quiet summary::-webkit-details-marker{display:none}
.card.quiet summary::before{content:"\25B8";margin-right:6px;color:var(--muted)}
.card.quiet[open] summary::before{content:"\25BE"}
.mynote{background:var(--bg);border-left:3px solid var(--accent);padding:8px 12px;border-radius:0 8px 8px 0;white-space:pre-wrap}
@media print{.card.quiet{display:block}.card.quiet>div{display:block}.note textarea{border:0;padding:0;background:#fff}.myrx-head .tools{display:none}}

/* My Rx notes as a dated log */
.notes{margin-top:10px}
.notelist{list-style:none;margin:0 0 8px;padding:0}
.notelist li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:8px 10px;border-left:3px solid var(--accent);background:var(--bg);border-radius:0 8px 8px 0;margin:4px 0;white-space:pre-wrap}
.notelist time{white-space:nowrap;padding-top:2px}
.notelist .nrm{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 4px;border-radius:50%}
.notelist .nrm:hover{color:var(--F)}
.addnote{display:flex;gap:8px;align-items:flex-end}
.addnote textarea{flex:1;min-height:40px;resize:none;overflow:hidden;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem;line-height:1.4;box-sizing:border-box}
.addnote textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.mynote{list-style:none;padding:0;margin:4px 0 8px}
.mynote li{border-left:3px solid var(--accent);background:var(--bg);padding:6px 10px;margin:3px 0;border-radius:0 8px 8px 0;white-space:pre-wrap}
@media print{.addnote,.notelist .nrm{display:none!important}}

/* note edit */
.notelist li{grid-template-columns:auto 1fr auto}
.notelist .nacts{display:flex;gap:2px}
.notelist .ned{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 4px;border-radius:50%}
.notelist .ned:hover{color:var(--accent)}
.notelist time em{font-style:normal;color:var(--muted);font-size:.75rem}
.notelist li:has(.nedit){display:block}
.nedit textarea{width:100%;box-sizing:border-box;min-height:48px;resize:none;overflow:hidden;padding:9px 12px;border:1px solid var(--accent);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:.95rem;line-height:1.4}
.nedit .tools{margin-top:6px}
@media print{.notelist .nacts{display:none!important}}

/* chip key legend on the home page */
.legend.keys{margin:6px 0 4px;gap:6px 12px}
.legend.keys .lead{color:var(--muted);font-weight:600}
.legend .key{font-size:.7rem;font-weight:800;color:var(--ink);background:var(--line);border-radius:5px;padding:2px 6px;letter-spacing:.02em}
@media (max-width:480px){.legend.keys{justify-content:flex-start;padding:0 2px}.legend.keys .lead{flex-basis:100%}}

/* combination tag + type filter */
.tag.combo{display:inline-block;vertical-align:middle;font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:6px;padding:1px 6px;margin-left:6px}
.typefilter{display:flex;justify-content:center;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.typefilter button{border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer}
.typefilter button .muted{font-weight:600;margin-left:4px}
.typefilter button.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
#list[data-type="single"] .row[data-combo="1"]{display:none!important}
#list[data-type="combo"] .row[data-combo="0"]{display:none!important}
#list[data-type="combo"] .letter{display:none}

/* graded alternatives */
.altlist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.altlist .alt{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;text-transform:capitalize}
.altlist .alt.better{border-color:color-mix(in srgb,var(--A) 55%,transparent);background:color-mix(in srgb,var(--A) 8%,var(--card))}
.altlist .alt:hover{box-shadow:var(--shadow)}

/* wide tables scroll inside their card instead of widening the page on phones */
.card > table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}