/* ─── Component classes ───
   Plain CSS on top of the --fp-* tokens in tokens.css, so the same look is available to
   Jinja macros (templates/components/ui.html) and to HTML built in JS template strings.
   Prefer these over long utility strings for anything reused; keep Tailwind for layout.
   Every component is previewed at /styleguide (DASHBOARD_STYLEGUIDE_ENABLED=true). */

/* Buttons */
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-zen),
    opacity var(--motion-duration-fast) var(--motion-ease-zen), transform 80ms ease;
}
.fp-btn:active { transform: scale(0.98); }
.fp-btn:focus-visible,
.fp-icon-btn:focus-visible,
.fp-seg__item:focus-visible {
  outline: 2px solid rgb(var(--fp-secondary));
  outline-offset: 2px;
}
.fp-btn:disabled,
.fp-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.fp-btn--primary {
  min-height: 52px;
  background: linear-gradient(90deg, rgb(var(--fp-primary)) 0%, rgb(var(--fp-primary-container)) 100%);
  color: rgb(var(--fp-on-primary));
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 1rem;
}
.fp-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { opacity: 0.95; }
.fp-btn--tonal { background: rgb(var(--fp-surface-container)); color: rgb(var(--fp-primary-container)); }
.fp-btn--tonal:hover:not(:disabled):not([aria-disabled="true"]) { background: rgb(var(--fp-surface-container-high)); }
.fp-btn--outline {
  background: rgb(var(--fp-surface-container-lowest));
  border-color: rgb(var(--fp-outline-variant));
  color: rgb(var(--fp-on-surface));
}
.fp-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) { background: rgb(var(--fp-surface-container-low)); }
.fp-btn--support { background: rgb(var(--fp-support)); color: #fff; }
.fp-btn--support:hover:not(:disabled):not([aria-disabled="true"]) { opacity: 0.92; }
.fp-btn--block { width: 100%; }

.fp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0.75rem;
  background: rgb(var(--fp-surface-container));
  color: rgb(var(--fp-primary-container));
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-zen);
}
.fp-icon-btn:hover { background: rgb(var(--fp-surface-container-high)); }
.fp-icon-btn--ghost { background: transparent; }

/* Form fields */
.fp-field { display: flex; flex-direction: column; gap: 0.375rem; }
.fp-label { font-family: Inter, sans-serif; font-size: 0.75rem; font-weight: 700; color: rgb(var(--fp-on-surface-variant)); }
.fp-label__optional { font-weight: 400; }
.fp-input {
  width: 100%;
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid rgb(var(--fp-outline-variant));
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  color: rgb(var(--fp-on-surface));
}
.fp-input[aria-invalid="true"] { border-color: rgb(var(--fp-error)); }
.fp-hint { font-size: 0.6875rem; color: rgb(var(--fp-on-surface-variant)); }
.fp-hint--error { color: rgb(var(--fp-error)); }

/* Segmented control (pairs with the existing .seg-active / .seg-inactive state classes) */
.fp-seg { display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: 0.75rem; background: rgb(var(--fp-surface-container)); }
.fp-seg__item {
  flex: 1;
  min-height: 36px;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  font-family: Inter, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}
/* Only inactive items are transparent, so .seg-active (tokens.css) keeps its white pill. */
.fp-seg__item:not(.seg-active) { background: transparent; }

