/* Palette is checked against WCAG 2.1 contrast minimums on the surface each
   token is actually used on. Worst text pairing on the page is 6.78:1, which
   clears AA (4.5:1) for body text; most pairings clear AAA (7:1). */
:root {
  --ink: #f7f8fa; /* 16.0:1 on card */
  --ink-dim: #b9c1cf; /* 9.4:1 on card  - labels, reason text */
  --ink-faint: #9ba4b4; /* 6.8:1 on card  - detail lines, footnotes */
  --ground: #0f1117;
  --card: #191c25;
  --card-edge: #394050;
  --yes: #4ade8b; /* 9.8:1 on card */
  --no: #ff8087; /* 7.0:1 on card  - legible at body size, not just display size */
  --off: #b9c1cf; /* 9.4:1 on card */
  --radius: 18px;
  --week-days-height: 2rem;
  --week-days-gap: 0.85rem;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: clamp(1.5rem, 5vw, 4rem) 1rem calc(3rem + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  background-image: radial-gradient(ellipse 80% 60% at 50% -10%, #1b1f2c 0%, transparent 70%);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 62rem;
  margin: 0 auto;
}

/* Available to screen readers, removed from the visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.masthead {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.masthead h1 {
  margin: 0;
  font-size: clamp(1.5rem, 5.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

.subtitle {
  margin: 0.6rem 0 0;
  color: var(--ink-dim);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.grid[aria-busy="true"] {
  opacity: 0.35;
}

.panel {
  display: flex;
  flex-direction: column;
  /* Top-aligned, not centered: the two upper panels hold different amounts of
     content, and centering floated their headings and figures to different
     heights. */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
}

.panel--next {
  justify-content: center;
}

.panel--next {
  grid-column: 1 / -1;
}

/* Reserve two lines so a heading that wraps in one panel but not the other
   can't knock the two big figures out of alignment at middling widths. */
.panel--answer .panel__label,
.panel--count .panel__label {
  min-height: 2.8em;
}

.panel__label {
  margin: 0 0 0.75rem;
  color: var(--ink-dim);
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Hugs its own content so the day chips centre over the word, not the panel. */
.answer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  max-width: 100%;
}

.week-days {
  display: flex;
  gap: 0.4rem;
  height: var(--week-days-height);
  margin-bottom: var(--week-days-gap);
}

.week-days__day {
  display: grid;
  place-items: center;
  width: var(--week-days-height);
  height: var(--week-days-height);
  border: 1px solid color-mix(in srgb, var(--yes) 45%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--yes) 12%, transparent);
  color: var(--yes);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
}

.week-days__day--lost {
  color: var(--no);
  border-color: color-mix(in srgb, var(--no) 45%, transparent);
  background: color-mix(in srgb, var(--no) 12%, transparent);
  text-decoration: line-through;
}

/* Matches the chip row opposite it, keeping both figures on one baseline. */
.panel--count .panel__figure {
  margin-top: calc(var(--week-days-height) + var(--week-days-gap));
}

.panel__answer,
.panel__figure {
  margin: 0;
  font-size: clamp(3.5rem, 15vw, 8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.panel__figure {
  font-variant-numeric: tabular-nums;
}

.panel--answer[data-state="yes"] .panel__answer {
  color: var(--yes);
}

.panel--answer[data-state="no"] .panel__answer {
  color: var(--no);
}

.panel--answer[data-state="off"] .panel__answer {
  color: var(--off);
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.panel__figure--date {
  font-size: clamp(1.35rem, 5vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.panel__date {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.panel__detail {
  margin: 0.85rem 0 0;
  color: var(--ink-faint);
  font-size: clamp(0.85rem, 2vw, 0.9rem);
}

.panel__reasons {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.panel__reasons li {
  color: var(--ink-dim);
  font-size: clamp(0.85rem, 2vw, 0.9rem);
  line-height: 1.4;
}

.reasons__day {
  display: block;
  color: var(--no);
  font-weight: 700;
}

/* Documentation, not fine print: readable body type rather than the faint,
   shrunken treatment the colophon below still gets. */
.docs {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--card-edge);
  color: var(--ink-dim);
  font-size: clamp(0.92rem, 2vw, 1rem);
  line-height: 1.65;
}

/* The dl keeps its default display: changing it to flex or grid drops the list
   semantics in Safari/VoiceOver, which is the reason for using a dl at all. */
.glossary {
  margin: 0;
}

.glossary dt {
  color: var(--ink);
  font-weight: 700;
}

.glossary dd {
  margin: 0.15rem 0 0;
  max-width: 46rem;
  text-wrap: pretty;
}

/* Paragraph spacing lives here rather than in stacked <br>s, so it is tunable
   and each paragraph can rebalance its own last line. */
.glossary dd p {
  margin: 0;
}

.glossary dd p + p {
  margin-top: 0.7em;
}

.glossary dd + dt {
  margin-top: 0.9rem;
}

.colophon {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--card-edge);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--ink-faint);
  font-size: clamp(0.82rem, 1.8vw, 0.88rem);
  line-height: 1.6;
}

.colophon p {
  margin: 0;
}

@media (max-width: 40rem) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel--next {
    grid-column: auto;
  }

  /* Stacked, the panels have nothing beside them to line up with, so the two
     reservations that hold the figures on a shared baseline become dead space:
     the two-line heading allowance, and the gap standing in for the chip row
     the counter panel doesn't have. */
  .panel--answer .panel__label,
  .panel--count .panel__label {
    min-height: 0;
  }

  .panel--count .panel__figure {
    margin-top: 0;
  }
}

/* Readers who ask the OS for more contrast get pure-white body text and
   brighter accents; every pairing below clears AAA. */
@media (prefers-contrast: more) {
  :root {
    --ink: #ffffff;
    --ink-dim: #e3e8ef;
    --ink-faint: #d3dae4;
    --ground: #000000;
    --card: #14171f;
    --card-edge: #7b8494;
    --yes: #7df0ac;
    --no: #ffb2b7;
    --off: #e3e8ef;
  }

  body {
    background-image: none;
  }
}

/* Windows High Contrast and similar: the OS supplies the colors, so just make
   sure the panel boundaries and the answer survive the override. */
@media (forced-colors: active) {
  .panel {
    border-color: CanvasText;
  }

  .grid[aria-busy="true"] {
    opacity: 1;
  }
}