/* ============================================================================
   Webcam Test — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — cyan, measured against base.css surfaces (WCAG relative luminance):
     dark  #22d3ee  10.46:1 on --bg   9.65:1 on --surface   10.83:1 on --bg-sunk
     light #0e7490   5.14:1 on --bg   5.36:1 on --surface    4.71:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #22d3ee; --accent-dim: rgba(34, 211, 238, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #0e7490; --accent-dim: rgba(14, 116, 144, 0.10); }
}

/* brand glyph in the header — two-tone camera mark, coloured from the accent */
.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* Several elements below (.cam-stats, .cam-snapshot) set their own `display`
   for layout and are also toggled with the `hidden` attribute from webcam.js.
   Author CSS setting `display` beats the UA stylesheet's [hidden] rule, so
   without this the stats panel would show through empty before the camera
   ever starts. !important matches the same guard every other tool on this
   site carries for exactly this reason. */
[hidden] { display: none !important; }

/* ============================================================================
   The camera stage — video preview + placeholder overlay
   ========================================================================= */

.cam-stage {
  position: relative;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cam-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.cam-stage video.is-mirrored { transform: scaleX(-1); }

.cam-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
  max-width: 32ch;
  margin-inline: auto;
}

.status-line {
  margin: 0.85rem 0 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-dim);
}
.status-line.status-ok  { color: var(--ok); }
.status-line.status-err { color: var(--err); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

.cam-controls { margin-top: 1.25rem; }

/* ============================================================================
   Live stats panel
   ========================================================================= */

.cam-stats {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* ============================================================================
   Snapshot
   ========================================================================= */

.cam-snapshot { margin-top: 1.75rem; }
.cam-snapshot h3 { margin-top: 0; }

#snapshot-canvas {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}

/* ============================================================================
   Article furniture shared with the rest of the site's tools
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

.checklist { padding-left: 1.1rem; }
.checklist li { margin-bottom: 0.55em; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}