/* Geist Variable Font */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/Geist.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Theme Design Tokens & CSS Variables */
:root {
    --color-background: 247 249 251; /* #f7f9fb */
    --color-error: 186 26 26; /* #ba1a1a */
    --color-error-container: 255 218 214; /* #ffdad6 */
    --color-inverse-on-surface: 239 241 243; /* #eff1f3 */
    --color-inverse-primary: 183 196 255; /* #b7c4ff */
    --color-inverse-surface: 45 49 51; /* #2d3133 */
    --color-on-background: 25 28 30; /* #191c1e */
    --color-on-error: 255 255 255; /* #ffffff */
    --color-on-error-container: 147 0 10; /* #93000a */
    --color-on-primary: 255 255 255; /* #ffffff */
    --color-on-primary-container: 223 227 255; /* #dfe3ff */
    --color-on-primary-fixed: 0 20 82; /* #001452 */
    --color-on-primary-fixed-variant: 0 56 182; /* #0038b6 */
    --color-on-secondary: 255 255 255; /* #ffffff */
    --color-on-secondary-container: 92 100 122; /* #5c647a */
    --color-on-secondary-fixed: 19 27 46; /* #131b2e */
    --color-on-secondary-fixed-variant: 63 70 92; /* #3f465c */
    --color-on-surface: 25 28 30; /* #191c1e */
    --color-on-surface-variant: 67 70 86; /* #434656 */
    --color-on-tertiary: 255 255 255; /* #ffffff */
    --color-on-tertiary-container: 214 230 255; /* #d6e6ff */
    --color-on-tertiary-fixed: 11 28 48; /* #0b1c30 */
    --color-on-tertiary-fixed-variant: 56 72 93; /* #38485d */
    --color-outline: 115 118 136; /* #737688 */
    --color-outline-variant: 195 197 217; /* #c3c5d9 */
    --color-primary: 0 62 199; /* #003ec7 */
    --color-primary-container: 0 82 255; /* #0052ff */
    --color-primary-fixed: 221 225 255; /* #dde1ff */
    --color-primary-fixed-dim: 183 196 255; /* #b7c4ff */
    --color-secondary: 86 94 116; /* #565e74 */
    --color-secondary-container: 218 226 253; /* #dae2fd */
    --color-secondary-fixed: 218 226 253; /* #dae2fd */
    --color-secondary-fixed-dim: 190 198 224; /* #bec6e0 */
    --color-surface: 247 249 251; /* #f7f9fb */
    --color-surface-bright: 247 249 251; /* #f7f9fb */
    --color-surface-container: 236 238 240; /* #eceef0 */
    --color-surface-container-high: 230 232 234; /* #e6e8ea */
    --color-surface-container-highest: 224 227 229; /* #e0e3e5 */
    --color-surface-container-low: 242 244 246; /* #f2f4f6 */
    --color-surface-container-lowest: 255 255 255; /* #ffffff */
    --color-surface-dim: 216 218 220; /* #d8dadc */
    --color-surface-tint: 0 76 237; /* #004ced */
    --color-surface-variant: 224 227 229; /* #e0e3e5 */
    --color-tertiary: 63 79 101; /* #3f4f65 */
    --color-tertiary-container: 87 103 126; /* #57677e */
    --color-tertiary-fixed: 211 228 254; /* #d3e4fe */
    --color-tertiary-fixed-dim: 183 200 225; /* #b7c8e1 */
}

