/* DataLookout dashboard -- /trial/{nct} only. Loaded after the shared sheets. */
/* Track-trial control (free individual-trial tracking). Sits above the trial header,
 outside #trialContent (D1) -- one row on desktop, stacks on mobile. Deliberately not
 .d-flex: this container's children are never toggled via inline style="display:none"
 (bug-patterns.md "Bootstrap" -- .d-flex's !important would defeat that), so a plain
 grid is used instead. */
.dl-track {
border: 1px solid var(--dl-rule-strong); border-radius: var(--dl-radius-sm);
background: var(--dl-panel); padding: 14px 16px; margin: 0 0 20px;
display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 8px; align-items: center;
}
.dl-track-lead { grid-column: 1; grid-row: 1; margin: 0; font-size: .875rem; line-height: 1.55; color: var(--dl-ink-2); max-width: 640px; }
#trackTrial > .btn { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
.dl-track-msg { grid-column: 1 / -1; grid-row: 2; font-size: .8125rem; color: var(--dl-ink-2); }
.dl-track-msg:empty { display: none; }
@media (max-width: 640px) {
.dl-track { grid-template-columns: 1fr; }
.dl-track-lead { grid-column: 1; grid-row: 1; }
#trackTrial > .btn { grid-column: 1; grid-row: 2; justify-self: start; }
.dl-track-msg { grid-row: 3; }
}

/* Trial header (DESIGN.md §1, §5) */
.dl-trial-head { margin-bottom: 8px; }
.dl-trial-title { margin: 0 0 12px; max-width: 920px; }
.dl-acronym { font-size: .875rem; color: var(--dl-ink-3); margin: -6px 0 10px; }
.dl-acronym span { font-weight: 500; color: var(--dl-ink-1); }
.dl-facts { display: flex; flex-wrap: wrap; gap: 6px 36px; font-size: .875rem; margin-bottom: 10px; }
.dl-facts b { display: block; font-weight: 400; font-size: .75rem; color: var(--dl-ink-3); letter-spacing: .04em; text-transform: uppercase; }
.dl-facts > div > span, .dl-facts > div > a { font-weight: 500; }
.dl-mono { font-family: var(--dl-font-mono); font-weight: 400 !important; }
.dl-ctgov-link { font-size: .8125rem; }
.dl-facts-table { font-size: .875rem; }
.dl-facts-table td { padding: .3rem 0 !important; border: 0 !important; }
.dl-facts-table td.text-muted { color: var(--dl-ink-3) !important; }

/* Callouts (staleness, why stopped): tint + ink, no side stripe (DESIGN.md §5 Card) */
.dl-callout { border-radius: var(--dl-radius-sm); padding: 10px 14px; margin: 16px 0; font-size: .875rem; line-height: 1.5; }
.dl-callout-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }
.dl-callout.notable  { background: var(--dl-notable-tint);  color: var(--dl-notable-ink); }
.dl-callout.critical { background: var(--dl-critical-tint); color: var(--dl-critical-ink); }

/* Collapsed summary */
.dl-details { border-top: 1px solid var(--dl-rule); margin: 16px 0 0; }
.dl-details + .dl-section { margin-top: 20px; }
/* The disclosure reads as a control: link-coloured verb, chevron that turns, hover tint. A
   bare "+ Summary" is not obviously clickable. */
.dl-details summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: .9375rem; list-style: none; display: flex; align-items: baseline; gap: 10px; color: var(--dl-link); }
.dl-details summary:hover { color: var(--dl-link-hover); text-decoration: underline; }
.dl-details summary::-webkit-details-marker { display: none; }
.dl-details summary::before { content: '\25B8'; font-family: var(--dl-font-sans); color: var(--dl-link); width: 12px; display: inline-block; transition: transform var(--dl-motion-fast); }
.dl-details[open] summary::before { transform: rotate(90deg); }
.dl-details summary .dl-details-verb::after { content: 'Show summary'; }
.dl-details[open] summary .dl-details-verb::after { content: 'Hide summary'; }
/* Measured at a 1440px viewport: 76ch rendered 574px of text under a 1296px section
   rule, so the paragraph read as a stray narrow column rather than a deliberate measure.
   Pinned to .dl-trial-title's 920px -- an edge already on this page -- so the header and
   the summary line up instead of introducing a third width. Deliberately NOT the full
   section width: that would be ~172ch per line. */
