/* H-Test composed workspace (js/h-test/ui/ht-workspace-layout.js).
   One reading order: toolbar → steps → [eyes | controls] → reference.
   The 9-position pad is the primary control and gets the most room. */
html:not([data-sx-exam="on"]) #tabContentExam.ht-workspace-active { max-width:1600px; padding:6px clamp(10px,2vw,28px) 32px; }
#tabContentExam.ht-workspace-active .stage { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
#tabContentExam.ht-workspace-active #ht-console { grid-column:auto; grid-row:auto; }
#ht-console.ht-workspace { display:flex; flex-direction:column; gap:8px; width:100%; padding:8px 12px; box-sizing:border-box; border-radius:16px; }
#ht-console.ht-workspace > .ctc-body { display:none; }

/* Toolbar */
#ht-console.ht-workspace > .exam-toolbar { margin:0; padding-bottom:4px; border-bottom:1px solid var(--border-soft); gap:6px; }
#ht-console.ht-workspace .exam-toolbar__actions { gap:6px; }
#ht-console.ht-workspace .vl-launch { width:34px; height:34px; padding:0; justify-content:center; }
#ht-console.ht-workspace .vl-launch :is(.vl-launch__label,.vl-launch__wave) { display:none; }
#ht-console.ht-workspace .track-toggle-btn { height:34px; padding:4px 8px; }

/* Steps: one row; "When & why" becomes a quiet link at the end. */
#ht-console.ht-workspace > .ctc-steps { display:flex; align-items:center; gap:8px; padding:0 0 6px; border:0; border-bottom:1px solid var(--border-soft); }
#ht-console.ht-workspace .ctc-step-list { flex:1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:0; overflow:visible; }
#ht-console.ht-workspace .ctc-step { width:100%; min-height:36px; padding:5px 8px; gap:6px; border-radius:8px; }
#ht-console.ht-workspace .ctc-step-num { width:20px; height:20px; flex:0 0 20px; font-size:11px; }
#ht-console.ht-workspace .ctc-step-title { font-size:12px; line-height:1.3; }
#ht-console.ht-workspace .ctc-about-link { order:2; width:auto; margin:0; flex:0 0 auto; min-height:32px; padding:4px 8px; font-size:12px; }

/* Work row */
#ht-console.ht-workspace > .ht-work-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,380px); gap:8px 16px; align-items:start; min-width:0; }
#ht-console.ht-workspace .ht-work-row > #examPatientWorkspace { grid-column:1; grid-row:1; display:grid; gap:8px; padding:0; margin:0; min-width:0; border:0; border-radius:10px; box-shadow:none; }
#ht-console.ht-workspace .ht-work-row > .ctc-main { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:8px; padding:0; min-width:0; }

/* Stage: eyes sized to the viewport, the coach directly under them. */
#tabContentExam.ht-workspace-active .exam-field { max-width:clamp(400px,calc((100dvh - 420px) * 2.2),820px); width:100%; }
#tabContentExam.ht-workspace-active .eye-svg-wrap { max-width:300px; }
#ht-console.ht-workspace .ctc-coach { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 8px; margin:0; padding:8px 10px; border-radius:10px; border-inline-start:3px solid currentColor; }
#ht-console.ht-workspace .ctc-coach-dot { display:none; }
#ht-console.ht-workspace .ctc-coach-body { flex:1 1 220px; min-width:0; }
#ht-console.ht-workspace .ctc-coach-body strong { font-size:15px; line-height:1.3; }
#ht-console.ht-workspace .ctc-coach-body > span { font-size:13px; line-height:1.45; }
#ht-console.ht-workspace .ctc-coach > .pin-eyes-btn { width:auto; min-height:32px; padding:4px 7px; font-size:11px; }
#ht-console.ht-workspace .ctc-coach > .pin-eyes-btn .exam-toolbar__label { position:static; width:auto; height:auto; clip:auto; overflow:visible; }

