:root {
  color-scheme: light dark;
  --color-bg: #f7f8fa;
  --color-grid: rgba(15,18,22,0.06);
  --color-ink: #0f1216;
  --color-line: #e0e3e8;
  --color-muted: #59606a;
  --color-plate: #ffffff;
  --color-plate-border: #d5d9df;
  --color-surface: #ffffff;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-band-code: 10px;
  --font-size-body: 15px;
  --font-size-button: 14px;
  --font-size-caption: 11px;
  --font-size-collapsed: 0px;
  --font-size-evidence: 13px;
  --font-size-grade: 88px;
  --font-size-h1: 40px;
  --font-size-h2: 20px;
  --font-size-input: 16px;
  --font-size-inspector: 21px;
  --font-size-label: 12px;
  --font-size-region: 11px;
  --font-size-small: 13px;
  --font-size-stepper: 12px;
  --font-size-target: 32px;
  --font-size-text: 14px;
  --font-size-title: 17px;
  --font-tracking-caps: 0.12em;
  --font-tracking-display: -0.03em;
  --font-tracking-grade: -0.04em;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-strong: 650;
  --layout-gutter: 32px;
  --layout-max-width: 1120px;
  --layout-phone: 390px;
  --layout-phone-max: 480px;
  --line-fail: 4px;
  --line-fix: 5px;
  --line-hair: 1px;
  --line-marker: 3px;
  --line-pass: 2px;
  --line-warn: 3px;
  --radius-max: 2px;
  --radius-round: 50%;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --spectrum-band-plate-height: 96px;
  --spectrum-label-band: 56px;
  --spectrum-label-leader: 8px;
  --spectrum-label-row: 14px;
  --spectrum-line-pitch-min: 8px;
  --spectrum-plate-height: 92px;
  --spectrum-trace-row: 5px;
  --status-fail-mark: #c42b22;
  --status-fail-text: #c42b22;
  --status-fix-mark: #0f8a4f;
  --status-fix-text: #1e7a4c;
  --status-pass-hair: #3a9a66;
  --status-pass-mark: #3a9a66;
  --status-pass-text: #1e7a4c;
  --status-untested-mark: #59606a;
  --status-untested-text: #59606a;
  --status-warn-mark: #c77d00;
  --status-warn-text: #9a5f00;
  --status-glow-fail: none;
  --status-glow-pass: none;
  --status-glow-warn: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #07080a;
    --color-grid: rgba(255,255,255,0.05);
    --color-ink: #e7e9ec;
    --color-line: #1d2127;
    --color-muted: #8b929c;
    --color-plate: #000000;
    --color-plate-border: #1d2127;
    --color-surface: #0d0f12;
    --status-fail-mark: #ff5d55;
    --status-fail-text: #ff5d55;
    --status-fix-mark: #7af0b2;
    --status-fix-text: #7af0b2;
    --status-pass-hair: #2c6b4a;
    --status-pass-mark: #3fb97a;
    --status-pass-text: #4fd18f;
    --status-untested-mark: #8b929c;
    --status-untested-text: #8b929c;
    --status-warn-mark: #f0a93b;
    --status-warn-text: #f0a93b;
    --status-glow-fail: 0 0 8px rgba(255,93,85,0.75);
    --status-glow-pass: 0 0 3px rgba(63,185,122,0.35);
    --status-glow-warn: 0 0 6px rgba(240,169,59,0.6);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #07080a;
  --color-grid: rgba(255,255,255,0.05);
  --color-ink: #e7e9ec;
  --color-line: #1d2127;
  --color-muted: #8b929c;
  --color-plate: #000000;
  --color-plate-border: #1d2127;
  --color-surface: #0d0f12;
  --status-fail-mark: #ff5d55;
  --status-fail-text: #ff5d55;
  --status-fix-mark: #7af0b2;
  --status-fix-text: #7af0b2;
  --status-pass-hair: #2c6b4a;
  --status-pass-mark: #3fb97a;
  --status-pass-text: #4fd18f;
  --status-untested-mark: #8b929c;
  --status-untested-text: #8b929c;
  --status-warn-mark: #f0a93b;
  --status-warn-text: #f0a93b;
  --status-glow-fail: 0 0 8px rgba(255,93,85,0.75);
  --status-glow-pass: 0 0 3px rgba(63,185,122,0.35);
  --status-glow-warn: 0 0 6px rgba(240,169,59,0.6);
}
[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f8fa;
  --color-grid: rgba(15,18,22,0.06);
  --color-ink: #0f1216;
  --color-line: #e0e3e8;
  --color-muted: #59606a;
  --color-plate: #ffffff;
  --color-plate-border: #d5d9df;
  --color-surface: #ffffff;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-band-code: 10px;
  --font-size-body: 15px;
  --font-size-button: 14px;
  --font-size-caption: 11px;
  --font-size-collapsed: 0px;
  --font-size-evidence: 13px;
  --font-size-grade: 88px;
  --font-size-h1: 40px;
  --font-size-h2: 20px;
  --font-size-input: 16px;
  --font-size-inspector: 21px;
  --font-size-label: 12px;
  --font-size-region: 11px;
  --font-size-small: 13px;
  --font-size-stepper: 12px;
  --font-size-target: 32px;
  --font-size-text: 14px;
  --font-size-title: 17px;
  --font-tracking-caps: 0.12em;
  --font-tracking-display: -0.03em;
  --font-tracking-grade: -0.04em;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-strong: 650;
  --layout-gutter: 32px;
  --layout-max-width: 1120px;
  --layout-phone: 390px;
  --layout-phone-max: 480px;
  --line-fail: 4px;
  --line-fix: 5px;
  --line-hair: 1px;
  --line-marker: 3px;
  --line-pass: 2px;
  --line-warn: 3px;
  --radius-max: 2px;
  --radius-round: 50%;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --spectrum-band-plate-height: 96px;
  --spectrum-label-band: 56px;
  --spectrum-label-leader: 8px;
  --spectrum-label-row: 14px;
  --spectrum-line-pitch-min: 8px;
  --spectrum-plate-height: 92px;
  --spectrum-trace-row: 5px;
  --status-fail-mark: #c42b22;
  --status-fail-text: #c42b22;
  --status-fix-mark: #0f8a4f;
  --status-fix-text: #1e7a4c;
  --status-pass-hair: #3a9a66;
  --status-pass-mark: #3a9a66;
  --status-pass-text: #1e7a4c;
  --status-untested-mark: #59606a;
  --status-untested-text: #59606a;
  --status-warn-mark: #c77d00;
  --status-warn-text: #9a5f00;
  --status-glow-fail: none;
  --status-glow-pass: none;
  --status-glow-warn: none;
}
@media (max-width: 480px) {
  :root {
    --font-size-button: 15px;
    --font-size-caption: 10px;
    --font-size-evidence: 12px;
    --font-size-grade: 64px;
    --font-size-h1: 26px;
    --font-size-h2: 19px;
    --font-size-label: 11px;
    --font-size-region: 9px;
    --layout-gutter: 16px;
    --spectrum-label-band: 46px;
    --spectrum-label-leader: 6px;
    --spectrum-label-row: 12px;
    --spectrum-plate-height: 80px;
    --spectrum-trace-row: 6px;
  }
}
/* Base page rules for the V2 view layer. Tokens only: every value comes from tokens.json. */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
}

