/* ============================================================
 * status.css v3 — clean editorial layout
 * ============================================================
 * Restraint over density. One big banner answers "is it working?"
 * Component cards below answer "which service?". Whitespace is the
 * primary design element. Color used sparingly — green dot signals
 * operational, amber/crimson reserved for problems.
 *
 * v1 — initial deploy
 * v2 — hero split + KPIs + ribbon (rejected as cluttered)
 * v3 — this file: single banner, spacious cards, less chrome
 * ============================================================ */

/* ─── State colour tokens ────────────────────────────────── */
:root {
    --st-operational:    var(--moss);
    --st-operational-bg: rgba(163, 197, 133, 0.08);
    --st-degraded:       var(--amber);
    --st-degraded-bg:    rgba(255, 184, 107, 0.10);
    --st-partial:        #f59556;
    --st-partial-bg:     rgba(245, 149, 86, 0.10);
    --st-major:          var(--crimson);
    --st-major-bg:       rgba(255, 107, 92, 0.10);
    --st-maint:          var(--azure);
    --st-maint-bg:       rgba(122, 162, 247, 0.10);
    --st-unknown:        rgba(233, 228, 216, 0.10);
}

/* ============================================================
 * HEADER + FOOTER (chrome)
 * ============================================================ */

.status-public-header {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.status-public-bar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.05rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.status-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--ink);
    line-height: 1;
}
.status-brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
/* All three text children use line-height: 1 + matching font-size on
   the divider so the · bullet renders at the same optical height as
   Prospira's x-height. Then flex center aligns the small STATUS caps
   onto the same horizontal axis. No transform hacks — fragile against
   font swaps. */
.status-brand-name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    /* Lift the serif baseline so the visual centre of lowercase letters
       (x-height mid) lines up with the dot + STATUS cap-mid. Serif fonts
       have a lot of empty space above the baseline; without this the
       whole name sits visually higher than the row centre. */
    display: inline-flex;
    align-items: center;
}
.status-brand-divider {
    color: var(--ink-faint);
    margin: 0 0.1rem;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* The · glyph renders above its em's vertical centre — nudge down
       so it lands on Fraunces' lowercase x-height mid. */
    transform: translateY(2px);
}
.status-brand-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* Fixed-pixel nudge — same px as the dot so they land at the
       identical visual y, regardless of how each font's em renders
       its glyph within the box. */
    transform: translateY(2px);
}
.status-public-spacer { flex: 1 1 auto; }

/* Language toggle — typographic EN | PL */
.status-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    margin-right: 0.5rem;
}
.status-lang-btn {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font: inherit;
    cursor: pointer;
    padding: 0.4rem 0.3rem;
    position: relative;
    transition: color 180ms ease;
}
.status-lang-btn:hover { color: var(--ink); }
.status-lang-btn.is-active { color: var(--amber); }
.status-lang-btn.is-active::after {
    content: '';
    position: absolute;
    left: 0.3rem; right: 0.3rem; bottom: 0.1rem;
    height: 1px;
    background: var(--amber);
}
.status-lang-sep { color: var(--ink-faint); opacity: 0.5; }

.status-public-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--rule);
    transition: all 180ms ease;
}
.status-public-link:hover {
    color: var(--amber);
    border-color: color-mix(in oklab, var(--amber) 50%, transparent);
    background: var(--amber-soft);
}
.status-public-link iconify-icon { font-size: 0.9rem; }

/* ============================================================
 * FOOTER — editorial sign-off (refined)
 * ============================================================
 * Amber gradient hairline + centered § ornament closes the page
 * like the end of a printed section. Three balanced blocks:
 * brand / discover / live signal. Italic Fraunces tagline breaks
 * the otherwise mono-heavy chrome.
 *
 * Defensive resets: `text-transform: none` is force-applied to
 * the brand line + tagline + actions because some <a>-tag cascade
 * from base.html / styles.css was uppercasing them inconsistently
 * (sentence-case <button>s but uppercase <a>s in the same row).
 */

.status-public-footer {
    /* Subscribe section already carries a 3rem bottom margin; pairing with
       footer's old 5.5rem top margin created an awkward 8.5rem of dead space
       between them. 3rem here gives a clean 6rem total — enough to separate
       sections, not so much the footer feels orphaned from the page. */
    margin-top: 3rem;
    padding: 0 1.5rem 3rem;
    /* Global `footer { text-transform: uppercase; text-align: center; }` rule
       lives in styles.css (line ~3449) and would otherwise uppercase the brand
       name + tagline + <a>-tag actions. Reset here so our block-level overrides
       on child elements take effect cleanly. */
    text-transform: none;
    text-align: left;
}

/* ─── Top rule: amber gradient hairlines flanking the § ornament ───
 *
 * Previous version used `position: absolute` for the §, with a paper-colored
 * background mask to hide the line behind the text. That created a faint
 * doubled "shadow" line below the § on some browsers because the 1px line
 * passed through the glyph's descender area without the mask reaching down
 * far enough.
 *
 * v2: flex layout with three children — [line][§][line]. Lines are
 * `flex: 1` and physically separate from the ornament. No masking, no
 * positioning tricks, no shadow artifacts. Each line gradient fades INWARD
 * toward the § so the convergence reads as deliberate. */
.status-footer-rule {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: 1100px;
    margin: 0 auto 3.5rem;
}
.status-footer-rule-line {
    flex: 1 1 0;
    height: 1px;
}
.status-footer-rule-line:first-child {
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in oklab, var(--amber) 10%, transparent) 30%,
        color-mix(in oklab, var(--amber) 40%, transparent) 100%
    );
}
.status-footer-rule-line:last-child {
    background: linear-gradient(
        270deg,
        transparent 0%,
        color-mix(in oklab, var(--amber) 10%, transparent) 30%,
        color-mix(in oklab, var(--amber) 40%, transparent) 100%
    );
}
.status-footer-ornament {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--amber);
    opacity: 0.82;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── 3-block grid — equal columns + per-block anchoring ───
 *
 * Why not just 1.15fr/1fr/1.15fr with content sitting flush-left in each column:
 * the action rows in Discover have `justify-content: space-between` (text-left,
 * arrow-right) which makes Discover content fill its column edge-to-edge, while
 * Brand and Live contents are narrower than their columns. The result is an
 * asymmetric visual rhythm — Brand→Discover gap (column-pad + column-gap) is
 * much wider than Discover→Live gap (column-gap only, because Discover's right
 * edge already touches the column-2 right boundary).
 *
 * Fix: equal-width columns + max-width cap on each block + per-block margin
 * anchoring. Brand sticks to the LEFT edge of its column, Discover floats
 * CENTERED in its column, Live sticks to the RIGHT edge of its column.
 * Visual gap from each block's content edge to the next block's content edge
 * is now symmetric, regardless of how wide each block's actual content is.
 */
.status-footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.status-footer-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    width: 100%;
    max-width: 280px;          /* cap content width so blocks read as same-size objects */
}
.status-footer-block--brand { margin: 0 auto 0 0; }     /* anchor LEFT */
.status-footer-block--links { margin: 0 auto; }          /* anchor CENTER */
.status-footer-block--live  { margin: 0 0 0 auto; }     /* anchor RIGHT */

.status-footer-block-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed color-mix(in oklab, var(--rule) 100%, transparent);
}

/* ─── Brand block (left) ──────────────────────────────────
 * Masthead pattern: favicon (logomark) sits beside a vertical
 * stack of [Prospira / STATUS]. Reads like a magazine title +
 * subtitle. Favicon center-aligned with the stack so the visual
 * mark sits between the two lines of typography.
 */
.status-footer-brand-line {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}
.status-footer-mark {
    width: 28px;
    height: 28px;
    opacity: 0.95;
    flex-shrink: 0;
}
.status-footer-brand-stack {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    align-items: flex-start;
}
.status-footer-brand-name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    text-transform: none !important;
    font-variant: normal;
    letter-spacing: 0.005em;
}
.status-footer-brand-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.32em;        /* wider tracking — subtitle / kicker style */
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 500;
    line-height: 1;
    /* Tiny opacity bump so amber doesn't shout louder than the wordmark */
    opacity: 0.92;
}
.status-footer-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.08rem;
    color: var(--ink-dim);
    line-height: 1.45;
    margin: 0;
    max-width: 26ch;
    text-transform: none !important;   /* defensive */
    font-variant: normal;
    letter-spacing: 0;
    font-feature-settings: "smcp" 0, "c2sc" 0;
}
.status-footer-since {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0.5rem 0 0;
    opacity: 0.85;
}

/* ─── Discover / Navigate links block (center) ─── */

.status-footer-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.55rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 100%, transparent);
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;             /* tightened from 0.14em — readability */
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    text-transform: none !important;    /* defensive — <a> tags were uppercasing */
    transition: color 200ms ease, padding-left 240ms var(--ease-out-quint),
                border-color 220ms ease;
}
.status-footer-action > span:first-child {
    text-transform: none;
    font-variant: normal;
}
.status-footer-action:last-child { border-bottom: none; }
.status-footer-action:hover {
    color: var(--amber);
    padding-left: 0.5rem;
    border-bottom-color: color-mix(in oklab, var(--amber) 40%, transparent);
}
.status-footer-action-arrow {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1;
    transition: color 200ms ease, transform 220ms var(--ease-out-quint);
}
.status-footer-action:hover .status-footer-action-arrow {
    color: var(--amber);
    transform: translateX(4px);
}

/* ─── Live signal block (right) — pill + sub-line layout ─── */

.status-footer-block--live { align-items: flex-start; }

.status-footer-live {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem 0.5rem 0.75rem;
    background: color-mix(in oklab, var(--st-operational) 5%, var(--paper-2));
    border: 1px solid color-mix(in oklab, var(--st-operational) 30%, transparent);
    font-family: var(--font-mono);
    align-self: flex-start;
}
.status-footer-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-operational);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--st-operational) 50%, transparent);
    animation: footerLivePulse 2.4s ease-in-out infinite;
}
@keyframes footerLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--st-operational) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--st-operational) 0%, transparent); }
}
.status-footer-live-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.status-footer-live-text > :first-child {
    color: var(--st-operational);
    font-weight: 600;
    letter-spacing: 0.22em;
}
.status-footer-live-text time {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}
.status-footer-live-divider {
    color: var(--ink-faint);
    opacity: 0.5;
    font-weight: 400;
}

.status-footer-region {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 0.7rem;
    padding-left: 0.1rem;
}
.status-footer-region iconify-icon {
    font-size: 0.95rem;
    color: var(--ink-dim);
    opacity: 0.85;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .status-footer-live-dot { animation: none !important; }
    .status-footer-action { transition: none !important; }
}

/* Responsive — collapse to single column on phone. Drop per-block anchoring
   (max-width + margin trickery) so each block reads as a left-anchored
   reading-flow row instead of getting awkwardly centered or right-pushed
   in a narrow viewport. */
@media (max-width: 820px) {
    .status-footer-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }
    .status-footer-block,
    .status-footer-block--brand,
    .status-footer-block--links,
    .status-footer-block--live {
        max-width: 100%;
        margin: 0;
    }
    .status-footer-rule { margin-bottom: 2.4rem; }
    .status-footer-tagline { max-width: 100%; }
}

/* ============================================================
 * BOARD CONTAINER — single column, max-1100, generous padding
 * ============================================================ */

.status-board {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
}

/* ============================================================
 * BANNER — single wide hero, the page's primary statement
 * ============================================================ */

.status-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.4rem 2.6rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--st-operational);
    margin-bottom: 4rem;
    overflow: hidden;
}
.status-banner::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--st-operational) 0%, transparent 70%);
}
.status-banner--degraded     { border-left-color: var(--st-degraded); }
.status-banner--degraded::before { background: linear-gradient(90deg, var(--st-degraded) 0%, transparent 70%); }
.status-banner--partial_outage { border-left-color: var(--st-partial); }
.status-banner--partial_outage::before { background: linear-gradient(90deg, var(--st-partial) 0%, transparent 70%); }
.status-banner--major_outage { border-left-color: var(--st-major); }
.status-banner--major_outage::before {
    background: linear-gradient(90deg, var(--st-major) 0%, transparent 70%);
    animation: bannerBreathCrimson 3s ease-in-out infinite;
}
@keyframes bannerBreathCrimson { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.status-banner--maintenance  { border-left-color: var(--st-maint); }
.status-banner--maintenance::before { background: linear-gradient(90deg, var(--st-maint) 0%, transparent 70%); }

/* Mark — bigger, more breathable */
.status-banner-mark {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    color: var(--st-operational);
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-banner--degraded .status-banner-mark     { color: var(--st-degraded); }
.status-banner--partial_outage .status-banner-mark { color: var(--st-partial); }
.status-banner--major_outage .status-banner-mark { color: var(--st-major); }
.status-banner--maintenance .status-banner-mark  { color: var(--st-maint); }
.status-banner-mark svg { width: 100%; height: 100%; }
.status-banner--operational .status-banner-mark {
    animation: operationalBreath 4s ease-in-out infinite;
}
@keyframes operationalBreath {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.04); opacity: 0.88; }
}
.banner-mark-stroke {
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    animation: drawCheck 700ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.status-banner-body { flex: 1 1 auto; min-width: 0; }

.status-banner-title {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 0.9rem;
}
.status-banner-title em {
    font-style: italic;
    font-weight: 500;
}
.status-banner--operational .status-banner-title em { color: var(--st-operational); }
.status-banner--degraded .status-banner-title em     { color: var(--st-degraded); }
.status-banner--partial_outage .status-banner-title em { color: var(--st-partial); }
.status-banner--major_outage .status-banner-title em { color: var(--st-major); }
.status-banner--maintenance .status-banner-title em  { color: var(--st-maint); }
.banner-title-prefix {
    font-style: normal;
    font-size: 0.78em;
    color: var(--ink-dim);
    margin-right: 0.45rem;
    display: inline-block;
}

/* Meta line below headline — tiny mono row */
.status-banner-meta {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.banner-meta-clock {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}
.banner-meta-eyebrow {
    color: var(--ink-faint);
}
.banner-meta-divider { color: var(--ink-faint); opacity: 0.4; }
.banner-meta-clock time {
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
}
.banner-meta-refresh {
    margin-left: auto;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.banner-meta-refresh #refreshCountdown {
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
    min-width: 1.4em;
    display: inline-block;
    text-align: right;
}
.banner-meta-cta {
    margin-left: auto;
    color: var(--amber);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border: 1px solid color-mix(in oklab, var(--amber) 60%, transparent);
    transition: all 200ms ease;
}
.banner-meta-cta:hover {
    background: var(--amber);
    color: var(--paper);
    letter-spacing: 0.24em;
}

/* ============================================================
 * ACTIVE INCIDENT CARD (only when present)
 * ============================================================ */

.status-active-banner {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.status-active-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.1rem;
    align-items: center;
    padding: 1.3rem 1.6rem;
    background: var(--paper-2);
    border: 1px solid var(--rule-bold);
    border-left: 4px solid var(--st-partial);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 200ms ease, background 200ms ease;
}
.status-active-banner[data-severity="minor"] .status-active-card    { border-left-color: var(--st-degraded); }
.status-active-banner[data-severity="major"] .status-active-card    { border-left-color: var(--st-partial); }
.status-active-banner[data-severity="critical"] .status-active-card { border-left-color: var(--st-major); }
.status-active-card:hover {
    border-color: var(--amber);
    background: color-mix(in oklab, var(--amber) 4%, var(--paper-2));
}
.active-card-body { min-width: 0; }
.active-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.active-card-since {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.active-card-title {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 0.55rem;
}
.active-card-update {
    color: var(--ink-dim);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
}
.active-card-components { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.active-card-cta {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    align-self: center;
}
.status-active-card:hover .active-card-cta { letter-spacing: 0.28em; }

/* ============================================================
 * COMPONENTS — spacious cards in groups
 * ============================================================ */

.status-components-section { margin-bottom: 3rem; }

.status-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--rule);
}
.status-section-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.status-section-axis {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.status-section-axis .dim { opacity: 0.5; }

/* ─── Group ─── */

.status-group { margin-bottom: 2.5rem; }

.status-group-head {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed var(--rule);
}
.status-group-id {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 1 1 auto;
}
.status-group-glyph {
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    opacity: 0.8;
}
.status-group-name {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
}
.status-group-sub {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: var(--ink-faint);
    font-style: italic;
    margin-left: 0.4rem;
}
.status-group-aggregate {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}
.status-group-aggregate b { color: var(--ink-dim); font-weight: 600; margin-right: 0.15rem; }
.status-group-aggregate.is-all-ok { color: var(--st-operational); }
.status-group-aggregate.is-all-ok b { color: var(--st-operational); }
.status-group-aggregate.has-issues { color: var(--st-degraded); }
.status-group-aggregate.has-issues b { color: var(--st-degraded); }

/* ─── Component card ─── */

.status-components {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-component {
    padding: 1.2rem 1.4rem 1.1rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    transition: border-color 200ms ease;
    animation: componentSlideIn 380ms var(--ease-out-quint) both;
    animation-delay: calc(220ms + var(--i, 0) * 40ms);
}
.status-component[data-state="degraded"]      { border-left: 2px solid var(--st-degraded); }
.status-component[data-state="partial_outage"] { border-left: 2px solid var(--st-partial); }
.status-component[data-state="major_outage"]  { border-left: 2px solid var(--st-major); }
.status-component[data-state="maintenance"]   { border-left: 2px solid var(--st-maint); }

@keyframes componentSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.component-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem 1rem;
    align-items: start;
    margin-bottom: 0.9rem;
}

.component-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--st-operational);
    margin-top: 0.45rem;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-operational) 22%, transparent);
}
.status-component[data-state="degraded"] .component-dot      { background: var(--st-degraded); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-degraded) 28%, transparent); }
.status-component[data-state="partial_outage"] .component-dot { background: var(--st-partial); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-partial) 28%, transparent); }
.status-component[data-state="major_outage"] .component-dot  { background: var(--st-major); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-major) 30%, transparent); }
.status-component[data-state="maintenance"] .component-dot   { background: var(--st-maint); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-maint) 28%, transparent); }

