/* ===========================================================================
   MADDS — REALTIME DATA MONITORING · "the observatory"
   Template : templates/realtimemonitoring.html
   Behaviour: static/js/realtimemonitoring.js
   Prefix   : rtm-  (every rule below is rtm- or a page-level variable)

   The darkest field in the data suite. Accent pair cyan #43D2E0 →
   blue #3C6CFF on near-black ink. Sections: oscilloscope hero ·
   incident log · incident response clock · watch grid · threshold
   bench · 365-day uptime ribbon · shared CTA band.
   Shared .ds-* classes come from data-suite-base.css and are NOT
   redefined here — only the --acc / --ds- variables are set.
   =========================================================================== */

body {
    --acc-1: #43D2E0;
    --acc-2: #3C6CFF;

    /* deepest field in the suite */
    --ds-field: linear-gradient(180deg, #02020a 0%, #040314 30%, var(--ink-0) 62%, var(--ink-1) 100%);
    --ds-wash: rgba(67, 210, 224, .14);
    --ds-wash-2: rgba(60, 108, 255, .13);
    --ds-orb-a: rgba(60, 108, 255, .30);
    --ds-orb-b: rgba(67, 210, 224, .22);
    --ds-ink: rgba(67, 210, 224, .30);
    --ds-ink-2: rgba(67, 210, 224, .13);
    --ds-ink-3: rgba(67, 210, 224, .09);

    /* observatory-local tokens */
    --rtm-crit: #FF5C8A;
    --rtm-warn: #F0A400;
    --rtm-ok: #43D2E0;
    --rtm-glass: rgba(255, 255, 255, .035);
}

/* ================================================================
   1 · HERO — THE SIGNAL (live oscilloscope)
   ================================================================ */
.rtm-hero {
    position: relative;
    overflow: clip;
    padding: clamp(8.5rem, 16vw, 13.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.rtm-hero__scope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* static trace shown when JS/canvas is unavailable */
.rtm-hero__fallback {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7%;
    width: 100%;
    height: 30%;
    z-index: 1;
    opacity: .5;
    transition: opacity .9s ease;
}

.rtm-hero__fallback polyline {
    fill: none;
    stroke: var(--acc-1);
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(67, 210, 224, .5));
}

.rtm-hero.is-live .rtm-hero__fallback { opacity: 0; }

.rtm-hero__in {
    position: relative;
    z-index: 2;
}

.rtm-hero__copy { max-width: 820px; }

.rtm-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2.35rem 0 2.6rem;
}

.rtm-hero__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-size: .92rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.rtm-hero__blip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rtm-ok);
    box-shadow: 0 0 14px 3px rgba(67, 210, 224, .55);
    animation: rtm-blink 2.6s ease-in-out infinite;
}

.rtm-hero__sep { opacity: .45; }

@keyframes rtm-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    55%      { opacity: .35; transform: scale(.72); }
}

/* section scaffolding — these classes carry the ds-sec frame */
.rtm-log,
.rtm-clock,
.rtm-watch,
.rtm-bench,
.rtm-ribbon { position: relative; }

/* ================================================================
   2 · ALERT ANATOMY — THE LOG
   ================================================================ */
.rtm-log__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
}

.rtm-log__feed {
    display: grid;
    gap: .7rem;
}

.rtm-entry {
    display: grid;
    grid-template-columns: 96px 84px 72px minmax(0, 1fr);
    align-items: baseline;
    gap: .35rem 1.05rem;
    padding: .92rem 1.15rem;
    border: 1px solid var(--hair);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--rtm-glass);
}

.rtm-entry--crit { border-left-color: var(--rtm-crit); }
.rtm-entry--warn { border-left-color: var(--rtm-warn); }
.rtm-entry--info { border-left-color: var(--acc-1); }

.rtm-entry__chip {
    justify-self: start;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .32em .85em;
    border-radius: 100px;
    border: 1px solid currentColor;
}

.rtm-entry--crit .rtm-entry__chip { color: var(--rtm-crit); background: rgba(255, 92, 138, .12); }
.rtm-entry--warn .rtm-entry__chip { color: var(--rtm-warn); background: rgba(240, 164, 0, .12); }
.rtm-entry--info .rtm-entry__chip { color: var(--acc-1); background: rgba(67, 210, 224, .12); }