/* The marker (R43): a line at the inline start of the active element. */
.marker {
  border-inline-start: var(--line-marker) solid transparent;
}
.marker[aria-pressed="true"],
.marker[aria-current]:not([aria-current="false"]),
.marker[aria-selected="true"] {
  border-inline-start-color: var(--color-ink);
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.grade {
  --grade-tone: var(--color-muted);
  display: inline-flex;
  flex-direction: column;
  padding-inline-start: var(--space-4);
  border-inline-start: var(--line-fail) solid var(--color-line);
  border-inline-start-color: var(--grade-tone);
}
.grade[data-tone="pass"] { --grade-tone: var(--status-pass-text); }
.grade[data-tone="warn"] { --grade-tone: var(--status-warn-text); }
.grade[data-tone="fail"] { --grade-tone: var(--status-fail-text); }
.grade[data-tone="fix"] { --grade-tone: var(--status-fix-text); }
.grade[data-tone="untested"] { --grade-tone: var(--status-untested-text); }
.grade__letter {
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-grade);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-grade);
  line-height: 0.85;
}
.grade__score {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.grade__score strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.grade__descriptor {
  /* Wraps under the score instead of widening the grade block (the run title needs the width). */
  width: 0;
  min-width: 100%;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
@media (max-width: 480px) {
  .grade {
    padding-inline-start: var(--space-3);
  }
  .grade__score {
    font-size: var(--font-size-label);
  }
}
.run-line {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.run-line--title {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .run-line--title {
    letter-spacing: .1em;
  }
  .run-line--title [data-part="profile"] {
    display: none;
  }
}
.progress-ray {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.progress-ray__segment {
  flex: 1;
  padding-block-start: var(--space-1);
  border-block-start: var(--line-marker) solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
.progress-ray__state {
  display: block;
  letter-spacing: normal;
  text-transform: none;
}
.progress-ray__segment[data-state="done"] {
  border-block-start-color: var(--color-ink);
  color: var(--color-ink);
}
.progress-ray__segment[data-state="incomplete"] {
  border-block-start-style: dashed;
  border-block-start-color: var(--status-warn-mark);
  color: var(--status-warn-text);
}
.spectrum {
  position: relative;
  overflow-x: auto;
}
.spectrum [data-run]:not([data-shown]) {
  display: none;
}
.spectrum__box {
  min-width: calc(var(--spectrum-lines) * var(--spectrum-line-pitch-min));
}
.spectrum__label-band {
  position: relative;
}
.spectrum__labels {
  position: absolute;
  inset: 0;
}
.spectrum__axis {
  position: relative;
  height: 32px;
}
.spectrum__tick {
  position: absolute;
  inset-block-start: 0;
  width: var(--line-hair);
  height: 4px;
  background: var(--color-grid);
}
.spectrum__tick[data-major] {
  height: 10px;
}
.spectrum__tick[data-last] {
  transform: translateX(-100%);
}
.spectrum__plate {
  display: block;
  width: 100%;
  height: var(--spectrum-plate-height);
  border: var(--line-hair) solid var(--color-plate-border);
  background: var(--color-plate);
  border-radius: var(--radius-max);
  box-sizing: border-box;
}
.spectrum[data-slim] .spectrum__plate {
  height: var(--spectrum-band-plate-height);
}
.spectrum__guide {
  stroke: var(--color-grid);
  stroke-width: var(--line-hair);
}
.spectrum__boundary {
  stroke: var(--color-grid);
  stroke-width: var(--line-hair);
}
.spectrum__line {
  stroke: var(--status-untested-mark);
  stroke-width: var(--line-hair);
}
.spectrum__line[data-tone="pass"] {
  stroke: var(--status-pass-mark);
  stroke-width: var(--line-pass);
  filter: drop-shadow(var(--status-glow-pass));
}
.spectrum__line[data-tone="warn"] {
  stroke: var(--status-warn-mark);
  stroke-width: var(--line-warn);
  filter: drop-shadow(var(--status-glow-warn));
}
.spectrum__line[data-tone="fail"] {
  stroke: var(--status-fail-mark);
  stroke-width: var(--line-fail);
  filter: drop-shadow(var(--status-glow-fail));
}
.spectrum__outline {
  width: var(--line-fix);
  transform: translateX(calc(var(--line-fix) / -2));
  fill: none;
  stroke: var(--status-fix-mark);
  stroke-width: var(--line-hair);
}
.spectrum__ring {
  r: calc(var(--space-1) - var(--line-hair) / 2);
  fill: var(--color-plate);
  stroke: var(--status-fix-mark);
  stroke-width: var(--line-pass);
}
.spectrum__region-label {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: .5em;
  white-space: nowrap;
  inset-block-start: 14px;
  box-sizing: border-box;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.spectrum__region-label:last-child {
  justify-content: flex-end;
}
.spectrum__region-grade {
  color: var(--color-ink);
}
.spectrum__line-label {
  position: absolute;
  white-space: nowrap;
  padding-inline-start: var(--space-1);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: 600;
  line-height: 1;
}
.spectrum__leader {
  position: absolute;
  bottom: 0;
  width: var(--line-hair);
}
.spectrum__leader[data-tone="warn"] { background: var(--status-warn-mark); }
.spectrum__leader[data-tone="fail"] { background: var(--status-fail-mark); }
.spectrum__leader[data-tone="fix"] { background: var(--status-fix-mark); }
.spectrum__line-label[data-tone="warn"] { color: var(--status-warn-text); }
.spectrum__line-label[data-tone="fail"] { color: var(--status-fail-text); }
.spectrum__line-label[data-tone="fix"] { color: var(--status-fix-text); }
.spectrum__targets {
  position: relative;
  height: 0;
}
.spectrum__target {
  position: absolute;
  top: calc(-1 * var(--spectrum-plate-height));
  height: var(--spectrum-plate-height);
  transform: translateX(-50%);
}
.spectrum-gutter {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 2px;
  margin-block-start: 56px;
  padding-inline-start: var(--space-2);
  border-inline-start: var(--line-marker) solid transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.spectrum-gutter[data-replaying] {
  border-inline-start-color: var(--color-ink);
}
.spectrum-gutter__date {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.spectrum-gutter__grade strong {
  color: var(--color-ink);
}
.spectrum__region-grades {
  display: none;
}
.spectrum-stepper__hint {
  display: none;
}
@media (max-width: 480px) {
  /* Board M draws the region names alone: the narrow regions have no room for a grade, which stays readable to a screen reader. */
  .spectrum__region-grade {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .spectrum__box {
    min-width: 0;
  }
  .spectrum__label-band {
    /* The phone draws the phone placement (SDD §5.5 point 2): the inline geometry is the
       desktop placement's, so these rules override it with the values the component writes. */
    height: calc(var(--spectrum-label-band) + var(--label-extra-phone) * var(--spectrum-label-row)) !important;
  }
  .spectrum__leader {
    height: calc(var(--spectrum-label-leader) + var(--row-phone) * var(--spectrum-label-row)) !important;
  }
  .spectrum__line-label {
    bottom: calc(var(--spectrum-label-leader) + var(--row-phone) * var(--spectrum-label-row)) !important;
    left: clamp(0px, var(--x), calc(100% - var(--width-phone))) !important;
  }
  .spectrum__axis {
    height: 26px;
  }
  .spectrum__tick {
    height: 3px;
  }
  .spectrum__tick[data-major] {
    height: 8px;
  }
  .spectrum__region-label {
    font-size: var(--font-size-region);
    letter-spacing: .1em;
  }
  .spectrum__region-name[data-short] {
    font-size: var(--font-size-collapsed);
  }
  .spectrum__region-name[data-short]::after {
    content: attr(data-short) / "";
    font-size: var(--font-size-region);
  }
  .spectrum-gutter {
    display: none;
  }
  .spectrum-stepper__box {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: 0;
    padding: 4px 8px;
    border: var(--line-hair) solid var(--color-line);
    border-radius: var(--radius-max);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-stepper);
  }
  .spectrum-stepper__run strong {
    color: var(--color-ink);
    font-weight: var(--font-weight-bold);
  }
  .spectrum-stepper__state {
    font-size: var(--font-size-caption);
  }
  .spectrum-stepper__hint {
    display: block;
    grid-column: 1 / -1;
    order: 3;
    margin: 10px 0 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
  }
  .spectrum-stepper__hint[data-active] {
    color: var(--color-ink);
  }
}
/* Without a history there is no replay gutter: the figure takes the full width, as board FFirst. */
#spectrum:not(:has(.spectrum-gutter)) {
  grid-template-columns: minmax(0, 1fr);
}
.trace {
  grid-column: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trace__row {
  display: flex;
  align-items: stretch;
  position: relative;
  height: var(--spectrum-trace-row);
  cursor: pointer;
}
.trace__row[data-dimmed] { opacity: .3; }
.trace__cell {
  position: relative;
  flex: 1;
}
.trace__cell::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--spectrum-trace-row);
  height: var(--line-warn);
  background: var(--status-untested-mark);
  transform: translate(-50%, -50%);
}
.trace__cell[data-tone="pass"]::before {
  height: var(--line-hair);
  background: var(--status-pass-hair);
}
.trace__cell[data-tone="warn"]::before { background: var(--status-warn-mark); }
.trace__cell[data-tone="fail"]::before { background: var(--status-fail-mark); }
.trace__row:is([data-hovered], [data-pinned]) .trace__cell::before {
  transform: translate(-50%, -50%) scaleY(2.4);
}
.trace__row:is([data-hovered], [data-pinned]) .trace__cell[data-tone="pass"]::before {
  transform: translate(-50%, -50%) scaleY(3);
}
.trace__edges {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  line-height: 1;
}
.trace__foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.trace__caption,
.trace__hint { margin: 0; }
.trace__table-link {
  grid-column: 1 / -1;
  justify-self: start;
  margin-block-start: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.trace__caption[data-active] { color: var(--color-ink); }
.trace__row:is([data-hovered], [data-pinned])::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 50%;
  width: 3px;
  height: 9px;
  background: var(--color-ink);
  transform: translateY(-50%);
}
@media (max-width: 480px) {
  .trace__edges,
  .trace__caption,
  .trace__hint {
    display: none;
  }
  .trace__table-link {
    display: inline-flex;
    align-items: center;
    order: 4;
    min-height: 44px;
    font-size: var(--font-size-small);
  }
}
.check-row {
  --check-row-mark: var(--color-muted);
  --check-row-text: var(--color-muted);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 14px var(--space-4);
  border-top: var(--line-hair) solid var(--color-line);
  background: var(--color-surface);
}
.check-row[data-tone="pass"] { --check-row-mark: var(--status-pass-mark); --check-row-text: var(--status-pass-text); }
.check-row[data-tone="warn"] { --check-row-mark: var(--status-warn-mark); --check-row-text: var(--status-warn-text); }
.check-row[data-tone="fail"] { --check-row-mark: var(--status-fail-mark); --check-row-text: var(--status-fail-text); }
.check-row[data-tone="fix"] { --check-row-mark: var(--status-fix-mark); --check-row-text: var(--status-fix-text); }
.check-row[data-tone="untested"] { --check-row-mark: var(--status-untested-mark); --check-row-text: var(--status-untested-text); }
.check-row__side {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-content: start;
  align-items: start;
  column-gap: 10px;
  row-gap: 2px;
}
.check-row__side > :not(.check-row__bar) {
  grid-column: 2;
}
.check-row__bar {
  grid-row: 1 / 3;
  display: block;
  width: var(--line-hair);
  height: 34px;
  background: var(--check-row-mark);
}
.check-row__bar[data-tone="pass"] { width: var(--line-pass); }
.check-row__bar[data-tone="warn"] { width: var(--line-warn); }
.check-row__bar[data-tone="fail"] { width: var(--line-fail); }
.check-row__bar[data-tone="fix"] { width: var(--line-fix); }
.check-row__sev {
  color: var(--check-row-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
.check-row__code {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.check-row__phone-meta {
  display: none;
  margin: 0;
}
.check-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.check-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.check-row__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
}
.check-row__since {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.check-row__body,
.check-row__fix,
.check-row__meta {
  margin: 0;
}
.check-row__body {
  color: var(--color-muted);
  font-size: var(--font-size-text);
}
.check-row__fix {
  color: var(--color-ink);
  font-size: var(--font-size-text);
}
.check-row__fix-label { font-weight: var(--font-weight-strong); }
.check-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.check-row__link {
  color: var(--color-muted);
  text-decoration: underline;
}
@media (max-width: 480px) {
  .check-row {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-3);
    padding: 12px 14px;
    border-inline-start: var(--line-warn) solid var(--color-line);
    border-inline-start-color: var(--check-row-mark);
  }
  .check-row[data-tone="pass"] { border-inline-start-width: var(--line-pass); }
  .check-row[data-tone="warn"] { border-inline-start-width: var(--line-warn); }
  .check-row[data-tone="fail"] { border-inline-start-width: var(--line-fail); }
  .check-row__side,
  .check-row__since {
    display: none;
  }
  .check-row__phone-meta {
    display: block;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
  }
  .check-row__title {
    font-size: var(--font-size-body);
  }
  .check-row__meta {
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
    font-size: var(--font-size-label);
  }
  .check-row__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.evidence-block {
  padding: var(--space-3) var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.evidence-block__title {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
}
.evidence-block__table {
  width: 100%;
  border-collapse: collapse;
}
.evidence-block__table th,
.evidence-block__table td {
  padding: var(--space-1) var(--space-3) var(--space-1) 0;
  text-align: start;
  vertical-align: baseline;
}
.evidence-block__empty {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-sans);
}
.evidence-block__swipe {
  display: none;
}
.evidence-block__table th { color: var(--color-muted); font-weight: var(--font-weight-regular); }
.evidence-block__chain,
.evidence-block__tree {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}
.evidence-block__link {
  padding-block: var(--space-2);
  border-block-end: var(--line-hair) solid var(--color-line);
}
.evidence-block__fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
.evidence-block__fields dt { color: var(--color-muted); }
.evidence-block__fields dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.evidence-block__tree-item[data-depth="0"] { padding-inline-start: 0; }
.evidence-block__tree-item[data-depth="1"] { padding-inline-start: calc(var(--space-4) * 1); }
.evidence-block__tree-item[data-depth="2"] { padding-inline-start: calc(var(--space-4) * 2); }
.evidence-block__tree-item[data-depth="3"] { padding-inline-start: calc(var(--space-4) * 3); }
.evidence-block__tree-item[data-depth="4"] { padding-inline-start: calc(var(--space-4) * 4); }
.evidence-block__tree-item[data-depth="5"] { padding-inline-start: calc(var(--space-4) * 5); }
.evidence-block__tree-item[data-depth="6"] { padding-inline-start: calc(var(--space-4) * 6); }
.evidence-block__tree-item[data-depth="7"] { padding-inline-start: calc(var(--space-4) * 7); }
.evidence-block__text {
  margin: 0;
  overflow-x: auto;
  color: var(--color-ink);
}
.evidence-block__feeds {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}
.evidence-value__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: var(--space-1);
}
.evidence-value__link:hover {
  text-decoration-color: var(--color-ink);
}
.ip-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-inline-start: var(--space-2);
  vertical-align: baseline;
}
.ip-badge {
  padding: 0 var(--space-1);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  font-family: var(--font-sans);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}
.ip-badge[data-tone="muted"] { color: var(--color-muted); }
.ip-badge[data-tone="warn"] { color: var(--status-warn-text); }
.ip-badge[data-tone="fail"] { color: var(--status-fail-text); }
@media (max-width: 480px) {
  .evidence-block__swipe {
    display: block;
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-label);
  }
  .evidence-value__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 28px;
  margin: 0;
}
.facts-grid__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.facts-grid__cell[data-wide] {
  /* a long value (a raw user agent, a SAN list) reads on one line across the grid */
  grid-column: 1 / -1;
}
.facts-grid[data-toned] .facts-grid__cell {
  /* in a grid with a toned cell every cell keeps the bar's slot, so the cells align */
  padding-inline-start: var(--space-2);
  border-inline-start: var(--line-marker) solid transparent;
}
.facts-grid__cell[data-tone="pass"] { border-inline-start-color: var(--status-pass-mark); }
.facts-grid__cell[data-tone="warn"] { border-inline-start-color: var(--status-warn-mark); }
.facts-grid__cell[data-tone="fail"] { border-inline-start-color: var(--status-fail-mark); }
.facts-grid__label {
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
}
.facts-grid__value {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}
.facts-grid__chip {
  display: inline-block;
  margin: 0 var(--space-1) var(--space-1) 0;
  padding: 0 var(--space-1);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  font-family: var(--font-mono);
}
.diff-block {
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.diff-block__title {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  color: var(--color-ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
}
.diff-block__summary,
.diff-block__note {
  margin: 0;
  padding: var(--space-1) var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.diff-block__entries {
  margin: 0;
  padding: 0;
  list-style: none;
}
.diff-block__entry {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-4);
}
.diff-block__entry + .diff-block__entry {
  border-top: var(--line-hair) solid var(--color-line);
}
.diff-block__marker {
  flex: none;
  width: var(--line-marker);
  height: var(--space-4);
  background: var(--color-line);
}
.diff-block__entry[data-tone="pass"] .diff-block__marker { background: var(--status-pass-mark); }
.diff-block__entry[data-tone="warn"] .diff-block__marker { background: var(--status-warn-mark); }
.diff-block__entry[data-tone="fail"] .diff-block__marker { background: var(--status-fail-mark); }
.diff-block__entry[data-tone="fix"] .diff-block__marker { background: var(--status-pass-text); }
.diff-block__entry[data-tone="untested"] .diff-block__marker { background: var(--color-muted); }
.diff-block__kind {
  flex: none;
  width: 70px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.diff-block__text { flex: 1; color: var(--color-ink); }
.diff-block__code {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  text-align: right;
}
.diff-block__meta {
  display: none;
}
.section-head + .diff-block {
  margin-block-start: var(--space-3);
}
@media (max-width: 480px) {
  .diff-block__entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--space-3);
    padding: 11px 14px;
  }
  .diff-block__marker {
    grid-row: 1 / 3;
  }
  .diff-block__kind,
  .diff-block__code {
    display: none;
  }
  .diff-block__text,
  .diff-block__meta {
    grid-column: 2;
  }
  .diff-block__meta {
    display: block;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
  }
}
.grouping-switch {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--line-hair) solid var(--color-line);
}
.grouping-switch__option {
  min-height: 36px;
  padding: 0 var(--space-3) 0 18px;
  border: 0;
  border-inline-start: var(--line-marker) solid transparent;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}
.grouping-switch__option[aria-pressed="true"] {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
#issues:not([data-ready]) .grouping-switch {
  visibility: hidden;
}
@media (max-width: 480px) {
  .grouping-switch {
    flex: 1 1 100%;
  }
  .grouping-switch__option {
    flex: 1 1 0;
    min-height: 44px;
    font-size: var(--font-size-stepper);
  }
}
.query-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.query-input__label {
  flex-basis: 100%;
  color: var(--color-muted);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
.query-input__field {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-body);
}
.query-input__submit {
  padding: var(--space-2) var(--space-4);
  border: var(--line-hair) solid var(--color-ink);
  border-radius: var(--radius-max);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  cursor: pointer;
}
.query-input__error {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-label);
}
.query-input__error[hidden] {
  display: none;
}
.query-input--card {
  padding: 18px;
  background: var(--color-surface);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
}
.query-input--card .query-input__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
  letter-spacing: normal;
  text-transform: none;
}
.query-input__box {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}
.query-input--card .query-input__field {
  height: 44px;
  box-sizing: border-box;
  padding-right: 44px;
  background: var(--color-bg);
  font-size: var(--font-size-input);
}
.query-input--card .query-input__submit {
  height: 44px;
  padding: 0 22px;
  box-sizing: border-box;
  font-size: var(--font-size-button);
  font-weight: 600;
}
.query-input__clear {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 44px;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--font-size-input);
  cursor: pointer;
}
.query-input__clear[hidden] {
  display: none;
}
.query-input__selectors {
  flex-basis: 100%;
  margin-top: var(--space-2);
}
.query-input__selectors summary {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.query-input__hint {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.query-input--card {
  align-items: flex-end;
}
.query-input__box:has(+ .port-chooser:not([hidden])) {
  flex: 999 1 320px;
}
.port-chooser {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.port-chooser[hidden],
.port-chooser__menu[hidden],
.port-chooser__note[hidden] {
  display: none;
}
.port-chooser__label {
  /* board G: "Ports" stands on the "Host" label's line, above the toggles */
  position: absolute;
  bottom: 100%;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-label);
  white-space: nowrap;
}
.port-chooser__toggles,
.port-chooser__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.port-chooser__port,
.port-chooser__preset,
.port-chooser__add {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--font-size-button);
  cursor: pointer;
}
.port-chooser__port {
  padding: 0 14px 0 18px;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
}
.port-chooser__port[aria-pressed="true"] {
  padding-inline-start: calc(18px + var(--line-hair) - var(--line-marker));
  border-color: var(--color-ink);
  border-inline-start-width: var(--line-marker);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.port-chooser__add {
  padding: 0;
  border-style: dashed;
  font-size: var(--font-size-input);
}
.port-chooser__preset {
  padding: 0 14px;
  font-family: var(--font-sans);
}
.port-chooser__field {
  width: 8em;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-input);
}
.port-chooser__note {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-label);
}
.guide-tool .query-input__field,
.guide-tool .query-input__submit {
  min-height: 44px;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .guide-tool .query-input__field {
    flex-basis: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }
  .guide-tool .query-input__submit {
    flex-basis: 100%;
    min-height: 44px;
  }
  /* the chooser wraps under the host field: its label returns above its toggles */
  .port-chooser__label {
    position: static;
    margin-bottom: 0;
  }
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-max);
  font-family: var(--font-sans);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  cursor: pointer;
}
.button--primary {
  border: var(--line-hair) solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 600;
}
.button--secondary {
  border: var(--line-hair) solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
}
.page-inspector {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.page-inspector__sep {
  color: var(--color-muted);
}
.page-inspector__name {
  color: var(--color-ink);
  font-size: var(--font-size-inspector);
  font-weight: 650;
}
.inspector-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.inspector-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: -10px 0 12px;
  border-bottom: var(--line-hair) solid var(--color-line);
}
.inspector-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 14px 8px 20px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-caps);
  text-decoration: none;
  text-transform: uppercase;
}
.inspector-tabs__tab[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 700;
}
/* The marker of the current inspector: a bar left of the label, down to the rule (board G). */
.inspector-tabs__tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: -1px;
  width: var(--line-marker);
  background: var(--color-ink);
}
.inspector-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.inspector-examples__chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  text-decoration: none;
}
.inspector-examples__chip:hover {
  color: var(--color-ink);
}
.inspector-run__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
/* Back link, share and export sit together at the end of the run title's line. */
.inspector-run__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-inline-start: auto;
}
.inspector-run__target {
  margin: 0;
  font-size: var(--font-size-target);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.inspector-backlink,
.inspector-own {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  text-decoration: none;
}
.inspector-backlink:hover,
.inspector-own:hover {
  color: var(--color-ink);
}
.inspector-backlink__grade {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
/* A section's h2 stands above its content; the evidence blocks are the cards (board G). */
.inspector-section {
  margin-top: 32px;
}
.inspector-section > h2::first-letter {
  text-transform: uppercase;
}
.inspector-section h2 {
  margin: 0 0 12px;
  font-size: var(--font-size-h2);
  font-weight: 650;
}
/* The band scrolls inside its column when its named lines need more room than the page gives. */
.inspector-band {
  /* board G: the plate stands clear of the h1; the label band used to give this distance */
  margin: var(--space-5) 0 0;
  overflow-x: auto;
}
.inspector-band__inner {
  width: max-content;
  min-width: 100%;
}
.inspector-band__lines {
  display: grid;
  grid-auto-columns: minmax(40px, 1fr);
  grid-auto-flow: column;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.inspector-band__line {
  display: flex;
  flex-direction: column;
  min-width: min-content;
  gap: 0;
  padding: 0 2px;
  text-align: center;
}
.inspector-band__short {
  /* centred on its column, free to spread over its neighbours'; alternate lines use two rows */
  display: flex;
  justify-content: center;
  width: 0;
  margin: 0 auto;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  line-height: 16px;
  white-space: nowrap;
}
/* Even lines put their code on the codes' row and their name on a third row below. */
.inspector-band__line:nth-child(even) {
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding-top: 16px;
}
.inspector-band__line[data-tone="warn"] .inspector-band__short {
  color: var(--status-warn-text);
  font-weight: 700;
}
.inspector-band__line[data-tone="fail"] .inspector-band__short {
  color: var(--status-fail-text);
  font-weight: 700;
}
.inspector-band__code {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-band-code);
  line-height: 16px;
}
.inspector-band__caption {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.inspector-checks .inspector-checks__title {
  display: inline;
  margin: 0;
}
.inspector-checks__card {
  /* board F's card: the rows inside one frame, divided by the rows' own top rule */
  margin-top: var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.inspector-checks__card > :first-child {
  border-top: 0;
}
.inspector-checks__card > .evidence-section__link {
  margin-top: 0;
}
@media (max-width: 480px) {
  .inspector-checks__card > .evidence-section__link {
    margin-inline-start: var(--space-4);
  }
}
.inspector-checks__meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
/* The port tabs of a run over several ports (3.3): the marker stands at the current port. */
.inspector-ports__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-5) 0 0;
  border-bottom: var(--line-hair) solid var(--color-line);
}
.inspector-ports__tab {
  display: inline-flex;
  align-items: baseline;
  padding: 8px 14px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  text-decoration: none;
}
.inspector-ports__tab[aria-current="true"] {
  color: var(--color-ink);
  font-weight: 700;
}
.inspector-ports__meta {
  margin-inline-start: var(--space-1);
  font-weight: 400;
}
/* the port's worst status as a tone bar beside its name */
.inspector-ports__meta[data-tone]::before {
  content: "";
  display: inline-block;
  width: var(--line-marker);
  height: 0.8em;
  margin-inline: var(--space-2) var(--space-1);
  background: var(--status-pass-mark);
}
.inspector-ports__meta[data-tone="warn"]::before { background: var(--status-warn-mark); }
.inspector-ports__meta[data-tone="fail"]::before { background: var(--status-fail-mark); }
.inspector-ports__meta[data-tone="warn"] {
  color: var(--status-warn-text);
}
.inspector-ports__meta[data-tone="fail"] {
  color: var(--status-fail-text);
}
.inspector-ports[data-ready] .inspector-port:not([data-shown]) {
  display: none;
}
.inspector-share__copy,
.inspector-copy {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-max);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  text-decoration: underline;
  cursor: pointer;
}
.inspector-share__copy:hover,
.inspector-copy:hover {
  color: var(--color-ink);
}
.inspector-share__copy[hidden],
.inspector-copy[hidden] {
  display: none;
}
.inspector-export {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.inspector-export__copy,
.inspector-export__download {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-max);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  text-decoration: underline;
  cursor: pointer;
}
.inspector-export__copy:hover,
.inspector-export__download:hover {
  color: var(--color-ink);
}
.inspector-export__copy[hidden],
.inspector-export__download[hidden] {
  display: none;
}
.inspector-export__copy:disabled,
.inspector-export__download:disabled {
  color: var(--color-muted);
  cursor: default;
  opacity: 0.5;
}
.inspector-export__status {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.inspector-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) 0;
  background: var(--color-surface);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  list-style: none;
}
.inspector-suggest[hidden] {
  display: none;
}
.inspector-suggest [role="option"] {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.inspector-suggest [role="option"][aria-selected="true"] {
  background: var(--color-bg);
}
.inspector-shell__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.inspector-shell__hint[hidden] {
  display: none;
}
/* A notice in the result region: board F's card, a warn marker for a refusal to wait out. */
.inspector-notice {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-small);
}
.inspector-notice[data-tone="warn"] {
  border-inline-start: var(--line-warn) solid var(--status-warn-mark);
}
.inspector-tabs .inspector-help__open {
  margin-inline-start: auto;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  cursor: pointer;
}
.inspector-help__open:hover {
  color: var(--color-ink);
}
.inspector-help__open[hidden] {
  display: none;
}
.inspector-help:not([open]) {
  display: none;
}
.inspector-help {
  box-sizing: border-box;
  width: min(640px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-4));
  padding: var(--space-5);
  overflow-y: auto;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
}
.inspector-help::backdrop {
  background: var(--color-bg);
  opacity: 0.8;
}
.inspector-help h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-strong);
}
.inspector-help h3 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
.inspector-help p {
  margin: 0 0 var(--space-2);
}
.inspector-help__examples,
.inspector-help__resolvers,
.inspector-help__flags,
.inspector-help__types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.inspector-help__keys {
  border-collapse: collapse;
  font-size: var(--font-size-small);
}
.inspector-help__keys th,
.inspector-help__keys td {
  padding: var(--space-1) var(--space-3) var(--space-1) 0;
  text-align: start;
  font-weight: inherit;
  vertical-align: baseline;
}
.inspector-help kbd {
  padding: 0 var(--space-1);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.inspector-help__guide {
  margin-top: var(--space-4);
}
.inspector-help__close {
  min-width: 44px;
  min-height: 44px;
  margin-top: var(--space-4);
  padding: 0 var(--space-3);
  background: transparent;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}
.inspector-help__close:hover {
  color: var(--color-ink);
}
.inspector-related {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: var(--line-hair) dashed var(--color-line);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.inspector-related__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline-start: var(--space-2);
  color: var(--color-ink);
}
/* The DNS builder: a card of labelled rows; each choice is board G's port toggle, its native
   checkbox or radio kept (visually hidden, still focusable) for the dns island and the form. */
.dns-builder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 18px;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.dns-builder__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dns-builder__label {
  color: var(--color-muted);
  font-size: var(--font-size-label);
}
.dns-builder__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dns-builder__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 14px 0 18px;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}
.dns-builder__toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.dns-builder__toggle:has(input:checked) {
  padding-inline-start: calc(18px + var(--line-hair) - var(--line-marker));
  border-color: var(--color-ink);
  border-inline-start-width: var(--line-marker);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.dns-builder__toggle:has(input:focus-visible) {
  outline: var(--line-marker) solid var(--color-ink);
  outline-offset: var(--line-hair);
}
.dns-builder__select {
  align-self: flex-start;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-input);
}
.dns-builder__note {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.dns-builder__note[hidden] {
  display: none;
}
@media (max-width: 480px) {
  .inspector-tabs__tab {
    min-height: 44px;
  }
  .page-inspector {
    /* board M's phone header holds wordmark, Theme and the menu; the tab row names the inspector */
    display: none;
  }
  /* The tab row keeps one line and scrolls inside, so the help button stays in it. */
  .inspector-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  /* The back link takes its own line; Copy link and the exports stand on one line under it,
     the first flush with the run title, each button a 44 px target. */
  .inspector-run__actions {
    margin-inline-start: 0;
    column-gap: 0;
    row-gap: 0;
  }
  .inspector-backlink {
    flex-basis: 100%;
  }
  .inspector-export {
    flex-wrap: nowrap;
    gap: 0;
  }
  .inspector-run__actions > :is(.inspector-share, .inspector-export):first-of-type > button:first-child {
    padding-inline-start: 0;
  }
}
.page-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--layout-gutter);
}
.page-header img {
  display: block;
  height: 2.5rem;
  width: auto;
}
.page-tagline {
  flex: 1 1 auto;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.page-menu {
  display: flex;
  align-items: center;
}
.page-menu::details-content {
  content-visibility: visible;
}
.page-menu__button {
  display: none;
  list-style: none;
  cursor: pointer;
}
@supports not selector(::details-content) {
  .page-menu__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    border: var(--line-hair) solid var(--color-line);
    border-radius: var(--radius-max);
  }
}
.page-menu__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-ink);
}
.page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.page-nav a,
.page-footer a {
  color: var(--color-muted);
  text-decoration: none;
}
.page-footer a {
  color: var(--color-ink);
}
.page-nav a:hover,
.page-footer a:hover {
  color: var(--color-ink);
}
.page-nav a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}
/* The Inspectors menu (board `D3 · Inspectors menu (open)`): a details whose panel hangs under
   the header's right edge. */
