/* EX-5857 — OpenDrugGraph public explorer.
   Dark-blue theme matching the prototypes/openddi design source (read-only reference). */
:root {
  --bg:#0a1628; --surface:#0f2035; --surface-2:#12273f; --raise:#16304d;
  --border:#1d3a5c; --border-soft:#183150;
  --text:#c3d6e6; --text-strong:#eaf3f9; --text-dim:#9db9d2;
  --accent:#7ec8e3; --accent-strong:#a9def2; --accent-ghost:rgba(126,200,227,.12);
  --proven:#4ccb9c; --proven-ghost:rgba(76,203,156,.14);
  --proposed:#dcb66a;
  --critical:#ec6f4d; --critical-ghost:rgba(236,111,77,.15);
  --shadow:0 12px 40px -18px rgba(0,0,0,.7);
  --font-display:Georgia,'Iowan Old Style','Times New Roman',serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
  --r:12px; --r-sm:8px;
}
:root[data-theme="light"]{
  --bg:#e9f0f6; --surface:#ffffff; --surface-2:#f3f8fc; --raise:#ffffff;
  --border:#d2e0ec; --border-soft:#e1ebf3;
  --text:#2a4c69; --text-strong:#0b2136; --text-dim:#516e88;
  --accent:#1c79a1; --accent-strong:#125f80; --accent-ghost:rgba(28,121,161,.10);
  --proven:#128a63; --proven-ghost:rgba(18,138,99,.11);
  --proposed:#a67c26;
  --critical:#c8492a; --critical-ghost:rgba(200,73,42,.10);
  --shadow:0 14px 40px -22px rgba(20,50,80,.4);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--text-strong);margin:0}
a{color:var(--accent);text-decoration:none}
/* Keyboard focus ring (P0, 2026-07-18 design review; WCAG 2.4.7/2.4.11). The prototype ships this and
   the 2026-07-15 doc claimed it landed, but it never reached the crate — inputs were outline:none with
   only a border tint. Every interactive element now gets a visible accent ring on KEYBOARD focus
   (:focus-visible, so a mouse click stays clean). */
a:focus-visible,button:focus-visible,.navbtn:focus-visible,.btn:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:600}

.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;padding:20px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;gap:2px;padding:6px 8px 16px}
.brand .wm{font-family:var(--font-display);font-size:22px;color:var(--text-strong);font-weight:700}
.brand .wm b{color:var(--accent)}
.brand .tag{font-size:11px;color:var(--text-dim);line-height:1.35}
.navbtn{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--text);cursor:pointer;border:1px solid transparent;font-size:13.5px;font-weight:500;
  background:none;width:100%;text-align:left;font-family:inherit}
.navbtn:hover{background:var(--surface-2)}
.navbtn.active{background:var(--accent-ghost);color:var(--accent-strong);border-color:var(--border)}
.rail .spacer{flex:1}
.railfoot{font-size:11px;color:var(--text-dim);padding:8px;border-top:1px solid var(--border-soft);line-height:1.5}
.railfoot .disclaimer{color:var(--proposed);font-weight:600;margin-bottom:6px}
.railfoot b{color:var(--proven)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;
  padding:13px 26px;background:var(--bg);border-bottom:1px solid var(--border-soft)}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:9px 16px;color:var(--text-strong);font:inherit;outline:none}
.search input:focus{border-color:var(--accent)}
.results{position:absolute;top:44px;left:0;right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--shadow);max-height:340px;overflow-y:auto;z-index:20;display:none}
.results.on{display:block}
.results .item{padding:9px 15px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--border-soft)}
.results .item:last-child{border-bottom:none}
.results .item:hover{background:var(--accent-ghost)}
.results .item .rx{color:var(--text-dim);font-size:12px}
.results .empty{padding:12px 15px;color:var(--text-dim)}

.canvas{padding:24px 30px 60px;max-width:1220px;width:100%}
.screen{display:none}
.screen.on{display:block}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px 20px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid transparent}
.pill.proven{background:var(--proven-ghost);color:var(--proven);border-color:var(--proven)}
.pill.critical{background:var(--critical-ghost);color:var(--critical);border-color:var(--critical)}

/* explore split: graph + proof panel */
.explore{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
@media(max-width:940px){.explore{grid-template-columns:1fr}}
#graph{height:560px;border-radius:var(--r);background:
  radial-gradient(circle at 30% 20%,var(--surface-2),var(--surface))}
.hint{color:var(--text-dim);padding:40px;text-align:center}

