:root {
    --solid-primary: #1A7A8C;
    --solid-primary-light: #3399AB;
    --solid-secondary: #E8A545;
    --solid-success: #5BA88C;
    --solid-danger: #D4645C;
    --solid-surface-tint: rgba(26, 122, 140, 0.10);
    --solid-dark-bg: #0F1B24;
    --solid-dark-surface: #1E3242;
    --solid-dark-surface-alt: #2A4050;
    --solid-dark-border: rgba(140, 185, 210, 0.18);
    --solid-dark-text: #E8F0F4;
    --solid-dark-text-secondary: #A8C0CC;
}

.dark {
    --solid-primary: #5CC0D6;
    --solid-primary-light: #3399AB;
    --solid-secondary: #F0BA5A;
    --solid-surface-tint: rgba(92, 192, 214, 0.12);
}

/* ─── Gradient suppression: text ─── */
.gradient-text,
.gradient-text-teal,
[class*="bg-gradient-to-r"][class*="bg-clip-text"],
[class*="bg-gradient-to-br"][class*="bg-clip-text"] {
    background-image: none !important;
    color: var(--solid-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ─── Buttons ─── */
.btn-gradient,
.btn-secondary,
button[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"],
button[class*="bg-gradient-to-r"][class*="from-amber-500"][class*="to-yellow-500"],
a.btn-gradient,
button.btn-gradient {
    background-image: none !important;
    background-color: #1A7A8C !important;
    color: #ffffff !important;
    transform: none !important;
}

.dark .btn-gradient,
.dark .btn-secondary,
.dark button[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"],
.dark a.btn-gradient,
.dark button.btn-gradient {
    background-color: #2E8A9C !important;
}

/* ─── Badges ─── */
.badge-gold,
.badge-silver,
.badge-expert,
.badge-investigator,
.user-level {
    background-image: none !important;
    -webkit-text-fill-color: initial !important;
}

.badge-gold {
    background-color: #E8A545 !important;
    color: #3D2200 !important;
}

.badge-silver {
    background-color: #D5DDE2 !important;
    color: #1A2B33 !important;
}

.badge-expert {
    background-color: #3399AB !important;
    color: #ffffff !important;
}

.badge-investigator {
    background-color: #1A7A8C !important;
    color: #ffffff !important;
}

.user-level {
    color: var(--solid-primary-light) !important;
    font-weight: 700;
}

/* ─── Progress / Quiz ─── */
.progress-fill::after {
    display: none !important;
}

.quiz-option.correct {
    background: #5BA88C !important;
    border-color: #5BA88C !important;
    color: #ffffff !important;
}

.quiz-option.incorrect {
    background: #D4645C !important;
    border-color: #D4645C !important;
    color: #ffffff !important;
}

/* ─── Hot sticker ─── */
.hot-sticker,
[class*="hot-sticker"][class*="bg-gradient-to-r"] {
    background-image: none !important;
    background-color: #E8A545 !important;
    color: #1A2B33 !important;
}

/* ─── Gradient suppression: solid-color backgrounds ─── */
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"],
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-warning"],
[class*="bg-gradient-to-r"][class*="from-warning"][class*="to-danger"],
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-primary"],
[class*="bg-gradient-to-r"][class*="from-success"][class*="to-success"],
[class*="bg-gradient-to-r"][class*="from-xp-gold"][class*="to-warning"],
[class*="bg-gradient-to-br"][class*="from-accent/20"][class*="to-primary/20"],
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-accent"],
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-secondary"] {
    background-image: none !important;
    background-color: #1A7A8C !important;
    color: #ffffff !important;
}

.dark [class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"],
.dark [class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-warning"],
.dark [class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-primary"],
.dark [class*="bg-gradient-to-r"][class*="from-success"][class*="to-success"],
.dark [class*="bg-gradient-to-r"][class*="from-xp-gold"][class*="to-warning"],
.dark [class*="bg-gradient-to-br"][class*="from-accent/20"][class*="to-primary/20"],
.dark [class*="bg-gradient-to-br"][class*="from-primary"][class*="to-accent"],
.dark [class*="bg-gradient-to-br"][class*="from-primary"][class*="to-secondary"] {
    background-color: #2E8A9C !important;
}

/* ─── Headings on teal backgrounds ─── */
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"] h1,
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"] h2,
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"] h3,
[class*="bg-gradient-to-r"][class*="from-primary"][class*="to-secondary"] h4,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-warning"] h1,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-warning"] h2,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-warning"] h3,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-warning"] h4,
[class*="bg-gradient-to-r"][class*="from-warning"][class*="to-danger"] h1,
[class*="bg-gradient-to-r"][class*="from-warning"][class*="to-danger"] h2,
[class*="bg-gradient-to-r"][class*="from-warning"][class*="to-danger"] h3,
[class*="bg-gradient-to-r"][class*="from-warning"][class*="to-danger"] h4,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-primary"] h1,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-primary"] h2,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-primary"] h3,
[class*="bg-gradient-to-r"][class*="from-secondary"][class*="to-primary"] h4,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-accent"] h1,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-accent"] h2,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-accent"] h3,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-accent"] h4,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-secondary"] h1,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-secondary"] h2,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-secondary"] h3,
[class*="bg-gradient-to-br"][class*="from-primary"][class*="to-secondary"] h4,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.dark .bg-primary h1,
.dark .bg-primary h2,
.dark .bg-primary h3,
.dark .bg-primary h4 {
    color: var(--solid-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ─── Dashboard badges: warm light-mode tint ─── */
#badges-container .badge[class*="bg-gradient-to-br"][class*="from-accent/20"][class*="to-primary/20"],
#badges-container .badge[class*="bg-gradient-to-br"][class*="from-primary/20"][class*="to-secondary/20"] {
    background-image: none !important;
    background-color: rgba(232, 165, 69, 0.16) !important;
    border-color: rgba(232, 165, 69, 0.55) !important;
}

#badges-container .badge[class*="bg-gradient-to-br"][class*="from-accent/20"][class*="to-primary/20"] .text-accent,
#badges-container .badge[class*="bg-gradient-to-br"][class*="from-primary/20"][class*="to-secondary/20"] .text-primary,
#badges-container .badge[class*="bg-gradient-to-br"][class*="from-primary/20"][class*="to-secondary/20"] .text-accent {
    color: var(--solid-secondary) !important;
}

