/* Target Landscape — interface styles.
   Same tokens as the memo renderer, so the app and the exported document read
   as one thing: IBM Plex Sans for prose, Plex Mono for the parts that are
   codes rather than words (registry ids, phases, counts), deep teal accent,
   warm-biased neutrals. Semantic science/business colours stay separate from
   the accent because they encode a classification, not a brand. */

:root{
  --bg:#fcfcfa; --surface:#fff; --surface-2:#f7f6f2;
  --fg:#16191b; --muted:#70777d; --faint:#9aa1a7;
  --line:#e6e5df; --line-2:#f2f1ec;
  --accent:#12414f; --accent-soft:#e7eef0; --accent-ink:#0d323d;
  --sci:#9c3b34; --sci-soft:#f7ebea;
  --biz:#2f5f7a; --biz-soft:#eaf0f5;
  --warn:#7a5200; --warn-bg:#fdf6e3; --warn-line:#e8d9a8;
  --ok:#2f6b4f;
  --sans:"IBM Plex Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,25,28,.05), 0 8px 24px -12px rgba(20,25,28,.14);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101315; --surface:#171b1e; --surface-2:#1c2124;
  --fg:#e9e7e2; --muted:#98a0a6; --faint:#7a8288;
  --line:#252b2f; --line-2:#1e2225;
  --accent:#8fc2d2; --accent-soft:#18272d; --accent-ink:#b8dbe6;
  --sci:#dd9089; --sci-soft:#2a1d1c;
  --biz:#8fbcd8; --biz-soft:#1a242c;
  --warn:#dcb463; --warn-bg:#241f14; --warn-line:#4a3f22;
  --ok:#7fb99a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#101315; --surface:#171b1e; --surface-2:#1c2124;
  --fg:#e9e7e2; --muted:#98a0a6; --faint:#7a8288;
  --line:#252b2f; --line-2:#1e2225;
  --accent:#8fc2d2; --accent-soft:#18272d; --accent-ink:#b8dbe6;
  --sci:#dd9089; --sci-soft:#2a1d1c;
  --biz:#8fbcd8; --biz-soft:#1a242c;
  --warn:#dcb463; --warn-bg:#241f14; --warn-line:#4a3f22;
  --ok:#7fb99a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-underline-offset:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mono{font-family:var(--mono)}
.dot{color:var(--faint);padding:0 6px}
.hint{color:var(--faint);font-size:12.5px;line-height:1.6}
.view{max-width:1240px;margin:0 auto;padding:28px 24px 90px}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:12px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);flex:none}
.brand-mark{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.02em;
  background:var(--accent);color:var(--bg);width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center}
.brand-name{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
@media (max-width:720px){.brand-name{display:none}}

/* .brand-tag lived here: a second sentence beside the name, which said the
   same thing as the landing headline on the one screen that shows both. */
.topnav{margin-left:auto;display:flex;gap:16px;flex:none}
.topnav a{font-size:13px;color:var(--muted);text-decoration:none}
.topnav a:hover{color:var(--accent)}
.searchbox{position:relative;flex:1;max-width:420px;margin:0 18px}
.searchbox.big{max-width:none;margin:0}
.searchbox input{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:99px;
  background:var(--surface);color:var(--fg);font-size:14px;font-family:var(--sans)}
.searchbox input::placeholder{color:var(--faint)}
.searchbox input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;max-height:340px;overflow-y:auto;z-index:50}
.sg{display:flex;align-items:baseline;gap:10px;padding:9px 14px;cursor:pointer;
  border-bottom:1px solid var(--line-2)}
.sg:last-child{border-bottom:none}
.sg[aria-selected="true"],.sg:hover{background:var(--accent-soft)}
.sg-sym{font-family:var(--mono);font-weight:500;font-size:13.5px}
.sg-name{color:var(--muted);font-size:12.5px;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sg-tier{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint);flex:none}
.sg-tier.curated{color:var(--accent)}