.component-id { min-width: 0; }
.component-name {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.25;
}
.component-desc {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
    line-height: 1.45;
}
.component-msg {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.28rem 0.6rem;
    background: var(--paper-3);
    border-left: 2px solid var(--st-degraded);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--st-degraded);
    font-style: italic;
}

.component-state {
    align-self: center;
    text-align: right;
}
.component-uptime {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.component-uptime b { color: var(--ink); font-weight: 500; }
.component-uptime .dim {
    color: var(--ink-faint);
    text-transform: uppercase;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
}

/* ─── 90-day bars ─── */

.component-bars {
    display: flex;
    gap: 1px;
    height: 30px;
    align-items: stretch;
}
.component-bar {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 8px;
    background: var(--st-unknown);
    cursor: pointer;
    transition: filter 140ms ease, transform 140ms ease;
    transform-origin: center bottom;
    animation: barFadeIn 320ms var(--ease-out-quint) both;
    animation-delay: calc(320ms + var(--i, 0) * 9ms);
}
.component-bar--ok       { background: var(--st-operational); }
.component-bar--degraded { background: var(--st-degraded); }
.component-bar--fail     { background: var(--st-major); }
.component-bar:hover {
    filter: brightness(1.35);
    transform: scaleY(1.08);
}
.component-bar[data-today="true"] {
    outline: 1px solid var(--amber);
    box-shadow: 0 0 6px color-mix(in oklab, var(--amber) 55%, transparent);
}
@keyframes barFadeIn {
    from { opacity: 0; transform: scaleY(0.4); }
    to   { opacity: 1; transform: scaleY(1); }
}

.component-foot {
    margin-top: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    font-style: italic;
}

/* ─── Pills ─── */

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
    line-height: 1.5;
}
.status-pill--state-operational  { color: var(--st-operational); background: var(--st-operational-bg); }
.status-pill--state-degraded     { color: var(--st-degraded); background: var(--st-degraded-bg); }
.status-pill--state-partial_outage { color: var(--st-partial); background: var(--st-partial-bg); }
.status-pill--state-major_outage { color: var(--st-major); background: var(--st-major-bg); }
.status-pill--state-maintenance  { color: var(--st-maint); background: var(--st-maint-bg); }
.status-pill--severity-minor     { color: var(--st-degraded); background: var(--st-degraded-bg); }
.status-pill--severity-major     { color: var(--st-partial); background: var(--st-partial-bg); }
.status-pill--severity-critical  { color: var(--st-major); background: var(--st-major-bg); }
.status-pill--phase-investigating { color: var(--st-degraded); background: var(--st-degraded-bg); }
.status-pill--phase-identified    { color: var(--st-partial); background: var(--st-partial-bg); }
.status-pill--phase-monitoring    { color: var(--azure); background: var(--azure-soft); }
.status-pill--phase-resolved      { color: var(--st-operational); background: var(--st-operational-bg); }

.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
    border: 1px solid var(--rule);
    background: var(--paper-3);
}

/* ============================================================
 * SUBSCRIBE SECTION
 * ============================================================ */

/* ─── Subscribe section — email-first form (RSS demoted to footer link) ─── */

.status-subscribe-section { margin-bottom: 2rem; }

.subscribe-block { padding: 0.5rem 0; }

/* Email variant: single column, generous breathing room, editorial rhythm */
.subscribe-block--email {
    max-width: 64ch;
}

.subscribe-intro { max-width: 56ch; margin-bottom: 1.3rem; }

.subscribe-heading {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 0.55rem;
}
.subscribe-deck {
    font-family: var(--font-serif);
    font-size: 0.98rem;
    color: var(--ink-dim);
    line-height: 1.55;
    margin: 0 0 0.35rem;
}
.subscribe-frequency {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0.55rem 0 0;
}

/* ── Form layout ── */
.subscribe-form {
    position: relative;
    background: var(--paper-2);
    border: 1px solid var(--rule-bold);
    padding: 1.1rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.subscribe-form::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--amber) 0%, color-mix(in oklab, var(--amber) 40%, transparent) 100%);
    pointer-events: none;
}

.subscribe-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.subscribe-form-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.6rem;
    align-items: stretch;
}

.subscribe-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 0.55rem 0.85rem;
    transition: border-color 180ms ease;
}
.subscribe-input-wrap:focus-within {
    border-color: color-mix(in oklab, var(--amber) 65%, transparent);
}
.subscribe-input-wrap iconify-icon {
    color: var(--ink-faint);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.subscribe-input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.1rem 0;
}
.subscribe-input-wrap input::placeholder { color: var(--ink-faint); }

.subscribe-lang {
    display: inline-flex;
    align-items: stretch;
    background: var(--paper);
    border: 1px solid var(--rule);
}
.subscribe-lang input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.subscribe-lang label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 0 0.7rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    transition: all 160ms ease;
    user-select: none;
}
.subscribe-lang label:hover { color: var(--ink); }
.subscribe-lang input[type="radio"]:checked + label {
    background: color-mix(in oklab, var(--amber) 18%, var(--paper));
    color: var(--amber);
}
.subscribe-lang input[type="radio"]:focus-visible + label {
    outline: 2px solid color-mix(in oklab, var(--amber) 50%, transparent);
    outline-offset: -2px;
}

.subscribe-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--amber);
    color: var(--paper);
    border: 1px solid var(--amber);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 180ms ease;
    white-space: nowrap;
}
.subscribe-submit:hover {
    background: color-mix(in oklab, var(--amber) 88%, var(--ink));
    border-color: color-mix(in oklab, var(--amber) 88%, var(--ink));
}
.subscribe-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}
.subscribe-submit-spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid color-mix(in oklab, var(--paper) 60%, transparent);
    border-top-color: var(--paper);
    border-radius: 50%;
    animation: subscribeSpin 700ms linear infinite;
}
.subscribe-submit.is-loading .subscribe-submit-spinner { display: inline-block; }
.subscribe-submit.is-loading .subscribe-submit-label { opacity: 0.6; }
@keyframes subscribeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .subscribe-submit-spinner { animation: none; }
}

.subscribe-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: var(--ink-dim);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}
.subscribe-consent input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.18rem;
    width: 14px;
    height: 14px;
    accent-color: var(--amber);
    cursor: pointer;
}

.subscribe-form-error {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--crimson);
    border-left: 2px solid var(--crimson);
    padding: 0.4rem 0.7rem;
    background: color-mix(in oklab, var(--crimson) 5%, var(--paper));
}

/* `hidden` attribute must always win over the .subscribe-success
   display: flex below. Without this, the success banner renders on
   initial paint even though the markup carries `hidden`. */
.subscribe-success[hidden],
.subscribe-form-error[hidden] {
    display: none !important;
}
.subscribe-success {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: color-mix(in oklab, var(--moss) 8%, var(--paper-2));
    border: 1px solid color-mix(in oklab, var(--moss) 50%, var(--rule));
    border-left: 3px solid var(--moss);
    padding: 1rem 1.2rem;
    animation: subscribeSuccessIn 320ms ease-out;
}
.subscribe-success iconify-icon {
    font-size: 1.55rem;
    color: var(--moss);
    flex-shrink: 0;
}
.subscribe-success-text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    color: var(--ink);
    line-height: 1.45;
}
@keyframes subscribeSuccessIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* "Prefer RSS? · atom.xml" — plain inline row. "PREFER RSS?" + link
   sit on the natural text baseline. No flex magic. */
.subscribe-rss-fallback {
    margin: 1.1rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.subscribe-rss-fallback a {
    color: var(--ink-dim);
    text-decoration: none;
    margin-left: 0.35rem;   /* tighter gap from "WOLISZ RSS?" */
    border-bottom: 1px dotted color-mix(in oklab, var(--amber) 50%, transparent);
    padding-bottom: 1px;
    transition: color 160ms ease;
    white-space: nowrap;
    display: inline-block;
    transform: translateY(-1px);  /* lift link slightly to match label */
}
.subscribe-rss-fallback a:hover { color: var(--amber); }
.subscribe-rss-fallback iconify-icon {
    font-size: 0.78rem;
    color: var(--amber);
    vertical-align: middle;
    margin-right: 0.18rem;
    transform: translateY(-0.06em);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .subscribe-form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .subscribe-lang { justify-self: stretch; }
    .subscribe-submit { width: 100%; }
}

@media (max-width: 820px) {
    .embed-preview-mocks { grid-template-columns: 1fr; }
    .methodology-glossary-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.6rem 0.75rem;
    }
    .methodology-section-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* ─── Email landing pages (status-email-confirmed / -unsubscribed) ─── */

.status-email-landing {
    max-width: 56ch;
    margin: 5rem auto 4rem;
    padding: 0 1.5rem;
    text-align: center;
}
.status-email-landing-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-bold);
    background: color-mix(in oklab, var(--moss) 10%, var(--paper-2));
    border-radius: 50%;
}
.status-email-landing-mark--fail {
    background: color-mix(in oklab, var(--crimson) 10%, var(--paper-2));
}
.status-email-landing-mark iconify-icon {
    font-size: 1.9rem;
    color: var(--moss);
}
.status-email-landing-mark--fail iconify-icon { color: var(--crimson); }
.status-email-landing-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.85rem;
    display: block;
}
.status-email-landing-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.18;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 0.9rem;
    letter-spacing: -0.005em;
}
.status-email-landing-deck {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--ink-dim);
    line-height: 1.55;
    margin: 0 0 1.6rem;
}
.status-email-landing-email {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--amber);
    word-break: break-all;
}
.status-email-landing-actions {
    margin-top: 1.4rem;
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.status-email-landing-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    padding: 0.55rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 180ms ease;
}
.status-email-landing-action:hover {
    color: var(--amber);
    border-color: color-mix(in oklab, var(--amber) 50%, transparent);
}
.status-email-landing-action--primary {
    background: var(--amber);
    color: var(--paper);
    border-color: var(--amber);
}
.status-email-landing-action--primary:hover {
    background: color-mix(in oklab, var(--amber) 88%, var(--ink));
    color: var(--paper);
}

/* ============================================================
 * BAR TOOLTIP (shared)
 * ============================================================ */

.status-bar-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 9000;
    background: var(--paper);
    border: 1px solid var(--amber);
    padding: 0.55rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    transform: translate(-50%, calc(-100% - 8px));
    animation: tooltipIn 140ms ease-out;
    white-space: nowrap;
}
.status-bar-tooltip strong {
    color: var(--amber);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
}
.status-bar-tooltip .dim { color: var(--ink-faint); }
@keyframes tooltipIn {
    from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); }
    to   { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }
}

/* ============================================================
 * MODALS — methodology + embed badge
 * ============================================================ */

.status-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: modalIn 220ms var(--ease-out-quint);
}
.status-modal[hidden] { display: none; }
.status-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 13, 0.78);
    backdrop-filter: blur(4px);
}
.status-modal-card {
    position: relative;
    max-width: 580px;
    width: 100%;
    /* Reduced from 90vh — modal now fits compact content without a scrollbar
       on typical 768+ heights. If content ever overflows on small viewports
       it'll still scroll, but the design target is no-scroll on desktop. */
    max-height: 88vh;
    overflow-y: auto;
    /* Subtle atmosphere — amber whisper in upper-right + grain texture
       so the modal isn't a flat slab. Matches the editorial hero card. */
    background:
        radial-gradient(ellipse 50% 60% at 95% 5%,
            color-mix(in oklab, var(--amber) 6%, transparent) 0%,
            transparent 65%),
        linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
    border: 1px solid var(--rule-bold);
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.7),
        0 1px 0 0 color-mix(in oklab, var(--amber) 10%, transparent) inset;
    animation: modalCardIn 280ms var(--ease-out-quint);
}
.status-modal-card::after {
    /* 2% grain — film texture, very subtle */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}
.status-modal-card--lg { max-width: 760px; }
.status-modal-card::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--amber), transparent 70%);
}
.status-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.7rem 1.15rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
}
/* Amber accent line under the modal head — mirrors the section heads
   on the public board so the modal feels native, not a popup. */
