/* FuelDash R121 — five isolated corrections on top of accepted R120. */
:root {
  --fd-r121-gap: 16px;
  --fd-r121-tile-dark: var(--fd-r119-tile-dark);
  --fd-r121-tile-light: var(--fd-r119-tile-light);
  --fd-r121-border-dark: var(--fd-r119-border-dark);
  --fd-r121-border-light: var(--fd-r119-border-light);
  --fd-r121-radius-tile: var(--fd-r119-radius-tile);
}

/* Tank recommendation: copy stays in the main card; only the three facts are compact glass tiles. */
html[data-fd-theme] body #app .primary-station-card__insights > div:first-child {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card__facts {
  gap: 10px !important;
  padding-top: 14px !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span {
  box-sizing: border-box !important;
  min-height: 64px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--fd-r121-border-dark) !important;
  border-radius: var(--fd-r121-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r121-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span:first-child {
  padding-left: 12px !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span + span {
  border-left: 1px solid var(--fd-r121-border-dark) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: var(--fd-r121-border-light) !important;
  background-image: var(--fd-r121-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Startup wordmark: same split wordmark and measured spacing as the loaded header. */
.fd-fast-brand {
  gap: 9px !important;
}
.fd-fast-brand > span,
.fd-fast-brand > strong {
  display: block !important;
  font: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}
.fd-fast-brand > strong { color: #ff3b30 !important; }
html[data-fd-theme="light"] .fd-fast-brand > span { color: #151517 !important; }

/* Dashboard hero/map card: separate top outline cannot be hidden by map clipping. */
html body #app .fd-best {
  position: relative !important;
  isolation: isolate !important;
}
html body #app .fd-best::before {
  content: "" !important;
  position: absolute !important;
  z-index: 20 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r121-border-dark) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-fd-theme="light"] body #app .fd-best::before {
  border-color: var(--fd-r121-border-light) !important;
}

/* Favorites: exact interval between sorting control and the first station card. */
#app [data-sort-controls] + .result-list {
  margin-top: var(--fd-r121-gap) !important;
}

/* More: each direct card group is separated; no internal menu rows are affected. */
#app .app-content > :is(.fuel-preference,.nearby-radius,.menu-card) + :is(.fuel-preference,.nearby-radius,.menu-card) {
  margin-top: var(--fd-r121-gap) !important;
}

@media (max-width: 370px) {
  html[data-fd-theme] body #app .primary-station-card__facts {
    gap: 10px !important;
  }
  html[data-fd-theme] body #app .primary-station-card__facts > span {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }
  html[data-fd-theme] body #app .primary-station-card__facts > span + span {
    border-top: 1px solid var(--fd-r121-border-dark) !important;
    border-left: 1px solid var(--fd-r121-border-dark) !important;
  }
}