/* ===========================================================================
   Topline — Cascade's visual system, at scanning density.
   Token values are copied from cascade/static/style.css, never imported, so this file stands alone. Light-first; dark
   is *selected* through the toggle and re-declares the same token roles rather than inverting them.
   Colour logic, as in Cascade: --ok/--warn/--critical are status and carry the priority and evidence bands; --s1..--s8
   are categorical and carry phase, in fixed order, never cycled. Nothing else on this screen is coloured.
   =========================================================================== */
:root {
  color-scheme: light;
  --page: #f5f7fb; --surface: #ffffff; --surface-2: #f2f4f9; --surface-3: #e9edf5;
  --ink: #0b0b0b; --ink-2: #52514e; --ink-3: #7c8598;
  --line: #e3e6ee; --line-strong: #ccd3e2; --ring: rgba(11, 11, 11, .10);
  --brand: #2a78d6; --brand-deep: #1c5cab; --brand-mid: #5598e7; --brand-soft: #86b6ef; --brand-wash: #eaf2fd; --brand-ink: #17457f;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --ok: #0ca30c; --warn: #fab219; --serious: #ec835a; --critical: #d03b3b;
  --ok-wash: #e8f7e8; --warn-wash: #fdf3dd; --critical-wash: #fbeaea;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .18);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 18px 40px -16px rgba(16, 24, 40, .28);
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bahnschrift", "Segoe UI Variable Display Semibold", "Segoe UI Semibold", var(--font);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* Dark is a choice, not a preference: the head script of every page reads only localStorage, and the auth pages hard-set
   light. Values are picked against a dark ground, role for role — brand steps lighter on hover instead of darker, and
   the washes are dark tints of the same hues — so not one rule below needs a second colour decision. */
:root[data-theme=dark] {
  color-scheme: dark;
  --page: #0f1319; --surface: #171c24; --surface-2: #1e2530; --surface-3: #28303c;
  --ink: #e9edf4; --ink-2: #aeb7c5; --ink-3: #838e9e;
  --line: #28303b; --line-strong: #3a4453; --ring: rgba(233, 237, 244, .12);
  --brand: #5598e7; --brand-deep: #86b6ef; --brand-mid: #2a78d6; --brand-soft: #1c5cab; --brand-wash: #16273e; --brand-ink: #bcd8f8;
  --s1: #5598e7; --s2: #f0885a; --s3: #35c795; --s4: #f0bb3c; --s5: #f09cbd; --s6: #3aa83a; --s7: #8f80e0; --s8: #ef6b6b;
  --ok: #3fc463; --warn: #e8b13a; --serious: #f09a72; --critical: #ef6b6b;
  --ok-wash: #12271a; --warn-wash: #2b2413; --critical-wash: #2d1a1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px -12px rgba(0, 0, 0, .70);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .40), 0 18px 40px -16px rgba(0, 0, 0, .80);
}
/* --c is the one colour a component reads; --cw is its wash. Bands take status tokens, phase takes categorical slots,
   and "other" is the absence of a phase rather than a ninth category, so it takes ink and no slot. */
.b-high { --c: var(--critical); --cw: var(--critical-wash) } .b-med { --c: var(--warn); --cw: var(--warn-wash) }
.b-low { --c: var(--ink-3); --cw: var(--surface-2) } .b-none { --c: var(--line-strong); --cw: var(--surface-2) }
/* Evidence runs the other way. Priority high means look now, so it takes the alarm colour.
   Evidence high means the trial is built to give a clean answer, which is good news, so
   strong is --ok and weak is --critical. Sharing the priority bands made a well-designed
   study render as a warning. */
.e-high { --c: var(--ok); --cw: var(--ok-wash) } .e-med { --c: var(--warn); --cw: var(--warn-wash) }
.e-low { --c: var(--critical); --cw: var(--critical-wash) } .e-none { --c: var(--line-strong); --cw: var(--surface-2) }
.ph-3 { --c: var(--s1) } .ph-23 { --c: var(--s2) } .ph-2 { --c: var(--s3) } .ph-12 { --c: var(--s4) } .ph-0 { --c: var(--ink-3) }

* { box-sizing: border-box }
body { margin: 0; background: var(--page); color: var(--ink); font: 13px/1.4 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0 } h1 { font-size: 15px; white-space: nowrap }
h2, h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ink); white-space: nowrap }
a { color: var(--brand) } a:hover { color: var(--brand-deep) } .sub, .dim { color: var(--ink-2) } .ok { color: var(--ok) } .bad { color: var(--critical) }
.legend { color: var(--ink-3); font-size: 11px } .count { margin-left: auto; color: var(--ink-3); font-family: var(--mono); font-variant-numeric: tabular-nums }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) } :focus-visible { outline: 2px solid var(--brand); outline-offset: 1px }

