:root {
    --navy-deep: #0b1a3a;
    --navy: #10224d;
    --navy-panel: #101f47;
    --teal: #2dd4c4;
    --teal-dim: #1c8f85;
    --cream: #eeece6;
    --amber: #e8993f;
    --ink: #f4f5f7;
    --muted: #9aa6c4;
    --radius-lg: 1.375rem;
    --radius-sm: 0.875rem;
    /* severity + status palette, kept in the same family as the base tokens */
    --sev-high: #b3312c;
    --sev-med: #b8842a;
    --sev-low: #5b6b8c;
    --sev-positive: #3f7d4f;
    --ink-navy: #10224d;
    --ink-navy-soft: #4a5578;
    --hairline: rgba(16,34,77,0.08);
}

* {
    box-sizing: border-box;
}

/*
    Signage scaling strategy:
    This page is built for fixed-size displays (1080p up to 4K/8K), not a
    resizable browser window, so we scale the whole UI off viewport width
    rather than using fixed pixel values. The baseline is tuned so 16px
    design-time sizing lands at a 1920px-wide screen; every other rule below
    uses rem, so the entire layout (type, spacing, radii, icons) scales
    together at any resolution. clamp() keeps things sane if this is ever
    previewed in an ordinary browser window instead of on a fixed panel.
  */
html {
    font-size: clamp(12px, 0.8333vw, 64px);
}

body {
    margin: 0;
    padding: 0;
    background: var(--cream);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    color: var(--ink);
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---------- Header ---------- */
header {
    background: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

    .brand svg {
        width: 2.625rem;
        height: 2.625rem;
        flex-shrink: 0;
    }

.brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}

    .brand-name span {
        color: var(--teal);
    }

.project-tag {
    margin-left: 1.75rem;
    padding-left: 1.75rem;
    border-left: 1px solid rgba(255,255,255,0.15);
    font-size: 1.5rem;
    color: #dfe3ee;
}

    .project-tag b {
        color: var(--teal);
        font-weight: 600;
    }

.header-right {
    display: flex;
    align-items: center;
    gap: 2.125rem;
}

.signal-dots {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}

    .signal-dots .bar {
        width: 1.375rem;
        height: 0.375rem;
        border-radius: 0.1875rem;
        background: var(--teal);
    }

    .signal-dots .dot {
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
    }

        .signal-dots .dot.on {
            background: var(--teal);
        }

.weather {
    text-align: center;
}

    .weather .temp {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--teal);
    }

    .weather .cond {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        color: var(--muted);
    }

.clock {
    text-align: center;
}

    .clock .time {
        font-size: 1.5rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .clock .date {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        color: var(--muted);
    }

/* ---------- Main layout ---------- */
main {
    padding: 1.75rem;
}

/*
    .dashboard is the shared white/cream card shell used by every page.
    Some pages (the home/overview page) lay their two top-level children
    out as a 2-column grid; others (the observations page) just stack
    block children (page-head, stat-row, content-grid) inside it. Rather
    than redefine the shell twice, the shared visual properties live here
    and the grid behavior is opt-in via .dashboard--split.
  */
.dashboard {
    background: #fbfaf7;
    border-radius: 1.75rem;
    padding: 1.75rem;
    box-shadow: 0 1.25rem 3.125rem rgba(10,20,50,0.12);
}

.dashboard--split {
    display: grid;
    grid-template-columns: minmax(20rem, 0.85fr) 1.4fr;
    gap: 1.5rem;
}

/* ---------- Intro panel ---------- */
.intro {
    background: var(--navy-panel);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 70vh;
    position: relative;
    overflow: hidden;
}

    .intro::before {
        content: "";
        position: absolute;
        top: -3.75rem;
        right: -3.75rem;
        width: 13.75rem;
        height: 13.75rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(45,212,196,0.12), transparent 70%);
    }

.breadcrumb {
    position: absolute;
    top: 2.25rem;
    left: 2.25rem;
    font-size: 1.25rem;
    letter-spacing: 0.14em;
    color: var(--teal);
    font-weight: 600;
}

.intro h1 {
    font-size: 4.2rem;
    line-height: 1;
    margin: 0 0 0.375rem 0;
    font-weight: 800;
    color: #ffffff;
}

.intro h2 {
    font-size: 2.1rem;
    margin: 0 0 1.375rem 0;
    font-weight: 700;
    color: var(--teal);
}

.intro p {
    max-width: 34ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #b8c0d6;
    margin: 0;
}

/* ---------- Media gallery ---------- */
/* Flat grid: children are plain sibling .media-card items (img1/img2/img3).
   The modifier class on .gallery (gallery--1 / gallery--2 / gallery--3)
   remaps those slots into the hero + two-smaller layout, or lets a single
   image fill the whole area. */