.dark #badges-container .badge[class*="bg-gradient-to-br"][class*="from-accent/20"][class*="to-primary/20"],
.dark #badges-container .badge[class*="bg-gradient-to-br"][class*="from-primary/20"][class*="to-secondary/20"] {
    background-color: rgba(46, 138, 156, 0.22) !important;
    border-color: rgba(92, 192, 214, 0.35) !important;
}

/* ─── Gradient suppression: tinted surfaces ─── */
[class*="bg-gradient-to-r"][class*="from-primary/10"][class*="to-secondary/10"],
[class*="bg-gradient-to-br"][class*="from-primary/10"][class*="to-secondary/10"],
[class*="bg-gradient-to-br"][class*="from-secondary/10"][class*="to-primary/10"],
[class*="bg-gradient-to-br"][class*="from-primary/5"][class*="to-secondary/5"],
[class*="bg-gradient-to-r"][class*="from-danger/20"][class*="to-warning/20"],
[class*="bg-gradient-to-r"][class*="from-secondary/10"][class*="to-warning/10"],
[class*="bg-gradient-to-r"][class*="from-primary/20"][class*="to-secondary/20"],
[class*="bg-gradient-to-r"][class*="from-success/10"][class*="to-primary/10"],
[class*="bg-gradient-to-r"][class*="from-success"][class*="to-primary"],
[class*="bg-gradient-to-r"][class*="from-danger"][class*="to-warning"] {
    background-image: none !important;
    background-color: var(--solid-surface-tint) !important;
}

/* ─── Dark mode: backgrounds ─── */
.dark body,
.dark .dark\:bg-bg-primary,
.dark .dark\:bg-bg-secondary,
.dark .dark\:bg-bg-tertiary {
    background-color: var(--solid-dark-bg) !important;
    color: var(--solid-dark-text) !important;
}