.nav-menu {
  position: static;
}
.nav-menu__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  cursor: pointer;
}
.nav-menu__button::-webkit-details-marker {
  display: none;
}
.nav-menu__button:hover,
.nav-menu[open] > .nav-menu__button,
.nav-menu--current > .nav-menu__button {
  color: var(--color-ink);
}
.nav-menu[open] > .nav-menu__button,
.nav-menu--current > .nav-menu__button {
  font-weight: 600;
}
.nav-menu__chevron {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: 0 2px 3px;
  border: solid currentColor;
  border-width: 0 var(--line-hair) var(--line-hair) 0;
  transform: rotate(45deg);
}
.nav-menu[open] .nav-menu__chevron {
  margin-block: 3px 0;
  transform: rotate(225deg);
}
.nav-menu__panel {
  position: absolute;
  z-index: 2;
  top: calc(100% - var(--space-4) + 10px);
  right: var(--layout-gutter);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 400px;
  max-width: 100%;
  padding: 6px;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.nav-menu__item {
  gap: 2px;
  min-height: 44px;
  padding: 8px 12px;
}
.page-nav .nav-menu__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border-radius: var(--radius-max);
  color: var(--color-ink);
}
.nav-menu__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-menu__desc {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.page-nav .nav-menu__all {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 12px;
  border-top: var(--line-hair) solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--font-size-small);
}
.theme-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  margin-inline-start: var(--space-2);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--color-ink);
}
main {
  box-sizing: border-box;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--layout-gutter);
}
main h1 {
  font-size: var(--font-size-h1);
  letter-spacing: var(--font-tracking-display);
}
main p {
  color: var(--color-muted);
}
main a {
  color: var(--color-ink);
}
.page-footer {
  box-sizing: border-box;
  max-width: var(--layout-max-width);
  margin: 56px auto 0;
  padding: 0 var(--layout-gutter);
  padding-bottom: 40px;
}
.page-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 48px;
  padding-top: 24px;
  border-top: var(--line-hair) solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.page-footer__about {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.page-footer p {
  margin: 0;
}
.page-footer__version {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.page-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
}
.page-footer__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
.page-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
/* The inspector index `/tools` (spec v2-site-nav, requirement 7). */
.tool-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.tool-card h2 {
  margin: 0;
  font-size: var(--font-size-h2);
}
.tool-card p {
  margin: 0;
}
main .tool-card__tagline {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
.tool-card__takes {
  font-size: var(--font-size-small);
}
.tool-card form {
  margin-top: var(--space-2);
}
.tool-card > a {
  margin-top: var(--space-2);
}
.tool-guides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
}
.tool-guides a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
/* The home page's grade legend (spec v2-site-nav, requirement 12). */
.score-key__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.score-key__row {
  display: contents;
}
.score-key__row[data-tone="pass"] { --key-tone: var(--status-pass-text); }
.score-key__row[data-tone="warn"] { --key-tone: var(--status-warn-text); }
.score-key__row[data-tone="fail"] { --key-tone: var(--status-fail-text); }
.score-key__letter {
  color: var(--key-tone);
  font-weight: var(--font-weight-bold);
}
.score-key dd {
  margin: 0;
}
.score-key__descriptor {
  font-weight: 600;
}
.score-key__meaning {
  color: var(--color-muted);
}
/* The A-label beside a decoded domain (spec v2-site-nav, requirement 16). */
.idn-alabel {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
}
.guide-article {
  max-width: 72ch;
}
.guide-lede {
  font-size: var(--font-size-h2);
}
.guide-tool {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.guide-tool > h2 {
  margin-top: 0;
}
.guide-tool + .guide-tool {
  margin-top: var(--space-4);
}
.guide-tool__hint {
  font-size: var(--font-size-small);
}
.guide-related {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--line-hair) solid var(--color-line);
}
.guide-index section {
  margin-bottom: var(--space-6);
}
main h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.01em;
  margin-top: var(--space-6);
}
main h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  margin-top: var(--space-5);
}
main ul,
main ol {
  padding-left: var(--space-5);
  color: var(--color-muted);
}
main pre {
  overflow-x: auto;
  padding: var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
main code {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
main table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}
main th,
main td {
  padding: var(--space-2);
  border-bottom: var(--line-hair) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
main th {
  color: var(--color-ink);
}
main td {
  color: var(--color-muted);
}
.compare-lede {
  font-size: var(--font-size-h2);
}
.compare-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-small);
}
.compare-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0;
}
.compare-table summary {
  cursor: pointer;
}
.row-detail {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-weight: var(--font-weight-regular);
}
.compare-sym {
  font-weight: var(--font-weight-bold);
}
.compare-sym[data-sym="yes"] { color: var(--status-pass-mark); }
.compare-sym[data-sym="part"] { color: var(--status-warn-mark); }
.compare-sym[data-sym="no"] { color: var(--status-fail-mark); }
.compare-sym[data-sym="oos"] { color: var(--color-muted); }
.compare-honesty,
.compare-method {
  margin-top: var(--space-8);
}
.compare-cta {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.status-banner {
  font-size: var(--font-size-h2);
  color: var(--color-ink);
}
.status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4);
}
.status-card {
  --status-card-mark: var(--color-muted);
  padding: var(--space-3) var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  border-inline-start-width: var(--line-marker);
  border-inline-start-color: var(--status-card-mark);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.status-card[data-state="operational"] { --status-card-mark: var(--status-pass-mark); }
.status-card[data-state="degraded"] { --status-card-mark: var(--status-warn-mark); }
.status-card[data-state="down"] { --status-card-mark: var(--status-fail-mark); }
.status-card[data-state="paused"] { --status-card-mark: var(--color-muted); }
.status-card h3,
.status-incident h3 {
  margin: 0;
}
.status-card p,
.status-incident p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-small);
}
.status-incident {
  padding: var(--space-3) 0;
  border-bottom: var(--line-hair) solid var(--color-line);
}
#spectrum[data-refreshing] g[data-protocol]:not([data-live]) {
  opacity: 0.4;
}
#result:has(#recheck[data-stream-state="running"]) :is(#diff, #issues, #evidence, #passed) {
  opacity: 0.6;
}
.result-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
.result-hero__title {
  flex: 999 1 360px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.result-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.result-hero__actions p,
.result-hero__actions form {
  margin: 0;
}
#result-header h1 {
  margin: 0;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--font-tracking-display);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
