/* Page styles for zahrcast.com, shared by every page. styles.css is the generated token
   layer and is not edited by hand; this file is. */
/* Site tokens the design system does not define. Light values equal what these rules used
   before dark mode; dark values follow the reversed palette. */
:root{--wash:var(--zahr-ink-08);--fill-hover:var(--zahr-ink-hover);--on-fill:var(--zahr-bone);--block-dark:var(--zahr-ink);--code-comment:#5E6675;--code-keyword:#7B3A96;--code-macro:#1D5A9E;--code-symbol:#0B6B66;--code-string:#7E5200;--code-number:#9C3324}
.logo-d{display:none}
@media (prefers-color-scheme:dark){
:root:not([data-color-scheme="light"]){--wash:rgba(246,243,236,.08);--fill-hover:var(--zahr-white);--on-fill:var(--zahr-navy);--block-dark:var(--surface-inverse);--code-comment:#8E97AA;--code-keyword:#D3A2EA;--code-macro:#86B6F2;--code-symbol:#63CCC2;--code-string:#E9BC6C;--code-number:#F2A08D}
:where(:root:not([data-color-scheme="light"])) a{text-decoration-color:var(--border-default)}
:root:not([data-color-scheme="light"]) .logo-l{display:none}
:root:not([data-color-scheme="light"]) .logo-d{display:block}
}
:root[data-color-scheme="dark"]{--wash:rgba(246,243,236,.08);--fill-hover:var(--zahr-white);--on-fill:var(--zahr-navy);--block-dark:var(--surface-inverse);--code-comment:#8E97AA;--code-keyword:#D3A2EA;--code-macro:#86B6F2;--code-symbol:#63CCC2;--code-string:#E9BC6C;--code-number:#F2A08D}
:where(:root[data-color-scheme="dark"]) a{text-decoration-color:var(--border-default)}
:root[data-color-scheme="dark"] .logo-l{display:none}
:root[data-color-scheme="dark"] .logo-d{display:block}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:0;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.theme-toggle:hover{color:var(--text-heading)}
.bar-end{display:flex;align-items:center;gap:var(--space-4)}
/* Lines the icon up with the nav text, which sits 2.7px above the bar's center because .nav a
   has a 2px border and 2px padding below the text. The nav is hidden at 900px and below. */
@media (min-width:901px){.theme-toggle{position:relative;top:-3px}}
html{scroll-behavior:smooth;scroll-padding-top:calc(64px + var(--space-4))}
body{min-height:100vh}
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);height:64px;padding:0 var(--space-8);background:color-mix(in srgb,var(--surface-page) 88%,transparent);backdrop-filter:var(--blur-bar);border-bottom:var(--border-width-rule) solid var(--border-default)}
.mark{display:inline-flex;align-items:center;gap:12px}
.mark b{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:20px;line-height:1;letter-spacing:var(--tracking-wordmark)}
.nav{display:flex;gap:var(--space-6);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:16px;letter-spacing:var(--tracking-display)}
.nav a{color:var(--text-muted);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;transition:var(--transition-control)}
.nav a:hover{color:var(--text-heading)}
.nav a.on{color:var(--text-heading);border-bottom-color:var(--text-heading)}
.nav{align-items:center}
.nav-group{position:relative}
.nav-group>a::after{content:"";display:inline-block;margin-left:6px;vertical-align:3px;border:4px solid transparent;border-top:5px solid currentColor;border-bottom:0}
.nav-menu{position:absolute;top:100%;right:-14px;padding-top:12px;display:none;z-index:40}
.nav-menu>div{display:flex;flex-direction:column;min-width:220px;padding:var(--space-2);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);box-shadow:0 8px 24px color-mix(in srgb,var(--zahr-ink) 12%,transparent)}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:block}
.nav:hover .nav-group:not(:hover) .nav-menu{display:none}
.nav .nav-menu a{padding:8px 12px;border-bottom:0;border-radius:2px;font-size:15px;color:var(--text-body);white-space:nowrap}
.nav .nav-menu a:hover{background:var(--surface-sunken);color:var(--text-heading)}
.nav .nav-menu a.on{color:var(--text-heading);box-shadow:inset 2px 0 0 var(--zahr-amber)}
.wrap{max-width:var(--container-lg);margin:0 auto;padding:0 var(--space-8)}
section{padding:var(--section-y) 0;border-top:var(--border-width-rule) solid var(--border-default)}
section:first-of-type{border-top:0}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);line-height:1}
/* Headings lowercase by default; names and clinical acronyms keep their case. */
.pn{text-transform:none}
.gly{font-family:"Noto Sans Egyptian Hieroglyphs",serif;font-size:24px;line-height:1;color:var(--text-body);margin-right:2px;-webkit-text-stroke:.4px currentColor}
/* Ink is not centered in the em box: measured against Khand caps at 13px, S032
   sits 5.25px low. The offset is that, in em. */
