/* TapSticky Card Onboarding v3 — additional preview themes + a11y audit (P2.5 + P2.10)
 *
 * Layered on top of card_onboarding_v3.css. Adds two NEW v3-only preview themes
 * to the live preview device and the theme-picker mini-swatches:
 *   - aurora      : vibrant violet→cyan→pink gradient, modern, dark text-on-light avatar ring
 *   - minimal-ink : paper-white, editorial serif, ink-black text, hairline link pills
 *
 * NOTE (preview-only): These two themes are NEW to the v3 onboarding preview.
 * The published card renderer may NOT yet ship server-side templates for
 * 'aurora' / 'minimal-ink'. That is expected and fine for the preview pass —
 * the integration agent should confirm the published page gracefully falls back
 * (e.g. to clean-pro / modern-glass) until the published templates land, and
 * should NOT block the picker from offering them in preview.
 *
 * Conventions: vanilla CSS, 2-space indent, same-origin assets only, honours
 * prefers-reduced-motion, light-theme tokens from card_onboarding_v3.css.
 *
 * =============================================================================
 * REQUIRED JS CHANGE (integration agent edits onboarding/theme-picker.js):
 *   Append these two entries to OB3ThemePicker DEFAULT_THEMES:
 *     { id: 'aurora',      label: 'Aurora',  tagline: 'Vibrant gradient, modern' },
 *     { id: 'minimal-ink', label: 'Minimal', tagline: 'Editorial, paper-white' }
 *   The picker, preview hot-swap, and arrow-key nav all work unchanged once the
 *   theme ids are registered — the CSS below keys purely off [data-theme].
 * =============================================================================
 */

/* =========================================================================
 * P2.5 — Preview device: 'aurora' (vibrant gradient, modern)
 * ========================================================================= */

