/* ===========================================================================
   Matrix Pharmacology — UI (clean clinical, trustworthy, accessible)
   =========================================================================== */
:root{
  --ink:#10212e; --ink2:#2b4256; --slate:#5b7185; --muted:#7c93a3; --line:#dde6ec;
  --bg:#f4f7f9; --panel:#ffffff; --panel2:#f8fbfc;
  --teal:#0e7c86; --teal-d:#0a5b63; --tealb:#e3f2f3;
  --blue:#2563b0; --blueb:#e6effa;
  --ok:#1f9d6b; --okb:#e3f6ee;
  --amber:#c9810b; --amberb:#fdf1dd;
  --danger:#c0392b; --dangerb:#fbe7e4;
  --shadow:0 1px 2px rgba(16,33,46,.06), 0 6px 18px rgba(16,33,46,.06);
  --r:12px; --r-sm:8px;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--teal-d);text-decoration:none}
h1{font-size:1.7rem;letter-spacing:-.01em;margin:.2em 0 .5em}
h2{font-size:1.2rem;margin:1.6em 0 .6em;color:var(--ink)}
h3{margin:0 0 .3em}
p{margin:0 0 1em}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.muted{color:var(--muted)} .small{font-size:.85rem}
em{color:var(--danger);font-style:normal;font-weight:700}

/* header */
#app-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;height:60px}
.brand{font-weight:600;font-size:1.12rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.brand b{color:var(--teal-d);font-weight:800} .brand .mark{color:var(--teal);font-size:1.2rem}
#app-header nav{display:flex;gap:4px;margin-left:auto}
#app-header nav a{color:var(--slate);font-weight:500;font-size:.92rem;padding:.5em .7em;border-radius:var(--r-sm)}
#app-header nav a:hover,#app-header nav a.on{color:var(--ink);background:var(--tealb)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4em;background:var(--teal);color:#fff;font-weight:600;font-size:.95rem;
  padding:.7em 1.3em;border-radius:var(--r-sm);border:0;cursor:pointer;transition:filter .15s, transform .08s}
.btn:hover{filter:brightness(1.07)} .btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--teal-d);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal);background:var(--tealb)}
.btn-sm{padding:.45em .85em;font-size:.85rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}