.gly-sia{transform:translateY(-.22em)}
.dot{width:6px;height:6px;border-radius:var(--radius-dot);background:var(--zahr-amber);flex:0 0 auto}
h1{font-size:var(--display-2);line-height:var(--leading-display)}
h2{font-size:var(--display-3)}
h3{font-size:var(--heading-3)}
.lede{font-size:var(--body-lg);color:var(--text-muted);max-width:58ch}
.prose{max-width:var(--measure-prose);display:flex;flex-direction:column;gap:var(--space-4)}
[data-theme="reversed"] .btn{background:var(--zahr-bone);color:var(--zahr-ink);border-color:var(--zahr-bone)}
[data-theme="reversed"] .btn:hover{background:var(--zahr-white);border-color:var(--zahr-white)}
[data-theme="reversed"] .btn.ghost{background:transparent;color:var(--zahr-bone);border-color:var(--zahr-bone-16)}
[data-theme="reversed"] .btn.ghost:hover{background:var(--zahr-bone-16);border-color:var(--zahr-bone)}
[data-theme="reversed"] .gly{color:var(--zahr-bone)}
[data-theme="reversed"] .panel{background:var(--surface-card);border-color:var(--border-default)}
[data-theme="reversed"] a{color:var(--zahr-bone);text-decoration-color:var(--zahr-bone-16)}
[data-theme="reversed"] a:hover{text-decoration-color:var(--zahr-amber)}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 var(--space-5);background:var(--text-body);color:var(--on-fill);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:17px;letter-spacing:var(--tracking-display);border:1px solid var(--text-body);border-radius:var(--radius-sm);text-decoration:none;transition:var(--transition-control)}
.btn:hover{background:var(--fill-hover);border-color:var(--fill-hover)}
.btn.ghost{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--wash);border-color:var(--text-body)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero{padding-top:var(--space-24);padding-bottom:var(--space-24)}
.hero h1{max-width:30ch}
.panel{background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.num{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:44px;line-height:1;letter-spacing:var(--tracking-display)}
.small{font-size:var(--body-sm);color:var(--text-muted);line-height:var(--leading-tight)}
.xs{font-size:var(--body-xs);color:var(--text-muted);line-height:var(--leading-body)}
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-8)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-8);border-top:var(--border-width-rule) solid var(--border-default);padding-top:var(--space-6)}
.step{display:flex;flex-direction:column;gap:var(--space-3)}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-8)}
.stat{display:flex;flex-direction:column;gap:var(--space-2)}
.stat .num{font-size:var(--heading-1)}
.fig{display:flex;flex-direction:column;gap:var(--space-3)}
.fig figure{margin:0;background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;display:flex;justify-content:center;padding:var(--space-6)}
.fig img{display:block;width:100%;height:auto}
.fig figure:has(.slot){padding:0;display:block}
.fig .slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--slot-h,300px);background:var(--surface-sunken);padding:var(--space-6);text-align:center}
.slot .slotname{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-body)}
.slot code{font-size:var(--body-xs);color:var(--text-muted)}
.ms text{font-family:var(--font-display);fill:var(--text-body)}
.ms .st{font-weight:var(--weight-medium);font-size:19px;text-transform:lowercase}
.ms .on-dark{fill:var(--on-fill)}
.ms .box{fill:var(--surface-card);stroke:var(--text-body);stroke-width:1.5}
.ms .box-off{fill:none;stroke:var(--border-strong);stroke-width:1.5;stroke-dasharray:5 4}
.ms .box-dead{fill:var(--text-body);stroke:var(--text-body);stroke-width:1.5}
.ms .arrow{fill:none;stroke:var(--text-muted);stroke-width:1.5}
.ms .dashed{stroke:var(--border-strong);stroke-dasharray:4 4}
.mo .grp{fill:none;stroke:var(--border-strong);stroke-width:1.5;stroke-dasharray:5 4}
.mo .glab{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:15px;text-transform:uppercase;letter-spacing:.14em;fill:var(--text-muted)}
.mo .mt{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:19.5px;text-transform:lowercase;fill:var(--text-body)}
.mo .lead{font-size:21.5px}
.mo .msub{font-family:var(--font-body);font-size:16px;fill:var(--text-muted)}
.mo .box-lead{fill:var(--surface-card);stroke-width:2}
.mo .box-mid{fill:var(--surface-sunken);stroke:var(--border-strong);stroke-width:1.5}
.mo .pill{fill:var(--surface-page);stroke:var(--text-body);stroke-width:1.25}
.mo .pill-dead{fill:var(--text-body)}
.mo .pill-off{fill:none;stroke:var(--border-strong);stroke-dasharray:4 3}
.mo .pt{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:17px;text-transform:lowercase;fill:var(--text-body)}
.mo .pt.on-dark{fill:var(--on-fill)}
.mo .num{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:17px;fill:var(--text-muted)}
.mo .keep{text-transform:none}
.mo .start{fill:var(--text-body)}
.mo .rule{stroke:var(--text-body);stroke-width:2.5}
.trans td:first-child{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:17px;width:2.5em}
.trans .tname{display:block;color:var(--text-heading)}
.trans .tpath{display:block;color:var(--text-muted)}
.cap{font-size:var(--body-sm);line-height:var(--leading-body);max-width:78ch}
/* Math is rendered from LaTeX to inline SVG (MathJax, at authoring time); the SVG sizes in ex and inherits the text color. */
.eq{font-size:1.35rem;text-align:center;color:var(--text-heading);margin:0 0 var(--space-4);overflow-x:auto}
.eq svg,.cap svg{overflow:visible}
/* Emphasis in running text: same typeface, darker ink and an amber highlight (an underline would read as a link). Liter ships one weight, so bold would be synthesized. */
.k,.cap b,.lfo-says b{font-weight:400;color:var(--text-heading);background:linear-gradient(transparent 58%,color-mix(in srgb,var(--zahr-amber) 38%,transparent) 58%);padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.note{font-size:var(--body-sm);color:var(--text-muted);max-width:78ch}
table{width:100%;border-collapse:collapse;font-size:var(--body-sm)}
th,td{text-align:left;padding:var(--space-3) var(--space-4);border-top:var(--border-width-rule) solid var(--border-default)}
th{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
tbody tr:hover{background:var(--wash)}
sup a{text-decoration:none;color:var(--text-muted);font-size:.7em;padding-left:2px}
ol.refs{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--space-2)}
ol.refs li{font-size:var(--body-xs);color:var(--text-muted);line-height:var(--leading-body)}
footer{border-top:var(--border-width-rule) solid var(--border-default);padding:var(--space-12) 0}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-8);align-items:start}
.footgrid .legal{grid-column:1/-1}
/* Text sits in one centered column; figures break out of it on both sides. */
:root{--col:41rem}
.prose,.note,.lfo-top,.hero>div{max-width:var(--col);margin-inline:auto}
.lede,.hero h1{max-width:none}
.fig>.cap{max-width:var(--col);width:100%;align-self:center}
.cols2 .fig>.cap{max-width:none;align-self:stretch}
@media (max-width:900px){.nav{display:none}h1{font-size:var(--display-3)}}
/* Phone menu: a <details> toggle in the header, shown only where .nav is hidden. */
.mnav{display:none}
@media (max-width:900px){.mnav{display:block}}
.mnav summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-sm)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:focus-visible{outline:2px solid var(--zahr-amber);outline-offset:2px}
.mnav summary span,.mnav summary span::before,.mnav summary span::after{display:block;width:20px;height:2px;background:var(--text-heading);position:relative;transition:var(--transition-control)}
.mnav summary span::before,.mnav summary span::after{content:"";position:absolute;left:0}
.mnav summary span::before{top:-6px}
.mnav summary span::after{top:6px}
.mnav[open] summary span{background:transparent}
.mnav[open] summary span::before{top:0;transform:rotate(45deg)}
.mnav[open] summary span::after{top:0;transform:rotate(-45deg)}
.mnav-panel{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;padding:var(--space-4) var(--space-8) var(--space-6);background:var(--surface-page);border-bottom:var(--border-width-rule) solid var(--border-default);box-shadow:0 12px 24px color-mix(in srgb,var(--zahr-ink) 10%,transparent);max-height:calc(100vh - 64px);overflow-y:auto;font-family:var(--font-display);font-weight:var(--weight-medium)}
.mnav-h{margin-top:var(--space-4);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.mnav-h:first-child{margin-top:0}
.mnav-panel a{padding:10px 0 10px var(--space-4);font-size:18px;color:var(--text-body);text-decoration:none;border-left:2px solid transparent}
.mnav-panel a:last-child{margin-top:var(--space-3);padding-left:0;border-top:var(--border-width-rule) solid var(--border-default);border-left:0;padding-top:var(--space-4)}
.mnav-panel a.on{color:var(--text-heading);border-left-color:var(--zahr-amber)}
.mnav-panel a:last-child.on{text-decoration:underline;text-decoration-color:var(--zahr-amber);text-decoration-thickness:2px;text-underline-offset:6px}

.lfo{display:flex;flex-direction:column;gap:var(--space-8)}
.lfo-top{display:flex;flex-direction:column;gap:var(--space-4)}
.lfo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.lfo-seg-k{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.lfo-says{max-width:78ch}
.lfo-ready .lfo-says{display:grid}
.lfo-ready .lfo-says > p{grid-area:1/1}
.lfo-ready .lfo-says > p.lfo-off{visibility:hidden}
.lfo-says p{font-size:var(--body-sm);line-height:var(--leading-body);margin:0}
.lfo-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.lfo-seg button,.lfo-play{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:.08em;color:var(--text-body);background:var(--surface-card);border:0;padding:var(--space-2) var(--space-4);cursor:pointer;min-height:36px}
.lfo-seg button+button{border-left:1px solid var(--border-strong)}
.lfo-seg button:hover{background:var(--surface-sunken)}
.lfo-seg button[aria-pressed="true"]{background:var(--text-body);color:var(--on-fill)}
.lfo-play{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--zahr-amber);border:1px solid var(--zahr-amber-press);border-radius:var(--radius-sm);color:var(--zahr-ink)}
.lfo-play:hover{background:var(--zahr-amber-hover)}
.lfo button:focus-visible,.lfo-overlay:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.lfo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);align-items:start}
@media (max-width:760px){.lfo-grid{grid-template-columns:1fr}}
.lfo-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-default);border:1px solid var(--border-default)}
.lfo-count{background:var(--surface-card);padding:var(--space-4) var(--space-5);border-top:3px solid var(--text-body)}
.lfo-count.fixed{background:var(--surface-sunken);border-top-color:var(--border-strong)}
.lfo-count-k{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size-sm);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.lfo-count-nums{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-8)}
.lfo-count-nums > div{display:flex;flex-direction:column}
.lfo-count-v{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:2.25rem;line-height:1.1;margin-top:var(--space-1)}
.lfo-count.fixed .lfo-count-k,.lfo-count.fixed .lfo-count-v{color:var(--text-muted)}
.lfo-count-u,.lfo-count-s{font-size:var(--body-xs);color:var(--text-muted)}
.lfo-count-u{margin-bottom:var(--space-1)}
.lfo,.cs-thumb,.cov,.pit-x,.pit-shapes{
  --lfo-bg:var(--surface-card);--lfo-text:var(--text-body);--lfo-muted:var(--text-muted);--lfo-shade:var(--surface-sunken);
  --lfo-ribbon:var(--zahr-amber);--lfo-forecast:var(--zahr-amber-press);--lfo-obs:var(--text-body);--lfo-ref:var(--chart-reference);
  --lfo-prior:color-mix(in srgb,var(--text-muted) 15%,transparent)}
