/* Theme tokens and base styles follow games_nginx/app/app.css so the status page
   matches blazium.games. Nunito is self-hosted (SIL OFL, see fonts/OFL.txt). */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/static/fonts/nunito-latin-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/nunito-latin-wght-normal.woff2") format("woff2");
}

html {
  --bg-hue: 308;
  --color-bg-dark: oklch(0.20 0.04 var(--bg-hue));
  --color-bg: oklch(0.25 0.06 var(--bg-hue) / 0.8);
  --color-bg-light: oklch(0.27 0.08 var(--bg-hue));

  --color-text: oklch(1.0 0.0 0 / 0.9);
  --color-text-muted: oklch(0.85 0.0 0 / 0.9);

  --color-highlight: oklch(0.75 0.20 308);

  --color-border: oklch(0 0 0 / 0.5);
  --color-border-muted: oklch(0 0 0 / 0.2);

  --color-primary: oklch(0.40 0.15 290);
  --color-secondary: oklch(0.30 0.05 308 / 0.8);

  --color-danger: oklch(0.7 0.18 23);
  --color-warning: oklch(0.7 0.18 86);
  --color-success: oklch(0.7 0.18 151);
  --color-info: oklch(0.7 0.18 260);
  --color-partial: oklch(0.7 0.18 50);

  --font-f-heading: "Nunito", system-ui, sans-serif;
  --font-f-text: var(--font-f-heading);

  --font-s-h3: 2.369rem;
  --font-s-h4: 1.777rem;
  --font-s-h5: 1.333rem;
  --font-s-h6: 1.125rem;
  --font-s-p: 1.000rem;
  --font-s-small: 0.875rem;

  --font-w-normal: 400;
  --font-w-semibold: 600;
  --font-w-bold: 700;

  --line-h-base: 1.25em;
  --line-h-loose: 1.50em;

  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.50rem;
  --spacing-s: 0.75rem;
  --spacing-m: 1.00rem;
  --spacing-l: 1.25rem;
  --spacing-xl: 1.50rem;
  --spacing-2xl: 1.75rem;
  --spacing-3xl: 2.50rem;
  --spacing-4xl: 3.75rem;

  --h3: var(--font-w-bold) var(--font-s-h3)/var(--line-h-base) var(--font-f-heading);
  --h4: var(--font-w-bold) var(--font-s-h4)/var(--line-h-base) var(--font-f-heading);
  --h5: var(--font-w-bold) var(--font-s-h5)/var(--line-h-loose) var(--font-f-heading);
  --h6: var(--font-w-bold) var(--font-s-h6)/var(--line-h-loose) var(--font-f-heading);
  --p: var(--font-w-normal) var(--font-s-p)/var(--line-h-base) var(--font-f-text);
  --small: var(--font-w-normal) var(--font-s-small)/var(--line-h-loose) var(--font-f-text);

  background: linear-gradient(var(--color-bg-dark), var(--color-bg-light) 100vh);
  background-color: var(--color-bg-light);
  color-scheme: dark;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-light) var(--color-bg-dark);
  font-family: var(--font-f-text);
  color: var(--color-text);
}

*, *::before, *::after {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1 { font: var(--h3); }
h2 { font: var(--h4); margin-bottom: var(--spacing-s); }
h3 { font: var(--h6); }
p { font: var(--p); line-height: var(--line-h-loose); }
small { font: var(--small); }

a { text-decoration: none; color: var(--color-highlight); }
a:hover { text-decoration: underline; }

ul, ol { padding-left: var(--spacing-m); }

input, select, textarea {
  font: var(--p);
  border-radius: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-s);
  background-color: var(--color-bg-dark);
  color: inherit;
  accent-color: var(--color-primary);
}

select { padding-block: 6px; }

:where(a, button, .button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
}

button, .button {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: none;
  border-radius: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-s);
  cursor: pointer;
  font: var(--small);
  font-weight: var(--font-w-semibold);
  color: var(--color-text-muted);
  --bg-color: var(--color-primary);
  background-color: var(--bg-color);
  transition-property: background-color, color;
  transition-duration: 0.1s;
}

button:hover, .button:hover {
  text-decoration: none;
  background-color: oklch(from var(--bg-color) calc(l + 0.05) c h);
  color: var(--color-text);
}

button.secondary, .button.secondary { --bg-color: var(--color-secondary); }
button.danger, .button.danger { --bg-color: oklch(0.42 0.16 23); color: var(--color-text); }

/* Header and footer, after games_nginx/app/css/layout.module.css. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  align-self: center;
  padding-block: var(--spacing-xs);
  background-color: var(--color-bg-dark);
}

.brand {
  font: var(--h5);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  column-gap: var(--spacing-xs);
}

.brand:hover { text-decoration: none; }
.brand img { aspect-ratio: 1; height: 1.5em; }
.brand .brand-sub { color: var(--color-text-muted); font-weight: var(--font-w-normal); }

.site-header nav { display: flex; gap: var(--spacing-xl); }

.site-header nav a {
  font: var(--p);
  font-size: var(--font-s-h6);
  font-weight: var(--font-w-semibold);
  color: var(--color-text-muted);
}

.site-header nav a:hover { text-decoration: none; color: var(--color-text); }

.site-footer {
  margin-top: auto;
  padding: var(--spacing-2xl) var(--spacing-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-l);
  text-align: center;
}

.site-footer a { color: var(--color-text-muted); }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-m);
}

.site-footer nav:first-child { margin-top: var(--spacing-3xl); }
.site-footer nav.legal { font-size: var(--font-s-small); }
.site-footer p { font: var(--small); color: var(--color-text-muted); }

/* Page content. */