.lens{display:flex;align-items:center;gap:2px;flex:none;
  background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px}
.lens-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);padding:0 8px 0 6px}
.lens-btn{border:none;background:none;padding:5px 12px;border-radius:99px;cursor:pointer;
  font-size:12.5px;color:var(--muted)}
.lens-btn[aria-pressed="true"]{background:var(--accent);color:var(--bg);font-weight:500}
@media (max-width:860px){.lens-label{display:none}}

/* ── Landing ─────────────────────────────────────────────────────────── */
/* A library front page. The paragraph that used to sit above the fold
   explained the site to someone who had not used it yet — the wrong order,
   and the reason nobody reads one. */
.view-home{max-width:1040px}
.home-search{padding:60px 0 8px;text-align:center}
.home-search .searchbox{max-width:620px;margin:0 auto}
.home-search input{padding:14px 20px;font-size:16px;box-shadow:var(--shadow)}
.home-search .suggestions{text-align:left}
@media (max-width:640px){.home-search{padding:36px 0 8px}}

/* ── The worked example ──────────────────────────────────────────────── */
/* Six tiles on a real target. A visitor who has not opened a target page
   cannot picture one, so the landing page shows the answers rather than
   describing them. */
/* Wide enough for the headline to hold one line at 30px; the sub-line
   sets its own narrower measure below. */
.intro{max-width:820px;margin:0 auto 26px;text-align:center}
/* A headline, and sized like one. It used to be 16.5px against 13.5px body
   text -- three pixels of difference, which reads as a sentence someone put
   at the top rather than as the name of what this is. The clamp lets it fall
   to 22px on a phone instead of breaking into four ragged lines. */
.intro-lede{font-size:clamp(24px,4.8vw,36px);line-height:1.15;color:var(--fg);
  font-weight:600;letter-spacing:-.022em;margin:0 auto;max-width:none;
  text-wrap:balance}
.intro-sub{margin:14px auto 0;max-width:64ch;font-size:13.5px;line-height:1.7;
  color:var(--muted)}
.eg-note{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  letter-spacing:.06em;margin-top:26px;text-transform:uppercase}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.tiles{grid-template-columns:1fr}}
.tile{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:15px 16px 13px;display:flex;flex-direction:column;gap:7px;text-align:left;
  cursor:pointer;transition:border-color .12s,transform .12s;font:inherit;color:inherit}
.tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.tile-h{font-size:13.5px;font-weight:600;color:var(--fg)}
.tile-body{font-size:12.5px;line-height:1.65;color:var(--muted);flex:1}
.tile-body b{color:var(--fg);font-weight:500}
.tile-where{display:flex;gap:5px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line-2)}
.tile-chip{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);white-space:nowrap}

/* The built targets, as chips: clicking one opens instantly. */
.home-eg{margin-top:16px;font-size:12.5px;color:var(--faint);
  display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap}
.eg{border:1px solid var(--line);background:var(--surface);color:var(--accent);
  border-radius:99px;padding:3px 11px;font-family:var(--mono);font-size:11.5px;cursor:pointer}
.eg:hover{border-color:var(--accent);background:var(--accent-soft)}

.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.section-head h2{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--accent);font-weight:500}

.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.card{display:block;text-align:left;width:100%;background:var(--surface);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 15px;
  transition:border-color .12s,transform .12s}
.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card-sym{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:-.02em}
.card-name{color:var(--muted);font-size:12px;margin-top:2px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.card-stat{font-family:var(--mono);font-size:11px;color:var(--faint)}
.card-alias{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px}
.card.plain{padding:12px 14px}
.card.plain .card-sym{font-size:13.5px}
.chip.selectable{cursor:pointer}
.chip.selectable:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.badge-instant{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  border-radius:99px;padding:1px 6px}
.sg-alias{font-family:var(--mono);font-size:10.5px;color:var(--accent);flex:none}
.skeleton-row{height:96px;border-radius:var(--radius);background:var(--surface-2);
  border:1px solid var(--line);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

.section-sub{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--faint);font-weight:500;margin:30px 0 12px}
.explain{margin-top:60px}
.explain h2{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--accent);font-weight:500;margin-bottom:16px}
.explain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.explain-lede{color:var(--fg);font-size:15px;line-height:1.65;max-width:70ch;
  margin:-6px 0 26px}