.dl-details-body { font-size: .875rem; line-height: 1.6; padding: 0 0 14px 22px; max-width: 920px; color: var(--dl-ink-2); }
.dl-section-lead { font-size: .875rem; color: var(--dl-ink-2); margin: 6px 0 4px; }
.dl-section-note { font-size: .8125rem; color: var(--dl-ink-3); margin: 0 0 10px; }

/* Redline: was / now, word-level <del>/<ins> from the one server-side producer (text_diff) */
.dl-redline { grid-column: 3; display: grid; grid-template-columns: 34px 1fr; gap: 3px 10px; margin-top: 4px; font-size: .8125rem; line-height: 1.5; max-width: 76ch; }
.dl-redline .diff-side { display: contents; }
.dl-redline .diff-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dl-ink-3); padding-top: 2px; }
.dl-redline .diff-old .diff-value { color: var(--dl-ink-3); }
.dl-redline .diff-new .diff-value { color: var(--dl-ink-1); }
/* Redline words (Paul, 2026-09-29, option B): removed words grey strikethrough, added words
   bold. The same rule the ClinicalTrials.gov record uses (docket.css .dl-amend-redline), so
   the two ledgers mark a change identically. The red/amber tints that stood here read as
   verdicts; DESIGN.md keeps those colours for severity, never emphasis. */
.diff-value del { text-decoration: line-through; text-decoration-color: var(--dl-ink-mute); color: var(--dl-ink-3); }
.diff-value ins { text-decoration: none; font-weight: 600; color: var(--dl-ink-1); }

/* Rich sections (endpoints, arms, locations) */
.dl-endpoint { margin-bottom: 10px; padding-left: 12px; border-left: 2px solid var(--dl-rule-strong); }
.dl-endpoint.primary { border-left-color: var(--dl-ink-1); }
.dl-endpoint .m { font-size: .875rem; font-weight: 500; }
.dl-endpoint .t { font-size: .78rem; color: var(--dl-ink-3); }
.dl-arm { margin-bottom: 8px; padding: 6px 0; border-bottom: 1px solid var(--dl-rule); font-size: .84rem; }
.dl-arm:last-child { border-bottom: 0; }
.dl-arm .type { font-size: .72rem; color: var(--dl-ink-3); margin-left: 6px; }
.dl-arm .desc { font-size: .8rem; color: var(--dl-ink-3); margin-top: 2px; }
@media (max-width: 640px) {
.dl-trial-title { font-size: 1.375rem; }
/* docket.css collapses .dl-row to `mark | body`; the diff blocks follow the body into column 2 */
.dl-redline { grid-column: 2; }
.dl-redline { grid-template-columns: 1fr; }
.dl-redline .diff-label { padding-top: 6px; }
}
.dl-pill { font-size: .75rem; color: var(--dl-ink-2); border: 1px solid var(--dl-rule-strong); padding: 1px 7px; border-radius: var(--dl-radius-sm); }

/* Plan step 7 (2026-09-29): the risk line and the context strip, between the change
   ledger and the summary. Both renderers emit the same classes. */
.dl-risk { border-radius: var(--dl-radius-sm); padding: 10px 14px; margin: 16px 0 4px; font-size: .875rem; line-height: 1.5; }
.dl-risk.flagged { background: var(--dl-notable-tint); color: var(--dl-notable-ink); }
.dl-risk-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }
.dl-risk-signal { margin-top: 2px; }
.dl-risk-head { font-weight: 600; color: var(--dl-ink-1); }
.dl-risk-raw { color: var(--dl-ink-3); font-size: .8125rem; margin-left: 6px; white-space: nowrap; }
.dl-risk-link { display: inline-block; margin-top: 6px; font-size: .8125rem; }
.dl-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.dl-context-item { border: 1px solid var(--dl-rule); border-radius: var(--dl-radius-sm); padding: 10px 12px; display: grid; gap: 4px; align-content: start; }
.dl-context-name { font-size: .9375rem; font-weight: 600; }
.dl-context-name a { color: var(--dl-ink-1); }
.dl-context-counts { font-size: .8125rem; color: var(--dl-ink-3); }
.dl-context-link { font-size: .875rem; font-weight: 500; margin-top: 2px; }
.dl-context-more { grid-column: 1 / -1; font-size: .8125rem; color: var(--dl-ink-3); }
@media (max-width: 640px) {
.dl-context { grid-template-columns: 1fr; }
.dl-risk-raw { white-space: normal; margin-left: 0; display: block; }
}