/*
  Palette is drawn from the country Antelope actually sits in — basalt rimrock,
  sage, alkali dust — rather than generic dashboard neutrals. The four level
  colors stay semantic on purpose: inventing a novel hue for "GO NOW" would be
  novelty at the cost of legibility.
*/
:root {
  --basalt:  #17191A;
  --ash:     #212525;
  --ash-hi:  #2C3130;
  --sage:    #8A9284;
  --bleach:  #E8E4DA;

  --clear:   #6E9B7A;
  --ready:   #E2B33C;
  --set:     #E2762F;
  --gonow:   #D93A2B;

  --now: var(--sage);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

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

body {
  margin: 0;
  /* viewport-fit=cover + black-translucent means the web view extends under the
     status bar and home indicator, so EVERY inset has to be paid back here.
     Miss the top one and the header renders behind the iOS clock. */
  padding:
    env(safe-area-inset-top)
    calc(var(--gutter) + env(safe-area-inset-right))
    calc(2rem + env(safe-area-inset-bottom))
    calc(var(--gutter) + env(safe-area-inset-left));
  background: var(--basalt);
  color: var(--bleach);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* Fill the screen so the fine print sits at the bottom instead of leaving a
     dead gap under it on a tall phone. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body[data-state="clear"]   { --now: var(--clear); }
body[data-state="1"]       { --now: var(--ready); }
body[data-state="2"]       { --now: var(--set); }
body[data-state="3"]       { --now: var(--gonow); }
body[data-state="stale"]   { --now: var(--sage); }

main {
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- header ------------------------------------------------------------- */

.bar {
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0 1rem;
  border-bottom: 1px solid var(--ash-hi);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.place { color: var(--bleach); }
.src { color: var(--sage); }

/* --- the ladder --------------------------------------------------------- */

.ladder-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 5vw, 2rem);
  align-items: center;
  padding: clamp(2rem, 9vw, 3.5rem) 0 clamp(1.5rem, 6vw, 2.5rem);
}

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: clamp(5.75rem, 25vw, 7rem);
  flex: none;
}

/* Grid children default to min-width:auto, which lets the oversized display
   type blow the column out rather than wrap. */
.readout { min-width: 0; }

.rung {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: clamp(2.5rem, 9vw, 3.25rem);
  padding: 0 0 0 0.6rem;
  /* Each rung carries a trace of its own severity colour even when inactive, so
     the ladder reads as a scale rather than four identical grey boxes. */
  background: color-mix(in srgb, var(--rung-color) 8%, var(--ash));
  border-left: 3px solid color-mix(in srgb, var(--rung-color) 45%, var(--ash-hi));
  /* Explicit dimmed colour beats a blanket opacity here — opacity multiplied
     against 9px sage type made the inactive rung labels unreadable. */
  color: color-mix(in srgb, var(--sage) 82%, var(--basalt));
  transform-origin: left center;
}

.rung .num {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  min-width: 0.9em;
}

.rung .rname {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
}

/* Rungs above the current level stay visible but recede — you can see how much
   worse it can get without them competing with where you actually are. */
.rung[data-active="true"] {
  background: color-mix(in srgb, var(--rung-color) 26%, var(--ash));
  border-left-color: var(--rung-color);
  border-left-width: 5px;
  padding-left: calc(0.6rem - 2px);
  color: var(--bleach);
}
.rung[data-active="true"] .num { color: var(--rung-color); }
.rung[data-rung="3"] { --rung-color: var(--gonow); }
.rung[data-rung="2"] { --rung-color: var(--set); }
.rung[data-rung="1"] { --rung-color: var(--ready); }
.rung[data-rung="0"] { --rung-color: var(--clear); }

/* --- readout ------------------------------------------------------------ */

.eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.state-word {
  margin: 0;
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(2.75rem, 13vw, 4.25rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--now);
  text-wrap: balance;
}

.detail {
  margin: 0.75rem 0 0;
  color: var(--sage);
  font-size: 0.9375rem;
}

.zones {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.zones li {
  /* Each zone carries its own level colour — using the page-wide --now would
     paint a Level 2 zone red just because a Level 3 exists elsewhere. */
  border-left: 2px solid var(--sage);
  padding-left: 0.7rem;
  font-size: 0.875rem;
}
.zones li[data-rank="3"] { border-left-color: var(--gonow); }
.zones li[data-rank="2"] { border-left-color: var(--set); }
.zones li[data-rank="1"] { border-left-color: var(--ready); }
.zones .code {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--bleach);
}
.zones .lvl { color: var(--sage); }

/* --- freshness ---------------------------------------------------------- */

.freshness {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--ash-hi);
  border-bottom: 1px solid var(--ash-hi);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--sage);
}
.freshness .dot {
  width: 7px; height: 7px; border-radius: 50%;
  /* Tracks data age, not danger — a green dot beside "GO NOW" reads as
     reassurance it has no business giving. */
  background: var(--sage);
  flex: none;
}
.freshness[data-stale="true"] { color: var(--ready); }
.freshness[data-stale="true"] .dot { background: var(--ready); }