.dark .dark\:bg-surface,
.dark .dark\:bg-surface\/95,
.dark .dark\:bg-surface\/90 {
    background-color: var(--solid-dark-surface) !important;
}

.dark .dark\:bg-primary\/10,
.dark .dark\:bg-primary\/15,
.dark .dark\:bg-primary\/20 {
    background-color: var(--solid-dark-surface-alt) !important;
}

/* ─── Dark mode: text ─── */
.dark .dark\:text-text-primary,
.dark .dark\:text-primary,
.dark .gradient-text,
.dark .gradient-text-teal {
    color: var(--solid-dark-text) !important;
}

.dark .dark\:text-text-secondary,
.dark .text-text-muted,
.dark .dark\:text-text-muted,
.dark .dark\:text-secondary {
    color: var(--solid-dark-text-secondary) !important;
}

/* ─── Dark mode: borders ─── */
.dark .dark\:border-border,
.dark .dark\:border-border\/80,
.dark .dark\:border-border\/60,
.dark .border-border-light-theme {
    border-color: var(--solid-dark-border) !important;
}

/* ─── Dark mode: primary elements ─── */
.dark .bg-primary,
.dark .dark\:bg-primary,
.dark .hover\:bg-primary-dark:hover,
.dark .dark\:hover\:bg-primary-dark:hover {
    background-color: #2E8A9C !important;
}

.dark .text-primary,
.dark .dark\:text-primary-light,
.dark .text-secondary {
    color: #5CC0D6 !important;
}

/* ============================================================
   Mobile nav: hamburger menu + brand-text typewriter intro
   ============================================================ */
/* Mobile nav covers phones in BOTH portrait and landscape — landscape phones
   are typically 700-900px wide, which exceeds Tailwind's `sm` (640px). We
   collapse the nav into the hamburger up through 1023px so a rotated phone
   still gets the compact menu instead of three wrapping rows of icons. */
@media (max-width: 1023px) {
    /* Items that collapse into the hamburger menu on mobile. */
    .nav-mobile-collapsible {
        display: none !important;
    }

    /* Brand text starts collapsed, plays a typewriter intro, then collapses again
       so the row fits within tight viewports. */
    /* Disabled per request — keep for possible re-enable later.
    .nav-brand-text {
        display: inline-block;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: middle;
        animation: navBrandTypewriter 2s ease forwards;
    }
    */

    /* Hide the contribution matrix on mobile — it doesn't resize cleanly and
       would otherwise force horizontal scroll on the host card. */
    .forum-contribution-wrap {
        display: none !important;
    }
    .profile-contribution-shell {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    /* Hamburger trigger and mobile menu panel are mobile-only. */
    .nav-hamburger-btn,
    #nav-mobile-menu {
        display: none !important;
    }
}

/* Disabled per request — keep for possible re-enable later.
@keyframes navBrandTypewriter {
    0%   { max-width: 0; }
    25%  { max-width: 0; }
    50%  { max-width: 14ch; }
    75%  { max-width: 14ch; }
    100% { max-width: 0; }
}
*/

#nav-mobile-menu .nav-mobile-link.hidden {
    display: none !important;
}
#nav-mobile-menu .nav-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.85rem;
    font-weight: 600;
    color: rgb(31, 41, 55);
    transition: background-color 0.18s ease;
}
.dark #nav-mobile-menu .nav-mobile-link {
    color: rgb(229, 231, 235);
}
#nav-mobile-menu .nav-mobile-link:hover {
    background: rgba(232, 165, 69, 0.14);
}
#nav-mobile-menu .nav-mobile-link[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
#nav-mobile-menu .nav-mobile-link.is-active {
    background: rgba(245, 158, 11, 0.18);
    color: rgb(217, 119, 6);
}
.dark #nav-mobile-menu .nav-mobile-link.is-active {
    color: rgb(253, 230, 138);
    background: rgba(245, 158, 11, 0.22);
}

#theme-toggle {
    display: none !important;
}
html.is-guest #theme-toggle {
    display: flex !important;
}