/* Warnings index + show pages.
 * Reuses --bg-warning-* / --fg-warning-* tokens defined in _tokens.css.
 * Severity colour classes are also defined in location.css for the hero block,
 * but warnings pages only load warnings.css — so re-declare here. */

/* Event-type icon. Server-rendered <img>, no JS. Pastel light-mode backgrounds
 * paired with dark fg text → dark icon. Dark-mode dim backgrounds with pale fg
 * → light icon. Theme-driven via :root.dark — no per-severity overrides. */
.warning-event-icon {
    flex-shrink: 0;
    filter: brightness(0);
    opacity: 0.78;
    vertical-align: middle;
}
:root.dark .warning-event-icon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Severity-not-specified explainer note (shown on show page only when raw value was Unknown). */
.warnings-severity-note {
    background: var(--bg-warning-moderate);
    color: var(--fg-warning-moderate);
    padding: 10px 14px;
    border-radius: 4px;
    margin: 0 0 20px;
    font-size: 0.85rem;
    line-height: 1.45;
    border-left: 3px solid var(--fg-warning-moderate);
}
.warnings-severity-note strong {
    font-weight: 700;
}

.today-plan-warning--extreme  { background: var(--bg-warning-extreme);  color: var(--fg-warning-extreme); }
.today-plan-warning--severe   { background: var(--bg-warning-severe);   color: var(--fg-warning-severe); }
.today-plan-warning--moderate { background: var(--bg-warning-moderate); color: var(--fg-warning-moderate); }
.today-plan-warning--minor    { background: var(--bg-warning-minor);    color: var(--fg-warning-minor); }
.today-plan-warning--unknown  { background: var(--bg-warning-unknown);  color: var(--fg-warning-unknown); }

.today-plan-warning-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.warnings-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    color: var(--fg-text);
    overflow-wrap: break-word;
}

.warnings-header {
    margin-bottom: 24px;
}

.warnings-header h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--fg-strong);
    margin: 0 0 6px;
    line-height: 1.2;
}

.warnings-subtitle {
    color: var(--fg-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* "Not the latest" banner — shown at the top of every superseded / cancelled /
 * expired warning show page. Visually impossible to miss; designed so the user
 * sees the "this is out of date" framing BEFORE they can read any safety text. */
.warnings-stale-banner {
    background: var(--bg-warning-severe);
    color: var(--fg-warning-severe);
    border-radius: 6px;
    padding: 14px 16px 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
}

.warnings-stale-banner-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1rem, 3vw, 1.15rem);
    line-height: 1.3;
    margin-bottom: 8px;
}

.warnings-stale-banner-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.warnings-stale-banner-heading strong {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.warnings-stale-banner-body {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.warnings-stale-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    align-items: center;
}

.warnings-stale-banner-primary {
    display: inline-block;
    padding: 8px 14px;
    background: var(--fg-warning-severe);
    color: var(--bg-warning-severe);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid transparent;
}

.warnings-stale-banner-primary:hover {
    border-color: var(--fg-warning-severe);
    background: transparent;
    color: var(--fg-warning-severe);
}

.warnings-stale-banner-secondary {
    color: var(--fg-warning-severe);
    text-decoration: underline;
    font-size: 0.85rem;
    padding: 8px 4px;
}

/* Always-on disclaimer: BoM is the source of truth, not us. */
.warnings-bom-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: var(--bg-accent-tint);
    border-left: 4px solid var(--brand-blue);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--fg-text);
    line-height: 1.4;
}

.warnings-bom-notice strong {
    font-weight: 600;
    color: var(--fg-strong);
}

.warnings-bom-notice a {
    color: var(--brand-blue);
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

.warnings-bom-notice a:hover {
    color: var(--brand-blue-hover);
}

.warnings-empty {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    color: var(--fg-muted);
    font-size: 1rem;
}

/* ---- "Showing warnings for X" banner shown on /warnings/at/:state/:tag ---- */
.warnings-filter-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    padding: 10px 14px;
    margin-bottom: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--fg-text);
}

.warnings-filter-banner a {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 500;
}

.warnings-filter-banner a:hover {
    text-decoration: underline;
}

