/* Design tokens — sourced from design-reference/DESIGN.md.
   Where the YAML token block and the prose disagreed (e.g. button text
   color), the mockup screenshot was used as the tiebreaker since it's the
   actual rendered/approved output. */
:root {
  /* Canvas & surfaces */
  --bg: #0c0d0e;
  --surface: #141618;
  --surface-2: #1a1c1e;
  --surface-3: #1e2022;
  --surface-4: #282a2c;

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;

  /* Primary accent (amber) */
  --primary: #ffb77d;
  --primary-strong: #d97706;
  --primary-strong-hover: #e8900c;
  --on-primary-strong: #2f1500;
  --primary-subtle-bg: rgba(217, 119, 6, 0.12);

  /* Secondary accent (mint) */
  --secondary: #4ade9f;

  /* Status semantics */
  --pass: #34d399;
  --pass-bg: rgba(16, 185, 129, 0.10);
  --pass-border: rgba(16, 185, 129, 0.20);

  --fail: #f87171;
  --fail-bg: rgba(239, 68, 68, 0.10);
  --fail-border: rgba(239, 68, 68, 0.20);

  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.12);
  --warn-border: rgba(245, 158, 11, 0.24);

  --pending: #fbbf24;
  --pending-bg: rgba(217, 119, 6, 0.07);
  --pending-border: rgba(217, 119, 6, 0.16);

  /* Radius */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --gutter: 1.5rem;
  --gutter-mobile: 0.75rem;
  --margin: 2rem;
  --margin-mobile: 1rem;

  --max-width: 1440px;
  --topbar-height: 64px;
  --cluster-gap: 2rem;

  /* Icon badges: dark amber gradient with an amber border and glow */
  --badge-bg: linear-gradient(135deg, #1a1006, #2a1a0a);
  --badge-border: rgba(217, 119, 6, 0.25);
  --badge-glow: rgba(217, 119, 6, 0.65);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* Column gutters per DESIGN.md: 24px desktop, 16px tablet, 12px mobile. */
@media (max-width: 1023px) {
  :root {
    --gutter: 1rem;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--gutter-mobile);
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--margin);
}

@media (max-width: 767px) {
  .container {
    padding: 0 var(--margin-mobile);
  }
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12, 13, 14, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* Clusters (logo | nav links | GitHub) sit 32px apart; items inside a
   cluster sit 8-12px apart. */
.topbar-inner {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--cluster-gap);
}

.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.brand-logo {
  display: block;
  height: 28px;
  width: auto;
}

@media (min-width: 768px) {
  .brand-logo {
    height: 32px;
  }
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.topbar-nav a:hover {
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .topbar-nav {
    display: none;
  }
}

.topbar-github {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.topbar-github:hover {
  color: var(--text-primary);
}

@media (max-width: 767px), (pointer: coarse) {
  .topbar-github {
    min-height: 44px;
  }
}

/* The GitHub mark is used as a mask so it takes the link's text color. */
.github-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("assets/github-icon.svg") center / contain no-repeat;
  mask: url("assets/github-icon.svg") center / contain no-repeat;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 36px;
  padding: 0 var(--space-md);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-strong);
  color: var(--on-primary-strong);
}

.btn-primary:hover {
  background: var(--primary-strong-hover);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  text-align: center;
}

/* Dot grid behind the headline: 24px pitch, brightest behind the
   headline and fading out toward the hero's edges. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(at 50% 35%, #000 20%, transparent 75%);
}

/* Soft amber ambient tone behind the headline. */
.hero::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  width: 580px;
  max-width: 90%;
  height: 280px;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--primary-subtle-bg);
  filter: blur(120px);
}

