/**
 * Ledoly Learning Hub — page-specific styles.
 * Loaded via $extraHead on every /learn/ page. Uses the lg-* design tokens
 * defined in includes/head.php so it respects light/dark themes.
 */

/* ── Play button — a small circular speaker control ─────────────────── */
.lg-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgb(var(--lg-accent) / 0.1);
    color: rgb(var(--lg-accent));
    border: 1px solid rgb(var(--lg-accent) / 0.2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease, transform .1s ease;
}
.lg-play:hover { background: rgb(var(--lg-accent) / 0.18); }
.lg-play:active { transform: scale(0.94); }
.lg-play svg { width: 1.05rem; height: 1.05rem; }
.lg-play.lg-saying {
    background: rgb(var(--lg-accent));
    color: #fff;
    border-color: rgb(var(--lg-accent));
}
/* Small variant for tight cells (phoneme chart) */
.lg-play-sm { width: 1.85rem; height: 1.85rem; }
.lg-play-sm svg { width: 0.9rem; height: 0.9rem; }

/* Sound-wave pulse while a phrase is being spoken */
.lg-play.lg-saying svg { animation: lgPulse .9s ease-in-out infinite; }
@keyframes lgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-play.lg-saying svg { animation: none; }
}

/* ── Phoneme chart cell ─────────────────────────────────────────────── */
.lg-phoneme {
    cursor: pointer;
    transition: border-color .15s ease, transform .1s ease, background-color .15s ease;
}
.lg-phoneme:hover {
    border-color: rgb(var(--lg-accent) / 0.5);
    background: rgb(var(--lg-accent) / 0.04);
}
.lg-phoneme:active { transform: scale(0.97); }
.lg-phoneme.lg-saying {
    border-color: rgb(var(--lg-accent));
    background: rgb(var(--lg-accent) / 0.08);
}
.lg-ipa {
    font-family: 'Times New Roman', 'Charis SIL', Gentium, serif;
}

/* Reading-friendly measure for reference prose */
.lg-prose p { line-height: 1.7; }