/* A stable service panel: live camera, processing and results share one place. */
#main{--stage-height:clamp(360px,48vh,480px)}
.camera-heading{min-height:64px}.camera-heading h2{line-height:1.3}
.workspace-heading{margin-bottom:14px}.workspace-heading h1{font-size:28px}.workspace-heading p{font-size:13px}
#main .workspace-stats{display:none}
.flow-steps{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 18px;color:var(--muted);font-size:12px}
.flow-steps>span{display:flex;align-items:center;gap:8px}.flow-steps b{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-weight:500}
.flow-steps [aria-current="step"]{color:var(--mint)}.flow-steps [aria-current="step"] b{background:#204439;border-color:#487f69}
.verification-grid{align-items:start;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr)}
.control-column{display:flex;flex-direction:column;gap:16px;grid-column:1;grid-row:1;min-width:0}
.camera-card{grid-column:2;grid-row:1;min-width:0}
.camera-card .action-area{display:grid;gap:10px;margin-top:16px;min-height:56px}
.camera-card .action-area #prog:not(:empty){margin-top:0}
#main:not([data-step="identity"]) #btnContinue{visibility:hidden}
.camera-card .capture-footer{margin-top:12px}
.camera-card[data-view="result"] .capture-footer{visibility:hidden}
.camera-card[data-view="result"] .action-area>#prog.ok,.camera-card[data-view="camera"] .action-area>#prog:not(.err):not(.warn){display:none}
body:has(#main:not([hidden])[data-stage="result"]) #flash.show{display:none}
#scanStage{position:relative;isolation:isolate;height:var(--stage-height);border-radius:14px;overflow:hidden;background:#101e27}
#scanStage #camWrap{height:100%;max-height:none;width:100%;aspect-ratio:auto}
#scanStage[data-view="camera"] #camWrap{animation:stageFade .18s ease-out}
#scanStage[data-view="result"] #camWrap{visibility:hidden}
.camera-card[data-view="result"] #btnSwitchCamera{visibility:hidden}
.stage-progress{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:28px;background:#0c1c29e8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-align:center;animation:stageFade .18s ease-out}
.stage-spinner{width:58px;height:58px;border:3px solid #73e1c22b;border-top-color:var(--mint);border-radius:50%;box-shadow:0 0 36px #73e1c211;animation:rotate 1s linear infinite}
#stageProgressBody{width:100%}.stage-progress #prog{display:block;margin:0;padding:0;border:0;background:none;color:var(--text);font-size:18px;line-height:1.5;text-align:center}
.stage-progress #prog .dot{display:none}#stageCaptureHint{font-size:13px;line-height:1.6;color:#b6cbd0;max-width:290px}
#scanStage #out{position:absolute;inset:0;z-index:9;grid-area:auto;padding:26px;overflow:auto;overscroll-behavior:contain;border-radius:14px;margin:0;animation:stageFade .18s ease-out;scrollbar-width:thin;background:linear-gradient(145deg,#173329,#13212c)}
#scanStage #out.warn{background:linear-gradient(145deg,#342d20,#13212c)}#scanStage #out.no{background:linear-gradient(145deg,#35232b,#13212c)}
.result-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#73e1c21c;border:1px solid #73e1c266;color:var(--mint);font-size:32px;line-height:1;margin-bottom:22px}
#out.warn .result-icon{color:var(--amber);border-color:#d9b36c77;background:#d9b36c18}#out.no .result-icon{color:var(--red);border-color:#e8899877;background:#e8899818}
#scanStage #head{margin-bottom:12px}#scanStage #verdict{font-size:20px;letter-spacing:-.3px}#resultSummary{font-size:14px;line-height:1.7;color:#d6e6e8;overflow-wrap:anywhere}
#resultDetails{margin-top:18px;padding-top:14px;border-top:1px solid #8dafb32e}#resultDetails summary{cursor:pointer;font-size:13px;color:var(--mint);padding:5px 0;min-height:32px}#resultDetails .kv{font-size:12px}
#scanStage[data-view="feedback"] #out{top:auto;max-height:48%;padding:14px 16px;background:#182731f5;box-shadow:0 -8px 20px #0003}
#scanStage[data-view="feedback"] .result-icon{display:none}#scanStage[data-view="feedback"] #head{margin-bottom:6px}#scanStage[data-view="feedback"] #verdict{font-size:15px}#scanStage[data-view="feedback"] #resultSummary{font-size:12px;line-height:1.55}#scanStage[data-view="feedback"] #resultDetails{margin-top:8px;padding-top:4px}
.action-area #next{margin:0;min-height:54px}.action-area .secondary-next{min-height:36px;padding:7px 12px;font-size:12px;background:transparent}
#dismissFeedback{min-width:44px;min-height:44px;flex-shrink:0;font-size:26px}
.scan-participant strong{font-size:15px}.scan-participant .eyebrow{font-size:9px}
@keyframes stageFade{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.stage-progress,#scanStage #out,#scanStage[data-view="camera"] #camWrap{animation:none}.stage-spinner{animation:none;border-color:var(--mint)}}
@media(min-width:651px){
 #main{--stage-height:clamp(260px,calc(100dvh - 450px),420px);padding-top:18px}
 .workspace-heading .eyebrow,.workspace-heading p,.flow-steps{display:none}
 .workspace-heading h1{font-size:24px;margin:0}.workspace-heading{margin-bottom:12px}
 .session-info{padding:6px 12px}.scan-participant{padding:9px 14px;margin-bottom:12px}
}
@media(max-width:650px){
 #scanStage[data-view="feedback"] #out{top:0;max-height:none;padding:20px}
 #scanStage[data-view="feedback"] #verdict{font-size:19px}
 #scanStage[data-view="feedback"] #resultSummary{font-size:15px;line-height:1.65}
 #main{--stage-height:clamp(220px,calc(100svh - var(--mobile-header-height) - var(--mobile-participant-height,70px) - var(--mobile-dock-height) - 130px),390px);padding-top:10px}
 #main .workspace-heading,#main .guide-card{display:none}
 .flow-steps{font-size:11px;margin:10px 0 14px}
 .verification-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .control-column{display:contents}
 .identity-card,.camera-card{grid-column:1;grid-row:1}
 #main[data-step="result"] .camera-card{display:block}
 #main[data-step="result"][data-pending="false"] .action-area{display:grid}
 .scan-participant{position:sticky;top:var(--mobile-header-height);z-index:55;background:#13251ff5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:14px;box-shadow:0 5px 18px #0002}
 .scan-participant strong{font-size:14px;line-height:1.4}.scan-participant>div{flex:1;min-width:0}
 html{scroll-padding-top:calc(var(--mobile-header-height) + var(--mobile-participant-height,0px) + 16px)}
 #scanStage #out{padding:22px}#scanStage #verdict{font-size:18px}.result-icon{width:48px;height:48px;margin-bottom:16px;font-size:27px}
 .camera-card .action-area{margin-top:10px;min-height:0}.camera-card .capture-footer{font-size:10px}
 html:has(#main:not([hidden])[data-step="result"]){--mobile-dock-height:calc(var(--mobile-button-height) + 24px + var(--mobile-action-safe-bottom))}
 #main[data-step="result"]::after{content:"";position:fixed;left:0;right:0;bottom:var(--mobile-keyboard-inset);height:var(--mobile-dock-height);z-index:50;pointer-events:auto;background:#0e1b25f5;border-top:1px solid #385148;box-shadow:0 -8px 30px #0003;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
 #main[data-primary="next"] #next{position:fixed;left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right));bottom:calc(12px + var(--mobile-action-safe-bottom) + var(--mobile-keyboard-inset));z-index:51;width:calc(100% - 32px - var(--safe-left) - var(--safe-right));min-height:56px;margin:0;border-radius:15px;font-size:15px;box-shadow:0 5px 18px #0003;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 #main[data-primary="next"] #next:active:not(:disabled){transform:scale(.985)}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]){inset:auto var(--safe-right) var(--mobile-keyboard-inset,0px) var(--safe-left);margin:0;width:calc(100% - var(--safe-left) - var(--safe-right));max-width:none;height:auto;min-height:min(340px,calc(100dvh - var(--mobile-keyboard-inset,0px) - var(--safe-top) - 12px));max-height:calc(100dvh - var(--mobile-keyboard-inset,0px) - var(--safe-top) - 12px);padding:22px 20px calc(18px + var(--mobile-action-safe-bottom));border-radius:26px 26px 0 0;overflow:hidden;animation:sheetReveal .18s ease-out}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"])[open]{display:flex;flex-direction:column}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) .modal-top{flex-shrink:0;margin-bottom:14px}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) #closeModal{width:44px;height:44px;background:#20313e;border:1px solid #36505c}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) h2{flex-shrink:0;font-size:23px;line-height:1.3}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) #modalBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;font-size:16px;line-height:1.65;color:#c5d5de}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) #modalBody p{font-size:16px;line-height:1.65}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) .modal-actions{flex-shrink:0;margin-top:20px}
 #modal:is([data-kind="verification-feedback"],[data-kind="verification-confirmation"]) button:not(.icon-button){min-height:52px;font-size:15px}
 #modal .feedback-note{padding:12px 14px;border:1px solid #d9b36c55;border-radius:12px;background:#d9b36c12;color:var(--amber)}
}
@keyframes sheetReveal{from{opacity:.6;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}