@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/* Google Fonts loaded via <link> in index.html — no @import needed here */

/* ========================================
   APP.CSS - Core Layout & Theme Bridge
   Font imports, base layout, theme overrides,
   toolbar positioning, mobile responsiveness.
   MudBlazor internal overrides -> mudblazor-overrides.css
   ======================================== */

/* Blazor reconnect UI: never expose framework reconnect diagnostics to visitors. */
#components-reconnect-modal,
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}
#qf-reconnect-recovery-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2400;
    align-items: center;
    justify-content: center;
    background: var(--glytic-bg-dark);
}
html.qf-reconnect-recovering #qf-reconnect-recovery-loader {
    display: flex;
}
/* Branded ring+strike boot/recovery loader (matches <QfSpinner>). Static SVG so
   it renders before Blazor hydrates. */
.qf-boot-spinner {
    width: 72px;
    height: 72px;
    overflow: visible;
}
/* Boot/recovery splash: the damascus emblem (Tier-2 mark) centred with the ring orbiting it. */
.qf-boot-emblem-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qf-boot-emblem {
    position: absolute;
    width: 104px;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
}
.qf-boot-spinner--orbit {
    width: 176px;
    height: 176px;
}
/* Calmer 2.6s orbit around the emblem (the bare reconnect spinner keeps its brisk 1.1s spin). */
.qf-boot-spinner--orbit .qf-boot-rotor {
    animation-duration: 2.6s;
}
.qf-boot-track {
    fill: none;
    stroke: rgba(var(--glytic-primary-rgb), 0.35);
    stroke-width: 3;
}
.qf-boot-arc {
    fill: none;
    stroke: var(--glytic-primary);
    stroke-width: 3;
}
.qf-boot-rotor {
    transform-box: view-box;
    transform-origin: 16px 16px;
    animation: qfRecoverySpin 1.1s linear infinite;
    will-change: transform;
}
@keyframes qfRecoverySpin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .qf-boot-rotor {
        animation: none;
    }
    .qf-boot-spinner {
        animation: qfBootPulse 1.5s ease-in-out infinite;
    }
    @keyframes qfBootPulse {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 1; }
    }
}

/* Logged-in root visits should never flash anonymous landing marketing before auth hydrates. */
html.qf-auth-cookie-root .hero-wrapper,
html.qf-auth-cookie-root .vendor-strip,
html.qf-auth-cookie-root .landing-try-section {
    display: none !important;
}
/* Ensure content stays above particles */
.page, .content, .mud-main-content, main, article {
    position: relative;
    z-index: 1;
}

/* AI card layering + overlay handling */
.ai-card-style {
    position: relative;
    overflow: hidden;
    background: rgba(20, 20, 32, 0.55);
    backdrop-filter: blur(4px);
}

.ai-card-style .mud-card-content,
.ai-card-style .mud-card-actions {
    position: relative;
    z-index: 2;
}

.ai-overlay,
.ai-overlay-subtle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ai-overlay-subtle {
    z-index: 0;
}

.compact-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quiz-result-card,
.question-card,
.completion-card {
    width: 100%;
    box-sizing: border-box;
}

/* --------- LEGACY VARIABLE MAPPING --------- */
:root {
    --bg-primary: var(--glytic-bg-medium);
    --bg-secondary: var(--glytic-surface);
    --text-primary: var(--glytic-text-primary);
    --accent-primary: var(--glytic-primary);
    --accent-secondary: var(--glytic-secondary);
    --border-color: var(--glytic-border);
    --shadow-color: rgba(0, 0, 0, 0.2);
    --shadow-hover: rgba(0, 184, 212, 0.2);
    --border-radius: var(--glytic-border-radius-small);
    --transition: var(--glytic-transition);
}

/* --------- THEME-AWARE BASE STYLES --------- */
.mud-theme-dark {
    --mud-palette-text-primary: #f0f0f0;
    --mud-palette-text-secondary: #e0e0e0;
}


.mud-main-content,
body, .container, main, .content, .page {
    background: none;
    background-color: transparent;
}

