/* GENERATED by scripts/build_css.py from fonts.css, tokens.css, base.css, components.css, docket.css, shell.css, utilities.css -- do not edit; edit the
   source sheet and rebuild (tests/test_css_bundle.py reds while this file is stale). */

/* ==== fonts.css ==== */
/* CSS step 3 (2026-11-06): the cascade layers, declared once, in the first sheet base.html links.
   Later layers win over earlier ones whatever the selector's specificity; the templates' page <style>
   blocks are wrapped in the page layer too, so nothing the app ships is unlayered. */
@layer tokens, base, components, page, utilities;

/* Self-hosted web fonts (legal audit 2026-10-06): no request leaves the site for type.
   Files are the OFFICIAL, UNMODIFIED woff2 builds; each family's SIL OFL 1.1 license sits
   beside its files, as the license requires.
     IBM Plex Sans  github.com/IBM/plex, release @ibm/plex-sans@1.1.0, fonts/complete/woff2
     IBM Plex Mono  github.com/IBM/plex, release @ibm/plex-mono@2.5.0, fonts/complete/woff2
     Source Serif 4 github.com/adobe-fonts/source-serif, release 4.005R, WOFF2/VAR
                    (variable: wght + opsz; only .dl-trial-title uses it, at 400/600)
   Weights are exactly those the retired Google Fonts request served; the fallback stacks
   stay in the tokens (--dl-font-sans / --dl-font-mono / --dl-font-serif). */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-serif-4/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');
}

/* ==== tokens.css ==== */
@layer tokens {
/* DataLookout dashboard -- design tokens. Loaded first; every other stylesheet reads these. */
/* === Design tokens: DESIGN.md §9. The block between the markers is byte-identical to
   site/assets/design.css; scripts/check_copy_claims.py enforces it. === */
/* @dl-tokens:begin */
:root {
  --dl-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dl-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --dl-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --dl-slate-50: #f3f1ea; --dl-slate-100: #efede6; --dl-slate-200: #e4e1d7; --dl-slate-300: #cdc9bc;
  --dl-slate-400: #a09c8f; --dl-slate-500: #6a675c; --dl-slate-600: #55534a; --dl-slate-700: #44423a;
  --dl-slate-800: #2c2b26; --dl-slate-900: #1e1d19;
  --dl-canvas: #f7f6f1; --dl-panel: #fdfcf9; --dl-panel-2: #efede6;
  --dl-rule: #e4e1d7; --dl-rule-strong: #cdc9bc;
  --dl-ink-1: #1e1d19; --dl-ink-2: #44423a; --dl-ink-3: #6a675c; --dl-ink-mute: #a09c8f;
  --dl-brand-mark: #22c55e; --dl-brand-deep: #166534; --dl-brand-tint: #dcfce7;
  --dl-action: #0f6e4d; --dl-action-hover: #0a5237; --dl-action-ink: #0a5237; --dl-action-tint: #e6f2ea; --dl-on-action: #ffffff;
  --dl-link: #0f6e4d; --dl-link-hover: #0a5237; --dl-link-tint: #e6f2ea;
  --dl-navy: #1e1d19; --dl-navy-2: #2c2b26; --dl-on-navy: #ffffff; --dl-on-navy-mute: #a09c8f;
  --dl-critical: #dc2626; --dl-critical-ink: #b91c1c; --dl-critical-tint: #fbeeea;
  --dl-notable: #b45309; --dl-notable-ink: #92400e; --dl-notable-tint: #fbf3e0;
  --dl-minor: #6a675c; --dl-minor-ink: #55534a; --dl-minor-tint: #efede6;
  --dl-momentum-4: #0f6e4d; --dl-momentum-3: #3f8f6c; --dl-momentum-2: #8fbfa6; --dl-momentum-1: #d2e5d9;
  --dl-fs-xs: 0.75rem; --dl-fs-sm: 0.8125rem; --dl-fs-base: 0.875rem; --dl-fs-md: 1rem;
  --dl-fs-lg: 1.125rem; --dl-fs-xl: 1.375rem; --dl-fs-xxl: 1.75rem; --dl-fs-title: 1.875rem;
  --dl-radius-sm: 4px; --dl-radius: 6px; --dl-radius-lg: 8px; --dl-radius-xl: 12px;
  --dl-shadow-sm: 0 1px 2px rgba(30,29,25,.05);
  --dl-shadow: 0 1px 3px rgba(30,29,25,.08), 0 1px 2px rgba(30,29,25,.04);
  --dl-shadow-md: 0 4px 12px rgba(30,29,25,.08), 0 2px 4px rgba(30,29,25,.04);
  --dl-motion-fast: 150ms; --dl-motion: 200ms; --dl-motion-slow: 250ms;
  --dl-transition: 150ms ease;
  --dl-focus-ring: 0 0 0 2px #fdfcf9, 0 0 0 4px #0f6e4d;
}
/* @dl-tokens:end */

:root { --dl-surface-sidebar: #ece9e0; --dl-surface-sidebar-hover: #f3f1ea; }

/* Legacy aliases still read somewhere (scripts/css_audit.py lists readers); each points at a canonical token
   above. Do not add values here; add a token to DESIGN.md §9 and both blocks. 31 unread aliases were
   deleted 2026-11-03 (CSS step 2). --dl-consent-h is not declared here: consent.js sets it on <html>. */
:root {
  --dl-blue: var(--dl-link);
  --dl-gray-50: var(--dl-slate-50);
  --dl-border: var(--dl-rule);
  --dl-text: var(--dl-ink-1);
  --dl-text-secondary: var(--dl-ink-3);
  --dl-shadow-lg: 0 8px 24px rgba(27,27,25,.1), 0 2px 8px rgba(27,27,25,.04);
  /* ---- Shell tokens (stage-4 C2, 2026-10-24; from the Stage 2 v2 set, additive) ---- */
  --dl-sidebar-w: 240px;        /* app sidebar at >= 1024px (fixed, no collapse: Paul 2026-10-24) */
  --dl-bar-h: 52px;             /* top bars */
  --dl-target-min: 44px;        /* nav, drawer and menu targets */
  --dl-space-1: 4px; --dl-space-2: 8px; --dl-space-3: 12px; --dl-space-4: 16px;
  --dl-space-5: 24px; --dl-space-6: 32px; --dl-space-7: 48px; --dl-space-8: 64px;
}
}

/* ==== base.css ==== */
@layer base {
/* DataLookout dashboard -- base: reboot, typography, footer, utilities, responsive. Needs tokens.css. */
/* === Reboot (C2b step 5, 2026-11-02): what Bootstrap's reboot gave every page until bootstrap.min.css
   went, kept so nothing moves. Only the elements the pages render (measured 2026-11-02; no fieldset,
   legend, blockquote, figure, code, pre, kbd, sub, sup); the design's own rules follow. === */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } }
p { margin-top: 0; margin-bottom: 1rem; }
ol, ul { padding-left: 2rem; }
dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: 0.5rem; margin-left: 0; }
b, strong { font-weight: bolder; }
small { font-size: 0.875em; }
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; text-align: -webkit-match-parent; }
thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; }
label { display: inline-block; }
button { border-radius: 0; }
button:focus:not(:focus-visible) { outline: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
[role="button"] { cursor: pointer; }
select { overflow-wrap: normal; }
select:disabled { opacity: 1; }
[type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; }
[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) { cursor: pointer; }
textarea { resize: vertical; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
summary { display: list-item; cursor: pointer; }
/* The three !important here stay (CSS step 3): [hidden] and reduced motion must beat a JS-set style attribute. */
[hidden] { display: none !important; }

/* === Base === */
body {
  margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;   /* the reboot's */
  font-family: var(--dl-font-sans);
  background: var(--dl-canvas);
  color: var(--dl-ink-1);
  font-size: var(--dl-fs-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  font-family: var(--dl-font-sans);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--dl-ink-1);
}
/* DESIGN.md §1: the serif is for a trial's title and nothing else. */
.dl-trial-title {
  font-family: var(--dl-font-serif);
  font-size: var(--dl-fs-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--dl-ink-1);
}
a { color: var(--dl-link); text-decoration: none; }
a:hover { color: var(--dl-link-hover); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--dl-focus-ring); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* === Navigation: the shell (sidebar, bars, drawer, topline) lives in shell.css since the
   C2 shell of 2026-10-24; the Bootstrap .navbar rules that stood here were removed with it. === */

/* === Inbox state (DESIGN.md tokens only): unread dot, row focus, done affordance, nav count. === */
.dl-unread {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dl-action);
  margin-right: 6px;
  vertical-align: middle;
}
/* The Done/Undo controls' rules (.dl-row--focus, .dl-save-error, .dl-row__done, .btn-quiet,
   .dl-show-done-toggle) were removed 2026-10-11 with the feature (Paul; never used). */
}

