/* Probe status page. Values come from the Paper prototype "Probe Status";
   colours are erb's light/dark tokens plus the few the prototype adds. */

@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/chakra-petch-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  --font-display: "Chakra Petch", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Light is the default; dark follows the system unless the visitor chose. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafd;
  --surface: #ffffff;
  --text: #1a1531;
  --muted: #686477;
  --accent: #6550b9;
  --selected: #f0ecfa;
  --border: #d4cfdf;
  --rule: #e6e3ed;
  --strong-rule: #c8c3d4;
  --dot-open: #c8c3d4;
  --row-hover: #f5f3fb;
  --success: #267452;
  --success-bg: #ecf5ef;
  --warning: #946016;
  --warning-bg: #fbf3e3;
  --danger: #a03d45;
  --danger-bg: #f8e8ea;
  --neutral-bg: #f2f0f6;
  --scrim: #1a153173;
  --modal-shadow: #1a15312e;
  --modal-foot: #fafafd;
  --land: #d9d4e3;
  --leader: #b9b3c8;
  --segment: #f1eff7;
  --halo: 14%;
  --halo-on: 22%;
  --veil: 92%;
  --card-shadow: 0 8px 24px #1a15311a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111017;
    --surface: #1b1924;
    --text: #f3f1fa;
    --muted: #ada7bf;
    --accent: #b6a3ff;
    --selected: #2a223e;
    --border: #514a60;
    --rule: #35313f;
    --strong-rule: #494253;
    --dot-open: #6e6782;
    --row-hover: #1c1828;
    --success: #93ccae;
    --success-bg: #20352c;
    --warning: #e1ba77;
    --warning-bg: #352c1e;
    --danger: #eba0a8;
    --danger-bg: #3a2428;
    --neutral-bg: #292632;
    --scrim: #08070c99;
    --modal-shadow: #00000080;
    --modal-foot: #15131d;
    --land: #2e2a3a;
    --leader: #6e6782;
    --segment: #2a223e;
    --halo: 16%;
    --halo-on: 26%;
    --veil: 88%;
    --card-shadow: 0 10px 28px #00000080;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111017;
  --surface: #1b1924;
  --text: #f3f1fa;
  --muted: #ada7bf;
  --accent: #b6a3ff;
  --selected: #2a223e;
  --border: #514a60;
  --rule: #35313f;
  --strong-rule: #494253;
  --dot-open: #6e6782;
  --row-hover: #1c1828;
  --success: #93ccae;
  --success-bg: #20352c;
  --warning: #e1ba77;
  --warning-bg: #352c1e;
  --danger: #eba0a8;
  --danger-bg: #3a2428;
  --neutral-bg: #292632;
  --scrim: #08070c99;
  --modal-shadow: #00000080;
  --modal-foot: #15131d;
  --land: #2e2a3a;
  --leader: #6e6782;
  --segment: #2a223e;
  --halo: 16%;
  --halo-on: 26%;
  --veil: 88%;
  --card-shadow: 0 10px 28px #00000080;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Dialog titles take focus on open so screen readers start there; the ring
   shows when the dialog was opened from the keyboard. */
.modal-title:focus:not(:focus-visible) {
  outline: none;
}

.mono {
  font-family: var(--font-mono);
}

/* Small caps-style labels: mono 11/14, tracked. */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

/* Values from a health copy that is stale or missing: shown, never as live. */
.is-stale-value,
.heads.is-stale td,
.heads.is-stale td.is-behind,
.heads.is-stale th.provider {
  color: var(--muted);
}

/* ---------- Header ---------- */

.site-header {
  height: 88px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 64px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.lockup svg {
  flex-shrink: 0;
}
.lockup-mark path {
  stroke: var(--text);
}
.lockup-word {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 32px;
}
.lockup-rule {
  width: 1px;
  height: 22px;
  background: var(--rule);
  flex-shrink: 0;
}
.lockup-org {
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 14px;
}
.lockup-org span {
  display: block;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.live {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-text {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Status dots: 8px, filled by state. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--muted);
}
.dot-live {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-bg);
}
.dot-live.is-aging {
  background: var(--warning);
  box-shadow: 0 0 0 4px var(--warning-bg);
}
.dot-live.is-stale,
.dot-live.is-offline {
  background: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-bg);
}
.dot-healthy {
  background: var(--success);
}
.dot-degraded {
  background: var(--warning);
}
.dot-down {
  background: var(--danger);
}
.dot-unknown {
  background: transparent;
  border: 1px solid var(--muted);
}