body, .mud-typography, .mud-button, .mud-input {
    font-family: var(--glytic-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--glytic-font-heading) !important;
    font-weight: 600;
}

html, body {
    background: var(--glytic-gradient-bg) !important;
    min-height: 100vh;
}

.mud-main-content {
    background: transparent !important;
}

.mud-theme-dark {
    background: var(--glytic-gradient-bg) !important;
}


/* --------- TOOLBAR POSITIONING --------- */
.custom-appbar {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    width: 100%;
    backdrop-filter: blur(20px);
    padding: 0 24px;
    transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
    background: var(--mud-palette-appbar-background, #181824);
}

.appbar-flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.appbar-left, .appbar-center, .appbar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.appbar-center {
    flex: 1 1 auto;
    justify-content: center;
}

.appbar-left {
    flex: 0 0 auto;
}

.appbar-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* --------- TOOLBAR AUTO-HIDE --------- */
.custom-appbar.autohide,
#main-appbar.custom-appbar.mud-appbar.autohide,
header#main-appbar.mud-appbar.custom-appbar.autohide {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1300 !important;
    transform: translateY(calc(-100% * var(--autohide-hidden, 0))) !important;
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.18, 1) !important;
}

.custom-appbar.autohide.show,
#main-appbar.custom-appbar.mud-appbar.autohide.show,
header#main-appbar.mud-appbar.custom-appbar.autohide.show {
    transform: translateY(0) !important;
}

.custom-appbar.no-autohide,
#main-appbar.custom-appbar.mud-appbar.no-autohide,
header#main-appbar.mud-appbar.custom-appbar.no-autohide {
    transform: translateY(0) !important;
}

.custom-appbar:not(.autohide) {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* --------- CHECKOUT PROCESSING TAKEOVER ---------
   The checkout-success processing stage (.cs-processing) is a full-viewport fixed
   overlay, but it renders inside .mud-main-content whose z-index:1 stacking context
   traps it below the fixed app bar (z-index:1300). While the takeover is on screen,
   hide the app bar so the branded stage truly owns the screen. Pure CSS via :has(),
   scoped precisely to when the overlay exists; degrades to showing the bar if :has()
   is unsupported. Only affects this one transient stage -- no layout logic changes. */
body:has(.cs-processing) #main-appbar {
    display: none;
}

/* --------- BODY LAYOUT OVERRIDES --------- */
body.homepage,
body.homepage #app,
body.homepage .mud-layout,
body.homepage .main-content,
body.homepage .mud-main-content {
    transform: none !important;
    perspective: none !important;
    contain: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative !important;
}

/* INNER-PAGE CONTENT OFFSET, AND WHY IT ALSO ASKS FOR .qf-root (2026-09-05, RB2-D4-2)
   ---------------------------------------------------------------------------------
   The 'homepage' body class is added by JavaScript from Index.razor.cs OnAfterRenderAsync, so
   it cannot land before the circuit opens: measured on Test at the Pixel 7 profile, the class
   arrives at ~2.54 s and the whole page then animates from this rule's 72px margin to the
   layout it should have had all along (margin 0, MudBlazor's own 56px appbar padding). The
   0.35s transition below turns that into nine separate layout shifts, and the home page spent
   0.1354 of a 0.1 CLS budget on them at the mobile profile and 0.1411 at mobile-slow4g -- the
   entire measured CLS of the page, and it fails the budget before any content moves at all.
   Index.razor renders .qf-root for exactly the routes that get the class, and NOT for the 404
   branch it also owns, so the prerendered HTML already says "this is the homepage" and the
   selector can read it directly. Matching on it makes the pre-hydration layout identical to
   the post-hydration layout, which is why nothing shifts: measured 0.0004 with this predicate
   simulated on the deployed build.
   BROWSERS WITHOUT :has(), stated correctly (corrected 2026-09-05 after review, I2). An invalid
   selector invalidates the whole style rule, so such a browser does not fall back to the previous
   behaviour: it drops all three rules below entirely. Measured on /privacy at 1440x900 by deleting
   every rule whose selector contains ":has(" -- .main-content goes from margin-top 72px /
   padding-top 0px / content top 72px to margin-top 0px / padding-top 64px (MudBlazor's own app-bar
   padding) / content top 64px. An 8px smaller gap under a 64px app bar, and no occlusion: a mild
   degradation, not the previous layout. The floor is Chrome 105+, Safari 15.4+ and Firefox 121+.
   The real defence is that such a browser has already lost far more than this rule: of the 19
   :has() rules live on /privacy, 14 are MudBlazor's own shipped stylesheet, and app.css itself
   already relies on :has() at body:has(.cs-processing) above.
   COST. body:not(:has(.qf-root)) is a body-scoped :has() resolved against .content-container and
   .main-content, so it is style-invalidation-sensitive on a churning DOM. Nothing measurable was
   observed in Chromium here, but a future editor adding subtree-wide :has() predicates on hot
   elements should measure rather than assume. */
