html, body {
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Loading shell shown before the WASM runtime boots. Static colours on purpose:
   the theme isn't available yet. */
.app-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F3F6FB;
    color: #1E40AF;
}

.app-loading-logo {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-loading-text {
    margin-top: 0.5rem;
    color: #4B5563;
}

@media (prefers-color-scheme: dark) {
    .app-loading { background: #0B1220; color: #60A5FA; }
    .app-loading-text { color: #9CA3AF; }
}

#blazor-error-ui {
    background: #B91C1C;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui a { color: #fff; }

/* Hero band on the home page. */
.gj-hero {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 55%, #2563EB 100%);
    color: #fff;
    border-radius: 16px;
}

.gj-hero .mud-input,
.gj-hero .mud-input-label { color: #111827; }

/* Results | handle | map. Below md they stack and the handle disappears. */
.gj-split {
    --gj-list-width: 58%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.gj-split-list { min-width: 0; }
.gj-split-map { min-width: 0; flex: 1 1 auto; }
.gj-split-handle { display: none; }

@media (min-width: 960px) {
    .gj-split { flex-direction: row; gap: 0; }
    .gj-split-list { flex: 0 0 var(--gj-list-width); }
    .gj-split-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 16px;
        cursor: col-resize;
        touch-action: none;
        user-select: none;
    }
    .gj-split-handle::before {
        content: "";
        width: 4px;
        height: 48px;
        border-radius: 2px;
        background: var(--mud-palette-lines-default);
        transition: background 120ms;
    }
    .gj-split-handle:hover::before,
    .gj-split-handle:focus-visible::before,
    .gj-split-dragging .gj-split-handle::before { background: var(--mud-palette-primary); }
    .gj-split-handle:focus-visible { outline: none; }
    .gj-split-dragging { cursor: col-resize; user-select: none; -webkit-user-select: none; }
    .gj-split-dragging .gj-map { pointer-events: none; }
}

/* The search map. */
.gj-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
}

.gj-map-sticky {
    position: sticky;
    top: 80px;
    height: calc(100vh - 112px);
}

.gj-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #EA580C;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.gj-marker.gj-marker-active {
    background: #1E40AF;
    transform: scale(1.35);
}

.maplibregl-popup-content {
    font-family: inherit;
    border-radius: 8px;
    padding: 10px 12px;
}

/* Source link chips: the product's most important control gets the accent. */
.gj-source-link {
    text-decoration: none;
}

/* Ad slot placeholder keeps layout stable before AdSense loads. */
.gj-ad {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gj-ad:empty { display: none; }

/* Keep long URLs from breaking the layout in cards and tables. */
.gj-break { overflow-wrap: anywhere; }