/* --- controls: Cascade's button and field, unchanged ---------------------- */
button, input, select { font: inherit; color: inherit }
button { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);   /* ghost is the default here */
  font-size: 13.5px; font-weight: 600; padding: 9px 14px; min-height: 38px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; transition: background .12s, border-color .12s, transform .06s }
button:hover:not(:disabled) { background: var(--surface-2) } button:active { transform: translateY(1px) }
button:disabled { opacity: .45; cursor: progress; transform: none }
.primary { background: var(--brand); border-color: var(--brand); color: #fff }
.primary:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-deep) }
input, select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 10px; min-height: 34px }
input:focus, select:focus { border-color: var(--brand); outline-offset: -1px } select { cursor: pointer }

/* --- header and tabs ------------------------------------------------------ */
.stick { position: sticky; top: 0; z-index: 5 }   /* header and tabs move as one, so neither can hide the other */
.top { display: flex; gap: 10px; align-items: center; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--line) }
/* A dozen controls in one row: the header takes Cascade's compact button step (the one its .i-actions rows use) so that
   at 1440 the search field still has room and the row neither wraps nor scrolls. */
.top button, .top input { font-size: 12.5px; padding: 6px 11px; min-height: 32px }
.health { margin: 0; color: var(--ink-3); font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
body.busy .health { color: var(--brand) }
body.busy .top::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--brand); animation: sweep .9s linear infinite }
@keyframes sweep { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
#q { flex: 1 1 16em; max-width: 34em; margin-left: 4px } #watchForm { display: flex; gap: 5px; margin-left: auto }
#watchTicker { width: 6.5em; font-family: var(--mono); text-transform: uppercase }
.chips { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; max-width: 34ch; height: 24px; overflow: hidden }  /* capped: the header must not grow when tickers are added */
.chips li { display: flex; white-space: nowrap; gap: 2px; align-items: center; background: var(--warn-wash); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 999px; padding: 0 4px 0 9px; font: 700 11px/2 var(--mono) }
.chips li button { border: 0; background: none; padding: 0 4px; min-height: 0; font-size: 12px; color: var(--ink-2) }
.chips li.empty { background: none; border: 0; padding: 0; color: var(--ink-3); font: italic 11px/2 var(--font) }
.banner { margin: 0; padding: 9px 20px; background: var(--warn-wash); border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); font-size: 12.5px; color: var(--ink-2) }
.tabs { display: flex; gap: 2px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line) }
[role=tab] { border: 0; border-bottom: 2.5px solid transparent; border-radius: 8px 8px 0 0; background: none;
  color: var(--ink-3); font-size: 13.5px; font-weight: 600; padding: 11px 14px 9px; min-height: 0 }
[role=tab]:hover { background: var(--surface-2); color: var(--ink) } [role=tab][aria-selected=true] { color: var(--brand); border-bottom-color: var(--brand) }
main { padding: 14px 20px 24px } .bar { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 16px 0 7px } .bar:first-child { margin-top: 0 }
.bar label { color: var(--ink-2); font-size: 12px } .chk { display: flex; gap: 5px; align-items: center; color: var(--ink-2); font-size: 12px }
/* the card convention — surface, hairline, radius, shadow — on every block that holds a table or a month */
.scroll, .pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow) }
.scroll { overflow: auto; max-height: 78vh } .pane { overflow: hidden }

