/* Status-Seite (Terminal-Stil). Nur Tokens und Bausteine aus base.css. */

/* ── Banner-Box ── */
.st-line { font-weight: 500; }
.st-desc { margin: 6px 0 0; }
.st-meta { margin: 12px 0 0; font-variant-numeric: tabular-nums; }
/* Kurzfassung + „zuletzt geprüft“: nur zwischen den Einträgen umbrechen */
.st-meta > span:not(.st-sep) { white-space: nowrap; }
@media (max-width: 640px) {
	.st-meta { margin-top: 14px; line-height: 1.7; }
	.st-meta .st-br { display: block; height: 0; overflow: hidden; } /* Zeilenumbruch statt „ · “ */
}
.st-banner .box-r a { color: var(--muted); }
.st-banner .box-r a:hover { color: var(--accent); text-decoration: none; }

/* Öffentliche Ansicht: nur das Banner, etwas größer */
.st-public { max-width: 640px; margin: 8vh auto 0; }
.st-banner--large { padding: 22px 18px 16px; }
.st-banner--large .st-line { font-size: 22px; line-height: 1.4; }
.st-banner--large .st-desc { margin-top: 12px; }
.st-hint { margin: 10px 0 0; font-size: 13px; }

/* ── Service-Zeilen: Name | 14 Tagesbalken | Prozent ── */
.svc-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2fr) 72px; align-items: center; gap: 4px 20px; }
.svc-name { min-width: 0; overflow-wrap: anywhere; }
.svc-name b { font-weight: 500; color: var(--fg); }
.svc-name small { font-size: inherit; color: var(--muted); margin-left: 8px; }
.svc-name small a { color: var(--muted); }
.svc-name small a:hover { color: var(--accent); }
.svc-state { margin-left: 8px; }
.svc-state::before { content: '['; color: var(--muted); }
.svc-state::after { content: ']'; color: var(--muted); }
.svc-row .pct { color: var(--accent); text-align: right; white-space: nowrap; }
.svc-row[data-state="bad"] .pct { color: var(--bad); }
.svc-note { grid-column: 1 / -1; margin: 0; font-size: 13px; }

/* Tagesbalken: kein Tooltip – jeder Tag ist ein Button und klappt per Klick Datum und Ausfälle auf */
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; min-width: 0; }
.day { display: inline-block; height: 14px; background: var(--ok); opacity: .75; }
.bars .day { display: block; }
.day--warn { background: var(--warn); }
.day--bad { background: var(--bad); }
.day--none { background: var(--line); opacity: 1; }
.bars button.day:hover, .bars button.day:focus-visible { opacity: 1; outline: 1px solid var(--fg); outline-offset: 1px; }

.st-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: 13px; }
.st-legend .day { width: 10px; height: 10px; vertical-align: -1px; }

@media (max-width: 640px) {
	.svc-row { grid-template-columns: minmax(0, 1fr) auto; }
	.svc-row .bars { grid-column: 1 / -1; grid-row: 2; }
	.svc-name small { display: block; margin-left: 1.1em; }
	.st-banner--large .st-line { font-size: 18px; }
	.st-public { margin-top: 2vh; }
}

/* Tage mit Ausfall: anklickbar, Details unter dem Service */
.bars button.day { border: 0; padding: 0; font: inherit; height: 14px; cursor: pointer; }
.bars button.day[aria-expanded="true"] { opacity: 1; outline: 1px solid var(--fg); outline-offset: 1px; }
.svc-day { grid-column: 1 / -1; display: flex; gap: 4px 16px; flex-wrap: wrap; padding: 4px 0 2px 16px; border-left: 1px solid var(--line); margin-left: 4px; }
.svc-day-h { color: var(--muted); min-width: 10ch; }
.svc-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.svc-day-list li { display: flex; flex-wrap: wrap; gap: 0 14px; }