/* UI chrome for the existing research laboratories.
   Plot canvases, SVG contents and third-party component internals are untouched. */
html:has(body.sci-module) { background: var(--sci-bg); }
body.sci-module {
  --brand: #87ead0;
  --brand-deep: #a7f3dd;
  --brand-soft: #173b34;
  --ink: #edf3f7;
  --muted: #a5b6c4;
  --faint: #8aa1b2;
  --line: #293947;
  --paper: #0b141e;
  --white: #121f2b;
  --panel: #121f2b;
  --blue: #88b5ee;
  --cyan: #70d7cf;
  --teal: #75d9bd;
  --violet: #b5a7ed;
  --green: #78d8b2;
  --rose: #eb97aa;
  margin: 0;
  min-width: 320px;
  overflow: auto;
  color: var(--ink);
  background: #0b141e;
  background-image: radial-gradient(ellipse at 50% 0, #163d3a22, transparent 55%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.sci-module .topbar { position: relative; top: auto; z-index: 15; height: auto; min-height: 66px; gap: 16px; padding: 13px 24px; background: #111d28; border-color: var(--line); color: var(--ink); backdrop-filter: none; }
.sci-module .topbar .brand-mark, .sci-module .topbar .brand>span, .sci-module .brand-lockup>.brand-mark { color: var(--sci-mint); background: #203b38; border: 1px solid #416d60; box-shadow: none; border-radius: 8px; width: 37px; height: 37px; font-size: 18px; }
.sci-module .topbar :is(.brand strong, .brand-lockup strong) { font-size: 16px; font-weight: 600; }
.sci-module .topbar :is(.brand small, .brand-lockup small, .brand-lockup>div>span) { color: #9ab0bd; font-size: 12px; line-height: 1.5; }
.sci-module .brand-lockup { min-width: 0; }
.sci-module :is(.command, .icon-command, .icon-button, .quiet-button) { color: #dae8ee; background: #162631; border: 1px solid #354b59; min-height: 40px; font-size: 14px; border-radius: 6px; }
.sci-module :is(.command, .icon-command) b, .sci-module .quiet-button { font-size: 14px; font-weight: 500; }
.sci-module :is(.command, .icon-command, .icon-button, .quiet-button):hover { color: var(--sci-mint); background: #203d35; border-color: #51846e; }
.sci-module :is(.engine, .runtime, .runtime-badge) { color: #b7ccc7; background: #17342b; border-color: #33574b; font-size: 12px; font-weight: 500; }
.sci-module .synthetic-badge { color: #e4c590; border-color: #634f2f; background: #332a1d; font-size: 11px; }
.sci-module :is(.workspace, .workbench, .lab-shell) { grid-template-columns: 264px minmax(0, 1fr) 316px; gap: 0; height: auto; min-height: calc(100vh - 205px); max-width: 1900px; margin: 0 auto; }
.sci-module :is(.query-rail, .evidence-rail, .query-panel, .ledger-panel, .design-panel, .inference-panel, .subject-panel, .inspector, .patient-rail, .state-rail) { min-width: 0; padding: 25px 22px; background: #101b26; color: #e3eef2; overflow: visible; border-color: var(--line); }
.sci-module :is(.analysis-stage, .evidence-stage, .replay-stage) { min-width: 0; padding: 27px 24px; overflow: visible; background-image: none; }
.sci-module :is(.eyebrow, .kicker, .section-label) { color: var(--sci-mint); font-size: 11px; font-weight: 550; line-height: 1.65; letter-spacing: .1em; }
.sci-module :is(.section-heading h1, .section-heading h2, .query-panel h1, .ledger-panel h2, .design-panel h1, .inference-panel h2, .subject-panel h1, .inspector h2) { font-size: 25px; line-height: 1.3; font-weight: 550; letter-spacing: -.02em; margin-top: 7px; }
.sci-module :is(.stage-heading, .stage-header, .stage-head) { display: flex; flex-wrap: wrap; align-items: end; gap: 19px; margin-bottom: 23px; }
.sci-module :is(.stage-heading h2, .stage-header h2, .stage-head h2) { font-size: 27px; line-height: 1.4; font-weight: 550; }
.sci-module :is(.stage-heading p, .stage-header p, .stage-head p, .ledger-head p) { font-size: 14px; line-height: 1.8; color: #a2b5c2; margin-top: 8px; }
.sci-module :is(.research-question, .question, .design-panel>p, .subject-panel>p) { font-size: 14px; font-weight: 500; line-height: 1.9; padding: 16px 0; }
.sci-module .research-question strong { font-size: 14px; font-weight: 500; line-height: 1.9; }
.sci-module :is(.research-question span, .control-label, .center-list-header, .filter-stack label>span, .filters label, .design-panel label, .subject-panel label) { color: #a5bac7; font-size: 13px; font-weight: 500; line-height: 1.6; }
.sci-module :is(.filter-stack select, .filters select, .design-panel select, .subject-panel select) { font-size: 14px; color: #e1eef1; background: #162733; height: 42px; border-color: #354f5b; border-radius: 6px; padding-left: 11px; }
.sci-module :is(.filter-stack, .filters) { gap: 15px; }
.sci-module :is(.filter-stack select, .filters select, .design-panel select, .subject-panel select):focus { outline: 2px solid #87ead096; outline-offset: 2px; }
.sci-module :is(.stage-kpis, .kpis) { border-color: #344b57; background: #13232f; border-radius: 8px; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.sci-module :is(.stage-kpis, .kpis) div { min-width: 90px; flex: 1; padding: 12px 14px; }
.sci-module :is(.stage-kpis, .kpis) strong { font-size: 22px; color: #c4f4e4; font-weight: 550; font-variant-numeric: tabular-nums; }
.sci-module :is(.stage-kpis, .kpis) span { color: #9eb4c1; font-size: 12px; margin-top: 5px; }
.sci-module :is(.viewer-section, .chart-block, .plot-band, .plot-panel, .monitor-panel, .timeline-panel, .window-summary) { border-radius: 8px; border-color: #344b57; box-shadow: 0 8px 26px #00000013; }
.sci-module :is(.viewer-title-row, .block-title, .plot-title) { color: #e5f0f2; background: #172631; min-height: 49px; height: auto; padding: 12px 16px; border-color: #344b57; gap: 8px; flex-wrap: wrap; }
.sci-module :is(.viewer-title-row strong, .block-title strong, .plot-title strong) { font-size: 14px; font-weight: 550; }
.sci-module :is(.viewer-title-row span, .block-title span, .plot-title span) { font-size: 12px; color: #9eb4c1; }
/* Existing visual engines use ink labels on a paper surface. Preserve this contrast. */
.sci-module :is(.viewer-scroll, .chart, .plot-band>div:last-child, .plot-panel>div[id]:not(#cohort-3d), #clock-radar, .subgroups>div, .vitessce-frame) { background: #f6f9fb; color: #162b40; }
.sci-module :is(.secondary-grid, .lower-grid, .plot-grid) { gap: 18px; margin-top: 18px; }
.sci-module :is(.cohort-summary, .estimate-compare, .vital) { background: #142431; border-color: #344956; border-radius: 7px; }
.sci-module .cohort-summary strong { font-size: 19px; font-weight: 550; }
.sci-module :is(.cohort-summary span, .cohort-summary small) { font-size: 12px; color: #a6bcc7; line-height: 1.7; }
.sci-module :is(.rail-title strong, .profile-list h2, .prevalence h3, .subgroups h3, .organ-rank h3, .endpoint-list h2, .audit-note strong, .weight-audit h2, .section-title span) { font-size: 14px; font-weight: 550; }
.sci-module :is(.rail-title span, .center-list-header small, .quality-meter-row span, .quality-meter-row strong, .audit-section li, .difference-row>b, .difference-label strong, .difference-label span, .prevalence div, .weight-audit div, .organ-rank>div>div) { font-size: 12px; line-height: 1.6; }
.sci-module :is(.audit-note p, .methods p, .interpretation p, .quality-section p, .phase-block p, .event-inspector p, .risk-module p) { color: #a3b7c4; font-size: 13px; line-height: 1.85; }
.sci-module .center-row { color: #dce9ef; min-height: 53px; }
.sci-module .center-row:hover { background: #1c3240; border-color: #47657a; }
.sci-module .center-copy strong { font-size: 13px; line-height: 1.6; font-weight: 550; }
.sci-module .center-copy small { font-size: 11px; color: #9cafbd; }
.sci-module .center-code { color: #c8d9e0; background: #233946; }
.sci-module .segmented-control { background: #182934; border-color: #3b5361; }
.sci-module .segmented-control button { color: #b3c5cd; font-size: 14px; min-height: 40px; }
.sci-module .quality-chip.is-pass { color: #a8e0cc; background: #193c31; }
.sci-module .quality-chip.is-review { color: #e5ca93; background: #3c3120; }
.sci-module :is(.quality-section p, .audit-section li span, .rail-title span, .difference-label span, .quality-meter-row span, .endpoint-list b, .prevalence span) { color: #9fb4c1; }
.sci-module .endpoint-list div { font-size: 13px; min-height: 37px; }
.sci-module .attrition strong { font-size: 15px; }
.sci-module .attrition span { font-size: 11px; color: #a2b7c4; }
.sci-module .estimate-hero, .sci-module .responder { color: #eaf6f2; background: #17342f; border-left-color: var(--sci-mint); border-radius: 5px; }
.sci-module :is(.estimate-hero span, .estimate-hero small, .responder span, .responder small) { color: #a5c7ba; font-size: 13px; line-height: 1.7; }
.sci-module .estimate-compare span { color: #a5b9c5; font-size: 11px; }
.sci-module .estimate-compare strong { font-size: 15px; }
.sci-module .profile-list button { background: #152633; color: #dce9f0; height: auto; min-height: 49px; border-color: #344c5a; padding: 8px; }
.sci-module .profile-list span { font-size: 13px; }
.sci-module .profile-list b { font-size: 11px; color: #9fb4c0; }
.sci-module #clock-radar { border-radius: 7px; margin-top: 16px; }
.sci-module .cycle-ribbon { background: #142832; height: 55px; border-color: #35504f; padding-inline: 24px; }
.sci-module .cycle-ribbon>span { font-size: 12px; }
.sci-module .cycle-ribbon button { font-size: 13px; height: 34px; border-color: #395864; }
.sci-module .cycle-ribbon button.active { background: var(--sci-mint); color: #143b31; }
/* MIMIC: keep signal and timeline semantics on a light plotting surface. */
.sci-module[data-sci-module="mimic"] .patient-rail,
.sci-module[data-sci-module="mimic"] .state-rail { padding: 0; }
.sci-module :is(.case-heading, .phase-block, .event-index, .risk-module, .vitals-module, .organs-module, .event-inspector) { padding: 22px; }
.sci-module .case-heading h1 { font-size: 29px; font-weight: 550; line-height: 1.3; margin-top: 12px; }
.sci-module .patient-meta span { font-size: 16px; }
.sci-module .patient-meta small { font-size: 12px; }
.sci-module .phase-block { background: #15302a; }
.sci-module .phase-block strong { font-size: 17px; font-weight: 550; }
.sci-module .case-state { font-size: 13px; }
.sci-module .case-state b { font-size: 12px; }
.sci-module #eventList { gap: 6px; }
.sci-module #eventList button { grid-template-columns: 44px 7px minmax(0, 1fr); min-height: 42px; }
.sci-module #eventList button:hover { background: #1b3542; }
.sci-module #eventList button.active { background: #244c40; border-color: #447b62; }
.sci-module #eventList time { font-size: 11px; }
.sci-module #eventList span { font-size: 13px; line-height: 1.5; white-space: normal; }
.sci-module .range-presets button { min-width: 49px; height: 38px; font-size: 13px; }
.sci-module .range-presets button.active { color: #123a2f; background: var(--sci-mint); }
.sci-module :is(.monitor-panel, .timeline-panel) { --ink: #162b40; --muted: #506679; --faint: #6d8294; --line: #d5e0e9; --white: #fff; --navy: #203b57; background: #f6f9fb; color: #162b40; }
.sci-module .monitor-toolbar { min-height: 48px; height: auto; padding: 12px; gap: 12px; flex-wrap: wrap; }
.sci-module .signal-key { flex-wrap: wrap; gap: 12px; }
.sci-module .signal-key span { font-size: 11px; }
.sci-module .cursor-time small { font-size: 12px; }
.sci-module .panel-caption { min-height: 42px; height: auto; padding: 12px; }
.sci-module .panel-caption span { font-size: 13px; }
.sci-module .panel-caption b { font-size: 12px; }
.sci-module .window-summary { grid-template-columns: 1fr; gap: 17px; padding: 17px; color: #d8e9ed; background: #132430; }
.sci-module .window-summary>div:first-child span, .sci-module .window-summary dt { font-size: 12px; }
.sci-module .window-summary>div:first-child strong, .sci-module .window-summary dd { font-size: 13px; line-height: 1.6; }
.sci-module .window-actions button { min-height: 38px; font-size: 13px; padding: 8px 12px; }
.sci-module .window-summary dl div:first-child { border-left: 0; padding-left: 0; }
.sci-module .risk-module>strong { font-size: 16px; font-weight: 550; }
.sci-module .vital span { font-size: 11px; }
.sci-module .vital b { font-size: 21px; }
.sci-module .vital small { font-size: 10px; }
.sci-module .organ-row { grid-template-columns: 50px minmax(60px, 1fr) 18px; font-size: 12px; }
.sci-module .event-inspector time { font-size: 13px; }
.sci-module .event-inspector h3 { font-size: 16px; line-height: 1.5; }
.sci-module .safety-note { color: #d9c698; background: #332b1d; border-color: #584930; font-size: 12px; line-height: 1.85; margin-bottom: 22px; }
.sci-module .transport { min-height: 70px; height: auto; padding-block: 14px; position: sticky; bottom: 0; z-index: 25; background: #0e1c27f5; grid-template-columns: 40px 90px minmax(100px, 1fr) 250px; }
.sci-module .transport .engine-credit { display: none; }
.sci-module .play-button { color: #12352c; background: var(--sci-mint); box-shadow: none; }
.sci-module .transport-time b { font-size: 15px; }
.sci-module .transport-time small, .sci-module .transport-marks { font-size: 11px; }
/* Genomics keeps the embedded Vitessce application's own theme. */
.sci-module .context-strip { padding-top: 35px; padding-bottom: 28px; }
.sci-module .context-strip h1 { font-size: clamp(29px, 2.5vw, 40px); font-weight: 550; line-height: 1.35; }
.sci-module .context-strip p { color: #a5b8c6; font-size: 15px; line-height: 1.85; }
.sci-module .study-kpis div, .sci-module .marker-intro, .sci-module .marker-card { background: #142532; border-color: #324b5b; border-radius: 8px; box-shadow: none; }
.sci-module .study-kpis strong { color: var(--sci-mint); font-size: 24px; font-weight: 550; }
.sci-module .study-kpis span, .sci-module .marker-intro span, .sci-module .marker-card span { color: #a2b7c6; font-size: 13px; }
.sci-module .marker-card strong { font-size: 19px; font-weight: 550; }
.sci-module .marker-card b { font-size: 12px; color: #8bd9bc; }
.sci-module .vitessce-frame { border: 1px solid #395467; box-shadow: 0 15px 40px #0002; border-radius: 9px; }
.sci-module .loading-screen { color: var(--sci-text); background: #0b151ff7; }
.sci-module .loading-screen small { color: var(--sci-muted); font-size: 13px; }
@media (max-width: 1490px) and (min-width: 1001px) {
  .sci-module :is(.workspace, .workbench, .lab-shell) { grid-template-columns: 250px minmax(0, 1fr); }
  .sci-module :is(.evidence-rail, .ledger-panel, .inference-panel, .inspector, .state-rail) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; border-left: 0; border-top: 1px solid var(--line); }
  .sci-module :is(.evidence-rail, .ledger-panel, .inference-panel, .inspector, .state-rail)>* { min-width: 0; }
  .sci-module .patient-rail { display: block; }
  .sci-module .ledger-panel { display: block; }
  .sci-module .stage-heading { display: block; }
  .sci-module .stage-kpis { margin-top: 17px; }
  .sci-module .marker-strip { grid-template-columns: repeat(4, 1fr); }
  .sci-module .marker-intro { grid-column: span 2; }
}
@media (max-width: 1000px) {
  .sci-module :is(.workspace, .workbench, .lab-shell) { display: block; min-height: 0; }
  .sci-module :is(.query-rail, .query-panel, .design-panel, .subject-panel) { border-right: 0; border-bottom: 1px solid var(--line); }
  .sci-module :is(.evidence-rail, .ledger-panel, .inference-panel, .inspector, .state-rail) { display: block; border-left: 0; border-top: 1px solid var(--line); }
  .sci-module .patient-rail { display: block; border-right: 0; }
  .sci-module .event-index { display: none; }
  .sci-module .patient-rail { display: grid; grid-template-columns: 1fr 1fr; }
  .sci-module .case-heading h1 br { display: none; }
  .sci-module .context-strip { flex-direction: column; align-items: start; }
  .sci-module .secondary-grid, .sci-module .lower-grid { grid-template-columns: 1fr; }
  .sci-module .transport { grid-template-columns: 40px 80px minmax(0, 1fr); }
  .sci-module .transport-marks { display: none; }
  .sci-module .topbar :is(.runtime, .runtime-badge, .engine, .synthetic-badge, .case-state) { display: none; }
  .sci-module .marker-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sci-module .topbar { min-height: 62px; gap: 10px; padding: 12px 18px; flex-wrap: wrap; }
  .sci-module .topbar :is(.brand small, .brand-lockup small, .brand-lockup>div>span) { display: none; }
  .sci-module :is(.command, .icon-command, .icon-button) { min-height: 38px; height: auto; }
  .sci-module :is(.analysis-stage, .evidence-stage, .replay-stage, .query-rail, .evidence-rail, .query-panel, .ledger-panel, .design-panel, .inference-panel, .subject-panel, .inspector) { padding: 22px 18px; }
  .sci-module :is(.stage-heading h2, .stage-header h2, .stage-head h2) { font-size: 24px; }
  .sci-module :is(.stage-heading, .stage-header, .stage-head) { display: block; }
  .sci-module :is(.stage-kpis, .kpis) { margin-top: 18px; display: flex; }
  .sci-module :is(.stage-kpis, .kpis) div { min-width: 82px; padding: 12px 8px; }
  .sci-module :is(.stage-kpis, .kpis) strong { font-size: 20px; }
  .sci-module .range-presets { margin-top: 18px; }
  .sci-module .patient-rail { display: block; }
  .sci-module .plot-grid { grid-template-columns: 1fr; }
  .sci-module :is(.filter-stack, .filters) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sci-module :is(.filter-stack label, .filters label) { min-width: 0; }
  .sci-module .center-list { grid-template-columns: 1fr; }
  .sci-module .window-summary dl { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sci-module .window-summary dl div:nth-child(3) { border-left: 0; padding-left: 0; }
  .sci-module .context-strip { padding: 26px 18px; }
  .sci-module .context-strip p { font-size: 14px; }
  .sci-module .study-kpis { gap: 7px; flex-wrap: wrap; }
  .sci-module .study-kpis div { min-width: 90px; padding: 12px; }
  .sci-module #cohort-3d { min-width: 0; }
  .sci-module .sci-source a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sci-module .topbar a, .sci-module .topbar button { transition: none; } }