/* ============================================================================
   Teleprompter — 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: the controls row, the recording panel, and
   the scrolling stage itself.

   Accent — bright green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #61ef87  12.8:1 on --bg   11.8:1 on --surface   13.2:1 on --bg-sunk
     light #28773d   5.3:1 on --bg    5.5:1 on --surface    4.9:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #61ef87; --accent-dim: rgba(97, 239, 135, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #28773d; --accent-dim: rgba(40, 119, 61, 0.10); }
}

.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
   app.js. Author CSS setting `display` on the same element beats the UA
   stylesheet's [hidden] rule, so this guard has to be explicit — the same
   pattern every other interactive tool on this site carries. */
[hidden] { display: none !important; }

/* ============================================================================
   Controls row — speed / font size / speaking pace
   ========================================================================= */

.tp-controls { margin-bottom: 1.1rem; }

.tp-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.tp-toggle-row {
  align-items: center;
  margin-bottom: 1.25rem;
}
.tp-toggle-row .field-label { margin-right: 0.15rem; }

/* ============================================================================
   Script editor
   ========================================================================= */

#tp-script {
  min-height: 12rem;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}

.stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin: 0.9rem 0 0;
}
.stat-line .stat { display: grid; gap: 0.15rem; }

.tp-record-field {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.tp-record-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-weight: 600;
  cursor: pointer;
}
.tp-record-toggle input { width: auto; flex: 0 0 auto; accent-color: var(--accent); }
.tp-optional { font-weight: 400; color: var(--text-dim); }

.tp-record-field .note { margin-top: 0.5rem; }

.tp-cam-wrap { margin-top: 0.9rem; max-width: 16rem; }
.tp-cam-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

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

/* ============================================================================
   The stage — the scrolling viewport and its own toolbar
   ========================================================================= */

.tp-stage { margin-top: 0.5rem; }

.tp-viewport {
  position: relative;
  height: min(70vh, 32rem);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

/* Fullscreen is requested on #tp-stage (viewport + its own toolbar), so its
   controls stay reachable without exiting fullscreen to click them. */
#tp-stage:fullscreen,
#tp-stage:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  background: #000;
  padding: clamp(1rem, 3vw, 2rem);
}
#tp-stage:fullscreen .tp-viewport,
#tp-stage:-webkit-full-screen .tp-viewport {
  height: auto;
  flex: 1 1 auto;
}

.tp-scroller {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

/* Padding, not margin, so it is part of the scrollable height that the
   offset formula (scrollHeight - viewportHeight) already accounts for: a
   comfortable gap before the first word arrives at the reading line, and a
   long trailing gap so the last line clears the reading line before
   scrolling stops, instead of the stage halting the instant it appears. */
.tp-text {
  padding: 6rem clamp(1rem, 4vw, 3rem) 20rem;
  color: #fff;
  font-size: 40px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.tp-text p { margin: 0 0 1em; }
.tp-text p:last-child { margin-bottom: 0; }

/* Reading-line indicator — marks where a presenter's eyes should rest while
   the text scrolls past underneath. Purely decorative (aria-hidden), so it
   carries no text-contrast obligation of its own. */
.tp-reading-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 0;
  border-top: 2px solid var(--accent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
.tp-reading-line::before,
.tp-reading-line::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.tp-reading-line::before { left: 0.4rem; border-left: 8px solid var(--accent); }
.tp-reading-line::after  { right: 0.4rem; border-right: 8px solid var(--accent); }

.tp-countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.tp-countdown-overlay span {
  font-family: var(--mono);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  color: #fff;
  animation: tp-countdown-pulse 1s ease-in-out infinite;
}
@keyframes tp-countdown-pulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  30%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-countdown-overlay span { animation: none; }
}

.tp-cam-overlay {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  width: clamp(6rem, 18vw, 10rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: #000;
}

.tp-stage-toolbar { margin-top: 1rem; }

#tp-stage .status-line { margin-top: 0.75rem; }

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

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

/* base has no visually-hidden helper; the table caption needs one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* .formula is a <div> with white-space: pre, so base's `pre` rule can't reach it */
.formula {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}

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