/* Theme menu. */
.theme {
  position: relative;
}
.theme-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 16px;
}
.theme-button svg path,
.theme-button svg circle {
  stroke: var(--muted);
}
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  min-width: 140px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--strong-rule);
  border-radius: 4px;
  box-shadow: 0 12px 32px var(--modal-shadow);
  display: flex;
  flex-direction: column;
}
.theme-menu button {
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 16px;
}
.theme-menu button:hover {
  background: var(--row-hover);
}
.theme-menu button[aria-checked="true"] {
  background: var(--selected);
  font-weight: 500;
}

/* ---------- Banners ---------- */

.banner {
  margin: 24px 64px 0;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 20px;
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---------- Main ---------- */

main {
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 80px 64px 96px;
}

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 760px;
  flex-shrink: 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 68px;
}
.lede {
  margin: 0;
  width: 620px;
  max-width: 100%;
  font-size: 17px;
  line-height: 28px;
  color: var(--muted);
}
/* The explainer video's opener. */
.watch {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text);
}
.watch:hover {
  background: var(--row-hover);
  border-color: var(--accent);
}
.watch-icon path {
  fill: var(--accent);
}
.watch-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.stats {
  display: flex;
  gap: 48px;
  padding-bottom: 6px;
  margin: 0;
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}
.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 44px;
}
.stat dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 14px;
  color: var(--muted);
}