.explain article h3{font-size:14.5px;font-weight:600;margin-bottom:6px}
.explain article p{color:var(--muted);font-size:13.5px;line-height:1.65}
.explain article p + p{margin-top:10px}
/* The worked case carries the argument; it is set apart so a reader scanning
   headings still meets one concrete example. */
.explain-case{border-left:2px solid var(--line);padding-left:11px;font-size:12.5px}
.explain-case b{color:var(--fg)}
.explain-foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--faint);font-size:12.5px;line-height:1.7;max-width:82ch}

/* ── Verdict pills ───────────────────────────────────────────────────── */
.verdict{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;padding:3px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted);display:inline-block}
.verdict.open{background:var(--surface)}
.verdict.emerging{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.verdict.contested{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.verdict.crowded{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--fg)}
.verdict.saturated{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ── Building ────────────────────────────────────────────────────────── */
.building{max-width:520px;margin:80px auto;text-align:center}
.building-symbol{font-family:var(--mono);font-size:28px;font-weight:600;
  letter-spacing:-.02em;margin-bottom:10px}
.building h2{font-size:16px;font-weight:500;color:var(--muted);margin-bottom:18px}
.progress{height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent);border-radius:99px;
  transition:width .4s ease}
.stages{list-style:none;padding:0;margin:22px 0 18px;text-align:left;
  display:grid;gap:5px;font-family:var(--mono);font-size:12px}
.stages li{color:var(--faint);display:flex;gap:9px;align-items:center}
.stages li.done{color:var(--muted)}
.stages li.active{color:var(--accent);font-weight:500}
.stages li::before{content:"○";font-size:10px}
.stages li.done::before{content:"●";color:var(--ok)}
.stages li.active::before{content:"◐"}
.error{color:var(--sci);background:var(--sci-soft);border:1px solid var(--sci);
  border-radius:var(--radius);padding:12px 14px;font-size:13.5px;margin:16px 0;text-align:left}

.btn{display:inline-block;padding:7px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg);font-size:13px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-quiet{color:var(--muted)}
.link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12.5px;
  padding:0;text-decoration:underline;text-underline-offset:2px}

/* ── Target head ─────────────────────────────────────────────────────── */
.target-head{display:flex;gap:32px;align-items:flex-start;justify-content:space-between;
  padding:26px 0 20px;flex-wrap:wrap}
.th-main{flex:1;min-width:280px}
.th-eyebrow{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-bottom:6px}
.th-main h1{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.03em}
.th-name{color:var(--muted);font-size:15px;margin-top:2px}
.th-side{flex:none;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.th-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:720px){.th-side{align-items:flex-start;width:100%}
  .th-actions{justify-content:flex-start}}
.tier{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.tier.curated{color:var(--ok)} .tier.cached{color:var(--muted)} .tier.fresh{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.chip.strong{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.note{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);
  border-radius:var(--radius);padding:12px 15px;font-size:13px;line-height:1.6;margin:0 0 20px}

/* ── Target page: intro, then a split ───────────────────────────────── */
.t-intro{font-size:15.5px;line-height:1.7;color:var(--fg);max-width:80ch;margin:2px 0 24px}
.t-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:24px;align-items:start;margin-bottom:26px}
@media (max-width:940px){.t-split{grid-template-columns:1fr}}
.t-main{min-width:0}
.t-left{min-width:0;display:flex;flex-direction:column}
.t-left .t-intro{margin-top:0}
/* The card: what the target is, independent of who is reading. Its top edge
   is level with the top of the introduction beside it. It used to sit under
   the introduction, which on a protein with a full UniProt entry meant ten
   lines of prose before the card began -- far enough down the page that a
   reader arriving at the target would not see it at all. */
.t-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);
  padding:16px 18px 18px}
