  /* ---- trials page: the four ROLES carry the page; each has one colour, used everywhere ---- */
  .tr .role-assay-evaluation{--ro:var(--s1)} .tr .role-assay-guided{--ro:var(--s5)}
  .tr .role-eligibility-selection{--ro:var(--s3)} .tr .role-correlative{--ro:var(--s2)}
  .tr .stats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  .tr a.stat{color:inherit;text-decoration:none;border-top:4px solid var(--ro);}
  .tr a.stat:hover .v{text-decoration:underline;text-decoration-color:var(--ro);}
  .tr a.stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .tr .stat .v{color:var(--ro);}
  .tr .stat .asks{font-family:var(--serif);font-size:14px;color:var(--ink);margin:2px 0 8px;}
  .tr .stat .sub b{color:var(--ink);font-variant-numeric:tabular-nums;}
  .tr .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--secondary);margin:0 0 12px;}
  .tr .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--ro);margin-right:6px;vertical-align:-1px;}
  .tr .chartwrap svg{width:100%;height:auto;}
  .tr .seg-a{cursor:pointer;} .tr .seg-a:hover rect{filter:brightness(1.1);}
  .tr .seg-a:focus-visible rect{stroke:var(--ink);stroke-width:1.5;}
  .tr .small3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  @media (max-width:820px){.tr .small3{grid-template-columns:1fr;}}
  .tr .small3 .card h3{font-size:15px;}
  .tr .rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media (max-width:760px){.tr .rolegrid{grid-template-columns:1fr;}}
  .tr .rolegrid .card h3{display:flex;align-items:center;gap:8px;}
  .tr .rolegrid .card h3 i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--ro);}
  /* colour lives HERE, never inline on the fill: an inline `background` also resets background-image,
     which silently switched the site bar treatment off for the country, state and sponsor charts */
  .tr .bar .fill{background:var(--ro, var(--accent));}
  /* hover on the stacked year columns: the trial type under the pointer stays, the others step back */
  #reg a.seg-a{transition:opacity .18s ease;}
  #reg:has(a.role-assay-evaluation:hover) a.seg-a:not(.role-assay-evaluation),
  #reg:has(a.role-assay-guided:hover) a.seg-a:not(.role-assay-guided),
  #reg:has(a.role-eligibility-selection:hover) a.seg-a:not(.role-eligibility-selection),
  #reg:has(a.role-correlative:hover) a.seg-a:not(.role-correlative){opacity:.3;}
  @media (prefers-reduced-motion:reduce){#reg a.seg-a{transition:none;}}
  .tr .bar .track,.tr .bar .fill{display:block;}   /* spans: an inline fill has no height */
  .tr .bar .lab{width:auto;}
  .tr .bar{grid-template-columns:150px 1fr auto;}
  .tr .grid2 .bar{grid-template-columns:120px 1fr auto;}
  .tr .grid2 .card h3{margin-bottom:10px;}
  .tr table td.n{text-align:right;font-variant-numeric:tabular-nums;}
  .tr table td.n a{color:var(--ink);font-weight:600;}
  .tr table td.n a:hover{color:var(--accent);}
  .tr table th.ro{color:var(--ro);}
  .tr .foot-note{font-size:12.5px;color:var(--muted);margin:10px 0 0;}
  /* ---- registry drift section (drift_presentation_design.md F1-F5); registry-only, free (DP1) ---- */
  .tr .dr-card{margin-top:18px;}
  .tr .dr-card .dr-copy{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 16px;max-width:76ch;}
  .tr .dr-card > .note{margin:14px 0 0;max-width:76ch;}
  .tr .dr-card .tablewrap{margin-top:16px;}
  .tr .dr-take{margin:0;padding-left:22px;max-width:76ch;}
  .tr .dr-take li{margin:0 0 12px;}
  .tr .dr-take li:last-child{margin-bottom:0;}
  .tr .dr-take .dr-copy{margin:0;}
  .tr .dr-wide .bar{grid-template-columns:260px 1fr auto;}
  @media (max-width:640px){.tr .dr-wide .bar{grid-template-columns:130px 1fr auto;}}
  .tr .dr-grid h4{margin:0 0 6px;font-size:14px;}
  .tr .dr-grid .cap{font-size:12.5px;color:var(--secondary);margin:12px 0 8px;}
  .tr .dr-grid .fold{font-size:12.5px;color:var(--muted);margin:8px 0 0;}
  .tr .dr-legend i{background:var(--st);}
  .tr .mv-pushed{--st:var(--s1);} .tr .mv-unchanged{--st:var(--axis);} .tr .mv-earlier{--st:var(--s2);}
  .tr .dr-hatch{stroke:#fff;stroke-width:3;opacity:.75;}
  .tr .dr-legend .mv-flag i{background:repeating-linear-gradient(45deg, var(--s1) 0 3px, rgba(255,255,255,.75) 3px 5px);}
  .tr .dr-seg{fill:#fff;font-size:11px;font-family:var(--sans);font-variant-numeric:tabular-nums;pointer-events:none;}
  .tr .dr-seg.dark{fill:var(--ink);}
  .tr .dr-pct.dark{fill:var(--ink);}
  .tr .axlab.dr-strong{font-weight:600;fill:var(--ink);}
  .tr .dr-pct{fill:var(--secondary);font-size:11px;font-family:var(--sans);font-variant-numeric:tabular-nums;}
  .tr .st-NOT_YET_RECRUITING{--st:color-mix(in srgb, var(--s1) 40%, white);}
  .tr .st-RECRUITING{--st:var(--s1);}
  .tr .st-ENROLLING_BY_INVITATION{--st:color-mix(in srgb, var(--s1) 65%, var(--ink));}
  .tr .st-ACTIVE_NOT_RECRUITING{--st:var(--s5);}
  .tr .st-SUSPENDED{--st:var(--s3);}
  .tr .st-COMPLETED{--st:var(--s2);}
  .tr .st-APPROVED_FOR_MARKETING{--st:var(--s4);}
  .tr .st-TERMINATED{--st:var(--s6);}
  .tr .st-WITHDRAWN{--st:color-mix(in srgb, var(--s6) 45%, white);}
  .tr .st-WITHHELD{--st:var(--axis);}
  .tr .st-UNKNOWN{--st:var(--muted);}
  .tr .st-other{--st:var(--hairline);}

/* bar treatment: depth */
  .bars:not([data-own-color]) .bar:not(.partner) .fill,
  .bars:not([data-own-color]) .bar .bf{background-repeat:no-repeat;
    background-size:calc(100% / var(--frac,1)) 100%;
    background-image:linear-gradient(to right, color-mix(in srgb, var(--accent) 60%, #fff) 0%,
      var(--accent) 48%, color-mix(in srgb, var(--accent) 58%, #0b1f44) 100%);}
  .bars.bs-pre .fill, .bars.bs-pre .bf{clip-path:inset(0 100% 0 0);}
  .bars.bs-in .fill, .bars.bs-in .bf{clip-path:inset(0 0 0 0);
    transition:clip-path .75s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 45ms), filter .12s;}
  .bars .bar{transition:opacity .18s ease;}
  .bars:hover .bar:not(:hover){opacity:.45;}
  .bars .bar .track{transition:background-color .18s ease;}
  .bars .bar .val, .bars .bar .bv{transition:color .18s ease;}
  .bars .bar:hover .track{background-color:var(--accent-soft);}
  .bars .bar:hover .val, .bars .bar:hover .bv{color:var(--accent);}
  .bars .bar:hover .fill, .bars .bar:hover .bf{filter:saturate(1.15);}
  @media (prefers-reduced-motion:reduce){
    .bars .fill, .bars .bf{clip-path:none !important;transition:none !important;}
    .bars .bar, .bars .bar .track, .bars .bar .val, .bars .bar .bv{transition:none !important;}
  }

  .cm-pre{clip-path:inset(0 100% 0 0);}
  .cm-pre[data-reveal="up"]{clip-path:inset(100% 0 0 0);}
  .cm-in{clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.2,.7,.2,1);}
  .heat.cm-pre{clip-path:none;}
  .heat.cm-pre td{opacity:0;}
  .heat.cm-in{clip-path:none;transition:none;}
  .heat.cm-in td{opacity:1;transition:opacity .45s ease calc(var(--cmd,0) * 1ms);}
  /* hover: discrete marks */
  .heat td{transition:opacity .18s ease;}
  .heat.cm-done:hover td[data-drill]:not(:hover){opacity:.5;}
  svg .col{transition:opacity .18s ease;}
  svg:hover .col:not(:hover){opacity:.45;}
  @media (prefers-reduced-motion:reduce){
    .cm-pre, .cm-in{clip-path:none !important;transition:none !important;}
    .heat.cm-pre td, .heat.cm-in td{opacity:1 !important;transition:none !important;}
    .heat td, svg .col{transition:none !important;}
  }
