/* Scoped simulator workspace; artwork retains its aspect ratio and live rects. */
html:not([data-sx-exam="on"]) #tabContentExam {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1360px;
  padding: 16px 24px 40px;
}
#tabContentExam #conditionPicker { display: none; }
body[data-active-route="exam"] .sidebar-fab { display: none !important; }
body .picker-drawer { display: block; visibility: hidden; }
body.picker-drawer-open .picker-drawer { visibility: visible; }
@media (min-width: 901px) {
  body .picker-drawer__sheet { inset: 20px auto 20px 20px; width: 380px; max-height: none; border-radius: 20px; transform: translateX(-110%); }
  [dir="rtl"] .picker-drawer__sheet { left: auto; right: 20px; transform: translateX(110%); }
  body.picker-drawer-open .picker-drawer__sheet { transform: none; }
}
/* Keep patient tools/popovers in the workspace's stacking context even when
   the card is too tall to pin. Their local z-indices must not outrank the
   sticky site header as the workspace scrolls underneath it. */
#tabContentExam .stage { gap: 12px; isolation: isolate; }
#tabContentExam .lab-nav { margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
#tabContentExam .lab-nav__chip { flex: 1; justify-content: center; min-height: 44px; border-radius: 10px; }
#tabContentExam .lab-nav__chip.is-active { background: var(--accent-tint); color: var(--accent-strong); }
#tabContentExam .exam-card { padding: 14px 20px 12px; }
#tabContentExam .exam-card.is-workspace-pinned {
  position: sticky; top: var(--exam-pin-top, calc(var(--shell-header-h, 110px) + 12px));
  align-self: start; z-index: 20;
  transition: box-shadow .2s ease;
}
#tabContentExam .exam-toolbar { margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
/* The general exam has no selected protocol or test-specific case strip. */
#tabContentExam[data-exam="overview"] #xcStrip { display: none; }
#tabContentExam .exam-toolbar__actions {
  flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end;
  min-width: 0; max-width: 100%; margin-inline-start: auto;
}
#tabContentExam .exam-current__text { flex-wrap: wrap; }
#tabContentExam .exam-current__name { max-width: 100%; }
#tabContentExam .exam-toolbar-more { position: relative; }
#tabContentExam .exam-card.is-pinned .exam-toolbar__actions > .exam-toolbar-more { display: block !important; }
#tabContentExam .exam-toolbar-more > summary { padding: 8px 12px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; }
#tabContentExam .exam-toolbar-more__body { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-wrap: wrap; gap: 8px; width: min(320px, 80vw); padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px hsl(var(--shadow-color) / .15); }
#tabContentExam .exam-field { max-width: 660px; margin-inline: auto; gap: 20px; width: 100%; box-sizing: border-box; }
/* shared-skin reserves 60px above the SVG for brows. Keep that crop inside
   the patient field after moving its labels into the instrument area. */
