/* Illustrative screening matrix, adapted from the OnTrial conference pamphlet. */
.trial-example{ background:var(--white); border-bottom:1px solid var(--hair); }
.trial-example h2{ max-width:25ch; font-size:clamp(28px,3.4vw,40px); font-weight:800; }
.trial-example__lede{ max-width:72ch; margin:20px 0 32px; color:var(--ink-2); }
.trial-example__figure{ margin:0; padding:clamp(20px,3vw,36px); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.trial-example__grid{ display:grid; grid-template-columns:minmax(0,2.2fr) minmax(240px,1fr); gap:32px; align-items:start; }
.trial-example__grid > *{ min-width:0; }
.trial-example h3{ font-family:inherit; font-size:16px; line-height:1.4; font-weight:600; letter-spacing:0; margin:0 0 16px; }
.trial-example__scroll{ max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.trial-example__scroll:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.trial-matrix{ width:100%; min-width:560px; border-collapse:collapse; table-layout:fixed; font-size:13px; line-height:1.3; }
.trial-matrix colgroup:first-child col{ width:154px; }
.trial-matrix .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.trial-matrix thead th{ padding:0 2px 7px; color:var(--ink-2); font-weight:500; text-align:left; border-bottom:1px solid var(--hair); }
.trial-matrix tbody th{ padding:5px 4px 5px 0; font-weight:600; text-align:left; white-space:nowrap; }
.trial-matrix tr > th:first-child{ position:sticky; left:0; z-index:1; background:var(--white); }
.trial-matrix__patient{ display:flex; align-items:center; gap:6px; }
.trial-matrix__patient svg{ width:14px; height:14px; flex:none; color:var(--ink-3); }
.trial-matrix__subtype{ margin-left:auto; padding-right:6px; color:var(--ink-3); font-weight:400; }
.trial-matrix td{ padding:4px 0; text-align:center; }
.trial-mark{ display:inline-block; width:16px; height:16px; border:2px solid var(--accent); border-radius:4px; vertical-align:middle; flex:none; }
.trial-mark--filtered{ width:6px; height:6px; margin:5px; border:0; border-radius:50%; background:#B4BFD6; }
.trial-mark--partial{ background:linear-gradient(135deg,var(--accent) 50%,transparent 50%); }
.trial-mark--likely{ background:var(--accent); }
.trial-example__legend{ display:flex; flex-wrap:wrap; gap:12px 18px; margin:18px 0 0; padding:0; list-style:none; font-size:13px; line-height:1.4; }
.trial-example__legend li{ display:flex; align-items:center; gap:6px; }
.trial-example__scroll-hint{ display:none; font-size:12px; color:var(--ink-3); margin:8px 0 0; }
.trial-funnel{ margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:13px; line-height:1.35; }
.trial-funnel li{ display:grid; grid-template-columns:106px minmax(0,1fr); align-items:center; gap:12px; min-height:38px; }
.trial-funnel__track{ display:flex; justify-content:center; }
.trial-funnel__bar{ display:flex; align-items:center; justify-content:center; width:var(--bar-width); min-width:28px; height:34px; border-radius:4px; background:var(--bar-color); color:var(--navy); font-weight:700; font-variant-numeric:tabular-nums; }
.trial-funnel li:last-child .trial-funnel__bar{ color:var(--white); }
.trial-funnel__reason{ display:flex; gap:5px; min-width:0; overflow-wrap:anywhere; }
.trial-funnel__reason b{ flex:none; color:var(--navy); }
.trial-example__review{ margin:16px 0 10px; font-size:13px; }
.trial-example__outcomes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.trial-example__outcome{ padding:12px 10px; border:1px solid var(--hair); border-radius:var(--r-md); font-size:13px; line-height:1.4; }
.trial-example__outcome--likely{ border-color:var(--accent); }
.trial-example__outcome b{ display:flex; align-items:center; gap:6px; margin-bottom:5px; font-size:26px; line-height:1; }
.trial-example__outcome--likely b{ color:var(--accent); }
.trial-example__ineligible{ margin:8px 0 0; color:var(--ink-3); font-size:13px; }
.trial-example__caption{ margin-top:24px; padding-top:18px; border-top:1px solid var(--hair); font-size:14px; color:var(--ink-2); }
.trial-example__caption strong{ color:var(--navy); }
@media(max-width:1050px){
  .trial-example__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .trial-example__summary{ max-width:440px; }
}
@media(max-width:640px){
  .trial-example__figure{ padding:20px 16px; }
  .trial-example__scroll-hint{ display:block; }
  .trial-example__legend{ gap:12px; }
  .trial-example h3{ overflow-wrap:anywhere; }
  .trial-matrix{ min-width:480px; font-size:12px; }
  .trial-matrix colgroup:first-child col{ width:136px; }
  .trial-matrix__patient{ gap:4px; }
  .trial-matrix__patient svg{ width:12px; height:12px; }
  .trial-matrix .trial-mark{ width:14px; height:14px; border-radius:3px; }
  .trial-matrix .trial-mark--filtered{ width:5px; height:5px; margin:4.5px; border-radius:50%; }
  .trial-example__legend{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); font-size:12px; }
  .trial-example__legend li{ min-width:0; align-items:flex-start; }
  .trial-example__legend .trial-mark{ margin-top:1px; }
  .trial-example__legend .trial-mark--filtered{ margin:6px; }
  .trial-funnel li{ grid-template-columns:90px minmax(0,1fr); gap:10px; }
}