@layer pages {
 .status-toolbar { align-items: end; }
 .status-hero { padding-block: var(--kx-space-4) var(--kx-space-6); }
 .status-hero h1 { max-inline-size: 22ch; }
 .status-pulse { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--kx-success); box-shadow: 0 0 0 4px var(--kx-success-bg); animation: status-pulse 2s ease-in-out infinite alternate; }
 .status-pulse--stale { background: var(--kx-neutral); box-shadow: none; animation: none; }
 @keyframes status-pulse { to { opacity: .6; } }
 .status-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--kx-space-3); }
 .status-stat { font-size: clamp(1.2rem,3vw,2rem); letter-spacing: -.04em; }
 .status-runtime-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--kx-space-6); }
 .status-runtime-grid > div { min-inline-size: 0; }
 .status-filters { align-items: end; }
 .status-filters .kx-field { flex: 1 1 10rem; }
 .status-component-group { border-block-start: 1px solid var(--kx-border); padding-block-start: var(--kx-space-4); }
 .status-component-group > summary { display: flex; justify-content: space-between; gap: var(--kx-space-4); align-items: center; list-style: none; min-block-size: 2.75rem; padding-block-end: var(--kx-space-4); }
 .status-component-group > summary::-webkit-details-marker { display: none; }
 .status-component-group[open] > summary > .kx-icon { transform: rotate(180deg); }
 .status-component { padding-block: var(--kx-space-3); }
 .status-strip { display: grid; grid-template-columns: repeat(90,minmax(0,1fr)); gap: 2px; min-block-size: 2rem; }
 .status-day { border-radius: 2px; background: var(--kx-neutral-bg); min-inline-size: 0; block-size: 2rem; position: relative; }
 .status-day:hover, .status-day:focus-visible { outline-offset: 1px; z-index: 1; }
 .status-day--operational { background: var(--kx-success); }
 .status-day--degraded { background: var(--kx-warning); }
 .status-day--down { background: var(--kx-danger); }
 .status-day--unknown { background: var(--kx-neutral-bg); border-block-end: 2px dotted var(--kx-text-faint); }
 .status-key { display: inline-flex; align-items: center; gap: var(--kx-space-2); }
 .status-key::before { content: ''; inline-size: .5rem; block-size: .5rem; border-radius: 2px; background: var(--kx-neutral-bg); border: 1px solid var(--kx-text-faint); }
 .status-key--operational::before { background: var(--kx-success); }
 .status-key--degraded::before { background: var(--kx-warning); }
 .status-key--down::before { background: var(--kx-danger); }
 .status-chart { margin: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--kx-space-4); }
 .status-chart > svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
 .status-chart > svg text { fill: var(--kx-text-muted); font-family: var(--kx-mono); font-size: 12px; }
 .status-chart-grid { stroke: var(--kx-border); stroke-width: 1; shape-rendering: crispEdges; }
 .status-chart-line { fill: none; stroke: var(--kx-link); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
 .status-chart-dot { fill: var(--kx-link); }
 .status-timeline { list-style: none; padding: 0 0 0 var(--kx-space-6); border-inline-start: 2px solid var(--kx-border); }
 .status-timeline li { padding-block: var(--kx-space-4); }
 .status-timeline li > .kx-badge { align-self: start; }
 .status-markdown { display: flex; flex-direction: column; gap: var(--kx-space-3); }
 .status-markdown ul { padding-inline-start: var(--kx-space-6); }
 .status-component-picker { border: 1px solid var(--kx-control-border); border-radius: var(--kx-radius-md); padding: var(--kx-space-4); min-inline-size: 0; }
 .status-component-picker legend { padding-inline: var(--kx-space-2); font-size: var(--kx-text-sm); font-weight: 600; }
 .status-component-picker input[type='checkbox'] { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--kx-accent); }
 #day-inspection { scroll-margin-block-start: var(--kx-space-6); }
 @media(min-width:48rem) { .status-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .status-runtime-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
 @media(prefers-reduced-motion:reduce) { .status-pulse { animation: none; } }
}