/* ── common.css — Shared styles across light-theme pages ── */
/* Pages: budget2026, tax_compare, housing, housing_live, rbnz, news, education, ps_performance */

/* ════════════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — Cross-document root cross-fade (same-origin MPA)
   Pilot: ps_performance.html. Other dashboards share this block on rollout.

   Both the source (index.html, inline @view-transition at-rule) and the
   destination (dashboards, this file) opt in via @view-transition so Chrome
   /Edge 123+ runs a smooth root cross-fade between page loads. Gracefully
   degrades to a CSS body fade+slide fallback for Safari/Firefox (no
   cross-document VT support).

   NOTE: We deliberately animate only the `root` pseudo-elements, NOT any
   named view-transition-name on React-managed containers. Putting a
   view-transition-name on #root caused React render crashes on back-button
   navigation (ErrorBoundary "Something went wrong"). The root cross-fade
   is stable and crash-free.
   ════════════════════════════════════════════════════════════════════════ */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: bb-vt-fade-out 350ms ease-out forwards;
}
::view-transition-new(root) {
    animation: bb-vt-fade-in 540ms ease-out forwards;
}

@keyframes bb-vt-fade-out {
    to { opacity: 0; }
}
@keyframes bb-vt-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Fallback entrance animation (Safari/Firefox, no VT support) ──
   Triggered by body.bb-entering class added by js/bb-breadcrumb.js on load.
   Only runs in browsers WITHOUT view-transition support. */
@supports not (view-transition-name: none) {
    body.bb-entering {
        animation: bb-vt-fade-in 540ms ease-out both;
    }
}

/* ── TICKER ── */
.ticker-wrap {
    overflow: hidden;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 8px;
}

.ticker-inner {
    display: flex;
    width: max-content;
    animation: tick 90s linear infinite;
}

    .ticker-inner:hover {
        animation-play-state: paused;
    }

@keyframes tick {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* ── WATERMARK ── */
.wm {
    position: fixed;
    top: 14px;
    right: 18px;
    font-style: italic;
    font-size: 15px;
    color: rgba(0,0,0,0.3);
    font-family: Georgia,serif;
    pointer-events: none;
    z-index: 9999;
    user-select: none;
    letter-spacing: 0.03em;
}

/* ── KPI CARDS ── */
.kpi {
    background: #deeaf7;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #b3d0ea;
}

    .kpi .kl {
        font-size: 9px;
        color: #3a6080;
        margin-bottom: 3px;
        line-height: 1.4;
    }

    .kpi .kv {
        font-size: 16px;
        font-weight: 600;
    }

    .kpi .ks {
        font-size: 9px;
        color: #4a7090;
        margin-top: 2px;
    }

/* ── INPUT / SELECT ── */
input, select {
    background: #f5f5f3;
    border: 0.5px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
}

/* ── FOLDER BODY (tab content wrapper) ── */
#folder-body {
    border: 1px solid #999;
    border-radius: 0 0 6px 6px;
    padding: 16px 18px 18px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    position: relative;
    z-index: 1;
}

/* ── LIGHT FOLDER-TAB BUTTONS ── */
.tab-btn {
    padding: 8px 18px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 600;
    border: 1px solid #999;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: 2px -2px 6px rgba(0,0,0,0.15);
}

    .tab-btn.active {
        background: #fff;
        color: #1a1a1a;
        z-index: 10;
        position: relative;
        margin-bottom: -2px;
        padding-bottom: 12px;
        box-shadow: none;
    }

    .tab-btn.inactive {
        background: #cecbc3;
        color: #222;
    }

        .tab-btn.inactive:hover {
            background: #bbb9b1;
            border-color: #777;
        }

/* ── COPYRIGHT FOOTER ── */
.bb-copyright {
    position: fixed;
    bottom: 0.6rem;
    right: 1rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    z-index: 9999;
    pointer-events: none;
}

    .bb-copyright a {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: underline;
        pointer-events: auto;
    }

        .bb-copyright a:hover {
            color: #ffffff;
        }