/* --- the priority board --------------------------------------------------- */
/* Cascade's .item at scanning density: same surface, hairline, shadow and radius-sm, 7px of padding instead of 15
   because twelve of these have to sit above the fold. The band colour is a 3px left edge, as on Cascade's .recipe. */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(222px, 1fr)); gap: 8px }
.card { display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 0; padding: 7px 9px 6px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--radius-sm); box-shadow: var(--shadow) }
.card:hover { border-color: var(--line-strong); border-left-color: var(--c); background: var(--surface) } .card.watched { background: var(--warn-wash) }
.card .r1 { display: flex; gap: 6px; align-items: baseline } .card .pr { font: 700 16px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--c) }
.card .tic { font: 700 17px/1.15 var(--mono); letter-spacing: .02em; color: var(--brand-ink) }
.card .tic.none { font: 500 11.5px/1.6 var(--font); letter-spacing: 0; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card .days { margin-left: auto; color: var(--ink-3); font: 11px var(--mono); white-space: nowrap }
.card .drug { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card .drug.none { font-weight: 400; color: var(--ink-3); font-style: italic }
.card .cond, .card .meta { color: var(--ink-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card .meta b { color: var(--c); font-weight: 700 }
/* the five components of a score, as height and as a printed number, so no score is a black box */
.spark { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 3px }
.spark div { display: flex; flex-direction: column; align-items: stretch; gap: 1px }
.spark u { display: block; height: 17px; background: var(--surface-3); border-radius: 3px; position: relative; text-decoration: none; overflow: hidden }
.spark u::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--h); background: var(--c); border-radius: 3px }
.spark s { font: 9.5px/1.3 var(--mono); color: var(--ink-3); text-align: center; text-decoration: none }

/* --- tables: every event is the same twelve cells wherever it appears ------ */
/* Full width, no cap: the extra pixels of a wide screen go into Condition and Endpoint, the only two columns without a
   fixed width, so the numeric block stays hard against the text block instead of drifting to the right edge. */
.grid { border-collapse: collapse; width: 100%; min-width: 1280px; table-layout: fixed; font-size: 12.5px }
.grid th, .grid td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.grid th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-family: var(--font-display); font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3) }
.grid th.num { text-align: right } .grid th[aria-sort] { cursor: pointer } .grid th[aria-sort]:hover { color: var(--brand) }
.grid th[aria-sort=ascending]::after { content: " ▲" } .grid th[aria-sort=descending]::after { content: " ▼" }
.grid tr.alt:not(.watched) td { background: var(--surface-2) }        /* zebra, restarted inside each day or group */
.grid tbody tr.ev:hover td { background: var(--brand-wash) }          /* the whole row lights up, so the eye keeps its line */
.grid tr.link { cursor: pointer } tr.ev:focus-visible { outline-offset: -2px }
.grid tr.watched { background: var(--warn-wash) } .grid tr.watched td:first-child { box-shadow: inset 3px 0 0 var(--warn) }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right }
.dt { font-family: var(--mono); font-variant-numeric: tabular-nums }   /* dates read as numbers but stay left-aligned */
#p-feeds .grid { table-layout: auto; min-width: 0 }   /* the feeds table is not an event grid: it sizes to its own content */
/* The ticker is the one thing the user scans for, so it outranks everything around it: larger, bold, monospace so the
   column still aligns, and in the brand ink rather than the body ink. No ticker gets the opposite treatment. */