.gallery {
    display: grid;
    grid-template-rows: 1.7fr 1fr;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
}

    .gallery.gallery--3 {
        grid-template-areas:
            "a a"
            "b c";
    }

    .gallery.gallery--2 {
        grid-template-areas:
            "a a"
            "b b";
    }

    .gallery.gallery--1 {
        grid-template-areas:
            "a a"
            "a a";
    }

.media-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 12.5vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .media-card.img1 { grid-area: a; }
    .media-card.img2 { grid-area: b; }
    .media-card.img3 { grid-area: c; }

    .media-card .label {
        position: relative;
        z-index: 2;
        padding: 1.125rem 1.375rem;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.5);
    }

    .media-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
        z-index: 1;
    }

/* Fallback gradients: shown behind/instead of a photo if ImagePath is
   empty for a given slot, so the panel never renders blank. */
.media-card.img1:not([style*="background-image"]) {
    background-image: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.5), transparent 40%), linear-gradient(160deg, #cfd9e6 0%, #aebbd0 35%, #8fa0bf 60%, #6f84ab 100%);
}

.media-card.img2:not([style*="background-image"]) {
    background-image: linear-gradient(150deg, #d8cdb8 0%, #ab9169 45%, #7c6748 100%);
}

.media-card.img3:not([style*="background-image"]) {
    background-image: linear-gradient(160deg, #a9c8dc 0%, #7fa6c2 55%, #3c5a76 100%);
}

/* ---------- Page header row (observations page) ---------- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0.25rem 1.5rem 0.25rem;
}

.page-head h1 {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--ink-navy);
    letter-spacing: -0.01em;
}

.page-head .meta {
    text-align: right;
}

.page-head .range {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-navy);
}

.page-head .sub {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--ink-navy-soft);
}

/* ---------- Stat row ---------- */
.stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.3fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 8rem;
    box-shadow: 0 0.25rem 0.75rem rgba(10,20,50,0.05);
}

.stat-card .num {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
}

.stat-card .lbl {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-navy-soft);
}

.stat-card.high .num { color: var(--sev-high); }
.stat-card.med .num { color: var(--sev-med); }
.stat-card.low .num { color: var(--sev-low); }
.stat-card.positive .num { color: var(--sev-positive); }

.stat-card.total {
    background: var(--navy-deep);
}

    .stat-card.total .num {
        color: #ffffff;
    }

    .stat-card.total .lbl {
        color: var(--muted);
    }

/* ---------- Content grid ---------- */
.content-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.panel {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(10,20,50,0.05);
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.panel-head h2 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-navy-soft);
}

.panel-head .count {
    font-size: 0.7rem;
    color: #a4abc4;
}

/* ---------- Observation list ---------- */
.obs-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--hairline);
}

    .obs-item:last-child {
        border-bottom: none;
        padding-bottom: 0.25rem;
    }

.pill {
    align-self: start;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    border-radius: 0.3rem;
    white-space: nowrap;
}

.pill.low { background: var(--sev-low); }
.pill.medium { background: var(--sev-med); }
.pill.high { background: var(--sev-high); }
    .pill.critical {
        background: var(--sev-high);
    }

.obs-text {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ink-navy);
}

.obs-side {
    text-align: right;
    white-space: nowrap;
}

.obs-party {
    font-size: 0.85rem;
    color: var(--ink-navy);
}

.obs-when {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--ink-navy-soft);
}

/* ---------- Sidebar ---------- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.party-row {
    margin-bottom: 1.1rem;
}

    .party-row:last-child {
        margin-bottom: 0;
    }

.party-row .row-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--ink-navy);
    margin-bottom: 0.4rem;
}

.party-row .row-top b {
    font-weight: 700;
}

.track {
    height: 0.4rem;
    background: #eef0f5;
    border-radius: 999px;
    overflow: hidden;
}

.track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ink-navy-soft);
}

.party-row.lead .track > span {
    background: var(--teal);
}

/* ---------- Close-out card ---------- */
.closeout-num {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin: 0.5rem 0 1.5rem 0;
}

.closeout-num .big {
    font-size: 4.4rem;
    font-weight: 800;
    color: var(--sev-positive);
    line-height: 1;
}

    .closeout-num .big sup {
        font-size: 1.6rem;
        font-weight: 700;
    }

.closeout-num .desc {
    padding-top: 2rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ink-navy-soft);
    max-width: 25ch;
}

.closeout-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--hairline);
    padding-top: 1.1rem;
}

.closeout-stats div {
    text-align: left;
}

.closeout-stats .val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink-navy);
}

