/* The status page. System fonts, no third-party request; light and dark follow the system.
   The colors are the site's Daylight and Midnight tokens; the red is new. */
:root {
  color-scheme: light dark;
  --page: #e9ecef;
  --surface: #fff;
  --border: #d2d6dc;
  --text: #0d1014;
  --quiet: #4a515a;
  --ok: #08794b;
  --late: #9a5600;
  --down: #b3261e;
  --none: #68707a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #000;
    --surface: #0a0a0a;
    --border: #2a2a2a;
    --text: #f5f5f5;
    --quiet: #a3a3a3;
    --ok: #6bffb0;
    --late: #ffc46b;
    --down: #ff8a80;
    --none: #6b6b6b;
  }
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font:
    1rem/1.4 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}
/* Numbers that change in place keep their width. Only on these lines, which never hold a
   part's name: in some system typefaces tabular numbers also widen the hyphen of "Snow-day". */
.more,
.upd,
.share,
.when {
  font-variant-numeric: tabular-nums;
}
/* With scripts off the page cannot fill in: only the line that says so is shown, and the
   footer does not explain bars that are not there. */
@media (scripting: none) {
  main,
  .how {
    display: none;
  }
}
/* The side gutters, of the page and inside each card, are 16 px at every text size, as on the
   website: larger text gets the room, not the margins. */
header,
main,
footer,
.noscript {
  max-inline-size: 44rem;
  margin-inline: auto;
  padding-inline: 16px;
}
/* Every layout below that sets things side by side asks how much room <main> has in text
   units, not how wide the screen is: with larger text the same screen holds fewer words, so
   the rows, the history's heads and the problems go back to one column as they would on a
   narrower phone. */
main {
  container-type: inline-size;
}
header {
  padding-block: 1.25rem 1rem;
}
h1 {
  display: flex;
  /* With very large text on a narrow screen "Status" goes under the name, never off the edge. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.6rem;
  margin: 0;
  font-size: 1.3rem;
  line-height: 2rem;
  letter-spacing: -0.015em;
}
.tile {
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
}
.brand {
  font-weight: 600;
}
.page {
  font-weight: 400;
  color: var(--quiet);
}
h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}
section {
  margin-block-end: 1.75rem;
}
section > h2,
.head {
  margin-block-end: 0.5rem;
}
p,
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
}
.shape {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
}
.s-ok {
  color: var(--ok);
}
.s-late {
  color: var(--late);
}
.s-down {
  color: var(--down);
}
.s-unknown,
.s-wait,
.s-none,
.s-before {
  color: var(--none);
}

/* The banner. Its block size holds its longest copy (every part named, and "Could not
   refresh") at the room it has, so nothing moves when it fills; the shape and the words sit at
   its top. Its words keep at least 12rem: where that and the shape do not fit side by side
   (large text on a narrow phone), the shape goes above the words instead of squeezing them. */
.banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  align-content: flex-start;
  padding: 1rem 16px;
  min-block-size: 32.5rem;
}
/* Each step is the room, in rem, from which the longest copy takes fewer lines, and the size
   it takes there. scripts/shots.cjs checks the longest copy fits at every 2 px of room from
   8rem to 43rem. Under 18rem of room is larger text on a phone. */