/* ==== components.css ==== */
@layer components {
/* DataLookout dashboard -- components: badges, cards, tables, buttons, forms, nav pieces. Needs tokens.css. */
/* === Badges (DESIGN.md §5 Severity): sentence case, ink on tint, three severities. No other coloured pills. === */
.badge {
  display: inline-block; text-align: center; white-space: nowrap; vertical-align: baseline;
  font-family: var(--dl-font-sans);
  font-weight: 500;
  font-size: var(--dl-fs-sm);
  letter-spacing: 0;
  padding: 0.15em 0.5em;
  border-radius: var(--dl-radius-sm);
  line-height: 1.4;
  text-transform: none;
}
/* Plan badges: neutral, no purple */
.badge-free    { background: var(--dl-minor-tint); color: var(--dl-minor-ink); }
.badge-pro     { background: var(--dl-action-tint); color: var(--dl-action-ink); }
/* Trial status: a word in ink with a small graphite square. Filled = open (recruiting, active,
   enrolling, not yet recruiting), outlined = closed (completed, terminated, withdrawn, suspended).
   Colour is reserved for severity (an EVENT); status is a STATE. */
[class*="badge-status-"] {
  background: transparent;
  color: var(--dl-ink-1);
  padding: 0;
  font-size: var(--dl-fs-base);
  font-weight: 500;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
[class*="badge-status-"]::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 1px;
  background: var(--dl-ink-3);
  flex: none;
}
.badge-status-completed::before, .badge-status-terminated::before,
.badge-status-withdrawn::before, .badge-status-suspended::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dl-ink-3);
}
.badge-status-terminated, .badge-status-suspended, .badge-status-withdrawn { color: var(--dl-ink-2); }

/* Severity square mark (DESIGN.md §5 Docket): the row-level severity signal. Carries its word
   as visually-hidden text (`<span class="dl-mark critical"><span class="visually-hidden">critical</span></span>`)
   so screen readers, curl and crawlers still read the severity — colour is never the only channel. */
.dl-mark { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--dl-minor); vertical-align: 1px; flex: none; position: relative; overflow: hidden; }

/* Typed entity hits above a result list (search_results.html): kind eyebrow, name in link colour, count. */
.dl-hits { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dl-hit { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm); background: var(--dl-panel); color: var(--dl-ink-1); text-decoration: none; font-size: var(--dl-fs-base); }
.dl-hit:hover { background: var(--dl-action-tint); border-color: var(--dl-action); text-decoration: none; color: var(--dl-ink-1); }
.dl-hit b { font-weight: 600; color: var(--dl-link); }
.dl-hit-kind { font-size: var(--dl-fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-ink-3); }
.dl-hit-count { font-size: var(--dl-fs-sm); color: var(--dl-ink-3); font-variant-numeric: tabular-nums; }
.dl-empty { font-size: var(--dl-fs-base); color: var(--dl-ink-2); padding: 12px 0; }
.dl-empty small { display: block; color: var(--dl-ink-3); margin-top: 4px; }
.dl-mark.critical { background: var(--dl-critical); }
.dl-mark.notable  { background: var(--dl-notable); }
.dl-mark.minor    { background: var(--dl-minor); }

/* === Page head + snapshot caption + CTA (DESIGN.md §5; used by the demo partials, 3.3) === */
.dl-page-title { font-size: var(--dl-fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 2px 0 8px; }
/* A plain page head since 2026-10-25 (Paul): the tinted band and the uppercase eyebrow
   ("Sponsor pipeline", "Disease landscape") went; the title says what the page is. */
.dl-demo-head { margin: 8px 0 12px; display: flex; flex-wrap: wrap; align-items: flex-start; }
/* Entity (disease/sponsor) headers run larger than the generic 22px page title: 28px
   keeps the trial page (30px) the largest while lifting the entity pages clearly above
   list/utility pages. Scoped: bumping .dl-page-title itself would resize 14
   templates (Pulse, watchlist, account, ...). */
.dl-demo-head .dl-page-title { margin-top: 4px; font-size: var(--dl-fs-xxl); }
/* Header CTA layout: the head's
   children are reordered by breakpoint. Mobile (default, no media query): title,
   CTA, as-of. Desktop (>=640px): title and CTA share the first line (both non-100%-width
   flex items), as-of drops to its own full-width line below. */
.dl-demo-head-top { order: 1; flex: 1 1 100%; }
.dl-demo-head-cta { order: 3; flex: 0 0 auto; margin-top: 10px; white-space: nowrap; }
@media (min-width: 640px) {
  .dl-demo-head-top { flex: 1 1 auto; }
  .dl-demo-head-cta { order: 2; margin-top: 2px; margin-left: auto; align-self: center; }
}
.dl-asof { order: 4; font-size: var(--dl-fs-sm); color: var(--dl-ink-3); flex: 1 1 100%; }
.dl-muted { color: var(--dl-ink-3); }
/* A text box with a clear (x) button inside its right edge: wrap the input in .dl-clearable. */
.dl-clearable { position: relative; flex: 1 1 240px; }
.dl-clearable .dl-input { padding-right: 2rem; }
.dl-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--dl-ink-3); font-size: 1.25rem; line-height: 1; }
.dl-clear:hover, .dl-clear:focus-visible { background: var(--dl-rule); color: var(--dl-ink-1); }
.dl-clear[hidden] { display: none; }
/* Plan-limit CTA: the button IS the upgrade action, so it keeps full primary
   weight; the note below it drops the xs/muted treatment that made it easy to
   miss. Rendered by dlRenderPlanLimit() in static/js/app.js. */
.dl-limit-note { font-size: var(--dl-fs-base); color: var(--dl-ink-2); }
/* Right-aligned ONLY inside the disease/sponsor header action stack, which is itself
   flex-end. The trial page's track block is left-aligned body content, so alignment
   belongs to the container, not to the shared note class. */
.dl-head-actions .dl-limit-note { max-width: 26ch; text-align: right; }
/* The lines under the header's watch button (coverage, the narrow help, "N of M watched"): body
   size and ink-2, the same lift .dl-limit-note got. They stood at xs/muted until 2026-10-18 and
   read as fine print (Paul: "the text fonts are all pretty small"). The inline button inside the
   narrow help inherits the size so it reads as part of the sentence, not a second control. */
.dl-head-note { font-size: var(--dl-fs-base); color: var(--dl-ink-2); line-height: 1.5; max-width: 76ch; text-wrap: pretty; }
.dl-head-note .dl-btn--link { font-size: inherit; line-height: inherit; vertical-align: baseline; }
/* width: max-content so a note sets the column's width, not the button above it: the column is
   flex: 0 0 auto, and sized by the button alone a 75-character sentence broke after its last two
   words (Paul, 2026-10-18: "weird line breaks"). The head wraps the column under the title on
   narrow screens, so the width cannot squeeze the title. */
.dl-head-actions .dl-head-note { text-align: right; width: max-content; }
.dl-head-actions .dl-head-note + .dl-head-note { margin-top: 2px; }
@media (max-width: 640px) {
  .dl-head-actions .dl-limit-note { text-align: left; max-width: none; }
  .dl-head-actions .dl-head-note { text-align: left; max-width: none; width: auto; }
}
.dl-tag { font-size: var(--dl-fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dl-notable-ink); margin-left: 4px; }
.dl-footnote { font-size: var(--dl-fs-sm); color: var(--dl-ink-3); padding: 8px 0 0; }
.dl-linklist { font-size: var(--dl-fs-base); line-height: 1.9; margin: 6px 0 0; }
.dl-phase-table td { border-bottom: 1px solid var(--dl-rule); }
.dl-phase-table .dl-phase-label { width: 130px; font-weight: 500; }
.dl-phase-table .dl-phase-bar { padding-top: 0.6rem; }
.dl-phase-table .dl-phase-bar > div { height: 8px; min-width: 2px; background: var(--dl-ink-2); border-radius: 1px; }
.dl-phase-table .dl-num { width: 72px; }
.dl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dl-cta { margin: 32px 0 40px; padding: 16px 20px; border: 1px solid var(--dl-rule); border-radius: var(--dl-radius-sm); background: var(--dl-panel-2); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dl-cta-title { font-weight: 600; margin-bottom: 2px; }
.dl-cta-sub { font-size: var(--dl-fs-base); color: var(--dl-ink-2); }

/* === Report cards (DESIGN.md §5 Section): a bounded surface only where it earns it. The landscape
   report's Bootstrap .card became .dl-report-card in C2b step 4 (2026-11-02): a section with a 2px ink
   rule on top, no shadow, no border box, no uppercase header. === */
.dl-report-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word;
  border: 0;
  border-top: 2px solid var(--dl-ink-1);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: inherit;
}
/* The quiet count chip (the landscape report's counts, /compare's id chips, the search scope chips).
   Was .badge.bg-secondary with two !important until CSS step 3 (2026-11-06); the markup carries this class now. */