.status-modal-head::after {
    content: '';
    position: absolute;
    left: 1.7rem;
    bottom: -1px;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, var(--amber) 0%, color-mix(in oklab, var(--amber) 25%, transparent) 100%);
}
.status-modal-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.5rem;
    opacity: 0.95;
}
.status-modal-head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.012em;
    /* opsz 144 + SOFT 50 — same display-grade settings as the page heroes,
       so modal titles read as "editorial publication" not "alert dialog". */
    font-variation-settings: "opsz" 144, "SOFT" 50;
    background: transparent !important;
    text-transform: none !important;
}
.status-modal-head h2 em {
    font-style: italic;
    font-weight: 500;
    color: var(--amber);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.status-modal-close {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    flex-shrink: 0;
}
.status-modal-close iconify-icon { font-size: 0.9rem; }
.status-modal-close:hover {
    color: var(--crimson);
    border-color: var(--crimson);
    background: color-mix(in oklab, var(--crimson) 8%, transparent);
}
.status-modal-close:active { transform: scale(0.94); }
.status-modal-body {
    padding: 1.1rem 1.7rem 1.5rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--ink-dim);
    line-height: 1.55;
}
/* Lede sits right under the modal title — tighter trailing margin so the
   first section's head isn't pushed down by a stale paragraph-margin. */
.status-modal-body > .methodology-lede:first-child {
    margin-bottom: 0.4rem;
}
/* "Publication unboxing" — each child of the modal body fades + slides
   up in sequence after the modal card itself lands. Creates a calm
   editorial entrance instead of everything appearing at once. */
.status-modal-body > * {
    animation: modalBodyIn 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.status-modal-body > *:nth-child(1) { animation-delay: 60ms; }
.status-modal-body > *:nth-child(2) { animation-delay: 110ms; }
.status-modal-body > *:nth-child(3) { animation-delay: 160ms; }
.status-modal-body > *:nth-child(4) { animation-delay: 210ms; }
.status-modal-body > *:nth-child(5) { animation-delay: 260ms; }
@keyframes modalBodyIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .status-modal-body > * { animation: none; }
}
.status-modal-body p { margin-bottom: 0.6rem; }
.status-modal-body a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber); }

/* ─── Methodology modal sections — tight editorial column ─── */
.methodology-section {
    padding: 1rem 0 0.85rem;
    border-top: 1px dashed color-mix(in oklab, var(--rule) 70%, transparent);
    position: relative;
}
.methodology-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.methodology-section:last-of-type {
    padding-bottom: 0;
}
.methodology-section > p:last-child { margin-bottom: 0; }
.methodology-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 50%, transparent);
    position: relative;
}
/* Amber accent line under each section head — same family as the page
   section heads. Reinforces the editorial codex identity. */
.methodology-section-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 1px;
    background: var(--amber);
}
.methodology-section-axis {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ink-faint);
    letter-spacing: 0.01em;
}
.methodology-eyebrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.95;
}
/* The § glyph rendered as italic serif — matches the section glyphs
   used in the hero, history page, and incident detail. Distinctive
   editorial mark, not just a typed character. */
.methodology-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0;
    color: var(--amber);
    line-height: 1;
    opacity: 0.95;
    transform: translateY(0.05em);
}
.methodology-label {
    /* slightly heavier weight + tighter spacing than the glyph */
    font-weight: 500;
}
.methodology-lede {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--ink-dim);
    letter-spacing: 0.005em;
}

/* Glossary: compact one-line-per-state — [PILL] · description. Scans
   in 5 seconds. State-coloured left rail + per-state hover tint that
   matches the state's own colour family (moss/amber/crimson/azure)
   rather than a generic amber. Reinforces the colour vocabulary the
   client will see live on the status board. */
.methodology-glossary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}
.methodology-glossary-row {
    display: grid;
    grid-template-columns: 134px minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--paper-3) 95%, transparent) 0%,
        var(--paper-3) 100%);
    border-left: 3px solid var(--ink-faint);
    transition: border-left-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.methodology-glossary-row[data-state="operational"]    { border-left-color: var(--st-operational); }
.methodology-glossary-row[data-state="degraded"]       { border-left-color: var(--st-degraded); }
.methodology-glossary-row[data-state="partial_outage"] { border-left-color: var(--st-partial); }
.methodology-glossary-row[data-state="major_outage"]   { border-left-color: var(--st-major); }
.methodology-glossary-row[data-state="maintenance"]    { border-left-color: var(--st-maint); }

/* Per-state hover tint — matches the row's own colour. The rail glows
   slightly, the bg picks up 6% of the state colour, and the row
   translates 2px right (editorial micro-interaction). */
.methodology-glossary-row:hover { transform: translateX(2px); }
.methodology-glossary-row[data-state="operational"]:hover {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--st-operational) 4%, var(--paper-3)) 0%,
        color-mix(in oklab, var(--st-operational) 7%, var(--paper-3)) 100%);
}
.methodology-glossary-row[data-state="degraded"]:hover {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--st-degraded) 4%, var(--paper-3)) 0%,
        color-mix(in oklab, var(--st-degraded) 7%, var(--paper-3)) 100%);
}
.methodology-glossary-row[data-state="partial_outage"]:hover {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--st-partial) 4%, var(--paper-3)) 0%,
        color-mix(in oklab, var(--st-partial) 7%, var(--paper-3)) 100%);
}
.methodology-glossary-row[data-state="major_outage"]:hover {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--st-major) 4%, var(--paper-3)) 0%,
        color-mix(in oklab, var(--st-major) 7%, var(--paper-3)) 100%);
}
.methodology-glossary-row[data-state="maintenance"]:hover {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--st-maint) 4%, var(--paper-3)) 0%,
        color-mix(in oklab, var(--st-maint) 7%, var(--paper-3)) 100%);
}

.methodology-glossary-row .status-pill {
    justify-self: start;
    font-size: 0.55rem;
    padding: 0.22rem 0.6rem;
    letter-spacing: 0.22em;
}
.methodology-glossary-desc {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ink-dim);
    letter-spacing: 0.005em;
}

@media (prefers-reduced-motion: reduce) {
    .methodology-glossary-row { transition: none; }
    .methodology-glossary-row:hover { transform: none; }
}

.methodology-inline-link {
    color: var(--amber) !important;
    font-weight: 500;
    border-bottom: 1px dotted color-mix(in oklab, var(--amber) 50%, transparent) !important;
    padding-bottom: 1px;
    text-decoration: none !important;
    transition: color 160ms ease;
    white-space: nowrap;
}
.methodology-inline-link:hover {
    color: color-mix(in oklab, var(--amber) 80%, var(--ink)) !important;
}

@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalCardIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Embed badge modal — preview mocks + code snippets ─── */

/* ─── Embed modal — preview mocks + code snippets + callout ───
   Sits inside .methodology-section wrappers so it inherits the
   editorial section-head + amber accent line treatment. */

.embed-preview-mocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
}
.embed-mock {
    position: relative;
    padding: 1.6rem 1rem 1.1rem;
    border: 1px solid var(--rule);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    transition: border-color 200ms ease, transform 200ms ease;
}
.embed-mock:hover {
    border-color: color-mix(in oklab, var(--amber) 40%, var(--rule));
    transform: translateY(-1px);
}
.embed-mock--dark  { background: linear-gradient(135deg, #0a0a0c 0%, #14131a 100%); }
.embed-mock--light { background: linear-gradient(135deg, #f4f1e8 0%, #ebe4d4 100%); }
.embed-mock-label {
    position: absolute;
    top: 0.55rem;
    left: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-faint);
    opacity: 0.92;
}
/* Tiny dot before the label, coloured for the context (amber for dark
   context, ink for light context) — editorial micro-detail. */
.embed-mock-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}
.embed-mock--dark  .embed-mock-label { color: color-mix(in oklab, var(--amber) 75%, var(--ink-faint)); }
.embed-mock--light .embed-mock-label { color: #8a8578; }
.embed-mock img { max-width: 100%; height: auto; }

.embed-snippets {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
}
.embed-snippet {
    background: var(--paper-3);
    border: 1px solid var(--rule);
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.embed-snippet:hover {
    border-color: color-mix(in oklab, var(--amber) 45%, var(--rule));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--amber) 10%, transparent) inset;
}
.embed-snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem 0.45rem 0.9rem;
    background:
        linear-gradient(90deg,
            color-mix(in oklab, var(--amber) 6%, var(--paper-4)) 0%,
            color-mix(in oklab, var(--amber) 2%, var(--paper-4)) 100%);
    border-bottom: 1px solid var(--rule);
}
.embed-snippet-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 500;
}
.embed-snippet-lang::before {
    content: '·';
    color: var(--amber);
    opacity: 0.7;
    font-size: 0.7rem;
    line-height: 1;
}
.embed-snippet textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--ink);
    padding: 0.85rem 0.95rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.55;
    resize: none;
    display: block;
    outline: none;
    -moz-tab-size: 2;
    tab-size: 2;
    /* Sane defaults so syntax-coloured terms stay readable on focus */
    caret-color: var(--amber);
    /* Tabular nums for HTML-attribute alignment in the snippet */
    font-variant-numeric: tabular-nums;
    cursor: text;
}
.embed-snippet textarea:focus {
    background: color-mix(in oklab, var(--amber) 3%, transparent);
}
.embed-snippet textarea::selection {
    background: color-mix(in oklab, var(--amber) 35%, transparent);
    color: var(--ink);
}
/* Subtle scrollbar for the HTML snippet textarea (when content exceeds rows) */
.embed-snippet textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.embed-snippet textarea::-webkit-scrollbar-track { background: transparent; }
.embed-snippet textarea::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--amber) 25%, transparent);
    border-radius: 3px;
}
.embed-snippet textarea::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--amber) 45%, transparent);
}

.embed-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--amber) 50%, transparent);
    color: var(--amber);
    padding: 0.34rem 0.75rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all 180ms ease;
    font-weight: 500;
}
.embed-copy:hover {
    background: var(--amber);
    color: var(--paper);
    border-color: var(--amber);
}
.embed-copy.is-copied {
    background: var(--moss);
    color: var(--paper);
    border-color: var(--moss);
}
.embed-copy.is-copied iconify-icon { animation: copiedPing 320ms ease-out; }
@keyframes copiedPing {
    0%   { transform: scale(0.6); opacity: 0.4; }
    60%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.embed-copy iconify-icon { font-size: 0.85rem; }
.embed-copy-label { line-height: 1; }

/* Callout — editorial dropping-shot note. Tight, italic, amber rail. */
.embed-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.7rem;
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--amber) 6%, var(--paper-3)) 0%,
        var(--paper-3) 100%);
    border-left: 3px solid var(--amber);
}
.embed-callout-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--amber);
    opacity: 0.85;
    transform: translateY(-0.06em);
}
.embed-callout p {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-dim);
    letter-spacing: 0.005em;
}

/* ============================================================
 * HISTORY PAGE
 * ============================================================ */

.status-board--history {
    max-width: 1000px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.status-history-hero {
    /* Uniform 2.5rem bottom spacing across all top-level history sections
       so the page has a steady editorial rhythm — hero / ribbon / past /
       CTA all separated by the same gap. */
    margin: 2.4rem 0 2.5rem;
    padding: 2.4rem 2.2rem 2.2rem;
    position: relative;
    /* Subtle gradient mesh — depth, not flat. Upper-right amber whisper +
       lower-left moss whisper, mostly transparent so the editorial type
       stays the hero. */
    background:
        radial-gradient(ellipse 60% 80% at 92% 8%,
            color-mix(in oklab, var(--amber) 7%, transparent) 0%,
            transparent 60%),
        radial-gradient(ellipse 50% 60% at 5% 95%,
            color-mix(in oklab, var(--moss) 5%, transparent) 0%,
            transparent 70%),
        linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
    border: 1px solid var(--rule);
    border-left: 3px solid color-mix(in oklab, var(--amber) 40%, var(--rule));
    overflow: hidden;
}
/* No bottom-underline ::after — the box already has a border. The
   orphan amber stripe under the card was a leftover from the un-boxed
   layout and read as a visual artifact. */
/* Faint grain texture overlay — extra editorial atmosphere */
.status-history-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image:
        repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

.status-history-eyebrow-row { margin-bottom: 1.4rem; }
.status-history-eyebrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.hero-eyebrow-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--amber);
    font-size: 1.05rem;
    opacity: 0.95;
    line-height: 1;
    letter-spacing: 0;
}

.status-history-bigtitle {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 1.1rem;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.status-history-bigtitle em {
    font-style: italic;
    color: var(--amber);
    font-weight: 500;
}
.status-history-bigtitle .big-number {
    color: var(--st-operational);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "lnum" 1;
    font-style: normal;
}
.status-history-bigtitle--intact em {
    color: var(--st-operational);
}
.status-history-bigtitle--uptime .big-number {
    color: var(--st-operational);
}
.status-history-bigtitle--uptime .big-number-suffix {
    font-size: 0.62em;
    color: var(--st-operational);
    font-variant-numeric: tabular-nums;
    margin-left: 0.05em;
    letter-spacing: 0;
}
.status-history-subline {
    color: var(--ink-dim);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    max-width: 600px;
    line-height: 1.55;
    margin: 0;
}
.status-history-subline b {
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ─── KPI stats — 4 editorial columns under the hero
   Modular type scale (per UX Pro Max skill recommendation):
   eyebrow 11px · value 21px (mono numeric, tabular nums).  ─── */
.status-history-stats {
    margin: 1.8rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: color-mix(in oklab, var(--rule) 60%, transparent);
    border: 1px solid var(--rule);
    border-radius: 0;
    overflow: hidden;
}
.history-stat {
    margin: 0;
    background: color-mix(in oklab, var(--paper-3) 80%, var(--paper-2));
    padding: 1.1rem 1.3rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background 200ms ease;
}
.history-stat:hover {
    background: color-mix(in oklab, var(--amber) 4%, var(--paper-3));
}
.history-stat dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.history-stat dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.32rem;
    line-height: 1.05;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.012em;
    font-variant-numeric: tabular-nums;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.history-stat-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.42rem;
}
.history-stat-value--moss { color: var(--moss); }
.history-stat-unit {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 400;
}

/* ─── Section heading pattern (Daily uptime / Past incidents) ───
   Was rendering mono-default because no rule existed. Match the
   editorial pattern from the incident detail page: serif H2 with
   sibling tab/year cluster on the right, amber accent underneath. */
.status-section-head-v2 {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.4rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
    flex-wrap: wrap;
}
.status-section-head-v2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 96px;
    height: 2px;
    background: linear-gradient(90deg, var(--amber) 0%, color-mix(in oklab, var(--amber) 20%, transparent) 100%);
}
.status-section-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.012em;
    line-height: 1.15;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* ─── 90-day ribbon — client-friendly horizontal timeline ─── */

.status-ribbon-section { margin-bottom: 2.5rem; }

