@import url('./category.css');

/* Branding, typography, controls and semantic badges come from the app bundle. */
.status-page main { max-width: 1060px; margin: auto; padding: 40px 24px; }
.status-navigation { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--dt-border); }
.status-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.status-brand > a { min-width: 0; }
.status-brand-badge { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; border: 1px solid var(--dt-border); border-radius: 999px; }
.status-navigation .brand-logo { width: 240px; }
.status-navigation > .back-link { flex-shrink: 0; }
#status-open-app {
    background: var(--color-brand-background, var(--color-secondary));
    color: var(--color-brand-text);
    border-color: var(--dt-border);
}
#status-open-app:hover {
    background: var(--color-brand-background, var(--color-secondary));
    color: var(--color-brand-text);
    border-color: var(--color-brand-text);
}
.status-page header { margin-bottom: 32px; }
.status-page h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.04em; margin: 0 0 12px; }
.status-page h2 { font-size: 1.35rem; font-weight: 700; }
.status-page h3 { font-size: 1.1rem; }
.status-page p, .status-page li { line-height: 1.6; }
.status-page section { margin: 24px 0; padding: 24px; background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: 1rem; }
.overview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.status-page .overview h2 { font-size: 1rem; color: var(--dt-text-secondary); }
.status-page .overview-average { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.2; margin: 0; }
.overview-figure { margin: 28px 0 20px; }
.overview-chart { display: flex; gap: 12px; height: 160px; margin-bottom: 10px; }
.overview-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: .75rem; color: var(--dt-text-secondary); }
.overview-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid var(--dt-border); background: repeating-linear-gradient(to top, transparent 0, transparent calc(50% - 1px), var(--dt-border) calc(50% - 1px), var(--dt-border) 50%); }
.overview-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.overview-line polyline { fill: none; stroke: var(--dt-accent); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.overview-point { position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); padding: 0; border: 2px solid var(--dt-surface); border-radius: 50%; background: var(--dt-accent); cursor: pointer; }
.overview-point::before { content: ''; position: absolute; inset: -8px; }
.overview-point:is(:hover, :focus-visible) { z-index: 2; }
.overview-tooltip { display: none; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px); width: max-content; max-width: min(260px, 65vw); padding: 8px 12px; border: 1px solid var(--dt-border); border-radius: .5rem; background: var(--dt-elevated); color: var(--dt-text); font-size: .8rem; text-align: left; pointer-events: none; }
.overview-point:is(:hover, :focus-visible) .overview-tooltip { display: block; }
.overview-tooltip { white-space: pre-line; line-height: 1.6; font-weight: 400; }
.status-page .muted { color: var(--dt-text-secondary); }
.status-page #status-error { color: var(--dt-error); }
.status-page details { overflow-wrap: anywhere; }
.status-page summary { cursor: pointer; line-height: 1.8; }
.status-page .diagnostics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.status-page .diagnostics p { margin: 0; padding: 10px; background: var(--dt-hover); border-radius: .5rem; }
.status-page footer { color: var(--dt-text-secondary); font-size: .85rem; padding-top: 16px; }
.status-page .feature-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 10px; font-size: 1rem; }
.status-page .feature-summary { background: var(--dt-surface); }
.status-page .failure-list { margin-bottom: 0; padding-left: 22px; }
#status-history { list-style: none; padding: 0; margin: 20px 0 0; }
.recent-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 16px 0; border-bottom: 1px solid var(--dt-border); }
.recent-run:first-child { padding-top: 0; }
.recent-run:last-child { border-bottom: 0; padding-bottom: 0; }
.recent-run time { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.recent-run-details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
@media (max-width: 600px) {
    .status-page main { padding: 24px 14px; }
    .status-page section { padding: 18px; }
    .status-navigation { gap: 16px; margin-bottom: 28px; }
    .status-navigation .brand-logo { width: min(100%, 200px); }
}
@media (max-width: 420px) {
    .status-navigation { flex-wrap: wrap; }
    .status-brand { width: 100%; }
}