.card-label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);margin-bottom:10px}
.card-src{margin-top:14px;font-size:11px;line-height:1.55;color:var(--faint)}
.t-card .facts{grid-template-columns:1fr;gap:1px 0}
.t-card .fact-k{padding-top:9px}
.t-card .fact-v{font-size:13.5px}
.papers.compact{margin-top:4px}
.papers.compact .paper{padding:7px 0}

/* ── The header facts ────────────────────────────────────────────────── */
/* A definition list, continuous with the masthead. Separable rows, none
   ranked above another — the reader decides which matters. */
.basics{margin:-4px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:minmax(120px,150px) 1fr;gap:9px 20px;
  align-items:baseline;max-width:86ch}
.fact-k{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);padding-top:2px}
.fact-v{font-size:14.5px;line-height:1.6;color:var(--fg);margin:0}
.fact-note{font-size:12px;line-height:1.6;color:var(--muted);margin-top:3px}
.basics-src{margin-top:14px;font-size:11.5px;line-height:1.6;color:var(--faint)}
.basics-src a{color:var(--muted)}
.basics-none{font-size:14px;line-height:1.65;color:var(--muted);max-width:70ch}
/* Citations sit inline against the fact they support: present for the reader
   who checks, unobtrusive for the one who does not. */
.cite{font-family:var(--mono);font-size:9.5px;vertical-align:super;margin-left:2px;
  color:var(--accent);text-decoration:none;padding:0 1px}
.cite:hover{text-decoration:underline}
.cite + .cite{margin-left:3px}
.mech-note{font-size:14.5px;line-height:1.75;color:var(--fg);max-width:78ch;
  margin-bottom:8px}
@media (max-width:640px){
  .facts{grid-template-columns:1fr;gap:2px 0}
  .fact-k{padding-top:10px}
}

/* ── The read ────────────────────────────────────────────────────────── */
/* Above the tables it draws from. Six answers, no verdict. */
.read{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);background:var(--surface);padding:18px 24px 16px;
  margin:0 0 24px}
.read-label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:10px}
.read-lede{font-size:17.5px;line-height:1.55;letter-spacing:-.008em;max-width:76ch}
/* Six lines, each one a question and its answer. The tone bar on the left is
   the only colour in the block: a reader scanning down the left edge should
   be able to see where the trouble is without reading a word. */
.read-lines{list-style:none;padding-left:0;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line-2);display:grid;gap:2px}
.read-line{display:grid;grid-template-columns:minmax(150px,190px) 1fr auto;
  gap:8px 16px;align-items:baseline;padding:9px 12px 9px 13px;border-radius:7px;
  max-width:1020px;
  border-left:3px solid var(--line);background:transparent}
.read-line:hover{background:var(--surface-2)}
/* One distinction, and it is not a verdict: which of the two faces a line
   belongs to. The good / caution / bad scale this replaced said "this one is
   in your favour", and the same fact points opposite ways for a company
   planning its own molecule and one shopping for an asset. */
.read-line.face-science{border-left-color:var(--face-sci)}
.read-line.face-business{border-left-color:var(--face-biz)}
.read-q{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);line-height:1.5}
.read-a{font-size:14.5px;line-height:1.5;color:var(--fg);font-weight:500}

.read-acts{display:flex;gap:12px;white-space:nowrap}
.read-more,.read-jump{background:none;border:none;padding:0;cursor:pointer;
  color:var(--accent);font-size:11.5px;font-family:var(--mono);
  text-decoration:underline;text-underline-offset:2px}
.read-why{grid-column:2/-1;font-size:13px;line-height:1.65;color:var(--muted);
  margin-top:7px;max-width:74ch}