.badge-count {
  background: transparent;
  color: var(--dl-ink-3);
  border: 1px solid var(--dl-rule-strong);
  font-size: var(--dl-fs-sm);
  font-weight: 500;
  padding: 0.15em 0.5em;
  border-radius: var(--dl-radius-sm);
  font-variant-numeric: tabular-nums;
}
.dl-report-card__head {
  margin-bottom: 0;
  background: transparent;
  color: var(--dl-ink-1);
  font-weight: 600;
  font-size: var(--dl-fs-md);
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 0.6rem 0 0.5rem;
  border-radius: 0;
  border-bottom: 1px solid var(--dl-rule);
}
.dl-report-card__head a { color: var(--dl-link); font-size: var(--dl-fs-sm); font-weight: 400; }
.dl-report-card__head a:hover { color: var(--dl-link-hover); }
.dl-report-card__head .badge { font-size: var(--dl-fs-xs); vertical-align: middle; text-transform: none; }
.dl-report-card__body { flex: 1 1 auto; padding: 0.75rem 0; }
.dl-report-card + .dl-report-card { margin-top: 1.75rem; }
/* A card INSIDE a card (the landscape history box) is a quiet box, never a second section rule. */
.dl-report-card .dl-report-card { border: 1px solid var(--dl-rule); border-radius: var(--dl-radius-sm); background: var(--dl-panel); margin-top: 0; }
.dl-report-card .dl-report-card + .dl-report-card { margin-top: 6px; }
.dl-report-card .dl-report-card .dl-report-card__body { padding: 0.5rem 0.75rem; }

/* === Tables (DESIGN.md §5 Table): panel-2 header band, 2px ink rule under it, no zebra === */
/* C2b step 3 (2026-11-02): .table -> .dl-table, --hover, --sm, --bordered; .table-responsive -> .dl-scroll.
   width, cell background and vertical-align came from Bootstrap's .table rules until then. */
.dl-table {
  width: 100%;
  font-size: var(--dl-fs-base);
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: top;
}
.dl-table th { text-align: inherit; }
.dl-table thead {
  background: var(--dl-panel-2);
  font-size: var(--dl-fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dl-ink-3);
}
.dl-table thead th {
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--dl-ink-1);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--dl-panel-2);
  z-index: 1;
  font-weight: 500;
}
.dl-table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--dl-rule);
  vertical-align: middle;
  color: var(--dl-ink-1);
  background: var(--dl-panel);
}
.dl-table--bordered th, .dl-table--bordered td { border-left: 1px solid var(--dl-rule); border-right: 1px solid var(--dl-rule); }
.dl-table tbody tr:last-child td { border-bottom: 1px solid var(--dl-rule); }
.dl-table--hover tbody tr:hover, .dl-table--hover tbody tr:hover td { background: var(--dl-panel-2); }
.dl-table tbody tr:nth-child(even) { background: transparent; }
.dl-table tbody tr:nth-child(even):hover { background: var(--dl-panel-2); }
.dl-table--sm td, .dl-table--sm th { padding: 0.35rem 0.6rem; }
.dl-table td.dl-num, .dl-table th.dl-num { text-align: right; font-variant-numeric: tabular-nums; }
.dl-table td.dl-date { font-family: var(--dl-font-mono); font-size: var(--dl-fs-sm); color: var(--dl-ink-3); white-space: nowrap; }

/* Opt-in row-stacking primitive (DESIGN.md §5 Table): for tables whose rows are records
   a phone user reads one at a time. Default table behavior stays horizontal scroll
   inside .dl-scroll; add class="dl-table dl-stack" and a data-th on every <td> to opt in. */
/* Clipped cells (desktop): classes, not inline styles, so the stacked layout can let them wrap. */
.dl-table td.dl-cell-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-table td.dl-cell-clip { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .dl-table.dl-stack, .dl-table.dl-stack thead, .dl-table.dl-stack tbody,
  .dl-table.dl-stack th, .dl-table.dl-stack td, .dl-table.dl-stack tr { display: block; }
  .dl-table.dl-stack thead { display: none; }
  .dl-table.dl-stack tbody tr { border-bottom: 1px solid var(--dl-rule); padding: 8px 0; }
  .dl-table.dl-stack tbody td { border: none; padding: 2px 0; }
  .dl-table.dl-stack td.dl-num, .dl-table.dl-stack td.dl-date { text-align: left; }
  /* A stacked record reads whole: the title wraps; the compare checkbox (desktop) is hidden. */
  .dl-table.dl-stack td.dl-cell-title, .dl-table.dl-stack td.dl-cell-clip { max-width: none; overflow: visible; white-space: normal; }
  .dl-table.dl-stack td.dl-cell-compare { display: none; }
  .dl-table.dl-stack tbody td[data-th]:not([data-th=""])::before {
    content: attr(data-th); display: block; font-size: var(--dl-fs-xs); text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--dl-ink-3); margin-bottom: 1px;
  }
}

/* NCT ID monospace links */
/* Registry-verbatim value: mono. A plain span is ink-2; when it is the link, it is link blue (DESIGN.md §3). */
.nct-id {
  font-family: var(--dl-font-mono);
  font-size: var(--dl-fs-base);
  color: var(--dl-ink-2);
  font-weight: 500;
  letter-spacing: 0;
}
a.nct-id { color: var(--dl-link); text-decoration: none; }
a.nct-id:hover { color: var(--dl-link-hover); text-decoration: underline; }

/* Page tabs (Watchlist's Changes / Manage) and the add box's Sponsors / Diseases mode tabs: the underline
   style; the first tab's text sits on the H1's left edge. Page-scoped in dashboard.html until 2026-10-28. */
.dl-page-tabs { display: flex; gap: 20px; margin: 0 0 20px; border-bottom: 1px solid var(--dl-rule); }
.dl-page-tabs a, .dl-page-tabs button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; margin-bottom: -1px; font: inherit; font-size: var(--dl-fs-md); font-weight: 500; color: var(--dl-ink-2); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.dl-page-tabs > :first-child { padding-left: 0; }
.dl-page-tabs a:hover, .dl-page-tabs button:hover { color: var(--dl-ink-1); }
.dl-page-tabs a[aria-current="page"], .dl-page-tabs button[aria-selected="true"] { color: var(--dl-ink-1); font-weight: 600; border-bottom-color: var(--dl-action); }
.dl-mode-tabs { margin: 0 0 12px; }
/* The Manage tab's section style (the trial page's), also the frame of the add box and the example on an
   empty home / Watchlist > Changes. */
.dl-following .dl-section { border-top: 1px solid var(--dl-rule); padding-top: 14px; margin-top: 48px; }
.dl-following > .dl-section:first-of-type { margin-top: 0; }
.dl-following .dl-section-title { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 16px; color: var(--dl-ink-1); }
.dl-following .dl-section-title small { font-weight: 400; font-size: var(--dl-fs-sm); color: var(--dl-ink-3); margin-left: 6px; }
.dl-following .dl-section-lead { font-size: var(--dl-fs-base); color: var(--dl-ink-2); margin: -6px 0 12px; }
.dl-following .dl-section-foot { margin: 10px 0 0; font-size: var(--dl-fs-base); }
.dl-example { margin: 0 0 32px; }
.dl-example__line { margin: 0 0 12px; font-size: var(--dl-fs-base); color: var(--dl-ink-2); }   /* .dl-empty's treatment: one slot, one size */
.dl-home-grid > div > .dl-following { margin-bottom: 24px; }   /* room before the rail when it stacks under the add box (390) */
.dl-example + .dl-section { margin-top: 32px; }
.dl-page-head__sub .dl-sep { padding: 0 .5em; }
.search-results-dropdown {
  position: absolute;
  width: 100%;
  z-index: 1000;
  border: 1px solid var(--dl-rule-strong);
  border-top: none;
  border-radius: 0 0 var(--dl-radius-sm) var(--dl-radius-sm);
  background: var(--dl-panel);
  max-height: 320px;
  overflow-y: auto;
  box-shadow: var(--dl-shadow-lg);
}
.search-result-item {
  padding: 0.55rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--dl-rule);
  transition: background var(--dl-motion) ease;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--dl-panel-2); }
