/* Shared interface styles. */

:root {
    /* Public-site tokens */
    --site-ink: #111827;
    --site-brand: #0D5F43;
    --site-bg: #ffffff;
    --site-surface: #f9fafb;
    --site-border: #e5e7eb;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }

sup {
    color: #FFB707 !important;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    position: relative;
    top: -0.35em;
}

/* ---- Public header ---- */
.site-shell #mainHeader .site-nav-icon {
    font-size: 1rem;
    line-height: 1;
}

.site-shell #mainHeader .site-nav-ai {
    font-size: 0.625rem;
}

/* Mega menu: open-state trigger, caret rotation, and entrance animation */
#mainHeader [data-mega-trigger][aria-expanded="true"] {
    background: #f9fafb;
    color: #030712;
}

#mainHeader [data-mega-trigger][aria-expanded="true"] .mega-caret {
    transform: rotate(180deg);
}

#mainHeader [data-mega-menu]:not(.hidden) {
    animation: mega-menu-in 0.18s ease-out both;
}

@keyframes mega-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #mainHeader [data-mega-menu]:not(.hidden) { animation: none; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ---- Transitions ---- */
input, select, textarea, button, a {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ---- Shared tooltips ---- */
[data-ui-tooltip] {
    cursor: pointer;
}

.app-ui-tooltip {
    position: fixed;
    z-index: 2147483000;
    max-width: min(18rem, calc(100vw - 1rem));
    border-radius: 0.5rem;
    background: #191817;
    color: #fff;
    padding: 0.45rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: left;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    white-space: normal;
}

.app-ui-tooltip.visible {
    opacity: 1;
}

/* ---- Rich text content ---- */
.prose ul {
    list-style: disc;
    margin: 0.75rem 0;
    padding-left: 1.35rem;
}

.prose ol {
    list-style: decimal;
    margin: 0.75rem 0;
    padding-left: 1.35rem;
}

.prose li {
    margin: 0.35rem 0;
    padding-left: 0.15rem;
}

.prose li::marker {
    color: #9ca3af;
}

.prose p {
    margin: 0.75rem 0;
}

.insights-body {
    color: #55595c;
    font-size: 1rem;
    line-height: 1.8;
}

.insights-body > * + * {
    margin-top: 1rem;
}

.insights-body h2,
.insights-body h3,
.insights-body h4 {
    color: #151515;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.75rem;
    margin-top: 2.25rem;
}

.insights-body h2 {
    font-size: clamp(1.65rem, 2vw, 2.15rem);
}

.insights-body h3 {
    font-size: clamp(1.35rem, 1.6vw, 1.65rem);
}

.insights-body h4 {
    font-size: 1.15rem;
}

.insights-body p {
    margin: 1rem 0;
}

.insights-body strong {
    color: #151515;
    font-weight: 700;
}

.insights-body em {
    font-style: italic;
}

.insights-body a {
    color: #5A1900;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.insights-body ul,
.insights-body ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.insights-body li {
    margin: 0.45rem 0;
    padding-left: 0.2rem;
}

.insights-body blockquote {
    border-left: 4px solid #FFB707;
    color: #374151;
    margin: 1.5rem 0;
    padding-left: 1rem;
}

/* ---- Dropdown ---- */
.dropdown-item {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
    color: #374151;
}
.dropdown-item:hover { background: #f3f4f6; }
.site-shell .dropdown-item { color: #1f2937; }
.site-shell .dropdown-item:hover { background: #f3f4f6; }
/* The sidebar user menu sits beside the nav links, so match their 14px size. */
#appUserMenu .dropdown-item { font-size: 0.875rem; }

/* Footer uses the uploaded brand mark on a dark surface. */
.footer-logo-mark {
    filter: grayscale(1) brightness(0) invert(1);
}

/* ---- Home typography ---- */
.site-shell .home-hero-title {
    line-height: 1.08 !important;
}

.site-shell .home-section-title {
    line-height: 1.16 !important;
}

.site-shell .home-module-title {
    line-height: 1.18 !important;
}

.site-shell .home-card-title,
.site-shell .home-topic-title {
    line-height: 1.22 !important;
}

/* ---- App sidebar (admin + logged-in user shell) ---- */
.admin-sidebar {
    width: 13rem;
    transition: width 0.2s ease;
    background: #f9f9f9;
    border-right: 1px solid #ececec;
}

@media (max-width: 1023px) {
    .admin-sidebar { width: 100vw; }
}

/* ---- Header action icons (theme switch + coming-soon placeholders) ---- */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 0.5rem;
    color: #6b7280;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.header-icon-btn i { font-size: 1.15rem; }
.header-icon-btn:hover { color: #111827; background: #f3f4f6; }
/* Placeholder icons read as inactive but stay hoverable so the tooltip fires. */
.header-icon-btn.is-soon { color: #d1d5db; cursor: pointer; }
.header-icon-btn.is-soon:hover { color: #d1d5db; background: transparent; }

/* Dark-mode switcher glyph swap. */
:root.dark .theme-icon-moon { display: none; }
:root.dark .theme-icon-sun { display: inline-block; }

/* =====================================================================
   DARK THEME
   The site is built with hardcoded Tailwind color utilities rather than
   dark: variants, so dark mode is retrofitted by remapping those utilities
   (and the custom components) under html.dark. Surfaces get darker as they
   nest; the ink grey scale inverts; brand accents (forest/gold) are kept.
   ===================================================================== */

/* ---- Surfaces ---- */
html.dark body,
html.dark body.site-shell { background-color: #0e1217; color: #e7eaef; }
html.dark .bg-white { background-color: #161b22; }
/* Selected segmented-control tab (checkout intent switcher) lifts off the dark
   surface so the active choice is distinguishable; base ink-900 (#111827) is
   otherwise nearly identical to the dark card background. */
html.dark [data-intent-tab].bg-ink-900 { background-color: #2c333f; }
html.dark .bg-white\/95 { background-color: rgba(22, 27, 34, 0.95); }
html.dark .bg-white\/90 { background-color: rgba(22, 27, 34, 0.9); }
html.dark .bg-ink-50 { background-color: #1b212a; }
html.dark .bg-ink-100 { background-color: #212834; }
html.dark .bg-ink-200 { background-color: #2a323e; }

/* ---- Text (ink scale inverts light↔dark) ---- */
html.dark .text-ink-950 { color: #eef1f5; }
html.dark .text-ink-900 { color: #e7eaef; }
html.dark .text-ink-800 { color: #dce1e8; }
html.dark .text-ink-700 { color: #cbd2db; }
html.dark .text-ink-600 { color: #aab3bf; }
html.dark .text-ink-500 { color: #99a2af; }
html.dark .text-ink-400 { color: #7d8795; }
html.dark .text-ink-300 { color: #6b7480; }

/* ---- Borders / dividers ---- */
html.dark .border-ink-100 { border-color: #232a34; }
html.dark .border-ink-200 { border-color: #2c333f; }
html.dark .border-ink-300 { border-color: #39414d; }
html.dark .divide-ink-100 > :not([hidden]) ~ :not([hidden]) { border-color: #232a34; }
html.dark .divide-ink-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2c333f; }

/* ---- Hover variants ---- */
html.dark .hover\:bg-ink-50:hover { background-color: #1b212a; }
html.dark .hover\:bg-ink-100:hover { background-color: #212834; }
html.dark .hover\:bg-forest-50:hover { background-color: #1b212a; }
html.dark .hover\:bg-red-50:hover { background-color: #3a1717; }
html.dark .hover\:text-ink-950:hover { color: #eef1f5; }
html.dark .hover\:text-ink-900:hover { color: #e7eaef; }
html.dark .hover\:text-ink-600:hover { color: #aab3bf; }

/* ---- Section bands: one shared dark tone (only bg-forest bands keep
   their green). Scoped to section/footer so cards keep their surface. ---- */
html.dark section.bg-white,
html.dark section.bg-ink-950,
html.dark footer.bg-white,
html.dark footer.bg-ink-950 { background-color: #0e1217; }

/* ---- Forest accent: lift text for contrast; tint bgs go neutral so
   section bands share the same dark tones as the rest of the page. ---- */
html.dark .bg-forest-50 { background-color: #0e1217; }
html.dark .bg-forest-100 { background-color: #1b212a; }
html.dark .text-forest-700 { color: #4FAF7A; }
html.dark .border-forest-200 { border-color: #204634; }
html.dark .text-forest { color: #4FAF7A; }
html.dark .hover\:text-ink-950.text-forest:hover { color: #6cc493; }

/* Accent CTAs (gold/brand) keep their dark ink text on the bright fill. */
html.dark .bg-gold .text-ink-950,
html.dark a.bg-gold, html.dark button.bg-gold,
html.dark .bg-brand-500 { color: #111827; }

/* ---- Elevation shadows read as depth against dark ---- */
html.dark .shadow-elevate { box-shadow: 0 6px 16px -4px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.5); }
html.dark .shadow-soft,
html.dark .shadow-card { box-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* ---- Header ---- */
html.dark #mainHeader { border-bottom-color: #232a34; }
html.dark .header-icon-btn { color: #99a2af; }
html.dark .header-icon-btn:hover { color: #e7eaef; background: #212834; }
html.dark .header-icon-btn.is-soon { color: #4b5563; }
html.dark .header-icon-btn.is-soon:hover { color: #4b5563; background: transparent; }

/* ---- Dropdown menus ---- */
html.dark .dropdown-item { color: #cbd2db; }
html.dark .dropdown-item:hover { background: #212834; color: #ffffff; }

/* ---- Forms ---- */
html.dark input[type='text'], html.dark input[type='email'], html.dark input[type='url'],
html.dark input[type='password'], html.dark input[type='number'], html.dark input[type='date'],
html.dark input[type='search'], html.dark input[type='tel'], html.dark textarea, html.dark select {
    background-color: #161b22;
    border-color: #2c333f;
    color: #e7eaef;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7480; }

/* ---- Slate scale (used by shared form partials on user pages) ---- */
html.dark .text-slate-500 { color: #99a2af; }
html.dark .text-slate-600 { color: #aab3bf; }
html.dark .text-slate-700 { color: #cbd2db; }
html.dark .text-slate-900 { color: #e7eaef; }
html.dark .border-slate-300 { border-color: #39414d; }

/* ---- Brand (gold) tints: darken fills, lift text ---- */
html.dark .bg-brand-50 { background-color: #2a2416; }
html.dark .bg-brand-100 { background-color: #332c1a; }
html.dark .text-brand-500 { color: #fbbb46; }
html.dark .text-brand-600 { color: #fcce73; }
html.dark .text-brand-700 { color: #fcce73; }
html.dark .text-brand-800 { color: #fde3ab; }
html.dark .text-brand-900 { color: #fef3d6; }

/* ---- Status tints (badges, alerts): dark fills, lifted text ---- */
html.dark .bg-emerald-50 { background-color: #10281d; }
html.dark .bg-emerald-100 { background-color: #143324; }
html.dark .text-emerald-700 { color: #4ade80; }
html.dark .text-emerald-800 { color: #6ee7a0; }
html.dark .text-emerald-900 { color: #a7f3c8; }
html.dark .bg-red-50 { background-color: #331616; }
html.dark .bg-red-100 { background-color: #421c1c; }
html.dark .border-red-200 { border-color: #5a2626; }
html.dark .text-red-400 { color: #f87171; }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .bg-amber-50 { background-color: #302411; }
html.dark .text-amber-700 { color: #fbbf24; }
html.dark .bg-blue-50 { background-color: #14243a; }
html.dark .text-blue-700 { color: #7ab8f5; }
html.dark .bg-cyan-50 { background-color: #0f2b33; }
html.dark .text-cyan-700 { color: #4dd0e1; }
html.dark .text-green-700 { color: #4ade80; }

/* ---- Research page components (inline styles in research-ai.html) ---- */
html.dark .research-composer:focus-within { border-color: #39414d; }
html.dark #research-submit.is-processing,
html.dark #research-submit.is-processing:hover { background: #2a323e; color: #e7eaef; }
html.dark .answer-action-btn { color: #99a2af; }
html.dark .answer-action-btn:hover { background: #212834; color: #e7eaef; }
html.dark .answer-action-btn:disabled:hover { background: transparent; color: #6b7480; }
html.dark .result-links-shortcut { color: #99a2af; }
html.dark .result-links-shortcut:focus-visible { background: #212834; color: #e7eaef; }
html.dark .result-links-shortcut:disabled,
html.dark .result-links-shortcut:disabled:hover { color: #6b7480; }
html.dark .export-menu,
html.dark .rewrite-menu,
html.dark .turn-more-menu { background: #161b22; border-color: #2c333f; }
html.dark .export-menu button,
html.dark .rewrite-menu button[data-rewrite-model] { color: #cbd2db; }
html.dark .export-menu button:hover,
html.dark .rewrite-menu button[data-rewrite-model]:hover { background: #212834; }
html.dark .turn-more-menu button.is-danger { color: #f87171; }
html.dark .turn-more-menu button.is-danger:hover { background: #331616; }
html.dark .mode-option.is-locked .mode-primary-icon,
html.dark .rewrite-menu button.is-locked .model-primary-icon { color: #6b7480; }
html.dark .mode-option.is-locked:hover .mode-primary-icon { color: #cbd2db; }

/* ---- Scrollbars: dark track/thumb (page + overflow menus) ---- */
html.dark { scrollbar-color: #39414d #10151c; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #10151c; }
html.dark ::-webkit-scrollbar-thumb { background: #39414d; border-radius: 6px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a5563; }

/* Flag chips carry a hardcoded light border + white fallback fill. */
html.dark .country-flag-chip { border-color: #39414d; background-color: #161b22; }

/* ---- Institutions search (hardcoded #e5e7eb !important borders above) ---- */
html.dark #countries-search-shell,
html.dark #countries-search-shell:focus-within,
html.dark #countries-country-menu,
html.dark #countries-autocomplete-results { border-color: #2c333f !important; }
html.dark #countries-country-wrap { border-left-color: #2c333f !important; }
html.dark .institutions-attached-menu {
    border-color: #2c333f !important;
    border-top-color: #2c333f !important;
}

/* ---- API error card ---- */
html.dark .app-error-card { background: #2a1518; border-color: #5f2430; color: #fca5a5; }
html.dark .app-error-card-icon { color: #f87171; }
html.dark .app-error-card-title { color: #fca5a5; }
html.dark .app-error-card-message { color: #e8a0a0; }

/* ---- Loading UI (research/metrics fragments) ---- */
html.dark .research-loading-icon { border-color: #2c333f; border-top-color: #4FAF7A; }
html.dark .research-loading-msg { color: #e7eaef; }
html.dark .research-loading-sub { color: #99a2af; }
html.dark .research-loading-progress { background: #2c333f; }

/* ---- Highcharts dark skin ----
   Highcharts writes colors as inline SVG styles; CSS !important outranks
   them, so this skin covers every chart (metrics, profiles, user data)
   and recolors instantly when the theme toggles. Series fills keep their
   brand palette; only text, grids, and surfaces remap. */
html.dark .highcharts-background { fill: transparent; }
html.dark .highcharts-title,
html.dark .highcharts-axis-title { fill: #e7eaef !important; }
html.dark .highcharts-subtitle { fill: #99a2af !important; }
html.dark .highcharts-axis-labels text { fill: #aab3bf !important; }
html.dark .highcharts-legend-item text { fill: #cbd2db !important; }
html.dark .highcharts-legend-item:hover text { fill: #ffffff !important; }
/* Data labels: plain white, no text-outline halo (unreadable on dark). */
html.dark .highcharts-data-label text,
html.dark .highcharts-data-label text tspan {
    fill: #ffffff !important;
    stroke: none !important;
    stroke-width: 0 !important;
}
html.dark .highcharts-grid-line { stroke: #232a34; }
html.dark .highcharts-axis-line,
html.dark .highcharts-tick { stroke: #39414d; }
html.dark .highcharts-tooltip-box { fill: #161b22; stroke: #2c333f; }
html.dark .highcharts-tooltip text { fill: #e7eaef !important; }
html.dark .highcharts-pie-series .highcharts-point { stroke: #161b22; }
html.dark .highcharts-treemap-series .highcharts-point { stroke: #161b22; }
/* Column/bar points ship a 1px white borderColor; match the card surface so
   bars don't get a white outline (stacked segments keep a subtle seam). */
html.dark .highcharts-column-series .highcharts-point,
html.dark .highcharts-bar-series .highcharts-point { stroke: #161b22; }

.admin-sidebar .sidebar-heading {
    color: #9ca3af;
}

/* The square mark stands in for the wordmark on the collapsed rail. */
.sidebar-square-logo { display: none; }

@media (min-width: 1024px) {
    .admin-content {
        padding-left: 13rem;
        transition: padding-left 0.2s ease;
    }

    body.sidebar-collapsed .admin-sidebar { width: 4.5rem; }
    body.sidebar-collapsed .admin-content { padding-left: 4.5rem; }
    body.sidebar-collapsed .sidebar-label { display: none; }
    body.sidebar-collapsed .sidebar-square-logo { display: inline-flex; }
    body.sidebar-collapsed .admin-nav-link,
    body.sidebar-collapsed .sidebar-user-btn,
    body.sidebar-collapsed .sidebar-head { justify-content: center; }
    body.sidebar-collapsed .sidebar-heading { display: none; }

    /* On the rail the mark doubles as the expand control, so hovering it trades
       the letter for the panel icon. */
    body.sidebar-collapsed .sidebar-logo-link:hover .sidebar-mark,
    body.sidebar-collapsed .sidebar-logo-link:focus-visible .sidebar-mark {
        visibility: hidden;
    }
    body.sidebar-collapsed .sidebar-logo-link:hover .sidebar-mark-icon,
    body.sidebar-collapsed .sidebar-logo-link:focus-visible .sidebar-mark-icon {
        display: flex;
    }
}

/* ---- App sidebar navigation ---- */
.admin-sidebar .admin-nav-link {
    margin-bottom: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.5rem;
    padding: 0.4375rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #3f3f46;
    position: relative;
}
.admin-sidebar .admin-nav-link:hover,
.admin-sidebar .admin-nav-link:focus-visible {
    background: #efefef;
    color: #111827;
}
.admin-sidebar .admin-nav-link.active,
.admin-sidebar .admin-nav-link.active:hover,
.admin-sidebar .admin-nav-link.active:focus-visible {
    background: #ececec;
    color: #111827;
    font-weight: 600;
}
.admin-sidebar .admin-nav-link i { font-size: 1.25rem; }

/* Bottom identity row: same rhythm as a nav link, but taller for two lines. */
.admin-sidebar .sidebar-user-btn {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.5rem;
    padding: 0.4375rem 0.5rem;
}
.admin-sidebar .sidebar-user-btn:hover,
.admin-sidebar .sidebar-user-btn[aria-expanded="true"] {
    background: #ececec;
}

/* App-mode body: white content canvas. */
body.app-mode { background-color: #fff; }

/* With the top bar gone, the content would otherwise start hard against the
   viewport edge, so the shell supplies the gutter the header used to imply. */
@media (min-width: 1024px) {
    body.app-mode .admin-content > main {
        padding-top: 1.25rem;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/* Research reads wider than its stock 56rem column (logged out and in alike),
   but stops short of the full max-w-site width the other app pages use. */
@media (min-width: 1024px) {
    #research-shell {
        max-width: 62rem;
    }
}

/* ---- Forms ---- */
[type='text']:focus, [type='email']:focus, [type='url']:focus,
[type='password']:focus, [type='number']:focus, [type='date']:focus,
[type='tel']:focus, textarea:focus, select:focus {
    --tw-ring-color: #0D5F43;
    border-color: #0D5F43;
}

.site-shell [type='text']:focus,
.site-shell [type='email']:focus,
.site-shell [type='url']:focus,
.site-shell [type='password']:focus,
.site-shell [type='number']:focus,
.site-shell [type='date']:focus,
.site-shell [type='tel']:focus,
.site-shell textarea:focus,
.site-shell select:focus {
    --tw-ring-color: var(--site-brand);
    border-color: var(--site-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 95, 67, 0.14);
}

/* ---- Password / OTP ---- */
.password-requirements li { font-size: 0.875rem; color: #6b7280; }
.password-requirements li.valid { color: #059669; }
.otp-single {
    letter-spacing: 0.45em;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
}

/* ---- Step wizard ---- */
.step { display: none; }
.step.active { display: block; }

/* ---- Utilities ---- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Global custom selects ---- */
.app-native-select {
    display: none !important;
}
.app-select-wrapper {
    width: 100%;
}
.app-select-trigger {
    display: inline-flex;
    min-height: 2.5rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.5rem 0.75rem;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.site-shell .app-select-trigger {
    border-color: #e5e7eb;
    color: #27251e;
}
.app-select-trigger:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.app-select-trigger:disabled,
.app-select-trigger[aria-disabled="true"] {
    cursor: not-allowed;
    background: #f3f4f6;
    color: #9ca3af;
}
.app-select-trigger:focus,
.app-select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: #0D5F43;
    box-shadow: 0 0 0 3px rgba(13, 95, 67, 0.14);
}
.app-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-select-icon {
    flex: none;
    color: #6b7280;
    font-size: 1rem;
}
.app-select-menu {
    position: fixed;
    z-index: 10000;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.25rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
}
.app-select-option {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    text-align: left;
}
.app-select-option:hover,
.app-select-option:focus {
    background: #f3f4f6;
    color: #374151;
    outline: none;
}
.app-select-option.active {
    background: #f3f4f6;
    color: #111827;
    font-weight: 600;
}
.app-select-option:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
/* Flag chips for selects marked data-select-flags. Declared after the
   flag-icons stylesheet so the fixed chip size wins over .fi's em sizing. */
.app-select-value {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}
.app-select-flag {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 0.875rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 2px;
    background-color: #fff;
    background-position: center;
    background-size: cover;
}
.app-select-option--flag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.app-select-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Bright red, matching border-red-500, so an invalid custom select reads the
   same as an invalid input. The old value was #5a1900, which is near-black. */
.app-select-trigger.app-field-invalid,
.site-shell .app-select-trigger.app-field-invalid {
    border-color: #ef4444;
}

/* ---- Profile account forms ---- */
[data-profile-panel] input:not([type="hidden"]):not(.sr-only),
[data-profile-panel] select,
[data-profile-panel] .app-select-trigger {
    height: 2.75rem;
    min-height: 2.75rem;
}
/* Match the sibling text inputs, which are text-sm. */
[data-profile-panel] .app-select-trigger {
    font-size: 0.875rem;
}
/* Native date inputs. The forms above force a 2.75rem height on every input,
   which is taller than a date field's natural content box, so the value has to
   be centred explicitly. The calendar button also needs room or it crowds the
   year. Chrome lays the control out as a flex row internally; the other
   browsers ignore these and render the field as they always have. */
input[type="date"] {
    align-items: center;
}
input[type="date"]::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.25rem;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 0.5rem;
    cursor: pointer;
    opacity: 0.55;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
[data-profile-panel] textarea {
    min-height: 8rem;
}
[data-profile-panel] input:not([type="hidden"]):not(.sr-only):focus,
[data-profile-panel] select:focus,
[data-profile-panel] textarea:focus,
[data-profile-panel] .app-select-trigger:focus,
[data-profile-panel] .app-select-trigger[aria-expanded="true"] {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    border-color: var(--site-brand) !important;
    box-shadow: none !important;
    outline: none;
}
/* An invalid field stays red even while focused. The focus rule above sets the
   brand colour with !important, which would otherwise wipe the error state the
   moment the user clicks back into the field they need to fix. */
[data-profile-panel] input.border-red-500,
[data-profile-panel] input.border-red-500:focus,
[data-profile-panel] textarea.border-red-500,
[data-profile-panel] textarea.border-red-500:focus,
[data-profile-panel] .app-select-trigger.app-field-invalid,
[data-profile-panel] .app-select-trigger.app-field-invalid:focus,
[data-profile-panel] .app-select-trigger.app-field-invalid[aria-expanded="true"] {
    border-color: #ef4444 !important;
}
[data-inline-editor] > .app-select-wrapper {
    min-width: 0;
}
[data-inline-editor] > div > button,
#profile-email-submit,
#profile-email-cancel,
#profile-email-verify {
    height: 2.75rem;
    min-height: 2.75rem;
}
.profile-editor-primary-button,
.profile-editor-secondary-button,
.profile-editor-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.profile-editor-primary-button {
    padding: 0 1rem;
    background: #111827;
    color: #fff;
}
.profile-editor-primary-button:hover { background: #1f2937; }
.profile-editor-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
.profile-editor-secondary-button {
    padding: 0 1rem;
    border: 1px solid #d9e1e8;
    background: #fff;
    color: #1f2937;
}
.profile-editor-secondary-button:hover {
    border-color: #b7c4d1;
    color: #111827;
}
.profile-editor-icon-button {
    width: 2.75rem;
    border: 1px solid #d9e1e8;
    background: #fff;
    color: #64748b;
}
.profile-editor-icon-button:hover {
    border-color: #b7c4d1;
    color: #111827;
}
.profile-evidence-dropzone {
    border: 1px dashed #cfd8e3;
    border-radius: 0.75rem;
    background: #fff;
    padding: 1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.profile-evidence-dropzone:hover,
.profile-evidence-dropzone.is-dragging {
    border-color: var(--site-brand);
    background: #f8fbfb;
}
.profile-evidence-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: #f3f6f8;
    color: #526273;
    font-size: 1.25rem;
}
.profile-evidence-count {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    border-radius: 999px;
    background: #f3f6f8;
    padding: 0 0.75rem;
    color: #526273;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.profile-evidence-file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #edf1f4;
    border-radius: 0.625rem;
    background: #f8fafb;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
}
.profile-evidence-file-icon {
    color: #64748b;
    font-size: 1rem;
}
.profile-evidence-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    color: #94a3b8;
}
.profile-evidence-file-remove:hover {
    color: #b91c1c;
}
.profile-editor-primary-button:focus-visible,
.profile-editor-secondary-button:focus-visible,
.profile-editor-icon-button:focus-visible,
.profile-evidence-file-remove:focus-visible {
    outline: none;
    border-color: var(--site-brand);
}

/* ---- Custom dropdown (settings) ---- */
.cs-dropdown {
    position: relative;
}
.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    color: #111827;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-trigger:hover { border-color: #9ca3af; }
.cs-trigger:focus, .cs-trigger[aria-expanded="true"] {
    outline: none;
    border-color: #0D5F43;
    box-shadow: 0 0 0 3px rgba(13, 95, 67, 0.14);
}
.cs-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 50;
    overflow-y: auto;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    padding: 0.25rem;
}
.cs-option {
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
    color: #374151;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.cs-option:hover { background: #f3f4f6; }
.cs-option.active { background: #f3f4f6; color: #111827; font-weight: 500; }

/* ---- Segmented controls (settings) ---- */
.tier-segmented-control {
    gap: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    padding: 0.25rem;
}
.tier-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: #6b7280;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tier-segment:hover { color: #374151; background: #f9fafb; }
.tier-segment:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 95, 67, 0.14);
}
.tier-segment[aria-pressed="true"] {
    background: #fff;
    border-color: #d1d5db;
    color: #111827;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

/* ---- Search year range slider ---- */
.year-range-input {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}
.year-range-input:focus {
    outline: none;
}
.year-range-input::-webkit-slider-runnable-track {
    height: 2.25rem;
    background: transparent;
}
.year-range-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.5625rem;
    border: 2px solid #0D5F43;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
}
.year-range-input::-moz-range-track {
    height: 2.25rem;
    background: transparent;
}
.year-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #0D5F43;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
}

/* ---- Shared frontend API error state ---- */
.app-error-card {
    display: flex;
    min-height: 15.75rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #fecaca;
    border-radius: 0.5rem;
    background: #fff1f2;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: #dc2626;
}
.app-error-card.hidden {
    display: none;
}
.app-error-card-icon {
    margin-bottom: 1.35rem;
    color: #fb7185;
    font-size: 2rem;
    line-height: 1;
}
.app-error-card-title {
    margin: 0;
    color: #991b1b;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}
.app-error-card-message {
    margin: 0.45rem 0 0;
    color: #dc2626;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6rem;
}
.app-error-card-details {
    margin: 0.85rem 0 0;
    color: #dc2626;
    font-size: 1rem;
    line-height: 1.6rem;
}
.app-error-card-details-label {
    color: #b91c1c;
    font-weight: 700;
}
.app-error-card-details-list {
    margin: 0.35rem 0 0;
    display: inline-block;
    list-style: disc;
    padding-left: 1.25rem;
    text-align: left;
}
.app-error-card-details-list li + li {
    margin-top: 0.25rem;
}
.app-error-card-action {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.5rem 1rem;
    color: #991b1b;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
}
.app-error-card-action:hover {
    background: #fff7f7;
}
.app-inline-error {
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fff1f2;
    padding: 0.75rem 1rem;
    color: #b91c1c;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
}
.app-inline-error.hidden {
    display: none;
}
.app-inline-error .font-semibold {
    color: #991b1b;
}
.app-inline-error .app-error-card-details,
.app-inline-error .app-error-card-details-list {
    font-size: inherit;
    line-height: inherit;
}

/* ---- Research loading animation ---- */
.research-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
}
.research-loading-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: #0D5F43;
    border-radius: 50%;
    animation: research-spin 0.8s linear infinite;
}
@keyframes research-spin {
    to { transform: rotate(360deg); }
}
.research-loading-msg {
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    min-height: 1.5rem;
}
.research-loading-sub {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280;
    min-height: 1.25rem;
}
.research-msg-fade-in {
    animation: research-fade-in 0.4s ease forwards;
}
.research-msg-fade-out {
    animation: research-fade-out 0.3s ease forwards;
}
@keyframes research-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes research-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}
.research-loading-progress {
    margin-top: 1.25rem;
    width: 12rem;
    height: 3px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.research-loading-progress-bar {
    height: 100%;
    background: #0D5F43;
    border-radius: 999px;
    animation: research-progress 45s ease-out forwards;
}
@keyframes research-progress {
    0% { width: 0; }
    20% { width: 30%; }
    50% { width: 55%; }
    80% { width: 75%; }
    100% { width: 90%; }
}

/* ---- Scrollable tabs (mobile) ---- */
.tabs-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
}
.tabs-scroll > * { flex-shrink: 0; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll.scrolled-end {
    mask-image: none;
    -webkit-mask-image: none;
}

/* ---- Mobile profile header: enlarged avatar + single-line meta ---- */
@media (max-width: 639px) {
    /* Icons are re-added by JS (updateHeaderLine/setHeaderLine), so hide them
       here rather than with a utility class the JS would overwrite. */
    .profile-subline i { display: none !important; }
}

/* ---- Per-field translation flags ---- */
.arc-field-flags {
    display: inline-flex;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    align-items: center;
}
.arc-field-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    border: 1px solid #cbd5e1;
    transition: border-color 0.2s, opacity 0.2s, filter 0.2s;
    outline: none;
}
.arc-field-flag:focus-visible {
    border-color: #1d2327;
    box-shadow: 0 0 0 2px rgba(13, 95, 67, 0.18);
}
.arc-field-flag .fi {
    display: block;
}
.arc-field-flag-disabled {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
    filter: grayscale(1);
}
.arc-field-flag-active {
    border-color: #1d2327;
}
.arc-field-flags-spinner {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #3b5998;
    font-size: 14px;
}
.ar-translating {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ar-translated {
    animation: ar-fade-in 0.3s ease;
}
@keyframes ar-fade-in {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* ---- Neutral icon actions ---- */
button.inline-edit-trigger,
#profile-email-edit,
#profile-orcid-copy,
.profile-identifier-copy {
    background-color: transparent !important;
    color: #d1d5db;
}
button.inline-edit-trigger:hover,
button.inline-edit-trigger:focus-visible,
#profile-email-edit:hover,
#profile-email-edit:focus-visible,
#profile-orcid-copy:hover,
#profile-orcid-copy:focus-visible,
.profile-identifier-copy:hover,
.profile-identifier-copy:focus-visible {
    background-color: transparent !important;
    color: #374151;
}
button.inline-edit-trigger:active,
#profile-email-edit:active,
#profile-orcid-copy:active,
.profile-identifier-copy:active {
    background-color: transparent !important;
    color: #111827;
}
#profile-orcid-copy.text-emerald-700,
.profile-identifier-copy.text-emerald-700 {
    color: #047857;
}
#copy-orcid-redirect {
    background-color: #fff !important;
}
#copy-orcid-redirect:hover,
#copy-orcid-redirect:focus-visible,
#copy-orcid-redirect:active {
    background-color: #fff !important;
}

/* ---- Print ---- */
@media print {
    /* The site header is a <header>, not a <nav>, so it needs naming here or
       it prints above the page content. */
    #mainHeader,
    nav,
    footer,
    .no-print { display: none !important; }
    body { background: white !important; }
    /* Without this the full-viewport wrapper trails a blank second page once
       the header and footer are gone. */
    .min-h-screen { min-height: 0 !important; }
    /* A printable document is the paper itself: the screen card's frame would
       otherwise be inked onto it. */
    .print-document {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* ---- Redesigned Marquee & Elements ---- */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Form controls use their existing border state without an outer focus ring or
   shadow. This also clears Tailwind's generated ring variables. */
:where(input, select, textarea, button):focus,
:where(input, select, textarea, button):focus-visible {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
    outline: none !important;
    outline-offset: 0;
}

.app-select-trigger[aria-expanded="true"],
.cs-trigger[aria-expanded="true"] {
    box-shadow: none !important;
}

input[type='search'].border-ink-200:focus,
input[type='search'].border-ink-200:focus-visible,
#search-input:focus,
#search-input:focus-visible {
    border-color: #0D5F43 !important;
}

input[type='search'].border-slate-300:focus,
input[type='search'].border-slate-300:focus-visible {
    border-color: #0D5F43 !important;
}

input[type='search'].border-0:focus,
input[type='search'].border-0:focus-visible {
    border-color: transparent !important;
}

.app-avatar-fallback {
    color: #fff !important;
    font-weight: 500;
    line-height: 1;
    user-select: none;
}

.country-flag-chip {
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 2px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    line-height: 1;
}

.app-autocomplete-input.app-autocomplete-open {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#countries-search-shell,
#countries-search-shell:focus-within,
#countries-country-menu,
#countries-autocomplete-results {
    border-color: #e5e7eb !important;
}

#countries-country-wrap {
    border-left-color: #e5e7eb !important;
}

.countries-search-attached {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#countries-country-trigger {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.countries-search-attached #countries-country-trigger {
    border-bottom-right-radius: 0 !important;
}

.app-autocomplete-menu {
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.institutions-attached-menu {
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    border-color: #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.institutions-country-menu {
    top: 100% !important;
    right: -1px !important;
}

.app-autocomplete-item {
    border: 0 !important;
    padding: 0.625rem 1rem !important;
    background: #fff;
}

.app-autocomplete-item:hover,
.app-autocomplete-item:focus,
.app-autocomplete-item:focus-visible {
    background: #f8fafc;
    outline: none;
}

.app-autocomplete-heading {
    background: #f9fafb;
    color: #6b7280;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-autocomplete-empty {
    padding: 0.5rem 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* ---- Dark mode: search autocomplete + research composer selectors ---- */
html.dark .app-autocomplete-item { background: #161b22; }
html.dark .app-autocomplete-item:hover,
html.dark .app-autocomplete-item:focus,
html.dark .app-autocomplete-item:focus-visible { background: #1b212a; }
html.dark .app-autocomplete-heading { background: #10151c; color: #99a2af; }
html.dark .app-autocomplete-empty { color: #99a2af; }

html.dark .bg-ink-50\/50 { background-color: rgba(42, 51, 65, 0.7); }
html.dark .model-option.is-locked .model-name,
html.dark .model-option.is-locked .model-primary-icon,
html.dark .mode-option.is-locked .mode-name,
html.dark .mode-option.is-locked .mode-primary-icon { color: #6f7885; }
html.dark .model-option.is-locked:hover .model-name,
html.dark .model-option.is-locked:hover .model-primary-icon,
html.dark .mode-option.is-locked:hover .mode-name,
html.dark .mode-option.is-locked:hover .mode-primary-icon { color: #e7eaef; }

/* ---- Dark mode: research thread question bubble + citation chips
   (hardcoded light arbitrary values in the page templates/JS). ---- */
html.dark .bg-\[\#f5f5f5\] { background-color: #212834; }
html.dark .text-\[\#27251e\] { color: #e7eaef; }
html.dark button[data-citation-indexes] { background-color: #212834; }
html.dark button[data-citation-indexes]:hover,
html.dark button[data-citation-indexes]:focus { background-color: #2a3341; }

/* Dark mode: footer sub-bar divider needs a visible border. */
html.dark footer .border-white\/10 { border-color: #2c333f; }

/* Dark mode: composer mode/model triggers share one hover, a step lighter
   than their resting fill (the light-mode remaps would go darker). */
html.dark #mode-menu-trigger:hover,
html.dark #model-menu-trigger:hover { background-color: #333d4c; color: #e7eaef; }

/* Dark mode: responsive utilities used by the publications filter panel
   (the base remaps above only cover the non-responsive classes). */
@media (min-width: 768px) {
    html.dark .md\:bg-white { background-color: #161b22; }
    html.dark .md\:border-ink-200 { border-color: #2c333f; }
}

/* ---- Dark mode: Insights (list + detail use their own hardcoded palette) ---- */
html.dark { color-scheme: dark; }
html.dark .text-\[\#151515\] { color: #eef1f5; }
html.dark .text-\[\#374151\] { color: #cbd2db; }
html.dark .text-\[\#55595c\] { color: #aab3bf; }
html.dark .text-\[\#6b7280\] { color: #99a2af; }
html.dark .text-\[\#8a8f94\] { color: #7d8795; }
html.dark .placeholder\:text-\[\#8a8f94\]::placeholder { color: #6f7885; }
html.dark .border-\[\#151515\] { border-color: #39414d; }
html.dark .border-\[\#E6E6E6\] { border-color: #2c333f; }
html.dark section.bg-\[\#151515\] { background-color: #0e1217; }
html.dark .bg-\[\#151515\] { background-color: #2a3341; }
html.dark .hover\:bg-\[\#f7f7f7\]:hover { background-color: #1b212a; }
html.dark .group:hover .group-hover\:bg-\[\#151515\] { background-color: #2a3341; }
html.dark .text-rust { color: #e2793f; }
html.dark .hover\:text-rust:hover { color: #e2793f; }
html.dark .group:hover .group-hover\:text-rust { color: #e2793f; }
html.dark .hover\:bg-rust:hover { background-color: #7a3010; }
html.dark .insights-body { color: #b3bcc7; }
html.dark .insights-body h2,
html.dark .insights-body h3,
html.dark .insights-body h4,
html.dark .insights-body strong { color: #eef1f5; }
html.dark .insights-body a { color: #e2793f; }
html.dark .insights-body blockquote { color: #aab3bf; }

/* Header icon/user pill: ink-50 in light mode, but keep the lighter
   raised tone in dark (the bg-ink-50 remap would be too dark). */
html.dark .header-pill { background-color: #212834; }

/* ---- Dark mode: ring utilities (the border remaps don't cover
   --tw-ring-color, so light rings glowed on dark surfaces). ---- */
html.dark .ring-ink-200 { --tw-ring-color: #39414d; }
html.dark .ring-ink-100 { --tw-ring-color: #2c333f; }
html.dark .ring-emerald-200 { --tw-ring-color: #1e4d38; }
html.dark .ring-emerald-100 { --tw-ring-color: #17402e; }
html.dark .ring-amber-200 { --tw-ring-color: #5c4514; }
html.dark .ring-amber-100 { --tw-ring-color: #4a380f; }
html.dark .ring-red-100 { --tw-ring-color: #4d2020; }
html.dark .ring-brand-200 { --tw-ring-color: #5c4a14; }
html.dark .ring-black\/5 { --tw-ring-color: rgba(255, 255, 255, 0.06); }

/* Dark mode: research activity trace "done" icons — the raw brand green
   is too dark here; use the lifted forest accent like other dark accents. */
html.dark .trace-step-indicator.is-done { color: #4FAF7A; }
html.dark .trace-child-icon.is-done { color: #4FAF7A !important; }

/* ---- Dark mode: classification/profile badge palettes (indigo, green,
   rose tints and the colored rings that made badges glow on dark). ---- */
html.dark .bg-indigo-50 { background-color: #1f2245; }
html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .bg-green-50 { background-color: #12301d; }
html.dark .bg-rose-50 { background-color: #3a1622; }
html.dark .text-rose-700 { color: #fda4af; }
html.dark .ring-blue-200 { --tw-ring-color: #1e3a5f; }
html.dark .ring-cyan-200 { --tw-ring-color: #164e5f; }
html.dark .ring-indigo-200 { --tw-ring-color: #333a75; }
html.dark .ring-green-200 { --tw-ring-color: #1d4d2e; }
html.dark .ring-rose-200 { --tw-ring-color: #5c2337; }

/* ---- Dark mode: research answer body internals (headings, tables,
   numbered points), share panel, sources offcanvas, citation dots. ---- */
html.dark .research-answer-body .ai-title,
html.dark .research-answer-body h2:not(.ai-title),
html.dark .research-answer-body h3,
html.dark .research-answer-body .research-numbered-marker,
html.dark .research-answer-body .research-numbered-title { color: #e7eaef; }
html.dark .turn-more-menu [data-menu-separator] { border-top-color: #232a34; }
html.dark .share-panel { border-bottom-color: #232a34; }
html.dark .share-panel button[data-share-action] { background: #161b22; border-color: #2c333f; color: #cbd2db; }
html.dark .share-panel button[data-share-action]:hover { background: #212834; }
html.dark .sources-offcanvas { border-left-color: #2c333f; }
html.dark .research-table-wrap { background: #161b22; border-color: #2c333f; }
html.dark .research-answer-body td { border-color: #2c333f; }
html.dark .research-answer-body th,
html.dark .research-answer-body thead th { background: #1b212a; color: #e7eaef; }
html.dark .ring-white { --tw-ring-color: #161b22; }

/* ---- Footer copyright bar: single line; on narrow screens it scrolls
   horizontally (drag/swipe) with faded edges instead of wrapping. ---- */
.footer-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}
.footer-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 639px) {
    .footer-scroll {
        cursor: grab;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    }
    .footer-scroll.is-dragging { cursor: grabbing; }
}

/* ---- Insights search shell (institutions-style) ---- */
html.dark #insights-search-shell,
html.dark #insights-search-shell:focus-within,
html.dark #insightsAutocomplete { border-color: #2c333f !important; }

/* ---- Insights detail hero: subtle dot pattern to set it apart ---- */
section.insights-hero {
    background-color: #151515;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
    background-size: 22px 22px;
}
html.dark section.insights-hero {
    background-color: #131924;
    background-image: radial-gradient(rgba(231, 234, 239, 0.06) 1px, transparent 1.5px);
    border-bottom-color: #2c333f;
}

/* ---- Admin dark theme: shell + utility palettes ----
   Admin templates use gray/slate/app utilities extensively, so the public
   ink-only remaps are not sufficient. Keep this scoped to app-mode. */
html.dark body.app-mode { background-color: #0e1217; color: #e7eaef; }
html.dark body.app-mode .admin-sidebar { background: #161b22; border-right-color: #2c333f; }
html.dark body.app-mode .sidebar-head { border-bottom-color: #232a34; }
html.dark body.app-mode .admin-sidebar .sidebar-heading { color: #7d8795; }
html.dark body.app-mode .admin-sidebar .admin-nav-link { color: #aab3bf; }
html.dark body.app-mode .admin-sidebar .admin-nav-link:hover,
html.dark body.app-mode .admin-sidebar .admin-nav-link:focus-visible { background: #212834; color: #eef1f5; }
html.dark body.app-mode .admin-sidebar .admin-nav-link.active,
html.dark body.app-mode .admin-sidebar .admin-nav-link.active:hover,
html.dark body.app-mode .admin-sidebar .admin-nav-link.active:focus-visible { background: #2a323e; color: #ffffff; }
html.dark body.app-mode .admin-sidebar .sidebar-user-btn:hover,
html.dark body.app-mode .admin-sidebar .sidebar-user-btn[aria-expanded='true'] { background: #2a323e; }
html.dark body.app-mode #sidebarOverlay { background: rgba(3, 7, 18, 0.72); }
html.dark body.app-mode #mainHeader { background-color: #161b22; border-bottom-color: #2c333f; }
html.dark body.app-mode .admin-content { background-color: #0e1217; }

/* Gray scale used by admin tables, cards, and settings panels. */
html.dark body.app-mode .bg-gray-50 { background-color: #161b22; }
html.dark body.app-mode .bg-gray-100 { background-color: #1b212a; }
html.dark body.app-mode .bg-gray-200 { background-color: #212834; }
html.dark body.app-mode .bg-gray-300 { background-color: #2c333f; }
html.dark body.app-mode .bg-gray-900 { background-color: #0e1217; }
html.dark body.app-mode .bg-gray-950\/50 { background-color: rgba(3, 7, 18, 0.72); }
html.dark body.app-mode .text-gray-300 { color: #7d8795; }
html.dark body.app-mode .text-gray-400 { color: #99a2af; }
html.dark body.app-mode .text-gray-500 { color: #aab3bf; }
html.dark body.app-mode .text-gray-600 { color: #b8c1cc; }
html.dark body.app-mode .text-gray-700 { color: #cbd2db; }
html.dark body.app-mode .text-gray-800 { color: #dce1e8; }
html.dark body.app-mode .text-gray-900 { color: #e7eaef; }
html.dark body.app-mode .border-gray-100 { border-color: #232a34; }
html.dark body.app-mode .border-gray-200 { border-color: #2c333f; }
html.dark body.app-mode .border-gray-300 { border-color: #39414d; }
html.dark body.app-mode .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark body.app-mode .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2c333f; }

/* Slate scale used by dashboard and list views. */
html.dark body.app-mode .bg-slate-50,
html.dark body.app-mode .bg-slate-50\/60 { background-color: #161b22; }
html.dark body.app-mode .bg-slate-100 { background-color: #1b212a; }
html.dark body.app-mode .bg-slate-200 { background-color: #212834; }
html.dark body.app-mode .bg-slate-800 { background-color: #212834; }
html.dark body.app-mode .text-slate-300 { color: #7d8795; }
html.dark body.app-mode .text-slate-400 { color: #99a2af; }
html.dark body.app-mode .text-slate-500 { color: #aab3bf; }
html.dark body.app-mode .text-slate-600 { color: #b8c1cc; }
html.dark body.app-mode .text-slate-700 { color: #cbd2db; }
html.dark body.app-mode .text-slate-800 { color: #dce1e8; }
html.dark body.app-mode .text-slate-900 { color: #e7eaef; }
html.dark body.app-mode .border-slate-100,
html.dark body.app-mode .border-slate-200 { border-color: #2c333f; }
html.dark body.app-mode .border-slate-300 { border-color: #39414d; }
html.dark body.app-mode .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2c333f; }
html.dark body.app-mode .ring-slate-200 { --tw-ring-color: #39414d; }

/* Admin app palette: retain blue as a restrained interactive accent. */
html.dark body.app-mode .bg-app-50 { background-color: #152532; }
html.dark body.app-mode .bg-app-500 { background-color: #287da8; }
html.dark body.app-mode .bg-app-600 { background-color: #176284; }
html.dark body.app-mode .bg-app-700 { background-color: #0d4a67; }
html.dark body.app-mode .text-app-500 { color: #86bfd9; }
html.dark body.app-mode .text-app-600 { color: #86bfd9; }
html.dark body.app-mode .text-app-700 { color: #b9dceb; }
html.dark body.app-mode .text-app-800 { color: #d9edf7; }
html.dark body.app-mode .border-app-200 { border-color: #24516a; }
html.dark body.app-mode .border-app-500 { border-color: #4f9abf; }
html.dark body.app-mode .ring-app-100 { --tw-ring-color: #24516a; }
html.dark body.app-mode .ring-app-200 { --tw-ring-color: #2f6f91; }
html.dark body.app-mode .ring-app-500 { --tw-ring-color: #4f9abf; }

/* Common status badge fills and borders. */
html.dark body.app-mode .bg-rose-50,
html.dark body.app-mode .bg-rose-100 { background-color: #3a1d2b; }
html.dark body.app-mode .bg-amber-50,
html.dark body.app-mode .bg-amber-100 { background-color: #3a2c14; }
html.dark body.app-mode .bg-blue-100 { background-color: #172d42; }
html.dark body.app-mode .bg-sky-50 { background-color: #152c3b; }
html.dark body.app-mode .bg-teal-50,
html.dark body.app-mode .bg-teal-100 { background-color: #12332f; }
html.dark body.app-mode .text-rose-700 { color: #fda4af; }
html.dark body.app-mode .text-rose-800 { color: #fecdd3; }
html.dark body.app-mode .text-amber-700 { color: #fcd34d; }
html.dark body.app-mode .text-blue-800 { color: #93c5fd; }
html.dark body.app-mode .text-sky-700,
html.dark body.app-mode .text-sky-800,
html.dark body.app-mode .text-sky-950 { color: #86bfd9; }
html.dark body.app-mode .text-teal-700 { color: #5eead4; }
html.dark body.app-mode .border-rose-200,
html.dark body.app-mode .border-amber-200,
html.dark body.app-mode .border-emerald-200,
html.dark body.app-mode .border-red-200 { border-color: #39414d; }
html.dark body.app-mode .ring-sky-200 { --tw-ring-color: #2f6f91; }
html.dark body.app-mode .ring-emerald-100,
html.dark body.app-mode .ring-emerald-200,
html.dark body.app-mode .ring-red-100,
html.dark body.app-mode .ring-amber-100 { --tw-ring-color: #39414d; }

/* Native admin chart tooltip HTML uses inline light text colors. */
html.dark body.app-mode .highcharts-tooltip-container,
html.dark body.app-mode .highcharts-tooltip-container div,
html.dark body.app-mode .highcharts-tooltip-container b { color: #e7eaef !important; }

/* Admin utility remaps must outrank Tailwind CDN runtime utilities. */
html.dark body.app-mode .bg-white { background-color: #161b22 !important; }
html.dark body.app-mode .bg-gray-50 { background-color: #161b22 !important; }
html.dark body.app-mode .bg-gray-100 { background-color: #1b212a !important; }
html.dark body.app-mode .bg-gray-200 { background-color: #212834 !important; }
html.dark body.app-mode .bg-gray-300 { background-color: #2c333f !important; }
html.dark body.app-mode .bg-slate-50,
html.dark body.app-mode .bg-slate-50\/60 { background-color: #161b22 !important; }
html.dark body.app-mode .bg-slate-100 { background-color: #1b212a !important; }
html.dark body.app-mode .bg-slate-200 { background-color: #212834 !important; }
html.dark body.app-mode .bg-slate-800 { background-color: #212834 !important; }
html.dark body.app-mode .bg-app-50 { background-color: #152532 !important; }
html.dark body.app-mode .text-gray-300 { color: #7d8795 !important; }
html.dark body.app-mode .text-gray-400 { color: #99a2af !important; }
html.dark body.app-mode .text-gray-500 { color: #aab3bf !important; }
html.dark body.app-mode .text-gray-600 { color: #b8c1cc !important; }
html.dark body.app-mode .text-gray-700 { color: #cbd2db !important; }
html.dark body.app-mode .text-gray-800 { color: #dce1e8 !important; }
html.dark body.app-mode .text-gray-900 { color: #e7eaef !important; }
html.dark body.app-mode .text-slate-300 { color: #7d8795 !important; }
html.dark body.app-mode .text-slate-400 { color: #99a2af !important; }
html.dark body.app-mode .text-slate-500 { color: #aab3bf !important; }
html.dark body.app-mode .text-slate-600 { color: #b8c1cc !important; }
html.dark body.app-mode .text-slate-700 { color: #cbd2db !important; }
html.dark body.app-mode .text-slate-800 { color: #dce1e8 !important; }
html.dark body.app-mode .text-slate-900 { color: #e7eaef !important; }
html.dark body.app-mode .text-app-700 { color: #b9dceb !important; }
html.dark body.app-mode .border-gray-100,
html.dark body.app-mode .border-gray-200,
html.dark body.app-mode .border-gray-300,
html.dark body.app-mode .border-slate-100,
html.dark body.app-mode .border-slate-200,
html.dark body.app-mode .border-slate-300 { border-color: #2c333f !important; }
html.dark body.app-mode .hover\:bg-gray-50:hover,
html.dark body.app-mode .hover\:bg-gray-100:hover,
html.dark body.app-mode .hover\:bg-slate-50:hover,
html.dark body.app-mode .hover\:bg-slate-100:hover { background-color: #212834 !important; }

/* Admin dropdowns, filter menus, autocompletes, and modal cards. */
html.dark body.app-mode .dropdown-item { color: #cbd2db !important; }
html.dark body.app-mode .dropdown-item:hover,
html.dark body.app-mode .dropdown-item:focus-visible { background-color: #212834 !important; color: #ffffff !important; }
html.dark body.app-mode .cs-menu,
html.dark body.app-mode [data-insights-filter-menu],
html.dark body.app-mode [data-insights-action-menu],
html.dark body.app-mode .title-autocomplete-menu,
html.dark body.app-mode #adminInsightsAutocomplete,
html.dark body.app-mode [data-dropdown-menu] { background-color: #161b22 !important; border-color: #2c333f !important; color: #cbd2db; }
html.dark body.app-mode .cs-menu button:hover,
html.dark body.app-mode .cs-menu button:focus-visible,
html.dark body.app-mode [data-insights-filter-menu] button:hover,
html.dark body.app-mode [data-insights-filter-menu] button:focus-visible,
html.dark body.app-mode [data-insights-action-menu] a:hover,
html.dark body.app-mode [data-insights-action-menu] a:focus-visible { background-color: #212834 !important; }
html.dark body.app-mode .insights-dropdown,
html.dark body.app-mode .insights-dropdown > button,
html.dark body.app-mode .cs-dropdown { color: #cbd2db; }
html.dark body.app-mode .insights-dropdown > button:hover,
html.dark body.app-mode .cs-dropdown:hover { background-color: #212834 !important; }
html.dark body.app-mode [data-modal] > div,
html.dark body.app-mode [data-modal] .bg-white { background-color: #161b22 !important; border-color: #2c333f !important; }
html.dark body.app-mode [data-modal] .hover\:bg-gray-50:hover { background-color: #212834 !important; }
html.dark body.app-mode .shadow-lg,
html.dark body.app-mode .shadow-elevate { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48); }

/* Selected controls: make the active state unmistakable in admin dark mode. */
html.dark body.app-mode .border-app-500 { border-color: #FFB707 !important; }
html.dark body.app-mode .text-app-600,
html.dark body.app-mode .text-app-700 { color: #FFCB4D !important; }
html.dark body.app-mode .bg-app-50 { background-color: #3a2c14 !important; }
html.dark body.app-mode .peer:checked + .peer-checked\:bg-gray-900 { background-color: #0D5F43 !important; }
html.dark body.app-mode .peer:checked + .peer-checked\:text-white { color: #ffffff !important; }
html.dark body.app-mode .cs-option.active,
html.dark body.app-mode .insights-dropdown .active,
html.dark body.app-mode [data-insights-filter-menu] .bg-app-50 { background-color: #3a2c14 !important; color: #FFCB4D !important; }
html.dark body.app-mode .billing-tab[aria-selected='true'],
html.dark body.app-mode .billing-tab.active { border-color: #FFB707 !important; color: #FFCB4D !important; }
html.dark body.app-mode input[type='checkbox']:checked,
html.dark body.app-mode input[type='radio']:checked { accent-color: #FFB707; }

/* Mobile public header actions are all bare glyphs; only the desktop outer
   shell carries the gray background. */
@media (max-width: 1023px) {
    #mainHeader #themeToggle,
    #mainHeader #themeToggle:hover,
    #mainHeader #themeToggle:focus-visible,
    #mainHeader #themeToggle[aria-expanded='true'] {
        background: transparent !important;
    }
}

/* Research source/citation side panel dark treatment. */
html.dark .sources-offcanvas {
    background: rgba(22, 27, 34, .98);
    border-left-color: #2c333f;
    box-shadow: -12px 0 28px rgba(0, 0, 0, .45);
}
html.dark .sources-offcanvas-header { border-bottom-color: #2c333f !important; }
html.dark #sources-offcanvas-title,
html.dark #source-count,
html.dark #answer-source-count,
html.dark #answer-header-source-count { color: #e7eaef !important; }
html.dark #sources-offcanvas-close:hover { background: #212834 !important; color: #ffffff !important; }
html.dark .result-links-shortcut,
html.dark .answer-action-btn { color: #aab3bf; }
html.dark .result-links-shortcut:hover,
html.dark .answer-action-btn:hover { background: #212834; color: #ffffff; }
html.dark #sources-offcanvas-list .source-card,
html.dark #sources-offcanvas-list > * { border-color: #2c333f !important; background-color: #1b212a !important; color: #cbd2db; }
html.dark #sources-offcanvas-list a { color: #86bfd9 !important; }
html.dark #sources-offcanvas-list .text-ink-900,
html.dark #sources-offcanvas-list .text-ink-800 { color: #e7eaef !important; }
html.dark #sources-offcanvas-list .text-ink-600,
html.dark #sources-offcanvas-list .text-ink-500,
html.dark #sources-offcanvas-list .text-ink-400 { color: #aab3bf !important; }

@media (min-width: 769px) {
    .sources-offcanvas-header { min-height: 3.5rem; }
}