/**
 * Mauritian Creole Phrasebook Styles
 *
 * Mobile-first, theme-aware (light/dark via design tokens from main.css).
 * All colors use CSS custom properties — no hardcoded values.
 *
 * Geometry contract (390x844, spec section 6.9):
 *   - header (h1 + intro + honesty line)  <= 170px
 *   - control row (search 44px + toggle 44px, stacked + 8px gap) = 96px
 *   - chips (8, <= 3 wrap rows)           <= 96px
 *   - flashcard box width = min(92vw, 340px) -> 340px at 390 viewport
 *   - no horizontal scroll: scrollWidth <= 390 in both modes
 */

/* ========================================
   Container & Layout
   ======================================== */

.creole-phrasebook-container {
    margin: 0 auto;
    max-width: 900px;
}

.cpb :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The `hidden` attribute must always hide: explicit `display` declarations
   below (flex/inline-flex/grid) would otherwise outrank the UA stylesheet's
   `[hidden] { display: none }` and the attribute would be visually ignored. */
.cpb [hidden] {
    display: none !important;
}

/* Screen-reader-only live region for copy announcements. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   Header (h1 + intro + honesty line, <= 170px at 390px wide)
   ======================================== */

.cpb-header h1 {
    margin: 0 0 var(--space-1, 0.25rem);
    font-size: var(--font-size-lg, 1.25rem);
    line-height: 1.2;
    color: var(--color-text);
}

.cpb-intro {
    margin: 0 0 var(--space-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.35;
    color: var(--color-text);
}

.cpb-honesty-note {
    margin: 0;
    padding: var(--space-2, 0.5rem);
    border: 1px solid var(--color-border-dark);
    border-left-width: 4px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-alt);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .cpb-header h1 {
        margin-bottom: var(--space-2, 0.5rem);
        font-size: var(--font-size-3xl, 2rem);
    }

    .cpb-intro {
        font-size: var(--font-size-base, 1rem);
        line-height: 1.4;
    }

    .cpb-honesty-note {
        padding: var(--space-3, 0.75rem);
        font-size: var(--font-size-sm, 0.875rem);
    }
}

/* ========================================
   Control row: search (44px) + mode toggle (44px), stacked = 96px
   ======================================== */

.cpb-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem); /* 8px */
    margin-top: var(--space-2, 0.5rem);
    margin-bottom: var(--space-2, 0.5rem);
}

/* Mobile: the label is visually hidden (still an accessible name for the
   input) so the control row stays exactly 96px (search 44 + toggle 44 +
   8px gap) per the SPEC §6.9 fold budget. */
.cpb-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cpb-search input {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3, 0.75rem);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base, 1rem);
}

.cpb-search input:hover {
    border-color: var(--color-primary-light);
}

.cpb-mode-toggle {
    display: flex;
    width: 100%;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.cpb-mode-btn {
    flex: 1 1 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-light);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cpb-mode-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.cpb-mode-btn[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

@media (min-width: 768px) {
    .cpb-controls {
        flex-direction: row;
        align-items: center;
    }

    .cpb-search {
        flex: 1 1 0;
        min-width: 0;
    }

    .cpb-search label {
        display: none;
    }

    .cpb-mode-toggle {
        flex: 0 0 auto;
        width: auto;
    }

    .cpb-mode-btn {
        min-width: 110px;
    }
}

/* ========================================
   Category chips (<= 96px tall, <= 3 wrap rows at 390px)
   ======================================== */

.cpb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    /* CLS: JS fills 7 chips after the dataset fetch. Reserve the final band
       height in the server-rendered shell so the 0px -> 96px jump (measured
       layout-shift 0.328 at t~205ms) is eliminated: chips land in space that
       already existed. */
    min-height: 96px;
    margin-bottom: var(--space-3, 0.75rem);
    /* SPEC §6.9 budget: chips <= 96px. Locked category labels need
       6 wrap rows at 343px band width (1220px total label width),
       so the band scrolls internally to honour the 96px budget. */
    max-height: 96px;
    overflow-y: auto;
}

.cpb-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3, 0.75rem);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg);
    color: var(--color-text-light);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.cpb-chip:hover {
    border-color: var(--color-primary-light);
    color: var(--color-text);
}

.cpb-chip.is-active,
.cpb-chip[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ========================================
   Results line + no-results state
   ======================================== */

.cpb-results {
    margin: 0 0 var(--space-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

.cpb-no-results {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem);
    margin: 0 0 var(--space-2, 0.5rem);
    border: 1px dashed var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--font-size-base, 1rem);
}

.cpb-clear-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-3, 0.75rem);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cpb-clear-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ========================================
   Phrase cards (list mode)
   ======================================== */

.cpb-phrase-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3, 0.75rem);
    /* CLS: JS inserts 193 cards after the dataset fetch, growing the list
       0px -> ~18.1k px (single-column grid at every width; measured) and
       pushing everything below it (footer) down with it. Reserve a height
       above the natural 193-card height so the footer sits at its final
       position from first paint and no visible layout shift remains. */
    min-height: 19000px;
}

