/* willperlak.com/status, built by LocalUtils/bin/site-status.py. Colours
   and spacing are the shared theme tokens (/theme/css/), so Clean light,
   Clean dark and Retro all come from the same rules. */

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}
html:not([data-theme="clean"]) body {
  font-family: "Comic Sans MS", "Comic Relief", "Comic Sans", sans-serif;
}

.status {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }

.summary {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-weight: var(--weight-semibold);
}
.summary.is-up { background: var(--success-soft); color: var(--success-soft-text); }
.summary.is-down { background: var(--danger-soft); color: var(--danger-soft-text); }
.summary.is-unknown { background: var(--warning-soft); color: var(--warning-soft-text); }

.stale {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--warning-soft);
  color: var(--warning-soft-text);
  border: 1px solid var(--warning);
}
.stale[hidden] { display: none; }

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.check {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name state" "since since";
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: var(--control-h);
  box-sizing: border-box;
}
.check + .check { border-top: 1px solid var(--border); }
.check-name { grid-area: name; color: var(--link); font-weight: var(--weight-medium); }
.check-name:focus-visible { outline: none; box-shadow: var(--ring); }
.check-since { grid-area: since; color: var(--text-muted); font-size: var(--text-sm); }
.check-state {
  grid-area: state;
  justify-self: end;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.is-up .check-state { background: var(--success-soft); color: var(--success-soft-text); }
.is-down .check-state { background: var(--danger-soft); color: var(--danger-soft-text); }
.is-unknown .check-state { background: var(--warning-soft); color: var(--warning-soft-text); }

footer { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }
footer p { margin: 0 0 var(--space-4); }

/* Retro: the landing page's frames, square corners, no shadows. */
html:not([data-theme="clean"]) .checks { border: 3px ridge var(--border); }
html:not([data-theme="clean"]) .summary,
html:not([data-theme="clean"]) .stale { border: 4px double var(--border-alt); }
html:not([data-theme="clean"]) h1 { color: var(--focus); }

@media (min-width: 40rem) {
  .check {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "name since state";
  }
}