.rtm-entry__time {
    font-size: .92rem;
    letter-spacing: .08em;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}

.rtm-entry__ago {
    font-size: .82rem;
    color: var(--tx-dim);
    font-variant-numeric: tabular-nums;
}

.rtm-entry__msg {
    font-size: 1.02rem;
    color: var(--tx-dim);
}

.rtm-entry__msg b {
    color: var(--tx);
    font-weight: 600;
    margin-right: .3em;
}

.rtm-entry--in { animation: rtm-entry-in .7s var(--ease) both; }

@keyframes rtm-entry-in {
    from { opacity: 0; transform: translateY(-16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.rtm-log__aside {
    padding: 1.75rem 1.75rem 1.35rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(60, 108, 255, .10), rgba(255, 255, 255, .02));
}

.rtm-log__aside-title {
    margin: 0 0 1.15rem;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.012em;
}

.rtm-log__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.05rem;
}

.rtm-log__item {
    display: grid;
    gap: .22rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--hair);
}

.rtm-log__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.rtm-log__item b {
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acc-2);
}

.rtm-log__item span {
    font-size: .99rem;
    color: var(--tx-dim);
}

/* ================================================================
   3 · INCIDENT CLOCK — THE RESPONSE
   ================================================================ */
.rtm-clock__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.15rem;
    position: relative;
}

.rtm-clock__track::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 2%;
    right: 2%;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--acc-1) 55%, transparent),
        color-mix(in srgb, var(--acc-2) 55%, transparent));
    opacity: .5;
}

.rtm-phase {
    position: relative;
    padding: 3.15rem 1.35rem 1.5rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: var(--rtm-glass);
    animation: rtm-phase-cycle 10s linear infinite;
    animation-delay: calc(var(--i, 0) * 2s);
}

.rtm-phase:nth-child(1) { --i: 0; }
.rtm-phase:nth-child(2) { --i: 1; }
.rtm-phase:nth-child(3) { --i: 2; }
.rtm-phase:nth-child(4) { --i: 3; }
.rtm-phase:nth-child(5) { --i: 4; }

.rtm-phase::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 1.35rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--acc-1);
    box-shadow: 0 0 0 4px rgba(67, 210, 224, .16);
    animation: rtm-phase-dot 10s linear infinite;
    animation-delay: inherit;
}

.rtm-phase__t {
    font-size: .82rem;
    letter-spacing: .18em;
    color: var(--acc-1);
    font-variant-numeric: tabular-nums;
}

.rtm-phase__name {
    margin: .35rem 0 .55rem;
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.rtm-phase__body {
    font-size: .96rem;
    line-height: 1.58;
    color: var(--tx-dim);
}

@keyframes rtm-phase-cycle {
    0%, 14% {
        border-color: color-mix(in srgb, var(--acc-1) 60%, transparent);
        background: rgba(67, 210, 224, .09);
        box-shadow: 0 22px 52px rgba(67, 210, 224, .14);
    }
    28%, 100% {
        border-color: var(--hair);
        background: var(--rtm-glass);
        box-shadow: none;
    }
}

@keyframes rtm-phase-dot {
    0%, 14% {
        box-shadow: 0 0 0 5px rgba(67, 210, 224, .22), 0 0 22px 5px rgba(67, 210, 224, .55);
        transform: scale(1.12);
    }
    28%, 100% {
        box-shadow: 0 0 0 4px rgba(67, 210, 224, .12);
        transform: scale(1);
    }
}

/* ================================================================
   4 · WATCH GRID — THE RHYTHMS
   ================================================================ */
.rtm-watch__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.rtm-tile {
    position: relative;
    padding: 1.55rem 1.65rem 1.35rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: var(--rtm-glass);
    transition: transform .5s var(--ease), border-color .5s ease;
    animation: rtm-tile-glow var(--cad, 2.4s) ease-in-out infinite;
}

.rtm-tile:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--acc-1) 55%, transparent);
}