.tic { font: 700 15px/1.2 var(--mono); letter-spacing: .02em; color: var(--brand-ink) } .grid td.tic.dim { font: 400 11px var(--mono); color: var(--ink-3) }
.ph { font-weight: 700; color: var(--c) } .pr { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; color: var(--c) }
.des { font: 11.5px var(--mono) }
.des.uncon { font-weight: 700; color: var(--critical); background: var(--critical-wash) }  /* uncontrolled: the case worth spotting from across the room */
.empty { color: var(--ink-3); font-style: italic; padding: 16px 10px !important; white-space: normal }
/* fixed widths, sized so no numeric cell ever ellipsises. Condition and Endpoint carry none: they take the slack. */
.w-tic { width: 7em } .w-ph { width: 5.5em } .w-n { width: 7.5em } .w-days { width: 9.5em } .w-date { width: 9.5em }   /* em resolves against the 10.5px header font */
.w-pr { width: 8.5em } .w-ev { width: 10em } .w-spon { width: 16em } .w-drug { width: 12em } .w-des { width: 12em } .w-ex { width: 2.4em } .w-spark { width: 9em }
/* agenda: the day header is the spine of the view — filled with the brand wash, heavy, ruled above and marked down the left edge */
tr.dayh td { background: var(--brand-wash); color: var(--brand-ink); font: 800 12.5px/2.2 var(--font-display); letter-spacing: .07em;
  white-space: pre; border-top: 2px solid var(--line-strong); box-shadow: inset 4px 0 0 var(--brand) }
tr.dayh + tr.ev td { border-top: 0 }
tr.gap td { background: var(--surface-2); color: var(--ink-3); font-style: italic; line-height: 2.2; border-top: 2px solid var(--line-strong) }

/* --- the month calendar ---------------------------------------------------- */
.cal-bar { align-items: center } .cal-title { font-size: 15px; text-transform: none; letter-spacing: -.01em; min-width: 11em; text-align: center }
.month { width: 100%; table-layout: fixed; border-collapse: collapse }
.month > thead th { padding: 7px 9px; text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3) }
.month > tbody > tr > td { vertical-align: top; padding: 0; border: 1px solid var(--line); height: 108px }  /* direct cells only: the day panel nests a grid table */
.month > tbody > tr > td.out { background: var(--surface-2) }
.day { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; height: 100%; min-height: 108px;
  padding: 5px 6px 6px; border: 0; border-radius: 0; background: none; text-align: left; font-size: 12px; font-weight: 400 }
.day:hover:not(:disabled) { background: var(--brand-wash); color: inherit } .day:focus-visible { outline-offset: -2px }
.day[aria-expanded=true] { background: var(--brand-wash); box-shadow: inset 0 -3px 0 var(--brand) }
.dh { display: flex; align-items: center; gap: 6px; min-height: 20px }
.dn { font: 650 12px var(--mono); color: var(--ink-2); min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% }
.today .dn { background: var(--brand); color: #fff }
.cnt { margin-left: auto; font: 700 11px/1.6 var(--mono); font-variant-numeric: tabular-nums; color: var(--c); background: var(--cw); border: 1px solid var(--c); border-radius: 999px; padding: 0 7px }
.chip { display: block; font: 700 12.5px/1.6 var(--mono); letter-spacing: .02em; color: var(--c); background: var(--cw);
  border-left: 3px solid var(--c); border-radius: 4px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chip.nt { font: 400 10.5px/1.8 var(--font); letter-spacing: 0; background: none; border-left-color: transparent; color: var(--ink-3) }   /* no ticker: deliberately quiet, so tradeable and not-tradeable separate without reading */
.more { font-size: 10.5px; color: var(--ink-3); padding-left: 3px }
tr.panel > td { padding: 8px 10px 12px; background: var(--surface-2); border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); height: auto }
tr.panel .bar { margin: 0 0 8px } tr.panel .close { margin-left: auto } tr.panel .scroll { max-height: 52vh }
/* a pane nested in another lifted surface does not get a second shadow: the day panel's table, and the users table inside the account card */
tr.panel .scroll, .auth-card .scroll { box-shadow: none; border-radius: var(--radius-sm) }

/* --- browse: one row per group, expandable --------------------------------- */
tr.grp td { padding: 0; background: var(--surface-2); border-top: 1px solid var(--line-strong) }
.ex { display: flex; gap: 14px; align-items: baseline; width: 100%; min-height: 0; padding: 7px 10px; border: 0; border-radius: 0;
  background: none; text-align: left; font-size: 12.5px; font-weight: 400 }
.ex:hover:not(:disabled) { background: var(--brand-wash); color: inherit } .ex .pr { text-align: left }
.ex .tri { font-family: var(--mono); color: var(--ink-3); width: 1em } .ex .gname { font-family: var(--font-display); font-weight: 700; min-width: 16em }

/* --- feeds ------------------------------------------------------------------ */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 0 }
.sl { display: block; width: 90px; height: 16px } .sl rect { fill: var(--brand-mid) } .sl line { stroke: var(--line-strong) }
@media (max-width: 900px) { .chips, #watchForm { display: none } }

/* --- tooltips: one floating element, positioned in script so it never clips - */
#tip { position: fixed; z-index: 40; max-width: 54ch; padding: 8px 11px; background: var(--ink); color: var(--page);
  border-radius: 9px; box-shadow: var(--shadow-lg); font-size: 12.5px; line-height: 1.45; pointer-events: none }