.wrap {
  width: 100%;
  max-width: 900px;
  align-self: center;
  padding-inline: var(--spacing-m);
}

main.wrap { margin-block: var(--spacing-2xl) var(--spacing-4xl); }
section { margin-block: var(--spacing-3xl); }
section:first-child { margin-top: 0; }

.banner {
  border-radius: var(--spacing-xs);
  padding: var(--spacing-l) var(--spacing-xl);
  color: var(--color-bg-dark);
  background-color: var(--level-color, var(--color-success));
  box-shadow: 0 8px 24px var(--color-border-muted);
}

.banner h1 { font: var(--h4); }
.banner p { font: var(--small); opacity: 0.85; }

.level-under_maintenance { --level-color: var(--color-info); }
.level-degraded_performance { --level-color: var(--color-warning); }
.level-partial_outage { --level-color: var(--color-partial); }
.level-major_outage { --level-color: var(--color-danger); }

.component, .incident, .card, .notice {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--spacing-xs);
  padding: var(--spacing-m) var(--spacing-l);
  margin-bottom: var(--spacing-s);
}

.notice > * + *, .incident > * + * { margin-top: var(--spacing-xs); }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-s); }
.row.small { font: var(--small); color: var(--color-text-muted); margin-top: var(--spacing-2xs); }
.name { font-weight: var(--font-w-bold); }
.desc { display: block; font: var(--small); color: var(--color-text-muted); }

.state {
  color: var(--level-color, var(--color-success));
  font: var(--small);
  font-weight: var(--font-w-bold);
  white-space: nowrap;
}

.bars { display: flex; gap: 2px; margin-top: var(--spacing-s); height: 32px; }
.bar { flex: 1; border-radius: 2px; background-color: var(--color-bg-light); }
.bar:hover { filter: brightness(1.2); }
.bar-up { background-color: var(--color-success); }
.bar-minor { background-color: var(--color-warning); }
.bar-partial { background-color: var(--color-partial); }
.bar-major { background-color: var(--color-danger); }
.bar-maintenance { background-color: var(--color-info); }

.incident { border-left: 4px solid var(--color-warning); }
.incident.impact-none { border-left-color: var(--color-bg-light); }
.incident.impact-major { border-left-color: var(--color-partial); }
.incident.impact-critical { border-left-color: var(--color-danger); }
.incident.maintenance { border-left-color: var(--color-info); }
.incident h3 a { color: var(--color-text); }

.meta, .when, .none { font: var(--small); color: var(--color-text-muted); }
.incident p, .notice p { color: var(--color-text-muted); }
.incident strong { color: var(--color-text); }

.updates { list-style: none; padding: 0; }
.updates li { border-top: 1px solid var(--color-border-muted); padding-block: var(--spacing-xs); }
.updates li p + p { margin-top: var(--spacing-2xs); }

.day { margin-bottom: var(--spacing-l); }
.date { border-bottom: 1px solid var(--color-border-muted); padding-bottom: var(--spacing-2xs); margin-bottom: var(--spacing-s); }

.pager { display: flex; flex-wrap: wrap; gap: var(--spacing-m); margin-top: var(--spacing-xs); }

.flash {
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--spacing-xs);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-muted);
  border-left: 3px solid var(--color-info);
  margin-bottom: var(--spacing-s);
}

.flash.ok { border-left-color: var(--color-success); }
.flash.error { border-left-color: var(--color-danger); }

/* Staff editor. */

.staff-head { display: flex; align-items: center; gap: var(--spacing-m); flex-wrap: wrap; }
.staff-head p { color: var(--color-text-muted); }
form.inline { display: inline-block; margin-bottom: var(--spacing-s); }

.card label { display: block; margin-bottom: var(--spacing-s); font: var(--small); color: var(--color-text-muted); }
.card input, .card select, .card textarea {
  display: block;
  width: 100%;
  margin-top: var(--spacing-2xs);
  border: 1px solid var(--color-border-muted);
}
.card fieldset { border: 1px solid var(--color-border-muted); border-radius: var(--spacing-2xs); margin-bottom: var(--spacing-s); padding: var(--spacing-xs) var(--spacing-s); }
.card legend { font: var(--small); color: var(--color-text-muted); padding-inline: var(--spacing-2xs); }
.card label.check { display: inline-flex; align-items: center; gap: var(--spacing-2xs); margin: 0 var(--spacing-m) var(--spacing-2xs) 0; color: var(--color-text); }
.card label.check input { display: inline; width: auto; margin: 0; }

table.probes { width: 100%; border-collapse: collapse; font: var(--small); }
table.probes th, table.probes td {
  text-align: left;
  vertical-align: top;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-muted);
  color: var(--color-text-muted);
}
table.probes th { color: var(--color-text); }

@media (width < 1300px) {
  .site-header { padding-inline: var(--spacing-s); }
}

@media (width < 720px) {
  .site-header nav { display: none; }
  h1 { font: var(--h4); }
  .bars { gap: 1px; }
  table.probes { display: block; overflow-x: auto; }
}