/* each tile keeps its own pulse rhythm */
.rtm-watch__grid .rtm-tile:nth-child(1) { --cad: 1.1s; }
.rtm-watch__grid .rtm-tile:nth-child(2) { --cad: 1.7s; }
.rtm-watch__grid .rtm-tile:nth-child(3) { --cad: 2.3s; }
.rtm-watch__grid .rtm-tile:nth-child(4) { --cad: 3.1s; }
.rtm-watch__grid .rtm-tile:nth-child(5) { --cad: 3.9s; }
.rtm-watch__grid .rtm-tile:nth-child(6) { --cad: 5.3s; }

.rtm-tile__head {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.rtm-tile__pulse {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--acc-1);
    animation: rtm-tile-pulse var(--cad, 2.4s) ease-in-out infinite;
}

.rtm-tile__name {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.rtm-tile__val {
    margin: .75rem 0 .35rem;
    font-size: clamp(2.35rem, 3.6vw, 3.15rem);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rtm-tile__unit {
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--acc-1);
    margin-left: .45em;
}

.rtm-tile__spark {
    width: 100%;
    height: 40px;
    margin: .35rem 0 .65rem;
}

.rtm-tile__spark polyline {
    fill: none;
    stroke: var(--acc-1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: .85;
    filter: drop-shadow(0 0 8px rgba(67, 210, 224, .35));
}

.rtm-tile__foot {
    font-size: .87rem;
    letter-spacing: .04em;
    color: var(--tx-dim);
}

@keyframes rtm-tile-pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(67, 210, 224, .5); }
    55%      { transform: scale(.68); opacity: .55; box-shadow: 0 0 0 9px rgba(67, 210, 224, 0); }
}

@keyframes rtm-tile-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(67, 210, 224, 0); }
    55%      { box-shadow: 0 18px 44px rgba(67, 210, 224, .10); }
}

/* ================================================================
   5 · THRESHOLD BENCH — THE BUDGETS
   ================================================================ */
.rtm-bench__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
}

.rtm-bench__panel {
    margin: 0;
    padding: 1.55rem 1.65rem 1.25rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: var(--rtm-glass);
}

.rtm-bench__chart {
    width: 100%;
    height: auto;
}

.rtm-bench__gl {
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 1;
}

.rtm-bench__thr {
    stroke: var(--acc-1);
    stroke-width: 1.6;
    stroke-dasharray: 7 7;
    opacity: .85;
    transition: y1 .35s var(--ease), y2 .35s var(--ease);
}

.rtm-bench__thr--err {
    stroke: var(--acc-2);
    transition: y1 .35s var(--ease), y2 .35s var(--ease);
}

.rtm-bench__line {
    fill: none;
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.rtm-bench__line--lat {
    stroke: var(--acc-1);
    filter: drop-shadow(0 0 8px rgba(67, 210, 224, .4));
}

.rtm-bench__line--err {
    stroke: var(--acc-2);
    filter: drop-shadow(0 0 8px rgba(60, 108, 255, .4));
}

.rtm-bench__tick {
    fill: var(--tx-dim);
    font-size: 12px;
    letter-spacing: .08em;
}

.rtm-bench__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.65rem;
    margin-top: 1.05rem;
    font-size: .87rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.rtm-bench__key {
    display: inline-flex;
    align-items: center;
    gap: .55em;
}

.rtm-bench__key::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 100px;
    background: currentColor;
}

.rtm-bench__key--lat { color: var(--acc-1); }
.rtm-bench__key--err { color: var(--acc-2); }
.rtm-bench__key--thr { color: var(--tx-dim); }
.rtm-bench__key--thr::before { height: 0; border-top: 2px dashed currentColor; background: none; }

.rtm-bench__controls {
    display: grid;
    gap: 1.55rem;
    padding: 1.75rem 1.75rem 1.55rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(67, 210, 224, .08), rgba(255, 255, 255, .02));
}

.rtm-slider {
    display: grid;
    gap: .75rem;
}

.rtm-slider__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.rtm-slider__name {
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.rtm-slider__val {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--acc-1);
    font-variant-numeric: tabular-nums;
}

.rtm-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 7px;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--acc-1), var(--acc-2));
    outline-offset: 5px;
    cursor: pointer;
}

.rtm-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--acc-1);
    box-shadow: 0 8px 20px rgba(67, 210, 224, .4);
    cursor: pointer;
}

.rtm-slider input[type="range"]::-moz-range-thumb {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--acc-1);
    box-shadow: 0 8px 20px rgba(67, 210, 224, .4);
    cursor: pointer;
}