.read-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.6;color:var(--faint);max-width:74ch}
@media (max-width:700px){
  .read-line{grid-template-columns:1fr;gap:3px}
  .read-acts{margin-top:5px} .read-why{grid-column:1}
}

/* ── The figure ──────────────────────────────────────────────────────── */
/* Rendered inside the Mechanisms panel — it draws the competitive structure,
   not the pathway, and that is where it belongs. */
.figure-frame{margin:10px 0 12px;overflow-x:auto}
.tl-diagram{width:100%;max-width:720px;min-width:540px;height:auto;display:block;margin:0 auto}
.tl-membrane{fill:var(--accent-soft)}
.tl-nucleus,.tl-cell{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.tl-protein{fill:var(--accent);stroke:none}
.tl-protein-label{fill:var(--bg);font-family:var(--mono);font-size:13px;
  font-weight:600;text-anchor:middle}
.tl-arrow line{stroke:var(--fg);opacity:.75;stroke-linecap:round}
.tl-arrowhead{fill:var(--fg);opacity:.75}
.tl-arrow-label{fill:var(--fg);font-family:var(--sans);font-size:13px;font-weight:500}
.tl-arrow-detail{fill:var(--muted);font-family:var(--mono);font-size:10.5px}
.tl-zone{fill:var(--faint);font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.1em}
.tl-empty{fill:var(--muted);font-family:var(--sans);font-size:14px}
.tl-caveat{fill:var(--faint);font-family:var(--mono);font-size:10px}
.figure-caption{font-size:13.5px;line-height:1.65;color:var(--muted);max-width:76ch}
.figure-note{font-size:12px;line-height:1.65;color:var(--faint);max-width:76ch;margin-top:8px}

/* ── Precedent ───────────────────────────────────────────────────────── */
.precedent{border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2);padding:15px 18px;margin-bottom:20px}
.precedent.tone-good{border-left-color:var(--ok)}
.precedent.tone-caution{border-left-color:var(--warn)}
.precedent.tone-bad{border-left-color:var(--sci)}
.precedent-tier{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);margin-bottom:7px}
.precedent-read{font-size:14.5px;line-height:1.6;max-width:76ch}
.precedent-ev{font-size:12.5px;line-height:1.65;color:var(--muted);margin-top:8px;max-width:76ch}
.approved-list{list-style:none;padding-left:0;margin-top:10px;display:grid;gap:6px}
.approved-list li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.flag-bad{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--sci);background:var(--sci-soft);padding:2px 7px;border-radius:99px}

/* ── Disclosures ─────────────────────────────────────────────────────── */
.disclose{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px}
.disclose>summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;
  color:var(--accent);letter-spacing:.03em;list-style-position:outside}
.disclose>summary:hover{text-decoration:underline;text-underline-offset:2px}
.disclose[open]>summary{margin-bottom:12px}

/* The figure strip under a panel heading. Counts that partition one total,
   read across in a single line. These class names were in the markup from the
   start and had no rule behind them, so five figures rendered as ten stacked
   lines of loose text -- which is what "the numbers do not match" looks like
   before you check whether they do. */
