/* The page is a delay board. One deep-blue board carries the numbers; everything
   around it stays quiet. Colour marks only what is not on time. */
:root {
  /* Both schemes, so that form controls and their pickers follow the dark palette below. */
  color-scheme: light dark;
  --board: #0e2f5a;
  --board-rule: #2b4b7a;
  --board-text: #ffffff;
  --board-quiet: #b4c6de;
  --delay: #ffc917;
  --stop: #d03b3b;
  --paper: #f4f6f9;
  --ink: #0b1f33;
  --quiet: #4f6177;
  --rule: #d5dce6;
  --link: #0b4aa8;
  --display: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
  --width: 60rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a1524;
    --ink: #e9eff7;
    --quiet: #a3b4c9;
    --rule: #25364d;
    --link: #9cc3ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.55 var(--text);
  /* A host name or a provider's long word breaks rather than pushing the page sideways. */
  overflow-wrap: break-word;
}
a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, .trace:focus-visible {
  outline: 3px solid var(--delay);
  outline-offset: 2px;
}
.skip { position: absolute; left: -100rem; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: 0.5rem 0.75rem; z-index: 2; }

.top, main, .foot {
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem 0;
}
.name {
  font: 700 1.25rem/1 var(--display);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.top nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.top nav a { color: var(--ink); text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
/* Hover only where a pointer can hover: a touch screen would keep the state after a tap. */
@media (hover: hover) {
  .top nav a:hover { border-bottom-color: var(--rule); }
}
.top nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* The headline is the reading itself, set like a line on a board. */
.verdict { padding-block: 3rem 2rem; }
.verdict h1 {
  margin: 0;
  max-width: 24ch;
  font: 700 clamp(2rem, 1.2rem + 3.6vw, 3.5rem)/1.04 var(--display);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.verdict.delayed h1 { border-left: 0.5rem solid var(--delay); padding-left: 1rem; }
/* The yellow edge hangs left of the text only where the page has a margin to hold it; on a
   narrower screen it would sit partly off the screen. */
@media (min-width: 62rem) {
  .verdict.delayed h1 { margin-left: -1.5rem; }
}
.lede { max-width: var(--measure); margin: 1.25rem 0 0; font-size: 1.125rem; color: var(--quiet); }
.service-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0.5rem 0 0; padding: 0; font-size: 1.125rem; }
.service-links a { display: inline-block; min-width: 2.75rem; padding-block: 0.6rem; }
.incidents { max-width: var(--measure); margin: 0.75rem 0 0; padding-left: 1.2rem; }

/* The visitor's own test. */
.check { margin-block: 0 1.75rem; }
.check-action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
button, select { font: inherit; }
.check button[data-check-start] {
  font: 700 1.125rem/1 var(--display);
  padding: 0.85rem 1.25rem;
  /* Dark on yellow in both schemes, like every other text on yellow here. */
  color: #0b1f33;
  background: var(--delay);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
@media (hover: hover) {
  .check button[data-check-start]:hover { background: #ffd445; }
}
.check button[data-check-start]:disabled { background: var(--rule); color: var(--quiet); cursor: progress; }
.check-progress { margin: 0; color: var(--quiet); min-height: 1.5em; }
.compare { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--quiet); }
.compare select, .compare button {
  padding: 0.35rem 0.6rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--quiet);
  border-radius: 4px;
}
/* The page draws the country list rather than the system, so that it has the button's height
   and outline everywhere; the system still opens its own picker. The arrow is two small
   triangles in the text colour. */
.compare select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem;
  background-color: var(--paper);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.95rem center, right 0.6rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.compare select { max-width: 100%; }
.compare button { cursor: pointer; }
/* Says what Set did, since the rows it marks may be off screen. Empty, it takes no room but
   stays in place, so that screen readers announce it when it is filled. */
.compare-note { margin: 0; color: var(--quiet); }
.compare-note:not(:empty) { margin-top: 0.5rem; }
.fine { max-width: var(--measure); font-size: 0.875rem; color: var(--quiet); }

/* The board. */
.board {
  margin-block: 0 2rem;
  background: var(--board);
  color: var(--board-text);
  border-radius: 6px;
  overflow: hidden;
}
.board-head { padding: 1.25rem 1.25rem 0.25rem; }
.board-head h2 { margin: 0; font: 700 1.5rem/1.1 var(--display); letter-spacing: 0.01em; }
.board-head p { max-width: var(--measure); margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--board-quiet); }
.board-official { padding-left: 0.75rem; border-left: 2px solid var(--board-quiet); }
.board-notice { margin: 0.75rem 1.25rem 0; padding: 0.6rem 0.8rem; background: var(--delay); color: #0b1f33; border-radius: 4px; font-weight: 600; }
/* Separate borders with no spacing: collapsed borders left hairline seams between cells. */
.board table { width: 100%; border-collapse: separate; border-spacing: 0; }
.board caption {
  caption-side: bottom;
  padding: 0.75rem 1.25rem 1rem;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--board-quiet);
}
.board th, .board td { padding: 0.7rem 0.75rem; text-align: left; vertical-align: middle; }
.board th:first-child, .board td:first-child { padding-left: 1.25rem; }
.board th:last-child, .board td:last-child { padding-right: 1.25rem; }
.board thead th { font: 400 0.8125rem/1.2 var(--text); color: var(--board-quiet); padding-block: 1rem 0.5rem; }
.board tbody th, .board tbody td { border-top: 1px solid var(--board-rule); }
.board tbody th { font: 700 1.125rem/1.2 var(--display); letter-spacing: 0.01em; }
.board tbody th a { color: inherit; }
.board .num { text-align: right; font: 700 1.125rem/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board thead .num { font: 400 0.8125rem/1.2 var(--text); }
.board .sub { display: block; font: 400 0.8125rem/1.3 var(--text); letter-spacing: 0; color: var(--board-quiet); }
.board .none { color: var(--board-quiet); font: 400 0.875rem/1.2 var(--text); }
.board tr.selected > * { background: #153a6c; }
.board tr.you > * { background: #ffffff; color: #0b1f33; }
.board tr.you .sub, .board tr.you .none { color: #4f6177; }
.board tr.you td[data-check-detail] { font-size: 0.8125rem; color: #4f6177; }

/* Readings: a mark and words, never colour alone. On time stays unmarked by colour. */
.reading { display: inline-flex; align-items: center; gap: 0.4rem; font: 700 1rem/1.2 var(--display); letter-spacing: 0.01em; white-space: nowrap; }
.reading .mark { flex: none; }
/* A reading's words may break inside a long name such as api.anthropic.com rather than run
   out of a narrow cell; this matters only on the narrowest or most zoomed screens. */
.reading > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.reading.delayed { background: var(--delay); color: #0b1f33; padding: 0.2rem 0.5rem; border-radius: 3px; }
.reading.noanswer { background: var(--stop); color: #ffffff; padding: 0.2rem 0.5rem; border-radius: 3px; }
/* On a board a reading may wrap, so that a long one never widens the table past the screen. */
.board .reading { white-space: normal; }
.board .reading.unknown { color: var(--board-quiet); font-weight: 400; }
.board tr.you .reading.unknown { color: #4f6177; }

/* The trace: one series, so no legend; the two guide lines are named in the text. */
/* A sideways drag on a touch screen moves along the trace; an upward or downward one still
   scrolls the page. */
.trace { display: block; overflow: visible; touch-action: pan-y; }
.trace-line { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trace-usual { stroke: var(--board-quiet); stroke-width: 1; }
.trace-slow { stroke: var(--board-quiet); stroke-width: 1; stroke-dasharray: 2 3; }
.trace-dot { fill: var(--delay); stroke: var(--board); stroke-width: 1.5; }
.trace-cursor { fill: #ffffff; stroke: var(--board); stroke-width: 2; }
.tip {
  position: absolute;
  z-index: 3;
  padding: 0.35rem 0.55rem;
  background: #ffffff;
  color: #0b1f33;
  border: 1px solid #0b1f33;
  border-radius: 4px;
  font-size: 0.8125rem;
  white-space: nowrap;
  pointer-events: none;
}

/* Plain sections under the board. */
.plain { max-width: var(--measure); margin-block: 2.5rem; }
.plain h2 { margin: 0 0 0.75rem; font: 700 1.5rem/1.15 var(--display); }
.plain p { margin: 0 0 0.9rem; }
.plain .reading { color: var(--ink); }
.plain .reading.unknown { color: var(--quiet); font-weight: 400; }
.plain .reading.delayed { color: #0b1f33; }
.plain .reading.noanswer { color: #ffffff; }
.components { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); }
/* A part's name such as "Claude Console (platform.claude.com)" sits beside its reading as a
   flex item, which would keep its longest word whole; here it may break. */
.components li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.components .reading { min-width: min(9.5rem, 100%); }
.periods { margin: 0 0 1rem; padding-left: 1.3rem; }
.periods li { margin-bottom: 0.75rem; }
.facts { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9375rem; }
.facts th, .facts td { padding: 0.6rem 0.75rem 0.6rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.facts thead th { font-weight: 400; color: var(--quiet); }
.facts tbody th { font: 700 1rem/1.3 var(--display); white-space: nowrap; }
.facts td:nth-child(2) { white-space: nowrap; }

/* Labels that repeat a column header inside its cell; shown only where a table stacks. */
.cell-label { display: none; }

/* Right now: our probes and the status pages, on two lines that never merge. */
.right-now { max-width: 46rem; margin-top: 1.5rem; border-top: 1px solid var(--rule); }
/* The front page: heading, the two lines and the chart. On a phone the chart usually comes
   before the two lines, since its rows carry the same readings (see below). */
.front .verdict { padding-bottom: 0; }
.front > .right-now { margin: 1.25rem 0 1.75rem; }
.now-line {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.now-line.delayed { box-shadow: inset 0.4rem 0 0 var(--delay); padding-left: 0.9rem; }
.now-line.noanswer { box-shadow: inset 0.4rem 0 0 var(--stop); padding-left: 0.9rem; }
.now-label { padding-top: 0.15rem; font-size: 0.875rem; color: var(--quiet); }
.now-text { display: flex; align-items: flex-start; gap: 0.5rem; font: 700 1.1875rem/1.35 var(--display); letter-spacing: 0.005em; }
.now-text .mark { flex: none; margin-top: 0.2rem; }
.now-text > span { min-width: 0; }
.now-line.unknown .now-text { font-weight: 400; color: var(--quiet); }

/* The key to the bands, on paper above the first board. */
.key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0 0 0.9rem; padding: 0; font-size: 0.8125rem; color: var(--quiet); }
.key li { display: inline-flex; align-items: center; gap: 0.45rem; }
.swatch { flex: none; overflow: hidden; border-radius: 2px; }

/* A service's day: one lane per source on one 24-hour axis, the present at the right. The
   reading colours are the board's: yellow and red mark what is not on time. */
.day { margin-block: 0 1.5rem; background: var(--board); color: var(--board-text); border-radius: 6px; overflow: hidden; }
.day-head { padding: 1.15rem 1.25rem 0.1rem; }
.day-head h2 { margin: 0; font: 700 1.75rem/1.1 var(--display); letter-spacing: 0.01em; }
.lanes { padding: 0.4rem 1.25rem 0.6rem; }
.lane { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 12.5rem; align-items: center; gap: 0.3rem 1rem; padding-block: 0.3rem; }
.lane.status:not(:first-child) { margin-top: 0.35rem; padding-top: 0.65rem; border-top: 1px solid var(--board-rule); }
.lane-name { margin: 0; font-size: 0.75rem; line-height: 1.25; color: var(--board-quiet); }
.lane-name .sub { display: block; font: 700 0.9375rem/1.2 var(--display); letter-spacing: 0.01em; color: var(--board-text); overflow-wrap: anywhere; }
.strip { display: block; width: 100%; height: 14px; border-radius: 2px; }
.track { fill: #1d426f; }
.seg.ontime { fill: #6f94c6; }
.seg.delayed { fill: var(--delay); }
.seg.noanswer { fill: #ff5c52; }
.seg.unstated { fill: #aebccd; }
.tick { stroke: var(--board); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lane-now { margin: 0; }
.lane-now .reading { white-space: normal; font-size: 0.9375rem; }
.day .reading.unknown { font-weight: 400; color: var(--board-quiet); }
.axis-row { padding-block: 0; }
.axis { position: relative; height: 1.1rem; margin: 0; font-size: 0.75rem; color: var(--board-quiet); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.axis span:nth-child(1) { left: 0; transform: none; }
.axis span:nth-child(2) { left: 25%; }
.axis span:nth-child(3) { left: 50%; }
.axis span:nth-child(4) { left: 75%; }
.axis span:nth-child(5) { right: 0; transform: none; }
/* Which times fit is decided by the axis's own width in units of its text, so a larger text
   setting or a zoomed page drops labels instead of piling them up. A label with a date is
   about 6.3em wide; the widths below keep such labels apart. The label for 18 hours ago
   goes first, so that the first label has room; then the one for 6 hours ago; then noon's. */
.axis { container-type: inline-size; }
@container (max-width: 39.5em) {
  .axis span:nth-child(2) { display: none; }
}
@container (max-width: 27em) {
  .axis span:nth-child(4) { display: none; }
}
@container (max-width: 20em) {
  .axis span:nth-child(3) { display: none; }
}
@container (max-width: 9.5em) {
  .axis span:nth-child(1) { display: none; }
}

/* The lanes in words, closed until asked for. */
.lane-words { padding: 0 1.25rem 0.5rem; font-size: 0.9375rem; }
.lane-words summary { min-height: 2.75rem; padding-block: 0.6rem; color: var(--board-quiet); cursor: pointer; }
.lane-words[open] summary { color: var(--board-text); }
.lane-words ul { max-width: var(--measure); margin: 0 0 0.5rem; padding-left: 1.2rem; }
.lane-words li { margin-bottom: 0.4rem; }

.day-notes {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem 2rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--board-rule);
  font-size: 0.9375rem;
}
.day-notes h3 { margin: 0 0 0.6rem; font: 700 1rem/1.2 var(--display); letter-spacing: 0.01em; color: var(--board-quiet); }
.day a { color: #a9cbff; }
.day .note { max-width: var(--measure); margin: 0 0 0.5rem; color: var(--board-quiet); }
.notices { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.notices li { padding: 0 0 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--board-rule); }
.notices li:last-child { padding-bottom: 0; border-bottom: 0; }
.notices p { margin: 0 0 0.35rem; }
.notice-name { font: 700 1.0625rem/1.3 var(--display); letter-spacing: 0.005em; }
.notice-kind {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0 0.4rem;
  border: 1px solid var(--board-quiet);
  border-radius: 3px;
  font: 400 0.75rem/1.4 var(--text);
  color: var(--board-quiet);
  vertical-align: 0.15em;
}
.notices li.open .notice-kind { background: var(--delay); border-color: var(--delay); color: #0b1f33; }
.notices blockquote { margin: 0.5rem 0; padding-left: 0.75rem; border-left: 2px solid var(--board-quiet); }
.notices blockquote .cite { font-size: 0.8125rem; color: var(--board-quiet); }
.ours { color: var(--board-quiet); }
.day .periods { margin: 0; padding-left: 1.2rem; }
.day .periods li { margin-bottom: 0.6rem; }

/* The front page's chart: every service's day, one row each, two bands per row. The service's
   name is the row's link, stretched over the whole row. */
.overview { margin-block: 0 0.75rem; background: var(--board); color: var(--board-text); border-radius: 6px; overflow: hidden; }
.overview-rows { list-style: none; margin: 0; padding: 0; }
.overview-row {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 14.5rem;
  grid-template-areas: "name status status-now" "name timing timing-now" ". notes notes";
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--board-rule);
}
.overview-axis { grid-template-areas: ". axis ."; padding-block: 0.8rem 0; border-top: 0; }
.overview-axis .axis { grid-area: axis; }
.overview-name { grid-area: name; align-self: start; margin: 0; font: 700 1.375rem/1.1 var(--display); letter-spacing: 0.01em; }
/* A tap flashes light, as the row does under a hovering pointer, instead of the system's dark grey. */
.overview-name a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12); }
.overview-name a::after { content: ""; position: absolute; inset: 0; }
.overview-name a:focus-visible { outline: none; }
.overview-name a:focus-visible::after { outline: 3px solid var(--delay); outline-offset: -3px; }
/* A row is lit while it is pressed, and under a pointer that can hover. The row of times above
   the rows is not a link and stays unlit. */
.overview-rows .overview-row:active { background: #143a6a; }
@media (hover: hover) {
  .overview-rows .overview-row:hover { background: #143a6a; }
  .overview-rows .overview-row:hover .overview-name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
}
.overview-name .sub { display: block; margin-top: 0.25rem; font: 400 0.75rem/1.2 var(--text); letter-spacing: 0; color: var(--board-quiet); }
.overview .strip { height: 12px; }
.band-status { grid-area: status; }
.band-timing { grid-area: timing; }
.band-status-now { grid-area: status-now; }
.band-timing-now { grid-area: timing-now; }
/* On a narrow or zoomed screen the reading moves under its label rather than past the row. */
.band-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; margin: 0; }
.band-name { flex: none; width: 5.25rem; font-size: 0.75rem; color: var(--board-quiet); }
/* The reading stays beside its label, wrapping its own words, until less than 6rem is left for
   it; only then does it move under the label. */
.band-now .reading { flex: 1 1 6rem; min-width: 0; white-space: normal; font-size: 0.9375rem; }
.overview .reading.unknown { font-weight: 400; color: var(--board-quiet); }
.overview-notes { grid-area: notes; margin: 0.1rem 0 0; font-size: 0.8125rem; color: var(--board-quiet); }
.overview-notes.delayed { color: var(--delay); }
.overview-lede { margin: 0 0 0.6rem; font-size: 0.9375rem; }

.foot { margin-top: 3rem; padding-block: 1.5rem 3rem; border-top: 1px solid var(--rule); color: var(--quiet); font-size: 0.875rem; }
.foot p { max-width: var(--measure); margin: 0 0 0.5rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

/* From tablets down: each band runs the full width under its own label and present reading.
   Beside a label and a reading it would be too short for the five times on the axis. */
@media (max-width: 56rem) {
  .lane { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.35rem 0.75rem; }
  .lane-name { grid-column: 1; grid-row: 1; }
  .lane-now { grid-column: 2; grid-row: 1; }
  .lane .strip { grid-column: 1 / -1; grid-row: 2; }
  .axis-row > span { display: none; }
  .axis { grid-column: 1 / -1; }

  /* The chart: the name on its own line, then each band under its label and present reading. */
  .overview-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "status-now" "status" "timing-now" "timing" "notes";
    gap: 0.3rem;
  }
  .overview-axis { grid-template-areas: "axis"; padding-bottom: 0.4rem; }
  .overview-axis > span { display: none; }
  .overview-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin-bottom: 0.1rem; }
  .overview-name .sub { margin-top: 0; }
  .band-timing-now { margin-top: 0.4rem; }
  /* A reading that wraps keeps its label and its mark on its first line. */
  .band-now, .band-now .reading { align-items: flex-start; }
  .band-now .reading .mark { margin-top: 1px; }
}

@media (max-width: 40rem) {
  .verdict { padding-block: 2rem 1.5rem; }
  .board-head, .board caption { padding-inline: 0.9rem; }
  .reading { font-size: 0.9375rem; white-space: normal; }
  .facts td:nth-child(2) { white-space: normal; }

  /* A stacking table: one block per row, the row header on its own line, each cell labelled.
     The header row stays for screen readers only. */
  table.stack, table.stack tbody, table.stack caption { display: block; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1rem; }
  table.stack tbody th, table.stack tbody td { display: block; padding: 0; border: 0; }
  table.stack .cell-label { display: block; margin-bottom: 0.2rem; font: 400 0.75rem/1.2 var(--text); letter-spacing: 0; }
  .facts.stack tbody tr { padding-block: 0.75rem; border-bottom: 1px solid var(--rule); }
  .facts.stack tbody th { white-space: normal; }
  .facts.stack .cell-label { color: var(--quiet); }

  /* A country board on a phone: each row is a block of two lines, the place and the reading on
     the first, the usual and present times and the last 24 hours on the second, so the trace
     stays on the page. The header row stays for screen readers only, and each time names its
     column; the table's roles in service.html keep it a table for them. The caption moves
     below the rows, where the table puts it. */
  .board table { display: flex; flex-direction: column; }
  .board tbody { display: block; }
  .board caption { display: block; order: 1; }
  .board thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .board tbody tr {
    display: grid;
    grid-template-columns: 4rem 4rem minmax(0, 1fr);
    grid-template-areas: "name name reading" "usual now trace";
    /* The labels of the second line sit on one line. */
    align-items: start;
    gap: 0.45rem 0.75rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--board-rule);
  }
  /* A display rule would otherwise show the visitor's row before the test has run. */
  .board tbody tr[hidden] { display: none; }
  .board tbody th, .board tbody td,
  .board tbody th:first-child, .board tbody td:first-child,
  .board tbody th:last-child, .board tbody td:last-child { display: block; padding: 0; border-top: 0; }
  .board tbody th { grid-area: name; align-self: start; font-size: 1rem; }
  .board tbody td:nth-child(2) { grid-area: usual; }
  .board tbody td:nth-child(3) { grid-area: now; }
  .board tbody .trace-col { grid-area: trace; }
  .board tbody td:last-child { grid-area: reading; justify-self: end; align-self: start; text-align: right; }
  .board tbody .num { text-align: left; font-size: 1rem; }
  .board tbody td:nth-child(2)::before, .board tbody td:nth-child(3)::before, .board tbody tr:not(.you) .trace-col::before {
    display: block;
    margin-bottom: 0.15rem;
    font: 400 0.75rem/1.2 var(--text);
    letter-spacing: 0;
    color: var(--board-quiet);
  }
  /* The second value is the text for screen readers: none, since the header row names the column. */
  .board tbody td:nth-child(2)::before { content: "Usual"; content: "Usual" / ""; }
  .board tbody td:nth-child(3)::before { content: "Now"; content: "Now" / ""; }
  .board tbody tr:not(.you) .trace-col::before { content: "Last 24 hours"; content: "Last 24 hours" / ""; }
  .board tbody tr.selected { background: #153a6c; }
  .board tbody tr.you { background: #ffffff; color: #0b1f33; }
  .board tbody tr.you td::before { color: #4f6177; }
  /* A trace narrower than its drawing keeps its height, so it stays a whole target for a finger;
     the drawing shrinks inside it. */
  .board .trace { max-width: 100%; height: 30px; }

  .now-line { grid-template-columns: minmax(0, 1fr); }
  .now-text { font-size: 1.0625rem; }
  .day-head, .lanes, .day-notes, .lane-words { padding-inline: 0.9rem; }
  .lane-now .reading { font-size: 0.875rem; }
  .day-notes { grid-template-columns: minmax(0, 1fr); }

  /* The chart comes before the two lines, so that more of it is on the first screen. When
     either line names trouble, the two lines stay above it: the row of the service in trouble
     may be below the first screen. */
  .front { display: flex; flex-direction: column; }
  .front .verdict { padding-block: 1.25rem 0.9rem; }
  .front > .right-now { order: 1; margin: 1.25rem 0 0.5rem; }
  .front.trouble > .right-now { order: 0; margin: 0 0 1.25rem; }
  .top { padding-top: 1rem; }
  .top nav { gap: 0.25rem 0.8rem; font-size: 0.9375rem; }

  .overview-row { padding: 0.6rem 0.9rem; }
  .overview-name { font-size: 1.25rem; }
  .band-now .reading { font-size: 0.875rem; }
}
/* The narrowest phones, and a phone with its page zoomed: each lane's label and reading each
   get half the width, and the board's trace gets a line of its own. */
@media (max-width: 22.5rem) {
  /* Room for a whole host name such as api.anthropic.com beside its reading. */
  .lane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lane-name .sub { font-size: 0.8125rem; }
  .reading.delayed, .reading.noanswer { padding-inline: 0.35rem; }
}
@media (max-width: 20rem) {
  .board tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name reading" "usual now" "trace trace"; }
}
/* A phone with its page zoomed far: lanes and board rows become one column each. */
@media (max-width: 17.5rem) {
  .lane { grid-template-columns: minmax(0, 1fr); }
  .lane-name, .lane-now, .lane .strip { grid-column: 1; }
  .lane-now { grid-row: 2; }
  .lane .strip { grid-row: 3; }
  .board tbody tr { grid-template-areas: "name name" "reading reading" "usual now" "trace trace"; }
  .board tbody td:last-child { justify-self: start; text-align: left; }
}
/* Touch screens: every link and control gets a hit area at least 44 px each way, Apple's
   guidance for touch. Links get it from an invisible layer that moves nothing on the page; a
   link in a sentence becomes one box, so that it never splits across two lines. The rows of
   the header are spaced so that the name's area and the page links' areas do not meet. A trace
   gets room above and below its drawing, and the controls of the visitor's test grow. */
@media (pointer: coarse) {
  .name, .top nav a, .key a, .notices a, .foot a, .lede a, .plain a { position: relative; }
  .name::before, .top nav a::before, .key a::before, .notices a::before, .foot a::before, .lede a::before, .plain a::before {
    content: "";
    position: absolute;
    inset: -0.75rem -0.5rem;
  }
  .top { row-gap: 1.2rem; }
  .top nav { row-gap: 0.8rem; }
  .top nav a::before { inset: -0.4rem; }
  .notices a::before { inset: -0.85rem -0.5rem; }
  /* As one box a link can no longer wrap at its spaces, so a long one, such as an email
     address on enlarged text, may break anywhere rather than run off the screen. */
  .foot a, .lede a, .notices a, .plain a { display: inline-block; overflow-wrap: anywhere; }
  .foot a::before, .lede a::before, .plain a::before { inset: -0.75rem -0.25rem; }
  .foot-links a::before { inset: -0.75rem -0.4rem; }
  .foot-links { row-gap: 1.5rem; padding-block: 0.5rem; }
  .plain li + li { margin-top: 0.75rem; }
  .trace { box-sizing: content-box; padding-block: 7px; }
  .compare select, .compare button { min-height: 2.75rem; }
  .compare button { min-width: 2.75rem; }
}
@media (forced-colors: active) {
  .reading.delayed, .reading.noanswer { border: 1px solid; }
  .trace-dot { stroke: CanvasText; }
}