#tabContentExam .exam-field:has(.shared-skin-window:not([hidden])) { padding-top: 60px; }
#tabContentExam .eye-svg-wrap { max-width: 280px; }
#tabContentExam .badge-row:empty { display: none; }
#tabContentExam :is(.reflex-readout[data-visible="false"]) { display: none; }
#tabContentExam:is([data-exam="ct-console"], [data-exam="ht-console"], [data-exam="kr-console"]) .shine-btn { display: none; }
#tabContentExam .eye-tag { position: relative; z-index: 110; pointer-events: none; flex-wrap: wrap; justify-content: center; padding: 3px 7px; border-radius: 12px; background: var(--surface); gap: 4px 6px; }
#tabContentExam .eye-tag .pupil-readout { display: inline-block; font: 11px/1.4 "IBM Plex Sans", system-ui, sans-serif; box-shadow: none; padding: 2px 6px; }
#tabContentExam .tool-dock-container { min-height: 78px; padding: 8px 20px; gap: 16px; margin-top: 8px; }
#tabContentExam[data-exam="ct-console"] .exam-field { padding-bottom: 46px; }
#tabContentExam[data-exam="ct-console"] .eye-tag { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; box-sizing: border-box; }
#tabContentExam:not([data-exam="ht-console"]) :is(.head-tilt-bar, #gazeDiagramBar, #gazeDiagramContainer) { display: none; }
#tabContentExam .exam-secondary { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
#tabContentExam .exam-secondary > summary { padding: 14px 18px; color: var(--accent-strong); cursor: pointer; font-weight: 600; }
#tabContentExam :is(#coverTestBtn, #hTestBtn, #camToggleBtn) { display: none; }
#tabContentExam #toolHint { display: none; }
#tabContentExam:is([data-exam="ct-console"], [data-exam="ht-console"]) :is(.tool-slot[data-tool="penlight"], #nearBtn, #cameraBtn),
#tabContentExam[data-exam="ht-console"] .tool-slot[data-tool="prism"],
#tabContentExam[data-exam="ct-console"] .tool-slot[data-tool="target"],
#tabContentExam[data-exam="kr-console"] :is(.tool-slot[data-tool="cover"], .tool-slot[data-tool="target"], #nearBtn, #cameraBtn),
#tabContentExam[data-exam="rapd-lab"] :is(.tool-slot[data-tool="cover"], .tool-slot[data-tool="prism"], .tool-slot[data-tool="target"], #cameraBtn) { display: none; }
#tabContentExam:is([data-exam="ct-console"], [data-exam="ht-console"]) :is(#penlight, #krimsky-prism),
#tabContentExam[data-exam="ct-console"] #fixationTarget,
#tabContentExam[data-exam="kr-console"] :is(#coverPaddle, #fixationTarget),
#tabContentExam[data-exam="rapd-lab"] :is(#coverPaddle, #krimsky-prism, #fixationTarget) { display: none; }
#tabContentExam .ctc-bar { gap: 10px; padding: 12px 16px; }
#ct-console .ctc-heading { display: none; }
#ct-console .ctc-body { grid-template-columns: 190px minmax(0, 1fr); }
#ct-console .ctc-interaction { display: flex; align-items: center; gap: 12px; width: 100%; }
#ct-console .ctc-pad { order: -1; }
#ct-console .ctc-pad, #ct-console .ctc-gaze { direction: ltr; }
#ct-console .ctc-gaze { grid-template-columns: repeat(3, 32px); }
#ct-console .ctc-gaze-cell { width: 32px; height: 32px; min-height: 32px; }
#ct-console .ctc-pad-name, #ct-console .ct-power-num, #ct-console .ctc-record-value { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] #ct-console :is(.ctc-pad-top, .ctc-pad-open) { direction: rtl; }
[dir="rtl"] #ct-console .ctc-steps { border-right: 0; border-inline-end: 1px solid var(--border-soft); }
[dir="rtl"] #ct-console .ctc-step { text-align: start; }
#ct-interaction-note { color: var(--text-soft); font-size: 12px; }
#ct-console .ctc-auto { flex-wrap: wrap; }
#ct-console[data-interaction="manual"] :is(.ctc-auto, .ctc-actions[data-for="cut"], .ctc-actions[data-for="act apct"], .ctc-actions[data-for="spct"], .ct-about-run) { display: none; }
#ct-console[data-interaction="automatic"] :is(.ctc-pad, .ctc-actions[data-for="cut"], .ctc-actions[data-for="act apct"], .ctc-actions[data-for="spct"]) { display: none; }
#ct-console[data-interaction="automatic"] .ct-manual-swap { display: none; }
#ct-console .ctc-findings { grid-column: 1 / -1; border-top: 1px solid var(--border); }
#ct-console .ctc-findings > summary { padding: 14px 18px; cursor: pointer; font-weight: 600; color: var(--accent-strong); }
#ct-console .ctc-side { border: 0; }
#ct-console .ctc-alt-test { display: none; }
#ct-console .ctc-steps { gap: 8px; padding: 12px; }
#ct-console .ctc-step { padding: 8px; }
#ct-console .ctc-main { padding: 12px 16px; gap: 10px; }
#ct-console .ctc-step-hint { display: none; }
#ct-console .ctc-keys { margin: 0; }
#ct-console .ct-fusion { display: none; }
html.picker-drawer-open, body.picker-drawer-open { overflow: hidden; overscroll-behavior: none; }
#tabContentExam :focus-visible, .picker-drawer :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-sx-exam="on"] #ct-console .ctc-interaction,
html[data-sx-exam="on"] #ct-result-source { display: none !important; }
html[data-sx-exam="on"] #ct-console .ctc-findings { display: none !important; }
html[data-sx-exam="on"] #tabContentExam:not([data-exam="ht-console"]) :is(.head-tilt-bar, #gazeDiagramBar, #gazeDiagramContainer) { display: flex; }
@media (max-width: 700px) {
  #tabContentExam .eye-tag .full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:not([data-sx-exam="on"]) #tabContentExam { padding: 10px 10px 32px; }
  #tabContentExam .exam-card { padding: 12px 10px; }
  #tabContentExam .lab-nav { flex-wrap: wrap; }
  #tabContentExam .lab-nav__chip { flex: 1 1 40%; }
  #tabContentExam .exam-toolbar-more__body .exam-toolbar__btn { min-height: 44px; width: auto; padding: 8px 12px; }
  #tabContentExam .exam-toolbar-more__body .exam-toolbar__label { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  #tabContentExam .exam-settings__panel { position: fixed; top: 130px; inset-inline: 16px; width: auto; max-height: calc(100dvh - 150px); box-sizing: border-box; overflow-y: auto; }
  #ct-console .ctc-body { grid-template-columns: minmax(0, 1fr); }
  #ct-console .ctc-steps { border: 0; border-bottom: 1px solid var(--border); }
  #ct-console .ctc-step-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  #ct-console .ctc-step-list li { min-width: 0; }
  #ct-console .ctc-interaction { flex-wrap: wrap; }
  #ct-console button { min-height: 44px; }
  #ct-console .ctc-gaze { grid-template-columns: repeat(3, 44px); }
  #ct-console .ctc-gaze-cell { width: 44px; height: 44px; }
  #tabContentExam .eye-tag .full { font-size: 11px; }
}
@media (min-width: 1100px) {
  /* Column 1 is the reading start: left in English, right in Arabic.
     Only the workspace columns move; clinical eye/tool coordinates stay fixed. */
  #tabContentExam[data-exam="ct-console"] .stage { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  #tabContentExam[data-exam="ct-console"] .lab-nav { grid-column: 1 / -1; }
  #tabContentExam[data-exam="ct-console"] .exam-card { grid-column: 2; grid-row: 2 / 5; padding: 8px 14px; }
  #tabContentExam[data-exam="ct-console"] #ct-console { grid-column: 1; grid-row: 2; }
  /* Every reading section stays in the console column. A sticky live patient
     must never cover a full-width section as it continues down the workflow. */
  #tabContentExam[data-exam="ct-console"] .clinical-panel { grid-column: 1; grid-row: 3; min-width: 0; }
  #tabContentExam[data-exam="ct-console"] .exam-secondary { grid-column: 1; grid-row: 4; min-width: 0; }
  #tabContentExam[data-exam="ct-console"] .exam-secondary .explain-body { min-width: 0; }
  #tabContentExam[data-exam="ct-console"] :is(.clinical-panel-body, .exam-secondary .explain-body) { overflow-wrap: anywhere; }
  #tabContentExam[data-exam="ct-console"] .exam-field { gap: 24px; }
  #tabContentExam[data-exam="ct-console"] .eye-svg-wrap { max-width: 260px; }
  #ct-console .ctc-body { grid-template-columns: minmax(0, 1fr); }
  #ct-console .ctc-steps { border: 0; border-bottom: 1px solid var(--border); padding: 8px; }
  #ct-console .ctc-about-link { order: 1; padding: 6px; font-size: 11px; align-self: flex-start; }
  #ct-console .ctc-step-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  #ct-console .ctc-step-list li { min-width: 0; }
  #ct-console .ctc-step { min-height: 40px; }
  #ct-console .ctc-step-num { width: 22px; height: 22px; flex: 0 0 22px; font-size: 11px; }
  #ct-console .ctc-interaction { flex-wrap: wrap; gap: 6px; }
  #ct-console .ctc-bar { padding: 12px; }
  #ct-console .ctc-cond { gap: 4px; }
  #ct-console .ctc-cond .ct-seg-btn { padding: 5px 8px; }
  #ct-console .ctc-main { padding: 12px; }
  #ct-console .ctc-pad { gap: 6px; }
  #ct-console .ctc-pad kbd { display: none; }
  #ct-console .ctc-coach { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #tabContentExam *, .picker-drawer * { animation-duration: 0s !important; transition: none !important; scroll-behavior: auto !important; }
}

