.button {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--brand-teal);
  border-radius: var(--r-organic);
  background: var(--brand-teal);
  box-shadow: var(--shadow-hard-sm);
  color: var(--neutral-0);
  font: inherit;
  font-weight: 900;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--brand-ink);
  border-radius: var(--r-round);
  box-shadow: var(--shadow-hard-sm);
  color: var(--ink);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  word-break: keep-all;
}

.pill-neutral {
  background: var(--neutral-100);
}

.pill-smooth {
  background: var(--grade-smooth);
}

.pill-normal {
  background: var(--grade-normal);
}

.pill-congested {
  background: var(--grade-congested);
}

.pill-very_congested {
  background: var(--brand-ink);
  color: var(--neutral-0);
  box-shadow: 3px 3px 0 var(--grade-congested);
}

.grade-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.grade-legend .pill,
.flight-grade .pill {
  white-space: nowrap;
}

.pill-marker {
  width: var(--space-3);
  height: var(--space-3);
  border: 2px solid currentColor;
  border-radius: var(--r-round);
  background: var(--surface);
}

.tag {
  display: inline-flex;
  margin: 0;
  color: var(--brand-teal);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.card {
  display: flex;
  padding: var(--space-6);
  border: 2px solid var(--brand-ink);
  border-radius: var(--r-organic);
  background: var(--surface);
  box-shadow: var(--shadow-hard-md);
  color: inherit;
  text-decoration: none;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .brand {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--brand-teal);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.site-header .brand span {
  color: var(--brand-ink);
  letter-spacing: 0;
}

.site-footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.site-footer p {
  margin-bottom: 3px;
}

.grade-disclaimer {
  color: var(--sub);
  font-size: var(--text-sm);
}

.arrival-list:has([data-arrival-hour-filter] option:checked:not([value='']))
  .all-slot-summary {
  display: none;
}