.dark {
    --color-background: 11 19 38; /* #0b1326 */
    --color-error: 255 180 171; /* #ffb4ab */
    --color-error-container: 147 0 10; /* #93000a */
    --color-inverse-on-surface: 40 48 68; /* #283044 */
    --color-inverse-primary: 0 76 237; /* #004ced */
    --color-inverse-surface: 218 226 253; /* #dae2fd */
    --color-on-background: 218 226 253; /* #dae2fd */
    --color-on-error: 105 0 5; /* #690005 */
    --color-on-error-container: 255 218 214; /* #ffdad6 */
    --color-on-primary: 0 38 130; /* #002682 */
    --color-on-primary-container: 223 227 255; /* #dfe3ff */
    --color-on-primary-fixed: 0 20 82; /* #001452 */
    --color-on-primary-fixed-variant: 0 56 182; /* #0038b6 */
    --color-on-secondary: 0 53 74; /* #00354a */
    --color-on-secondary-container: 0 55 77; /* #00374d */
    --color-on-secondary-fixed: 0 30 44; /* #001e2c */
    --color-on-secondary-fixed-variant: 0 76 105; /* #004c69 */
    --color-on-surface: 218 226 253; /* #dae2fd */
    --color-on-surface-variant: 195 197 217; /* #c3c5d9 */
    --color-on-tertiary: 97 19 0; /* #611300 */
    --color-on-tertiary-container: 255 221 213; /* #ffddd5 */
    --color-on-tertiary-fixed: 60 8 0; /* #3c0800 */
    --color-on-tertiary-fixed-variant: 137 30 0; /* #891e00 */
    --color-outline: 141 144 162; /* #8d90a2 */
    --color-outline-variant: 67 70 86; /* #434656 */
    --color-primary: 183 196 255; /* #b7c4ff */
    --color-primary-container: 0 82 255; /* #0052ff */
    --color-primary-fixed: 221 225 255; /* #dde1ff */
    --color-primary-fixed-dim: 183 196 255; /* #b7c4ff */
    --color-secondary: 123 208 255; /* #7bd0ff */
    --color-secondary-container: 0 166 224; /* #00a6e0 */
    --color-secondary-fixed: 196 231 255; /* #c4e7ff */
    --color-secondary-fixed-dim: 123 208 255; /* #7bd0ff */
    --color-surface: 11 19 38; /* #0b1326 */
    --color-surface-bright: 49 57 77; /* #31394d */
    --color-surface-container: 23 31 51; /* #171f33 */
    --color-surface-container-high: 34 42 61; /* #222a3d */
    --color-surface-container-highest: 45 52 73; /* #2d3449 */
    --color-surface-container-low: 19 27 46; /* #131b2e */
    --color-surface-container-lowest: 6 14 32; /* #060e20 */
    --color-surface-dim: 11 19 38; /* #0b1326 */
    --color-surface-tint: 183 196 255; /* #b7c4ff */
    --color-surface-variant: 45 52 73; /* #2d3449 */
    --color-tertiary: 255 180 161; /* #ffb4a1 */
    --color-tertiary-container: 191 48 3; /* #bf3003 */
    --color-tertiary-fixed: 255 219 210; /* #ffdbd2 */
    --color-tertiary-fixed-dim: 255 180 161; /* #ffb4a1 */
}

/* ── Header search bar: keep the themed background while typing ──
   Pin the typed text to Geist (font-body-md) so it matches the research-feed
   note summary styling. */
input#search-input {
    font-family: 'Geist', sans-serif;
}

/* Chromium/WebKit forces a white fill behind autofilled text fields via the
   :-webkit-autofill pseudo-class, overriding our dark surface token and making
   the search box turn white in dark mode (matching the light-mode background).
   Repaint it with an oversized inset box-shadow bound to the surface token —
   which tracks light/dark automatically — and pin the text/caret colour to the
   on-surface token so typed text stays legible in both modes. */
input#search-input:-webkit-autofill,
input#search-input:-webkit-autofill:hover,
input#search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: rgb(var(--color-on-surface)) !important;
    caret-color: rgb(var(--color-on-surface));
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface-container-low)) inset !important;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Accessibility / GPU safety net: honour reduced-motion so infinite animations
   don't continuously re-composite backdrop-filter layers. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Responsive Pass & Sidebar Icon Rail ── */
@media (max-width: 1023px) {
    body {
        overflow: auto !important;
    }
    main {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
        height: auto !important;
        overflow: visible !important;
    }
    header {
        left: 72px !important;
        width: calc(100% - 72px) !important;
    }
    aside#sidebar {
        width: 72px !important;
        transform: translate(0) !important; /* Always visible as rail */
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Hide all text inside sidebar */
    aside#sidebar .font-body-md, 
    aside#sidebar .font-label-md,
    aside#sidebar p, 
    aside#sidebar h1,
    aside#sidebar .px-3.text-\[11px\] {
        display: none !important;
    }
    aside#sidebar #btn-sidebar-close {
        display: none !important;
    }
    
    .hide-search-mobile {
        display: none !important;
    }
    
    aside#sidebar #region-dropdown-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
    aside#sidebar #region-dropdown-container a {
        justify-content: center;
    }
    aside#sidebar a, aside#sidebar button {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    
    /* Sidebar expansion as overlay */
    aside#sidebar.expanded {
        width: 280px !important;
        z-index: 100 !important;
    }
    aside#sidebar.expanded .font-body-md,
    aside#sidebar.expanded .font-label-md,
    aside#sidebar.expanded p,
    aside#sidebar.expanded h1,
    aside#sidebar.expanded .px-3.text-\[11px\] {
        display: inline !important;
    }
    aside#sidebar.expanded #btn-sidebar-close {
        display: block !important;
    }
    aside#sidebar.expanded a, aside#sidebar.expanded button {
        justify-content: flex-start !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    aside#sidebar.expanded #region-dropdown-container {
        margin-left: 24px !important;
        padding-left: 12px !important;
        border-left: 1px solid rgba(255,255,255,0.08) !important;
    }
    aside#sidebar.expanded #region-dropdown-container a {
        justify-content: flex-start !important;
    }
}