/* v176 — visible, responsive 3:4 portrait framing guide in LIVE camera. */
#camera-live-stage.camera-stage{aspect-ratio:3/4;isolation:isolate}
#camera-live-stage .camera-frame-3x4{
  position:absolute;inset:0;z-index:3;display:block;pointer-events:none;
  border:0;border-radius:0;box-shadow:none;background:none;overflow:hidden
}
#camera-live-stage .camera-frame-3x4::before,
#camera-live-stage .camera-frame-3x4::after{content:none!important}
#camera-live-stage .camera-frame-3x4 span{
  position:absolute;box-sizing:border-box;left:auto;right:auto;top:auto;bottom:auto;
  width:auto;height:auto;border:0;box-shadow:none
}
#camera-live-stage .camera-frame-3x4 .camera-frame-boundary{
  inset:4%;border:1.8px dashed rgba(255,255,255,.75)!important;border-radius:12px;
  background:none;box-shadow:0 0 0 100px rgba(0,0,0,.13);
}
#camera-live-stage .camera-frame-3x4 .camera-frame-face{
  top:14%;left:35%;width:30%;height:31%;border:2px dashed rgba(255,255,255,.95)!important;
  border-radius:48% 48% 46% 46%;background:rgba(255,255,255,.025);
  box-shadow:0 1px 8px rgba(0,0,0,.28)
}
#camera-live-stage .camera-frame-3x4 .camera-frame-shoulders{
  left:16%;right:16%;bottom:13%;height:38%;border:2px dashed rgba(255,255,255,.9)!important;
  border-bottom:0!important;border-radius:52% 52% 0 0 / 65% 65% 0 0;background:none;
  box-shadow:0 -2px 5px rgba(0,0,0,.10)
}
#camera-live-stage .camera-frame-3x4 .camera-frame-eyeline{
  left:35%;right:35%;top:29%;height:0;border:0!important;
  border-top:1px dotted rgba(255,255,255,.65)!important
}
#camera-live-stage .camera-frame-3x4 .camera-frame-size{
  top:6.5%;right:7%;padding:4px 8px;border-radius:8px;
  background:rgba(15,19,25,.72);color:#fff;font:900 12px/1.3 'DM Sans',system-ui,sans-serif;
  letter-spacing:.03em;border:1px solid rgba(255,255,255,.7)!important
}
#camera-live-stage .camera-frame-3x4 .camera-frame-corner{
  width:22px;height:22px;z-index:2;border:0!important;box-shadow:none
}
#camera-live-stage .camera-frame-3x4 .camera-frame-corner.tl{left:4%;top:4%;border-top:4px solid #ffe587!important;border-left:4px solid #ffe587!important;border-top-left-radius:10px}
#camera-live-stage .camera-frame-3x4 .camera-frame-corner.tr{right:4%;top:4%;border-top:4px solid #ffe587!important;border-right:4px solid #ffe587!important;border-top-right-radius:10px}
#camera-live-stage .camera-frame-3x4 .camera-frame-corner.bl{left:4%;bottom:4%;border-bottom:4px solid #ffe587!important;border-left:4px solid #ffe587!important;border-bottom-left-radius:10px}
#camera-live-stage .camera-frame-3x4 .camera-frame-corner.br{right:4%;bottom:4%;border-bottom:4px solid #ffe587!important;border-right:4px solid #ffe587!important;border-bottom-right-radius:10px}
#camera-live-stage .camera-frame-3x4 .camera-frame-instruction{
  left:50%;bottom:5%;max-width:88%;transform:translateX(-50%);padding:6px 10px;
  border-radius:8px;background:rgba(12,15,21,.79);color:#fff;font:850 clamp(10px,2.4vw,13px)/1.3 'DM Sans',system-ui,sans-serif;
  text-align:center;white-space:normal;min-width:0;box-shadow:0 2px 7px rgba(0,0,0,.25)
}
/* Existing camera-placeholder precedes the overlay. Remove the framing until video becomes available. */
#camera-live-stage:has(#camera-placeholder:not([hidden])) .camera-frame-3x4{display:none}
@media(max-width:440px){
  #camera-live-stage .camera-frame-3x4 .camera-frame-face{top:16%;height:28%}
  #camera-live-stage .camera-frame-3x4 .camera-frame-shoulders{height:35%;bottom:13%}
  #camera-live-stage .camera-frame-3x4 .camera-frame-instruction{padding:4px 8px;bottom:5%}
}
@media(prefers-reduced-motion:reduce){#camera-live-stage .camera-frame-3x4{animation:none!important;transition:none!important}}

/* v225 — consistent portrait preview and capture, including short mobile screens. */
#camera-dialog{box-sizing:border-box;width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:18px;scrollbar-gutter:stable}
#camera-dialog .camera-kicker{font-size:11px;margin-bottom:4px}
#camera-dialog h2{font-size:clamp(23px,4.8vw,30px);line-height:1.12;margin-bottom:8px}
#camera-dialog .camera-intro{font-size:14px;line-height:1.4;margin-bottom:10px}
#camera-dialog #camera-live-stage,#camera-dialog #camera-edit-panel{
  box-sizing:border-box;width:min(100%,330px,max(150px,calc((100dvh - 320px)*.75)));
  height:auto;max-height:none;aspect-ratio:3/4;flex:none;margin:0 auto;border-width:2px
}
#camera-dialog #camera-live-stage[hidden],#camera-dialog #camera-edit-panel[hidden]{display:none!important}
#camera-dialog #camera-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#camera-live-stage .camera-frame-3x4 .camera-frame-face{left:28%;top:12%;width:44%;height:40%}
#camera-live-stage .camera-frame-3x4 .camera-frame-shoulders{left:10%;right:10%;bottom:14%;height:31%}
#camera-live-stage .camera-frame-3x4 .camera-frame-eyeline{left:29%;right:29%;top:33%}
#camera-live-stage .camera-frame-3x4 .camera-frame-instruction{bottom:5%;width:86%;max-width:86%;padding:5px 6px;font-size:10px}
#camera-dialog .camera-status{font-size:12px;line-height:1.35;min-height:16px;margin-top:7px}
#camera-dialog .camera-actions,#camera-dialog .camera-review-actions{grid-template-columns:1fr 1.25fr;gap:8px;margin-top:10px}
#camera-dialog .camera-actions button,#camera-dialog .camera-review-actions button{min-height:46px;padding:8px;font-size:14px;line-height:1.2}
#camera-dialog .camera-fallback{font-size:12px;margin-top:10px;padding-top:8px;gap:5px;flex-direction:row;align-items:center}
#camera-dialog .camera-fallback-label{font-size:12px;min-height:38px;padding:6px 9px}
@media(max-width:520px){
  #camera-dialog{padding:14px 12px;padding-bottom:max(14px,env(safe-area-inset-bottom));border-radius:18px}
  #camera-dialog .camera-intro{font-size:13px}
}