/**
 * Word Meanings Widget (abstract words) - Styles
 *
 * Four modes, one static frame (UX-STANDARDS §7.1): a fixed-height stimulus
 * zone (the word, the definition, or the blanked sentence), a fixed-height
 * answer zone (definition cards / word tiles / typed field / ✓ I said it) and
 * pre-allocated feedback + hint slots, so nothing shoves under a finger
 * between states. Fleet-blue theme, tokens via design-tokens.css (--as-*),
 * shared footer/header chrome untouched. Everything scoped under
 * .word-meanings-root (the Elementor kit reset lesson, Colors 1.7.947).
 *
 * Colour is never the only carrier of meaning: feedback always pairs the
 * word with a ✓ / "Not yet" pill.
 *
 * @package Aphasia_Exercises
 * @since 1.7.958
 */

/* =========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================= */

.word-meanings-root {
    --wm-primary: #3b82f6;
    --wm-primary-dark: #2563eb;
    --wm-primary-light: #eff6ff;
    --wm-success: #22c55e;
    --wm-success-dark: #16a34a;
    --wm-success-light: #f0fdf4;
    --wm-error: #ef4444;
    --wm-error-light: #fef2f2;
    --wm-hint: #ca8a04;
    --wm-hint-light: #fef3c7;
    --wm-audio: #0891b2;
    --wm-audio-dark: #0e7490;

    --wm-neutral-50: #f9fafb;
    --wm-neutral-100: #f3f4f6;
    --wm-neutral-200: #e5e7eb;
    --wm-neutral-300: #d1d5db;
    --wm-neutral-500: #6b7280;
    --wm-neutral-700: #374151;
    --wm-neutral-800: #1f2937;

    --wm-font: var(--as-font);
    --wm-radius-xl: 16px;
    --wm-radius-lg: 12px;
    --wm-radius-md: 8px;
    --wm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --wm-transition: 0.2s ease;

    /* Frame geometry (static frame — the same in every state within a mode;
       the answer zone is sized per mode, see .wm-frame--*) */
    --wm-stimulus-h: 190px;
    --wm-answer-h: 236px;
    --wm-feedback-h: 56px;
    --wm-hint-h: 108px;  /* hint TEXT lives here (label + up to 3 lines); countdown strip too */

    /* Shared component theme mapping (ex- classes) */
    --ex-primary: var(--wm-primary);
    --ex-primary-dark: var(--wm-primary-dark);
    --ex-primary-light: var(--wm-primary-light);
    --ex-primary-ring: #60a5fa;
    --ex-success: var(--wm-success);
    --ex-success-light: var(--wm-success-light);
    --ex-success-dark: var(--wm-success-dark);
    --ex-error: var(--wm-error);
    --ex-error-light: var(--wm-error-light);
    --ex-error-dark: #dc2626;
    --ex-neutral-50: var(--wm-neutral-50);
    --ex-neutral-100: var(--wm-neutral-100);
    --ex-neutral-200: var(--wm-neutral-200);
    --ex-neutral-500: var(--wm-neutral-500);
    --ex-neutral-700: var(--wm-neutral-700);
    --ex-neutral-800: var(--wm-neutral-800);
    --ex-radius-sm: 6px;
    --ex-radius-md: var(--wm-radius-md);
    --ex-radius-lg: var(--wm-radius-lg);
    --ex-radius-full: 9999px;
    --ex-shadow-sm: var(--wm-shadow-sm);
    --ex-transition: var(--wm-transition);
    --ex-font: var(--wm-font);
}

/* =========================================================================
   2. ELEMENTOR BUTTON RESET
   Every button class this widget renders MUST appear in the :not() chain
   or the kit reset flattens it invisible (refine-hints gotcha #2).
   ========================================================================= */

