:root{--navy:#133449;--navy2:#0b2534;--blue:#137a9a;--teal:#00a5ab;--bg:#eef4f8;--muted:#5d7180;--line:#d9e4eb;--ink:#1c3442;--warn:#985f09;--red:#a13b37;--green:#166d67;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;letter-spacing:.005em}button,input,select{font:inherit}button{cursor:pointer}a{color:#006f95}small{font-size:11px}.wrap{width:min(920px,calc(100% - 24px));margin:auto}.sticky-status{position:sticky;top:0;z-index:100;background:linear-gradient(130deg,#092637 0%,#174d68 58%,#105770 100%);color:white;box-shadow:0 5px 20px #00172624;padding:9px max(12px,calc((100% - 920px)/2)) 8px}.brandline{display:flex;align-items:center;justify-content:space-between;font-size:13px;line-height:18px;margin-bottom:7px}.brandline b{font-size:14px}.vtag{opacity:.65;font-size:10px}.brand-dot{display:inline-block;width:7px;height:7px;background:#43d9c6;border-radius:50%;margin-right:5px}.mode-tag{font-size:10px;color:#dafff9;border:1px solid #90d6db66;border-radius:30px;padding:2px 8px}.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.metric{background:#ffffff12;border:1px solid #ffffff2d;border-radius:10px;min-width:0;padding:5px 3px;text-align:center;min-height:70px;display:flex;flex-direction:column;justify-content:center;gap:3px}.metric small{display:block;font-size:10px;color:#daedf4;white-space:nowrap;letter-spacing:-.25px}.metric strong{display:block;font-size:18px;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}.metric span{display:block;color:#acd5e2;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric.has-value{border-color:#5dd7d166}.metric[data-metric=total]{background:#e1fff119;color:#f4fffa}.alert-strip{margin-top:6px;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#ffedc7;min-height:17px}.intro{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0 8px}.intro h1{margin:0;color:var(--navy);font-size:19px;line-height:1.3;letter-spacing:-.4px}.intro p{margin:6px 0 0;color:var(--muted);font-size:12px}.head-actions{display:flex;gap:7px;flex-shrink:0}.btn{border:1px solid #c5d5de;background:white;color:#1b4255;padding:9px 11px;font-size:12px;font-weight:700;border-radius:10px;white-space:nowrap}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--navy);color:white;border-color:var(--navy)}.btn.accent{background:#0c7384;color:white;border-color:#0c7384}.btn.quiet{color:#94473e}.clinical-disclaimer{border:1px solid #ecd7a7;border-left:4px solid #c68c35;background:#fff9ec;border-radius:11px;padding:10px 12px;font-size:11px;color:#6c5228}.model-explain{font-size:11px;background:#e4f3f7;border:1px solid #c8e5ed;padding:9px 12px;border-radius:11px;margin:10px 0 13px;color:#25586a}.card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:0 1px 5px #17394b0d}.section{margin:11px 0;padding:16px;scroll-margin-top:160px}.section-title{margin-bottom:14px}.section-title h2{margin:0;font-size:18px;line-height:1.4;color:#17384a}.section-title p{font-size:11px;color:var(--muted);margin:4px 0 0}.subhead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:7px 0 7px;margin:10px 0 10px;gap:6px}.subhead b{font-size:14px}.subhead span{font-size:10px;color:var(--muted);text-align:right}.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.field{min-width:0;display:flex;flex-direction:column;gap:4px}.field-name{font-size:12px;font-weight:750;color:#355365;min-height:17px}.field-name small{font-size:10px;color:#748894;font-weight:550}.field input,.field select{height:44px;min-width:0;width:100%;border:1px solid #bdd3dd;border-radius:10px;background:#fbfdff;padding:8px 10px;color:#183447;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;outline:none;box-shadow:inset 0 1px 0 #eee}.field select{font-size:13px;font-weight:650}.field input:focus,.field select:focus{border-color:#0799a9;box-shadow:0 0 0 3px #0aaabc25}.field input::placeholder{color:#a5b3bf;font-size:13px;font-weight:500}.field input.sample{background:#fff8e8;border-color:#d6a453}.field input.invalid{border-color:#c34c49;background:#fff2f0}.field-help{font-size:10px;line-height:1.35;color:#8393a0}.helper-band,.output-row{border-radius:10px;background:#edf7f9;color:#226274;padding:9px 10px;font-size:12px;margin:10px 0 4px}.output-row{display:flex;justify-content:space-between;gap:10px;font-weight:600}.output-row b{font-size:15px;color:#075c77}.small-notice{font-size:11px;color:#786240;background:#fff8eb;border-radius:9px;padding:9px 10px;margin-top:9px}.tiny-note{font-size:11px;color:#657c89;margin:8px 0}.inline-details{border-top:1px solid #e2ebef;margin-top:12px;padding-top:10px}.inline-details>summary{cursor:pointer;color:#13728a;font-size:12px;font-weight:700;padding:8px 0;list-style:none}.inline-details>summary::before{content:'▸  ';color:#1598aa}.inline-details[open]>summary::before{content:'▾  '}.inline-details .input-grid{padding-top:8px}.device-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.device-choice{border:1px solid var(--line);border-radius:10px;background:#f8fbfd;padding:9px 5px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}.device-choice:has(input:checked){border-color:#087b8e;background:#e4f6f7;color:#095569}.device-choice input{accent-color:#087b8e;width:15px;height:15px}.device-settings{margin-top:11px;border:1px solid #d8e8ec;background:#f6fbfd;padding:12px;border-radius:11px}.device-settings>b{display:block;font-size:12px;margin-bottom:9px}.accounting{margin-top:12px;padding:12px;background:#fff8e8;border:1px solid #efdfb9;border-radius:11px}.collapsible{padding:0;overflow:hidden}.collapsible>summary{padding:15px 16px;list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.collapsible>summary::-webkit-details-marker{display:none}.collapsible>summary span:first-child{font-size:16px;font-weight:800}.collapsible>summary small{display:block;font-weight:400;font-size:11px;color:#607889;margin-top:3px}.chevron{font-size:22px;color:#648190;transform:rotate(0)}.collapsible[open] .chevron{transform:rotate(180deg)}.detail-content{border-top:1px solid var(--line);padding:12px 16px 17px}.derived-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.derived{border:1px solid var(--line);border-radius:12px;padding:10px;background:#f8fcfd}.derived strong{display:block;font-size:23px;color:var(--navy)}.derived small{color:#57717e;font-size:11px}.derived p{font-size:10px;color:#69818c;margin:2px 0 0}.summary-note{padding:10px 11px;font-size:12px;color:#695333;background:#fff7e6;border:1px solid #ecd9ae;border-radius:10px;margin:10px 0}.finding{padding:10px 11px;border:1px solid #d9e7eb;background:#f7fbfd;border-radius:9px;margin:6px 0;font-size:12px;color:#365463}.finding b{display:block;font-size:13px;color:#21485a}.finding small{display:block;margin-top:3px;color:#627e8a}.finding.caution{border-color:#efcf9d;background:#fff9ef}.finding.caution b{color:#995e19}.finding.urgent{border-color:#eab5b0;background:#fff4f2}.finding.urgent b{color:#9c4239}.findings{border-top:4px solid #d8e8ed}.history{font-size:12px;color:#5f7580;padding:10px;background:#f7fafd;border-radius:10px;margin:7px 0}.report-preview{white-space:pre-wrap;font-size:11px;background:#f4f8fa;border:1px solid var(--line);max-height:280px;overflow:auto;padding:12px;border-radius:10px}.button-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.toggle-line{display:flex;align-items:center;font-size:12px;gap:7px}.toggle-line input{accent-color:#126d83}.ref-list{padding-left:20px;font-size:12px}.ref-list li{margin:5px 0}footer{text-align:center;font-size:10px;color:#79919b;padding:22px 0 40px}body.modal-open{overflow:hidden}.metric:active{background:#ffffff25}@media(max-width:600px){.intro{align-items:flex-start;flex-direction:column;gap:7px}.head-actions{width:100%}.head-actions button{flex:1}.metric small{font-size:9px}.metric strong{font-size:17px}.metric span{font-size:8px}.section{padding:14px}.device-choice{font-size:11px;padding:8px 2px}}@media(max-width:350px){.metric-grid{gap:3px}.metric small{font-size:8px}.metric strong{font-size:15px}.metric{min-height:63px}.sticky-status{padding-left:7px;padding-right:7px}.field-name{font-size:11px}.section-title h2{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.metric-unit{font-style:normal;font-size:8px;color:#badce6;line-height:1.1}.metric{min-height:78px}.metric span{font-size:8px}.model-explain{font-size:10px;line-height:1.4;padding:8px 10px}

/* v7 selective updates: references, drug dose inputs, iPhone icon */
.reference-line{display:block;font-size:9px;color:#657d89;line-height:1.3;font-weight:450;margin-top:1px}
.reference-line:first-letter{color:#167487}
.mini-action{align-self:flex-start;font-size:9px;border:1px solid #cfdee7;background:#eff8fb;color:#146985;border-radius:6px;padding:4px 7px}
.drug-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px}
.drug-item{border:1px solid #cce0e7;border-radius:11px;padding:9px;background:#f7fbfd}
.drug-head{display:flex;justify-content:space-between;gap:4px;align-items:center;font-size:11px;margin-bottom:7px}
.drug-head strong{color:#0b617d;font-size:12px;text-align:right}
.drug-inputs{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.drug-inputs label{font-size:10px;color:#617984;display:block}
.drug-inputs input{width:100%;margin-top:4px;border:1px solid #bdd3dd;border-radius:8px;padding:6px;font-size:15px;font-weight:bold;min-width:0}
.drug-item small{display:block;font-size:9px;color:#748895;margin-top:7px;line-height:1.4}
@media(max-width:420px){.drug-list{grid-template-columns:1fr}.metric small{font-size:8px;letter-spacing:-.35px}}

/* v8 targeted refinements; all existing colors and panels retained */
.metric-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.metric{min-height:93px;padding:5px 1px;gap:3px}
.metric small:not(.metric-reference){font-size:9px;white-space:normal;line-height:1.15;min-height:21px}
.metric strong{font-size:17px}
.metric-unit{font-size:7px}
.metric-reference{font-size:7px!important;color:#c2eeea!important;letter-spacing:-.25px;white-space:normal;line-height:1.12;min-height:16px}
.metric span{font-size:7px}
.hemo-extra{display:flex;justify-content:space-between;gap:4px;color:#486c7a;font-size:11px;border-top:1px solid #e3edf0;margin:4px 0 0;padding-top:4px}
.hemo-extra b{color:#17485f;font-size:13px}
.hemo-unit{font-size:9px;color:#79909b}
.derived .reference-line{font-size:9px;margin-top:4px}
.drug-inputs .drug-conc{grid-column:1/-1}
.drug-inputs input[readonly]{background:#e9f5f4;border-color:#9ac9cc;color:#0a6571;cursor:default}
@media(max-width:600px){.metric small:not(.metric-reference){font-size:8px}.metric strong{font-size:16px}.metric-grid{gap:3px}}
@media(max-width:380px){.metric strong{font-size:14px}.metric small:not(.metric-reference){font-size:7px}.metric-reference{font-size:6.5px!important}}

/* v8.1: retain exactly five primary scores onscreen; sixth O2ER resides to the right. */
.metric-viewport{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;touch-action:pan-x pan-y;border-radius:10px}
.metric-viewport::-webkit-scrollbar{display:none}
.metric-grid{width:calc(120% + 0.8px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.metric{scroll-snap-align:start;min-width:0}
.metric[data-metric=o2er]{border-color:#69d9d0a6;background:#1a777c75}
.o2er-toolbar{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:5px}
.o2er-peek{font-size:10px;color:#eafffb;background:#127d888c;border:1px solid #76efe4a3;border-radius:999px;max-width:74%;min-height:26px;padding:3px 10px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px #ffffff09}
.o2er-peek span{font-size:15px;color:#c9fffa;font-weight:900}
.o2er-help-button{border:1px solid #c5e6e58c;background:#ffffff10;color:#d9f8fa;border-radius:999px;font-size:10px;padding:4px 9px;min-height:26px;white-space:nowrap}
.o2er-note{font-size:10px;line-height:1.42;margin-top:6px;color:#e6ffff;background:#092d3bdc;border:1px solid #8dcfce65;border-radius:9px;padding:8px 10px}
.o2er-note strong{color:white}
.o2er-peek:focus-visible,.o2er-help-button:focus-visible,.metric-viewport:focus-visible{outline:2px solid #b5fff2;outline-offset:2px}
@media(max-width:380px){.o2er-peek,.o2er-help-button{font-size:9px}}

/* v8.3: permanent score rail; use visualViewport offset for iOS keyboard. */
:root{--sticky-height:169px;--visual-top:0px}
body{padding-top:var(--sticky-height)}
.sticky-status{position:fixed!important;top:var(--visual-top)!important;left:0;right:0;width:100%;z-index:10000!important;transform:translateZ(0);will-change:top}
.metric-grid{width:150%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important}
.metric-viewport{overflow-x:auto!important}
.o2er-peek{max-width:82%;font-size:10px}
.missing-trigger{display:block;border:0;background:transparent;color:#c9f6ed;font-size:9px;padding:2px 0;margin-top:3px;text-decoration:underline dotted;text-underline-offset:3px}
.missing-detail{padding:7px 9px;margin:4px 0 1px;font-size:10px;color:#e9faff;background:#0b3547;border:1px solid #6fc5cd;border-radius:8px;max-height:150px;overflow:auto}
body.keyboard-open .brandline{display:none}
body.keyboard-open .alert-strip{display:none}
body.keyboard-open .o2er-toolbar{margin-top:2px}
body.keyboard-open .metric{min-height:69px!important}
body.keyboard-open .metric-reference{display:none!important}
body.keyboard-open .o2er-note{display:none}
.input-grid>.field>.field-name{min-height:38px;display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:3px}
.input-grid>.field>.field-help{min-height:27px}
.derived-info{background:#edf7f9}
.derived-info p{font-size:10px;line-height:1.4}
#drug-dose-panel[open]>.drug-list{grid-template-columns:1fr}
@media(max-width:600px){.metric-grid{gap:3px}.metric{padding:4px 1px}.metric strong{font-size:15px}.metric small:not(.metric-reference){font-size:7.5px}.metric-reference{font-size:7px!important}}
@media(max-width:375px){.metric strong{font-size:14px}.o2er-peek{font-size:9px}}

/* v8.4 minimal clinical correction, retaining the original layout */
#systemic-flow-panel{grid-column:1 / -1; margin:3px 0 7px; border:1px solid #b6d5d9; border-radius:11px; padding:9px 10px; background:#eaf7f8; color:#26505f}
.model-flow>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.model-flow strong{font-size:12px;font-weight:780}
.model-flow-num{font-size:17px;font-weight:850;white-space:nowrap;color:#085b70}
.model-flow-num.calculated{color:#086c65}
.model-flow small{display:block;font-size:10px;line-height:1.4;margin-top:4px;color:#516f79}
#nativeCOsource{font-size:12px;height:44px}
.map-caution{display:block;color:#8a631e;font-size:9px;line-height:1.35}
/* consistent grid row alignment without forcing long notes to overflow input fields */
.input-grid{align-items:start}
.input-grid>.field{height:100%;}
.input-grid>.field>.field-name{min-height:36px;align-items:flex-end}
.input-grid>.field>.field-help{min-height:27px}
/* The rail is viewport-fixed even when a keyboard is visible. */
.sticky-status{position:fixed!important;top:var(--visual-top,0px)!important;left:0!important;right:0!important;z-index:2147480000!important;contain:layout style}
body{padding-top:var(--sticky-height,158px)!important}
html{scroll-padding-top:var(--sticky-height,158px)}
.metric-viewport{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
/* iOS keyboard: focus fields can still be reached beneath fixed top rail */
body.keyboard-open .sticky-status{box-shadow:0 3px 12px #0005}

.jump-missing{margin:5px 0 1px;padding:6px 9px;background:#daf7f2;color:#14576a;border:0;border-radius:6px;font-size:10px;font-weight:800}

/* v8.5 requested selective adjustments: stable fixed rail, two drug columns and O2ER references. */
html,body{overflow-x:hidden;max-width:100%;}
.sticky-status{top:0!important;transform:none!important;will-change:auto!important;contain:none!important;overscroll-behavior:contain;}
body.keyboard-open .brandline,body.keyboard-open .alert-strip{display:flex!important;}
body.keyboard-open .metric{min-height:93px!important;}
body.keyboard-open .metric-reference{display:block!important;}
body.keyboard-open .o2er-note{display:block;}
body.keyboard-open .o2er-note[hidden]{display:none;}
.metric-viewport{touch-action:pan-x; overscroll-behavior-x:contain;overscroll-behavior-y:none;}
#drug-dose-panel[open]>.drug-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.drug-item{min-width:0;padding:8px 6px;}
.drug-head{flex-wrap:wrap;align-items:flex-start;}
.drug-head b{font-size:10px;}
.drug-head strong{font-size:9px;}
.drug-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
.drug-inputs label{min-width:0;font-size:9px;line-height:1.25;}
.drug-inputs input{font-size:14px;padding:6px 5px;min-width:0;box-sizing:border-box;}
.drug-inputs .drug-conc{grid-column:1/-1;}
.swan-source-box{border:1px solid #cbdee5;background:#f5fafc;border-radius:12px;padding:10px;margin:10px 0;}
.swan-switch{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;color:#164b63;}
.swan-switch input{width:18px;height:18px;accent-color:#188195;}
.swan-source-box .tiny-note{margin:6px 0 0;}
.er-reference-panel{border:1px solid #c4dfe4;border-radius:13px;background:#f4fbfc;padding:12px;margin:12px 0;color:#214a5c;}
.er-toprow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:8px;}
.er-toprow button{font-size:10px;border-radius:8px;border:1px solid #b6d2db;background:white;color:#1c6c80;padding:7px;white-space:nowrap;}
.er-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.er-result-grid:has(>.er-result[hidden]){grid-template-columns:minmax(0,1fr);}
.er-result{min-width:0;background:white;border:1px solid #d2e6e9;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:3px;}
.er-result[hidden],.swan-inputs[hidden]{display:none!important;}
.er-result small{font-size:10px;color:#5a7481;line-height:1.4;}
.er-result strong{font-size:23px;color:#135b70;font-weight:800;}
.er-result em{font-size:10px;font-style:normal;color:#236d7f;}
.er-caption{font-size:10px;line-height:1.55;margin-top:8px;color:#4b6975;}
.er-safety{margin-top:8px;border-top:1px solid #d2e5e9;padding-top:7px;}
.er-safety summary{cursor:pointer;font-size:11px;font-weight:700;color:#12647d;}
.er-safety p{font-size:11px;line-height:1.65;margin:7px 0;color:#486674;}
@media(max-width:380px){.drug-inputs input{font-size:12px}.er-toprow{font-size:12px}.er-toprow button{font-size:9px}}
/* Drug conversion occupies both columns of its existing parent input grid. */
#drug-dose-panel{grid-column:1 / -1;min-width:0;max-width:100%}
#drug-dose-panel .drug-item{width:100%;}
#drug-dose-panel .drug-head{min-height:42px;}
#drug-dose-panel .drug-inputs label{overflow-wrap:anywhere;}


/* ──────────────────────────────────────────────────────────────────────────
   v8.6 / Deep Teal Clinical Console · VISUAL LAYER ONLY
   Retains all input IDs, calculation logic, data persistence, and icon assets.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg:#071321;--ink:#edf8ff;--muted:#99b7c7;--line:#25485b;
  --navy:#d9f2ff;--navy2:#071523;--blue:#1daecc;--teal:#44d9cf;
  --warn:#f6bb63;--red:#f39a94;--green:#69e2c2;--radius:17px;
  --glass:#102538;--glass2:#0d2031;--glow:rgba(64,205,221,.19);
}
html {background:#071321; scroll-behavior:auto; overscroll-behavior-x:none;}
body {
  background:radial-gradient(ellipse 920px 650px at 88% -130px,rgba(19,130,164,.23),transparent 74%),
    radial-gradient(ellipse 750px 620px at -20% 34%,rgba(12,71,112,.15),transparent 75%),
    linear-gradient(162deg,#071321 0%,#0a1a2b 51%,#081522 100%);
  color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select {color:inherit;}
a {color:#83e8ed;text-underline-offset:3px;}
::selection{background:#1fb7c766;color:white;}
.wrap{width:min(920px,calc(100% - 26px));}
/* Keep the clinical scoreboard stable; four cards appear first, two via swipe. */
.sticky-status {
  z-index:2147480000!important;
  top:0!important;left:0!important;right:0!important;
  position:fixed!important;transform:none!important;will-change:auto!important;contain:none!important;
  color:#f5fbff;
  background:linear-gradient(122deg,rgba(6,23,39,.985) 0%,rgba(12,46,66,.985) 55%,rgba(7,45,64,.985) 100%);
  border-bottom:1px solid rgba(92,218,222,.37);
  box-shadow:0 8px 24px #010b15aa, inset 0 -1px 0 rgba(129,255,243,.045);
  padding:7px max(11px,calc((100% - 920px)/2)) 8px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.sticky-status::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#28cfda 30%,#40b1e8 68%,transparent);opacity:.62;pointer-events:none;}
.brandline{margin-bottom:6px;line-height:19px;min-height:21px;color:#d9f8ff;}
.brandline b{font-size:13px;font-weight:800;letter-spacing:.025em;}
.brand-dot{width:6px;height:6px;box-shadow:0 0 8px #32e6de;background:#4fe7d8;}
.vtag{font-size:10px;font-weight:700;color:#bce7f3;opacity:1;margin-left:3px;}
.mode-tag{border:1px solid rgba(102,229,216,.28);color:#9af5e9;background:rgba(37,176,171,.075);padding:2px 8px;font-size:10px;}
.metric-viewport{border-radius:11px;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x proximity;}
.metric-grid{width:150%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px;}
.metric{
 min-height:74px!important;max-height:82px; padding:7px 4px 6px!important;
 gap:2px!important;justify-content:center;border:1px solid #4f829564;
 background:linear-gradient(152deg,rgba(39,95,118,.31),rgba(15,50,75,.45));
 border-radius:10px;box-shadow:inset 0 1px rgba(255,255,255,.055);
}
.metric.has-value{border-color:rgba(91,235,225,.4);}
.metric[data-metric=total]{background:linear-gradient(150deg,rgba(10,117,127,.37),rgba(12,62,83,.59));border-color:#46d7ca5e;}
.metric[data-metric=o2er]{background:linear-gradient(145deg,rgba(39,128,115,.4),rgba(11,72,75,.7));border-color:#6ae9c96b;}
.metric small:not(.metric-reference){font-size:10px!important;font-weight:700;line-height:1.18;min-height:13px!important;letter-spacing:-.15px;color:#c8e6f5;white-space:normal;}
.metric strong{font-size:20px!important;line-height:1.1;font-weight:820;letter-spacing:-.75px;color:#fff;}
.metric-unit{font-size:8px;color:#a9cbdc;line-height:1.2;}
.metric span{display:none!important;} /* Quality remains available via result tap and reporting */
.metric-reference{font-size:8px!important;color:#93e1d8!important;min-height:12px!important;line-height:1.1;letter-spacing:-.22px;white-space:normal;}
.metric:active{background:#244c5d;}
.o2er-toolbar{margin-top:5px;gap:9px;}
.o2er-peek,.o2er-help-button{min-height:24px;line-height:15px;border-radius:8px;}
.o2er-peek{border:1px solid rgba(48,218,221,.45);background:rgba(20,124,143,.22);box-shadow:none;color:#bbfbf7;font-size:10px;padding:3px 8px;font-weight:750;max-width:72%;}
.o2er-peek span{color:#90f8eb;font-size:12px;}
.o2er-help-button{border-color:rgba(144,205,222,.31);background:#17394b7a;color:#bddce6;font-size:10px;padding:3px 9px;}
.alert-strip{margin-top:5px;font-size:10px;line-height:15px;min-height:15px;color:#f1c58a;font-weight:650;}
.missing-trigger{margin-top:2px;font-size:9px;line-height:11px;color:#8edbd6;padding:2px 0;}
/* Long explanations overlay the content instead of enlarging the fixed header. */
.o2er-note,.missing-detail{
  position:absolute;left:max(12px,calc((100% - 920px)/2));right:max(12px,calc((100% - 920px)/2));
  top:calc(100% + 3px);z-index:20001;max-height:min(40vh,240px);overflow-y:auto;
  box-shadow:0 14px 35px #000c;
  background:#0e2c40;color:#d6f4fa;border:1px solid #4d9db1aa;
  border-radius:12px;padding:12px 14px;font-size:11px;line-height:1.5;
}
.o2er-note strong{color:#fff;}
.missing-detail[hidden],.o2er-note[hidden]{display:none!important;}
body.keyboard-open .brandline{display:flex!important;}
body.keyboard-open .metric{min-height:74px!important;max-height:82px!important;}
body.keyboard-open .metric-reference{display:block!important;}
body.keyboard-open .alert-strip{display:block!important;}
body.keyboard-open .o2er-note:not([hidden]){display:block;}
/* Intro, whitespace, and glass panels. */
.intro{margin:15px 3px 12px;}
.intro h1{color:#f4faff;font-size:20px;font-weight:820;letter-spacing:-.45px;}
.intro h1::before{content:'HEMODYNAMIC MONITOR  /  ';display:block;font-size:9px;letter-spacing:1.55px;color:#73d5d6;font-weight:800;margin-bottom:5px;}
.intro p{color:#9dbacb;font-size:11px;line-height:1.6;}
.card,.section.card{
  background:linear-gradient(160deg,rgba(21,48,66,.94),rgba(12,33,50,.97));
  border:1px solid #325466ad;
  box-shadow:0 12px 25px rgba(0,7,17,.21),inset 0 1px rgba(238,255,255,.045);
  border-radius:18px;
}
.section{padding:16px;margin:12px 0;scroll-margin-top:180px;}
.section-title h2{color:#f1faff;font-size:17px;}
.section-title p{color:#9bb6c6;}
.subhead{border-bottom:1px solid #34546c90;margin-top:12px;margin-bottom:13px;}
.subhead b{color:#d5f3ff;}
.subhead span{color:#75b3bf;}
.btn{background:linear-gradient(160deg,#143247,#10293b);color:#ccedf4;border:1px solid #3a7187;border-radius:10px;}
.btn.primary{background:linear-gradient(120deg,#168b9d,#0a596e);color:white;border-color:#36b9c1;}
.btn.accent{background:linear-gradient(120deg,#12a9b1,#0c7f9a);color:#fff;border-color:#35bdc0;}
.btn.quiet{color:#ffc1a9;}
.clinical-disclaimer{background:#35291d;border:1px solid #6a5232;border-left:3px solid #e9b86d;color:#efdbbc;font-size:10px;line-height:1.6;}
.model-explain{background:rgba(32,97,120,.28);border:1px solid #2e687b99;color:#b4dee8;font-size:10px;}
.field{gap:5px;}
.field-name{color:#c3e3ee;font-size:12px;}
.field-name small{color:#8fb0c2;}
.field input,.field select,.drug-inputs input{
  background:#081d2d;color:#f4faff;border:1px solid #416b80;border-radius:10px;
  box-shadow:inset 0 2px 2px rgba(0,0,0,.12);
}
.field input,.field select{height:45px;}
.field input:focus,.field select:focus,.drug-inputs input:focus{
  border-color:#4be1dc;box-shadow:0 0 0 3px rgba(42,218,218,.18);outline:none;
}
.field input::placeholder,.drug-inputs input::placeholder{color:#7696a7!important;}
.field input.sample{background:#362c20;border-color:#b68d54;color:#ffe4b8;}
.field input.invalid{background:#46232a;border-color:#f17f8a;}
.field-help{color:#90aaba;line-height:1.4;}
.reference-line{color:#87b0be;font-size:9px;line-height:1.45;}
.reference-line:first-letter{color:#62d7d0;}
.mini-action{background:#173849;border:1px solid #39677b;color:#94eae9;}
.helper-band,.output-row,.derived-info,.model-flow{
  background:#0c3341;color:#b9eff0;border:1px solid #326e7b9c;
}
.output-row b,.derived-info b,.model-flow-num{color:#89fcdb;}
.small-notice,.summary-note,.accounting{
  background:#30291f;border:1px solid #69573b;color:#f2d2a0;
}
.tiny-note{color:#92b3c2;}
.inline-details{border-top:1px solid #305062;}
.inline-details>summary{color:#7be9e4;}
.device-choice{background:#102d40;border:1px solid #395c6e;color:#cde9f2;}
.device-choice:has(input:checked){border-color:#36d4ca;background:#0c4e55;color:#b9fff6;}
.device-choice input,.toggle-line input,.swan-switch input{accent-color:#38d9d3;}
.device-settings,.swan-source-box,.er-reference-panel{
  background:#0b2739;color:#c4e3ec;border:1px solid #386073;
}
.device-settings>b{color:#d6f4f8;}
.collapsible>summary{background:linear-gradient(125deg,#152e40,#102437);}
.collapsible>summary span:first-child{color:#ebfaff;}
.collapsible>summary small{color:#91b1c3;}
.chevron{color:#91e9e6;}
.detail-content{border-top:1px solid #38576b;}
.derived{background:#0a2738;border:1px solid #355c6f;}
.derived strong{color:#dcfcff;}
.derived small{color:#a1bfcb;}
.derived p{color:#8daab9;}
.hemo-extra{border-color:#335b6f;color:#adc9d1;}
.hemo-extra b{color:#91e9e6;}
.hemo-unit{color:#90b4c2;}
.findings{border-top:2px solid #36b5c0;}
.finding{background:#102e40;border:1px solid #365c70;color:#cce2ee;}
.finding b{color:#e7f7ff;}
.finding small{color:#9bbccc;}
.finding.caution{background:#382c1b;border-color:#836344;color:#e8c18a;}
.finding.caution b{color:#ffe3a7;}
.finding.urgent{background:#43232c;border-color:#98525e;color:#f9cbd2;}
.finding.urgent b{color:#ffd1d6;}
.history,.report-preview{background:#0b2738;border:1px solid #35566a;color:#b8d8e3;}
footer{color:#688ea0;}
/* O2ER input/results with minimal visual changes; behavior untouched. */
.er-toprow{color:#e3f5fb;}
.er-toprow button{background:#1a3b4a;border:1px solid #377488;color:#b7eeef;}
.er-result{background:#112f42;border:1px solid #3b6275;color:#d9edf3;}
.er-result small{color:#a5bfcb;}
.er-result strong{color:#e7fcff;}
.er-result em{color:#89d8d8;}
.er-caption,.er-safety p{color:#a6c7d4;}
.er-safety{border-top:1px solid #3d6476;}
.er-safety summary{color:#81e8e5;}
.swan-switch{color:#d6f4f7;}
.drug-item{background:#0c2c3d;border:1px solid #365d70;color:#cde6ed;}
.drug-head b{color:#e9f9fd;}
.drug-head strong{color:#7ceae2;}
.drug-inputs label{color:#abc6d2;}
.drug-inputs input[readonly]{background:#114445;border-color:#317e7b;color:#a4fff1;}
.drug-item small{color:#8faebd;}
#systemic-flow-panel{background:#0b3341;border:1px solid #3b7782;color:#c1eaf1;}
.model-flow small{color:#94b4c1;}
.map-caution{color:#e1bc84;}
.jump-missing{background:#155c62;color:#d5fcf8;}
/* Mobile: two-column field layout stays intact, text doesn't overlap. */
@media(max-width:600px){
 .sticky-status{padding-left:10px;padding-right:10px;}
 .metric-grid{gap:4px;}
 .metric{min-height:74px!important;}
 .metric strong{font-size:18px!important;}
 .metric small:not(.metric-reference){font-size:9px!important;}
 .metric-reference{font-size:7.5px!important;}
 .intro{margin-top:14px;}
 .intro h1{font-size:19px;}
 .section{padding:14px;}
 .input-grid{gap:12px 10px;}
 .input-grid>.field>.field-name{min-height:34px;}
 .input-grid>.field>.field-help{min-height:0;}
 .drug-item{padding:8px 7px;}
 .drug-inputs input{font-size:14px;}
}
@media(max-width:350px){
 .metric strong{font-size:16px!important;}
 .metric small:not(.metric-reference){font-size:8px!important;}
 .metric-reference{font-size:7px!important;}
 .o2er-peek{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;}}

/* Final mobile score rail density: share the alert row with the missing-data help. */
.sticky-status{padding-top:6px;padding-bottom:6px;}
.brandline{margin-bottom:5px;}
.metric{min-height:67px!important;max-height:72px!important;padding:5px 4px!important;}
.metric strong{font-size:19px!important;}
.metric small:not(.metric-reference){font-size:9px!important;}
.o2er-toolbar{margin-top:4px;}
.o2er-peek,.o2er-help-button{min-height:23px;padding-top:2px;padding-bottom:2px;}
.alert-strip{display:block;float:left;width:calc(100% - 87px);margin-top:4px;line-height:17px;min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.missing-trigger{display:block;float:right;text-align:right;width:84px;margin-top:4px;padding:0;line-height:17px;font-size:9px;white-space:nowrap;text-decoration:underline dotted;text-underline-offset:3px;}
.sticky-status::after{content:'';display:block;clear:both;}
body.keyboard-open .metric{min-height:67px!important;max-height:72px!important;}
@media(max-width:600px){.metric{min-height:67px!important}.metric strong{font-size:18px!important}.metric small:not(.metric-reference){font-size:9px!important}}
@media(max-width:350px){.metric strong{font-size:16px!important}}

/* v8.6 iPhone safe-area appearance fix: no live background blur or transparent rail */
.sticky-status {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(122deg,#061727 0%,#0c2e42 55%,#072d40 100%)!important;}


/* v8.7: ONE vertical scroller + a non-scrolling clinical scoreboard */
html,body{margin:0!important;padding:0!important;width:100%!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none!important;scroll-behavior:auto!important;}
#app-shell{display:flex;flex-direction:column;position:relative;width:100%;height:var(--app-height,100dvh);max-height:100%;overflow:hidden!important;isolation:isolate;}
.sticky-status{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;will-change:auto!important;flex:0 0 auto;width:100%;z-index:20!important;box-shadow:0 2px 14px rgba(0,0,0,.28)!important;}
#app-scroll{min-height:0;min-width:0;flex:1 1 auto;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;scroll-behavior:auto!important;scroll-padding-top:14px;padding-bottom:env(safe-area-inset-bottom,0px);}
#app-scroll .wrap{margin:0 auto;}
.metric-viewport{overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:none!important;-webkit-overflow-scrolling:touch;}
.metric-grid{scroll-snap-type:none!important;}
body.keyboard-open .sticky-status{position:relative!important;}
body.keyboard-open .metric{min-height:74px!important;max-height:82px!important;}
#app-scroll input:focus,#app-scroll select:focus{scroll-margin-top:18px;}
#swan-fields{display:block!important;} #swan-fields .input-grid{margin-top:8px;}
.svr-config{border:1px solid rgba(75,197,213,.42);border-radius:12px;padding:10px;margin:8px 0;background:rgba(35,116,138,.09)}
.svr-config[hidden]{display:none!important}
.svr-config label{display:block;font-size:12px;font-weight:750;color:var(--ink);margin-bottom:5px;}
.svr-config select{width:100%;min-height:42px;background:#142e42;color:#eafaff;border:1px solid #4b8195;border-radius:8px;padding:7px;font-size:12px;}
.derived-output{display:flex;align-items:center;min-height:43px;background:rgba(22,89,111,.18);border:1px solid #416e84;border-radius:10px;padding:7px 11px;font-size:19px;color:#d6fdf8;font-weight:800;}
#drug-dose-panel{border-top:1px solid var(--line);margin-top:10px;}
#drug-dose-panel>.drug-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
#drug-dose-panel .drug-item{min-width:0;}
#drug-dose-panel .drug-head{min-height:36px;}
#drug-dose-panel .drug-inputs{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:365px){#drug-dose-panel>.drug-list{gap:5px!important;}#drug-dose-panel .drug-item{padding:5px 4px;}}


/* v8.8: iPhone safe-area, stable keyboard/scroll, compact score viewport */
html,body{height:100%!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;overscroll-behavior:none!important;scroll-behavior:auto!important;background:#071827!important;}
#app-shell{position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;height:var(--stable-app-height,100vh)!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;isolation:isolate!important;padding-top:env(safe-area-inset-top,0px)!important;padding-bottom:0!important;background:#071827!important;transform:none!important;}
/* solid status-bar background prevents content showing behind iPhone clock */
#app-shell::before{content:'';position:absolute;z-index:19;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#071827;pointer-events:none;}
.sticky-status{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;will-change:auto!important;flex:0 0 auto!important;overflow:visible!important;z-index:21!important;width:100%!important;background:#082839!important;box-shadow:0 2px 10px #0008!important;padding-top:5px!important;padding-bottom:5px!important;}
.sticky-status *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#app-scroll{flex:1 1 auto!important;min-height:0!important;min-width:0!important;max-height:none!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;touch-action:pan-y!important;scroll-behavior:auto!important;scroll-padding-top:12px!important;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px) + var(--keyboard-occlusion,0px))!important;}
#app-scroll .wrap{margin:0 auto!important;}
.metric-viewport{overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x!important;overscroll-behavior-x:contain!important;overscroll-behavior-y:none!important;-webkit-overflow-scrolling:touch!important;scroll-snap-type:none!important;}
.metric-grid{width:216%!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:5px!important;scroll-snap-type:none!important;}
.metric{min-width:0!important;min-height:68px!important;max-height:75px!important;padding:4px 3px!important;scroll-snap-align:none!important;}
.metric small:not(.metric-reference){font-size:9px!important;line-height:1.13!important;min-height:12px!important;}
.metric strong{font-size:18px!important;}
.metric .metric-reference{font-size:7px!important;line-height:1.1!important;min-height:12px!important;}
.metric[data-metric=oxy]{background:linear-gradient(145deg,#103b4a,#0d5260);border-color:#58bfca8c;}
.metric[data-metric=total]{background:#153b4a;border-color:#2bb9b48c;}
body.keyboard-open .sticky-status{position:relative!important;transform:none!important;}
body.keyboard-open .metric{min-height:68px!important;max-height:75px!important;}
body.keyboard-open .brandline,body.keyboard-open .alert-strip{display:flex!important;}
body.keyboard-open .metric-reference{display:block!important;}
#app-scroll input,#app-scroll select,#app-scroll textarea{font-size:16px!important;min-height:42px;transform:none!important;scroll-margin-top:12px;}
#app-scroll .input-grid{gap:10px 9px!important;align-items:start!important;}
#app-scroll .field{gap:3px!important;min-width:0!important;}
#app-scroll .input-grid>.field>.field-name{min-height:26px!important;align-items:end!important;line-height:1.2!important;}
#app-scroll .input-grid>.field>.field-help{min-height:0!important;line-height:1.3!important;}
#app-scroll .reference-line{line-height:1.3!important;}
#app-scroll .section{padding:13px!important;margin:9px 0!important;}
#app-scroll .subhead{margin:8px 0 10px!important;}
#app-scroll .intro{margin-top:12px!important;margin-bottom:8px!important;}
@media(max-width:390px){.metric-grid{gap:4px!important}.metric strong{font-size:16px!important}.metric small:not(.metric-reference){font-size:8px!important}.metric .metric-reference{font-size:6.8px!important;}.sticky-status{padding-left:8px!important;padding-right:8px!important;}}
@media(prefers-reduced-motion:reduce){.metric-viewport,#app-scroll{scroll-behavior:auto!important;}}

/* v8.9: keyboard-safe anchoring; final cascade takes precedence. */
html,body{height:100%!important;overflow:hidden!important;overscroll-behavior:none!important;}
#app-shell{
 position:fixed!important;top:0!important;left:0!important;right:0!important;
 width:100%!important;bottom:auto!important;
 height:var(--visual-available-height,100dvh)!important;
 max-height:none!important;min-height:0!important;
 display:flex!important;flex-direction:column!important;
 transform:translate3d(0,var(--visual-offset-y,0px),0)!important;
 -webkit-transform:translate3d(0,var(--visual-offset-y,0px),0)!important;
 overflow:hidden!important;
 box-sizing:border-box!important;
}
.sticky-status{
 position:relative!important;top:auto!important;
 transform:none!important;-webkit-transform:none!important;
 flex:0 0 auto!important;z-index:30!important;
 opacity:1!important;filter:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 background:#082839!important;
}
#app-scroll{
 position:relative!important;flex:1 1 auto!important;min-height:0!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 overscroll-behavior-y:contain!important;
 -webkit-overflow-scrolling:touch;
 padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;
 scroll-behavior:auto!important;
 touch-action:pan-y!important;
}
/* Never resize the metric cards simply because a numeric input gains focus. */
body.keyboard-open .metric{min-height:68px!important;max-height:75px!important;}
body.keyboard-open .brandline,body.keyboard-open .alert-strip{display:flex!important;}
body.keyboard-open .metric-reference{display:block!important;}
/* The top metric carousel takes horizontal gestures; the form takes vertical. */
.metric-viewport{touch-action:pan-x!important;overflow-y:hidden!important;}
#app-scroll input,#app-scroll select,#app-scroll textarea{font-size:16px!important;}

/* v8.10: stationary root, visually pinned score rail and truly usable input viewport.
   Both elements are positioned to the iOS visual viewport independently.
   Unlike v8.9, the whole app is NEVER translated or resized on focus. */
html,body{overflow:hidden!important;overscroll-behavior:none!important;scroll-behavior:auto!important;}
#app-shell{
 position:fixed!important;inset:0 auto auto 0!important;
 width:100%!important;height:var(--stable-layout-height,100vh)!important;
 max-height:none!important;min-height:0!important;
 padding:0!important;overflow:hidden!important;
 transform:none!important;-webkit-transform:none!important;
 display:block!important;isolation:isolate!important;
}
#app-shell::before{display:none!important;}
.sticky-status{
 position:absolute!important;top:calc(var(--visible-top,0px) + env(safe-area-inset-top,0px))!important;
 left:0!important;right:0!important;width:100%!important;
 height:auto!important;min-height:0!important;z-index:40!important;
 flex:none!important;transform:none!important;-webkit-transform:none!important;
 background:#082839!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 transition:none!important;
}
#app-scroll{
 position:absolute!important;left:0!important;right:0!important;bottom:auto!important;
 top:calc(var(--visible-top,0px) + env(safe-area-inset-top,0px) + var(--pinned-rail-height,165px))!important;
 height:max(80px,calc(var(--visible-height,100vh) - env(safe-area-inset-top,0px) - var(--pinned-rail-height,165px)))!important;
 max-height:none!important;min-height:0!important;
 width:100%!important;flex:none!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 padding-bottom:12px!important;
 overscroll-behavior-y:contain!important;
 scroll-behavior:auto!important;
 overflow-anchor:none!important;
 -webkit-overflow-scrolling:touch!important;
 touch-action:pan-y!important;
 transition:none!important;transform:none!important;
}
body.keyboard-open #app-scroll{padding-bottom:12px!important;}
#app-scroll input,#app-scroll select,#app-scroll textarea{font-size:16px!important;scroll-margin-top:8px!important;}
/* Metric heights remain exactly the same whether focused or not. */
body.keyboard-open .sticky-status{position:absolute!important;}
body.keyboard-open .metric{min-height:68px!important;max-height:75px!important;}
body.keyboard-open .brandline,body.keyboard-open .alert-strip{display:flex!important;}
body.keyboard-open .metric-reference{display:block!important;}
@media(prefers-reduced-motion:reduce){#app-scroll,.metric-viewport{scroll-behavior:auto!important;}}