/* ─────────────────────────────────────────────────────────────
   TOKENS — light is the bare :root; dark redefines tokens only
   ───────────────────────────────────────────────────────────── */
/* Light is this page's primary world: a clinical reference table, printed in
   two inks — black, and one spot colour. The dark variant is a companion. */
:root{
  --bg:#F7F8F8; --bg-2:#EDEFEF; --panel:#FFFFFF; --panel-2:#F5F7F7; --panel-3:#EBEEEE;
  --line:#E1E6E5; --line-2:#C7CECD; --line-3:#9BA5A4;
  --ink:#111615; --ink-2:#3B4443; --ink-3:#5A6464; --ink-4:#636B6A;
  --accent:#118870; --accent-ink:#0D6E5B; --accent-soft:#E2F1ED; --accent-line:#A7D5CA;
  /* The placebo bar in "Does it work?" (R-DISP-20, 2026-09-21). One colour, kept away from the
     spot colour so the drug and the dummy are never read as the same thing, and away from --neg
     so a placebo group does not read as a warning. Checked against the teal in both themes. */
  --pbo:#A0522D; --pbo-soft:#F6E9E3;
  /* A trial that stopped early (owner, 2026-09-21): amber, apart from the warning red and the teal. */
  --stop-ink:#7A5000; --stop-soft:#FBF1DC; --stop-line:#E8CF94;
  /* The Results ratio strip where its range includes 1 (owner, 2026-09-21): no verdict colour. */
  --unsure:#8E9998;
  --neg:#96202C; --neg-ink:#8A1E29; --neg-soft:#F7E7E6;
  --proc:#8E9998;
  --rail-off:#DDE3E2;
  --focus:#111615;
  --shadow:0 1px 1px rgba(17,22,21,.04), 0 10px 26px -18px rgba(17,22,21,.20);
  --cols: minmax(280px,1.45fr) 112px 190px minmax(300px,1.9fr);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C1110; --bg-2:#070A0A; --panel:#121817; --panel-2:#18201F; --panel-3:#1E2725;
    --line:#222C2B; --line-2:#2E3A38; --line-3:#465553;
    --ink:#EDF2F1; --ink-2:#A9B4B2; --ink-3:#8C9A98; --ink-4:#80908D;
    --accent:#2AA890; --accent-ink:#4FC6AE; --accent-soft:#0D2620; --accent-line:#1E4A40;
    --pbo:#D0785A; --pbo-soft:#2A1A14;
    --stop-ink:#E8B75A; --stop-soft:#2A2110; --stop-line:#5A4620;
    --unsure:#6F7C7A;
    --neg:#C4303A; --neg-ink:#F08289; --neg-soft:#2A1213;
    --proc:#5B6664;
    --rail-off:#28312F;
    --focus:#EDF2F1;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -22px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1110; --bg-2:#070A0A; --panel:#121817; --panel-2:#18201F; --panel-3:#1E2725;
  --line:#222C2B; --line-2:#2E3A38; --line-3:#465553;
  --ink:#EDF2F1; --ink-2:#A9B4B2; --ink-3:#8C9A98; --ink-4:#80908D;
  --accent:#2AA890; --accent-ink:#4FC6AE; --accent-soft:#0D2620; --accent-line:#1E4A40;
  --pbo:#D0785A; --pbo-soft:#2A1A14;
  --stop-ink:#E8B75A; --stop-soft:#2A2110; --stop-line:#5A4620;
  --unsure:#6F7C7A;
  --neg:#C4303A; --neg-ink:#F08289; --neg-soft:#2A1213;
  --proc:#5B6664;
  --rail-off:#28312F;
  --focus:#EDF2F1;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -22px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ───────────────────────── base ───────────────────────── */
*{box-sizing:border-box}
/* the artifact host supplies these; restate them so the file behaves the same opened from disk */
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.dsp{font-family:'Fraunces',Georgia,serif; font-variation-settings:"SOFT" 40,"WONK" 1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:'IBM Plex Sans',Arial,sans-serif; font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.02em;
  font-family:'Fraunces',Georgia,serif; font-variation-settings:"SOFT" 40,"WONK" 1}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.shell{max-width:1420px; margin:0 auto; padding:0 28px 72px; position:relative; z-index:1}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* micro label — uppercase, tracked (the seed's uppercase dominance) */
.ml{
  font-family:'IBM Plex Sans',Arial,sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}

/* double-rule divider */
.drule{border-top:1px solid var(--line); box-shadow:0 3px 0 -2px var(--line); height:0}

/* ───────────────────────── header ───────────────────────── */
.masthead{padding:54px 0 34px; display:flex; flex-direction:column; gap:15px; align-items:flex-start}
h1{font-size:53px; font-weight:600; letter-spacing:-.045em; line-height:.94; word-spacing:-.02em;
  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.tagline{font-family:'Fraunces',Georgia,serif; font-size:18px; line-height:1.5;
  color:var(--ink-2); margin:0; max-width:76ch; text-wrap:pretty}

/* one event mark, used identically in the chart, the movement list and every timeline */
/* ONE mark. Two sizes, four fills: solid, outline, hatched, half. Used for every
   piece of status metadata on the page — events, countries, stages, confidence. */
.mk{display:inline-block; width:11px; height:9px; flex-shrink:0; background:var(--proc)}
.mk.pos{background:var(--accent)}
.mk.proc{background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.tl li.q .mk{background:repeating-linear-gradient(135deg,var(--ink-4) 0 1px,transparent 1px 3px); box-shadow:inset 0 0 0 1px var(--ink-4)}
.mk.neg{background:var(--neg)}

/* ───────────────────────── matrix ───────────────────────── */
.matrix{margin-top:0; border-radius:16px; background:var(--panel); box-shadow:var(--shadow)}
.trow:last-child{border-bottom:none}
/* ── a treatment shown as its own page, not a panel ── */
/* Back to the list (owner, 2026-09-19), in place of the breadcrumb. On wide screens: the arrow in a
   round 40px button with where it goes beside it, one tonal pill on hover, pulled left so the arrow
   lines up with the title's edge. On phones: Google Flights' bare arrow, a 48px tap target. */
.backrow{padding:18px 0 0}
.back{display:inline-flex; align-items:center; gap:4px; height:40px; margin-left:-10px; padding:0 16px 0 0;
  border-radius:999px; color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500;
  transition:background .13s, color .13s}
.back .bk-i{display:grid; place-items:center; width:40px; height:40px; border-radius:50%}
.back .bk-a{width:22px; height:22px; fill:currentColor}
.back:hover{background:var(--panel-3); color:var(--ink)}
.back:focus-visible{outline-offset:0; border-radius:999px}
@media (max-width:940px){
  .backrow{padding:6px 0 0}
  .back{height:48px; margin-left:-12px; padding:0; gap:0}
  .back .bk-i{width:48px; height:48px}
  .back .bk-a{width:24px; height:24px}
  .back .bk-l{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .back:hover{background:none}
  .back:active .bk-i{background:var(--panel-3)}
}
.pghead{padding:20px 0 22px; border-bottom:1px solid var(--line)}
.pgtitle{display:flex; align-items:center; gap:10px}
.pgtitle h1{min-width:0; overflow-wrap:anywhere}
.pghead h1{font-size:46px; letter-spacing:-.04em; line-height:1;
  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.pgsub{font-family:'Fraunces',Georgia,serif; font-size:17px; color:var(--ink-2); margin:11px 0 0}
/* The licence's own scope, directly under the pill that says the drug is approved. */
.pgmeta{display:flex; flex-wrap:wrap; gap:14px 46px; margin-top:20px}
.pgm{display:flex; flex-direction:column; gap:6px}
/* R-DISP-33: the page header's Latest update slot prints the dashboard cell's own lines, with the
   same recency dot (green inside 90 days, neutral otherwise). Not shown when the latest update is
   the eczema approval, which the Stage slot already says. */
.pgm-latest{max-width:44ch}
.pgm-latest .lmeta{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.pgm-latest .ldate-row{display:flex; align-items:baseline; gap:7px}
.pgm-latest .mk{width:8px; height:8px; border-radius:50%; box-shadow:none; background:var(--line-3); flex-shrink:0}
.pgm-latest .mk.recent{background:var(--accent)}
.pgm-latest .ldate{font-family:'IBM Plex Sans',Arial,sans-serif; font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.03em; font-variant-numeric:tabular-nums}
.pgm-latest .lhead{font-size:13.5px; color:var(--ink-2); line-height:1.4}
.related{margin-top:34px; padding-top:18px; border-top:1px solid var(--line)}
.related ul{list-style:none; margin:12px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:11px 34px}
.related li{display:flex; flex-direction:column; gap:2px; font-size:12.5px}
.related a{font-family:'Fraunces',Georgia,serif; font-size:15px; font-weight:600;
  color:var(--ink); text-decoration:none}
.related a:hover{text-decoration:underline}
.related li span{color:var(--ink-3)}
.allink{margin-top:16px; font-size:12.5px}
.allink a{color:var(--ink-2)}
a.rowline{text-decoration:none; color:inherit}
.avlist .avrow b{color:var(--ink); font-weight:600}
@media (max-width:820px){ .pghead h1{font-size:32px} }

/* the key terminates the table it explains, rather than floating in the page footer */
.tablekey{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px 46px;
  padding:20px 26px 22px; background:var(--panel-2);
  border-top:1px solid var(--line-2); border-radius:0 0 16px 16px;
}
.tablekey .kgrp{display:flex; flex-direction:column; gap:9px}
.tablekey .ml{margin-bottom:2px}
.krow{display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--ink-2); line-height:1.5}

.trow{border-bottom:1px solid color-mix(in srgb, var(--line) 62%, transparent)}
.trow:last-child{border-bottom:none}
.rowline{
  display:grid; grid-template-columns:var(--cols); gap:22px; align-items:center;
  width:100%; text-align:left; padding:17px 26px; position:relative;
  transition:background .13s;
}
.rowline{min-height:78px}
.rowline:hover{background:var(--panel-2)}
.rowline:hover .trk .tick{background:var(--panel-2)}
/* the hover ground is the whole affordance: no caret, no underline, no accent bar */
.rowline:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}

.c-name{display:flex; flex-direction:column; gap:2px; min-width:0}
.nm{font-family:'Fraunces',Georgia,serif; font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 1;
  font-weight:600; font-size:16.5px; letter-spacing:-.012em; display:flex; align-items:center; gap:7px; color:var(--ink)}
.brand{font-size:13px; color:var(--ink-3); margin-top:1px}
.nm{flex-wrap:wrap; row-gap:3px}
.c-latest .ldate{font-variant-numeric:tabular-nums; color:var(--ink-4)}
.c-latest.fresh .ldate{color:var(--ink-2)}
.c-class{font-size:13.5px; color:var(--ink-2); line-height:1.4; display:flex; align-items:center; gap:10px}
/* R-DISP-35: a 34px tile with the mark of the thing itself -- syringe, capsule, ointment tube -- before the word.
   The sheet of drawings is one hidden <svg> per page; each row references it. */
.rtdefs{position:absolute; width:0; height:0; overflow:hidden}
.rtile{width:34px; height:34px; border-radius:9px; background:var(--panel-3); display:inline-flex; align-items:center;
  justify-content:center; flex-shrink:0}
.rtile .rt{width:20px; height:20px; color:var(--ink-2); display:block}
.rowline:hover .rtile{background:var(--line)}
/* The treatment page's Type slot leads with the same tile, beside the word. The word keeps the
   body size (12px was too small to read, owner 2026-09-21) in the header's grey. */
.pgroute{display:flex; align-items:center; gap:10px; color:var(--ink-3)}

/* staircase phase rail */
.railwrap{display:flex; align-items:center; gap:10px}
.trk{display:flex; align-items:center; gap:3px; flex-shrink:0}
.trk .st{width:11px; height:9px; background:transparent; box-shadow:inset 0 0 0 1px var(--line-2)}
.trk .st.on{background:var(--ink-3); box-shadow:none}
.trk .st.at{background:var(--ink)}
.rstat{font-size:12px; color:var(--ink-3); white-space:nowrap}
.rstep{font-family:'IBM Plex Sans',Arial,sans-serif; font-size:11px; color:var(--ink-4)}

/* availability marks — now only inside an open row */
.av{width:24px; height:16px; display:flex; align-items:center; justify-content:center;
  position:relative; background:transparent; font-size:8.5px; font-weight:600; letter-spacing:.03em;
  color:var(--ink-4)}
.av.yes{background:var(--ink-2); color:var(--panel)}
.av.review{background:linear-gradient(to top,var(--ink-2) 55%,transparent 55%); color:var(--ink-2)}
.av.unknown{background:repeating-linear-gradient(135deg,var(--line-3) 0 1px,transparent 1px 3px);
  opacity:.9}
.av.here::before{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--ink)}
.av.yes.here{background:var(--ink)}

.c-latest{display:flex; gap:9px; align-items:flex-start; min-width:0}
.c-latest .mk{margin-top:4px}
.c-name,.next,.c-class{min-width:0}
.rowline > span{min-width:0}
.c-latest .ltx{min-width:0; display:flex; flex-direction:column; gap:1px}
.c-latest .lmeta{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.c-latest .ldate-row{display:flex; align-items:baseline; gap:7px}
.c-latest .ldate-row .mk{flex-shrink:0}
.c-latest .ldate{font-family:'IBM Plex Sans',Arial,sans-serif; font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.03em}
.c-latest .lhead{font-size:13.5px; color:var(--ink-2); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* next-milestone confidence pips */
.next{display:flex; flex-direction:column; gap:5px}
.pips{display:flex; align-items:center; gap:5px}
.pipset{display:inline-flex; gap:3px}
.pipset b{width:11px; height:9px; background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); display:block}
.pipset b.f{background:var(--ink-3); box-shadow:none}
.next .nlabel{font-size:11.5px; color:var(--ink-3)}
.next .ntext{font-size:13px; color:var(--ink-2); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.next .ntext.none{color:var(--ink-3); font-style:italic}

/* ───────────────────────── detail panel ───────────────────────── */
.avkey{font-size:12.5px; color:var(--ink-3); line-height:1.55; margin:0 0 16px; max-width:78ch}
.dsec > .ml, .legend .ml, .nextbox .ml{
  display:block; font-family:'IBM Plex Sans',Arial,sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--ink-3);
}
.dsec > .ml{margin-bottom:13px; padding-bottom:8px; border-bottom:1px solid var(--line-2)}

/* history timeline */
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:7px; top:6px; bottom:8px; width:1px; background:var(--line-2)}
.tl li{position:relative; padding:0 0 19px 27px}
.tl li:last-child{padding-bottom:0}
.tl .mk{position:absolute; left:0; top:6px; width:9px; height:9px}
.tl .ev-date{font-variant-numeric:tabular-nums; display:inline-block; font-family:'IBM Plex Sans',Arial,sans-serif; font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.03em}
.tl .ev-kind{font-size:12px; color:var(--ink-4); margin-left:9px}
.tl .ev-text{display:block; font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-top:3px}
.tl li.q .ev-date{box-shadow:inset 0 -1px 0 var(--line-3); padding-bottom:2px; cursor:help}
.tl li.q .ev-text::after{content:" \2020 not confirmed in this dataset"; color:var(--ink-3); font-style:italic}

.facts{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:14.5px}
.facts dt{font-size:12.5px; font-weight:500; color:var(--ink-3); padding-top:4px; white-space:nowrap}
.facts dd{margin:0; color:var(--ink)}

.avlist{display:flex; flex-direction:column; gap:10px}
.avrow{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.5}
.avrow .av{flex-shrink:0; margin-top:3px}
.avrow .av:not(.yes):not(.review):not(.unknown){box-shadow:inset 0 0 0 1px var(--line-2)}

.nextbox .ml{font-size:12.5px}
.nextbox{border-top:1px solid var(--line); padding-top:15px; display:flex; flex-direction:column; gap:7px}
.nextbox .nx-title{font-size:14px; font-weight:600; color:var(--ink); line-height:1.35}
.nextbox .nx-note{font-size:12.5px; color:var(--ink-2); line-height:1.45}
.plain{font-family:'Fraunces',Georgia,serif; font-size:15.5px; color:var(--ink-2); line-height:1.55;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.plain b{font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400;
  font-size:14px; color:var(--ink-4); display:block; margin-bottom:6px}

.empty{padding:44px 18px; text-align:center; color:var(--ink-3); font-size:14px}


/* ── a treatment page: one reading order, not three ragged columns ──
   The panel layout put three equal columns side by side, which on a page left the eye
   with no place to start and a long dead gutter under the two short ones. A page has
   vertical room, so the content is ordered by the question it answers: what is this,
   is it dangerous, can I get it, what happened, and the reference facts held to one
   side where they can be consulted rather than read. */
.pglede{margin:20px 0 0; max-width:72ch}
.pglede .kick{display:block; font-family:'IBM Plex Sans',Arial,sans-serif; font-size:10.5px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:6px}
.pglede p{font-family:'Fraunces',Georgia,serif; font-size:16px; line-height:1.5; color:var(--ink-2)}
.pgbody{display:grid; grid-template-columns:minmax(0,1fr) 318px; gap:16px 66px; margin-top:28px; align-items:start}
.rail{align-self:stretch; display:flex; flex-direction:column; gap:26px}
.sec + .sec{margin-top:42px}
.sec > h2{font-family:'IBM Plex Sans',Arial,sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 14px; padding-bottom:9px; border-bottom:1px solid var(--ink-4)}
.rail .sec > h2{border-bottom-color:var(--line-2)}
.rail .sec + .sec{margin-top:0}   /* the flex gap already spaces these */

/* availability: status is a column you can scan, not a word buried in a sentence */
.avail{list-style:none; margin:0; padding:0}
.avail li{display:grid; grid-template-columns:186px 116px minmax(0,1fr); gap:10px 20px;
  align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line)}
.avail li:first-child{border-top:1px solid var(--line)}
.ac{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink)}
.ac .av{flex-shrink:0}
.ac .av:not(.yes):not(.review):not(.unknown){box-shadow:inset 0 0 0 1px var(--line-2)}
.as{font-size:12.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap}
.as-yes{color:var(--accent-ink)}
.as-review{color:var(--ink-2)}
.as-no{color:var(--ink-3)}
.as-unknown{color:var(--ink-3); font-style:italic; font-weight:500}
.an{font-size:13.5px; color:var(--ink-2); line-height:1.5}

/* history: dates in a gutter so they line up and the eye can drop down them */
.tl{list-style:none; margin:0; padding:0}
.tl::before{content:none}
.tl li{display:grid; grid-template-columns:112px minmax(0,1fr); gap:20px;
  padding:13px 0; border-bottom:1px solid var(--line); position:static}
.tl li:first-child{border-top:1px solid var(--line)}
.tl li:last-child{padding-bottom:13px}
.ev-when{display:flex; align-items:center; gap:9px}
.tl .mk{position:static; width:9px; height:9px; flex-shrink:0}
.tl .ev-date{font-variant-numeric:tabular-nums; font-family:'IBM Plex Sans',Arial,sans-serif;
  font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.03em}
.tl .ev-kind{display:block; margin:0 0 4px; font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-4)}
.tl .ev-text{display:block; font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-top:0}

/* the rail is consulted, not read: labels above values, nothing wider than the column */
.rail .facts{display:block; font-size:14px}
.rail .facts dt{font-family:'IBM Plex Sans',Arial,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); margin-top:15px; white-space:normal; padding:0}
.rail .facts dt:first-child{margin-top:0}
.rail .facts dd{margin:3px 0 0; color:var(--ink); line-height:1.45}
.rail .nextbox{border-top:none; padding-top:0}

@media (max-width:1080px){
  .pgbody{grid-template-columns:1fr; gap:42px}
  .rail{position:static; flex-direction:row; flex-wrap:wrap; gap:36px}
  .rail .sec{flex:1 1 280px}
}
@media (max-width:720px){
  .avail li{grid-template-columns:1fr auto; gap:6px 16px}
  .avail li .an{grid-column:1/-1}
  .tl li{grid-template-columns:1fr; gap:7px}
  .pglede p{font-size:15.5px}
}

/* ───────────────────────── legend + footer ───────────────────────── */
footer{margin-top:34px; font-size:12px; color:var(--ink-3); line-height:1.62}
footer b{color:var(--ink-2); font-weight:600}
footer .drule{margin:0 0 18px}
footer .cols{columns:2; column-gap:46px}
footer .cols p{margin:0 0 13px; break-inside:avoid; -webkit-column-break-inside:avoid}
footer .cols p:last-child{margin-bottom:0}

.mobilelabel{display:none; font-family:'IBM Plex Sans',Arial,sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom:4px}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1360px){
  :root{--cols: minmax(240px,1.35fr) 104px 178px minmax(250px,1.85fr)}
  .shell{padding:0 20px 64px}
  .masthead{padding:44px 0 30px}
}
@media (max-width:1180px){
  .legend{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .shell{padding:0 14px 56px}
  h1{font-size:38px; letter-spacing:-.04em}
  .masthead{gap:12px; padding:34px 0 24px}
  .tagline{font-size:16.5px}
  .matrix{border-radius:14px}
  .rowline{grid-template-columns:1fr; gap:11px; padding:14px 15px}
  .c-class{display:flex; gap:8px; font-size:12.5px}
  .c-latest{border-top:1px solid var(--line); padding-top:11px}
  .next{border-top:1px solid var(--line); padding-top:11px}
  .tablekey{grid-template-columns:1fr; gap:16px; padding:18px 15px 20px}
  footer .cols{columns:1}
  .mobilelabel{display:block}
  .c-class .mobilelabel{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
@keyframes grow{from{width:0 !important}}
/* Parked at the foot of the page: the numbers held back from the cards, each under
   its own trial's registry id so nothing is read against the wrong trial. */
.rawnote{font-size:14px; color:var(--ink-3); margin:0 0 18px; max-width:70ch}
.rawt{padding:14px 0; border-top:1px solid var(--line)}
.rawt h3{font-size:14px; font-family:'IBM Plex Sans',Arial,sans-serif; letter-spacing:.04em; color:var(--ink-3); margin:0 0 8px}
/* The one thing a reader can act on, kept in view while they read, and since 2026-09-22 the
   only place the page speaks about joining a trial at all. Drawn only where a trial is
   actually recruiting in the US, so it never invites without a door. */
.cta{position:sticky; top:20px; background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:14px; padding:18px; margin-bottom:22px}
/* Clear the desktop site bar (64px plus its border), retaining a 20px gap. */
@media (min-width:941px){
  .cta{top:85px}
}
.cta-n{font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; color:var(--ink); line-height:1.25}
/* The button first, then the trials under it in grey (owner, 2026-09-22): one line per trial,
   its ages and phase, then where it is being run. Two trials stack; the box is a rail on the
   desktop and full width on a phone, so both fit. */
.cta-l{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.cta-t{font-size:13.5px; line-height:1.45; color:var(--ink-3)}
.cta-t span{display:block}
.cta-old{font-size:13px; font-style:italic}
/* The painted door (owner, 2026-09-22): a button in every respect but where it leads. The
   checkbox is what takes focus and Space presses it, the way the age filter worked before it,
   because nothing on this site evaluates script. */
.cta-x{position:absolute; opacity:0; pointer-events:none}
.cta-b{display:block; margin-top:13px; padding:11px 16px; border-radius:999px; text-align:center;
  cursor:pointer; background:var(--accent-ink); color:#fff; font-size:14.5px; font-weight:600}
.cta-b:hover{filter:brightness(1.08)}
.cta-x:focus-visible+.cta-b{outline:2px solid var(--focus); outline-offset:2px}
/* Shut, the dialog is out of the document entirely, so a screen reader never meets a promise
   the page is not making yet. Open, the veil closes it as well as the Close under it: without
   script there is no Escape key and no focus trap, so the ways out are the ones you can see. */
.cta-veil,.cta-modal{display:none}
/* The shell is its own stacking context (z-index:1) and the site bar is a sibling above it at 30,
   so a veil drawn inside the page can only cover the bar if the shell itself is lifted while the
   dialog is open. Where :has() is not understood the dialog still opens and still closes; only the
   bar behind it stays undimmed. */
.shell:has(.cta-x:checked){z-index:60}
.cta-x:checked~.cta-veil{display:block; position:fixed; inset:0; z-index:40; cursor:default;
  background:rgba(17,24,22,.45)}
.cta-x:checked~.cta-modal{display:block; position:fixed; z-index:41; left:50%; top:50%;
  transform:translate(-50%,-50%); width:min(380px,calc(100vw - 40px)); box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 44px rgba(17,24,22,.22); padding:24px 24px 20px; text-align:center}
.cta-soon{margin:0; font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600;
  line-height:1.3; color:var(--ink)}
.cta-close{display:inline-block; margin-top:18px; padding:9px 22px; border-radius:999px;
  cursor:pointer; background:var(--accent-ink); color:#fff; font-size:14px; font-weight:600}
.cta-close:hover{filter:brightness(1.08)}
@media (max-width:940px){ .cta{position:static} }
/* No call to action and no milestone: nothing to put beside the page, so no gutter. */
.pgbody.solo{grid-template-columns:minmax(0,1fr)}

/* Latest update: quiet date above a separate, prominent event heading. */
.c-latest .lmeta,.pgm-latest .lmeta{gap:5px;min-width:0;max-width:100%}
.c-latest .ldate-row,.pgm-latest .ldate-row{align-items:center}
.c-latest .ldate,.pgm-latest .ldate{white-space:nowrap;font-weight:400}
.c-latest .lupdate,.pgm-latest .lupdate{display:block;font-size:13.5px;font-weight:400;
  line-height:1.4;color:var(--ink-2);max-width:100%;overflow-wrap:break-word}
.pgm-latest .lupdate{color:var(--ink-3)}
.pgm-latest{min-width:0;max-width:min(44ch,100%)}

/* Feedback is a separate, consistently styled block above the method notes. */
footer .feedback{font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:400;
  line-height:1.6;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);
  border-radius:10px;padding:18px;margin:0 0 24px;overflow-wrap:anywhere}
footer .feedback a{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
.feedback a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.privacy-note{max-width:68ch;margin:36px 0;font-size:16px;line-height:1.7}
.privacy-note p{margin:0 0 12px}
/* Evidence-qualified fifth column; preserve the stacked narrow-screen rows. */
@media(min-width:941px){
  .matrix{--cols:minmax(130px,1fr) minmax(65px,.5fr) minmax(145px,1fr) minmax(150px,1.1fr) minmax(160px,1.2fr)}
  .matrix .rowline{gap:16px}
}
/* Site bar, after Google Flights: the name, then one pill per condition. Sticky on wide screens. The
   name sits 29px from the first pill, the gap between Google and Explore on Google Flights (owner, 2026-09-19). */
.topbar{background:var(--bg);border-bottom:1px solid var(--line-2);position:relative;z-index:30}
.topin{display:flex;align-items:center;gap:29px;min-height:64px;padding:0 24px}
/* The name is as tall as Google Flights' logo, on every width. */
.wordmark{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.pills{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1px solid var(--line-2);
  border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none}
.pill:hover{background:var(--panel-2)}
.pill[aria-current]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.pill.soon{gap:8px;padding-right:8px;color:var(--ink-4);cursor:not-allowed}
.pill.soon:hover{background:none}
.pill .bs{display:none}
@media(min-width:941px){
  .topbar{position:sticky;top:0}
}
/* No visible heading or subtitle on the dashboard (owner, 2026-09-19): the site bar names the site,
   and the page opens on the view tabs. The <h1> stays for screen readers. */
.shell.narrow .masthead{padding:28px 0 26px}
/* The dashboard and drug-page column is as wide as Google Flights' results (1024px): wider lines are hard to scan. */
.shell.narrow{max-width:1080px}
/* Dashboard views: segmented tabs, after Google Flights' Best / Cheapest, at its size: 50px tall. */
.viewtabs{display:grid;grid-template-columns:1fr 1fr;align-self:stretch;margin-top:10px;
  border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 16px;
  font-size:16px;font-weight:500;color:var(--ink-2);text-decoration:none;text-align:center}
.seg + .seg{border-left:1px solid var(--line-2)}
a.seg:hover{background:var(--panel-2)}
.seg[aria-current="page"]{background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.seg.soon{color:var(--ink-3);cursor:not-allowed}
/* "Coming soon": the usual small rounded badge beside the label. */
.badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:var(--panel-3);border:1px solid var(--line-2);font-size:11.5px;font-weight:600;
  letter-spacing:.01em;color:var(--ink-3);white-space:nowrap}
/* A section's rows past the tenth open from a "View more" row at the bottom, after Google Flights. */
.history-toggle:not(:checked) ~ .tl > li:nth-child(n+4){display:none}
.more-rows{display:none}
.more-toggle:checked ~ .more-rows{display:block}
.more-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--ink);border-top:1px solid var(--line)}
.more-row:hover{background:var(--panel-2)}
.more-toggle:focus-visible ~ .more-row{outline:2px solid var(--focus);outline-offset:-2px}
.more-row .chev{width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.more-toggle:checked ~ .more-row .chev{transform:translateY(2px) rotate(-135deg)}
.more-row .more-close,.more-toggle:checked ~ .more-row .more-open{display:none}
.more-toggle:checked ~ .more-row .more-close{display:inline}
/* Dashboard dots show recency: green uses the same rule as the former Updated pill,
   in every section; other dots keep the ordinary neutral color (owner, 2026-09-21). */
.c-latest{gap:10px}
.c-latest .mk{width:8px;height:8px;margin-top:4px;border-radius:50%;box-shadow:none;background:var(--line-3)}
.c-latest .mk.recent{background:var(--accent)}
/* Phones, after Google Flights' mobile site: the pills become tabs, the view tabs stack their words,
   and every row is its own card. */
@media(max-width:940px){
  .topin{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0}
  .wordmark{padding:16px 16px 6px}
  .pills{gap:24px;padding:0 16px;overflow-x:auto}
  .pill{min-height:46px;padding:0 2px;border:none;border-radius:0;background:none}
  .pill:hover{background:none}
  .pill[aria-current]{background:none;color:var(--accent-ink);box-shadow:inset 0 -3px 0 var(--accent)}
  .pill.soon{padding-right:2px;white-space:nowrap}
  .pill .bl{display:none}
  .pill .bs{display:inline}
  .pills{gap:20px}
  /* Google Flights' phone tabs are 60px tall, the second line ("from $615") set small. */
  .seg{flex-direction:column;gap:3px;min-height:58px;padding:6px 10px}
  .seg .badge{height:18px;padding:0 7px;font-size:10.5px}
  .dsect .matrix{background:none;box-shadow:none;border-radius:0}
  .dsect .trow{margin-bottom:8px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
  .dsect .trow:last-child{border-bottom:1px solid var(--line-2)}
  .more-row{margin-bottom:8px;padding:0 14px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px}
  /* Condensed rows, after Google Flights on phones: no field labels, the name with the stage on its
     right (where the price sits), and one short line under it: how it's taken, then the latest
     update's date and kind. The update's sentence and an unrecorded route are left to the drug page. */
  .dsect .rowline{grid-template-columns:auto 1fr auto;grid-template-areas:"name name stage" "route latest latest";
    column-gap:6px;row-gap:8px;align-items:start;min-height:0;padding:12px 14px}
  .dsect .rowline > .c-name{grid-area:name;padding-right:6px}
  .dsect .rowline > span:nth-child(4){grid-area:stage;max-width:46vw;padding-top:4px}
  .dsect .rowline .railwrap{justify-content:flex-end;gap:8px}
  .dsect .rowline > .c-why{grid-column:1/-1;grid-row:3;display:-webkit-box;-webkit-line-clamp:5;
    -webkit-box-orient:vertical;overflow:hidden}
  .dsect .rowline .mobilelabel{display:none}
  .dsect .rowline > .c-class{grid-area:route;display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px}
  .dsect .rowline > .c-class{margin-right:8px}
  /* R-DISP-35: the route tile shrinks with the row, so the line stays one line tall. */
  .dsect .rowline > .c-class .rtile{width:22px;height:22px;border-radius:6px}
  .dsect .rowline > .c-class .rt{width:14px;height:14px}
  .dsect .rowline > .c-class:has(.rt-none){display:none}
  .dsect .rowline > .c-latest{grid-area:latest;align-items:center;gap:7px;border-top:none;padding-top:0}
  .dsect .rowline > .c-class:has(.rt-none) ~ .c-latest{grid-column:1/-1}
  .dsect .rowline .c-latest .mk{margin-top:0}
  .dsect .rowline .c-latest .ldate{font-size:11px;font-weight:400;letter-spacing:.02em;line-height:16px;color:var(--ink-3)}
  .dsect .rowline .c-latest .lhead{display:none}
}
/* The "what changed" list. Plain rows, one source link each; nothing here is styled as an alert. */
.chgintro{max-width:72ch}
.changesnote{max-width:72ch;font-size:13px;color:var(--ink-2)}
.chglist{list-style:none;margin:18px 0 0;padding:0}
.chg{padding:14px 0;border-top:1px solid var(--line-2);max-width:76ch}
.chg h2{margin:2px 0 4px;font-size:16px;line-height:1.3}
.chgmeta{margin:0;font-family:'IBM Plex Sans',Arial,sans-serif;font-size:12px;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em}
.chgsum{margin:0 0 4px;font-size:14px;line-height:1.5}
.chgsrc{margin:0;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
/* regulatory-status-v1 on a retired page: the same quiet treatment as the stale notice. It is a
   regulator's statement of fact, not an alert, so it is not styled as one. */
.marketstatus{margin:12px 0;padding:9px 13px;max-width:76ch;border-left:3px solid var(--line-2);
  background:var(--panel-2);font-family:'IBM Plex Sans',Arial,sans-serif;font-size:13px;
  line-height:1.45;color:var(--ink-2)}
/* dashboard-sections-v1: three headed sections in the one table. A researcher-only treatment's
   stage cell is words, not a rail. */
.dsect + .dsect{margin-top:44px}
.dshead{padding:0 2px 14px}
/* Section headings: short, parallel, sentence case, set like the site bar's name (Fraunces at its
   text optical size); the note under each says what the section holds. */
.dsh{margin:0;display:flex;align-items:center;gap:10px;font-family:'Fraunces',Georgia,serif;font-size:20px;
  font-weight:600;line-height:1.2;letter-spacing:-.015em;font-variation-settings:"opsz" 20,"SOFT" 0,"WONK" 0}
.dsn{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3);max-width:80ch}
/* A researcher-only row keeps the usual size: its sponsor sits under the name, where a generic
   name goes, on one line; the stage cell says "Phase 2 · Researchers". */
.ussites{display:block;font-size:11px;line-height:16px;color:var(--ink-3);margin-top:4px}
.rsearch{font-size:12px;color:var(--ink-3);white-space:nowrap}
.rsub{font-size:13px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The reason wraps, but the row stays a row: three lines at most here, the whole text on the page. */
.rsub.rstop{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pgline{display:block}
.c-why{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
/* The section is one type style (owner, 2026-09-24: no font changes inside it): the list is 15px
   regular ink; only the new-approach pill and the small foot line differ, as on the Results card. */
.so-pill{margin:0 0 12px}
/* Its own class, not the site bar's .pill (that one has a 40px minimum height, which left the text
   sitting high in the box: owner, 2026-09-24). The box is exactly the text plus even padding. */
.so-lead{display:inline-flex;align-items:center;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);
  border-radius:999px;padding:6px 14px;font-size:14.5px;font-weight:500;line-height:1.4}
.so-list{margin:0;padding-left:20px;font-size:15px;line-height:1.6;color:var(--ink)}
.so-list li+li{margin-top:4px}
.wfoot.so-foot{display:block;margin-top:16px;line-height:1.6}
.so-labels{display:inline}
.so-labels summary{display:inline;cursor:pointer;color:var(--accent-ink);list-style:none;text-decoration:underline}
.so-labels summary::-webkit-details-marker{display:none}
/* The row's cell stacks the same lines, one per line, the new-approach flag bold. */
.c-why .so-ln{display:block}
.c-why .so-new{font-weight:600}
/* An injection given less often than the approved norm: its schedule line is bold on both surfaces
   (owner, 2026-09-24; the norm is derived from the approved eczema injections' labels). */
.so-list .so-em,.c-why .so-em{font-weight:600}
@media(max-width:940px){.c-why:empty{display:none}}

/* Long source-qualified status labels must wrap at narrow widths. */
.railwrap{min-width:0;max-width:100%;flex-wrap:wrap}
.rstat{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%}
/* Site-only. Everything else — the page header, breadcrumb, related list, row links —
   now lives in assets/base.css and is inherited verbatim, so the
   prototype and the built pages cannot drift apart. */
.page{padding-bottom:60px}
/* Off-screen until focused, then visible. A keyboard user reaching it must be able to
   see it, so it is positioned rather than clipped to nothing. */
.skip{position:absolute; left:-9999px; top:0; z-index:10; background:var(--paper,#fff);
      color:var(--ink,#111); padding:10px 14px; border:1px solid currentColor;
      border-radius:0 0 4px 0; font-family:'IBM Plex Sans',Arial,sans-serif;
      font-size:13px; text-decoration:none}
.skip:focus{left:0}
.src{font-size:.82em;white-space:nowrap}
/* Sources: grouped like The drug; one row per trial with its documents beside it. */
.srcgrp{gap:14px 18px}
.srcgrp ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13.5px;line-height:1.5}
.srcdocs,.srcalso{display:block;font-size:12.5px;padding-left:14px}
.srcalso{color:var(--ink-3)}
/* Does it work? (trial-results-v1, owner decision 2026-09-19). One card per trial with posted
   results, never combined across trials; sponsor-reported numbers carry a badge saying so. */
.wintro{font-size:13px;color:var(--ink-3);margin:0 0 10px}
.wq{font-size:14px;margin:10px 0 2px}
.wtf{font-size:12px;color:var(--ink-3)}
.wexact{font-size:12px;color:var(--ink-3);margin:2px 0 8px;line-height:1.45}
.warms{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.warm{display:flex;flex-direction:column;min-width:96px;max-width:200px;padding:8px 10px;border-radius:10px;background:var(--accent-soft)}
.warm b{font-size:20px;color:var(--accent-ink);font-weight:600}
.warm i{font-style:normal;font-size:12px;color:var(--ink-2);line-height:1.3}
.warm.pbo{background:var(--panel-2)}
.warm.pbo b{color:var(--ink-2)}
.wnote{font-size:13px;color:var(--ink-2);margin:6px 0;font-style:italic}
.badge-sponsor{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:6px;
  padding:2px 8px;margin:2px 0;background:#fef7e0;color:#8a5a00}
.wmore{margin:6px 0;font-size:13px}
.wmore summary{cursor:pointer;color:var(--accent-ink);font-weight:600}
.wmore ul{margin:6px 0 0;padding-left:18px;line-height:1.5}
.wmore li{margin:3px 0}
.wtype{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.wvals{color:var(--ink-3)}
/* The headline card (R-DISP-20 as amended, owner decision 2026-09-21): one trial leads, drawn as
   one bar per group in people out of 100, then the sponsor's own difference against placebo. The
   drug keeps the spot colour and the dummy gets its own, so the two are never read as one thing. */
.wcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;margin:10px 0 14px}
.wchead{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.wdrug{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600}
.wmeta{font-size:13px;color:var(--ink-3)}
.wmeasure{font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:600;line-height:1.2}
.wmeasure small{display:block;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13px;
  font-weight:400;color:var(--ink-3);margin-top:3px}
/* Three columns, not two: the share sits in its own cell rather than floating past the bar's end,
   so a bar at the full width can never push its own number off a phone. */
.wbars{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) auto;gap:8px 10px;
  align-items:center;font-size:13.5px;max-width:720px}
.wlab{color:var(--ink-2);line-height:1.25;min-width:0;overflow-wrap:anywhere}
.wlab span{display:block;color:var(--ink-3);font-size:12px}
.wbar{position:relative;height:18px;background:var(--panel-2);border-radius:0 4px 4px 0;min-width:0}
.wbar i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--accent)}
.wbar.p i{background:var(--pbo)}
.wval{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.waxis{grid-column:2;position:relative;height:24px;font-size:11px;color:var(--ink-3);
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.waxis span{position:absolute;top:6px;left:50%;transform:translateX(-50%)}
.waxis span::before{content:"";position:absolute;top:-7px;left:50%;height:4px;
  border-left:1px solid var(--ink-3)}
.waxis span:first-child{left:0;transform:none}
.waxis span:first-child::before{left:0}
.waxis span:last-child{left:100%;transform:translateX(-100%)}
.waxis span:last-child::before{left:auto;right:0}
.wdiff{background:var(--accent-soft);border-radius:10px;padding:12px 14px;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center}
.wn{font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:700;color:var(--accent-ink);
  line-height:1;font-variant-numeric:tabular-nums}
.wt{font-size:13.5px;color:var(--ink-2)}
.wt b{color:var(--ink)}
.wr{grid-column:1/-1;font-size:12.5px;color:var(--ink-3)}
.wstat{grid-column:1/-1;font-size:12px;color:var(--ink-3);margin:2px 0 0;line-height:1.45}
.wrange{grid-column:1/-1;position:relative;height:8px;background:var(--panel);border-radius:4px;margin-top:4px}
.wrange i{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.35;border-radius:4px}
.wrange b{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--accent);
  border:2px solid var(--panel);transform:translateX(-50%)}
/* A ratio on a ratio scale (owner, 2026-09-21, Option B): 1 dashed, the range shaded, the point a
   dot; the spot colour only where the whole range is above 1. Positions are computed in Python. */
.wdiff.wplain{background:var(--panel-2);grid-template-columns:minmax(0,1fr)}
/* The mockup keeps "N×" beside its sentence at every width, first lines aligned. */
.wdiff.wx{align-items:baseline}
.wplain .wt{margin:0}
.wstrip{grid-column:1/-1;margin-top:4px;min-width:0}
.wratio{position:relative;height:22px}
.wratio i,.wratio b{position:absolute;display:block}
.wratio .wtrack{left:0;right:0;top:10px;height:2px;background:var(--line)}
.wratio .wspan{top:6px;height:10px;border-radius:5px;background:var(--accent);opacity:.3}
.wratio b{top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);
  border:2px solid var(--panel)}
.wratio.unsure .wspan{background:var(--unsure);opacity:.45}
.wratio.unsure b{background:var(--unsure)}
.wticks{position:relative;height:16px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.wticks span:first-child{transform:none}
.wticks span:last-child{transform:translateX(-100%)}
.wsentence{margin:0;color:var(--ink-2);font-size:14.5px;max-width:62ch}
/* A trial that stopped early, when it is the only one that could lead (Option C, owner 2026-09-21). */
.wstop{border:1px solid var(--stop-line);background:var(--stop-soft);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:4px}
.wstop b{color:var(--stop-ink);font-size:14.5px}
.wstop span{font-size:13.5px;color:var(--ink-2)}
/* The sponsor's reason, quoted on the line under the state (owner, 2026-09-23). */
.wstop q{color:var(--ink-2);font-size:13.5px}
/* Who the reason is from: whoever keeps the trial's record, usually its sponsor (owner, 2026-09-23). */
.wstop .wstopsrc{display:block;font-size:12.5px;color:var(--ink-3)}
.wpval p{margin:6px 0 0;color:var(--ink-2);max-width:62ch}
.wsentence b{color:var(--ink)}
.wfoot{border-top:1px solid var(--line);padding-top:10px;font-size:12.5px;color:var(--ink-3);
  display:flex;flex-direction:column;gap:6px;line-height:1.45}
.wfoot .wq{font-style:italic}
/* "Why this trial?", then a drawer of static trial rows with linked study names. */
.wwhy,.wrows,.wdef,.wpval{margin:2px 0 6px;font-size:13.5px}
.wwhy summary,.wrows summary,.wdef summary,.wpval summary{cursor:pointer;color:var(--accent-ink);font-weight:600}
.wdef ul{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:8px}
.wdef q{display:block;color:var(--ink);line-height:1.45}
.wdef .wsrc{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.wdef .wdefname{color:var(--ink);font-size:14px}
/* Every chart the lead trial posted, one under another (owner, 2026-09-23). */
.wchart + .wchart{border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.wchart{display:grid;gap:10px}
.walias{display:block;font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:2px}
.wdir{margin:0;font-size:13px;color:var(--ink-2)}
.wu{display:block;font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:500;color:var(--ink-3);line-height:1}
/* Skin | Itch: one card each, the trial's name inside both (owner, 2026-09-23, design C). */
.wtabs{display:grid;grid-template-columns:auto auto 1fr}
.wtabs > input{position:absolute;opacity:0;pointer-events:none}
.wtabs > label{padding:8px 16px;border-bottom:2px solid var(--line);cursor:pointer;font-weight:600;color:var(--ink-3)}
.wtabs > input:checked + label{border-color:var(--accent);color:var(--accent-ink)}
.wtabs > input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.wtab{grid-column:1/-1;display:none;padding-top:12px}
#wtab-skin:checked ~ .wtab-skin,#wtab-itch:checked ~ .wtab-itch{display:block}
/* Several doses: one box each, a little apart. */
.wdiff + .wdiff{margin-top:8px}
/* FDA reviewed trials: each trial on the label, stacked. */
.wfda{padding:12px 0;border-top:1px solid var(--line)}
.wfda:first-of-type{border-top:0}
.wfdahead{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.wfdahead b{font-family:'Fraunces',Georgia,serif;font-size:17px}
.wfdahead span{font-size:13px;color:var(--ink-3)}
.wrtable{width:auto;max-width:100%;border-collapse:collapse;margin-top:10px;font-size:15px}
.wrtable th,.wrtable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;overflow-wrap:anywhere;color:var(--ink-3);font-weight:400}
.wrtable th{font-size:12.5px;font-weight:600;letter-spacing:.04em}
.wrtable th:first-child,.wrtable td:first-child{padding-left:0}
.wrtable th:last-child,.wrtable td:last-child{text-align:right;padding-right:0}
.wrtable .wrn{font-weight:600;color:var(--ink)}
.wrtable .wrn a{display:block}
.wrtable .wtag{margin:5px 0 0;display:inline-block}
.wrd,.wrpeople{font-variant-numeric:tabular-nums}
.wtag{display:inline-block;font-size:11px;font-weight:600;color:var(--accent-ink);border:1px solid var(--accent);
  border-radius:999px;padding:0 8px;margin-left:6px;white-space:nowrap}
@media(max-width:640px){
  /* A phone gives the group's name its own line, then the bar with its number beside it. */
  .wbars{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .wlab{grid-column:1/-1;margin-top:6px}
  .wbar{grid-column:1;height:14px}
  .wval{grid-column:2}
  .waxis{grid-column:1}
  .wdiff{grid-template-columns:minmax(0,1fr)}
  .wdiff.wx{grid-template-columns:auto minmax(0,1fr)}
  .wrtable{font-size:14px}
  .wrtable th,.wrtable td{padding:10px 5px}
}
/* Side effects: the FDA's eczema sentence and label warning, with full details below. */
.sfx-body{display:flex;flex-direction:column;gap:16px;max-width:62ch}
.sfx,.sfx-list{padding:12px 16px 13px;border-radius:0 10px 10px 0;border-left:3px solid var(--line-2);background:var(--panel)}
.sfx-list{background:transparent}
.sfx p,.sfx-list p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.sfx-list q{quotes:"“" "”";color:var(--ink)}
.sfx-k{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.sfx h3{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink);margin:0 0 4px}
.sfx-src,.sfx .bw-src{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.ssub{font-size:14px;margin:0 0 6px;font-weight:600}
/* The page frame (owner decisions 2026-09-19, item 1): short facts under the name, and one row of
   links to the page's sections that stays in view while it scrolls. Plain anchors; no script. */
.pfacts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
/* R-DISP-29: the label picture beside the name (A2), a band under Type and Stage on a phone (C). The
   frame stays white in both themes: the picture is the label's own print artwork. */
.pghead.has-photo{display:flex;align-items:center;gap:32px}
/* R-DISP-31: the same picture as a thin strip under a dashboard name, only for a drug approved for
   eczema. White in both themes, whole and scaled to fit, like the header. */
.lstrip{display:block;width:136px;height:40px;margin-top:6px;padding:2px;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.lstrip img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:940px){.lstrip{width:128px;height:38px}}
/* Beside the picture the text column is as wide as its content: Type, Stage and Latest update share
   one row on a desktop, and only the picture narrows to make room. */
.pghead-main{min-width:0;flex:0 1 auto}
@media(min-width:821px){.pghead.has-photo .pghead-main{flex-shrink:0}.pghead.has-photo .pgmeta{flex-wrap:nowrap}}
.pgphoto{margin:0;flex:0 1 500px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pgphoto-frame{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;place-items:center}
.pgphoto-frame img{display:block;max-width:100%;max-height:200px;width:auto;height:auto}
.pgphoto figcaption{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-3)}
.pgphoto .pp-k{display:none}
@media(max-width:820px){
  .pghead.has-photo{display:block}
  .pgphoto{margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;gap:14px}
  .pgphoto-frame{border:none;padding:0}
  .pgphoto-frame img{width:100%;max-height:none}
  .pgphoto .pp-k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
  .pgphoto .pp-t{font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.5;color:var(--ink-2)}
}
.pfact{border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--ink-2);background:var(--panel)}
.pfact.warn{border-color:var(--neg);color:var(--neg-ink);background:var(--neg-soft)}
.pnav{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;gap:6px;overflow-x:auto;
  padding:10px 0;margin:8px 0 4px;border-bottom:1px solid var(--line);scrollbar-width:none}
.pnav::-webkit-scrollbar{display:none}
.pnav a{white-space:nowrap;text-decoration:none;color:var(--ink-2);font-size:14px;padding:6px 12px;
  border-radius:999px;border:1px solid var(--line-2)}
.pnav a:hover{background:var(--panel-2)}
.page .sec,.page .pghead{scroll-margin-top:64px}
/* The US label on a drug page (owner decisions 2026-09-19, items 5 and 8): the label's own words,
   quoted, badged FDA-reviewed; for a drug approved for other uses, which uses, and never a dose. */
.lpics{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}
.lpics figure{margin:0;width:150px}
.lpics img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.lpics figcaption{font-size:11.5px;color:var(--ink-3);margin-top:4px;word-break:break-word}
.badge-unver{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:6px;
  padding:2px 8px;margin:2px 0;background:var(--panel-2);color:var(--ink-2)}
.badge-fda{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:6px;
  padding:2px 8px;margin:2px 0;background:#e6f4ea;color:#137333}
.lcall{border-left:3px solid var(--accent);background:var(--accent-soft);padding:10px 14px;
  border-radius:0 10px 10px 0;font-size:14px;margin:8px 0 12px}
.lcall ul{margin:6px 0 0;padding-left:18px}
.ldl{margin:8px 0}
.lrow{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.lrow dt{font-weight:600;color:var(--ink-2)}
.lrow dd{margin:0}
/* The note under a regulatory fact in "The drug" (an approval date, a market status): its own line. */
.indtext{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
/* FDA notices (fda-notices-v1): only while FDA lists one, in FDA's words, dated. */
.lnotice{border-left:3px solid var(--neg);background:var(--neg-soft);color:var(--neg-ink);padding:10px 14px;
  border-radius:0 10px 10px 0;font-size:13.5px;margin:8px 0 12px;line-height:1.5}
/* The label's own trials table, as the label tabulates it (R-DISP-25). Scrolls sideways on a phone
   rather than reflowing: a re-laid-out table is not the table the FDA reviewed. */
.ltbl-wrap{overflow-x:auto;max-width:100%;margin:6px 0 4px}
/* Narrow screens stack the page into one column, whose default minimum is its content: without
   this a table wider than the phone widens the page itself instead of scrolling inside its box. */
@media(max-width:940px){.pgbody>div{min-width:0}}
.ltbl{border-collapse:collapse;font-size:13px;min-width:100%}
.ltbl th,.ltbl td{border-top:1px solid var(--line);padding:6px 10px;text-align:left;white-space:nowrap}
.ltbl thead th{font-weight:600;color:var(--ink-2);font-size:12px}
.ltbl tbody th{font-weight:600;color:var(--ink-2);white-space:normal;min-width:120px}
.ltbl td.twrap{white-space:normal;min-width:260px;max-width:420px}
.ltbl td .wtf{white-space:normal;display:inline-block}
@media(max-width:520px){.lrow{grid-template-columns:1fr;gap:2px}}
@media(min-width:941px){.pnav{top:64px}.page .sec,.page .pghead{scroll-margin-top:130px}}