.summary{display:flex;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.stat{flex:1 1 128px;min-width:0;padding:13px 16px;border-left:1px solid var(--line-2)}
.stat:first-child{border-left:0}
.stat-v{font-family:var(--mono);font-size:23px;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.stat-l{margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--faint)}
.stat.hl .stat-v{color:var(--accent)}
.stat.secondary .stat-v{font-size:18px;color:var(--muted)}
@media (max-width:680px){
  .stat{flex:1 1 44%;border-top:1px solid var(--line-2)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(odd){border-left:0}
}

/* ── Catalysts ───────────────────────────────────────────────────────── */
.panel-verdict{font-size:15.5px;line-height:1.6;max-width:76ch;margin-bottom:18px;
  padding-left:13px;border-left:3px solid var(--accent)}
.panel-h{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--faint);margin:22px 0 10px}
.catalysts{list-style:none;padding-left:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.catalyst{display:grid;grid-template-columns:130px 1fr;gap:16px;
  background:var(--surface);padding:13px 16px}
.catalyst.strong{background:var(--accent-soft)}
.cat-when b{font-family:var(--mono);font-size:14px;font-weight:600;display:block}
.cat-when .hint{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.cat-level{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint);margin-left:8px}
.cat-level.strong{color:var(--ok)}
.cat-title{display:block;font-size:14px;margin-top:5px;line-height:1.45}
.cat-note{font-size:12.5px;line-height:1.65;color:var(--muted);margin-top:6px;max-width:70ch}
@media (max-width:620px){.catalyst{grid-template-columns:1fr;gap:6px}}

/* ── Modalities ──────────────────────────────────────────────────────── */
.modality-line{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:9px}
.modality-line b{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);min-width:140px}
.modality-line span{display:flex;gap:6px;flex-wrap:wrap}
.modality-chip{font-size:12.5px;padding:4px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--fg);font-family:inherit}
.modality-chip:hover{border-color:var(--accent);color:var(--accent)}
.modality-chip.used{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.modality-chip.open{border-color:var(--ok);color:var(--ok)}
.modality-chip.blocked{color:var(--faint);text-decoration:line-through}

/* ── Papers ──────────────────────────────────────────────────────────── */
.papers{list-style:none;padding-left:0;display:grid;gap:12px}
.paper-title{font-size:14.5px;line-height:1.45;display:block}
.paper-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;
  font-family:var(--mono);font-size:11px;color:var(--faint)}
.paper-cites{color:var(--muted)}
.paper-oa{color:var(--ok)}

/* ── Modality drawer ─────────────────────────────────────────────────── */
.drawer-eyebrow{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--faint);margin-bottom:6px}
.drawer-lede{font-size:14.5px;line-height:1.6;margin-top:8px}
.drawer-fit{font-size:13px;line-height:1.6;color:var(--muted);margin-top:10px;
  padding-left:12px;border-left:2px solid var(--line)}
.drawer-h{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--faint);margin:18px 0 8px}
.drawer-list{margin-left:18px;display:grid;gap:7px;font-size:13px;line-height:1.6}
.drawer-bd{font-size:13px;line-height:1.65;margin-top:14px;padding:11px 13px;
  background:var(--accent-soft);border-radius:8px;color:var(--accent-ink)}

/* ── Licensing ───────────────────────────────────────────────────────── */
.lic{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:15px 17px;margin-bottom:10px}
.lic-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lic-name{font-weight:600;font-size:14.5px}
.lic-sponsor{color:var(--muted);font-size:12.5px}
.read-pill{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;padding:3px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted)}
.read-pill.likely{background:color-mix(in srgb,var(--ok) 16%,transparent);
  color:var(--ok);border-color:transparent}
.read-pill.possibly{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.read-pill.unlikely{color:var(--faint)}
.lic-signals{margin-top:11px;display:grid;gap:9px}
.lic-signal{font-size:12.5px;line-height:1.6;color:var(--muted);
  padding-left:13px;border-left:2px solid var(--line-2)}
.lic-signal b{color:var(--fg);font-weight:600;display:block;font-size:13px}
.lic-signal.pos{border-left-color:var(--ok)}
.lic-signal.neg{border-left-color:var(--line)}

/* ── Workspace ───────────────────────────────────────────────────────── */
.workspace{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start}
@media (max-width:900px){.workspace{grid-template-columns:1fr}
  .filters{position:static!important;max-height:none!important}}

.filters{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:14px 15px 10px}
.filters-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.filters-head h2{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);font-weight:500}
.filters-note{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:12px}
.fgroup{border-top:1px solid var(--line-2);padding:11px 0 4px}
.fgroup:first-child{border-top:none}
.fgroup h3{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:7px;
  display:flex;justify-content:space-between;cursor:pointer;user-select:none}
