/* drugset — cool-white ledger.
   Archivo (structure, variable width axis) · Newsreader (prose) · Sometype Mono (identifiers).

   One meaning per mark — keep this grammar or the page stops carrying information:
     yellow   evidence only: the highlighted span inside a quoted source sentence. Nothing else.
     filled   (ink) an evidenced, settled fact: Approved, Met primary.
     outlined a state, no judgement: Recruiting, Phase 3, Filing.
     red      something stopped — and only ever as a RULE under the fact (a border), never a fill,
              so it can never compete with a black fact-fill: Terminated, Missed primary, overdue.
     dashed   the record is silent: no outcome recorded, claim withdrawn.

   Teal is navigation: registry ids, source arrows, "next" — never a judgement. No radii, no
   shadows, no gradients; rules do the work cards would. */

:root {
  --stock: #eff0ef;        /* the page — cool white */
  --panel: #e4e6e5;        /* a second, slightly deeper flood of the same stock */
  --ink: #14181b;
  --body: #3f484d;
  --muted: #7a8285;
  --rule: #cbcecf;
  --grid: #e7e9ea;         /* the timeline's fainter-than-rule gridlines, on white */
  --accent: #2f6b7a;       /* teal — navigation only */
  --red: #b8342a;          /* the one signal red — a rule under a fact, never a fill */
  --yellow: #ffe800;
  --maxw: 1180px;
  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "Sometype Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The footer belongs at the BOTTOM of a short page, not floating under the last row with dead
   stock beneath it. Page is a column at least as tall as the viewport; main takes the slack. */
body {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--stock);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
footer.site { flex: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--yellow); color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---- masthead ---- */
header.site { background: var(--stock); border-bottom: 2px solid var(--ink); }
header.site .wrap { display: flex; align-items: center; gap: 26px; height: 56px; }

/* wordmark set plain in the display face — no block, no symbol */
.brand { display: flex; align-items: center; gap: 12px; }
.brand a { color: inherit; }
.brand .mark {
  display: inline-block; color: var(--ink);
  font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800;
  font-size: 19px; letter-spacing: -.02em; line-height: 1;
}
.brand a:hover .mark { color: var(--accent); }

.searchbox { margin-left: auto; }
.searchbox input {
  font-family: var(--mono); font-size: 12.5px; height: 32px; width: 260px;
  padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input:focus { outline: none; }

/* ---- generic ---- */
main { padding: 30px 0 46px; }

.eyebrow {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .22em;
  color: var(--muted); margin: 0 0 12px;
}
h1.page {
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 700;
  font-size: 38px; line-height: 1.04; letter-spacing: -.028em; margin: 0 0 6px;
}
.lede { font-size: 12px; color: var(--muted); margin: 0; }
.lede b { color: var(--ink); font-weight: 500; }
.count-note { font-size: 12px; color: var(--muted); }

.mono { font-family: var(--mono); }
.empty { color: var(--muted); font-size: 12.5px; }

/* ---- home: what's here, the search, then the change ledger ----
   The title is a LABEL for the corpus, not a pitch — sized like a page heading, and the line under
   it states one fact about the display rather than selling it. */
.portal { padding: 8px 0 28px; border-bottom: 2px solid var(--ink); }
.portal-mark {
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 700;
  font-size: 38px; line-height: 1.04; letter-spacing: -.028em; color: var(--ink);
  margin: 0 0 6px;
}
.portal-tag { font-size: 12px; color: var(--muted); margin: 0 0 24px; }
/* Square box: hairline keyline, the "/" well, the button set solid. */
.portal-search { display: flex; border: 1px solid var(--rule); height: 58px; max-width: 760px; background: #fff; }
.portal-search .slash { display: grid; place-items: center; width: 52px; color: var(--muted); font-size: 14px; }
.portal-search input {
  flex: 1; min-width: 0; border: none; background: transparent; border-radius: 0;
  font-family: var(--mono); font-size: 15px; padding: 0; color: var(--ink);
}
.portal-search input::placeholder { color: var(--muted); }
.portal-search input:focus { outline: none; }
.portal-search button {
  border: none; border-left: 1px solid var(--rule); cursor: pointer;
  background: var(--ink); color: var(--stock); padding: 0 26px;
  font-family: var(--display); font-variation-settings: "wdth" 74; font-weight: 700;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
}
.portal-search button:hover { background: var(--body); }
/* example queries */
.portal-try { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; align-items: center; }
.portal-try .try-label { color: var(--muted); font-size: 11px; margin-right: 3px; }
.portal-try a {
  font-family: var(--mono); font-size: 11px; padding: 5px 10px;
  border: 1px solid var(--rule); color: var(--body);
}
.portal-try a:hover { border-color: var(--ink); color: var(--ink); }

/* what's in the database, one quiet row under the search */
.portal-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; align-items: baseline; font-size: 11.5px; color: var(--muted); }
.portal-stats > * { display: flex; gap: 9px; align-items: baseline; color: inherit; }
.portal-stats b {
  font-family: var(--mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: -.01em;
}
.portal-stats a:hover b { color: var(--accent); }

/* ---- section heads: a label, then a hairline running to the margin ---- */
.section { margin: 34px 0; }
.section > h3 {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.section > h3::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
/* The note may SHRINK (and wrap) — `flex: none` let a long note ("approvals, filings & regulatory
   actions · 6 recorded") force the heading row wider than a phone viewport and drag the whole page
   sideways with it. With room to spare (desktop) nothing changes; squeezed, the note wraps in place
   and the hairline keeps whatever is left. */
.section > h3 .note {
  flex: 0 1 auto; min-width: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--muted); font-weight: 400;
}

/* ---- chips: square, one grammar ----
   filled = settled fact · outlined = state · red bottom rule = it stopped · dashed = silent */
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; line-height: 1.35;
  padding: 3px 8px; border: 1.5px solid var(--rule); color: var(--body); background: transparent;
}
a.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip .dot { display: none; }

/* classification stays an outlined state — the fill is reserved for settled facts */
.chip.cat-oligonucleotide, .chip.cat-small_molecule, .chip.cat-biologic,
.chip.cat-gene_therapy, .chip.cat-cell_therapy, .chip.cat-traditional_medicine {
  border-color: var(--ink); color: var(--ink);
}

/* lifecycle — outlined, no judgement */
.chip.phase,
.chip.st-recruiting, .chip.st-enrolling_by_invitation, .chip.st-not_yet_recruiting,
.chip.st-active_not_recruiting, .chip.st-completed {
  border-color: var(--rule); color: var(--body);
}
/* it stopped — an ink outline underscored by the one signal red. Never a fill. */
.chip.stopped,
.chip.st-terminated, .chip.st-withdrawn, .chip.st-suspended {
  border-color: var(--ink); border-bottom: 3px solid var(--red); color: var(--ink);
}
/* unknown / silent — dashed on bare stock */
.chip.silent, .chip.st-unknown { border-style: dashed; border-color: var(--rule); color: var(--muted); }

/* outcome — an evidenced result is the solid fact-fill; a miss is the red rule; mixed keeps an
   ink outline (a judgement, but not a settled single verdict) */
.chip.oc-met_primary { background: var(--ink); border-color: var(--ink); color: var(--stock); }
.chip.oc-missed_primary { border-color: var(--ink); border-bottom: 3px solid var(--red); color: var(--ink); }
.chip.oc-mixed { border-color: var(--ink); color: var(--ink); }

/* a drug's evaluation state, and an org's part in a trial */
.chip.evaluated, .chip.role-lead { border-color: var(--ink); color: var(--ink); }
.chip.background, .chip.role-collaborator { border-color: var(--rule); color: var(--muted); }

/* citation source label reused on the trial page */
.ds-src { font-size: 11.5px; }

/* regulatory milestones — an approval is the settled fact (filled); a CRL/withdrawal stopped
   (red rule); a filing/hold is an outlined in-progress state. */
.chip.re-chip { padding: 3px 8px; text-transform: capitalize; }
.re-approved { background: var(--ink); border-color: var(--ink); color: var(--stock); }
/* an efficacy supplement is approval-family but not THE approval — outlined ink, not filled */
.re-approved.re-expansion { background: transparent; color: var(--ink); }
.re-rejected, .re-withdrawn { border-color: var(--ink); border-bottom: 3px solid var(--red); color: var(--ink); }
.re-filed { border-color: var(--rule); color: var(--body); }
.re-hold { border-color: var(--ink); color: var(--ink); }

/* drugs-index "furthest phase": approved is settled (filled); a phase is a state (outlined);
   withdrawn stopped (red rule) */
.chip.fp-approved { background: var(--ink); border-color: var(--ink); color: var(--stock); }
.chip.fp-withdrawn { border-color: var(--ink); border-bottom: 3px solid var(--red); color: var(--ink); }

/* ---- detail pages ---- */
.crumb { font-size: 11.5px; color: var(--muted); margin-bottom: 16px; }
.crumb a { color: var(--body); }
.crumb a:hover { color: var(--accent); }

.detail-head { border-bottom: 2px solid var(--ink); padding-bottom: 26px; margin-bottom: 10px; }
.detail-head h1 {
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 700;
  font-size: 52px; line-height: 1.02; letter-spacing: -.03em; margin: 0 0 12px;
}
.detail-head .regline { margin: 0 0 12px; font-size: 13.5px; }
.detail-head .aka { font-size: 12.5px; color: var(--muted); }
.detail-head .aka b { color: var(--ink); font-weight: 500; }
/* "also known as" — every other name, as one quiet inline line (replaces the "Known as" table rows) */
.akas { margin-top: 8px; font-size: 13px; color: var(--body); line-height: 1.6; max-width: 46em; }
.akas .akas-label {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 8px;
}
.akas a { color: var(--body); text-decoration: none; border-bottom: 1px dotted var(--rule); cursor: pointer; }
.akas a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.akas a.akas-more { color: var(--accent); }
.akas .sep { color: var(--muted); }
/* brief flash when a cite-jump opens the evidence catalog, so the reader sees where they landed */
@keyframes cite-flash { from { background: var(--flash, #ffe80055); } to { background: transparent; } }
.evidence.flash { animation: cite-flash 1.4s ease-out; }
/* grounded one-line definition (modality · targets · action), in the identity block. Concept terms
   link to the drug list filtered by that facet; connectives are muted. */
.detail-head .definition {
  font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--body);
  margin: 18px 0 0; max-width: 46em; text-wrap: pretty;
}
.definition .lead, .definition .sep { color: var(--muted); }
/* capitalise whatever leads the sentence — for a target-only drug (modality unknown) that's the verb
   "targets", which would otherwise read as a lowercase dangling fragment */
.definition::first-letter { text-transform: uppercase; }
.definition .term {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--rule); transition: color .12s, border-color .12s;
}
.definition .term:hover { color: var(--accent); border-bottom-color: var(--accent); }
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; align-items: center; }
/* aligned label/value grid under the title (Developed for / Investigated by): one fixed label column
   so the values line up as a single spec block, with the same subtle-link styling for every value */
.drugmeta { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; margin-top: 20px; max-width: 52em; }
.drugmeta dt {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.drugmeta dd { margin: 0; line-height: 1.6; }
.drugmeta a { color: var(--body); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.drugmeta a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.drugmeta .sep { color: var(--muted); }
@media (max-width: 560px) { .drugmeta { grid-template-columns: 1fr; gap: 3px 0; } .drugmeta dt { padding-top: 10px; } }
.mech-block {
  font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--body);
  margin: 24px 0; max-width: 46em; text-wrap: pretty;
}

/* the identity block's right rail: the Follow action, and when the record was last re-read */
.headside { float: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 6px 0 12px 24px; }
.headside .reread { font-size: 11.5px; color: var(--muted); }

/* Trial outcome verdict as a word, not a pill: met/mixed set in ink, a miss underscored in red so
   the one colour stays rationed to the fact that matters. The evidence sits below in `.ev` lines. */
.verdict {
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 700;
  font-size: 20px; letter-spacing: -.01em; color: var(--ink); margin: 14px 0 12px;
}
.verdict.vl-missed_primary { box-shadow: inset 0 -3px 0 var(--red); }
.verdict.vl-none { font-weight: 600; font-size: 16px; color: var(--muted); }
.verdict.vl-none .empty { font-weight: 400; }
/* one grounded outcome-evidence line — a PR quote (serif) or a CT.gov figure (endpoint title + value) */
.oev {
  font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--body);
  margin: 8px 0; max-width: 54em; text-wrap: pretty;
}
.oev-endpoint { color: var(--muted); }

/* Verbatim registry prose (trial brief summary). pre-line keeps the source's paragraph breaks. */
.prose {
  font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--body);
  max-width: 46em; white-space: pre-line; text-wrap: pretty; margin: 0;
}

/* trial study-design descriptors: a second, lighter chip row under the primary chips */
.chiprow.design { margin-top: 8px; }
.chip.design {
  background: transparent; border: 1px solid var(--rule); color: var(--body);
  font-variation-settings: "wdth" 100; font-weight: 500; text-transform: none; letter-spacing: 0;
}

/* linked publications (CT.gov referencesModule) */
.pubs { margin: 8px 0 0; padding-left: 1.15em; max-width: 52em; }
.pubs li {
  font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--body); margin: 10px 0;
}
.pub-type {
  font-family: var(--display); font-variation-settings: "wdth" 85; font-weight: 600;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px;
}