.search-result-item .sponsor-name { font-weight: 500; font-size: var(--dl-fs-base); color: var(--dl-ink-1); }
.search-result-item .trial-count {
  font-size: var(--dl-fs-sm);
  color: var(--dl-ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* === Buttons (DESIGN.md §5; Stage 2 §6.2 .dl-btn): primary = action; everything else is the quiet button === */
/* 2026-10-27 (Paul, trial page review): a button is a 44px flex box (40px compact), label 15px/600 centred,
   horizontal padding only; hover darkens to the action-hover token, pressed one step past it, a 2px
   outline ring on focus-visible, 120ms on the colour (base.css zeroes it under prefers-reduced-motion).
   C2b step 2 (2026-11-02): Bootstrap's .btn* became .dl-btn --primary/--quiet/--danger/--link/--sm,
   .dl-btn-group (JS pagers), `disabled` class -> `is-disabled`; the shell's 36px variant is in shell.css. */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dl-space-2);
  height: 44px; padding: 0 18px; line-height: 1;
  font-family: var(--dl-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--dl-radius-sm);
  background: none; color: inherit;
  text-decoration: none; text-align: center; cursor: pointer; user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dl-btn:hover, .dl-btn:focus, .dl-btn:active, .dl-btn:visited { text-decoration: none; }
.dl-btn:focus-visible { outline: 2px solid var(--dl-action); outline-offset: 2px; box-shadow: none; }
.dl-btn--primary {
  background: var(--dl-action);
  border-color: var(--dl-action);
  color: var(--dl-on-action);
}
.dl-btn--primary:hover, .dl-btn--primary:focus {
  background: var(--dl-action-hover);
  border-color: var(--dl-action-hover);
  color: var(--dl-on-action);
}
.dl-btn--primary:active {
  background: color-mix(in srgb, var(--dl-action-hover) 85%, black);
  border-color: color-mix(in srgb, var(--dl-action-hover) 85%, black);
  color: var(--dl-on-action);
}
/* DESIGN.md §5: disabled is 50% opacity, no colour change */
.dl-btn--primary:disabled, .dl-btn--primary.is-disabled {
  background: var(--dl-action);
  border-color: var(--dl-action);
  color: var(--dl-on-action);
  opacity: .5;
}
.dl-btn--quiet {
  background: var(--dl-panel);
  color: var(--dl-ink-1);
  border-color: var(--dl-rule-strong);
}
.dl-btn--quiet:hover, .dl-btn--quiet:focus {
  background: var(--dl-panel-2);
  border-color: var(--dl-rule-strong);
  color: var(--dl-ink-1);
}
.dl-btn--danger { background: var(--dl-panel); color: var(--dl-critical-ink); border-color: var(--dl-rule-strong); }
.dl-btn--danger:hover { background: var(--dl-critical-tint); color: var(--dl-critical-ink); border-color: var(--dl-rule-strong); }
.dl-btn:disabled, .dl-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.dl-btn--sm { height: 40px; padding: 0 14px; font-size: var(--dl-fs-sm); }
.dl-btn--link { font-weight: 400; text-decoration: none; color: var(--dl-link); }
.dl-btn--link:hover { color: var(--dl-link-hover); }
/* The pagers: joined compact buttons (what Bootstrap's .btn-group.btn-group-sm drew). */
.dl-btn-group { display: inline-flex; vertical-align: middle; }
.dl-btn-group .dl-btn { height: 36px; padding: 0 12px; font-size: var(--dl-fs-sm); }
.dl-btn-group > .dl-btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dl-btn-group > .dl-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* === Spinner (was Bootstrap .spinner-border.spinner-border-sm; C2b step 4) === */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: var(--dl-text-secondary);
  font-size: var(--dl-fs-base);
}
.dl-spinner {
  display: inline-block; width: 1rem; height: 1rem; vertical-align: -0.125em;
  border: 0.2em solid currentcolor; border-right-color: transparent; border-radius: 50%;
  animation: dl-spin 0.75s linear infinite;
}
@keyframes dl-spin { to { transform: rotate(360deg); } }

/* === Tabs (the disease and sponsor pages' hand-rolled tab bar; was Bootstrap .nav-tabs) === */
.dl-tabs { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; border-bottom: 1px solid var(--dl-border); }
.dl-tabs__tab {
  display: block;
  color: var(--dl-text-secondary);
  font-weight: 500;
  font-size: var(--dl-fs-base);
  padding: 0.55rem 1rem;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dl-transition), border-color var(--dl-transition);
  margin-bottom: -1px;
}
.dl-tabs__tab:hover {
  color: var(--dl-text);
  border-bottom-color: var(--dl-rule-strong);
}
.dl-tabs__tab.is-active {
  color: var(--dl-text);
  font-weight: 600;
  border-bottom: 2px solid var(--dl-action);
  background: transparent;
}

/* === Breadcrumb (was Bootstrap .breadcrumb) === */
.dl-crumbs { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; font-size: var(--dl-fs-base); }
.dl-crumbs__item + .dl-crumbs__item { padding-left: 0.5rem; }
.dl-crumbs__item + .dl-crumbs__item::before { float: left; padding-right: 0.5rem; color: var(--dl-ink-3); content: "/"; }
.dl-crumbs__item a { color: var(--dl-text-secondary); text-decoration: none; }
.dl-crumbs__item a:hover { color: var(--dl-blue); }
.dl-crumbs__item.is-current { color: var(--dl-text); font-weight: 500; }

/* === Form Controls (Stage 2 §6.2 .dl-input / .dl-select) === */
/* C2b step 3 (2026-11-02): .form-control -> .dl-input (--sm, --lg), .form-select -> .dl-select (--sm),
   .form-label -> .dl-label, .input-group -> .dl-input-group. The box model (block, 100% wide,
   .375rem/.75rem padding, line-height 1.5) and the select chevron are what Bootstrap drew; the
   chevron is ink-2 instead of Bootstrap's gray. The shell's 36px search box overrides this in shell.css. */
.dl-input, .dl-select {
  display: block; width: 100%;
  padding: 0.375rem 0.75rem;
  line-height: 1.5; font-weight: 400;
  appearance: none; background-clip: padding-box;
  background-color: var(--dl-panel);
  font-family: var(--dl-font-sans);
  font-size: var(--dl-fs-base);
  border: 1px solid var(--dl-rule-strong);
  border-radius: var(--dl-radius-sm);
  color: var(--dl-ink-1);
  transition: border-color var(--dl-transition), box-shadow var(--dl-transition);
}
.dl-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2344423a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px;
}
.dl-input::placeholder { color: var(--dl-ink-3); opacity: 1; }
.dl-input:focus, .dl-select:focus {
  outline: 0;
  border-color: var(--dl-link);
  box-shadow: var(--dl-focus-ring);
}
.dl-input:disabled, .dl-select:disabled { background-color: var(--dl-panel-2); }
.dl-input--sm { padding: 0.25rem 0.5rem; }
.dl-input--lg { padding: 0.5rem 1rem; }
.dl-select--sm { font-size: var(--dl-fs-sm); padding: 0.3rem 1.75rem 0.3rem 0.6rem; }
.dl-label { display: inline-block; margin-bottom: 0.5rem; font-size: var(--dl-fs-base); font-weight: 500; color: var(--dl-text); }
/* A field and its button joined (the sign-in dialog). */
.dl-input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.dl-input-group > .dl-input, .dl-input-group > .dl-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.dl-input-group > .dl-input:focus { z-index: 5; }
.dl-input-group > .dl-btn { position: relative; z-index: 2; }
.dl-input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dl-input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* === Callouts (was Bootstrap .alert; the inline load-error and sent-link messages) === */
.dl-callout { position: relative; padding: 1rem; margin-bottom: 1rem; border: 1px solid transparent; font-size: var(--dl-fs-base); border-radius: var(--dl-radius-sm); }
.dl-callout--warning { background: var(--dl-notable-tint); border-color: var(--dl-notable-tint); color: var(--dl-notable-ink); }
.dl-callout--danger { background: var(--dl-critical-tint); border-color: var(--dl-critical-tint); color: var(--dl-critical-ink); }
.dl-callout--success { background: var(--dl-action-tint); border-color: var(--dl-action-tint); color: var(--dl-action-ink); }
.dl-callout--info { background: var(--dl-panel-2); border-color: var(--dl-rule); color: var(--dl-ink-1); }

