/**
 * Color Practice Widget - Styles
 *
 * Two modes, one static frame (UX-STANDARDS §7.1): a fixed-height stimulus
 * zone (big swatch or speaker prompt), a fixed-height answer zone (swatch grid
 * or the ✓ I said it control) 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.
 *
 * Colour is never the only carrier of meaning: feedback always pairs the
 * swatch with the word + a ✓ / "Not yet" pill.
 *
 * @package Aphasia_Exercises
 * @since 1.7.946
 */

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

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

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

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

    /* Frame geometry (static frame — the same in every state; the answer
       zone is sized per level's row count, see .cp-frame--rows-*) */
    --cp-stimulus-h: 200px;
    --cp-answer-h: 220px;
    --cp-feedback-h: 56px;
    --cp-hint-h: 24px;   /* countdown strip; hint text lives in the feedback slot */
    --cp-swatch: 96px;

    /* Shared component theme mapping (ex- classes) */
    --ex-primary: var(--cp-primary);
    --ex-primary-dark: var(--cp-primary-dark);
    --ex-primary-light: var(--cp-primary-light);
    --ex-primary-ring: #60a5fa;
    --ex-success: var(--cp-success);
    --ex-success-light: var(--cp-success-light);
    --ex-success-dark: var(--cp-success-dark);
    --ex-error: var(--cp-error);
    --ex-error-light: var(--cp-error-light);
    --ex-error-dark: #dc2626;
    --ex-neutral-50: var(--cp-neutral-50);
    --ex-neutral-100: var(--cp-neutral-100);
    --ex-neutral-200: var(--cp-neutral-200);
    --ex-neutral-500: var(--cp-neutral-500);
    --ex-neutral-700: var(--cp-neutral-700);
    --ex-neutral-800: var(--cp-neutral-800);
    --ex-radius-sm: 6px;
    --ex-radius-md: var(--cp-radius-md);
    --ex-radius-lg: var(--cp-radius-lg);
    --ex-radius-full: 9999px;
    --ex-shadow-sm: var(--cp-shadow-sm);
    --ex-transition: var(--cp-transition);
    --ex-font: var(--cp-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 .color-practice-root button:not(.ss-action):not(.cp-swatch):not(.cp-speaker-btn):not(.cp-say-yes):not(.cp-target):not(.cp-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 .color-practice-container button:not(.ss-action):not(.cp-swatch):not(.cp-speaker-btn):not(.cp-say-yes):not(.cp-target):not(.cp-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
   ========================================================================= */

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

.color-practice-root *,
.color-practice-root *::before,
.color-practice-root *::after {
    box-sizing: border-box;
}

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

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

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

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

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

.color-practice-root .cp-frame {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Name mode (Lyda 2026-09-23): no model row, so the answer zone only holds
   the mic + "I said it" — tighten the frame so the footer sits close. */
.color-practice-root .cp-frame--name {
    --cp-stimulus-h: 190px;
    --cp-answer-h: 140px;
}

/* Find: one row of swatches (L1) vs two rows (L2-4). */
.color-practice-root .cp-frame--rows-1 {
    --cp-answer-h: 112px;
}

.color-practice-root .cp-frame--rows-2 {
    --cp-answer-h: 220px;
}

.color-practice-root .cp-frame--name .cp-name-answer {
    gap: 10px;
}

/* Stimulus zone: the speaker prompt (find) or the big swatch (name). */
.color-practice-root .cp-stimulus {
    height: var(--cp-stimulus-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* The spoken/written prompt word — tap-to-hear (§3.1). */
.color-practice-root .cp-target {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
    min-width: 44px;
    padding: 8px 20px;
    border: 2px solid transparent;
    border-radius: var(--cp-radius-lg);
    background: var(--cp-primary-light);
    color: var(--cp-neutral-800);
    font-family: var(--cp-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(--cp-transition), border-color var(--cp-transition), transform 0.1s ease;
}

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

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

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

/* Word hidden at the "hear only" levels: the slot keeps its height. */
.color-practice-root .cp-target--hidden {
    visibility: hidden;
}

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

.color-practice-root .cp-speaker-btn:hover {
    background: var(--cp-audio-dark);
    color: white;
}

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

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

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

/* Blocked autoplay → visible invitation (§3.4). */
.color-practice-root .cp-speaker-btn--nudge {
    animation: cp-nudge 1.4s ease-in-out infinite;
}

@keyframes cp-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); }
}

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

/* The big swatch (name mode): the whole card is the stimulus. */
.color-practice-root .cp-swatch--big {
    width: 180px;
    height: 180px;
    border-radius: 24px;
    box-shadow: var(--cp-shadow-md);
    border: 3px solid var(--cp-neutral-200);
}

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

.color-practice-root .cp-answer {
    height: var(--cp-answer-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-practice-root .cp-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--cp-swatch));
    gap: 16px;
    justify-content: center;
}

.color-practice-root .cp-grid--4 {
    grid-template-columns: repeat(2, var(--cp-swatch));
}

.color-practice-root .cp-grid--6 {
    grid-template-columns: repeat(3, var(--cp-swatch));
}

/* A swatch tile: a real button, colour set by a per-colour modifier class
   (never an inline style). */
.color-practice-root .cp-swatch {
    position: relative;
    width: var(--cp-swatch);
    height: var(--cp-swatch);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 3px solid var(--cp-neutral-200);
    border-radius: 20px;
    background: var(--cp-neutral-100);
    color: transparent;
    font-size: 0;
    cursor: pointer;
    box-shadow: var(--cp-shadow-sm);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow var(--cp-transition), opacity var(--cp-transition);
}

.color-practice-root .cp-swatch:hover {
    transform: translateY(-2px);
    box-shadow: var(--cp-shadow-md);
    border-color: var(--cp-neutral-300);
    color: transparent;
}

.color-practice-root .cp-swatch:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 3px;
    color: transparent;
}

.color-practice-root .cp-swatch:active,
.color-practice-root .cp-swatch.is-pressed {
    transform: scale(0.95);
    box-shadow: var(--cp-shadow-sm);
    color: transparent;
}

/* Per-colour fills. White and yellow keep a visible outline so they exist
   against the white card. */
.color-practice-root .cp-swatch--red { --cp-fill: #d62828; }
.color-practice-root .cp-swatch--blue { --cp-fill: #1d4ed8; }
.color-practice-root .cp-swatch--yellow { --cp-fill: #facc15; border-color: #d4b106; }
.color-practice-root .cp-swatch--green { --cp-fill: #16a34a; }
.color-practice-root .cp-swatch--orange { --cp-fill: #f97316; }
.color-practice-root .cp-swatch--purple { --cp-fill: #7e22ce; }
.color-practice-root .cp-swatch--pink { --cp-fill: #f472b6; }
.color-practice-root .cp-swatch--brown { --cp-fill: #7c4a1e; }
.color-practice-root .cp-swatch--black { --cp-fill: #111111; }
.color-practice-root .cp-swatch--white { --cp-fill: #ffffff; border-color: var(--cp-neutral-300); }
.color-practice-root .cp-swatch--gray { --cp-fill: #9ca3af; }

/* Every state keeps the colour + shape: the Elementor kit paints undeclared
   :focus / :disabled buttons navy and square (§6.1). The fill rides a custom
   property so one rule covers all eleven colours. */
.color-practice-root .cp-swatch,
.color-practice-root .cp-swatch:hover,
.color-practice-root .cp-swatch:focus,
.color-practice-root .cp-swatch:focus-visible,
.color-practice-root .cp-swatch:active,
.color-practice-root .cp-swatch:disabled,
.color-practice-root .cp-swatch[disabled]:hover,
.color-practice-root .cp-swatch.is-correct,
.color-practice-root .cp-swatch.is-wrong,
.color-practice-root .cp-swatch.is-pulsing {
    background: var(--cp-fill, var(--cp-neutral-100));
    color: transparent;
    border-radius: 20px;
    font-size: 0;
    text-transform: none;
    opacity: 1;
}

.color-practice-root .cp-swatch.is-wrong {
    opacity: 0.35;
}

.color-practice-root .cp-swatch--big,
.color-practice-root .cp-swatch--big:focus,
.color-practice-root .cp-swatch--big:disabled {
    border-radius: 24px;
}

.color-practice-root .cp-pill-dot {
    background: var(--cp-fill, var(--cp-neutral-300));
}

.color-practice-root .cp-target,
.color-practice-root .cp-say-yes,
.color-practice-root .cp-nav-btn,
.color-practice-root .cp-model-word {
    text-transform: none;
}

/* Answer states — always paired with the word + pill in the feedback slot. */
.color-practice-root .cp-swatch.is-correct {
    border-color: var(--cp-success-dark);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.35), var(--cp-shadow-md);
    transform: scale(1.05);
}

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

/* A wrong tap dims but STAYS (§6.2: never a ghost that reads as tappable —
   it is also inert from here: pointer-events off, still in the tab order
   for the read-only review). */
.color-practice-root .cp-swatch.is-wrong {
    opacity: 0.35;
    pointer-events: none;
    transform: none;
}

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

@keyframes cp-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); }
}

/* Locked after the answer (correct or terminal): the grid stays for review. */
.color-practice-root .cp-grid.is-locked .cp-swatch {
    cursor: default;
}

.color-practice-root .cp-grid.is-locked .cp-swatch:hover {
    transform: none;
    box-shadow: var(--cp-shadow-sm);
}

.color-practice-root .cp-grid.is-locked .cp-swatch.is-correct:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.35), var(--cp-shadow-md);
}

/* Name mode answer zone: model word (levels 1–2) + the self-judge control. */
.color-practice-root .cp-name-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.color-practice-root .cp-model {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
}

.color-practice-root .cp-model-word {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cp-neutral-800);
    letter-spacing: 0.02em;
    min-width: 4ch;
    text-align: center;
}

.color-practice-root .cp-model-word--hidden {
    visibility: hidden;
}

.color-practice-root .cp-say-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    min-width: 220px;
    padding: 12px 28px;
    border: 2px solid var(--cp-success-dark);
    border-radius: var(--ex-radius-full);
    background: var(--cp-success);
    color: white;
    font-family: var(--cp-font);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--cp-shadow-md);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--cp-transition), transform 0.1s ease;
}

.color-practice-root .cp-say-yes:hover {
    background: var(--cp-success-dark);
    color: white;
    border-color: var(--cp-success-dark);
}

.color-practice-root .cp-say-yes:focus-visible {
    outline: 3px solid var(--ex-primary-ring);
    outline-offset: 3px;
    background: var(--cp-success);
    color: white;
}

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

.color-practice-root .cp-say-yes:disabled,
.color-practice-root .cp-say-yes[aria-disabled="true"] {
    background: var(--cp-neutral-200);
    border-color: var(--cp-neutral-300);
    color: var(--cp-neutral-500);
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Optional mic status line (errorless, §5.6) — pre-allocated height. */
.color-practice-root .cp-mic-status {
    min-height: 1.5em;
    font-size: 0.95rem;
    color: var(--cp-neutral-500);
    text-align: center;
}

.color-practice-root .cp-mic-status.is-listening {
    color: var(--cp-audio-dark);
}

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

.color-practice-root .cp-feedback {
    height: var(--cp-feedback-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

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

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

.color-practice-root .cp-pill-dot {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
}

.color-practice-root .cp-hint-zone {
    height: var(--cp-hint-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.color-practice-root .cp-hint-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: var(--cp-radius-lg);
    background: var(--cp-hint-light);
    color: #854d0e;
    font-size: 1.15rem;
    font-weight: 600;
}

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

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

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

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

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

/* Reduced motion: no pulses, no nudges. */
@media (prefers-reduced-motion: reduce) {
    .color-practice-root .cp-swatch.is-pulsing,
    .color-practice-root .cp-speaker-btn--nudge {
        animation: none;
    }
    .color-practice-root .cp-swatch.is-pulsing {
        box-shadow: 0 0 0 6px rgba(202, 138, 4, 0.5);
    }
    .color-practice-root .cp-swatch,
    .color-practice-root .cp-say-yes,
    .color-practice-root .cp-target,
    .color-practice-root .cp-speaker-btn {
        transition: none;
    }
}

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

.color-practice-preview {
    padding: 20px;
    border: 2px dashed var(--cp-neutral-300);
    border-radius: var(--cp-radius-lg);
    background: var(--cp-neutral-50);
}

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

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

.color-practice-preview .preview-swatches {
    display: flex;
    gap: 12px;
}

.color-practice-preview .preview-swatch {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 2px solid var(--cp-neutral-200);
}

.color-practice-preview .preview-swatch--red    { background: #d62828; }
.color-practice-preview .preview-swatch--blue   { background: #1d4ed8; }
.color-practice-preview .preview-swatch--yellow { background: #facc15; }

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

@media (max-width: 768px) {
    .color-practice-root {
        --cp-stimulus-h: 180px;
        --cp-swatch: 88px;
    }

    .color-practice-root .cp-frame--rows-1 {
        --cp-answer-h: 104px;
    }

    .color-practice-root .cp-frame--rows-2 {
        --cp-answer-h: 204px;
    }

    .color-practice-container {
        padding: 16px 12px;
        border-radius: var(--cp-radius-lg);
    }

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

    .color-practice-root .cp-target {
        font-size: 2rem;
    }

    .color-practice-root .cp-swatch--big {
        width: 150px;
        height: 150px;
    }

    .color-practice-root .cp-grid {
        gap: 14px;
    }
}

@media (max-width: 380px) {
    .color-practice-root {
        --cp-swatch: 80px;
        --cp-stimulus-h: 170px;
    }

    .color-practice-root .cp-frame--rows-1 {
        --cp-answer-h: 96px;
    }

    .color-practice-root .cp-frame--rows-2 {
        --cp-answer-h: 184px;
    }

    .color-practice-root .cp-grid--6 {
        gap: 10px;
    }

    .color-practice-root .cp-say-yes {
        min-width: 180px;
        font-size: 1.15rem;
    }
}

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

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

.color-practice-root .cp-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}

.color-practice-root .cp-swatch--big.is-pressed {
    transform: scale(0.97);
}

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

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

.color-practice-root .cp-gate-icon {
    font-size: 2.4rem;
    line-height: 1;
}

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

.color-practice-root .cp-gate-body {
    margin: 0;
    max-width: 34ch;
    font-size: 1.05rem;
    color: var(--cp-neutral-700);
}

.color-practice-root a.cp-gate-cta,
.color-practice-root a.cp-gate-cta:hover,
.color-practice-root a.cp-gate-cta:focus {
    text-decoration: none;
    color: white;
}

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