/* prototypes-shared.css — common styles for all 8 design prototypes.
   Loaded after Tailwind CDN; no @apply (no build step).
   Page-specific keyframes/classes stay inline in each file's <style>. */

/* ── Base typography (was repeated 8×) ───────────────────────────── */
body { font-family: 'Nunito', sans-serif; }
h1, h2, h3, .font-display { font-family: 'Plus Jakarta Sans', sans-serif; }

:root.vi-hidden [lang="vi"]:not([data-vi-required]) { display: none !important; }

.app-shell {
    width: min(100%, 80rem);
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    background: rgb(255 255 255);
    padding-bottom: 5rem;
    box-shadow: 0 0 40px rgba(0,0,0,0.04);
}
.dark .app-shell { background: rgb(15 23 42); }
@media (min-width: 768px) { .app-shell { padding-bottom: 0; } }

.prototype-frame {
    width: min(100%, 80rem);
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: rgb(255 255 255);
    box-shadow: 0 0 40px rgba(0,0,0,0.04);
}
.dark .prototype-frame { background: rgb(15 23 42); }

.app-header { padding: 1rem 1.5rem; }
.app-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-width: 0; }
.app-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.app-content { width: 100%; max-width: 56rem; margin: 0 auto; }
.app-content-narrow { width: 100%; max-width: 48rem; margin: 0 auto; }

/* Sidebar-page headers: align inner rows with body's app-content-narrow.
   The header bar still spans full main column (sticky bg/border), but its
   inner content (breadcrumb + actions, back-button + title) stays aligned
   with the body content underneath instead of stretching to the column edge. */
.app-shell main > header.app-header-aligned > * {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
}

/* Quiz frame headers: keep inner header content readable on wide screens.
   The frame now spans 80rem like .app-shell, so constrain header content too. */
.prototype-frame > header {
    width: 100%;
}
.prototype-frame > header > * {
    /* leave existing layout, but stop overflowing at very wide widths */
}

.vi-toggle {
    min-width: 7.25rem;
    text-align: right;
}

.prototype-toast {
    position: fixed;
    left: 50%;
    bottom: 5.25rem;
    transform: translateX(-50%);
    z-index: 80;
    max-width: min(92vw, 28rem);
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    background: rgb(15 23 42);
    color: white;
    box-shadow: 0 12px 32px rgba(15,23,42,0.28);
    font-weight: 800;
    font-size: 0.875rem;
}
.dark .prototype-toast { background: rgb(30 41 59); color: rgb(226 232 240); }

.is-disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}
[data-quiz-prev][aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: auto;
}

.prototype-mobile-nav a[aria-current="page"] {
    color: rgb(79 70 229);
}
.dark .prototype-mobile-nav a[aria-current="page"] {
    color: rgb(129 140 248);
}

.quiz-detail[hidden] { display: none !important; }

.word-token.is-selected {
    outline: 4px solid rgb(165 180 252);
    outline-offset: 3px;
    border-color: rgb(79 70 229) !important;
}

.word-slot.is-filled {
    border-style: solid;
    background: rgb(238 242 255);
}
.dark .word-slot.is-filled { background: rgb(49 46 129 / 0.35); }

/* ── Bouncy press button (was in lesson, quiz, quiz-result) ──────── */
.bouncy-btn { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bouncy-btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,0.22); }

/* ── Speaker / audio button (was in lesson, quiz) ────────────────── */
.speaker-btn { transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.speaker-btn:active { transform: translateY(4px) scale(0.95); box-shadow: 0 0 0 rgba(0,0,0,0.15); }

/* ── Quiz section skeleton (Q-pattern: applies to all quiz <section>s) ─
   Use: <section class="qz-section">…<h2 class="qz-heading">…</h2>…</section> */
.qz-section { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2.5rem 1.5rem 2.5rem; min-height: 70vh; }
.qz-heading { font-weight: 700; color: rgb(148 163 184); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; margin-bottom: 2rem; }
.dark .qz-heading { color: rgb(100 116 139); }

/* ── Reduced-motion catch-all ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .animate-float, .animate-ping, .animate-pulse, .animate-slide-up,
    .animate-shake, .animate-scale-in, .pulse-3x,
    .flip-inner, .timer-ring__progress { animation: none !important; transition: none !important; }
    #qp-track { transition: none !important; }
}

/* ── Quiz picker carousel (lesson page) ──────────────────────────── */
.qp-chip { background: rgb(241 245 249); color: rgb(71 85 105); border: 1px solid transparent; }
.dark .qp-chip { background: rgb(30 41 59); color: rgb(203 213 225); }
.qp-chip:hover:not(:disabled) { background: rgb(226 232 240); }
.dark .qp-chip:hover:not(:disabled) { background: rgb(51 65 85); }
.qp-chip-active { background: rgb(79 70 229) !important; color: white !important; box-shadow: 0 2px 8px rgba(79,70,229,0.25); }
.qp-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.qp-chip .qp-count { padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,0.25); font-size: 0.7rem; min-width: 20px; text-align: center; }
.qp-chip:not(.qp-chip-active) .qp-count { background: rgba(0,0,0,0.06); }
.dark .qp-chip:not(.qp-chip-active) .qp-count { background: rgba(255,255,255,0.08); }

.qp-slide { flex: 0 0 100%; min-width: 0; padding: 0 4px; box-sizing: border-box; }
.qp-card { height: 340px; border-radius: 1.5rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid; box-shadow: 0 1px 3px rgba(15,23,42,0.04); }
.qp-card .qp-source { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.qp-topic-image { height: 7.5rem; border-radius: 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgb(241 245 249); border: 1px solid rgb(226 232 240); }
.dark .qp-topic-image { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.qp-topic-image img { width: 100%; height: 100%; object-fit: cover; }

/* qp-dot: 32×44 px tap target wraps an 8 px visual dot (LE1 fix — kid-tap WCAG 2.5.5). */
.qp-dot {
    width: 32px; min-height: 44px; padding: 0; border: none; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.qp-dot::before {
    content: ''; display: block;
    width: 8px; height: 8px; border-radius: 999px;
    border: 2px solid rgb(203 213 225); background: transparent;
    transition: width 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.dark .qp-dot::before { border-color: rgb(71 85 105); }
.qp-dot.is-visited::before { background: rgb(203 213 225); }
.dark .qp-dot.is-visited::before { background: rgb(71 85 105); }
.qp-dot.is-active::before { width: 20px; background: rgb(79 70 229); border-color: rgb(79 70 229); }
.qp-dot:focus-visible { outline: none; }
.qp-dot:focus-visible::before { outline: 3px solid rgb(165 180 252); outline-offset: 4px; }