/* Legend cluster on the right of the section head */
.status-ribbon-meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.status-ribbon-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.status-ribbon-meta-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
}
.status-ribbon-meta-dot--ok        { background: var(--st-operational); }
.status-ribbon-meta-dot--degraded  { background: var(--st-degraded); }
.status-ribbon-meta-dot--fail      { background: var(--st-major); }
.status-ribbon-meta-dot--unknown {
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-faint) 35%, transparent);
}

/* The ribbon card itself — paper-2 + amber left rail to match other sections */
.status-ribbon-card {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 2px solid color-mix(in oklab, var(--amber) 40%, var(--rule));
    padding: 1.6rem 1.5rem 1.1rem;
    overflow: hidden;
}

/* 90-bar grid — stretches to container width. Bars auto-size via 1fr. */
.status-ribbon-bars {
    display: grid;
    grid-template-columns: repeat(90, minmax(0, 1fr));
    gap: 2px;
    align-items: stretch;
    min-height: 56px;
    padding: 0.2rem 0;
}
.ribbon-bar {
    height: 56px;
    min-height: 56px;
    background: var(--st-unknown);
    cursor: default;
    text-decoration: none;
    border: 0;
    transition: transform 200ms ease, filter 200ms ease;
    /* Subtle stagger fade-in for editorial feel: bar #i shows at i*6ms */
    opacity: 0;
    animation: ribbonBarIn 320ms ease-out forwards;
    animation-delay: calc(var(--i, 0) * 6ms);
    position: relative;
}
@keyframes ribbonBarIn {
    from { opacity: 0; transform: translateY(4px) scaleY(0.8); transform-origin: bottom; }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
.ribbon-bar:hover {
    filter: brightness(1.35);
    transform: scaleY(1.15) scaleX(1.4);
    z-index: 2;
}
.ribbon-bar.has-incident {
    cursor: pointer;
}
.ribbon-bar.has-incident::after {
    /* Tiny notch on incident days so they're discoverable even at zero brightness diff */
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--st-major);
    border-radius: 50%;
}

.ribbon-bar--ok        { background: var(--st-operational); }
.ribbon-bar--degraded  { background: var(--st-degraded); }
.ribbon-bar--fail      { background: var(--st-major); }
.ribbon-bar--unknown {
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-faint) 14%, transparent);
}
.ribbon-bar.is-today {
    box-shadow: 0 0 0 1px var(--amber), 0 0 8px color-mix(in oklab, var(--amber) 35%, transparent);
    animation: ribbonBarIn 320ms ease-out forwards, ribbonTodayPulse 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 6ms), calc(var(--i, 0) * 6ms + 320ms);
}
@keyframes ribbonTodayPulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--amber), 0 0 6px color-mix(in oklab, var(--amber) 30%, transparent); }
    50%      { box-shadow: 0 0 0 1px var(--amber), 0 0 14px color-mix(in oklab, var(--amber) 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .ribbon-bar { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Axis row — "90 days ago" left · hairline rule · "today" right */
.status-ribbon-axis {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.4rem;
    padding-top: 0.7rem;
    border-top: 1px dashed color-mix(in oklab, var(--rule) 60%, transparent);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.status-ribbon-axis-rule {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in oklab, var(--amber) 35%, transparent) 50%,
        transparent 100%);
}
.status-ribbon-axis-today { color: var(--amber); font-weight: 500; }

@media (max-width: 720px) {
    .status-ribbon-meta { gap: 0.6rem; row-gap: 0.4rem; }
    .status-ribbon-bars { gap: 1.5px; min-height: 44px; }
    .ribbon-bar { height: 44px; min-height: 44px; }
    .status-ribbon-card { padding: 1.2rem 1rem 0.9rem; }
}

/* Legacy heatmap (still used by /api/status/heatmap clients & embed) */

.status-heatmap-section { margin-bottom: 3.5rem; }

.status-history-years {
    display: inline-flex;
    border: 1px solid var(--rule);
    background: var(--paper);
}
.status-history-year {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    transition: all 180ms ease;
    border-right: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
}
.status-history-year:last-child { border-right: none; }
.status-history-year:hover { color: var(--ink); background: color-mix(in oklab, var(--amber) 4%, transparent); }
.status-history-year.is-active {
    color: var(--amber);
    background: color-mix(in oklab, var(--amber) 14%, var(--paper));
    font-weight: 500;
}

.status-heatmap-wrap {
    padding: 1.6rem 1.4rem 1.2rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 2px solid color-mix(in oklab, var(--amber) 35%, var(--rule));
    overflow-x: auto;
}
.status-heatmap[data-loading="true"] .heatmap-grid,
.status-heatmap[data-loading="true"] .heatmap-monthrow { display: none; }
.status-heatmap-skeleton {
    display: grid;
    grid-template-columns: repeat(53, 12px);
    grid-auto-rows: 12px;
    gap: 2px;
}
.status-heatmap[data-loading="false"] .status-heatmap-skeleton { display: none; }
.heatmap-skel-cell {
    background: var(--st-unknown);
    opacity: 0.5;
    animation: skelPulse 1.6s ease-in-out infinite;
}
@keyframes skelPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }

.heatmap-monthrow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 14px;
    margin-bottom: 4px;
}
.heatmap-monthlab {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    white-space: nowrap;
}
.heatmap-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 12px;
    gap: 2px;
    align-items: start;
}
.heatmap-col {
    display: grid;
    grid-template-rows: repeat(7, 12px);
    gap: 2px;
}
.heatmap-cell {
    width: 12px;
    height: 12px;
    background: var(--st-unknown);
    transition: filter 120ms ease, transform 120ms ease;
}
.heatmap-cell:not(.heatmap-cell--pad):hover {
    filter: brightness(1.5);
    transform: scale(1.4);
    z-index: 1;
}
.heatmap-cell--pad     { background: transparent; }
/* Tone "no data" cells way down — they used to dominate the grid as solid
   grey blocks, drowning the actual signal (incident days). Now they're a
   subtle hint at the canvas; incidents pop naturally. */
.heatmap-cell--unknown {
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-faint) 18%, transparent);
}
.heatmap-cell--ok      { background: var(--st-operational); }
.heatmap-cell--degraded { background: var(--st-degraded); }
.heatmap-cell--fail    { background: var(--st-major); }
.heatmap-cell.is-today {
    outline: 1px solid var(--amber);
    outline-offset: 1px;
}

.status-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.legend-eyebrow { margin: 0 0.3rem; }
.legend-eyebrow--right { margin-left: auto; margin-right: 0; }
.legend-swatch {
    width: 12px;
    height: 12px;
    background: var(--st-unknown);
}
.legend-swatch--unknown  { background: var(--st-unknown); }
.legend-swatch--ok       { background: var(--st-operational); }
.legend-swatch--degraded { background: var(--st-degraded); }
.legend-swatch--fail     { background: var(--st-major); }

/* Past incidents list — editorial directory of resolved events */

.status-past-section { margin-bottom: 2.5rem; }
.status-past-list { list-style: none; padding: 0; margin: 0; }

/* Month chapter break — sits above the rows that belong to it */
.status-past-month-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 0 0.6rem;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
    margin-bottom: 0.5rem;
}
.status-past-month-head:first-child { padding-top: 0.6rem; }
.past-month-label {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--amber);
    letter-spacing: 0.01em;
}
.past-month-label::before {
    content: '§';
    margin-right: 0.55rem;
    color: var(--amber);
    opacity: 0.7;
}
.past-month-count {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.status-past-entry {
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.status-past-entry:last-child { border-bottom: none; }

.status-past-entry a {
    display: grid;
    grid-template-columns: 96px auto minmax(0, 1fr) auto 20px;
    gap: 1.1rem;
    align-items: center;
    padding: 0.9rem 1.1rem 0.9rem 0.8rem;
    text-decoration: none;
    color: var(--ink-dim);
    border-left: 2px solid transparent;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    position: relative;
}
.status-past-entry a:hover {
    background: color-mix(in oklab, var(--amber) 5%, var(--paper-2));
    border-left-color: var(--amber);
    color: var(--ink);
}
.past-entry-date {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.past-entry-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
    min-width: 0;
}
.past-entry-duration {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--moss);
    font-variant-numeric: tabular-nums;
    padding: 0.18rem 0.55rem;
    background: color-mix(in oklab, var(--moss) 8%, var(--paper-2));
    border: 1px solid color-mix(in oklab, var(--moss) 25%, var(--rule));
    white-space: nowrap;
}
.past-entry-arrow {
    font-family: var(--font-mono);
    color: var(--amber);
    opacity: 0.55;
    font-size: 0.9rem;
    transition: opacity 200ms ease, transform 200ms ease;
    text-align: right;
}
.status-past-entry a:hover .past-entry-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* ─── Trust-to-action CTA card ───
   Sits after the past incidents list — moment when reader is convinced
   reliability is real. Trust signals first, then a soft conversion ask.
   "Hero + Testimonials + CTA" pattern per UX Pro Max landing recommendation. */
.status-history-cta {
    margin: 0 0 2.5rem;
}
.history-cta-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    /* Match hero padding for visual rhythm — both editorial "cards" feel
       like the same family of containers. */
    padding: 2rem 2.2rem;
    background:
        radial-gradient(ellipse at 88% 30%,
            color-mix(in oklab, var(--amber) 12%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--amber);
    position: relative;
    overflow: hidden;
}
.history-cta-intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    max-width: 60ch;
}

/* CTA form: takes the existing .subscribe-form styles but anchored on
   the same parent as the intro — so the inline form lives inside the
   card and feels like one continuous element. */
.subscribe-form--cta {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}
.subscribe-form--cta::before {
    display: none;  /* the card already has its own amber stripe */
}
.history-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 0.2rem;
}
.history-cta-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--amber);
    line-height: 1;
    letter-spacing: 0;
    transform: translateY(0.05rem);
    opacity: 0.95;
}
.history-cta-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.012em;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.history-cta-deck {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-dim);
    max-width: 56ch;
}
.history-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.3rem;
    background: var(--amber);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid var(--amber);
    transition: all 200ms ease;
    white-space: nowrap;
}
.history-cta-action:hover {
    background: color-mix(in oklab, var(--amber) 88%, var(--ink));
    border-color: color-mix(in oklab, var(--amber) 88%, var(--ink));
    transform: translateX(2px);
}
.history-cta-action iconify-icon { font-size: 0.95rem; }

@media (max-width: 720px) {
    .history-cta-card { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem 1.4rem; }
    .history-cta-action { justify-content: center; }
}

.status-history-empty {
    padding: 4rem 1rem 2rem;
    text-align: center;
    color: var(--ink-dim);
}
.status-history-empty-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.2rem;
    color: var(--st-operational);
}
.status-history-empty-mark svg { width: 100%; height: 100%; }
.status-history-empty-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink);
    font-weight: 400;
}

/* ============================================================
 * INCIDENT DETAIL PAGE — editorial article
 * ============================================================
 * Treats a single incident like a published news report. Big
 * Fraunces dateline, mono UTC stamps, severity-driven accent
 * stripe down the left edge of the article, timeline rail with
 * status-coloured dots, optional postmortem section.
 * ============================================================ */

.status-board--incident {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    position: relative;
}

.incident-page {
    position: relative;
    padding-left: 1.5rem;
}
/* Severity-driven accent stripe running the full length of the article.
   The page IS the alert — the stripe colour communicates urgency without
   needing a banner. */
.incident-page::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--amber) 0%,
        color-mix(in oklab, var(--amber) 30%, transparent) 100%);
    pointer-events: none;
}
.incident-page--major::before  { background: linear-gradient(180deg, color-mix(in oklab, var(--crimson) 65%, var(--amber)) 0%, color-mix(in oklab, var(--crimson) 30%, transparent) 100%); }
.incident-page--critical::before { background: linear-gradient(180deg, var(--crimson) 0%, color-mix(in oklab, var(--crimson) 30%, transparent) 100%); }
.incident-page.is-resolved::before { background: linear-gradient(180deg, var(--moss) 0%, color-mix(in oklab, var(--moss) 25%, transparent) 100%); }

/* ─── Hero — minimum viable client briefing ─── */
.incident-hero {
    padding: 1rem 0 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.incident-hero::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 1px;
    background: var(--amber);
}
.incident-hero > .status-pill {
    display: inline-block;
    margin-bottom: 1.1rem;
    font-size: 0.6rem;
    padding: 0.25rem 0.7rem;
    letter-spacing: 0.24em;
}
.incident-hero-title {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--ink);
    max-width: 28ch;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.incident-page.is-resolved .incident-hero-title { color: var(--ink); }

/* Single-line deck under the title: "Affected: X, Y. · Resolved in 18m" */
.incident-hero-deck {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 60ch;
}
.incident-hero-deck b {
    color: var(--ink);
    font-weight: 500;
    font-style: italic;
}
.incident-page.is-resolved .incident-hero-deck b { color: var(--moss); }
.incident-hero-deck .dim { color: var(--ink-faint); margin-right: 0.18rem; }
.incident-hero-deck-divider {
    color: var(--ink-faint);
    opacity: 0.6;
    margin: 0 0.25rem;
}
.incident-hero-duration {
    font-family: var(--font-mono);
    color: var(--amber);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    font-style: normal;
}
.incident-page.is-resolved .incident-hero-duration { color: var(--moss); }

/* ─── Timeline ─── */
.incident-timeline-section { margin-bottom: 3rem; }

.incident-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.incident-timeline-entry {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0 1.1rem;
    padding-bottom: 1.6rem;
    animation: incidentEntryIn 360ms ease-out both;
}
.incident-timeline-entry:nth-child(1) { animation-delay: 20ms; }
.incident-timeline-entry:nth-child(2) { animation-delay: 60ms; }
.incident-timeline-entry:nth-child(3) { animation-delay: 100ms; }
.incident-timeline-entry:nth-child(4) { animation-delay: 140ms; }
.incident-timeline-entry:nth-child(5) { animation-delay: 180ms; }
@keyframes incidentEntryIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.incident-timeline-entry:last-child { padding-bottom: 0; }

/* Vertical rail connecting dots — centered on the mark column via
   left: 18px (exact mid-point of the 36px column) so the dot sits
   perfectly on top of the line. */
.incident-timeline-rail {
    position: absolute;
    left: 18px;
    top: 38px;          /* below the 36px mark + 2px breathing room */
    bottom: -4px;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--amber) 45%, transparent) 0%,
        color-mix(in oklab, var(--amber) 12%, transparent) 100%);
    pointer-events: none;
}
.incident-timeline-entry[data-final="true"] .incident-timeline-rail { display: none; }

.incident-timeline-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;   /* dead-centre both axes for any child */
    background: var(--paper);
    border: 1px solid color-mix(in oklab, var(--amber) 40%, var(--rule));
    border-radius: 50%;
    color: var(--amber);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
}
.incident-timeline-mark-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 18%, transparent);
    /* Place-items already centres; explicit margin: 0 just guards
       against any inherited margin from the global resets. */
    margin: 0;
    display: block;
}
.incident-timeline-mark svg { width: 14px; height: 14px; }