/* === Menu (Pipeline Pulse's share menu; was Bootstrap .dropdown-menu, toggled by the page's JS) === */
.dl-menu {
  position: absolute; z-index: 1000; min-width: 10rem; margin: 0; padding: 0.35rem 0; list-style: none; text-align: left;
  background: var(--dl-panel); color: var(--dl-ink-1);
  font-size: var(--dl-fs-base);
  border: 1px solid var(--dl-rule);
  border-radius: var(--dl-radius-sm);
  box-shadow: var(--dl-shadow-md);
}
.dl-menu__item { display: block; width: 100%; padding: 0.4rem 0.85rem; clear: both; font-weight: 400; font-size: var(--dl-fs-base); color: inherit; text-align: inherit; text-decoration: none; white-space: nowrap; background: transparent; border: 0; }
.dl-menu__item:hover { background: var(--dl-gray-50); }

/* === Responsive Tightening === LAST in this file on purpose: these override the
   unconditional .hero/.dl-table/.dl-report-card__body rules above, so they must come after them
   in cascade order (same specificity). */
@media (max-width: 768px) {
  .dl-table { font-size: var(--dl-fs-sm); }
  .dl-table thead th { padding: 0.5rem 0.6rem; }
  .dl-table tbody td { padding: 0.45rem 0.6rem; }
  .dl-report-card__body { padding: 0.6rem 0; }
}

/* Sign-up intent line on entity pages (plan step 6, 2026-09-29): one line under the header.
   Neutral panel (Paul, 2026-09-29, chose this over an in-header or bare-line placement from
   rendered mockups; the head's green band is gone since 2026-10-25). The buttons carry the colour. */
.dl-intent-bar { border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm); background: var(--dl-panel); padding: 10px 14px; margin: 12px 0 4px; font-size: var(--dl-fs-base); line-height: 1.5; }
.dl-intent-bar .dl-btn { margin-left: 6px; }

/* Example state on an empty At Risk / Completions page (2026-10-24): one sentence above the
   sample sponsor's real rows. A section lead, not a callout: no band, no icon. */
.dl-sample-note { margin: 0 0 12px; font-size: var(--dl-fs-base); color: var(--dl-ink-2); max-width: 68ch; }
.dl-sample-note strong { color: var(--dl-ink-1); }

/* "You watch: X" on an At Risk row (2026-10-24): the watchlist item that flagged the trial, as
   labelled text in the meta line, not an uppercase tag. */
.dl-via { color: var(--dl-ink-2); white-space: nowrap; }

/* === Home components (redesign 2026-10-25): the section-card, tabs, the change row, the side row. Partials:
   _feed_card.html, _side_card.html, _change_row.html, _status_pill.html. A .dl-card is a DESIGN.md §5
   SECTION (2px action rule, title on the rule line, no box, no shadow); .dl-card--boxed is the one
   bounded surface, the hero's example change (border, no shadow). Rows are one link each. === */
.dl-card { border-top: 2px solid var(--dl-action); padding-top: 8px; margin: 0 0 32px; }
.dl-card--boxed { border: 1px solid var(--dl-rule); border-radius: var(--dl-radius-lg); background: var(--dl-panel); padding: 0 16px; }
.dl-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 0 0 8px; border-bottom: 1px solid var(--dl-rule); }
.dl-card__title { font-size: var(--dl-fs-md); font-weight: 600; margin: 0; }
.dl-card__link { font-size: var(--dl-fs-base); font-weight: 500; white-space: nowrap; }
.dl-card__body { padding: 12px 0; margin: 0; font-size: var(--dl-fs-base); line-height: 1.5; }
.dl-card__body > :last-child { margin-bottom: 0; }
.dl-card__foot { padding: 10px 0; border-top: 1px solid var(--dl-rule); font-size: var(--dl-fs-base); }
.dl-card__foot a { font-weight: 500; }
/* The "Show:" level filter (Paul, 2026-10-28): text links on the list pages, tab buttons on the guest card. */
.dl-show { display: flex; flex-wrap: wrap; align-items: baseline; font-size: var(--dl-fs-base); color: var(--dl-ink-3); }
.dl-show__label { margin-right: .5em; }
.dl-show .dl-sep { padding: 0 .5em; }
.dl-show a, .dl-show button { padding: 0; border: 0; background: none; font: inherit; color: var(--dl-ink-2); text-decoration: none; cursor: pointer; }
.dl-show a:hover, .dl-show button:hover { color: var(--dl-ink-1); text-decoration: underline; }
.dl-show a[aria-current="page"], .dl-show button[aria-selected="true"] { color: var(--dl-ink-1); font-weight: 600; }
.dl-show button:focus-visible { outline: none; box-shadow: var(--dl-focus-ring); }
.dl-show__n { font-variant-numeric: tabular-nums; }
.dl-show__i { white-space: nowrap; }   /* the separator rides with the link BEFORE it (Paul, 2026-10-28): a wrapped row breaks after the dot, like row meta */
.dl-rows { list-style: none; margin: 0; padding: 0; }
.dl-rows__item + .dl-rows__item { border-top: 1px solid var(--dl-rule); }
.dl-change, .dl-side { display: grid; gap: 2px; padding: 12px 0; color: inherit; text-decoration: none; }
/* Narrow: the date ends the meta line (Paul 2026-10-26); the square hangs in the left margin (below). */
.dl-change { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "what what" "meta date"; column-gap: 16px; align-items: baseline; }
.dl-side { padding: 10px 0; font-size: var(--dl-fs-base); }
.dl-side__title { font-weight: 500; color: var(--dl-ink-1); overflow-wrap: anywhere; }
.dl-change:hover, .dl-side:hover { background: var(--dl-panel-2); color: inherit; text-decoration: none; }
.dl-change:hover .dl-change__name, .dl-side:hover .dl-side__title { text-decoration: underline; }
.dl-change__title { grid-area: title; display: flex; align-items: baseline; gap: 8px; font-size: var(--dl-fs-md); font-weight: 500; line-height: 1.4; color: var(--dl-ink-1); overflow-wrap: anywhere; }
/* The square hangs in the left margin (Paul, 2026-10-28): the title, the change line and the meta share one
   left edge with the H1. 18px from the row top centres it on the title's first line; 12px into the phone gutter. */
.dl-change__title .dl-mark { position: absolute; left: -16px; top: 18px; }
/* Below 640px the square sits inside the content padding (Paul, 2026-10-28): the row indents 16px for it,
   so nothing touches the screen edge. */
@media (max-width: 639.98px) { .dl-change { padding-left: 16px; } .dl-change__title .dl-mark { left: 0; } }
/* Inside a boxed card the square sits within the padding (Paul, 2026-10-28): the row indents 16px and the
   square takes that column, so the title, the change line and the meta still share one edge. */
.dl-card--boxed .dl-change { padding-left: 16px; }
.dl-card--boxed .dl-change__title .dl-mark { left: 0; }
.dl-new { margin-left: 6px; font-size: var(--dl-fs-sm); font-weight: 600; color: var(--dl-action-ink); white-space: nowrap; }
.dl-change__what { grid-area: what; font-size: var(--dl-fs-base); line-height: 1.5; color: var(--dl-ink-1); overflow-wrap: anywhere; }
.dl-change__meta, .dl-change__date, .dl-side__sub, .dl-side__right { font-size: var(--dl-fs-sm); line-height: 1.45; color: var(--dl-ink-3); }
/* Inline flow, not flex (reviewer, 2026-10-28): a wrapped line never starts with the separator dot. The
   dot is glued to the value before it; the zero-width space after it is the only break opportunity. */
