/* Design tokens — single source of truth for spacing, color, radius,
 * shadow, motion. Layered on top of Pico v2 (loaded before this file);
 * Pico variables remain the typography/form base. ds-* tokens cover
 * what Pico doesn't: verdict palette, role badges, status pills,
 * spacing scale, motion curve. Component CSS under ui_system/ MUST
 * consume these tokens — hardcoded hex/rem in a component file is a
 * bug. */

:root {
    /* Spacing scale — 0.25rem increments, named by index. */
    --ds-space-0: 0.25rem;
    --ds-space-1: 0.5rem;
    --ds-space-2: 0.75rem;
    --ds-space-3: 1rem;
    --ds-space-4: 1.5rem;
    --ds-space-5: 2rem;
    --ds-space-6: 3rem;

    /* Verdict palette. The text/border hue is the lighter pair used on
     * dark backgrounds; the *-bg hue is the saturated base used to
     * derive the 18% tinted backgrounds via color-mix. */
    --ds-color-positive-bg:     #10b981;
    --ds-color-positive:        #34d399;
    --ds-color-negative-bg:     #ef4444;
    --ds-color-negative:        #f87171;
    --ds-color-inconclusive-bg: #f59e0b;
    --ds-color-inconclusive:    #fbbf24;
    --ds-color-invalid-bg:      #6b7280;
    --ds-color-invalid:         #9ca3af;

    /* Neutral info — the map popup's Event chip + "Awaiting verification"
     * status. A slate hue distinct from every verdict colour so a chip is
     * never mistaken for a confirmed/negative wave. */
    --ds-color-info-bg:         #64748b;
    --ds-color-info:            #94a3b8;

    /* Role palette — admin reads as caution, reviewer as success. */
    --ds-color-role-admin-bg:    var(--pico-del-color);
    --ds-color-role-admin-fg:    var(--pico-background-color);
    --ds-color-role-reviewer-bg: var(--pico-ins-color);
    --ds-color-role-reviewer-fg: var(--pico-background-color);

    /* Radii — sm/md inherit from Pico; pill is fully-rounded. */
    --ds-radius-sm:   4px;
    --ds-radius-md:   var(--pico-border-radius);
    --ds-radius-pill: 999px;

    /* Shadows — popup is the help-tooltip / dropdown drop. */
    --ds-shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.25);

    /* Motion. */
    --ds-transition-fast: 0.12s ease;
    --ds-transition-base: 0.15s ease;
    --ds-transition-slow: 0.25s ease;

    /* Typography sizes for compact UI chrome (badges, captions, meta). */
    --ds-font-xs:  0.7rem;
    --ds-font-sm:  0.75rem;
    --ds-font-md:  0.85rem;
    --ds-font-lg:  0.9rem;

    /* Component-shared geometry. */
    --ds-control-height-sm: 1.75rem;
    --ds-control-height-md: 2.1rem;

    /* Public /explorer map — footprint palette. Mirrored 1:1 in
     * src/explorer/palette.jl (MapLibre paint JSON can't read CSS vars),
     * enforced by test_explorer_palette_sync.jl. Intentionally fixed-dark
     * in both Pico themes: the EMODnet bathymetry basemap is a dark ocean,
     * so the legend swatches read against it regardless of theme.
     *   vivid = verified_positive (a confirmed internal wave)
     *   muted = every other footprint (an honest "candidate")
     * #5b7a8c @ 0.24 is the deliberate minimum-perceived-contrast pick for
     * muted over the dark basemap (validated at the /verify checkpoint). */
    --ds-map-vivid-fill:         #10b981;
    --ds-map-vivid-fill-opacity: 0.55;
    --ds-map-vivid-line:         #34d399;
    --ds-map-vivid-line-width:   1.5;
    --ds-map-muted-fill:         #5b7a8c;
    --ds-map-muted-fill-opacity: 0.24;
    --ds-map-muted-line:         #8aa6b5;
    --ds-map-muted-line-width:   1.5;
    /* Popup surface — dark slate to sit over the dark bathymetry. */
    --ds-map-popup-bg:           #14233a;
    /* Thumbnail placeholder — shown while the lazy SAR image loads. */
    --ds-map-popup-thumb-bg:     #0a1622;
    /* Dark ocean void behind the map while bathymetry tiles load. */
    --ds-map-void:               #0a1622;
    /* Translucent chrome panels (hero / legend / cursor / attribution)
     * floated over the map; alpha keeps the bathymetry visible behind. */
    --ds-map-chrome-bg:          rgba(10, 22, 34, 0.82);
    /* Top-down scrim under the nav: a soft gradient (opaque-ish → fully
     * transparent) reads as full-bleed — the map shows through below the
     * links — while keeping the nav text legible over bright bathymetry,
     * rather than a hard-edged chrome bar. */
    --ds-map-scrim-top: linear-gradient(
        to bottom,
        rgba(10, 22, 34, 0.85) 0%,
        rgba(10, 22, 34, 0.55) 55%,
        rgba(10, 22, 34, 0) 100%);
    /* Legibility halo for white chrome text painted over the map: the
     * scrim/chrome alpha keeps contrast comfortable over most bathymetry,
     * but the thinnest fade of the nav scrim can sit over near-white shelf
     * tiles. A tight dark text-shadow guarantees the white text stays
     * readable over ANY backdrop without leaning on a measured gradient. */
    --ds-map-text-halo: 0 1px 2px rgba(10, 22, 34, 0.9);
    /* Opaque nav fallback for prefers-contrast: more — replaces the soft
     * gradient with a hard chrome bar for users who need maximal contrast. */
    --ds-map-scrim-top-solid: rgba(10, 22, 34, 0.95);
}

