.video-shell.tf-camera-live{isolation:isolate;background:#10140f}
.video-shell.tf-camera-live .tf-camera-source{position:absolute;inset:0;opacity:0;pointer-events:none}
.tf-camera-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#10140f;touch-action:none}
.tf-camera-controls{position:absolute;inset:0;z-index:3;pointer-events:none}
.tf-camera-switch,.tf-camera-expand{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff35;border-radius:50%;background:#111b15d9;color:#fff;pointer-events:auto;transition:background .18s,transform .18s}
.tf-camera-expand{right:70px}
.tf-camera-switch svg,.tf-camera-expand svg{display:block}
.tf-camera-switch:hover,.tf-camera-expand:hover{background:#243326}
.tf-camera-switch:active,.tf-camera-expand:active{transform:scale(.94)}
.tf-camera-switch:disabled{opacity:.4}
.tf-camera-switch:focus-visible,.tf-camera-expand:focus-visible,.tf-camera-zoom input:focus-visible{outline:3px solid var(--green,#a6f542);outline-offset:3px}
.tf-camera-zoom{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;min-height:48px;box-sizing:border-box;border:1px solid #ffffff26;border-radius:14px;background:rgb(10 18 13 / 28%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-shadow:0 1px 3px #0009;pointer-events:auto;font-size:14px;font-weight:600;line-height:1.3}
.tf-camera-zoom-name{flex:0 0 auto}
.tf-camera-zoom input[type=range]{width:auto;min-width:0;flex:1;height:44px;margin:-8px 0;padding:0;border:0;border-radius:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}
.tf-camera-zoom input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:rgb(255 255 255 / 38%)}
.tf-camera-zoom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border:1px solid #ffffffb3;border-radius:50%;background:var(--green,#a6f542);box-shadow:0 1px 5px #0006}
.tf-camera-zoom input[type=range]::-moz-range-track{height:3px;border:0;border-radius:3px;background:rgb(255 255 255 / 38%)}
.tf-camera-zoom input[type=range]::-moz-range-thumb{width:18px;height:18px;box-sizing:border-box;border:1px solid #ffffffb3;border-radius:50%;background:var(--green,#a6f542);box-shadow:0 1px 5px #0006}
.tf-camera-zoom output{flex:0 0 44px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0;color:#d7f4b4}
.video-shell.tf-camera-live .video-status{z-index:2;max-width:calc(100% - 146px);line-height:1.4}
.tf-camera-overlay-open{overscroll-behavior:none}
.video-shell.tf-camera-expanded{position:fixed!important;top:var(--tf-camera-top,0px)!important;left:var(--tf-camera-left,0px)!important;width:var(--tf-camera-width,100vw)!important;height:var(--tf-camera-height,100vh)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;aspect-ratio:auto!important;z-index:2147483000!important;isolation:isolate;background:#10140f;overscroll-behavior:none}
.video-shell.tf-camera-expanded.tf-camera-native{top:0!important;left:0!important;width:100%!important;height:100%!important}
.tf-camera-expanded .tf-camera-frame{max-width:none;max-height:none;object-position:center}
/* Fill the landscape preview; retain the complete source frame in the recording. */
.tf-camera-expanded.tf-camera-landscape .tf-camera-frame{object-fit:cover}
.tf-camera-expanded .tf-camera-switch{top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px))}
.tf-camera-expanded .tf-camera-expand{top:calc(14px + env(safe-area-inset-top,0px));right:calc(72px + env(safe-area-inset-right,0px))}
.video-shell.tf-camera-expanded .video-status{top:calc(16px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px));max-width:calc(100% - 156px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));font-size:13px;margin:0}
.tf-camera-expanded .tf-camera-zoom{left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(82px + env(safe-area-inset-bottom,0px));max-width:460px;margin-inline:auto}
.tf-camera-actions{position:absolute;z-index:4;left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:10px;margin:0!important;padding:0;max-width:460px;margin-inline:auto!important}
.tf-camera-actions .btn{flex:1;min-width:0;min-height:48px;width:auto;max-width:none;margin:0!important;padding:12px 16px;font-size:15px;font-weight:650;line-height:1.35;border-radius:14px;white-space:normal;background:var(--green,#a6f542);color:#152013;border:1px solid transparent;box-shadow:none}
.tf-camera-actions .btn.outline{background:#111b15e6;color:#fff;border-color:#ffffff55}
.tf-camera-actions .btn:disabled{opacity:.55}
.tf-camera-actions .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tf-camera-expanded.tf-camera-landscape .tf-camera-expand{left:calc(14px + env(safe-area-inset-left,0px));right:auto}
.video-shell.tf-camera-expanded.tf-camera-landscape .video-status{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 160px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));text-align:center;overflow-wrap:anywhere}
.tf-camera-expanded.tf-camera-landscape .tf-camera-actions{top:50%;bottom:auto;left:auto;right:calc(16px + env(safe-area-inset-right,0px));width:144px;max-width:144px;transform:translateY(-50%);flex-direction:column}
.tf-camera-expanded.tf-camera-landscape .tf-camera-actions .btn{flex:0 0 auto;width:100%;padding:12px 10px}
.tf-camera-expanded.tf-camera-landscape .tf-camera-actions .btn.outline{min-height:44px;background:rgb(10 18 13 / 28%);border-color:#ffffff40}
.tf-camera-expanded.tf-camera-landscape .tf-camera-zoom{left:calc(16px + env(safe-area-inset-left,0px));right:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(280px,calc(100% - 192px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:none;min-height:48px;padding:6px 12px;margin:0}
@media(max-width:480px){.tf-camera-zoom{gap:9px;padding:10px 12px;left:10px;right:10px;bottom:10px}.tf-camera-switch{top:10px;right:10px}.tf-camera-expand{top:10px;right:66px}}
@media(max-height:400px){.tf-camera-expanded.tf-camera-landscape .tf-camera-zoom-name{display:none}.tf-camera-expanded.tf-camera-landscape .tf-camera-actions{width:136px;max-width:136px}.tf-camera-expanded.tf-camera-landscape .tf-camera-actions .btn{min-height:46px;padding:10px 12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.tf-camera-switch,.tf-camera-expand{transition:none}}

/* Keep the capture grid's intrinsic media width from covering the set card. */
.capture-layout{min-width:0}
.capture-layout>section,.capture-layout>aside{min-width:0;max-width:100%;box-sizing:border-box}
.capture-layout .video-shell{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.capture-layout .video-shell video,.capture-layout .tf-camera-frame{min-width:0;max-width:100%}
.capture-layout .fields{min-width:0}
.capture-layout .fields>label{min-width:0}
.capture-layout .fields input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.capture-layout #capture-actions{min-width:0;flex-wrap:wrap}
.capture-layout #capture-actions>.btn{min-width:0;white-space:normal;overflow-wrap:anywhere}
/* A rotated phone can exceed the site's old desktop breakpoint. */
@media(max-width:1100px),(orientation:landscape) and (max-height:600px) and (pointer:coarse){
 .capture-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .capture-layout>aside{position:static;inset:auto;transform:none;width:100%;margin:0}
}