/* The chart hue means one thing: the result the trial reported. The accrual panel has no such
   series, so its second line stays neutral rather than borrowing the meaning. */
.lfo.accrual{--lfo-ref:var(--text-muted)}
.lfo-endpoints{display:flex;flex-direction:column;gap:var(--space-3)}
.lfo-endpoints > .cap{max-width:var(--col);width:100%;align-self:center}
.lfo-endpoints > .lfo-legend{margin-top:0;padding-top:0;border-top:0}
figure.lfo-card{margin:0;background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);position:relative;display:block;overflow:visible;padding:var(--space-4) var(--space-4) var(--space-3);min-width:0}
.lfo-card > svg{display:block;width:100%;overflow:visible}
.lfo-card svg text{font-family:var(--font-body)}
.lfo-tick,.lfo-axis{font-size:12px;fill:var(--lfo-muted)}
.lfo-cut,.lfo-group-head{font-family:var(--font-display)!important;font-weight:var(--weight-medium);font-size:12px;text-transform:uppercase;letter-spacing:.12em;fill:var(--lfo-text)}
.lfo-hint{font-size:11px;fill:var(--lfo-muted)}
.lfo-val{font-size:12px;fill:var(--lfo-text)}
.lfo-title-main{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:14px;text-transform:uppercase;letter-spacing:.1em;fill:var(--lfo-text)}
.lfo-title-detail{font-size:12px;fill:var(--lfo-muted)}
.lfo-row-label.lfo-current{fill:var(--lfo-text);font-weight:600}
.lfo-tip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;background:var(--lfo-bg);border:1px solid var(--border-strong);box-shadow:0 6px 18px var(--zahr-ink-08);padding:var(--space-2) var(--space-3);font-size:var(--body-xs)}
.lfo-tip-head{font-family:var(--font-display);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.1em;color:var(--lfo-muted);margin-bottom:var(--space-1)}
.lfo-tip-row{display:grid;grid-template-columns:16px 6ch auto;align-items:center;gap:var(--space-2);line-height:1.7;white-space:nowrap}
.lfo-tip-row b{font-weight:500;color:var(--lfo-text);text-align:right}
.lfo-tip-row span{color:var(--lfo-muted)}
.lfo-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-default);font-size:var(--body-xs);color:var(--lfo-muted)}
.lfo-legend > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lfo-legend svg{width:22px;flex:none;overflow:visible}
#sld-forecasts .lfo-legend > span{white-space:normal}
figure.lfo-card[data-synthetic]::after{content:attr(data-synthetic);position:absolute;bottom:var(--space-3);right:var(--space-4);font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size-sm);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--on-fill);background:var(--text-body);padding:2px 6px;border-radius:var(--radius-sm)}
.lfo-fade{animation:lfo-fade .35s ease-out}
@keyframes lfo-fade{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lfo-fade{animation:none}}
/* Diagnostics page (case-studies/<slug>/diagnostics/): one control row for every chart. */
.dg{gap:var(--space-6)}
.dg-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4) var(--space-6)}
/* The controls stay in view under the header; on a phone they wrap too tall to pin. */
@media (min-width:761px){.dg section{scroll-margin-top:260px}.dg-sticky{position:sticky;top:64px;z-index:20;background:var(--surface-page);padding:var(--space-4) 0;border-bottom:var(--border-width-rule) solid var(--border-default)}}
.dg-sticky .cap{margin:var(--space-3) 0 0}
.dg-group{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.dg-group[hidden]{display:none}
/* The PIT section's own in/out-of-sample control scrolls with the section. */
.dg-controls[hidden]{display:none}
.dg-pit-controls{margin-bottom:var(--space-4)}
.lfo-seg button:disabled{color:var(--text-muted);background:var(--surface-card);cursor:not-allowed}
.dg-check{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--body-sm);min-height:36px}
.dg-check.off{color:var(--text-muted)}
.dg-mature-why{font-size:var(--body-xs)}
.dg-check input:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.dg-legend{margin:0 0 var(--space-4);padding-top:0;border-top:0}
.dg-legend > span[hidden]{display:none}
.dg-pit-note:empty{display:none}
.dg-pit-cap{margin:var(--space-2) 0 0}
.dg .lfo-card{position:relative;margin:0}
.dg-strip text{paint-order:stroke;stroke:var(--lfo-bg);stroke-width:3px;stroke-linejoin:round}
.dg-details{margin-top:var(--space-6)}
/* PIT explainer page (sia/methods/pit/): the example patient and the illustrative shapes. */
.pit-x,.pit-shapes{--pit-early:var(--zahr-amber-press);--pit-tie:var(--chart-reference);--pit-late:color-mix(in srgb,var(--text-muted) 35%,var(--surface-card))}
.pit-card{flex-direction:column;justify-content:flex-start;gap:var(--space-4)}
@media (max-width:600px){.fig .pit-card{padding:var(--space-4)}}
.pit-card svg{display:block;width:100%;max-width:720px;margin-inline:auto;height:auto;overflow:visible}
.pit-controls{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center;font-size:var(--body-sm)}
.pit-controls label{display:inline-flex;gap:var(--space-2);align-items:center}
.pit-controls input[type=range]{width:min(260px,38vw);accent-color:var(--zahr-amber-press)}
.pit-controls input[type=checkbox]{accent-color:var(--zahr-amber-press)}
.pit-controls input:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.pit-mono,.pit-v,.pit-formula{font-family:var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.pit-obs-label{font-size:12px;font-weight:600;fill:var(--text-heading)}
.pit-key{margin:0}
.pit-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.pit-early{background:var(--pit-early)}.pit-tie{background:var(--pit-tie)}.pit-late{background:var(--pit-late)}
.pit-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:var(--space-3)}
.pit-cell{display:grid;gap:2px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-sm);min-width:0}
.pit-k{font-size:var(--body-xs);color:var(--text-muted)}
.pit-v{font-size:17px;color:var(--text-heading)}
.pit-big{border-color:var(--zahr-amber-press)}
.pit-big .pit-v{color:var(--text-accent);font-weight:600}
.pit-formula{font-size:15px;background:var(--surface-sunken);border-left:3px solid var(--zahr-amber);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);overflow-x:auto;white-space:pre-wrap;line-height:1.7}
.pit-shapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:var(--space-6);max-width:var(--col);margin-inline:auto}
.pit-shape{margin:0;display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.pit-shape h3{margin:0;font-size:var(--body-md,1rem)}
.pit-shape svg{display:block;width:100%;height:auto;overflow:visible}
.pit-tablewrap{overflow-x:auto}
.dg-details > summary{cursor:pointer;margin-bottom:var(--space-4)}
/* Reference tables, collapsed by default: small type and tight rows so they stay secondary. */
.dg-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--space-6) var(--space-8);align-items:start}
.dg-tblwrap{overflow:auto;max-height:340px;border-bottom:var(--border-width-rule) solid var(--border-default)}
.dg-tbl thead th{position:sticky;top:0;z-index:1;background:var(--surface-page)}
.dg-tbl{font-size:var(--body-xs);line-height:1.35}
.dg-tbl th,.dg-tbl td{padding:3px var(--space-2)}
.dg-tbl th[scope=col]{font-size:11px}
.dg-tbl td:not(:first-child),.dg-tbl th[scope=col]:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dg-tbl th[scope=rowgroup]{text-align:left;font-size:11px;padding-top:var(--space-3)}
.dg-link{margin-top:var(--space-2)}
.cov-group{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);margin:var(--space-6) 0 var(--space-3)}
.cov-scroll{overflow-x:auto;background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm)}
.cov-band{display:grid}
.cov-band + .cov-band{border-top:var(--border-width) solid var(--border-default)}
.cov-cell{padding:0 var(--space-2);min-width:0}
.cov-cell + .cov-cell{border-left:var(--border-width) solid var(--border-default)}
.cov-head{padding:var(--space-3) 0 var(--space-2)}
.cov-title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:17px;line-height:1.1;text-transform:lowercase;color:var(--lfo-text)}
.cov-sub{font-family:var(--font-display);font-size:13px;color:var(--lfo-muted)}
.cov-bandlab{display:block;font-family:var(--font-display);font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:var(--lfo-muted)}
.cov-cell svg{display:block;overflow:visible}
.cov-cell svg text{font-family:var(--font-display);fill:var(--lfo-text)}
.cov-ax text{font-size:12px;fill:var(--lfo-muted)}
.cov-ax path,.cov-ax line{stroke:var(--border-default)}
.cov-row{fill:transparent}
.cov-row.on{fill:var(--lfo-shade)}
/* Case-study cards on the home and Sia pages: a survival forecast thumbnail and a short list of what each study covers. */
.cs-card{gap:var(--space-4)}
.cs-thumb{margin:0;padding:var(--space-3) 0;border-block:var(--border-width-rule) solid var(--border-default)}
.cs-thumb svg{display:block;overflow:visible}
.cs-thumb-title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:12px;text-transform:uppercase;letter-spacing:.1em;fill:var(--text-body)}
.cs-thumb-arm{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:11px;text-transform:uppercase;letter-spacing:.1em;fill:var(--text-muted)}
.cs-thumb-axis{font-size:11px;fill:var(--text-muted)}
.cs-facts{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);margin:0}
.cs-facts dt{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);padding-top:2px}
.cs-facts dd{margin:0;color:var(--text-body)}
/* References sit in their own light block after the page content, before the contact band. */
.refs-block{padding-block:var(--space-12)}
/* Home "how sia works" illustration: three panels drawn from simulated data (not patient data). */
.pipe{display:block;margin-bottom:var(--space-2);overflow:visible}
.pipe text{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;fill:var(--text-muted)}
.pipe .ax{fill:none;stroke:var(--border-strong);stroke-width:1}
.pipe .fit{fill:none;stroke:var(--text-body);stroke-width:1.75}
.pipe .obs{fill:var(--text-body)}
.pipe .ghost{fill:none;stroke:var(--border-strong);stroke-width:1.25}
.pipe .sim{fill:none;stroke:var(--zahr-amber);stroke-width:1;stroke-opacity:.45}
.pipe .ev{fill:var(--surface-page);stroke:var(--zahr-amber-press);stroke-width:1.25}
.pipe .today{fill:none;stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3}
.pipe .km-a{fill:none;stroke:var(--text-body);stroke-width:1;stroke-opacity:.22}
.pipe .km-b{fill:none;stroke:var(--zahr-amber-press);stroke-width:1;stroke-opacity:.3}
.pipe .md-a{fill:var(--text-body);fill-opacity:.7}
.pipe .md-b{fill:var(--zahr-amber-press);fill-opacity:.8}
.pipe .arm-a{fill:var(--text-body)}
.pipe .arm-b{fill:var(--zahr-amber-press)}
.ticks{margin:0;padding-left:1.1em}
.ticks li{margin-block:var(--space-1)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6);margin-top:var(--space-10);padding:var(--space-6);background:var(--surface-sunken);border-radius:var(--radius-sm)}
.facts>div{display:flex;flex-direction:column;gap:var(--space-2)}
.facts p{margin:0}
/* Sia page use cases and capability catalog. */
.uses>div{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);border-top:var(--border-width-rule) solid var(--border-strong)}
.uses p{margin:0;color:var(--text-muted)}
.catalog{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8)}
.catalog .ticks li{margin-block:var(--space-2)}
/* Sia page model declaration: a collapsed code listing that scrolls sideways rather than widening the page. */
.decl{max-width:var(--col);margin:var(--space-8) auto 0}
.decl>summary{cursor:pointer;font-size:var(--body-sm);color:var(--text-muted)}
.decl pre{margin:var(--space-4) 0 0;padding:var(--space-6);background:var(--surface-sunken);border:var(--border-width-rule) solid var(--border-default);border-radius:var(--radius-sm);overflow-x:auto;font-size:var(--body-xs);line-height:1.5}
.jl-c{color:var(--code-comment);font-style:italic}.jl-k{color:var(--code-keyword)}.jl-m{color:var(--code-macro)}.jl-y{color:var(--code-symbol)}.jl-s{color:var(--code-string)}.jl-n{color:var(--code-number)}.jl-o{color:var(--text-muted)}
/* Sia page inputs -> sia -> outputs flow. Three columns on wide screens, stacked on phones. */
.flow{display:grid;grid-template-columns:1fr 56px minmax(220px,.8fr) 56px 1fr;gap:var(--space-4);align-items:center}
.flow-col{display:flex;flex-direction:column;gap:var(--space-3)}
.flow-item{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm)}
.flow-item b,.flow-core b{display:block;font-family:var(--font-display);font-weight:var(--weight-medium);text-transform:lowercase;color:var(--text-heading);font-size:var(--body-sm)}
.flow-item span,.flow-core li span{display:block;font-size:var(--body-xs,13px);line-height:1.4;color:var(--text-muted)}
.flow-core ol.cont{counter-reset:f 1}
.flow-model{margin-top:var(--space-5);color:var(--text-body)}
.flow-core .flow-model b{color:var(--text-heading);font-size:var(--body-sm)}
.flow-model b .own{display:inline;font-size:inherit;color:var(--text-muted)}
.eyebrow .own{opacity:.7;white-space:nowrap}
.flow-core .eyebrow{flex-wrap:wrap;row-gap:var(--space-1)}
.flow-core .eyebrow .own{flex-basis:100%}
.flow-g{flex:none;width:64px;height:40px;overflow:visible}
.flow-g .g-ax{fill:none;stroke:var(--border-strong);stroke-width:1}
.flow-g .g-line{fill:none;stroke:var(--text-body);stroke-width:1.6}
.flow-g .g-dot,.flow-g .g-dot-a{fill:var(--text-body)}
.flow-g .g-dot-a{fill:var(--zahr-amber-press)}
.flow-g .g-cell{fill:var(--surface-sunken);stroke:var(--border-strong);stroke-width:.75}
.flow-g .g-cell-h{fill:var(--text-body)}
.flow-g .g-x{fill:none;stroke:var(--text-body);stroke-width:1.6}
.flow-g .g-open{fill:var(--surface-card);stroke:var(--text-body);stroke-width:1.4}
.flow-g .g-faint{fill:none;stroke:var(--text-muted);stroke-width:1.3;stroke-opacity:.6}
.flow-g .g-band{fill:var(--zahr-amber);fill-opacity:.3}
.flow-g .g-band-strong{fill:var(--zahr-amber);fill-opacity:.55}
.flow-g .g-amber{fill:none;stroke:var(--zahr-amber-press);stroke-width:1.6}
.flow-g .g-thresh{fill:none;stroke:var(--text-muted);stroke-width:1;stroke-dasharray:2 2}
.flow-core{background:var(--block-dark);color:var(--zahr-bone);border-radius:var(--radius-sm);padding:var(--space-6)}
.flow-core .eyebrow{color:var(--zahr-amber)}
.flow-core ol{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-5);counter-reset:f}
.flow-core li{counter-increment:f;padding-left:1.8em;position:relative}
.flow-core li::before{content:counter(f);position:absolute;left:0;top:0;font-size:var(--body-lg);font-family:var(--font-display);color:var(--zahr-amber)}
.flow-core b{color:var(--zahr-bone);font-size:var(--body-lg)}
.flow-core li span{color:color-mix(in srgb,var(--zahr-bone) 75%,transparent);font-size:var(--body-sm);margin-top:2px}
.flow-arrow{height:3px;margin-right:12px;background:var(--text-muted);position:relative}
.flow-arrow::after{content:"";position:absolute;right:-13px;top:-8.5px;border:10px solid transparent;border-left:14px solid var(--text-muted);border-right:0}
@media (max-width:1040px){
  .flow{grid-template-columns:minmax(0,560px);justify-content:center}
  .flow-arrow{width:3px;height:36px;margin:0 auto 12px}
  .flow-arrow::after{right:auto;left:-8.5px;top:auto;bottom:-13px;border:10px solid transparent;border-top:14px solid var(--text-muted);border-bottom:0}
}
/* Sia page: compact links to the case studies (the full cards live on the home and case-study pages). */
.cs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4)}
.cs-list a{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);text-decoration:none;color:var(--text-body);transition:var(--transition-control)}
.cs-list a:hover{border-color:var(--text-body)}
.cs-list b{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--body-lg);color:var(--text-heading)}
.cs-list a>span:last-child{font-size:var(--body-sm);color:var(--text-muted)}

