/* Fluent materials for the web: tinted base surfaces, acrylic flyouts,
   restrained elevation, and an optional pointer light. No desktop access. */
body.fluent-ui {
    --fluent-surface: rgba(253, 254, 251, .94);
    --fluent-inset: rgba(238, 243, 237, .85);
    --fluent-acrylic: rgba(250, 253, 248, .82);
    --fluent-solid: #f5f8f2;
    --fluent-stroke: rgba(42, 65, 54, .14);
    --fluent-edge: rgba(255, 255, 255, .9);
    --fluent-light: rgba(255, 255, 255, .65);
    --fluent-control-light: rgba(53, 118, 94, .2);
    --fluent-control-wash: rgba(53, 118, 94, .055);
    --fluent-control-edge: rgba(53, 118, 94, .6);
    --fluent-control-press: rgba(29, 78, 61, .14);
    --fluent-accent: var(--skill, #36765d);
    --fluent-brush: linear-gradient(135deg, rgba(255, 255, 255, .48), transparent 60%);
    --fluent-rest: inset 0 1px 0 var(--fluent-edge), 0 2px 5px rgba(22, 43, 31, .04), 0 12px 32px -18px rgba(22, 43, 31, .16);
    --fluent-raised: inset 0 1px 0 var(--fluent-edge), 0 4px 10px rgba(22, 43, 31, .06), 0 22px 48px -24px rgba(22, 43, 31, .22);
    --fluent-flyout: inset 0 1px 0 var(--fluent-edge), 0 8px 20px rgba(22, 43, 31, .1), 0 32px 80px -20px rgba(22, 43, 31, .24);
    --fluent-ease: cubic-bezier(.16, 1, .3, 1);
    font-family: 'Segoe UI Variable', 'Segoe UI', Inter, system-ui, sans-serif;
}

body.fluent-ui[data-fluent-theme="dark"] {
    --fluent-surface: rgba(25, 35, 40, .94);
    --fluent-inset: rgba(10, 20, 25, .82);
    --fluent-acrylic: rgba(24, 34, 40, .79);
    --fluent-solid: #192328;
    --fluent-stroke: rgba(229, 245, 238, .13);
    --fluent-edge: rgba(244, 255, 250, .08);
    --fluent-light: rgba(222, 246, 240, .13);
    --fluent-control-light: rgba(231, 255, 247, .26);
    --fluent-control-wash: rgba(231, 255, 247, .065);
    --fluent-control-edge: rgba(218, 251, 238, .58);
    --fluent-control-press: rgba(231, 255, 247, .13);
    --fluent-accent: var(--skill-on-dark, #a2ddbf);
    --fluent-brush: linear-gradient(135deg, rgba(227, 245, 249, .055), transparent 65%);
    --fluent-rest: inset 0 1px 0 var(--fluent-edge), 0 2px 4px rgba(0, 0, 0, .14), 0 12px 32px -20px rgba(0, 0, 0, .3);
    --fluent-raised: inset 0 1px 0 var(--fluent-edge), 0 4px 10px rgba(0, 0, 0, .2), 0 22px 48px -24px rgba(0, 0, 0, .45);
    --fluent-flyout: inset 0 1px 0 var(--fluent-edge), 0 8px 20px rgba(0, 0, 0, .22), 0 32px 80px -20px rgba(0, 0, 0, .55);
}

body.fluent-ui :where(button, .skill-tab, .account-name, .materials-item strong) { font-weight: 600; }
body.fluent-ui :where(.section-kicker, .module-eyebrow, .eyebrow, .panel-head h2, .planner-heading h2) { font-weight: 700; }

/* Wide reference tables scroll in their own surface, including on a phone. */
body.fluent-ui .material-body { grid-template-columns: minmax(0, 1fr); }

/* Long-lived reading surfaces stay almost opaque. Limit backdrop sampling to
   chrome and floating layers rather than nesting a blur in every study card. */
body.fluent-ui :where(
    .panel, .planner-card, .growth-card, .result-card, .feedback-panel,
    .imitation-overview, .voice-quest-hud, .shadow-panel, .coach-card,
    .material-rail-inner, .mat-card, .mat-rule, .mat-table-wrap, .mat-pairs-wrap,
    .fp-feature, .fp-card, .fp-lesson, .fp-stat-grid > div,
    .table-panel, .side-panel, .stat-grid article, .reward-admin-card, .login-shell
) {
    border-color: var(--fluent-stroke);
    border-radius: 16px;
    background-color: var(--fluent-surface);
    background-image: var(--fluent-brush);
    box-shadow: var(--fluent-rest);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.fluent-ui :where(
    .queue-stat, .type-option-card, .scene-card, .scenario-card,
    .fp-quote, .fp-feedback, .chat-scene, .imitation-stat,
    .transport, .tool-row, .chat-controls, .answer-reference
) {
    border-color: var(--fluent-stroke);
    border-radius: 10px;
    background-color: var(--fluent-inset);
    background-image: var(--fluent-brush);
    box-shadow: inset 0 1px 0 var(--fluent-edge);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.fluent-ui :where(.site-header, .sidebar) {
    background: var(--fluent-acrylic);
    border-color: var(--fluent-stroke);
    box-shadow: inset 0 -1px 0 var(--fluent-stroke), 0 4px 24px rgba(0, 0, 0, .06);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
}

/* An opaque, tinted header also lets its acrylic menus sample the page below.
   A blurred ancestor would trap their backdrop and leave underlying text sharp. */
body.fluent-ui .site-header,
body.fluent-ui .site-header.is-stuck {
    background-color: var(--fluent-solid);
    background-image: var(--fluent-brush);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.fluent-ui :where(
    .materials-panel, .account-panel, .capture-drawer,
    .fp-dialog, .item-dialog, .reward-settings-panel, .voice-growth-dialog,
    .learning-calendar-dialog, .reading-transcript-dialog, .retell-lines-dialog,
    .review-reading-invite-dialog, .swal2-popup.lb-swal
) {
    border: 1px solid var(--fluent-stroke);
    border-radius: 16px;
    background-color: var(--fluent-acrylic);
    background-image: var(--fluent-brush);
    box-shadow: var(--fluent-flyout);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
}

body.fluent-ui :where(
    .voice-growth-shell, .learning-calendar-shell, .reading-transcript-shell,
    .review-reading-invite-shell
) {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.fluent-ui dialog::backdrop {
    background: rgba(4, 11, 15, .48);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

body.fluent-ui .fp-dialog-bar { background-color: var(--fluent-solid); }

body.fluent-ui :where(
    .skill-tab, .materials-button, .account-pill, .stat-pill, .admin-link,
    .secondary-button, .ghost-button, .chip-button, .tool-button,
    .fp-secondary, .fp-mic, .fp-tabs > button, .fp-categories > button,
    .cancel-button, .filter-button, .reward-settings-button
) {
    border-radius: 8px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 160ms ease, border-color 160ms ease,
        box-shadow 180ms var(--fluent-ease), color 160ms ease, translate 120ms ease;
}

body.fluent-ui :is(.primary-cta, .primary-button, .skill-cta, .fp-primary, .add-button, .save-button, .login-button, .reward-save-button) {
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 4px 12px rgba(0, 0, 0, .12);
    transition: background-color 160ms ease, box-shadow 180ms var(--fluent-ease), translate 120ms ease;
}

/* Preserve each module's semantic colors and selected/disabled states. */
body.fluent-ui :where(.skill-tab.is-active, .sidebar nav a.is-active) {
    box-shadow: inset 0 -2px 0 var(--fluent-accent), inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.fluent-ui :where(
    .fp-card, .fp-lesson, .mat-card, .scene-card, .scenario-card,
    .queue-stat, .stat-grid article
) {
    transition: border-color 180ms ease, box-shadow 220ms var(--fluent-ease), translate 180ms var(--fluent-ease);
}

body.fluent-ui .fluent-reveal-active,
body.fluent-ui :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary).fluent-reveal-active {
    background-image: radial-gradient(var(--fluent-reveal-size, 260px) circle at var(--fluent-x, 50%) var(--fluent-y, 50%), var(--fluent-reveal-light, var(--fluent-light)), transparent 75%), var(--fluent-reveal-base, var(--fluent-brush));
}

/* Every actionable control gets feedback, including dynamic menus, plain
   hyperlinks, source tabs, steppers, and native submit inputs. Shadows draw
   inside the existing shape without adding borders or moving surrounding text. */
body.fluent-ui :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary) {
    --fluent-reveal-size: 110px;
    --fluent-reveal-light: var(--fluent-control-light);
    transition: background-color 150ms ease, border-color 150ms ease,
        box-shadow 160ms var(--fluent-ease), color 150ms ease,
        translate 120ms var(--fluent-ease), scale 100ms var(--fluent-ease),
        transform 120ms var(--fluent-ease),
        text-decoration-color 150ms ease;
}

body.fluent-ui :is(.source-tabs button, .stepper button, .materials-item, .material-toc a, .sidebar nav a) { border-radius: 8px; }

/* A light-colored reflection stays visible over saturated primary/selected
   fills in both themes, while the control keeps its original accent color. */
body.fluent-ui :is(.primary-cta, .primary-button, .skill-cta, .fp-primary, .add-button, .save-button, .login-button, .reward-save-button, .skill-tab.is-active, .chip-button.is-active) {
    --fluent-control-light: rgba(255, 255, 255, .38);
    --fluent-control-wash: rgba(255, 255, 255, .075);
    --fluent-control-edge: rgba(255, 255, 255, .68);
    --fluent-control-press: rgba(2, 18, 12, .18);
}

body.fluent-ui :is(main p a[href], main li a[href], main small a[href], .back-link, .fp-link) {
    border-radius: 4px;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.fluent-ui .back-link { width: fit-content; max-width: 100%; margin-inline: auto; padding: 4px 6px; font-size: 12px; line-height: 1.5; }

@media (hover: hover) and (pointer: fine) {
    body.fluent-ui :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary):hover:not(:disabled):not([aria-disabled="true"]) {
        border-color: var(--fluent-control-edge);
        box-shadow: inset 0 0 0 1px var(--fluent-control-edge),
            inset 0 0 0 999px var(--fluent-control-wash),
            0 4px 12px rgba(0, 0, 0, .12);
    }
    body.fluent-ui :is(main p a[href], main li a[href], main small a[href], .back-link, .fp-link):hover:not(:disabled):not([aria-disabled="true"]) {
        color: var(--fluent-accent);
        text-decoration-color: currentColor;
        box-shadow: inset 0 0 0 999px var(--fluent-control-wash);
    }
}

body.fluent-ui :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary):active:not(:disabled):not([aria-disabled="true"]) {
    box-shadow: inset 0 0 0 1px var(--fluent-control-edge),
        inset 0 2px 5px rgba(0, 0, 0, .2),
        inset 0 0 0 999px var(--fluent-control-press);
}

body.fluent-ui :is(button, [role="button"], input[type="button"], input[type="submit"], .skill-tab, .materials-item):active:not(:disabled):not([aria-disabled="true"]) {
    scale: .97;
    translate: 0 1px;
}

body.fluent-ui :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary):focus-visible {
    outline: 2px solid var(--fluent-accent);
    outline-offset: 3px;
    box-shadow: inset 0 0 0 1px var(--fluent-control-edge), inset 0 0 0 999px var(--fluent-control-wash);
}

body.fluent-ui :is(main p a[href], main li a[href], main small a[href], .back-link, .fp-link):focus-visible { text-decoration-color: currentColor; }

body.fluent-ui :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="submit"]),
    textarea, select
) {
    border-color: var(--fluent-stroke);
    border-bottom-color: var(--muted);
    border-radius: 8px;
    background-color: var(--fluent-inset);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

body.fluent-ui :where(input, textarea, select):focus-visible {
    border-bottom-color: var(--fluent-accent);
    box-shadow: inset 0 -2px 0 var(--fluent-accent);
    outline: 2px solid var(--fluent-accent);
    outline-offset: 2px;
}

body.fluent-ui :where(button, a, summary, [tabindex="0"]):focus-visible {
    outline: 2px solid var(--fluent-accent);
    outline-offset: 3px;
}

body.fluent-ui :where(input, textarea, select)[aria-invalid="true"] {
    border-color: #d86b60;
}

body.fluent-ui :where(.fp-dialog, .item-dialog, .learning-calendar-dialog, .reading-transcript-dialog, .retell-lines-dialog)[open] {
    animation: fluent-arrive 200ms var(--fluent-ease) both;
}

@keyframes fluent-arrive {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

@media (hover: hover) and (pointer: fine) {
    body.fluent-ui :where(.fp-card, .fp-lesson, .mat-card, .scene-card, .scenario-card, .stat-grid article):hover {
        border-color: var(--fluent-accent);
        box-shadow: var(--fluent-raised);
        translate: 0 -2px;
        transform: none;
    }
    body.fluent-ui :where(.primary-cta, .primary-button, .fp-primary, .save-button, .login-button):hover:not(:disabled) {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(0, 0, 0, .2);
        transform: none;
    }
}

body.fluent-ui :where(.primary-cta, .fp-primary, .fp-secondary, .fp-card, .mat-card, .skill-tab, .materials-button, .account-pill, .save-button):active:not(:disabled) {
    translate: 0 1px;
}

body.fluent-ui.is-fluent-window-inactive :where(.site-header, .sidebar, .materials-panel, .account-panel) {
    background-color: var(--fluent-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* A phone needs readable, inexpensive surfaces more than another blur layer. */
@media (max-width: 740px), (pointer: coarse) {
    body.fluent-ui :where(.site-header, .sidebar, .materials-panel, .account-panel, dialog, .capture-drawer) {
        background-color: var(--fluent-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body.fluent-ui dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 740px) {
    body.fluent-ui .fp-dialog-actions .fp-primary { flex-basis: 100%; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.fluent-ui[data-fluent-theme] { --fluent-acrylic: var(--fluent-solid); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body.fluent-ui[data-fluent-theme] { --fluent-acrylic: var(--fluent-solid); --fluent-surface: var(--fluent-solid); --fluent-brush: none; }
    body.fluent-ui :where(.site-header, .sidebar, .materials-panel, .account-panel, dialog, .capture-drawer) { -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.fluent-ui dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.fluent-ui[data-fluent-theme],
    body.fluent-ui[data-fluent-theme] :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary) { --fluent-control-light: transparent; --fluent-control-wash: transparent; --fluent-control-press: transparent; }
    body.fluent-ui :is(.fluent-reveal-active, button.fluent-reveal-active, a[href].fluent-reveal-active) { background-image: var(--fluent-reveal-base, none); }
}

body.fluent-ui.is-immersive-effects-quiet :is(.fluent-reveal-active, button.fluent-reveal-active, a[href].fluent-reveal-active) { background-image: var(--fluent-reveal-base, var(--fluent-brush)); }

@media (prefers-reduced-motion: reduce) {
    body.fluent-ui :where(button, a, input, textarea, select, summary, [role="button"], dialog, .mat-card, .stat-grid article, .queue-stat, .scene-card, .scenario-card, .fp-card, .fp-lesson) {
        animation: none !important;
        transition: none !important;
        translate: none !important;
        scale: none !important;
    }
    body.fluent-ui :is(.fluent-reveal-active, button.fluent-reveal-active, a[href].fluent-reveal-active) { background-image: var(--fluent-reveal-base, var(--fluent-brush)); }
}

@media (forced-colors: active) {
    body.fluent-ui[data-fluent-theme] {
        --fluent-surface: Canvas;
        --fluent-inset: Canvas;
        --fluent-acrylic: Canvas;
        --fluent-solid: Canvas;
        --fluent-stroke: CanvasText;
        --fluent-accent: Highlight;
        --fluent-brush: none;
        --fluent-rest: none;
        --fluent-raised: none;
        --fluent-flyout: none;
        --fluent-control-light: transparent;
        --fluent-control-wash: transparent;
        --fluent-control-edge: ButtonText;
        --fluent-control-press: transparent;
    }
    body.fluent-ui :where(.site-header, .sidebar, .materials-panel, .account-panel, dialog, .capture-drawer) { -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.fluent-ui dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.fluent-ui[data-fluent-theme] :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary) { --fluent-control-edge: ButtonText; --fluent-control-wash: transparent; --fluent-control-press: transparent; }
    body.fluent-ui :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary):is(:hover, :active, :focus-visible):not(:disabled):not([aria-disabled="true"]) { box-shadow: none; }
    body.fluent-ui[data-fluent-theme] :is(button, [role="button"], input[type="button"], input[type="submit"]) { outline: 1px solid ButtonText; outline-offset: -1px; }
    body.fluent-ui[data-fluent-theme] :is(button, a[href], [role="button"], input[type="button"], input[type="submit"], summary):focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
    body.fluent-ui :is(.fluent-reveal-active, button.fluent-reveal-active, a[href].fluent-reveal-active) { background-image: none; }
    body.fluent-ui :where(.skill-tab.is-active, .sidebar nav a.is-active, button[aria-pressed="true"]) { outline: 2px solid Highlight; }
}