/* Mark colour follows the per-entry status */
.incident-timeline-entry[data-status="investigating"] .incident-timeline-mark { border-color: color-mix(in oklab, var(--st-degraded) 55%, var(--rule)); color: var(--st-degraded); }
.incident-timeline-entry[data-status="investigating"] .incident-timeline-mark-dot { background: var(--st-degraded); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-degraded) 18%, transparent); }
.incident-timeline-entry[data-status="identified"] .incident-timeline-mark { border-color: color-mix(in oklab, var(--st-partial) 55%, var(--rule)); color: var(--st-partial); }
.incident-timeline-entry[data-status="identified"] .incident-timeline-mark-dot { background: var(--st-partial); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-partial) 18%, transparent); }
.incident-timeline-entry[data-status="monitoring"] .incident-timeline-mark { border-color: color-mix(in oklab, var(--azure) 55%, var(--rule)); color: var(--azure); }
.incident-timeline-entry[data-status="monitoring"] .incident-timeline-mark-dot { background: var(--azure); box-shadow: 0 0 0 3px color-mix(in oklab, var(--azure) 18%, transparent); }
.incident-timeline-entry[data-status="resolved"] .incident-timeline-mark { border-color: color-mix(in oklab, var(--moss) 60%, var(--rule)); color: var(--moss); background: color-mix(in oklab, var(--moss) 8%, var(--paper)); }

.incident-timeline-card {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 0.85rem 1.1rem 0.9rem;
    min-width: 0;
    border-left: 2px solid transparent;
    transition: border-color 200ms ease;
}
.incident-timeline-entry[data-status="investigating"] .incident-timeline-card { border-left-color: color-mix(in oklab, var(--st-degraded) 50%, transparent); }
.incident-timeline-entry[data-status="identified"] .incident-timeline-card   { border-left-color: color-mix(in oklab, var(--st-partial)  50%, transparent); }
.incident-timeline-entry[data-status="monitoring"] .incident-timeline-card   { border-left-color: color-mix(in oklab, var(--azure)      50%, transparent); }
.incident-timeline-entry[data-status="resolved"] .incident-timeline-card     { border-left-color: color-mix(in oklab, var(--moss)       50%, transparent); }

/* Timestamp on its own line above the body — minimal mono row. The dot
   colour already communicates state, so no per-entry status pill needed. */
.incident-timeline-time {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
}
.incident-timeline-time-hm { color: var(--amber); }

.incident-timeline-body {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.incident-empty {
    padding: 1.2rem 1.2rem;
    background: var(--paper-2);
    border: 1px dashed var(--rule);
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-faint);
    text-align: center;
}

/* ─── Postmortem — only renders if operator wrote one ─── */
.incident-postmortem-section {
    margin: 2.5rem 0 2rem;
}
.incident-postmortem-head {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
.incident-postmortem-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--moss);
    line-height: 1;
}
.incident-postmortem-label {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.incident-postmortem-body {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--moss);
    padding: 1.2rem 1.4rem;
    letter-spacing: 0.005em;
    white-space: pre-wrap;
}

/* ─── Foot rail ─── */
.incident-page-foot {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
}
.incident-page-foot-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: transparent;
    border: 1px solid var(--rule-bold);
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 180ms ease;
}
.incident-page-foot-action:hover {
    color: var(--amber);
    border-color: color-mix(in oklab, var(--amber) 50%, transparent);
}
.incident-page-foot-action--primary {
    background: var(--amber);
    color: var(--paper);
    border-color: var(--amber);
}
.incident-page-foot-action--primary:hover {
    background: color-mix(in oklab, var(--amber) 88%, var(--ink));
    color: var(--paper);
}
.incident-page-foot-action iconify-icon { font-size: 0.9rem; }

/* Live UTC clock — amber HH:MM:SS in the footer / hero. Mono + tabular
   nums so the digits don't jitter as seconds tick. */
.status-footer-clock,
#utcClock {
    font-family: var(--font-mono);
    color: var(--amber);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    font-size: inherit;
}

/* Responsive — incident page */
@media (max-width: 720px) {
    .incident-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .incident-hero-stat--span { grid-column: span 2; }
    .incident-hero-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .incident-page { padding-left: 1rem; }
    .incident-page-foot { flex-direction: column; align-items: stretch; }
    .incident-page-foot-action { justify-content: center; }
    .incident-section-axis { display: none; }
}

/* ============================================================
 * STATUS ADMIN — editorial control surface
 * ============================================================
 * The /status-admin page. Same editorial codex aesthetic as the
 * public board: Fraunces headlines, mono eyebrows, amber accents,
 * dense scannable rows. Operator's command center — looks like a
 * print editor's desk during go-to-press hour.
 * ============================================================ */

.status-admin {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
    position: relative;
}

/* ─── Override the global .sig-hero for the admin context ───
   The global hero (used by /general, /dashboard etc.) is a 1fr|auto grid
   built for short magazine-cover headlines. The admin deck is much longer
   and the `auto` column lets the title balloon to full width, pushing
   the deck into a cramped 280-px wedge with 7-line wraps. Rebuild as a
   single-column editorial stack: eyebrow → title → deck. Smaller title
   (admin doesn't need 4.75rem), wider deck, tighter padding. */
.status-admin .sig-hero {
    display: block;
    padding: 1.25rem 0 2rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule-bold);
}
.status-admin .sig-eyebrow {
    margin-bottom: 1.1rem;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
}
.status-admin .sig-title {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 22ch;
}
.status-admin .sig-deck {
    margin-top: 0.95rem;
    max-width: 62ch;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--ink-dim);
}
.status-admin .sig-deck code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--amber);
    background: color-mix(in oklab, var(--amber) 6%, transparent);
    padding: 0.05rem 0.3rem;
    letter-spacing: 0.02em;
}

/* ─── Page entrance — runs ONCE on initial load only.
   Earlier this rule applied to all `.status-admin > *` which meant the
   panel slab also animated in. That collided with the per-row stagger
   inside the panel — every tab switch played two cascading animations
   simultaneously, producing a "doubled" jitter. Scoping the entrance
   to a `.is-booting` class (added on DOM ready, removed after the hero
   has settled) means tab switches show the new panel instantly, while
   the row-level stagger inside that panel still runs as expected. */
.status-admin.is-booting .sig-hero {
    animation: status-rise 480ms var(--ease-out-quint) both;
}
@keyframes status-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Cascade: deterministic per-render stagger ─────────────────────
   flashRender() toggles `.is-cascading` on the container and sets a
   `--i` inline custom property on each child (0,1,2,…). The single
   calc() below derives the per-child delay — one rule, unlimited rows,
   no nth-child wall to maintain. */
.status-admin .is-cascading > * {
    animation: cascadeRise 360ms var(--ease-out-quint) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}
/* Nested component rows inside group blocks — own micro-stagger that
   reads as three coloured waves rather than one wash. */
.status-admin .is-cascading .status-admin-component-group-body > .status-admin-component {
    animation: cascadeRise 320ms var(--ease-out-quint) both;
    animation-delay: calc(60ms + var(--i, 0) * 35ms);
}
@keyframes cascadeRise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Gauge-frame variant of the admin hero ────────────────────────────
   Editorial chrome for the Status admin: 4 corner ticks (top amber with
   a 4 px inner notch — measurement-instrument feel — bottom rule-bold),
   a faint horizontal scanline overlay (telegraph paper), and dual radial
   washes (amber top-left, moss bottom-right) so the panel feels lit
   from two corners. Replaces the bare hero's bottom-only rule. */
.status-admin .sig-hero--gauge {
    position: relative;
    display: block;
    padding: 2.4rem 2.2rem 1.7rem;
    margin-bottom: 1.4rem;
    border: 1px solid var(--rule-bold);
    border-bottom: 1px solid var(--rule-bold);
    background:
        radial-gradient(circle at 14% 18%,
            color-mix(in oklab, var(--amber) 6%, transparent), transparent 55%),
        radial-gradient(circle at 86% 82%,
            color-mix(in oklab, var(--moss) 5%, transparent), transparent 55%),
        var(--paper-2);
    overflow: hidden;
}
.sig-hero--gauge::before {
    /* faint horizontal scanlines — telegraph paper, not paper grain */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        color-mix(in oklab, var(--amber) 1.5%, transparent) 3px,
        color-mix(in oklab, var(--amber) 1.5%, transparent) 4px);
    pointer-events: none;
    z-index: 0;
}
.sig-hero--gauge > * { position: relative; z-index: 2; }

/* Corner gauge ticks. Top corners get the amber-L + 4px notch; bottom
   corners are the dimmer rule-bold L with no notch — visual gravity
   sits at the top where the title lives. */
.sig-hero-tick {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 1;
}
.sig-hero-tick--tl {
    top: 0; left: 0;
    border-top: 1px solid var(--amber);
    border-left: 1px solid var(--amber);
}
.sig-hero-tick--tr {
    top: 0; right: 0;
    border-top: 1px solid var(--amber);
    border-right: 1px solid var(--amber);
}
.sig-hero-tick--bl {
    bottom: 0; left: 0;
    border-bottom: 1px solid var(--rule-bold);
    border-left: 1px solid var(--rule-bold);
}
.sig-hero-tick--br {
    bottom: 0; right: 0;
    border-bottom: 1px solid var(--rule-bold);
    border-right: 1px solid var(--rule-bold);
}
.sig-hero-tick--tl::after,
.sig-hero-tick--tr::after {
    /* small inner notch — turns the L into a "measurement tick" */
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--amber);
}
.sig-hero-tick--tl::after { top: 8px; left: -1px; }
.sig-hero-tick--tr::after { top: 8px; right: -1px; }

/* Amber stripe draws across the top-left edge on first paint — a small
   "the instrument just powered on" gesture. 720 ms, runs after a 200 ms
   delay so it fires when the hero has settled in. */
.sig-hero--gauge::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 0;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber);
    z-index: 3;
    pointer-events: none;
    animation: sig-stripe 720ms var(--ease-out-snap) 200ms forwards;
}
@keyframes sig-stripe {
    from { width: 0;    opacity: 0; }
    to   { width: 64px; opacity: 1; }
}

/* Hero grid: title text on the left, signal rail on the right.
   On <960px the rail drops below the text. */
.sig-hero--gauge .sig-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: end;
    margin-bottom: 1.6rem;
}
.sig-hero--gauge .sig-hero-text { min-width: 0; }
.sig-hero--gauge .sig-hero-text .sig-eyebrow { margin-bottom: 1rem; }
.sig-hero--gauge .sig-hero-text .sig-deck { margin-top: 0.9rem; }
.sig-hero--gauge .sig-hero-text .sig-title { max-width: 22ch; }

/* Signal rail — right column. Vertical column of 3 stats: a state word
   (italic serif, coloured by overall state), an active-incidents count
   (serif num, crimson when >0), and a small mono uptime tail. */
.signal-rail {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 220px;
    padding-left: 1.1rem;
    border-left: 1px solid var(--rule-bold);
}
.signal-stat { display: block; }
.signal-stat-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.4rem;
}
.signal-stat-word {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--moss);
    transition: color 240ms ease;
}
.signal-stat-word[data-state="degraded"]       { color: var(--amber); }
.signal-stat-word[data-state="partial_outage"] { color: var(--st-partial); }
.signal-stat-word[data-state="major_outage"]   { color: var(--crimson); }
.signal-stat-word[data-state="maintenance"]    { color: var(--azure); }
.signal-stat-num {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: color 240ms ease;
}
.signal-stat-num[data-warn="true"] { color: var(--crimson); }
.signal-stat-mono {
    /* Uptime stat — bumped from mono 0.95 rem to serif 1.35 rem so it
       reads as a real number alongside Platform/Active, not as quiet
       chrome. Keeps tabular-nums for the column alignment. */
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.signal-stat--small .signal-stat-label { font-size: 0.55rem; }

/* Bottom chip strip — 4 per-tab metrics, each tinted to its tab's tone.
   Hover swaps in the tone wash for a 4-colour rainbow as the operator
   mouses across the strip. Acts as secondary navigation: a click on a
   chip routes to that tab via switchTab(). */
.signal-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    border: 1px solid var(--rule);
    background: var(--paper);
    margin-top: 0.15rem;
}
.signal-chip {
    --tone: var(--amber);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
}
.signal-chip:last-child { border-right: 0; }
.signal-chip[data-tone="azure"]   { --tone: var(--azure); }
.signal-chip[data-tone="moss"]    { --tone: var(--moss); }
.signal-chip[data-tone="crimson"] { --tone: var(--crimson); }
.signal-chip[data-tone="amber"]   { --tone: var(--amber); }
.signal-chip:hover {
    background: color-mix(in oklab, var(--tone) 5%, var(--paper-3));
    color: var(--tone);
}
.signal-chip:hover iconify-icon { color: var(--tone); }
.signal-chip:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--tone) 60%, transparent);
    outline-offset: -2px;
}
/* Active chip — this is the currently-visible tab. Tone fills the
   box (12 % wash), the icon and label saturate, and a 2 px tone bar
   sits on top so the chip reads as a hard nav indicator, not just
   a hover preview. The bottom border drops so the chip "merges"
   into the panel below it. */
.signal-chip.is-active {
    background: color-mix(in oklab, var(--tone) 12%, var(--paper-3));
    color: var(--tone);
    border-bottom-color: transparent;
    position: relative;
}
.signal-chip.is-active iconify-icon { color: var(--tone); }
.signal-chip.is-active .signal-chip-num { color: var(--tone); }
.signal-chip.is-active::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--tone);
    /* Subtle bleed beneath the bar — gives the bar a "lit filament" feel
       instead of looking like a flat rule. */
    box-shadow:
        0 0 8px color-mix(in oklab, var(--tone) 55%, transparent),
        0 1px 0 0 color-mix(in oklab, var(--tone) 25%, transparent);
    pointer-events: none;
}
.signal-chip iconify-icon {
    font-size: 1.05rem;
    color: var(--ink-faint);
    transition: color 180ms ease;
    flex-shrink: 0;
}
.signal-chip-label { flex-shrink: 0; }
.signal-chip-num {
    margin-left: auto;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    transition: color 200ms ease;
}
.signal-chip:hover .signal-chip-num { color: var(--tone); }
.signal-chip-suffix {
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    flex-shrink: 0;
}

/* Responsive — drop the rail below the title at narrow widths. */
@media (max-width: 980px) {
    .status-admin .sig-hero--gauge { padding: 1.9rem 1.5rem 1.4rem; }
    .sig-hero--gauge .sig-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .signal-rail {
        padding-left: 0;
        padding-top: 1.1rem;
        border-left: 0;
        border-top: 1px solid var(--rule-bold);
    }
}

/* Pretty button aliases used in the JS-rendered rows. Existing styles.css
   defines sig-btn-primary/ghost/danger/success; the admin code uses three
   more semantic variants — alias them to the matching palette + override
   sizing to the compact admin scale. */