.closeout-stats .val.accent { color: var(--sev-med); }

.closeout-stats .val small {
    font-size: 0.9rem;
    font-weight: 700;
}

.closeout-stats .lbl {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--ink-navy-soft);
}

/* ---------- Camera grid (2-panel Timescapes template) ---------- */
.camera-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.camera-panel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 0.25rem 0.75rem rgba(10,20,50,0.08);
    background: var(--navy-panel);
}

    .camera-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .camera-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,0.6) 100%);
        pointer-events: none;
    }

.camera-label {
    position: absolute;
    left: 1.25rem;
    bottom: 1rem;
    z-index: 2;
    font-family: 'Consolas', 'SFMono-Regular', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.5);
}

/* fallback for narrow/portrait windows, matching the existing breakpoint */
@media (max-width: 61.25em) {
    .camera-grid {
        grid-template-columns: 1fr;
    }
}

/* programme layout -- single panel*/
/* ---------- Programme page head (legend + date range + task count) ---------- */
.page-head--programme {
    align-items: center;
}

.programme-meta {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.legend {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-navy-soft);
}

.legend-swatch {
    width: 1.375rem;
    height: 0.4rem;
    border-radius: 999px;
    display: inline-block;
}

    .legend-swatch.promised {
        background: var(--teal);
    }

    .legend-swatch.planned {
        background: var(--sev-med);
    }

    .legend-swatch.done {
        background: #d7dae4;
    }

.meta-divider {
    width: 1px;
    align-self: stretch;
    background: var(--hairline);
}

.date-range {
    text-align: right;
}

    .date-range .from-today {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--teal-dim);
        margin-bottom: 0.2rem;
    }

    .date-range .range-val {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--ink-navy);
    }

.task-count {
    text-align: center;
}

    .task-count .num {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--ink-navy);
        line-height: 1;
    }

    .task-count .lbl {
        margin-top: 0.15rem;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #a4abc4;
    }

/* ---------- Empty-state panel ---------- */
.panel--empty {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.empty-state {
    text-align: center;
    max-width: 46rem;
}

    .empty-state h3 {
        margin: 0 0 0.875rem 0;
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--ink-navy);
    }

    .empty-state p {
        margin: 0;
        font-family: 'Consolas', 'SFMono-Regular', ui-monospace, monospace;
        font-size: 0.85rem;
        line-height: 1.6;
        color: var(--ink-navy-soft);
    }

@media (max-width: 61.25em) {
    .page-head--programme {
        align-items: flex-start;
    }

    .programme-meta {
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
    }

    .meta-divider {
        display: none;
    }

    .date-range {
        text-align: left;
    }
}

/* Hazard Board layout */

/* ---------- Hazard board (split panel template) ---------- */
.dashboard--hazard {
    display: grid;
    grid-template-columns: minmax(20rem, 0.85fr) 2.2fr;
    padding: 0;
    overflow: hidden;
}

/* ---------- Hazard sidebar (left, cream) ---------- */
.hazard-sidebar {
    background: var(--cream);
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
}

.hazard-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

    .hazard-alert .icon-badge {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        border: 2px solid var(--sev-high);
        color: var(--sev-high);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        font-weight: 800;
    }

    .hazard-alert h2 {
        margin: 0;
        font-size: 1.35rem;
        line-height: 1.25;
        font-weight: 800;
        color: var(--sev-high);
    }

.hazard-rules {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

    .hazard-rules li {
        position: relative;
        padding-left: 1.5rem;
        font-size: 1rem;
        line-height: 1.4;
        color: var(--ink-navy-soft);
    }

        .hazard-rules li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 0.9rem;
            height: 2px;
            background: var(--sev-high);
        }

        .hazard-rules li b {
            color: var(--ink-navy);
            font-weight: 700;
        }

.ppe-icons {
    margin-top: auto;
    display: flex;
    gap: 0.875rem;
}

.ppe-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 0.6rem;
    background: #14bbbb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

    .ppe-icon img {
        width: 4.5rem;
        height: 4.5rem;
        fill: none;
    }

/* ---------- Hazard main (right, white) ---------- */
.hazard-main {
    background: #fbfaf7;
    display: flex;
    flex-direction: column;
}

.hazard-banner {
    background: var(--sev-high);
    padding: 1.75rem 2.25rem;
    text-align: center;
}

    .hazard-banner h1 {
        margin: 0;
        font-size: 2.6rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        color: #ffffff;
    }