.ob3-preview-device[data-theme="aurora"] .ob3-preview-screen {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(124, 58, 237, 0.85), transparent 60%),
    radial-gradient(120% 90% at 90% 30%, rgba(6, 182, 212, 0.75), transparent 55%),
    linear-gradient(160deg, #2b1064 0%, #4c1d95 45%, #0e7490 100%);
  color: #f5f3ff;
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-photo {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px rgba(236, 72, 153, 0.55);
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-name {
  background: linear-gradient(90deg, #ffffff 0%, #e9d5ff 60%, #a5f3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff; /* fallback for non-clip browsers */
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-title { opacity: 0.92; }
.ob3-preview-device[data-theme="aurora"] .ob3-preview-bio { opacity: 0.88; }

.ob3-preview-device[data-theme="aurora"] .ob3-preview-cta {
  background: linear-gradient(90deg, #ec4899 0%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgba(236, 72, 153, 0.6);
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-link {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-link-icon {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(6, 182, 212, 0.9));
  color: #ffffff;
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-redirect-card {
  background: rgba(255, 255, 255, 0.12);
}

.ob3-preview-device[data-theme="aurora"] .ob3-preview-redirect-icon {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(6, 182, 212, 0.9));
  color: #ffffff;
}

/* =========================================================================
 * P2.5 — Preview device: 'minimal-ink' (paper-white, editorial serif)
 * ========================================================================= */

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-screen {
  background: #fbfaf7;
  color: #1a1a1a;
  font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-photo {
  box-shadow: 0 0 0 1px #1a1a1a;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-name {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111111;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-title {
  font-style: italic;
  opacity: 0.75;
  color: #44403c;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-bio {
  opacity: 1;
  color: #3f3f46;
  line-height: 1.6;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-cta {
  background: #1a1a1a;
  color: #fbfaf7;
  border-radius: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-link {
  background: transparent;
  border: 1px solid #d6d3cd;
  border-radius: 2px;
  color: #1a1a1a;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-link-icon {
  background: transparent;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-redirect-card {
  background: transparent;
  border: 1px solid #d6d3cd;
  border-radius: 2px;
}

.ob3-preview-device[data-theme="minimal-ink"] .ob3-preview-redirect-icon {
  background: transparent;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
}

/* =========================================================================
 * P2.5 — Theme-picker mini-swatches for the two new themes
 *   Mirrors the .ob3-theme-mini / -avatar / -name / -line structure that
 *   card_onboarding_v3.css already defines for the original four themes.
 * ========================================================================= */

/* Aurora swatch — vibrant gradient panel */
.ob3-theme-swatch[data-theme="aurora"] .ob3-theme-mini {
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(124, 58, 237, 0.9), transparent 60%),
    radial-gradient(120% 80% at 95% 35%, rgba(6, 182, 212, 0.8), transparent 55%),
    linear-gradient(160deg, #2b1064 0%, #4c1d95 50%, #0e7490 100%);
}

.ob3-theme-swatch[data-theme="aurora"] .ob3-theme-mini-avatar {
  background: linear-gradient(135deg, #f9a8d4, #67e8f9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.ob3-theme-swatch[data-theme="aurora"] .ob3-theme-mini-name {
  color: #f5f3ff;
}

.ob3-theme-swatch[data-theme="aurora"] .ob3-theme-mini-line {
  background: rgba(255, 255, 255, 0.32);
}

/* Minimal-ink swatch — paper-white editorial panel */
.ob3-theme-swatch[data-theme="minimal-ink"] .ob3-theme-mini {
  background: #fbfaf7;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.ob3-theme-swatch[data-theme="minimal-ink"] .ob3-theme-mini-avatar {
  background: #fbfaf7;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}

.ob3-theme-swatch[data-theme="minimal-ink"] .ob3-theme-mini-name {
  color: #1a1a1a;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}

.ob3-theme-swatch[data-theme="minimal-ink"] .ob3-theme-mini-line {
  background: rgba(26, 26, 26, 0.16);
}

/* =========================================================================
 * P2.10 — Accessibility audit hardening (applies to ALL .ob3-* surfaces)
 *
 * INTEGRATION-AGENT CHECKLIST — verify the following are wired/working
 * (the items marked [done] already ship; re-confirm after integration):
 *   [done] Skip-link        : a visible-on-focus "Skip to form" anchor jumps
 *                             past the brand/stepper to the active <section>.
 *   [done] aria-live toasts : .ob2-toast / autosave pill announce politely;
 *                             theme tagline uses aria-live="polite".
 *   [done] aria-current     : stepper marks the active step (and the picker
 *                             radiogroup tracks aria-checked on the swatch).
 *   [verify] Every NEW interactive control added during integration carries a
 *            visible label or aria-label (the two new theme swatches inherit
 *            their aria-label from buildSwatch()).
 *   [verify] Color-contrast: 'aurora' name uses gradient text — confirm the
 *            solid #ffffff fallback is what non-clip / forced-colors users see;
 *            'minimal-ink' body text #3f3f46 on #fbfaf7 is ~9:1 (AAA).
 *   [verify] Focus order is DOM order on each screen; no positive tabindex.
 *   [verify] prefers-reduced-motion disables swatch hover lift + tagline fade
 *            (covered by card_onboarding_v3.css; the gradient text has no
 *            animation so nothing extra is needed here).
 * ========================================================================= */

/* Unified focus-visible ring on every interactive onboarding control.
 * 2px brand outline + 2px offset gives a >=3:1 ring against both the light
 * shell and the dark/vibrant preview surfaces. */
.ob3-theme-swatch:focus-visible,
.ob3-stepper-dot:focus-visible,
.ob3-platform-tile:focus-visible,
.ob3-social-grip:focus-visible,
.ob3-social-edit:focus-visible,
.ob3-social-remove:focus-visible,
.ob3-socials-add:focus-visible,
.ob3-socials-input-cancel:focus-visible,
.ob3-socials-input-confirm:focus-visible,
.ob3-socials-input-control:focus-visible,
.ob3-bio-textarea:focus-visible,
.ob3-bio-example-chip:focus-visible,
.ob3-dropzone:focus-visible,
.ob3-preview-btn:focus-visible,
.ob3-preview-cta:focus-visible,
.ob3-preview-fab:focus-visible,
.ob3-preview-sheet-handle:focus-visible,
.ob3-cropper-actions button:focus-visible,
.ob3-autosave-pill:focus-visible {
  outline: 2px solid var(--brand-500, #7c3aed);
  outline-offset: 2px;
  /* white halo lifts the ring off dark/vibrant preview backgrounds for >=3:1 */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
}

/* Inside the dark/vibrant preview device the white halo would vanish; invert
 * to a dark halo so the ring keeps >=3:1 against light controls there. */
.ob3-preview-device[data-theme="modern-glass"] .ob3-preview-cta:focus-visible,
.ob3-preview-device[data-theme="noir-elite"] .ob3-preview-cta:focus-visible,
.ob3-preview-device[data-theme="aurora"] .ob3-preview-cta:focus-visible {
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.65);
}

/* Minimum 44x44px touch targets (WCAG 2.5.5 / 2.5.8 AAA) for compact icon
 * buttons that currently render below the threshold. */
.ob3-social-grip,
.ob3-social-edit,
.ob3-social-remove,
.ob3-preview-btn,
.ob3-stepper-dot {
  min-width: 44px;
  min-height: 44px;
}

.ob3-theme-swatch,
.ob3-socials-add,
.ob3-bio-example-chip,
.ob3-socials-input-cancel,
.ob3-socials-input-confirm,
.ob3-preview-cta,
.ob3-preview-fab {
  min-height: 44px;
}

/* Keep the swatch grid visually tight despite the 44px floor: the mini-preview
 * already exceeds 44px tall, so this only guards the slimmer label-only edge. */
.ob3-platform-tile {
  min-height: 44px;
}

/* Windows High Contrast / forced-colors: ensure the selection + focus states
 * survive when author colors are dropped. */
@media (forced-colors: active) {
  .ob3-theme-swatch:focus-visible,
  .ob3-stepper-dot:focus-visible,
  .ob3-platform-tile:focus-visible,
  .ob3-dropzone:focus-visible,
  .ob3-preview-cta:focus-visible,
  .ob3-preview-fab:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .ob3-theme-swatch.is-selected {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  /* Gradient text has no system color; force it back to a system token. */
  .ob3-preview-device[data-theme="aurora"] .ob3-preview-name {
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}

/* Respect reduced-motion for the only new transition-bearing surfaces here. */
@media (prefers-reduced-motion: reduce) {
  .ob3-theme-swatch:focus-visible {
    transition: none !important;
  }
}