.def { display: grid; grid-template-columns: 190px 1fr; gap: 0; border-top: 1px solid var(--rule); }
.def dt {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  padding: 13px 14px 11px 0; border-bottom: 1px solid var(--rule);
}
.def dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }

.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.gene {
  display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--mono); font-size: 12px;
  padding: 6px 11px; border: 1.5px solid var(--ink); color: var(--ink);
}
.gene .action { color: var(--muted); font-size: 11px; }
a.gene:hover { background: var(--ink); color: var(--stock); }
a.gene:hover b, a.gene:hover .action { color: var(--stock); }

/* ---- data tables: rules only, no cards, no fills ---- */
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; vertical-align: bottom;
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  padding: 0 14px 9px 0; border-bottom: 2px solid var(--ink);
}
table.data th:last-child, table.data td:last-child { padding-right: 0; }
/* BASELINE-aligned, not top-aligned: a row here mixes faces (a mono date beside a serif quote),
   and top alignment lines up the boxes while each font settles into its line box by its own
   metrics — first lines then start at visibly different heights. Aligning the first BASELINES is
   the one thing mixed type shares; a multi-line cell still reads from the row's first line. */
table.data td {
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
table.data tr:hover td { background: var(--panel); }
table.data .mono { font-family: var(--mono); }
table.data td.num, table.data th.num { text-align: right; }
/* a registry id is navigation */
table.data a.nct { color: var(--accent); }
/* the press-release table keeps its columns at every width, so its date must never break across
   its hyphens ("2010-11-" / "29") when the release-title column presses on it */
.pr-cols td:first-child { white-space: nowrap; }
/* Wide tables: fixed layout with per-table column widths, so a long cell can't hand itself the
   widest column and squeeze the rest. The old inner scroll box (a 420px tbody with its own
   scrollbar) is gone — a long table now FOLDS to its head behind one "Show N more" row (see
   _macros.html), so the page's own scrollbar is the only one, and it stays honest about length.

   All of it is scoped to wide screens on purpose: a phone has no columns to align (the header is
   dropped and rows become records), and these nth-child widths are specific enough to outrank
   anything the mobile rules could say — a `width: 8%` column surviving into a flex record crushes
   its cell to 27px. Desktop-only concern, desktop-only rules. */
@media (min-width: 761px) {
  :is(.trial-cols, .pr-cols, .ev-cols, .reg-cols) { table-layout: fixed; width: 100%; }
  /* fixed layout needs explicit column widths; the one unset column absorbs the slack (the wide text
     column — Release / Title). */
  .pr-cols :is(th, td):nth-child(1) { width: 13%; }
  .pr-cols :is(th, td):nth-child(2) { width: 22%; }
  /* trials ladder: Phase · Registry id · Dates · Indication (slack) · Sponsor · Status · Outcome */
  .trial-cols :is(th, td):nth-child(1) { width: 9%; }
  .trial-cols :is(th, td):nth-child(2) { width: 13%; }
  .trial-cols :is(th, td):nth-child(3) { width: 18%; }
  .trial-cols :is(th, td):nth-child(5) { width: 15%; }
  .trial-cols :is(th, td):nth-child(6) { width: 13%; }
  .trial-cols :is(th, td):nth-child(7) { width: 12%; }
  /* A fixed column can be narrower than its longest chip label ("Active not recruiting" ran 155px
     in an 89px column) and a nowrap chip then spilled across the next cell. In these columns a chip
     wraps to its column instead. Scoped here: in the phone record layout rows are flex, not
     columns, and wrapping there would break short labels over two lines for no reason. */
  table.data .chip { max-width: 100%; white-space: normal; }
  /* the regulatory table's indication column: clamp long label text to two lines (full text in the
     title, and unclamped in the phone record) rather than truncating it server-side for all
     viewports at once */
  .reg-cols .ind {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* a date is one token — auto table layout was breaking "2009-10-15" across its hyphens when a
     long neighbouring column pressed on it */
  .reg-cols td:nth-child(5) { white-space: nowrap; }
  /* Balance indication against cited text: left alone, auto layout hands the longest content the
     widest column — a 331-char label clause took 498px while the quote (the evidence, the thing a
     reader actually reads) stacked 6 lines tall in 237px. The quote gets the wider share; the
     indication is 2-line clamped either way, so width only changes where its ellipsis falls. */
  .reg-cols :is(th, td):nth-child(1) { width: 14%; }
  .reg-cols :is(th, td):nth-child(4) { width: 22%; }
  .reg-cols :is(th, td):nth-child(5) { width: 11%; }
  .reg-cols :is(th, td):nth-child(6) { width: 33%; }
  /* a run of label expansions spans two dates; the second takes its own line in the column */
  .reg-cols .drange { display: block; }
  /* evidence catalog: Field · Value · Cited text (slack) */
  .ev-cols :is(th, td):nth-child(1) { width: 14%; }
  .ev-cols :is(th, td):nth-child(2) { width: 24%; }
}
/* ---- folds: a long table shows its head, the rest waits behind one row ----
   The row is a bordered action in the navigation teal (it goes somewhere: down the list, or to the
   full record). A folded row is hidden by attribute; the !important is what lets that attribute win
   over the phone's `display: grid` record rule below. */
tr[hidden] { display: none !important; }
tr.foldrow td { padding: 10px 0 12px; }
.foldbtn {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; cursor: pointer;
  border: 1.5px solid var(--rule); border-radius: 0; background: transparent; color: var(--accent);
  font-family: var(--display); font-variation-settings: "wdth" 74; font-weight: 700;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.foldbtn:hover { border-color: var(--ink); color: var(--ink); }
.fold-note { font-size: 11.5px; color: var(--muted); margin-left: 10px; }
/* a phase's rung in the ladder: the tally line a reader of a 400-trial Phase 3 actually wants */
table.data tr.rung td { padding: 22px 0 7px; border-bottom: 1.5px solid var(--ink); }
table.data tr.rung:first-child td { padding-top: 10px; }
table.data tr.rung:hover td { background: transparent; }
.rung-phase {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.rung-n { margin-left: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* "+N" after a capped inline list (a trial's fifth indication, a row's fourth investigator) — the
   rest is in the title */
.more-n { font-size: 11px; color: var(--muted); white-space: nowrap; }
.drugmeta a.more-link { color: var(--accent); border-bottom-color: var(--accent); }
/* the identity block's folded tails (Developed for / Investigated by): "+N more" opens IN PLACE and
   the rest of the list flows on after it — no jump, no new block */
details.morelist { display: inline; }
details.morelist > summary {
  display: inline; cursor: pointer; list-style: none; color: var(--accent);
  border-bottom: 1px dotted var(--accent);
}
details.morelist > summary::-webkit-details-marker { display: none; }
details.morelist[open] > summary { display: none; }
details.morelist:hover > summary { color: var(--ink); border-bottom-color: var(--ink); }

/* the cited-source column — quoted prose, set in the serif so it reads as the source speaking */
td.quote { font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--body); }
/* The quote (or release title) carries its own source as a trailing ↗ link — no source column. A
   value cited by several sources folds the extras behind a small "+N more sources" toggle, each its
   own quote + ↗. */
/* the ↗ is set in the display face (not the surrounding serif quote) so it stays crisp */
.srcarrow { font-family: var(--display); font-size: 12px; color: var(--accent); text-decoration: none; margin-left: 3px; white-space: nowrap; }
.srcarrow:hover { color: var(--ink); }
/* the registrable domain shown before the arrow (e.g. clinicaltrials.gov) — a muted provenance
   label so a source reads as `nih.gov ↗`, not an anonymous arrow. Underlines on hover with its ↗. */
.srcdom { font-size: 0.98em; }
.srcarrow:hover .srcdom { text-decoration: underline; }
/* the cited source's own publication date — provenance metadata, quieter than the link it dates */
.srcdate { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* extra sources fold behind a compact inline "+N" right after the arrow; opening drops each source's
   own quote below */
details.morecites { display: inline; }
details.morecites > summary {
  display: inline; cursor: pointer; list-style: none; margin-left: 5px;
  font-family: var(--display); font-weight: 600; font-size: 11px; color: var(--accent);
}
details.morecites > summary::-webkit-details-marker { display: none; }
details.morecites > summary::before { content: "+"; }
.morecite { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--rule); }
/* THE one use of yellow on the whole site */
mark, .ev {
  background: var(--yellow); color: var(--ink); padding: 0 2px;
}
/* a value no held document states — the row goes quiet rather than inferred */
tr.nilrow td, td.quote .nilnote { color: var(--muted); }
td.quote .nilnote { font-style: italic; }

/* the evidence catalog's one-line ledger summary */
.ev-summary { font-size: 11.5px; color: var(--muted); margin: 0 0 14px; }

/* ---- drug results table ---- */
.drugtable tbody tr { cursor: pointer; }
.drugtable td { vertical-align: baseline; }
.drugtable td.drugname a {
  font-family: var(--display); font-variation-settings: "wdth" 96; font-weight: 700;
  font-size: 16px; letter-spacing: -.015em; color: var(--ink);
}
.drugtable tbody tr:hover td.drugname a { color: var(--accent); }
.drugtable td.drugname .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.drugtable td a.qlink { color: var(--body); border-bottom: 1px dotted var(--rule); }
.drugtable td a.qlink:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (min-width: 761px) {
  .drugtable { table-layout: fixed; }
  /* Drug · Target · Lead indication (slack) · Investigators · Furthest phase · Trials · Last change */
  .drugtable :is(th, td):nth-child(1) { width: 19%; }
  .drugtable :is(th, td):nth-child(2) { width: 8%; }
  .drugtable :is(th, td):nth-child(4) { width: 16%; }
  .drugtable :is(th, td):nth-child(5) { width: 11%; }
  .drugtable :is(th, td):nth-child(6) { width: 5%; }
  .drugtable :is(th, td):nth-child(7) { width: 9%; padding-left: 18px; }
  .drugtable .chip { max-width: 100%; white-space: normal; }
}
/* the record's newest dated fact — quiet, it ties the row to the log rather than shouting */
.drugtable td.lastchg { font-size: 11.5px; color: var(--muted); }

/* ---- home change ledger ---- */
@media (min-width: 761px) {
  .chg-cols { table-layout: fixed; }
  .chg-cols :is(th, td):nth-child(1) { width: 106px; }
  .chg-cols :is(th, td):nth-child(2) { width: 150px; }
  .chg-cols :is(th, td):nth-child(3) { width: 196px; }
  .chg-cols .chip { max-width: 100%; white-space: normal; }
}
/* the exact date leads, its distance from today sits under it — the ledger is dated twice because
   "2026-06-24" answers "when" and "48 days ago" answers "how stale" */
.chg-date .chg-when { display: block; font-size: 11px; color: var(--muted); }
.chg-drug a {
  font-family: var(--display); font-variation-settings: "wdth" 96; font-weight: 700;
  font-size: 15px; letter-spacing: -.015em; color: var(--ink);
}
.chg-drug a:hover { color: var(--accent); }
.chg-detail { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }

@media (max-width: 760px) {
  /* one record per change: date · chip / drug / the sentence */
  .chg-cols { border-top: 2px solid var(--ink); }
  .chg-cols thead { display: none; }
  .chg-cols tbody { display: block; }
  .chg-cols tbody tr {
    display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: baseline; gap: 4px 16px; padding: 13px 0 15px;
    border-bottom: 1px solid var(--rule);
  }
  table.data.chg-cols td { display: block; border: none; padding: 0; max-width: 40em; }
  .chg-cols td:nth-child(1) { order: 1; grid-column: 1; }
  .chg-cols td:nth-child(3) { order: 2; grid-column: 2; }
  .chg-cols td:nth-child(2) { order: 3; grid-column: 1 / -1; }
  .chg-cols td:nth-child(4) { order: 4; grid-column: 1 / -1; }
  .chg-cols .chg-date .chg-when { display: inline; margin-left: 8px; }
}

/* ---- filter bar: one ruled bar — the free text, the facets, clear ---- */
.drugfilters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 22px 0 20px; padding-bottom: 18px; border-bottom: 2px solid var(--ink);
}
.df-search { flex: 1 1 260px; min-width: 240px; max-width: 340px; }
.df-search input {
  width: 100%; height: 36px; font-family: var(--mono); font-size: 13px;
  padding: 0 13px; border: 1.5px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
}
.df-search input::placeholder { color: var(--muted); }
.df-search input:focus { outline: none; }

/* themed facet dropdown (custom <details>, not a native <select>) */
.facet { position: relative; }
.facet > summary {
  list-style: none; cursor: pointer; height: 36px; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 12px; border: 1.5px solid var(--rule); background: transparent;
  font-family: var(--mono); font-size: 12.5px; color: var(--body); user-select: none;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary:hover { border-color: var(--ink); color: var(--ink); }
.facet .facet-label { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet .facet-caret { font-size: 9px; color: var(--muted); margin-left: auto; }
.facet[open] > summary { border-color: var(--ink); color: var(--ink); }
/* an applied facet is a settled choice — the fact-fill */
.facet.on > summary { background: var(--ink); border-color: var(--ink); color: var(--stock); }
.facet.on .facet-caret { color: var(--stock); }
/* the open menu is a hard keyline, not a floating card: no shadow, no radius */
.facet-menu {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  min-width: 250px; width: max-content; max-width: 340px;
  background: var(--stock); border: 1.5px solid var(--ink); padding: 8px;
}
.facet-search {
  width: 100%; height: 32px; margin-bottom: 8px; font-family: var(--mono); font-size: 12px;
  padding: 0 10px; border: 1px solid var(--rule); border-radius: 0; background: #fff; color: var(--ink);
}
.facet-search:focus { outline: none; border-color: var(--ink); }
/* The scroll lane is reserved (gutter) so a row's selection fill never runs under the thumb — but
   styled like every other scroll box on the site (thin, transparent track), so the lane is a slim
   rule-grey thumb on the menu's own background, not the browser's chunky white track. */
.facet-opts {
  max-height: 300px; overflow-y: auto; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  /* centre the thumb in the gap between a row's fill and the menu border: the lane hugs the box's
     right edge, so equal air on both sides = padding pushing the rows off the lane + an equal
     negative margin pulling the lane into the menu's 8px padding */
  padding-right: 4px; margin-right: -4px;
}
.facet-menu a {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 6px 8px; font-size: 12.5px; color: var(--ink); white-space: nowrap;
}
.facet-menu a:hover { background: var(--panel); color: var(--ink); }
.facet-menu a.sel { background: var(--ink); color: var(--stock); }
.facet-menu .fo-label { overflow: hidden; text-overflow: ellipsis; }
.facet-menu .fo-n { font-size: 11px; color: var(--muted); flex: none; }
.facet-menu a.sel .fo-n, .facet-menu a.sel:hover { color: var(--stock); }
.facet-menu a.sel:hover { background: var(--ink); }

/* disease MONDO tree */
.facet-menu-tree { min-width: 330px; max-width: 410px; }
.tree-all { display: block; padding: 6px 8px; font-size: 12.5px; color: var(--body); margin-bottom: 4px; }
.tree-all:hover { background: var(--panel); }
.tree-all.sel { background: var(--ink); color: var(--stock); }
.facet-tree {
  max-height: 340px; overflow-y: auto; scrollbar-gutter: stable;  /* same treatment as .facet-opts */
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  padding-right: 4px; margin-right: -4px;
}
.trow { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; }
.trow:hover { background: var(--panel); }
.trow.sel { background: var(--ink); }
.trow.sel .tlabel, .trow.sel .tn, .trow.sel .ttoggle { color: var(--stock); }
.ttoggle {
  flex: none; width: 18px; height: 22px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 9px; padding: 0; line-height: 1;
}
.ttoggle:hover { color: var(--ink); }
.tdot { flex: none; width: 18px; text-align: center; color: var(--rule); }
.tlabel {
  flex: 1; padding: 5px 0; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tn { flex: none; font-size: 11px; color: var(--muted); padding-left: 8px; }
.tchildren { margin-left: 16px; border-left: 1px solid var(--rule); padding-left: 3px; }

.df-clear { font-size: 12px; color: var(--muted); padding: 0 8px; align-self: center; }
.df-clear:hover { color: var(--ink); }

/* ---- cards: not cards. a ruled entry in a catalogue ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; }
.card {
  display: block; color: inherit; padding: 14px 0 16px;
  border-top: 1px solid var(--rule);
}
.card:hover { color: inherit; }
.card:hover .title { color: var(--accent); }
.card .title {
  font-family: var(--display); font-variation-settings: "wdth" 96; font-weight: 700;
  font-size: 18px; letter-spacing: -.018em; color: var(--ink);
}
.card .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.card .mech {
  font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--body); margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.card .metrics { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.card .metrics b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.card .nct { font-size: 11.5px; color: var(--accent); }

/* ---- trial timeline: black bars on a white ruled field ---- */
/* Chip-heavy rows centre on the chips' axis, like .drugtable: with the default vertical-align: top
   a chip's border+padding push its text below the bare text beside it, so a registry id sat visibly
   high against its Phase chip in every row. Scoped to the ladder — prose tables (evidence, PRs)
   keep top alignment, where a paragraph beside a short value should start at the row's top. */
.trial-cols td { vertical-align: middle; }
/* per-trial condition cell in the ladder — the trial's own indication(s), wrapping when several */
td.tconds { font-size: 13px; }
td.tconds a { color: var(--body); border-bottom: 1px dotted var(--rule); }
td.tconds a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* The ladder's date span. The range itself never breaks — "Mar 2019 →" stranded above "Apr 2021"
   reads as two dates — but the expected/overdue qualifier after it may drop to its own line rather
   than force the column wide enough for the longest label in the table. */
td.tspan { font-size: 13px; }
td.tspan .mono { white-space: nowrap; }
/* "expected" on an open trial's projected readout year: subordinate to the year itself, but a word
   the reader can read — set as small caps ("EST.") it was taken for a stray abbreviation rather than
   a qualifier on the date. Lowercase, in the body face, so it reads as the sentence it is. */
.est { font-size: 11.5px; color: var(--muted); }
/* "overdue" is not a caveat on the date, it's a finding — a readout the sponsor has missed. It gets
   the ink and the one signal red as a rule under it, the same mark a stopped chip carries. */
.est.late { color: var(--ink); border-bottom: 2px solid var(--red); }

.tl { margin: 18px 0 34px; }
/* cross-highlight between a ladder row and its timeline bar (both carry data-trial) */
.tl-bar.hl { background: var(--body); outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.data tbody tr.hl td { background: var(--panel); }
/* Clicking a bar scrolls to its row and MARKS it — hover can't do this job, since the pointer has
   left the bar by the time the scroll lands and the mark has to survive that. The mark IS the hover
   treatment, persistent — no extra chrome (an earlier edge-rule attempt fragmented on the table
   row and read as broken glyphs). Hover moving on is what distinguishes the two. One row at a
   time; picking another releases the last. */
.data tbody tr.picked td { background: var(--panel); }
.tl-bar.picked { background: var(--body); outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
/* The phone record is a grid of blocks, not a row of cells: per-cell backgrounds leave the grid's
   own gaps unpainted and the mark reads as stripes — the fill moves to the whole card. */
@media (max-width: 760px) {
  .trial-cols tbody tr.picked td { background: transparent; }
  .trial-cols tbody tr.picked { background: var(--panel); }
}
/* The bar field grows to fit every trial — no inner scroll. The plot exists to answer "how many
   trials, overlapping over what span", and a viewport showing 11 of 34 with no count destroys the
   one thing it does that the table below doesn't. The page's own scrollbar is the honest one: it
   tells you how much is left, an inner box doesn't. */
.tl-scroll {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #fff;
}
.tl-plot { position: relative; width: 100%; }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(var(--muted) 0 3px, transparent 3px 6px); }
/* "today" names its dashed rule, hanging just left of it at the top of the plot */
.tl-today-label {
  position: absolute; transform: translateX(calc(-100% - 5px));
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted);
  background: #fff; padding: 0 2px; top: 0;
}
/* Approval is a fact, not a mood: a black rule down the plot, flying its own stamp. The rule's
   `top` is set per-stamp so it starts under the label it belongs to — see the template. The stamp
   sits flush to the rule (no translate), so the two read as one mark rather than a label and a
   line that happen to be near each other. */
.tl-approval { position: absolute; bottom: 0; width: 2px; background: var(--ink); }
.tl-approval-label {
  position: absolute; z-index: 2;
  font-family: var(--mono); font-size: 10px; line-height: 14px;
  background: var(--ink); color: var(--stock);
  padding: 0 5px; white-space: nowrap; letter-spacing: .04em;
}
/* at the right edge the stamp hangs off the LEFT of its rule, still flush to it */
.tl-approval-label.flip { transform: translateX(calc(-100% + 2px)); }
/* a trial span is a black bar; a span that was stopped keeps the bar and takes the red as its cut
   end — the trial ran, then was stopped there. The red never fills anything. */
.tl-bar {
  position: absolute; height: 18px; display: flex; align-items: center; min-width: 3px;
  background: var(--ink); padding: 0 6px; overflow: hidden;
}
.tl-bar:hover { background: var(--body); }
.tl-bar.failed { border-right: 4px solid var(--red); }
.tl-bar-label { font-family: var(--mono); font-size: 10px; color: var(--stock);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Histogram mode (past GANTT_MAX trials): one ink column per year of trial starts, its count
   above it; a year with stopped trials takes the same red cut end a stopped bar does. The columns
   are inset by hairlines of the field's white so adjacent years don't fuse into one block. */
.tl-bin {
  position: absolute; bottom: 0; background: var(--ink);
  border-left: 2px solid #fff; border-right: 2px solid #fff;
}
.tl-bin:hover { background: var(--body); }
.tl-bin.failed { border-bottom: 3px solid var(--red); }
.tl-bin-n {
  position: absolute; left: 0; right: 0; top: -15px; text-align: center;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.tl-axis { position: relative; height: 16px; margin-top: 4px; }
.tl-year { position: absolute; transform: translateX(-50%); font-family: var(--mono);
  font-size: 10px; color: var(--muted); }

/* ---- primary-endpoint callout ---- */
.pri-label {
  display: inline-block; margin-right: 8px; padding: 2px 7px;
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--ink); color: var(--stock);
}

/* ---- footer ----
   Statutory identification on the left, the way through to /about on the right. Everything else
   (sources, method, terms, full company details) lives on that page, not here. */
footer.site { border-top: 2px solid var(--ink); padding: 20px 0 34px; margin-top: 56px; }
footer.site .wrap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
footer.site .muted { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.foot-nav { display: flex; gap: 20px; }
.foot-nav a {
  font-family: var(--display); font-variation-settings: "wdth" 75; font-weight: 600;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--body);
}
.foot-nav a:hover { color: var(--ink); }

/* ---- about ---- */
.about { margin-top: 34px; max-width: 760px; }
.about-sec { border-top: 1.5px solid var(--ink); padding-top: 16px; margin-top: 34px; }
.about-sec h2 {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 14px;
}
.about-sec p {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--body); margin: 0 0 14px;
}
.about-sec p:last-child { margin-bottom: 0; }
.about-sec .def { margin: 0; }
.about-sec .def dd { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.about-sec .about-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 16px; }
.about-sec .about-company { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }

/* ---- pager ---- */
nav.pager { display: flex; align-items: baseline; gap: 18px; padding: 18px 0 0; border-top: 1px solid var(--rule); margin-top: 8px; }
nav.pager a { font-family: var(--display); font-variation-settings: "wdth" 80; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
nav.pager a:hover { color: var(--ink); }
nav.pager .pager-status { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
nav.pager .pager-next { margin-left: auto; }

/* ---- nothing found ---- */
.big-empty { border: 1.5px dashed var(--rule); padding: 64px 32px; text-align: center; color: var(--body); }
.big-empty .mark {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.big-empty h1.page { margin-top: 10px; color: var(--ink); }
.big-empty p { font-family: var(--serif); font-size: 17px; color: var(--body); }

@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .portal-mark { font-size: 42px; }
  .def { grid-template-columns: 1fr; }
  .def dt { border-bottom: none; padding-bottom: 0; }
  h1.page { font-size: 32px; }
  .detail-head h1 { font-size: 36px; }
  .headside { margin-left: 16px; }
}

/* ---- phones ------------------------------------------------------------
   Three rules carry almost all of this: a WIDE TABLE BECOMES A LIST OF RECORDS, a DROPDOWN BECOMES
   A SHEET, and the TIMELINE PANS INSTEAD OF COMPRESSING. The sheet applies to every `.facet` and
   the record layouts to each wide table by class; a new narrow table fits as-is, and an unclassed
   wide one degrades to a side-scroll box rather than overlapping. Everything else is sizing. */
@media (max-width: 760px) {
  main { padding: 22px 0 48px; }

  /* The masthead search is a phone's only way back to the index — it stays, taking the width the
     wordmark doesn't need. */
  .searchbox { flex: 1 1 auto; min-width: 0; }
  .searchbox input { width: 100%; height: 38px; }

  /* --- a NARROW table stays a table; scroll is only the safety net ---
     `display: block` on the table makes it its own scroll container (the browser lays the rows out
     in an anonymous table inside — no wrapper div needed), so an unclassed wide table written later
     degrades to a side-scroll instead of overlapping text. No shipped table actually relies on it:
     the three-column tables (press releases, evidence) fit 375px outright, and every wider table is
     transposed to records below. */
  table.data {
    display: block; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  }
  /* `thead`/`tbody` are left at their default table display ON PURPOSE. Making the table a block box
     is enough to turn it into the scroll container; the browser then lays the rows out in one
     anonymous table inside, so header and body share a single set of column widths. Forcing
     `thead`/`tbody` to `display:table` splits them into two independent tables that each size their
     own columns — the header then no longer lines up with the body. */
  /* touch has no hover, and a hover fill that sticks after a tap reads as a selection */
  table.data tr:hover td { background: none; }

  /* --- a WIDE table becomes a list of records, and every record speaks ONE grammar ---
     An eight-column table in a 335px scroll box shows three columns and hides five behind an
     unsignalled side-scroll — and a flex-wrapped transposition is no better, breaking every row at
     a different point so no two records align. So all four wide tables share one fixed-slot grid:

         identity                        primary chip     (what is this · what kind)
         dates / detail             secondary chip/fact   (when · what state)
         long text, full width                            (what it's about)
         quiet meta, full width                           (who / provenance)

     The same fact is always in the same place down the list, and learning to read one table is
     learning to read them all. Headers go — the values are self-labelling (chips carry their own
     words, ids and dates declare their type) — and the table takes over the header's 2px top rule.

     The second column sits NEXT TO the first (max-content + start-aligned), never at the far
     edge: this layout serves every width up to 760px, and pinning col 2 to the right margin read
     fine at 375px but at a 730px window it scattered a chip and its date 650px apart — proximity
     is what binds two facts into one statement, and no straight right edge is worth breaking it.
     For the same reason every cell's measure is capped: full-bleed record text at 730px is a
     95-character mono wall.

     Only grid-COLUMN is pinned, never grid-row: a hidden cell just closes up instead of leaving
     an empty track behind. Source order is overridden with `order`, so each table puts its
     identity first regardless of its desktop column order. */
  :is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) { border-top: 2px solid var(--ink); }
  :is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) thead { display: none; }
  :is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) tbody { display: block; }
  :is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) tbody tr {
    display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: baseline; gap: 4px 16px;
    padding: 13px 0 15px; border-bottom: 1px solid var(--rule);
  }
  /* table.data:is(...) rather than bare :is(...) — this must outrank `table.data td`'s padding
     and row border above */
  table.data:is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) td {
    display: block; border: none; padding: 0;
    max-width: 40em;  /* readable measure at any record width — see the header comment */
  }
  /* a `nil` cell is a placeholder dash for desktop column alignment; in a record it would be a
     stranded "—" labelling nothing, so it is dropped */
  table.data:is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) td.nil { display: none; }
  /* a chip beside a long col-1 cell may have little room left — it wraps to what it has rather
     than spilling; scoped here because in desktop columns short labels must not break in two */
  table.data:is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) .chip { white-space: normal; }

  /* drug page, trials — identity: registry id · phase / dates · status / indication / sponsor.
     Columns: 1 Phase · 2 Registry id · 3 Dates · 4 Indication · 5 Sponsor · 6 Status · 7 Outcome */
  .trial-cols td:nth-child(2) { order: 1; grid-column: 1; font-size: 15px; }        /* registry id */
  .trial-cols td:nth-child(1) { order: 2; grid-column: 2; }                         /* phase */
  .trial-cols td:nth-child(3) { order: 3; grid-column: 1; }                         /* dates */
  .trial-cols td:nth-child(6) { order: 4; grid-column: 2; }                         /* status */
  .trial-cols td:nth-child(4) { order: 5; grid-column: 1 / -1; font-size: 13px; }   /* indication */
  /* the sponsor stays a link but not a loud one — it repeats down the whole list (one drug, usually
     one sponsor), so in record form it's the record's quietest line, under the id that identifies it */
  .trial-cols td:nth-child(5) { order: 6; grid-column: 1 / -1; font-size: 12px; }
  .trial-cols td:nth-child(5) a { color: var(--muted); }
  .trial-cols td:nth-child(7) { order: 7; grid-column: 1 / -1; }                    /* outcome */

  /* drug page, regulatory milestones — identity: milestone · date / jurisdiction · brand /
     indication / the evidence quote. The indication is FULL here (the desktop column clamps it;
     a record has room to wrap, and an amputated "…of osteoarthritis (OA),..." helps nobody). */
  .reg-cols td:nth-child(1) { order: 1; grid-column: 1; }                           /* milestone */
  .reg-cols td:nth-child(5) { order: 2; grid-column: 2; }                           /* date */
  .reg-cols td:nth-child(2) { order: 3; grid-column: 1; font-size: 13px; }          /* jurisdiction */
  .reg-cols td:nth-child(3) { order: 4; grid-column: 2; }                           /* brand */
  .reg-cols td:nth-child(4) { order: 5; grid-column: 1 / -1; font-size: 13px; }     /* indication */
  .reg-cols td:nth-child(6) { order: 6; grid-column: 1 / -1; }                      /* evidence */
  /* an event with no quote shows only its source link — as the record's provenance line it gets
     the quiet-meta size, not a full-size line stranded under the facts */
  .reg-cols td.quote > .srcarrow { font-size: 12px; }

  /* trial page, drugs — identity: drug name · modality / dose · route / evaluation-if-notable */
  .tdrug-cols td:nth-child(2) { order: 1; grid-column: 1; font-size: 15px; }        /* drug name */
  .tdrug-cols td:nth-child(3) { order: 2; grid-column: 2; }                         /* modality */
  .tdrug-cols td:nth-child(4) { order: 3; grid-column: 1; font-size: 13px; }        /* dose */
  .tdrug-cols td:nth-child(5) { order: 4; grid-column: 2; font-size: 12px; }        /* route */
  .tdrug-cols td:nth-child(1) { order: 5; grid-column: 1 / -1; }                    /* evaluation */
  /* "Evaluated" is true of nearly every row, so as a chip on every record it's a border around no
     information. The exceptional value — Background, the drug is a comparator here — is worth a
     line; hide only the unremarkable one. */
  .tdrug-cols td:nth-child(1):has(.chip.evaluated) { display: none; }

  /* drugs index — identity: name · furthest phase / targets · trial count / lead indication / who.
     Columns: 1 Drug · 2 Target · 3 Lead indication · 4 Investigators · 5 Furthest phase · 6 Trials

     The phase chip gets its own max-content track at the RIGHT EDGE, on the name's baseline —
     the name cell's alias sub-line can run long, and in the shared col-2 track that width pushed
     the chip off the record. Pinning the chip to its own edge track means the aliases size
     nothing but their own wrapping. The name spans cols 1-2 so it, not the targets pair, owns
     the record's first line. */
  .drugtable tbody tr { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content; }
  .drugtable td:nth-child(1) { order: 1; grid-column: 1 / 3; }                      /* name (+sub) */
  .drugtable td:nth-child(5) { order: 2; grid-column: 3; justify-self: end; }       /* furthest phase */
  .drugtable td:nth-child(2) { order: 3; grid-column: 1; }                          /* targets */
  .drugtable td:nth-child(6) { order: 4; grid-column: 2 / -1; }                     /* trial count */
  /* the header that labelled the bare count is gone — the number carries its own unit instead,
     inflected by the template ("1 trial" / "5 trials"); .num's desktop right-align would shove it
     back to the far edge of its track, so it reads left beside the targets like everything else */
  table.data.drugtable td:nth-child(6) { text-align: left; }  /* must outrank `table.data td.num` */
  .drugtable td:nth-child(6)::after { content: " " attr(data-unit); color: var(--muted); }
  .drugtable td:nth-child(3) { order: 5; grid-column: 1 / -1; font-size: 13px; }    /* lead indication */
  .drugtable td:nth-child(4) { order: 6; grid-column: 1 / -1; font-size: 12px; color: var(--muted); } /* investigators */
  /* the record's quietest line: when it last changed */
  .drugtable td:nth-child(7) { order: 7; grid-column: 1 / -1; padding-left: 0; }    /* last change */

  /* a rung (phase tally) or a fold row is one line across the list, never a record */
  :is(.trial-cols, .reg-cols, .tdrug-cols, .drugtable) tbody tr:is(.rung, .foldrow) { display: block; }
  table.data tr.rung td { padding-top: 18px; }

  /* --- a facet dropdown becomes a bottom sheet ---
     Anchored menus have nowhere to go on a 375px screen (the Investigator menu ran 69px off the
     right edge). The existing outside-click handler closes it; the scrim is just a backdrop. */
  .drugfilters { gap: 8px; }
  .df-search { flex: 1 1 100%; max-width: none; }
  .df-search input { height: 44px; }
  .facet { position: static; }
  .facet > summary { height: 44px; }
  .facet[open] > summary::after { content: ""; position: fixed; inset: 0; background: rgba(20, 24, 27, .38); z-index: 50; }
  .facet-menu {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    min-width: 0; max-width: none; width: 100%;
    max-height: 74vh; overflow-y: auto;
    border: none; border-top: 2px solid var(--ink);
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .facet-menu-tree { min-width: 0; max-width: none; }
  .facet-search { height: 40px; }
  .facet-opts, .facet-tree { max-height: none; }
  .facet-menu a, .tree-all { padding: 11px 8px; }
  .ttoggle { width: 34px; height: 34px; font-size: 11px; }
  .tlabel { padding: 9px 0; }

  /* --- the timeline pans instead of compressing ---
     Bars and gridlines are placed in % of the plot, so a phone compresses nine years into 335px and
     every bar label ellipsizes to one character. Geometry fix, not label surgery: guarantee each
     year ~84px (enough for "NCT03514420 · Ph 2" on a 1.5-year bar) and let the chart pan
     horizontally inside .tl-hpan. Plot and axis share the pan box and the same min-width, so the %
     positions of years and bars stay in register while panning. A chart panning along its time axis
     is expected on touch — unlike a TABLE side-scrolling, which hides columns (records above). */
  .tl-hpan {
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  }
  .tl-scroll, .tl-axis { min-width: calc(var(--tl-span, 6) * 84px); }

  .big-empty { padding: 44px 20px; }
  /* colophon stacks: three columns of 11px type in 335px is unreadable */
  .colophon { grid-template-columns: 1fr; gap: 24px; }
  .colophon-base { gap: 6px; }
  .colophon-base .muted:last-child { text-align: left; max-width: none; }
}

/* ---- masthead nav: the auth entry, right of the search ---- */
.site-nav { display: flex; align-items: center; gap: 20px; flex: none; }
.site-nav.home { margin-left: auto; }  /* home has no searchbox to push us right */
.site-nav > a {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--body);
}
.site-nav > a:hover { color: var(--ink); }
.site-nav > a.active { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
/* Same 32px rail as the search input beside it: the input's height is pinned while a padding-built
   box floats on its font's line-height (~34px here), and two boxes on one masthead line at almost
   the same height read as a mistake. Flex-centred content, height owns the geometry. */
.site-nav .authlink {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: background .15s, color .15s;
}
.site-nav .authlink:hover { background: var(--ink); color: var(--stock); }

/* ---- follow: a labelled bordered action — outlined = not following, ink-filled = following ----
   Signed out the control is an <a> to /account rather than a form button (see drug_detail.html),
   so every rule here addresses both shapes. */
.follow button, a.follow {
  height: 38px; padding: 0 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--display); font-variation-settings: "wdth" 74; font-weight: 700;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
a.follow { text-decoration: none; box-sizing: border-box; }
.follow button svg, a.follow svg { width: 15px; height: 15px; flex: none; }
.follow button:hover, a.follow:hover { background: var(--ink); color: var(--stock); }
.follow.on button { background: var(--ink); color: var(--stock); }
.follow.on button:hover { background: var(--body); border-color: var(--body); }
@keyframes bell-swing {
  0% { transform: rotate(0); } 30% { transform: rotate(13deg); }
  60% { transform: rotate(-9deg); } 100% { transform: rotate(0); }
}
.follow button:hover svg, a.follow:hover svg {
  animation: bell-swing .45s ease-in-out; transform-origin: 50% 15%;
}

/* ---- standfirst: the serif intro line under a page h1 ---- */
.standfirst {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--body);
  margin: 6px 0 0; max-width: 46em; text-wrap: pretty;
}

/* ---- account: sign-in card + the follows ledger ---- */
.signin .portal-search { max-width: 520px; }
.signin-hint {
  margin: 16px 0 0; font-size: 13px; color: var(--muted); max-width: 40em; line-height: 1.6;
}
.hint-bell { width: 13px; height: 13px; vertical-align: -2px; }
.form-error { font-family: var(--mono); font-size: 12.5px; color: var(--red); margin: 0 0 12px; }
.follow-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.follow-name { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.follow-name:hover { color: var(--accent); }
.follow-meta { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.follow-row form { margin-left: auto; }
.unfollow {
  width: 26px; height: 26px; line-height: 1; cursor: pointer; border-radius: 0;
  border: 1.5px solid var(--rule); background: transparent; color: var(--muted); font-size: 15px;
  transition: border-color .15s, color .15s;
}
.unfollow:hover { border-color: var(--ink); color: var(--ink); }
.ghostbtn {
  cursor: pointer; border: 1.5px solid var(--rule); border-radius: 0; background: transparent;
  color: var(--muted); padding: 8px 14px;
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.ghostbtn:hover { border-color: var(--ink); color: var(--ink); }

/* ---- auth card: the one centered surface on the site — value, one field, one action ---- */
.auth-wrap { display: flex; justify-content: center; padding: 56px 0 72px; }
.auth-card {
  width: min(430px, 100%); background: var(--stock);
  border: 2px solid var(--ink);
  padding: 38px 36px 32px;
}
.auth-bell { width: 26px; height: 26px; color: var(--ink); margin-bottom: 18px; }
.auth-title {
  font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 700;
  font-size: 29px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px;
}
.auth-sub {
  font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--body);
  margin: 0 0 24px; text-wrap: pretty;
}
.auth-sub b.mono { font-weight: 500; color: var(--ink); }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form label {
  font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 600;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.auth-form input {
  font-family: var(--mono); font-size: 14px; height: 46px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink);
}
.auth-form input::placeholder { color: var(--muted); }
.auth-form input:focus { outline: none; box-shadow: 0 0 0 3px var(--yellow); }
.auth-form button {
  margin-top: 10px; height: 46px; cursor: pointer; border: none; border-radius: 0;
  background: var(--ink); color: var(--stock);
  font-family: var(--display); font-variation-settings: "wdth" 74; font-weight: 700;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  transition: background .15s;
}
.auth-form button:hover { background: var(--body); }
.auth-fine { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.auth-fine a { color: var(--body); border-bottom: 1px dotted var(--rule); }
.auth-fine a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 560px) { .auth-wrap { padding: 24px 0 40px; } }