/* ============================================================================
   Screen Recorder — 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  #61efed  13.6:1 on --bg   12.5:1 on --surface   14.1:1 on --bg-sunk
     light #287775   5.1:1 on --bg    5.3:1 on --surface    4.6:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #61efed; --accent-dim: rgba(97, 239, 237, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #287775; --accent-dim: rgba(40, 119, 117, 0.10); }
}

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

/* Several elements below are toggled with the `hidden` attribute from
   screen-recorder.js while also carrying their own `display` for layout.
   Author CSS setting `display` beats the UA stylesheet's [hidden] rule, so
   without this a result panel would show through empty before a recording
   ever finishes. Every tool on this site that toggles visibility from JS
   carries this same guard. */
[hidden] { display: none !important; }

/* ============================================================================
   The recording stage — live preview while capturing + idle placeholder
   ========================================================================= */

.rec-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;
}

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

.rec-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: 34ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------- status row -- */
/* The red recording dot is deliberately NOT the brand accent (cyan). Accent
   colour means "this site's brand"; red here means one specific functional
   state, "capture is live" — the same way base.css keeps --err reserved for
   failure states rather than letting a tool's own accent double for it. */

.rec-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--text-dim);
}

.rec-dot {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--text-faint);
}
.rec-status.is-live .rec-dot {
  background: var(--err);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.rec-status.is-live { color: var(--text); }

@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-status.is-live .rec-dot { animation: none; }
}

.rec-timer {
  font-feature-settings: "tnum" 1, "zero" 1;
  font-weight: 600;
  color: var(--text);
}

.rec-status.status-err { color: var(--err); }
.rec-status.status-warn { color: var(--warn); }

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

/* ------------------------------------------------------------- mic toggle -- */

.mic-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  cursor: pointer;
}
.mic-toggle input { margin-top: 0.2rem; flex: 0 0 auto; width: auto; }
.mic-toggle em { color: var(--text-faint); font-style: normal; }

/* ============================================================================
   Result — playback + download
   ========================================================================= */

.rec-result {
  margin-top: 1.5rem;
}
.rec-result h3 { margin-top: 0; }

.rec-result video {
  display: block;
  width: 100%;
  max-height: 26rem;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}

.rec-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
}

/* ============================================================================
   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; }

.tag-pass { color: var(--ok);  font-weight: 600; }
.tag-fail { color: var(--err); font-weight: 600; }
.tag-warn { color: var(--warn); font-weight: 600; }

.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;
}