.elementor-kit-15048 .word-meanings-root button:not(.ss-action):not(.wm-card):not(.wm-speaker-btn):not(.wm-say-yes):not(.wm-target):not(.wm-sentence):not(.wm-check):not(.wm-nav-btn):not(.te-mh-gear):not(.te-mh-slp-session-btn):not(.slp-recap-btn):not(.slp-recap-btn--print):not(.te-mh-back):not(.te-mh-level):not(.te-rung-card):not(.te-mh-levelrow):not(.te-mh-path):not(.uf-btn),
.elementor-kit-15048 .word-meanings-container button:not(.ss-action):not(.wm-card):not(.wm-speaker-btn):not(.wm-say-yes):not(.wm-target):not(.wm-sentence):not(.wm-check):not(.wm-nav-btn):not(.te-mh-gear):not(.te-mh-slp-session-btn):not(.slp-recap-btn):not(.slp-recap-btn--print):not(.te-mh-back):not(.te-mh-level):not(.te-rung-card):not(.te-mh-levelrow):not(.te-mh-path):not(.uf-btn) {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    border-radius: 0;
    box-shadow: none;
    min-height: auto;
}

/* =========================================================================
   3. BASE CONTAINER
   ========================================================================= */

.word-meanings-root {
    font-family: var(--wm-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--wm-neutral-800);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.word-meanings-root *,
.word-meanings-root *::before,
.word-meanings-root *::after {
    box-sizing: border-box;
}

.word-meanings-container {
    background: white;
    border-radius: var(--wm-radius-xl);
    box-shadow: var(--wm-shadow-lg);
    padding: 20px;
    min-height: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.word-meanings-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    color: var(--wm-neutral-500);
}

.word-meanings-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--wm-neutral-200);
    border-top-color: var(--wm-primary);
    border-radius: 50%;
    animation: wm-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes wm-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================================
   4. THE STATIC FRAME
   ========================================================================= */

.word-meanings-root .wm-frame {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Per-mode answer-zone height (constant within a session = zero shift). */
.word-meanings-root .wm-frame--rows-1 { --wm-answer-h: 112px; }
.word-meanings-root .wm-frame--rows-2 { --wm-answer-h: 236px; }
.word-meanings-root .wm-frame--cards-2 { --wm-answer-h: 200px; }
.word-meanings-root .wm-frame--cards-3 { --wm-answer-h: 300px; }
.word-meanings-root .wm-frame--cards-4 { --wm-answer-h: 396px; }
.word-meanings-root .wm-frame--typed { --wm-answer-h: 140px; }
.word-meanings-root .wm-frame--when { --wm-answer-h: 120px; }

/* Stimulus zone: the word, the definition, or the blanked sentence. */
.word-meanings-root .wm-stimulus {
    height: var(--wm-stimulus-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

/* The Elementor kit title-cases every button ("His _____ With A Hammer…"):
   content controls keep the sentence case they were written in. */
.word-meanings-root .wm-target,
.word-meanings-root .wm-sentence,
.word-meanings-root .wm-card,
.word-meanings-root .wm-say-yes,
.word-meanings-root .wm-check,
.word-meanings-root .wm-nav-btn,
.word-meanings-root .wm-input {
    text-transform: none;
    letter-spacing: normal;
    /* …and sets white-space: nowrap on buttons: a sentence must wrap on a phone. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The big target word — tap-to-hear (§3.1). */
.word-meanings-root .wm-target {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
    min-width: 44px;
    max-width: 100%;
    padding: 8px 22px;
    border: 2px solid transparent;
    border-radius: var(--wm-radius-lg);
    background: var(--wm-primary-light);
    color: var(--wm-neutral-800);
    font-family: var(--wm-font);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--wm-transition), border-color var(--wm-transition), transform 0.1s ease;
}

/* A definition as the stimulus (levels 3–4 of Match the meaning). */
.word-meanings-root .wm-target--text {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 34ch;
    white-space: normal;
}

.word-meanings-root .wm-target:hover {
    background: #dbeafe;
    color: var(--wm-neutral-800);
    border-color: transparent;
}

.word-meanings-root .wm-target:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 2px;
    background: var(--wm-primary-light);
    color: var(--wm-neutral-800);
}

.word-meanings-root .wm-target:active,
.word-meanings-root .wm-target.is-pressed {
    transform: scale(0.97);
    background: #bfdbfe;
    color: var(--wm-neutral-800);
}

/* The blanked sentence — the whole line is the tap-to-hear control. */
.word-meanings-root .wm-sentence {
    display: inline-block;
    max-width: 40ch;
    min-height: 64px;
    padding: 10px 18px;
    border: 2px solid transparent;
    border-radius: var(--wm-radius-lg);
    background: var(--wm-primary-light);
    color: var(--wm-neutral-800);
    font-family: var(--wm-font);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--wm-transition), transform 0.1s ease;
}

.word-meanings-root .wm-sentence:hover {
    background: #dbeafe;
    color: var(--wm-neutral-800);
    border-color: transparent;
}

.word-meanings-root .wm-sentence:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 2px;
    background: var(--wm-primary-light);
    color: var(--wm-neutral-800);
}