/* Toggle chips: single-choice filters (ui.toggle_group). State is aria-pressed, never a class. */
.fp-toggle { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.fp-toggle__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(var(--fp-outline-variant));
  border-radius: 9999px;
  background: rgb(var(--fp-surface-container-lowest));
  color: rgb(var(--fp-on-surface-variant));
  font-family: Inter, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-zen);
}
.fp-toggle__item:hover { background: rgb(var(--fp-surface-container-low)); }
.fp-toggle__item[aria-pressed="true"] {
  background: rgb(var(--fp-primary-container));
  border-color: rgb(var(--fp-primary-container));
  color: rgb(var(--fp-on-primary));
}
.fp-toggle__item:focus-visible { outline: 2px solid rgb(var(--fp-secondary)); outline-offset: 2px; }
.fp-toggle__swatch { width: 10px; height: 10px; border-radius: 9999px; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9); }
.fp-toggle--hero .fp-toggle__item { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.3); color: #fff; }
.fp-toggle--hero .fp-toggle__item:hover { background: rgb(255 255 255 / 0.16); }
.fp-toggle--hero .fp-toggle__item[aria-pressed="true"] { background: #fff; border-color: #fff; color: rgb(var(--fp-primary-container)); }
.fp-toggle--hero .fp-toggle__item:focus-visible { outline-color: #fff; }

/* Select on the hero gradient (province picker). */
.fp-hero-select {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.375rem 0 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  box-sizing: border-box;
  max-width: 100%;
}
.fp-hero-select .material-symbols-outlined { font-size: 18px; }
/* A select is as wide as its longest option; cap it so long scope names never push past a phone screen. */
.fp-hero-select select {
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  min-height: 40px;
  padding: 0 1.75rem 0 0.25rem;
  border: 0;
  background-color: transparent;
  color: inherit;
  font: 600 0.8125rem Inter, sans-serif;
}
.fp-hero-select select:focus { box-shadow: none; }
.fp-hero-select:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.fp-hero-select option { color: rgb(var(--fp-on-surface)); }

/* Story pages (/insights): headline that states the finding, and the sticky section links. */
.fp-story-title {
  margin: 0.375rem 0 0;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgb(var(--fp-on-surface));
}
@media (min-width: 768px) { .fp-story-title { font-size: 1.625rem; } }
/* Brand ranking (/insights Marcas): one button per brand with a bar diverging from the zip code's average. */
.fp-brand-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) 1fr 3.25rem 2.75rem;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: rgb(var(--fp-on-surface));
  font: 600 0.875rem Inter, sans-serif;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 640px) {
  .fp-brand-row { grid-template-columns: minmax(7rem, 10rem) 1fr 3.75rem 5.5rem 3.5rem; gap: 0.75rem; }
}
.fp-brand-row:hover { background: rgb(var(--fp-surface-container-low)); }
.fp-brand-row[aria-pressed="true"] { background: rgb(var(--fp-surface-container)); }
.fp-brand-row:focus-visible { outline: 2px solid rgb(var(--fp-secondary)); outline-offset: 1px; }
.fp-brand-row--head {
  cursor: default;
  min-height: 32px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--fp-on-surface-variant));
}
.fp-brand-row--head:hover { background: transparent; }
/* The axis words do not fit a phone's track; the green/red bars carry the meaning there. */
.fp-brand-row__axis { display: flex; justify-content: space-between; visibility: hidden; }
.fp-brand-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-brand-row__num { text-align: right; font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-brand-row__stations { display: none; text-align: right; font-size: 0.75rem; font-weight: 500; color: rgb(var(--fp-on-surface-variant)); font-variant-numeric: tabular-nums; }
.fp-brand-row__track { position: relative; height: 28px; }
.fp-brand-row__track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid rgb(var(--fp-outline-variant)); }
.fp-brand-row__bar { position: absolute; top: 7px; height: 14px; }
.fp-brand-row__bar--cheaper { background: rgb(var(--fp-support)); border-radius: 4px 0 0 4px; }
.fp-brand-row__bar--pricier { background: rgb(var(--fp-error)); border-radius: 0 4px 4px 0; }
.fp-brand-row__win { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; }
.fp-brand-row__meter { display: none; flex: 1; height: 6px; border-radius: 9999px; background: rgb(var(--fp-surface-container)); overflow: hidden; }
.fp-brand-row__meter > span { display: block; height: 100%; border-radius: 9999px; background: rgb(var(--fp-primary-container)); }
@media (min-width: 640px) {
  .fp-brand-row__axis { visibility: visible; }
  .fp-brand-row__stations { display: block; }
  .fp-brand-row__meter { display: block; }
}
.fp-card.fp-brand-card { background: rgb(var(--fp-primary-container)); border-color: rgb(var(--fp-primary-container)); color: rgb(var(--fp-on-primary)); }
.fp-brand-card__muted { color: rgb(var(--fp-primary-fixed)); }
.fp-brand-card__stat { padding: 0.875rem; border-radius: 0.75rem; background: rgb(255 255 255 / 0.08); }

.fp-section-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgb(var(--fp-on-surface-variant));
}
.fp-section-link:hover,
.fp-section-link[aria-current="true"] { background: rgb(var(--fp-surface-container)); color: rgb(var(--fp-on-surface)); }

/* Surfaces */
.fp-card {
  background: rgb(var(--fp-surface-container-lowest));
  border: 1px solid rgb(var(--fp-outline-variant) / 0.4);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgb(var(--fp-primary-container) / 0.06);
}
.fp-card--raised { box-shadow: 0 16px 40px rgb(var(--fp-primary-container) / 0.16); }
.fp-card--selected { border: 2px solid rgb(var(--fp-secondary)); }

.fp-section-title { margin: 0; font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.25rem; color: rgb(var(--fp-on-surface)); }

/* KPI tile */
.fp-kpi { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem; }
.fp-kpi__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--fp-on-surface-variant));
}
.fp-kpi__label .material-symbols-outlined { font-size: 18px; }
.fp-kpi__value {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--fp-on-surface));
}

/* Prices and deltas: always tabular so columns of prices line up */
.fp-price { font-family: Manrope, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--fp-primary-container)); }
.fp-delta--down { color: rgb(var(--fp-support)); font-weight: 700; }
.fp-delta--up { color: rgb(var(--fp-on-error-container)); font-weight: 700; }

/* Chips */
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
}
.fp-chip--info { background: rgb(var(--fp-primary-fixed)); color: rgb(var(--fp-on-primary-fixed)); }
.fp-chip--success { background: rgb(var(--fp-support) / 0.12); color: rgb(var(--fp-support)); }
.fp-chip--danger { background: rgb(var(--fp-error-container)); color: rgb(var(--fp-on-error-container)); }
.fp-chip--neutral { background: rgb(var(--fp-surface-container)); color: rgb(var(--fp-on-surface-variant)); }

/* Banners */
.fp-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.fp-banner .material-symbols-outlined { font-size: 18px; }
.fp-banner--info { background: rgb(var(--fp-primary-fixed)); color: rgb(var(--fp-on-primary-fixed)); }
.fp-banner--error { background: rgb(var(--fp-error-container)); color: rgb(var(--fp-on-error-container)); }
.fp-banner--success { background: rgb(var(--fp-support) / 0.1); color: rgb(var(--fp-on-tertiary-fixed-variant)); }

/* Hero eyebrow on the hero gradient. on-primary-container (#7893dc) drops to ~3.3:1 against
   the gradient's #003d9b end, below WCAG AA for 11px text; primary-fixed-dim stays >= 5.7:1. */
.fp-hero-eyebrow { color: rgb(var(--fp-primary-fixed-dim)); }