/* Utility — Pico provides .muted via var(--pico-muted-color) usage
 * across templates; keep this here as a one-class helper rather than
 * re-defining per page. */
.muted { color: var(--pico-muted-color); }

/* Utility classes that replace common inline style="..." patterns
 * found across .jl templates. Naming: .u-<intent>. Use sparingly —
 * a recurring style is usually a missing component variant. */
.u-inline-block { width: auto; display: inline-block; }
.u-fit-content  { width: fit-content; }
.u-text-center  { text-align: center; }
.u-footer-pad   { text-align: center; padding: var(--ds-space-3) 0; }

/* Specific reusable component styles that previously lived as inline
 * style="" attributes in .jl templates. Each has at most one or two
 * callers — promoting to a class keeps the markup attribute-clean
 * and gives the design system one place to retune sizing. */

.login-logo-wrap { margin-bottom: var(--ds-space-4); }
.login-logo      { height: 8rem; }
.login-title     { margin-bottom: var(--ds-space-4); }

.session-form-actions { text-align: center; }
.session-form-subtitle {
    margin-top: -1rem;
    margin-bottom: var(--ds-space-4);
}

.footer-logo {
    height: 1rem;
    vertical-align: middle;
    margin-right: var(--ds-space-0);
}

.error-icon {
    height: 2rem;
    vertical-align: middle;
    margin-bottom: 0.2rem;
    margin-right: 0.15rem;
}

/* Error pages (404 / 500): the numeric status code is a glance-level decorative
 * marker, NOT the message — so it's de-emphasized (muted colour, light weight)
 * to let the human-readable heading carry primary emphasis. Generous top margin
 * pushes the cluster off the nav; the code→heading gap is tightened so they read
 * as one block. */
.error-page-code {
    font-size: 4rem;
    line-height: 1;
    margin: var(--ds-space-6) 0 0;
    color: var(--pico-muted-color);
    font-weight: 300;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.error-page-heading {
    margin-top: var(--ds-space-1);
    margin-bottom: var(--ds-space-2);
}
.error-page-actions {
    text-align: center;
    margin-top: var(--ds-space-4);
}
.error-page-actions a[role="button"],
.error-page-actions button {
    width: fit-content;
    display: inline-block;
}
.error-page-actions button { margin-right: var(--ds-space-1); }

/* Dashboard CTA row — used by the reviewer dashboard ("My Verdicts" /
 * "New Session" buttons) and any centered button cluster of inline-block
 * links. */
.dashboard-cta-row {
    text-align: center;
    margin-top: var(--ds-space-2);
}
.dashboard-cta-row a[role="button"],
.dashboard-cta-row button {
    width: auto;
    display: inline-block;
}
.dashboard-cta-row > a[role="button"] + a[role="button"] {
    margin-left: var(--ds-space-1);
}

.dashboard-no-sessions { text-align: center; }