.hero-eyebrow {
  margin: 0 0 var(--space-lg);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

.hero h1 {
  margin: 0 auto var(--space-lg);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.hero-lede {
  margin: 0 auto var(--space-lg);
  max-width: 42rem;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.hero-actions .btn {
  height: 40px;
  padding: 0 var(--space-lg);
}

@media (max-width: 767px), (pointer: coarse) {
  .hero-actions .btn {
    height: 44px;
  }
}

/* One page-load sequence: hero pieces fade up in order. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero > * {
  animation: hero-fade-up 0.45s ease-out both;
}

.hero > :nth-child(2) { animation-delay: 80ms; }
.hero > :nth-child(3) { animation-delay: 180ms; }
.hero > :nth-child(4) { animation-delay: 280ms; }
.hero > :nth-child(5) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .hero > * {
    animation: none;
  }
}

/* Every stat gets the same horizontal padding on both sides, so all three
   columns have equal content width. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 56rem;
  margin: 0 auto;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 0;
}

.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0 var(--space-lg);
}

.stat + .stat {
  border-left: 1px solid var(--border);
}

.stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-value {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-primary);
}

.stat.mint .stat-value {
  color: var(--pass);
}

.stat-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

/* 6px connection-state dot (DESIGN.md's one allowed round badge). */
.live-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  margin-right: 6px;
  border-radius: var(--radius-full);
  background: var(--pass);
  animation: pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

@media (max-width: 767px) {
  .stat-strip {
    grid-template-columns: 1fr;
    padding: 0 var(--space-md);
  }
  .stat {
    padding: var(--space-md) 0;
  }
  .stat + .stat {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* ---------- Icon badges (stat strip + risk cards) ---------- */

.icon-badge {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(217, 119, 6, 0.15);
  color: var(--primary-strong);
}

.icon-badge svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 5px var(--badge-glow));
}

/* ---------- Sections ---------- */

.section {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
  /* Keep in-page anchor targets clear of the sticky topbar. */
  scroll-margin-top: var(--topbar-height);
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.section-head-row .section-head {
  margin-bottom: 0;
}

.env-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-secondary);
}

.env-chip-value {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.section-head {
  max-width: 40rem;
  margin-bottom: var(--space-lg);
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.section-head h2 {
  margin: 0 0 var(--space-sm);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.section-lede {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* ---------- Why it matters: risk cards ---------- */

.risk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

@media (max-width: 1023px) {
  .risk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .risk-grid {
    grid-template-columns: 1fr;
  }
}

.risk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color 0.15s ease;
}

.risk-card:hover {
  border-color: var(--border-strong);
}

.risk-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.risk-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}

.risk-card h3 {
  margin: 0 0 var(--space-xs);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.risk-card p {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--text-secondary);
}

/* ---------- Try it / run panel ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.run-grid {
  display: grid;
  grid-template-columns: 1fr 160px auto;
  gap: var(--space-sm);
  align-items: end;
}

@media (max-width: 767px) {
  .run-grid {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.field input[type="text"],
.field select {
  height: 36px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 13px;
}

.field input[type="text"] {
  font-family: var(--font-mono);
}

.field input[type="text"]::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.field input[type="text"]::-webkit-input-placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.field input[type="text"]::-moz-placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.field input[type="text"]:-ms-input-placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.field input[type="text"]:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary-strong);
  box-shadow: 0 0 0 1px var(--primary-strong);
}

.field select {
  cursor: pointer;
}

.field select option:disabled {
  color: var(--text-tertiary);
}

.btn-run {
  width: 100%;
  height: 36px;
}

@media (max-width: 767px) {
  .btn-run {
    width: auto;
  }
}

.run-hint {
  margin: var(--space-sm) 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

.run-hint.error {
  color: var(--fail);
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.preset-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-right: var(--space-xs);
}

.preset-btn {
  height: 26px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.preset-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.preset-btn.active {
  border-color: var(--primary-strong);
  color: var(--primary);
}

/* Touch-sized form controls (44px min target) on phones and any touch
   pointer; mouse users on desktop keep the compact 36px / 26px sizes. */
@media (max-width: 767px), (pointer: coarse) {
  .field input[type="text"],
  .field select,
  .btn-run {
    height: 44px;
  }

  .preset-row {
    gap: var(--space-sm);
  }

  .preset-label {
    flex-basis: 100%;
    margin-right: 0;
  }

  .preset-btn {
    height: 44px;
    padding: 0 var(--space-md);
  }
}

/* ---------- Results ---------- */

.results-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.results-summary .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--pending);
  flex-shrink: 0;
}

.results-summary .dot.running {
  background: var(--primary);
  animation: pulse 1.2s ease-in-out infinite;
}

.results-summary .dot.done {
  background: var(--pass);
  animation: none;
}

.results-summary .dot.error {
  background: var(--fail);
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .results-summary .dot.running {
    animation: none;
  }
}

/* Live run panel: header with status + elapsed time, then one card grid per
   check group. */
/* The panel's own display: flex would otherwise override the `hidden`
   attribute app.js uses to keep it out of view until a run starts. */
.run-panel-results[hidden] {
  display: none;
}

.run-panel-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.run-head .results-summary {
  margin-bottom: 0;
  color: var(--text-primary);
}

.run-elapsed {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.run-elapsed span {
  margin-left: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.check-group + .check-group {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.check-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-sm);
}

.check-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.check-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-sm);
}

@media (max-width: 1023px) {
  .check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .check-grid {
    grid-template-columns: 1fr;
  }
}

.check-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0.75rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.check-card-running {
  border-color: var(--pending-border);
}

.check-card-fail {
  border-color: var(--fail-border);
}

.check-card-warn {
  border-color: var(--warn-border);
}

.check-card-inconclusive {
  border-color: var(--warn-border);
}

.check-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.check-card-name {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.check-card-desc {
  font-size: 12px;
  line-height: 17px;
  color: var(--text-secondary);
}

.check-card-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-secondary);
  word-break: break-word;
}

