/* Same viewport frame and controls for all three participant conditions. */
html, body, #app { width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; }
.help-height-notice { display:none; }
.viewport-layout.hospital-shell {
  display:grid; grid-template-columns:minmax(0,1fr) 400px; grid-template-rows:minmax(0,1fr);
  gap:16px; padding:12px; width:100%; height:100vh; height:100dvh; min-height:0; overflow:hidden;
}
.viewport-layout > * { min-width:0; min-height:0; }
.layout-view-controls { display:none; }
.viewport-layout .task-scroll { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.viewport-layout .header-inner, .viewport-layout .progress-inner, .viewport-layout .simulation-notice { width:calc(100% - 24px); }
.viewport-layout .header-inner { flex-wrap:wrap; gap:10px; padding:10px 0; }
.viewport-layout .hospital-brand { min-width:0; }
.viewport-layout .hospital-name { overflow-wrap:anywhere; }
.viewport-layout .main-wrap { width:calc(100% - 24px); margin:0 auto; padding:16px 0; }
.viewport-layout .page-card { min-height:0; overflow:visible; }
.viewport-layout .page-content { min-width:0; overflow-wrap:anywhere; }
.viewport-layout .scrollable-tabs, .viewport-layout .department-results, .viewport-layout .vertical-tabs { max-height:none; overflow:visible; scrollbar-gutter:auto; }
.viewport-layout .date-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); overflow:visible; }
.viewport-layout .date-strip .selection-card { min-width:0; }
.viewport-layout .experiment-help-panel.experiment-help-panel {
 position:static; top:auto; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
 width:100%; height:100%; max-height:none; min-height:0; padding:12px; gap:8px; overflow:hidden;
}
.viewport-layout .experiment-help-top.experiment-help-top { position:static; padding:0; gap:2px; background:transparent; }
.viewport-layout .experiment-help-heading.experiment-help-heading { min-height:0; gap:2px; }
.viewport-layout .experiment-help-heading h2 { margin:0; font-size:1.3rem; line-height:1.4; }
.viewport-layout .experiment-help-heading p { margin:0; }
.viewport-layout .experiment-help-form.experiment-help-form { gap:6px; }
.viewport-layout .experiment-help-form > label {
 position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.viewport-layout .experiment-help-input.experiment-help-input {
 width:100%; height:68px; min-height:68px; max-height:68px; padding:8px 10px; resize:none;
}
.viewport-layout .experiment-help-actions.experiment-help-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.viewport-layout .experiment-help-actions.experiment-help-actions > button { min-height:46px; padding:6px 10px; }
.viewport-layout .experiment-help-wait.experiment-help-wait { min-height:24px; line-height:1.3; }
.viewport-layout .experiment-help-body { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; overflow:hidden; }
.viewport-layout .experiment-help-state:empty { display:none; }
.viewport-layout .experiment-help-state:empty + .experiment-help-scroll { grid-row:1 / -1; }
.viewport-layout .experiment-help-scroll.experiment-help-scroll {
 min-width:0; min-height:0; height:100%; max-height:none; display:block; overflow-x:hidden; overflow-y:auto;
 overscroll-behavior:contain; scrollbar-gutter:stable; overflow-anchor:none; padding:0 4px 0 0;
}
.viewport-layout .experiment-help-scroll > * + * { margin-top:10px; }
.viewport-layout .b-chat-messages, .viewport-layout .c-scaffold-messages { min-height:0; max-height:none; overflow:visible; }
.viewport-layout .c-scaffold-message, .viewport-layout .b-chat-message,
.viewport-layout .a-search-result, .viewport-layout .c-state-card, .viewport-layout .c-dialogue-card { max-height:none; overflow:visible; overflow-wrap:anywhere; }
.viewport-layout .c-state-card { margin:0; padding:8px 10px; }
.viewport-layout .c-state-card h3 { margin:0 0 4px; font-size:1rem; }
.viewport-layout .c-state-card dl { margin:0; display:grid; gap:2px; font-size:1rem; line-height:1.4; }
.viewport-layout .c-state-card dl > div { display:grid; grid-template-columns:5em minmax(0,1fr); gap:6px; margin:0; }
.viewport-layout .c-state-card dd { margin:0; }
.viewport-layout .c-dialogue-card { padding:0; margin:4px 0 0; border:0; box-shadow:none; background:transparent; font-size:1rem; line-height:1.4; }
.viewport-layout .c-scaffold-message, .viewport-layout .b-chat-message { padding:10px; }
.viewport-layout .c-next-action { margin:4px 0 8px; padding:8px; }
.viewport-layout .c-next-action p { margin:2px 0 0; }
.viewport-layout .c-problem-rewrite, .viewport-layout .c-standard-answer { margin-top:8px; }
.viewport-layout .c-state-details { padding:10px; border:1px solid #b6cdde; border-radius:10px; background:#f6fafc; overflow-wrap:anywhere; }
.viewport-layout .c-state-details h3 { margin:0 0 6px; font-size:1rem; }
.viewport-layout .c-state-details dl { margin:0; }
.viewport-layout .c-state-details dl > div + div { margin-top:8px; }
.viewport-layout .c-state-details dt { font-weight:700; }
.viewport-layout .c-state-details dd { margin:0; }
.viewport-layout .experiment-help-footer.experiment-help-footer { padding-top:6px; display:grid; gap:4px; }
.viewport-layout .experiment-help-footer > button { min-height:44px; margin:0; padding:6px 8px; }
.viewport-layout [data-help-latest] { color:#174f91; background:#eff6ff; border:1px solid #729aca; border-radius:8px; font:inherit; cursor:pointer; }
.viewport-layout [hidden] { display:none !important; }
.viewport-layout [data-task-scroll]:focus-visible, .viewport-layout [data-help-scroll]:focus-visible { outline:3px solid #e59b17; outline-offset:-3px; }
.viewport-layout .experiment-help-panel:focus-visible { outline:3px solid #e59b17; outline-offset:-3px; }
@media (min-width:900px) and (max-width:1179px) {
 /* Two readable desktop columns. */
 .viewport-layout.hospital-shell { grid-template-columns:minmax(0,1fr) 380px; gap:12px; padding:8px; }
}
@media (max-width:899px) {
 .viewport-layout.hospital-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:48px minmax(0,1fr); gap:8px; padding:8px; }
 .layout-view-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .layout-view-controls button { border:1px solid #9db7d5; border-radius:8px; background:#fff; color:#174f91; font:inherit; }
 .layout-view-controls button[aria-pressed="true"] { background:#205ca8; color:#fff; }
 .viewport-layout > .task-scroll, .viewport-layout > .experiment-help-panel { grid-column:1; grid-row:2; }
 .viewport-layout[data-active-view="task"] > .experiment-help-panel,
 .viewport-layout[data-active-view="help"] > .task-scroll { visibility:hidden; pointer-events:none; }
 .viewport-layout .department-layout { grid-template-columns:minmax(0,1fr); }
 .viewport-layout .progress-inner { grid-template-columns:auto minmax(0,1fr); }
 .viewport-layout .progress-inner > :last-child { display:none; }
}
/* Accessibility exception for very short windows / an on-screen keyboard. */
@media (max-height:599px) {
 .viewport-layout .experiment-help-panel.experiment-help-panel { display:block; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
 .viewport-layout .experiment-help-body, .viewport-layout .experiment-help-scroll.experiment-help-scroll { display:block; height:auto; max-height:none; overflow:visible; }
 .viewport-layout .experiment-help-state, .viewport-layout .experiment-help-scroll { margin-top:8px; }
 .help-height-notice { display:block; margin:0 0 8px; padding:8px; color:#5b420d; background:#fff5d8; border-radius:8px; }
}

/* Compact working layout: use available width before requiring vertical overflow. */
@media (min-width:900px) and (min-height:600px) {
 .viewport-layout.hospital-shell { grid-template-columns:minmax(0,1fr) minmax(460px,42%); gap:12px; padding:10px; }
}
@media (min-width:640px) and (min-height:600px) {
 .viewport-layout .header-inner { min-height:60px; padding:6px 0; gap:8px; }
 .viewport-layout .hospital-mark { width:40px; height:40px; flex-shrink:0; }
 .viewport-layout .header-home { min-height:44px; padding:6px 10px; }
 .viewport-layout .simulation-notice { margin:6px auto; padding:8px 10px; line-height:1.45; }
 .viewport-layout .progress-inner { min-height:38px; gap:10px; }
 .viewport-layout .main-wrap { padding:8px 0; }
 .viewport-layout .page-bar { min-height:48px; padding:4px 14px; gap:10px; }
 .viewport-layout .back-button { width:44px; height:44px; }
 .viewport-layout .page-content { padding:14px; gap:10px; }
 .viewport-layout .page-content h1 { font-size:1.5rem; }
 .viewport-layout .substep-line { margin:0; padding:6px 10px; }
 .viewport-layout .footer-note { padding:6px 10px; font-size:.875rem; }
 .viewport-layout .department-layout { grid-template-columns:minmax(0,1fr); gap:10px; }
 .viewport-layout .category-tabs.vertical-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0; border:0; }
 .viewport-layout .category-tabs.vertical-tabs > button { min-height:46px; padding:6px; }
 .viewport-layout .selection-grid, .viewport-layout .form-grid { gap:10px; }
 .viewport-layout .selection-card, .viewport-layout .doctor-card { min-height:0; padding:10px 12px; }
 .viewport-layout .summary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
 .viewport-layout .summary-row { padding:7px 0; gap:8px; grid-template-columns:auto minmax(0,1fr); }
 .viewport-layout .summary-row dd { text-align:right; min-width:0; overflow-wrap:anywhere; }
 .viewport-layout .summary-list > .summary-row:last-child:nth-child(odd) { grid-column:1 / -1; }
 .viewport-layout .info-box, .viewport-layout .warning-box, .viewport-layout .danger-box, .viewport-layout .success-box { padding:10px 12px; }
 .viewport-layout .receipt-card, .viewport-layout .patient-card, .viewport-layout .permission-card { padding:12px; gap:8px; }
 .viewport-layout .button-row { gap:8px; margin-top:0; }
 .viewport-layout .button-row > button { min-height:48px; padding:8px 12px; }
 .viewport-layout .experiment-help-heading.experiment-help-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
 .viewport-layout .experiment-help-heading p { font-size:1rem; }
 .viewport-layout .experiment-help-form.experiment-help-form { display:grid; grid-template-columns:minmax(0,1fr) 176px; align-items:stretch; gap:8px; }
 .viewport-layout .experiment-help-input.experiment-help-input { height:64px; min-height:64px; max-height:64px; }
 .viewport-layout .experiment-help-actions.experiment-help-actions { align-items:stretch; }
 .viewport-layout .experiment-help-actions.experiment-help-actions > button { padding:6px; }
 .viewport-layout .experiment-help-wait.experiment-help-wait { min-height:24px; }
 .viewport-layout .c-state-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; padding:7px 10px; }
 .viewport-layout .c-state-card h3 { margin:0; }
 .viewport-layout .c-state-card dl { grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; }
 .viewport-layout .c-state-card dl > div { display:block; }
 .viewport-layout .c-state-card dt, .viewport-layout .c-state-card dd { display:inline; line-height:1.4; }
 .viewport-layout .c-state-card dt::after { content:"："; }
 .viewport-layout .c-dialogue-card { grid-column:2; grid-row:1; justify-self:end; margin:0; display:block; }
 .viewport-layout .c-scaffold-messages, .viewport-layout .b-chat-messages { padding:0; gap:6px; border:0; background:transparent; }
 .viewport-layout .c-scaffold-message, .viewport-layout .b-chat-message { padding:7px 10px; line-height:1.45; }
 .viewport-layout .c-scaffold-message-label, .viewport-layout .b-chat-message-label { margin-bottom:2px; font-size:.875rem; }
 .viewport-layout .c-next-action { display:flex; align-items:baseline; gap:8px; margin:2px 0 4px; padding:6px 8px; }
 .viewport-layout .c-next-action > strong { flex-shrink:0; margin:0; }
 .viewport-layout .c-next-action > p { margin:0; }
 .viewport-layout .c-problem-rewrite, .viewport-layout .c-standard-answer, .viewport-layout .c-waiting-outcome { margin:4px 0 0; padding:6px 8px; }
 .viewport-layout .c-problem-rewrite strong, .viewport-layout .c-problem-rewrite p { display:inline; margin:0; }
 .viewport-layout .c-problem-rewrite strong::after { content:"："; }
 .viewport-layout .c-state-details { padding:6px 10px; }
 .viewport-layout .c-state-details h3 { margin:0 0 4px; }
 .viewport-layout .c-state-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; line-height:1.4; }
 .viewport-layout .c-state-details dl > div + div { margin:0; }
 .viewport-layout .c-state-details dt, .viewport-layout .c-state-details dd { display:inline; }
 .viewport-layout .c-state-details dt::after { content:"："; }
 .viewport-layout .c-feedback-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .viewport-layout .c-feedback-options > button { min-height:44px; padding:6px 8px; }
 .viewport-layout .a-search-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .viewport-layout .a-search-result-card { min-height:0; padding:8px 10px; gap:4px; }
 .viewport-layout .a-search-result-detail { padding:8px 10px; }
 .viewport-layout .a-search-status, .viewport-layout .a-search-safety, .viewport-layout .b-chat-safety, .viewport-layout .c-scaffold-safety { padding:8px 10px; }
 .viewport-layout .a-search-empty, .viewport-layout .b-chat-empty, .viewport-layout .c-scaffold-empty { padding:8px; }
}
@media (min-width:900px) and (max-width:1179px) and (min-height:600px) {
 .viewport-layout.hospital-shell { grid-template-columns:minmax(0,1fr) 46%; }
 .viewport-layout .experiment-help-heading.experiment-help-heading { display:grid; }
 .viewport-layout .experiment-help-form.experiment-help-form { grid-template-columns:minmax(0,1fr); }
 .viewport-layout .summary-list { grid-template-columns:minmax(0,1fr); }
}

@media (min-width:640px) and (min-height:600px) {
 .viewport-layout .page-content { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; line-height:1.45; }
 .viewport-layout .page-content > * { grid-column:1 / -1; min-width:0; }
 .viewport-layout .page-content:has(> .substep-line) > .substep-line { grid-column:2; grid-row:1; justify-content:flex-end; padding:0; gap:4px; }
 .viewport-layout .page-content:has(> .substep-line) > h1 { grid-column:1; grid-row:1; align-self:center; }
 .viewport-layout .substep-line > span:not(.substep-chip) { min-height:30px; padding:4px 8px; }
 .viewport-layout .substep-line > strong { font-size:1rem; }
 .viewport-layout .page-content h2 { margin:0; padding:0; }
 .viewport-layout .summary-row { display:block; padding:6px 8px; }
 .viewport-layout .summary-row dt, .viewport-layout .summary-row dd { display:inline; text-align:left; }
 .viewport-layout .summary-row dt::after { content:"："; }
 .viewport-layout .summary-list { column-gap:8px; }
 .viewport-layout .form-grid > label { gap:3px; }
 .viewport-layout .text-input { min-height:48px; padding:6px 10px; }
 .viewport-layout .keypad { gap:6px; }
 .viewport-layout .key-button { min-height:48px; padding:6px; }
 .viewport-layout .code-layout { grid-template-columns:minmax(0,1fr) 260px; gap:16px; }
 .viewport-layout .slot-button { min-height:68px; padding:6px 8px; }
 .viewport-layout [data-screen="voucher"] .receipt-card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .viewport-layout [data-screen="voucher"] .receipt-card > strong { grid-column:1 / -1; }
 .viewport-layout [data-screen="voucher"] .selection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .viewport-layout [data-screen="voucher"] .selection-grid > :only-child { grid-column:1 / -1; }
 .viewport-layout [data-screen="voucher"] .receipt-card > span { text-align:right; }
 .viewport-layout .page-content:has(> .success-symbol) > .success-symbol { grid-column:1; grid-row:1; width:44px; height:44px; margin:0; font-size:1.8rem; }
 .viewport-layout .page-content:has(> .success-symbol) > h1 { grid-column:1 / -1; grid-row:1; margin-left:54px; text-align:left; align-self:center; }
 .viewport-layout [data-screen="face-verification"] .summary-list { grid-column:1; grid-template-columns:minmax(0,1fr); align-self:start; }
 .viewport-layout [data-screen="face-verification"] .camera-view { grid-column:2; grid-row:4; margin:0; padding:8px; gap:6px; width:100%; }
 .viewport-layout [data-screen="face-verification"] .face-frame { width:min(220px,100%); }
 .viewport-layout [data-screen="face-verification"] .face-guide { font-weight:500; }
 .viewport-layout [data-screen="face-verification"] .face-status { padding:4px 6px; }
 .viewport-layout .experiment-help-wait.experiment-help-wait:empty { display:none; min-height:0; }
}

@media (min-width:640px) and (min-height:600px) {
 .viewport-layout .header-inner { min-height:52px; padding:4px 0; }
 .viewport-layout .simulation-notice { margin:4px auto; padding:6px 10px; }
 .viewport-layout .progress-inner { min-height:26px; }
 .viewport-layout .page-content { padding:12px; gap:6px; }
 .viewport-layout .summary-row { padding:4px 8px; }
 .viewport-layout .footer-note { padding:5px 10px; }
 .viewport-layout .page-content:has(> .eyebrow):not(:has(> .substep-line)) > .eyebrow { grid-column:2; grid-row:1; text-align:right; align-self:center; }
 .viewport-layout .page-content:has(> .eyebrow):not(:has(> .substep-line)) > h1 { grid-column:1; grid-row:1; }
 .viewport-layout [data-screen="face-verification"] .summary-list { grid-row:3; }
 .viewport-layout [data-screen="face-verification"] .camera-view { grid-row:3; display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; gap:6px; }
 .viewport-layout [data-screen="face-verification"] .face-frame { grid-column:1; grid-row:1 / span 2; width:160px; }
 .viewport-layout [data-screen="face-verification"] .face-guide { grid-column:2; line-height:1.35; }
 .viewport-layout [data-screen="face-verification"] .face-status { grid-column:2; min-width:0; }
}

@media (min-width:640px) and (min-height:600px) {
 .viewport-layout .summary-list { font-size:1.125rem; }
 .viewport-layout .experiment-help-panel.experiment-help-panel { padding:10px; gap:6px; }
 .viewport-layout .experiment-help-body { gap:6px; }
 .viewport-layout .experiment-help-scroll > * + * { margin-top:6px; }
 .viewport-layout .c-state-details { padding:4px 10px; }
 .viewport-layout .c-state-details h3 { margin-bottom:2px; }
 .viewport-layout .c-state-details dl { line-height:1.35; }
 .viewport-layout .c-scaffold-message, .viewport-layout .b-chat-message { padding:6px 10px; }
 .viewport-layout [data-screen="face-verification"] .face-status { font-size:1rem; line-height:1.4; font-weight:600; }
}
@media (min-width:640px) and (max-width:899px) and (min-height:600px) {
 .viewport-layout .progress-inner { grid-template-columns:auto minmax(0,1fr) auto; padding:0; gap:8px; }
 .viewport-layout .progress-track { grid-column:2; grid-row:1; }
 .viewport-layout .form-grid, .viewport-layout .department-results .selection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .viewport-layout .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .viewport-layout .service-button { display:flex; flex-direction:column; align-items:flex-start; padding:10px; gap:4px; min-height:0; }
}

@media (min-width:640px) and (min-height:600px) {
 .viewport-layout .page-content { padding:10px; }
 .viewport-layout .summary-list { line-height:1.35; }
 .viewport-layout [data-screen="schedule"] .page-content > h2 { padding:4px 10px; margin:0; }
 .viewport-layout [data-screen="authorization"] .summary-row:nth-child(3) dd { font-size:1rem; }
}
@media (min-width:640px) and (max-width:899px) and (min-height:600px) {
 .viewport-layout.hospital-shell { position:relative; grid-template-rows:minmax(0,1fr); }
 .viewport-layout > .task-scroll, .viewport-layout > .experiment-help-panel { grid-row:1; }
 .viewport-layout .layout-view-controls { position:absolute; top:12px; right:20px; z-index:5; width:160px; height:44px; gap:4px; }
 .viewport-layout .layout-view-controls button { font-size:1rem; padding:4px; }
 .viewport-layout .header-inner { padding-right:170px; }
 .viewport-layout .experiment-help-heading.experiment-help-heading { padding-right:170px; min-height:44px; display:flex; align-items:center; }
 .viewport-layout .experiment-help-heading p { grid-column:1 / -1; }
 .viewport-layout .hospital-header { position:sticky; top:0; z-index:4; }
 .viewport-layout .task-scroll { scroll-padding-top:120px; }
 .viewport-layout .main-wrap { padding:3px 0; }
 .viewport-layout .page-content { padding:8px; gap:4px; }
}

/* Shared baseline; semantic scaffold emphasis is intentionally retained. */
.viewport-layout .a-search-empty, .viewport-layout .b-chat-empty, .viewport-layout .c-scaffold-empty {
 display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:56px;
 margin:0; padding:12px; border:1px solid #d7e0e8; border-radius:10px;
 color:#5d6877; background:#f6f8fa; font-size:1rem; line-height:1.45;
}
.viewport-layout .a-search-result-card, .viewport-layout .b-chat-message--assistant, .viewport-layout .c-scaffold-message--assistant {
 font-size:1rem; line-height:1.45; color:#162131; padding:8px 10px;
}
.viewport-layout .a-search-result-summary, .viewport-layout .c-standard-answer { color:#162131; line-height:1.45; }
.viewport-layout .c-state-details { margin:0; }

/* Current position, not an equal-weight completion percentage. */
.viewport-layout .progress-inner { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; }
.viewport-layout .progress-phase { flex:0 0 auto; font-size:16px; font-weight:700; }
.viewport-layout .progress-current { flex:1 1 220px; font-size:16px; line-height:1.45; color:#243b56; }