/*
 * Site layer over the brand kit. brand.css holds the raw palette verbatim as shipped;
 * everything here maps those tokens onto meanings, so a token change never has to be chased
 * through the templates.
 *
 * THE RULE FROM THE KIT, RESTATED BECAUSE IT IS EASY TO BREAK:
 *   "El ámbar no se usa de decoración... Si aparece en cualquier otro lado, deja de significar
 *    algo y el día que una presa esté en crítico nadie lo va a notar."
 *
 * Amber is therefore bound ONLY to the five semantic classes below — level-critical,
 * level-critical-fill, level-critical-marker, alert-note, alert-panel — and is reachable no other
 * way: the Tailwind config deliberately has no `alert` colour, and the map's markers take their
 * colour from here rather than a hex in JS.
 * Informational text —
 * coverage notes, gap explanations, backfill counts — uses --ink-muted, never amber, however
 * much it may feel like it deserves attention.
 */

:root {
    /* Semantic aliases. Templates reference these, not the raw palette. */
    --page-bg: var(--cream);
    --surface: #ffffff;
    --ink-strong: var(--ink);
    --ink-muted: #5b7683; /* ink at reading contrast on cream, not a new brand colour */
    --hairline: #dfe7ea;

    --level-fill: var(--water); /* water in a tank/bar on the site */
    --level-empty: var(--foam);
    --chart-1: var(--water);
    --chart-2: var(--deep);
    --chart-3: #6FB3C9; /* between water and deep, for the third series only */
}

body {
    background: var(--page-bg);
    color: var(--ink-strong);
    font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
}

/* Archivo's figures are wide and even — the kit calls for 800/900 on numerals. */
.figure {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── The only places amber is allowed ─────────────────────────────────────── */

/* A dam at a genuinely low level. Deliberately a single tier, not a gradient of
   warnings: two shades of amber is the same as none. */
.level-critical {
    color: var(--alert);
}
.level-critical-fill {
    background: var(--alert);
}
/* Leaflet circle markers: CSS overrides the SVG presentation attributes Leaflet sets. */
.level-critical-marker {
    stroke: var(--alert);
    fill: var(--alert);
}

/* A condition needing attention: stale data, a failed scrape. */
.alert-note {
    color: #9a5b00; /* --alert darkened only for text contrast; same signal */
}
.alert-panel {
    background: #fff4e2;
    border-color: var(--alert);
    color: #7a4a00;
}

/* ── Everything else ──────────────────────────────────────────────────────── */

.surface {
    background: var(--surface);
    border: 1px solid var(--hairline);
}
.muted {
    color: var(--ink-muted);
}
.link-brand {
    color: var(--deep);
    text-decoration: underline;
    text-decoration-color: var(--foam);
}
.link-brand:hover {
    text-decoration-color: var(--deep);
}

/*
 * Centred, at twice the original size.
 *
 * Sized by WIDTH with height:auto rather than a fixed height, so it always scales
 * proportionally — the kit forbids stretching or condensing the lockup. `min()` caps it at the
 * intended 438px (2x the previous 219px) but lets it shrink on a narrow viewport instead of
 * overflowing: at 438px it would run off a 375px-wide phone.
 *
 * The margin is the kit's clear space — at least the height of the logotype's "!" — scaled up
 * with the mark so nothing crowds it.
 */
.brand-logo {
    display: block;
    width: min(438px, 100%);
    min-width: 120px; /* kit minimum for the horizontal lockup */
    height: auto;
    margin: 12px auto 20px;
}

.level-marker {
    stroke: var(--water);
    fill: var(--water);
}

.tank-shell {
    background: var(--level-empty);
    border: 1px solid var(--hairline);
}
.tank-water {
    background: var(--level-fill);
}

/* ── Installed app (PWA) only ────────────────────────────────────────────────
 *
 * Everything here applies in standalone mode alone: `display-mode: standalone` on Android and
 * desktop, html.standalone (set from navigator.standalone) on iOS home-screen apps. In a browser
 * tab none of it exists, so the website is unchanged. The display rules live here rather than in
 * Tailwind classes, because a Tailwind display utility on the element would override `none`.
 */
.pwa-only {
    display: none;
}

@media (display-mode: standalone) {
    .app-nav { display: grid; }
    .pwa-refresh { display: inline-flex; }
    body { padding-bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px)); }
    .app-section { scroll-margin-top: 12px; }
    header { padding-top: 16px; } /* room under the refresh button on narrow phones */
}
html.standalone .app-nav { display: grid; }
html.standalone .pwa-refresh { display: inline-flex; }
html.standalone body { padding-bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px)); }
html.standalone .app-section { scroll-margin-top: 12px; }
html.standalone header { padding-top: 16px; }

@media (prefers-reduced-motion: no-preference) {
    @media (display-mode: standalone) { html { scroll-behavior: smooth; } }
    html.standalone { scroll-behavior: smooth; }
}

:root {
    --app-nav-height: 60px;
}

.app-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000; /* above Leaflet's panes and controls */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -2px 10px rgba(10, 46, 61, 0.06);
}
.app-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
/* `hidden` must win over the flex above: tabs for absent sections are hidden by the script. */
.app-nav a[hidden] {
    display: none;
}
.app-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.app-nav a[aria-current] {
    color: var(--deep);
}
/* The current tab is marked by colour AND a water-blue bar, so it does not rely on colour alone. */
.app-nav a[aria-current]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--water);
}
.app-nav a:focus-visible {
    outline: 2px solid var(--deep);
    outline-offset: -4px;
}

.pwa-refresh {
    position: absolute;
    top: 12px;
    right: 16px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    color: var(--deep);
    font-size: 13px;
    font-weight: 600;
}
.pwa-refresh:active {
    background: var(--cream);
}