/*
 * Parent app portal — auth.css alignment
 * Load after app-variables.css on /app/* parent pages
 * Brand: navy #182743 + yellow #ffef4b, 4px radius, Inter
 */

body.app-body {
  --auth-navy: #182743;
  --auth-yellow: #ffef4b;
  --auth-yellow-hover: #ffe820;
  --auth-white: #ffffff;
  --auth-border: #e2e5ea;
  --auth-border-input: #d1d5db;
  --auth-text-muted: #6b7280;
  --auth-text-placeholder: #9ca3af;
  --auth-radius: 4px;
  --auth-easing: cubic-bezier(0.2, 0, 0, 1);
  --auth-duration: 180ms;

  /* Core palette remaps */
  --background: var(--auth-white);
  --foreground: var(--auth-navy);
  --muted: #f9fafb;
  --muted-foreground: var(--auth-text-muted);
  --border: var(--auth-border);
  --card: var(--auth-white);

  --accent: var(--auth-navy);
  --accent-hover: #0f1a2e;
  --accent-soft: #f3f4f6;

  --button-primary: var(--auth-yellow);
  --button-primary-text: var(--auth-navy);
  --button-secondary: var(--auth-white);
  --button-secondary-border: var(--auth-border-input);

  --radius-sm: var(--auth-radius);
  --radius-md: var(--auth-radius);
  --radius-lg: var(--auth-radius);
  --radius-xl: 8px;

  --shadow-card: 0 1px 2px rgb(24 39 67 / 0.04), 0 4px 16px rgb(24 39 67 / 0.06);
  --shadow-nav: 0 4px 20px rgb(24 39 67 / 0.12);

  --card-radius: var(--auth-radius);

  --font-display: var(--font-sans);

  /* fpa-app tokens */
  --fpa-app-brand: var(--auth-navy);
  --fpa-app-brand-hover: #0f1a2e;
  --fpa-app-brand-active: #0a1220;
  --fpa-app-on-brand: var(--auth-white);

  --fpa-app-accent: var(--auth-yellow);
  --fpa-app-accent-hover: var(--auth-yellow-hover);
  --fpa-app-accent-active: #f5dc00;
  --fpa-app-on-accent: var(--auth-navy);
  --fpa-app-accent-soft: #fffef0;

  --fpa-app-brand-ch: 24 39 67;
  --fpa-app-accent-ch: 255 239 75;
  --fpa-app-ink-ch: 24 39 67;

  --fpa-app-heart: #e11d48;
  --fpa-app-heart-hover: #be123c;
  --fpa-app-heart-ch: 225 29 72;

  --fpa-app-bg: var(--auth-white);
  --fpa-app-surface: var(--auth-white);
  --fpa-app-surface-elevated: var(--auth-white);
  --fpa-app-card: var(--auth-white);
  --fpa-app-surface-muted: var(--muted);
  --fpa-app-border: var(--auth-border);
  --fpa-app-hero-bg: var(--muted);

  --fpa-app-text: var(--auth-navy);
  --fpa-app-text-muted: var(--auth-text-muted);

  --fpa-app-nav-bg: var(--auth-white);
  --fpa-app-nav-border: var(--auth-border);
  --fpa-app-nav-bar-border: var(--auth-border);
  --fpa-app-nav-item: var(--auth-text-muted);
  --fpa-app-nav-item-hover: var(--auth-navy);

  --fpa-app-initials-bg: #f3f4f6;
  --fpa-app-initials-text: var(--auth-navy);

  --fpa-app-radius-sm: var(--auth-radius);
  --fpa-app-radius-md: var(--auth-radius);
  --fpa-app-radius-lg: var(--auth-radius);
  --fpa-app-radius-xl: 8px;
  --fpa-app-radius-pill: var(--auth-radius);
  --fpa-app-card-radius: var(--auth-radius);

  --fpa-app-button-primary: var(--auth-yellow);
  --fpa-app-button-primary-text: var(--auth-navy);
  --fpa-app-button-secondary: var(--auth-white);
  --fpa-app-button-secondary-border: var(--auth-border-input);

  --fpa-app-focus-ring: 0 0 0 1px var(--auth-navy);

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--auth-navy);
  background: var(--auth-white);
}

/* —— Primary CTAs (auth yellow) —— */
body.app-body .app-skip-link,
body.app-body .app-fav-empty__btn,
body.app-body .app-contacts-empty__btn,
body.app-body .app-contacts-sheet__btn--primary,
body.app-body .app-map-detail__cta--primary,
body.app-body .app-map-empty__btn {
  background: var(--auth-yellow);
  color: var(--auth-navy);
  border: none;
  border-radius: var(--auth-radius);
  font-weight: 600;
  transition: background var(--auth-duration) var(--auth-easing);
}

body.app-body .app-skip-link:hover,
body.app-body .app-fav-empty__btn:hover,
body.app-body .app-contacts-empty__btn:hover,
body.app-body .app-contacts-sheet__btn--primary:hover,
body.app-body .app-map-detail__cta--primary:hover,
body.app-body .app-map-empty__btn:hover {
  background: var(--auth-yellow-hover);
  color: var(--auth-navy);
}