/* Graph legend (EX-5871) — keys the colorblind-safe line patterns: a contraindication is a DASHED
   line, not just a different hue (WCAG 1.4.1, Use of Color). The swatch mirrors the Cytoscape edge. */
.legend{display:flex;gap:18px;list-style:none;margin:10px 2px 0;padding:0;
  font-size:12px;color:var(--text-dim)}
.legend li{display:flex;align-items:center;gap:8px}
.legend .swatch{width:22px;height:0;border-top-width:3px;border-top-style:solid}
.legend .swatch.interaction{border-top-color:var(--proven);border-top-style:solid}
.legend .swatch.contraindication{border-top-color:var(--critical);border-top-style:dashed}

.proof h3{font-size:15px;margin-bottom:2px}
.proof .kv{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.proof .kv .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.proof .kv .v{color:var(--text-strong);word-break:break-word}
.proof .span{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:12px 14px;margin-top:6px;font-style:italic;color:var(--text-strong);line-height:1.5}
.proof .empty{color:var(--text-dim);padding:30px 4px;text-align:center}

/* measures */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.metric .big{font-size:38px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1.1}
.metric .lbl{color:var(--text-dim);font-size:12.5px;margin-top:4px}
.metric .sub{color:var(--text-dim);font-size:12px;margin-top:8px}
.bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:12px}
.bar > span{display:block;height:100%;background:var(--accent)}
.ok{color:var(--proven)} .warn{color:var(--proposed)}

/* HOME / landing (CH-6024) — citation-first hero + help + feature cards + footer.
   Reuses the shared tokens so both themes carry through. */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:18px 0 38px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:24px}}
.hero-h{font-family:var(--font-display);font-size:clamp(30px,4.2vw,46px);line-height:1.08;
  letter-spacing:-.01em;margin:10px 0 14px;text-wrap:balance}
.hero-sub{font-size:16px;color:var(--text);max-width:56ch;line-height:1.6}
.hero-sub b{color:var(--text-strong)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 16px;align-items:center}
.btn{font:inherit;font-weight:600;font-size:13.5px;border-radius:var(--r-sm);padding:10px 16px;
  cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text-strong)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#04121a;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.ghost{background:var(--accent-ghost);color:var(--accent-strong)}
.btn.link{background:none;border-color:transparent;color:var(--accent);padding-left:4px;padding-right:4px}
.btn.link:hover{text-decoration:underline}
/* CH-6046 P2: the trust line ("N cited · 0 fabrications · open") was the DIMMEST text on the page —
   we were whispering our best signal. Full-strength text + weight so it reads as a claim, not a footnote. */
.hero-stat{font-size:12.5px;color:var(--text);font-weight:600;letter-spacing:.02em}
.proofcard{border-color:var(--proven)}
.proofcard .pc-pair{font-family:var(--font-display);font-size:21px;margin:12px 0 0;color:var(--text-strong)}
.proofcard .pc-span{background:var(--surface-2);border-left:3px solid var(--proven);border-radius:var(--r-sm);
  padding:12px 14px;margin:12px 0;font-style:italic;color:var(--text-strong);line-height:1.5;font-size:13.5px}
.proofcard .pc-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--text-dim);font-size:11.5px}
.proofcard .pc-more{margin-top:12px}
.proofcard .empty{color:var(--text-dim);padding:30px 4px;text-align:center}

.help{padding:12px 0 6px}
.help-grid,.feat-grid{display:grid;gap:16px;margin-top:14px}
.help-grid{grid-template-columns:repeat(3,1fr)}
.feat-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.help-grid{grid-template-columns:1fr}.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.help-card{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;font:inherit;
  color:var(--text);align-items:flex-start}
.help-card:hover{border-color:var(--accent)}
.help-card h3{font-size:16px;font-family:var(--font-display)}
.help-card p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.5}
.help-card .go{color:var(--accent);font-weight:600;font-size:12.5px;margin-top:4px}
.feats{padding:20px 0 6px}
.feat h4{font-size:14px;margin-bottom:6px;color:var(--text-strong)}
.feat p{margin:0;color:var(--text-dim);font-size:12.5px;line-height:1.5}
.home-foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--border-soft);
  color:var(--text-dim);font-size:12px;line-height:1.6}
.home-foot .disc{color:var(--proposed);font-weight:600;margin-right:6px}

/* TECH — How it works (EX-6034). propose→dispose→prove explainer + NuSy shop-window.
   Reuses the shared tokens so both themes carry through; no new colors. */
