/* ─────────────────────────────────────────────────────────────────────────────
   layout.css — page structure for the try-on (tryon.html)

   Owns the shell only: the main area and the camera panel. What goes INSIDE the
   panel lives in panels.css; the settings drawer, its scrim and every widget in
   it come from components.css, because the configurator has the same drawer now.

   Structure:
     body ─ flex column
       ├── .app-header   fixed height (components.css)
       └── .tryon        fills the rest
            ├── #video-panel  webcam + AR ring
            └── .drawer       settings, off-canvas until the gear is pressed

   THE SETTINGS ARE A DRAWER, NOT A COLUMN
   ───────────────────────────────────────
   They used to be a permanent 240px sidebar, which cost the camera feed a fifth
   of the window on a laptop and did not fit on a phone at all. Everything in
   there is calibration and diagnostics — occasional, and nothing a customer
   trying a ring on needs in view. So the panel gets the whole window and the
   settings slide over it.
───────────────────────────────────────────────────────────────────────────── */

.tryon {
  flex: 1;             /* claim all the vertical space the header leaves */
  position: relative;  /* the drawer and scrim are positioned against this */
  min-height: 0;       /* lets the panel actually shrink inside the flex column */
  display: flex;
}

/* ── Panel shell ────────────────────────────────────────────────────────── */
.panel {
  /* The positioning context for everything inside — the canvases, the loading
     overlay and the bottom bar are all absolutely positioned against this. */
  position: relative;

  flex: 1;
  overflow: hidden;   /* clip canvases that overhang during a resize */

  /* Black, not --bg: letterbox bars should read as camera dead space rather
     than as page background. */
  background: var(--video-bg);
}

/* ── Narrow screens ─────────────────────────────────────────────────────────
   The drawer's own phone rules moved to components.css with the rest of it. */
@media (max-width: 640px) {
  /* The header has three things and a phone's width for two. The wordmark and
     the gear are the two that must stay legible and tappable, so the status
     line gives up its room first — it keeps its dot, which is the part that
     reports at a glance, and its text ellipses. */
  .app-header {
    padding: 0 12px;
  }

  .header-right {
    gap: 8px;
    min-width: 0;
  }

  #status {
    font-size: var(--text-xs);
    max-width: 46vw;
  }
}