.check-card-detail.detail-fail {
  color: var(--fail);
}

.badge {
  flex-shrink: 0;
  height: 22px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-pending {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-color: var(--border);
}

.badge-running {
  background: var(--pending-bg);
  color: var(--pending);
  border-color: var(--pending-border);
}

.badge-running .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .badge-running .badge-dot {
    animation: none;
  }
}

.badge-pass {
  background: var(--pass-bg);
  color: var(--pass);
  border-color: var(--pass-border);
}

.badge-fail {
  background: var(--fail-bg);
  color: var(--fail);
  border-color: var(--fail-border);
}

.badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn-border);
}

.badge-inconclusive {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn-border);
}

.badge-not_applicable {
  background: var(--surface-4);
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

/* ---------- Verification report ---------- */

.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.report-head .section-head {
  margin-bottom: 0;
}

.report-meta {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.report-meta .mono {
  overflow-wrap: anywhere;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.btn-sm {
  height: 32px;
  padding: 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.btn:disabled {
  cursor: not-allowed;
}

.btn-secondary:disabled,
.btn-secondary:disabled:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}

.segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}

.segmented-btn {
  height: 26px;
  padding: 0 0.625rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}

.segmented-btn[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: inset 0 -1px 0 var(--primary-strong);
}

@media (max-width: 767px), (pointer: coarse) {
  .btn-sm,
  .segmented-btn {
    height: 44px;
  }
}

.report-stats {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

@media (max-width: 1023px) {
  .report-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .report-env {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .report-stats {
    grid-template-columns: 1fr;
  }
}

.report-stat-label {
  margin-bottom: var(--space-xs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.report-env h3 {
  margin: 0 0 var(--space-xs);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.report-env p {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.report-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.report-score-line {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.report-stat-value.score-pass {
  color: var(--pass);
}

.report-stat-value.score-attention {
  color: var(--primary);
}

.report-stat-note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}

.report-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.report-group {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.report-group + .report-group {
  margin-top: var(--space-md);
}

.report-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding: 0.75rem var(--space-md);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.report-group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.report-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.report-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.report-row:last-child {
  border-bottom: none;
}

.report-row-fail {
  background: var(--fail-bg);
}

.report-row-warn {
  background: var(--warn-bg);
}

.report-row-inconclusive {
  background: var(--warn-bg);
}

.report-row-num {
  flex-shrink: 0;
  width: 1.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 20px;
  color: var(--text-secondary);
}

.report-row-main {
  flex: 1;
  min-width: 0;
}

.report-row-name {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.report-row-detail {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-secondary);
  word-break: break-word;
}

.report-row-detail.detail-fail {
  color: var(--fail);
}

.report-row-detail.detail-warn {
  color: var(--warn);
}

.report-row-detail.detail-inconclusive {
  color: var(--warn);
}

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

.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--margin);
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-logo {
  display: block;
  height: 28px;
  width: auto;
}

.footer-brand p {
  margin: var(--space-sm) 0 0;
  max-width: 24rem;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.footer-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.footer-col a {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: var(--space-xs);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--primary);
}

.footer-bottom {
  padding: var(--space-md) 0 var(--space-lg);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

@media (max-width: 767px) {
  .hero {
    padding: var(--space-lg) var(--margin-mobile);
  }
  .hero h1 {
    font-size: 24px;
    line-height: 32px;
  }
  .section {
    padding: var(--space-lg) 0;
  }
  .footer-grid {
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
  }
}

/* ---------- Polish: scroll-in reveal and hover transitions ---------- */

/* Scroll-in reveal. app.js adds `.reveal` only when IntersectionObserver is
   available and reduced motion is not requested, so without JS (or with
   reduced motion) every element stays fully visible. The same transition
   list keeps the cards' existing hover color changes smooth. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 450ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease-out,
    background-color 200ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hover: smoother color changes, and cards gain surface luminosity
   (DESIGN.md: interactive states brighten rather than float). */
.btn,
.preset-btn,
.topbar-github,
.topbar-nav a,
.footer-col a {
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

.risk-card:hover {
  background-color: var(--surface-3);
}

.check-card {
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.check-card:hover {
  background-color: var(--surface-4);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .preset-btn,
  .topbar-github,
  .topbar-nav a,
  .footer-col a,
  .risk-card,
  .check-card {
    transition: none;
  }
}

/* Risk card hover, matching the Stitch reference: the border turns amber
   at 50% (derived from the existing --primary-strong token; browsers without
   color-mix() fall back to the full token) and the icon badge grows to 1.1.
   Brightness and color only, no lift or new shadow. */
.risk-card:hover {
  border-color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary-strong) 50%, transparent);
}

.risk-card .icon-badge {
  transition: transform 200ms ease-out;
}

.risk-card:hover .icon-badge {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .risk-card .icon-badge {
    transition: none;
  }
  .risk-card:hover .icon-badge {
    transform: none;
  }
}

/* ---------- Hero: decorative 3D vault (additive, desktop only) ---------- */

.cyber-safe {
  --cyber-scale: 1;
  --cyber-size: 140px;
  --cyber-half: calc(var(--cyber-size) / 2);
  position: absolute;
  top: 0;
  right: var(--margin);
  width: calc(270px * var(--cyber-scale));
  height: calc(310px * var(--cyber-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@media (max-width: 1399px) {
  .cyber-safe { --cyber-scale: 0.78; }
}

@media (max-width: 1279px) {
  .cyber-safe { --cyber-scale: 0.54; }
}

@media (max-width: 1099px) {
  .cyber-safe { display: none; }
}

.cyber-safe-inner {
  position: relative;
  width: 270px;
  height: 310px;
  flex-shrink: 0;
  transform: scale(var(--cyber-scale));
  transform-origin: center;
}

/* Shield frame behind the vault: amber outline fading downward, faint dot
   fill, and a slow scan line clipped to the shield. */
.cyber-shield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cyber-stop-top {
  stop-color: var(--primary-strong);
  stop-opacity: 0.9;
}

.cyber-stop-bottom {
  stop-color: var(--primary-strong);
  stop-opacity: 0.04;
}

.cyber-shield-dot {
  fill: color-mix(in srgb, var(--primary-strong) 20%, transparent);
}

.cyber-scan {
  fill: color-mix(in srgb, var(--primary) 22%, transparent);
  animation: cyber-scan 5s linear infinite;
}

@keyframes cyber-scan {
  from { transform: translateY(0); }
  to { transform: translateY(320px); }
}

/* Soft amber glow behind the vault, and its light pool on the floor. */
.cyber-halo {
  position: absolute;
  left: 50%;
  top: 137px;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--primary-subtle-bg) 0%, transparent 70%);
}

.cyber-floor {
  position: absolute;
  left: 50%;
  top: 243px;
  width: 170px;
  height: 26px;
  margin-left: -85px;
  border-radius: var(--radius-full);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--primary-strong) 26%, transparent) 0%, transparent 72%);
  filter: blur(6px);
}

/* Cube */
.cyber-stage {
  position: absolute;
  left: 50%;
  top: 137px;
  width: var(--cyber-size);
  height: var(--cyber-size);
  margin: calc(var(--cyber-half) * -1) 0 0 calc(var(--cyber-half) * -1);
  perspective: 900px;
}

.cyber-tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 250ms ease-out;
}

.cyber-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: cyber-spin 26s linear infinite;
}

@keyframes cyber-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to { transform: rotateX(-18deg) rotateY(360deg); }
}

.cyber-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface-4) 0%, var(--surface-2) 45%, var(--bg) 100%);
}

/* Four rivets per face. */
.cyber-face::before {
  content: "";
  position: absolute;
  inset: 9px;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--text-secondary) 55%, transparent) 0 1.6px, transparent 1.9px),
    radial-gradient(circle, color-mix(in srgb, var(--text-secondary) 55%, transparent) 0 1.6px, transparent 1.9px),
    radial-gradient(circle, color-mix(in srgb, var(--text-secondary) 55%, transparent) 0 1.6px, transparent 1.9px),
    radial-gradient(circle, color-mix(in srgb, var(--text-secondary) 55%, transparent) 0 1.6px, transparent 1.9px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
}