.pipe{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.pstep{flex:1;min-width:170px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 14px}
.pstep.ok{border-color:var(--proven);background:var(--proven-ghost)}
.pstep .pt{font-weight:600;color:var(--text-strong);font-size:13px;margin-bottom:5px}
.pstep .pd{color:var(--text-dim);font-size:12px;line-height:1.5}
.parrow{display:flex;align-items:center;color:var(--accent);font-size:18px;font-weight:700}
@media(max-width:720px){.pipe{flex-direction:column}.parrow{transform:rotate(90deg);justify-content:center}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}
.feat .ft{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--text-strong);
  font-size:14px;margin-bottom:7px}
.fic{width:19px;height:19px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sectitle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:26px 0 14px}
.sectitle h2{font-family:var(--font-display);font-size:20px}
.sectitle .hint{padding:0;text-align:right;color:var(--text-dim);font-size:12.5px}
.mechbox{font-family:var(--font-mono);font-size:11.5px;white-space:pre;overflow-x:auto;
  line-height:1.6;color:var(--text)}
.op{color:var(--accent-strong)}
.lead-copy{color:var(--text-dim);line-height:1.6}

/* NEEDS WORK / report table (EX-5993). Reuses the shared tokens; both themes. */
.report-wrap{overflow-x:auto}
.report-table{width:100%;border-collapse:collapse;font-size:13px}
.report-table th,.report-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.report-table thead th{color:var(--text-dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.report-table th.sortable{cursor:pointer;user-select:none}
.report-table th.sortable:hover{color:var(--accent-strong)}
.report-table th.sorted{color:var(--accent-strong)}
.report-table th.sorted::after{content:" ↕";opacity:.7}
.report-table td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.report-table tbody tr:hover{background:var(--surface-2)}
.report-table td .muted{color:var(--text-dim)}
.mnm-crit{display:inline-block;min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;
  background:var(--critical-ghost);color:var(--critical);font-weight:700}
.gaps{max-width:420px}
.gap-chip{display:inline-block;padding:1px 8px;margin:1px 0;border-radius:999px;font-size:11.5px;
  background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border-soft)}
.gap-chip.crit{color:var(--critical);border-color:color-mix(in srgb,var(--critical) 40%,var(--border))}

/* CH-6046 — rail account slot (P1-3) + theme toggle (P1-2). Reuses the shared tokens; both themes. */
.acct{margin:0 0 6px}
.acct-link{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);color:var(--text)}
.acct-link:hover{background:var(--surface-2)}
.acct-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:999px;background:var(--accent);color:var(--bg);font-weight:700;font-size:13px}
.acct-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-btn{display:block;text-align:center;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;
  font-weight:600;background:var(--accent-ghost);color:var(--accent-strong);border:1px solid var(--border)}
.acct-btn:hover{border-color:var(--accent)}
.theme-toggle{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 10px;padding:8px 11px;
  border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--text-dim);
  cursor:pointer;font:inherit;font-size:12.5px}
.theme-toggle:hover{background:var(--surface-2);color:var(--text)}

/* Review queue + History (EX-5859) — the KBDD ratification queue + the provenance timeline.
   Never-launder is legible in the design: a Blocked (uncited) row is tinted critical and its only
   check is the red "no source" fail — it never carries a Confirm action. */
.pill .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.proposed{background:color-mix(in srgb,var(--proposed) 15%,transparent);color:var(--proposed);
  border-color:color-mix(in srgb,var(--proposed) 38%,transparent)}

.qrow{display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px 18px;
  border-bottom:1px solid var(--border-soft)}
.qrow:last-child{border-bottom:none}
.qrow.blocked{background:var(--critical-ghost)}
.qrow .pair{font-family:var(--font-display);font-size:17px;color:var(--text-strong)}
.qmeta{font-size:12px;color:var(--text-dim);margin-top:3px}
.qmeta b{color:var(--text)}
.qaction{display:flex;flex-direction:column;align-items:flex-end;gap:10px;justify-content:center}

.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 9px;
  border-radius:var(--r-sm);color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border-soft)}
.check.ok{color:var(--proven)}
.check.fail{color:var(--critical);background:var(--critical-ghost);
  border-color:color-mix(in srgb,var(--critical) 30%,transparent)}
.check .ci{width:13px;height:13px;stroke-width:2.4;stroke:currentColor;fill:none;flex:none}
.check .ci.pend{stroke:var(--proposed)}