.sig-btn-am,
.sig-btn-ok,
.sig-btn-er {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 160ms ease;
    background: transparent;
    line-height: 1;
}
.sig-btn-am { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 50%, transparent); }
.sig-btn-am:hover { background: var(--amber); color: var(--paper); }
.sig-btn-ok { color: var(--moss); border-color: color-mix(in oklab, var(--moss) 50%, transparent); }
.sig-btn-ok:hover { background: var(--moss); color: var(--paper); }
.sig-btn-er { color: var(--crimson); border-color: color-mix(in oklab, var(--crimson) 50%, transparent); }
.sig-btn-er:hover { background: var(--crimson); color: var(--paper); }

/* ─── Tab bar ─── */
.status-admin-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin: 1.6rem 0 0;
    border-bottom: 1px solid var(--rule-bold);
    flex-wrap: wrap;
}
.status-admin-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 1.2rem 0.95rem;
    cursor: pointer;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all 180ms ease;
    margin-bottom: -1px;  /* overlap the parent border */
}
.status-admin-tab iconify-icon { font-size: 0.95rem; }
.status-admin-tab:hover {
    color: var(--ink);
    background: color-mix(in oklab, var(--amber) 4%, transparent);
}
.status-admin-tab.is-active {
    color: var(--amber);
    border-bottom-color: var(--amber);
}
.status-admin-tab.is-active::before {
    content: '§';
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-55%);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--amber);
    opacity: 0.9;
    pointer-events: none;
}
.status-admin-tab.is-active { padding-left: 2.05rem; }
/* Hide the count badge when not yet populated. The HTML emits an empty
   <span> for each tab; the JS fills .textContent once data lands. CSS
   :empty matches text-nodeless elements so the badge appears only after
   loading completes — no flicker of "Email —" / "Incidents —". */
.status-admin-tab-count:empty { display: none; }
.status-admin-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 0.4rem;
    height: 18px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
}
.status-admin-tab.is-active .status-admin-tab-count {
    background: color-mix(in oklab, var(--amber) 14%, var(--paper));
    border-color: color-mix(in oklab, var(--amber) 50%, transparent);
    color: var(--amber);
}

/* ─── Panel ─── */
.status-admin-panel {
    display: none;
    padding: 2rem 0 1rem;
}
.status-admin-panel.is-active { display: block; }

.status-admin-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.65rem 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.status-admin-panel-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 96px;
    height: 2px;
    background: linear-gradient(90deg, var(--amber) 0%, color-mix(in oklab, var(--amber) 20%, transparent) 100%);
}
.status-admin-panel-head h2 {
    grid-column: 1;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.95rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.012em;
    line-height: 1.12;
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
}
.status-admin-panel-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--amber);
    line-height: 1;
    opacity: 0.85;
    /* § glyph has a curl that descends below the baseline. Even with
       baseline-aligned h2, this makes the symbol's optical centre fall
       below the cap-mid of "Incidents". Lift the glyph so the bowl of
       § sits visually centred on the cap-height of the headline. */
    transform: translateY(-0.14em);
}
/* Iconify SVG variant — when the glyph is a Heroicon (matching the tab
   icon) instead of a typographic mark. Same amber tone, no italic. */
.status-admin-panel-glyph--icon {
    display: inline-flex;
    align-items: center;
    transform: translateY(0.05em);
}
.status-admin-panel-glyph--icon iconify-icon {
    font-size: 1.55rem;
    color: var(--amber);
    opacity: 0.9;
}
.status-admin-panel-head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.008em;
}
/* Sub-panel head — used for nested groupings inside a tab (e.g. the
   "Subscribers" header below the "Email subscriptions" panel). Inherits
   the grid + amber rule chrome but sits lower in the visual hierarchy. */
.status-admin-panel-head--sub {
    margin-top: 2rem;
}
.status-admin-panel-head--sub h3 {
    font-size: 1.1rem;
}
.status-admin-panel-deck {
    grid-column: 1;
    margin: 0.55rem 0 0;
    max-width: 68ch;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--ink-dim);
    line-height: 1.6;
}
/* Anchor the primary action button (and the incidents-tab control cluster)
   to the TOP-RIGHT of the header. Earlier styles glued it bottom-right
   where it floated under a multi-line deck. */
.status-admin-panel-head .sig-btn-primary,
.status-admin-panel-head .status-admin-incident-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    margin-top: 0.15rem;
}

/* ─── Components list ─── */
.status-admin-components-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
/* ─── Components — grouped into editorial sections ───
   Each group_key (Admin Surface / Infrastructure / Public API) gets its
   own section with a §-prefixed head, italic deck, and count chip on
   the right. Rows below sit in a flat list and use the group's left rail
   colour to indicate current state. */
.status-admin-component-group-block {
    margin-bottom: 2.2rem;
    /* Each group block carries its own accent tone. The glyph, the 44 px
       amber rule under the head, and the per-row key chip all read from
       --group-tone. Adding a 4th group later = one new selector below. */
    --group-tone: var(--amber);
}
.status-admin-component-group-block:last-child { margin-bottom: 0; }
.status-admin-component-group-block[data-group="public_api"]     { --group-tone: var(--azure); }
.status-admin-component-group-block[data-group="admin_surface"]  { --group-tone: var(--moss); }
.status-admin-component-group-block[data-group="infrastructure"] { --group-tone: var(--violet); }
.status-admin-component-group-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.55rem 0.85rem;
    padding: 0 0 0.6rem;
    margin-bottom: 0.95rem;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
    position: relative;
}
.status-admin-component-group-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 1px;
    background: var(--group-tone);
}
.status-admin-component-group-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    color: var(--group-tone);
    transform: translateY(-0.05em);
}
.status-admin-component-group-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
}
.status-admin-component-group-deck {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ink-faint);
    letter-spacing: 0.005em;
    min-width: 0;
}
.status-admin-component-group-count {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Tinted to match the group's tone so the chip reads as belonging
       to the section, not as generic UI chrome. */
    color: var(--group-tone, var(--ink-dim));
    background: color-mix(in oklab, var(--group-tone, var(--rule)) 8%, var(--paper-3));
    border: 1px solid color-mix(in oklab, var(--group-tone, var(--rule)) 35%, var(--rule));
    padding: 0.22rem 0.6rem;
    justify-self: end;
}
.status-admin-component-group-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* ─── Component row ─── */
.status-admin-component {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.05rem 1.3rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 3px solid transparent;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    position: relative;
    min-height: 84px;
    /* Row entrance is owned by .is-cascading (see top of file). No element-
       level `animation:` here — that always fires on display:none→block,
       which produced the doubled-stagger feel on tab switches. */
}
.status-admin-component:hover {
    background: color-mix(in oklab, var(--amber) 2%, var(--paper-2));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
}
/* State-coloured left edge previews health at a glance even when not hovered.
   55-60% opacity at rest, saturate to full on hover. */
.status-admin-component[data-state="operational"]    { border-left-color: color-mix(in oklab, var(--moss) 55%, transparent); }
.status-admin-component[data-state="degraded"]       { border-left-color: color-mix(in oklab, var(--amber) 60%, transparent); }
.status-admin-component[data-state="partial_outage"] { border-left-color: color-mix(in oklab, var(--st-partial) 60%, transparent); }
.status-admin-component[data-state="major_outage"]   { border-left-color: color-mix(in oklab, var(--crimson) 65%, transparent); }
.status-admin-component[data-state="maintenance"]    { border-left-color: color-mix(in oklab, var(--azure) 60%, transparent); }
.status-admin-component[data-state="operational"]:hover    { border-left-color: var(--moss); }
.status-admin-component[data-state="degraded"]:hover       { border-left-color: var(--amber); }
.status-admin-component[data-state="partial_outage"]:hover { border-left-color: var(--st-partial); }
.status-admin-component[data-state="major_outage"]:hover   { border-left-color: var(--crimson); }
.status-admin-component[data-state="maintenance"]:hover    { border-left-color: var(--azure); }

/* Identity block */
.status-admin-component-id {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.1rem 0;
}
.status-admin-component-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.status-admin-component-name {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
    transition: color 200ms ease;
}
.status-admin-component:hover .status-admin-component-name {
    /* Inherits --group-tone from the surrounding group block — so name
       drifts amber in Public API ... no, azure in Public API, moss in
       Admin Surface, violet in Infrastructure. Defaults to amber when
       no parent block sets a tone. */
    color: color-mix(in oklab, var(--group-tone, var(--amber)) 18%, var(--ink));
}
.status-admin-component-key {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--group-tone, var(--amber));
    background: color-mix(in oklab, var(--group-tone, var(--amber)) 8%, var(--paper-3));
    padding: 0.18rem 0.55rem;
    border: 1px solid color-mix(in oklab, var(--group-tone, var(--amber)) 35%, var(--rule));
    text-transform: lowercase;
    line-height: 1.2;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.status-admin-component:hover .status-admin-component-key {
    background: color-mix(in oklab, var(--group-tone, var(--amber)) 14%, var(--paper-3));
    border-color: color-mix(in oklab, var(--group-tone, var(--amber)) 50%, var(--rule));
}
.status-admin-component-desc {
    font-family: var(--font-serif);
    font-size: 0.84rem;
    color: var(--ink-dim);
    font-style: italic;
    line-height: 1.45;
}
.status-admin-component-msg {
    padding: 0.35rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--amber);
    background: color-mix(in oklab, var(--amber) 6%, var(--paper));
    border-left: 2px solid var(--amber);
    letter-spacing: 0.04em;
}
.status-admin-component-manual {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    background: color-mix(in oklab, var(--amber) 14%, var(--paper-3));
    border: 1px solid color-mix(in oklab, var(--amber) 45%, var(--rule));
    padding: 0.18rem 0.55rem;
}
/* Status pill in the admin component row gets a leading dot so the state
   reads at a glance even if the row scrolls past peripheral vision. Scoped
   so we don't disturb pills elsewhere (public status, methodology, etc.). */
.status-admin-component .status-pill {
    gap: 0.45rem;
}
.status-admin-component .status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 40%, transparent),
                0 0 8px -2px currentColor;
}

.status-admin-component-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
/* Icon-only delete — destructive action, dimmed at rest, full crimson on hover.
   Keeps the row from looking like a button stack. */
.status-admin-component-delete {
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--crimson) 22%, var(--rule));
    color: color-mix(in oklab, var(--crimson) 55%, var(--ink-dim));
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    font-size: 0.95rem;       /* sizes the inline iconify SVG (1em footprint) */
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.status-admin-component-delete iconify-icon { font-size: inherit; line-height: 1; }
.status-admin-component-delete:hover {
    background: color-mix(in oklab, var(--crimson) 10%, transparent);
    border-color: var(--crimson);
    color: var(--crimson);
}
.status-admin-component-delete:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--crimson) 50%, transparent);
    outline-offset: 2px;
}

/* ─── Incidents list ─── */
.status-admin-incidents-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* ─── Context-aware empty state for the Incidents tab ───
   Used when activeIncidentFilter has zero results. Renders as a
   prominent editorial card with a state-coloured rail on the left,
   a serif italic glyph that spans both rows (so the body content
   stacks tight in column 2 instead of leaving an "L" of dead space),
   a headline + deck. Tone changes per filter:
   moss (all-clear / track-intact) or amber (no resolved yet). */
.status-admin-incidents-empty {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1.4rem;
    row-gap: 0.45rem;
    align-items: center;
    padding: 1.8rem 1.9rem;
    max-width: 880px;
    background:
        radial-gradient(ellipse 60% 80% at 92% 12%,
            color-mix(in oklab, var(--ink) 100%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-faint);
    overflow: hidden;
    /* Entrance handled by .is-cascading on the list container. */
}
.status-admin-incidents-empty::before {
    /* 2% grain — film texture, matches the modal cards */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}
.status-admin-incidents-empty--moss {
    border-left-color: var(--moss);
    background:
        radial-gradient(ellipse 70% 90% at 92% 12%,
            color-mix(in oklab, var(--moss) 10%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
}
.status-admin-incidents-empty--amber {
    border-left-color: var(--amber);
    background:
        radial-gradient(ellipse 70% 90% at 92% 12%,
            color-mix(in oklab, var(--amber) 10%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
}

.incidents-empty-glyph {
    /* Span both rows so the title + deck stack cleanly to its right
       — no orphaned space under the glyph. */
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--paper) 80%, transparent);
    border: 1px solid color-mix(in oklab, var(--ink-faint) 30%, transparent);
    color: var(--ink-faint);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--ink-faint) 8%, transparent);
}
.incidents-empty-glyph iconify-icon {
    /* Heroicons SVG sized to match the circle proportions */
    font-size: 1.6rem;
    color: inherit;
    line-height: 1;
}
.status-admin-incidents-empty--moss .incidents-empty-glyph {
    color: var(--moss);
    border-color: color-mix(in oklab, var(--moss) 45%, transparent);
    background: color-mix(in oklab, var(--moss) 6%, var(--paper));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--moss) 14%, transparent),
                0 0 32px color-mix(in oklab, var(--moss) 22%, transparent);
}
.status-admin-incidents-empty--amber .incidents-empty-glyph {
    color: var(--amber);
    border-color: color-mix(in oklab, var(--amber) 45%, transparent);
    background: color-mix(in oklab, var(--amber) 6%, var(--paper));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--amber) 14%, transparent),
                0 0 28px color-mix(in oklab, var(--amber) 18%, transparent);
}

.incidents-empty-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.012em;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.incidents-empty-deck {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--ink-dim);
    max-width: 52ch;
}

@media (max-width: 720px) {
    .status-admin-incidents-empty {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.8rem 1.4rem;
        row-gap: 0.6rem;
    }
    .incidents-empty-glyph {
        grid-row: 1;
        grid-column: 1;
        margin: 0 auto;
    }
    .incidents-empty-title { grid-row: 2; grid-column: 1; align-self: auto; }
    .incidents-empty-deck  { grid-row: 3; grid-column: 1; align-self: auto; margin: 0 auto; }
}
.status-admin-incident {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem 1.4rem;
    align-items: start;
    padding: 1.05rem 1.25rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 3px solid transparent;
    transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
    /* Entrance owned by .is-cascading on the parent list. */
}
.status-admin-incident[data-severity="minor"]    { border-left-color: var(--amber); }
.status-admin-incident[data-severity="major"]    { border-left-color: color-mix(in oklab, var(--crimson) 60%, var(--amber)); }
.status-admin-incident[data-severity="critical"] { border-left-color: var(--crimson); }
.status-admin-incident[data-severity="critical"]:not(.is-resolved) {
    animation: adminIncidentBreath 3s ease-in-out infinite;
}
@keyframes adminIncidentBreath {
    0%, 100% { box-shadow: inset 4px 0 0 0 var(--crimson); }
    50%      { box-shadow: inset 4px 0 0 0 color-mix(in oklab, var(--crimson) 50%, transparent), 0 0 0 1px color-mix(in oklab, var(--crimson) 18%, transparent); }
}
.status-admin-incident.is-resolved {
    opacity: 0.62;
    border-left-color: color-mix(in oklab, var(--moss) 50%, transparent);
}
.status-admin-incident.is-resolved:hover { opacity: 0.95; }

.status-admin-incident-pills {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 110px;
}
.status-admin-incident-pills .status-pill { white-space: nowrap; text-align: center; }