/* ---- Index controls: filter chips + location search ---- */
.warnings-controls {
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.warnings-controls-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.warnings-controls-label {
    font-size: 0.75rem;
    color: var(--fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.warnings-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.warnings-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    color: var(--fg-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 4px 11px;
    transition: background 0.12s, border-color 0.12s;
}

.warnings-filter-chip:hover {
    background: var(--bg-accent-tint);
    border-color: var(--brand-blue);
}

.warnings-filter-chip--active {
    background: var(--brand-blue);
    color: #FFFFFF;
    border-color: var(--brand-blue);
}
:root.dark .warnings-filter-chip--active {
    background: var(--brand-blue);
    color: var(--bg-page, #0D1117);
}

.warnings-filter-chip--active .warnings-filter-count {
    opacity: 0.9;
}

.warnings-filter-count {
    color: var(--fg-faint);
    font-size: 0.75rem;
}
.warnings-filter-chip--active .warnings-filter-count {
    color: inherit;
}

.warnings-filter-chip .warning-event-icon {
    opacity: 0.7;
    filter: brightness(0);
}
:root.dark .warnings-filter-chip .warning-event-icon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.warnings-filter-chip--active .warning-event-icon {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* The .place-search-inline component has its own styling — just constrain width. */
.warnings-controls-row .place-search-inline {
    max-width: 420px;
}

/* ---- Index page: state sections ---- */

.warnings-state-section {
    margin-bottom: 28px;
}

.warnings-state-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fg-strong);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}

.warnings-state-count {
    font-size: 0.85rem;
    color: var(--fg-faint);
    font-weight: 400;
    margin-left: 4px;
}

.warnings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.warnings-list-row {
    /* Reuses .today-plan-warning--<severity> background+colour tokens. */
    border-radius: 6px;
    padding: 0;
    transition: transform 0.1s ease;
}

.warnings-list-row:hover {
    transform: translateY(-1px);
}

.warnings-list-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    line-height: 1.35;
}

.warnings-list-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.warnings-list-event {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.warnings-list-headline {
    font-size: 0.95rem;
    /* Wrap freely on mobile. */
}

.warnings-list-meta {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* ---- Show page ---- */

.warnings-back {
    margin-bottom: 14px;
}

.warnings-back a {
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 0.9rem;
}

.warnings-back a:hover {
    text-decoration: underline;
}

.warnings-show-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.warnings-show-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.warnings-show-title-row .warning-event-icon {
    display: block;
    width: 40px;
    height: 40px;
}

.warnings-show-title-row .today-plan-warning-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.warnings-show-event {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    min-width: 0;
}

.warnings-show-headline {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: break-word;
}

.warnings-show-meta {
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.warnings-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 18px;
    margin: 0;
}

.warnings-meta-cell {
    min-width: 0;
}

.warnings-meta-cell dt {
    font-size: 0.7rem;
    color: var(--fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 2px;
}

.warnings-meta-cell dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--fg-text);
    line-height: 1.35;
}

.warnings-meta-aux {
    display: block;
    font-size: 0.7rem;
    color: var(--fg-faint);
    margin-top: 2px;
}

/* ---- Per-period mini-maps (injected inside each .warnings-bom-period) ---- */
/* The map sits directly under the hazard list for its day — no extra heading
 * needed (the period h3 already names the day). */

.warning-map-wrap {
    position: relative;
}

.warning-map {
    width: 100%;
    height: clamp(360px, 58vh, 620px);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-card);
}

@media (min-width: 640px) {
    .warnings-meta-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* (i) info button + popover for map credits — replaces always-visible attribution.
 * Uses native <details>/<summary> so no JS needed for click-to-toggle. */
.warning-map-credits {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 1;
}

.warning-map-credits summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--fg-text);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    font: italic 700 0.85rem/1 Georgia, serif;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    list-style: none;
    user-select: none;
}
.warning-map-credits summary::-webkit-details-marker { display: none; }
.warning-map-credits summary:hover { background: var(--bg-card-hover); }

.warning-map-credits-body {
    position: absolute;
    bottom: 28px;
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.72rem;
    color: var(--fg-muted);
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.warning-map-credits-body a {
    color: var(--brand-blue);
    text-decoration: none;
}

.warning-map-credits-body a:hover {
    text-decoration: underline;
}

/* ---- Embedded BoM-published warning text ----
 * Renders the .html sibling of the CAP file. BoM's markup uses <h2>/<h3>/<p class="sl">
 * with some legacy inline float layouts for the catchments table — we re-style or
 * override those to behave on mobile. Anchor tags are pre-hardened via
 * harden_external_links to carry rel="noopener noreferrer nofollow". */
/* Document-style: minimal framing, lean on typography hierarchy rather than
 * boxed cards or accent bars (cleaner read than the previous XML-ish look). */
.warnings-bom-content {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 24px;
    line-height: 1.55;
    color: var(--fg-text);
    font-size: 0.95rem;
}

.warnings-bom-content h2 {
    font-size: 1.15rem;
    color: var(--fg-strong);
    margin: 0 0 8px;
    line-height: 1.3;
}

.warnings-bom-content h3 {
    font-size: 1rem;
    color: var(--fg-strong);
    margin: 18px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.warnings-bom-content p {
    margin: 8px 0;
}

.warnings-bom-content .p-id,
.warnings-bom-content .date {
    color: var(--fg-faint);
    font-size: 0.78rem;
    margin: 2px 0;
}

.warnings-bom-content a {
    color: var(--brand-blue);
    text-decoration: underline;
    word-break: break-word;
}

.warnings-bom-content a:hover {
    color: var(--brand-blue-hover);
}

.warnings-bom-content ul {
    margin: 8px 0;
    padding-left: 22px;
}

.warnings-bom-content li {
    margin: 4px 0;
}

/* BoM uses an inline float-based table for catchments — override for responsive flow. */
.warnings-bom-content .grid {
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warnings-bom-content .grid .line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.warnings-bom-content .grid .line:last-child {
    border-bottom: 0;
}

.warnings-bom-content .grid .line > div {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.warnings-bom-content .grid .line > div:first-child {
    flex: 0 0 200px;
    font-weight: 600;
}

/* Highlight the Safety Advice heading in flood-watch HTML content (the .html
 * sibling — typically the FIRST h3 in BoM's product div). Scoped to the
 * --html format ONLY because XML-parsed wind warnings have a period h3 first
 * that ends up unreadable on white card if we apply --fg-warning-severe. */
.warnings-bom-content--html h3:first-of-type {
    color: var(--fg-warning-severe);
    border-top-color: var(--fg-warning-severe);
}

/* ---- Areas section ---- */

.warnings-show-areas h2,
.warnings-show-chain h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fg-strong);
    margin: 0 0 10px;
}

.warnings-show-areas {
    margin-bottom: 24px;
}

.warnings-empty-inline {
    color: var(--fg-faint);
    font-style: italic;
    margin: 0;
}

.warnings-areas-sentence {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fg-text);
}

/* ---- BoM native XML parsed into semantic HTML (the .xml fallback) ---- */
.warnings-bom-period {
    margin: 14px 0;
    padding: 0;
}

.warnings-bom-period h3 {
    font-size: 1rem;
    color: var(--fg-strong);
    margin: 16px 0 6px;
    padding: 0;
    border-top: none;
    padding-top: 0;
    font-weight: 600;
}

.warnings-bom-summary {
    margin: 4px 0 8px;
    font-size: 0.95rem;
    color: var(--fg-text);
}

.warnings-bom-hazards {
    list-style: disc;
    padding-left: 22px;
    margin: 8px 0;
}

.warnings-bom-hazard {
    padding: 2px 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.warnings-bom-hazard strong {
    color: var(--fg-strong);
    font-weight: 600;
}

/* Per-hazard severity colour swatch — matches the polygon colour on the
 * minimap above so the user can map text → polygon visually. Uses the same
 * --bg-warning-* / --fg-warning-* tokens; CSS class set on the parent <li>. */
.warnings-bom-hazard-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    margin-left: -16px;
    vertical-align: middle;
    border-radius: 2px;
    border: 1px solid currentColor;
    background: var(--swatch-bg);
}

/* Frozen --map-warning-* tokens (not theme-aware) — the swatch must match
 * the polygon on the mini-map below, and the polygon is itself frozen. */
.warnings-bom-hazard--extreme  { --swatch-bg: var(--map-warning-fill-extreme); }
.warnings-bom-hazard--severe   { --swatch-bg: var(--map-warning-fill-severe); }
.warnings-bom-hazard--moderate { --swatch-bg: var(--map-warning-fill-moderate); }
.warnings-bom-hazard--minor    { --swatch-bg: var(--map-warning-fill-minor); }
.warnings-bom-hazard--unknown  { --swatch-bg: var(--map-warning-fill-unknown); }
.warnings-bom-hazard--extreme  .warnings-bom-hazard-swatch { color: var(--map-warning-stroke-extreme); }
.warnings-bom-hazard--severe   .warnings-bom-hazard-swatch { color: var(--map-warning-stroke-severe); }
.warnings-bom-hazard--moderate .warnings-bom-hazard-swatch { color: var(--map-warning-stroke-moderate); }
.warnings-bom-hazard--minor    .warnings-bom-hazard-swatch { color: var(--map-warning-stroke-minor); }
.warnings-bom-hazard--unknown  .warnings-bom-hazard-swatch { color: var(--map-warning-stroke-unknown); }

.warnings-bom-next-issue {
    margin: 18px 0 4px;
    font-size: 0.9rem;
    color: var(--fg-muted);
}

.warnings-bom-postamble {
    margin: 12px 0 4px;
    font-size: 0.82rem;
    color: var(--fg-muted);
    font-style: italic;
    line-height: 1.5;
}

.warnings-bom-postamble a {
    color: var(--brand-blue);
    word-break: break-word;
}

/* ---- TXT-fallback rendering for warnings without HTML siblings ---- */
.warnings-bom-source {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--fg-muted);
}

.warnings-bom-source code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}

