/* Latency as measured (index.html #latency): the heading, a line on searches at
   once, a figure per mode and how they were measured. Tokens first, then layout.
   The section keeps the .reach class for its place on the page and its reveal
   in motion.js; these rules replace the map layout of styles.css. */
.speed{
  --speed-gap: clamp(12px, 1.8vw, 20px);
  --speed-pad: clamp(20px, 2.4vw, 30px);
  --speed-radius: 18px;
  --speed-num: clamp(44px, 4.9vw, 68px);
  --speed-unit: .36em;
  --speed-label: 500 11px/1.3 "DM Mono", monospace;
  --speed-fast: var(--coral);
  --speed-standard: var(--purple);
  --speed-deep: #b07a00;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
}
:root[data-theme=dark] .speed{--speed-deep:#e8b730}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .speed{--speed-deep:#e8b730}}
.speed-lead{max-width:400px;margin:26px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
.speed-lead b{color:var(--ink);font-weight:600}
.speed-tiles{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--speed-gap)}
.speed-tile{display:flex;flex-direction:column;gap:16px;min-width:0;padding:var(--speed-pad);border:1px solid var(--card-line);border-radius:var(--speed-radius);background:var(--card)}
.speed-mode{display:flex;align-items:center;gap:8px;margin:0;font:var(--speed-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.speed-mode::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--speed-fast)}
.speed-tile + .speed-tile .speed-mode::before{background:var(--speed-standard)}
.speed-tile + .speed-tile + .speed-tile .speed-mode::before{background:var(--speed-deep)}
.speed-tile b{font:700 var(--speed-num)/.9 "DM Sans", sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.speed-tile b span{margin-left:.06em;font-size:var(--speed-unit);font-weight:600;letter-spacing:0;color:var(--muted)}
.speed-stat{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;font:var(--speed-label);color:var(--muted)}
.speed-stat span + span{color:var(--ink)}
.speed .speed-note{grid-column:1 / -1;max-width:none;margin-top:4px!important}
@media (max-width: 900px){
  .speed{grid-template-columns:minmax(0, 1fr);align-items:start}
}
@media (max-width: 600px){
  .speed-tiles{grid-template-columns:minmax(0, 1fr)}
  .speed-tile{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:10px 16px}
  .speed-tile .speed-mode{grid-column:1 / -1}
  .speed-stat{flex-direction:column;align-items:flex-end;justify-content:flex-end}
}
@media (max-width: 420px){
  .speed{--speed-pad:16px;--speed-num:46px}
}