/*
 * Pause Banner — Shared Styles
 * ============================
 * Sector-agnostic styling. Per-sector theming via CSS custom properties
 * with sensible warm-amber defaults. Override per sector by setting the
 * properties on `.pause-banner--<sector>` (e.g. `.pause-banner--sire`).
 *
 * No JS hooks via class names — JS reads/writes `#pause-banner-mount`
 * inner HTML only. CSS owns presentation, JS owns behavior.
 *
 * Loaded by every consumer with `?v=YYYYMMDD` cache-busting; auto-
 * discovered by scripts/lint_shared_cache_busters.py.
 */

.pause-banner {
    --pause-banner-bg: rgba(255, 188, 81, 0.08);
    --pause-banner-border: rgba(255, 188, 81, 0.35);
    --pause-banner-fg: #f5d28a;
    --pause-banner-meta-fg: rgba(245, 210, 138, 0.75);
    --pause-banner-link-fg: #ffd989;
    --pause-banner-icon-bg: rgba(255, 188, 81, 0.18);
    --pause-banner-radius: 8px;
    --pause-banner-padding-y: 14px;
    --pause-banner-padding-x: 18px;

    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0 0 20px 0;
    padding: var(--pause-banner-padding-y) var(--pause-banner-padding-x);

    background: var(--pause-banner-bg);
    border: 1px solid var(--pause-banner-border);
    border-radius: var(--pause-banner-radius);
    color: var(--pause-banner-fg);

    font-size: 14px;
    line-height: 1.45;
}

.pause-banner__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pause-banner-icon-bg);
    font-size: 18px;
}

.pause-banner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pause-banner__title {
    font-weight: 600;
    color: var(--pause-banner-fg);
    margin: 0 0 2px 0;
}

.pause-banner__meta {
    font-size: 12px;
    color: var(--pause-banner-meta-fg);
    /* Allow wrapping on narrow viewports without truncation */
    overflow-wrap: anywhere;
}

.pause-banner__link {
    flex: 0 0 auto;
    color: var(--pause-banner-link-fg);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
    white-space: nowrap;
}

.pause-banner__link:hover,
.pause-banner__link:focus-visible {
    border-color: var(--pause-banner-border);
    background: var(--pause-banner-icon-bg);
    text-decoration: none;
}

/* Stack vertically on narrow viewports — ≤500px */
@media (max-width: 500px) {
    .pause-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .pause-banner__link {
        align-self: stretch;
        text-align: center;
    }
}

/* SIRE sector theming — slightly warmer to match dashboard accent */
.pause-banner--sire {
    --pause-banner-fg: #ffd989;
    --pause-banner-link-fg: #fff0c2;
}