/*
 * Status page stylesheet, aligned on the jejesar.be neo-brutalist design
 * (Space Grotesk / Archivo Black / Space Mono, cream paper, 3px ink borders,
 * hard offset shadows, no rounded corners).
 *
 * THEMING: the whole look is driven by the CSS variables in the :root blocks
 * below:
 *   --bg, --fg, --muted     page background, text, secondary text
 *   --card, --border        card surface and ink (borders/shadows)
 *   --accent                links / focus ring
 *   --ok, --warn, --down, --gray   status colours (green/orange/red/no data)
 *   --on-status             text colour on status colours (always ink, AA)
 *   --radius, --shadow*     corner radius (0) and brutal shadows
 *   --font, --font-display, --font-mono   font stacks
 * The dark theme overrides the same variables in the prefers-color-scheme
 * block. Fonts are self-hosted: the url(fonts/...) references below are
 * rewritten at startup to hashed /static/ paths. No external resource may be
 * referenced (CSP: default-src 'self').
 */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("archivo-black.25f33e61.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("space-grotesk.06408904.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("space-mono-400.fb4a81a2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("space-mono-700.2d46bd15.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #fdf3e3;
  --dot: #1112;
  --fg: #111111;
  --muted: #434343;
  --card: #fafafa;
  --border: #111111;
  --accent: #2d5bff;
  --ok: #00c2a8;
  --warn: #ff7a45;
  --maint: #ffd23f;
  --down: #ff4d4d;
  --gray: #d4d4d4;
  --on-status: #111111;
  --radius: 0;
  --bw: 3px;
  --shadow-sm: 4px 4px 0 var(--border);
  --shadow: 6px 6px 0 var(--border);
  --shadow-lg: 10px 10px 0 var(--border);
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15151b;
    --dot: #ffffff1f;
    --fg: #f5f5f5;
    --muted: #c4c4cc;
    --card: #1f1f29;
    --border: #f5f5f5;
    --accent: #8aa4ff;
    --gray: #3a3a48;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--fg);
  font: 16px/1.5 var(--font);
}
.wrap { max-width: 760px; margin: 0 auto; padding: 1rem; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; }
h1 { font-size: 1.9rem; margin: 1rem 0; text-transform: uppercase; letter-spacing: -.01em; }
h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin: 1.8rem 0 .8rem;
}
h3 { font-size: 1.15rem; margin: 0; }
a { color: var(--accent); font-weight: 700; }
.muted { color: var(--muted); font-size: .9rem; }

.banner {
  padding: 1rem 1.1rem;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--on-status);
  background: var(--gray);
}
.banner.ok { background: var(--ok); }
.banner.warn { background: var(--warn); }
.banner.down { background: var(--down); }
.banner.maintenance { background: var(--maint); }
.banner.unknown { background: var(--card); color: var(--fg); }

.card {
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1.2rem;
  transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) {
  .card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}
.head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.head .name { flex: 1 1 auto; }
.dot {
  width: .9rem; height: .9rem; flex: none;
  border: 2px solid var(--border);
  background: var(--gray);
}
.dot.up { background: var(--ok); }
.dot.down { background: var(--down); }
.dot.maintenance { background: var(--maint); }

/* Status badge: ink text on a brand colour (AA), the label is always text. */
.state {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .1rem .5rem;
  border: 2px solid var(--border);
  background: var(--gray);
  color: var(--fg);
}
.state.up { background: var(--ok); color: var(--on-status); }
.state.down { background: var(--down); color: var(--on-status); }
.state.maintenance { background: var(--maint); color: var(--on-status); }
.latency { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.target, .error { margin: .4rem 0 0; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.error { color: var(--fg); font-weight: 700; border-left: 6px solid var(--down); padding-left: .5rem; }

/* 90-day bar: one square per day. */
.bar {
  list-style: none;
  margin: 1rem 0 .7rem;
  padding: 0;
  display: flex;
  gap: 1px;
  height: 30px;
}
.day {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0 solid var(--border);
  border-width: 1px 0;
  border-radius: 0;
  background: var(--gray);
}
@media (min-width: 640px) {
  .bar { gap: 2px; }
  .day { border-width: 1px; }
}
.day.ok { background: var(--ok); }
.day.warn { background: var(--warn); }
.day.down { background: var(--down); }
.day.nodata { background: var(--gray); }
.day:focus { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 2; }
/* Tooltip: shown on hover and keyboard focus. */
.day::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--fg);
  color: var(--bg);
  border: 2px solid var(--border);
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: .25rem .5rem;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  z-index: 3;
}
.day:hover::after, .day:focus::after { display: block; }
.day:nth-child(-n+10)::after { left: 0; transform: none; }
.day:nth-last-child(-n+10)::after { left: auto; right: 0; transform: none; }

.uptimes { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; }
.uptimes div { display: flex; gap: .4rem; align-items: baseline; }
.uptimes dt { color: var(--muted); font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.uptimes dd { margin: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; }

.incidents { list-style: none; margin: 0; padding: 0; }
.incidents li { padding: .7rem 1rem; border-bottom: 2px solid var(--border); display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.incidents li:last-child { border-bottom: 0; }
.incidents.card { padding: 0; }

footer { text-align: center; padding-bottom: 2rem; font-family: var(--font-mono); }
@media (min-width: 640px) {
  .wrap { padding: 1.5rem; }
  h1 { font-size: 2.6rem; }
}