.rtm-bench__state {
    padding: 1.25rem 1.35rem;
    border-radius: var(--r-sm);
    border: 1px solid currentColor;
    transition: color .35s ease, background-color .35s ease;
}

.rtm-bench__state-name {
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rtm-bench__state-note {
    margin-top: .35rem;
    font-size: .95rem;
    color: var(--tx-dim);
}

.rtm-bench__state--nominal {
    color: var(--rtm-ok);
    background: rgba(67, 210, 224, .10);
}

.rtm-bench__state--degraded {
    color: var(--rtm-warn);
    background: rgba(240, 164, 0, .10);
}

.rtm-bench__state--critical {
    color: var(--rtm-crit);
    background: rgba(255, 92, 138, .10);
    animation: rtm-state-alarm 1.6s ease-in-out infinite;
}

@keyframes rtm-state-alarm {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 138, 0); }
    55%      { box-shadow: 0 0 26px 2px rgba(255, 92, 138, .35); }
}

.rtm-bench__note {
    font-size: .96rem;
    line-height: 1.6;
    color: var(--tx-dim);
}

/* ================================================================
   6 · UPTIME RIBBON — THE RECORD
   ================================================================ */
.rtm-ribbon__top {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: end;
    margin-bottom: 2.15rem;
}

.rtm-ribbon__fig {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 .4em;
}

.rtm-ribbon__figure {
    font-size: clamp(3.6rem, 8vw, 6.25rem);
    line-height: .92;
    letter-spacing: -.05em;
    font-weight: 600;
    color: var(--acc-1);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 42px rgba(67, 210, 224, .35);
}

.rtm-ribbon__unit {
    font-size: clamp(1.55rem, 3vw, 2.4rem);
    font-weight: 600;
    color: var(--acc-1);
}

.rtm-ribbon__cap {
    flex-basis: 100%;
    margin-top: .55rem;
    font-size: .84rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.rtm-ribbon__strip {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background-color: rgba(255, 255, 255, .025);
    /* fallback day-block texture while the 365 blocks are absent (no JS) */
    background-image:
        repeating-linear-gradient(90deg, rgba(67, 210, 224, .16) 0 9px, transparent 9px 13px),
        repeating-linear-gradient(180deg, rgba(67, 210, 224, .16) 0 9px, transparent 9px 13px);
}

.rtm-day {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 3px;
    background: color-mix(in srgb, var(--acc-1) 48%, transparent);
}

.rtm-day--warn { background: var(--rtm-warn); }
.rtm-day--bad  { background: var(--rtm-crit); }

.rtm-ribbon__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 2.15rem;
    margin: 1.15rem 0 0;
    padding: 0;
    font-size: .88rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-dim);
}

.rtm-ribbon__key {
    display: inline-flex;
    align-items: center;
    gap: .6em;
}

.rtm-ribbon__key::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--acc-1) 48%, transparent);
}

.rtm-ribbon__key--good::before { background: color-mix(in srgb, var(--acc-1) 48%, transparent); }
.rtm-ribbon__key--warn::before { background: var(--rtm-warn); }
.rtm-ribbon__key--bad::before  { background: var(--rtm-crit); }

.rtm-ribbon__stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
    margin: 2.35rem 0 0;
    padding: 1.55rem 0 0;
    border-top: 1px solid var(--hair);
}

.rtm-stat {
    display: grid;
    gap: .3rem;
}

.rtm-stat__fig {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--acc-1);
    font-variant-numeric: tabular-nums;
}

.rtm-stat__cap {
    font-size: .92rem;
    color: var(--tx-dim);
}

/* ================================================================
   CTA — THE NIGHT SHIFT (shared .ds-cta frame, rtm decoration)
   ================================================================ */
.rtm-cta__signal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    width: 100%;
    height: 130px;
    z-index: 1;
    opacity: .55;
}

.rtm-cta__signal polyline {
    fill: none;
    stroke: var(--acc-1);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-dasharray: 14 12;
    animation: rtm-signal-run 9s linear infinite;
    filter: drop-shadow(0 0 14px rgba(67, 210, 224, .55));
}

@keyframes rtm-signal-run {
    to { stroke-dashoffset: -260; }
}

