/*
  Brand tokens from `docs/brand/STYLE_GUIDE.md` §3, in the hero-tuned bands.

  **Both faces are served from this tile.** `brand-assets/pages/status.html`, which this
  is a port of, links Google Fonts — three `<link>` tags the served-site CSP refuses
  outright (`style-src 'self' 'unsafe-inline'`, `font-src 'self' data:`, DESIGN.md §8.3).
  The failure is silent: the page renders in a fallback face on somebody else's domain
  with nothing to say why. `bungee.woff2` and `mono.woff2` are the same two files
  `tiles/hello/` ships, byte for byte, so the CAS stores one copy for both tiles.

  The mono face is Atkinson Hyperlegible Mono rather than the source page's Space Mono:
  it is the face this repository already self-hosts, and adding a third font blob to
  every site that binds this tile buys a slightly different `0`.
*/
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/bungee.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/mono.woff2') format('woff2');
}

:root {
  --hp-black: #0b0b0d;
  --hp-navy: #12141f;
  --hp-cream: #f5eedd;
  --hp-eggshell: #ede3cc;
  --hp-chocolate: #241a12;
  --band-1: #e3a23d; /* harvest gold */
  --band-2: #d9562b; /* burnt orange */
  --band-3: #a8301f; /* brick red */
  --beacon: #6fd3ff;
  --pink: #ff4d9d;
  --phosphor: #4ce6a1;
  --amber: #ffb44d;

  --font-display: 'Bungee', system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Dark by default: it is a spaceport at night. */
  --bg: var(--hp-black);
  --bg-2: #101119;
  --text: var(--hp-cream);
  --text-muted: #b9b09a;
  --panel: var(--hp-navy);
  --panel-border: #2a2e42;
  --focus: var(--beacon);
  --star: var(--hp-cream);

  --ok: var(--phosphor);
  --warn: var(--amber);
  --bad: var(--pink);
  --off: #3a3f52;
}

:root[data-theme='light'] {
  --bg: #f9f4e7;
  --bg-2: #efe3cb;
  --text: var(--hp-chocolate);
  --text-muted: #5a4b38;
  --panel: var(--hp-eggshell);
  --panel-border: #c9bda0;
  --focus: #0e6e93;
  --star: var(--hp-chocolate);

  /* Darkened against the parchment ground: the dark-mode phosphor and pink are both
     under 3:1 on cream, and a status lamp nobody can distinguish is the one component
     of this page that has to be legible. */
  --ok: #2e8a5a;
  --warn: #b86a00;
  --bad: #b3244f;
  --off: #b5aa90;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

/*
  **The source page is `height: 100%` with `overflow: hidden`, and it clips.** The mark is
  a square at up to 640px, and the rack, the incident plate and the footer sit under it —
  on a 1280x800 laptop that is about 900px of content in an 800px viewport, so the footer
  and part of the incident are simply not there, with no scrollbar to suggest otherwise.
  It does not show up in the source file because that page is usually looked at with no
  incident and the window maximised.

  `min-height` with the default overflow lets the page scroll when it has to and still
  centres when it does not.
*/
body {
  min-height: 100%;
  margin: 0;
  padding: 24px 0;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  font-family: var(--font-mono);
  display: grid;
  place-items: center;
  -webkit-font-smoothing: antialiased;
}

/* Fixed, so it stays put when the page does scroll. */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms ease;
}

:root[data-theme='light'] .stars {
  opacity: 0.12;
}

.stars circle {
  fill: var(--star);
}

.stars .twinkle {
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: var(--lo, 0.35);
  }
  50% {
    opacity: var(--hi, 1);
  }
}

main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 16px;
  width: 100%;
  max-width: min(92vw, 640px);
}

/*
  `56vh` keeps the mark from taking the whole viewport on a short window, which is what
  pushes everything else off the bottom. `container-type: size` is what the `cqw` type
  scale below is measured against, so the headline tracks the mark rather than the page.
*/
.mark {
  position: relative;
  width: min(100%, 56vh);
  aspect-ratio: 1;
  border-radius: 23.75%;
  background: var(--hp-black);
  overflow: hidden;
  container-type: size;
  box-shadow:
    0 0 0 1px rgb(245 238 221 / 6%),
    0 30px 80px -30px rgb(0 0 0 / 80%);
}

:root[data-theme='light'] .mark {
  box-shadow:
    0 0 0 1px rgb(36 26 18 / 15%),
    0 30px 60px -30px rgb(36 26 18 / 55%);
}

.fan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.header {
  position: absolute;
  top: 8.5%;
  left: 9%;
  right: 9%;
}

.kicker {
  margin: 0 0 0.6em;
  font-size: clamp(9px, 3cqw, 16px);
  letter-spacing: 0.14em;
  color: var(--band-1);
  text-shadow: 0 0 14px rgb(11 11 13 / 100%);
}

.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 100px; /* fitted to the inner width by the script */
  line-height: 0.92;
  letter-spacing: -0.012em;
  white-space: nowrap;
  color: var(--hp-cream);
  text-shadow:
    0 2px 0 rgb(11 11 13 / 90%),
    0 0 24px rgb(11 11 13 / 90%);
}

.readout {
  position: absolute;
  right: 9%;
  bottom: 8.5%;
  width: 62%;
  margin: 0;
  text-align: right;
  font-size: clamp(9px, 2.9cqw, 16px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--phosphor);
  text-shadow:
    0 0 10px rgb(76 230 161 / 45%),
    0 0 18px rgb(11 11 13 / 100%);
}

.readout b {
  font-weight: 700;
  color: var(--hp-cream);
}

.problem .readout {
  color: var(--amber);
  text-shadow:
    0 0 10px rgb(255 180 77 / 45%),
    0 0 18px rgb(11 11 13 / 100%);
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  vertical-align: -0.15em;
  background: currentcolor;
  margin-left: 0.2em;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.rack {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  color: var(--text);
  overflow: hidden;
}

.rack h2 {
  margin: 0;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--panel-border);
}

.rack ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rack li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--panel-border);
}

.rack li:last-child {
  border-bottom: 0;
}

.lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--off);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 50%);
}

.lamp[data-state='operational'] {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.lamp[data-state='degraded'] {
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
}

.lamp[data-state='outage'] {
  background: var(--bad);
  box-shadow: 0 0 8px var(--bad);
  animation: pulse 1.6s ease-in-out infinite;
}

.lamp[data-state='maintenance'] {
  background: var(--beacon);
  box-shadow: 0 0 8px var(--beacon);
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

.state-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.state-label[data-state='operational'] {
  color: var(--ok);
}

.state-label[data-state='degraded'] {
  color: var(--warn);
}

.state-label[data-state='outage'] {
  color: var(--bad);
}

.state-label[data-state='maintenance'] {
  color: var(--beacon);
}

.incident {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--warn);
  border-radius: 14px;
  padding: 14px 16px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.incident dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0 0 10px;
}

.incident dt {
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  padding-top: 3px;
}

.incident dd {
  margin: 0;
}

.incident dd.id {
  color: var(--band-1);
  font-weight: 700;
}

.incident dd.status {
  color: var(--warn);
}

.incident p {
  margin: 0;
  color: var(--text);
}

.foot {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.foot a {
  color: inherit;
}

.foot a:focus-visible,
.mark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .stars .twinkle {
    animation: none;
    opacity: var(--hi, 1);
  }

  .cursor,
  .lamp {
    animation: none;
  }
}