.warnings-bom-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: var(--fg-text);
    background: transparent;
}

/* ---- Affected forecast locations ---- */
.warnings-show-locations {
    margin-bottom: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 14px 16px;
}

.warnings-show-locations h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fg-strong);
    margin: 0 0 6px;
}

.warnings-locations-subtitle {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: var(--fg-faint);
    line-height: 1.4;
}

.warnings-locations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.warnings-locations-item a {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-accent-tint);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    text-decoration: none;
    color: var(--brand-blue);
    font-size: 0.85rem;
    transition: background 0.15s;
}

.warnings-locations-item a:hover {
    background: var(--bg-accent-tint-hover);
}

.warnings-locations-state {
    color: var(--fg-faint);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ---- Version-chain section ---- */

.warnings-show-chain {
    margin-bottom: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 14px 16px;
}

.warnings-chain-row {
    margin: 6px 0;
    font-size: 0.9rem;
}

.warnings-chain-row--newer {
    color: var(--fg-strong);
}

.warnings-chain-label {
    font-size: 0.85rem;
    color: var(--fg-muted);
    margin: 8px 0 6px;
    font-weight: 600;
}

.warnings-chain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.warnings-chain-list a,
.warnings-chain-row a {
    color: var(--brand-blue);
    text-decoration: none;
}

.warnings-chain-list a:hover,
.warnings-chain-row a:hover {
    text-decoration: underline;
}

/* ---- Footer ---- */

.warnings-footer,
.warnings-show-footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    color: var(--fg-faint);
}

.warnings-footer a,
.warnings-show-footer a {
    color: var(--brand-blue);
    text-decoration: none;
}

.warnings-footer a:hover,
.warnings-show-footer a:hover {
    text-decoration: underline;
}

/* "Always check the Bureau of Meteorology for current warnings." — the whole
 * sentence is one link, with "current warnings" always underlined so users
 * have a visible link cue even without hover/touch-state. Hover/focus then
 * extends the underline to the whole phrase. */
.warnings-source-link {
    color: var(--brand-blue);
    text-decoration: none;
}

.warnings-source-link .warnings-source-link-hint {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.warnings-source-link:hover,
.warnings-source-link:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Responsive: ≥ 768 px ---- */

@media (min-width: 768px) {
    .warnings-page {
        padding: 28px 20px 60px;
    }
    .warnings-list-link {
        padding: 12px 16px;
    }
    .warnings-show-header {
        padding: 20px 22px;
        gap: 12px;
    }
    .warnings-show-title-row {
        gap: 12px;
    }
}