body:not(.homepage):not(:has(.qf-root)) .content-container,
body:not(.homepage):not(:has(.qf-root)) .main-content {
    margin-top: 72px !important;
    padding-top: 0 !important;
    transition: margin-top 0.35s cubic-bezier(0.77, 0, 0.18, 1),
                padding-top 0.35s cubic-bezier(0.77, 0, 0.18, 1);
}

body.auto-hide-active:not(.homepage):not(:has(.qf-root)) .content-container,
body.auto-hide-hidden:not(.homepage):not(:has(.qf-root)) .content-container,
body.auto-hide-active:not(.homepage):not(:has(.qf-root)) .main-content,
body.auto-hide-hidden:not(.homepage):not(:has(.qf-root)) .main-content {
    margin-top: 0 !important;
    padding-top: 16px !important;
}

body:not(.auto-hide-hidden):not(.homepage):not(:has(.qf-root)) .content-container,
body:not(.auto-hide-hidden):not(.homepage):not(:has(.qf-root)) .main-content {
    margin-top: 72px !important;
    padding-top: 0 !important;
}

.content {
    margin-left: 200px;
    margin-right: 0;
    min-height: 100vh;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    position: relative;
    padding: 0 !important;
    display: block;
}

main {
    display: block;
    width: 100%;
}

.px-4 {
    padding: 0 !important;
}

/* =========================================================
   MOBILE UX - Global overrides for AppBar, Cards, and Touch
   ========================================================= */

.active-progress-popover {
    max-width: min(320px, calc(100vw - 32px));
}

@media (max-width: 600px) {
    .content {
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .active-progress-popover {
        min-width: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .active-quiz-display {
        min-width: auto !important;
        width: auto !important;
        max-width: calc(100vw - 120px) !important;
        padding: 4px 8px !important;
    }

    .active-practice-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .appbar-container {
        padding: 0 8px !important;
    }

    .brand-home-btn {
        padding: 4px 8px !important;
    }

    .appbar-right {
        gap: 4px !important;
    }

    .login-btn,
    .register-btn {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    .auth-expand-btn {
        padding: 0.4rem 0.6rem !important;
    }
}

@media screen and (max-width: 480px) {
    .active-progress-popover {
        width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
    }

    .active-quiz-display {
        max-width: calc(100vw - 100px) !important;
        padding: 3px 6px !important;
    }

    .active-practice-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    .appbar-container {
        padding: 0 4px !important;
    }

    .brand-home-btn {
        transform: scale(0.85);
        transform-origin: left center;
    }

    .mobile-menu-btn {
        margin-left: 4px !important;
    }

    .login-btn,
    .register-btn {
        min-width: 36px !important;
        padding: 6px !important;
    }
}

@media screen and (max-width: 360px) {
    .active-quiz-display {
        max-width: calc(100vw - 80px) !important;
    }

    .active-practice-buttons {
        display: none !important;
    }
}

/* Touch target improvements */
@media (pointer: coarse) {
    .active-practice-btn,
    .quiz-search-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .quiz-search-item {
        padding: 12px !important;
    }
}