/* status.ninjastic2008.com — één stylesheet, geen framework.
   Dezelfde tekens als de rest van het huis (zie NinjaWebsite/DESIGN.md): donker
   omdat je hier tussen een terminal en een editor naar kijkt, teal als
   aan-lampje, ember voor wat er beweegt. Wat hier bovenop komt is de
   toestandskleur: de pagina heeft één ding te zeggen en de hele kop zegt het
   mee. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2?v=1') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: oklch(0.16 0.008 250);
  --bg-deep: oklch(0.13 0.008 250);
  --bg-soft: oklch(0.19 0.008 250);
  --panel: oklch(0.20 0.010 250);
  --panel-2: oklch(0.24 0.012 250);
  --border: oklch(0.31 0.012 250);
  --border-soft: oklch(0.26 0.010 250);
  --text: oklch(0.95 0.004 250);
  --muted: oklch(0.76 0.008 250);
  --faint: oklch(0.62 0.008 250);
  --accent: oklch(0.80 0.14 180);
  --accent-soft: oklch(0.80 0.14 180 / 0.12);
  --ember: oklch(0.74 0.16 45);

  --ok: oklch(0.82 0.15 150);
  --warn: oklch(0.83 0.14 85);
  --bad: oklch(0.70 0.17 25);
  --idle: oklch(0.45 0.012 250);

  /* De toestandskleur van de hele pagina. JavaScript zet alleen data-state op
     de kop; alles wat meekleurt leest deze variabele, zodat er nergens een
     tweede plek is waar "rood" wordt bepaald. */
  --state: var(--accent);

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Archivo', system-ui, sans-serif;

  --radius: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-bg: 0;
  --z-content: 1;
  --z-head: 20;
  --z-tip: 40;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: oklch(0.97 0.003 250); --bg-deep: oklch(0.94 0.004 250); --bg-soft: oklch(0.93 0.004 250);
    --panel: oklch(1 0 0); --panel-2: oklch(0.95 0.004 250);
    --border: oklch(0.87 0.006 250); --border-soft: oklch(0.91 0.005 250);
    --text: oklch(0.22 0.010 250); --muted: oklch(0.44 0.010 250); --faint: oklch(0.56 0.010 250);
    --accent: oklch(0.55 0.12 180); --accent-soft: oklch(0.55 0.12 180 / 0.10);
    --ember: oklch(0.58 0.16 45);
    --ok: oklch(0.58 0.14 150); --warn: oklch(0.62 0.13 75); --bad: oklch(0.55 0.20 25);
    --idle: oklch(0.86 0.006 250);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
code, .mono { font-family: var(--mono); font-size: .88em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }
.placeholder { color: var(--faint); font-family: var(--mono); font-size: 13px; }

/* ---------- kop ---------- */
.site-head {
  position: sticky; top: 0; z-index: var(--z-head);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-head .wrap { display: flex; align-items: center; gap: 26px; height: 60px; }
.brand {
  font-family: var(--display); font-weight: 650; font-size: 16.5px;
  letter-spacing: -.02em; color: var(--text);
  display: inline-flex; align-items: center; gap: 9px;
}
.brand:hover { text-decoration: none; color: var(--accent); }
.brand-tail {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.site-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; font-size: 14.5px; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* ---------- de stand van zaken ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(48px, 8vw, 88px) 0 clamp(36px, 5vw, 56px);
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-deep), var(--bg) 70%);
  border-bottom: 1px solid var(--border-soft);
}
.hero[data-state="up"] { --state: var(--ok); }
.hero[data-state="degraded"] { --state: var(--warn); }
.hero[data-state="down"] { --state: var(--bad); }
.hero[data-state="unknown"], .hero[data-state="loading"], .hero[data-state="offline"] { --state: var(--idle); }
.hero-inner { position: relative; z-index: var(--z-content); }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--state); margin: 0 0 14px;
  transition: color .5s var(--ease);
}
.headline {
  display: flex; align-items: center; gap: 16px;
  font-size: clamp(28px, 5.2vw, 54px); font-weight: 800;
  margin: 0 0 16px;
}
/* Het lampje: één punt met een ring die er langzaam uit groeit. Geen spinner,
   geen knipperlicht — dit moet je in je ooghoek kunnen zien zonder dat het om
   aandacht vraagt. */
