/* Simulator workbench: presets | ECG and display | heart settings.
   Advanced changes only the inspector. Full width is an explicit display action. */
.display-dock{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.display-dock .view-bar{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;border:0;background:transparent;overflow:visible;max-width:100%;min-width:0;mask-image:none!important}
.display-primary,.display-secondary,.display-analysis{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;min-width:0}
.display-secondary,.display-analysis{border-top:1px solid var(--line);padding-block:6px}
.display-primary label,.display-secondary label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--ink-2);white-space:nowrap}
.display-dock select,.display-dock button{min-height:34px;font-size:12px;padding:5px 8px}
.display-dock .display-check{min-height:34px;cursor:pointer;padding:0 4px}
.display-dock .display-check input{position:static;opacity:1;width:15px;height:15px;margin:0;pointer-events:auto}
.display-analysis .measure-actions{display:inline-flex;gap:4px}
.display-analysis #fullscreen{margin-left:auto}
.display-primary #wide-view{min-width:88px}
.display-primary #ecg-theme{width:101px}
.display-primary #speed{width:101px}
.display-primary #gain{width:102px}
.display-secondary #lead{width:64px}
.display-secondary #motion{width:90px}
.transport{margin-top:8px}
.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex:none}
.inspector-head h2{font-size:15px;font-weight:650;color:var(--navy-900)}
.inspector-head p{margin:2px 0 0;font-size:12px;color:var(--muted)}
#advanced-toggle{font-size:12px;min-height:34px;padding:5px 10px;flex:none}
#advanced-toggle::after{content:'+';font-size:16px;line-height:1}
#advanced-toggle[aria-expanded=true]{background:var(--navy-900);color:white;border-color:var(--navy-900)}
#advanced-toggle[aria-expanded=true]::after{content:'−'}
.inspector-hint{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--muted);flex:none}
#workspace-tools .layer-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 0 12px;margin:0;border-bottom:1px solid var(--line);background:transparent;box-shadow:none}
#workspace-tools #advanced-tabs [data-tab]{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start;grid-column:auto!important;min-height:34px!important;padding:6px 8px!important;border:1px solid var(--line);border-radius:5px;background:white;box-shadow:none!important;font-size:12px}
#workspace-tools #advanced-tabs [data-tab=settings]{grid-column:1/-1!important}
#workspace-tools .layer-tabs [data-tab][aria-selected=true]{background:var(--navy-100);border-color:var(--navy-700);color:var(--navy-900)}
#workspace-tools .layer-tabs .tab-name{font-size:12px;font-weight:600;color:inherit;white-space:normal}
#workspace-tools .layer-tabs button[data-count]:not([data-count=""])::after{position:static;margin-left:auto;content:attr(data-count);background:var(--navy-100);color:var(--navy-900);border-radius:3px;width:auto;min-width:18px;height:auto;padding:0 4px;font-size:11px}
#workspace-tools .tool-panels{padding-top:14px}
#signal h2:first-child{margin-top:0}
.rail-cue{font-size:12px;line-height:1.45}
#rhythm-change-note{height:auto!important;min-height:calc(3 * 1.45em + 14px)!important;font-size:13px;line-height:1.45;overflow:visible}
/* The narrow desktop rail wraps a typical change note to four lines, so reserve four there. */
@media(min-width:960px){#rhythm-change-note{min-height:calc(4 * 1.45em + 14px)!important}}
.layer-kind{text-transform:none;letter-spacing:0;font-size:11px}
#message{display:block;overflow:auto;-webkit-line-clamp:unset;scrollbar-width:thin}
#message:focus-visible{outline:2px solid var(--teal-600);outline-offset:2px}

/* Keep transient notices out of the controls, with a stable reserved slot. */
#clipping-note,#clipping-note[hidden]{display:flex!important;position:static;transform:none;align-items:center;flex-wrap:wrap;gap:4px 8px;width:100%;max-width:none;height:76px;margin:8px 0 0;padding:8px 10px;box-shadow:none;overflow:auto}
#clipping-note[hidden]{visibility:hidden;pointer-events:none}
#clipping-note button{margin-left:0;flex:none}
#close-clipping{margin-left:auto!important}
#connection-notice{margin:0 0 10px;padding:12px;border:1px solid #ecd39a;border-radius:6px;background:var(--warn-bg);color:var(--warn-ink);font-size:14px;line-height:1.5}
.medication-safety{padding:10px;border-left:3px solid #b88b32;background:var(--warn-bg);font-size:12px;line-height:1.5}
.medication-safety a{color:inherit;text-decoration:underline}

/* A viewport-bound panel keeps Close reachable even on short desktop windows. */
.save-options{position:fixed;left:12px;right:12px;top:calc(var(--nav-h) + 12px);bottom:auto;min-width:0;max-width:440px;width:auto;margin-inline:auto;max-height:calc(100dvh - var(--nav-h) - 32px);box-sizing:border-box;scroll-padding-top:56px}
#close-save{position:sticky;top:-6px;background:var(--surface);z-index:1}
/* At high browser zoom, the navigation can occupy nearly the whole viewport.
   Let this explicit overlay use the available height and keep Close reachable. */
@media(max-height:400px){
  .save-options{top:8px;max-height:calc(100dvh - 16px)}
  .export-menu[open],.app.menu-pinned:has(.export-menu[open]) #monitor-area{z-index:40}
}
#save-replay-tools a{gap:.35em;flex-wrap:wrap}

/* Scrollable settings retain a visible scrollbar; intervals wrap as complete values. */
#layer-list{scrollbar-width:thin;min-height:36px;overflow-y:hidden;padding-bottom:4px;mask-image:none!important}
#measurement-values{flex-wrap:wrap;gap:3px 12px;overflow:visible;white-space:normal;mask-image:none!important}
#measurement-values>div{overflow:visible}
#measurement-values dd{min-width:0!important;overflow:visible;text-overflow:clip}
#measurement-beat{white-space:normal;height:2.8em;overflow:auto}

@media(min-width:960px) and (max-width:1439.98px){
  .measure-strip{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;grid-template-areas:"title scope" "vals vals" "beat beat" "why disc"}
  #measurement-transition{grid-row:5}
}

@media(min-width:960px){
  /* Closing an inspector must not invoke the old Menu/full-width layout. */
  .app,.app:has(#workspace-tools[hidden]){grid-template-columns:208px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"brand brand" "rail head" "rail stage" "rail side" "rail foot"}
  .app:has(#workspace-tools[hidden]) #rhythm-rail{display:block}
  .stage{padding:14px 18px 8px}
  .sim-head{padding-inline:18px}
  .display-dock .view-bar{overflow:visible;flex-wrap:nowrap}
  .display-dock .view-bar>*{flex:auto}
  .workspace-tools-body{padding-top:16px}
}
@media(min-width:1100px){
  .app,.app:has(#workspace-tools[hidden]){grid-template-columns:clamp(208px,15.6vw,248px) minmax(0,1fr) clamp(280px,21.2vw,340px);grid-template-areas:"brand brand brand" "rail head head" "rail stage side" "rail foot side" "rail foot side"}
  #workspace-tools{top:var(--nav-h);height:calc(100dvh - var(--nav-h) - var(--head-h,0px));border-top:0}
  #workspace-tools>.workspace-tools-body{padding:16px 16px 0;max-width:none}
  #workspace-tools .tool-panels{margin-inline:-16px;padding-inline:16px;scrollbar-gutter:stable}
  #tools-toggle{display:none}
  #workspace-tools .layer-tabs{flex:none}
}
@media(min-width:960px) and (max-width:1099.98px){
  .app,.app:has(#workspace-tools[hidden]){grid-template-columns:192px minmax(0,1fr)}
  #workspace-tools{position:static;height:auto;min-height:0;border-left:0}
  #workspace-tools .workspace-tools-body{max-width:800px;margin:0;padding:16px 18px}
}
/* Only Full width changes the workspace geometry. Presentation hides answers
   inside their existing slots so question and answer use the same trace frame. */
@media(min-width:960px){
  .app.full-width,.app.full-width:has(#workspace-tools[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "head" "stage" "foot" "foot"}
  .app.full-width #rhythm-rail,.app.full-width #workspace-tools{display:none!important}
  .app.full-width #tools-toggle{display:none}
  body.answers-hidden #rhythm-rail,body.answers-hidden #workspace-tools{visibility:hidden}
}
#choose-rhythm{display:none}
@media(max-width:959.98px){
  .app{grid-template-areas:"brand" "head" "stage" "side" "rail" "foot"}
  .app:not(.layout-ready) #workspace-tools{display:none}
  .display-dock .view-bar{display:flex!important;max-width:100%;margin:0;overflow:visible}
  .display-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
  .display-primary label{justify-content:space-between;min-width:0;gap:4px;font-size:11px}
  .display-primary #wide-view{width:100%}
  .display-primary select{min-width:0;width:auto!important;max-width:108px;padding-inline:4px}
  .display-primary #gain{max-width:none;width:115px!important;flex-shrink:0}
  .display-primary .display-check{grid-column:1/-1;justify-content:flex-start}
  .display-secondary,.display-analysis{gap:6px;padding:6px 8px}
  .display-dock button,.display-dock select{font-size:12px}
  .display-analysis #fullscreen{margin-left:0}
  .display-dock .display-check{min-height:44px}
  .display-analysis #presentation{min-width:122px;padding-inline:8px}
  .display-analysis .measure-actions{gap:4px}
  .display-secondary .vb-lead{font-size:11px}
  .display-secondary #lead{width:60px}
  .display-primary #wide-view{font-size:13px}
  .transport-dock{margin-left:0;flex:1 1 100%;order:3;display:flex;flex-wrap:wrap;gap:6px}
  #tools-toggle,#choose-rhythm{flex:1 1 120px;width:auto;font-size:14px!important;gap:6px;padding-inline:12px}
  #choose-rhythm{display:inline-flex}
  #tools-toggle::before{content:none}
  .workspace-tools-body{padding:16px 12px}
  .back-monitor:first-child{display:none}
  .app.full-width #rhythm-rail,.app.full-width #workspace-tools,.app.full-width #tools-toggle,.app.full-width #choose-rhythm{display:none!important}
  body.answers-hidden #rhythm-rail,body.answers-hidden #workspace-tools{display:none!important}
  body.answers-hidden #tools-toggle,body.answers-hidden #choose-rhythm{visibility:hidden}
  /* Phones: the notice sits in the page flow below the monitor controls (never floating over preset buttons) and takes
     no room while hidden (review H4). When it appears it only moves content below the controls, by its own height. */
  #clipping-note{display:flex!important;position:static;transform:none;align-items:center;flex-wrap:wrap;gap:4px 8px;width:100%;max-width:none;height:auto;margin:8px 0 0;padding:8px 10px;box-shadow:none;overflow:visible}
  #clipping-note[hidden]{display:none!important}
  #clipping-note button{margin-left:0;flex:none}
  #measurement-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;gap:4px 12px}
  #measurement-values>div{flex-wrap:wrap;gap:2px 4px}
  #layer-list{height:52px}
  .head-rate{flex-direction:column;align-items:flex-end;gap:3px}
  .head-rate-label{display:block;position:static;width:auto;height:auto;padding:0;overflow:visible;clip-path:none;white-space:normal;font-size:11px;max-width:150px}
  .display-dock button,.display-dock select{min-height:44px}
  .display-dock .display-check input{width:20px;height:20px}
}
@media(max-width:359.98px){.display-primary{grid-template-columns:minmax(0,1fr)}}
@media print{.display-dock{display:none}}

/* Detailed feedback must remain readable at ordinary desktop widths. */
#setup-details.rate-warning{white-space:normal;overflow:visible;text-overflow:clip}
#measure-readout{top:42px}
#measurement.is-error,#measure-readout.is-error{color:#7a4718}
#measure-readout.is-error{background:#fff6e8;border-color:#b88b32}
.device .screen{scrollbar-color:#72879a #182b40;scrollbar-width:thin}
input[aria-invalid=true]{outline:2px solid #a33b32;outline-offset:1px}
/* At high zoom, let the page scroll instead of stacking a large fixed search
   header over the available rhythm choices. */
@media(max-height:500px){
  .brand-bar,#rhythm-rail .rail-head{position:static}
  .app.menu-pinned #monitor-area{position:static}
}

/* Save → Copy link. The fallback field appears only when the clipboard is unavailable. */
.share-link{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line-2)}
.share-link p{white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.35;color:var(--muted);margin:4px 6px}
.share-link #copy-link-status{margin:0 6px;font-size:12px;color:var(--ink-2)}
/* F24: an empty status stays in the accessibility tree (so the first message is announced) but out of the layout. */
.share-link #copy-link-status:empty{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#share-link-field{box-sizing:border-box;width:100%;min-height:34px;padding:4px 8px;font:12px/1.3 ui-monospace,Consolas,monospace}
/* Until a live session starts there is nothing to save, measure or share. */
.export-menu[inert]>summary{opacity:.5;cursor:default}

/* Full screen: the Exit button carries an icon and text; touch screens show the icon only (below). */
.fs-exit-icon{display:none}
/* Touch screens have no R/C/F/Space or Esc keys to press: hide the key hints and give Exit full screen a 44 px
   ✕ in the bottom-right corner, the one place the monitor leaves empty, so it covers neither the trace title nor the
   REC badge (review M7, M2). */
@media (hover:none) and (pointer:coarse){
  .shortcuts,.key-help{display:none!important}
  .monitor-canvas-wrap:fullscreen .fs-hint{left:auto;top:auto;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));transform:none;padding:0;background:none;gap:0}
  .monitor-canvas-wrap:fullscreen .fs-hint>.fs-keys,.fs-exit-text{display:none}
  .fs-exit-icon{display:inline}
  .monitor-canvas-wrap:fullscreen #exit-fullscreen{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:1;justify-content:center}
}

/* Teaching queue and hidden practice (review S2). The queue controls keep their box while answers are hidden, so the
   display row (and the monitor height fitted to it) never changes. The bar hangs from the monitor's top edge into the
   space the hidden header leaves, so hiding answers moves nothing. */
.teach-queue{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
#queue-count{font-size:12px;color:var(--muted);white-space:nowrap;min-width:9ch}
body.answers-hidden .teach-queue{visibility:hidden}
.device{position:relative}
.hidden-bar{position:absolute;left:10px;right:10px;bottom:100%;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;padding:6px 8px 6px 12px;background:var(--surface);border:1px solid var(--line-2);border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 -2px 6px rgba(7,26,54,.06)}
.hidden-bar-text{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;flex:1 1 auto;min-width:0;margin:0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.hidden-bar-label{font-weight:650;color:var(--navy-900);white-space:nowrap}
#hidden-status{color:var(--muted);font-variant-numeric:tabular-nums}
.hidden-bar-actions{display:flex;flex-wrap:nowrap;gap:6px;margin-left:auto}
.hidden-bar button{min-height:34px;padding:4px 12px;font-size:13px;white-space:nowrap}
@media(max-width:600px){
  .hidden-bar{left:4px;right:4px;padding:6px}
  .hidden-bar-text{flex-basis:100%;padding-left:4px}
  .hidden-bar-actions{flex:1 1 100%}
  .hidden-bar-actions button{flex:1 1 auto;padding-inline:8px}
}

/* Phones (review M1): Choose rhythm opens the preset rail itself as a bottom sheet (modal dialog). */
#rail-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;height:min(88dvh,820px);max-height:none;margin:0;padding:0;border:0;border-radius:14px 14px 0 0;background:var(--surface);color:var(--ink);box-shadow:0 -10px 30px rgba(7,26,54,.25);overflow:hidden}
#rail-sheet[open]{display:flex;flex-direction:column}
#rail-sheet::backdrop{background:rgba(7,26,54,.45)}
#rail-sheet #rhythm-rail{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;border:0;visibility:visible}
#rail-sheet .rail-head{position:static!important;z-index:auto;padding-right:64px;border-bottom:1px solid var(--line)}
#rail-sheet #search-status{right:64px}
#rail-sheet #all-rhythms{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:8px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
#rail-sheet .rail-cue,#rail-sheet .rail-learn,#rail-sheet #rhythm-change-note,#rail-sheet #view-selected-ecg{display:none!important}
#close-rail-sheet{position:absolute;top:8px;right:8px;z-index:3;width:44px;height:44px;min-width:44px;padding:0;font-size:18px;line-height:1}
html:has(#rail-sheet[open]){overflow:hidden}

/* Tablets 768–959 px (review M5/S16): a narrow preset rail on the left, monitor and controls on the right, so picking
   a preset never scrolls the monitor away. The 12-lead fits the column instead of scrolling sideways. Short
   landscape phones keep the phone layout and the sheet. */
@media(min-width:768px) and (max-width:959.98px) and (min-height:501px){
  .app,.app:has(#workspace-tools[hidden]){grid-template-columns:clamp(188px,24vw,216px) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"brand brand" "rail head" "rail stage" "rail side" "rail foot"}
  #rhythm-rail{grid-row:2/-1;position:sticky;top:var(--nav-h);align-self:start;height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;border-top:0;border-bottom:0;border-right:1px solid var(--line);scrollbar-width:thin}
  #rhythm-rail .rail-head{position:sticky;top:0;z-index:2;padding:10px 10px 8px}
  #search-status{top:12px;right:10px}
  #view-selected-ecg,#choose-rhythm{display:none!important}
  .rail-cue,.rail-learn{margin:0 10px 4px}
  #rhythm-change-note{margin:6px 8px 8px}
  #all-rhythms{padding:0 6px 14px}
  .preset-group{flex-direction:column;flex-wrap:nowrap;gap:2px}
  .preset-group h3{padding:0 6px}
  .preset-group button{width:100%;flex:none;justify-content:flex-start;text-align:left;border-color:transparent;background:transparent;padding:6px 8px;line-height:1.3}
  .preset-group button[aria-pressed=true]{background:var(--navy-100);border-color:var(--navy-700);color:var(--navy-900)}
  /* Answers hidden: the rail keeps its column (as on wide screens) so the monitor keeps the same frame. */
  body.answers-hidden #rhythm-rail{display:block!important;visibility:hidden}
  .screen{overflow-x:hidden}
  .screen canvas.twelve{min-width:0;aspect-ratio:4/3;touch-action:pan-y}
  .stage:has(canvas.twelve) .touch-trace-help{display:none}
}

/* Short phones (QA P3, 320x640): the site header (sticky until 2026-10-25) plus the whole preset heading covered ~43% of the screen while
   scrolling presets. Below 700 px height only the "View ECG ↑" return stays pinned; heading and search scroll away.
   Not in the sheet (the rail moves into #rail-sheet) and not at ≤500 px height, which keeps everything static. */
@media(max-width:767.98px) and (min-height:501px) and (max-height:700px){
  .app>#rhythm-rail{position:relative}
  .app>#rhythm-rail>.rail-head{display:contents}
  .app>#rhythm-rail>.rail-head>h2{margin:12px 12px 8px}
  .app>#rhythm-rail #preset-search{display:block;width:calc(100% - 24px);margin:0 12px}
  .app>#rhythm-rail #search-status{top:14px;right:12px}
  .app>#rhythm-rail #view-selected-ecg{position:sticky;top:calc(var(--nav-h) + 6px);z-index:21;width:calc(100% - 24px);margin:6px 12px 8px;box-shadow:0 0 0 6px var(--surface)}
}

/* CHACHA-1024: recording and save status over the on-screen monitor (page UI only, never in PNG or video). */
#record-indicator{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;z-index:2}
#record-indicator[hidden],#save-confirm[hidden],#monitor-connecting[hidden]{display:none}
#record-indicator .rec-dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:rec-blink 1s steps(1,end) infinite}
#record-indicator.paused .rec-dot{animation:none;background:#c9d4de}
@keyframes rec-blink{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#record-indicator .rec-dot{animation:none}}
#save-confirm{position:absolute;right:14px;top:12px;z-index:2;padding:4px 10px;border:1px solid #b9c7d4;border-radius:999px;background:#f5f8fc;color:var(--navy-900);font-size:12px;font-weight:700}
#monitor-connecting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:#c9d8e3;font-size:15px;pointer-events:none}
/* Measure: the readout follows the end of the drawn line. */
#measure-readout{z-index:3}
#measure-readout.at-line{right:auto;max-width:min(300px,calc(100% - 8px));box-shadow:0 2px 8px rgba(7,26,54,.25)}

/* Save menu in two labeled groups; side by side when there is room. */
.save-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.save-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.save-group-title{margin:4px 6px 2px;padding-bottom:4px;border-bottom:1px solid var(--line-2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.save-group>p{white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.35;color:var(--muted);margin:4px 6px}
.save-options .save-group button{border-color:var(--line-2);justify-content:center}
.save-options #capture-png{background:var(--navy-900);border-color:var(--navy-900);color:#fff;font-weight:600}
.save-options #capture-png:not(:disabled):hover{background:var(--navy-800);border-color:var(--navy-800)}
.save-options #capture-png:disabled{background:var(--surface-2);border-color:var(--line-2);color:var(--muted)}
.save-options #close-save{align-self:flex-end;width:auto;border-color:var(--line-2)}
.save-group .share-link{border-top:0;margin-top:6px;padding-top:0}
@media(min-width:760px){
  .save-options{max-width:720px}
  .save-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}