.fgroup h3 .caret{color:var(--faint);font-size:9px}
.fopt{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px;
  color:var(--fg);cursor:pointer;line-height:1.4}
.fopt input{accent-color:var(--accent);margin:0;flex:none}
.fopt .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.fopt.off{color:var(--faint)}
.fmore{font-size:11.5px;margin-top:3px}
.filters-foot{border-top:1px solid var(--line-2);margin-top:10px;padding:10px 0 4px}

/* ── Panel and tabs ──────────────────────────────────────────────────── */
.panel{min-width:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:none;background:none;padding:9px 13px;cursor:pointer;font-size:13.5px;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.tab .badge{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:5px}
.tab[aria-selected="true"] .badge{color:var(--accent)}

.panel-intro{color:var(--muted);font-size:13.5px;line-height:1.7;margin-bottom:16px;max-width:72ch}
.empty{padding:44px 20px;text-align:center;color:var(--faint);font-size:13.5px;
  border:1px dashed var(--line);border-radius:var(--radius)}

/* ── Tables ──────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);font-weight:500;white-space:nowrap;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--accent)}
thead th .arrow{opacity:.45;margin-left:3px}
thead th[aria-sort]:not([aria-sort="none"]){color:var(--accent)}
thead th[aria-sort]:not([aria-sort="none"]) .arrow{opacity:1}
tbody tr[role=button]{cursor:pointer}
tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
tbody tr:hover td{background:var(--line-2)}
tbody tr:last-child td{border-bottom:none}
td.num{text-align:right;font-family:var(--mono);font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--muted)}
td.who{color:var(--muted)}
.asset-name{font-weight:600}
.asset-syn{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
.pill{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 7px;
  border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.p4{background:color-mix(in srgb,var(--accent) 34%,transparent);color:var(--fg);
  border-color:transparent}
.pill.p3{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-ink);
  border-color:transparent}
.pill.p2{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);
  border-color:transparent}
.pill.p1{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent);
  border-color:transparent}
.pill.dormant{color:var(--faint)}
.pill.sci{background:var(--sci-soft);color:var(--sci);border-color:transparent}
.pill.biz{background:var(--biz-soft);color:var(--biz);border-color:transparent}

/* matrix */
.matrix td.cell,.matrix th.cell{text-align:center;font-family:var(--mono);font-size:11px;
  font-weight:500;padding:8px 6px}
.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;background:var(--surface);
  border-right:1px solid var(--line);min-width:190px;z-index:1}
