@font-face { font-family: 'Schibsted Grotesk'; font-weight: 400; font-display: swap; src: url('assets/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 700; font-display: swap; src: url('assets/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); }
:root { --ink: #0e1b2e; --ink2: #33415a; --muted: #5b6779; --line: #d8dfe9; --paper: #f5f7fa; --blue: #2557d6; --up: #1f8a5b; --partial: #d18b1a; --down: #c2341f; --none: #e3e8ef; --bg: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef2f8; --ink2: #c9d2e0; --muted: #94a0b4; --line: #26304a; --paper: #111a2c; --none: #26304a; --bg: #0b1222; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; }
.wrap { width: min(820px, 100% - 40px); margin-inline: auto; }
.top { border-bottom: 1px solid var(--line); }
.top .wrap { height: 64px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.brand svg { width: 28px; height: 28px; }
.brand .sub { font-weight: 400; color: var(--muted); margin-left: 4px; }
main { padding: 40px 0 64px; }
h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1rem; margin: 40px 0 12px; }
.muted { color: var(--muted); margin: 2px 0 0; font-size: 0.95rem; }
.overall { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.overall .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--none); flex: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--none) 35%, transparent); }
.overall.up .dot { background: var(--up); box-shadow: 0 0 0 6px color-mix(in srgb, var(--up) 20%, transparent); }
.overall.degraded .dot { background: var(--partial); box-shadow: 0 0 0 6px color-mix(in srgb, var(--partial) 22%, transparent); }
.overall.down .dot { background: var(--down); box-shadow: 0 0 0 6px color-mix(in srgb, var(--down) 20%, transparent); }
.components { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.components li { padding: 16px 20px; border-top: 1px solid var(--line); }
.components li:first-child { border-top: 0; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.name { font-weight: 700; }
.pill { font-size: 0.85rem; font-weight: 700; }
.pill.up { color: var(--up); } .pill.degraded { color: var(--partial); } .pill.down { color: var(--down); }
.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; margin-top: 10px; height: 28px; }
.bars span { border-radius: 2px; background: var(--none); }
.bars .up { background: var(--up); } .bars .partial { background: var(--partial); } .bars .down { background: var(--down); }
.meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); margin: 10px 2px 0; }
.legend .right { margin-left: auto; }
.legend .b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.b.up { background: var(--up); } .b.partial { background: var(--partial); } .b.down { background: var(--down); } .b.none { background: var(--none); }
.incident { border: 1px solid var(--line); border-left: 4px solid var(--partial); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.incident.resolved { border-left-color: var(--up); }
.incident.maintenance { border-left-color: var(--blue); }
.incident h3 { margin: 0; font-size: 1rem; }
.incident .when { font-size: 0.82rem; color: var(--muted); margin: 2px 0 8px; }
.incident p { margin: 6px 0 0; color: var(--ink2); font-size: 0.95rem; }
.foot { border-top: 1px solid var(--line); padding: 22px 0 32px; font-size: 0.85rem; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--ink2); }
@media (max-width: 560px) { .bars { grid-template-columns: repeat(45, 1fr); } .bars span:nth-child(-n+45) { display: none; } }