/* Vitrum Explorer material family outside the live workbench.
   Text, controls, plots and provenance remain native HTML/SVG. Raster layers
   provide blank structural surfaces only and share the workbench's materials. */
:root{
  --explorer-analysis-rail:url('/assets/instruments/analysis-rail-light-v2.webp');
  --explorer-notebook-frame:url('/assets/instruments/notebook-frame-light-v2.webp');
  --explorer-result-bezel:url('/assets/instruments/result-bezel-light-v2.webp');
  --explorer-analysis-slice:160 130 157 130;
  --explorer-notebook-slice:142 120 142 121;
  --explorer-result-slice:141 121 147 122;
  --explorer-sheet:var(--paper,#f9f8f6);
  --explorer-rule:var(--instrument-rim,var(--line,#dddbd4));
}
html[data-theme=dark]{
  --explorer-analysis-rail:url('/assets/instruments/analysis-rail-dark-v2.webp');
  --explorer-notebook-frame:url('/assets/instruments/notebook-frame-dark-v2.webp');
  --explorer-result-bezel:url('/assets/instruments/result-bezel-dark-v2.webp');
  --explorer-notebook-slice:142 120 142 122;
  --explorer-result-slice:143 125 149 127;
}

/* The primary navigation keeps the same physical identity in every context. */
body[data-context] button:not(.source-button){border:5px solid transparent;border-image:var(--instrument-selector) var(--instrument-selector-slice) fill / 5px stretch;border-radius:0!important;background:var(--instrument-face);background-clip:padding-box;color:var(--instrument-ink);box-shadow:none;min-height:38px;padding:5px 9px;line-height:1.5}
body[data-context] button.primary{border-image-source:url('/assets/instruments/keycap-teal-v1.webp');border-image-slice:174 190 170 190;background:#1e6970;color:#fff}
body[data-context] button.icon-button{width:34px;min-height:34px;padding:0;border-width:4px;border-image-width:4px}
body[data-context] .display-settings>button{min-height:34px;font-size:11px;padding:3px 7px}
body[data-context] .run-secondary>button{min-height:34px;padding:4px 3px;font-size:10px;white-space:normal}
body[data-context] button:not(.source-button):focus-visible{outline:3px solid var(--link);outline-offset:3px}
.context-tabs{padding:7px 0;gap:5px;background:var(--bg);border-bottom:1px solid var(--line);min-height:58px}
.context-tabs>button{border:6px solid transparent;border-image:var(--instrument-selector) var(--instrument-selector-slice) fill / 6px stretch;border-radius:0;box-shadow:none;background:var(--instrument-face);background-clip:padding-box;color:var(--instrument-ink);padding:5px 9px;min-height:44px;font:400 13px/1.4 'Public Sans',sans-serif;flex:none}
.context-tabs>button[aria-selected=true]{font-weight:600;color:var(--instrument-accent);box-shadow:inset 0 -3px var(--teal);background:var(--instrument-selected)}
.context-tabs>button.primary{border-image-source:url('/assets/instruments/keycap-teal-v1.webp');border-image-slice:174 190 170 190;background:#1e6970;color:#fff;font-weight:600}
.context-tabs>button:disabled{opacity:.4;cursor:not-allowed}
.context-tabs>button:hover:not(:disabled){filter:brightness(.97)}
html[data-theme=dark] .context-tabs>button:hover:not(:disabled){filter:brightness(1.13)}
.app-header .header-right>button{border-radius:4px;box-shadow:none}
.context-session-status{color:var(--muted);font-size:10px}

/* Study and analysis use restrained notebook frames rather than a card wall. */
body[data-context]:not([data-context=workbench]) :is(#view-study,#view-research){border:0;border-radius:0;background:var(--bg)}
body[data-context]:not([data-context=workbench]) .study-mode-tabs{background:var(--bg);padding:10px clamp(12px,3vw,36px);gap:5px}
body[data-context]:not([data-context=workbench]) :is(.study-mode-tabs,.research-tabs,.authoring-tabs)>button{border:5px solid transparent;border-image:var(--instrument-selector) var(--instrument-selector-slice) fill / 5px stretch;border-radius:0;box-shadow:none;background:var(--instrument-face);background-clip:padding-box;color:var(--instrument-ink);font:400 13px/1.5 'Public Sans',sans-serif;padding:6px 10px;min-height:40px}
body[data-context]:not([data-context=workbench]) :is(.study-mode-tabs,.research-tabs,.authoring-tabs)>button[aria-selected=true]{color:var(--instrument-accent);font-weight:600;box-shadow:inset 0 -3px var(--teal);background:var(--instrument-selected)}
body[data-context]:not([data-context=workbench]) :is(.investigation-section,.authoring-section){border:9px solid transparent;border-image:var(--explorer-notebook-frame) var(--explorer-notebook-slice) / 9px stretch;border-radius:0;background:var(--explorer-sheet);background-clip:padding-box;box-shadow:none;padding:clamp(16px,2vw,24px);min-width:0}
.investigation-flow{max-width:1320px}
.investigation-flow :is(h1,h2,h3){color:var(--ink)}
.investigation-flow .investigation-heading{padding-bottom:12px;border-bottom:1px solid var(--explorer-rule)}
.investigation-flow .investigation-meta{gap:8px 16px;font-size:11px}
.investigation-flow .investigation-origin{font:11px/1.6 'IBM Plex Mono',monospace;color:var(--muted)}
.investigation-flow .investigation-stepper{border:7px solid transparent;border-image:var(--explorer-analysis-rail) var(--explorer-analysis-slice) fill / 7px stretch;background:var(--instrument-face);background-clip:padding-box;padding:5px;gap:5px;margin:20px 0 24px}
.investigation-flow .investigation-stepper button{border:5px solid transparent;border-image:var(--instrument-selector) var(--instrument-selector-slice) fill / 5px stretch;border-radius:0;background:var(--instrument-face);color:var(--instrument-ink);padding:9px 10px;min-height:44px;box-shadow:none;font-size:13px;line-height:1.5}
.investigation-flow .investigation-stepper button[aria-current=step]{color:var(--instrument-accent);font-weight:600;background:var(--instrument-selected);box-shadow:inset 0 -3px var(--teal)}
.investigation-flow .investigation-case-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 24px;margin-top:20px;border-top:1px solid var(--explorer-rule)}
.investigation-flow .investigation-case-card{border:0;border-bottom:1px solid var(--explorer-rule);border-radius:0;background:transparent;padding:20px 2px;box-shadow:none}
.investigation-flow .investigation-case-card h2{margin:8px 0 10px;font-size:18px;line-height:1.4}
.investigation-flow .investigation-case-card>button{align-self:flex-start;max-width:100%;margin-top:auto;text-align:left}
.investigation-flow .investigation-candidates{display:flex;flex-direction:column;gap:0;border-block:1px solid var(--line);margin:18px 0}
.investigation-flow .investigation-candidate{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 2px;box-shadow:none}
.investigation-flow .investigation-candidate:last-child{border-bottom:0}
.investigation-flow .investigation-candidate:has(input:checked),.investigation-flow .investigation-candidate.selected{box-shadow:inset 3px 0 var(--teal);padding-left:14px;background:var(--tint)}
.investigation-flow .investigation-candidate label{font-size:15px;line-height:1.55}
.investigation-flow .investigation-candidate>button{width:auto;max-width:100%;min-width:160px}
.investigation-flow .investigation-readouts{gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.investigation-flow .investigation-readout{border:8px solid transparent;border-image:var(--explorer-result-bezel) var(--explorer-result-slice) / 8px stretch;border-radius:0;background:var(--reading);background-clip:padding-box;padding:12px;box-shadow:none;min-width:0}
.investigation-flow .investigation-readout strong{font-size:24px;line-height:1.5;color:var(--instrument-accent);font-variant-numeric:tabular-nums}
.investigation-flow .investigation-readout small{font-size:10px;line-height:1.7}
.investigation-flow .investigation-plot{border:10px solid transparent;border-image:var(--instrument-plot-frame) var(--instrument-plot-slice) / 10px stretch;border-radius:0;background:var(--reading);background-clip:padding-box;min-height:220px}
.investigation-flow .investigation-analysis-controls{border:7px solid transparent;border-image:var(--explorer-analysis-rail) var(--explorer-analysis-slice) fill / 7px stretch;background:var(--instrument-face);background-clip:padding-box;padding:8px 10px;gap:12px;align-items:flex-end}
.investigation-flow .investigation-analysis-controls .field{margin:0;min-width:160px}
.investigation-flow .investigation-advanced{padding-top:12px;border-top:1px solid var(--explorer-rule)}
.investigation-flow .investigation-advanced>summary{font-size:14px;color:var(--instrument-accent)}
.investigation-flow .investigation-table{background:var(--reading);font-variant-numeric:tabular-nums}
.investigation-flow .investigation-table th{background:var(--paper);font-weight:600}
.investigation-flow .investigation-procedure{border-radius:2px;background:var(--reading);font-size:11px;border-color:var(--line)}
.investigation-flow .investigation-evidence-grid{gap:16px}
.investigation-flow .investigation-loading{border-radius:2px;box-shadow:none}

/* Controls retain normal input behavior, labels, focus and selected values. */
body[data-context]:not([data-context=workbench]) :is(.investigation-flow,.research-workspace,.case-authoring,.library-workspace) :is(select,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea),.account-form input{border:6px solid transparent;border-image:var(--instrument-socket) var(--instrument-socket-slice) / 6px stretch;border-radius:0!important;background:var(--instrument-input);background-clip:padding-box;color:var(--instrument-ink);padding:7px 9px;box-shadow:none;line-height:1.5;min-height:42px}
body[data-context]:not([data-context=workbench]) :is(.investigation-flow,.research-workspace,.case-authoring,.library-workspace) option,.account-form input{color:var(--instrument-ink);background-color:var(--instrument-input)}
body[data-context]:not([data-context=workbench]) :is(.investigation-flow,.research-workspace,.case-authoring,.library-workspace) button:not(.primary):not([role=tab]):not([aria-selected]):not([data-focus^="step-"]),.account-card>button{border:5px solid transparent;border-image:var(--instrument-selector) var(--instrument-selector-slice) fill / 5px stretch;border-radius:0!important;background:var(--instrument-face);background-clip:padding-box;color:var(--instrument-ink);box-shadow:none;padding:6px 10px;font-weight:400;line-height:1.5;min-height:40px}
body[data-context]:not([data-context=workbench]) :is(.investigation-flow,.research-workspace,.case-authoring,.library-workspace) button.primary,.account-form button.primary{border:6px solid transparent;border-image:url('/assets/instruments/keycap-teal-v1.webp') 174 190 170 190 fill / 6px stretch;border-radius:0!important;background:#1e6970;background-clip:padding-box;color:#fff;box-shadow:none;padding:6px 12px;min-height:42px;font-weight:600;line-height:1.5}
body[data-context]:not([data-context=workbench]) :is(.investigation-flow,.research-workspace,.case-authoring,.library-workspace) :is(button,select,input,textarea,summary):focus-visible,.account-card :is(button,input,a):focus-visible{outline:3px solid var(--link,#1b686f);outline-offset:3px}

/* Research separates the method rail from the results instrument. */
body[data-context=research] .research-workspace{padding:clamp(16px,2.4vw,28px)}
.research-workspace .research-heading{border-bottom:1px solid var(--explorer-rule);padding-bottom:12px;margin-bottom:16px}
.research-workspace .research-heading h1{font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.025em}
.research-workspace .research-heading p{margin-bottom:0;font-size:14px;line-height:1.7}
.research-workspace .research-tabs{gap:5px;margin:16px 0;border-bottom:1px solid var(--line)}
.research-workspace .research-layout{grid-template-columns:minmax(270px,350px) minmax(0,1fr);gap:18px}
.research-workspace .research-design{border:8px solid transparent;border-image:var(--instrument-panel) var(--instrument-panel-slice) / 8px stretch;border-radius:0;background:var(--instrument-face);background-clip:padding-box;color:var(--instrument-ink);padding:14px;box-shadow:none}
.research-workspace .research-design h2{font-size:17px;line-height:1.5}
.research-workspace .research-axis{border:6px solid transparent;border-image:var(--explorer-analysis-rail) var(--explorer-analysis-slice) fill / 6px stretch;border-radius:0;background:var(--instrument-face);padding:10px;box-shadow:none}
.research-workspace .research-design .field{font-size:13px;gap:7px;line-height:1.5}
.research-workspace .research-results{border:10px solid transparent;border-image:var(--explorer-notebook-frame) var(--explorer-notebook-slice) / 10px stretch;border-radius:0;background:var(--explorer-sheet);background-clip:padding-box;padding:18px;box-shadow:none}
.research-workspace .research-analysis-controls{border:7px solid transparent;border-image:var(--explorer-analysis-rail) var(--explorer-analysis-slice) fill / 7px stretch;background:var(--instrument-face);background-clip:padding-box;padding:10px;gap:10px;grid-template-columns:minmax(160px,2fr) minmax(120px,1fr) minmax(130px,1fr)}
.research-workspace .research-response{border:9px solid transparent;border-image:var(--instrument-plot-frame) var(--instrument-plot-slice) / 9px stretch;background:var(--reading);background-clip:padding-box;padding:10px;margin:14px 0}
.research-workspace .research-response svg{display:block;margin:0;max-height:310px}
.research-workspace .research-plot-legend{padding-top:10px;border-top:1px solid var(--line);line-height:1.5}
.research-workspace .research-table-wrap{border-radius:0;background:var(--reading);scrollbar-gutter:stable}
.research-workspace .research-table{font-size:12px;font-variant-numeric:tabular-nums}
.research-workspace .research-table :is(th,td){line-height:1.6}
.research-workspace .research-table thead th{background:var(--paper)}
.research-workspace .research-progress{padding-bottom:10px;border-bottom:1px solid var(--explorer-rule)}
.research-workspace .research-progress progress{height:8px;border-radius:0}
.research-workspace .research-status{font-size:11px;line-height:1.7}
.research-workspace .research-formula{padding:10px 0;border-block:1px solid var(--line);font-size:11px;line-height:1.8}
.research-workspace .research-empty{padding:12px 0;min-height:160px}

/* Reports and bibliography remain reading surfaces with direct source links. */
.investigation-flow .investigation-source-panel,.research-workspace :is(.research-sources,.research-design-sources){border:0;border-top:1px solid var(--explorer-rule);border-image:none;border-radius:0;background:transparent;box-shadow:none;padding:16px 0;margin-top:22px}
.investigation-flow .investigation-source-panel>summary,.research-workspace :is(.research-sources,.research-design-sources)>summary{font-weight:600;font-size:14px;line-height:1.5;min-height:40px;cursor:pointer;color:var(--ink)}
.investigation-flow .investigation-source-panel ul{grid-template-columns:1fr;gap:0;margin:10px 0 0}
.investigation-flow .investigation-source-panel li{border-top:1px solid var(--line);padding:14px 0}
.investigation-flow .investigation-source-panel li:first-child{border-top:0}
.investigation-flow .investigation-source-panel :is(p,summary),.research-workspace :is(.research-sources,.research-design-sources) :is(p,small){font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.investigation-flow .investigation-source-panel a,.research-workspace :is(.research-sources,.research-design-sources) a{color:var(--link);text-decoration:underline;text-underline-offset:3px;line-height:1.6;overflow-wrap:anywhere}
.investigation-inline-sources{font-size:12px;line-height:1.7;margin:10px 0;color:var(--muted)}.investigation-inline-sources a{color:var(--link);text-decoration:underline;text-underline-offset:2px}.investigation-inline-sources summary{font-size:12px;cursor:pointer;min-height:32px}.investigation-measurement-group{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.research-workspace :is(.research-sources,.research-design-sources) code{font-size:10px;line-height:1.8}

/* A personal library behaves like a notebook index, with one row per record. */
.library-workspace{max-width:1280px;margin-inline:auto;width:100%;background:var(--bg)!important;padding:clamp(16px,2.8vw,32px)!important}
.library-workspace .library-heading{border-bottom:1px solid var(--explorer-rule);padding-bottom:14px}
.library-workspace .library-heading h2{font-size:clamp(24px,2.6vw,32px);line-height:1.25;margin-bottom:0}
.library-workspace .library-heading .eyebrow{color:var(--muted);letter-spacing:.03em;font-size:10px}
.library-workspace .library-save{border:8px solid transparent;border-image:var(--explorer-analysis-rail) var(--explorer-analysis-slice) fill / 8px stretch;background:var(--instrument-face);background-clip:padding-box;padding:12px;margin:20px 0;gap:10px}
.library-workspace .library-save label{font-size:13px;line-height:1.5}
.library-workspace .experiment-library-list{border:9px solid transparent;border-image:var(--explorer-notebook-frame) var(--explorer-notebook-slice) / 9px stretch;background:var(--explorer-sheet);background-clip:padding-box;padding:0 16px;margin:16px 0}
.library-workspace .experiment-library-row{padding:16px 0;border-radius:0;box-shadow:none;background:transparent}
.library-workspace .experiment-library-row:last-child{border-bottom:0}
.library-workspace .experiment-library-meta strong{font-size:15px;line-height:1.5;font-weight:600}
.library-workspace .experiment-library-meta time{font:11px/1.7 'IBM Plex Mono',monospace;color:var(--muted)}
.library-workspace :is(.library-editor,.library-delete){border-radius:0;padding:12px;background:var(--tint)}
.library-workspace>details{padding:14px 0;border-top:1px solid var(--explorer-rule)}
.library-workspace>details>summary{min-height:38px;font-size:14px;font-weight:600;cursor:pointer}

/* The gate uses the same cream/graphite materials without touching auth logic. */
.account-gate{--account-input-rim:#687c77;--account-input-background:#fff;background:var(--bg,#f5f2eb);color:var(--ink);padding:clamp(16px,3vw,32px);color-scheme:light}
html[data-theme=dark] .account-gate{--account-input-rim:#8aa7a1;--account-input-background:#1b2b2f;color-scheme:dark}
.account-gate .account-card{width:min(100%,500px);border:12px solid transparent;border-image:var(--explorer-notebook-frame) var(--explorer-notebook-slice) / 12px stretch;border-radius:0;background:var(--explorer-sheet);background-clip:padding-box;padding:clamp(20px,4vw,38px);box-shadow:none}
.account-gate .account-card h1{font-size:clamp(24px,3.2vw,30px);line-height:1.3;color:var(--ink);letter-spacing:-.025em}
.account-gate .account-card p{font-size:14px;line-height:1.75;color:var(--muted)}
.account-gate .account-form{gap:16px;margin:24px 0}
.account-gate .account-form label{font-size:13px;line-height:1.5;color:var(--ink)}
/* A permanent native border keeps sign-in fields visible independently of the socket raster. */
.account-gate .account-form input{border:2px solid var(--account-input-rim);border-image:none;border-radius:0!important;background:var(--account-input-background);background-clip:border-box;color:var(--instrument-ink);caret-color:var(--link);font-size:16px;line-height:1.5;min-height:48px;padding:10px 12px;box-shadow:inset 0 1px 2px #1b2b2f14}
.account-gate .account-form input:hover{border-color:var(--link)}
.account-gate .account-form input:focus-visible{border-color:var(--link);outline:3px solid var(--link);outline-offset:3px}
.account-gate .account-form button.primary{min-height:46px}
.account-gate .account-card>a{font-size:13px;line-height:1.7;color:var(--link);text-decoration:underline;text-underline-offset:3px}
html[data-theme=dark] .account-gate .account-card>img{content:url('/assets/brand/vitrum-explorer-dark.svg')}

@media(max-width:1050px){
  .research-workspace .research-layout{grid-template-columns:1fr}
  .research-workspace .research-design{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  .research-workspace .research-design-sources{grid-column:1/-1}
  .research-workspace .research-results{padding:16px;border-width:8px;border-image-width:8px}
}
@media(max-width:760px){
  .context-tabs>button{font-size:12px;min-height:42px;padding:4px 7px}
  .investigation-flow .investigation-stepper{padding:3px;gap:4px;border-width:5px;border-image-width:5px}
  .investigation-flow .investigation-stepper button{font-size:12px;padding:7px 6px}
  .investigation-flow .investigation-readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .research-workspace .research-analysis-controls{grid-template-columns:1fr}
  .library-workspace .library-heading{gap:12px}
}
@media(max-width:560px){
  body[data-context]:not([data-context=workbench]) :is(.investigation-section,.authoring-section){border-width:6px;border-image-width:6px;padding:14px}
  .investigation-flow .investigation-stepper{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 20px}
  .investigation-flow .investigation-stepper button{min-height:44px}
  .investigation-flow .investigation-case-grid{grid-template-columns:1fr;gap:0}
  .investigation-flow .investigation-case-card{padding-block:18px}
  .investigation-flow .investigation-candidate{padding-block:14px}
  .investigation-flow .investigation-candidate>button{width:100%;min-width:0}
  .investigation-flow .investigation-readout{border-width:6px;border-image-width:6px;padding:10px}
  .investigation-flow .investigation-readout strong{font-size:20px}
  .investigation-flow .investigation-plot{border-width:7px;border-image-width:7px;min-height:170px}
  .investigation-flow .investigation-analysis-controls{display:grid;grid-template-columns:1fr;padding:8px}
  .investigation-flow .investigation-analysis-controls .field{min-width:0}
  .research-workspace .research-design,.research-workspace .research-axes{grid-template-columns:1fr}
  .research-workspace .research-design{padding:12px;border-width:6px;border-image-width:6px}
  .research-workspace .research-results{padding:12px;border-width:6px;border-image-width:6px}
  .research-workspace .research-response{padding:5px;border-width:6px;border-image-width:6px}
  .library-workspace .library-save{padding:10px;border-width:6px;border-image-width:6px}
  .library-workspace .experiment-library-list{padding-inline:10px;border-width:6px;border-image-width:6px}
  .library-workspace .experiment-library-row .ve-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
  .library-workspace .experiment-library-row .ve-toolbar button{font-size:12px;min-height:40px}
  .account-gate .account-card{padding:20px 16px;border-width:8px;border-image-width:8px}
}
@media(forced-colors:active){
  body[data-context] button:not(.source-button),body[data-context] :is(select,input:not([type=checkbox]):not([type=radio]),textarea){border-image:none!important;border-color:ButtonText!important;background:Canvas!important;color:CanvasText!important;filter:none!important}
  :is(.context-tabs,.investigation-stepper,.research-tabs,.study-mode-tabs,.authoring-tabs)>button,
  :is(.investigation-section,.investigation-readout,.research-design,.research-results,.library-save,.account-card){border-image:none!important;border-color:CanvasText!important}
  :is(.context-tabs,.investigation-stepper)>button:is([aria-selected=true],[aria-current=step]){outline:2px solid Highlight;box-shadow:none}
}

/* Context navigation belongs to the application header, not to the instrument. */
.clinical-model-status{flex:none;margin:0 0 8px;padding:8px 12px;border:1px solid var(--line);border-left:4px solid #996a2c;background:var(--paper);font:12px/1.5 'Public Sans',sans-serif;max-height:32vh;overflow:auto}
.clinical-model-status[hidden]{display:none}
.clinical-model-status[data-tone=critical]{border-left-color:#b75248}
.clinical-model-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.clinical-model-heading strong{font-weight:600}
#clinical-model-summary{color:var(--muted)}
.clinical-model-status summary{cursor:pointer;margin-top:3px;min-height:24px;font-weight:500}
#clinical-model-body{padding-top:4px}
#clinical-model-body p{margin:6px 0;max-width:100ch}
#clinical-model-body ul{padding-left:18px;margin:6px 0}
.clinical-model-sources{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:8px}
.clinical-model-sources a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.clinical-model-status :is(summary,a):focus-visible{outline:3px solid var(--link);outline-offset:3px}
:root{--app-header-height:64px;--mobile-execution-height:0px}
body[data-context] .app-header{height:var(--app-header-height);min-height:var(--app-header-height);padding:0 14px;gap:12px;display:flex;align-items:center;flex-wrap:nowrap;position:relative}
body[data-context] .app-header :is(.app-divider,.app-description){display:none}
body[data-context] .app-header .brand{flex:none;min-width:0}
body[data-context] .app-header .brand img{width:164px;height:auto;max-height:52px;display:block}
body[data-context] .app-header .context-tabs{flex:1 1 auto;min-width:0;min-height:0;align-self:stretch;align-items:center;height:auto;margin:0;padding:4px 0;gap:4px;background:transparent;border:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
body[data-context] .app-header .context-tabs>button{font-size:12px;min-height:40px;padding:4px 7px;border-width:5px;border-image-width:5px;line-height:1.4;white-space:nowrap}
body[data-context] .app-header .context-tabs>.context-library{margin-left:8px}
body[data-context] .app-header .context-session-status{flex:0 1 auto;max-width:150px;overflow:hidden;text-overflow:ellipsis;margin-left:auto;font-size:10px}
body[data-context] .app-header .context-session-status:empty{display:none}
body[data-context] .app-header .header-right{flex:none;margin-left:0;gap:6px;align-items:center;min-width:0}
body[data-context] .app-header .header-right>button{font-size:11px;min-height:36px;padding:4px 6px;border-width:4px;border-image-width:4px;line-height:1.4}
body[data-context] .app-header .header-right>.icon-button{width:32px;min-width:32px;height:32px;min-height:32px;padding:0}
body[data-context] .app-header #language{width:132px;max-width:132px;min-width:0;min-height:36px;padding:4px 5px;border:4px solid transparent;border-image:var(--instrument-socket) var(--instrument-socket-slice) / 4px stretch;border-radius:0;background:var(--instrument-input);background-clip:padding-box;color:var(--instrument-ink);font:11px/1.4 'Public Sans',sans-serif}
body[data-context] .app-header #language:focus-visible{outline:3px solid var(--link);outline-offset:3px}
body[data-context] .app-header .engine-label{font-size:10px;margin-right:0;white-space:nowrap}
body[data-context] .workbench{height:calc(100dvh - var(--app-header-height) - var(--mobile-execution-height));min-height:0}
@media(min-width:901px) and (max-width:1180px){
  body[data-context] .app-header{padding-inline:10px;gap:8px}
  body[data-context] .app-header .brand img{width:132px;max-height:46px}
  body[data-context] .app-header .context-tabs>button{font-size:11px;padding:4px 5px;border-width:4px;border-image-width:4px}
  body[data-context] .app-header .context-session-status{max-width:100px}
  body[data-context] .app-header .engine-label{display:none}
  body[data-context] .app-header #language{width:116px;max-width:116px}
  body[data-context] .app-header .header-right{gap:4px}
}
@media(max-width:900px){
  :root{--app-header-height:108px;--mobile-execution-height:58px}
  body[data-context]:not([data-context=workbench]){--mobile-execution-height:0px}
  body[data-context] .app-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:56px 52px;column-gap:8px;row-gap:0;padding-inline:12px}
  body[data-context] .app-header>.sidebar-toggle{grid-column:1;grid-row:1;width:32px;min-width:32px;height:36px;min-height:36px;padding:0}
  body[data-context] .app-header>.brand{grid-column:2;grid-row:1;width:100%;min-width:0}
  body[data-context] .app-header .brand img{width:min(152px,100%);max-height:48px}
  body[data-context] .app-header>.header-right{grid-column:3;grid-row:1;gap:5px}
  body[data-context] .app-header>.context-tabs{grid-column:1/-1;grid-row:2;width:100%;min-width:0;padding:2px 0 4px;align-self:stretch}
  body[data-context] .app-header .context-tabs>button{font-size:12px;min-height:40px;padding:4px 7px}
  body[data-context] .app-header .engine-label{display:none}
  body[data-context] .app-header .context-session-status{display:none}
  body[data-context] .sidebar{top:var(--app-header-height);bottom:var(--mobile-execution-height)}
  body[data-context] #drawer-shade{top:var(--app-header-height);bottom:var(--mobile-execution-height)}
  body[data-context] .mobile-execution{height:var(--mobile-execution-height)}
  body[data-context]:not([data-context=workbench]) .app-header{grid-template-columns:minmax(0,1fr) auto}
  body[data-context]:not([data-context=workbench]) .app-header>.brand{grid-column:1}
  body[data-context]:not([data-context=workbench]) .app-header>.header-right{grid-column:2}
}
@media(max-width:560px){
  :root{--app-header-height:104px}
  body[data-context] .app-header{grid-template-rows:54px 50px;padding-inline:8px;column-gap:6px}
  body[data-context] .app-header>.sidebar-toggle{width:30px;min-width:30px}
  body[data-context] .app-header .brand img{width:min(132px,100%);max-height:43px}
  body[data-context] .app-header .header-right{gap:3px}
  body[data-context] .app-header .header-right>button{font-size:10px;min-height:34px;padding:3px 4px;border-width:3px;border-image-width:3px}
  body[data-context] .app-header .header-right .account-control{max-width:54px}
  body[data-context] .app-header #language{width:100px;max-width:100px;min-height:34px;font-size:10px;border-width:3px;border-image-width:3px;padding:3px 4px}
  body[data-context] .app-header .context-tabs{gap:3px}
  body[data-context] .app-header .context-tabs>button{font-size:11px;min-height:38px;padding:3px 5px;border-width:4px;border-image-width:4px}
  body[data-context] .app-header .context-tabs>#header-save{display:block}
  body[data-context] .app-header .context-tabs>.context-library{margin-left:4px}
}
@media(max-width:360px){
  body[data-context] .app-header #language{width:92px;max-width:92px}
  body[data-context] .app-header .header-right .account-control{max-width:46px}
  body[data-context] .app-header .header-right>button{padding-inline:3px}
  body[data-context] .app-header .brand img{min-width:108px}
  body[data-context] .app-header .header-right .account-control{position:absolute;top:62px;right:8px;width:46px;min-height:34px;margin:0}
  body[data-context] .app-header>.context-tabs{width:calc(100% - 54px);justify-self:start}
}

/* Keep bedside readings compact so the waveforms are visible on small screens. */
@media(max-width:560px){
  #view-monitor .monitor-numbers{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #view-monitor .number-channel{min-height:74px;padding:8px 9px}
  #view-monitor .number-channel strong{font-size:clamp(27px,6vw,34px)}
  #view-monitor .number-channel.bp strong{font-size:clamp(18px,4.5vw,25px)}
  #view-monitor .number-channel em{font-size:12px}
  #view-monitor .number-channel>span{font-size:11px}
  #view-monitor .number-channel small{font-size:9px}
  #view-monitor .source-button{width:28px;height:28px;min-width:28px;min-height:28px}
}