#tip .sum { line-height: 1.5 }
#tip span, #tip b { display: block } #tip b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; margin-bottom: 3px }
#tip span + span { margin-top: 3px } #tip .ld { font-style: italic; opacity: .8 } #tip em { font-style: normal; opacity: .75 }
[data-tip], [data-tipid] { cursor: help } tr[data-tipid], .card[data-tipid] { cursor: pointer }
.legend span { cursor: help; color: var(--ink-2); font-weight: 650; border-bottom: 1px dotted var(--line-strong) }

/* --- the dossier: a right-hand sheet. Two halves, and they must not be mistakable for one another. --- */
.dos { position: fixed; inset: 0 0 0 auto; width: min(620px, 96vw); max-width: 100vw; max-height: 100vh; height: 100%; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--line); background: var(--page); color: var(--ink); overflow: auto; box-shadow: var(--shadow-lg) }
.dos::backdrop { background: rgba(11, 11, 11, .45) }
.dosTop { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line) }
.dosTop h2 { font-size: 16px; text-transform: none; letter-spacing: -.01em; white-space: normal } .dosTop button { margin-left: auto }
.dosTop p { margin: 3px 0 0; font-size: 11.5px; white-space: normal } .dosBody { padding: 0 16px 20px }
/* solid, filled and in the ok token for what the registry already answers; dashed, hatched and drained of colour for what it cannot */
.half { margin: 16px 0 0; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden }
.half > h3 { display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; font-size: 12px; white-space: normal }
.half > h3 em { font: italic 11px var(--font); letter-spacing: 0; text-transform: none }
.half.known { border-color: color-mix(in srgb, var(--ok) 45%, transparent) } .half.known > h3 { background: var(--ok-wash); color: var(--ok) }
.half.later { border-style: dashed; border-color: var(--line-strong); box-shadow: none }
.half.later > h3 { background: repeating-linear-gradient(135deg, var(--surface-2) 0 7px, var(--surface-3) 7px 14px); color: var(--ink-3) }
.half.later .kv { background: var(--surface-2); border-top-style: dashed } .half.later .kv .k, .half.later .kv .v { color: var(--ink-3) }
.kv { display: grid; grid-template-columns: 12em 1fr; gap: 4px 12px; padding: 7px 12px; border-top: 1px solid var(--line) }
.kv .k { color: var(--ink-3); font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em }
.kv .v { white-space: normal; overflow-wrap: anywhere } .kv .v.dim { font-style: italic } .kv.wide { grid-template-columns: 1fr } .kv.wide .k { margin-bottom: 2px }
.slot { display: inline-block; min-width: 8em; padding: 0 6px; border-bottom: 2px dashed var(--line-strong); color: var(--ink-3); font-family: var(--mono) }
.look { display: block; margin-top: 3px; color: var(--ink-2); font-size: 11.5px; white-space: normal }
.dos .spark { max-width: 260px } .dos .links { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 0; font-size: 12.5px }
.rd { display: flex; gap: 10px; align-items: center } .rd b { font: 700 19px/1 var(--mono); color: var(--c) }