.dl-change__meta { grid-area: meta; display: block; }
.dl-change__meta .dl-sep { padding: 0 .35em; white-space: nowrap; }
.dl-change__meta .dl-sep::after, .dl-watch__meta .dl-sep::after { content: "\200B"; }
.dl-change__meta .dl-nct { font-family: var(--dl-font-mono); white-space: nowrap; }
.dl-change__date, .dl-side__right { white-space: nowrap; }
.dl-change__date { grid-area: date; }
@media (min-width: 640px) { .dl-change { grid-template-areas: "title date" "what what" "meta meta"; align-items: start; } .dl-change__date { padding-top: 3px; } }
.dl-side--split { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.dl-side--split .dl-side__sub { grid-column: 1 / -1; }
.dl-side__sub--warn { color: var(--dl-notable-ink); }

/* === Shared by the home card and /changes (redesign 2026-10-25). The home page's own rules (hero,
   blurbs, CTA band, browse row) live in index.html's page style block, per DESIGN.md. === */
.dl-card__caption { font-size: var(--dl-fs-sm); color: var(--dl-ink-3); }
.dl-card__tabs { padding: 8px 0; border-bottom: 1px solid var(--dl-rule); }

/* The index table (/browse/diseases and /browse/sponsors, _index_table.html, 2026-10-29): name, changes in
   the last 30 days, trials; sortable headers as links; on a phone the two numbers sit under the name. */
.dl-index { width: 100%; border-collapse: collapse; font-size: var(--dl-fs-base); }
.dl-index th, .dl-index td { padding: 9px 0; border-bottom: 1px solid var(--dl-rule); text-align: left; vertical-align: baseline; }
.dl-index th { font-weight: 500; color: var(--dl-ink-3); }
.dl-index th a { color: inherit; text-decoration: none; }
.dl-index th a:hover, .dl-index th a[aria-current] { color: var(--dl-ink-1); }
.dl-index th a[aria-current] { font-weight: 600; }
.dl-index .dl-num { text-align: right; font-variant-numeric: tabular-nums; width: 11em; padding-left: 16px; white-space: nowrap; }
.dl-index__name a { color: var(--dl-link); font-weight: 500; overflow-wrap: anywhere; }
.dl-index tbody tr[data-href] { cursor: pointer; }
.dl-index tbody tr[data-href]:hover { background: var(--dl-panel-2); }
.dl-index__dir { font-size: var(--dl-fs-xs); margin-left: 4px; vertical-align: middle; }
.dl-index__note { font-size: var(--dl-fs-sm); color: var(--dl-ink-3); margin-left: 8px; white-space: nowrap; }
@media (max-width: 639.98px) {
  .dl-index thead { display: none; }
  .dl-index tr { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 8px 0; border-bottom: 1px solid var(--dl-rule); }
  .dl-index td { display: block; border: 0; padding: 0; width: auto; }
  .dl-index__name { flex-basis: 100%; }
  .dl-index td.dl-num { text-align: left; font-size: var(--dl-fs-sm); color: var(--dl-ink-3); }
  .dl-index td.dl-num:empty { display: none; }
  .dl-index td.dl-num::before { content: attr(data-th) " "; }
}
/* The disease index's category list. */
.dl-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--dl-fs-base); }
.dl-cat-list small { white-space: nowrap; color: var(--dl-ink-3); margin-left: 5px; }
/* A count on a page tab (the sponsor index's types); on a phone the row scrolls sideways, no bar. */
.dl-page-tabs .dl-show__n { margin-left: .35em; font-weight: 400; color: var(--dl-ink-3); }
@media (max-width: 639.98px) { .dl-page-tabs .dl-show__n { display: none; } }  /* three labels fit a phone; the counts do not */
}

/* ==== docket.css ==== */
@layer components {
/* DataLookout dashboard -- section + docket ledger primitives (DESIGN.md §5). Needs tokens.css. */
/* === Section + docket ledger primitives (DESIGN.md §5) — consumed by Phase 3.2+ === */
.dl-section { border-top: 2px solid var(--dl-action); padding-top: 12px; margin-top: 32px; }
.dl-section > h2, .dl-section-title { font-size: var(--dl-fs-md); font-weight: 600; margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dl-section-title small, .dl-section > h2 small { font-weight: 400; font-size: var(--dl-fs-sm); color: var(--dl-ink-3); }
.dl-docket .dl-row {
  display: grid;
  grid-template-columns: 96px 22px 1fr;
  column-gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--dl-rule);
  align-items: baseline;
}
.dl-docket .dl-row:hover { background: var(--dl-panel-2); }
/* The level key under a ledger heading (Stage 4 A4): the docket's own marks, secondary ink. */
.dl-level-key { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 2px; font-size: var(--dl-fs-base); line-height: 1.55; color: var(--dl-ink-2); }
.dl-level-key li { display: grid; grid-template-columns: 20px 1fr; align-items: baseline; }
.dl-level-key b { font-weight: 600; color: var(--dl-ink-1); }
/* Severity on the row itself: the lead label takes the severity ink
   and a 3px rule in the mark colour runs down the row's left edge. Minor rows stay ink-only. */
.dl-docket .dl-row:has(.dl-mark.critical) { box-shadow: inset 3px 0 0 var(--dl-critical); }
.dl-docket .dl-row:has(.dl-mark.notable)  { box-shadow: inset 3px 0 0 var(--dl-notable); }
.dl-docket .dl-date { font-family: var(--dl-font-mono); font-size: var(--dl-fs-sm); color: var(--dl-ink-3); text-align: right; white-space: nowrap; }
/* A DataLookout detection inside a merged ledger row (trial.html #ssrAmendmentLedger, step
   7b). Takes the body column; on a detection-only row (no signal headline),
   so the first .dl-change auto-places beside the date. The severity ink moves to the
   detection's label, and a version header sitting above our detections stays plain ink
   (equal specificity, later source order wins over the :has(.dl-mark.*) rules above). */
.dl-docket .dl-change { grid-column: 3; font-size: var(--dl-fs-base); min-width: 0; }
/* Descendant, not child: a folded long redline puts the label inside <details><summary>. */
.dl-docket .dl-change .dl-label { font-weight: 500; }
.dl-docket .dl-row:has(.dl-mark.critical) .dl-change .dl-label { color: var(--dl-critical-ink); }
.dl-docket .dl-row:has(.dl-mark.notable)  .dl-change .dl-label { color: var(--dl-notable-ink); }
/* THE FOLD (trial.html #ssrAmendmentLedger, 2026-09-30): one closed line standing for a run of
   version-only rows, drawn like a docket row (same rule, same ink as a version tag) with the
   long-field caret; the folded .dl-row elements sit inside and keep their own rules. */
.dl-docket .dl-fold > summary { cursor: pointer; list-style: none; padding: 9px 0; border-bottom: 1px solid var(--dl-rule); font-size: var(--dl-fs-base); color: var(--dl-ink-3); }
.dl-docket .dl-fold > summary::-webkit-details-marker { display: none; }
.dl-docket .dl-fold > summary::before { content: "\25b8"; color: var(--dl-ink-mute); margin-right: 6px; display: inline-block; }
.dl-docket .dl-fold[open] > summary::before { transform: rotate(90deg); }
.dl-docket .dl-fold > summary:hover { background: var(--dl-panel-2); }
@media (max-width: 640px) {
  .dl-docket .dl-row { grid-template-columns: 22px 1fr; }
  .dl-docket .dl-date { grid-column: 1 / -1; text-align: left; margin-bottom: 2px; }
  .dl-docket .dl-change { grid-column: 2; }
}

/* THE SWEEP LINE (2026-10-07): one row standing for a day's batch of the registry's
   "status -> Unknown" auto-flags (the SSR demos print it from change_group.collapse_registry_sweeps;
   the JS twin dlRenderRegistrySweep was deleted 2026-10-17 with the Weekly Report). Drawn like .dl-fold: the
   sentence is the summary, the caret is the affordance, and the individually labelled
   member rows sit inside as ordinary docket rows, indented so they read as the batch's
   contents rather than as more feed. Minor ink throughout -- the whole point of the line
   is that a reader can skip it. */
.dl-docket .dl-sweep-details > summary { cursor: pointer; list-style: none; }
.dl-docket .dl-sweep-details > summary::-webkit-details-marker { display: none; }
.dl-docket .dl-sweep-details > summary::before { content: "\25b8"; color: var(--dl-ink-mute); margin-right: 6px; display: inline-block; }
.dl-docket .dl-sweep-details[open] > summary::before { transform: rotate(90deg); }
.dl-docket .dl-sweep-members { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--dl-rule-strong); }
.dl-docket .dl-sweep-members .dl-row:last-child { border-bottom: 0; }
}

/* ==== shell.css ==== */
@layer components {
/* DataLookout dashboard -- shell (stage-4 plan C2, 2026-10-24): skip link, guest top bar, signed-in
   sidebar + main grid, phone bar + drawer, page head. Needs tokens.css. Ported from the Stage 2
   gallery (docs/archive/redesign-v2/stage2/gallery/components-v2.css) onto the live token names.
   Decisions (Paul, 2026-10-24): sidebar fixed at --dl-sidebar-w, no collapse; text-only items. */

/* === Skip link: first focusable, visible on focus === */
.dl-skip {
  position: absolute; top: -100px; left: var(--dl-space-3); z-index: 2000;
  padding: var(--dl-space-2) var(--dl-space-3);
  background: var(--dl-panel); color: var(--dl-ink-1);
  border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm);
  font-weight: 600; text-decoration: none;
}
.dl-skip:focus { top: var(--dl-space-2); }

