/**
 * Student View — shared, tool-agnostic chrome.
 *
 * Two pieces every tool's Student View integration reuses as-is:
 *   1. The teacher-side share popup (.sv-share-*) that lives next to each
 *      tool's own icon-button in its toolbar.
 *   2. The read-only student page shell (.sv-*) — header/live badge/
 *      waiting/message states — used by every `*-student.php` page.
 *
 * Tool-specific look is a handful of CSS custom properties, overridden per
 * tool or game on its own body class (see e.g. css/games/story-sparks.css). The
 * defaults below match Drill's teal, since Drill was first to ship this.
 *
 * Each tool's own stylesheet still owns anything specific to its layout
 * (e.g. drill.css's `.drill-student-shell .drill-stage` padding override) —
 * only the genuinely tool-agnostic chrome lives here.
 */

:root {
  --sv-accent: #0891b2;
  --sv-accent-dark: #0e7490;
  --sv-success: #16a34a;
  --sv-line: #e2e8f0;
  --sv-muted: #64748b;
}

/* ── Teacher-side share popup ── */

.sv-icon-button-busy { opacity: 0.55; pointer-events: none; }

.sv-share-wrap { position: relative; }

.sv-share-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(340px, 82vw);
  padding: 14px 16px 12px;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
.sv-share-popup__label {
  margin: 0 0 8px;
  color: var(--sv-muted);
  font: 800 11px/1.3 "Nunito", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sv-share-popup__row { display: flex; align-items: center; gap: 8px; }
.sv-share-popup__input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
  font: 600 12px/normal ui-monospace, "SF Mono", Menlo, monospace;
}
.sv-share-popup__copy {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1.5px solid var(--sv-accent);
  border-radius: 9px;
  background: var(--sv-accent);
  color: #fff;
  font: 800 13px/1 "Nunito", sans-serif;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.sv-share-popup__copy:hover { background: var(--sv-accent-dark); border-color: var(--sv-accent-dark); }
.sv-share-popup__status {
  margin: 8px 0 0;
  min-height: 15px;
  color: var(--sv-success);
  font: 800 12px/1.3 "Nunito", sans-serif;
  opacity: 0;
  transition: opacity 160ms ease;
}
.sv-share-popup__status.is-visible { opacity: 1; }
.sv-share-popup__status.is-error { color: #dc2626; }

/* ── Read-only student page shell ── */

.sv-page { padding-top: 0; }

.sv-shell-wrap {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.sv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 0;
}
.sv-header__icon { width: 30px; height: 30px; object-fit: contain; }
.sv-header__name { color: #0f172a; font: 900 16px/1 "Nunito", sans-serif; letter-spacing: -0.02em; }
.sv-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font: 800 11px/1 "Nunito", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sv-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: sv-live-pulse 1.6s ease-in-out infinite;
}
@keyframes sv-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.sv-waiting,
.sv-message {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 72px 26px;
  color: var(--sv-muted);
  text-align: center;
}
.sv-message h1 { margin: 0; color: #0f172a; font-size: 19px; }
.sv-message p { margin: 0; font: 700 14px/1.5 "Nunito", sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .sv-live__dot { animation: none; }
}

/* ── Site footer, pinned to the bottom of the viewport ──
 * Student pages don't load css/layout.css (no site nav/header chrome to
 * style), so php/footer.php's <footer class="site-footer"> would otherwise
 * render with no styling at all. Reproduces layout.css's .site-footer
 * look/pinning behavior here once, shared by every *-student.php page,
 * rather than duplicating it per tool. */
.sv-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.sv-page > main { flex: 1 0 auto; }
.sv-page .site-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 14px 16px;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  border-top: 1px solid var(--border, rgba(148, 163, 184, 0.32));
}
.sv-page .site-footer p { margin: 0; }