.status-admin-incident-body { min-width: 0; }
.status-admin-incident-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 0.35rem;
}
.status-admin-incident-meta {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.status-admin-incident-meta b {
    color: var(--amber);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.56rem;
}
.status-admin-incident-components {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.status-admin-incident-actions {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    white-space: nowrap;
}

.status-admin-incident-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

/* ─── Filter chip group (incidents tab + email tab) ─── */
.status-admin-filter {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
}
.status-admin-filter-btn {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--rule);
    padding: 0.6rem 1rem;
    min-height: 36px;
    cursor: pointer;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 160ms ease, color 160ms ease;
}
.status-admin-filter-btn:last-child { border-right: 0; }
.status-admin-filter-btn:hover { color: var(--ink); }
.status-admin-filter-btn:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--amber) 70%, transparent);
    outline-offset: -2px;
}
.status-admin-filter-btn.is-active {
    background: color-mix(in oklab, var(--amber) 14%, var(--paper));
    color: var(--amber);
}

/* ─── Probes list — editorial specimen cards ───
   Each probe gets a typographic monogram (HTTP / DB / TCP) on the left,
   identity (name + target) in the middle, and a horizontal rail of
   labeled chips for the runtime parameters. The dense single-line meta
   was illegible — chips give every parameter its own optical anchor. */
.status-admin-probes-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.status-admin-probe {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.1rem;
    padding: 1.05rem 1.3rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 3px solid color-mix(in oklab, var(--moss) 32%, transparent);
    transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 200ms ease;
    min-height: 96px;
    /* Entrance owned by .is-cascading on the parent list. */
}
.status-admin-probe:hover {
    border-left-color: var(--moss);
    background: color-mix(in oklab, var(--moss) 3%, var(--paper-2));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
}
.status-admin-probe.is-disabled {
    opacity: 0.55;
    border-left-color: var(--rule);
}
.status-admin-probe.is-unconfigured {
    border-left-color: color-mix(in oklab, var(--amber) 35%, transparent);
}

/* ── Monogram badge — typographic stamp ── */
.probe-type-badge {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--moss);
    background: color-mix(in oklab, var(--moss) 10%, var(--paper-3));
    border: 1px solid color-mix(in oklab, var(--moss) 45%, var(--rule));
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--moss) 8%, transparent);
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.status-admin-probe.is-disabled .probe-type-badge {
    color: var(--ink-faint);
    background: var(--paper-3);
    border-color: var(--rule);
    box-shadow: none;
}
.probe-type-badge[data-type="db"] {
    color: var(--azure);
    background: color-mix(in oklab, var(--azure) 12%, var(--paper-3));
    border-color: color-mix(in oklab, var(--azure) 55%, var(--rule));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--azure) 10%, transparent);
}
.probe-type-badge[data-type="tcp"] {
    color: var(--amber);
    background: color-mix(in oklab, var(--amber) 10%, var(--paper-3));
    border-color: color-mix(in oklab, var(--amber) 50%, var(--rule));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--amber) 10%, transparent);
}

/* ── Identity + params stack ── */
.probe-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.probe-head {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}
.probe-name {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.probe-target {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-dim);
    letter-spacing: 0.01em;
    word-break: break-all;
    line-height: 1.4;
    position: relative;
    padding-left: 0.95rem;
}
.probe-target::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ink-faint);
    font-style: normal;
    font-weight: 500;
    transition: color 160ms ease, transform 160ms ease;
}
.status-admin-probe:hover .probe-target::before {
    color: var(--moss);
    transform: translateX(2px);
}
.status-admin-probe.is-disabled .probe-target::before { color: var(--ink-faint); }
.status-admin-probe .probe-type-badge[data-type="db"] ~ .probe-body .probe-target::before {
    color: color-mix(in oklab, var(--azure) 80%, var(--ink-faint));
}
.probe-target.is-missing {
    font-style: italic;
    color: var(--ink-faint);
    letter-spacing: 0;
}
.probe-target.is-missing::before { content: '·'; }

/* ── Parameter chips ── */
.probe-params {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.probe-param {
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    background: var(--paper-3);
    border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
    font-family: var(--font-mono);
    line-height: 1;
    overflow: hidden;
    transition: border-color 160ms ease, background 160ms ease;
}
.probe-param > .probe-param-key,
.probe-param > .probe-param-val {
    display: inline-flex;
    align-items: center;
}
.probe-param > .probe-param-key {
    padding: 0.3rem 0.55rem 0.32rem;
    background: color-mix(in oklab, #000 18%, var(--paper-3));
    border-right: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
}
.probe-param > .probe-param-val {
    padding: 0.3rem 0.6rem 0.32rem;
}
.status-admin-probe:hover .probe-param {
    border-color: color-mix(in oklab, var(--moss) 25%, var(--rule));
}
.probe-param-key {
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.probe-param-val {
    font-size: 0.74rem;
    color: var(--ink);
    letter-spacing: 0;
    font-feature-settings: "tnum" 1, "zero" 1;
}
.probe-param-val i {
    font-style: normal;
    margin-left: 0.1em;
    color: var(--ink-dim);
    font-size: 0.62rem;
}
.probe-param--flag {
    padding: 0.35rem 0.7rem;
    background: color-mix(in oklab, var(--amber) 10%, var(--paper-3));
    border-color: color-mix(in oklab, var(--amber) 45%, var(--rule));
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber);
    align-items: center;
}

/* ── Controls cluster: toggle pill + edit button ── */
.probe-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}
.probe-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.probe-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.probe-toggle-track {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    border-radius: 999px;
    transition: background 200ms ease, border-color 200ms ease;
}
.probe-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: var(--ink-faint);
    border-radius: 50%;
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1), background 200ms ease, box-shadow 200ms ease;
}
.probe-toggle input:checked ~ .probe-toggle-track {
    background: color-mix(in oklab, var(--moss) 22%, var(--paper-3));
    border-color: color-mix(in oklab, var(--moss) 55%, var(--rule));
}
.probe-toggle input:checked ~ .probe-toggle-track .probe-toggle-thumb {
    transform: translateX(14px);
    background: var(--moss);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--moss) 30%, transparent);
    animation: probeLivePulse 2400ms ease-in-out infinite;
}
@keyframes probeLivePulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--moss) 30%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in oklab, var(--moss) 18%, transparent); }
}
.probe-toggle input:focus-visible ~ .probe-toggle-track {
    outline: 2px solid color-mix(in oklab, var(--moss) 50%, transparent);
    outline-offset: 2px;
}
.probe-toggle input:disabled ~ .probe-toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}
.probe-toggle-state {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    min-width: 3.2em;
    text-align: left;
}
.probe-toggle input:checked ~ .probe-toggle-state {
    color: var(--moss);
}

.probe-edit-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    padding: 0 1rem;
    min-height: 36px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, padding 200ms ease;
}
.probe-edit-btn::after {
    content: '→';
    display: inline-block;
    margin-left: 0;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 200ms ease, opacity 200ms ease, margin-left 200ms ease;
}
.probe-edit-btn:hover {
    color: var(--amber);
    border-color: color-mix(in oklab, var(--amber) 55%, var(--rule));
    background: color-mix(in oklab, var(--amber) 5%, transparent);
    padding-right: 0.7rem;
}
.probe-edit-btn:hover::after {
    width: 0.8em;
    margin-left: 0.45em;
    opacity: 1;
}
.probe-edit-btn:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--amber) 60%, transparent);
    outline-offset: 2px;
}

/* ─── Empty state (shared) ─── */
.status-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ink-faint);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-style: italic;
    background: var(--paper-2);
    border: 1px dashed var(--rule);
}

/* ─── Modal / overlay ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, #000 65%, transparent);
    backdrop-filter: blur(3px);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: modalOverlayIn 200ms ease-out;
}
.modal-overlay[hidden] { display: none; }
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal {
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--rule-bold);
    position: relative;
    animation: modalIn 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--amber) 0%, color-mix(in oklab, var(--amber) 30%, transparent) 100%);
    pointer-events: none;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.5rem 0.9rem;
    border-bottom: 1px solid var(--rule);
}
.modal-head h2,
.modal-head h3 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 500;
}
.modal-close {
    background: transparent;
    border: 0;
    color: var(--ink-faint);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    transition: color 160ms ease;
}
.modal-close:hover { color: var(--crimson); }
.modal-body {
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.5rem 1.3rem;
    border-top: 1px solid var(--rule);
}

/* ─── Status admin modals (use the global .sig-term shell) ───
   Override + complement the styles.css sig-term system for the admin
   workflow. We need: wider canvas, right-aligned action row, better
   field rhythm, prettier selects + date inputs. Keep the Mac-window
   chrome that sig-term gives us — that's the family identity. */
.status-admin-modal {
    max-width: 960px;
    /* The global .sig-term gives paper-2 + slide-in. Add an amber accent
       stripe on the left to match the rest of the admin's "editorial
       command surface" vocabulary. */
    position: relative;
}
.status-admin-modal--lg { max-width: 980px; }

/* 2-column main row inside the body so the form fits without scrolling.
   Identity (left) gets its 3 stacked fields; Public copy (right) keeps
   its 2x2 grid. Bottom Placement section stays full-width.
   Stretch both columns to the same height so the bottom rules line up. */
.status-admin-modal .modal-row--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.4rem;
    align-items: stretch;
}
.status-admin-modal .modal-row--split > .modal-section {
    height: 100%;
}
.status-admin-modal .modal-row--split > .modal-section > .modal-section-body {
    flex: 1;  /* grow the body so each column's content fills its column */
}
.status-admin-modal .modal-row--split .modal-section--public > .modal-section-body {
    /* Keep the amber-tinted box flush with Identity column's bottom edge.
       Content stays top-anchored; bg/border extend to match column height. */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Triple-column row for Placement & behaviour (Group | Sort | Auto-probe).
   stretch so all three blocks resolve to the same height — Group/Sort
   inputs and the Auto-probe tile share a common baseline + top edge. */
.status-admin-modal .modal-section-body--triple {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr) minmax(0, 1.8fr);
    gap: 0.9rem;
    align-items: stretch;
}
/* Probe modal's Cadence row needs three equal-weight columns. The base
   1.05/0.75/1.8 ratio is tuned for Component editor's wider Auto-probe
   cell — wrong here. Scope the override to the probe modal. */
#probeModal .modal-section-body--triple {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.status-admin-modal .modal-section-body--triple .status-admin-field {
    /* Keep label on top, input grows to fill the row height for visual lock. */
    justify-content: flex-start;
}
.status-admin-modal .modal-section-body--triple .sig-check {
    margin: 0;
    height: auto;
    align-self: stretch;
}

.status-admin-modal::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--amber) 0%, color-mix(in oklab, var(--amber) 30%, transparent) 100%);
    pointer-events: none;
    z-index: 2;
}
.status-admin-modal.sig-term-er::before {
    background: linear-gradient(180deg, var(--crimson) 0%, color-mix(in oklab, var(--crimson) 30%, transparent) 100%);
}
.status-admin-modal.sig-term-az::before {
    background: linear-gradient(180deg, var(--azure) 0%, color-mix(in oklab, var(--azure) 30%, transparent) 100%);
}

.status-admin-modal .sig-term-bar {
    padding: 0.95rem 1.4rem 0.95rem 1.7rem;
    background: var(--paper-3);
    letter-spacing: 0.22em;
    font-size: 0.62rem;
}
.status-admin-modal .sig-term-bar .sig-term-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    background: var(--rule-bold);
}
.status-admin-modal .sig-term-bar .sig-term-dot:nth-of-type(1) { background: color-mix(in oklab, var(--crimson) 65%, var(--rule-bold)); }
.status-admin-modal .sig-term-bar .sig-term-dot:nth-of-type(2) { background: color-mix(in oklab, var(--amber)   65%, var(--rule-bold)); }
.status-admin-modal .sig-term-bar .sig-term-dot:nth-of-type(3) { background: color-mix(in oklab, var(--moss)    65%, var(--rule-bold)); }
.status-admin-modal .sig-term-title {
    margin-left: 0.4rem;
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    flex: 1;
}

.status-admin-modal .sig-term-body {
    padding: 1.15rem 1.6rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink);
    /* Anchor everything inside the visible viewport — no internal scrollbar. */
    overflow: visible;
}
.status-admin-modal .sig-term-body form {
    display: contents;  /* let form children participate in the flex column */
}

/* ─── Modal sections — editorial chunking ───
   Each chunk gets a small typographic header (glyph + label + hint) and
   its own body. This breaks long forms into scannable pieces without
   resorting to heavy dividers. Drop-cap "¶" / "‡" / "§" act as chapter
   marks (matched weight tier, italic serif); hint reads like a column
   rail in a magazine. */
.modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.modal-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.05rem 0 0.4rem;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
    position: relative;
}
.modal-section-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 1px;
    background: var(--amber);
}
.modal-section-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--amber);
    /* Lift the glyph so its optical centre lands on the mono caps' cap-mid.
       Editorial marks (¶ § ‡) have descenders/curls that sit below the
       text baseline; baseline alignment alone leaves them visually low. */
    transform: translateY(-0.08em);
}
.modal-section-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
}
.modal-section-hint {
    flex: 1;
    text-align: right;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--ink-faint);
    letter-spacing: 0.01em;
    min-width: 0;
}
.modal-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.1rem;
}

/* Public-copy variant: subtle amber-tinted background to set it apart as
   "this content goes to clients", but without the heavy dashed border. */
.modal-section--public .modal-section-head::after { background: var(--amber); width: 36px; }
.modal-section--public .modal-section-body {
    background: color-mix(in oklab, var(--amber) 4%, var(--paper-3));
    padding: 0.8rem 0.9rem;
    border-left: 2px solid color-mix(in oklab, var(--amber) 50%, transparent);
}

/* Action row: kbd hint pushed left, button cluster anchored right, top
   hairline + slight bg shift for weight. */
.status-admin-modal .sig-term-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.7rem 1.2rem;
    border-top: 1px solid var(--rule);
    background: color-mix(in oklab, var(--paper-3) 50%, var(--paper-2));
}
.sig-term-actions-hint {
    margin-right: auto;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.sig-term-actions-hint kbd {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-dim);
    background: var(--paper-3);
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    padding: 0.05rem 0.4rem;
    margin: 0 0.15rem;
    line-height: 1.1;
    box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 6%, transparent);
}
@media (max-width: 640px) {
    .sig-term-actions-hint { display: none; }
}

/* ─── Field rhythm inside the modal ─── */
.status-admin-modal .status-admin-field {
    gap: 0.35rem;
}
.status-admin-modal .status-admin-field-label {
    /* Bumped from 0.52rem → 0.6rem (~9.6px) and from ink-faint → ink-dim
       for WCAG-AA contrast on the dark paper. Mono caps still read as a
       quiet header rail; just no longer ant-sized. */
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    color: var(--ink-dim);
}
.status-admin-modal .status-admin-field input[type="text"],
.status-admin-modal .status-admin-field input[type="number"],
.status-admin-modal .status-admin-field input[type="url"],
.status-admin-modal .status-admin-field input[type="email"],
.status-admin-modal .status-admin-field input[type="datetime-local"],
.status-admin-modal .status-admin-field textarea {
    /* Slightly darker than the modal body's paper-2 — gives empty inputs
       the "well" feel they were lacking. Hairline inner shadow at the top
       adds the depth cue without skeuomorphism. */
    background: color-mix(in oklab, #000 14%, var(--paper));
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 0.6rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.25);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    border-radius: 0;
}
/* Strip the browser-default number spinners — they break the editorial
   mono rhythm with chunky chevrons. Operator can type freely. */