/* hero / home */
.hero{padding:48px 22px 10px;max-width:840px}
.hero h1{font-size:2.4rem;letter-spacing:-.02em}
.tagline{font-size:1.2rem;color:var(--teal-d);font-weight:600;margin-bottom:.6em}
.lede{font-size:1.05rem;color:var(--ink2)}
.disc{font-size:.82rem;color:var(--muted);border-left:3px solid var(--line);padding-left:12px;margin-top:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card h3{color:var(--teal-d);font-size:1.02rem}
.card p{margin:0;color:var(--ink2);font-size:.93rem}
.statusline{display:flex;gap:8px;flex-wrap:wrap;margin:6px auto 40px}

/* chips / status */
.chip{display:inline-flex;align-items:center;font-size:.74rem;font-weight:700;padding:.28em .7em;border-radius:999px;letter-spacing:.2px}
.s-strong-fit{background:var(--okb);color:var(--ok)} .s-reasonable{background:var(--blueb);color:var(--blue)}
.s-caution{background:var(--amberb);color:var(--amber)} .s-lower-fit{background:#eef2f5;color:var(--slate)}
.s-blocked{background:var(--dangerb);color:var(--danger)}

/* notes */
.note{border-radius:var(--r);padding:14px 16px;margin:16px 0;font-size:.94rem;border:1px solid}
.note ul{margin:.5em 0 .2em;padding-left:1.2em}
.note.info{background:var(--tealb);border-color:#bfe1e3;color:var(--teal-d)}
.note.warn{background:var(--amberb);border-color:#f0d9a8;color:#8a5a06}
.note.emergency{background:var(--dangerb);border-color:#f1c3bd;color:var(--danger);font-weight:600}

/* stepper */
.stepper{display:flex;list-style:none;gap:6px;padding:0;margin:0 0 24px;flex-wrap:wrap}
.stepper li a{display:flex;align-items:center;gap:7px;color:var(--slate);font-weight:600;font-size:.86rem;
  background:#fff;border:1px solid var(--line);padding:.4em .8em .4em .5em;border-radius:999px}
.stepper li span{width:20px;height:20px;border-radius:50%;background:#eef2f5;color:var(--slate);display:flex;align-items:center;justify-content:center;font-size:.75rem}
.stepper li.on a{color:#fff;background:var(--teal);border-color:var(--teal)} .stepper li.on span{background:rgba(255,255,255,.25);color:#fff}

/* forms */
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:680px){.formgrid,.grid3{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600;color:var(--ink2)}
.f input,.f select,.f textarea,.notebox{font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.6em .7em}
.f input:focus,.f select:focus,.f textarea:focus,.notebox:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--tealb)}
.block{margin:18px 0} .lab{font-weight:600;color:var(--ink2);display:block;margin-bottom:8px}
.chips-pick{display:flex;flex-wrap:wrap;gap:8px}
.pick{font:inherit;font-size:.88rem;font-weight:600;background:#fff;border:1.5px solid var(--line);color:var(--slate);padding:.5em .9em;border-radius:999px;cursor:pointer}
.pick.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* safety table */
.safetytable{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.srow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px}
.srow.crit{border-left:3px solid var(--amber)}
.slabel{flex:1;font-size:.92rem;font-weight:500}
.yn{display:flex;gap:4px} .yn button,.seg button{font:inherit;font-size:.82rem;font-weight:600;border:1.5px solid var(--line);background:#fff;color:var(--slate);padding:.35em .8em;cursor:pointer}
.yn button:first-child,.seg button:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)} .yn button:last-child,.seg button:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.yn button.on.yes{background:var(--danger);border-color:var(--danger);color:#fff}
.yn button.on.no{background:var(--ok);border-color:var(--ok);color:#fff}
.yn button.on.unknown{background:var(--slate);border-color:var(--slate);color:#fff}

/* segmented (symptoms/avoid) */
.seglist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(max-width:680px){.seglist{grid-template-columns:1fr}}
.segrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;font-size:.9rem}
.seg{display:flex} .seg button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chklist{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(max-width:680px){.chklist{grid-template-columns:1fr}}
.chk{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font-size:.9rem;cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--teal)}

/* matrix table */
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.matrix{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:.92rem}
.matrix th{text-align:left;background:var(--panel2);color:var(--slate);font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;padding:10px 12px;border-bottom:1px solid var(--line)}
.matrix td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.matrix tr:last-child td{border-bottom:0}
.matrix tr.r-blocked{background:#fdf6f5}
.minibar{display:inline-block;width:90px;height:7px;background:#eef2f5;border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:7px}
.minibar span{display:block;height:100%;background:var(--teal)}

/* med cards */
.lvlglobal,.lvltabs,.lvlglobal .glvl{font-size:.84rem}
.lvlglobal{margin:18px 0 8px;color:var(--slate);font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.glvl,.lvltabs button{font:inherit;font-weight:600;border:1.5px solid var(--line);background:#fff;color:var(--slate);padding:.3em .8em;border-radius:999px;cursor:pointer}
.glvl.on,.lvltabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cards{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.medcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);border-left:4px solid var(--line)}
.medcard.s-border-strong-fit{border-left-color:var(--ok)} .medcard.s-border-reasonable{border-left-color:var(--blue)}
.medcard.s-border-caution{border-left-color:var(--amber)} .medcard.s-border-lower-fit{border-left-color:var(--slate)}
.medcard.s-border-blocked{border-left-color:var(--danger);background:#fffafa}
.medcard header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.medcard h3{font-size:1.15rem} .medcard h3 small{color:var(--muted);font-weight:500;font-size:.85rem}
.medcard .sub{color:var(--slate);font-size:.84rem}
.cscore{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .conf{font-size:.76rem;color:var(--muted)}
.bar2{position:relative;width:130px;height:20px;background:#eef2f5;border-radius:5px;overflow:hidden}
.bar2 span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--teal),var(--blue))}
.bar2 b{position:absolute;right:6px;top:0;line-height:20px;font-size:.74rem;color:var(--ink)}
.flags{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.fl-block{background:var(--dangerb);color:var(--danger);font-weight:600} .fl-caution{background:var(--amberb);color:#8a5a06}
.fl-note{background:var(--panel2);color:var(--slate)}
.fl-block,.fl-caution,.fl-note{padding:8px 11px;border-radius:var(--r-sm);font-size:.86rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0}
@media(max-width:600px){.cols{grid-template-columns:1fr}}
.cols ul{margin:.3em 0 0;padding-left:1.1em;font-size:.88rem;color:var(--ink2)} .cols li{margin-bottom:3px}
.forh{color:var(--ok)} .againsth{color:var(--amber)}
.explain{margin-top:8px;border-top:1px dashed var(--line);padding-top:12px}
.lvltext{margin:8px 0 0;font-size:.92rem;color:var(--ink2)}
details{margin-top:10px;font-size:.88rem} summary{cursor:pointer;color:var(--teal-d);font-weight:600}
.domgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dom{font-size:.74rem;background:var(--panel2);border:1px solid var(--line);padding:.2em .55em;border-radius:5px;color:var(--slate)}
.dom.p{background:var(--okb);color:var(--ok);border-color:#c7ecdb} .dom.n{background:var(--amberb);color:#8a5a06;border-color:#f0d9a8}
.dom b{font-family:var(--mono)}

/* content lists */
.bullets,.method{padding-left:1.2em} .bullets li,.method li{margin-bottom:.5em;color:var(--ink2)}
.notebox{width:100%;font-family:var(--mono);font-size:.86rem;line-height:1.5}

/* footer */
#app-footer{border-top:1px solid var(--line);background:#fff;margin-top:46px}
.foot{padding:22px 22px 34px} .foot p{font-size:.84rem;color:var(--slate);margin:0 0 6px;max-width:820px}