.cyber-face-front { transform: translateZ(var(--cyber-half)); }
.cyber-face-back { transform: rotateY(180deg) translateZ(var(--cyber-half)); }
.cyber-face-right { transform: rotateY(90deg) translateZ(var(--cyber-half)); }
.cyber-face-left { transform: rotateY(-90deg) translateZ(var(--cyber-half)); }
.cyber-face-top { transform: rotateX(90deg) translateZ(var(--cyber-half)); }
.cyber-face-bottom { transform: rotateX(-90deg) translateZ(var(--cyber-half)); }

/* Front face: vault door */
.cyber-door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cyber-door-ring {
  stroke: color-mix(in srgb, var(--text-tertiary) 70%, transparent);
}

.cyber-door-ticks {
  stroke: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
}

.cyber-door-bolts circle {
  fill: color-mix(in srgb, var(--text-secondary) 50%, transparent);
}

.cyber-wheel {
  stroke: var(--primary-strong);
  filter: drop-shadow(0 0 4px var(--badge-glow));
}

.cyber-hub {
  fill: var(--bg);
  stroke: var(--primary-strong);
}

.cyber-hub-mark,
.cyber-hub-check {
  stroke: var(--primary);
}

/* Back face: vent grille */
.cyber-vents {
  position: absolute;
  inset: 34px 26px;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 85%, transparent) 0 3px,
    transparent 3px 7px
  );
}