/* Sections. */
.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.section-head.is-centered {
  align-items: center;
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 36px;
}
.section-note {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

/* Freshness chips beside a section's note; amber also marks a failed or partial last run. */
.fresh {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fresh.is-aging {
  color: var(--warning);
}
.fresh.is-stale,
.fresh.is-missing {
  color: var(--danger);
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th {
  height: 44px;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
td {
  padding: 0;
  vertical-align: middle;
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid var(--rule);
}
tbody tr.is-clickable {
  cursor: pointer;
}
tbody tr.is-clickable:hover {
  background: var(--row-hover);
}
.cell-pair {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.sub {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
.sub-link {
  font-size: 13px;
  line-height: 18px;
}
.empty-row td {
  height: 68px;
  color: var(--muted);
  font-size: 13px;
}

/* Probes table: 32 / 280 / 200 / 120 / 120 / 240 / rest. */
.probes {
  border-top: 1px solid var(--strong-rule);
}
.probes th.c-dot {
  width: 32px;
}
.probes th.c-probe {
  width: 280px;
}
.probes th.c-role {
  width: 200px;
}
.probes th.c-version,
.probes th.c-peers {
  width: 120px;
}
.probes th.c-upload {
  width: 240px;
}
.probes tbody tr {
  height: 68px;
}
.probe-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.probe-id {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
}
.probe-reasons {
  color: var(--warning);
}
.probe-reasons.is-down {
  color: var(--danger);
}

/* Probes map view: a "Map | Detailed view" toggle in the section head, the
   map in the table's place. Phones (below 720 px) get the table only. */
.view-toggle,
.probe-map,
.map-foot {
  display: none;
}
.view-toggle {
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.view-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
}
.view-option svg {
  flex-shrink: 0;
  stroke: currentColor;
}
.view-option:hover {
  color: var(--text);
}
.view-option[aria-pressed="true"] {
  background: var(--segment);
  color: var(--text);
  font-weight: 500;
}

@media (min-width: 720px) {
  .probes-section .section-head {
    align-items: center;
  }
  .view-toggle {
    display: flex;
  }
  /* The map is the default; theme.js and app.js set data-view="table" on the root. */
  :root:not([data-view="table"]) .probe-map {
    display: block;
  }
  :root:not([data-view="table"]) .map-foot {
    display: flex;
  }
  :root:not([data-view="table"]) .probes,
  :root:not([data-view="table"]) .probes-caption {
    display: none;
  }
}

/* 1312 × 488 at full width; status/worldmap.py draws the land and app.js
   places the probes with the same projection. */
.probe-map {
  border-top: 1px solid var(--rule);
  padding: 16px 0 15px;
}
.map-area {
  position: relative;
  aspect-ratio: 1312 / 488;
}
.map-land {
  position: absolute;
  inset: 0;
  background: var(--land);
  -webkit-mask: url("map-land.svg") center / 100% 100% no-repeat;
  mask: url("map-land.svg") center / 100% 100% no-repeat;
}
.map-markers {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-markers > li {
  position: absolute;
  width: 0;
  height: 0;
}

/* A marker is a button: a dot in a static halo (no pulse), and its label. */
.marker {
  --m: 24px;
  --c: var(--dot-open);
  position: absolute;
  left: calc(var(--m) / -2);
  top: calc(var(--m) / -2);
  display: grid;
  place-items: center;
  width: var(--m);
  height: var(--m);
  border: 1px solid transparent;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) var(--halo), transparent);
}
.marker.is-healthy {
  --c: var(--success);
}
.marker.is-degraded {
  --c: var(--warning);
}
.marker.is-down {
  --c: var(--danger);
}
.marker:hover,
.marker.is-open {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) var(--halo-on), transparent);
}
.marker-dot {
  width: calc(var(--m) - 10px);
  height: calc(var(--m) - 10px);
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--c);
}
.marker.is-unknown .marker-dot {
  border-color: var(--dot-open);
  background: var(--bg);
}
.marker-label {
  position: absolute;
  left: calc(50% + 14px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) var(--veil), transparent);
  white-space: nowrap;
}
.marker-id {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  color: var(--text);
}
.marker-state {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.marker.is-degraded .marker-state {
  color: var(--warning);
}
.marker.is-down .marker-state {
  color: var(--danger);
}
.marker-leader {
  position: absolute;
  background: var(--leader);
}
/* Europe is crowded: London's label sits left on a leader, Frankfurt's below. */
.marker.label-left .marker-label,
.marker.label-flip .marker-label {
  left: auto;
  right: calc(50% + 14px);
  align-items: flex-end;
}
.marker.label-left .marker-label {
  right: calc(50% + 60px);
}
.marker.label-left .marker-leader {
  left: calc(50% - 58px);
  top: calc(50% - 0.5px);
  width: 46px;
  height: 1px;
}
.marker.label-below .marker-label {
  left: calc(50% - 7px);
  top: calc(50% + 32px);
  transform: none;
}
.marker.label-below .marker-leader {
  left: calc(50% - 0.5px);
  top: calc(50% + 8px);
  width: 1px;
  height: 24px;
}
/* Fallbacks app.js picks when the map is too narrow for the designed spot. */
.marker.label-under .marker-label,
.marker.label-over .marker-label {
  left: calc(50% - 7px);
  transform: none;
}
.marker.label-under .marker-label {
  top: calc(50% + 12px);
}
.marker.label-over .marker-label {
  top: auto;
  bottom: calc(50% + 12px);
}
/* The open card stands in for its marker's label (opacity keeps the name). */
.marker.is-open .marker-label,
.marker.is-open .marker-leader {
  opacity: 0;
}

/* The summary card on hover or focus; aria-hidden, the marker describes itself. */
.map-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 264px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  cursor: pointer;
}
.card-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-id {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 20px;
  color: var(--text);
}
.map-card .badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.card-sub {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.card-facts {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.card-facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 50%;
}
.card-facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  color: var(--text);
}
.card-facts dd.is-stale-value {
  color: var(--muted);
}
.card-hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--accent);
}

.map-foot {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
.map-legend {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 16px;
}
.map-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.map-legend .dot-unknown {
  border: 1.5px solid var(--dot-open);
}

/* A narrower map packs Europe's markers closer; smaller markers keep them apart. */
@media (max-width: 1365px) {
  .marker {
    --m: 20px;
  }
}
@media (max-width: 959px) {
  .marker {
    --m: 18px;
  }
}

/* Messages. */
.legend {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--strong-rule);
}
.tabs {
  display: flex;
  gap: 32px;
}
.tab {
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
}
.tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 500;
}
.tab-note {
  padding-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

/* Messages table: 220 / 320 / 140 / 140 / 112 / rest. */
.messages th.c-source {
  width: 220px;
}
.messages th.c-vaa {
  width: 320px;
}
.messages th.c-seen,
.messages th.c-sigs {
  width: 140px;
}
.messages th.c-probes {
  width: 112px;
}
.messages tbody tr {
  height: 56px;
}
.source {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.source-chain {
  font-weight: 500;
}
.vaa-link {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--accent);
}
.vaa-link:hover {
  text-decoration: underline;
}
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  vertical-align: 1px;
}
.tag-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.tag-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