.dl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* === Top bar (guest bar and the signed-in phone bar share it) === */
.dl-topline { height: 3px; background: var(--dl-brand-mark); }
.dl-bar {
  background: var(--dl-panel);
  border-bottom: 1px solid var(--dl-rule);
  position: relative; z-index: 1050;
}
.dl-bar__inner { display: flex; align-items: center; gap: var(--dl-space-3); min-height: var(--dl-bar-h); }
.dl-wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--dl-ink-1); font-weight: 600; font-size: var(--dl-fs-md); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.dl-wordmark:hover { color: var(--dl-ink-1); text-decoration: none; }
.dl-wordmark img { width: 22px; height: 22px; }
.dl-bar__nav { display: none; }
.dl-bar__nav ul { display: flex; list-style: none; gap: var(--dl-space-1); margin: 0; padding: 0; }
.dl-bar__nav a { display: inline-flex; align-items: center; min-height: var(--dl-target-min); padding: 0 var(--dl-space-3); color: var(--dl-ink-2); text-decoration: none; white-space: nowrap; }
.dl-bar__nav a:hover { color: var(--dl-ink-1); text-decoration: underline; text-decoration-color: var(--dl-action); }
.dl-bar__nav a[aria-current="page"] { color: var(--dl-ink-1); box-shadow: inset 0 -2px 0 var(--dl-action); }
/* State rules carry two classes so they beat the generic .dl-search / .dl-btn display rules below
   (the Stage 2 gallery lost this cascade once: two search icons, a crushed field). */
.dl-bar .dl-bar__search { flex: 1 1 auto; min-width: 0; display: none; }
.dl-bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--dl-space-2); }
.dl-bar__end .dl-btn, .dl-bar__end a { white-space: nowrap; flex-shrink: 0; }
.dl-bar .dl-bar__signin { display: none; }
@media (min-width: 768px) {
  .dl-bar .dl-bar__search { display: flex; max-width: 440px; }
  .dl-bar .dl-bar__signin { display: inline-flex; }
  .dl-bar .dl-bar__search-toggle { display: none; }
  /* /search: the bar's box is the query box here, so the page's own box steps aside (search_results.html). */
  body:has(header.dl-bar .dl-bar__search) .dl-search-page__box { display: none; }
}
@media (min-width: 1024px) { .dl-bar__nav { display: block; } .dl-bar .dl-bar__menu { display: none; } }
@media (max-width: 359.98px) { .dl-bar .dl-wordmark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.dl-bar__search-row { padding: 0 0 var(--dl-space-3); }
.dl-bar__search-row[hidden] { display: none; }

/* Search form inside a bar */
.dl-search { display: flex; gap: var(--dl-space-2); align-items: center; width: 100%; margin: 0; }
.dl-search .dl-input {
  flex: 1 1 auto; width: auto; min-width: 0; height: 36px; padding: 0 var(--dl-space-3);
  background: var(--dl-panel); color: var(--dl-ink-1);
  border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm);
  font: inherit; font-size: var(--dl-fs-base);
}
.dl-search .dl-input::placeholder { color: var(--dl-ink-3); }
.dl-search .dl-input:focus { outline: none; box-shadow: var(--dl-focus-ring); border-color: var(--dl-action); }

/* Shell buttons: .dl-btn is defined in components.css (C2b step 2, 2026-11-02; it carried the base rule
   from the C2a shell until then). The bar, the drawer heads, the dialog head and the server-rendered
   pagers (_changes_list.html pager macro) keep the 36px/500 look Paul reviewed on 2026-10-25; page
   buttons are 44px/600 (2026-10-27). */
.dl-bar .dl-btn, .dl-drawer__head .dl-btn, .dl-dialog__head .dl-btn, .dl-pager .dl-btn {
  height: auto; min-height: 36px; padding: 0 var(--dl-space-3);
  font-size: var(--dl-fs-base); font-weight: 500; line-height: 1.25;
}
.dl-btn--icon, .dl-bar .dl-btn--icon, .dl-drawer__head .dl-btn--icon, .dl-dialog__head .dl-btn--icon { width: 36px; padding: 0; }
.dl-btn--icon svg { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* === Footer (DESIGN.md §5): paper, rule above. Here, not base.css, since CSS step 3: `footer .dl-wordmark`
   must share a layer with `.dl-wordmark` above to outrank it. === */
footer {
  background: var(--dl-canvas);
  color: var(--dl-ink-3);
  padding: 1.25rem 0 1.5rem;
  margin-top: 3rem;
  font-size: var(--dl-fs-sm);
  border-top: 1px solid var(--dl-rule);
  letter-spacing: 0;
}
footer a { color: var(--dl-ink-2); text-decoration: none; transition: color var(--dl-transition); }
footer a:hover { color: var(--dl-ink-1); text-decoration: underline; }
footer .dl-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
footer .dl-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 1rem; }
@media (max-width: 480px) {
  footer .dl-footer-row { flex-direction: column; align-items: flex-start; }
  footer .dl-footer-links { justify-content: flex-start; }
}
footer .dl-wordmark { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: var(--dl-fs-base); font-weight: 600; color: var(--dl-ink-1); }
footer .dl-wordmark:hover { text-decoration: none; }
footer .dl-fineprint { margin-top: 10px; font-size: var(--dl-fs-xs); color: var(--dl-ink-3); text-align: center; }

/* === Signed-in app shell: sidebar + main. Below 1024px the sidebar lives in the drawer. === */
.dl-app { display: block; }
.dl-app__side { display: none; }
.dl-app__main { min-width: 0; }
@media (min-width: 1024px) {
  .dl-app { display: grid; grid-template-columns: var(--dl-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
  .dl-app__side {
    /* --dl-consent-h: the open cookie bar's height (consent.js), so the foot stays above it. */
    display: block; position: sticky; top: 0; align-self: start; height: calc(100vh - var(--dl-consent-h, 0px)); overflow-y: auto;
    /* Thin scrollbar (Paul, 2026-10-28, item 9, wanted none; the later `thin` rule had won since, and Chrome hides it
       via ::-webkit-scrollbar below). The sunken surface: see the sidebar-surface note further down. */
    scrollbar-width: thin;
    background: var(--dl-surface-sidebar); border-right: 1px solid var(--dl-rule-strong); border-top: 3px solid var(--dl-brand-mark);
  }
  .dl-app__phonebar { display: none; }
  /* /search: the sidebar's box is the query box here, so the page's own box steps aside. */
  .dl-app .dl-search-page__box { display: none; }
}

/* Sidebar (inside .dl-app__side and inside the drawer) */
.dl-sidebar { display: flex; flex-direction: column; gap: var(--dl-space-4); padding: var(--dl-space-4) var(--dl-space-3); min-height: 100%; }
/* Groups: 24px apart (items stay 44px tall, 0 apart), and a hairline rule above each group label
   so the boundary is explicit (Paul, 2026-10-24; the GitHub and Stripe sidebars in the reference
   captures both do this). */
.dl-sidebar nav { display: flex; flex-direction: column; gap: var(--dl-space-5); flex: 1 1 auto; }
.dl-sidebar ul { list-style: none; margin: 0; padding: 0; }
/* Group labels (Paul, 2026-10-24: "Explore is too similar to everything else"): small, tracked,
   uppercase, muted, the pattern Stripe, Polaris and Tailwind use for sidebar groups in the 10-24
   reference captures. A nav group label is not a page eyebrow (the 10-13 tell); the tells lint
   allow-lists this one selector. One declaration (it was layered four times; /code-review 2026-10-25). */
.dl-sidebar__label { display: block; padding: var(--dl-space-3) var(--dl-space-3) var(--dl-space-2); margin: 0; border-top: 1px solid var(--dl-rule-strong); color: var(--dl-ink-3); font-size: var(--dl-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.dl-sidebar a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2);
  min-height: var(--dl-target-min); padding: 0 var(--dl-space-3); border-radius: var(--dl-radius-sm);
  color: var(--dl-ink-1); text-decoration: none;
}
.dl-sidebar a:hover { background: var(--dl-surface-sidebar-hover); color: var(--dl-ink-1); text-decoration: none; }
.dl-sidebar a.dl-wordmark { justify-content: flex-start; margin-bottom: var(--dl-space-2); }
.dl-sidebar a.dl-wordmark:hover { background: none; }
/* Selected row: raised paper plus the 3px green bar and 600 weight, no tinted box (one treatment,
   used once; the sidebar surface note below). */
.dl-sidebar a[aria-current="page"] { background: var(--dl-panel); box-shadow: inset 3px 0 0 var(--dl-action); font-weight: 600; }
.dl-sidebar__plan { color: var(--dl-ink-3); font-size: var(--dl-fs-sm); font-weight: 400; }
.dl-sidebar__foot { margin: auto 0 0; border-top: 1px solid var(--dl-rule-strong); padding-top: var(--dl-space-3); }
.dl-sidebar__foot form { margin: 0; }
.dl-sidebar__foot button {
  display: flex; align-items: center; width: 100%; min-height: var(--dl-target-min); padding: 0 var(--dl-space-3);
  background: none; border: 0; border-radius: var(--dl-radius-sm); color: var(--dl-ink-2); font: inherit; text-align: left; cursor: pointer;
}
.dl-sidebar__foot button:hover { background: var(--dl-surface-sidebar-hover); color: var(--dl-ink-1); }

/* Mobile drawer: a modal <dialog>; showModal() makes the page behind inert and moves focus in. */
.dl-drawer {
  margin: 0; padding: 0; border: 0; height: 100%; max-height: 100%; width: min(320px, 88vw);
  background: var(--dl-surface-sidebar); color: var(--dl-ink-1); box-shadow: var(--dl-shadow-lg);
}
/* The head takes its own height; the sidebar fills the rest and scrolls, so the foot (Account,
   Sign out / Sign in) stays reachable on an 844px phone instead of sitting below the dialog. */
.dl-drawer[open] { display: flex; flex-direction: column; animation: dl-drawer-in var(--dl-transition); }
.dl-drawer .dl-sidebar { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* stylelint-disable-next-line function-disallowed-list -- ::backdrop: no var() pre-2024 */
.dl-drawer::backdrop { background: rgba(30, 29, 25, .45); }
@keyframes dl-drawer-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.dl-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--dl-space-2) var(--dl-space-3); border-bottom: 1px solid var(--dl-rule); background: var(--dl-panel); color: var(--dl-ink-3); font-size: var(--dl-fs-sm); }

/* Centred dialog (C2b step 1, 2026-11-02): the guest sign-in prompt on the disease and sponsor pages,
   a native <dialog> wired by shell.js ([data-dialog] opener, [data-close] button). Stage 2 §6.2 .dl-dialog. */
.dl-dialog {
  padding: 0; border: 1px solid var(--dl-rule); border-radius: var(--dl-radius-sm); width: min(440px, 92vw);
  background: var(--dl-panel); color: var(--dl-ink-1); box-shadow: var(--dl-shadow-lg);
}
/* stylelint-disable-next-line function-disallowed-list */
.dl-dialog::backdrop { background: rgba(30, 29, 25, .45); }
.dl-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2); padding: var(--dl-space-3) var(--dl-space-3) var(--dl-space-2); }
.dl-dialog__title { margin: 0; font-size: var(--dl-fs-lg); font-weight: 600; color: var(--dl-ink-1); }
.dl-dialog__body { padding: 0 var(--dl-space-3) var(--dl-space-3); }
.dl-dialog__body p { color: var(--dl-ink-3); }