/* General examination: observe and adjust in the same viewport. The original
   instrument nodes stay in their workspace; only their grid placement changes.
   Assessment and the diagnostic consoles retain their own compositions. */
html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-toolbar {
  margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .shine-btn {
  min-height: 44px; margin: 0; padding: 8px 14px;
}
@media (min-width: 1000px) {
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] {
    max-width: 1600px; padding: 10px clamp(16px, 2vw, 32px) 28px;
  }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-card:has(.ct-tool-workspace:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    grid-template-rows: auto auto; align-items: start; gap: 8px 24px;
    padding: 14px 18px; border-radius: 16px;
  }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-toolbar {
    grid-column: 1 / -1; margin: 0;
  }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-field {
    /* Bound the whole field, so shrinking an eye never widens the face's
       socket spacing. shared-skin and tool hit testing use these live rects. */
    grid-column: 1; grid-row: 2; align-self: start;
    max-width: 720px;
    padding-bottom: 0; gap: 20px;
  }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .eye-zone { gap: 6px; }
}
@media (max-width: 999px) {
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-field {
    max-width: 560px; padding-bottom: 8px;
  }
}
@media (min-width: 1000px) and (max-height: 740px) {
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-toolbar {
    padding-bottom: 6px;
  }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .eye-tag { padding-inline: 2px; }
}
@media (max-width: 700px) {
  #tabContentExam .lab-nav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible;
  }
  #tabContentExam .lab-nav__chip {
    min-width: 0; height: auto; min-height: 44px; padding: 6px 4px;
    white-space: normal; font-size: 11px; line-height: 1.4; text-align: center;
  }
  #tabContentExam .lab-nav__dot { display: none; }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-toolbar {
    gap: 6px; padding-bottom: 6px; margin-bottom: 8px;
  }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-current { min-height: 44px; }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-toolbar__actions {
    display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px; width: 100%;
  }
  #tabContentExam[data-exam="overview"] .exam-toolbar__actions > .ht-control {
    grid-column: 1 / -1; grid-row: 2; --htc-h: 46px; width: 100%; box-sizing: border-box;
  }
  #tabContentExam[data-exam="overview"] .ht-control__main { flex: 1; min-width: 0; padding-inline: 6px; }
  #tabContentExam[data-exam="overview"] .ht-control__text {
    position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  }
  #tabContentExam[data-exam="overview"] .ht-control__icon { width: 44px; flex: 0 0 44px; }
  #tabContentExam[data-exam="overview"] .exam-toolbar__actions > :is(.exam-toolbar__btn, .vl-launch, .track-toggle-btn),
  #tabContentExam[data-exam="overview"] .exam-toolbar-more > summary {
    min-height: 44px; height: auto; box-sizing: border-box; padding: 6px;
    justify-content: center; font-size: 11px; white-space: normal; text-align: center;
  }
  #tabContentExam[data-exam="overview"] .vl-launch :is(.vl-launch__label, .vl-launch__wave) { display: none; }
  #tabContentExam[data-exam="overview"] .exam-toolbar__actions > .exam-toolbar__btn { width: 44px; }
  #tabContentExam[data-exam="overview"] .exam-toolbar-more > summary { display: grid; place-content: center; border-radius: 12px; }
  #tabContentExam[data-exam="overview"] .exam-toolbar-more__body { width: min(320px, calc(100vw - 42px)); }
  html:not([data-sx-exam="on"]) #tabContentExam[data-exam="overview"] .exam-field { gap: 10px; padding-bottom: 0; }
}