/* Statusmonitor (/status/). Gebruikt de kleurtokens van style.css; alles onder .sw zodat de site-opmaak niet botst. */
.sw a{color:var(--accent-strong)}
.sw .sw-wrap{max-width:980px;margin:0 auto;padding:20px 16px 48px}
.sw .sw-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.sw h1{font-size:1.9rem;line-height:1.2;margin:0}
.sw .sub{color:var(--ink-soft);font-size:.875rem}
.sw .tools{display:flex;flex-wrap:wrap;gap:8px}
.sw button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 12px;min-height:40px}
.sw button:hover{border-color:var(--accent)}
.sw button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sw button:focus-visible, .sw summary:focus-visible, .sw a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sw .banner{border-radius:12px;padding:18px 20px;border:1px solid;margin-bottom:16px}
.sw .banner h2{margin:0 0 4px;font-size:1.5rem;line-height:1.25}
.sw .banner p{margin:0}
.sw .banner.ok{background:var(--ok-soft);border-color:#9bd3ad;color:#14502c}
.sw .banner.degraded{background:var(--warn-soft);border-color:#e0c76a;color:#5e4a05}
.sw .banner.outage{background:var(--bad-soft);border-color:#e0a49d;color:#7d241b}
.sw .banner.stale{background:var(--stale-soft);border-color:var(--line-strong,#a1acbf);color:var(--stale)}
.sw .sw-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.sw .sw-card h3{margin:0 0 6px;font-size:1.2rem;line-height:1.3}
.sw .sw-card h4{margin:16px 0 4px;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.sw .badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:600;border:1px solid}
.sw .badge.ok{background:var(--ok-soft);color:var(--ok);border-color:#9bd3ad}
.sw .badge.degraded{background:var(--warn-soft);color:var(--warn);border-color:#e0c76a}
.sw .badge.outage{background:var(--bad-soft);color:var(--bad);border-color:#e0a49d}
.sw .meta{color:var(--ink-soft);font-size:.875rem;margin:4px 0 0}
.sw .next{margin-top:10px;padding:8px 12px;background:var(--surface-2);border-radius:8px;font-size:.875rem}
.sw .next.late{background:var(--warn-soft);color:#5e4a05}
.sw .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.sw .chips li{background:var(--surface-2);border-radius:999px;padding:2px 10px;font-size:.875rem}
.sw .prose{white-space:pre-line;margin:4px 0 0}
.sw details{margin-top:12px}
.sw summary{cursor:pointer;color:var(--accent-strong);font-weight:600}
.sw pre{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border-radius:8px;padding:12px;font:inherit;font-size:.875rem;max-height:420px;overflow:auto}
.sw .tl{list-style:none;margin:6px 0 0;padding:0}
.sw .tl li{display:grid;grid-template-columns:9.5rem 1fr;gap:4px 12px;padding:8px 0;border-top:1px solid var(--line);font-size:.875rem}
.sw .tl li:first-child{border-top:0}
.sw .tl time{color:var(--ink-soft)}
.sw .sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.sw .row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:.875rem}
.sw .row:first-child{border-top:0}
.sw .dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--ok)}
.sw .dot.bad{background:var(--bad)}
.sw .dot.warn{background:var(--accent)}
.sw .dot.na{background:var(--ink-faint)}
.sw .row .r{margin-left:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:right}
.sw .note{font-size:.875rem;color:var(--ink-soft)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;max-width:92vw;width:520px;z-index:10;pointer-events:none}
#toast div{background:var(--ink);color:#fff;border-radius:10px;padding:12px 16px;margin-top:8px;box-shadow:0 6px 24px rgba(0,0,0,.25);}
.sw from{opacity:0;transform:translateY(8px)}
.sw to{opacity:1;transform:none}
#toast div{animation:none}
.sw .tl li{grid-template-columns:1fr}

.sw{--warn:#8a6c09;--warn-soft:#fbf1cf;--bad:#a5352a;--bad-soft:#fae2e0;--stale:#4a5a76;--stale-soft:#e4e9f2;color:var(--ink)}
.sw .sw-top h1{margin:0}
@keyframes sw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#toast div{animation:sw-in .25s ease-out}
@media (prefers-reduced-motion:reduce){#toast div{animation:none}}
@media (max-width:560px){.sw .tl li{grid-template-columns:1fr}}

.sw .sw-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.sw .sw-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border-left-width:6px}
.sw .sw-tile.ok{border-left-color:var(--ok)}
.sw .sw-tile.degraded{border-left-color:#d8a800}
.sw .sw-tile.outage{border-left-color:var(--bad)}
.sw .sw-tile.stale{border-left-color:var(--ink-faint)}
.sw .badge.stale{background:var(--stale-soft);color:var(--stale);border-color:var(--line-strong,#a1acbf)}