/* FuelDash R132 — final shared geometry and grouped control alignment. */

/* The first frame and the rendered app use the same 20px content edge. */
html body #app .brand-header,
html body .fd-startup-cover .fd-fast-header {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

/* Keep the fixed navigation on one exact viewport geometry from frame one. */
html body #app .fuel-tab-bar,
html body .fd-startup-cover .fd-fast-nav {
  box-sizing: border-box !important;
  left: 50% !important;
  width: min(calc(100% - 32px), 448px) !important;
  height: 72px !important;
  min-height: 72px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  padding: 8px 14px !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 380px) {
  html body #app .fuel-tab-bar,
  html body .fd-startup-cover .fd-fast-nav {
    width: calc(100% - 24px) !important;
    padding-inline: 9px !important;
    gap: 4px !important;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  html body #app .fuel-tab-bar,
  html body .fd-startup-cover .fd-fast-nav {
    height: 62px !important;
    min-height: 62px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
}

/* Sorting is one segmented main control, never three adjacent glass cards. */
html body #app .station-sort {
  display: flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 18px !important;
  background: var(--fd-r113-glass-dark) !important;
  background-image: var(--fd-r113-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html body #app .station-sort > button,
html body #app .station-sort > button:not(.is-active) {
  min-height: 42px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--fd-r126-muted-dark) !important;
}
html body #app .station-sort > button.is-active {
  border: 1px solid #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] body #app .station-sort {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  background-image: var(--fd-r113-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}
html[data-fd-theme="light"] body #app .station-sort > button,
html[data-fd-theme="light"] body #app .station-sort > button:not(.is-active) {
  color: var(--fd-r126-muted-light) !important;
}

/* Recommendation facts retain their compact typography but use the profile/reload material. */
html body #app .primary-station-card__facts > span {
  border-color: #2c2c31 !important;
  background: var(--fd-r113-glass-dark) !important;
  background-image: var(--fd-r113-glass-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  background-image: var(--fd-r113-glass-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}