.status-admin-modal .status-admin-field input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Right-align numeric values + tabular nums for clean column scanning
       across the three-column cadence row. */
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.status-admin-modal .status-admin-field input[type="number"]::-webkit-inner-spin-button,
.status-admin-modal .status-admin-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.status-admin-modal .status-admin-field input::placeholder,
.status-admin-modal .status-admin-field textarea::placeholder {
    color: var(--ink-faint);
    font-style: italic;
    opacity: 0.85;
}
.status-admin-modal .status-admin-field input:hover,
.status-admin-modal .status-admin-field textarea:hover {
    border-color: color-mix(in oklab, var(--amber) 35%, var(--rule));
}
.status-admin-modal .status-admin-field input:focus,
.status-admin-modal .status-admin-field textarea:focus {
    outline: none;
    border-color: var(--amber);
    background: color-mix(in oklab, var(--amber) 3%, var(--paper));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 14%, transparent);
}
.status-admin-modal .status-admin-field textarea {
    min-height: 78px;
    resize: vertical;
}
.status-admin-modal .status-admin-field input[disabled] {
    background: var(--paper-2);
    color: var(--ink-faint);
    cursor: not-allowed;
}

/* Custom select: replace browser arrow with mono amber chevron */
.status-admin-modal .sig-select,
.status-admin-modal select.sig-select {
    width: 100%;
    background-color: color-mix(in oklab, #000 14%, var(--paper));
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 0.6rem 2.2rem 0.6rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.4;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23d4a04c' stroke-width='1.5'><path d='M1.5 2 L6 6 L10.5 2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 10px 7px;
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.25);
    transition: border-color 180ms ease, background-color 180ms ease;
}
.status-admin-modal .sig-select:hover {
    border-color: color-mix(in oklab, var(--amber) 35%, var(--rule));
}
.status-admin-modal .sig-select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 14%, transparent);
}

/* The datetime-local picker has a Webkit calendar icon — tint it amber */
.status-admin-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(72%) sepia(38%) saturate(525%) hue-rotate(2deg) brightness(92%) contrast(88%);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 160ms ease;
}
.status-admin-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ─── Checkbox (sig-check) — inline option row, not a callout ───
   Lives inside a modal-section body alongside form fields. Earlier
   treatment was too heavy (paper-3 fill + full border) and competed
   visually with the section structure. Now: transparent body, just a
   moss left rail to signal "settings/visibility" without shouting. */
.status-admin-modal .sig-check {
    grid-template-columns: 18px 1fr;
    gap: 0.7rem;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0 0.5rem 0.85rem;
    background: transparent;
    border: 0;
    border-left: 2px solid color-mix(in oklab, var(--moss) 45%, transparent);
    transition: border-left-color 180ms ease;
}
.status-admin-modal .sig-check:hover {
    border-left-color: var(--moss);
}
.status-admin-modal .sig-check input[type="checkbox"] {
    margin-top: 0.22rem;
}
.status-admin-modal .sig-check > div { display: flex; flex-direction: column; gap: 0.15rem; }
.status-admin-modal .sig-check > div > span:first-child {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 500;
}
.status-admin-modal .sig-check > div > .dim {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-dim);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
}

/* ─── Override-current callout — anchored info row with editorial glyph ─── */
.status-admin-modal .status-admin-override-current {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.9rem 1.05rem 0.9rem 0.95rem;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--amber) 8%, var(--paper-3)) 0%,
        var(--paper-3) 100%);
    border-left: 3px solid var(--amber);
    margin-bottom: 0.35rem;
}
.status-admin-override-current-glyph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;   /* match the section-head glyphs for cross-modal consistency */
    line-height: 1;
    color: var(--amber);
    opacity: 0.95;
    transform: translateY(0.05rem);
}
.status-admin-override-current-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.status-admin-modal .status-admin-override-current .status-pill {
    font-size: 0.6rem;
    padding: 0.22rem 0.7rem;
    letter-spacing: 0.18em;
    justify-self: start;
}
.status-admin-override-current-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-faint);
    text-align: right;
    justify-self: end;
    min-width: 0;
}

/* ─── Probe-config modal context strip ───
   Shows WHICH probe is being edited at the top of the modal so the
   operator never loses context after the menu closes. Echo the probe-
   row layout (badge + identity) but at modal density. */
.status-admin-modal .probe-modal-context {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.95rem;
    align-items: center;
    padding: 0.9rem 1.05rem;
    margin-bottom: 0.35rem;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--amber) 6%, var(--paper-3)) 0%,
        var(--paper-3) 100%);
    border-left: 3px solid var(--amber);
}
.probe-modal-context-badge {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--moss);
    background: color-mix(in oklab, var(--moss) 10%, var(--paper-3));
    border: 1px solid color-mix(in oklab, var(--moss) 45%, var(--rule));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--moss) 8%, transparent);
    border-radius: 2px;
}
.probe-modal-context-badge[data-type="db"] {
    color: var(--azure);
    background: color-mix(in oklab, var(--azure) 12%, var(--paper-3));
    border-color: color-mix(in oklab, var(--azure) 55%, var(--rule));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--azure) 10%, transparent);
}
.probe-modal-context-badge[data-type="tcp"] {
    color: var(--amber);
    background: color-mix(in oklab, var(--amber) 10%, var(--paper-3));
    border-color: color-mix(in oklab, var(--amber) 50%, var(--rule));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--amber) 10%, transparent);
}
.probe-modal-context-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.probe-modal-context-name {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.probe-modal-context-meta {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Modal action buttons: bump padding so they have proper visual weight
   against the spacious form above. */
.status-admin-modal .sig-term-actions .sig-btn,
.status-admin-modal .sig-term-actions .sig-btn-primary,
.status-admin-modal .sig-term-actions .sig-btn-ghost,
.status-admin-modal .sig-term-actions .sig-btn-am,
.status-admin-modal .sig-term-actions .sig-btn-er,
.status-admin-modal .sig-term-actions .sig-btn-ok {
    padding: 0.6rem 1.1rem;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
}

/* Responsive: full-bleed below 760px */
@media (max-width: 760px) {
    .status-admin-modal,
    .status-admin-modal--lg {
        max-width: 100%;
        max-height: 100vh;
    }
    .status-admin-modal .sig-term-body { padding: 1.2rem 1.1rem; }
    .status-admin-modal .sig-term-actions { padding: 0.85rem 1.1rem 1rem; }
    .status-admin-modal .status-admin-field-row { grid-template-columns: 1fr; }
    .status-admin-modal .modal-row--split { grid-template-columns: 1fr; }
    .status-admin-modal .modal-section-body--triple { grid-template-columns: 1fr; }
    .status-admin-modal .status-admin-override-current {
        grid-template-columns: auto 1fr;
        gap: 0.4rem 0.7rem;
    }
    .status-admin-override-current-glyph { grid-row: span 2; }
    .status-admin-override-current-meta {
        grid-column: 1 / -1;
        text-align: left;
        justify-self: start;
    }
    .modal-section-head { flex-wrap: wrap; }
    .modal-section-hint {
        text-align: left;
        flex: 1 1 100%;
        padding-top: 0.15rem;
    }
}

/* ─── Form fields ─── */
.status-admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.status-admin-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.status-admin-field-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.status-admin-field input[type="text"],
.status-admin-field input[type="number"],
.status-admin-field input[type="datetime-local"],
.status-admin-field input[type="url"],
.status-admin-field input[type="email"],
.status-admin-field textarea,
.status-admin-field select {
    width: 100%;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    transition: border-color 160ms ease;
}
.status-admin-field input:focus,
.status-admin-field textarea:focus,
.status-admin-field select:focus {
    outline: none;
    border-color: color-mix(in oklab, var(--amber) 60%, transparent);
}
.status-admin-field textarea { resize: vertical; min-height: 84px; }
.status-admin-field input[disabled] { opacity: 0.55; cursor: not-allowed; }

.status-admin-component-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.45rem;
    padding: 0.85rem;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    max-height: 200px;
    overflow-y: auto;
}
/* When the picker is inside a modal-section, the section already has its
   own head — strip the fieldset chrome so we don't double up on labels. */
.status-admin-field--bare {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.status-admin-component-picker label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;           /* roomy hit target without bloating the grid */
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-dim);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.status-admin-component-picker label:hover {
    background: color-mix(in oklab, var(--amber) 8%, transparent);
    color: var(--ink);
}
.status-admin-component-picker label.is-checked {
    color: var(--ink);
    border-color: color-mix(in oklab, var(--amber) 35%, transparent);
}
.status-admin-component-picker input[type="checkbox"] {
    accent-color: var(--amber);
    width: 14px; height: 14px;
    flex-shrink: 0;
}

/* ─── Toasts ─── */
#toastStack {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 9100;
    pointer-events: none;
}
.status-toast {
    background: var(--paper-2);
    border: 1px solid var(--rule-bold);
    border-left: 3px solid var(--moss);
    padding: 0.8rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    pointer-events: auto;
    animation: toastIn 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
    min-width: 220px;
    max-width: 380px;
}
.status-toast--error { border-left-color: var(--crimson); }
.status-toast--warn  { border-left-color: var(--amber); }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Responsive ─── */
@media (max-width: 920px) {
    .status-admin-component {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.7rem;
    }
    .status-admin-component-id { grid-column: 1 / -1; }
    .status-admin-component .status-pill { grid-column: 1; justify-self: start; }
    .status-admin-component-actions {
        grid-column: 2;
        justify-content: flex-end;
    }
    .status-admin-component-group-head {
        grid-template-columns: auto auto 1fr;
    }
    .status-admin-component-group-deck { display: none; }
    .status-admin-component-group-count { display: none; }
    .status-admin-incident { grid-template-columns: 1fr; }
    .status-admin-incident-actions { justify-content: flex-end; }
    .status-admin-probe {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.8rem;
    }
    .status-admin-probe .probe-controls {
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-top: 1px dashed var(--rule);
        padding-top: 0.7rem;
    }
    .status-admin-panel-head { grid-template-columns: 1fr; }
    .status-admin-panel-head .sig-btn-primary,
    .status-admin-panel-head .status-admin-incident-controls {
        grid-column: 1;
        justify-self: stretch;
    }
    .status-admin-field-row { grid-template-columns: 1fr; }
}

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .component-bar, .heatmap-cell, .banner-mark-stroke, .status-banner-mark,
    .status-component, .status-bar-tooltip, .status-banner::before,
    .status-modal, .status-modal-card,
    .status-toast, .modal-overlay, .status-admin-modal,
    .status-admin-incidents-empty .incidents-empty-glyph,
    .status-admin-probe, .status-admin-component,
    .status-admin > *,
    .status-admin .is-cascading > *,
    .status-admin .is-cascading .status-admin-component-group-body > .status-admin-component,
    .sig-hero--gauge::after,
    .probe-toggle input:checked ~ .probe-toggle-track .probe-toggle-thumb {
        animation: none !important;
        transition: none !important;
    }
    .sig-hero--gauge::after { width: 64px !important; opacity: 1 !important; }
    .status-admin-probe:hover, .status-admin-component:hover {
        transform: none !important;
    }
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 760px) {
    .status-board { padding: 2rem 1rem; }
    .status-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding: 1.6rem 1.4rem;
    }
    .status-banner-mark { width: 48px; height: 48px; }
    .status-banner-title { font-size: 1.7rem; }
    .status-banner-meta { flex-wrap: wrap; gap: 0.5rem; }
    .banner-meta-refresh, .banner-meta-cta { margin-left: 0; }
    .status-public-bar { flex-wrap: wrap; gap: 0.6rem; padding: 0.85rem 1rem; }
    .status-lang-toggle { margin-right: 0; }
    .status-group-head { flex-wrap: wrap; gap: 0.5rem; }
    .component-head { grid-template-columns: auto 1fr; }
    .component-state { grid-column: 2; text-align: left; margin-top: 0.4rem; }
    .status-footer-row { grid-template-columns: 1fr; }
    .status-footer-col--right { text-align: left; align-items: flex-start; }
    .status-footer-link-row { justify-content: flex-start; }
}

/* ─── Admin · Email subscriptions panel ─── */
.status-admin-email-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 0.5rem;
}
.status-admin-email-tile {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--amber);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.status-admin-email-tile--moss { border-left-color: var(--moss); }
.status-admin-email-tile--crimson { border-left-color: var(--crimson); }
.status-admin-email-tile--amber { border-left-color: var(--amber); }
.status-admin-email-tile--azure { border-left-color: var(--azure); }
.status-admin-email-tile-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.status-admin-email-tile-value {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
}
.status-admin-email-tile-sub {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
}
.status-admin-email-warn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--crimson);
    background: color-mix(in oklab, var(--crimson) 8%, var(--paper));
    border: 1px solid color-mix(in oklab, var(--crimson) 30%, var(--rule));
    padding: 0.3rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    margin-top: 0.6rem;
}
.status-admin-email-warn code {
    background: color-mix(in oklab, var(--crimson) 12%, var(--paper));
    padding: 0 0.3rem;
}
.status-admin-email-list {
    margin-top: 0.8rem;
}
.status-admin-email-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-dim);
}
.status-admin-email-table thead th {
    text-align: left;
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--rule);
    padding: 0.55rem 0.75rem;
    background: var(--paper-2);
}
.status-admin-email-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 50%, transparent);
}
.status-admin-email-table tbody tr:hover { background: color-mix(in oklab, var(--amber) 4%, transparent); }
.status-admin-email-table .email-cell { color: var(--ink); }
.status-admin-email-table .email-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.52rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.status-admin-email-table .email-tag--active { background: color-mix(in oklab, var(--moss) 15%, var(--paper)); color: var(--moss); }
.status-admin-email-table .email-tag--pending { background: color-mix(in oklab, var(--amber) 15%, var(--paper)); color: var(--amber); }
.status-admin-email-table .email-tag--unsub { background: color-mix(in oklab, var(--ink-faint) 18%, var(--paper)); color: var(--ink-dim); }
.status-admin-email-table .email-tag--bounced,
.status-admin-email-table .email-tag--complained { background: color-mix(in oklab, var(--crimson) 15%, var(--paper)); color: var(--crimson); }
.status-admin-email-delete {
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--crimson) 40%, var(--rule));
    color: var(--crimson);
    padding: 0.2rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 160ms ease;
}
.status-admin-email-delete:hover { background: var(--crimson); color: var(--paper); }
.status-admin-email-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-faint);
}
.status-admin-email-pager button {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.status-admin-email-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.status-admin-email-pager button:not(:disabled):hover { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 40%, transparent); }