/* Side and top faces: glowing amber slit */
.cyber-slit {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--primary-strong);
  box-shadow: 0 0 8px var(--badge-glow);
}

.cyber-slit-v {
  top: 30px;
  bottom: 30px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
}

.cyber-slit-h {
  left: 30px;
  right: 30px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
}

/* Left face: two hinges */
.cyber-hinge {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-4), var(--surface-2));
  border: 1px solid var(--border-strong);
}

.cyber-hinge:first-child { top: 26px; }
.cyber-hinge:last-child { bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  .cyber-cube,
  .cyber-scan {
    animation: none;
  }
  .cyber-tilt {
    transition: none;
  }
}

/* ---------- Hero: highlight layer over the existing dot grid ---------- */

/* Sits between .hero::before (the CSS dot grid) and the hero content, and
   repeats that layer's mask so highlights fade out exactly where the base
   dots do. Painted by app.js; blank when that script does not run. */
.cyber-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(at 50% 35%, #000 20%, transparent 75%);
}

/* ---------- Hero stat cards: HUD corners and index ---------- */

/* Anchor for the decorations below; does not affect the existing flex layout. */
.stat {
  position: relative;
}

/* Four corner brackets drawn as eight background slivers, so the arm length
   and the amber strength can both transition. */
.stat::before {
  content: "";
  position: absolute;
  inset: 2px 10px;
  pointer-events: none;
  opacity: 0.55;
  --hud-arm: 6px;
  --hud-line: color-mix(in srgb, var(--primary-strong) 40%, transparent);
  background-image:
    linear-gradient(var(--hud-line), var(--hud-line)), linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)), linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)), linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)), linear-gradient(var(--hud-line), var(--hud-line));
  background-size:
    var(--hud-arm) 1.5px, 1.5px var(--hud-arm),
    var(--hud-arm) 1.5px, 1.5px var(--hud-arm),
    var(--hud-arm) 1.5px, 1.5px var(--hud-arm),
    var(--hud-arm) 1.5px, 1.5px var(--hud-arm);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
  transition: opacity 200ms ease-out, background-size 200ms ease-out;
}

.stat:hover::before {
  opacity: 1;
  --hud-arm: 10px;
}

