/* FuelDash R106 — responsive account, compact feature views and in-place themes. */
:root {
  --fd-r106-red: #ff3b34;
  --fd-r106-green: #168b50;
  --fd-r106-light-bg: #f5f5f7;
  --fd-r106-light-card: rgba(255,255,255,.88);
  --fd-r106-light-control: rgba(232,232,237,.82);
  --fd-r106-light-border: rgba(74,74,82,.18);
  --fd-r106-dark-bg: #050505;
  --fd-r106-dark-card: rgba(18,18,21,.92);
  --fd-r106-dark-control: rgba(38,38,43,.9);
  --fd-r106-dark-border: rgba(255,255,255,.13);
}

html.fd-theme-switching *,
html.fd-theme-switching *::before,
html.fd-theme-switching *::after {
  transition: none !important;
  animation: none !important;
}

/* Main header account affordance. */
.fd-main-header-actions { gap: 8px !important; min-width: 40px !important; }
.fd-profile-greeting {
  max-width: 112px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.01em;
}
html[data-fd-theme="light"] .fd-profile-greeting { color: #57575e; }
html[data-fd-theme="dark"] .fd-profile-greeting { color: rgba(255,255,255,.68); }

.fd-main-header-actions.has-profile-greeting .header-background-status {
  display: none !important;
}
.fd-profile-button { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; }
.fd-profile-button svg { width: 19px !important; height: 19px !important; }

/* Account page follows the same mobile scale as the main app. */
.fd-feature-page[data-fd-feature-view="account"] {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell {
  width: min(100%, 560px) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  min-height: 58px !important;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px !important;
  box-sizing: border-box !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark img { width: 32px !important; height: 32px !important; }
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > span,
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > strong { font-size: 25px !important; line-height: 1 !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back {
  width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header .fd-feature-back svg { width: 18px !important; height: 18px !important; }
.fd-account-page-title { padding: 8px 16px 14px !important; }
.fd-account-page-title small { font-size: 10px !important; letter-spacing: .16em !important; }
.fd-account-page-title h1 { margin-top: 4px !important; font-size: 30px !important; line-height: 1.05 !important; letter-spacing: -.035em !important; }
.fd-account-page-title p { margin-top: 6px !important; font-size: 13px !important; line-height: 1.38 !important; }
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom)) !important;
}
.fd-account-page { max-width: 520px !important; gap: 12px !important; padding: 0 !important; }
.fd-account-page-status,
.fd-account-page-card { padding: 16px !important; border-radius: 21px !important; }
.fd-account-page-status small,
.fd-account-page-card .fd-feature-card__head small { font-size: 10px !important; letter-spacing: .15em !important; }
.fd-account-page-status h2,
.fd-account-page-card h2 { margin-top: 4px !important; font-size: 20px !important; line-height: 1.15 !important; }
.fd-account-page-status p,
.fd-account-page-card > p { margin-top: 8px !important; font-size: 13px !important; line-height: 1.42 !important; }
.fd-account-page-status > div > small:last-child { margin-top: 7px !important; font-size: 11px !important; }
.fd-account-page-card .fd-feature-card__head { margin-bottom: 12px !important; }
.fd-account-page-card .fd-feature-card__head > span { font-size: 11px !important; }
.fd-account-page-card .fd-auth-switch { margin-bottom: 12px !important; border-radius: 14px !important; }
.fd-account-page-card .fd-auth-switch button { min-height: 40px !important; border-radius: 10px !important; font-size: 13px !important; }
.fd-account-page-card .fd-auth-form { gap: 11px !important; }
.fd-account-page-card .fd-auth-form label { gap: 5px !important; font-size: 12px !important; }
.fd-account-page-card .fd-auth-form input { height: 46px !important; min-height: 46px !important; border-radius: 14px !important; font-size: 15px !important; }
.fd-account-page-card :is(.fd-auth-primary,.fd-auth-secondary) { height: 44px !important; min-height: 44px !important; max-height: 44px !important; border-radius: 14px !important; font-size: 14px !important; }
.fd-account-page-actions { gap: 8px !important; margin-top: 12px !important; }
.fd-account-page-card .fd-auth-link { min-height: 34px !important; font-size: 12px !important; }
.fd-recovery-code { margin: 12px 0 !important; padding: 11px !important; font-size: 15px !important; }

/* Tankbook and alert pages use the compact page scale. */
.fd-feature-page[data-fd-feature-view="tankbook"] { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content { min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-heading h1 { font-size: 28px !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-heading p { font-size: 12.5px !important; line-height: 1.35 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-card { border-radius: 21px !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-card h2 { font-size: 20px !important; line-height: 1.15 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] :is(input,select,textarea) { font-size: 15px !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] :is(button,.fd-auth-primary,.fd-auth-secondary) { font-size: 14px !important; }

.fd-alert-modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
.fd-alert-sheet { width: min(100%, 520px) !important; }
.fd-alert-head h2 { font-size: 23px !important; }
.fd-alert-close { width: 38px !important; height: 38px !important; font-size: 22px !important; }
.fd-alert-grid { gap: 8px !important; }
.fd-alert-row { min-height: 58px !important; padding: 12px 13px !important; border-radius: 15px !important; }
.fd-alert-row span { font-size: 14px !important; }
.fd-alert-row small { font-size: 10.5px !important; }
.fd-alert-row select,
.fd-alert-row input[type="time"],
.fd-alert-row input[type="number"] { min-height: 38px !important; max-width: 126px !important; padding: 8px 9px !important; font-size: 14px !important; }
.fd-alert-station { min-height: 58px !important; padding: 9px 12px !important; }
.fd-alert-station strong { font-size: 13px !important; }
.fd-alert-actions button { min-height: 46px !important; padding: 11px 10px !important; font-size: 12.5px !important; }

/* Light mode keeps the same red/green price semantics as dark mode. */
html[data-fd-theme="light"] #app .station-value .price-change.is-lower,
html[data-fd-theme="light"] #app .fd-best__trend.is-lower { color: var(--fd-r106-green) !important; text-shadow: none !important; }
html[data-fd-theme="light"] #app .station-value .price-change.is-higher,
html[data-fd-theme="light"] #app .fd-best__trend.is-higher { color: #e23b33 !important; text-shadow: none !important; }
html[data-fd-theme="light"] #app .fd-best__trend.is-steady,
html[data-fd-theme="light"] #app .price-change.is-neutral { color: #77777f !important; }

@media (max-width: 390px) {
  .fd-profile-greeting { max-width: 88px; font-size: 11px; }
  .fd-account-page-title h1 { font-size: 28px !important; }
  .fd-account-page-status,
  .fd-account-page-card { padding: 14px !important; }
  .fd-account-page-actions { grid-template-columns: 1fr !important; }
}