.rtm-related {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem 1.65rem;
    margin-top: 2.35rem;
}

.rtm-related__label {
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--acc-2);
}

.rtm-related__link {
    font-size: .96rem;
    color: var(--tx-dim);
    padding-bottom: .12em;
    border-bottom: 1px solid transparent;
    transition: color .3s ease, border-color .3s ease;
}

.rtm-related__link:hover {
    color: var(--tx);
    border-bottom-color: var(--acc-1);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
    .rtm-log__grid,
    .rtm-bench__grid { grid-template-columns: 1fr; }

    .rtm-clock__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rtm-clock__track::before { display: none; }

    .rtm-ribbon__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .rtm-watch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rtm-clock__track {
        grid-template-columns: 1fr;
        gap: .95rem;
        padding-left: 1.85rem;
    }

    .rtm-clock__track::before {
        display: block;
        top: 8px;
        bottom: 8px;
        left: 7px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .rtm-phase {
        padding: 1.35rem 1.35rem 1.25rem;
    }

    .rtm-phase::before {
        top: 1.55rem;
        left: -1.85rem;
    }

    .rtm-ribbon__top { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 560px) {
    .rtm-watch__grid { grid-template-columns: 1fr; }

    .rtm-entry {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: .35rem .85rem;
    }

    .rtm-entry__msg { grid-column: 1 / -1; }

    .rtm-hero__status { font-size: .82rem; }

    .rtm-ribbon__stats { grid-template-columns: 1fr; }

    .rtm-ribbon__strip { gap: 3px; padding: 10px; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .rtm-entry--in { animation: none; }
    .rtm-bench__state--critical { animation: none; }
    .rtm-cta__signal polyline { animation: none; }
    .rtm-hero__blip,
    .rtm-tile,
    .rtm-tile__pulse,
    .rtm-phase,
    .rtm-phase::before { animation: none; }
    .rtm-tile:hover { transform: none; }
}

/* ================================================================
   2026 layout + surface stabilization
   Keep the hero composition intact; everything below it gets its
   own opaque surface, predictable spacing and stronger card framing.
   ================================================================ */

/* Remove italic treatment across the page without changing type scale. */
.rtm-hero em,
.rtm-log em,
.rtm-clock em,
.rtm-watch em,
.rtm-bench em,
.rtm-ribbon em,
.ds-cta em {
    font-style: normal;
}

/* Decorative section counters were removed from the template. */
.rtm-log .ds-label,
.rtm-clock .ds-label,
.rtm-watch .ds-label,
.rtm-bench .ds-label,
.rtm-ribbon .ds-label {
    gap: 0;
}

/* Solid section surfaces so the fixed observatory field does not show
   straight through every content block. */
.rtm-log,
.rtm-clock,
.rtm-watch,
.rtm-bench,
.rtm-ribbon {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(5.25rem, 7vw, 7.5rem) 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.rtm-log {
    background: #090a25;
}

.rtm-clock {
    background: #0e1030;
}

.rtm-watch {
    background: #080c29;
}

.rtm-bench {
    background: #101133;
}

.rtm-ribbon {
    background: #080b27;
}

/* Subtle local lighting, contained inside each opaque section. */
.rtm-log::before,
.rtm-clock::before,
.rtm-watch::before,
.rtm-bench::before,
.rtm-ribbon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(44rem 28rem at 8% 12%, rgba(67, 210, 224, .065), transparent 66%),
        radial-gradient(48rem 30rem at 92% 82%, rgba(60, 108, 255, .075), transparent 68%);
}

.rtm-clock::before,
.rtm-bench::before {
    background:
        radial-gradient(46rem 30rem at 90% 10%, rgba(67, 210, 224, .055), transparent 66%),
        radial-gradient(48rem 32rem at 10% 88%, rgba(60, 108, 255, .08), transparent 68%);
}

/* Keep section content centred and use one spacing rhythm. */
.rtm-log > .ds-shell,
.rtm-clock > .ds-shell,
.rtm-watch > .ds-shell,
.rtm-bench > .ds-shell,
.rtm-ribbon > .ds-shell,
.ds-cta > .ds-shell {
    width: min(88%, 1680px);
    max-width: none;
}

.rtm-log .ds-head,
.rtm-clock .ds-head,
.rtm-watch .ds-head,
.rtm-bench .ds-head,
.rtm-ribbon .ds-head {
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.rtm-log .ds-head--split,
.rtm-watch .ds-head--split,
.rtm-ribbon .ds-head--split {
    align-items: flex-end;
    gap: clamp(1.75rem, 4vw, 4rem);
}

.rtm-log .ds-head--split > div,
.rtm-watch .ds-head--split > div,
.rtm-ribbon .ds-head--split > div {
    min-width: 0;
    flex: 1 1 560px;
}

.rtm-log .ds-head--split .ds-lead,
.rtm-watch .ds-head--split .ds-lead,
.rtm-ribbon .ds-head--split .ds-lead {
    flex: 0 1 520px;
    max-width: 46ch;
}

/* Alert anatomy */
.rtm-log__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
}

.rtm-log__feed {
    min-width: 0;
    align-content: start;
}

.rtm-entry {
    min-width: 0;
    background: #121535;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.rtm-log__aside {
    height: 100%;
    background: #14183c;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
}

/* Incident clock */
.rtm-clock__track {
    gap: clamp(.85rem, 1.4vw, 1.25rem);
}

.rtm-phase {
    min-width: 0;
    height: 100%;
    background: #17193f;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .14);
}

@keyframes rtm-phase-cycle {
    0%, 14% {
        border-color: color-mix(in srgb, var(--acc-1) 55%, transparent);
        background: #182347;
        box-shadow: 0 18px 44px rgba(67, 210, 224, .10);
    }
    28%, 100% {
        border-color: rgba(255, 255, 255, .09);
        background: #17193f;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .14);
    }
}

/* Watch grid */
.rtm-watch__grid {
    gap: clamp(1rem, 1.6vw, 1.35rem);
}

.rtm-tile {
    min-width: 0;
    background: #131738;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}

/* Threshold bench */
.rtm-bench__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .85fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
}

.rtm-bench__panel,
.rtm-bench__controls {
    min-width: 0;
    height: 100%;
    background: #171a42;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .16);
}

.rtm-bench__panel {
    display: grid;
    align-content: center;
}

.rtm-bench__controls {
    align-content: center;
}

/* Uptime record */
.rtm-ribbon__top {
    gap: clamp(1.5rem, 4vw, 4rem);
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.rtm-ribbon__strip {
    background-color: #121637;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

.rtm-ribbon__stats {
    gap: clamp(.9rem, 1.6vw, 1.35rem);
}

.rtm-stat {
    min-width: 0;
    padding: 1.2rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: #121637;
}

/* Closing CTA is also an intentional solid section rather than another
   transparent view of the fixed page background. */
.ds-cta {
    background: #070920;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.ds-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(50rem 28rem at 50% 100%, rgba(60, 108, 255, .13), transparent 68%),
        radial-gradient(36rem 24rem at 12% 80%, rgba(67, 210, 224, .07), transparent 68%);
}

.ds-cta__in {
    position: relative;
    z-index: 2;
}

@media (max-width: 1280px) {
    .rtm-entry {
        grid-template-columns: 88px 76px 62px minmax(0, 1fr);
        gap: .35rem .8rem;
    }

    .rtm-log__grid,
    .rtm-bench__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
    }
}

@media (max-width: 1080px) {
    .rtm-log__grid,
    .rtm-bench__grid {
        grid-template-columns: 1fr;
    }

    .rtm-log__aside,
    .rtm-bench__controls {
        height: auto;
    }

    .rtm-clock__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .rtm-log,
    .rtm-clock,
    .rtm-watch,
    .rtm-bench,
    .rtm-ribbon {
        padding: clamp(4rem, 13vw, 5.25rem) 0;
    }

    .rtm-log > .ds-shell,
    .rtm-clock > .ds-shell,
    .rtm-watch > .ds-shell,
    .rtm-bench > .ds-shell,
    .rtm-ribbon > .ds-shell,
    .ds-cta > .ds-shell {
        width: min(90%, 1680px);
    }

    .rtm-clock__track {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .rtm-entry {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .rtm-entry__ago {
        justify-self: end;
    }

    .rtm-bench__panel,
    .rtm-bench__controls,
    .rtm-log__aside,
    .rtm-tile,
    .rtm-phase,
    .rtm-stat {
        border-radius: 14px;
    }
}

/* ================================================================
   2026 THEME MATCH — LIGHT CONTENT SECTIONS
   Preserve the realtime hero exactly as authored. Everything below
   the hero uses the light lavender/white rhythm used across the rest
   of the MADDS data suite, with one branded dark closing CTA.
   ================================================================ */

/* Shared light-section ink tokens. */
.rtm-log,
.rtm-clock,
.rtm-watch,
.rtm-bench,
.rtm-ribbon {
    --tx: #1b0c3f;
    --tx-dim: rgba(27, 12, 63, .68);
    --hair: rgba(36, 18, 78, .12);
    --rtm-glass: rgba(255, 255, 255, .82);
    color: var(--tx);
    border-color: rgba(38, 18, 79, .08);
}

/* Alternate subtle lavender/white surfaces without returning to the
   old fully transparent fixed-background treatment. */
.rtm-log {
    background:
        radial-gradient(circle at 91% 8%, rgba(60, 108, 255, .08), transparent 28%),
        radial-gradient(circle at 8% 92%, rgba(123, 47, 247, .07), transparent 26%),
        linear-gradient(180deg, #fbf9ff 0%, #f4effc 100%);
}

.rtm-clock {
    background:
        radial-gradient(circle at 10% 8%, rgba(67, 210, 224, .075), transparent 28%),
        linear-gradient(180deg, #f5f1fc 0%, #eee8f9 100%);
}

.rtm-watch {
    background:
        radial-gradient(circle at 88% 10%, rgba(123, 47, 247, .075), transparent 28%),
        linear-gradient(180deg, #fcfbff 0%, #f4f0fb 100%);
}

.rtm-bench {
    background:
        radial-gradient(circle at 8% 90%, rgba(60, 108, 255, .07), transparent 28%),
        linear-gradient(180deg, #f2edf9 0%, #faf8ff 100%);
}

.rtm-ribbon {
    background:
        radial-gradient(circle at 90% 8%, rgba(67, 210, 224, .065), transparent 26%),
        linear-gradient(180deg, #fbf9ff 0%, #f1ecf8 100%);
}

/* Remove the dark-section glow layer; keep only restrained local light. */
.rtm-log::before,
.rtm-clock::before,
.rtm-watch::before,
.rtm-bench::before,
.rtm-ribbon::before {
    opacity: .55;
    background:
        radial-gradient(34rem 22rem at 8% 10%, rgba(123, 47, 247, .045), transparent 68%),
        radial-gradient(34rem 22rem at 92% 88%, rgba(60, 108, 255, .045), transparent 68%);
}

/* Headings/leads on light surfaces. */
.rtm-log .ds-h2,
.rtm-clock .ds-h2,
.rtm-watch .ds-h2,
.rtm-bench .ds-h2,
.rtm-ribbon .ds-h2,
.rtm-log .ds-lead,
.rtm-clock .ds-lead,
.rtm-watch .ds-lead,
.rtm-bench .ds-lead,
.rtm-ribbon .ds-lead {
    color: inherit;
}

.rtm-log .ds-lead,
.rtm-clock .ds-lead,
.rtm-watch .ds-lead,
.rtm-bench .ds-lead,
.rtm-ribbon .ds-lead {
    color: var(--tx-dim);
}

/* Alert anatomy: white event rows + soft lavender explainer. */
.rtm-entry {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(36, 18, 78, .11);
    box-shadow: 0 12px 30px rgba(45, 24, 80, .065);
}

.rtm-log__aside {
    background: linear-gradient(180deg, rgba(123, 47, 247, .075), rgba(255, 255, 255, .82));
    border-color: rgba(36, 18, 78, .12);
    box-shadow: 0 16px 36px rgba(45, 24, 80, .07);
}

.rtm-log__item b { color: #6a35d8; }
.rtm-entry--info .rtm-entry__chip {
    color: #2f6ee9;
    background: rgba(60, 108, 255, .08);
}

/* Incident clock: professional pale cards, active state still animated. */
.rtm-clock__track::before {
    background: linear-gradient(90deg, rgba(123, 47, 247, .45), rgba(60, 108, 255, .45));
}

.rtm-phase {
    background: rgba(255, 255, 255, .84);
    border-color: rgba(36, 18, 78, .11);
    box-shadow: 0 12px 30px rgba(45, 24, 80, .06);
}

@keyframes rtm-phase-cycle {
    0%, 14% {
        border-color: rgba(60, 108, 255, .35);
        background: linear-gradient(180deg, rgba(60, 108, 255, .08), rgba(255, 255, 255, .94));
        box-shadow: 0 16px 36px rgba(60, 108, 255, .10);
    }
    28%, 100% {
        border-color: rgba(36, 18, 78, .11);
        background: rgba(255, 255, 255, .84);
        box-shadow: 0 12px 30px rgba(45, 24, 80, .06);
    }
}

/* Watch grid: crisp white metric cards instead of dark glass. */
.rtm-tile {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(36, 18, 78, .11);
    box-shadow: 0 14px 34px rgba(45, 24, 80, .065);
}

.rtm-tile:hover {
    border-color: rgba(60, 108, 255, .34);
    box-shadow: 0 18px 42px rgba(60, 108, 255, .10);
}

.rtm-tile__spark polyline { filter: none; }

@keyframes rtm-tile-glow {
    0%, 100% { box-shadow: 0 14px 34px rgba(45, 24, 80, .06); }
    55%      { box-shadow: 0 18px 40px rgba(60, 108, 255, .10); }
}

/* Threshold bench: light chart/control surfaces and darker chart grid. */
.rtm-bench__panel,
.rtm-bench__controls {
    background: rgba(255, 255, 255, .90);
    border-color: rgba(36, 18, 78, .12);
    box-shadow: 0 16px 38px rgba(45, 24, 80, .07);
}

.rtm-bench__gl { stroke: rgba(36, 18, 78, .10); }
.rtm-bench__tick { fill: rgba(27, 12, 63, .60); }
.rtm-bench__line--lat,
.rtm-bench__line--err { filter: none; }
.rtm-bench__key--thr { color: rgba(27, 12, 63, .54); }

.rtm-bench__state--nominal {
    color: #147b88;
    background: rgba(67, 210, 224, .09);
}
.rtm-bench__state--degraded {
    color: #a76700;
    background: rgba(240, 164, 0, .09);
}
.rtm-bench__state--critical {
    color: #c63d68;
    background: rgba(255, 92, 138, .09);
}

/* Uptime: light record cards and ribbon container. */
.rtm-ribbon__strip {
    background-color: rgba(255, 255, 255, .86);
    border-color: rgba(36, 18, 78, .12);
    box-shadow: 0 14px 34px rgba(45, 24, 80, .065);
}

.rtm-stat {
    background: rgba(255, 255, 255, .84);
    border-color: rgba(36, 18, 78, .10);
    box-shadow: 0 10px 26px rgba(45, 24, 80, .055);
}

.rtm-ribbon__stats { border-top-color: rgba(36, 18, 78, .11); }
.rtm-ribbon__figure { text-shadow: none; color: #4e64df; }
.rtm-ribbon__unit,
.rtm-stat__fig { color: #4e64df; }

/* Keep the closing CTA intentionally dark/branded for contrast. */
.ds-cta {
    color: #fff;
    --tx: #fff;
    --tx-dim: rgba(247, 242, 253, .72);
    background:
        radial-gradient(circle at 50% 112%, rgba(60, 108, 255, .19), transparent 40%),
        radial-gradient(circle at 14% 82%, rgba(123, 47, 247, .20), transparent 36%),
        linear-gradient(145deg, #090a2d 0%, #15103d 56%, #21104d 100%);
    border-top-color: rgba(255, 255, 255, .08);
}

.ds-cta::after {
    background:
        radial-gradient(50rem 28rem at 50% 100%, rgba(60, 108, 255, .16), transparent 68%),
        radial-gradient(36rem 24rem at 12% 80%, rgba(123, 47, 247, .10), transparent 68%);
}

/* On small screens keep the light surfaces and reduce shadow weight. */
@media (max-width: 760px) {
    .rtm-entry,
    .rtm-log__aside,
    .rtm-phase,
    .rtm-tile,
    .rtm-bench__panel,
    .rtm-bench__controls,
    .rtm-ribbon__strip,
    .rtm-stat {
        box-shadow: 0 10px 24px rgba(45, 24, 80, .055);
    }
}