/* ==========================================================================
   Audible Narration — shared styles for the 4-choice popup AND Settings row.
   Created: 2026-04-21 (luminous-branching-compass S1, Issue #1).
   --------------------------------------------------------------------------
   Two surfaces share these visuals:
     1. Mobile popup rendered by narrator-preference.js through the
        MobileControlPanel popup-mode API. The popup container itself is
        styled by mobile-tab-bar.css (.mcp-popup). This file handles the
        CONTENTS: subtitle + 2x2 choice grid + selected-state markers.
     2. Desktop/mobile Settings row (view-settings → system tab). The same
        .ffa-narr-choice buttons render inline, with a slightly tighter layout.
   ========================================================================== */

/* ── Slot icon states (in-bar narrator-toggle button, mobile-only) ──
   On = pulse-glow animation. Off = muted opacity + diagonal strike. Opt-in
   under prefers-reduced-motion: no-preference so reduced-motion users still
   see the clear on/off color/opacity difference without the pulse. */
.ffa-narr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ffa-narr-icon-on {
  color: #6D28D9;
  filter: drop-shadow(0 0 2px rgba(109, 40, 217, 0.45));
}
.ffa-narr-icon-off {
  color: #9ca3af;
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .ffa-narr-icon-on {
    animation: ffa-narr-pulse 1.6s ease-in-out infinite;
  }
}
@keyframes ffa-narr-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(109, 40, 217, 0.35));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.75));
    transform: scale(1.06);
  }
}

/* ── Popup subtitle + 2x2 choice grid ── */
.ffa-narr-popup-subtitle {
  margin: 0 0 14px 0;
  font-size: calc(13px * var(--type-scale, 1));
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
}
.ffa-narr-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── Shared choice button ── */
.ffa-narr-choice {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  min-height: 72px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.ffa-narr-choice:hover {
  border-color: #c4b5fd;
}
.ffa-narr-choice:active {
  transform: scale(0.98);
}
.ffa-narr-choice:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
.ffa-narr-choice-title {
  font-size: calc(15px * var(--type-scale, 1));
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ffa-narr-choice-subtitle {
  font-size: calc(12px * var(--type-scale, 1));
  color: #6b7280;
  line-height: 1.35;
}
.ffa-narr-choice-selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}
.ffa-narr-choice-selected .ffa-narr-choice-title {
  color: #5b21b6;
}

/* ── Settings row layout (desktop + mobile) ── */
.ffa-narr-settings-row {
  margin: 1rem 0 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
}
.ffa-narr-settings-row h3 {
  margin: 0 0 0.25rem 0;
  font-size: calc(16px * var(--type-scale, 1));
  font-weight: 700;
  color: #1f2937;
}
.ffa-narr-settings-row p.ffa-narr-settings-hint {
  margin: 0 0 0.75rem 0;
  font-size: calc(13px * var(--type-scale, 1));
  color: #6b7280;
  line-height: 1.4;
}
.ffa-narr-settings-row .ffa-narr-popup-grid {
  max-width: 480px;
}

/* ── Binary tap-to-toggle (quiet-pinning-keystone S1, D4) ──
   Single large pill replaces the 4-choice grid. The shared `.ffa-narr-icon-on`
   / `.ffa-narr-icon-off` visuals still drive the on/off badge inside the pill;
   the pill itself adopts a violet-tinted "on" surface or muted "off" surface
   so the affordance is unambiguous at a glance. */
.ffa-narr-binary-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 18px;
  border: 2px solid #c4b5fd;
  border-radius: 14px;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  color: #5b21b6;
  font-size: calc(16px * var(--type-scale, 1));
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.ffa-narr-binary-toggle.ffa-narr-binary-off {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #4b5563;
}
.ffa-narr-binary-toggle:hover {
  border-color: #7c3aed;
}
.ffa-narr-binary-toggle:active {
  transform: scale(0.98);
}
.ffa-narr-binary-toggle:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
.ffa-narr-binary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ffa-narr-binary-label {
  letter-spacing: 0.01em;
}

/* ── Stop Talking onboarding popup (S1 D7) ── */
.ffa-narr-onboard-body {
  font-size: calc(14px * var(--type-scale, 1));
  color: #374151;
  line-height: 1.5;
  margin-bottom: 14px;
}
.ffa-narr-onboard-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: calc(13px * var(--type-scale, 1));
  font-weight: 600;
}
.ffa-narr-onboard-question {
  margin-top: 12px;
  font-weight: 600;
  color: #1f2937;
}
.ffa-narr-onboard-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ffa-narr-onboard-btn {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;
  font-size: calc(15px * var(--type-scale, 1));
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ffa-narr-onboard-btn:active {
  transform: scale(0.98);
}
.ffa-narr-onboard-off {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  color: #5b21b6;
}
.ffa-narr-onboard-on {
  border-color: #d1d5db;
  color: #4b5563;
}