/* --- the account pages ------------------------------------------------------ */
/* Standalone, and on the same tokens as the app. /login, /setup and /invite set data-theme=light in the head before
   first paint, so the front door cannot flash or settle into a dark choice made inside the app. */
#auth { max-width: 30em; margin: 5vh auto; padding: 0 16px } #auth.wide { max-width: 78em }
body.gate { min-height: 100vh; display: grid; place-items: center }   /* the sign-in moment: centred on both axes, on a plot of its own */
body.gate #auth { margin: 0; width: min(100%, 33em); position: relative; z-index: 1 }   /* place-items:center would shrink it to its content */
.km { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none }   /* full bleed, behind everything */
.km-t { stroke: var(--brand); stroke-width: .8; opacity: .20 } .km-c { stroke: var(--ink); stroke-width: .8; opacity: .12 } .km-tick { stroke-width: .55 }
.km-band { fill: var(--brand); opacity: .05 } .km-ax { stroke: var(--ink); stroke-width: .25; opacity: .12 } .mark.lg { width: 46px; height: 46px } .mark.sm { width: 22px; height: 22px }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 26px; box-shadow: var(--shadow-lg) }
.auth-card h1 { font-size: 34px; letter-spacing: -.025em; margin: 0 0 6px; gap: 12px } .auth-card h2 { margin: 14px 0 8px }
.auth-card p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2) }
#auth.wide .auth-card { padding: 18px 20px 20px; box-shadow: var(--shadow) } #auth.wide .auth-card h1 { font-size: 20px }
.fld { display: block; margin: 0 0 12px } .fld span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px }
.fld input { width: 100%; padding: 9px 10px; min-height: 40px; transition: border-color .15s, box-shadow .15s }   /* the only motion on these pages */
.fld input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash) }
.hint { font: 11.5px var(--mono); color: var(--ink-3); margin: -4px 0 10px } .hint.bad { color: var(--critical) } .hint.ok { color: var(--ok) }
.err { color: var(--critical); font-weight: 650 } .good { color: var(--ok); font-weight: 650 }
form > .primary { width: 100%; justify-content: center; padding: 11px; font-size: 14px; min-height: 44px }
.authtop { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; font-size: 12.5px } .authtop a { white-space: nowrap } .authtop .who { margin-left: auto }
.who { color: var(--ink-2); white-space: nowrap } .top .who { font-weight: 650; color: var(--ink) } .top #acct, .top #admin { font-size: 12.5px; white-space: nowrap }
.users { min-width: 0; table-layout: auto } .users td.tic { font-size: 13px } .users td button { font-size: 12px; padding: 5px 10px; min-height: 30px; margin-right: 5px }
.invite { margin-top: 6px } .invite input { width: 100%; font: 11.5px var(--mono); margin-bottom: 8px }
.addu { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px } .addu .primary { width: auto }
/* Brand mark. Kaplan-Meier curve: the accented top run is the topline itself. */
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em } .brand b { font-weight: 700 }
.mark { flex: none } .mark .mk-top { stroke: var(--brand) } .mark .mk-ink { stroke: currentColor }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important } }

/* "How is this worked out" panel, reached from the ? on the Priority and Evidence headers. */
/* The score explainers sit in the section bar, not in the sticky sortable header,
   where a small button was both hard to hit and easy to mistake for a sort control. */
