/* Service Status Page — Discord Status inspired layout, CUB SOFTWARE theme */

/* This page's own typography, distinct from the site-wide Poppins/Orbitron
   used by the shared header/footer (left untouched below). Inter for prose,
   Space Grotesk for the page display title, JetBrains Mono for data — scoped
   to .status-banner/.status-container only so the shared nav bar and footer
   keep rendering in the site's normal font. */
.status-banner,
.status-container {
    font-family: 'Inter', sans-serif;
}

/* ── Full-width overall status banner ── */
.status-banner {
    width: 100%;
    padding: 1.1rem 1.5rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.status-banner.operational {
    background: linear-gradient(90deg, #2d8a4e, #37b567);
    color: #ffffff;
}

.status-banner.degraded {
    background: linear-gradient(90deg, #b8940a, #e0b52c);
    color: #15181d;
}

.status-banner.outage {
    background: linear-gradient(90deg, #a8323a, #d3454e);
    color: #ffffff;
}

.status-banner.loading {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.status-container {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    flex: 1;
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Header ── */
.status-header {
    margin-bottom: 1.75rem;
}

.status-header .status-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
}

/* ── Section groups (collapsible <details>) ── */
.status-section {
    margin-bottom: 1.75rem;
}

.status-section summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0.75rem;
}

.status-section summary::-webkit-details-marker { display: none; }

.status-section h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/* Scoped to actual <details> elements only — the "System Metrics" section
   reuses .status-section for spacing/heading styles but is a plain <div>,
   not collapsible, so it shouldn't grow a fake collapse-arrow. */
details.status-section h2::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
}

details.status-section:not([open]) h2::before {
    transform: rotate(-45deg);
}

.group-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.25);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

/* One bordered box per group; rows inside separated by hairlines instead of
   each service being its own floating card — closer to a real status page. */
.status-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

/* Grid, not flex+space-between — with 3 items (info / pill / chevron) and a
   variable-width first column, space-between shifts the pill's horizontal
   position per row instead of anchoring it to a consistent column. Grid with
   a flexible first column and fixed-content remaining columns keeps every
   row's status pill aligned in the same place regardless of its text length. */
.status-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}

.status-row-info { min-width: 0; }

.status-item:first-child .status-row { border-top: none; }

.status-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.status-row-expandable { cursor: pointer; }

/* ── Expand/collapse chevron + detail panel ── */
.status-chevron {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.status-item.expanded .status-chevron { transform: rotate(180deg); }

.status-expanded {
    display: none;
    padding: 0 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.015);
}

.status-item.expanded .status-expanded { display: block; }

.status-expanded-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'JetBrains Mono', monospace;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.status-expanded-meta b { color: rgba(255, 255, 255, 0.75); }

/* Nested child instances (e.g. individual custom bot deployments) */
.status-children {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.status-child-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex-wrap: wrap;
}

.status-child-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.status-child-meta {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'JetBrains Mono', monospace;
    flex: 1;
}

.status-child-row .status-pill {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.status-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.status-row-name {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.92rem;
}

.status-row-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.status-row-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 0.2rem;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
}

/* ── API Endpoints — compact rows, distinct from full service cards since
   there's no PM2 process/uptime/expand behind an endpoint, just a path and
   a status. Reusing the big card layout for these left them looking like
   an empty, undersized copy of a real service card. ── */
.api-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.api-group .status-item:first-child,
.api-row:first-child { border-top: none; }

.api-row-info {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}

.api-row-info .status-dot { align-self: center; }

.api-row-name {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.86rem;
    flex-shrink: 0;
}

.api-row-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-row-path {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
}

.api-row-status {
    font-size: 0.72rem;
    white-space: nowrap;
}

.api-row-status.online   { color: #3f9e63; }
.api-row-status.offline  { color: #d10a10; }
.api-row-status.degraded { color: #b98b2e; }

/* Every status label on the page — the main service pill, the compact API
   row status, and the "Status: X" line inside an expanded card — reads as
   the same system-generated badge: monospace, uppercase, letter-spaced.
   Keeps "Operational" looking identical everywhere it appears instead of
   quietly switching to the body font in some spots. */
.status-pill,
.api-row-status,
.status-expanded-meta b {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Status dots ── */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: #3f9e63;
    box-shadow: 0 0 8px rgba(87, 242, 135, 0.6);
    animation: pulse-online 2s ease-in-out infinite;
}

@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 4px rgba(87, 242, 135, 0.4); }
    50% { box-shadow: 0 0 12px rgba(87, 242, 135, 0.7); }
}

.status-dot.offline { background: #d10a10; box-shadow: 0 0 6px rgba(237, 66, 69, 0.5); }

.status-dot.degraded {
    background: #b98b2e;
    box-shadow: 0 0 8px rgba(254, 231, 92, 0.6);
    animation: pulse-degraded 2s ease-in-out infinite;
}

@keyframes pulse-degraded {
    0%, 100% { box-shadow: 0 0 4px rgba(254, 231, 92, 0.4); }
    50% { box-shadow: 0 0 12px rgba(254, 231, 92, 0.8); }
}

.status-pill.online  { color: #3f9e63; }
.status-pill.offline { color: #d10a10; }
.status-pill.degraded { color: #b98b2e; }

/* ── 90-day uptime strip (per service card) ── */
.status-uptime {
    padding: 0 1.25rem 1rem;
}

.status-item:last-child .status-uptime { padding-bottom: 1.1rem; }

.status-uptime-bars {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 28px;
}

.uptime-bar {
    flex: 1 1 0;
    min-width: 1px;
    border-radius: 2px;
    background: #3f9e63;
    cursor: default;
    transition: opacity 0.15s;
}

.uptime-bar:hover { opacity: 0.7; }

.uptime-bar.online   { background: #3f9e63; }
.uptime-bar.degraded { background: #b98b2e; }
.uptime-bar.offline  { background: #d10a10; }
.uptime-bar.no-data  { background: rgba(255, 255, 255, 0.08); }

.status-uptime-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'JetBrains Mono', monospace;
}

.status-uptime-pct {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

/* ── System Metrics ── */
.metrics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.metrics-head h2 {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.metrics-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.metrics-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.metrics-tab:hover { color: rgba(255, 255, 255, 0.7); }

.metrics-tab.active {
    background: rgba(165, 15, 18, 0.18);
    color: #c23a3d;
}

.metrics-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1rem;
}

.metrics-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.metrics-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #ffffff;
}

.metrics-card-avg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #d10a10;
    font-weight: 600;
}

.metrics-chart-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}

.metrics-chart {
    width: 100%;
    height: 100%;
    display: block;
}

.metrics-empty {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    padding: 1rem;
}

.metrics-card-foot {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
    .status-uptime-bars { height: 22px; }
    .metrics-head { flex-direction: column; align-items: flex-start; }
}

/* ── Past incidents ── */
.incidents-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
    /* Left-aligned and at readable weight: an incident log is read line by line,
       and the centred dim treatment below is only right for the empty state. */
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.incidents-box.is-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

/* ── Footer row ── */
.status-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.last-updated-text {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(165, 15, 18, 0.1);
    border: 1px solid rgba(165, 15, 18, 0.25);
    color: #d10a10;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all 0.2s;
}

.refresh-btn:hover {
    background: rgba(165, 15, 18, 0.18);
    border-color: rgba(165, 15, 18, 0.4);
    color: #c23a3d;
}

.status-loading {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
    .status-row { grid-template-columns: 1fr; row-gap: 0.5rem; }
    .status-pill { justify-self: start; }
    .status-chevron { display: none; }
    .status-footer-row { flex-direction: column; text-align: center; }
    .status-header { flex-direction: column; align-items: flex-start; }

    .api-row { grid-template-columns: 1fr; row-gap: 0.4rem; }
    .api-row-info { flex-wrap: wrap; }
    .api-row-path, .api-row-status { justify-self: start; }
}

/* ── response-time chart: hover tooltip and series legend ────────────────── */

.metrics-chart { cursor: crosshair; }

.metrics-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    background: rgba(8, 9, 11, .96);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    padding: .45rem .6rem;
    font-size: .78rem;
    line-height: 1.35;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metrics-tip[hidden] { display: none; }

.metrics-tip .tip-time {
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    margin-bottom: 2px;
}

.metrics-tip .tip-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
}

.metrics-tip .tip-row i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.metrics-tip .tip-row b {
    margin-left: auto;
    padding-left: .9rem;
    font-variant-numeric: tabular-nums;
}

.metrics-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    margin-top: .7rem;
}

.metrics-key {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .6);
}

.metrics-key i {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.metrics-card-sub {
    display: block;
    font-size: .72rem;
    color: rgba(255, 255, 255, .4);
    margin-top: 2px;
}

.metrics-card-titles { display: flex; flex-direction: column; min-width: 0; }

/* Y-axis labels sit in HTML, not the SVG: the chart uses
   preserveAspectRatio="none" and stretches, which would distort any text. */
.metrics-axis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.metrics-axis span {
    position: absolute;
    left: 2px;
    transform: translateY(-50%);
    font-size: .66rem;
    color: rgba(255, 255, 255, .35);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, rgba(14,16,19,.9) 70%, transparent);
    padding-right: .4rem;
}

.metrics-tip .tip-row.idle { opacity: .45; }
.metrics-tip .tip-idle { font-weight: 400; color: rgba(255,255,255,.5); }

.metrics-key.idle { opacity: .4; }

/* Legend entries carry a short note saying what each series measures. */
.metrics-legend { flex-direction: column; gap: .3rem; }

.metrics-key {
    align-items: baseline;
    gap: .5rem;
    line-height: 1.4;
}

.metrics-key i { align-self: center; }
.metrics-key .key-name { color: rgba(255, 255, 255, .8); font-weight: 600; }

.metrics-key em {
    font-style: normal;
    color: rgba(255, 255, 255, .38);
    font-size: .72rem;
}

/* ── Cluster rows expand to list the bots inside ───────────────────────────── */
.status-child-row[data-cx] { cursor: pointer; }
.status-child-row[data-cx]:hover { background: rgba(255, 255, 255, 0.06); }
.status-child-row[data-cx]:focus-visible {
    outline: 2px solid #a50f12;
    outline-offset: 2px;
}
.cx-caret {
    display: inline-block;
    transition: transform 0.15s ease;
    color: rgba(255, 255, 255, 0.45);
    margin-right: 0.15rem;
}
.status-child-row.cx-expanded .cx-caret { transform: rotate(90deg); }

/* [hidden] only sets display:none through the UA stylesheet, and the rule below
   is more specific — so without this the panel is permanently open and clicking
   the cluster does nothing visible. */
.status-bots[hidden] { display: none; }

.status-bots {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.35rem 0 0.55rem 1.5rem;
    padding-left: 0.75rem;
    /* A rule down the left ties the bots to the cluster they belong to. */
    border-left: 2px solid rgba(165, 15, 18, 0.35);
}
.status-bot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 0.88rem;
}
.status-bot-name { color: rgba(255, 255, 255, 0.82); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .cx-caret { transition: none; } }

/* ── Past incidents ─────────────────────────────────────────────────────── */
.incident-day + .incident-day { margin-top: 2rem; }

.incident-day-head {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-align: left;
    padding-bottom: .6rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.incident-item + .incident-item {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.incident-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .85rem;
}

.incident-badge {
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.incident-badge.online   { background: rgba(74, 222, 128, .15); color: #3f9e63; }
.incident-badge.degraded { background: rgba(250, 204, 21, .15); color: #facc15; }
.incident-badge.offline  { background: rgba(248, 113, 113, .15); color: #c23a3d; }

/* Each update is a step on a vertical timeline, most recent first. */
.incident-update {
    position: relative;
    padding: 0 0 1rem 1.35rem;
    border-left: 2px solid rgba(255, 255, 255, .1);
}
.incident-update:last-child { padding-bottom: 0; border-left-color: transparent; }
.incident-update::before {
    content: '';
    position: absolute;
    left: -5px;
    top: .35rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
}
.incident-update.resolved::before      { background: #3f9e63; }
.incident-update.investigating::before { background: #facc15; }

.incident-update-head {
    display: block;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    margin-bottom: .2rem;
}
.incident-update.resolved .incident-update-head      { color: #3f9e63; }
.incident-update.investigating .incident-update-head { color: #facc15; }

.incident-update-text { color: rgba(255, 255, 255, .78); line-height: 1.5; }
.incident-update-time { font-size: .78rem; color: rgba(255, 255, 255, .45); margin-top: .3rem; }

/* A human explanation of what was actually done, distinct from the automated
   timeline above it. The machine can say a service stopped responding and later
   recovered; only a person can say why, and that is the part a reader wants —
   so it is given its own colour and sits at the top of the incident rather than
   being buried at the end of a list of generated updates. */
.incident-update.resolution {
    border-left-color: rgba(165, 15, 18, .5);
    background: rgba(165, 15, 18, .06);
    border-radius: 0 6px 6px 0;
    padding-top: .5rem;
    padding-right: .75rem;
    margin-bottom: .6rem;
}
.incident-update.resolution::before { background: #a50f12; }
.incident-update.resolution .incident-update-head { color: #a5b0ff; }

/* ── Incident history calendar ─────────────────────────────────────────────
   A month should read as a shape at a glance. The first attempt gave each day
   `aspect-ratio: 1/1` inside a full-width container, which made every cell a
   ~100px empty box and a month a wall of them — the data was a tiny number in
   the corner of a lot of nothing. The grid is now capped and the cells are
   small, so the colour does the talking. */
.sh-cal {
    /* 380px made a 48px cell — legible but cramped, and it left the section
       looking like a widget dropped into a wide page. 600px gives ~78px cells:
       big enough to read and click comfortably, without going back to the
       wall-of-empty-boxes the first attempt had. */
    max-width: 600px;
    margin: 0 auto;
}
.sh-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .9rem;
}
.sh-cal-head h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: .02em;
    text-align: center;
    flex: 1;
}
.sh-nav {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    transition: background .12s, border-color .12s, color .12s;
}
.sh-nav:hover { background: rgba(255, 255, 255, .09); color: #fff; border-color: rgba(255, 255, 255, .25); }

.sh-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
    margin: 0 auto .9rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .45);
}
.sh-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sh-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sh-dot.ok   { background: #3ba55d; }
.sh-dot.bad  { background: #d10a10; }
.sh-dot.none { background: rgba(255, 255, 255, .12); }

.sh-grid-labels,
.sh-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.sh-grid-labels {
    margin-bottom: .45rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .3);
    text-align: center;
}

.sh-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .5);
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 0;
    transition: border-color .12s, background .12s, color .12s;
}
.sh-cell.empty { border: none; background: none; cursor: default; }
.sh-cell.ok  { background: rgba(59, 165, 93, .22);  border-color: rgba(59, 165, 93, .4);  color: rgba(255,255,255,.75); }
.sh-cell.bad { background: rgba(237, 66, 69, .26);  border-color: rgba(237, 66, 69, .55); color: #fff; font-weight: 600; }
.sh-cell.today { box-shadow: inset 0 0 0 2px rgba(165, 15, 18, .9); }
/* A day that has not happened is not "no data" — it is not a day at all. */
.sh-cell.future { opacity: .2; cursor: default; }
.sh-cell:not(.empty):not(.future):hover { border-color: rgba(255, 255, 255, .35); }
.sh-cell.selected { border-color: #a50f12; background: rgba(165, 15, 18, .25); color: #fff; }

/* The count sits as a corner marker rather than a second number competing with
   the date — how many is secondary to whether. */
.sh-count {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: .68rem;
    font-weight: 700;
    color: #ffb4b4;
    line-height: 1;
}

.sh-day-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}
.sh-day-stats strong { color: #fff; font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
    .sh-cal { max-width: 100%; }
    .sh-grid, .sh-grid-labels { gap: 3px; }
    .sh-cell { font-size: .72rem; }
}

/* A section heading with a control on the right. The link used to be floated
   inside the <h2>, which the uppercase heading style rendered as part of the
   title — "PAST INCIDENTS LAST 3 DAYS FULL HISTORY" read as one run of words. */
.section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.section-head-row h2 { margin: 0; }
.section-head-note {
    font-size: .78rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .4);
}

/* ── Fix Reason, admin-only ──────────────────────────────────────────────────
   Deliberately quiet: it sits on a public page and must not compete with the
   incident content that visitors came to read. */
.incident-admin {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.incident-reason-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,.16));
    color: var(--text-secondary, #9aa0aa);
    font: inherit;
    font-size: .82rem;
    padding: .35rem .75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.incident-reason-btn:hover:not(:disabled) {
    border-color: var(--accent, #a50f12);
    color: var(--text-primary, #fff);
}
.incident-reason-btn:disabled { opacity: .55; cursor: default; }

/* Phones: the metrics range tabs were 26px tall — too small to hit with a thumb. */
@media (max-width: 768px) {
    .metrics-tab { min-height: 40px; padding: .5rem .9rem; }
}