.word-meanings-root .wm-sentence:active,
.word-meanings-root .wm-sentence.is-pressed {
    transform: scale(0.98);
    background: #bfdbfe;
    color: var(--wm-neutral-800);
}

/* The blank inside the sentence: an underlined slot that later holds the word. */
.word-meanings-root .wm-blank {
    display: inline-block;
    max-width: 100%;
    min-width: 5ch;
    margin: 0 0.15em;
    padding: 0 0.35em;
    border-bottom: 3px solid var(--wm-primary);
    color: var(--wm-primary-dark);
    font-weight: 800;
    white-space: nowrap;
}

.word-meanings-root .wm-blank--filled {
    border-bottom-color: var(--wm-success-dark);
    color: var(--wm-success-dark);
}

.word-meanings-root .wm-blank--wrong {
    border-bottom-color: var(--wm-error);
    color: #b91c1c;
}

/* Cyan round play control — the fleet audio grammar. */
.word-meanings-root .wm-speaker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--wm-audio);
    color: white;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--wm-shadow-md);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--wm-transition), transform 0.1s ease;
}

.word-meanings-root .wm-speaker-btn:hover {
    background: var(--wm-audio-dark);
    color: white;
}

.word-meanings-root .wm-speaker-btn:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 3px;
    background: var(--wm-audio);
    color: white;
}

.word-meanings-root .wm-speaker-btn:active,
.word-meanings-root .wm-speaker-btn.is-pressed {
    transform: scale(0.95);
    background: var(--wm-audio-dark);
    color: white;
}

.word-meanings-root .wm-speaker-btn.is-playing {
    box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.25);
}

/* Blocked autoplay → visible invitation (§3.4): the ring goes on the word /
   definition / sentence, which is the play control (no speaker icon). */
.word-meanings-root .wm-speaker-btn--nudge,
.word-meanings-root .wm-target--nudge {
    animation: wm-nudge 1.4s ease-in-out infinite;
}

@keyframes wm-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.55); }
    50% { box-shadow: 0 0 0 14px rgba(8, 145, 178, 0); }
}

.word-meanings-root .wm-speaker-label {
    font-size: 0.95rem;
    color: var(--wm-neutral-500);
    min-height: 1.4em;
}

/* =========================================================================
   5. ANSWER ZONE
   ========================================================================= */

.word-meanings-root .wm-answer {
    height: var(--wm-answer-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Definition cards stack (one per row, full width); word tiles sit in a row. */
.word-meanings-root .wm-choices {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    justify-content: center;
}

.word-meanings-root .wm-choices--cards {
    grid-template-columns: 1fr;
}

.word-meanings-root .wm-choices--tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.word-meanings-root .wm-choices--tiles.wm-choices--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A choice: a real button (§5.4), text always visible. */
.word-meanings-root .wm-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    min-width: 44px;
    padding: 12px 18px;
    border: 2px solid var(--wm-neutral-300);
    border-radius: var(--wm-radius-lg);
    background: white;
    color: var(--wm-neutral-800);
    font-family: var(--wm-font);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    box-shadow: var(--wm-shadow-sm);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow var(--wm-transition), background var(--wm-transition), border-color var(--wm-transition);
}

.word-meanings-root .wm-card--text {
    min-height: 80px;
    font-size: 1.1rem;
    font-weight: 500;
}

.word-meanings-root .wm-card--word {
    min-height: 72px;
    font-size: 1.35rem;
    font-weight: 700;
}

/* Every state keeps its colours: the kit paints undeclared :focus / :disabled
   buttons navy and square (§6.1). */
.word-meanings-root .wm-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wm-shadow-md);
    border-color: var(--wm-primary);
    background: var(--wm-primary-light);
    color: var(--wm-neutral-800);
}