/* Setup: one compact group (mode · settings · automatic · explain). */
#ht-console.ht-workspace .ctc-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0; padding:8px; border:1px solid var(--border-soft); border-radius:10px; background:var(--surface); }
#ht-console.ht-workspace .ht-interaction { width:auto; flex:0 0 auto; }
#ht-console.ht-workspace .ht-interaction p { display:none; }
#ht-console.ht-workspace .ht-settings { width:auto; flex:1 1 auto; order:3; }
#ht-console.ht-workspace .ht-settings[open] { flex-basis:100%; }
#ht-console.ht-workspace .ht-settings > summary { padding:6px 0; }
#ht-console.ht-workspace .ctc-auto { width:auto; flex:1 1 auto; justify-content:flex-end; order:2; gap:6px; }
#ht-console.ht-workspace[data-interaction="automatic"] .ctc-auto { flex-basis:100%; justify-content:flex-start; }
#ht-console.ht-workspace .ctc-auto .ctc-switch { margin-inline-start:auto; }

/* The 9-position pad: the main control, large targets. */
#ht-console.ht-workspace .ht-pad { gap:6px; padding:8px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-sunken); }
#ht-console.ht-workspace .ht-pad-cell { min-height:58px; font-size:12px; font-weight:600; border-radius:10px; }
#ht-console.ht-workspace .ht-pad-dot { width:11px; height:11px; }
#ht-console.ht-workspace .ht-pad-caption { margin:-2px 2px 0; font-size:11px; }
#ht-console.ht-workspace .ctc-actions { display:flex; flex-wrap:wrap; gap:6px; }
#ht-console.ht-workspace .ctc-actions > .ct-btn { flex:1 1 0; min-width:0; min-height:40px; }
#ht-console.ht-workspace .ctc-actions[hidden] { display:none; }
#ht-console.ht-workspace .ht-next:not([hidden]) { position:sticky; bottom:12px; z-index:5; align-self:stretch; min-height:44px; font-size:14px; box-shadow:0 6px 18px hsl(var(--shadow-color)/.18); }
#ht-console.ht-workspace .ht-learning { margin:0; padding:8px 10px; border-radius:10px; }
#ht-console.ht-workspace .ht-learning-head { min-height:32px; }
#ht-console.ht-workspace .ht-learning-mark { display:none; }

/* Reference: everything secondary, collapsed, full width. */
#ht-console.ht-workspace > .ht-workspace-details { display:grid; gap:8px; padding-top:8px; border-top:1px solid var(--border-soft); min-width:0; }
#ht-console.ht-workspace .ht-workspace-details > :is(details,.clinical-panel,.exam-secondary) { margin:0; min-width:0; }
#ht-console.ht-workspace .ht-workspace-details > .ctc-how { border:1px solid var(--border-soft); border-radius:10px; background:var(--surface); }
#ht-console.ht-workspace .ht-workspace-details > .ht-observations { border:1px solid var(--border-soft); border-radius:10px; }
#ht-console.ht-workspace .ht-workspace-details > .ctc-keys { margin:0; font-size:11px; }

