/* FuelDash R107 — compact account page, one mobile scroller and semantic cloud states. */
:root {
  --fd-r107-mint: #63e6be;
  --fd-r107-red: #ff5a52;
  --fd-r107-orange: #ff9f43;
}

/* One scroll owner fixes the clipped black block produced by nested 100dvh containers on iOS Safari. */
.fd-feature-page[data-fd-feature-view="account"] {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell {
  display: block !important;
  width: min(100%, 480px) !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom)) !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 16px 0 !important;
}

/* Header geometry is identical to station details. */
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  min-height: 54px !important;
  margin: 2px 0 10px !important;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark,
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > span,
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > strong {
  font-size: 29px !important;
  line-height: 1 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark img {
  width: 42px !important;
  height: 42px !important;
}

/* Compact hierarchy aligned with dashboard cards. */
.fd-account-page-title {
  padding: 2px 16px 12px !important;
}
.fd-account-page-title small {
  font-size: 9px !important;
  letter-spacing: .17em !important;
}
.fd-account-page-title h1 {
  margin-top: 3px !important;
  font-size: 25px !important;
  line-height: 1.06 !important;
  letter-spacing: -.032em !important;
}
.fd-account-page-title p {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.fd-account-page {
  max-width: 448px !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.fd-account-page-status,
.fd-account-page-card {
  padding: 14px !important;
  border-radius: 18px !important;
}
.fd-account-page-status small,
.fd-account-page-card .fd-feature-card__head small {
  font-size: 9px !important;
  letter-spacing: .15em !important;
}
.fd-account-page-status h2,
.fd-account-page-card h2 {
  margin-top: 3px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
}
.fd-account-page-status p,
.fd-account-page-card > p {
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
}
.fd-account-page-status > div > small:last-child {
  margin-top: 6px !important;
  font-size: 10px !important;
}
.fd-account-page-card .fd-feature-card__head {
  margin-bottom: 10px !important;
}
.fd-account-page-card .fd-feature-card__head > span {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.fd-account-page-actions {
  gap: 7px !important;
  margin-top: 10px !important;
}
.fd-account-page-card :is(.fd-auth-primary,.fd-auth-secondary) {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
}
.fd-account-page-card .fd-auth-link {
  min-height: 30px !important;
  font-size: 11px !important;
}
.fd-account-page-card .fd-auth-switch {
  margin-bottom: 10px !important;
  border-radius: 13px !important;
}
.fd-account-page-card .fd-auth-switch button {
  min-height: 38px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}
.fd-account-page-card .fd-auth-form {
  gap: 9px !important;
}
.fd-account-page-card .fd-auth-form label {
  gap: 4px !important;
  font-size: 11px !important;
}
.fd-account-page-card .fd-auth-form input {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
}

/* Explicit cloud semantics in every account/tankbook status location. */
[data-cloud-tone="active"],
.fd-account-page-status[data-cloud-tone="active"] h2 {
  color: var(--fd-r107-mint) !important;
}
[data-cloud-tone="inactive"],
.fd-account-page-status[data-cloud-tone="inactive"] h2 {
  color: var(--fd-r107-red) !important;
}
[data-cloud-tone="error"],
.fd-account-page-status[data-cloud-tone="error"] h2 {
  color: var(--fd-r107-orange) !important;
}
.fd-account-page-card .fd-feature-card__head > span[data-cloud-tone="active"] {
  border: 1px solid color-mix(in srgb, var(--fd-r107-mint) 35%, transparent) !important;
  background: color-mix(in srgb, var(--fd-r107-mint) 11%, transparent) !important;
}
.fd-account-page-card .fd-feature-card__head > span[data-cloud-tone="inactive"] {
  border: 1px solid color-mix(in srgb, var(--fd-r107-red) 35%, transparent) !important;
  background: color-mix(in srgb, var(--fd-r107-red) 11%, transparent) !important;
}
.fd-account-page-card .fd-feature-card__head > span[data-cloud-tone="error"] {
  border: 1px solid color-mix(in srgb, var(--fd-r107-orange) 38%, transparent) !important;
  background: color-mix(in srgb, var(--fd-r107-orange) 12%, transparent) !important;
}

/* Live-data recovery actions remain compact and wrap safely. */
.live-error .fd-live-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.live-error .fd-live-location-button,
.live-error .refresh-pill {
  min-height: 38px !important;
  margin: 0 !important;
}
.live-error .fd-live-location-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #ff3b30;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}