.beacon {
  flex: none; position: relative;
  width: clamp(14px, 1.6vw, 18px); aspect-ratio: 1;
  border-radius: 50%; background: var(--state);
  transition: background .5s var(--ease);
}
.beacon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--state);
  animation: beaconRing 2.6s var(--ease) infinite;
}
@keyframes beaconRing {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.hero .lead {
  font-size: clamp(15.5px, 1.4vw, 18px); color: var(--muted);
  max-width: 62ch; margin: 0 0 28px;
}

.overall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 0;
  background: var(--border-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
}
.overall-item { background: var(--panel); padding: 16px 18px; }
.overall dt { font-size: 12.5px; color: var(--faint); margin-bottom: 4px; }
.overall dd { margin: 0; }
.figure {
  font-family: var(--mono); font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 600; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* De drie decimalen zijn het punt van deze pagina, maar niet het eerste wat je
   moet lezen. Ze staan er dus wel, een tikje rustiger. */
.figure .dec { color: var(--muted); }
.figure .unit { font-size: .62em; color: var(--faint); margin-left: 1px; }
.coverage {
  margin: 3px 0 0; font-family: var(--mono); font-size: 11px; color: var(--faint);
}

/* ---------- sfeer ---------- */
.atmosphere {
  position: absolute; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 115% at 70% 40%, #000 34%, transparent 92%);
  mask-image: radial-gradient(135% 115% at 70% 40%, #000 34%, transparent 92%);
}
.sweep {
  position: absolute; top: -60%; bottom: -60%; width: 46%;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--state) 42%, transparent) 34%,
    color-mix(in srgb, var(--state) 58%, transparent) 50%,
    color-mix(in srgb, var(--state) 42%, transparent) 66%, transparent 100%);
  filter: saturate(.85); opacity: .34;
  transform: rotate(-16deg) translate3d(-40vw, 0, 0);
  animation: sweepAcross 125s linear infinite;
  will-change: transform;
  transition: background .6s var(--ease);
}
.sweep-2 {
  width: 62%; opacity: .2; animation-duration: 195s; animation-delay: -70s;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--ember) 34%, transparent) 40%,
    color-mix(in srgb, var(--ember) 46%, transparent) 50%,
    color-mix(in srgb, var(--ember) 34%, transparent) 60%, transparent 100%);
}
@keyframes sweepAcross {
  from { transform: rotate(-16deg) translate3d(-70vw, 0, 0); }
  to   { transform: rotate(-16deg) translate3d(170vw, 0, 0); }
}
.grain {
  position: absolute; inset: -10%; opacity: .09; background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  .sweep { opacity: .2; } .sweep-2 { opacity: .1; }
  .grain { opacity: .05; mix-blend-mode: multiply; }
}

/* ---------- alarm ---------- */
.alarm {
  margin: 22px 0 0; padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 9%, transparent);
  border-radius: 10px; color: var(--text); font-size: 14.5px;
}

/* ---------- diensten ---------- */
.services { padding: clamp(34px, 5vw, 54px) 0 0; }
.group { margin-bottom: 34px; }
.group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.group-head h2 { font-size: clamp(19px, 2.2vw, 24px); margin: 0; }
.group-head p { margin: 0; color: var(--faint); font-size: 13.5px; }

.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.service { padding: 18px 20px; border-top: 1px solid var(--border-soft); }
.service:first-child { border-top: 0; }
.service-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.service-name { font-weight: 600; font-size: 15.5px; }
.service-desc { color: var(--muted); font-size: 13.5px; margin: 2px 0 0; max-width: 64ch; }
.service-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.service-uptime {
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--text); white-space: nowrap;
}
.service-uptime .dec { color: var(--muted); }
.service-uptime .unit { color: var(--faint); font-size: .8em; }

.pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  border: 1px solid currentColor;
}
.pill-up { color: var(--ok); }
.pill-degraded { color: var(--warn); }
.pill-down { color: var(--bad); }
.pill-unknown { color: var(--faint); }

/* De balk: negentig dagen naast elkaar. Geen assen en geen legenda in de balk
   zelf — de kleur is de boodschap en de details staan in de tooltip. */
.bars {
  display: flex; gap: 2px; height: 34px; margin-top: 14px;
  align-items: stretch;
}
.bar {
  flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--idle);
  border: 0; padding: 0; cursor: default;
  transition: filter .12s var(--ease), transform .12s var(--ease);
}
.bar[data-day="up"] { background: var(--ok); }
.bar[data-day="down"] { background: var(--bad); }
/* Een dag die deels stuk was: onderin rood, daarboven oranje voor traag, de
   rest groen — in verhouding tot hoe lang het duurde. Eén blokje vertelt zo
   het hele verhaal van die dag zonder dat je hoeft te hoveren. */
.bar[data-day="part"] {
  background: linear-gradient(to top,
    var(--bad) 0 var(--down-share),
    var(--warn) var(--down-share) calc(var(--down-share) + var(--deg-share)),
    var(--ok) calc(var(--down-share) + var(--deg-share)) 100%);
}
.bar:hover, .bar:focus-visible { filter: brightness(1.25); transform: scaleY(1.08); }
.bars-axis {
  display: flex; justify-content: space-between; gap: 14px;
  font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 7px;
}
/* De middelste tekst is de laatste meting. Die mag lang zijn (een foutmelding),
   maar nooit de datums opzij duwen. */
.bars-axis > span:nth-child(2) {
  flex: 1 1 auto; min-width: 0; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bars-axis > span:first-child, .bars-axis > span:last-child { flex: none; }
/* Op een telefoon is 90 balkjes van een halve pixel geen grafiek meer, dus
   tonen we daar de laatste 30 dagen. De cijfers eronder blijven over 90 dagen
   gaan — die staan er los bij. */
@media (max-width: 720px) {
  .bar:nth-child(-n+60) { display: none; }
  .bars-axis[data-short]::before { content: attr(data-short); }
  .bars-axis[data-short] > span:first-child { display: none; }
}

/* ---------- storingen ---------- */
.incidents { padding: clamp(26px, 4vw, 44px) 0 0; }
.incidents h2, .method h2 { font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 14px; }
.incident {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 13px 0; border-top: 1px solid var(--border-soft);
}
.incident:first-child { border-top: 0; }
.incident-when { font-family: var(--mono); font-size: 12.5px; color: var(--faint); min-width: 148px; }
.incident-what { flex: 1; min-width: 240px; }
.incident-what b { font-weight: 600; }
.incident-what span { color: var(--muted); }
.incident-dur { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.incident-open { color: var(--bad); }
.all-clear {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 18px 20px; color: var(--muted); font-size: 14.5px;
}

/* ---------- uitleg ---------- */
.method { padding: clamp(30px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.method-grid h3 { font-size: 15.5px; margin: 0 0 6px; }
.method-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.method .pill { display: inline-block; vertical-align: baseline; }

/* ---------- voet ---------- */
.site-foot {
  border-top: 1px solid var(--border-soft); padding: 22px 0 40px;
  color: var(--faint); font-size: 13.5px;
}
.site-foot .wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.site-foot .spacer { margin-left: auto; font-size: 12px; }

/* ---------- tooltip ---------- */
.tip {
  position: fixed; z-index: var(--z-tip); pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 12px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 6px 22px oklch(0 0 0 / .35);
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
  max-width: 260px;
}
.tip[data-show] { opacity: 1; transform: none; }
.tip .tip-date { font-family: var(--mono); font-size: 11.5px; color: var(--faint); display: block; }
.tip .tip-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .service-right { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sweep { animation: none; }
  .beacon::after { animation: none; opacity: 0; }
  .bar, .tip { transition: none; }
}