/* 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: 0.9375rem; 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: 0.78rem; 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); }
/* 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-row:has(.dl-mark.critical) .dl-what > .dl-label:first-child { color: var(--dl-critical-ink); }
.dl-docket .dl-row:has(.dl-mark.notable)  .dl-what > .dl-label:first-child { color: var(--dl-notable-ink); }
.dl-docket .dl-date { font-family: var(--dl-font-mono); font-size: 0.78rem; color: var(--dl-ink-3); text-align: right; white-space: nowrap; }
.dl-docket .dl-what { font-size: 0.84rem; }
.dl-docket .dl-what .dl-label { font-weight: 500; }
/* The change headline is the thing a reader reaches for, so it IS the link to the
   trial. The red is severity ink, never a link colour; the underline on hover/focus
   is the affordance.
   `color: inherit` on purpose: the severity rule above is (0,7,0) against this
   selector's (0,3,1), so a critical/notable first line KEEPS its severity ink, and
   every other line keeps body ink. Appearance is unchanged; only the affordance is
   added. Underline on hover/focus is what signals it. */
.dl-docket .dl-what a.dl-label { color: inherit; text-decoration: none; }
.dl-docket .dl-what a.dl-label:hover,
.dl-docket .dl-what a.dl-label:focus-visible { text-decoration: underline; }
/* ⚠️ BOTH selectors, always. The value spans live in .dl-what on a status row and in
   .dl-field (inside .dl-fields) on an amendment's field rows, and .dl-fields is a
   SIBLING of .dl-what, not a descendant -- so a `.dl-what .dl-from` rule alone leaves
   every field row unstyled: no strike-through, no arrow margin, and because the
   template emits the spans with no whitespace between them, "59→56" run together.
   Adding a declaration here without its .dl-field twin re-opens it. */
.dl-docket .dl-what .dl-from, .dl-docket .dl-field .dl-from { color: var(--dl-ink-3); text-decoration: line-through; text-decoration-color: var(--dl-ink-mute); }
.dl-docket .dl-what .dl-arrow, .dl-docket .dl-field .dl-arrow { color: var(--dl-ink-mute); margin: 0 5px; }
.dl-docket .dl-what .dl-to, .dl-docket .dl-field .dl-to { font-weight: 500; }
.dl-docket .dl-what .dl-version { font-family: var(--dl-font-mono); font-size: 0.75rem; color: var(--dl-ink-mute); margin-left: 10px; }
/* The ClinicalTrials.gov section names an amendment touched ("Study Status,
   Outcome Measures"). Secondary to the row's label and any status move, so it
   reads as context rather than as the change itself. */
.dl-docket .dl-what .dl-sections { color: var(--dl-ink-3); }
/* Field-level before -> after under one amendment. Column 3 like
   .dl-meta/.dl-why, so the values hang under the row's label rather than beside the
   date. Rendered by BOTH /trial renderers (trial.html SSR + trial.js) from amendment_fields.build_field_changes
   — the strings are composed server-side and printed verbatim, so nothing here may
   depend on which renderer produced the markup. */
.dl-docket .dl-fields { grid-column: 3; margin: 5px 0 0; display: grid; gap: 2px; }
.dl-docket .dl-field { font-size: 0.8125rem; color: var(--dl-ink-2); }
.dl-docket .dl-field .dl-field-label { color: var(--dl-ink-3); margin-right: 8px; }
/* "Re-verified, no change to tracked fields" — deliberately the quietest thing in the
   docket. It exists so a reader can SKIP the row, so it must not compete with the
   rows that did move. */
.dl-docket .dl-field.dl-no-change { color: var(--dl-ink-3); font-style: italic; }
/* A DataLookout detection inside a merged ledger row (trial.html #ssrAmendmentLedger, step
   7b). Takes the body column like .dl-fields; on a detection-only row there is no .dl-what,
   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: 0.84rem; 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-change .dl-longfield > summary .dl-label { margin-right: 8px; }
.dl-docket .dl-change .dl-longfield { font-size: inherit; }
.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); }
.dl-docket .dl-row:has(.dl-change .dl-label) .dl-what > .dl-label:first-child { color: var(--dl-ink-1); }
/* 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: 0.84rem; 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); }
/* Long-text rows: name + magnitude, with the redline behind a <details> so a 6,000
   character criteria block never lands in the row. Closed by default -- the row's job
   is to say WHAT moved and by how much; the text is for the reader who asks. */