body.app-body .app-map-detail__cta--secondary {
  background: var(--auth-white);
  color: var(--auth-navy);
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
}

body.app-body .app-map-detail__cta--secondary:hover {
  background: var(--muted);
  border-color: #b0b7c3;
}

body.app-body .app-contacts-sheet__btn--secondary {
  background: var(--auth-white);
  color: var(--auth-navy);
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
}

body.app-body .app-contacts-sheet__btn--secondary:hover {
  background: var(--muted);
  border-color: #b0b7c3;
}

/* —— Links & section actions —— */
body.app-body .app-section-head a,
body.app-body .app-fav-recs__viewall {
  color: var(--auth-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.app-body .app-section-head a:hover,
body.app-body .app-fav-recs__viewall:hover {
  opacity: 0.75;
}

/* —— Search & inputs —— */
body.app-body .app-search {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border-input);
}

body.app-body .app-search .material-symbols-outlined {
  color: var(--auth-text-muted);
}

body.app-body .app-search input:focus {
  outline: none;
}

body.app-body .app-search:focus-within {
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 1px var(--auth-navy);
}

/* —— Top bar chips —— */
body.app-body .app-page--sticky-top:not(.app-page--home) .app-top-bar__brand,
body.app-body .app-page--sticky-top:not(.app-page--home) .app-top-bar__actions .app-icon-btn {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border-input);
}

body.app-body .app-icon-btn {
  border-radius: var(--auth-radius);
}

body.app-body .app-icon-btn:focus-visible,
body.app-body .app-fav-empty__btn:focus-visible,
body.app-body .app-fav-update-banner:focus-visible {
  outline: 2px solid var(--auth-navy);
  outline-offset: 2px;
  box-shadow: none;
}

/* —— Floating nav —— */
body.app-body .app-floating-nav {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border);
}

body.app-body .app-fn-item {
  border-radius: var(--auth-radius);
}

body.app-body .app-fn-item:hover {
  background: var(--muted);
  color: var(--auth-navy);
}

body.app-body .app-fn-item--active,
body.app-body .app-fn-item--active:hover {
  background: var(--auth-yellow);
  color: var(--auth-navy);
}

body.app-body .app-fn-item--active .material-symbols-outlined {
  color: var(--auth-navy);
}

body.app-body .app-fn-item:focus-visible {
  box-shadow: 0 0 0 2px var(--auth-navy);
}

body.app-body .app-fn-item--active:focus-visible {
  box-shadow: 0 0 0 2px var(--auth-navy);
}

/* —— Cards & rows —— */
body.app-body .app-advocate-row,
body.app-body .app-browse-card,
body.app-body .app-rated-card,
body.app-body .app-contacts-row {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border);
}

body.app-body .app-fav-update-banner {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border);
  background: var(--muted);
}

body.app-body .app-fav-update-banner:hover {
  background: #f3f4f6;
}

body.app-body .app-fav-update-banner__iconwrap {
  border-radius: var(--auth-radius);
  color: var(--auth-navy);
}

/* —— Map profile sheet hero —— */
body.app-body .app-map-detail__header {
  background: var(--auth-yellow);
}

body.app-body .app-map-detail__name {
  color: var(--auth-navy);
  font-weight: 700;
}

body.app-body .app-map-detail__meta,
body.app-body .app-map-detail__org,
body.app-body .app-map-detail__meta .app-rate__num,
body.app-body .app-map-detail__meta .app-rate__from,
body.app-body .app-map-detail__meta .app-rate__unit {
  color: var(--auth-text-muted);
}

/* —— Badges (navy, on-brand white) —— */
body.app-body .app-fav-rec-top-badge,
body.app-body .app-map-detail__info-tag--match {
  background: var(--auth-navy);
  color: var(--auth-white);
  border-radius: var(--auth-radius);
}

body.app-body .app-fav-rec-top-badge__rank,
body.app-body .app-fav-rec-top-badge__label {
  color: var(--auth-white);
}

/* —— Typography —— */
body.app-body .app-favorites-title,
body.app-body .app-hero-title,
body.app-body .app-contacts-sheet__title,
body.app-body .app-fav-empty__title,
body.app-body .app-fav-recs__title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--auth-navy);
}

body.app-body .app-contacts-sheet__title,
body.app-body .app-contacts-sheet__close {
  color: var(--auth-navy);
}

body.app-body .app-contacts-sheet__close:hover {
  background: var(--muted);
}

body.app-body .app-search__filter {
  border-radius: var(--auth-radius);
  background: var(--muted);
  color: var(--auth-navy);
}

body.app-body .app-search__filter:hover {
  background: #f3f4f6;
}

body.app-body .app-need-card {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border);
}

/* —— Map markers —— */
body.app-body .app-map-marker .app-map-marker__inner {
  background: var(--auth-navy);
  color: var(--auth-white);
}

/* —— Toast —— */
body.app-body .app-toast {
  background: var(--auth-navy);
  border-radius: var(--auth-radius);
}

/* —— Loading skeletons —— */
body.app-body .app-loading-line {
  border-radius: var(--auth-radius);
  background: var(--muted);
}