.word-meanings-root .wm-card:focus,
.word-meanings-root .wm-card:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 3px;
    background: white;
    color: var(--wm-neutral-800);
    border-color: var(--wm-neutral-300);
    border-radius: var(--wm-radius-lg);
}

.word-meanings-root .wm-card:active,
.word-meanings-root .wm-card.is-pressed {
    transform: scale(0.97);
    box-shadow: var(--wm-shadow-sm);
    background: #dbeafe;
    color: var(--wm-neutral-800);
}

.word-meanings-root .wm-card:disabled,
.word-meanings-root .wm-card[disabled]:hover {
    background: white;
    color: var(--wm-neutral-800);
    border-color: var(--wm-neutral-300);
    border-radius: var(--wm-radius-lg);
    transform: none;
    box-shadow: var(--wm-shadow-sm);
    cursor: default;
    opacity: 1;
}

/* Answer states — always paired with the pill in the feedback slot. */
.word-meanings-root .wm-card.is-correct,
.word-meanings-root .wm-card.is-correct:disabled,
.word-meanings-root .wm-card.is-correct:hover {
    border-color: var(--wm-success-dark);
    background: var(--wm-success-light);
    color: var(--wm-neutral-800);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3), var(--wm-shadow-md);
    transform: none;
}

.word-meanings-root .wm-card.is-correct::after {
    content: "\2713";
    position: absolute;
    right: -10px;
    top: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wm-success-dark);
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    box-shadow: var(--wm-shadow-sm);
}

/* A wrong tap dims but STAYS (§6.2), and is inert from here. */
.word-meanings-root .wm-card.is-wrong,
.word-meanings-root .wm-card.is-wrong:disabled {
    opacity: 0.4;
    pointer-events: none;
    transform: none;
    background: var(--wm-neutral-100);
    color: var(--wm-neutral-700);
    border-color: var(--wm-neutral-300);
}

/* Eliminate hint: vanish means vanish — footprint kept, no reflow (§6.2). */
.word-meanings-root .wm-card.is-gone {
    visibility: hidden;
}

/* Hint terminal / second-miss guidance: the target pulses (§2.2). */
.word-meanings-root .wm-card.is-pulsing {
    animation: wm-pulse 1s ease-in-out infinite;
    border-color: var(--wm-hint);
}

@keyframes wm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.7); }
    50% { box-shadow: 0 0 0 12px rgba(202, 138, 4, 0); }
}

/* Typed answer (Use it in a sentence, Level 4): field + Check. */
.word-meanings-root .wm-typed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
}

.word-meanings-root .wm-input {
    width: 100%;
    min-height: 60px;
    padding: 10px 16px;
    border: 2px solid var(--wm-primary);
    border-radius: var(--wm-radius-lg);
    background: white;
    color: var(--wm-neutral-800);
    font-family: var(--wm-font);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    outline: none;
    transition: box-shadow var(--wm-transition), border-color var(--wm-transition);
}

/* Single-space placeholder + shadow invite-pulse (§5.1). */
.word-meanings-root .wm-input:placeholder-shown:not(:focus) {
    animation: wm-invite 1.6s ease-in-out infinite;
}

@keyframes wm-invite {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

.word-meanings-root .wm-input:focus {
    border-color: var(--wm-primary-dark);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

.word-meanings-root .wm-input.is-wrong {
    border-color: var(--wm-error);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
}

.word-meanings-root .wm-input.is-correct,
.word-meanings-root .wm-input:disabled {
    border-color: var(--wm-success-dark);
    background: var(--wm-success-light);
    color: var(--wm-neutral-800);
    animation: none;
}

.word-meanings-root .wm-input.is-revealed:disabled {
    border-color: var(--wm-hint);
    background: var(--wm-hint-light);
}

/* Green primary actions: Check (typed) and ✓ I said it (when). */
.word-meanings-root .wm-say-yes,
.word-meanings-root .wm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    min-width: 200px;
    padding: 12px 28px;
    border: 2px solid var(--wm-success-dark);
    border-radius: var(--ex-radius-full);
    background: var(--wm-success);
    color: white;
    font-family: var(--wm-font);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--wm-shadow-md);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--wm-transition), transform 0.1s ease;
}