@container (min-width: 10rem) {
  .banner {
    min-block-size: 25.25rem;
  }
}
@container (min-width: 11rem) {
  .banner {
    min-block-size: 24rem;
  }
}
@container (min-width: 12.75rem) {
  .banner {
    min-block-size: 22.5rem;
  }
}
@container (min-width: 13.5rem) {
  .banner {
    min-block-size: 19.5rem;
  }
}
@container (min-width: 14rem) {
  .banner {
    min-block-size: 18.25rem;
  }
}
@container (min-width: 15.25rem) {
  .banner {
    min-block-size: 16.75rem;
  }
}
@container (min-width: 16.625rem) {
  .banner {
    min-block-size: 15.75rem;
  }
}
@container (min-width: 17.75rem) {
  .banner {
    min-block-size: 14.25rem;
  }
}
@container (min-width: 20.75rem) {
  .banner {
    min-block-size: 12.75rem;
  }
}
@container (min-width: 22.625rem) {
  .banner {
    min-block-size: 11.25rem;
  }
}
@container (min-width: 28.375rem) {
  .banner {
    min-block-size: 10rem;
  }
}
@container (min-width: 29.125rem) {
  .banner {
    min-block-size: 8.5rem;
  }
}
.banner > div {
  flex: 1 1 12rem;
  min-inline-size: 0;
}
.banner .shape {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}
/* The answer is the largest text of the page at every text size the reader picks. */
.lead {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  /* No last line of one word. */
  text-wrap: balance;
}
/* A part's name, wherever it is drawn, and a problem's date, time or length: whole on a line
   wherever it fits on one, broken between its words only where it is wider than the line. */
.nm,
.nb {
  display: inline-block;
}
.lead + .lead {
  margin-block-start: 0.25rem;
}
.more {
  margin-block-start: 0.25rem;
  color: var(--quiet);
  font-size: 0.875rem;
  line-height: 1.25rem;
  /* Two short lines of near one length, never a word alone. */
  text-wrap: balance;
}

/* The script marks <main> "on" when it starts. If it has not 10 seconds after the page opened
   (it did not load, or scripts are off in a browser that does not know the rule above), the
   banner stops saying "Checking" and says the page did not finish loading, in the same place,
   and the rows stop saying "Checking" too. Nothing moves: both lines share one grid cell. */
.swap {
  display: grid;
}
.swap > * {
  grid-area: 1 / 1;
}
.stuck {
  visibility: hidden;
}
main.on .stuck {
  display: none;
}
main:not(.on) .stuck {
  animation: shown 0.01s 10s forwards;
}
main:not(.on) .swap > :not(.stuck),
main:not(.on) .state {
  animation: gone 0.01s 10s forwards;
}
@keyframes shown {
  to {
    visibility: visible;
  }
}
@keyframes gone {
  to {
    visibility: hidden;
  }
}

/* Right now. A row's own sentence never changes; only the "Updated" line fills in. */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.75rem 16px;
  border-block-start: 1px solid var(--border);
}
.row:first-child {
  border-block-start: 0;
}
.name {
  font-weight: 600;
  line-height: 1.5rem;
}
.state {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /* One line at every usual size; it wraps only where it does not fit (very large text), in
     two lines of near one length. */
  min-block-size: 1.5rem;
  text-wrap: balance;
}
.says,
.upd {
  color: var(--quiet);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.says {
  /* One short line, or two of near one length (large text on a narrow phone). */
  text-wrap: balance;
  /* An address is a box (see .nb) that breaks only at its dot, and only where it is wider
     than the whole line; a word wider than the line breaks inside rather than run off. */
  overflow-wrap: break-word;
}
.upd {
  min-block-size: 1.25rem;
}

/* Last 90 days. */
.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
}
.key {
  display: grid;
  /* Two columns, or one when large text would wrap a name in two. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  column-gap: 0.9rem;
  flex: 1 0 100%;
  color: var(--quiet);
  font-size: 0.8125rem;
  line-height: 1.5rem;
}
.key span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  /* Where a name wraps (very large text), two lines of near one length. */
  text-wrap: balance;
}
.key .shape {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}
/* The fifth and longest name has a row of its own, so it does not wrap at 320 px. */
.key span:last-child {
  grid-column: 1 / -1;
}
.hist {
  padding: 0.75rem 16px 0.5rem;
  border-block-start: 1px solid var(--border);
}
.hist:first-child {
  border-block-start: 0;
}
.hist-top {
  display: grid;
}
.share {
  min-block-size: 2.5rem;
  color: var(--quiet);
  font-size: 0.875rem;
  line-height: 1.25rem;
  /* No last line of one word. */
  text-wrap: pretty;
}
.bars {
  display: grid;
  grid-template-columns: repeat(90, 1fr);
  align-items: end;
  gap: 1px;
  block-size: 2rem;
  margin-block-start: 0.375rem;
  touch-action: pan-y;
}
.bar {
  block-size: 100%;
  border-radius: 1px;
}
.b-ok {
  background: var(--ok);
}
.b-late {
  background: var(--late);
}
.b-down {
  background: var(--down);
}
.b-none {
  block-size: 0.5rem;
  background: var(--none);
}
.b-before,
.b-wait {
  block-size: 2px;
  background: var(--border);
}
/* A day whose first check is not due: nothing is drawn, and it can still be picked. */
.b-yet {
  block-size: 2px;
}
.bar.on {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}
/* "90 days ago" under the first bar and "Today" under the last, at least half a line apart.
   Where both do not fit on one line (very large text on a narrow phone), "Today" goes to the
   next line and still ends under the last bar. */