/* The five-step proof strip: 8px dots joined by 20px lines. */
.proof {
  display: flex;
  align-items: center;
  gap: 16px;
}
.strip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--dot-open);
}
.step-dot.is-done {
  background: var(--accent);
  border-color: var(--accent);
}
.step-line {
  width: 20px;
  height: 1px;
  flex-shrink: 0;
  background: var(--border);
}
.step-line.is-done {
  background: var(--accent);
}
.proof-label {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
.proof-label.is-warning {
  color: var(--warning);
}
.proof-label.is-danger {
  color: var(--danger);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--strong-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 64px 40px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.footer-links a {
  color: var(--text);
}

/* ---------- Dialogs ---------- */

dialog {
  padding: 0;
  margin: 64px auto auto;
  width: 780px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--strong-rule);
  border-radius: 4px;
  box-shadow: 0 24px 64px var(--modal-shadow);
  overflow: auto;
}
dialog.probe-dialog {
  width: 920px;
  margin-top: 56px;
}
dialog.video-dialog {
  width: 1100px;
  margin-top: 48px;
}
.video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.transcript {
  padding: 0 32px;
  border-top: 1px solid var(--rule);
}
.transcript summary {
  padding: 16px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  cursor: pointer;
}
.transcript-text {
  max-width: 72ch;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.transcript-text p {
  margin: 0 0 12px;
}
.video-credit {
  font-size: 12px;
}
dialog::backdrop {
  background: var(--scrim);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--rule);
}
.modal-head-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.modal-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-kicker .label {
  color: var(--accent);
}
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  background: var(--neutral-bg);
  color: var(--muted);
}
.badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 34px;
}
.modal-title.is-mono {
  font-family: var(--font-mono);
  font-weight: 400;
}
.modal-id {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.modal-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}
/* A 20px icon in a 36px target. */
.close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: -8px -8px 0 16px;
  display: grid;
  place-items: center;
  border-radius: 3px;
}
.close:hover {
  background: var(--row-hover);
}
.close path {
  stroke: var(--muted);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
  padding: 20px 32px;
  border-bottom: 1px solid var(--rule);
}
.probe-dialog .facts {
  column-gap: 44px;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fact dt {
  order: 0;
}
.fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
}
.fact .fact-note {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.fact-link {
  justify-content: flex-end;
}
.fact-link a {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 20px;
}

.reasons {
  margin: 0;
  padding: 16px 32px;
  border-bottom: 1px solid var(--rule);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 20px;
}
.reasons strong {
  font-family: var(--font-mono);
  font-weight: 400;
}

/* Provenance body: probe picker + steps. */
.prov-body {
  display: flex;
}
.picker {
  width: 236px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 16px 24px 24px;
  border-right: 1px solid var(--rule);
}
.picker .label {
  padding: 0 8px 8px;
}
.pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 3px;
}
.pick:hover {
  background: var(--row-hover);
}
.pick[aria-pressed="true"] {
  background: var(--selected);
  box-shadow: inset 2px 0 0 var(--accent);
}
.pick-id {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
}
.pick[aria-pressed="true"] .pick-id {
  font-weight: 500;
}
.pick-time {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.picker-note {
  padding: 8px 8px 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.steps {
  flex-grow: 1;
  min-width: 0;
  margin: 0;
  padding: 28px 32px 8px;
  list-style: none;
}
.step {
  display: flex;
  gap: 18px;
}
.step-rail {
  width: 10px;
  flex-shrink: 0;
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-rail::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--accent);
  flex-shrink: 0;
}
.step-rail::after {
  content: "";
  width: 1px;
  flex-grow: 1;
  background: var(--accent);
}
.step:last-child .step-rail::after {
  display: none;
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 22px;
  min-width: 0;
}
.step:last-child .step-body {
  padding-bottom: 16px;
}
.step-body .label {
  color: var(--accent);
}
.step-main {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.step-detail {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.step-detail.is-danger {
  color: var(--danger);
}
/* The browser's Rekor cross-check: its own line, coloured and worded by result. */
.step-detail.live-check {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
}
.step-detail.live-check.is-success {
  color: var(--success);
}
.step-detail.live-check.is-danger {
  color: var(--danger);
}
.step-detail.live-check.is-muted {
  color: var(--muted);
}

/* What is still to come for an unanchored copy, or why a copy failed. */
.pending {
  margin: 0 0 20px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  background: var(--modal-foot);
  list-style: none;
}
.pending.is-danger {
  border-color: var(--danger);
}
.pending-main {
  font-size: 14px;
  line-height: 22px;
}
.pending-detail {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.modal-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 32px 28px;
  border-top: 1px solid var(--rule);
  background: var(--modal-foot);
}
.modal-foot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.modal-foot-links {
  display: flex;
  gap: 20px;
  font-size: 13px;
  line-height: 20px;
}
.modal-foot-links button {
  color: var(--accent);
}
.command {
  margin: 0;
  padding: 14px 18px;
  border-radius: 3px;
  background: var(--neutral-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  white-space: pre;
  overflow-x: auto;
}
.check-note {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

/* Probe modal: 24-hour charts and chain heads. */
.charts {
  padding: 24px 32px 28px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.charts-empty {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}
.charts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.charts-head .label {
  margin-right: auto;
}
.charts-age {
  font-size: 12px;
  line-height: 16px;
  color: var(--warning);
}
.charts-restarts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.charts-restart-icon {
  flex-shrink: 0;
  stroke: var(--strong-rule);
}
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
}
.chart-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.chart-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.chart-value {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}
.chart-sub,
.chart-legend {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-swatch {
  flex-shrink: 0;
  width: 12px;
  height: 2px;
  background: var(--text);
}
.chart-swatch.is-accent {
  background: var(--accent);
}
.chart-plot {
  height: 88px;
  min-width: 0;
  overflow: hidden;
}
.chart-plot .u-cursor-x {
  border-right: 1px solid var(--strong-rule);
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
}
.heads {
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.heads-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.heads-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.heads-note {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}
.heads table {
  border-top: 1px solid var(--rule);
}
.heads col.c-provider {
  width: 136px;
}
.heads col.c-chain {
  width: 100px;
}
.heads th {
  height: 36px;
}
.heads td {
  height: 36px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
}
.heads th.provider {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.heads tbody tr:last-child th {
  border-bottom: 0;
}
.heads tbody tr:last-child td {
  border-bottom: 0;
}
.heads td.is-behind {
  color: var(--warning);
}
.heads td.is-none {
  color: var(--muted);
}
.heads-tall {
  display: none;
}

/* ---------- Narrower screens ----------
   No mobile artboard exists: these derive from the desktop one with the
   same tokens. Below 1366px (where the desktop widths stop fitting) the
   Role column moves to the probe dialog and the tables share their width by
   percentage; below 720px (phones) the tables keep only the columns that
   fit, the rest fold into a cell or live in the dialogs, and dialogs fill
   the screen. */

.narrow-only {
  display: none;
}

@media (max-width: 1365px) {
  .site-header {
    padding-inline: 32px;
  }
  .banner {
    margin-inline: 32px;
  }
  main {
    gap: 72px;
    padding: 56px 32px 72px;
  }
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .hero-text {
    width: 100%;
    max-width: 760px;
    flex-shrink: 1;
  }
  .headline {
    font-size: 52px;
    line-height: 56px;
  }
  .section-head,
  .tabbar {
    flex-wrap: wrap;
    column-gap: 24px;
  }
  .site-footer {
    flex-wrap: wrap;
    gap: 12px 28px;
    padding-inline: 32px;
  }

  .probes .c-role {
    display: none;
  }
  .probes th.c-dot {
    width: 28px;
  }
  .probes th.c-probe {
    width: 30%;
  }
  .probes th.c-version {
    width: 14%;
  }
  .probes th.c-peers {
    width: 9%;
  }
  .probes th.c-upload {
    width: 22%;
  }
  .messages th.c-source {
    width: 17%;
  }
  .messages th.c-vaa {
    width: 29%;
  }
  .messages th.c-seen {
    width: 14%;
  }
  .messages th.c-sigs {
    width: 12%;
  }
  .messages th.c-probes {
    width: 8%;
  }
  td {
    padding-block: 10px;
  }
  th,
  td {
    padding-right: 8px;
  }
  .cell-pair,
  .source,
  .proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .proof {
    gap: 6px;
  }
  .vaa-link {
    font-size: 13px;
  }
  .tag {
    margin: 4px 0 0;
  }
}

@media (max-width: 719px) {
  .site-header {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }
  .header-right {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }
  .lockup-word {
    font-size: 24px;
    line-height: 28px;
  }
  .banner {
    margin: 16px 16px 0;
  }
  main {
    gap: 56px;
    padding: 40px 16px 56px;
  }
  .hero {
    gap: 32px;
  }
  .hero-text {
    gap: 20px;
  }
  .headline {
    font-size: 36px;
    line-height: 40px;
  }
  .lede {
    font-size: 15px;
    line-height: 24px;
  }
  .stats {
    flex-wrap: wrap;
    gap: 20px 28px;
  }
  .stat dd {
    font-size: 28px;
    line-height: 32px;
  }
  .section-head,
  .section-head.is-centered {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .section-note,
  .tab-note {
    flex-direction: column;
    gap: 4px;
  }
  /* "Health: stale · last attempt failed · updated 12 min ago" is wider than a phone. */
  .fresh {
    white-space: normal;
  }
  .legend {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  /* The tab underline moves to the tab list so the note can sit below it. */
  .tabbar {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 0;
  }
  .tabs {
    gap: 24px;
    border-bottom: 1px solid var(--strong-rule);
  }
  .tab-note {
    padding: 12px 0;
  }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px 32px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  /* Probes: state, probe and last upload; version, peers and the signed
     hour are in the probe dialog. */
  .probes .c-version,
  .probes .c-peers,
  .probes .c-signed {
    display: none;
  }
  .probes th.c-dot {
    width: 20px;
  }
  .probes th.c-probe {
    width: auto;
  }
  .probes th.c-upload {
    width: 104px;
  }
  /* Messages: one cell for the message (source, VAA, seen, signatures,
     probes) and one for its proof. */
  .messages .c-source,
  .messages .c-seen,
  .messages .c-sigs,
  .messages .c-probes {
    display: none;
  }
  .messages th.c-vaa {
    width: auto;
  }
  .messages th.c-proof {
    width: 128px;
  }
  .narrow-only {
    display: block;
  }
  .c-vaa .source {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .msg-meta {
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: var(--muted);
  }
  .msg-meta span {
    display: block;
  }

  /* Dialogs fill the screen, and the page behind them stays put. */
  html:has(dialog[open]) {
    overflow: hidden;
  }
  dialog,
  dialog.probe-dialog,
  dialog.video-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .modal-head {
    padding: 16px;
  }
  .transcript {
    padding: 0 16px;
  }
  .modal-kicker {
    flex-wrap: wrap;
  }
  .modal-title {
    font-size: 22px;
    line-height: 28px;
  }
  .facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
  }
  .reasons {
    padding: 12px 16px;
  }
  .prov-body {
    flex-direction: column;
  }
  .picker {
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .picker .label,
  .picker-note {
    grid-column: 1 / -1;
  }
  .steps {
    padding: 20px 16px 4px;
  }
  .modal-foot {
    padding: 16px 16px 24px;
  }
  .modal-foot-head {
    flex-direction: column;
    gap: 8px;
  }
  .modal-foot-links {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .command {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .charts,
  .heads {
    padding: 16px;
  }
  .charts {
    gap: 20px;
  }
  .charts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .heads-head {
    flex-direction: column;
    gap: 4px;
  }
}

/* The chain heads table needs the full 920px probe dialog; below that it
   turns: chains down, providers across. */
@media (max-width: 959px) {
  .heads-wide {
    display: none;
  }
  .heads-tall {
    display: table;
  }
  .heads-tall col.c-provider {
    width: 28%;
  }
  .heads-tall col.c-chain {
    width: 24%;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}