/* Case-study "on this page": a row in the hero at every width, and a side menu in the margin
   on screens wide enough to hold it beside the 1080px content column. */
.toc-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface-sunken);border-left:3px solid var(--zahr-amber);border-radius:var(--radius-sm);font-family:var(--font-display);font-size:17px;letter-spacing:var(--tracking-display)}
.toc-k{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.toc-row .toc-k{flex-basis:100%;margin-bottom:var(--space-1)}
.toc-row a{font-weight:var(--weight-medium);color:var(--text-heading);text-decoration:none;border-bottom:2px solid var(--zahr-amber);padding-bottom:1px}
.toc-row a::before{content:"\2193\00a0";color:var(--zahr-amber-press)}
/* A link to another page (the diagnostics page) points across, not down. */
.toc-row a.toc-out::before{content:"\2192\00a0"}
.toc-row a:hover{border-color:var(--text-body)}
.toc-side{display:none}
@media (min-width:1400px){
.toc-side{display:block;position:fixed;top:120px;left:calc((100vw - 1080px)/2 - 196px);width:168px;font-family:var(--font-display);font-size:14px;line-height:1.35;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.toc-side.shown{opacity:1;pointer-events:auto}
.toc-side .toc-k{display:block;margin-bottom:var(--space-3)}
.toc-side a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--border-default);color:var(--text-muted);text-decoration:none}
.toc-side a:hover{color:var(--text-body)}
.toc-side a.on{border-left-color:var(--zahr-amber-press);color:var(--text-body);font-weight:var(--weight-medium)}
.toc-side a.toc-out{margin-top:var(--space-3)}
.toc-side a.toc-out::after{content:"\00a0\2192"}
}
section[id],#sld-forecasts,#accrual{scroll-margin-top:88px}