.hazard-body {
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hazard-meta-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 2.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1.0rem;
    border-bottom: 1px solid var(--hairline);
}

    .hazard-meta-row .lbl {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--sev-high);
        margin-bottom: 0.4rem;
    }

    .hazard-meta-row .val {
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink-navy);
        padding-bottom: 0.5rem;
        /*border-bottom: 1px solid var(--hairline);*/
    }

    .hazard-meta-row .meta-col:not(:first-child) .val {
        border-bottom: none;
    }

/* ---------- Hazards table ---------- */
.hazard-table {
    flex: 1;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: 0 1.5rem;
    overflow: hidden;
}

.hazard-table-head {
    display: grid;
    grid-template-columns: 0.85fr 1.5fr;
    gap: 1.5rem;
    padding: 1rem 0;
}

    .hazard-table-head span {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--sev-high);
    }

.hazard-row {
    display: grid;
    grid-template-columns: 0.85fr 1.5fr;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--hairline);
    align-items: start;
}

    .hazard-row:last-child {
        padding-bottom: 1.25rem;
    }

.hazard-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-navy);
}

.hazard-control {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--ink-navy-soft);
}

/* ---------- Site notices ---------- */
.hazard-notices {
    margin-top: 1.5rem;
}

    .hazard-notices .lbl {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--sev-high);
        margin-bottom: 0.4rem;
    }

    .hazard-notices p {
        margin: 0;
        font-size: 0.92rem;
        color: var(--ink-navy);
    }

@media (max-width: 61.25em) {
    .dashboard--hazard {
        grid-template-columns: 1fr;
    }

    .hazard-meta-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/*
    ---------- Fallback layout ----------
    Because sizing scales with viewport width via the html{font-size: vw}
    rule above, this page looks the same proportionally at 1080p, 4K, or 8K
    without needing resolution-specific breakpoints. The queries below exist
    only as a fallback for narrow/portrait windows (e.g. previewing in an
    ordinary desktop browser tab), not for signage use.
  */
@media (max-width: 61.25em) {
    header {
        flex-wrap: wrap;
        gap: 0.875rem;
    }

    .project-tag {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .dashboard--split {
        grid-template-columns: 1fr;
    }

    .intro {
        min-height: 26.25rem;
    }

        .intro h1 {
            font-size: 3.2rem;
        }

    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-head .meta {
        text-align: left;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .stat-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 38.75em) {
    .header-right {
        gap: 1.125rem;
        flex-wrap: wrap;
    }

    .gallery.gallery--3,
    .gallery.gallery--2,
    .gallery.gallery--1 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a"
            "b"
            "c";
    }

    .gallery.gallery--2 {
        grid-template-areas:
            "a"
            "b";
    }

    .gallery.gallery--1 {
        grid-template-areas: "a";
    }

    .obs-item {
        grid-template-columns: 1fr;
    }

    .obs-side {
        text-align: left;
    }
}
/* Veyor Panel */
.veyor-panel {
    min-height: 75vh;
}

/* ----- Leader Board ----- */
/* ---------- Two-column ranked list ---------- */
.leaderboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
}

.rank-row {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 1.05rem;
}

    .rank-row:last-child {
        margin-bottom: 0;
    }

    .rank-row .rank-num {
        padding-top: 0.15rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: #a4abc4;
    }

    .rank-row.top .rank-num {
        color: var(--teal-dim);
    }

    .rank-row .party-row {
        margin-bottom: 0;
    }

/* ---------- Dark "top reporter" side panel ---------- */
.panel--dark {
    background: var(--navy-deep);
    color: #ffffff;
}

    .panel--dark .panel-head h2 {
        color: var(--muted);
    }

    .panel--dark .panel-head .count {
        color: var(--muted);
    }

.top-reporter {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0 1.5rem 0;
}

.avatar-badge {
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--navy-deep);
}

.top-reporter-name {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.05;
}

.top-reporter-count {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

    .top-reporter-count .num {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--amber);
    }

    .top-reporter-count .lbl {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--muted);
    }

.top-reporter-sub {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.also-reporting {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.25rem;
}

    .also-reporting .panel-head h2 {
        margin-bottom: 0.75rem;
    }

.also-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

    .also-row:last-child {
        border-bottom: none;
    }

    .also-row b {
        font-weight: 700;
        color: #ffffff;
    }

.side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

    .side-stats .val {
        font-size: 1.9rem;
        font-weight: 800;
        color: var(--amber);
    }

    .side-stats div:not(:first-child) .val {
        color: #ffffff;
    }

    .side-stats .lbl {
        margin-top: 0.2rem;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--muted);
    }

/* leaderboard page uses a narrower right column than the default content-grid */
.content-grid--leaderboard {
    grid-template-columns: 1.65fr 1fr;
}

@media (max-width: 61.25em) {
    .leaderboard-cols {
        grid-template-columns: 1fr;
    }
}