.consensus{display:flex;gap:5px}
.consensus .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--border);background:transparent}
.consensus .dot.on{background:var(--proven);border-color:var(--proven)}

.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl .ev{position:relative;padding:0 0 20px}
.tl .ev:last-child{padding-bottom:0}
.tl .ev::before{content:"";position:absolute;left:-23px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border)}
.tl .ev.proven::before{border-color:var(--proven)}
.tl .ev.proposed::before{border-color:var(--proposed)}
.tl .ev.critical::before{border-color:var(--critical)}
.tl .ev .t{color:var(--text-dim);font-size:11.5px}
.tl .ev .d{color:var(--text-strong);font-size:13.5px;margin:2px 0;line-height:1.5}
.tlmore{padding:0 0 0 2px;font-size:12px}
/* On a Blocked row the row is already critical-ghost; don't stack a 2nd ghost behind the fail-check
   or the critical pill — the two rgba layers composite and drop the never-launder message below the
   WCAG 1.4.3 AA 4.5:1 minimum. Give them an opaque surface so --critical text stays legible (both themes). */
.qrow.blocked .check.fail,
.qrow.blocked .pill.critical{background:var(--surface);
  border-color:color-mix(in srgb,var(--critical) 45%,transparent)}

/* CH-6052 — accessible list fallback for the canvas graph (WCAG 2.1.1 keyboard, 1.1.1 non-text). Each
   cited relationship is a focusable button (the global :focus-visible ring applies) that opens its
   proof. Both themes via shared tokens. */
.glist-wrap{margin-top:12px;border-top:1px solid var(--border-soft);padding-top:10px}
.glist{list-style:none;margin:6px 0 0;padding:0;max-height:190px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px}
.glist-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;font:inherit;cursor:pointer;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text)}
.glist-item:hover{border-color:var(--accent)}
.glist-pair{color:var(--text-strong);font-size:13px}
.glist-kind{font-size:11px;color:var(--text-dim);white-space:nowrap}
.glist-empty{color:var(--text-dim);font-size:12.5px;padding:6px 2px}

/* COMMUNITY — Wanted List (EX-5860). Reuses the shared tokens; both themes. */
.wanted{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.wrow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
  padding:11px 16px;border-bottom:1px solid var(--border-soft)}
.wrow:last-child{border-bottom:none}
.wrow:hover{background:var(--surface-2)}
.wrank{color:var(--text-dim);font-size:12px;min-width:34px}
.wname{color:var(--text-strong);font-size:14px}
.wrx{color:var(--text-dim);font-size:11.5px;white-space:nowrap}
.wadd{padding:5px 12px;font-size:12.5px;white-space:nowrap}
@media(max-width:640px){.wrow{grid-template-columns:auto 1fr auto}.wrx{display:none}}

/* EX-6159 login modal — one provider-chooser popup for every sign-in method. */
body.modal-open{overflow:hidden}
.modal-overlay{position:fixed;inset:0;background:rgba(3,10,18,.66);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-card{position:relative;width:100%;max-width:360px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md,12px);padding:26px 24px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:8px;right:11px;background:none;border:none;color:var(--text-dim);font-size:22px;line-height:1;cursor:pointer}
.modal-close:hover{color:var(--text-strong)}
.modal-sub{color:var(--text-dim);font-size:13px;margin:0 0 18px}
.login-providers{display:flex;flex-direction:column;gap:9px}
.login-provider{display:block;text-align:center;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;color:var(--text-strong);text-decoration:none;font-weight:600}
.login-provider:hover{border-color:var(--accent);background:var(--accent-ghost)}
.login-divider{position:relative;text-align:center;margin:18px 0 12px;color:var(--text-dim);font-size:12px}
.login-divider::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--border-soft)}
.login-divider span{position:relative;background:var(--surface-2);padding:0 10px}
.login-magic input{width:100%;box-sizing:border-box;padding:9px 12px;margin-bottom:8px;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;color:var(--text);font:inherit}
.login-magic input:focus{border-color:var(--accent);outline:none}

/* EX-6171: the open-data / Downloads surface. */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dl-card { display: flex; flex-direction: column; gap: 8px; }
.dl-card.dl-coming { opacity: 0.72; }
.dl-sub { font-size: 13px; color: var(--muted, #9aa); margin: 0; }
.dl-big { font-size: 26px; font-weight: 700; }
.dl-note { font-size: 12px; color: var(--muted, #9aa); font-style: italic; }