/* Layout parity: when the mobile URL is forced from a wide desktop,
   use the original v3.2 portrait rules in a phone-width container. 
   On actual phones (<=700px), this sheet changes nothing. */
@media (min-width:701px){

  html,body{margin:0;width:100%;overflow-x:hidden}
  .app{width:100%;max-width:none;padding:calc(env(safe-area-inset-top,0px) + 6px) 8px calc(env(safe-area-inset-bottom,0px) + 5px)}
  .header{display:flex;flex-direction:column;gap:2px;margin:0 0 6px;position:relative;padding-right:2px}
  .header>div{min-width:0;width:100%}
  .eyebrow{font-size:8px;letter-spacing:.35px;line-height:1.2;margin:0 0 3px;white-space:normal}
  h1{font-size:clamp(18px,5.1vw,22px);line-height:1.12;margin:0}
  .subhead{display:none}
  .privacy{display:none}
  .layout{display:flex;flex-direction:column;gap:6px}
  .panel{border-radius:10px}
  .video-panel{padding:6px 7px;display:flex;flex-direction:column;gap:4px}
  .section-heading{margin:0 0 2px;min-height:14px}
  .section-heading h2{font-size:12px}
  .section-heading span{font-size:10px}
  .video-shell{width:100%;height:clamp(124px,22dvh,196px);max-height:none;aspect-ratio:auto;border-radius:8px}
  .video-shell video,.video-shell canvas{object-fit:contain}
  .camera-placeholder strong{font-size:13px}
  .camera-placeholder p{font-size:10px;margin-top:3px}
  .roi-selector{margin:0;padding:5px 6px;border-radius:7px;min-width:0}
  .roi-heading{font-size:10px;margin:0 0 4px;min-height:12px}
  .roi-heading span{font-size:10px}
  .roi-heading .swipe-hint{display:inline;color:#83a9bb;font-size:9px;font-weight:400}
  .roi-buttons{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .roi-buttons::-webkit-scrollbar{display:none}
  .roi-buttons button{flex:0 0 auto;width:auto;max-width:125px;min-width:84px;min-height:34px;padding:5px 8px;white-space:normal;font-size:10px;scroll-snap-align:start}
  .roi-hint{display:none}
  .instructions{min-height:19px;max-height:31px;font-size:10px;padding:0;line-height:1.25;overflow:hidden}
  .actions{display:flex;flex-wrap:nowrap;gap:5px}
  .actions #previewBtn,.actions #startBtn{flex:1 1 0;min-width:0}
  .actions #stopBtn{flex:0 0 46px;min-width:46px}
  .actions button{font-size:10px;line-height:1.15;padding:6px 4px;min-height:37px;border-radius:7px}
  .metrics{gap:6px}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .metric{min-width:0;min-height:67px;padding:7px 10px;display:flex;flex-direction:column;justify-content:space-between}
  .metric p{font-size:9px;line-height:1.15;letter-spacing:.35px;min-height:10px}
  .number{gap:5px;margin:2px 0 1px}
  .number span{font-size:clamp(25px,7vw,34px);letter-spacing:-1px}
  .number small{font-size:10px}
  .metric-footer{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wave-panel{padding:7px 10px;min-height:0}
  .wave-panel canvas{height:clamp(30px,5dvh,47px)}
  .progress{margin-top:5px;height:4px}
  .tiny{margin:4px 0 0;font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  footer{margin-top:5px;font-size:9px;line-height:1.24}
  footer p{margin:2px 0}
  footer .build-label{display:none}


  .video-panel .roi-selector{order:0}
  .video-panel .actions{order:1}
  .video-panel .section-heading{order:2;margin-top:4px}
  .video-panel .video-shell{order:3;height:clamp(205px,33dvh,345px)}
  .video-panel .instructions{order:4}
  .video-panel .video-shell video,.video-panel .video-shell canvas{object-fit:contain}


  html, body { width:100%; max-width:100%; }
  .app, .layout, .video-panel, .metrics,
  .metrics-grid, .wave-panel, .roi-selector,
  .roi-heading, .roi-buttons, .actions, .video-shell {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .app, .layout, .video-panel, .metrics,
  .roi-selector, .roi-buttons, .actions, .video-shell { width:100%; }
  .layout { align-items:stretch; }
  .video-panel { flex:0 1 auto; overflow:hidden; }
  .roi-selector { align-self:stretch; }
  .roi-heading strong { min-width:0; }
  .roi-heading #roiName { max-width:40%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .roi-buttons { flex:0 1 auto; overflow-x:auto; overflow-y:hidden; }
  .actions { flex:0 1 auto; }
  .actions button { min-width:0; overflow-wrap:anywhere; }
  .video-panel .video-shell {
    order:3;
    align-self:stretch;
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    max-height:min(36dvh,320px);
    aspect-ratio:4 / 3;
    overflow:hidden;
  }
  .video-panel .video-shell video,
  .video-panel .video-shell canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scaleX(-1);
  }
  .camera-placeholder { inset:0; max-width:100%; padding:12px; }
  .camera-placeholder strong, .camera-placeholder p { max-width:100%; overflow-wrap:break-word; }
  .metrics, .metrics-grid, .metric { min-width:0; }
  .metric { overflow:hidden; }
  .metric p { overflow-wrap:anywhere; }

/* Constrain the forced mobile layout to approximate an actual phone viewport. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app{width:min(100%,440px)!important;max-width:440px!important;margin:0 auto!important;padding:12px 8px!important}
.layout{display:flex;flex-direction:column;gap:7px}
.video-panel .video-shell{aspect-ratio:4/3;height:auto;max-height:330px}
.roi-buttons{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important}
.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
.layout-switch{margin:9px 0 0;font-size:12px}
.layout-switch a{color:#71e8db;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:4px 0}