@media (min-width: 768px) {
    .cpb-phrase-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.phrase-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4, 1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.phrase-card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.phrase-card .cpb-morisian {
    margin: 0;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.phrase-card .cpb-pronunciation {
    margin: var(--space-1, 0.25rem) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

.phrase-card .cpb-english {
    margin: var(--space-2, 0.5rem) 0 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text);
}

.phrase-card .cpb-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-3, 0.75rem);
    padding-top: var(--space-2, 0.5rem);
    border-top: 1px solid var(--color-border);
}

.cpb-source-link {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary-text);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.cpb-source-link:hover {
    color: var(--color-primary-text-hover);
}

/* ========================================
   Copy button (list cards + flashcard back)
   ======================================== */

.cpb-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-3, 0.75rem);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.cpb-copy-btn:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-primary-light);
}

.cpb-copy-btn.is-copied {
    border-color: var(--color-success-text);
    color: var(--color-success-text);
}

/* ========================================
   Flashcard mode
   ======================================== */

.cpb-cards-view {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* SPEC §6.9: 340x480 box, but the E2E-locked invariant (action row
   bottom <= 844 at 390x844, SPEC §8.1 #9) is unreachable with a fixed
   480px box under the 64px site header + ~200px app header + 96px
   controls. Mobile clamps the height to keep the invariant; >=768px
   width restores the full 480px box (SPEC band 380-700px). */
.cpb-flashcard-viewport {
    width: min(92vw, 340px);
    height: min(480px, calc(100vh - 560px));
    margin: var(--space-2, 0.5rem) auto;
    perspective: 1000px;
}

@media (min-width: 768px) {
    .cpb-flashcard-viewport {
        height: 480px;
        margin: var(--space-4, 1rem) auto;
    }
}

.cpb-flashcard {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.cpb-flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-slow);
}

.cpb-flashcard.is-flipped .cpb-flashcard-inner {
    transform: rotateY(180deg);
}

.cpb-flashcard-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-align: center;
}

.cpb-flashcard-front .cpb-morisian {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.cpb-flashcard-back {
    transform: rotateY(180deg);
}

.cpb-flashcard-back .cpb-english {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-text);
}

.cpb-flashcard-back .cpb-pronunciation {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

.cpb-card-category {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.cpb-flashcard-back .cpb-card-source {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary-text);
    text-decoration: underline;
}

.cpb-flashcard-back .cpb-card-source:hover {
    color: var(--color-primary-text-hover);
}

/* Progress line */

.cpb-progress {
    margin: 0 0 var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

/* Action row (Known / Flip / Unknown) — bottom edge <= 768px at 390x844 */

.cpb-cards-view .cpb-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    width: 100%;
}

.cpb-known-btn,
.cpb-flip-btn,
.cpb-unknown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 0.25rem);
    min-height: 44px;
    flex: 1 1 0;
    max-width: 120px;
    padding: 0 var(--space-3, 0.75rem);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.cpb-known-btn {
    border-color: var(--color-success-text);
    color: var(--color-success-text);
}

.cpb-unknown-btn {
    border-color: var(--color-error-text);
    color: var(--color-error-text);
}

.cpb-known-btn:hover,
.cpb-unknown-btn:hover {
    background: var(--color-bg-alt);
}

.cpb-flip-btn {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.cpb-flip-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Deck tools (shuffle) + review row — bottom edge <= 810px at 390x844 */

.cpb-deck-tools {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2, 0.5rem);
    width: 100%;
}

.cpb-review-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-2, 0.5rem);
    padding-bottom: var(--space-2, 0.5rem);
    width: 100%;
}

@media (min-width: 768px) {
    .cpb-deck-tools {
        margin-top: var(--space-3, 0.75rem);
    }

    .cpb-review-row {
        margin-top: var(--space-3, 0.75rem);
        padding-bottom: var(--space-4, 1rem);
    }
}

.cpb-review-btn,
.cpb-shuffle-btn,
.cpb-start-over-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 0.25rem);
    min-height: 44px;
    padding: 0 var(--space-4, 1rem);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cpb-review-btn:hover,
.cpb-shuffle-btn:hover,
.cpb-start-over-btn:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-primary-light);
}

.cpb-review-complete {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-success-text);
}

/* ========================================
   Footer notes
   ======================================== */

.cpb-notes {
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-3, 0.75rem);
}

.cpb-note {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* ========================================
   Motion preference: kill the 3D flip transition
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .cpb-flashcard-inner,
    .cpb-chip,
    .cpb-copy-btn,
    .cpb-mode-btn,
    .cpb-clear-btn,
    .cpb-known-btn,
    .cpb-flip-btn,
    .cpb-unknown-btn,
    .cpb-review-btn,
    .cpb-shuffle-btn,
    .cpb-start-over-btn {
        transition: none;
        transition-duration: 0.01ms;
    }
}