.word-meanings-root .wm-say-yes:hover,
.word-meanings-root .wm-check:hover {
    background: var(--wm-success-dark);
    color: white;
    border-color: var(--wm-success-dark);
}

.word-meanings-root .wm-say-yes:focus-visible,
.word-meanings-root .wm-check:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 3px;
    background: var(--wm-success);
    color: white;
}

.word-meanings-root .wm-say-yes:active,
.word-meanings-root .wm-say-yes.is-pressed,
.word-meanings-root .wm-check:active {
    transform: scale(0.97);
    background: var(--wm-success-dark);
    color: white;
}

.word-meanings-root .wm-say-yes:disabled,
.word-meanings-root .wm-check:disabled {
    background: var(--wm-neutral-200);
    border-color: var(--wm-neutral-300);
    color: var(--wm-neutral-500);
    cursor: default;
    box-shadow: none;
    transform: none;
}

.word-meanings-root .wm-when-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* =========================================================================
   6. FEEDBACK + HINT SLOTS (pre-allocated, §7.1)
   ========================================================================= */

.word-meanings-root .wm-feedback {
    height: var(--wm-feedback-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The pill hugs its content (§4.3). */
.word-meanings-root .wm-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 18px;
    border-radius: var(--ex-radius-full);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    transition: none;
}

.word-meanings-root .wm-pill--correct {
    background: var(--wm-success-light);
    color: var(--wm-success-dark);
    border: 2px solid var(--wm-success);
}

.word-meanings-root .wm-pill--incorrect {
    background: var(--wm-error-light);
    color: #b91c1c;
    border: 2px solid var(--wm-error);
}

.word-meanings-root .wm-pill--skipped {
    background: var(--wm-neutral-100);
    color: var(--wm-neutral-700);
    border: 2px solid var(--wm-neutral-300);
}

.word-meanings-root .wm-pill--hinted {
    background: var(--wm-hint-light);
    color: #854d0e;
    border: 2px solid var(--wm-hint);
}

.word-meanings-root .wm-hint-zone {
    height: var(--wm-hint-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Hint text: a label + the cue (definition / sentence / model / letter). */
.word-meanings-root .wm-hint-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    max-width: 44ch;
    padding: 8px 16px;
    border-radius: var(--wm-radius-lg);
    background: var(--wm-hint-light);
    color: #854d0e;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.word-meanings-root .wm-hint-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.word-meanings-root .wm-hint-letter {
    display: inline-block;
    min-width: 2.2ch;
    padding: 0 8px;
    border-radius: var(--wm-radius-md);
    background: white;
    color: var(--wm-neutral-800);
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    border: 2px solid var(--wm-hint);
}

/* =========================================================================
   7. REVIEW + NAVIGATION
   ========================================================================= */

.word-meanings-root .wm-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ex-radius-full);
    background: var(--wm-primary-light);
    color: var(--wm-primary-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

.word-meanings-root .wm-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 20px;
    border: 2px solid var(--wm-neutral-300);
    border-radius: var(--ex-radius-full);
    background: white;
    color: var(--wm-neutral-700);
    font-family: var(--wm-font);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--wm-transition), color var(--wm-transition);
}

.word-meanings-root .wm-nav-btn:hover,
.word-meanings-root .wm-nav-btn:focus-visible {
    background: var(--wm-neutral-100);
    color: var(--wm-neutral-800);
    border-color: var(--wm-neutral-300);
}

/* Reduced motion: no pulses, no nudges, no invite. */
@media (prefers-reduced-motion: reduce) {
    .word-meanings-root .wm-card.is-pulsing,
    .word-meanings-root .wm-speaker-btn--nudge,
    .word-meanings-root .wm-input:placeholder-shown:not(:focus) {
        animation: none;
    }
    .word-meanings-root .wm-card.is-pulsing {
        box-shadow: 0 0 0 6px rgba(202, 138, 4, 0.5);
    }
    .word-meanings-root .wm-card,
    .word-meanings-root .wm-say-yes,
    .word-meanings-root .wm-check,
    .word-meanings-root .wm-target,
    .word-meanings-root .wm-sentence,
    .word-meanings-root .wm-speaker-btn {
        transition: none;
    }
}

