@tailwind base;
@tailwind components;
@tailwind utilities;

/* HTMX Loading States for AI Search */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request input[type="search"] {
    opacity: 0.7;
}

.htmx-request .search-icon {
    opacity: 0.5;
}


@font-face {
    font-family: Caveat;
    src: url("/static/fonts/Caveat/Caveat-VariableFont_wght.7519ccd6f7c0.ttf");
    font-display: swap;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Caveat;
}

.custom-font {
    font-family: Caveat;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 10000;
    padding: .75rem 1rem;
    background: white;
    color: #312e81;
}
.skip-link:focus { top: 1rem; }
.site-page { min-height: 100vh; background: #f7f5f0; color: #252d3c; }
.site-masthead {
    background: transparent;
    margin: 0;
}
.site-header .site-brand {
    color: #9F2210;
    font: 700 42px/1.1 Caveat, cursive;
    white-space: nowrap;
    text-decoration: none;
}
.site-brand-group { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
.site-brand-mascot { width: 44px; height: 44px; object-fit: contain; margin: 0; flex-shrink: 0; }
.site-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 12px;
    min-height: 106px;
}
.site-action { flex: 0 0 44px; }
.site-account-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #9F2210;
    cursor: pointer;
}
.site-account-trigger:hover { background: #a423100c; }
.site-account-trigger .site-avatar {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
}
.site-avatar + .site-menu-lines { display: none; }
.site-menu-lines { display: flex; flex-direction: column; gap: 6px; width: 27px; }
.site-menu-lines span {
    width: 27px;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
}
.site-account-trigger[aria-expanded="true"] .site-menu-lines span:first-child { transform: translateY(9px) rotate(45deg); }
.site-account-trigger[aria-expanded="true"] .site-menu-lines span:nth-child(2) { opacity: 0; }
.site-account-trigger[aria-expanded="true"] .site-menu-lines span:last-child { transform: translateY(-9px) rotate(-45deg); }
.site-account-menu {
    position: fixed;
    inset: 94px max(16px, calc((100vw - 1180px) / 2)) auto auto;
    width: min(300px, calc(100vw - 32px));
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    margin: 0;
    padding: 18px;
    border: 1px solid #ead9d1;
    border-radius: 20px;
    background: #fffdf9;
    color: #252d3c;
    box-shadow: 0 18px 60px #38231e26;
    font: 500 16px/1.4 system-ui, sans-serif;
}
.site-account-menu::backdrop { background: #252d3c33; }
.site-account-menu nav { display: grid; gap: 6px; }
.site-account-menu-separator { width: 48px; height: 0; margin: 2px 14px; border: 0; border-top: 1px solid #cbd0d5; }
.site-account-menu nav a, .site-account-menu nav button {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #7f2418;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}
.site-account-menu nav a:hover, .site-account-menu nav button:hover { background: #f7ebe5; }
.site-account-menu form { margin: 0; }
@media (max-width: 700px) {
    .site-header { padding: 18px 8px; min-height: 82px; gap: 5px; }
    .site-header .site-brand { font-size: 34px; }
    .site-brand-mascot { width: 32px; height: 36px; }
    .site-account-menu { top: 76px; max-height: calc(100dvh - 92px); }
}
@media (max-width: 360px) {
    .site-header .site-brand { font-size: 29px; }
}
.site-page footer { background: #f7f5f0; color: #475569; box-shadow: none; }
.site-page footer a { color: #9F2210; }
.site-page footer a:hover { color: #4c1d95; }
.site-page footer span { color: #64748b; }
.site-page footer .site-attributions { margin: 0 auto; text-align: center; color: inherit; }
.discovery-map { background: #faf9ff; }
#discovery-panel { background: #faf9ff; }
#discovery-panel:not([open]) { padding-top: .25rem; padding-bottom: .25rem; }
#discovery-panel > summary { font-size: 1rem; line-height: 44px; }
#discovery-toolbar { color: #334155; align-items: flex-end; }
.style-filter { position: relative; max-width: 100%; }
.selected-style-names { overflow-wrap: anywhere; }
.selected-style-names > span + span::before { content: ', '; }
.style-options {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 40;
    width: min(22rem, calc(100vw - 4rem));
    padding: .75rem;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 41, 59, .15);
}
.style-option { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem; border-radius: .35rem; }
.style-option:hover { background: #f5f3ff; }
.style-option input, #style-filter-form > label input[type="checkbox"] { accent-color: #7c3aed; width: 1rem; height: 1rem; flex-shrink: 0; }
.style-event-count { margin-left: auto; padding-left: .5rem; color: #64748b; font-size: .75rem; font-variant-numeric: tabular-nums; }
#style-chips a[aria-current="true"] { background: #ede9fe; border-color: #8b5cf6; color: #5b21b6; }
@media (min-width: 1024px) {
    body.discovery-shell { width: calc(100% - 3rem); max-width: 72rem; }
    .discovery-shell #search-results { max-width: 56rem; margin-inline: auto; }
    .discovery-shell #discovery-panel { margin-inline: 1rem; }
    .discovery-shell #discovery-toolbar { gap: .75rem; }
    .discovery-shell #discovery-toolbar summary { font-size: 1rem; }
}
.event-detail-viewport h1, .event-detail-viewport h2 {
    font-family: system-ui, sans-serif;
}
.event-detail-viewport p { margin-top: .25rem; margin-bottom: .25rem; }
.event-detail-viewport h1 { margin: .5rem 0; }

/* One theme attribute is set before paint and inherited by every partial/dialog. */
html[data-theme="light"] { color-scheme: light; }
.site-theme-choices { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; border: 0; padding: 0; }
.site-theme-choices legend { font-size: 12px; padding: 0 12px 6px; color: inherit; }
.site-theme-choices label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px; border-radius: 9px; font-size: 13px; cursor: pointer; }
.site-theme-choices label:has(:checked) { background: #eee7fc; color: #5f29bd; }
.site-theme-choices input { width: 14px; height: 14px; accent-color: #7138db; }
.event-detail-information { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.event-detail-editor-actions { grid-column: 1 / -1; }

html.site-page[data-theme="dark"] {
    color-scheme: dark;
    --color-base-100: #393b40;
    --color-base-200: #323438;
    --color-base-300: #505259;
    --color-base-content: #eeeef1;
    --workspace-ink: #eeeef1;
    --workspace-muted: #b6b8c1;
    --workspace-line: #56585f;
    --workspace-rust: #9F2210;
    --workspace-purple: #c4a5ff;
    --tw-prose-body: #dddde3;
    --tw-prose-headings: #f1eff4;
    --tw-prose-links: #c4a5ff;
    --tw-prose-bold: #f1eff4;
    --tw-prose-counters: #b6b8c1;
    --tw-prose-bullets: #b6b8c1;
    background: #000;
    color: #eeeef1;
}
html.site-page[data-theme="dark"] :is(.discovery-workspace, #event-detail-dialog, .map-results-handle, .workspace-event-list, .site-account-menu) { background: #35373c; color: #eeeef1; border-color: #56585f; }
html.site-page[data-theme="dark"] body { background: #35373c; border-radius: 22px; }
html.site-page[data-theme="dark"] .site-masthead { background: transparent; }
html.site-page[data-theme="dark"] :is(.bg-white, [class~="bg-white/50"], [class~="bg-white/60"], [class~="bg-white/70"], [class~="bg-white/80"], [class~="bg-white/90"], [class~="bg-white/95"], .bg-slate-50, .bg-gray-50, .bg-gray-100, .bg-slate-100, .bg-stone-50, .bg-stone-100, .bg-base-100, .bento-card, .quick-tile, .event-dialog-toolbar, .workspace-event-card > div, .map-empty-results, .map-event-type-options, .style-options, .workspace-chat-reply) { background-color: #3e4046; color: #eeeef1; border-color: #56585f; }
html.site-page[data-theme="dark"] :is(.bento-app, .profile-avatar) { background: #35373c; }
html.site-page[data-theme="dark"] .event-detail-viewport { background: #35373c; }
html.site-page[data-theme="dark"] :is(.bg-gradient-to-br, .bg-gradient-to-r, .bg-linear-to-br, .bg-linear-to-r) { background-image: none; background-color: #35373c; }
html.site-page[data-theme="dark"] :is(.text-black, .bento-label, .text-stone-700, .text-zinc-600, .text-slate-900, .text-gray-900, .text-slate-800, .text-gray-800, .text-slate-700, .text-gray-700, .text-gray-600, .text-slate-600) { color: #dedee5; }
html.site-page[data-theme="dark"] :is(.text-slate-500, .text-gray-500, .text-gray-400, .text-slate-400) { color: #b6b8c1; }
html.site-page[data-theme="dark"] :is(.text-indigo-800, .text-indigo-700, .text-blue-600, .text-purple-700, .text-purple-800, .text-violet-600, .text-violet-700) { color: #cbb0ff; }
html.site-page[data-theme="dark"] :is([class~="text-[#9F2210]"], .text-red-700, .text-red-800) { color: #9F2210; }
html.site-page[data-theme="dark"] .workspace-event-card > div > div:first-child,
html.site-page[data-theme="dark"] .workspace-event-card > div > div:first-child [class~="text-[#9F2210]"],
html.site-page[data-theme="dark"] .event-timeline h3[class~="text-[#9F2210]"],
html.site-page[data-theme="dark"] .event-timeline h3 .text-red-700 { color: #c19791; }
html.site-page[data-theme="dark"] #search-results :is(h3, hr) { border-color: #65676f; }
html.site-page[data-theme="dark"] .bg-gray-200 { background-color: #65676f; }
html.site-page[data-theme="dark"] #vector-results [class~="bg-red-50/90"] { background: #35373c; border-color: #56585f; }
html.site-page[data-theme="dark"] body > .bg-white { background: transparent; }
html.site-page[data-theme="dark"] :is(.border-slate-200, .border-gray-200, .border-slate-300, .border-gray-300) { border-color: #56585f; }
html.site-page[data-theme="dark"] :is(.bg-indigo-50, .bg-purple-50, .bg-violet-50, .bg-blue-50) { background-color: #4a405f; color: #e1d0ff; }
html.site-page[data-theme="dark"] :is(.bg-amber-50, .bg-orange-50, .bg-yellow-50) { background-color: #564a37; color: #f5d6a2; }
html.site-page[data-theme="dark"] :is(.bg-red-50, .bg-red-100, .bg-pink-50, .bg-pink-100) { background-color: #dec4c2; color: #9F2210; }
html.site-page[data-theme="dark"] :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-teal-50, .bg-teal-100) { background-color: #36534c; color: #b9eee0; }
html.site-page[data-theme="dark"] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, #search-input, .map-style-actions button, .map-event-types summary) { background: #45474e; color: #f1eff4; border-color: #676971; }
html.site-page[data-theme="dark"] input::placeholder, html.site-page[data-theme="dark"] textarea::placeholder { color: #bbbcc6; }
html.site-page[data-theme="dark"] :is(.site-header .site-brand, .site-account-trigger, footer a) { color: #9F2210; }
html.site-page[data-theme="dark"] .site-account-menu nav :is(a, button) { color: #eeeef1; }
html.site-page[data-theme="dark"] .site-account-menu nav :is(a, button):hover { background: #4f4240; }
html.site-page[data-theme="dark"] .site-theme-choices label:has(:checked) { background: #594675; color: #f0e7ff; }
html.site-page[data-theme="dark"] footer { background: transparent; color: #c3c4cd; }
html.site-page[data-theme="dark"] footer span { color: #b6b8c1; }
html.site-page[data-theme="dark"] #map-style-pills button, html.site-page[data-theme="dark"] .filter-summary-pill { background: #594675; border-color: #a98bda; color: #f0e7ff; }
html.site-page[data-theme="dark"] #map-style-pills button[aria-pressed=false] { background: transparent; border-color: #73757e; color: #b6b8c1; }
html.site-page[data-theme="dark"] .map-results-handle strong { color: #eeeef1; }
html.site-page[data-theme="dark"] .map-results-handle { box-shadow: 0 -8px 25px #22232655; }
html.site-page[data-theme="dark"] .leaflet-container { background: #4c4c48; }
/* Filter only the provider raster: colored markers, clusters, labels and controls stay legible. */
html.site-page[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.73) sepia(.24) saturate(.72); }
html.site-page[data-theme="dark"] :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip, .leaflet-control-zoom a) { background: #45474e; color: #f1eff4; border-color: #74767e; }
html.site-page[data-theme="dark"] .leaflet-control-attribution { background: #35373cdd; color: #dddde3; }
html.site-page[data-theme="dark"] .leaflet-control-attribution a { color: #dfc6ff; }
html.site-page[data-theme="dark"] dialog::backdrop { background: #20222688; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.htmx-indicator {
    opacity: 0;
    z-index: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
    z-index: 3;

}

.htmx-request.htmx-indicator {
    opacity: 1;
    z-index: 3;
}

.transition-land {
    transition: transform 0.3s ease-in-out;
    animation: shrink-down 0.5s ease-out;
}

.transition-rise {
    transition: transform 0.3s ease-in-out;
    animation: rise-up 0.5s ease-out;
}

@keyframes shrink-down {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rise-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}