/* The page container (from utilities.css, CSS step 3: the gutter rule below must outrank it in one layer). Bootstrap's widths, kept so no page moves (max 1320px at >= 1400px). */
.container { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Progressive enhancements (Baseline checked 2026-10-24 against web-features + caniuse; both
   degrade silently where unsupported): balanced headline wrapping, and a stable scrollbar gutter
   so the layout does not shift between pages that scroll and pages that do not. */
h1 { text-wrap: balance; }
html { scrollbar-gutter: stable; }

/* === Page head (addendum row 2): breadcrumb, h1, at most one primary action === */
/* Every page's top offset, once (Paul, 2026-10-28, item 4): the home page's 20px, on the first container. */
#main > .container:first-child { padding-top: 20px; }
/* The first container carried Bootstrap's mt-4 (zeroed here with !important) until CSS step 3 (2026-11-06); the
   templates no longer put it there. */
/* A floor on the main column's side gutter beside the sidebar (Paul, 2026-10-29: "the red squares are too
   close to the edge"). The severity square hangs 16px into the margin (deb6981e); Bootstrap's .container
   pads only 12px once it runs full width, which it does whenever the main column (viewport minus 240px)
   is narrower than the breakpoint's cap: 1296px against 1320px on a 1536px screen. The square then sat
   on the sidebar's border. 32px keeps it 16px clear at every width; wider viewports still centre. */
@media (min-width: 1024px) { .dl-app__main .container { padding-left: 32px; padding-right: 32px; } }
.dl-app aside::-webkit-scrollbar { display: none; }
/* ONE page head (reviewer, 2026-10-28): the H1, its subline and their spacing are the same on every page. */
.dl-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 16px; }
.dl-page-head .dl-page-title { margin: 0 0 4px; }
.dl-page-head__sub { margin: 0; font-size: var(--dl-fs-base); }
.dl-page-head h1 { margin: 0; font-size: var(--dl-fs-xxl); line-height: 1.2; }

/* === Hierarchy pass (Paul, 2026-10-24: "everything is in the same font and color"). Two steps, no
   decoration: primary items 500 weight ink-1; Explore items 400 ink-2 on 40px rows; a free user's
   gated items read in ink-3 with the "Pro" mark in the action colour; the selected item is the 3px
   bar plus 600 weight, no tinted box (one treatment, used once). === */
.dl-sidebar .dl-sidebar__primary a { font-weight: 500; }
.dl-sidebar .dl-sidebar__secondary a { min-height: 40px; color: var(--dl-ink-2); }
.dl-sidebar a.is-gated { color: var(--dl-ink-3); }
.dl-sidebar a.is-gated:hover { color: var(--dl-ink-1); }
.dl-sidebar__pro { color: var(--dl-action); font-size: var(--dl-fs-xs); font-weight: 600; letter-spacing: 0.04em; }
.dl-sidebar .dl-wordmark { font-size: var(--dl-fs-md); }
.dl-sidebar__foot a.dl-sidebar__upgrade { min-height: 36px; color: var(--dl-action); font-weight: 500; }
.dl-sidebar__foot a.dl-sidebar__upgrade:hover { color: var(--dl-action-hover); background: none; text-decoration: underline; }

/* === Sidebar surface (Paul, 2026-10-24: "super plain with just a white background"). The reference
   tally (docs/redesign-v2/stage4/sidebar-references-2026-10-24.md) shows 0 of 11 professional
   sidebars use a gradient; the two with presence (Polaris, Carbon) make one column a visible
   PANEL. So: the sidebar is a sunken warm panel one step below the canvas, the selected row is
   raised paper with the green bar, the search field stays paper. Contrast on #ece9e0, measured:
   ink-1 13.9:1, ink-2 8.3:1, ink-3 4.7:1, action 5.2:1 (all >= 4.5:1). The values live in the rules
   above since CSS step 4 (2026-11-06); this block was seven re-declarations of them. === */

/* Sidebar search: the "/" hint sits INSIDE the field so the placeholder gets the full 216px
   ("Search trials, sponsors, diseases" was clipped beside the old "/" badge at 240px). */
.dl-sidebar__search { position: relative; }
.dl-sidebar__search .dl-input { width: 100%; font-size: var(--dl-fs-sm); }
/* The "/" shortcut still focuses the box (shell.js); its badge was dropped 2026-10-25 (Paul). */
.dl-app__side .dl-sidebar__search .dl-input { padding: 0 10px; font-size: var(--dl-fs-xs); }
}

/* ==== utilities.css ==== */
@layer utilities {
/* DataLookout dashboard -- utilities (C2b step 5, 2026-11-02). Needs tokens.css.
   The Bootstrap utility classes the templates and JS still use, by the same names (Paul, 2026-11-02:
   "own small utility sheet, same names"), with Bootstrap's `!important` semantics and its spacing scale
   (1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem); colours map to tokens. Add a class here
   only when a template needs it; the set is the measured one, not the framework's. */

/* Spacing */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }

/* Layout */
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: 0.5rem !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-baseline { vertical-align: baseline !important; }
.w-100 { width: 100% !important; }
.position-relative { position: relative !important; }

/* Text */
.text-center { text-align: center !important; }
.text-muted { color: var(--dl-ink-3) !important; }
.text-dark { color: var(--dl-ink-1) !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-medium { font-weight: 500 !important; }
.fs-5 { font-size: 1.25rem !important; }
.h3 { font-size: calc(1.3rem + 0.6vw); }
@media (min-width: 1200px) { .h3 { font-size: 1.75rem; } }

/* Surfaces */
.bg-warning { background-color: var(--dl-notable-tint) !important; }

/* Accessibility */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
}