.latency-page { max-width: none; }
body:has(.latency-page) { max-width: 64rem; }

.latency-page {
  --u-ns: #1f6e8c;
  --u-us: #2c7f5e;
  --u-ms: #a9760b;
  --u-s:  #9e3a24;
  --rule: #d7d7d7;
  --band: #f1f1f1;
  --card: #fff;
}
@media (prefers-color-scheme: dark) {
  .latency-page {
    --u-ns: #63b4d1;
    --u-us: #5cc09a;
    --u-ms: #d9a441;
    --u-s:  #e08060;
    --rule: #333;
    --band: #191919;
    --card: #161616;
  }
}
.u-ns { --c: var(--u-ns); }
.u-us { --c: var(--u-us); }
.u-ms { --c: var(--u-ms); }
.u-s  { --c: var(--u-s); }

.latency-page > header > p { color: var(--muted); max-width: 62ch; }

/* ---- hero scale ---- */
.hero { margin: 1.5rem 0 0.5rem; }
.hero svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero .axis { stroke: var(--fg); stroke-width: 1.4; }
.hero .grid { stroke: var(--rule); stroke-width: 1; }
.hero .grid.major { stroke: var(--muted); stroke-width: 1.2; }
.hero .stem { stroke: var(--c); stroke-width: 1; opacity: 0.55; }
.hero .dot { fill: var(--c); }
.hero .decade {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  fill: var(--muted);
  text-anchor: middle;
  stroke: var(--bg);
  stroke-width: 6px;
  paint-order: stroke fill;
}
.hero .pin { font-size: 13.5px; font-weight: 500; fill: var(--c); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  list-style: none;
  padding: 0.7rem 0 0;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.legend li::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  margin-right: 0.35rem;
}
.legend b { font-weight: 500; color: var(--fg); }

.stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
  margin: 0.7rem 0 0;
}

/* ---- framing prose ---- */
.intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2.4rem;
  padding: 1.6rem 0 2rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.6rem;
}
.intro h2 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.2rem; }
.intro p { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 56ch; }

/* ---- controls ---- */
.controls { margin: 0 0 1.6rem; }
.controls .search input {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.7rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 4px;
}
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.filters label {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.filters select {
  font: inherit;
  font-size: 0.8rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 4px;
  padding: 0.2rem 0.3rem;
}
.status { color: var(--muted); font-size: 0.8rem; margin: 0.8rem 0 0; }

/* ---- tables ---- */
.block { margin: 0 0 2.6rem; scroll-margin-top: 1rem; }
.block-head { border-top: 2px solid var(--fg); padding-top: 0.7rem; margin-bottom: 0.8rem; }
.block-head h2 { font-size: 1.3rem; margin: 0 0 0.2rem; }
.block-head p { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 70ch; }

.table {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 7.5rem 11rem minmax(0, 2.1fr) 3.4rem;
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }
/* Without JS, stripe by position. With it, stripe the rows filtering left
   behind, which :nth-child cannot see. */
.row:nth-child(even) { background: var(--band); }
.latency-page.js .row:nth-child(even) { background: transparent; }
.latency-page.js .row.alt { background: var(--band); }
.latency-page [hidden] { display: none !important; }
.row.head {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--band);
}
/* Decade labels sit at the same computed offsets as the pips below them, so
   the header reads as an axis rather than four evenly spaced words. */
.row.head .track {
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  text-transform: none;
}
.row.head .tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-style: normal;
}
.op { font-size: 0.9rem; line-height: 1.4; }
.val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c, var(--fg));
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.row.head .val { font-family: inherit; color: inherit; }
.track {
  position: relative;
  height: 11px;
  align-self: center;
  background: linear-gradient(to right, var(--rule) 0 100%) center / 100% 1px no-repeat;
}
.pip {
  position: absolute;
  top: 1px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--c);
}
.note { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.src { text-align: right; white-space: nowrap; }
a.ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--muted);
  text-decoration: none;
}
a.ref:hover { color: var(--accent); text-decoration: underline; }
.src .sep { font-size: 0.68rem; color: var(--muted); }

/* ---- rules of thumb ---- */
.rules { border-top: 2px solid var(--fg); padding-top: 0.7rem; margin: 0 0 2.6rem; }
.rules > h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2rem; }
.rule h3 { font-size: 0.92rem; font-weight: 600; margin: 0 0 0.25rem; }
.rule p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

/* ---- sources ---- */
.sources { border-top: 2px solid var(--fg); padding-top: 0.7rem; margin-bottom: 2rem; }
.sources > h2 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.sources > .lede { margin: 0 0 1.2rem; color: var(--muted); font-size: 0.88rem; max-width: 70ch; }
.sources ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.6rem; }
.sources li {
  display: flex;
  gap: 0.7rem;
  break-inside: avoid;
  margin: 0 0 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.sources li:target { background: var(--code-bg); outline: 6px solid var(--code-bg); border-radius: 2px; }
.sources .k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 1.1rem;
  padding-top: 0.15rem;
}
.sources a { font-size: 0.88rem; font-weight: 500; text-decoration: none; color: var(--fg); }
.sources a:hover { color: var(--accent); text-decoration: underline; }
.sources .fr {
  font-size: 0.68rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 0.3rem;
  white-space: nowrap;
}
.sources p { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

.provenance {
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 74ch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sources ol { columns: 1; }
  .row { grid-template-columns: minmax(0, 1.4fr) 7.5rem minmax(0, 1.8fr) 3rem; }
  .track, .row.head .track { display: none; }
}
@media (max-width: 40rem) {
  /* Nine pinned labels cannot survive a 390px scale-down, and every landmark
     they point at is a row in the tables below. */
  .hero { display: none; }
  .intro { grid-template-columns: 1fr; gap: 1.1rem; }
  .rules-grid { grid-template-columns: 1fr; }
  /* auto, not a fixed width: the widest values ("100 to 200 us") clip otherwise */
  .row { grid-template-columns: minmax(0, 1fr) auto; padding: 0.6rem 0.8rem; }
  .row .note { grid-column: 1 / -1; margin-top: 0.2rem; }
  .row .src { grid-column: 1 / -1; text-align: left; margin-top: 0.15rem; }
  .row.head .note, .row.head .src { display: none; }
}