/* One label is one atomic box: the h1 breaks between labels (after a dot), never at a hyphen;
   a label wider than the line still wraps inside its own box (v2-result-polish R13). */
.result-hero__label {
  display: inline-block;
  max-width: 100%;
}
.hard-fail {
  margin: 0;
  color: var(--status-fail-text);
  font-weight: var(--font-weight-strong);
}
.hard-fail__sentence {
  padding-inline-start: var(--space-3);
  border-inline-start: var(--line-warn) solid var(--status-fail-mark);
}
.hard-fail__without {
  color: var(--color-muted);
  font-weight: var(--font-weight-regular);
}
#spectrum {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  column-gap: 14px;
}
#spectrum > :is(#spectrum-sentence, #spectrum-stepper, .legend-row) {
  grid-column: 1 / -1;
}
#trace {
  display: contents;
}
#result {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}
#hard-fail-slot:empty,
#diff:not(:has(*)) {
  display: none;
}
#issues {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.section-head--split {
  justify-content: space-between;
}
.attention-meta {
  flex: 1 1 auto;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.issue-group {
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.issue-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px var(--space-4);
}
.issue-group__label {
  margin: 0;
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-strong);
}
.issue-group__count {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
}
#evidence {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.evidence-meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.evidence-tabs {
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.evidence-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--line-hair) solid var(--color-line);
}
.evidence-tabs__tab {
  padding: 12px 18px 12px 24px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.evidence-tabs__tab[aria-current="true"] {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.evidence-tabs__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 18px;
}
.evidence-tabs[data-ready] .evidence-tabs__panel:not([data-shown]) {
  display: none;
}
.selector-panel {
  padding: 0 18px var(--space-4);
}
.evidence-tabs[data-ready] .selector-panel:not([data-shown]) {
  display: none;
}
.selector-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
/* The frame's form look: a caption label above, the field as wide as the row allows. */
.selector-form label {
  flex-basis: 100%;
  color: var(--color-muted);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
}
.selector-form input {
  flex: 1 1 200px;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-body);
}
.evidence-tabs__caption {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.evidence-tabs__scroll {
  overflow-x: auto;
}
.evidence-tabs__compact {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--font-size-evidence);
}
.evidence-tabs__compact th {
  padding: 6px 12px;
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  text-align: left;
}
.evidence-tabs__compact th {
  border-bottom: 0;
}
.evidence-tabs__compact td {
  padding: 8px 12px;
  border-top: var(--line-hair) solid var(--color-line);
  border-bottom: 0;
  color: var(--color-ink);
}
.evidence-tabs__compact :is(th, td):first-child {
  padding-left: 0;
}
.evidence-tabs__compact strong {
  font-weight: var(--font-weight-bold);
}
.evidence-tabs__blocks > summary {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.evidence-tabs__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.evidence-tabs__feeds {
  flex: 1 1 auto;
  margin: 0;
}
.evidence-tabs__reason {
  margin: 0;
  color: var(--color-muted);
}
.evidence-tabs__panel table {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.evidence-tabs__swipe {
  display: none;
}
.clean-bar {
  padding: 0 var(--space-4);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: transparent;
}
.clean-bar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
.clean-bar__summary::-webkit-details-marker {
  display: none;
}
.clean-bar__count {
  color: var(--status-pass-text);
  font-weight: var(--font-weight-strong);
}
.clean-bar__label {
  color: var(--color-muted);
}
.clean-bar__show {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.legend-row {
  margin-block-start: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  color: var(--color-muted);
}
#legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-label);
  font-family: var(--font-mono);
  color: var(--color-muted);
}
#legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.legend__fixed[hidden] {
  display: none;
}
.legend__fixed:empty {
  display: none;
}
.legend__mark {
  display: inline-block;
  box-sizing: border-box;
  height: 14px;
}
.legend__mark[data-tone="pass"] {
  width: var(--line-pass);
  background: var(--status-pass-mark);
}
.legend__mark[data-tone="warn"] {
  width: var(--line-warn);
  background: var(--status-warn-mark);
}
.legend__mark[data-tone="fail"] {
  width: var(--line-fail);
  background: var(--status-fail-mark);
}
.legend__mark[data-tone="fix"] {
  position: relative;
  width: var(--line-fail);
  border: var(--line-hair) solid var(--status-fix-mark);
  border-bottom: 0;
}
.legend__mark[data-tone="fix"]::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  box-sizing: border-box;
  width: var(--space-2);
  height: var(--space-2);
  border: var(--line-pass) solid var(--status-fix-mark);
  border-radius: var(--radius-round);
  background: var(--color-bg);
  transform: translateX(-50%);
}
.since-meta {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.first-run {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) 22px;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.first-run__title {
  flex: 0 0 100%;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-strong);
}
.first-run__text {
  flex: 1 1 320px;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-text);
}
.first-run__ghost {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 240px;
}
.first-run__row {
  display: flex;
  gap: 1px;
  align-items: center;
  height: 10px;
}
.first-run__cell {
  position: relative;
  flex: 1;
}
/* Board FFirst: one waterfall row, a pass a 1 px hairline across its cell, warn and fail a block. */
.first-run__cell {
  height: 100%;
  background: var(--status-untested-mark);
}
.first-run__cell[data-tone="pass"] {
  height: var(--line-hair);
  background: var(--status-pass-hair);
}
.first-run__cell[data-tone="warn"] { background: var(--status-warn-mark); }
.first-run__cell[data-tone="fail"] { background: var(--status-fail-mark); }
.first-run__dashed {
  box-sizing: border-box;
  height: 10px;
  border: var(--line-hair) dashed var(--color-line);
}
.first-run__dashed:last-child { opacity: .5; }
#spectrum-stepper {
  display: none;
}
@media (max-width: 480px) {
  /* Board M draws no legend under the trace and no counts beside the attention heading. */
  .legend-row,
  .attention-meta,
  .evidence-tabs__feeds,
  .clean-bar__label {
    display: none;
  }
  .page-header {
    position: relative;
    flex-wrap: nowrap;
    gap: 0;
    padding: 14px var(--layout-gutter);
  }
  .page-header > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-inline-end: auto;
  }
  .page-header img {
    height: 33px;
  }
  .page-tagline {
    display: none;
  }
  .page-menu {
    order: 3;
  }
  .theme-toggle {
    order: 2;
    min-width: 44px;
    min-height: 44px;
    margin-inline: 0 var(--space-1);
    padding: 0 10px;
  }
  .page-menu__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    border: var(--line-hair) solid var(--color-line);
    border-radius: var(--radius-max);
  }
  .page-menu:not([open]) .page-nav {
    display: none;
  }
  .page-nav {
    position: absolute;
    inset-inline: var(--layout-gutter);
    top: 100%;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: var(--line-hair) solid var(--color-line);
    border-radius: var(--radius-max);
    background: var(--color-surface);
  }
  .page-nav a,
  .page-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .page-nav a {
    padding-inline: 14px;
  }
  /* Board M's footer: one column, the version line last. */
  .page-footer {
    margin-top: 34px;
    padding-bottom: 24px;
  }
  .page-footer__inner {
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
  }
  .page-footer__about {
    display: contents;
  }
  .page-footer__nav {
    flex-direction: column;
    gap: 16px;
  }
  .page-footer__version {
    order: 2;
    font-size: var(--font-size-label);
  }
  .page-footer__heading {
    font-size: var(--font-size-label);
  }
  /* Board M's sheet: the menu's summary is the "Inspectors" label, its panel always shown. */
  .nav-menu::details-content {
    content-visibility: visible;
  }
  .nav-menu__button {
    padding: 12px 14px 4px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
    letter-spacing: var(--font-tracking-caps);
    text-transform: uppercase;
    pointer-events: none;
  }
  /* Without ::details-content the panel follows `open`: the label stays a disclosure. */
  @supports not selector(::details-content) {
    .nav-menu__button {
      pointer-events: auto;
      cursor: pointer;
    }
  }
  .nav-menu[open] > .nav-menu__button,
  .nav-menu--current > .nav-menu__button {
    color: var(--color-muted);
    font-weight: var(--font-weight-regular);
  }
  .nav-menu__chevron {
    display: none;
  }
  .nav-menu__panel {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .page-nav .nav-menu__item {
    padding: 6px 14px;
    border-radius: 0;
  }
  .page-nav .nav-menu__all {
    margin-top: 0;
    padding: 0 14px;
    border-top: 0;
    font-size: var(--font-size-text);
  }
  .nav-menu + a {
    border-top: var(--line-hair) solid var(--color-line);
  }
  /* The sheet's site links are body text in ink, as board M draws them. */
  .nav-menu ~ a {
    color: var(--color-ink);
    font-size: var(--font-size-body);
  }
  main {
    padding: 14px var(--layout-gutter);
  }
  #result {
    gap: 26px;
  }
  .result-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }
  .result-hero__title {
    display: contents;
  }
  #run-line,
  #progress,
  .result-hero__actions {
    grid-column: 1 / -1;
  }
  #progress:empty {
    display: none;
  }
  #result-grade {
    grid-column: 1;
    grid-row: 2;
  }
  #result-header.result-hero h1 {
    grid-column: 2;
    grid-row: 2;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .result-hero__actions {
    width: 100%;
    gap: var(--space-2);
  }
  #recheck {
    display: flex;
    flex: 1;
  }
  #recheck-button {
    flex: 1;
    min-height: 44px;
  }
  #share {
    min-height: 44px;
  }
  #spectrum {
    grid-template-columns: minmax(0, 1fr);
  }
  #spectrum-stepper {
    display: flex;
    order: 2;
    align-items: stretch;
    gap: var(--space-2);
    margin-block-start: 14px;
  }
  #spectrum-stepper button:disabled {
    color: var(--color-line);
    cursor: default;
  }
  #spectrum-stepper button {
    min-width: 44px;
    min-height: 44px;
    border: var(--line-hair) solid var(--color-line);
    border-radius: var(--radius-max);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    cursor: pointer;
  }
  .legend-row {
    order: 5;
  }
  .evidence-tabs__swipe {
    display: block;
    margin: 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-label);
  }
  .evidence-tabs__panel table {
    display: block;
    overflow-x: auto;
  }
  .evidence-tabs__compact {
    min-width: 520px;
  }
  .evidence-tabs__compact :is(th, td) {
    padding-inline: 10px;
  }
  .evidence-tabs__panel .evidence-tabs__compact {
    display: table;
    overflow-x: visible;
    font-size: var(--font-size-evidence);
  }
  .evidence-tabs__panel :is(th, td) {
    white-space: nowrap;
  }
  .evidence-tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px 12px 20px;
  }
  .evidence-tabs__panel {
    padding: 14px;
  }
  .evidence-tabs__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .clean-bar {
    padding: 0 14px;
  }
  .clean-bar__summary {
    min-height: 44px;
  }
  .clean-bar__show {
    font-size: var(--font-size-stepper);
  }
  :is(#result-header, #diff, #issues) :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  #history :is(th, td) {
    padding-inline: var(--space-1);
  }
}
#legend li[hidden] {
  display: none;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.section-head h2 {
  margin: 0;
}
.section-head p {
  margin: 0;
}
#spectrum-sentence {
  margin: 0;
}
#spectrum-sentence:empty {
  display: none;
}
.share-dialog {
  box-sizing: border-box;
  width: min(640px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-5);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
}
.share-dialog::backdrop {
  background: var(--color-bg);
  opacity: 0.8;
}
.share-dialog h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-strong);
}
.share-dialog__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}
.share-dialog__close:hover {
  color: var(--color-ink);
}
.share-dialog__tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  border-bottom: var(--line-hair) solid var(--color-line);
}
.share-dialog__tab {
  padding: var(--space-2) var(--space-3);
  border-block: 0;
  border-inline-end: 0;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  cursor: pointer;
}
.share-dialog__tab[aria-selected="true"] {
  color: var(--color-ink);
}
.share-dialog__styles {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.share-dialog__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.share-dialog__field {
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  resize: none;
}
.share-dialog__preview {
  margin-top: var(--space-4);
}
.share-dialog__badge {
  display: block;
}
.share-dialog__card {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--line-hair) solid var(--color-line);
}
/* The h1 and its tools share a line, the tools at its end (board F's hero actions); on a phone
   the tools wrap under the h1 on one line. */