@media (max-width:999px) {
  #ht-console.ht-workspace { padding:8px; }
  #ht-console.ht-workspace > .ht-work-row { display:flex; flex-direction:column; gap:8px; }
  #ht-console.ht-workspace .ht-work-row > :is(#examPatientWorkspace,.ctc-main) { width:100%; box-sizing:border-box; }
  #ht-console.ht-workspace .ctc-step-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:700px) {
  #ht-console.ht-workspace > .ctc-steps { flex-wrap:wrap; }
  #ht-console.ht-workspace .ctc-step-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #ht-console.ht-workspace .ctc-step { flex-direction:column; gap:3px; padding:4px 2px; text-align:center; }
  #ht-console.ht-workspace .ctc-step-title { font-size:10px; }
  #ht-console.ht-workspace > .exam-toolbar { flex-wrap:wrap; }
  #ht-console.ht-workspace .exam-toolbar__actions { width:100%; justify-content:flex-start; gap:5px; }
  #ht-console.ht-workspace .ht-control { --htc-h:44px; flex:1; min-width:0; }
  #ht-console.ht-workspace .ht-control__text { display:none; }
  #ht-console.ht-workspace :is(.vl-launch,.track-toggle-btn) { width:44px; height:44px; min-height:44px; padding:6px; }
  #ht-console.ht-workspace .track-toggle-btn .tracking-text { display:none; }
  #ht-console.ht-workspace .ctc-coach > .pin-eyes-btn { min-height:44px; }
  #ht-console.ht-workspace .ht-pad-cell { min-height:52px; }
}
@media (min-width:1000px) and (max-height:700px) {
  #ht-console.ht-workspace .ht-pad-cell { min-height:44px; }
  #ht-console.ht-workspace .ht-pad-caption { display:none; }
}
#ht-console.ht-workspace > .ctc-steps { flex-direction:row; flex-wrap:nowrap; }
#ht-console.ht-workspace .ctc-step-list { width:auto; min-width:0; }
#ht-console.ht-workspace .ht-learning > p { display:none; }
@media (max-width:700px) { #ht-console.ht-workspace > .ctc-steps { flex-wrap:wrap; } }
/* Phones: seven numbered pills; the coach under the eyes names the step. */
@media (max-width:700px) {
  #ht-console.ht-workspace .ctc-step-list { flex:1 1 100%; grid-template-columns:repeat(7,minmax(0,1fr)); }
  #ht-console.ht-workspace .ctc-step { min-height:44px; padding:4px 0; justify-content:center; }
  #ht-console.ht-workspace .ctc-step-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #ht-console.ht-workspace .ctc-step-num { width:26px; height:26px; flex-basis:26px; font-size:12px; }
  #ht-console.ht-workspace .ctc-about-link { order:3; }
}
#ht-console.ht-workspace .ctc-step-list li { min-width:0; }
#ht-console.ht-workspace .ctc-step { min-width:0; box-sizing:border-box; }
/* Pupil readings sit under each eye, clear of the centred instrument tray. */
#tabContentExam.ht-workspace-active .eye-tag { top:calc(100% + 6px); }
#tabContentExam.ht-workspace-active .tool-dock-container { bottom:52px; }
#tabContentExam.ht-workspace-active .exam-field { padding-bottom:178px; }

/* ── Muscles in action: compact card → large viewer (ht-anatomy-viewer.js) ── */
#ht-console .ht-an-card { display:grid; gap:4px; padding:8px 10px 10px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface); }
#ht-console .ht-an-card[hidden] { display:none; }
#ht-console .ht-an-open { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:32px; padding:0; border:0; background:none; color:var(--text); font:600 12px/1.3 inherit; cursor:pointer; text-align:start; }
#ht-console .ht-an-open-label { letter-spacing:.04em; text-transform:uppercase; font-size:11px; color:var(--text-soft); }
#ht-console .ht-an-open-hint { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong); font-size:12px; }
#ht-console .ht-an-open-hint svg { width:14px; height:14px; }
#ht-console .ht-an-open:hover .ht-an-open-hint { background:var(--accent); color:var(--surface); }
#ht-console .ht-an-open:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
#ht-console .ht-an-slot { cursor:zoom-in; border-radius:8px; }
#ht-console .ht-an-slot:hover { background:var(--surface-sunken); }
#ht-console .ht-an-slot #ht-anatomy { gap:2px; padding:4px 0 0; border:0; background:none; }
#ht-console .ht-an-slot :is(.ht-an-head,.ht-an-legend) { display:none; }
#ht-console .ht-an-slot .ht-an-pair { grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr); }
#ht-console .ht-an-slot .ht-an-svg { max-width:118px; }
#ht-console .ht-an-slot .ht-an-caption { font-size:11px; line-height:1.4; color:var(--text-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

#ht-console .ht-an-dialog { position:fixed; inset:0; margin:auto; height:fit-content; width:min(720px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:18px; background:var(--surface); color:var(--text); box-shadow:0 28px 70px hsl(var(--shadow-color)/.32); overflow:hidden; }
#ht-console .ht-an-dialog[open] { display:flex; flex-direction:column; animation:ht-an-in 220ms cubic-bezier(.2,.8,.2,1); }
#ht-console .ht-an-dialog::backdrop { background:hsl(210 25% 8% / .5); backdrop-filter:blur(3px); }
@keyframes ht-an-in { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { #ht-console .ht-an-dialog[open] { animation:none; } }
#ht-console .ht-an-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 14px 22px; border-bottom:1px solid var(--border-soft); }
#ht-console .ht-an-dialog-head h3 { margin:0; font-size:18px; font-weight:650; }
#ht-console .ht-an-close { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--border-soft); border-radius:50%; background:var(--surface); color:var(--text); cursor:pointer; }
#ht-console .ht-an-close:hover { background:var(--surface-sunken); }
#ht-console .ht-an-close svg { width:18px; height:18px; }
#ht-console .ht-an-dialog-body { padding:18px 24px 22px; overflow:auto; }
#ht-console .ht-an-dialog-body #ht-anatomy { gap:14px; padding:0; border:0; background:none; }
#ht-console .ht-an-dialog-body .ht-an-head { justify-content:flex-end; }
#ht-console .ht-an-dialog-body .ht-an-head .ct-label { display:none; }
#ht-console .ht-an-dialog-body .ht-an-pair { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); padding:8px 0; border-radius:14px; background:var(--surface-sunken); }
#ht-console .ht-an-dialog-body .ht-an-svg { max-width:min(240px, 30vw); }
#ht-console .ht-an-dialog-body .ht-an-caption { font-size:15px; line-height:1.55; }
#ht-console .ht-an-dialog-body .ht-an-legend { gap:6px 16px; font-size:13px; }
#ht-console .ht-an-dialog-body .ht-an-legend span::before { width:11px; height:11px; }
@media (max-width:700px) {
  /* Phones: a compact bottom sheet; both eyes stay side by side and small. */
  #ht-console .ht-an-dialog { inset:auto 0 0; margin:0 auto; width:100vw; max-width:100vw; max-height:85dvh; border-radius:18px 18px 0 0; }
  #ht-console .ht-an-dialog[open] { animation-name:ht-an-sheet; }
  #ht-console .ht-an-dialog-head { padding:10px 12px 10px 16px; }
  #ht-console .ht-an-dialog-head h3 { font-size:16px; }
  #ht-console .ht-an-dialog-body { padding:12px 14px 18px; }
  #ht-console .ht-an-dialog-body #ht-anatomy { gap:10px; }
  #ht-console .ht-an-dialog-body .ht-an-pair { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); padding:6px 4px; }
  #ht-console .ht-an-dialog-body .ht-an-svg { max-width:150px; }
  #ht-console .ht-an-dialog-body .ht-an-caption { font-size:13px; }
  #ht-console .ht-an-dialog-body .ht-an-legend { font-size:12px; gap:4px 12px; }
  #ht-console .ht-an-close { width:44px; height:44px; }
}
@keyframes ht-an-sheet { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
#ht-console .ht-an-dialog-body .ht-an-legend span::before, #ht-console .ht-an-slot .ht-an-legend span::before { margin-right:0; margin-inline-end:5px; }

/* Muscles in action is always shown in full under the pad: view switch,
   both eyes, what each muscle is doing and the colour key — no click needed. */
#ht-console .ht-an-slot { cursor:default; }
#ht-console .ht-an-slot:hover { background:none; }
#ht-console .ht-an-slot .ht-an-pair { cursor:zoom-in; border-radius:8px; }
#ht-console .ht-an-slot .ht-an-pair:hover { background:var(--surface-sunken); }
#ht-console .ht-an-slot #ht-anatomy { gap:6px; }
#ht-console .ht-an-slot .ht-an-head { display:flex; justify-content:flex-end; margin-top:-36px; margin-inline-end:96px; pointer-events:none; }
#ht-console .ht-an-slot .ht-an-head .ct-label { display:none; }
#ht-console .ht-an-slot .ht-an-head .ct-seg { pointer-events:auto; }
#ht-console .ht-an-slot .ht-an-head .ct-seg-btn { min-height:28px; padding:2px 10px; font-size:11px; }
#ht-console .ht-an-slot .ht-an-svg { max-width:150px; }
#ht-console .ht-an-slot .ht-an-caption { display:block; -webkit-line-clamp:unset; overflow:visible; font-size:12px; color:var(--text); }
#ht-console .ht-an-slot .ht-an-legend { display:flex; gap:3px 10px; font-size:10.5px; }
#ht-console .ht-an-open-hint { padding:3px 8px; font-size:11px; }
@media (max-width:700px) { #ht-console .ht-an-slot .ht-an-head .ct-seg-btn { min-height:36px; } }