.dl-docket .dl-longfield { font-size: 0.8125rem; color: var(--dl-ink-2); }
.dl-docket .dl-longfield > summary { cursor: pointer; list-style: none; }
.dl-docket .dl-longfield > summary::-webkit-details-marker { display: none; }
.dl-docket .dl-longfield > summary::before { content: "\25b8"; color: var(--dl-ink-mute); margin-right: 6px; display: inline-block; }
.dl-docket .dl-longfield[open] > summary::before { transform: rotate(90deg); }
.dl-docket .dl-longfield .dl-field-label { color: var(--dl-ink-3); margin-right: 8px; }
.dl-docket .dl-longfield .dl-magnitude { color: var(--dl-ink-2); }
/* ⛔ `dl-amend-redline`, NOT `dl-redline`. `.dl-redline` ALREADY EXISTS in trial.html
   for the Tier-A word-diff row, and it is `display: grid; grid-template-columns:
   34px 1fr` -- so reusing the name turned every <del>/<ins> in this block into its own
   grid item and wrapped the text letter by letter ("Inclus / ion:"). Every DOM
   assertion passed and the text was correct; only the SCREENSHOT showed it, and only
   enumerating the matched rules in the browser found the cause. Check a class name
   against the page's existing CSS before minting it.

   ⚠️ `min-width: 0` and `overflow-wrap: break-word`, NOT `anywhere`. A grid item's
   default `min-width: auto` sizes it from its content's MIN-CONTENT width, and
   `anywhere` makes that ONE CHARACTER -- so the redline rendered as a ~40px column
   wrapping "Inclus / ion:" letter by letter. Caught by screenshotting it, not by any
   assertion: every DOM check passed and the text was correct
   (.claude/rules/bug-patterns.md -- a bounding box cannot see this class). */
.dl-docket .dl-fields { min-width: 0; }
.dl-docket .dl-amend-redline { margin: 5px 0 2px; padding: 7px 10px; border-left: 2px solid var(--dl-rule-strong); background: var(--dl-panel-2); white-space: pre-wrap; overflow-wrap: break-word; font-size: 0.8125rem; line-height: 1.5; max-width: 760px; min-width: 0; }
.dl-docket .dl-amend-redline del { color: var(--dl-ink-3); text-decoration: line-through; text-decoration-color: var(--dl-ink-mute); }
/* No background box on the insert: inside `white-space: pre-wrap` a background spans
   the line's trailing whitespace and renders as an empty slab beside the text. */
.dl-docket .dl-amend-redline ins { text-decoration: none; font-weight: 600; color: var(--dl-ink-1); }
.dl-docket .dl-amend-redline .dl-elided { color: var(--dl-ink-mute); }
/* A passage moved word for word (2026-10-01): plain text with a small tag, never a
   strikethrough or an insert -- it was not removed or added. No background on the text,
   for the pre-wrap slab reason above; the tag alone carries the mark. */
.dl-docket .dl-amend-redline .dl-moved-tag { display: inline-block; font-size: 0.6875rem; line-height: 1.3; color: var(--dl-ink-3); border: 1px solid var(--dl-rule-strong); border-radius: 3px; padding: 0 4px; white-space: nowrap; vertical-align: 1px; }
.dl-docket .dl-meta { grid-column: 3; font-size: 0.78rem; color: var(--dl-ink-3); margin-top: 1px; }
.dl-docket .dl-meta .nct-id { font-size: 0.75rem; margin-right: 8px; }
.dl-docket .dl-meta a { color: var(--dl-ink-2); }
.dl-docket .dl-why { grid-column: 3; margin: 6px 0 0; padding: 6px 10px; border-left: 2px solid var(--dl-rule-strong); color: var(--dl-ink-2); font-size: 0.8125rem; max-width: 760px; }
@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-meta, .dl-docket .dl-why, .dl-docket .dl-fields, .dl-docket .dl-change { grid-column: 2; }
}

/* Docket rows in the demos: several labels stack inside one row */
.dl-docket .dl-what .dl-label ~ .dl-label { font-weight: 400; color: var(--dl-ink-2); }
/* Rows the server already reported as 'done' are collapsed under the toggle by
   default. Rows a user JUST marked done in this session (data-seen="justdone")
   stay visible as the undo affordance -- see dlSeenInit's onDone contract. */
.dl-docket.dl-hide-done [data-seen="done"] { display: none; }