.bar .why { padding: 3px 9px; min-height: 0; font-size: 11.5px; font-weight: 600; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line) }
.bar .why:hover { background: var(--brand-wash); color: var(--brand-ink); border-color: var(--brand-soft) }
/* The drug name is the line people read first, so it is labelled and left largest. */
.card .drug i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 5px; vertical-align: 1px }
.card .drug span { font-size: 13.5px; font-weight: 700; color: var(--ink) }
.card .drug.none span { font-weight: 400; font-style: italic; color: var(--ink-3) }
/* the explainer reuses .grid for its rules and zebra, but it lives in a 620px panel,
   so it drops the event grid's 1280px floor and lets all three columns wrap */
p.sum { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2) }
table.why { min-width: 0; table-layout: auto }
table.why th, table.why td { padding: 7px 10px; vertical-align: top; white-space: normal; overflow: visible }
table.why td.tic { font-size: 12.5px; width: 21% } table.why td.mono { width: 40% }
table.why td.mono { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); line-height: 1.45 }
.note { margin: 12px 0 0; padding: 10px 13px; background: var(--surface-2); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; color: var(--ink-2) }
.spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px }
.spread .sp { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--cw); border-left: 3px solid var(--c) }
.spread .sp b { display: block; font-family: var(--mono); font-size: 21px; color: var(--c) }
.spread .sp span { font-size: 12px; color: var(--ink-2) }

/* --- v8: date precision, endpoint class, per-arm size and the peer lists ---------- */
/* An estimated date is written in the muted ink so a real one stands out. No new hue:
   priority and evidence own the colour, and a date is not a third scale. */
.dt.est a, .dt.est span { color: var(--ink-3) }
.grid td.num.small { color: var(--critical) }          /* fewer than 30 patients an arm */
.conf-open { font-style: italic }                      /* still recruiting, so the date may move */
.grid td .flag { font-style: normal; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); margin-right: 6px }
.grid td.uncon .flag { color: var(--critical) }
#month .chip.est { border-style: dashed }
.peerwrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px }
.peers .peer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  width: 100%; min-height: 0; padding: 7px 10px; margin-top: 4px; text-align: left; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm) }
.peers .peer:hover { background: var(--brand-wash); border-color: var(--brand-soft) }
.peers .pl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.peers .pl b { font-family: var(--mono); color: var(--brand-ink) }
.peers .pm { font-size: 11.5px; color: var(--ink-3); white-space: nowrap }
.peers .peer .pr { font-family: var(--mono); font-weight: 700; color: var(--c); padding: 1px 7px;
  background: var(--cw); border-radius: 999px }

/* --- the dossier's source link, and the collapsed day-of checklist ---------------- */
.dosAct { display: flex; gap: 8px; align-items: center }
.dosAct .btn { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 14px; font-size: 13.5px; white-space: nowrap;
  font-weight: 600; color: var(--brand-ink); text-decoration: none; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm) }
.dosAct .btn:hover { background: var(--brand-wash); border-color: var(--brand-soft) }
.dosAct .btn:active { transform: translateY(1px) }
/* Closed by default: six things nobody can know yet should not occupy the panel that
   holds the things that are known. */
.half.later > summary { display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; cursor: pointer;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 7px, var(--surface-3) 7px 14px); color: var(--ink-3) }
.half.later > summary::-webkit-details-marker { display: none }
.half.later > summary::before { content: "\25b8"; color: var(--ink-3) }
.half.later[open] > summary::before { content: "\25be" }
.half.later > summary h3 { display: inline; padding: 0; background: none; font-size: 12px }
.half.later > summary em { font: italic 11px var(--font); letter-spacing: 0; text-transform: none }
.half.later .kv .v.look { margin-top: 0; color: var(--ink-2) }

/* A techbio sponsor is marked in the brand ink rather than a status colour: it is a
   fact about the company, not a warning about the trial. */
.grid td .flag.tb, .card .meta b.tb { color: var(--brand); font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-style: normal }
.card .meta b.tb { font-size: 10px }