/* /webcam-test. Tokens and components come from site.css; this file only
   lays out the camera panel. */

.cam-device { flex: 1 1 240px; }
.cam .toolbar > button { flex: none; }

/* The video and the message share the stage's one cell. */
.cam-stage > * { grid-area: 1 / 1; }
.cam-stage > p { max-width: 44ch; }
.cam-stage.is-fs { max-height: none; aspect-ratio: auto; border-radius: 0; }
.cam-fs-exit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; }
.cam-stage .fs-hint { white-space: normal; text-align: center; }

.cam-actions .check { margin-left: auto; }
@media (max-width: 640px) { .cam-actions .check { margin-left: 0; } }

.cam-zoom { flex: 1 1 260px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.cam-zoom output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.cam-photo { display: grid; gap: 10px; justify-items: start; margin: 0; }
.cam-photo img { display: block; width: min(100%, 480px); height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cam-photo figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--muted); }

.cam-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.cam-panel { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cam-panel h2 { font-size: 18px; }
.cam-panel .kv th { width: 55%; }