/* =========================================================================
   8. ELEMENTOR EDITOR PREVIEW
   ========================================================================= */

.word-meanings-preview {
    padding: 20px;
    border: 2px dashed var(--wm-neutral-300);
    border-radius: var(--wm-radius-lg);
    background: var(--wm-neutral-50);
}

.word-meanings-preview .preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.word-meanings-preview .preview-badge {
    padding: 4px 10px;
    border-radius: var(--ex-radius-full);
    background: var(--wm-primary-light);
    color: var(--wm-primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
}

.word-meanings-preview .preview-word {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.word-meanings-preview .preview-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.word-meanings-preview .preview-card {
    padding: 10px 14px;
    border: 2px solid var(--wm-neutral-300);
    border-radius: var(--wm-radius-lg);
    background: white;
}

/* =========================================================================
   9. RESPONSIVE (mobile-first tuning; 768 / 380)
   ========================================================================= */

@media (max-width: 768px) {
    .word-meanings-root {
        --wm-stimulus-h: 170px;
    }

    .word-meanings-root .wm-frame--cards-3 { --wm-answer-h: 290px; }
    .word-meanings-root .wm-frame--cards-4 { --wm-answer-h: 380px; }

    .word-meanings-container {
        padding: 16px 12px;
        border-radius: var(--wm-radius-lg);
    }

    /* The header layout stacks at ≤768 but the main column does not
       stretch for topicless widgets — pin it (numbers-practice lesson). */
    .word-meanings-root .te-main-col {
        width: 100%;
    }

    .word-meanings-root .wm-target {
        font-size: 2rem;
    }

    .word-meanings-root .wm-target--text {
        font-size: 1.2rem;
    }

    .word-meanings-root .wm-sentence {
        font-size: 1.25rem;
    }

    .word-meanings-root .wm-card--text {
        font-size: 1.02rem;
        min-height: 72px;
    }

    .word-meanings-root .wm-card--word {
        font-size: 1.2rem;
        min-height: 64px;
    }
}

@media (max-width: 380px) {
    .word-meanings-root {
        --wm-stimulus-h: 160px;
    }

    .word-meanings-root .wm-choices {
        gap: 10px;
    }

    .word-meanings-root .wm-choices--tiles.wm-choices--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .word-meanings-root .wm-frame--rows-1 { --wm-answer-h: 160px; }

    .word-meanings-root .wm-say-yes,
    .word-meanings-root .wm-check {
        min-width: 180px;
        font-size: 1.15rem;
    }
}

/* =========================================================================
   10. FALLBACKS (no shared chrome loaded)
   ========================================================================= */

.word-meanings-root .wm-error,
.word-meanings-root .wm-complete-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: var(--wm-neutral-700);
    text-align: center;
}

.word-meanings-root .wm-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}

/* =========================================================================
   11. PREMIUM GATE (whole widget premium — Lyda 2026-09-23)
   ========================================================================= */

.word-meanings-root .wm-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 20px;
    text-align: center;
    min-height: 320px;
    justify-content: center;
}

.word-meanings-root .wm-gate-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.word-meanings-root .wm-gate-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wm-neutral-800);
}

.word-meanings-root .wm-gate-body {
    margin: 0;
    max-width: 36ch;
    font-size: 1.05rem;
    color: var(--wm-neutral-700);
}

.word-meanings-root a.wm-gate-cta,
.word-meanings-root a.wm-gate-cta:hover,
.word-meanings-root a.wm-gate-cta:focus {
    text-decoration: none;
    color: white;
}

.word-meanings-root a.wm-gate-hub,
.word-meanings-root a.wm-gate-hub:hover,
.word-meanings-root a.wm-gate-hub:focus {
    text-decoration: none;
    color: var(--wm-neutral-700);
}