:root {
  --radius-control: 10px;
  --radius-panel: 14px;
  --radius-card: 16px;
  --control-height: 44px;
  --control-height-large: 48px;
}

/* Rectangles are controls; pills are reserved for compact metadata. */
.icon,
.header-button,
.small,
.action,
.choice,
.day-chip,
.filter,
.day-select,
.day-menu-trigger,
.day-option,
.top-action,
.route-action,
.optional-toggle,
.option-tab,
.compatible-toggle,
.dest,
.notes,
.toast button {
  border-radius: var(--radius-control);
}

.filter,
.day-chip {
  min-height: var(--control-height);
}

.small,
.action,
.choice,
.dest,
.optional-toggle,
.route-action,
.small.primary,
.action.primary {
  min-height: var(--control-height-large);
}

.badge,
.route-status,
.option-tab span,
.compatible-count,
.offline-status::before {
  border-radius: 999px;
}

/* Panels share one nested radius; cards and sheets use the larger radius. */
.intro,
.empty,
.adjust,
.choice-panel,
.notice,
.safety,
.preview,
.route-choice,
.adjust-day-mode,
.option-tabs,
.fact {
  border-radius: var(--radius-panel);
}

.block,
.card,
.day-menu-popover,
.condition-dialog {
  border-radius: var(--radius-card);
}

/* Header controls now belong to the same family. */
.day-menu-trigger {
  min-height: var(--control-height-large);
  padding-inline: 16px 12px;
}

.top-action {
  width: var(--control-height);
  height: var(--control-height);
  min-height: var(--control-height);
}

/* Availability and filters use the same control geometry. */
.option-tabs {
  gap: 4px;
  padding: 4px;
}

.option-tab {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
}

.option-tab span {
  min-width: 22px;
  height: 22px;
}

.filters {
  gap: 8px;
}

.filter {
  min-height: var(--control-height);
  padding-inline: 14px;
  background: var(--surface);
  border-color: var(--line);
}

/* Each option card ends with one consistent, easy-to-hit field action. */
.option-card {
  padding: 16px;
}

.option-card .actions {
  display: block;
  margin-top: 12px;
}

.option-card .small.primary {
  width: 100%;
  min-width: 0;
}

/* Keep the route chevron centered independently of the font baseline. */
.route-action::after {
  display: grid;
  flex: 0 0 16px;
  place-items: center;
  width: 16px;
  height: 24px;
  margin-left: 12px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Utility states follow the same shape language. */
.nav,
.condition-token,
.plan-brief-more {
  border-radius: var(--radius-control);
}

.toast {
  border-radius: var(--radius-panel);
}

.toast button {
  min-height: 34px;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lake) 58%, transparent);
  outline-offset: 2px;
}