/* ==========================================================================
   TouchTo — Activity Runner + Pause overlay redesign (AssistUK)
   Loaded AFTER components.css/redesign.css so it restyles the runner HUD,
   the pause overlay panel, the volume sliders and the floating buttons onto
   the AssistUK foundation (blue accent, glass panels, big touch targets).
   PRESENTATION ONLY — no behaviour changes. All markup/handlers live in
   screens/activity-runner.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Floating HUD buttons — Pause + Quick-End (top-right)
   ≥56px circular glass buttons, clearly visible over any activity bg.
   -------------------------------------------------------------------------- */
.screen-activity-runner .runner-pause,
.screen-activity-runner .runner-end {
  position: fixed;
  top: 20px;
  z-index: 2050;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(20, 23, 29, 0.55);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s var(--ease-out, ease), background 0.15s ease,
              border-color 0.15s ease;
}

.screen-activity-runner .runner-pause { right: 88px; }
.screen-activity-runner .runner-end {
  right: 20px;
  background: rgba(220, 38, 38, 0.62);
  border-color: rgba(255, 255, 255, 0.4);
}

.screen-activity-runner .runner-pause i,
.screen-activity-runner .runner-end i {
  width: 26px;
  height: 26px;
}

.screen-activity-runner .runner-pause:hover {
  background: rgba(75, 105, 140, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.08);
}
.screen-activity-runner .runner-end:hover {
  background: rgba(220, 38, 38, 0.88);
  border-color: rgba(255, 255, 255, 0.65);
  transform: scale(1.08);
}
.screen-activity-runner .runner-pause:focus-visible,
.screen-activity-runner .runner-end:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   TTS "Vorlesen" button — top-center, only visible for quiz activities that
   expose a getCurrentPrompt() method. Large pill shape, touch-friendly.
   -------------------------------------------------------------------------- */
.screen-activity-runner .runner-tts-btn {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2050;
  min-width: 160px;
  height: 60px;
  padding: 0 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(75, 105, 140, 0.75);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.15s var(--ease-out, ease), background 0.15s ease,
              border-color 0.15s ease;
}
.screen-activity-runner .runner-tts-btn i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.screen-activity-runner .runner-tts-btn:hover {
  background: rgba(75, 105, 140, 0.95);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%) scale(1.06);
}
.screen-activity-runner .runner-tts-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Floating "Schließen" back button (hub launch only) — big dwell target.
   Inline styles set the base look in JS; here we add focus + reduced-motion
   safety and ensure it sits above the canvas but below the pause overlay.
   -------------------------------------------------------------------------- */
.screen-activity-runner .runner-big-back:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Pause overlay — full-screen glass scrim + centred AssistUK panel
   -------------------------------------------------------------------------- */
.pause-overlay {
  background: rgba(15, 17, 22, 0.86) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 24px !important;
  overflow-y: auto !important;
}