.axis {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  margin-block-start: 0.25rem;
  color: var(--quiet);
  font-size: 0.75rem;
  line-height: 1.125rem;
}
.axis span:last-child {
  margin-inline-start: auto;
}
.note {
  min-block-size: 4.5rem;
  margin-block-start: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  /* No last line of one word. */
  text-wrap: pretty;
}
.note.hint {
  color: var(--quiet);
}

/* Problems. Three slots and the button row are always there. */
.slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 0.125rem;
  min-block-size: 9rem;
  padding: 0.75rem 16px;
  border-block-start: 1px solid var(--border);
}
.slot:first-child {
  border-block-start: 0;
}
.what {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-wrap: pretty;
}
.when {
  color: var(--quiet);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-wrap: pretty;
}
.probs.none {
  display: grid;
  place-items: center;
  /* Three slots. */
  min-block-size: 27rem;
  padding: 1rem 16px;
  color: var(--quiet);
  text-align: center;
  text-wrap: balance;
}
.more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 3.5rem;
  border-block-start: 1px solid var(--border);
}
.more-row:empty {
  border-color: transparent;
}
button {
  min-block-size: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover {
  border-color: var(--quiet);
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

footer {
  padding-block: 0 2.5rem;
  color: var(--quiet);
  font-size: 0.875rem;
}
footer p {
  /* No last line of one word. */
  text-wrap: pretty;
}
/* One sentence: short lines of near one length. */
.privacy {
  text-wrap: balance;
}
footer p + p {
  margin-block-start: 0.75rem;
}
.home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.home span {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.noscript {
  padding-block-end: 1rem;
}
.sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 21.75rem of room is a 380 px screen at the usual text size; 38rem is 640 px. */
@container (min-width: 21.75rem) {
  .share {
    min-block-size: 1.25rem;
  }
  .note {
    min-block-size: 3.375rem;
  }
  .slot {
    min-block-size: 7.5rem;
  }
  .probs.none {
    min-block-size: 22.5rem;
  }
}
@container (min-width: 38rem) {
  .banner {
    gap: 1rem;
    padding: 1.25rem 20px;
    min-block-size: 9rem;
  }
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
  }
  .state,
  .upd {
    justify-self: end;
  }
  .key {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
  }
  .key span {
    white-space: nowrap;
  }
  .hist-top {
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
  }
  .share {
    text-align: end;
  }
  .bars {
    gap: 2px;
  }
  .note {
    min-block-size: 2.25rem;
  }
  /* The time column takes what it needs up to 19rem and never more than 45% of the row, so
     the problem's own sentence always keeps the larger part. */
  .slot {
    grid-template-columns: minmax(0, 1fr) fit-content(45%);
    column-gap: 1.5rem;
    min-block-size: 4.5rem;
  }
  .when {
    max-inline-size: 19rem;
    text-align: end;
  }
  .probs.none {
    min-block-size: 13.5rem;
  }
}