.matrix thead th:first-child{z-index:3}
.matrix tbody tr:hover td:first-child{background:var(--line-2)}
.c4{background:color-mix(in srgb,var(--accent) 34%,transparent)}
.c3{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.c2{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.c1{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.c0{background:color-mix(in srgb,var(--accent) 3%,transparent)}
.cx{color:var(--faint)}
.legend{font-family:var(--mono);font-size:10.5px;color:var(--faint);line-height:1.8;margin-top:10px}

/* mechanism cards */
.mech-grid{display:grid;gap:10px}
.mech{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:14px 16px}
.mech-head{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.mech-name{font-weight:600;font-size:14px}
.mech-bar{height:4px;background:var(--line-2);border-radius:99px;margin:10px 0 9px;overflow:hidden}
.mech-fill{height:100%;background:var(--accent);border-radius:99px}
.mech-more{margin-top:6px;font-size:11.5px}
.mech-caption{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--faint)}
.mech-assets{display:flex;flex-wrap:wrap;gap:6px}
.mech-asset{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;
  padding:2px 9px;cursor:pointer;background:var(--surface)}
.mech-asset:hover{border-color:var(--accent);color:var(--accent)}

/* termination cards */
.term{border-left:2px solid var(--line);padding:3px 0 3px 15px;margin:18px 0}
.term.sci{border-color:var(--sci)} .term.biz{border-color:var(--biz)}
.term q{quotes:none;display:block;font-size:14px;line-height:1.6;margin-bottom:7px}
.term-meta{font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.8}
.term-meta strong{color:var(--muted);font-weight:500}

/* whitespace */
.ws-score{display:inline-flex;align-items:center;gap:7px}
.ws-bar{width:52px;height:4px;background:var(--line-2);border-radius:99px;overflow:hidden}
.ws-fill{height:100%;background:var(--accent);border-radius:99px}

/* ── Drawer ──────────────────────────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:60}
.drawer-scrim{position:absolute;inset:0;background:rgba(16,19,21,.4)}
.drawer-body{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);
  background:var(--bg);border-left:1px solid var(--line);overflow-y:auto;
  padding:26px 26px 60px;box-shadow:var(--shadow)}
.drawer-close{position:absolute;top:14px;right:16px;border:none;background:none;
  cursor:pointer;color:var(--muted);font-size:15px;line-height:1}
.drawer h2{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.02em;
  padding-right:30px}
.drawer h3{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--faint);font-weight:500;margin:22px 0 8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}
.kv dt{color:var(--faint);font-family:var(--mono);font-size:11px;padding-top:2px}
.kv dd{margin:0;color:var(--fg)}
.trial{border-top:1px solid var(--line-2);padding:9px 0;font-size:12.5px}
.trial:first-of-type{border-top:none}
.trial-id{font-family:var(--mono);font-size:11.5px}
.prov{font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.8}

/* ── Method footer ───────────────────────────────────────────────────── */
.method{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.85}
.method strong{color:var(--muted);font-weight:500}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:99px;font-size:13px;
  box-shadow:var(--shadow)}

/* ── Taking the data away ────────────────────────────────────────────── */
/* A panel under the header buttons. It lists every table with its row count
   so the reader picks by what is actually there, not by tab name. */
.export-panel{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:14px 16px;max-width:340px;box-shadow:var(--shadow)}
.export-h{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.export-choices{display:flex;flex-direction:column;gap:2px}
.export-choice{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;
  padding:3px 0}
.export-choice.empty{color:var(--faint);cursor:default}
.export-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.export-note{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}
.export-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.btn-primary:disabled{opacity:.45;cursor:default}
@media (max-width:940px){.export-panel{max-width:none}}

/* The untried-modality list under the Untried tab. */
.untried-list{margin:8px 0 0;padding-left:18px}
.untried-list li{margin:0 0 6px;line-height:1.5}
.untried-list b{font-weight:600}

/* ── Science / business ─────────────────────────────────────────────────── */
:root{--face-sci:#2e6b8a; --face-biz:#8a5a2e}
.face-legend{display:flex;gap:16px;align-items:center;margin:12px 0 0;
  font-size:11.5px;color:var(--muted)}
.face-key{display:inline-flex;align-items:center;gap:6px}
.face-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.face-dot.face-science{background:var(--face-sci)}
.face-dot.face-business{background:var(--face-biz)}
.read-head{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:10px}
.read-head .face-legend{margin:0}
.tile.face-science{border-left:3px solid var(--face-sci)}
.tile.face-business{border-left:3px solid var(--face-biz)}

/* ── Where this target sits ─────────────────────────────────────────────── */
.pathway{margin:0 0 22px}
.pathway-lines{margin:8px 0 0;padding:0;list-style:none;counter-reset:pw}
.pathway-lines li{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;
  padding:7px 0;border-top:1px solid var(--line-2);font-size:13px;line-height:1.6}
.pathway-lines li:first-child{border-top:none}
.pw-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);padding-top:3px}
.pw-v{color:var(--muted)}
.pw-v b{color:var(--fg);font-weight:600}
.pw-v .link{font-weight:600}
.pw-out{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.pathway-lines li{grid-template-columns:1fr}}