.pause-overlay__panel {
  width: 100% !important;
  max-width: 480px !important;
  min-width: 0 !important;
  gap: 14px !important;
  padding: 32px 30px 26px !important;
  border-radius: 28px;
  /* Fixed dark panel — all text/buttons inside are designed for a dark surface.
     (Do NOT use --c-bg-glass: it resolves light in the light theme, which made
     the white text unreadable.) */
  background: rgba(22, 26, 33, 0.96) !important;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Title — Oswald eyebrow look, centred */
.pause-overlay__title {
  margin: 0 0 6px !important;
  font-family: var(--f-heading, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 30px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff !important;
}
/* Subtitle under the title — readable light grey on the dark panel */
.pause-overlay .pause-overlay__sub {
  margin: 0 0 4px !important;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* --------------------------------------------------------------------------
   Pause action buttons — big touch targets, blue primary, glass ghosts
   -------------------------------------------------------------------------- */
.pause-overlay .pause-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  gap: 12px !important;
  font-family: var(--f-body, 'DM Sans', sans-serif);
  font-weight: 700 !important;
  font-size: 1.18rem !important;
  padding: 14px 28px !important;
  border-radius: 16px !important;
  justify-content: center;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease,
              border-color 0.15s ease;
}
.pause-overlay .pause-btn i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.pause-overlay .pause-btn:active { transform: scale(0.98); }
.pause-overlay .pause-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Primary "Fortsetzen" — solid blue accent */
.pause-overlay .pause-btn.btn--primary {
  background: var(--c-accent, #4b698c) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(75, 105, 140, 0.45);
}
.pause-overlay .pause-btn.btn--primary:hover {
  background: var(--c-accent-2, #3a5a7c) !important;
}

/* A 2-up row for the secondary actions (Einstellungen / Beenden) */
.pause-overlay .pause-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.pause-overlay .pause-actions-row .pause-btn {
  flex: 1;
  min-width: 0 !important;
}

/* Ghost "Einstellungen" — glass outline */
.pause-overlay .pause-btn.btn--outline {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.32) !important;
}
.pause-overlay .pause-btn.btn--outline:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Danger "Beenden" — restrained red outline */
.pause-overlay .pause-btn.btn--danger {
  background: rgba(220, 38, 38, 0.14) !important;
  color: #fca5a5 !important;
  border: 2px solid rgba(248, 113, 113, 0.55) !important;
}
.pause-overlay .pause-btn.btn--danger:hover {
  background: rgba(220, 38, 38, 0.28) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Volume block — readable grouped sliders. The 180px label column keeps the
   longest label ("Hintergrundmusik") on one line without overlapping the
   slider (the historic width:180px fix, preserved as a real CSS rule).
   -------------------------------------------------------------------------- */
.pause-audio-box {
  width: 100%;
  margin-top: 8px;
  padding: 18px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
}
.pause-audio-box .pause-audio-title {
  font-family: var(--f-heading, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.pause-audio-box .pause-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pause-audio-box .pause-audio-label {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}
.pause-audio-box .pause-audio-mute {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.pause-audio-box .pause-audio-mute:hover { background: rgba(255, 255, 255, 0.12); }
.pause-audio-box .pause-audio-mute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pause-audio-box .pause-audio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* The slider thumb/track styling lives in components.css (.pause-volume-slider).
   Here we only ensure the accent picks up the blue and the flex shrink works. */
.pause-overlay .pause-volume-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--c-accent, #4b698c);
}
.pause-audio-box .pause-audio-readout {
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.pause-audio-box .pause-audio-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Brand footer (QR → logo → URL → tagline) — gentle separator
   -------------------------------------------------------------------------- */
.pause-overlay .pause-brand {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Dark theme — panel sits over #000 already; nudge contrast a touch.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .pause-overlay__panel {
  background: rgba(20, 23, 29, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .pause-overlay .pause-btn.btn--primary {
  background: var(--c-accent, #7ea7d4) !important;
  color: #0f1116 !important;
  box-shadow: 0 8px 22px rgba(126, 167, 212, 0.4);
}
[data-theme="dark"] .pause-overlay .pause-btn.btn--primary:hover {
  background: var(--c-accent-2, #a3c0e0) !important;
}

/* --------------------------------------------------------------------------
   High-contrast theme (WCAG AAA) — black panel, yellow accent, white borders.
   -------------------------------------------------------------------------- */
[data-theme="contrast"] .pause-overlay,
.high-contrast .pause-overlay {
  background: rgba(0, 0, 0, 0.96) !important;
}
[data-theme="contrast"] .pause-overlay__panel,
.high-contrast .pause-overlay__panel {
  background: #000;
  border: 2px solid #fff;
  box-shadow: none;
}
[data-theme="contrast"] .pause-overlay__title,
.high-contrast .pause-overlay__title { color: #fff !important; }

[data-theme="contrast"] .pause-overlay .pause-btn.btn--primary,
.high-contrast .pause-overlay .pause-btn.btn--primary {
  background: #ffd60a !important;
  color: #000 !important;
  box-shadow: none;
}
[data-theme="contrast"] .pause-overlay .pause-btn.btn--outline,
.high-contrast .pause-overlay .pause-btn.btn--outline {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
[data-theme="contrast"] .pause-overlay .pause-btn.btn--danger,
.high-contrast .pause-overlay .pause-btn.btn--danger {
  background: #000 !important;
  color: #ffd60a !important;
  border: 2px solid #ffd60a !important;
}
[data-theme="contrast"] .pause-audio-box,
.high-contrast .pause-audio-box {
  border-color: #fff;
}
[data-theme="contrast"] .pause-overlay .pause-volume-slider,
.high-contrast .pause-overlay .pause-volume-slider {
  accent-color: #ffd60a;
}
[data-theme="contrast"] .screen-activity-runner .runner-pause,
.high-contrast .screen-activity-runner .runner-pause {
  background: #000;
  border: 2px solid #ffd60a;
  color: #ffd60a;
}
[data-theme="contrast"] .screen-activity-runner .runner-end,
.high-contrast .screen-activity-runner .runner-end {
  background: #000;
  border: 2px solid #ffd60a;
  color: #ffd60a;
}

/* --------------------------------------------------------------------------
   Reduced motion — drop hover scale/transitions for sensitive users.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .screen-activity-runner .runner-pause,
  .screen-activity-runner .runner-end,
  .pause-overlay .pause-btn,
  .pause-audio-box .pause-audio-mute {
    transition: none;
  }
  .screen-activity-runner .runner-pause:hover,
  .screen-activity-runner .runner-end:hover { transform: none; }
}

/* Small screens — let the 2-up row wrap if very narrow */
@media (max-width: 360px) {
  .pause-overlay .pause-actions-row { flex-direction: column; }
  .pause-audio-box .pause-audio-label { width: 140px; }
}

/* ── Control hint (touch vs. support-person), shown briefly at start ── */
.runner-ctrl-hint {
  position: absolute;
  left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1900;
  display: flex; align-items: center; gap: 8px;
  max-width: min(92vw, 640px);
  padding: 9px 16px;
  background: rgba(26, 58, 106, 0.86);
  color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 8px 26px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: runnerCtrlIn .3s ease;
  pointer-events: none;
}
.runner-ctrl-hint i, .runner-ctrl-hint svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .95; }
.runner-ctrl-hint__sep { width: 1px; height: 16px; background: rgba(255,255,255,0.35); margin: 0 4px; }
.runner-ctrl-hint__touch { opacity: 0.92; font-weight: 500; }
.runner-ctrl-hint__helper { opacity: 0.92; font-weight: 500; }
.runner-ctrl-hint--out { animation: runnerCtrlOut .4s ease forwards; }
@keyframes runnerCtrlIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes runnerCtrlOut { to { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.high-contrast .runner-ctrl-hint { background: #000; border: 2px solid #fff; }