.stat-index {
  position: absolute;
  top: 0;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: color-mix(in srgb, var(--primary) 45%, transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .stat::before {
    transition: none;
  }
}

/* ---------- Scroll choreography: reveal ---------- */

/* Strengthens the existing scroll-in reveal. The rules above are left as they
   are; these come later in the file and win on cascade order. `.reveal` is
   still added by app.js only when IntersectionObserver is available and
   reduced motion is off, so without JS every element stays fully visible. */
.reveal {
  transform: translateY(28px);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease-out,
    background-color 200ms ease-out;
}

/* Blur-in is reserved for section titles: one large element per section, so
   the filter never runs across a grid of cards at the same time. */
.section-head.reveal h2 {
  filter: blur(6px);
  transition: filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section-head.reveal.is-visible h2 {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: none;
  }
  .section-head.reveal h2 {
    filter: none;
    transition: none;
  }
}

/* The choreography pass in app.js gives a section's own lines and cards their
   individual entrances. `.rv` carries the same travel and easing as `.reveal`
   above; `.rv-in` is its gate. These rules come last, so an element carrying
   both classes waits for this pass rather than the earlier one. */
.rv {
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    border-color 200ms ease-out,
    background-color 200ms ease-out;
}

.rv:not(.rv-in) {
  opacity: 0;
  transform: translateY(28px);
}

.rv.rv-in {
  opacity: 1;
  transform: none;
}

/* Titles keep the blur-in, now on the h2 itself. */
.rv-title:not(.rv-in) {
  filter: blur(6px);
}

.rv-title.rv-in {
  filter: none;
}

/* A parent whose children are choreographed stops animating as a block, so the
   two passes never stack their travel or their fade. */
.rv-host.reveal,
.rv-host.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.rv-host.reveal h2 {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv:not(.rv-in),
  .rv-title:not(.rv-in) {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* A thin amber rule that draws itself across the top of a section as the
   section arrives, growing from the centre out to both edges. It sits on top
   of the existing 1px border, which is left in place and still carries the
   separation on its own. The class is added by app.js, so without JavaScript
   the pseudo-element is never styled at all. */
.section.rv-rule {
  position: relative;
}

.section.rv-rule::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--primary) 34%, transparent) 50%,
    transparent 100%
  );
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary-strong) 22%, transparent);
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.rv-rule.rv-rule-in::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .section.rv-rule::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* ---------- Full-screen sections ---------- */

/* On a desktop-sized window the hero fills what is left of the screen below
   the sticky topbar, and its pieces sit as one group in the vertical centre.
   The spacing between them is untouched: every hero child carries only a
   bottom margin, so the flex column reproduces the block layout's gaps
   exactly. min-height rather than height, so a short window or a longer
   headline grows the hero instead of clipping it.

   svh tracks the screen without the browser's collapsing toolbars; vh is
   declared first as the fallback for engines that do not know it. The rules
   earlier in this file are untouched -- these come later and win on cascade
   order. */
@media (min-width: 1024px) and (min-height: 600px) {
  .hero {
    min-height: calc(100vh - var(--topbar-height));
    min-height: calc(100svh - var(--topbar-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* A flex item with `margin: 0 auto` is sized to its content, which would
     narrow the lede and the stat strip. Restoring the full width puts each
     one back on its own max-width, exactly as block layout had it. The two
     absolutely positioned children are left out: they carry their own size. */
  .hero > *:not(.cyber-safe):not(.cyber-dots) {
    width: 100%;
  }

  /* The vault moves to the hero's vertical centre at its existing size.
     Pinning both edges and letting the block margins resolve to auto centres
     it without a transform, which would otherwise sit between the stage and
     its perspective. */
  .cyber-safe {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* The sections below the hero get the same floor, so each one opens on a
   screen of its own. min-height only, and no overflow clipping: a section
   whose content is taller than the screen -- the Results section once a run
   has filled it in -- grows to its natural height instead of being cut off.

   `:not([hidden])` matters here. The report section carries the `hidden`
   attribute until a run finishes, and an author `display: flex` would
   override the user agent's `display: none` and reveal it. The footer is not
   a `.section` and keeps its natural height. */
@media (min-width: 1024px) and (min-height: 600px) {
  .section:not([hidden]) {
    min-height: calc(100vh - var(--topbar-height));
    min-height: calc(100svh - var(--topbar-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Same reason as in the hero: a flex item with `margin: 0 auto` is sized to
     its content, which would pull the container in off its max-width. */
  .section:not([hidden]) > .container {
    width: 100%;
  }
}

/* Anchor landings. The topbar is sticky and 1px taller than --topbar-height,
   because of its bottom border, so a section asked for by a topbar link used
   to come to rest with its top edge -- and the amber rule drawn on it --
   one pixel underneath the bar.

   scroll-padding-top on the scroll container covers every scroll-into-view,
   not just the three section links: a field reached by keyboard lands clear
   of the bar too. The per-section scroll-margin is zeroed because the two
   would otherwise add up and overshoot by a full bar's height. */
html {
  scroll-padding-top: calc(var(--topbar-height) + 1px);
}

.section {
  scroll-margin-top: 0;
}