/*
 * The status page in Wizly's look: Halo's blue hour, its Nila accent and warm
 * afterglow under a slow sky, its faces and its rounded planes. The values are
 * Halo's (Labs' theme tokens); the page is its own.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  --display-font: "Bricolage Grotesque", "Segoe UI Variable Display", system-ui, sans-serif;
  --body-font: "Instrument Sans", "Segoe UI Variable Text", system-ui, sans-serif;
  --pad: clamp(1rem, 3.2vw, 3.5rem);
  --card-round: 20px;
  --card-pad: clamp(1rem, 0.75rem + 0.9vw, 1.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --arrive: 560ms;

  --tint-light: #2f4bc3;
  --tint-dark: #9cb8ff;
  --afterglow-deep: #9b4819;
  --afterglow-bright: #f5af84;

  --page: #f3f6fc;
  --surface: #ffffff;
  --inset: #ebeff8;
  --ink: #10182e;
  --muted: #48526c;
  --faint: #59637e;
  --shade: #17203a;
  --accent: var(--tint-light);
  --focus: var(--accent);
  --success: #007658;
  --warning: #975d04;
  --danger: #be2d39;
  --info: #006b9c;
  --line: color-mix(in oklab, var(--ink) 10%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 22%, transparent);
  --soft-share: 12%;
  --depth-card:
    0 0 0 1px color-mix(in oklab, var(--shade) 7%, transparent),
    0 12px 30px -18px color-mix(in oklab, var(--shade) 30%, transparent);
  --sky-1: color-mix(in oklab, color-mix(in oklab, var(--tint-dark) 70%, var(--surface)) 70%, transparent);
  --sky-2: color-mix(in oklab, color-mix(in oklab, var(--tint-dark) 50%, var(--surface)) 55%, transparent);
  --sky-warm: color-mix(in oklab, color-mix(in oklab, var(--afterglow-bright) 55%, var(--surface)) 75%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #070b19;
    --surface: #0d1324;
    --inset: #040610;
    --ink: #edf0f9;
    --muted: #b5bed3;
    --faint: #919bb5;
    --shade: #000103;
    --accent: var(--tint-dark);
    --focus: color-mix(in oklab, var(--accent) 60%, var(--ink));
    --success: #67dab2;
    --warning: #f5c66d;
    --danger: #fb8087;
    --info: #78caee;
    --soft-share: 16%;
    --depth-card:
      inset 0 1px 0 0 color-mix(in oklab, var(--ink) 7%, transparent),
      0 18px 40px -22px color-mix(in oklab, var(--shade) 80%, transparent);
    --sky-1: color-mix(in oklab, color-mix(in oklab, var(--tint-light) 88%, var(--page)) 52%, transparent);
    --sky-2: color-mix(in oklab, color-mix(in oklab, var(--tint-dark) 50%, var(--tint-light)) 22%, transparent);
    --sky-warm: color-mix(in oklab, color-mix(in oklab, var(--afterglow-bright) 35%, var(--afterglow-deep)) 30%, transparent);
  }
}

/* Each state's tone; the words and marks beside it carry the same meaning. */
[data-state="working"] { --tone: var(--success); }
[data-state="slow"] { --tone: var(--warning); }
[data-state="down"] { --tone: var(--danger); }
[data-state="maintenance"] { --tone: var(--info); }
[data-state="unknown"],
[data-state="none"] { --tone: var(--faint); }

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background: var(--page);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body-font);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

/* The sky: three pools of light over the top of the page, drifting on long
   cycles; only their transforms change. */
.sky {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 44rem;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.pool {
  position: absolute;
  will-change: transform;
}
.pool-deep {
  top: -42%;
  left: -14%;
  width: max(64vw, 47.5rem);
  height: 51.25rem;
  background-image: radial-gradient(closest-side, var(--sky-1), transparent);
  animation: drift-deep 140s ease-in-out infinite alternate;
}
.pool-light {
  top: -40%;
  right: -16%;
  width: max(50vw, 40rem);
  height: 40rem;
  background-image: radial-gradient(closest-side, var(--sky-2), transparent);
  animation: drift-light 178s ease-in-out infinite alternate;
}
.pool-warm {
  top: 26%;
  right: -4%;
  width: max(46vw, 35rem);
  height: 27.5rem;
  background-image: radial-gradient(closest-side, var(--sky-warm), transparent);
  animation: drift-warm 158s ease-in-out infinite alternate;
}
@media (max-width: 39.99rem) {
  .pool-deep {
    width: 140vw;
    height: 35rem;
  }
  .pool-light,
  .pool-warm {
    width: 120vw;
    height: 26.25rem;
  }
}
@keyframes drift-deep {
  to { transform: translate3d(7%, 5%, 0) scale(1.1); }
}
@keyframes drift-light {
  to { transform: translate3d(-9%, 7%, 0) scale(0.94); }
}
@keyframes drift-warm {
  to { transform: translate3d(-12%, -6%, 0) scale(1.08); }
}

.marks {
  position: absolute;
  width: 0;
  height: 0;
}
.marks symbol,
svg use {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--pad) clamp(2.5rem, 6vw, 5rem);
}

