/* Shared product layer: calm surfaces, clear choices and task-focused layouts. */
.how-it-works{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
.how-it-works>h2{font:600 15px/1.5 system-ui,sans-serif;margin:12px 0 8px}
.whiteboard{background:#fffef9;border:1px solid #dce2d8;border-radius:14px;padding:16px;margin-top:8px}
.story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0}
.story-steps li{min-width:0;display:flex;flex-direction:column;gap:8px}
.story-steps svg{width:72px;height:64px;max-width:100%;stroke:#245f4f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.story-steps strong{font-size:13px;line-height:1.45}.story-steps span{font-size:12px;line-height:1.5;color:#586e63}
.story-footer{border-top:1px dashed #dce2d8;margin-top:16px;padding-top:8px;display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px;color:#586e63}
.story-footer button{flex:none;font-size:11px;padding:8px;min-height:36px}
.drawing .sketch path{stroke-dasharray:240;animation:draw-story 1.2s both}
.drawing li:nth-child(2) .sketch path{animation-delay:1.2s}.drawing li:nth-child(3) .sketch path{animation-delay:2.4s}
@keyframes draw-story{from{stroke-dashoffset:240;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
@media(prefers-reduced-motion:reduce){.drawing .sketch path{animation:none}}
@media(max-width:450px){.story-steps{gap:10px}.story-steps strong{font-size:12px}.story-footer{align-items:flex-start;flex-direction:column}}
#route-access{max-width:620px;margin:auto}#route-access-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}#route-access-form label{min-width:200px}
:root{--ink:#173a35;--green:#245f4f;--line:#dce2d8;--sage:#edf4e9;--paper:#f5f4ef}
body{color:var(--ink)}
header{padding:18px 5vw;background:#fbfbf7}
.brand{font-size:22px}.mark{border-radius:10px}
h1,h2{font-family:Georgia,serif;font-weight:400}
h2{font-size:26px}.panel{border-color:var(--line);box-shadow:none;border-radius:20px}
button,select,input{min-height:44px}
input,textarea,select{font-size:16px}
button{transition:background .15s}
.muted{font-size:14px;line-height:1.6;color:#586e63}
.eyebrow,.tag{color:#506b5e}
summary{cursor:pointer;min-height:44px;align-content:center;font-size:14px;color:#38594a}
details[open]>summary{margin-bottom:8px}
pre{overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
footer{color:#5b7065}
.back-link{display:inline-block;color:#345e4e;font-size:14px;text-decoration:none;padding:10px 0;margin-bottom:16px;min-height:44px;box-sizing:border-box}
.back-link:hover{text-decoration:underline}
.experience-choice{gap:14px}
.experience-card{border-radius:14px;background:#fafbf8;padding:20px;gap:8px}
.experience-card:has(input:checked){background:var(--sage);border-color:var(--green)}
.experience-card strong{font-size:19px}
.experience-card>span:not(.experience-icon){font-size:15px;line-height:1.5}
.experience-icon{background:#e6eddd;font-family:system-ui,sans-serif;font-weight:600}
.experience-icon svg{width:24px;height:24px;stroke:var(--green);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.experience-card input{min-height:0;min-width:0}
.welcome-setup{padding:30px}
.welcome-setup .eyebrow{margin:0 0 8px}
.welcome-setup h2{font-size:30px}
.welcome-setup>p{margin:10px 0 18px}
.welcome-setup form{gap:20px}
.operator-settings{border-top:1px solid var(--line);padding-top:0}
.operator-settings summary{font-weight:500}
.start-actions button{min-width:180px}
#mode:empty,#error:empty,#busy:empty,#draft-note:empty,#notices:empty,#download-note:empty{display:none}
.text-open .intro,.history-open .intro,.route-open .intro,.text-open footer{display:none}
.text-open main,.history-open main{max-width:1440px}
.history-open main{padding-top:28px}
#history-panel{max-width:1120px;margin:auto;padding:30px}
#history-panel h2{font-size:32px;margin-bottom:0}
#history-panel .eyebrow{margin:0 0 6px}
.history-filters{background:#f5f7f1;padding:18px;border:1px solid var(--line);border-radius:12px;margin:24px 0}
.history-card{padding:20px 4px;gap:20px;border-bottom:1px solid var(--line)}
.history-card h3{display:inline-block;margin:0 14px 0 0;font-size:19px;overflow-wrap:anywhere}
.history-card p{margin:8px 0 0}
.history-card>div{min-width:0}
.history-reference summary{font-size:12px;min-height:30px}
.history-reference p{overflow-wrap:anywhere}
.badge{font-size:12px;letter-spacing:0;background:#edf1df;padding:5px 10px}
.badge.reviewed{background:#e3f2eb}
.session-bar{margin:0;gap:12px;flex-wrap:wrap}
#status{font-family:Georgia,serif;font-size:28px}
#timer{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;font-variant-numeric:tabular-nums;background:white}
.session-meta{font-size:12px;flex:none}
.session-meta summary{font-size:12px;min-height:30px}
.session-meta p{margin:0 0 8px;overflow-wrap:anywhere}
.text-tabs{display:none}
.columns{gap:18px;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr)}
.conversation .panel-title{align-items:center;gap:12px}.conversation h2{font-size:23px;margin:0}
.message{border-radius:16px;padding:18px 20px;font-size:16px;line-height:1.7;max-width:92%;background:#f0f4ec}
.message.participant_text{background:#285f50}
.speaker{font-size:11px;letter-spacing:.8px;margin-bottom:8px}
#transcript{padding:6px 4px 14px;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:none}
#answer-form{border-top:1px solid var(--line);padding-top:14px;gap:8px}
#answer{min-height:84px;background:#fcfcfa}
.answer-actions{width:100%;justify-content:space-between;gap:12px}
#generate-answer{background:transparent;color:#5b7065;font-size:12px}
.controls{gap:8px}.controls button{font-size:13px}
.controls [data-control=review],#voice-finish{background:var(--green);color:white}
.profile>.eyebrow{margin-top:0}.profile h2{margin-bottom:10px}
.skill{padding:18px 0}.skill h3{font-size:18px;line-height:1.45}
.skill p{font-size:15px;line-height:1.65}
.skill .muted{font-size:12px}.evidence summary{font-size:13px}
.evidence blockquote{border-left:3px solid #b2c4a7;margin:8px 0;padding:8px 14px;font-size:14px;background:#f7f8f3}
#download-profile,#voice-download{background:var(--green);color:white;width:100%;margin:14px 0 4px}
/* Keep the composer and the profile independently accessible during text interviews. */
@media(min-width:761px){
 .text-open{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 .text-open>header{padding:12px 28px;flex:none}
 .text-open main{padding:18px 28px;width:100%;min-height:0;flex:1;display:flex;flex-direction:column}
 #workspace{min-height:0;flex:1;display:flex;flex-direction:column;gap:6px}
 .text-open #error:not(:empty){max-height:80px;overflow:auto;flex:none;margin:0 0 10px}
 .text-open .columns{min-height:0;flex:1}
 .text-open .conversation{min-height:0;display:flex;flex-direction:column;padding:20px;overflow:auto}
 .text-open #transcript{min-height:90px;max-height:none;flex:1;overflow-y:auto}
 .text-open #answer-form,.text-open .controls,.text-open .panel-title,.text-open #busy,.text-open #suggestions{flex:none}
 .text-open #suggestions{max-height:80px;overflow:auto}
 .text-open .profile{min-height:0;overflow:auto;padding:24px;overscroll-behavior:contain}
}
/* Voice preparation: the same two choices, provider details kept secondary. */
.voice-page:not(.interview-open) main{max-width:860px;padding-top:26px}
.voice-page #voice-setup{max-width:none;padding:30px 36px}
#voice-setup h1{font-size:42px;margin:0 0 10px;letter-spacing:-.8px}
#voice-setup .eyebrow{margin:0 0 10px}
.setup-lead{margin:0 0 24px;color:#506b5e;font-size:17px}
#voice-start{display:flex;flex-direction:column;align-items:stretch;gap:16px}
#voice-start .voice-entry-field{width:100%}
#voice-start .experience-choice{flex:none;width:100%}
.voice-choice legend{font-size:16px}
.setup-disclosure{border:1px solid var(--line);border-radius:10px;padding:0 16px;margin:0}
.setup-disclosure[open]{padding-bottom:14px}
.setup-disclosure summary{font-size:14px;min-height:46px}
.settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#voice-start .presentation-label{margin:0}
#voice-availability:empty{display:none}
#voice-availability{background:#fff3df;color:#74511a;border-radius:8px;padding:12px;margin:0}
.voice-start-actions p{margin:0 0 10px}
.voice-start-actions button{width:100%;font-size:18px;min-height:52px}
.voice-start-actions button+p{text-align:center;font-size:13px;margin:10px 0 0}
.privacy-note{border-top:1px solid var(--line);margin-top:20px;padding-top:4px}
.privacy-note summary{font-size:14px;min-height:44px;display:flex;align-items:center}
/* In-call layout keeps its existing fixed media and separately scrolling transcript. */
.interview-open .voice-stage h2{font-family:system-ui,sans-serif}
.interview-open .voice-bubble{font-size:16px;line-height:1.65}
.interview-open .live-pane #avatar-panel{background:#edf1e8}
.interview-open .detail-tabs{padding:10px}
.interview-open .detail-tabs button{border-radius:10px}
.interview-open .voice-stage{border-radius:18px}
@media(max-width:760px){
 header{padding:14px 18px}.brand{font-size:20px}.tag{font-size:10px;letter-spacing:1px;max-width:130px;text-align:right}
 main{padding:24px 16px}.intro{margin-bottom:24px}.intro h1{font-size:36px;letter-spacing:-.8px}.intro p{font-size:16px}
 .panel,.welcome-setup{padding:20px;border-radius:16px}.welcome-setup h2{font-size:28px}
 .welcome-setup .name-field,.welcome-setup .language-field{max-width:none}
 .experience-card{padding:18px 12px}.experience-card strong{font-size:17px}.experience-card>span:not(.experience-icon){font-size:14px}
 .experience-icon{width:36px;height:36px;font-size:22px}
 #history-panel{padding:18px}.history-filters{padding:14px}.history-card{padding:20px 0}
 .history-card>button{width:100%}.history-card .badge{margin-top:6px}
 .history-pagination{gap:10px}.history-pagination button{padding:10px}
 .text-open{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 .text-open>header{padding:8px 14px;flex:none}
 .text-open main{padding:10px 12px;width:100%;min-height:0;flex:1;display:flex;flex-direction:column}
 .text-open #workspace{min-height:0;flex:1;display:flex;flex-direction:column}
 .text-open #error:not(:empty){max-height:60px;overflow:auto;flex:none;margin:0 0 6px}
 .session-bar{gap:8px}#status{font-size:24px}#timer{margin-left:auto;padding:6px 8px}
 .text-open .session-meta{margin:0;max-height:64px;overflow:auto}
 .text-tabs{display:flex;gap:6px;background:#e9eee3;padding:4px;border-radius:12px;margin:10px 0}
 .text-tabs button{flex:1;background:transparent;color:#506b5e}
 .text-tabs button[aria-selected=true]{background:white;color:var(--ink);box-shadow:0 1px 3px #173a3510}
 .text-open .columns{display:flex;min-height:0;flex:1;flex-direction:column}
 .text-open:not(.text-show-profile) #text-profile,.text-open.text-show-profile #text-conversation{display:none}
 .text-open #transcript{min-height:90px;max-height:none;flex:1;overflow:auto}
 .text-open .conversation{padding:12px;min-height:0;flex:1;display:flex;flex-direction:column;overflow:auto}
 .text-open .conversation .panel-title{display:none}
 .text-open #text-profile{min-height:0;overflow:auto}
 .text-open #answer-form,.text-open .controls,.text-open #busy{flex:none}
 .text-open #busy{font-size:12px;margin:4px 0}
 .text-open #suggestions{flex:none;max-height:46px;overflow:auto}
 .message{font-size:16px;padding:14px;max-width:95%}
 .answer-actions{flex-wrap:wrap}.controls button{flex:1;white-space:nowrap;min-height:44px}
 .text-open #answer-form{padding-top:8px}.text-open #answer{font-size:16px;min-height:60px;height:60px}
 .text-open .controls{margin-top:8px;padding-top:8px}
 .text-open .controls button{font-size:12px;padding:8px;min-height:40px}
 .voice-page:not(.interview-open) main{padding:16px 12px}
 .voice-page #voice-setup{padding:20px}
 #voice-setup .eyebrow{display:none}#voice-setup h1{font-size:34px}
 .back-link{margin-bottom:8px;padding-top:0;min-height:36px}
 .setup-lead{font-size:16px;margin-bottom:20px}
 #voice-start{gap:12px}.voice-choice{grid-template-columns:1fr}
 #voice-start .voice-choice .experience-card{margin:0;min-height:92px;padding:16px 44px 16px 72px;justify-content:center;gap:3px}
 .voice-choice .experience-icon{position:absolute;left:16px;top:25px}
 .voice-choice .experience-card input{top:20px;right:16px}
 .voice-choice .experience-card strong{font-size:18px}
 .settings-fields{grid-template-columns:1fr}.privacy-note{margin-top:16px}
 .voice-start-actions p{font-size:13px}
 .interview-open .voice-bubble{font-size:15px}
 .interview-open .detail-tabs{padding:6px}
 .interview-open .controls button{font-size:13px;min-height:44px;flex:initial}
 .interview-open .live-pane .voice-stage{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Compact application chrome: reserve the viewport for the current task. */
body>header,.text-open>header,.interview-open>header{padding:5px 20px;min-height:44px;flex:none}
header .brand{font-size:18px;gap:8px;min-height:34px}
header .mark{font-size:18px;padding:3px 9px;border-radius:8px}
main,.history-open main{padding-top:16px;padding-bottom:16px}
footer{margin:16px 0;font-size:11px}
.text-open main,.interview-open main{padding:10px 16px}
.text-open #workspace{gap:8px}
.session-bar{position:relative;min-height:40px;gap:8px;flex:none}
#status{font-family:inherit;font-size:18px;font-weight:600}
#timer{padding:6px 9px;font-size:12px}
.session-bar .quiet{padding:7px 10px;min-height:36px}
.session-bar .session-meta{position:static;margin:0;padding:0;border:0;max-height:none;overflow:visible;flex:none}
.session-meta summary{min-height:36px;padding:6px 8px;font-size:12px;box-sizing:border-box}
.session-meta[open]>summary{margin:0}
.session-meta #session-details{position:absolute;right:0;top:100%;z-index:10;width:min(520px,100%);max-height:180px;overflow:auto;margin:4px 0 0;padding:14px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px #173a3515}
.text-open .conversation .panel-title{display:none}
.text-open .conversation,.text-open .profile{padding:14px}
.text-open #transcript{padding-top:0;padding-bottom:8px}
.text-open #answer-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-top:8px;gap:8px}
.text-open #answer{height:64px;min-height:64px;max-height:160px}
.text-open .answer-actions{width:auto}
.text-open #draft-note{grid-column:1/-1;max-height:48px;overflow:auto}
.text-open .controls{margin-top:8px;padding-top:8px;gap:6px}
.text-open .controls button{min-height:40px;padding:8px 10px}
.text-open #generate-answer{margin-right:auto;font-size:12px}
.profile>.eyebrow{display:none}
.profile h2{font-size:23px;margin:0 0 8px}
#profile-description{margin:0 0 12px}
.profile .empty{padding:12px 0}
.profile>details{margin-top:12px;padding-top:8px}
.skill{padding:14px 0}.skill h3{font-size:17px}
.evidence{padding:8px;margin-top:8px}
.welcome-setup{padding:22px}
.welcome-setup>.eyebrow{display:none}
.welcome-setup h2{font-size:28px;margin:0 0 8px}
.welcome-setup>p{margin:8px 0 14px}
.welcome-setup form{gap:14px}
.welcome-setup .experience-card{padding:16px;gap:6px}
.welcome-setup .experience-icon{width:32px;height:32px}
.welcome-setup .operator-settings{margin-top:0}
.welcome-setup .start-actions{gap:12px}
.welcome-page .intro .eyebrow{display:none}
.welcome-page .intro h1{font-size:38px;line-height:1.12;margin:0 0 14px}
.welcome-page .intro>p:last-child{margin:0}
#history-panel{padding:22px}
#history-panel .eyebrow{display:none}
#history-panel h2{font-size:28px}
#history-panel>.muted{margin:8px 0 12px}
.history-filters{margin:12px 0;padding:12px}
.history-card{padding:14px 4px}
.history-reference{margin:4px 0 0;padding:0;border:0}
.history-pagination{margin-top:12px}
.voice-page:not(.interview-open) main{padding-top:12px}
.voice-page #voice-setup{padding:20px 24px}
#voice-setup .eyebrow{display:none}
#voice-setup h1{font-size:32px;margin-bottom:8px}
#voice-setup .back-link{margin:0 0 4px;min-height:36px;padding:4px 0}
.setup-lead{font-size:16px;margin-bottom:16px}
#voice-start{gap:10px}
#voice-start .experience-card{padding-top:14px;padding-bottom:14px}
.privacy-note{margin-top:12px;padding-top:0}
.interview-open .detail-tabs{padding:6px}
.interview-open .transcript-hint{margin:6px 0 2px}
.interview-open .live-pane #avatar-panel{padding:10px}
.interview-open .live-pane .voice-stage{padding:12px}
.interview-open .live-pane .controls{margin-top:8px;padding-top:8px}
.interview-open .live-pane #voice-note{margin-top:6px;font-size:13px}
#profile-panel>.eyebrow{display:none}
#profile-panel>h2{font-size:23px;margin:0 0 8px}
#voice-profile-status{margin:0 0 12px}
@media(min-width:1100px){
 .welcome-page:has(#setup:not([hidden])) main{padding-top:24px;gap:20px 36px}
 .welcome-page:has(#setup:not([hidden])) .intro{padding-top:12px}
 .welcome-page:has(#setup:not([hidden])) .intro h1{font-size:40px}
 .welcome-setup form{gap:14px}
}
@media(max-width:760px){
 body>header,.text-open>header,.interview-open>header{padding:4px 12px}
 .text-open main,.interview-open main{padding:8px}
 .text-open #workspace{gap:4px}
 .session-bar{gap:4px;min-height:36px}
 #status{font-size:15px}#timer{font-size:11px;padding:5px}
 .session-meta summary{font-size:11px;padding:6px 4px}
 .text-tabs{margin:2px 0 6px;padding:3px}
 .text-tabs button{min-height:40px;padding:8px}
 .text-open .conversation,.text-open .profile{padding:10px}
 .text-open #answer{height:60px;min-height:60px;padding:9px;resize:vertical}
 .text-open #send{padding:10px;font-size:13px;max-width:95px}
 .text-open .controls{gap:4px;margin-top:6px;padding-top:6px}
 .text-open .controls button{font-size:12px;padding:7px;min-height:40px;flex:1}
 .text-open #generate-answer{flex-basis:100%;min-height:30px;padding:4px;margin:0;text-align:left}
 .welcome-page main{padding:16px 12px}
 .welcome-page .intro{margin-bottom:16px}
 .welcome-page .intro h1{font-size:28px;margin-bottom:8px}
 .welcome-page .intro p{font-size:15px}
 .welcome-setup{padding:16px}
 .welcome-setup h2{font-size:24px}
 .welcome-setup .experience-card{padding:12px}
 .voice-page:not(.interview-open) main{padding:10px}
 .voice-page #voice-setup{padding:16px}
 #voice-setup h1{font-size:28px}
 #voice-setup .setup-lead{margin-bottom:12px}
 #voice-start .voice-choice .experience-card{min-height:80px;padding-top:12px;padding-bottom:12px}
 .voice-choice .experience-icon{top:19px}
 #history-panel{padding:16px}
 #history-panel h2{font-size:24px}
 .history-filters label{margin:8px 0}
 .interview-open .live-pane #avatar-panel{padding:6px;height:clamp(100px,21dvh,190px)}
 .interview-open .live-pane .voice-stage{padding:8px}
 .interview-open .live-pane .controls{margin-top:5px;padding-top:5px}
}
@media(max-height:540px) and (min-width:600px){
 .interview-open .live-pane #avatar-panel{flex:1;height:auto;min-height:0}
}

.organization-entry{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid #bdcdc3;border-radius:12px;text-decoration:none;font-size:14px;background:#fff;color:#245c50}.demo-banner{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 18px;background:#fff0ce;border:1px solid #e1cb91;border-radius:12px;margin:0 0 18px;font-size:14px}.demo-banner a:first-of-type{margin-left:auto}.demo-banner a{color:#6b5322}@media(max-width:600px){.demo-banner{gap:8px 14px}.demo-banner strong{flex-basis:100%}.demo-banner a:first-of-type{margin-left:0}}
/* Keep the conversation footprint secondary to the supported descriptions. */
.profile-footprint{border-top:1px solid var(--line,#dce2d8);margin-top:20px;padding-top:16px;font-size:.9rem;line-height:1.5}
.profile-footprint h3{font-size:1rem;margin:0 0 8px}.profile-footprint h4{font-size:.9rem;margin:14px 0 6px}
.profile-footprint p{color:var(--muted,#53665e)}.profile-footprint ul{padding-left:20px;margin:0}
.interview-reassurance{font-size:.95rem;color:var(--muted,#53665e)}
.skill.current-review{outline:2px solid #2b6759;outline-offset:3px}

/* AI disclosure (AI Act Art. 50): a persistent, readable label rather than fine print. */
.header-meta{display:flex;align-items:center;gap:16px;min-width:0}
.ai-label{display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 10px 3px 4px;border:1px solid #c9d8c6;border-radius:999px;background:#eef3e9;color:#173a35;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap}
.ai-mark{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border-radius:999px;background:#245f4f;color:#fff;font-size:10px;font-weight:700;letter-spacing:.6px;line-height:1;flex:none}
.ai-notice{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:10px 12px;border-radius:10px;background:#eef3e9;color:#173a35;font-size:15px;line-height:1.5}
.ai-notice .ai-mark{margin-top:2px}
/* Interview progress: steps, not a countdown (research QW9). */
.interview-steps{min-width:0}
.interview-steps-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.interview-step{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:#f0f3ed;color:#506b5e;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
.interview-step .step-marker{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid #c3cfc1;background:#fff;color:#506b5e;font-size:11px;font-weight:700;flex:none}
.interview-step .step-detail{font-weight:400}
.interview-step.done{background:#e3efe6;color:#245f4f}
.interview-step.done .step-marker{background:#245f4f;border-color:#245f4f;color:#fff}
.interview-step.current{background:#245f4f;color:#fff}
.interview-step.current .step-marker{border-color:#fff;color:#245f4f}
.voice-stage .interview-steps-list{justify-content:center;margin-top:8px}
@media(max-width:760px){
 .header-meta .tag{display:none}
 .ai-label{font-size:11px;padding:2px 8px 2px 3px}
 .interview-step{font-size:12px;padding:2px 8px 2px 2px}
 .interview-step .step-marker{width:18px;height:18px;font-size:10px}
 /* Only the current step keeps its name on screen; the others stay readable by screen readers. */
 .interview-step:not(.current) .step-name{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .interview-step:not(.current){padding-right:3px}
}
/* Inside a host application (data-host-header: the server loads the host's page-header script
 on every page) the host's bar is the page's only header, with the sign-out, the language and
 the AI label. As soon as the host has inserted its bar above the page, the page's own header is
 hidden; its #ai-disclosure stays in the document for the bar to show. If the host's script did
 not load, nothing is inserted and the page keeps its own header, AI label included. */
body[data-host-header]>*~header{display:none!important}
/* Pages that fill the viewport keep the host's bar at its own height. */
.interview-open>:not(main){flex:none}

/* Confirmation dialogs of irreversible actions (staff delete, revoke, replace; participant stop,
   finish, remove from profile): in-page, in the page's language, the risky action in red. */
.confirm-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff;color:var(--ink);box-shadow:0 18px 50px #173a3526}
.confirm-dialog::backdrop{background:#173a3559}
.confirm-dialog h2{font-size:24px;line-height:1.3;margin:0 0 12px}.confirm-dialog p{line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px}
.confirm-dialog .dialog-actions button{font-size:15px;padding:10px 18px}.confirm-dialog button.danger{background:#9b3a2f;color:#fff}
@media(max-width:480px){.dialog-actions{flex-direction:column-reverse}.dialog-actions button{width:100%}.confirm-dialog{padding:20px}}
/* The help dialog's close button is a full touch target. */
.help-dialog-head button{min-width:44px;min-height:44px}
/* A part of the application that is turned off says so on a page, never as raw JSON. */
.unavailable-page main{max-width:720px;margin:6vh auto;padding:0 16px}.unavailable-panel{padding:28px}