.evidence-view__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
.evidence-view__head h1 {
  margin: 0;
}
.evidence-view__tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}
.result-hero__actions .inspector-help__open,
.evidence-view__tools .inspector-help__open {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  cursor: pointer;
}
#evidence > .inspector-export {
  margin: var(--space-2) 0 0;
}
#evidence > .inspector-export > button:first-child {
  padding-inline-start: 0;
}
.evidence-section__rows {
  margin: var(--space-3) 0;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.evidence-section__rows > :first-child {
  border-top: 0;
}
@media (max-width: 480px) {
  .evidence-section__rows > .evidence-section__link {
    margin-inline-start: var(--space-4);
  }
}
.evidence-view__explore ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.evidence-view__explore a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
/* A check row's links to its blocks: small, under the row's text column. */
.evidence-section__link {
  display: inline-block;
  margin: 0 var(--space-3) var(--space-2) 116px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.evidence-section__link + .evidence-section__link {
  margin-left: 0;
}
/* Tap targets at phone width (v2-inspector-shell R29). */
@media (max-width: 480px) {
  .evidence-section__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: 0;
  }
}
/* A protocol view stands in a block's place: board G's section heading above a card. */
/* board G's distance from one section's card to the next heading */
.protocol-view {
  min-width: 0;
  max-width: 100%;
  margin-block-start: var(--space-9);
}
.protocol-view__title {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-h2);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.protocol-view__card {
  min-width: 0;
  overflow-x: auto;
  padding: 18px;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.protocol-view__note {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}
.protocol-view__empty {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.protocol-view__feeds {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}
/* The TLS port view (v2-tls-ui): board G's addresses table and certificate section. */
.protocol-view__anchor {
  display: block;
}
.tls-addresses__scroll {
  min-width: 0;
  overflow-x: auto;
}
.tls-addresses {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-ink);
  font-size: var(--font-size-text);
}
.tls-addresses th {
  padding: 12px 16px;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  text-align: left;
  white-space: nowrap;
}
.tls-addresses td {
  padding: 12px 16px;
  border-top: var(--line-hair) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  vertical-align: middle;
  white-space: nowrap;
}
.tls-addresses__address {
  font-weight: var(--font-weight-bold);
}
.tls-addresses td.tls-addresses__error {
  color: var(--status-fail-text);
  white-space: normal;
}
.tls-addresses__outcome {
  font-weight: var(--font-weight-bold);
}
.tls-addresses__leaf {
  margin-inline-start: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
}
.tls-addresses__leaf[data-tone="pass"] { color: var(--status-pass-text); }
.tls-addresses__leaf[data-tone="warn"] { color: var(--status-warn-text); }
.tls-band {
  display: block;
  width: 96px;
  height: 22px;
}
.tls-band rect { fill: var(--status-untested-mark); }
.tls-band rect[data-tone="pass"] { fill: var(--status-pass-mark); }
.tls-band rect[data-tone="warn"] { fill: var(--status-warn-mark); }
.tls-band rect[data-tone="fail"] { fill: var(--status-fail-mark); }
.tls-band rect[data-tone="fix"] { fill: var(--status-fix-mark); }
.tls-chain__cert {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
}
.tls-validity {
  margin-bottom: var(--space-4);
}
.tls-validity__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.tls-validity__bar {
  display: block;
  width: 100%;
  height: 10px;
}
/* board G: a pale pass track, the elapsed part in the pass line, the last days a pale amber zone */
.tls-validity__track { fill: var(--status-pass-mark); fill-opacity: 0.25; }
.tls-validity__elapsed { fill: var(--status-pass-mark); fill-opacity: 1; }
.tls-validity__warn { fill: var(--status-warn-mark); fill-opacity: 0.3; }
.tls-validity[data-state="expired"] .tls-validity__track,
.tls-validity[data-state="expired"] .tls-validity__elapsed,
.tls-validity[data-state="expired"] .tls-validity__warn { fill: var(--status-fail-mark); }
.tls-validity__marker {
  stroke: var(--color-ink);
  stroke-width: var(--line-marker);
  vector-effect: non-scaling-stroke;
}
.tls-validity__caption {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}
.tls-chip {
  display: inline-block;
  margin-inline-start: var(--space-1);
  padding: 0 var(--space-1);
  border: var(--line-hair) solid currentcolor;
  border-radius: var(--radius-max);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.tls-chip[data-tone="pass"] { color: var(--status-pass-text); }
.tls-chip[data-tone="warn"] { color: var(--status-warn-text); }
.tls-chip[data-tone="fail"] { color: var(--status-fail-text); }
.tls-chain__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}
.tls-chain__label {
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
}
.tls-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tls-chain__pill {
  /* the arrow before a pill hangs outside its border, so a wrapped row never ends in an arrow */
  position: relative;
  padding: 6px 12px;
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.tls-chain__pill[data-inferred] {
  border-style: dashed;
  color: var(--color-muted);
}
.tls-chain__pill:has(> .tls-chain__arrow) {
  margin-inline-start: var(--space-5);
}
.tls-chain__arrow {
  position: absolute;
  right: 100%;
  padding-inline-end: var(--space-2);
  color: var(--color-muted);
}
.tls-chain__verdict {
  list-style: none;
}
.tls-chain__crtsh,
.tls-chain__from {
  margin-inline-start: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-label);
}
@media (max-width: 480px) {
  /* a 44 px tap target at phone width, as the shell's value links */
  .tls-chain__crtsh {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.tls-chain__trust {
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
}
.tls-chain__trust[data-tone="pass"] { color: var(--status-pass-text); }
.tls-chain__trust[data-tone="warn"] { color: var(--status-warn-text); }
.tls-chain__trust[data-tone="fail"] { color: var(--status-fail-text); }
.tls-chain__more {
  margin-top: var(--space-3);
}
.tls-chain__more > summary {
  color: var(--color-muted);
  font-size: var(--font-size-label);
  cursor: pointer;
}
.tls-notices {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--line-hair) solid var(--status-warn-mark);
  color: var(--status-warn-text);
  font-size: var(--font-size-small);
}
.tls-notices__line {
  margin: 0;
}
.tls-notices__skipped {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0 var(--space-2);
  padding: 0;
  font-family: var(--font-mono);
  list-style: none;
}
.tls-certdiff__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--line-hair) solid var(--status-warn-mark);
  color: var(--status-warn-text);
  font-size: var(--font-size-small);
}
.tls-certdiff__banner > p {
  margin: 0;
}
.tls-certdiff__forget {
  padding: var(--space-1) var(--space-3);
  border: var(--line-hair) solid var(--status-warn-mark);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.protocol-view__card > .tls-addresses__scroll,
.protocol-view__card > .tls-protocols {
  /* board G draws the table and the grid as the card itself: they run to its edges */
  margin: -18px -18px 0;
  border: 0;
}
.protocol-view__card > .tls-addresses__scroll + *,
.protocol-view__card > .tls-protocols + * {
  margin-top: 18px;
}
.tls-protocols {
  /* board G's 1 px rules between cells; drawn by the cells, so an unfilled last row stays the
     card's surface instead of a grey block */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--line-hair);
  border: var(--line-hair) solid var(--color-line);
  background: var(--color-surface);
  overflow: hidden;
}
.tls-protocols__cell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  padding: 12px 16px;
  background: var(--color-surface);
  outline: var(--line-hair) solid var(--color-line);
  align-content: center;
}
.tls-protocols__bar {
  grid-row: span 2;
  width: 3px;
  height: 22px;
  background: var(--status-untested-mark);
}
.tls-protocols__cell[data-tone="pass"] .tls-protocols__bar { background: var(--status-pass-mark); }
.tls-protocols__cell[data-tone="warn"] .tls-protocols__bar { width: 5px; background: var(--status-warn-mark); }
.tls-protocols__cell[data-tone="fail"] .tls-protocols__bar { width: 6px; background: var(--status-fail-mark); }
.tls-protocols__name {
  color: var(--color-ink);
  font-size: var(--font-size-text);
  font-weight: 600; /* board G's cell name; as the submit button, no token holds 600 */
}
.tls-protocols__state {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.tls-probes {
  margin-top: var(--space-3);
}
.tls-probes > summary {
  color: var(--color-muted);
  font-size: var(--font-size-label);
  cursor: pointer;
}
.tls-probes__scroll {
  min-width: 0;
  overflow-x: auto;
}
.tls-probes table {
  border-collapse: collapse;
  font-size: var(--font-size-small);
}
.tls-probes th,
.tls-probes td {
  padding: var(--space-1) var(--space-3);
  border-top: var(--line-hair) solid var(--color-line);
  text-align: left;
  white-space: nowrap;
}
.tls-probes td {
  font-family: var(--font-mono);
}
.tls-probes__answer {
  color: var(--color-muted);
}
.csp-view__mode {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}
.csp-view__mode[data-tone="warn"] {
  color: var(--status-warn-text);
}
.csp-view__mode + .protocol-view__note {
  margin-top: var(--space-1);
}
.csp-view__count {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.csp-view__issues {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
  color: var(--color-ink);
  font-size: var(--font-size-small);
}
.csp-view__scroll {
  min-width: 0;
  margin-top: var(--space-3);
  overflow-x: auto;
}
.csp-view__table {
  width: 100%;
  border-collapse: collapse;
}
.csp-view__table tr + tr > * {
  border-top: var(--line-hair) solid var(--color-line);
}
.csp-view__directive,
.csp-view__sources {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  vertical-align: top;
  text-align: left;
}
.csp-view__directive {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: 600;
  white-space: nowrap;
}
.csp-view__source {
  display: inline-block;
  margin-inline-end: var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.csp-view__directive-issues {
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-4);
  font-size: var(--font-size-small);
}
.csp-view__directive-issues [data-tone="pass"] { color: var(--status-pass-text); }
.csp-view__directive-issues [data-tone="warn"] { color: var(--status-warn-text); }
.csp-view__directive-issues [data-tone="fail"] { color: var(--status-fail-text); }
/* The DNS part view: board G's section cards and its tab style (marker). */
.dns-view {
  min-width: 0;
  max-width: 100%;
}
.dns-view__summary {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  overflow-wrap: break-word;
}
.dns-view__meta {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-view__notices {
  display: contents;
}
.dns-view__notice {
  margin: 0 0 var(--space-2);
  color: var(--status-warn-text);
  font-size: var(--font-size-small);
}
.dns-view__tabs {
  margin-block-start: var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
}
.dns-view__nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--line-hair) solid var(--color-line);
}
.dns-view__tab {
  padding: 12px 18px 12px 24px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.dns-view__tab[aria-current="true"] {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.dns-view__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) 18px;
}
.dns-view__tabs[data-ready] .dns-view__panel:not([data-shown]) {
  display: none;
}
.dns-type {
  min-width: 0;
  overflow-x: auto;
  padding-block: var(--space-3);
}
/* One card level: types are sections of the tab panel, divided by a rule. */
.dns-type + .dns-type {
  border-top: var(--line-hair) solid var(--color-line);
}
.dns-type__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.dns-type__name {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: 700;
}
.dns-type__badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-type__badge[data-tone="pass"] { color: var(--status-pass-text); }
.dns-type__badge[data-tone="warn"] { color: var(--status-warn-text); }
.dns-type__badge[data-tone="muted"] { color: var(--color-muted); }
.dns-group {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-top: var(--line-hair) solid var(--color-line);
}
.dns-group__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-group__outcome {
  margin: var(--space-2) 0 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-group[data-outcome="unmeasured"] .dns-group__outcome {
  color: var(--color-muted);
}
.dns-group__servers {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.dns-group__server {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}
.dns-group__name {
  color: var(--color-ink);
}
.dns-group__transport,
.dns-group__source,
.dns-group__time {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-bar {
  display: inline-block;
  width: 96px;
  height: var(--line-marker);
  background: var(--color-line);
}
.dns-bar__fill {
  display: block;
  height: 100%;
  background: var(--color-muted);
}
.dns-record {
  margin-block-start: var(--space-2);
}
.dns-record > summary {
  cursor: pointer;
}
.dns-record__data {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  overflow-wrap: break-word;
}
.dns-record__human {
  display: block;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.dns-record__meta,
.dns-record__explain {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.dns-record__explain {
  display: none;
}
.dns-view[data-explain] .dns-record__explain {
  display: block;
}
.dns-view[data-hide-empty] .dns-group[data-outcome="no_records"],
.dns-view[data-hide-empty] .dns-group[data-outcome="nxdomain"] {
  display: none;
}
.dns-view[data-only-divergent] .dns-type:not([data-agreement="diverge"]):not([data-agreement="unmeasured"]) {
  display: none;
}
/* Compact keeps the lead group and every failure (Rule M); a server filter wins over it. */
.dns-view[data-compact]:not([data-server]) .dns-group:not([data-lead]):not([data-outcome="unmeasured"]),
.dns-view[data-compact]:not([data-server]) .dns-record__details {
  display: none;
}
.dns-record__serial {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-record__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-small);
}
.dns-record__details dt {
  color: var(--color-muted);
}
.dns-record__details dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}
.dns-record__details dd + dd {
  grid-column: 2;
}
.dns-record__server span {
  color: var(--color-muted);
}
.dns-view__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.dns-view__toolbar[hidden] {
  display: none;
}
.dns-view__toggle,
.dns-view__action {
  padding: var(--space-1) var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.dns-view__toggle[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-line);
}
.dns-view [data-off] {
  display: none;
}
.dns-view__all {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.dns-view__all[hidden],
.dns-server__filter[hidden] {
  display: none;
}
.dns-view__tab-badge {
  margin-inline-start: var(--space-2);
  font-size: var(--font-size-small);
  letter-spacing: 0;
  text-transform: none;
}
.dns-view__tab-badge[data-tone="pass"] { color: var(--status-pass-text); }
.dns-view__tab-badge[data-tone="warn"] { color: var(--status-warn-text); }
.dns-view__tab-badge[data-tone="muted"] { color: var(--color-muted); }
.dns-servers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.dns-server {
  min-width: 0;
  overflow-x: auto;
  padding-block: var(--space-3);
}
.dns-server + .dns-server {
  border-top: var(--line-hair) solid var(--color-line);
}
.dns-server__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.dns-server__name {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  font-weight: 700;
}
.dns-server__transport,
.dns-server__source,
.dns-server__measured,
.dns-server__median {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-server__filter {
  margin-inline-start: auto;
  padding: var(--space-1) var(--space-3);
  border: var(--line-hair) solid var(--color-line);
  border-radius: var(--radius-max);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.dns-server__types {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.dns-server__type {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
  font-size: var(--font-size-small);
}
.dns-server__type-name {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 700;
}
.dns-server__diverge,
.dns-server__outcome {
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-server__diverge[data-tone="warn"] { color: var(--status-warn-text); }
.dns-server__outcome {
  color: var(--color-muted);
}
.dns-server__record {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  overflow-wrap: break-word;
}
/* The DNS trace and DNSSEC views (spec v2-dns-ui, requirements 14 and 15). */
.dns-trace__meta,
.dns-chain__meta {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-trace__hops,
.dns-chain {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dns-hop,
.dns-level {
  padding-block: var(--space-2);
  border-top: var(--line-hair) solid var(--color-line);
}
.dns-hop__level {
  margin-inline-end: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-hop__zone,
.dns-level__zone {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  overflow-wrap: break-word;
}
.dns-hop__disagree,
.dns-level__badge {
  margin-inline-start: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-hop__disagree[data-tone="warn"],
.dns-level__badge[data-tone="warn"] { color: var(--status-warn-text); }
.dns-level__badge[data-tone="fail"] { color: var(--status-fail-text); }
.dns-hop__servers {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
.dns-hop__server {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}
.dns-hop__name {
  color: var(--color-ink);
}
.dns-hop__address,
.dns-hop__time,
.dns-level__latency {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-hop__error {
  color: var(--status-fail-text);
  font-size: var(--font-size-small);
}
.dns-hop__referral {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  overflow-wrap: break-word;
}
.dns-hop__answer,
.dns-level__record {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  overflow-wrap: break-word;
}
.dns-level__findings {
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-4);
  font-size: var(--font-size-small);
}
.dns-level__findings [data-tone="pass"] { color: var(--status-pass-text); }
.dns-level__findings [data-tone="warn"] { color: var(--status-warn-text); }
.dns-level__findings [data-tone="fail"] { color: var(--status-fail-text); }
.dns-level__records {
  margin-block-start: var(--space-2);
}
.dns-level__kind {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.dns-level__record {
  display: block;
}
.ip-card__address,
.ip-card__host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.ip-card__addr {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}
.ip-card__hostname {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}
.ip-card__none {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.ip-card__link {
  color: var(--color-muted);
  font-size: var(--font-size-label);
  text-decoration: underline;
}
.ip-card__link:hover {
  color: var(--color-ink);
}
.ip-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}
.ip-card__section {
  margin-top: var(--space-4);
}
.ip-card__section-title {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-strong);
}
.ip-card__map {
  margin: var(--space-2) 0 0;
}
.ip-card__raw {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.geoip-attribution {
  margin: var(--space-4) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-label);
}
.geoip-attribution a {
  color: inherit;
  text-decoration: underline;
}
.ip-explorer__summary {
  color: var(--color-ink);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}
.ip-explorer__rows {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.ip-explorer__row {
  margin-top: var(--space-3);
  min-width: 0;
}
.ip-explorer__text {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-label);
}
.ip-explorer__command {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  min-width: 0;
}
/* A long command wraps inside the card rather than running past it at phone width. */
.ip-explorer__code {
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}
.ip-explorer__docs {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-label);
}
.ip-explorer__docs a {
  color: var(--color-muted);
  text-decoration: underline;
}
.ip-headers__summary {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  cursor: pointer;
}
.ip-headers__hops {
  margin: var(--space-3) 0 0;
  padding-inline-start: var(--space-4);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.ip-headers__none {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}
.ip-headers__scroll {
  min-width: 0;
  margin-top: var(--space-3);
  overflow-x: auto;
}
.ip-headers__table {
  width: 100%;
  border-collapse: collapse;
}
.ip-headers__table tr + tr > * {
  border-top: var(--line-hair) solid var(--color-line);
}
.ip-headers__name,
.ip-headers__value {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  vertical-align: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.ip-headers__name {
  color: var(--color-ink);
  font-weight: 600;
  white-space: nowrap;
}
.ip-headers__value {
  color: var(--color-ink);
}
/* The raw header's copy control lines up with the facts grid's left edge. */
.ip-card__raw .inspector-copy {
  padding-inline-start: 0;
}
@media (max-width: 480px) {
  .ip-card__link,
  .geoip-attribution a,
  .ip-explorer__docs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* A summary keeps display: list-item, or it loses its disclosure marker. */
  .ip-explorer__summary,
  .ip-headers__summary {
    min-height: 44px;
    line-height: 44px;
  }
}

/* board G: the address in bold; the shell's link keeps its underline */
.tls-addresses__address .evidence-value__link {
  font-weight: inherit;
}
/* the copy control sits on the value's line at desktop width; a 44 px target at phone width */
[data-block^="tls.chain"] .inspector-copy {
  min-height: 0;
  padding-block: 0;
  vertical-align: baseline;
}
@media (max-width: 480px) {
  [data-block^="tls.chain"] .inspector-copy {
    min-height: 44px;
  }
}
.dns-group__via {
  display: inline-flex;
  gap: var(--space-2);
}
.dns-group__server,
.dns-hop__server {
  padding-block: var(--space-1);
}
.dns-group__server + .dns-group__server,
.dns-hop__server + .dns-hop__server {
  border-top: var(--line-hair) solid var(--color-line);
}
.dns-group__server .dns-bar,
.dns-hop__server .dns-bar {
  width: 100%;
  min-width: 48px;
}
.dns-hop__address {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.dns-hop__result {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.dns-level__zone,
.dns-level__latency {
  margin-inline-end: var(--space-4);
}
.dns-view__summary {
  color: var(--color-muted);
}
.dns-view__toolbar {
  margin-block: var(--space-3);
}
.dns-view__toggle + .dns-view__action {
  margin-inline-start: var(--space-4);
}
.dns-group__server .dns-bar,
.dns-hop__server .dns-bar {
  align-self: center;
}
.dns-record__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
}
.dns-record__details dd {
  grid-column: 2;
  margin: 0;
  overflow-wrap: anywhere;
}
.dns-record__details dt {
  grid-column: 1;
  color: var(--color-muted);
}
.dns-record__explain {
  max-width: 70ch;
  font-size: var(--font-size-small);
}
/* Server rows line up in columns across the card, so the bars of one group compare at a glance;
   on a phone each row is two lines: who, then how fast. */
.dns-group__server,
.dns-hop__server {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-2);
  align-items: center;
}
.dns-group__server .dns-bar,
.dns-hop__server .dns-bar {
  grid-column: 1;
}
.dns-group__time,
.dns-hop__time {
  grid-column: 2;
  text-align: end;
}
.dns-hop__referral,
.dns-hop__result {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .dns-group__server,
  .dns-hop__server {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(96px, 3fr) 4.5rem auto;
  }
  .dns-group__name,
  .dns-hop__name {
    grid-column: 1;
  }
  .dns-group__via,
  .dns-hop__address,
  .dns-hop__server > .evidence-value__link {
    grid-column: 2;
  }
  .dns-group__server .dns-bar,
  .dns-hop__server .dns-bar {
    grid-column: 3;
  }
  .dns-group__time,
  .dns-hop__time {
    grid-column: 4;
  }
  .dns-hop__server .ip-badges,
  .dns-hop__result {
    grid-column: 5;
  }
  .dns-hop__referral {
    grid-column: 1 / -1;
  }
}
/* Phone targets: every control of the DNS view is at least 44 px tall. */
@media (max-width: 480px) {
  .dns-view__toggle,
  .dns-view__action,
  .dns-view__all,
  .dns-server__filter,
  .dns-view__tab {
    min-height: 44px;
  }
  .dns-view__tab {
    display: inline-flex;
    align-items: center;
  }
}