/* =============================================================================
   9UY Mirror — styles.css
   App-specific pieces only. Tokens, the header, footer, container, action row
   and scanline come from /assets/css/app.css; the About sheet, offline
   indicator and feedback button from /assets/css/api.css + shell.js.

   No :root block and no light override: the shared tokens already carry both
   schemes, so every colour here is expressed with them.
   ============================================================================= */

/* --- Camera stage --------------------------------------------------------- */
.mirror-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 62vh;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: border-color 0.25s ease;
}
.mirror-stage.has-stream { border-color: var(--border-hover); }

.mirror-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-deep);
  transform: scaleX(-1);
}
/* The flip control turns the selfie view into the un-mirrored one. */
.mirror-stage.unmirrored video { transform: none; }

/* --- Empty state ---------------------------------------------------------- */
.stage-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  pointer-events: none;
}
.stage-empty svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-dim);
}
.stage-empty p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.stage-empty .stage-hint {
  max-width: 26rem;
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.mirror-stage.has-stream .stage-empty { display: none; }

/* --- Footnote ------------------------------------------------------------- */
.mirror-hint {
  margin: 0;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}