/* --- actions ------------------------------------------------------------ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.5rem 0 0;
}

.btn {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  border-radius: 2px;
  border: 1px solid var(--ash-hi);
  background: var(--ash);
  color: var(--bleach);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--ash-hi); }
.btn:focus-visible { outline: 2px solid var(--now); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: default; }

.btn.primary {
  background: var(--bleach);
  border-color: var(--bleach);
  color: var(--basalt);
  font-weight: 600;
}
.btn.primary:hover { background: #fff; }

.btn.quiet { background: none; color: var(--sage); }

.note {
  flex-basis: 100%;
  margin: 0.35rem 0 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: var(--sage);
}
.note[data-tone="bad"] { color: var(--set); }
.note[data-tone="good"] { color: var(--clear); }

/* --- install ------------------------------------------------------------ */

.install {
  margin-top: 1.75rem;
  padding: 1.1rem 1.2rem;
  background: var(--ash);
  border-left: 3px solid var(--ready);
}
.install h2 {
  margin: 0 0 0.4rem;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
}
.install p { margin: 0; color: var(--sage); font-size: 0.9375rem; }
.steps {
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  color: var(--sage);
  font-size: 0.9375rem;
}
.steps li { margin-bottom: 0.3rem; }
.steps strong { color: var(--bleach); font-weight: 600; }

/* --- fine print --------------------------------------------------------- */

.fine {
  margin-top: auto;
  padding-top: 2.25rem;
  border-top: 1px solid var(--ash-hi);
  color: var(--sage);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.fine p { margin: 0 0 0.6rem; }
.fine a { color: var(--bleach); text-decoration: underline; text-underline-offset: 2px; }

/* --- motion ------------------------------------------------------------- */

@keyframes rung-in {
  from { opacity: 0; transform: scaleX(0.9); }
}
body[data-ready="true"] .rung {
  animation: rung-in 260ms ease-out backwards;
}
.rung:nth-child(1) { animation-delay: 90ms; }
.rung:nth-child(2) { animation-delay: 60ms; }
.rung:nth-child(3) { animation-delay: 30ms; }
.rung:nth-child(4) { animation-delay: 0ms; }

/* Urgency earns motion; an all-clear does not. */
@keyframes urgent {
  50% { background: color-mix(in srgb, var(--rung-color) 34%, var(--ash)); }
}
body[data-state="2"] .rung[data-active="true"],
body[data-state="3"] .rung[data-active="true"] {
  animation: urgent 1.6s ease-in-out infinite;
}

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

@media (max-width: 24rem) {
  .ladder-wrap { grid-template-columns: 1fr; }
  .ladder { flex-direction: column-reverse; width: 100%; }
  .rung { height: 2.25rem; }
}