/* The masthead */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: clamp(1.125rem, 2.5vw, 1.75rem);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.brand-name {
  font: 650 1.1875rem/1 var(--display-font);
  letter-spacing: -0.016em;
}
.brand-tag {
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) var(--soft-share), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.checked {
  position: relative;
  padding-left: 1.125rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
/* The beat: a still dot, and a ring that ripples out once each time new
   readings arrive. */
.checked::before,
.beat {
  position: absolute;
  left: 0.125rem;
  top: calc(50% - 0.3125rem);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}
.checked::before {
  content: "";
  background: var(--accent);
}
.beat {
  border: 2px solid var(--accent);
  opacity: 0;
}

/* The layout: the reading beside the parts on a wide screen, above them on a
   narrow one. */
.layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-top: clamp(0.75rem, 3vw, 2.5rem);
}
@media (min-width: 64rem) {
  .layout {
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    align-items: start;
  }
  .reading {
    position: sticky;
    top: 2rem;
  }
}

/* The reading: one sentence for how things stand */
.overall {
  display: grid;
  gap: 1rem;
}
.overall-mark {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.75rem;
  border-radius: 50%;
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 30%, transparent), var(--depth-card);
}
.overall h1 {
  font: 600 clamp(2rem, 1.55rem + 1.7vw, 3rem) / 1.08 var(--display-font);
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.overall-lines {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.5;
}

.notices {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}
.notices:empty {
  display: none;
}

/* Planes: the groups and the incidents */
.group,
.incident {
  border-radius: var(--card-round);
  background: var(--surface);
  box-shadow: var(--depth-card);
}
.groups {
  display: grid;
  gap: clamp(1rem, 1.4vw + 0.5rem, 1.5rem);
}
.group {
  padding: var(--card-pad);
  padding-top: calc(var(--card-pad) * 0.8);
}
.group-name,
.incident-kind,
.key-title {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.group-parts {
  padding: 0;
  list-style: none;
}
.part {
  padding-block: 0.875rem;
}
.part:last-child {
  padding-bottom: 0.25rem;
}
.part + .part {
  border-top: 1px solid var(--line);
}
.part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.part h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--tone) var(--soft-share), var(--surface));
  color: var(--tone);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.chip-mark {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* A part's 90 days. Each bar's height and pattern tell its state as well as
   its tone does. */
.strip {
  margin-top: 0.75rem;
  border-radius: 6px;
  touch-action: pan-y;
  cursor: default;
}
.strip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(1px, 0.3vw, 3px);
  height: 1.75rem;
}
.bar {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: var(--tone);
  transform-origin: bottom;
  transition:
    opacity 160ms ease-out,
    transform 220ms var(--ease);
}
.bar[data-state="working"] {
  height: 62%;
  background: color-mix(in oklab, var(--tone) 72%, var(--surface));
}
.bar[data-state="slow"] {
  height: 82%;
  background: repeating-linear-gradient(-45deg, var(--tone) 0 2px, color-mix(in oklab, var(--tone) 35%, var(--surface)) 2px 4px);
}
.bar[data-state="down"] {
  height: 100%;
}
.bar[data-state="maintenance"] {
  height: 62%;
  background: linear-gradient(to top, var(--tone) 0 62%, transparent 62% 76%, var(--tone) 76%);
}
.bar[data-state="none"] {
  height: 22%;
  background: var(--line-strong);
}
.strip[data-picking] .bar {
  opacity: 0.38;
}
.strip[data-picking] .bar[data-picked] {
  opacity: 1;
  transform: scaleY(1.14);
}
.readout {
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* Incidents and maintenance */
.incident {
  display: grid;
  gap: 0.375rem;
  padding: var(--card-pad);
  border-top: 3px solid var(--tone);
}
.incident[data-kind="incident"] {
  --tone: var(--danger);
}
.incident[data-kind="maintenance"] {
  --tone: var(--info);
}
.incident-kind {
  color: var(--tone);
}
.incident h3 {
  font: 600 1.25rem/1.25 var(--display-font);
  letter-spacing: -0.01em;
}
.incident-when,
.incident-parts {
  color: var(--muted);
  font-size: 0.9375rem;
}

.history,
.key {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.history h2 {
  margin-bottom: 1rem;
  font: 600 clamp(1.45rem, 1.2rem + 0.7vw, 1.9rem) / 1.15 var(--display-font);
  letter-spacing: -0.016em;
}
#history {
  display: grid;
  gap: 1rem;
}
.quiet {
  color: var(--muted);
}

.key {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.key-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}
.key-list li {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1;
}
.key-list .bar {
  flex: none;
  width: 0.4375rem;
}
.key-note {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Arrival, once, when the first readings are drawn */
.arrive {
  animation: arrive var(--arrive) var(--ease) both;
  animation-delay: calc(120ms + var(--i, 0) * 60ms);
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}