/* Live monitoring (views/v2/monitoring.php). A hero with the big numbers beside a terminal-style live feed of
   checks, a dot per monitored website, then panels: down now, checks over time, results, leaderboards, an outage
   timeline, official status pages, our own health and the all-sites table. The feed terminal is dark in both
   themes. Motion (new feed rows, dot flashes, the live dots) stops under reduced motion. */

@layer page {
    .site-main:has(.mon) { padding-block-start: 0; }
    .mon :is(.mon-list a, .mon-leader a, .mon-timeline a, .mon-table a, .mon-feed__host, .mon-more, .mon-data a) { text-decoration: none; }

    .mon {
        --mon-up: var(--ok-fill);
        --mon-slow: var(--warn-fill);
        --mon-down: var(--bad-fill);
        --mon-blocked: #8B90A3;
        --mon-none: var(--surface-3);
        --term-bg: #0E1117;
        --term-line: #232838;
        --term-ink: #E6E9F2;
        --term-muted: #7D849A;
        padding-block-end: var(--space-7);
    }
    :root[data-theme="dark"] .mon { --mon-blocked: #646B80; --term-bg: #090B10; --term-line: #1E2330; }

    .mon-section { display: grid; gap: var(--space-5); padding-block: var(--space-7) 0; }
    .mon-section .section-head p { max-inline-size: 62ch; color: var(--muted); }

    .mon-panel {
        display: grid;
        align-content: start;
        gap: var(--space-3);
        padding: var(--space-5);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface-2);
        box-shadow: var(--shadow-sm);

        h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-1); }
        h3 .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--brand); }
        h4 { margin-block-start: var(--space-2); color: var(--muted); font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
        p { color: var(--ink-2); line-height: 1.55; }
    }
    .mon-panel__sub { display: flex; align-items: center; gap: var(--space-2); color: var(--muted) !important; font-size: var(--step--1); }
    .mon-panel__sub .icon { inline-size: 1rem; block-size: 1rem; }
    .mon-empty { color: var(--muted); }

    .mon-two { display: grid; gap: var(--space-4); @media (width >= 56rem) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

    /* ---------------------------------------------------------------- hero */
    .mon-hero {
        position: relative;
        padding-block: var(--space-4) var(--space-7);
        border-block-end: 1px solid var(--line);
        background: radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 0) 0 0 / 22px 22px;
        isolation: isolate;
        overflow: hidden;
    }
    .mon-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(40rem 22rem at 85% 30%, color-mix(in srgb, var(--ok-fill) 12%, transparent), transparent 70%),
            radial-gradient(ellipse 70% 80% at 25% 40%, transparent 15%, var(--bg) 75%);
    }
    .mon-hero__grid {
        display: grid;
        gap: var(--space-6);
        align-items: center;
        padding-block-start: var(--space-5);
        @media (width >= 62rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
    }
    .mon-hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
    .mon-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        background: var(--surface-2);
        color: var(--ink-2);
        font-family: var(--font-mono);
        font-size: .8125rem;
        .live-dot { background: var(--ok-fill); }
    }
    .mon-hero h1 {
        max-inline-size: 17ch;
        font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem);
        font-weight: 750;
        letter-spacing: -.045em;
        line-height: 1.02;
        text-wrap: balance;
        span { display: block; background: linear-gradient(90deg, var(--ok-fill), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    }
    .mon-hero__lead { max-inline-size: 54ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

    .mon-tiles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
        inline-size: 100%;
        padding: 0;
        list-style: none;

        li { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
        strong { font-size: var(--step-3); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
        span { color: var(--muted); font-size: var(--step--1); line-height: 1.35; }
        .mon-tiles__big { grid-column: 1 / -1; }
        .mon-tiles__big strong { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); color: var(--ink); }
        @media (width < 30rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); li:last-child:nth-child(even) { grid-column: 1 / -1; } }
    }

    /* The live feed: a dark terminal in both themes */
    .mon-feed {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-4);
        border: 1px solid var(--term-line);
        border-radius: var(--radius-lg);
        background: var(--term-bg);
        color: var(--term-ink);
        box-shadow: var(--shadow-lg);
        font-family: var(--font-mono);
    }
    .mon-feed__bar { display: flex; align-items: center; gap: var(--space-3); }
    .mon-feed__dots { display: flex; gap: 6px; }
    .mon-feed__dots i { inline-size: .625rem; block-size: .625rem; border-radius: 50%; background: #2A3042; }
    .mon-feed__dots i:nth-child(1) { background: #E5483D; }
    .mon-feed__dots i:nth-child(2) { background: #F59E0B; }
    .mon-feed__dots i:nth-child(3) { background: #22A355; }
    .mon-feed__title { flex: 1; color: var(--term-ink); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
    .mon-feed__state {
        display: inline-flex; align-items: center; gap: var(--space-2); color: #4ADE80; font-size: .75rem; font-weight: 600; text-transform: uppercase;
        .live-dot { background: #22A355; }
        &.is-paused { color: var(--term-muted); }
        &.is-paused .live-dot { background: var(--term-muted); }
        &.is-paused .live-dot::after { display: none; }
    }
    .mon-feed__sub { color: var(--term-muted); font-family: var(--font); font-size: var(--step--1); }
    .mon-feed__list {
        display: grid;
        align-content: start;
        block-size: 24.5rem;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
        mask-image: linear-gradient(to bottom, #000 75%, transparent);
    }
    .mon-feed__row {
        display: grid;
        grid-template-columns: 6.75rem minmax(0, 1fr) 2.25rem 6.5rem;
        align-items: center;
        gap: var(--space-3);
        min-block-size: 2.2rem;
        border-block-end: 1px solid var(--term-line);
        font-size: .8125rem;
    }
    @media (width < 36rem) {
        .mon-feed__row { grid-template-columns: auto minmax(0, 1fr) 4.25rem; gap: var(--space-2); }
        .mon-feed__code { display: none; }
        .mon-feed__ms { grid-template-columns: auto; }
        .mon-feed__ms i { display: none; }
    }
    .mon-feed__host { overflow: hidden; color: var(--term-ink); text-overflow: ellipsis; white-space: nowrap; }
    .mon-feed__host:hover { color: #ABA6FF; }
    .mon-feed__code { color: var(--term-muted); text-align: end; }
    .mon-feed__ms { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2); color: var(--term-muted); font-variant-numeric: tabular-nums; }
    .mon-feed__ms i { block-size: 4px; border-radius: 2px; background: #22A355; transform-origin: left; }
    .mon-feed__ms b { min-inline-size: 3.5em; font-weight: 500; text-align: end; }
    .mon-feed__more, .mon-feed__hold { color: var(--term-muted); font-family: var(--font); font-size: .75rem; }
    .mon-feed__hold { display: none; }
    .mon-feed.is-holding .mon-feed__hold { display: block; }
    .mon-feed.is-holding .mon-feed__more { display: none; }
    .mon-feed__empty { padding-block: var(--space-6); color: var(--term-muted); text-align: center; }
    .mon-feed .mon-res { justify-self: start; }

    /* Result pills (feed, results list) */
    .mon-res {
        --c: var(--bad-fill);
        display: inline-flex;
        align-items: center;
        gap: .4em;
        padding: .15em .55em;
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--c) 16%, transparent);
        color: var(--c);
        font-family: var(--font-mono);
        font-size: .75rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .mon-res::before { content: ""; inline-size: .45em; block-size: .45em; border-radius: 50%; background: currentColor; }
    .mon-res--ok { --c: var(--ok-fill); }
    .mon-res--slow { --c: var(--warn-fill); }
    .mon-res--blocked { --c: var(--mon-blocked); }
    .mon-feed .mon-res--ok { --c: #4ADE80; }
    .mon-feed .mon-res--blocked { --c: #9CA3B8; }
    .mon-feed .mon-res--slow { --c: #FBBF24; }
    .mon-feed .mon-res:not(.mon-res--ok, .mon-res--slow, .mon-res--blocked) { --c: #F87171; }
    i.mon-res--ok { background: var(--mon-up); }
    i.mon-res--slow { background: var(--mon-slow); }
    i.mon-res--blocked { background: var(--mon-blocked); }
    .mon-split i[class*="mon-res--"]:not(.mon-res--ok, .mon-res--slow, .mon-res--blocked) { background: var(--mon-down); }

    /* ---------------------------------------------------------------- key facts + citing */
    .mon-facts ul {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 1.25rem);
        border: 1px solid var(--line);
        border-inline-start: 4px solid var(--brand);
        border-radius: var(--radius-lg);
        background: var(--surface-2);
        color: var(--ink-2);
        font-size: var(--step-0);
        line-height: 1.6;
        list-style: disc;
        li::marker { color: var(--brand); }
    }
    .mon-cite blockquote {
        margin: 0;
        padding: var(--space-4);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--ink);
        font-family: var(--font-mono);
        font-size: .8125rem;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }
    .mon-cite .btn { justify-self: start; }
    .mon-data {
        display: grid;
        gap: var(--space-2);
        padding: 0;
        list-style: none;
        a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; }
        a:hover { border-color: var(--brand); color: var(--brand); }
        a > span:last-child { display: grid; min-inline-size: 0; }
        small { overflow: hidden; color: var(--muted); font-family: var(--font-mono); font-size: .75rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
    }
    .mon-data__fmt { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2rem; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; }

    /* ---------------------------------------------------------------- right now */
    .mon-now { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
    .mon-grid { position: relative; inline-size: 100%; min-block-size: 6rem; }
    .mon-grid canvas { display: block; inline-size: 100%; }
    .mon-split {
        display: flex;
        gap: 3px;
        block-size: .875rem;
        overflow: hidden;
        border-radius: var(--radius-pill);
        i { min-inline-size: 4px; }
        .is-up { background: var(--mon-up); } .is-slow { background: var(--mon-slow); } .is-down { background: var(--mon-down); } .is-blocked { background: var(--mon-blocked); }
    }
    .mon-split--thin { block-size: .5rem; }
    .mon-legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
        padding: 0;
        list-style: none;
        li { display: flex; align-items: baseline; gap: var(--space-2); }
        i { inline-size: .75rem; block-size: .75rem; align-self: center; border-radius: 3px; }
        strong { font-size: var(--step-2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
        span { color: var(--muted); }
        .is-up i { background: var(--mon-up); } .is-slow i { background: var(--mon-slow); } .is-down i { background: var(--mon-down); } .is-blocked i { background: var(--mon-blocked); }
    }
    .mon-note { display: flex; gap: var(--space-2); max-inline-size: 75ch; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
    .mon-note .icon { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .1em; color: var(--brand); }

    .mon-down.is-bad { border-color: var(--bad-line); background: linear-gradient(var(--bad-tint), var(--surface-2) 6rem); }
    .mon-down h3 .icon { color: var(--ok-fill); }
    .mon-down.is-bad h3 .icon { color: var(--bad-fill); }
    .mon-count { padding: 0 .5em; border-radius: var(--radius-pill); background: var(--bad-fill); color: #fff; font-size: var(--step--1); }

    .mon-list {
        display: grid;
        gap: var(--space-1);
        padding: 0;
        list-style: none;
        @media (width >= 48rem) { .mon-down & { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); } }

        li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--line); }
        a { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        a:hover { color: var(--brand); }
    }
    .mon-list__meta { grid-column: 2 / -1; color: var(--muted); font-size: var(--step--1); }

    /* ---------------------------------------------------------------- checks over time */
    .mon-chart { grid-template-rows: auto 1fr auto; }
    .mon-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .mon-chart__head strong { font-size: var(--step-3); letter-spacing: -.03em; }
    .mon-chart__head p { color: var(--muted) !important; }
    .mon-chart__plot { block-size: 100%; min-block-size: 11rem; }
    .mon-chart__plot.is-7d, #mon-r7:checked ~ .mon-chart__plot.is-24 { display: none; }
    #mon-r7:checked ~ .mon-chart__plot.is-7d { display: block; }
    .mon-bars { inline-size: 100%; block-size: 100%; }
    .mon-bars rect { fill: var(--brand); opacity: .85; transition: opacity var(--dur); }
    .mon-bars rect:last-child { fill: var(--ok-fill); }
    .mon-bars rect:hover { opacity: 1; }

    .mon-seg {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 2px;
        margin: 0;
        padding: 3px;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--surface-3);

        label { padding: .3rem .8rem; border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--step--1); font-weight: 600; cursor: pointer; }
        label:has(input:checked), label:hover { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-sm); }
        label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
    }
    #mon-r24:checked ~ .mon-chart__head label[for="mon-r24"], #mon-r7:checked ~ .mon-chart__head label[for="mon-r7"] { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-sm); }
    #mon-r24:focus-visible ~ .mon-chart__head label[for="mon-r24"], #mon-r7:focus-visible ~ .mon-chart__head label[for="mon-r7"] { outline: 2px solid var(--brand); }

    .mon-results {
        display: grid;
        gap: var(--space-1);
        padding: 0;
        list-style: none;
        li { display: grid; grid-template-columns: 1fr auto 4rem; align-items: center; gap: var(--space-3); padding-block: var(--space-1); }
        .mon-res { justify-self: start; }
        strong { font-variant-numeric: tabular-nums; }
        li > span:last-child { color: var(--muted); font-size: var(--step--1); text-align: end; font-variant-numeric: tabular-nums; }
    }

    /* ---------------------------------------------------------------- leaderboards */
    .mon-leaders { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
    .mon-leader {
        position: relative;
        overflow: hidden;
        &::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 4px; background: var(--accent); }
        ol { display: grid; gap: var(--space-1); padding: 0; list-style: none; }
        li { display: grid; grid-template-columns: 1.25rem auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding-block: var(--space-2); border-block-end: 1px solid var(--line); }
        li:last-child { border: 0; }
        a { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        a:hover { color: var(--brand); }
        strong { font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap; }
    }
    .mon-leader__rank { color: var(--muted); font-family: var(--font-mono); font-size: .8125rem; }
    .mon-leader li:first-child .mon-leader__rank { color: var(--accent); font-weight: 700; }
    .mon-leader--fastest { --accent: var(--ok-fill); }
    .mon-leader--slowest { --accent: var(--warn-fill); }
    .mon-leader--perfect { --accent: var(--brand); }
    .mon-leader--bumpy { --accent: var(--bad-fill); }

    /* ---------------------------------------------------------------- outage timeline */
    .mon-timeline {
        position: relative;
        display: grid;
        gap: var(--space-3);
        padding: 0 0 0 var(--space-5);
        list-style: none;
        &::before { content: ""; position: absolute; inset: .5rem auto .5rem .3rem; inline-size: 2px; background: var(--line); }

        > li {
            position: relative;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: var(--space-2) var(--space-3);
            padding: var(--space-3) var(--space-4);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--surface-2);
        }
        a { color: var(--ink); font-weight: 650; }
        a:hover { color: var(--brand); }
        p { color: var(--muted); font-size: var(--step--1); }
        .mon-badge { justify-self: end; }
        @media (width < 40rem) { > li { grid-template-columns: auto minmax(0, 1fr); } .mon-badge { grid-column: 2; justify-self: start; } }
    }
    .mon-timeline__dot {
        position: absolute;
        inset-inline-start: calc(-1 * var(--space-5) + .05rem);
        inset-block-start: calc(50% - .35rem);
        inline-size: .7rem;
        block-size: .7rem;
        border: 2px solid var(--bg);
        border-radius: 50%;
        background: var(--warn-fill);
        .is-open & { background: var(--bad-fill); }
    }
    .mon-badge {
        display: inline-flex;
        align-items: center;
        gap: .3em;
        padding: .15em .6em;
        border-radius: var(--radius-pill);
        font-size: .75rem;
        font-weight: 650;
        white-space: nowrap;
        .icon { inline-size: .9rem; block-size: .9rem; }
        &.is-ok { background: var(--ok-tint); color: var(--ok); }
        &.is-bad { background: var(--bad-tint); color: var(--bad); }
        &.is-warn { background: var(--warn-tint); color: var(--warn); }
        &.is-info { background: var(--brand-tint); color: var(--brand); }
    }

    /* ---------------------------------------------------------------- official + health */
    .mon-stats {
        display: grid;
        gap: var(--space-3);
        padding: 0;
        list-style: none;
        li { display: grid; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
        strong { font-size: var(--step-4); font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
        span { color: var(--muted); }
    }
    .mon-health { display: grid; gap: var(--space-4); @media (width >= 56rem) { grid-template-columns: 1.5fr 1fr 1fr; } }
    .mon-agent__state {
        display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ok) !important; font-size: var(--step--1);
        .live-dot { background: var(--ok-fill); }
        .is-unhealthy & { color: var(--warn) !important; } .is-unhealthy & .live-dot { background: var(--warn-fill); }
        .is-offline & { color: var(--muted) !important; } .is-offline & .live-dot { background: var(--muted); }
    }
    .mon-canaries {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: 0;
        list-style: none;
        li { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border: 1px solid var(--ok-line); border-radius: var(--radius-pill); background: var(--ok-tint); font-size: var(--step--1); font-weight: 600; }
        li.is-bad { border-color: var(--bad-line); background: var(--bad-tint); }
        .icon { inline-size: 1rem; block-size: 1rem; color: var(--ok-fill); }
        .is-bad .icon { color: var(--bad-fill); }
        small { color: var(--muted); font-family: var(--font-mono); font-weight: 400; }
    }

    /* ---------------------------------------------------------------- all sites */
    .mon-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        .btn { min-block-size: 2.5rem; }
    }
    .mon-filter__q {
        display: flex;
        flex: 1 1 14rem;
        align-items: center;
        gap: var(--space-2);
        padding-inline: var(--space-3);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-pill);
        background: var(--surface-2);
        .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--muted); }
        input { flex: 1; min-inline-size: 0; min-block-size: 2.5rem; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }
        &:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
    }
    .mon-filter__sort {
        display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--step--1);
        select { min-block-size: 2.5rem; padding-inline: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font: inherit; }
    }

    .mon-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
    .mon-table {
        inline-size: 100%;
        border-collapse: collapse;
        font-size: var(--step--1);
        th, td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); text-align: start; white-space: nowrap; }
        thead th { background: var(--surface); color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
        tbody tr:last-child > * { border: 0; }
        tbody tr:hover { background: var(--surface); }
        .num { text-align: end; font-variant-numeric: tabular-nums; }
        tbody th a { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); font-weight: 600; }
        tbody th a > span { display: grid; max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; }
        tbody th a:hover { color: var(--brand); }
        small { color: var(--muted); font-weight: 400; }
        time { color: var(--muted); }
    }
    .mon-table__days { inline-size: 9rem; }
    .mon-days { display: block; inline-size: 9rem; block-size: 1.25rem; }
    .mon-days rect { fill: var(--mon-none); }
    .mon-days .is-up { fill: var(--mon-up); }
    .mon-days .is-partial { fill: var(--mon-slow); }
    .mon-days .is-down { fill: var(--mon-down); }
    .mon-days .is-blocked { fill: var(--mon-blocked); opacity: .55; }
    .mon-state {
        display: inline-flex; align-items: center; gap: .45em; font-weight: 600;
        i { inline-size: .55rem; block-size: .55rem; border-radius: 50%; }
        &.is-up i { background: var(--mon-up); } &.is-slow i { background: var(--mon-slow); } &.is-down i { background: var(--mon-down); } &.is-blocked i { background: var(--mon-blocked); }
        &.is-down { color: var(--bad); }
        &.is-blocked { color: var(--muted); font-weight: 500; }
    }
    .mon-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); color: var(--muted); font-size: var(--step--1); }

    /* ---------------------------------------------------------------- how + FAQ */
    .mon-steps {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
        padding: 0;
        list-style: none;
        li { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); line-height: 1.5; }
        .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--brand); }
        span { color: var(--ink-2); font-size: var(--step--1); }
    }
    .mon-more {
        display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; color: var(--brand); font-weight: 600;
        .icon { inline-size: 1.1rem; block-size: 1.1rem; transition: translate var(--dur) var(--ease); }
        &:hover .icon { translate: 3px 0; }
    }
    .mon-faq {
        display: grid;
        gap: var(--space-2);
        details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
        summary { padding: var(--space-4) var(--space-5); font-weight: 650; cursor: pointer; }
        p { padding: 0 var(--space-5) var(--space-4); color: var(--ink-2); line-height: 1.6; }
    }

    @media (prefers-reduced-motion: no-preference) {
        .mon-feed__row.is-new { animation: mon-in .45s var(--ease); }
        .mon-feed__row.is-new .mon-feed__ms i { animation: mon-grow .6s var(--ease); }
        .mon-feed__row.is-new .mon-feed__host { animation: mon-flash 1.6s ease-out; }
        @keyframes mon-in { from { opacity: 0; translate: 0 -8px; } }
        @keyframes mon-grow { from { scale: 0 1; } }
        @keyframes mon-flash { from { color: #fff; text-shadow: 0 0 12px #8D87FF; } }
    }
}