/*
 * This is a manifest file that'll be compiled into application.css.
 */

@import "actiontext.css";

:root {
  --header-height: 60px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hard guard against horizontal scroll on the document root. If anything
   accidentally exceeds viewport width (rogue translation, future widget,
   touch-bounce on iOS), the page will simply clip rather than letting
   the user pan sideways. The site has no intentional horizontal scroll. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f9fafb;
  color: #15306b;
}

/* ── Header & Nav ── */

.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 24px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Logo ── */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.site-logo__text--earth  { color: #0084D1; }
.site-logo__text--angels { color: #1a3a6b; }

.nav-container {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;        /* allow shrinking so we can detect overflow */
  flex: 0 1 auto;
}

/* ── Overflow (ellipsis) + mobile hamburger dropdowns ── */

.nav-overflow .nav-link__trigger,
.mobile-menu .nav-link__trigger {
  padding: 8px 10px;
  color: #374151;
}
.nav-overflow .nav-link__trigger svg,
.mobile-menu .nav-link__trigger svg {
  display: block;
}
.nav-overflow[hidden],
.mobile-menu[hidden] { display: none; }

.dropdown-menu--overflow {
  left: auto;
  right: 0;            /* anchor to the right edge (overflow button sits on the right) */
  min-width: 240px;
}
.dropdown-menu--mobile {
  left: 0;
  right: auto;         /* anchor to the left edge (hamburger sits on the left) */
  min-width: 260px;
}

/* Render moved items as full-width rows inside the overflow/mobile panels */
.dropdown-menu--overflow > .nav-link,
.dropdown-menu--overflow > .nav-link--dropdown,
.dropdown-menu--mobile > .nav-link,
.dropdown-menu--mobile > .nav-link--dropdown {
  width: 100%;
  border-radius: 8px;
}
.dropdown-menu--overflow > .nav-link,
.dropdown-menu--mobile > .nav-link {
  display: flex;
  justify-content: flex-start;
}
.dropdown-menu--overflow > .nav-link--dropdown,
.dropdown-menu--mobile > .nav-link--dropdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}
.dropdown-menu--overflow > .nav-link--dropdown > .nav-link__trigger,
.dropdown-menu--mobile > .nav-link--dropdown > .nav-link__trigger {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 14px;
}
.dropdown-menu--overflow > .nav-link--dropdown > .nav-link__trigger .chevron,
.dropdown-menu--mobile > .nav-link--dropdown > .nav-link__trigger .chevron {
  margin-left: auto;
}

/* Nested dropdowns (Earn / Community) become inline accordions when inside overflow/mobile */
.dropdown-menu--overflow .nav-link--dropdown .dropdown-menu,
.dropdown-menu--mobile .nav-link--dropdown .dropdown-menu {
  position: static;
  border: none;
  box-shadow: none;
  padding: 4px 0 4px 12px;
  min-width: 0;
  background: transparent;
  animation: none;
  border-radius: 0;
}
.dropdown-menu--overflow .dropdown-item,
.dropdown-menu--mobile .dropdown-item {
  padding: 8px 10px;
}
.dropdown-menu--overflow .dropdown-item__icon,
.dropdown-menu--mobile .dropdown-item__icon {
  width: 28px;
  height: 28px;
}
.dropdown-menu--overflow .dropdown-divider,
.dropdown-menu--mobile .dropdown-divider {
  margin: 4px 12px;
}

/* ── Mobile layout (< 880px): hamburger left, logo centered, login icon right ── */

@media (max-width: 879px) {
  .site-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .nav-container { display: none; }     /* nav items live in the hamburger menu */
  .mobile-menu {
    display: inline-flex;
    align-items: center;
    position: relative;
    justify-self: start;
  }
  .site-logo { justify-self: center; }
  .login-btn {
    margin-left: 0;
    justify-self: end;
    padding: 0;
    width: 34px;
    gap: 0;
    justify-content: center;
  }
  .login-btn__text { display: none; }
}

/* ── Login button (matches .nav-link sizing + .nav-link--active colors) ── */

.header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: #4b5563;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.settings-btn:hover {
  background: #f3f4f6;
  color: #15306b;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: none;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background-color: #0084D1;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.login-btn:hover {
  background-color: #006fb0;
  color: #ffffff;
}

.login-btn:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

.login-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/* Signed-in avatar button in the header. Bare circle — no blue chip
   wrapper, no name text. Shows the uploaded avatar image, or the first
   character of firstname / nickname / email on the same orange fill as
   the settings-modal topbar avatar. Opens the settings modal on click. */
.nav-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #e8843c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.nav-avatar-btn:hover { filter: brightness(0.92); }
.nav-avatar-btn:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}
.nav-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nav-avatar-btn span {
  line-height: 1;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.nav-link:hover {
  background-color: #f3f4f6;
  color: #15306b;
}

.nav-link--active {
  background-color: #1a3a6b;
  color: #ffffff;
}

.nav-link--active:hover {
  background-color: #15306b;
  color: #ffffff;
}

/* ── Dropdown wrapper ── */

.nav-link--dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.nav-link__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link__trigger:hover,
.nav-link--dropdown.is-open > .nav-link__trigger {
  background-color: #f3f4f6;
  color: #15306b;
}

.nav-link__trigger .chevron {
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-link--dropdown.is-open > .nav-link__trigger .chevron {
  transform: rotate(180deg);
}

/* ── Dropdown menu panel ── */

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 200;
  animation: dropdown-in 0.15s ease;
}

.nav-link--dropdown.is-open > .dropdown-menu {
  display: block;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dropdown items ── */

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #15306b;
  transition: background-color 0.12s ease;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.dropdown-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #f3f4f6;
  color: #374151;
  flex-shrink: 0;
}

.dropdown-item:hover .dropdown-item__icon {
  background-color: #e5e7eb;
}

.dropdown-item__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dropdown-item__text strong {
  font-size: 14px;
  font-weight: 600;
  color: #15306b;
  line-height: 1.3;
}

.dropdown-item__text small {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  line-height: 1.3;
}

.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 4px 6px;
}

/* ── Crown badge ── */

.badge-crown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: #f3f4f6;
  color: #6b7280;
  vertical-align: middle;
  margin-left: 4px;
}

.dropdown-item:hover .badge-crown {
  background-color: #e5e7eb;
}

/* ── Main content ── */

.main-content {
  padding: 40px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-content--full {
  padding: 0;
  max-width: 100%;
  margin: 0;
}

/* ── Media iframe ── */

.media-page {
  overflow: hidden;
}

.media-iframe-wrapper {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  overflow: hidden;
}

.media-iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  display: block;

  /* Scale iframe content to fill wrapper on all screen sizes */
  transform-origin: top left;
}

/* Fluid scaling at narrower viewports */
@media (max-width: 1024px) {
  .media-iframe-wrapper {
    top: var(--header-height);
  }
}

@media (max-width: 640px) {
  .media-iframe-wrapper {
    top: var(--header-height);
  }

  .media-iframe {
    /* On mobile let the iframe scroll naturally */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}

.btn--primary {
  background-color: #15306b;
  color: #ffffff;
}

.btn--primary:hover {
  background-color: #1f2937;
  transform: translateY(-1px);
}

.btn--secondary {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn--secondary:hover {
  background-color: #e5e7eb;
  transform: translateY(-1px);
}

/* ── Landing hero (split layout) ── */

.landing-hero {
  position: relative;
  min-height: 520px;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.landing-hero__slides {
  /* Fill .landing-hero (which carries the responsive min-height). Using
     position: absolute + inset: 0 means we don't have to duplicate
     min-height on this class across every breakpoint. */
  position: absolute;
  inset: 0;
}

.landing-hero__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #1a3a6b;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  pointer-events: none;
}

.landing-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.landing-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 48px 60px 40px;
}

/* Slide theme: original blue → green */
.landing-hero__slide--theme-1 .landing-hero__left {
  background: linear-gradient(135deg, #1a3a6b 0%, #1a3a6b 42.5%, #2d6a4f 75%, #52b788 100%);
}

/* Slide theme: black → grey */
.landing-hero__slide--theme-2 .landing-hero__left {
  background: linear-gradient(135deg, #000000 0%, #1f2937 55%, #6b7280 100%);
}

/* Slide 2 image: show the full frame, letterbox blends with image's cyan edge */
.landing-hero__slide--theme-2 .landing-hero__right {
  background: #2aacd4;
}

.landing-hero__slide--theme-2 .landing-hero__img {
  object-fit: contain;
}

/* Play button overlay (slide 2) */
.landing-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #15306b;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 150ms ease, background-color 150ms ease;
}

.landing-hero__play:hover {
  background: #ffffff;
  transform: translate(-50%, -50%) scale(1.06);
}

.landing-hero__play:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* The play icon is a right-pointing triangle — nudge it visually right
   so it looks optically centered inside the circle. */
.landing-hero__play svg {
  transform: translateX(3px);
}

/* Video element fills the right panel, same fit rules as the image. */
.landing-hero__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.landing-hero__badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  width: fit-content;
}

.landing-hero__title {
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.landing-hero__subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 440px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.landing-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Right: image panel */
.landing-hero__right {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
}

.landing-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Carousel controls overlay (live on the hero, positioned over the right half) */
.landing-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.landing-hero__nav:hover {
  background: rgba(17, 24, 39, 0.8);
}

.landing-hero__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.landing-hero__nav--prev { left: 12px; }
.landing-hero__nav--next { right: 12px; }

.landing-hero__dots {
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.landing-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.landing-hero__dot:hover { background: rgba(255, 255, 255, 0.85); }

.landing-hero__dot.is-active {
  background: #ffffff;
  transform: scale(1.25);
}

.landing-hero__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.landing-hero__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #9ca3af;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

.landing-hero__img-placeholder code {
  background: #e5e7eb;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #374151;
}

/* Stats bar below hero */
.landing-stats {
  display: flex;
  gap: 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.landing-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 20px 16px;
  border-right: 1px solid #e5e7eb;
}

.landing-stat:last-child {
  border-right: none;
}

.landing-stat__number {
  font-size: 1.6rem;
  font-weight: 800;
  color: #15306b;
  letter-spacing: -0.5px;
}

.landing-stat__label {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Use the mobile-stacked hero layout up to 900px (not just 768px). Between
   ~770 and ~900 the side-by-side 2-column desktop layout leaves each half
   too narrow for the action buttons to fit on one row, so they wrapped —
   and because slides are `position: absolute; inset: 0` they overflowed
   past the desktop min-height (520px) and got clipped by overflow: hidden.
   The stacked layout has room to breathe at these widths. */
@media (max-width: 900px) {
  /* The desktop layout uses min-height: 520px assuming a side-by-side
     2-column grid. On mobile the slide stacks vertically, so we need
     enough room for the full text block AND the image below it; otherwise
     overflow: hidden on .landing-hero clips the second-row image. */
  .landing-hero {
    min-height: 555px;
  }

  /* Widen the hero to ~95% of viewport on mobile by clawing back most
     of .main-content's 24px horizontal padding. Net hero width on a
     375px screen: 327 + 28 = 355 ≈ 94.7%. */
  .landing-hero {
    margin-left: -14px;
    margin-right: -14px;
  }

  .landing-hero__slide {
    grid-template-columns: 1fr;
    /* Top row sizes to text content (auto), bottom row is the image (240px).
       Using `auto` instead of `1fr` ensures the row honors content height
       rather than fighting it; the parent's min-height holds the total. */
    grid-template-rows: auto 240px;
    /* Don't stretch the rows to fill the slide. Without this, the `auto`
       row was expanded to (hero_min_height - 240) and the flex-start
       content left 60–80px of whitespace below the buttons. With
       align-content: start the image sits right against the content; any
       leftover height pads BELOW the image (out of sight against the
       hero's bottom edge). */
    align-content: start;
  }

  .landing-hero__left {
    padding: 10px 2px 12px;
    align-items: center;
    text-align: center;
    /* Snap text to the top of the cell on mobile. The desktop layout uses
       justify-content: center (inherited from the base rule), which is great
       at desktop sizes — but on the shorter mobile slide (slide 2 has no
       badge/subtitle) it leaves a big black gap above the title. */
    justify-content: flex-start;
  }

  /* (Slide 2 used to override justify-content/padding here to vertically
     center its title when it had no badge/subtitle. Now that slide 2 has
     the same content shape as slide 1 — badge, title, subtitle, buttons —
     we want it to flex-start like slide 1 so their text starts at the same
     vertical position. No override needed.) */

  /* Smaller hero title on mobile — 3rem (48px) is way too tall for a
     375px-wide phone and stretches the slide past the available room. */
  .landing-hero__title {
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 12px;
    width: 99%;
  }

  .landing-hero__subtitle {
    max-width: 100%;
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-height: 80px;
    overflow: scroll;
  }

  .landing-hero__badge {
    font-size: 12px;
    padding: 4px 12px;
    margin-bottom: 14px;
  }

  .landing-hero__actions {
    justify-content: center;
  }

  .landing-hero__right {
    min-height: 240px;
  }

  .landing-hero__dots { left: 0; bottom: 10px; }
}

/* Tablet-stacked range (600–900px): the slide still stacks vertically, but
   the viewport is wide enough that the phone-sized image (240px) and title
   (2rem) look diminutive. Scale them up proportionally so the hero fills
   its canvas without looking like a phone screenshot stretched sideways. */
@media (min-width: 600px) and (max-width: 900px) {
  .landing-hero {
    min-height: 760px;
  }

  .landing-hero__slide {
    grid-template-rows: auto 380px;
  }

  .landing-hero__left {
    padding: 48px 40px 20px;
  }

  .landing-hero__title {
    font-size: 2.75rem;
    margin-bottom: 16px;
  }

  .landing-hero__subtitle {
    font-size: 1.05rem;
    max-width: 520px;
    margin-bottom: 28px;
  }

  .landing-hero__badge {
    font-size: 13px;
    padding: 5px 14px;
    margin-bottom: 18px;
  }

  .landing-hero__right {
    min-height: 380px;
  }
}

/* ── Landing features ── */

.landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 56px 0;
}

.landing-feature {
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.landing-feature:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.landing-feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  margin-bottom: 16px;
}

.landing-feature h3 {
  font-size: 17px;
  font-weight: 700;
  color: #15306b;
  margin-bottom: 8px;
}

.landing-feature p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.65;
}

/* Mobile portrait: stack stats 2×2 and features into a single column so
   nothing overflows the viewport. `minmax(0, 1fr)` defeats the default
   1fr track minimum (min-content), which is what caused the horizontal
   scroll on narrow screens. */
@media (max-width: 640px) {
  .landing-stats {
    flex-wrap: wrap;
  }
  .landing-stat {
    flex: 1 1 50%;
    min-width: 0;
    padding: 16px 12px;
  }
  .landing-stat:nth-child(2) { border-right: none; }
  .landing-stat:nth-child(1),
  .landing-stat:nth-child(2) { border-bottom: 1px solid #e5e7eb; }

  .landing-features {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 32px 16px;
  }
  .landing-feature {
    min-width: 0;
    padding: 20px;
  }
}

/* ── Dashboard hero ── */

.dashboard-hero {
  padding: 60px 0 40px;
}

.dashboard-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #15306b;
  margin-bottom: 12px;
}

.dashboard-hero p {
  font-size: 1.1rem;
  color: #6b7280;
}

/* Story 22.1 · Public user profile show page (MVP).
   Hero (avatar / name / bio / meta) + interests tags + list of
   publicly-supported campaigns. Guest-accessible. */
.public-profile {
  max-width: 900px;
  margin: 32px auto 80px;
  padding: 0 24px;
}
.public-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #c7d2fe;
  margin-bottom: 20px;
}
.public-profile__back:hover { background: #c7d2fe; }
.public-profile__hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.public-profile__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef2ff;
  color: #1e40af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
}
.public-profile__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.public-profile__hero-body { flex: 1; min-width: 220px; }
.public-profile__name {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
}
.public-profile__bio {
  margin: 0 0 10px;
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
}
.public-profile__meta {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
}
.public-profile__meta-sep { margin: 0 6px; opacity: 0.5; }
.public-profile__owner-actions { flex-shrink: 0; }
.public-profile__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #15306b;
  background: #15306b;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.public-profile__btn:hover { background: #0f2454; }
.public-profile__btn--outline {
  background: #ffffff;
  color: #15306b;
}
.public-profile__btn--outline:hover { background: #f3f4f6; }
.public-profile__section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.public-profile__section-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: #15306b;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.public-profile__section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 8px;
  height: 22px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  font-size: 12px;
  font-weight: 700;
}
.public-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.public-profile__tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #c7d2fe;
}
.public-profile__campaigns {
  list-style: none;
  padding: 0;
  margin: 0;
}
.public-profile__campaign {
  border-bottom: 1px solid #f3f4f6;
}
.public-profile__campaign:last-child { border-bottom: 0; }
.public-profile__campaign-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
}
.public-profile__campaign-link:hover .public-profile__campaign-name { color: #2563eb; }
.public-profile__campaign-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #15306b;
}
.public-profile__campaign-org {
  font-size: 12.5px;
  color: #6b7280;
}
.public-profile__empty {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.5;
}
.public-profile__initials { display: inline-block; }

/* Standalone /donate_individual walkthrough page — public URL for
   external ad / social traffic. Video hero + one-line pitch + CTAs
   to keep momentum going after they watch. */
.donate-video {
  max-width: 900px;
  margin: 40px auto 80px;
  padding: 0 24px;
  text-align: center;
}
.donate-video__header { margin-bottom: 24px; }
.donate-video__title {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
}
.donate-video__subtitle {
  margin: 0;
  font-size: 16px;
  color: #4b5563;
  line-height: 1.5;
}
.donate-video__stage {
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
}
.donate-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.donate-video__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.donate-video__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #15306b;
  cursor: pointer;
}
.donate-video__btn--primary {
  background: #15306b;
  color: #ffffff;
}
.donate-video__btn--primary:hover { background: #0f2454; }
.donate-video__btn--outline {
  background: #ffffff;
  color: #15306b;
}
.donate-video__btn--outline:hover { background: #f3f4f6; }

/* Story 25.0 · Profile editor container page — hosts firstname /
   lastname today plus disabled slots for the sub-stories (25.2 bio,
   25.3 location, 25.4 interests, 25.5 visibility). Each disabled
   fieldset is visible so reviewers see what's coming next. */
.profile-edit {
  max-width: 720px;
  margin: 32px auto 80px;
  padding: 0 24px;
}
.profile-edit__header { margin-bottom: 24px; }
.profile-edit__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #c7d2fe;
  margin-bottom: 14px;
}
.profile-edit__back:hover { background: #c7d2fe; }
.profile-edit__title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
}
.profile-edit__subtitle {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
}
.profile-edit__section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.profile-edit__section--deferred {
  border-style: dashed;
  background: #fafafa;
}
.profile-edit__section-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #15306b;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.profile-edit__coming {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 999px;
}
.profile-edit__row { margin-bottom: 14px; }
.profile-edit__row:last-child { margin-bottom: 0; }
.profile-edit__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.profile-edit__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.profile-edit__input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.profile-edit__input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}
.profile-edit__input--textarea { min-height: 96px; resize: vertical; }
.profile-edit__help {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.profile-edit__check {
  display: block;
  font-size: 13.5px;
  color: #374151;
  padding: 4px 0;
}
.profile-edit__check input { margin-right: 8px; }
.profile-edit__avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-edit__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef2ff;
  color: #1e40af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
}
.profile-edit__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-edit__avatar-help {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.5;
}
.profile-edit__avatar-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  flex: 1;
}
.profile-edit__avatar-form { display: inline-flex; }

/* Small round icon buttons — matches the reference icon-row pattern
   the user pointed at. Two actions on the avatar: upload (⤒) and
   delete (🗑). Upload = click → file picker → auto-submit on file
   select (no separate "Upload avatar" button needed). Delete is
   only rendered when an avatar is attached. */
.profile-edit__icon-row { display: inline-flex; gap: 8px; align-items: center; }
.profile-edit__icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #15306b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.profile-edit__icon-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.profile-edit__icon-btn--danger { color: #b91c1c; }
.profile-edit__icon-btn--danger:hover { background: #fee2e2; border-color: #fecaca; }
/* button_to wraps in a <form>; strip its inline block so the button
   sits inline with the sibling upload button without a line break. */
.profile-edit__icon-row form { display: inline-block; margin: 0; padding: 0; }

/* Story 25.0 · Avatar upload modal — mirrors the DS10E .upm pattern
   (student_review.html.erb:1168): dashed blue-line drop zone on a
   soft blue background, big bold blue title + muted sub-help. Adapted
   here as .upload-modal for EAS1's naming, with pill actions at the
   bottom. Tabs / progress / camera panes intentionally omitted —
   avatar upload doesn't need them; can be reintroduced if we grow
   into a video-upload flow. */
.upload-modal {
  border: 0;
  border-radius: 16px;
  padding: 0;
  max-width: 480px;
  width: min(480px, calc(100vw - 32px));
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.upload-modal::backdrop { background: rgba(15, 23, 42, 0.55); }
.upload-modal__form { display: block; }
.upload-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.upload-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #15306b;
}
.upload-modal__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 10px;
}
.upload-modal__close:hover { color: #0f172a; }
.upload-modal__drop {
  display: block;
  margin: 20px 20px 8px;
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  background: #eef2ff;
  border: 1.5px dashed #c7d2fe;
  border-radius: 12px;
  transition: background-color 150ms, border-color 150ms;
}
.upload-modal__drop:hover,
.upload-modal__drop.is-drop {
  background: #e0e7ff;
  border-color: #1e40af;
}
.upload-modal__drop-title {
  font-weight: 800;
  color: #1e40af;
  font-size: 15px;
}
.upload-modal__drop-help {
  color: #6b7280;
  font-size: 12.5px;
  margin-top: 4px;
}
.upload-modal__picked {
  margin: 4px 20px 12px;
  font-size: 13.5px;
  color: #0f172a;
  word-break: break-all;
}
.upload-modal__picked strong { font-weight: 700; }
.upload-modal__picked-size { color: #6b7280; margin-left: 4px; }
.upload-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
}
.profile-edit__errors {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13.5px;
}
.profile-edit__errors ul { margin: 6px 0 0 20px; padding: 0; }
.profile-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.profile-edit__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #15306b;
  background: #15306b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.profile-edit__btn:hover { background: #0f2454; }
.profile-edit__btn--outline {
  background: #ffffff;
  color: #15306b;
}
.profile-edit__btn--outline:hover { background: #f3f4f6; }

/* Story 06.13 · Dashboard profile hero — avatar / name / joined /
   Edit + View Public actions. Sits above the KPI stat cards so it's
   the first personal element the user sees on the dashboard. */
.dashboard-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dashboard-profile__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef2ff;
  color: #1e40af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.dashboard-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dashboard-profile__initials { display: inline-block; }
.dashboard-profile__body { flex: 1; min-width: 200px; }
.dashboard-profile__name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
.dashboard-profile__tagline {
  margin: 4px 0 6px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.4;
}
.dashboard-profile__meta {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
}
.dashboard-profile__meta-sep { margin: 0 6px; opacity: 0.5; }
.dashboard-profile__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.dashboard-profile__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #15306b;
  background: #15306b;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
}
.dashboard-profile__btn:hover { background: #0f2454; }
.dashboard-profile__btn--outline {
  background: #ffffff;
  color: #15306b;
}
.dashboard-profile__btn--outline:hover { background: #f3f4f6; }
@media (max-width: 640px) {
  .dashboard-profile { flex-direction: column; align-items: flex-start; }
  .dashboard-profile__actions { width: 100%; }
  .dashboard-profile__btn { flex: 1; justify-content: center; }
}

/* Dashboard KPI row (Stories 06.1 + 06.3). Auto-fit grid so cards
   flow into 1–4 columns depending on width. Icon lives on the right
   in a soft colored badge to match the Figma reference. */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  padding: 0 0 32px;
}
.stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px 22px;
  min-height: 108px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 150ms, transform 150ms;
}
.stat-card:hover {
  box-shadow: 0 6px 20px rgba(15, 48, 107, 0.08);
  transform: translateY(-1px);
}
.stat-card__body { flex: 1; min-width: 0; }
.stat-card__label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 8px;
}
.stat-card__value {
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.stat-card__cta {
  margin-top: 8px;
  font-size: 12.5px;
  color: #2563eb;
  font-weight: 600;
}
.stat-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card__icon--green { background: #dcfce7; color: #059669; }
.stat-card__icon--pink  { background: #fce7f3; color: #db2777; }

/* Expandable stat-card variant (Story 06.1 · Total Donated drill-down).
   Uses native <details> so behavior is progressive and no JS is needed.
   Click the summary row to reveal a per-donation list below the value. */
.stat-card--expandable { display: block; padding: 0; }
.stat-card--expandable > .stat-card__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.stat-card--expandable > .stat-card__summary::-webkit-details-marker { display: none; }
.stat-card--expandable[open] .stat-card__chevron { transform: rotate(180deg); }
.stat-card__chevron {
  position: absolute;
  top: 22px;
  right: 22px;
  color: #6b7280;
  transition: transform 180ms ease;
}
.stat-card--expandable .stat-card__icon { margin-right: 22px; }
/* Only one of "Show donations" / "Hide donations" is visible at a time. */
.stat-card__cta-hide { display: none; }
.stat-card--expandable[open] .stat-card__cta-show { display: none; }
.stat-card--expandable[open] .stat-card__cta-hide { display: inline; }
/* Empty state — no drill-down, no chevron. */
.stat-card--empty .stat-card__cta--link { color: #2563eb; text-decoration: none; font-weight: 600; }

/* Drawer contents (rendered inside <details> below the summary). */
.stat-card__drawer {
  border-top: 1px solid #f1f5f9;
  padding: 8px 4px 14px;
}
.stat-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.stat-card__list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #f9fafb;
}
.stat-card__list-item:last-child { border-bottom: 0; }
.stat-card__list-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.stat-card__list-link:hover .stat-card__list-name { color: #2563eb; }
.stat-card__list-name {
  font-size: 14px;
  font-weight: 600;
  color: #15306b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-card__list-meta { font-size: 12px; color: #6b7280; }
.stat-card__list-amount {
  font-size: 15px;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
}
.stat-card__drawer-footer {
  display: block;
  padding: 10px 18px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}
.stat-card__drawer-footer:hover { text-decoration: underline; }

/* ── Spin to Win ── */

.spin-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  padding: 32px 24px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.spin-page__main {
  background: linear-gradient(180deg, #fff7e6 0%, #fef3c7 100%);
  border-radius: 16px;
  padding: 28px 24px 32px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.spin-page__header {
  text-align: center;
  margin-bottom: 18px;
}

.spin-page__title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #15306b;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.spin-page__sparkle {
  color: #f59e0b;
  margin: 0 6px;
}

.spin-page__subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 0.95rem;
}

.spin-wheel {
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 14px 0 0;
}

.spin-wheel__stage {
  position: relative;
  aspect-ratio: 1 / 1;
}

.spin-wheel__pointer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.spin-wheel__rotor {
  width: 100%;
  height: 100%;
  transition: transform 5s cubic-bezier(0.17, 0.67, 0.16, 0.99);
  transform-origin: 50% 50%;
  will-change: transform;
}

.spin-wheel__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.18));
}

.spin-wheel__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #ffffff;
  color: #1f2937;
  border: 4px solid #fbbf24;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
  z-index: 2;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.spin-wheel__hub:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.24);
}

.spin-wheel__hub:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.spin-wheel__result {
  margin: 22px auto 0;
  max-width: 480px;
  border-radius: 14px;
  padding: 16px 20px;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25);
  animation: spin-result-pop 320ms ease-out;
}

.spin-wheel__result[data-tone="legendary"] {
  background: linear-gradient(90deg, #fae8ff, #f0abfc);
  border-color: #c026d3;
  box-shadow: 0 6px 18px rgba(192, 38, 211, 0.3);
}

.spin-wheel__result[data-tone="epic"] {
  background: linear-gradient(90deg, #ede9fe, #c4b5fd);
  border-color: #7c3aed;
}

.spin-wheel__result[data-tone="rare"] {
  background: linear-gradient(90deg, #dbeafe, #93c5fd);
  border-color: #2563eb;
}

.spin-wheel__result[data-tone="muted"] {
  background: linear-gradient(90deg, #f3f4f6, #e5e7eb);
  border-color: #9ca3af;
}

.spin-wheel__result-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.spin-wheel__result-icon {
  font-size: 2rem;
  line-height: 1;
}

.spin-wheel__result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spin-wheel__result-label {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spin-wheel__result-prize {
  font-size: 1.25rem;
  color: #15306b;
  font-weight: 800;
}

@keyframes spin-result-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.spin-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.btn-spin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  color: #ffffff;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
}

.btn-spin:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.btn-spin:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-spin--free {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.btn-spin--paid {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.btn-spin__icon {
  font-size: 1.15rem;
  line-height: 1;
}

/* Prizes sidebar */

.spin-page__sidebar {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.spin-prizes__header {
  background: linear-gradient(180deg, #fff7e6, #fef3c7);
  padding: 18px 20px 14px;
  border-bottom: 1px solid #fde68a;
}

.spin-prizes__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #15306b;
}

.spin-prizes__trophy { font-size: 1.25rem; }

.spin-prizes__subtitle {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.spin-prizes__list {
  list-style: none;
  margin: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 680px;
  overflow-y: auto;
}

.spin-prize {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.spin-prize:hover {
  border-color: #fbbf24;
  box-shadow: 0 6px 14px rgba(251, 191, 36, 0.18);
}

.spin-prize__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
}

.spin-prize__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #6b7280;
}

.spin-prize__thumb--legendary { background: linear-gradient(135deg, #d946ef, #a21caf); }
.spin-prize__thumb--epic      { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.spin-prize__thumb--rare      { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.spin-prize__thumb--uncommon  { background: linear-gradient(135deg, #22c55e, #15803d); }
.spin-prize__thumb--common    { background: linear-gradient(135deg, #f59e0b, #b45309); }

.spin-prize__body { min-width: 0; }

.spin-prize__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.spin-prize__name {
  font-size: 0.95rem;
  color: #15306b;
  font-weight: 700;
  line-height: 1.25;
}

.spin-prize__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  color: #ffffff;
  flex-shrink: 0;
}

.spin-prize__badge--legendary { background: linear-gradient(90deg, #d946ef, #a21caf); }
.spin-prize__badge--epic      { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.spin-prize__badge--rare      { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.spin-prize__badge--uncommon  { background: linear-gradient(90deg, #22c55e, #15803d); }
.spin-prize__badge--common    { background: linear-gradient(90deg, #f59e0b, #b45309); }

.spin-prize__blurb {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.4;
}

.spin-prize__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #16a34a;
}

.spin-prize--legendary .spin-prize__meta,
.spin-prize--epic .spin-prize__meta { color: #7c3aed; }
.spin-prize--rare .spin-prize__meta { color: #2563eb; }
.spin-prize--uncommon .spin-prize__meta { color: #16a34a; }
.spin-prize--common .spin-prize__meta { color: #d97706; }

.spin-prize__stock {
  border-top: 1px dashed #e5e7eb;
  padding-top: 10px;
}

.spin-prize__stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.spin-prize__stock-label {
  font-size: 0.78rem;
  color: #6b7280;
}

.spin-prize__stock-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: #2563eb;
}

.spin-prize__bar {
  position: relative;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.spin-prize__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #111827, #4b5563);
  border-radius: 999px;
  transition: width 240ms ease;
}

.spin-prize__alert {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 960px) {
  .spin-page {
    grid-template-columns: 1fr;
  }
}

/* ── Play to Earn ── */

.play-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.play-page__header {
  margin-bottom: 16px;
}

.play-page__title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #15306b;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.play-page__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.play-page__frame {
  position: relative;
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 600px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.play-page__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ────────────── Login modal ────────────── */

.login-modal {
  position: fixed;
  inset: 0;
  margin: auto;            /* centers within the viewport */
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  max-height: calc(100vh - 32px);
  border: none;
  border-radius: 14px;
  padding: 36px 40px 28px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25), 0 6px 16px rgba(15, 23, 42, 0.10);
  color: #15306b;
  overflow: auto;
}
.login-modal::backdrop {
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.login-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.login-modal__close:hover {
  background-color: #f3f4f6;
  color: #15306b;
}

.login-modal__title {
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 500;
  color: #15306b;
  text-align: center;
}

/* ── Form ── */

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Tighter spacing between a label and its input inside a group. The form's
   14px gap still applies between groups; within a group label+field hug. */
.login-form__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* On a failed sign-in the AJAX handler adds .login-form--invalid to the form:
   labels turn red, both input borders turn red, and the inline error span
   next to the username label is filled with the message. The error clears
   the moment the user types in either input. */
.login-form__inline-error {
  display: none;
  margin-left: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #b91c1c;
}
.login-form--invalid .login-form__label { color: #b91c1c; }
.login-form--invalid .login-form__field input,
.login-form--invalid .login-form__field--strong input {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.login-form--invalid .login-form__inline-error { display: inline; }

.login-form__label {
  font-size: 16px;
  font-weight: 700;
  color: #15306b;
}

.login-form__label-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.login-form__forgot {
  color: #0084D1;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  /* Reset <button> user-agent styling so it looks like the link it replaced. */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.login-form__forgot:hover { text-decoration: underline; }

.login-form__field {
  position: relative;
  display: flex;
  align-items: center;
}
.login-form__field input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  color: #15306b;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-form__field input::placeholder { color: #9ca3af; }
.login-form__field input:focus {
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}

/* Strong border around username (matches reference) */
.login-form__field--strong input {
  border-color: #15306b;
  border-width: 1.5px;
}
.login-form__field--strong input:focus {
  border-color: #0084D1;
}

.login-form__field-icon {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  background: #f9fafb;
  pointer-events: none;
}

.login-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #15306b;
  cursor: pointer;
  user-select: none;
}
.login-form__checkbox input { width: 16px; height: 16px; cursor: pointer; }

/* Pill-shaped buttons (Sign in / Sign up / Home) — all 140px wide */
.login-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 160px;
  height: 36px;
  padding: 0 6px;
  margin: 6px auto 0;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  color: #15306b;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background-color 0.15s ease, transform 0.05s ease;
  font-family: inherit;
}
.login-pill:hover { background: #e5e7eb; color: #15306b; }
.login-pill:active { transform: translateY(1px); }
.login-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0084D1;     /* matches the LOG IN button */
  color: #ffffff;
  flex-shrink: 0;
}

/* Icon-less variant: centers the label since there's no icon eating the
   left side of the flex row. */
.login-pill--centered { justify-content: center; }

/* Center the standalone (non-form) pill buttons */
.login-modal > .login-pill {
  display: flex;
}

/* "Or" separator between Sign in and Sign up */
.login-modal__or {
  margin: 14px 0 6px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #15306b;
}

/* ── Footer ── */

.login-modal__support,
.login-modal__powered,
.login-modal__copyright {
  margin: 0;
  text-align: center;
  color: #1f2937;
}
.login-modal__support {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
}
.login-modal__support a {
  color: inherit;
  text-decoration: underline;
}
.login-modal__powered {
  margin-top: 18px;
  font-size: 14px;
  color: #374151;
}
.login-modal__copyright {
  margin-top: 8px;
  font-size: 14px;
  color: #374151;
}

@media (max-width: 879px) {
  .login-modal {
    padding: 28px 22px 20px;
  }
  .login-modal__title { font-size: 20px; }
}

/* ────────────── Sign-up modal ────────────── */

.signup-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25), 0 6px 16px rgba(15, 23, 42, 0.10);
  color: #15306b;
  overflow: auto;
}
.signup-modal::backdrop {
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.signup-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e7eb;
}
.signup-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #15306b;
}
.signup-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.signup-modal__close:hover {
  background-color: #f3f4f6;
  color: #15306b;
}

.signup-form {
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.signup-form__label {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  color: #15306b;
}
.signup-form__label:first-child { margin-top: 0; }

/* Wrapper around inputs that get a "valid" green checkmark. The check is
   absolutely positioned over the input's right edge; padding-right on the
   input reserves room so text doesn't run under it. */
.signup-form__input-wrap { position: relative; }
/* Make the input fill the wrap so the absolutely-positioned check sits at the
   input's right edge, not at the form's right edge. */
.signup-form__input-wrap > .signup-form__input { width: 100%; padding-right: 44px; }
.signup-form__check {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #047857;
  visibility: hidden;
  pointer-events: none;
}
.signup-form__check--visible { visibility: visible; }

/* Red X — mirror of the green checkmark. Shown on the re-enter
   password field when it has content but doesn't match. Instant
   visual signal so the user sees the problem at the field level,
   not only in the red text below. */
.signup-form__x {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #b91c1c;
  visibility: hidden;
  pointer-events: none;
}
.signup-form__x--visible { visibility: visible; }
/* Red ring around any input that carries the invalid flag. Beats
   the base focus ring so it stays red while the user types. */
.signup-form__input.signup-form__input--invalid,
.signup-form__input.signup-form__input--invalid:focus {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18);
}

.signup-form__input {
  padding: 12px 14px;
  font-size: 17px;
  color: #0084D1;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup-form__input::placeholder { color: #0084D1; opacity: 0.6; }
.signup-form__input:focus {
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}
.signup-form__input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}
.signup-form__input:disabled::placeholder { color: #b0b6bf; }
.signup-form--locked .signup-form__label:not(.signup-form__label--legend) {
  color: #9ca3af;
}
.signup-form__submit:disabled {
  background: #d6dde6;
  border-color: #c8d0db;
  color: #ffffff;
  cursor: not-allowed;
}
.signup-form__submit:disabled:hover { background: #d6dde6; }

/* Password fields in the sign-up form have a light-gray background */
.signup-form__input--gray {
  background: #ebeef2;
}

/* Flash messages — shown below the site header after redirects */
.flash {
  margin: 12px auto;
  max-width: 720px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 15px;
  text-align: center;
  border: 1px solid transparent;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.flash--notice  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.flash--alert   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash--fading  { opacity: 0; }

/* Birthday / age check inside the sign-up form */
.signup-form__age {
  margin-top: 18px;
  padding: 0;
  border: 0;
  height: 128px;
  max-height: 129px;
}
.signup-form__label--legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
}
.signup-form__age-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.signup-form__age-select {
  position: relative;
  flex: 1 1 0;
  min-width: 90px;
}
.signup-form__age-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
.signup-form__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 32px 12px 14px;
  font-size: 17px;
  color: rgba(0, 132, 209, 0.6);     /* placeholder state: #0084D1 at 60% */
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup-form__select:focus {
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}
/* Once the user picks a real value, switch to the navy color matching labels. */
.signup-form__select:valid { color: #15306b; }
.signup-form__age-help {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  min-height: 1lh;     /* lock height to one line so first paint matches final layout */
  color: #0084D1;
}
.signup-form__age-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  min-height: 1.4em;    /* reserve one line so the gap to the next field is stable from first paint */
  color: #b91c1c;
}
/* Same approach as .signup-form__field-error[hidden]: keep the box in flow,
   hide only the contents. Prevents the post-open shrink caused by the slot
   briefly taking paragraph height before [hidden]=display:none takes effect. */
.signup-form__age-error[hidden] {
  display: block;
  visibility: hidden;
}
.signup-form__age.is-invalid .signup-form__select {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.signup-form__submit {
  align-self: center;
  margin-top: 26px;
  padding: 10px 28px;
  background: #15306b;
  color: #ffffff;
  border: 1px solid #0f2454;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease;
}
.signup-form__submit:hover { background: #0f2454; }

.signup-form__input.is-invalid {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.signup-form__field-error {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  min-height: 1.4em;    /* reserve one line of space so showing/hiding doesn't shift layout */
  color: #b91c1c;
}
/* When the JS sets [hidden], keep the element in the layout (preserving the
   reserved space) but hide its content. Replaces the default [hidden]:display:none. */
.signup-form__field-error[hidden] {
  display: block;
  visibility: hidden;
}
.signup-form__field-help {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b7280;
}
.signup-form__field-help--valid   { color: #047857; }
.signup-form__field-help--invalid { color: #b91c1c; }
/* "Password Matches" indicator under the Re-Enter Password input.
   Reserved space (visibility-toggled) so the layout doesn't jump when it appears/disappears. */
.signup-form__match {
  margin: 6px 0 0;
  font-size: 13px;
  min-height: 1lh;     /* reserve exactly one line at the inherited line-height */
  color: #047857;
  visibility: hidden;
}
.signup-form__match--visible  { visibility: visible; }
.signup-form__match--no-match { color: #b91c1c; }

/* Inline status under the verification code input ("Too many attempts", etc.).
   Same reserved-line pattern so the layout doesn't shift when text appears. */
.signup-form__verify-code-status {
  margin: 6px 0 0;
  font-size: 13px;
  min-height: 1lh;
  visibility: hidden;
}
.signup-form__verify-code-status--visible { visibility: visible; }
.signup-form__verify-code-status--hint  { color: #6b7280; }   /* neutral / informational */
.signup-form__verify-code-status--ok    { color: #047857; }
.signup-form__verify-code-status--error { color: #b91c1c; }
.signup-form__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 8px;
}
.signup-form__label-row .signup-form__label {
  margin-top: 0;
  margin-bottom: 0;
}
.signup-form__show-pw {
  background: none;
  border: 0;
  padding: 0;
  color: #0084D1;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.signup-form__show-pw:hover { text-decoration: underline; }
.signup-form__show-pw:focus-visible {
  outline: 2px solid #0084D1;
  outline-offset: 2px;
  border-radius: 2px;
}

.signup-form__verify[hidden] { display: none; }
.signup-form__verify {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}
.signup-form__verify .signup-form__label { margin-top: 0; }
.signup-form__verify-resend {
  margin: 10px 0 0;
  font-size: 14px;
  color: #6b7280;
}
.signup-form__verify-resend-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  color: #0084D1;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.signup-form__verify-resend-link:hover { text-decoration: none; }
.signup-form__verify-resend-link:focus-visible {
  outline: 2px solid #0084D1;
  outline-offset: 2px;
  border-radius: 2px;
}
.signup-form__verify-resend-link[disabled] { opacity: .5; cursor: not-allowed; }
.signup-form__verify-resend-status {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
}
.signup-form__verify-resend-status--ok    { color: #047857; }
.signup-form__verify-resend-status--error { color: #b91c1c; }

.signup-modal__terms {
  margin: 18px 0 4px;
  text-align: center;
  font-size: 15px;
  color: #1f2937;
}
.signup-modal__terms a {
  color: #1e88e5;
  text-decoration: none;
}
.signup-modal__terms a:hover { text-decoration: underline; }

@media (max-width: 879px) {
  .signup-modal__title { font-size: 20px; }
  .signup-form { padding: 18px; }
}

/* ────────────── Organizations Directory ────────────── */

.orgs-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.orgs-page__header {
  margin-bottom: 20px;
}
.orgs-page__title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  color: #15306b;
  letter-spacing: -0.5px;
}
.orgs-page__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
}

.orgs-page__toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
/* Old `.orgs-page__search input` rules removed — they were dummy-data
   leftovers and were outranking the newer `.orgs-page__search-input`
   class rules via descendant-selector specificity. The active rules now
   live further down with the campaigns-page styling. */
.orgs-page__filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: inherit;
}
.orgs-page__filters:hover { background: #f3f4f6; }

.orgs-page__count {
  margin: 0 0 18px;
  font-size: 13px;
  color: #6b7280;
}
.orgs-page__count strong { color: #15306b; font-weight: 600; }

.orgs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) {
  .orgs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .orgs-grid { grid-template-columns: 1fr; }
}

/* ── Card ── */

.org-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}

/* Banner — gradient by org "banner" key */
.org-card__banner {
  position: relative;
  height: 110px;
  overflow: hidden;
  background-blend-mode: multiply;
  background-image: linear-gradient(135deg, rgba(124,58,237,0.55), rgba(236,72,153,0.55));
}
.org-card__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.org-card__banner--violet  { background: linear-gradient(135deg, #7c3aed, #c084fc); }
.org-card__banner--emerald { background: linear-gradient(135deg, #059669, #34d399); }
.org-card__banner--rose    { background: linear-gradient(135deg, #be123c, #fb7185); }
.org-card__banner--amber   { background: linear-gradient(135deg, #b45309, #fbbf24); }
.org-card__banner--sky     { background: linear-gradient(135deg, #0369a1, #38bdf8); }
.org-card__banner--indigo  { background: linear-gradient(135deg, #4338ca, #818cf8); }
.org-card__banner--teal    { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.org-card__banner--fuchsia { background: linear-gradient(135deg, #a21caf, #f472b6); }
.org-card__banner--orange  { background: linear-gradient(135deg, #c2410c, #fb923c); }

.org-card__avatar {
  position: absolute;
  bottom: -28px;
  left: 18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #374151;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

/* ── Body ── */

.org-card__body {
  padding: 38px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.org-card__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #15306b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.org-card__verified {
  display: inline-flex;
  color: #2563eb;
}

.org-card__desc {
  margin: 0;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.45;
}

/* ── Badges row ── */

.org-card__badges {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.org-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.org-badge--platinum {
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #ffffff;
}
.org-badge--score {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.org-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
}
.org-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.org-badge__text small {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6366f1;
}
.org-badge__text strong {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b4b;
}

/* ── Category tags ── */

.org-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.org-tag {
  padding: 4px 10px;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: #374151;
}
.org-tag--more {
  background: #e5e7eb;
  color: #4b5563;
}

/* ── Meta (location + est.) ── */

.org-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: #6b7280;
}
.org-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Stats row ── */

.org-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
}
.org-stat {
  text-align: center;
}
.org-stat__value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.org-stat__value--dark  { color: #15306b; }
.org-stat__value--green { color: #059669; }
.org-stat__value--blue  { color: #2563eb; }
.org-stat__label {
  margin-top: 2px;
  font-size: 11.5px;
  color: #6b7280;
}

/* ─────────────────────────────────────────────
   Campaigns page
   ───────────────────────────────────────────── */
.campaigns-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.campaigns-page__header {
  margin-bottom: 20px;
}
.campaigns-page__title {
  font-size: 28px;
  font-weight: 700;
  color: #15306b;
  margin: 0 0 6px;
}
.campaigns-page__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.campaigns-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.campaigns-filter {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.campaigns-filter:hover {
  background: #f3f4f6;
}
.campaigns-filter.is-active {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #15306b;
}
/* Row 2 — quick-filters (My Donations, Urgent). Own row below the
   cause pill bar, no shared background — each pill reads as a
   standalone chip with its own border + fill. Extra gap so they
   don't look like a matched pair.
   Doubled selector (.campaigns-filters.campaigns-filters--quick) so
   this rule outranks the later .campaigns-filters { display: inline-flex }
   definition further down the file; without this, row 2 flowed inline
   next to row 1 no matter what display we set on the --quick class alone. */
.campaigns-filters.campaigns-filters--quick {
  display: flex;
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 14px;
  margin-top: 4px;
  margin-bottom: 16px;
}
.campaigns-filters.campaigns-filters--quick .campaigns-filter {
  border-width: 1px;
  border-style: solid;
  padding: 2px 10px;
  font-size: 13px;
}

.campaigns-filter--mine,
.campaigns-filter--urgent,
.campaigns-filter--emergency,
.campaigns-filter--all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* "All" pill — neutral gray idle, filled navy when active. Sits at the
   start of Row 2 so users have a clear reset target after picking an
   Emergency/Urgent status filter. Chained under .campaigns-filters--quick
   so is-active beats the base white-chip rule further down the file. */
.campaigns-filters--quick .campaigns-filter--all {
  color: #374151;
  border-color: #9ca3af;
  background: #ffffff;
}
.campaigns-filters--quick .campaigns-filter--all:hover { background: #f3f4f6; }
.campaigns-filters--quick .campaigns-filter--all.is-active {
  background: #15306b;
  border-color: #15306b;
  color: #ffffff;
  box-shadow: none;
}

/* "My Donations" — hollow navy chip when idle, filled navy when
   active. Chained under .campaigns-filters--quick so the active
   rule outranks the later .campaigns-filter.is-active { background:
   #fff } definition further down the file. */
.campaigns-filters--quick .campaigns-filter--mine {
  color: #15306b;
  border-color: #15306b;
  background: #ffffff;
}
.campaigns-filters--quick .campaigns-filter--mine:hover { background: #eff6ff; }
.campaigns-filters--quick .campaigns-filter--mine.is-active {
  background: #15306b;
  border-color: #15306b;
  color: #ffffff;
  box-shadow: none;
}
.campaigns-filters--quick .campaigns-filter--mine.is-active svg { color: #ffffff; }
/* Hide the count badge when active — the pill is already the
   selected state, showing the count on a filled chip reads noisy. */
.campaigns-filters--quick .campaigns-filter--mine.is-active .campaigns-filter__badge { display: none; }

/* Count badge inside the My Donations pill — always visible so the
   user knows how many campaigns they've supported at a glance. */
.campaigns-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #15306b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.campaigns-filter--mine.is-active .campaigns-filter__badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* "Urgent" — hollow red chip when idle, filled red when active.
   Same specificity chain as My Donations so is-active beats the
   base .campaigns-filter.is-active white-chip rule. */
.campaigns-filters--quick .campaigns-filter--urgent {
  color: #b91c1c;
  border-color: #b91c1c;
  background: #ffffff;
}
.campaigns-filters--quick .campaigns-filter--urgent:hover { background: #fee2e2; }
.campaigns-filters--quick .campaigns-filter--urgent.is-active {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: none;
}
.campaigns-filters--quick .campaigns-filter--urgent.is-active svg { color: #ffffff; }

/* "Emergency" (Story 08.15) — heavier red than Urgent so the two are
   distinguishable at a glance. Same specificity chain. */
.campaigns-filters--quick .campaigns-filter--emergency {
  color: #7f1d1d;
  border-color: #7f1d1d;
  background: #ffffff;
}
.campaigns-filters--quick .campaigns-filter--emergency:hover { background: #fef2f2; }
.campaigns-filters--quick .campaigns-filter--emergency.is-active {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #ffffff;
  box-shadow: none;
}
.campaigns-filters--quick .campaigns-filter--emergency.is-active svg { color: #ffffff; }

/* Admin-only "Pending" quick-filter on /organizations. Amber accent
   matches the PENDING badge already used on org tile media so the
   two signals visually agree. Same specificity chain as sibling
   quick-filter variants. */
.campaigns-filters--quick .campaigns-filter--pending {
  color: #92400e;
  border-color: #b45309;
  background: #ffffff;
}
.campaigns-filters--quick .campaigns-filter--pending:hover { background: #fef3c7; }
.campaigns-filters--quick .campaigns-filter--pending.is-active {
  background: #b45309;
  border-color: #b45309;
  color: #ffffff;
  box-shadow: none;
}
.campaigns-filters--quick .campaigns-filter--pending.is-active svg { color: #ffffff; }

/* Match Organizations grid — consistent tile sizing across surfaces. */
.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) { .campaigns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .campaigns-grid { grid-template-columns: 1fr; } }

.campaign-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.campaign-card__urgent {
  background: #ef4444;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.campaign-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  overflow: hidden;
}
.campaign-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-card__image--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
}

.campaign-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campaign-card__org {
  display: flex;
  align-items: center;
  gap: 10px;
}
.campaign-card__org-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #15306b;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.campaign-card__org-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-card__org-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.campaign-card__org-name {
  font-weight: 600;
  font-size: 14px;
  color: #15306b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.campaign-card__verified {
  display: inline-flex;
  align-items: center;
  color: #0084D1;
}
.campaign-card__category {
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
}

.campaign-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #15306b;
  margin: 0;
  line-height: 1.3;
}
.campaign-card__desc {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.campaign-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campaign-progress__bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.campaign-progress__bar span {
  display: block;
  height: 100%;
  background: #111827;
  border-radius: 999px;
}
.campaign-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #6b7280;
}
.campaign-progress__amount strong {
  color: #15306b;
  font-size: 18px;
  font-weight: 700;
  margin-right: 6px;
}
.campaign-progress__pct {
  color: #059669;
  font-weight: 700;
  font-size: 14px;
}

.campaign-card__meta {
  display: flex;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  font-size: 13px;
  color: #6b7280;
}
.campaign-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-card__donate {
  appearance: none;
  border: none;
  width: 100%;
  background: #0b1220;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color .15s ease;
}
.campaign-card__donate:hover {
  background: #1f2937;
}

/* Tile progress bar (below the description in the hover panel).
   Mirrors the campaign detail sidebar so donors see raised / goal /
   percent-funded at a glance without opening the tile. */
.campaign-card__progress {
  margin: 4px 0 14px;
}
/* Always-visible variant — sits between the tile media and the stats
   row (not inside the hover panel). Adds side padding so it aligns
   with the rest of the tile chrome. */
.campaign-card__progress--visible {
  margin: 12px 14px 12px;
  padding-top: 4px;
}
.campaign-card__progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.campaign-card__progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f172a, #1e40af);
  border-radius: 999px;
}
.campaign-card__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: #4b5563;
}
.campaign-card__progress-row strong {
  color: #15306b;
  font-size: 15px;
  font-weight: 700;
  margin-right: 4px;
}
.campaign-card__progress-goal {
  color: #6b7280;
}
.campaign-card__progress-pct {
  color: #16a34a;
  font-weight: 700;
}

/* "You donated" tile marker — small pink chip on the media (opposite
   the URGENT badge) so a signed-in donor can spot their supported
   campaigns at a glance. The tile border also picks up a subtle
   accent via .org-card--donated so the marker is legible even before
   you look at the badge itself. */
.org-card--donated {
  border-color: #fbcfe8 !important;
  box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.10);
}
.campaign-card__donated-badge {
  position: absolute;
  top: 10px;
  left: 44px; /* clears the chevron/gear at top-left */
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #fbcfe8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* "You donated $25 on Jul 22" line — inside the expanded tile panel
   under the progress row; also used in the campaign show sidebar via
   the .campaign-donate__you-donated variant below. */
.campaign-card__you-donated {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #fce7f3;
  border: 1px solid #fbcfe8;
  border-radius: 8px;
  font-size: 12.5px;
  color: #831843;
}
.campaign-card__you-donated strong { color: #be185d; }

/* Sidebar variant on the campaign show page. */
.campaign-donate__you-donated {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fce7f3;
  border: 1px solid #fbcfe8;
  border-radius: 10px;
  font-size: 13px;
  color: #831843;
}
.campaign-donate__you-donated strong { color: #be185d; }

/* ─────────────────────────────────────────────
   Feed page
   ───────────────────────────────────────────── */
.feed-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.feed-page__header {
  margin-bottom: 20px;
}
.feed-page__title {
  font-size: 28px;
  font-weight: 700;
  color: #15306b;
  margin: 0 0 6px;
}
.feed-page__subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.trending-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: 20px;
}
.trending-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #15306b;
  margin: 0 0 16px;
}
.trending-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trending-card__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.trending-card__tag {
  color: #2563eb;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.trending-card__tag:hover {
  text-decoration: underline;
}
.trending-card__count {
  color: #6b7280;
  font-size: 14px;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feed-post {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feed-post__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.feed-post__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d1d5db;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feed-post__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feed-post__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.feed-post__author {
  font-weight: 700;
  font-size: 16px;
  color: #15306b;
}
.feed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.feed-badge--ambassador {
  background: #fef3c7;
  color: #92400e;
}
.feed-badge--ambassador svg {
  color: #d97706;
}
.feed-badge--verified {
  background: #f3f4f6;
  color: #374151;
}
.feed-post__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}
.feed-post__more {
  appearance: none;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feed-post__more:hover {
  background: #f3f4f6;
  color: #374151;
}

.feed-post__body {
  font-size: 15px;
  line-height: 1.55;
  color: #15306b;
  margin: 0;
}

.feed-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feed-tag {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}

.feed-post__media {
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.feed-post__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 520px;
}

.feed-post__stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  font-size: 14px;
  color: #6b7280;
}
.feed-post__stats-left {
  display: flex;
  gap: 16px;
}
.feed-post__stats strong {
  color: #15306b;
  font-weight: 700;
  margin-right: 4px;
}

.feed-post__actions {
  display: grid;
  /* minmax(0, 1fr) lets each track shrink below its min-content size, which
     is needed when translated labels (e.g. "Me gusta · Comentar · Compartir")
     are wider than viewport/3 on a narrow phone. Plain `1fr` would force
     each column to its content width and overflow the card. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}
.feed-action {
  appearance: none;
  border: none;
  background: transparent;
  color: #4b5563;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  transition: background-color .15s ease, color .15s ease;
}
/* Keep the icon at its declared 18px regardless of flex shrink pressure
   from a narrow grid track; text-only flex children will shrink first. */
.feed-action > svg { flex-shrink: 0; }

/* On mobile portrait, the three action labels (Like / Comment / Share —
   or wider Spanish translations) crowd the post card. Tighten font-size,
   gap, and padding so they fit alongside the icons. */
@media (max-width: 480px) {
  .feed-action {
    font-size: 12px;
    padding: 8px 4px;
    gap: 4px;
  }
}
.feed-action:hover {
  background: #f3f4f6;
  color: #15306b;
}

/* ─────────────────────────────────────────────
   Site Settings modal (Google-account style)
   ───────────────────────────────────────────── */
.settings-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: none;
  border-radius: 14px;
  background: #e8eaed;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25), 0 6px 16px rgba(15, 23, 42, 0.10);
  color: #1f1f1f;
  overflow: auto;
}
.settings-modal::backdrop {
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

/* Top thin bar with avatar + email + close */
.settings-modal__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #dadce0;
}
.settings-modal__topbar--anon {
  background: #ffffff;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.settings-modal__topbar-title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
}
.settings-modal--anon .settings-modal__body {
  padding-top: 16px;
}
.settings-modal__topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8843c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-modal__topbar-email {
  flex: 1;
  font-size: 14px;
  color: #1f1f1f;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-modal__close {
  appearance: none;
  background: transparent;
  border: none;
  color: #5f6368;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-modal__close:hover {
  background: rgba(0,0,0,.06);
  color: #1f1f1f;
}

/* Hero block — large avatar + greeting + manage pill */
.settings-modal__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 24px;
  background: #e8eaed;
}
.settings-modal__avatar {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 14px;
}
.settings-modal__avatar > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e8843c;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-modal__avatar-camera {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e8eaed;
  color: #5f6368;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.settings-modal__avatar-camera:hover {
  background: #f1f3f4;
}
.settings-modal__title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 400;
  color: #1f1f1f;
}
.settings-modal__manage {
  appearance: none;
  background: transparent;
  border: 1px solid #dadce0;
  color: #1a73e8;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.settings-modal__manage:hover {
  background: #e8f0fe;
  border-color: #c2d7f7;
}

/* Body — cards and pill rows on gray background */
.settings-modal__body {
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
}
.settings-card--alert .settings-card__icon {
  color: #e8843c;
  flex-shrink: 0;
  padding-top: 2px;
}
.settings-card__content {
  flex: 1;
  min-width: 0;
}
.settings-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #1f1f1f;
}
.settings-card__desc {
  margin: 0 0 14px;
  font-size: 14px;
  color: #5f6368;
  line-height: 1.4;
}
.settings-card__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.settings-card__link {
  appearance: none;
  background: transparent;
  border: none;
  color: #1a73e8;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
}
.settings-card__link:hover { background: #e8f0fe; }
.settings-card__cta {
  appearance: none;
  border: none;
  background: #1a73e8;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.settings-card__cta:hover { background: #1765c5; }

/* Split row of two equal pill buttons */
.settings-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.settings-pill {
  appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
  text-align: left;
  transition: background-color .15s ease;
}
.settings-pill:hover { background: #f8f9fa; }
/* Center the Sign out pill under "Manage your EarthAngels Account". */
.settings-row--centered { align-items: center; }
.settings-row--centered form { display: inline-flex; }
.settings-pill--danger        { color: #b91c1c; }
.settings-pill--danger:hover  { background: #fef2f2; }
.settings-pill--danger .settings-pill__icon { color: #b91c1c; }

/* Owner Admin — compact amber button pinned to the bottom of the settings modal.
   Font size + weight + padding match the DS10E reference exactly. */
/* Role-gated portal buttons in the Settings modal — one per portal the user
   can reach. Colors mirror the Figma login-hub buttons for the same portals. */
.portal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 12px;
}
.portal-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
}
.portal-btn:hover  { text-decoration: none; opacity: 0.92; color: #fff; }
.portal-btn--ean          { background: linear-gradient(135deg, #1e293b 0%, #6d28d9 100%); }
.portal-btn--institutional { background: #0f172a; }
.portal-btn--corporate    { background: linear-gradient(135deg, #4f46e5 0%, #a855f7 100%); }
.portal-btn--retailer     { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); }
.portal-btn--ambassador   { background: #fff; color: #6d28d9; border: 1px solid #6d28d9; }
.portal-btn--ambassador:hover { background: #f5f3ff; color: #6d28d9; }

/* Wrapper is a plain block row so the button sizes to its own content instead of
   being stretched by the flex-column parent (.settings-modal__body). */
.owner-admin-row { display: block; text-align: left; }
.owner-admin-btn {
  display: inline-block;
  width: fit-content;
  padding: 8px 18px;
  background: #f5a623;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  margin: 4px 0 8px;
}
.owner-admin-btn:hover  { background: #e59613; color: #fff; text-decoration: none; }
.settings-section-label--owner { margin-top: 12px; }
.settings-pill__icon {
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-pill__icon--circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f0fe;
  color: #1a73e8;
}

.settings-section-label {
  margin: 8px 0 0 4px;
  font-size: 13px;
  color: #5f6368;
}

/* Stacked list of full-width pill rows */
.settings-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-list-item {
  appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font: inherit;
  font-size: 15px;
  color: #1f1f1f;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color .15s ease;
}
.settings-list-item:hover { background: #f8f9fa; }
.settings-list-item__icon {
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-list-item__label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.settings-list-item__value {
  font-size: 14px;
  color: #5f6368;
}

.settings-modal__legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 8px;
  font-size: 13px;
}
.settings-modal__legal a {
  color: #1a3a6b;
  text-decoration: none;
}
.settings-modal__legal a:hover {
  text-decoration: underline;
  color: #15306b;
}
.settings-modal__legal span {
  color: #5f6368;
}

/* ─────────────────────────────────────────────
   Language picker modal
   ───────────────────────────────────────────── */
.lang-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  max-width: 480px;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: none;
  border-radius: 16px;
  background: #f4f5f7;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25), 0 6px 16px rgba(15, 23, 42, 0.10);
  color: #1f1f1f;
  overflow: auto;
}
.lang-modal::backdrop {
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.lang-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 12px;
  gap: 10px;
}
.lang-modal__globe {
  color: #1f1f1f;
  display: inline-flex;
}
.lang-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #1f1f1f;
  text-align: center;
}

.lang-modal__search {
  position: relative;
  margin: 4px 20px 16px;
  background: #e8eefb;
  border-radius: 6px;
}
.lang-modal__search input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 16px;
  border: none;
  border-bottom: 1px solid #c8d0d8;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: #1f1f1f;
  border-radius: 6px 6px 0 0;
  outline: none;
}
.lang-modal__search input:focus {
  border-bottom-color: #1a73e8;
}
.lang-modal__search svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
  pointer-events: none;
}

.lang-modal__list {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  overflow-y: auto;
  max-height: 340px;
}

.lang-option {
  appearance: none;
  background: transparent;
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  font: inherit;
  font-size: 16px;
  color: #1f1f1f;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background-color .12s ease;
}
.lang-option:hover {
  background: rgba(0, 0, 0, .04);
}
.lang-option__check {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #1f1f1f;
  flex-shrink: 0;
}
.lang-option__name {
  color: #1f1f1f;
}
.lang-option__en {
  color: #1f1f1f;
  margin-left: 4px;
}
.lang-option[hidden] {
  display: none;
}

.lang-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 12px 16px 16px;
}
.lang-modal__btn {
  appearance: none;
  background: transparent;
  border: none;
  color: #1a73e8;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.lang-modal__btn:hover {
  background: #e8f0fe;
}

/* ────────────── Verify-Code Modal (post-sign-in 2FA) ────────────── */
.verify-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25), 0 6px 16px rgba(15, 23, 42, 0.10);
  color: #15306b;
  overflow: auto;
}
.verify-modal::backdrop {
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.verify-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 0;
}
.verify-modal__close-form { display: inline; margin: 0; padding: 0; }
.verify-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.verify-modal__close:hover { background-color: #f3f4f6; color: #15306b; }
.verify-modal__title  { margin: 0; font-size: 22px; font-weight: 700; color: #15306b; }
.verify-modal__body   { padding: 12px 22px 22px; display: flex; flex-direction: column; }
.verify-modal__lede   { margin: 8px 0 0; color: #0084D1; font-size: 15px; }
.verify-modal__lede--muted { color: #6b7280; font-size: 13px; }
.verify-modal__lede--error { color: #b91c1c; }
.verify-modal__form   { display: flex; flex-direction: column; }
.verify-modal__code-status { margin: 6px 0 0; font-size: 14px; color: #6b7280; min-height: 1em; }
.verify-modal__code-status--error { color: #b91c1c; }
.verify-modal__after-code { display: flex; flex-direction: column; }
/* The flex display above wins against the UA's [hidden] { display: none },
   so the password section was staying visible even when hidden=true. Pin
   display:none whenever the [hidden] attribute is present. */
.verify-modal__after-code[hidden] { display: none; }
.verify-modal__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  margin-bottom: 6px;
  font-weight: 700;
  color: #15306b;
}
.verify-modal__expires {
  font-weight: 400;
  font-size: 13px;
  color: #0084D1;
}
.verify-modal__expires-line {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}
.verify-modal__input {
  padding: 12px 14px;
  font-size: 1.5rem;
  letter-spacing: .5rem;
  text-align: center;
  width: 100%;
  color: #15306b;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.verify-modal__input:focus {
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}
.verify-modal__actions { display: flex; justify-content: center; margin-top: 14px; }
.verify-modal__submit {
  padding: 10px 24px;
  background: #15306b;
  color: #ffffff;
  border: 1px solid #0f2454;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.verify-modal__submit:hover { background: #0f2454; }
/* Danger variant for the account-deletion confirmation modal. */
.verify-modal__title--danger { color: #b91c1c; }
.verify-modal__submit--danger { background: #b91c1c; border-color: #991b1b; }
.verify-modal__submit--danger:hover { background: #991b1b; }
.verify-modal__resend { margin: 18px 0 0; color: #0084D1; font-size: 14px; }
.verify-modal__resend-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  color: #0084D1;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.verify-modal__resend-link:hover { text-decoration: none; }

/* /verify (sign-in 2FA) page — "Verify" submit button. The view passes only
   minimal inline styling; this adds the pointer cursor and underline-on-hover
   so the button reads as interactive. */
.verify-page__submit { cursor: pointer; transition: background-color 0.15s ease; }
.verify-page__submit:hover { background: #0f2454 !important; text-decoration: underline; }

/* ── Organization onboarding form (/onboard/organization) ────────────────────
   Public-facing self-service org application. Anonymous submission creates
   an inactive Organization for admin review (Option A). Styled to match
   the EA palette: navy #1a3a6b, deep navy #15306b, Earth blue #0084D1. */

.onboard {
  max-width: 760px;
  margin: 32px auto 64px;
  padding: 0 20px;
  color: #15306b;
}

.onboard__header { margin-bottom: 28px; }
.onboard__title  { font-size: 28px; font-weight: 700; color: #15306b; margin: 0 0 8px 0; }
.onboard__subtitle { color: #4b5563; font-size: 15px; line-height: 1.5; margin: 0; }

.onboard__req { color: #b91c1c; margin-left: 2px; }

.onboard__errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
}
.onboard__errors ul { margin: 6px 0 0 18px; padding: 0; }

.onboard__form { display: flex; flex-direction: column; gap: 24px; }

.onboard__group {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.onboard__legend {
  font-size: 16px;
  font-weight: 700;
  color: #1a3a6b;
  padding: 0 8px;
  margin-left: -8px;
}

.onboard__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.onboard__group .onboard__row:first-of-type { margin-top: 8px; }

.onboard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 14px;
}
@media (max-width: 640px) { .onboard__grid { grid-template-columns: 1fr; } }
.onboard__grid .onboard__row { margin-top: 0; }

.onboard__label { font-size: 14px; font-weight: 600; color: #15306b; }

.onboard__input,
.onboard__textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #15306b;
  transition: border-color 120ms, box-shadow 120ms;
}
.onboard__input:focus,
.onboard__textarea:focus {
  outline: none;
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}
.onboard__textarea { resize: vertical; min-height: 80px; line-height: 1.45; }

.onboard__file {
  font-size: 14px;
  color: #4b5563;
}

.onboard__help { margin: 0; font-size: 12px; color: #6b7280; }

.onboard__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

.onboard__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.onboard__btn--primary {
  background: #1a3a6b;
  color: #fff;
}
.onboard__btn--primary:hover { background: #15306b; }

.onboard__btn--secondary {
  background: #fff;
  color: #1a3a6b;
  border-color: #c7d2e8;
}
.onboard__btn--secondary:hover { background: #f3f4f6; }

/* ── NPO Partner Needs Assessment — 8-tab shell ────────────────
   Added 2026-07-30 so the /onboard/organization form mirrors the
   docs/NPO Partner Needs Assessment Fillable.pdf 8-section layout.
   Section 1 populated to PDF parity; Sections 2-8 use .onboard__stub. */
.onboard__tabs-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.onboard__tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  scrollbar-width: thin;
}
.onboard__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid #e5e7eb;
  border-bottom: 3px solid transparent;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.onboard__tab:hover { color: #15306b; background: #f3f4f6; }
.onboard__tab.is-active {
  color: #15306b;
  background: #fff;
  border-bottom-color: #1a3a6b;
}
.onboard__tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.onboard__tab.is-active .onboard__tab-num { background: #1a3a6b; color: #fff; }
.onboard__tab-label { line-height: 1.2; }

.onboard__panel {
  display: none;
  padding: 24px;
}
.onboard__panel.is-active { display: block; }

.onboard__panel-head {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
}
.onboard__eyebrow {
  margin: 0 0 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #14b8a6;
}
.onboard__panel-title {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: #15306b;
}
.onboard__panel-sub {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.onboard__sub-num {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 4px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.onboard__legend-note {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 4px;
}

.onboard__hint {
  margin: 6px 0 10px 0;
  padding: 8px 12px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  color: #92400e;
  font-size: 12px;
  border-radius: 4px;
}
.onboard__hint code {
  background: rgba(146, 64, 14, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

.onboard__subgroup {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}
.onboard__subgroup-title {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.onboard__checkgroup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin-top: 8px;
}
@media (max-width: 640px) { .onboard__checkgroup { grid-template-columns: 1fr; } }
.onboard__radiogroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.onboard__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  padding: 4px 0;
}
.onboard__check input[type="checkbox"]:disabled,
.onboard__check input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.onboard__check--other {
  gap: 6px;
  flex-wrap: wrap;
}
.onboard__input--inline {
  flex: 1;
  min-width: 160px;
  padding: 4px 8px;
  font-size: 13px;
}

.onboard__group--legacy {
  border-style: dashed;
  border-color: #cbd5e1;
  background: #f8fafc;
}
.onboard__group--legacy .onboard__legend {
  color: #64748b;
  font-style: italic;
}

.onboard__stub {
  padding: 24px;
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  text-align: left;
}
.onboard__stub-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
}
.onboard__stub-list {
  margin: 0;
  padding-left: 18px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.7;
}

/* Onboard Organization CTA in the public header. Sits in .header-actions
   between the settings gear (anonymous) and the login button. */
.onboard-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: #1a3a6b;
  border: 1px solid #c7d2e8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.onboard-cta:hover {
  background: #1a3a6b;
  color: #fff;
  border-color: #1a3a6b;
}
.onboard-cta svg { flex-shrink: 0; }

@media (max-width: 720px) {
  /* On narrow screens, hide the label and show only the icon */
  .onboard-cta span { display: none; }
  .onboard-cta { padding: 0 10px; }
}

/* Organizations page interim CTA card. While we build the real directory,
   this page is a placeholder pointing visitors at /onboard/organization. */
.orgs-page__cta {
  margin-top: 28px;
  background: #fff;
  border: 1px solid #c7d2e8;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.orgs-page__cta-title {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 700;
  color: #15306b;
}
.orgs-page__cta-desc {
  margin: 0 auto 18px;
  font-size: 15px;
  color: #4b5563;
  max-width: 540px;
  line-height: 1.5;
}
.orgs-page__cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: #1a3a6b;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms;
}
.orgs-page__cta-btn:hover { background: #15306b; }

/* ── Organizations page: super-admin tile additions ───────────────────────
   The .org-card* skeleton was retained from the earlier dummy cleanup.
   These rules layer real-data behavior on top: avatar-image fill, pending
   pill, "View / Manage" CTA, and the admin-only-view banner. */

.org-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.org-card__name span {
  flex: 1;
  min-width: 0;
}

.org-card__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.org-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 8px;
  background: #fff;
  color: #15306b;
  border: 1px solid #c7d2e8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.org-card__btn:hover {
  background: #1a3a6b;
  color: #fff;
  border-color: #1a3a6b;
}

.orgs-page__admin-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #FFD400;
  border-radius: 8px;
  font-size: 13px;
  color: #78350f;
}
.orgs-page__admin-icon {
  display: inline-flex;
  color: #b45309;
}

/* ─────────────────────────────────────────────────────────────────────────
   Organization tiles — interactive overhaul (hover-expand + gear + modal).
   These rules deliberately come at the bottom of the file so they override
   the earlier .orgs-grid / .org-card baseline. */

/* Match Figma: max 3 across on desktop, scaling down. */
.orgs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 960px) { .orgs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .orgs-grid { grid-template-columns: 1fr; } }

/* Smaller, hover-aware card. */
.org-card {
  position: relative;
  transform: translateZ(0);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.org-card:hover,
.org-card:focus-within {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 16px 32px rgba(15, 48, 107, 0.18);
  z-index: 5;
}

/* Compact banner and avatar. */
.org-card__banner { height: 88px; }
.org-card__avatar { width: 54px; height: 54px; bottom: -22px; left: 14px; font-size: 16px; border-width: 3px; }
.org-card__body   { padding: 30px 14px 14px; gap: 9px; }
.org-card__name   { font-size: 15px; }
.org-card__desc {
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-card__meta       { font-size: 11.5px; }
.org-card__stats      { padding-top: 9px; }
.org-stat__value      { font-size: 16px; }
.org-stat__label      { font-size: 10.5px; }
.org-card__btn        { padding: 7px 12px; font-size: 13px; }
.org-card__status     { font-size: 10px; padding: 1px 7px; }

/* Gear button overlay on the banner (super-admin only). Visible by default
   at low opacity; emphasized on hover. */
.org-card__gear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 48, 107, 0.55);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: background-color 150ms, opacity 150ms, transform 150ms;
  backdrop-filter: blur(2px);
  z-index: 3;
}
.org-card:hover .org-card__gear,
.org-card:focus-within .org-card__gear { opacity: 1; transform: scale(1.05); }
.org-card__gear:hover { background: #1a3a6b; }

/* Action bar that slides up on hover. Hides by default. */
.org-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 220ms ease, opacity 180ms ease, padding 180ms ease, margin 180ms ease;
}
.org-card:hover .org-card__actions,
.org-card:focus-within .org-card__actions {
  max-height: 80px;
  opacity: 1;
}
/* Campaign tiles have three stacked actions (org link + View Campaign +
   gear) instead of two — raise the cap so the gear isn't clipped. */
.campaigns-grid .org-card:hover .org-card__actions,
.campaigns-grid .org-card:focus-within .org-card__actions {
  max-height: 160px;
}

/* ── Settings modal ─────────────────────────────────────────────────────── */

.org-settings-modal {
  border: 0;
  border-radius: 14px;
  padding: 0;
  width: min(720px, calc(100vw - 32px));
  max-height: 88vh;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15,48,107,0.35);
  color: #15306b;
}
.org-settings-modal::backdrop { background: rgba(15,48,107,0.45); backdrop-filter: blur(2px); }

.org-settings-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e7eb;
}
.org-settings-modal__title { font-size: 18px; font-weight: 700; margin: 0; }
.org-settings-modal__close {
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.org-settings-modal__close:hover { background: #f3f4f6; color: #15306b; }

.org-settings-modal__tabs {
  display: flex;
  gap: 8px;
  padding: 14px 22px 0;
  flex-wrap: wrap;
}
.org-settings-modal__tab {
  background: #fff;
  border: 1px solid #c7d2e8;
  color: #15306b;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.org-settings-modal__tab:hover { background: #f3f4f6; }
.org-settings-modal__tab.is-active {
  background: #1a3a6b;
  color: #fff;
  border-color: #1a3a6b;
}

.org-settings-modal__body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  max-height: calc(88vh - 160px);
}
.org-settings-modal__panel { display: none; }
.org-settings-modal__panel.is-active { display: block; }

/* Reuse onboard form bits inside the modal for consistency. */
.org-settings-modal .onboard__row { margin-top: 12px; }
.org-settings-modal .onboard__row:first-child { margin-top: 0; }
.org-settings-modal .onboard__actions { margin-top: 18px; }
.org-settings-modal__current-image {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; font-size: 12px; color: #6b7280;
}
.org-settings-modal__current-image img {
  height: 48px; border-radius: 6px; border: 1px solid #e5e7eb;
}

/* Bigger hover expansion + explicitly-centered settings dialog. */
.org-card:hover,
.org-card:focus-within {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 22px 44px rgba(15, 48, 107, 0.22);
}

.org-settings-modal {
  /* Explicitly center via fixed positioning. The default
     `margin: auto` works in most browsers but some land the dialog
     near the top; this guarantees center on every engine. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Deeper banner + larger avatar so both have breathing room. Body
   padding-top grows to clear the avatar's protrusion. */
.org-card__banner { height: 130px; }
.org-card__avatar {
  width: 72px;
  height: 72px;
  bottom: -28px;
  left: 16px;
  font-size: 20px;
  border-width: 4px;
}
.org-card__body { padding: 40px 14px 14px; }

/* ─────────────────────────────────────────────────────────────────────────
   Organization tiles v2 — photo-first (DS10E-style). The whole card is the
   tile_image with a centered logo and a bottom gradient overlay for the
   title and subtitle. Stats and admin actions slide in below on hover. */

.org-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ── Media surface (image + overlays) ── */
.org-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  overflow: hidden;
}
.org-card__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.org-card__media-fallback {
  background: linear-gradient(135deg, #1a3a6b 0%, #0084D1 100%);
}

/* Centered logo (the avatar image) — soft white disk for visibility on
   any background. Sized large enough to read but not overpower. */
.org-card__media-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  width: 92px;
  height: 92px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #15306b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  padding: 6px;
}
.org-card__media-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Bottom gradient + title overlay. */
.org-card__media-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 60px 18px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  color: #ffffff;
  pointer-events: none;
}
.org-card__media-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.org-card__media-title span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-card__media-title .org-card__verified { color: #38bdf8; }
.org-card__media-subtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Top-right pending pill. */
.org-card__media-status {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(254, 243, 199, 0.95);
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
}

/* Hover-only admin strip below the media. Collapses to zero height when not
   hovered, so the resting card is pure photo. */
.org-card__hover {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 280ms ease, opacity 200ms ease, padding 200ms ease;
  padding: 0 14px;
  background: #ffffff;
}
.org-card:hover .org-card__hover,
.org-card:focus-within .org-card__hover {
  max-height: 200px;
  opacity: 1;
  padding: 14px;
}

.org-card__hover .org-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.org-card__hover .org-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  max-height: none;
  opacity: 1;
  overflow: visible;
}
.org-card__hover .org-card__btn {
  flex: 1;
  justify-content: center;
}

/* Bigger hover lift to match the photo aesthetic. */
.org-card:hover,
.org-card:focus-within {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 24px 48px rgba(15, 48, 107, 0.28);
}

/* Organizations page header: title block on the left, Onboard CTA on the right. */
.orgs-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.orgs-page__header-text { flex: 1; min-width: 220px; }

/* Small corner avatar (instead of large centered badge): bottom-right of
   the tile image, no white disk, no border. Title overlay gets extra
   right padding so it doesn't crash into the avatar. */
.org-card__media-logo {
  position: absolute;
  top: auto;
  left: auto;
  right: 12px;
  bottom: 12px;
  transform: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}
.org-card__media-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.org-card__media-logo span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(15, 48, 107, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep the title text out of the avatar's territory. */
.org-card__media-overlay { padding-right: 68px; }

/* Stats strip resting style (now always visible). */
.org-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 14px 14px;
  margin-top: 0;
  border-top: 0;
  background: #ffffff;
}

/* Slightly larger corner avatar. */
.org-card__media-logo { width: 60px; height: 60px; font-size: 15px; }
.org-card__media-overlay { padding-right: 84px; }

/* Shield moved out of the title (frees up width) and into the subtitle,
   sitting just left of "Non-profit". Title can use the full overlay width
   so longer names like "Earth Angels" don't truncate. */
.org-card__media-title { display: block; }
.org-card__media-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-card__media-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.org-card__media-subtitle .org-card__verified {
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
}

/* Hover-zoom on the corner avatar: scales ~2.6x from the bottom-right
   corner toward the center of the tile, so it grows INWARD across the
   image rather than spilling out of the card. */
.org-card__media-logo {
  transition: transform 260ms ease, box-shadow 260ms ease;
  transform-origin: 90% 90%;
  cursor: zoom-in;
}
.org-card__media-logo:hover {
  transform: scale(2.6);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 4;
}

/* Candid Seal block below the stats row. Always-visible link + optional
   rating row (only renders when org.candid_rating is set). */
.org-card__candid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
  background: #ffffff;
}

.org-card__candid-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0084D1;
  text-decoration: none;
  border-top: 1px solid #f3f4f6;
  padding-top: 12px;
}
.org-card__candid-link:hover {
  color: #15306b;
  text-decoration: underline;
}
.org-card__candid-link svg:first-child { color: #f59e0b; }
.org-card__candid-link span { flex: 1; min-width: 0; }

.org-card__candid-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}
.org-card__candid-rating-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

/* Rating pill — different tier, different palette. */
.org-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.org-rating-pill--bronze   { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.org-rating-pill--silver   { background: #e5e7eb; color: #374151; border: 1px solid #d1d5db; }
.org-rating-pill--gold     { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.org-rating-pill--platinum {
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #ffffff;
  border: 1px solid transparent;
}

/* Candid block now lives inside .org-card__hover (revealed on hover).
   Strip the standalone-block paddings/borders so it sits flush in the
   hover panel. Bump hover max-height to fit Candid + actions. */
.org-card__hover .org-card__candid {
  padding: 0;
  background: transparent;
  margin-bottom: 12px;
}
.org-card__hover .org-card__candid-link {
  border-top: 0;
  padding-top: 0;
}
.org-card:hover .org-card__hover,
.org-card:focus-within .org-card__hover {
  max-height: 320px;
}

/* Rows that sit inside .onboard__grid shouldn't carry the modal's
   margin-top reset, otherwise the right-column row gets pushed 12px
   below the left-column row in a 2-col grid. The grid's own gap
   handles vertical spacing. */
.org-settings-modal .onboard__grid .onboard__row { margin-top: 0; }

/* When the avatar is the actual hover target, kill the card's hover
   state — otherwise both grow at once (compounded transform and the
   panel reveal happens behind the zoomed avatar). Uses :has() so the
   card "knows" its avatar is hovered. */
.org-card:has(.org-card__media-logo:hover) {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.org-card:has(.org-card__media-logo:hover) .org-card__hover {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 14px !important;
}

/* DS10E-style hover: no scale, no lift — just keep the card in place and
   let .org-card__hover grow downward to reveal the panel beneath. Drops
   a subtle shadow for hover feedback. */
.org-card:hover,
.org-card:focus-within {
  transform: none;
  box-shadow: 0 4px 14px rgba(15, 48, 107, 0.10);
}

/* Avatar hover-zoom removed — the DS10E-style tile expansion is the only
   hover affordance now. The avatar just sits in its corner. */
.org-card__media-logo {
  cursor: default;
  transition: none;
}
.org-card__media-logo:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Grid items should size to their own content, not stretch to the tallest
   sibling. Without this, hovering one card expands it (panel reveal) and
   the unhovered siblings in the same row grow to match. */
.orgs-grid { align-items: start; }

/* DS10E-style hover overlay: the panel is positioned ABSOLUTELY beneath
   the card, so revealing it doesn't change the card's layout height —
   sibling cards in the grid never stretch to match.

   Requires the card to be position:relative (anchor for the absolute
   panel) and overflow:visible (so the panel can spill below). The image
   media inside keeps its own overflow:hidden, so the photo still clips. */
.org-card {
  position: relative;
  overflow: visible;
}
.org-card__hover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 14px 24px rgba(15, 48, 107, 0.12);
}

/* Pop the hover panel ~18% wider than the card (DS10E's `grow = 1.18`),
   centered. Reads more like a floating preview than a flush extension. */
.org-card__hover {
  width: 118%;
  left: -9%;
  right: auto;
  border-radius: 16px;
  border-top: 1px solid #e5e7eb;
}

/* Whole-tile scale on hover — matches DS10E's `grow = 1.18`. The card
   stays one cohesive block (image + stats + hover panel) and scales as
   a unit. Siblings aren't affected because transforms are post-layout. */
.org-card {
  overflow: hidden;           /* re-clip rounded corners */
  transform-origin: center center;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Revert hover panel to inline flow (was absolute overlay). */
.org-card__hover {
  position: static;
  width: auto;
  left: auto;
  right: auto;
  border: 0;
  border-top: 1px solid #f3f4f6;
  border-radius: 0;
  box-shadow: none;
}

/* Scale the WHOLE card on hover. */
.org-card:hover,
.org-card:focus-within {
  transform: scale(1.18);
  z-index: 10;
  box-shadow: 0 24px 48px rgba(15, 48, 107, 0.28);
}

/* Angel Seal pill + Impact Score card — appears in the org-card hover
   panel, replacing the old Candid Seal link + rating row. */
.org-card__angel {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

/* "{Tier} Angel" pill — purple gradient for Platinum, tier-tinted others. */
.org-angel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}
.org-angel-pill--bronze   { background: linear-gradient(90deg, #b45309, #d97706); }
.org-angel-pill--silver   { background: linear-gradient(90deg, #4b5563, #6b7280); }
.org-angel-pill--gold     { background: linear-gradient(90deg, #b45309, #fbbf24); }
.org-angel-pill--platinum { background: linear-gradient(90deg, #7c3aed, #a855f7); }
/* Placeholder variant — muted gray-on-gray so it doesn't imply a
   real rating exists. Used when candid_rating is nil so all tiles
   render the same block height across the grid. */
.org-angel-pill--placeholder {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1px dashed #d1d5db;
}
.org-angel-pill--placeholder svg { color: #d1d5db; }

/* Impact Score card — white surface with a label/value stack. */
.org-impact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  flex: 1 1 auto;
}
.org-impact svg { color: #4f46e5; flex-shrink: 0; }
.org-impact__text { display: flex; flex-direction: column; line-height: 1.05; }
.org-impact__label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6366f1;
}
.org-impact__value {
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
}
/* Placeholder variant — muted gray so orgs missing an impact_score
   render the same block SHAPE + SIZE as scored orgs but signal
   "not set yet." Value stays at 18px bold like "95" would; only
   the color is muted so the tile stays visually uniform. */
.org-impact--placeholder {
  background: #f9fafb;
  border-color: #e5e7eb;
  border-style: dashed;
}
.org-impact--placeholder svg { color: #d1d5db; }
.org-impact--placeholder .org-impact__label { color: #9ca3af; }
.org-impact--placeholder .org-impact__value { color: #9ca3af; }

/* Action bar stacks vertically — View Profile on top, Settings beneath. */
.org-card__actions {
  flex-direction: column;
  gap: 8px;
}
.org-card__actions .org-card__btn {
  width: 100%;
  justify-content: center;
}

/* Outline-style button (View Profile) */
.org-card__btn--outline {
  background: #ffffff;
  color: #15306b;
  border: 1px solid #c7d2e8;
}
.org-card__btn--outline:hover {
  background: #f3f4f6;
  border-color: #1a3a6b;
}

/* ── Profile modal ──────────────────────────────────────────────────────── */

.org-profile-modal {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(960px, calc(100vw - 32px));
  max-height: 92vh;
  background: #ffffff;
  color: #15306b;
  box-shadow: 0 32px 80px rgba(15,48,107,0.45);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.org-profile-modal::backdrop {
  background: rgba(15,48,107,0.55);
  backdrop-filter: blur(3px);
}

.org-profile-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.org-profile-modal__back,
.org-profile-modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #6b7280;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.org-profile-modal__back:hover,
.org-profile-modal__close:hover { background: #f3f4f6; color: #15306b; }

/* Hero — avatar + name + Support CTA */
.org-profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 28px 18px;
}
.org-profile-hero__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-profile-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.org-profile-hero__avatar span {
  font-size: 30px;
  font-weight: 700;
  color: #15306b;
}

.org-profile-hero__main { min-width: 0; }
.org-profile-hero__title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #15306b;
}
.org-profile-hero__title span:first-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-profile-hero__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #15306b;
}
.org-profile-hero__verified svg { color: #0084D1; }

.org-profile-hero__subtitle {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #6b7280;
  line-height: 1.4;
}

.org-profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #6b7280;
}
.org-profile-hero__meta-item { display: inline-flex; align-items: center; gap: 5px; }

.org-profile-hero__support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #15306b;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
.org-profile-hero__support:hover { background: #0f2454; }
.org-profile-hero__support:disabled { opacity: 0.55; cursor: not-allowed; }

/* Stats grid */
.org-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding: 14px 28px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #fafbfd;
}
.org-profile-stat {
  text-align: center;
  padding: 8px 6px;
}
.org-profile-stat__value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
}
.org-profile-stat__value--blue   { color: #2563eb; }
.org-profile-stat__value--green  { color: #15803d; }
.org-profile-stat__value--purple { color: #7c3aed; }
.org-profile-stat__label {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}
.org-profile-stat--score {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
}
.org-profile-stat--score svg { color: #4f46e5; margin-bottom: 2px; }

/* Certification row */
.org-profile-cert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 14px;
  color: #6b7280;
}
.org-profile-cert__label { font-weight: 600; }

/* Tabs */
.org-profile-tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}
.org-profile-tab {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-radius: 999px;
  margin: 6px 2px;
}
.org-profile-tab:hover:not(:disabled) { color: #15306b; }
.org-profile-tab.is-active {
  background: #ffffff;
  color: #15306b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.org-profile-tab:disabled { opacity: 0.55; cursor: not-allowed; }

/* Content area */
.org-profile-content {
  padding: 22px 28px 30px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.org-profile-block {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.org-profile-block__title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #15306b;
}
.org-profile-block__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
}
.org-profile-block__body p { margin: 0 0 10px 0; }
.org-profile-block__body p:last-child { margin-bottom: 0; }

/* Restore closed-state for the profile dialog (the earlier `display: flex`
   rule overrode the native `display: none`, so it was always visible).
   The flex layout now only applies when the dialog is actually open. */
.org-profile-modal           { display: none; }
.org-profile-modal[open]     { display: flex; }

/* Tile-anchored modals (Settings, View Profile) flip this class onto
   their parent .org-card on close, then strip it once the cursor leaves.
   Suppresses the :hover state in the interim, so the tile stays
   collapsed instead of expanding the instant the modal dismisses. */
.org-card--no-hover:hover,
.org-card--no-hover:focus-within {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.org-card--no-hover:hover .org-card__hover,
.org-card--no-hover:focus-within .org-card__hover {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 14px !important;
}

/* Settings gear in the bottom-LEFT of the tile image, mirroring the
   bottom-right avatar. Hidden by default; fades in on tile hover. */
.org-card__gear-corner {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 48, 107, 0.65);
  color: #ffffff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease, background-color 150ms;
  backdrop-filter: blur(4px);
  z-index: 3;
}
.org-card:hover .org-card__gear-corner,
.org-card:focus-within .org-card__gear-corner {
  opacity: 1;
  transform: translateY(0);
}
.org-card__gear-corner:hover {
  background: #1a3a6b;
}

/* Action bar is now a single button — drop the column gap. */
.org-card__actions .org-card__btn { width: 100%; }

/* Action bar: View Profile fills the top row, gear icon left-aligned
   underneath on its own row. */
.org-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.org-card__actions .org-card__btn--outline { width: 100%; }

.org-card__gear-row {
  align-self: flex-start;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  color: #15306b;
  border: 1px solid #c7d2e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.org-card__gear-row:hover {
  background: #1a3a6b;
  color: #ffffff;
  border-color: #1a3a6b;
}

/* Global affordance: every button + link gets pointer cursor by default,
   not-allowed when disabled. Going forward, anything interactive flows
   through one of these selectors. */
button, a, [role="button"], summary, label[for] { cursor: pointer; }
button:disabled, [disabled], a[aria-disabled="true"] { cursor: not-allowed; }

/* Bug fix: .org-card__btn:hover sets color: #fff, which leaked into the
   outline variant's hover state — the only thing that changed there was
   the background to light gray, so the white text became unreadable. */
.org-card__btn--outline:hover {
  background: #f3f4f6;
  color: #15306b;
  border-color: #1a3a6b;
}

/* Campaigns page header: title block on the left, New Campaign CTA on the
   right. Mirrors the Organizations page pattern. */
.campaigns-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.campaigns-page__header-text { flex: 1; min-width: 220px; }

.campaigns-page__cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: #1a3a6b;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms;
}
.campaigns-page__cta-btn:hover { background: #15306b; }

/* Demo helper — flips every campaign tile between the default
   click-to-expand mode and a "show everything" mode. Instant flip
   (no animation) so a 12+ tile grid doesn't feel laggy. */
.campaigns-page__expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #15306b;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  transition: background-color 120ms, border-color 120ms;
}
.campaigns-page__expand-toggle:hover { background: #f3f4f6; }
.campaigns-page__expand-toggle.is-active {
  background: #15306b;
  border-color: #15306b;
  color: #ffffff;
}
.campaigns-page__expand-toggle-icon { flex-shrink: 0; }

/* Kills the max-height / opacity transition on the tile hover panel
   for the split-second when the group toggle flips 12+ tiles. Removed
   on the next frame so single-tile clicks still animate normally. */
.campaigns-grid.no-transitions .org-card,
.campaigns-grid.no-transitions .org-card__hover,
.campaigns-grid.no-transitions .org-card *,
.orgs-grid.no-transitions .org-card,
.orgs-grid.no-transitions .org-card__hover,
.orgs-grid.no-transitions .org-card * {
  transition: none !important;
}

/* Group expand mode — the .is-expanded panel normally overlays via
   position: absolute (single-tile mode = drops below one tile without
   growing the row). That falls apart when every tile expands at once
   (overlays stack on top of each other in a mess). This mode flips
   to INLINE expansion: each panel grows its own tile in place, grid
   rows grow naturally, no overlap. Also widens the grid gap so
   expanded neighbours aren't visually cramped together. */
.campaigns-grid.is-all-expanded,
.orgs-grid.is-all-expanded {
  gap: 40px !important;
}
.campaigns-grid.is-all-expanded .org-card.is-expanded,
.orgs-grid.is-all-expanded .org-card.is-expanded {
  overflow: visible !important;
  margin-bottom: 0 !important;
  z-index: auto !important;
}
.campaigns-grid.is-all-expanded .org-card.is-expanded .org-card__hover,
.orgs-grid.is-all-expanded .org-card.is-expanded .org-card__hover {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Public-facing modal shell (.public-modal). Used by:
   - /organizations → Onboard Your Organization modal
   - /campaigns     → New Campaign modal
   Generic enough to drop a form partial inside and have it scroll. */

.public-modal {
  border: 0;
  border-radius: 14px;
  padding: 0;
  width: min(880px, calc(100vw - 32px));
  max-height: 90vh;
  background: #fff;
  color: #15306b;
  box-shadow: 0 32px 80px rgba(15, 48, 107, 0.45);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: hidden;
}
.public-modal::backdrop {
  background: rgba(15, 48, 107, 0.45);
  backdrop-filter: blur(2px);
}
.public-modal           { display: none; }
.public-modal[open]     { display: flex; flex-direction: column; }

.public-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.public-modal__title { margin: 0; font-size: 20px; font-weight: 700; }

.public-modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #6b7280;
  padding: 6px;
  border-radius: 6px;
}
.public-modal__close:hover { background: #f3f4f6; color: #15306b; }

.public-modal__body {
  padding: 22px 28px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.public-modal__intro {
  margin: 0 0 18px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.45;
}

/* When the onboard form lives inside a public modal, dial back the
   outer margins that were tuned for the standalone page. */
.public-modal__body .onboard__form { gap: 18px; }
.public-modal__body .onboard__group:first-child { margin-top: 0; }

/* Campaign tiles use a wider 2-column grid (the Make designer's intent).
   Reuses .org-card visual shell from /organizations, but with a gentler
   hover scale — 1.18 on a 620px-wide tile is overpowering. */
.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 1024px) { .campaigns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .campaigns-grid { grid-template-columns: 1fr; } }

.campaigns-grid .org-card:hover,
.campaigns-grid .org-card:focus-within {
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(15, 48, 107, 0.22);
}

/* Header row layout shifts: title left, search center (flex), CTA right.
   Filter-pill row sits below the header. */
.campaigns-page__header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.campaigns-page__header-text { flex: 0 1 auto; min-width: 220px; }

/* Search input (with leading magnifier icon) */
.campaigns-page__search {
  position: relative;
  flex: 1 1 280px;
  max-width: 480px;
  display: flex;
  align-items: center;
}
.campaigns-page__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: #6b7280;
  pointer-events: none;
}
.campaigns-page__search-input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  font-size: 15px;
  color: #15306b;
  font-family: inherit;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
.campaigns-page__search-input::placeholder { color: #9ca3af; }
.campaigns-page__search-input:focus {
  outline: none;
  background: #fff;
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}

/* Filter pill bar */
.campaigns-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 22px;
  padding: 6px;
  background: #f3f4f6;
  border-radius: 999px;
  flex-wrap: wrap;
}
.campaigns-filter {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;
}
.campaigns-filter:hover { color: #15306b; }
.campaigns-filter.is-active {
  background: #ffffff;
  color: #15306b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Profile modal tab panels: show only the active panel. */
.org-profile-panel { display: none; }
.org-profile-panel.is-active { display: block; }

/* Disabled tab variant (was inline via the [disabled] attribute; this
   also covers .is-disabled for when we render an enabled-looking-but-no-op
   variant). */
.org-profile-tab.is-disabled { opacity: 0.55; cursor: not-allowed; }
.org-profile-tab.is-disabled:hover { color: #6b7280; }

/* Active Campaigns list rows inside the profile modal. */
.org-profile-campaigns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.org-profile-campaign {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
}
.org-profile-campaign__thumb {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #e5e7eb;
}
.org-profile-campaign__thumb--fallback {
  background: linear-gradient(135deg, #1a3a6b 0%, #0084D1 100%);
}
.org-profile-campaign__body { min-width: 0; }
.org-profile-campaign__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #15306b;
}
.org-profile-campaign__desc {
  margin: 0 0 8px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;
}
.org-profile-campaign__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  align-items: center;
}
.org-profile-campaign__goal { font-weight: 600; color: #0084D1; }
.org-profile-campaign__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #15306b;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
}
.org-profile-campaign__cta:hover { background: #1a3a6b; color: #ffffff; }

/* Campaign tile org-name button: outline button with small avatar +
   org name + trailing chevron. */
.campaign-card__org-link {
  justify-content: flex-start;
  gap: 8px;
}
.campaign-card__org-link span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campaign-card__org-link-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Clickable stat: visually identical to a div stat at rest, but with a
   subtle hover affordance and pointer cursor. Used for the Campaigns
   stat on org tiles when there's >= 1 active campaign to deep-link to. */
.org-stat--clickable {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 120ms, transform 120ms;
}
.org-stat--clickable:hover {
  background: #eef2ff;
  transform: translateY(-1px);
}
.org-stat--clickable:hover .org-stat__value { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   Public campaign detail page (/campaigns/:id). 2-column layout: main
   content (story, gallery, org card) + sticky sidebar (donation + side
   cards). Stacks to single column below 880px. */

.campaign-page {
  max-width: 1200px;
  margin: 24px auto 64px;
  padding: 0 24px;
  color: #15306b;
}

.campaign-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
/* Pill-shaped "Back to campaigns" button (upsize per user request
   2026-07-24). Matches the visual weight of the same pattern used
   elsewhere in the app for primary back navigation — soft blue tint,
   navy text, generous padding + rounded pill. */
.campaign-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: #15306b;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease;
}
.campaign-page__back:hover {
  color: #15306b;
  background: #dbeafe;
  border-color: #bfdbfe;
}
.campaign-page__back svg { width: 18px; height: 18px; }

.campaign-page__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.campaign-page__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  color: #4b5563;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.campaign-page__badge--urgent { background: #dc2626; color: #fff; }
.campaign-page__badge--draft  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.campaign-page__title {
  margin: 0 0 14px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  color: #15306b;
}

.campaign-page__org {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.campaign-page__org-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.campaign-page__org-avatar--initials {
  background: #1a3a6b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.campaign-page__org-name {
  font-weight: 700;
  font-size: 16px;
  color: #15306b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.campaign-page__org-meta { font-size: 13px; color: #6b7280; }
.campaign-page__verified { color: #0084D1; display: inline-flex; }

/* ── Body grid ── */

.campaign-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 1024px) {
  .campaign-page__body { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
}
@media (max-width: 880px) {
  .campaign-page__body { grid-template-columns: 1fr; }
}

.campaign-page__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.campaign-page__sidebar { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 881px) {
  .campaign-page__sidebar { position: sticky; top: 24px; }
}

/* ── Hero ── */

.campaign-page__hero {
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
}
.campaign-page__hero-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* ── Tabs ── */

.campaign-tabs {
  display: flex;
  gap: 6px;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 6px;
  overflow-x: auto;
}
.campaign-tab {
  background: transparent;
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;
}
.campaign-tab:hover:not(:disabled):not(.is-disabled) { color: #15306b; }
.campaign-tab.is-active {
  background: #ffffff;
  color: #15306b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.campaign-tab.is-disabled,
.campaign-tab:disabled { opacity: 0.55; cursor: not-allowed; }

.campaign-panel { display: none; }
.campaign-panel.is-active { display: flex; flex-direction: column; gap: 18px; }

/* ── Cards ── */

.campaign-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.campaign-card__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #15306b;
}
.campaign-card__body {
  margin: 0;
  font-size: 15.5px;
  color: #374151;
  line-height: 1.65;
}
.campaign-card__body p { margin: 0 0 12px; }
.campaign-card__body p:last-child { margin-bottom: 0; }

/* Impact metrics row — 4-across stat tiles matching the Figma reference:
   soft-blue background, icon + big number + label. */
.campaign-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 18px;
}
.campaign-metric {
  background: transparent;
  border: 0;
  padding: 4px;
  text-align: center;
}
.campaign-metric__value {
  font-size: 24px;
  font-weight: 800;
  color: #15306b;
  line-height: 1.1;
}
.campaign-metric__label {
  margin-top: 4px;
  font-size: 13px;
  color: #2563eb;
  font-weight: 600;
}

/* About-the-organization row */
.campaign-org { display: flex; gap: 16px; align-items: flex-start; }
.campaign-org__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.campaign-org__body { flex: 1; min-width: 0; }
.campaign-org__name {
  font-size: 18px;
  font-weight: 700;
  color: #15306b;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.campaign-org__desc {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}
.campaign-org__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  font-size: 13px;
  color: #4b5563;
}
.campaign-org__stats strong { color: #15306b; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Gallery grid */
.campaign-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.campaign-gallery__item {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.campaign-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms ease;
}
.campaign-gallery__item:hover .campaign-gallery__img { transform: scale(1.03); }

/* ── Sidebar donation card ── */

.campaign-donate {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.campaign-donate__raised {
  font-size: 32px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}
.campaign-donate__goal-line { font-size: 13.5px; color: #6b7280; margin-top: 4px; }
.campaign-donate__goal-line strong { color: #15306b; }
.campaign-donate__bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  margin: 12px 0;
  overflow: hidden;
}
.campaign-donate__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  border-radius: 999px;
}
.campaign-donate__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #6b7280;
}
.campaign-donate__row strong { color: #15306b; }

.campaign-donate__amounts { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.campaign-donate__amounts-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.campaign-donate__amount {
  display: flex;
  flex-direction: column;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
}
.campaign-donate__amount strong { font-size: 16px; color: #2563eb; }
.campaign-donate__amount span { font-size: 12.5px; color: #4b5563; margin-top: 2px; }

.campaign-donate__impact {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #1e3a8a;
  margin-top: 14px;
}
.campaign-donate__impact p { margin: 0; }

.campaign-donate__cta {
  width: 100%;
  margin-top: 16px;
  background: #15306b;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.campaign-donate__cta:hover:not(:disabled) { background: #0f2454; }
.campaign-donate__cta:disabled { opacity: 0.55; cursor: not-allowed; }

.campaign-donate__trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
}

/* ── v2 sidebar (Figma reference redesign) ── */
.campaign-donate--v2 { padding: 22px; }
.campaign-donate__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.campaign-donate__funded {
  text-align: right;
  color: #16a34a;
}
.campaign-donate__funded-pct { font-size: 26px; font-weight: 800; line-height: 1; }
.campaign-donate__funded-label { font-size: 12px; color: #16a34a; font-weight: 600; }
.campaign-donate--v2 .campaign-donate__bar span {
  background: linear-gradient(90deg, #15306b, #1e40af);
}
.campaign-donate__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #15306b;
}
.campaign-donate__section-title svg { color: #2563eb; }

.campaign-donate__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.campaign-donate__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 10px;
  min-height: 82px;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms, color 120ms, box-shadow 120ms;
}
.campaign-donate__tile:hover { border-color: #93c5fd; }
.campaign-donate__tile strong { font-size: 20px; color: #15306b; font-weight: 800; }
.campaign-donate__tile span { font-size: 11.5px; color: #6b7280; line-height: 1.3; }
.campaign-donate__tile.is-active {
  background: #15306b;
  border-color: #15306b;
  box-shadow: 0 0 0 3px rgba(21,48,107,0.15);
}
.campaign-donate__tile.is-active strong { color: #fff; }
.campaign-donate__tile.is-active span   { color: #cbd5e1; }

.campaign-donate__custom {
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
}
.campaign-donate__custom-sym {
  color: #6b7280;
  font-weight: 700;
  margin-right: 6px;
}
.campaign-donate__custom-input {
  flex: 1;
  border: 0;
  padding: 12px 0;
  font-size: 15px;
  background: transparent;
  outline: none;
}

.campaign-donate__your-impact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 12px 14px;
}
.campaign-donate__your-impact-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.campaign-donate__your-impact-title {
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
}
.campaign-donate__your-impact-body {
  margin: 2px 0 6px;
  font-size: 13px;
  color: #065f46;
  line-height: 1.4;
}
.campaign-donate__halo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #047857;
}
.campaign-donate__halo strong { color: #065f46; }

.campaign-donate--v2 .campaign-donate__cta {
  background: #0f172a;
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
}
.campaign-donate--v2 .campaign-donate__cta:hover:not(:disabled) { background: #1e293b; }

/* Small sidebar info cards */
.campaign-side-card { padding: 18px 22px; }
.campaign-side-card__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.campaign-side-card__body { margin: 0; color: #15306b; font-size: 15px; }

/* ─────────────────────────────────────────────────────────────────────────
   Public organization detail page (/organizations/:id). Header banner +
   white card overlapping it + stats + cert + tabs (reuses .campaign-tab*
   styles from the campaign detail page). */

.org-page {
  max-width: 1100px;
  margin: 0 auto 64px;
  padding: 0 20px;
}

.org-page__hero {
  position: relative;
  height: 200px;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a3a6b, #0084D1);
  margin: 0 -20px 0;
}
.org-page__hero--fallback { background: linear-gradient(135deg, #1a3a6b, #0084D1); }
.org-page__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.org-page__card {
  position: relative;
  margin-top: -90px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(15, 48, 107, 0.12);
  padding: 22px 28px 24px;
}

.org-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #15306b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}
.org-page__back:hover { color: #0084D1; }

.org-page__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: flex-start;
}
@media (max-width: 720px) { .org-page__header { grid-template-columns: 1fr; } }

.org-page__avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 5px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-page__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.org-page__avatar span {
  font-size: 40px;
  font-weight: 800;
  color: #15306b;
}

.org-page__head-main { min-width: 0; }
.org-page__title {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  color: #15306b;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.org-page__title span:first-child { min-width: 0; }
.org-page__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #15306b;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.org-page__verified svg { color: #0084D1; }
.org-page__pending {
  display: inline-flex;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
}

.org-page__subtitle {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: #6b7280;
  line-height: 1.45;
}

.org-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: #6b7280;
}
.org-page__meta-item { display: inline-flex; align-items: center; gap: 5px; }

.org-page__support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #15306b;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.org-page__support:hover:not(:disabled) { background: #0f2454; }
.org-page__support:disabled { opacity: 0.55; cursor: not-allowed; }

.org-page__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 18px 0;
  margin-top: 18px;
  border-top: 1px solid #e5e7eb;
}
.org-page__stat {
  text-align: center;
  padding: 6px;
}
.org-page__stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
}
.org-page__stat-value--blue   { color: #2563eb; }
.org-page__stat-value--green  { color: #15803d; }
.org-page__stat-value--purple { color: #7c3aed; }
.org-page__stat-label {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}
.org-page__stat--score {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
}
.org-page__stat--score svg { color: #4f46e5; }

.org-page__cert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  font-size: 14px;
  color: #6b7280;
}
.org-page__cert-label { font-weight: 600; }

/* Active Campaigns grid on /organizations/:id — larger 2-col tiles with
   a hero image, title, description, money + progress bar, supporter row. */
.org-page__panel-title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  color: #15306b;
}

.profile-campaigns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 840px) { .profile-campaigns { grid-template-columns: 1fr; } }

.profile-campaign-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.profile-campaign-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 48, 107, 0.14);
}

.profile-campaign-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0f172a;
}
.profile-campaign-card__img--fallback {
  background: linear-gradient(135deg, #1a3a6b, #0084D1);
}

.profile-campaign-card__body {
  padding: 18px 20px 20px;
}
.profile-campaign-card__name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #15306b;
  line-height: 1.25;
}
.profile-campaign-card__desc {
  margin: 0 0 14px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-campaign-card__money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.profile-campaign-card__money strong {
  color: #15306b;
  font-size: 16px;
  font-weight: 800;
}
.profile-campaign-card__money span { color: #9ca3af; }
.profile-campaign-card__bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 14px;
}
.profile-campaign-card__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  border-radius: 999px;
}
.profile-campaign-card__foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}

/* Organizations page search box + filter pills — mirror of the Campaigns
   page layout. Header becomes: title left, search center, CTA right. */
.orgs-page__header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.orgs-page__header-text { flex: 0 1 auto; min-width: 220px; }

.orgs-page__search {
  position: relative;
  flex: 1 1 280px;
  max-width: 480px;
  display: flex;
  align-items: center;
}
.orgs-page__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: #6b7280;
  pointer-events: none;
}
.orgs-page__search-input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  font-size: 15px;
  color: #15306b;
  font-family: inherit;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
.orgs-page__search-input::placeholder { color: #9ca3af; }
.orgs-page__search-input:focus {
  outline: none;
  background: #fff;
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}

.orgs-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 22px;
  padding: 6px;
  background: #f3f4f6;
  border-radius: 999px;
  flex-wrap: wrap;
}
.orgs-filter {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;
}
.orgs-filter:hover { color: #15306b; }
.orgs-filter.is-active {
  background: #ffffff;
  color: #15306b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Wider page padding + smaller default tile so hovered tiles (scale up)
   don't clip against the edge or sibling tiles. Reduced hover scale from
   1.18 → 1.08 — still readable as "lift" without spilling 50px outward. */
.orgs-page {
  padding: 32px 32px 64px;
  max-width: 1320px;
}
.campaigns-page {
  padding: 32px 32px 64px;
  max-width: 1320px;
}

/* Match Figma exactly: 3 → 2 at 1024px, 2 → 1 at 768px. */
.orgs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) { .orgs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .orgs-grid { grid-template-columns: 1fr; } }

/* Gentler hover scale across both pages so tiles don't dwarf neighbors
   or push beyond the page padding. */
.org-card:hover,
.org-card:focus-within {
  transform: scale(1.08);
  box-shadow: 0 18px 36px rgba(15, 48, 107, 0.22);
}
.campaigns-grid .org-card:hover,
.campaigns-grid .org-card:focus-within {
  transform: scale(1.03);
}

/* Touch device tap-to-expand: `.is-expanded` mirrors the :hover state so
   the JS toggle works the same way visually. Paired with the @media block
   below that nullifies :hover on touch — otherwise iOS's sticky-hover
   would fight the toggle and the tile would never collapse. */
.org-card.is-expanded {
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 18px 36px rgba(15, 48, 107, 0.22);
}
.org-card.is-expanded .org-card__hover {
  max-height: 320px;
  opacity: 1;
  padding: 14px;
}
.campaigns-grid .org-card.is-expanded {
  transform: scale(1.03);
}

/* Touch-only devices: kill all :hover-driven expansion. The .is-expanded
   class is the only way a tile shows the expanded state on these devices. */
@media (hover: none) {
  .org-card:hover,
  .org-card:focus-within {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .org-card:hover .org-card__hover,
  .org-card:focus-within .org-card__hover {
    max-height: 0;
    opacity: 0;
    padding: 0 14px;
  }
}

/* The .is-expanded class must visually win over the iOS sticky-hover
   suppression that lives in @media (hover: none) further up. Same
   specificity but later source order tied — bumping with !important so
   an explicit tap is the source of truth, not the lingering :hover. */
.org-card.is-expanded {
  transform: scale(1.08) !important;
  z-index: 10 !important;
  box-shadow: 0 18px 36px rgba(15, 48, 107, 0.22) !important;
}
.org-card.is-expanded .org-card__hover {
  max-height: 320px !important;
  opacity: 1 !important;
  padding: 14px !important;
}
.campaigns-grid .org-card.is-expanded {
  transform: scale(1.03) !important;
}

/* When a tile is tapped open on mobile, add bottom margin so it doesn't
   visually touch the next tile in the column. Also drop the scale on
   the expanded state — scale(1.08) on a tall expanded tile spills ~8%
   of its height past its grid cell, eating into the row gap. Hover
   (transient, on desktop) keeps the scale since it's not persistent. */
.org-card.is-expanded {
  transform: none !important;
  margin-bottom: 20px !important;
}
.campaigns-grid .org-card.is-expanded { margin-bottom: 20px !important; }

/* Tap-expanded tile uses an OVERLAY for the hover panel — positioned
   absolutely below the card so the card's grid cell never grows.
   Sibling rows stay put, no layout jumpiness. Replaces the earlier
   inline-grow approach for .is-expanded specifically. */
.org-card.is-expanded {
  overflow: visible !important;
  margin-bottom: 0 !important;
  transform: none !important;
}
.org-card.is-expanded .org-card__hover {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 14px 24px rgba(15, 48, 107, 0.12) !important;
  max-height: 320px !important;
  opacity: 1 !important;
  padding: 14px !important;
}

/* Click-to-expand overlay mode (2026-07-13): the expanded panel floats
   below the tile via position: absolute so the grid row never grows.
   Sibling rows stay put — no "screen pushes down" busy feel. Reverts
   the earlier "mobile inline" override that pushed siblings. */
.org-card.is-expanded {
  overflow: visible !important;
  margin-bottom: 0 !important;
  z-index: 20 !important;
}
.org-card.is-expanded .org-card__hover {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 14px 24px rgba(15, 48, 107, 0.18) !important;
  z-index: 20 !important;
}

/* Desktop :hover uses an OVERLAY panel like DS10E — panel sits absolutely
   below the card so the grid row never grows. Sibling tiles stay in
   their original position; the hovered card visually "drops down" a
   second layer below itself. */
@media (hover: hover) {
  .org-card:hover,
  .org-card:focus-within {
    overflow: visible;
  }
  .org-card:hover .org-card__hover,
  .org-card:focus-within .org-card__hover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 14px 24px rgba(15, 48, 107, 0.12);
  }
}

/* Final desktop fix: on hover-capable devices, the hover panel is
   ALWAYS position: absolute (out of normal flow). Visibility is purely
   opacity + max-height. Position never changes between hover/unhover,
   so the row below never gets briefly pushed during the unhover
   transition. */
@media (hover: hover) {
  .org-card {
    overflow: visible !important;
  }
  .org-card__hover {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 14px 24px rgba(15, 48, 107, 0.12) !important;
    pointer-events: none;
  }
  .org-card:hover .org-card__hover,
  .org-card:focus-within .org-card__hover {
    pointer-events: auto;
  }
}

/* Click-to-expand mode: hover no longer triggers expansion on any
   device — user must click the tile to open its panel, then click a
   real action to navigate. Simpler, less visual noise on scroll.
   `:has()` supported on all evergreen browsers we target. */
@media (hover: hover) {
  /* Kill the hover-expansion of the panel + actions. Only .is-expanded
     (set by a click) shows them now. The `:not(.is-expanded)` guard is
     critical — without it, `:hover` keeps clamping the panel closed
     even after a click sets `.is-expanded`, and the panel only opens
     once the mouse leaves. */
  .org-card:not(.is-expanded):hover .org-card__hover,
  .org-card:not(.is-expanded):focus-within .org-card__hover {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 14px !important;
    pointer-events: none !important;
  }
  .org-card:not(.is-expanded):hover .org-card__actions,
  .org-card:not(.is-expanded):focus-within .org-card__actions {
    max-height: 0 !important;
    opacity: 0 !important;
  }
  /* Kill the hover-driven sibling dim + hover shadow. */
  .orgs-grid:has(.org-card:hover) .org-card:not(:hover),
  .campaigns-grid:has(.org-card:hover) .org-card:not(:hover) {
    opacity: 1;
    filter: none;
  }
  .org-card:hover,
  .org-card:focus-within {
    box-shadow: 0 1px 3px rgba(15, 48, 107, 0.08) !important;
  }
}

/* When any tile is expanded via click, dim the OTHER tiles + deepen
   the expanded tile's shadow so it clearly sits above the row below. */
.orgs-grid:has(.org-card.is-expanded) .org-card:not(.is-expanded),
.campaigns-grid:has(.org-card.is-expanded) .org-card:not(.is-expanded) {
  opacity: 0.25;
  filter: grayscale(40%);
  transition: opacity 200ms ease, filter 200ms ease;
}
.org-card.is-expanded {
  box-shadow: 0 24px 48px rgba(15, 48, 107, 0.28) !important;
}

/* Click-to-expand affordance — a small circular chevron in the tile's
   top-right corner, always visible. Rotates 180° when the tile is
   expanded so it also doubles as a "collapse" hint. Purely visual —
   the whole tile is the click target; this just tells users so. */
.org-card::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px; /* top-left — avoids the URGENT / Pending badge in top-right */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 200ms ease, background-color 160ms ease;
  z-index: 3;
  pointer-events: none;
}
.org-card:hover::after { background-color: rgba(15, 23, 42, 0.85); }
.org-card.is-expanded::after { transform: rotate(180deg); background-color: rgba(15, 23, 42, 0.85); }

/* Rounded tile corners — match the Figma look. The card has border-radius
   but overflow: visible (so the hover overlay can spill below). Without
   border-radius on the children themselves, the image and stats row poke
   into the card's rounded corners. Apply the radius directly to those
   pieces so they clip to the same curve as the card border. */
.org-card__media {
  border-radius: 16px 16px 0 0;
}
.org-card__stats {
  border-radius: 0 0 16px 16px;
}

/* When mobile tap expands a tile, the stats row should hand off the
   bottom radius to the panel below it so the two pieces look like one
   continuous tile, not two stacked cards. */
.org-card.is-expanded .org-card__stats {
  border-radius: 0 !important;
}
.org-card.is-expanded .org-card__hover {
  border-radius: 0 0 16px 16px !important;
}

/* Desktop hover overlay: when the panel floats below the card via
   position: absolute, the card's rounded bottom corners curve inward
   right where the panel begins — making the two pieces read as two
   stacked cards. Square off the card bottom + the stats bottom on
   hover so the body flows straight into the panel, and lift the
   panel up by 1px so the card's bottom border and the panel's top
   edge overlap into one continuous outline. */
@media (hover: hover) {
  .org-card:hover,
  .org-card:focus-within {
    border-radius: 16px 16px 0 0 !important;
  }
  .org-card:hover .org-card__stats,
  .org-card:focus-within .org-card__stats {
    border-radius: 0 !important;
  }
  .org-card:hover .org-card__hover,
  .org-card:focus-within .org-card__hover {
    margin-top: -1px !important;
  }
}

/* ── Story 13.1: Opportunity tile — skills tag row ─────────────────────
   Small pill row below the stats block on Opportunity tiles. Reuses the
   surrounding .org-card box so nothing else needs new layout rules. */
.opp-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 14px;
  background: #fff;
  border-top: 1px solid #f3f4f6;
}
.opp-skill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  line-height: 1.2;
}

/* ── Story 37.4: Program-spend % pill ──────────────────────────────────
   Green info pill sitting next to the Angel Seal on the certification
   row. Same rounded shape as .org-angel-pill so the two read as a set. */
.org-program-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  line-height: 1.2;
  margin-left: 6px;
}

/* ── Story 08.7: Infinite-scroll sentinel ──────────────────────────────
   Invisible spacer at the end of the grid. IntersectionObserver watches
   it; when the sentinel enters the viewport (or gets within 400px of it),
   the next batch loads. */
.campaigns-page__sentinel,
.opportunities-page__sentinel,
.organizations-page__sentinel {
  height: 1px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* ── Stories 03.2 / 03.3 / 04.4: Signup consent checkboxes ─────────────
   Three required checkboxes below the verification block. Simple vertical
   stack; the youth line is muted since it's conditional on age. */
.signup-form__consents {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
}
.signup-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  line-height: 1.4;
}
.signup-form__consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.signup-form__consent a {
  color: #1e40af;
  text-decoration: underline;
}
.signup-form__consent--youth {
  color: #6b7280;
  font-size: 12.5px;
}

/* Story 62.1 · Private Investor affordance on the signup form. Sits
   below the legal consents; hidden fieldset reveals when the toggle
   is checked. Muted background so it reads as an optional add-on
   rather than a legal requirement. */
.signup-form__investor {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}
.signup-form__investor-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #15306b;
  font-weight: 600;
  cursor: pointer;
}
.signup-form__investor-toggle input[type="checkbox"] { margin: 0; }
.signup-form__investor-fields {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup-form__investor-fields .signup-form__label { margin-top: 0; }
.signup-form__investor-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.4;
}

/* ── Stories 14.1–14.6: Opportunity detail page ────────────────────────
   /opportunities/:id layout. Hero photo + text overlay, then vertically
   stacked blocks (When / Where / Requirements / Stats / Description). */
.opp-detail {
  max-width: 900px;
  margin: 32px auto;
  padding: 0 24px;
  color: #111827;
  font-family: inherit;
}
.opp-detail__hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: 24px;
}
.opp-detail__hero-img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.opp-detail__hero-body {
  padding: 20px 22px 22px;
  background: #ffffff;
  border-top: 1px solid #f3f4f6;
}
.opp-detail__org-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.opp-detail__org-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  object-fit: cover;
}
.opp-detail__org-name {
  font-size: 14px;
  color: #4b5563;
  text-decoration: underline;
}
.opp-detail__title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}
.opp-detail__category {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1e40af;
  background: #eff6ff;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.opp-detail__block {
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
}
.opp-detail__block-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1a3a6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.opp-detail__block-body {
  margin: 0;
  font-size: 15px;
  color: #374151;
  line-height: 1.55;
}
.opp-detail__block-body + .opp-detail__block-body { margin-top: 8px; }
.opp-detail__map-link { color: #1e40af; text-decoration: underline; font-size: 14px; }

.opp-detail__reqs {
  margin: 0;
  padding-left: 20px;
  color: #374151;
  font-size: 15px;
  line-height: 1.65;
}
.opp-detail__reqs li + li { margin-top: 6px; }

.opp-detail__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.opp-detail__stat {
  padding: 18px 22px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
}
.opp-detail__stat--reward {
  background: #eff6ff;
  border-color: #dbeafe;
}
.opp-detail__stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.opp-detail__stat--reward .opp-detail__stat-value { color: #1e40af; }
.opp-detail__stat-label {
  margin-top: 6px;
  font-size: 12.5px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Stories 13.6 + 14.8: Opportunities skill filter + share row ────── */
.opportunities-skill-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  width: fit-content;
}
.opportunities-skill-filter__label {
  font-size: 13px;
  color: #4b5563;
  font-weight: 600;
}
.opportunities-skill-filter__select {
  padding: 4px 10px;
  font-size: 13.5px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  min-width: 140px;
}
.opportunities-skill-filter__clear {
  font-size: 12px;
  color: #b91c1c;
  text-decoration: underline;
}

.opp-detail__share-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.opp-share {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}
.opp-share:hover { background: #dbeafe; }

/* ── Stories 09.6 / 09.7 / 09.9 · Donation form ────────────────────────
   Preset amount tiles + custom amount + anonymous checkbox. Layered on
   top of the existing .campaign-donate card. */
.campaign-donate__amount {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin: 6px 0;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.campaign-donate__amount:hover  { background: #eff6ff; border-color: #93c5fd; }
.campaign-donate__amount strong { display: block; font-size: 15px; color: #1e40af; }
.campaign-donate__amount span   { font-size: 12.5px; color: #4b5563; }

.campaign-donate__form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campaign-donate__label {
  font-size: 12.5px;
  color: #4b5563;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.campaign-donate__form input[type="number"],
.campaign-donate__form input[type="email"] {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.campaign-donate__anon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
}
.campaign-donate__status {
  margin: 8px 0 0;
  font-size: 13px;
  min-height: 18px;
}
.campaign-donate__status[data-kind="success"] { color: #065f46; }
.campaign-donate__status[data-kind="error"]   { color: #b91c1c; }
.campaign-donate__status[data-kind="info"]    { color: #4b5563; }

/* ── Story 09.12 · Recent donors list ──────────────────────────────── */
.campaign-donors { list-style: none; padding: 0; margin: 0; }
.campaign-donors li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}
.campaign-donors li:last-child { border-bottom: 0; }
.campaign-donors__name   { color: #111827; }
.campaign-donors__amount { color: #059669; font-weight: 600; }

/* ── EPIC 05 · Parental consent decision page ───────────────────────── */
.parental-consent {
  max-width: 560px;
  margin: 40px auto;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-family: inherit;
}
.parental-consent__title { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: #111827; }
.parental-consent__lede  { font-size: 15px; color: #374151; }
.parental-consent__activity {
  margin: 12px 0;
  padding: 14px 16px;
  background: #eff6ff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1e40af;
}
.parental-consent__meta { font-size: 13px; color: #6b7280; }
.parental-consent__actions { display: flex; gap: 12px; margin-top: 20px; }
.parental-consent__btn {
  flex: 1;
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.parental-consent__btn--approve { background: #065f46; color: #fff; }
.parental-consent__btn--deny    { background: #b91c1c; color: #fff; }
.parental-consent__result { padding: 12px 16px; background: #f9fafb; border-radius: 8px; font-size: 15px; }

/* ── Story 54.15 · Tile-facing accents consume the theme ───────────────
   These rules override the hard-coded blue/green in the tile classes
   with the current theme's --eas-primary / --eas-accent so a group with
   a forked theme shows different colors on the same list page. */
.org-card__media-status,
.opp-detail__category,
.opp-share {
  color: var(--eas-primary, #1e40af);
}
.opp-share {
  background: color-mix(in oklab, var(--eas-primary, #1e40af) 8%, #ffffff);
  border-color: color-mix(in oklab, var(--eas-primary, #1e40af) 20%, #ffffff);
}
.opp-share:hover {
  background: color-mix(in oklab, var(--eas-primary, #1e40af) 18%, #ffffff);
}
.org-stat__value--blue,
.org-page__stat-value--blue,
.org-profile-stat__value--blue {
  color: var(--eas-primary, #1e40af);
}
.org-stat__value--green,
.org-page__stat-value--green {
  color: var(--eas-accent, #059669);
}
.campaign-donors__amount {
  color: var(--eas-accent, #059669);
}
.opp-detail__stat--reward .opp-detail__stat-value,
.campaign-donate__amount strong {
  color: var(--eas-primary, #1e40af);
}
.opp-detail__map-link,
.campaign-page__stat-value--blue {
  color: var(--eas-link, #1e40af);
}

/* "My Roles" edge drawer — slides out from the left, showing the
   portals the signed-in user can reach. Only rendered when
   visible_portals_for(current_user) is non-empty. */
.my-roles-tab {
  position: absolute; /* scrolls with the page — deliberate; PM pill stays fixed */
  top: 61px; /* flush with the bottom of the site header */
  left: 0;
  z-index: 1048;
  /* Matches .nav-link--active — the selected-tab color in the top nav. */
  background: #1a3a6b;
  color: #fff;
  border: 0;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 0 0 10px 0;
  box-shadow: 1px 1px 6px rgba(15, 23, 42, 0.2);
  white-space: nowrap;
}
.my-roles-tab:hover { background: #15306b; }

#my-roles-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1049;
  display: none;
}
#my-roles-backdrop.open { display: block; }

#my-roles-drawer {
  position: fixed;
  top: 61px;
  left: 0;
  height: calc(100vh - 61px);
  width: 320px;
  max-width: 90vw;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 1050;
  padding: 20px 16px;
  overflow-y: auto;
}
#my-roles-drawer.open {
  transform: translateX(0);
  box-shadow: 2px 0 16px rgba(15, 23, 42, 0.2);
}
.my-roles-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}
.my-roles-drawer__title { margin: 0; font-size: 20px; font-weight: 700; color: #0f172a; }
.my-roles-drawer__close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
}
.my-roles-drawer__close:hover { color: #0f172a; }
.my-roles-drawer__list  { display: flex; flex-direction: column; }

/* Section captions between grouped portals (System vs User).
   Small uppercase muted label with generous top-spacing so groups
   read as distinct sections, not a flat list. */
.my-role-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 18px 4px 6px;
  border-bottom: 1px solid #e2e8f0;
  text-transform: uppercase;
}
.my-role-section-label:first-child { padding-top: 8px; }

/* TACR8-style clean rows: portal name + status pill on top, short
   description underneath, divider between rows. Whole row is a link. */
.my-role-row {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid #e2e8f0;
  color: inherit;
  text-decoration: none;
  transition: background 0.1s;
}
.my-role-row:hover { background: #f1f5f9; text-decoration: none; color: inherit; }
.my-role-row:last-child { border-bottom: 0; }
.my-role-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.my-role-row__name {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
}
/* .my-role-row__marker removed 2026-08-02 — the "*" figma-stub
   marker is gone from the drawer now that every portal has a stub. */
/* .my-role-row__status pill removed 2026-07-12 to give the portal name
   room to fit on one line — the drawer only shows portals the user CAN
   reach, so "Enabled" was redundant. */
.my-role-row__desc {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

/* Reference-design link at the top of the drawer — visually distinct
   so it doesn't get confused with a portal role row. */
.my-role-row--figma {
  background: #eff6ff;
  border-left: 3px solid #1a3a6b;
}
.my-role-row--figma .my-role-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.my-role-row--figma .my-role-row__name { color: #1a3a6b; }

/* Demo credentials block — dev/staging + owner only. Small, subdued so
   it doesn't compete with the portal name. */
.my-role-row__creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  font-size: 11px;
}
.my-role-row__creds-label {
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.my-role-row__creds code {
  color: #1a3a6b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;
}

/* Account administration sub-modal — opened from "Manage your EarthAngels
   Account" in the Settings modal. Clean list layout matching the TACR8
   reference: minimal title, plain-text link rows, danger row for delete. */
.settings-modal__back {
  appearance: none;
  background: transparent;
  border: 0;
  color: #1a73e8;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-right: auto;
}
.settings-modal__back:hover { color: #15306b; }
.account-admin__title {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin: 8px 0 20px;
}
.account-admin__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-admin__list li {
  display: block;
}
.account-admin__list form {
  margin: 0;
}
.account-admin__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: #1f2937;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-admin__item:hover { background: #f8fafc; text-decoration: none; color: #1f2937; }
.account-admin__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: currentColor;
  flex-shrink: 0;
}
.account-admin__label { flex: 1; }
.account-admin__item--danger { color: #b91c1c; }
.account-admin__item--danger:hover { background: #fef2f2; color: #b91c1c; }
.account-admin__item--disabled {
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}
.account-admin__item--disabled:hover { background: transparent; }

/* Custom avatar upload block inside the Administration sub-modal.
   Same visual language as TACR8's account modal: label + file input +
   dark "Save avatar" button that only appears once a file is chosen. */
.account-admin__avatar { margin: 0 0 16px; }
.account-admin__section-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}
.account-admin__avatar-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.account-admin__avatar-current img {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
}
.account-admin__avatar-current span {
  font-size: 13px;
  color: #6b7280;
}
.account-admin__avatar-form input[type="file"] {
  font-size: 15px;
  margin-bottom: 10px;
}
.account-admin__avatar-save { align-items: center; gap: 12px; }
.account-admin__save-btn {
  background: #111827;
  color: #ffffff;
  border: 0;
  border-radius: 9px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.account-admin__save-btn:hover { background: #1f2937; }
.account-admin__avatar-remove {
  margin-top: 8px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.account-admin__avatar-remove:hover { color: #7f1d1d; }
.account-admin__avatar-remove form { margin: 0; }

/* Uploaded-avatar rendering in the Settings modal (hero + topbar). */
.settings-modal__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
}
.settings-modal__topbar-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
}

/* Dev-only PM inspector overlay. Fixed pill bottom-right; expands into
   a card with the page's EPIC / story list + a "draft story" form. Only
   rendered by the layout when owner+dev, so no prod styling risk. */
.pm-overlay {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
}
.pm-overlay__toggle {
  background: #0f172a;
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,23,42,0.25);
}
.pm-overlay__toggle:hover { background: #1f2937; }
.pm-overlay__panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 46px;
  width: 380px;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15,23,42,0.20);
  padding: 14px 16px;
}
.pm-overlay[data-open="true"] .pm-overlay__panel { display: block; }
.pm-overlay__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.pm-overlay__path { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }
.pm-overlay__meta { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 6px 0 10px; font-size: 12px; }
.pm-overlay__meta dt { color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; padding-top: 3px; }
.pm-overlay__meta dd { margin: 0; }
.pm-overlay__file { display: block; margin-top: 4px; font-size: 11px; color: #4b5563; }
.pm-overlay h4 { margin: 12px 0 6px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; }
.pm-overlay__stories { list-style: none; padding: 0; margin: 0; }
.pm-story {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}
.pm-story:first-child { border-top: 0; }
.pm-story__dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; display: inline-block; }
.pm-story--done .pm-story__dot        { background: #10b981; }
.pm-story--in_progress .pm-story__dot { background: #f59e0b; }
.pm-story--not_started .pm-story__dot { background: #ef4444; }
.pm-story__id { font-weight: 700; color: #0f172a; min-width: 42px; }
.pm-story__title { color: #4b5563; text-transform: capitalize; }
.pm-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pm-status--stub    { background: #fef3c7; color: #92400e; }
.pm-status--partial { background: #dbeafe; color: #1e40af; }
.pm-status--done    { background: #d1fae5; color: #065f46; }
.pm-overlay__blockers { margin: 8px 0 4px; font-size: 12px; color: #4b5563; }
.pm-overlay__no-meta { font-size: 12px; color: #6b7280; }
.pm-overlay__no-meta code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }
.pm-overlay__draft { margin-top: 12px; border-top: 1px solid #e5e7eb; padding-top: 10px; }
.pm-overlay__draft summary { cursor: pointer; font-weight: 700; color: #0f172a; font-size: 12px; }
.pm-overlay__draft form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pm-overlay__draft label { display: block; font-size: 11px; color: #4b5563; font-weight: 600; }
.pm-overlay__draft input,
.pm-overlay__draft textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
  margin-top: 3px;
}
.pm-overlay__draft button {
  background: #0f172a;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
}
.pm-overlay__status { font-size: 11px; margin-top: 4px; }
.pm-overlay__status--ok  { color: #065f46; }
.pm-overlay__status--err { color: #b91c1c; }
.pm-req { color: #b91c1c; font-weight: 700; }

/* Architect's target: Figma frame capture + optional live link */
.pm-figma { margin: 6px 0 4px; }
.pm-figma__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-height: 220px;
  object-fit: cover;
  object-position: top center;
}
.pm-figma__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}
.pm-figma__link:hover { text-decoration: underline; }

/* Epic-level reference image — one screenshot per epic, shown in the
   header of the PM inspector AND prepended to every story panel body
   so a reviewer never has to leave a story to see the page context.
   Convention path: docs/PM/01-epics/<epic_path>/<slug>-reference.<ext> */
.pm-ref {
  margin: 6px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-ref__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-height: 220px;
  object-fit: cover;
  object-position: top center;
}
.pm-ref__empty {
  font-size: 12px;
  color: #6b7280;
  padding: 8px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
}
.pm-ref__attach {
  position: relative;
  padding: 8px;
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  transition: background-color 120ms, border-color 120ms;
  outline: none;
}
.pm-ref__attach.is-drop { background: #eef2ff; border-color: #93c5fd; color: #15306b; }
.pm-ref__attach-hint { display: inline-block; margin-right: 8px; }
.pm-ref__file { font-size: 11px; }
.pm-ref__attach-status { display: inline-block; margin-left: 8px; font-size: 11px; }
.pm-ref__attach-status--ok  { color: #065f46; }
.pm-ref__attach-status--err { color: #b91c1c; }

/* Same image, injected at the top of each story panel body. */
.pm-story__ref { margin: 0 0 10px; }
.pm-story__ref img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-height: 180px;
  object-fit: cover;
  object-position: top center;
}

/* Expandable story rows — lazy-load the .md content on open */
.pm-story details { width: 100%; }
.pm-story summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.pm-story summary::-webkit-details-marker { display: none; }
.pm-story__body {
  padding: 8px 0 10px 18px;
  border-left: 2px solid #f1f5f9;
  margin: 6px 0 6px 4px;
  font-size: 12px;
  color: #1f2937;
  line-height: 1.5;
}
.pm-story__body h1,
.pm-story__body h2,
.pm-story__body h3 { font-size: 13px; margin: 8px 0 4px; color: #0f172a; }
.pm-story__body h4,
.pm-story__body h5 { font-size: 12px; margin: 6px 0 3px; color: #374151; }
.pm-story__body p  { margin: 4px 0; }
.pm-story__body ul,
.pm-story__body ol { padding-left: 18px; margin: 4px 0; }
.pm-story__body li { margin: 2px 0; }
.pm-story__body code {
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.pm-story__body pre {
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 11px;
}
.pm-story__body a { color: #1d4ed8; }
.pm-story__loading, .pm-story__err { margin: 0; color: #6b7280; font-style: italic; }
.pm-story__err { color: #b91c1c; }

/* Blocked-by list — same visual language as story rows so the eye
   groups them, with a distinct amber-ish dot. Clickable rows lazy-load
   the referenced .md the same way stories do. */
.pm-overlay__blocked { list-style: none; padding: 0; margin: 0 0 8px; }
.pm-blocker {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}
.pm-blocker:first-child { border-top: 0; }
.pm-blocker__dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; flex-shrink: 0; }
.pm-blocker--done .pm-blocker__dot        { background: #10b981; }
.pm-blocker--in_progress .pm-blocker__dot { background: #f59e0b; }
.pm-blocker--not_started .pm-blocker__dot { background: #ef4444; }
.pm-blocker--unknown .pm-blocker__dot     { background: #cbd5e1; }
.pm-blocker__details { width: 100%; }
.pm-blocker__details summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 600;
  list-style: none;
}
.pm-blocker__details summary::-webkit-details-marker { display: none; }
.pm-blocker__id { color: #4b5563; }

/* Inline AC editor + hygiene + review queue */
.pm-story__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 6px 18px;
  font-size: 11px;
}
.pm-story__edit-btn {
  background: #0f172a;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pm-story__edit-btn:hover { background: #1f2937; }
.pm-story__approve-btn {
  background: #16a34a;
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pm-story__approve-btn:hover { background: #15803d; }
.pm-story__approve-status { font-size: 11px; color: #6b7280; }
.pm-story__approve-status--ok  { color: #15803d; font-weight: 700; }
.pm-story__approve-status--err { color: #b91c1c; font-weight: 700; }

/* AC-line markers rendered by dev/pm#render_markdown — replace the raw
   GFM `[ ]` / `[x]` markers so reviewers stop thinking each bullet needs
   its own checkbox click. */
.pm-ac-mark {
  display: inline-block;
  width: 1em;
  margin-right: 4px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pm-ac-mark--open { color: #94a3b8; }
.pm-ac-mark--done { color: #16a34a; }

/* Depends-on ID chips — dev/pm#annotate_depends_on injects one per
   dependency reference so reviewers can see status at a glance. */
.pm-dep {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  margin-right: 2px;
  border: 1px solid transparent;
}
.pm-dep:hover { text-decoration: none; }
.pm-dep--done    { background: #dcfce7; color: #14532d; border-color: #86efac; }
.pm-dep--partial { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.pm-dep--draft   { background: #ffedd5; color: #7c2d12; border-color: #fdba74; }
.pm-dep--stub    { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.pm-dep--missing { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }

.pm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 6px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 10.5px;
}
.pm-legend__label {
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.pm-legend .pm-dep { cursor: default; }
.pm-legend__sep { color: #cbd5e1; margin: 0 2px; }

/* Story 37.5 · UNPUBLISHED badge on tiles (was DRAFT). Positioned at
   top-center of the tile so it doesn't collide with the top-right
   URGENT / EMERGENCY badges. Amber palette signals attention without
   competing with the red urgency palette. */
.org-card__media-status--unpublished {
  background: #fef3c7 !important;
  color: #78350f !important;
  border-color: #fcd34d !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
}

/* Story 09.18 · EA match pill inside the media overlay, right above
   the campaign title. Green palette matches the "extra money on your
   donation" mental model. Same shape as the guest-ok pill (its
   sibling) so the two emergency perks read as a matched pair. */
.campaign-card__match-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #166534;
  border: 1px solid #14532d;
  border-radius: 999px;
  letter-spacing: 0.02em;
  align-self: flex-start;
  width: fit-content;
}
.campaign-card__match-pill svg { display: inline-block; }

/* Story 09.18 · "No account needed" perk line on emergency-campaign
   tiles. Sits inside the media overlay just under the org/location
   subtitle, kept intentionally small so it reads as a footnote to the
   name/org header rather than competing with the campaign title. */
.campaign-card__guest-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(22, 101, 52, 0.85);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.campaign-card__guest-ok svg { display: inline-block; }

/* Story 09.18 · Guest-vs-signin donation chooser (emergency campaigns).
   Opens when a signed-out visitor clicks Donate on an emergency
   campaign — two button-cards with equal weight so neither reads as
   "the right choice" by default. */
dialog.ed-choice {
  max-width: 460px;
  width: 92vw;
  padding: 0;
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  /* Explicit viewport centering — native <dialog>.showModal() centers
     via the UA stylesheet, but tile positioning + max-width defaults
     can shift it. Overriding with fixed + transform pins it dead
     center in every browser. margin:0 defeats the UA margin:auto. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
dialog.ed-choice::backdrop { background: rgba(15, 23, 42, 0.55); }
.ed-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
}
.ed-choice__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #15306b;
}
.ed-choice__close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}
.ed-choice__close:hover { color: #15306b; }
.ed-choice__sub {
  margin: 0 20px 14px;
  font-size: 13px;
  color: #4b5563;
}
.ed-choice__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 20px 20px;
}
.ed-choice__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 60ms ease;
}
.ed-choice__btn:hover { border-color: #15306b; background: #eff6ff; }
.ed-choice__btn:active { transform: scale(0.985); }
.ed-choice__btn--guest:hover { border-color: #166534; background: #f0fdf4; }
.ed-choice__btn-icon {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #ffffff;
}
.ed-choice__btn--guest .ed-choice__btn-icon  { background: #166534; }
.ed-choice__btn--signin .ed-choice__btn-icon { background: #15306b; }
.ed-choice__btn-body { display: flex; flex-direction: column; gap: 2px; }
.ed-choice__btn-body strong { font-size: 15px; font-weight: 700; color: #111827; }
.ed-choice__btn-body small  { font-size: 12px; color: #6b7280; }

/* Story 09.18 · Perks strip on the campaign detail page — reuses the
   tile's match + guest-ok pill classes but sizes them up slightly for
   the detail context and lays them side-by-side under the hero. */
.campaign-page__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.campaign-page__perks .campaign-card__match-pill,
.campaign-page__perks .campaign-card__guest-ok {
  margin: 0;
  font-size: 13px;
  padding: 6px 12px;
  background: #166534;
  color: #ffffff;
}
.campaign-page__perks .campaign-card__match-pill svg,
.campaign-page__perks .campaign-card__guest-ok svg {
  width: 14px;
  height: 14px;
}

/* Story 08.8 · Quick-donate CTA on the campaign tile */
.campaign-card__donate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}
.campaign-card__donate:hover { background: #1f2937; }

/* Story 08.8 · Donate modal */
.cd-modal {
  border: 0;
  border-radius: 16px;
  padding: 28px;
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  /* Explicit centering — some global dialog rules elsewhere in the
     stylesheet strip the browser default of `margin: auto`. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.cd-modal::backdrop { background: rgba(15, 23, 42, 0.55); }
.cd-modal__close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; font-size: 22px; color: #64748b; cursor: pointer;
}
.cd-modal__head { margin-bottom: 14px; }
.cd-modal__title { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.cd-modal__sub { margin: 0; color: #64748b; font-size: 14px; }

.cd-impact {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin: 12px 0 18px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  color: #1e3a8a; font-size: 13.5px;
}
.cd-impact strong { color: #1e40af; }

.cd-section { margin-bottom: 16px; }
.cd-section__label { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.cd-section--card .cd-card-el {
  padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff;
}
.cd-card-hint { font-size: 12px; color: #b45309; margin: 6px 0 0; }
.cd-section--anon { margin-top: 4px; margin-bottom: 12px; }

.cd-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-amount {
  padding: 10px 0; border: 1px solid #d1d5db; border-radius: 8px;
  background: #ffffff; color: #0f172a; font-size: 15px; font-weight: 700; cursor: pointer;
}
.cd-amount:hover { border-color: #1a3a6b; }
.cd-amount.is-active { background: #1a3a6b; color: #ffffff; border-color: #1a3a6b; }

.cd-custom { position: relative; }
.cd-custom__sym {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-size: 15px;
}
.cd-custom__input {
  width: 100%; padding: 10px 12px 10px 28px;
  border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; background: #f8fafc;
}

.cd-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cd-method {
  padding: 10px 8px; border: 1px solid #d1d5db; border-radius: 8px;
  background: #ffffff; color: #0f172a; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cd-method:hover:not(.is-disabled) { border-color: #1a3a6b; }
.cd-method.is-active { background: #1a3a6b; color: #ffffff; border-color: #1a3a6b; }
.cd-method.is-disabled { opacity: 0.5; cursor: not-allowed; }

.cd-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #334155; }
.cd-check input { width: 16px; height: 16px; }

.cd-submit {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 10px;
  background: #6b7280; color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.cd-submit:not(:disabled) { background: #0f172a; }
.cd-submit:not(:disabled):hover { background: #1f2937; }
.cd-submit:disabled { cursor: not-allowed; }

.cd-status { min-height: 18px; font-size: 12.5px; margin: 8px 0 0; color: #64748b; }
.cd-status--ok  { color: #15803d; font-weight: 700; }
.cd-status--err { color: #b91c1c; font-weight: 700; }

.cd-footer { text-align: center; font-size: 11.5px; color: #64748b; margin: 10px 0 0; }

/* Story 08.8 V2 · Wizard step navigation */
.cd-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.cd-modal__close {
  position: static; background: transparent; border: 0;
  font-size: 24px; color: #64748b; cursor: pointer; padding: 0 4px;
}
.cd-steps {
  display: flex; gap: 6px; padding: 8px 0 14px; margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0; font-size: 11.5px;
  overflow-x: auto;
}
.cd-step {
  padding: 4px 10px; border-radius: 999px;
  background: #f1f5f9; color: #64748b; white-space: nowrap; font-weight: 600;
}
.cd-step.is-active { background: #0f172a; color: #ffffff; }
.cd-step.is-done   { background: #dcfce7; color: #166534; }

.cd-panel { display: none; }
.cd-panel.is-active { display: block; }
.cd-heading { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: #0f172a; }
.cd-subhead { font-size: 13.5px; color: #64748b; margin: 0 0 12px; }

.cd-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e8f0;
}
.cd-actions--center { justify-content: center; border-top: 0; padding-top: 0; }
.cd-btn {
  padding: 10px 18px; border: 0; border-radius: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.cd-btn--primary { background: #0f172a; color: #ffffff; }
.cd-btn--primary:hover:not(:disabled) { background: #1f2937; }
.cd-btn--primary:disabled { background: #cbd5e1; cursor: not-allowed; }
.cd-btn--ghost { background: transparent; color: #334155; border: 1px solid #cbd5e1; }
.cd-btn--ghost:hover { background: #f1f5f9; }

.cd-review {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.cd-review__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #334155; }
.cd-review__row strong { color: #0f172a; text-align: right; }

.cd-payment {
  min-height: 260px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 16px;
}
.cd-payment__loading, .cd-payment__hint {
  text-align: center; color: #64748b; font-size: 13px; margin: 0;
}
.cd-payment__hint { background: #fef9c3; padding: 10px; border-radius: 6px; }
.cd-payment__err { color: #b91c1c; text-align: center; margin: 0; }

.cd-thanks { text-align: center; padding: 20px 8px; }
.cd-thanks__check {
  width: 60px; height: 60px; margin: 0 auto 14px;
  background: #16a34a; color: #ffffff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900;
}
.cd-thanks__body { color: #334155; font-size: 14px; margin: 6px 0 14px; line-height: 1.5; }
.cd-thanks__ref  { color: #64748b; font-size: 13px; margin: 0 0 20px; }
.cd-thanks__email { color: #94a3b8; font-size: 12px; }

/* Per-story Figma anchor marker in the closed story row. */
.pm-story__anchor {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  vertical-align: middle;
}
.pm-story__anchor--image   { opacity: 0.9; }
.pm-story__anchor--url     { opacity: 0.7; }
.pm-story__anchor--missing { opacity: 0.55; }

/* Open-decision bullets — inline Accept / Reject buttons. */
.pm-decision {
  padding: 6px 0;
}
.pm-decision__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 0;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.pm-decision__options {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: #334155;
}
.pm-decision__options label { cursor: pointer; }
.pm-decision__note {
  flex: 1 1 160px;
  min-height: 22px;
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  resize: vertical;
}
.pm-decision__accept, .pm-decision__reject {
  border: 0;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.pm-decision__accept { background: #16a34a; color: #ffffff; }
.pm-decision__accept:hover { background: #15803d; }
.pm-decision__reject { background: #dc2626; color: #ffffff; }
.pm-decision__reject:hover { background: #b91c1c; }
.pm-decision__status { font-size: 10.5px; color: #6b7280; margin-left: 6px; }
.pm-decision__status--err { color: #b91c1c; font-weight: 700; }

/* Figma anchor block on story preview */
.pm-figma__block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.pm-figma__btn {
  display: inline-block;
  padding: 4px 10px;
  background: #0f172a;
  color: #ffffff !important;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.pm-figma__btn:hover { background: #1f2937; text-decoration: none; }
.pm-figma-missing {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fee2e2;
  color: #7f1d1d;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
}
.pm-figma-attach {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.pm-figma-attach input[type=url] {
  flex: 1 1 240px;
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
}
.pm-figma-attach button {
  background: #16a34a;
  color: #ffffff;
  border: 0;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pm-figma-attach button:hover { background: #15803d; }
.pm-figma-attach__status { font-size: 10.5px; color: #6b7280; }
.pm-figma-attach__status--err { color: #b91c1c; font-weight: 700; }
.pm-story__examples { color: #6b7280; }
.pm-story__examples a { color: #1d4ed8; text-decoration: none; }
.pm-story__examples a:hover { text-decoration: underline; }

.pm-story__editor { padding: 0 0 6px 18px; margin-top: 4px; }
.pm-story__editor-label { display: block; font-size: 11px; color: #4b5563; margin-bottom: 4px; font-weight: 600; }
.pm-story__editor-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  resize: vertical;
}
.pm-story__editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.pm-story__save-btn {
  background: #1d4ed8;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pm-story__save-btn:hover { background: #1e40af; }
.pm-story__cancel-btn {
  background: transparent;
  color: #6b7280;
  border: 0;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
.pm-story__cancel-btn:hover { color: #0f172a; }
.pm-story__editor-status { font-size: 11px; color: #6b7280; }
.pm-story__editor-status--ok { color: #065f46; }
.pm-story__editor-status--err { color: #b91c1c; }

.pm-hygiene {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 11px;
}
.pm-hygiene__item {
  padding: 3px 8px;
  border-radius: 4px;
  margin: 2px 0;
}
.pm-hygiene__item--ok  { background: #d1fae5; color: #065f46; }
.pm-hygiene__item--err { background: #fee2e2; color: #991b1b; }

.pm-story__review { margin-top: 10px; }
.pm-story__review summary { font-size: 11px; color: #1d4ed8; font-weight: 700; cursor: pointer; }
.pm-story__review summary::-webkit-details-marker { display: none; }
.pm-story__review-note {
  width: 100%;
  padding: 6px 8px;
  margin: 6px 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
}
.pm-story__queue-btn {
  background: #7c3aed;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pm-story__queue-btn:hover { background: #6d28d9; }
.pm-story__queue-status { font-size: 11px; margin-left: 8px; color: #6b7280; }
.pm-story__queue-status--ok { color: #065f46; }
.pm-story__queue-status--err { color: #b91c1c; }

/* Story groups — one per location value from pm_meta[:story_locations] */
.pm-story-group { margin: 6px 0 10px; }
.pm-story-group__label {
  margin: 6px 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 8px;
  background: #f1f5f9;
  border-radius: 4px;
  display: inline-block;
}
.pm-story-group__count { color: #6b7280; font-weight: 500; margin-left: 4px; }

/* Raw markdown fallback (kramdown not loaded) */
.pm-story__raw {
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}
.pm-story__hint { font-size: 11px; color: #b45309; margin: 4px 0 0; font-style: italic; }

/* Blank KPI placeholder — em dash in muted grey */
.portal-kpi__placeholder { color: #cbd5e1; font-weight: 400; }

/* Owner Tasks — edge tab + left-slide drawer (owner-only).
   Style-matches .my-roles-tab so both handles line up horizontally on the
   left edge just under the header. */
.owner-tasks-tab {
  position: absolute; /* scrolls with the page — deliberate; PM pill stays fixed */
  top: 61px;           /* flush with the bottom of the site header */
  left: 96px;          /* sits directly to the right of .my-roles-tab */
  z-index: 1048;
  background: #1a3a6b; /* same navy as My Roles */
  color: #fff;
  border: 0;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 0 0 10px 0;
  box-shadow: 1px 1px 6px rgba(15, 23, 42, 0.2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.owner-tasks-tab:hover { background: #15306b; }
.owner-tasks-tab__count {
  background: rgba(255, 255, 255, 0.18);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
}

#owner-tasks-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1049;
  display: none;
}
#owner-tasks-backdrop.open { display: block; }

#owner-tasks-drawer {
  position: fixed;
  top: 61px;
  left: 0;
  height: calc(100vh - 61px);
  width: 360px;
  max-width: 92vw;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  transform: translateX(-100%);
  transition: transform 220ms ease-out;
  z-index: 1050;
  display: flex;
  flex-direction: column;
}
#owner-tasks-drawer.open { transform: translateX(0); }

.owner-tasks-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}
.owner-tasks-drawer__title { margin: 0; font-size: 16px; color: #0f172a; }
.owner-tasks-drawer__close {
  border: none;
  background: transparent;
  font-size: 22px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.owner-tasks-drawer__filters {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.owner-tasks-drawer__filter {
  padding: 6px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.owner-tasks-drawer__filter:hover { background: #e2e8f0; }
.owner-tasks-drawer__filter.is-active {
  background: #1a3a6b;
  border-color: #1a3a6b;
  color: #ffffff;
}
#owner-tasks-drawer[data-filter="active"] .owner-tasks-drawer__row--done { display: none; }

.owner-tasks-drawer__body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
}

/* Drawer task rows — simplified read + check-off format (no drag/edit/delete). */
.owner-tasks-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.owner-tasks-drawer__row {
  display: grid;
  grid-template-columns: 16px 24px 1fr auto auto;
  align-items: start;
  gap: 10px;
  padding: 4px 0;
}
.owner-tasks-drawer__row form.button_to { display: contents; }
.owner-tasks-drawer__grip {
  cursor: grab;
  color: #9ca3af;
  user-select: none;
  font-size: 14px;
  line-height: 1.35;
  padding-top: 2px;
}
.owner-tasks-drawer__grip:active { cursor: grabbing; }
.owner-tasks-drawer__row--drag-ghost { opacity: 0.4; }
.owner-tasks-drawer__row-delete {
  align-self: start;
  margin-top: 2px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.owner-tasks-drawer__row-delete:hover { color: #b91c1c; background: #fee2e2; }
.owner-tasks-drawer__check-form { display: contents; }
.owner-tasks-drawer__check-form input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
}
.owner-tasks-drawer__row-title {
  font-size: 14px;
  line-height: 1.35;
  color: #0f172a;
  word-break: break-word;
}
.owner-tasks-drawer__row--done .owner-tasks-drawer__row-title {
  text-decoration: line-through;
  color: #94a3b8;
}
.owner-tasks-drawer__title-form { display: contents; }
.owner-tasks-drawer__row-title-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  min-height: 24px;
}
.owner-tasks-drawer__row-title-input:hover { border-color: #e2e8f0; }
.owner-tasks-drawer__row-title-input:focus { border-color: #1a3a6b; background: #ffffff; outline: none; }
.owner-tasks-drawer__row--done .owner-tasks-drawer__row-title-input {
  text-decoration: line-through;
  color: #94a3b8;
}
.owner-tasks-drawer__row-badge {
  align-self: start;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.owner-tasks-drawer__row-badge--feature { background: #dbeafe; color: #1d4ed8; }
.owner-tasks-drawer__row-badge--defect  { background: #fee2e2; color: #b91c1c; }
.owner-tasks-drawer__new {
  border-top: 1px solid #e2e8f0;
  margin-top: 12px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.owner-tasks-drawer__new .owner-tasks__input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
}
.owner-tasks-drawer__new .owner-tasks__input:focus {
  outline: none;
  border-color: #1a3a6b;
  box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.15);
}
.owner-tasks-drawer__new-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.owner-tasks-drawer__new-row .owner-tasks__kind {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: 14px;
  min-width: 100px;
}
.owner-tasks-drawer__new-row .admin-btn {
  flex: 1;
  justify-content: center;
  padding: 12px 16px;
  font-size: 15px;
}

/* Click-to-expand mode: kill all hover-driven scale/translate on tiles.
   Only the click-set .is-expanded state should visually change the
   tile. Prevents the "tile subtly grows on hover" busyness. */
@media (hover: hover) {
  .org-card:not(.is-expanded):hover,
  .org-card:not(.is-expanded):focus-within,
  .campaigns-grid .org-card:not(.is-expanded):hover,
  .campaigns-grid .org-card:not(.is-expanded):focus-within {
    transform: none !important;
  }
}

/* ── New/Edit campaign form · 4-tab wizard ─────────────────────────
   Used inside the "New campaign" modal on /campaigns and on the
   standalone /portal/ean-admin/campaigns/new|edit pages. Kept in
   application.css (not admin.css) so both contexts pick it up —
   the public /campaigns modal only loads application.css. */

.campaign-form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.campaign-form-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.campaign-form-tab:hover { background: #f3f4f6; }
.campaign-form-tab.is-active {
  background: #15306b;
  color: #ffffff;
  border-color: #15306b;
}
/* Locked pill — earlier tab has an unfilled required field. Dimmed +
   struck-through numeric prefix + not-allowed cursor so the user knows
   the pill is unreachable until the blocking tab is completed. */
.campaign-form-tab.is-locked {
  color: #9ca3af;
  border-color: #e5e7eb;
  background: #f9fafb;
  cursor: not-allowed;
}
.campaign-form-tab.is-locked:hover { background: #f9fafb; }
.campaign-form-tab.is-locked .campaign-form-tab__num {
  background: #f3f4f6;
  color: #9ca3af;
}
.campaign-form-tab__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
}
.campaign-form-tab.is-active .campaign-form-tab__num {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.campaign-form-panel        { display: none; }
.campaign-form-panel.is-active { display: block; }

.campaign-form-panel__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}
.campaign-form-panel__submit-group {
  display: flex;
  gap: 8px;
}

/* Campaign type radios — Emergency / Urgent / Non-urgent (Story 08.15
   + form wizard refactor). Each choice is a row: radio + colored chip
   + short description. Chips reuse the tile-badge palette. */
.campaign-type-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.campaign-type-radio {
  display: grid;
  grid-template-columns: 20px 120px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.campaign-type-radio:hover { background: #f9fafb; }
.campaign-type-radio:has(input[type="radio"]:checked) {
  border-color: #15306b;
  background: #eff6ff;
}
.campaign-type-radio__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.campaign-type-radio__chip--emergency {
  background: #7f1d1d; color: #ffffff;
}
.campaign-type-radio__chip--urgent {
  background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;
}
.campaign-type-radio__chip--none {
  background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb;
}
.campaign-type-radio__desc {
  color: #4b5563;
  font-size: 13px;
}

/* ==========================================================================
   Dashboard restub 2026-07-25 · Figma parity for the signed-in landing.
   Adds .dash-* primitives (tabs, quick actions, membership banner,
   earn-more grid, timeline, empty states) alongside the existing
   .stat-card / .dashboard-profile blocks.
   ========================================================================== */

/* Extra stat-card icon colors for the restub grid */
.stat-card__icon--blue   { background: #dbeafe; color: #2563eb; }
.stat-card__icon--amber  { background: #fef3c7; color: #b45309; }
.stat-card__icon--purple { background: #ede9fe; color: #7c3aed; }
.stat-card--placeholder .stat-card__value { color: #9ca3af; }
.stat-card__cta--muted { color: #9ca3af; font-size: 12px; }

/* Membership banner */
.dash-membership {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; margin: 0 auto 24px; max-width: 1200px;
  border: 2px solid #bfdbfe; border-radius: 14px;
  background: linear-gradient(90deg, #eff6ff, #eef2ff);
}
.dash-membership__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-membership__body { flex: 1; }
.dash-membership__body h3 { margin: 0 0 4px; color: #1e3a8a; font-size: 20px; font-weight: 700; }
.dash-membership__body p  { margin: 0; color: #1e40af; font-size: 14px; }
.dash-membership__cta { flex-shrink: 0; }
@media (max-width: 640px) {
  .dash-membership { flex-direction: column; align-items: flex-start; }
}

/* Dashboard buttons */
.dash-btn {
  display: inline-flex; align-items: center; padding: 10px 16px;
  border-radius: 10px; border: 0; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.dash-btn--amber {
  background: linear-gradient(90deg, #f59e0b, #eab308); color: #fff;
}
.dash-btn--amber:hover:not(:disabled) {
  background: linear-gradient(90deg, #d97706, #ca8a04);
}
.dash-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Tab shell */
.dash-tabs {
  max-width: 1200px; margin: 0 auto 32px;
}
.dash-tabs__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: #f3f4f6; padding: 4px; border-radius: 10px;
  margin-bottom: 20px;
}
.dash-tabs__tab {
  padding: 10px 14px; border-radius: 8px; background: transparent;
  border: 0; font-size: 14px; font-weight: 600; color: #6b7280;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.dash-tabs__tab:hover { color: #111827; }
.dash-tabs__tab.is-active {
  background: #ffffff; color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.dash-tabs__panel { display: none; }
.dash-tabs__panel.is-active { display: block; }

/* Generic dashboard card */
.dash-card {
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 20px 24px; margin-bottom: 20px;
}
.dash-card__header { margin-bottom: 16px; }
.dash-card__header h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #111827; }
.dash-card__header p  { margin: 0; font-size: 14px; color: #6b7280; }
.dash-card__foot      { margin: 8px 0 0; font-size: 13px; color: #6b7280; }

/* Quick actions grid (Donate / Volunteer / Refer / Learn / Play / Redeem) */
.dash-quick-actions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) {
  .dash-quick-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .dash-quick-actions { grid-template-columns: repeat(6, 1fr); }
}
.dash-quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; border: 1px solid #e5e7eb; border-radius: 10px;
  background: #ffffff; color: #111827; text-decoration: none;
  font-size: 13px; font-weight: 600; transition: background 0.15s, border-color 0.15s;
}
.dash-quick-action:hover { background: #f9fafb; border-color: #d1d5db; }
.dash-quick-action__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.dash-quick-action__icon--pink   { background: #fce7f3; color: #db2777; }
.dash-quick-action__icon--blue   { background: #dbeafe; color: #2563eb; }
.dash-quick-action__icon--green  { background: #dcfce7; color: #059669; }
.dash-quick-action__icon--purple { background: #ede9fe; color: #7c3aed; }
.dash-quick-action__icon--orange { background: #ffedd5; color: #ea580c; }
.dash-quick-action__icon--indigo { background: #e0e7ff; color: #4f46e5; }

/* Empty-state message inside dash-card */
.dash-empty {
  padding: 24px; text-align: center; color: #6b7280;
  background: #f9fafb; border-radius: 8px; font-size: 14px;
}
.dash-empty__link { color: #2563eb; font-weight: 600; text-decoration: none; }
.dash-empty__link:hover { text-decoration: underline; }

/* Progress bar (monthly-goal placeholder) */
.dash-progress {
  height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden;
}
.dash-progress__bar {
  height: 100%; background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 999px; transition: width 0.3s;
}

/* Earn more points 4-card grid */
.dash-earn-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px;
}
@media (min-width: 900px) {
  .dash-earn-grid { grid-template-columns: repeat(2, 1fr); }
}
.dash-earn-card {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  border-radius: 12px; border: 1px solid #e5e7eb; background: #ffffff;
  color: #111827; text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.dash-earn-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.dash-earn-card__icon { font-size: 32px; flex-shrink: 0; }
.dash-earn-card__body { flex: 1; min-width: 0; }
.dash-earn-card__body h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.dash-earn-card__body p  { margin: 0; font-size: 13px; color: #6b7280; }
.dash-earn-card__arrow   { font-size: 20px; color: #9ca3af; flex-shrink: 0; }
.dash-earn-card--blue   { border-color: #bfdbfe; }
.dash-earn-card--yellow { border-color: #fde68a; }
.dash-earn-card--green  { border-color: #bbf7d0; }
.dash-earn-card--orange { border-color: #fed7aa; }

/* Activity timeline */
.dash-timeline { list-style: none; padding: 0; margin: 0; }
.dash-timeline__item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.dash-timeline__item:last-child { border-bottom: 0; }
.dash-timeline__icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.dash-timeline__icon--pink  { background: #fce7f3; color: #db2777; }
.dash-timeline__body { flex: 1; min-width: 0; }
.dash-timeline__title { font-size: 14px; font-weight: 600; color: #111827; }
.dash-timeline__title a { color: #2563eb; text-decoration: none; }
.dash-timeline__title a:hover { text-decoration: underline; }
.dash-timeline__meta  { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* ==========================================================================
   Feed restub 2026-07-27 · Figma parity for /feed.
   Extends the existing .feed-* / .trending-card primitives with:
   - 2-col layout (sidebar + main)
   - Composer card (Story 07.1 · disabled state)
   - Groups sidebar card
   - Post card image, engagement stats bar, action buttons row
   - Campaign-link block inside a post
   ========================================================================== */

.feed-page {
  max-width: 1140px;
}

.feed-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 1000px) {
  .feed-layout { grid-template-columns: 320px 1fr; }
}

.feed-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.feed-side-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.feed-side-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.feed-side-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #15306b;
}
.feed-side-card__link {
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.feed-side-card__link:hover { text-decoration: underline; }
.feed-side-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feed-side-card__note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

.feed-group-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.feed-group-row:hover { background: #f9fafb; }
.feed-group-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feed-group-row__body { flex: 1; min-width: 0; }
.feed-group-row__name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-group-row__meta {
  font-size: 11px;
  color: #6b7280;
}

.feed-trending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.feed-trending-row__tag {
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.feed-trending-row__tag:hover { text-decoration: underline; }
.feed-trending-row__count {
  color: #6b7280;
  font-size: 12px;
}

.feed-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Create Post composer (Story 07.1) */
.feed-composer {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  gap: 12px;
}
.feed-composer__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d1d5db;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feed-composer__body { flex: 1; min-width: 0; }
.feed-composer__textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: #111827;
  resize: vertical;
  background: #f9fafb;
}
.feed-composer__textarea:disabled { cursor: not-allowed; opacity: 0.7; }
.feed-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.feed-composer__attach { display: flex; gap: 4px; }
.feed-composer__icon {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
}
.feed-composer__icon:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.feed-composer__icon:disabled { cursor: not-allowed; opacity: 0.5; }
.feed-composer__submit {
  appearance: none;
  padding: 8px 18px;
  border-radius: 10px;
  border: 0;
  background: #15306b;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.feed-composer__submit:disabled { cursor: not-allowed; opacity: 0.5; }

/* Guest variant — shown to signed-out visitors in the composer slot
   so the page shape stays consistent. Established 2026-07-29. */
.feed-composer--guest {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.feed-composer__avatar--muted {
  background: #e5e7eb;
  color: #6b7280;
}
.feed-composer__guest-msg {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 14px;
}
.feed-composer__actions--guest { justify-content: flex-end; }
.feed-composer__submit--guest {
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.feed-composer__submit--guest:hover { filter: brightness(1.05); }

/* Post card additions */
.feed-badge--organization {
  background: #dbeafe;
  color: #1e40af;
}
.feed-badge--organization svg { color: #2563eb; }

.feed-post__campaign {
  font-size: 13px;
  color: #6b7280;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
}
.feed-post__campaign-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}
.feed-post__campaign-link:hover { text-decoration: underline; }

.feed-post__media {
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.feed-post__image {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.feed-post__stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  color: #6b7280;
}
.feed-post__stats-left {
  display: flex;
  gap: 16px;
}
.feed-post__stats strong {
  color: #111827;
  font-weight: 600;
}

.feed-post__actions {
  display: flex;
  gap: 8px;
}
.feed-action {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}
.feed-action:hover:not(:disabled) { background: #f3f4f6; }
.feed-action:disabled { cursor: not-allowed; opacity: 0.6; }
.feed-action--active {
  color: #db2777;
}
.feed-action--active:disabled { opacity: 0.85; }

.feed-list__foot {
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
  margin: 20px 0 0;
  font-style: italic;
}

/* ==========================================================================
   Earn Opportunities enhancement 2026-07-27 · Figma parity additions.
   View toggle + expanded filter card + points badge overlay on tile.
   ========================================================================== */

.earn-opps-view-toggle {
  display: inline-flex;
  gap: 4px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 10px;
}
.earn-opps-view-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.earn-opps-view-toggle__btn:hover:not(:disabled) { color: #111827; }
.earn-opps-view-toggle__btn.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.earn-opps-view-toggle__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.earn-opps-filters-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 700px) {
  .earn-opps-filters-card { grid-template-columns: repeat(3, 1fr); }
}
.earn-opps-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.earn-opps-filter__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.earn-opps-filter__select {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #f9fafb;
}
.earn-opps-filter__select:disabled { cursor: not-allowed; opacity: 0.7; }

.org-card__points-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffffff;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  z-index: 2;
}

/* ==========================================================================
   Community EA Network restub 2026-07-27 · Figma parity for /community/ea-network.
   Hero + upgrade CTA + search/filter card + results header + mission/campaign
   grid + card w/ progress bar + voting buttons.
   ========================================================================== */

.ea-network-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ea-network-hero {
  background: linear-gradient(120deg, #2563eb 0%, #9333ea 50%, #ec4899 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
}
.ea-network-hero__body { position: relative; z-index: 1; max-width: 780px; }
.ea-network-hero__title-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ea-network-hero__title {
  margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.5px;
}
.ea-network-hero__lede {
  margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.9);
}
.ea-network-hero__stats {
  display: flex; flex-wrap: wrap; gap: 24px;
  color: rgba(255,255,255,0.92); font-size: 14px;
}
.ea-network-hero__stat {
  display: inline-flex; align-items: center; gap: 8px;
}

.ea-network-upgrade {
  background: linear-gradient(90deg, #fef3c7 0%, #fed7aa 100%);
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ea-network-upgrade__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f59e0b; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ea-network-upgrade__body { flex: 1; }
.ea-network-upgrade__title { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #78350f; }
.ea-network-upgrade__desc  { margin: 0; font-size: 13px; color: #92400e; }
.ea-network-upgrade__btn {
  appearance: none;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ea-network-upgrade__btn:disabled { opacity: 0.7; cursor: not-allowed; }

.ea-network-search-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
}
.ea-network-search-card__head { margin-bottom: 16px; }
.ea-network-search-card__title {
  margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #111827;
  display: inline-flex; align-items: center; gap: 8px;
}
.ea-network-search-card__sub { margin: 0; font-size: 13px; color: #6b7280; }
.ea-network-search-card__body { display: flex; flex-direction: column; gap: 14px; }
.ea-network-search-card__search { position: relative; }
.ea-network-search-card__search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #9ca3af;
}
.ea-network-search-card__search-input {
  width: 100%; padding: 12px 12px 12px 42px;
  border: 1px solid #e5e7eb; border-radius: 10px;
  font-size: 15px; background: #f9fafb;
}
.ea-network-search-card__search-input:disabled { cursor: not-allowed; opacity: 0.7; }
.ea-network-search-card__filters {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 800px) {
  .ea-network-search-card__filters { grid-template-columns: repeat(4, 1fr); align-items: end; }
}
.ea-network-filter { display: flex; flex-direction: column; gap: 4px; }
.ea-network-filter__label {
  font-size: 12px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ea-network-filter__select {
  padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
  font-size: 14px; color: #111827; background: #f9fafb;
}
.ea-network-filter__select:disabled { cursor: not-allowed; opacity: 0.7; }
.ea-network-filter__clear {
  appearance: none;
  padding: 8px 12px;
  border: 1px solid #e5e7eb; background: #ffffff;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #374151; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center;
}
.ea-network-filter__clear:disabled { cursor: not-allowed; opacity: 0.7; }

.ea-network-results-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px;
}
.ea-network-results-header__count { margin: 0; font-size: 14px; color: #6b7280; }

.ea-network-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 720px) {
  .ea-network-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .ea-network-grid { grid-template-columns: repeat(3, 1fr); }
}

.ea-network-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s;
}
.ea-network-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ea-network-card__media {
  position: relative;
  height: 140px;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}
.ea-network-card__media-badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px;
}
.ea-network-card__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  color: #ffffff;
  background: #6b7280;
}
.ea-network-card__badge--mission  { background: #9333ea; }
.ea-network-card__badge--campaign { background: #2563eb; }
.ea-network-card__badge--verified { background: #16a34a; }
.ea-network-card__badge--featured { background: #f59e0b; }
.ea-network-card__badge--top-right {
  position: absolute; top: 10px; right: 10px;
}

.ea-network-card__body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.ea-network-card__title {
  margin: 0; font-size: 16px; font-weight: 700; color: #111827; line-height: 1.35;
}
.ea-network-card__desc {
  margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5;
}
.ea-network-card__sponsors { }
.ea-network-card__sponsors-label {
  margin: 0 0 6px; font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px;
}
.ea-network-card__sponsors-list {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.ea-network-card__sponsor {
  display: inline-block;
  font-size: 11px; font-weight: 600; color: #374151;
  background: #f3f4f6; padding: 3px 8px; border-radius: 999px;
}
.ea-network-card__charity {
  margin: 0; font-size: 13px; font-weight: 600; color: #111827;
}

.ea-network-card__progress { }
.ea-network-card__progress-labels {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.ea-network-card__progress-current { font-size: 14px; font-weight: 700; color: #111827; }
.ea-network-card__progress-target  { font-size: 11px; color: #6b7280; }

.ea-network-card__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 12px; color: #6b7280;
}
.ea-network-card__meta-item {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.ea-network-card__meta-item svg { flex-shrink: 0; }

.ea-network-card__voting {
  border-top: 1px solid #f3f4f6;
  padding-top: 12px;
  margin-top: auto;
}
.ea-network-card__voting-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.ea-network-card__votes {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #7c3aed;
}
.ea-network-card__voting-ends { font-size: 11px; color: #6b7280; }
.ea-network-card__voting-actions {
  display: flex; gap: 8px;
}
.ea-network-card__btn {
  flex: 1;
  appearance: none;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  background: #ffffff;
  color: #111827;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ea-network-card__btn--outline { }
.ea-network-card__btn--outline:disabled { cursor: not-allowed; opacity: 0.6; }
.ea-network-card__btn--vote {
  background: #9333ea; color: #ffffff; border-color: #9333ea;
}
.ea-network-card__btn--vote:disabled { opacity: 0.6; cursor: not-allowed; background: #9ca3af; border-color: #9ca3af; }

.ea-network-page__foot {
  margin: 8px 0 0; font-size: 12px; color: #9ca3af; font-style: italic; text-align: center;
}

/* ==========================================================================
   Community Voting restub 2026-07-27 · Figma parity for /community/voting.
   Demo banner + credit tracker header + 3-tile info row + how-voting callout +
   voting-item list w/ +/-/max controls + monthly-reset notice.
   ========================================================================== */

.voting-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.voting-demo-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
  color: #1e40af;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.voting-demo-banner__switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.voting-demo-banner__link {
  color: #1e40af;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 999px;
  transition: background 0.12s;
}
.voting-demo-banner__link:hover { background: #dbeafe; }
.voting-demo-banner__link.is-active {
  background: #1e40af;
  color: #ffffff;
  font-weight: 600;
}

/* Free-member upgrade card (Figma: single amber panel, whole page) */
.voting-upgrade-shell {
  max-width: 640px;
  margin: 32px auto;
}
.voting-upgrade {
  background: linear-gradient(90deg, #fffbeb, #fff7ed);
  border: 1px solid #fcd34d;
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.voting-upgrade__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #f59e0b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.voting-upgrade__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}
.voting-upgrade__body {
  margin: 0 auto 24px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  max-width: 420px;
}
.voting-upgrade__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #f59e0b, #ea580c);
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.85;
}
.voting-upgrade__btn:not(:disabled) { cursor: pointer; opacity: 1; }
.voting-upgrade__btn:not(:disabled):hover {
  background: linear-gradient(90deg, #d97706, #c2410c);
}

.voting-header {
  background: linear-gradient(90deg, #f3e8ff 0%, #fce7f3 100%);
  border: 1px solid #e9d5ff;
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.voting-header__body { flex: 1; min-width: 260px; }
.voting-header__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #6b21a8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.voting-header__sub { margin: 0; font-size: 14px; color: #6b7280; }
.voting-header__credits { text-align: right; }
.voting-header__credits-value {
  font-size: 40px;
  font-weight: 700;
  color: #9333ea;
  line-height: 1;
}
.voting-header__credits-label { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.voting-header__credits-meta  { margin: 2px 0 0; font-size: 11px; color: #9ca3af; }

.voting-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .voting-info-grid { grid-template-columns: repeat(3, 1fr); }
}
.voting-info-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.voting-info-card__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.voting-info-card--blue   .voting-info-card__icon { background: #dbeafe; color: #2563eb; }
.voting-info-card--green  .voting-info-card__icon { background: #dcfce7; color: #16a34a; }
.voting-info-card--purple .voting-info-card__icon { background: #f3e8ff; color: #9333ea; }
.voting-info-card__value { font-size: 22px; font-weight: 700; color: #111827; line-height: 1.1; }
.voting-info-card__label { font-size: 12px; color: #6b7280; }

.voting-info-callout {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  color: #1e3a8a;
}
.voting-info-callout strong { display: block; margin-bottom: 4px; font-size: 14px; color: #1e40af; }
.voting-info-callout p      { margin: 0; font-size: 13px; line-height: 1.5; }

.voting-items { display: flex; flex-direction: column; gap: 14px; }
.voting-items__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px;
}
.voting-items__title { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.voting-items__submit-btn {
  appearance: none;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #9333ea 0%, #ec4899 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.voting-items__submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.voting-items__list { display: flex; flex-direction: column; gap: 14px; }

.voting-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow 0.15s;
}
.voting-item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.voting-item__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.voting-item__meta { flex: 1; min-width: 0; }
.voting-item__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.voting-item__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  color: #374151; background: #f3f4f6;
}
.voting-item__badge--mission        { background: #9333ea; color: #ffffff; }
.voting-item__badge--campaign       { background: #2563eb; color: #ffffff; }
.voting-item__badge--priority-high  { background: #ef4444; color: #ffffff; }
.voting-item__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #111827; }
.voting-item__desc  { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
.voting-item__votes { text-align: right; flex-shrink: 0; }
.voting-item__votes-value { font-size: 28px; font-weight: 700; color: #9333ea; line-height: 1; }
.voting-item__votes-label { margin: 4px 0 0; font-size: 11px; color: #6b7280; }

.voting-item__progress-labels {
  display: flex; justify-content: space-between; font-size: 12px; color: #6b7280;
  margin-bottom: 4px;
}
.voting-item__time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #6b7280;
}

.voting-item__allocate {
  border-top: 1px solid #f3f4f6;
  padding-top: 14px;
}
.voting-item__allocate-label {
  display: block; font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 8px;
}
.voting-item__allocate-controls {
  display: flex; gap: 8px; align-items: center;
}
.voting-allocate-btn {
  appearance: none;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  min-width: 40px;
}
.voting-allocate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.voting-allocate-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  min-width: 0;
}
.voting-allocate-input:disabled { opacity: 0.7; cursor: not-allowed; background: #f9fafb; }

.voting-reset-notice {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  color: #374151;
}
.voting-reset-notice strong { display: block; margin-bottom: 4px; font-size: 14px; color: #111827; }
.voting-reset-notice p      { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }

.voting-page__foot {
  margin: 8px 0 0; font-size: 12px; color: #9ca3af; font-style: italic; text-align: center;
}

/* =========================================================
   Community · Teams (EPIC 15) — restubbed 2026-07-28
   Figma Make ref: docs/FigmaCode/Community teams/src/app/components/Teams.tsx
   ========================================================= */

.teams-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.teams-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.teams-header__body { flex: 1 1 auto; min-width: 0; }
.teams-header__title {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}
.teams-header__sub  { margin: 0; font-size: 15px; color: #6b7280; line-height: 1.5; }
.teams-header__actions { display: flex; gap: 12px; flex-shrink: 0; }

.teams-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.teams-btn--primary {
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
  color: #ffffff;
}
.teams-btn--outline {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}
.teams-btn--block { width: 100%; justify-content: center; }
.teams-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.teams-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .teams-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.teams-stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.teams-stat-card__icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.teams-stat-card__icon--blue   { background: #dbeafe; color: #2563eb; }
.teams-stat-card__icon--green  { background: #dcfce7; color: #16a34a; }
.teams-stat-card__icon--purple { background: #ede9fe; color: #7c3aed; }
.teams-stat-card__icon--amber  { background: #fef3c7; color: #d97706; }
.teams-stat-card__value {
  font-size: 24px; font-weight: 700; color: #111827; line-height: 1.1;
}
.teams-stat-card__label {
  font-size: 13px; color: #6b7280; margin-top: 2px;
}

.teams-search-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}
.teams-search-card__head { margin-bottom: 20px; }
.teams-search-card__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.teams-search-card__sub { margin: 0; font-size: 13px; color: #6b7280; }
.teams-search-card__body { display: flex; flex-direction: column; gap: 16px; }

.teams-search-card__input-wrap {
  position: relative;
}
.teams-search-card__input-wrap > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.teams-search-card__input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 44px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  color: #111827;
  background: #ffffff;
}
.teams-search-card__input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
  opacity: 0.85;
}

.teams-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .teams-filter-grid { grid-template-columns: 1fr; }
}
.teams-filter { display: flex; flex-direction: column; gap: 8px; }
.teams-filter__label {
  font-size: 13px; font-weight: 500; color: #374151;
}
.teams-filter__select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
}
.teams-filter__select:disabled {
  background: #f9fafb; cursor: not-allowed; opacity: 0.85;
}
.teams-filter--btn { justify-content: flex-end; }

.teams-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.teams-results-header__count { margin: 0; font-size: 14px; color: #6b7280; }
.teams-sort {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  min-width: 200px;
}
.teams-sort:disabled { background: #f9fafb; cursor: not-allowed; opacity: 0.85; }

.teams-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) { .teams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .teams-grid { grid-template-columns: 1fr; } }

.team-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.team-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.team-card__media {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.team-card__media-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__media-bg--environment { background: linear-gradient(135deg, #a7f3d0 0%, #16a34a 100%); }
.team-card__media-bg--education   { background: linear-gradient(135deg, #fde68a 0%, #d97706 100%); }
.team-card__media-bg--health      { background: linear-gradient(135deg, #fecaca 0%, #dc2626 100%); }
.team-card__media-bg--water       { background: linear-gradient(135deg, #bfdbfe 0%, #2563eb 100%); }
.team-card__media-bg--housing     { background: linear-gradient(135deg, #ddd6fe 0%, #7c3aed 100%); }
.team-card__media-bg--global      { background: linear-gradient(135deg, #a5f3fc 0%, #0891b2 100%); }

.team-card__media-emoji {
  font-size: 56px;
  opacity: 0.85;
}
.team-card__media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  pointer-events: none;
}
.team-card__badges {
  position: absolute;
  top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 1;
}
.team-card__badges--left  { left: 12px; }
.team-card__badges--right { right: 12px; }
.team-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.team-card__badge--category { background: rgba(255, 255, 255, 0.92); color: #111827; }
.team-card__badge--premium  { background: #f59e0b; color: #ffffff; }
.team-card__badge--open     { background: #16a34a; color: #ffffff; }
.team-card__badge--private  { background: #4b5563; color: #ffffff; }

.team-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}
.team-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.team-card__desc {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.team-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.team-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}
.team-card__stat svg { color: #9ca3af; flex-shrink: 0; }
.team-card__stat strong { color: #111827; font-weight: 600; }

.team-card__meta {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-card__meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}
.team-card__meta-row svg { color: #9ca3af; flex-shrink: 0; }
.team-card__meta-row strong { color: #111827; font-weight: 600; }

.team-card__multiplier {
  background: linear-gradient(90deg, #eff6ff 0%, #f5f3ff 100%);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-card__multiplier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}
.team-card__multiplier-label { color: #6b7280; }
.team-card__multiplier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #7c3aed;
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.team-card__impact { color: #111827; font-weight: 600; }

.teams-page__foot {
  margin: 8px 0 0;
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
}
.teams-btn--ghost {
  background: transparent;
  color: #4b5563;
  border-color: transparent;
}
.teams-btn--ghost:hover { color: #111827; background: #f3f4f6; }
.teams-btn--block { width: 100%; justify-content: center; }

/* =========================================================
   Create Team wizard (docs/FigmaCode/Community teams/src/app/
   components/CreateTeam.tsx) — 3-step ?step= flow.
   ========================================================= */
.team-wiz {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.team-wiz__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.team-wiz__title { margin: 0; font-size: 26px; font-weight: 700; color: #111827; }
.team-wiz__sub { margin: 4px 0 0; color: #6b7280; font-size: 14px; }
.team-wiz__progress {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.team-wiz__steps {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.team-wiz__step-block { display: flex; align-items: center; flex: 1; }
.team-wiz__step-block:last-child { flex: 0 0 auto; }
.team-wiz__step-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.team-wiz__step-dot--done    { background: #16a34a; color: #ffffff; }
.team-wiz__step-dot--active  { background: #2563eb; color: #ffffff; }
.team-wiz__step-dot--pending { background: #e5e7eb; color: #6b7280; }
.team-wiz__step-line { flex: 1; height: 3px; margin: 0 8px; background: #e5e7eb; }
.team-wiz__step-line--done { background: #16a34a; }
.team-wiz__step-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #6b7280;
}
.team-wiz__step-labels .is-active { font-weight: 600; color: #111827; }

.team-wiz__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.team-wiz__card-head { padding: 20px 24px; border-bottom: 1px solid #f3f4f6; }
.team-wiz__card-title { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.team-wiz__card-sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.team-wiz__card-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.team-wiz__section { display: flex; flex-direction: column; gap: 10px; }

.team-wiz__cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) { .team-wiz__cat-grid { grid-template-columns: 1fr; } }
.team-wiz__cat-btn {
  text-align: left;
  padding: 16px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: not-allowed;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  opacity: 0.7;
}
.team-wiz__cat-icon {
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-wiz__cat-body { flex: 1; min-width: 0; }
.team-wiz__cat-label { margin: 0 0 2px; font-weight: 600; color: #111827; }
.team-wiz__cat-desc { margin: 0; font-size: 12px; color: #6b7280; }

.team-wiz__uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 640px) { .team-wiz__uploads { grid-template-columns: 1fr; } }
.team-wiz__upload { display: flex; flex-direction: column; gap: 6px; }
.team-wiz__upload-box {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: #6b7280;
}
.team-wiz__upload-title { margin: 8px 0 2px; font-size: 13px; }
.team-wiz__upload-sub { margin: 0; font-size: 11px; color: #9ca3af; }

.team-wiz__access {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.team-wiz__access--selected { background: #f0fdf4; border-color: #16a34a; }
.team-wiz__access-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-wiz__access-icon--muted { background: #e5e7eb; }
.team-wiz__access-body { flex: 1; min-width: 0; }
.team-wiz__access-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.team-wiz__access-title { font-weight: 600; color: #111827; }
.team-wiz__access-desc { margin: 0; font-size: 13px; color: #6b7280; }
.team-wiz__access-check { flex-shrink: 0; }

.team-wiz__multiplier-callout {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.team-wiz__callout-title { margin: 0 0 4px; font-weight: 600; color: #1e40af; }
.team-wiz__callout-body { margin: 0 0 8px; font-size: 13px; color: #1e3a8a; }
.team-wiz__multiplier-badge { background: #7c3aed !important; color: #ffffff !important; }

.team-wiz__actions { display: flex; gap: 12px; }
.team-wiz__actions .teams-btn { flex: 1; justify-content: center; }

.team-wiz__summary {
  padding: 20px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.team-wiz__summary-title { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: #111827; }
.team-wiz__summary-rows { display: flex; flex-direction: column; gap: 10px; }
.team-wiz__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}
.team-wiz__summary-row strong { color: #111827; font-weight: 600; }

.team-wiz__terms {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 10px;
  cursor: pointer;
}
.team-wiz__terms input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.team-wiz__terms-title { margin: 0 0 4px; font-weight: 500; color: #111827; }
.team-wiz__terms-body { margin: 0; font-size: 13px; color: #6b7280; }

.team-wiz__launch {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f0fdf4, #eff6ff);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}
.team-wiz__launch svg { flex-shrink: 0; margin-top: 2px; }
.team-wiz__launch-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #111827; }
.team-wiz__launch-desc { margin: 0 0 12px; font-size: 13px; color: #4b5563; line-height: 1.5; }
.team-wiz__launch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #4b5563;
}
.team-wiz__launch-list li { display: flex; align-items: center; gap: 8px; }
.team-wiz__launch-btn { background: linear-gradient(135deg, #2563eb, #7c3aed); border: 0; }

/* =========================================================
   My Teams page (docs/FigmaCode/Community teams/src/app/
   components/MyTeams.tsx) — 3-tab shell.
   ========================================================= */
.my-teams {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.my-teams__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.my-teams__title { margin: 0; font-size: 26px; font-weight: 700; color: #111827; }
.my-teams__sub { margin: 4px 0 0; font-size: 14px; color: #6b7280; }
.my-teams__tabs {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.my-teams__tabs .fc-tab {
  border-radius: 6px;
  border-bottom: 0;
  padding: 8px 14px;
}
.my-teams__tabs .fc-tab.is-active {
  background: #111827;
  color: #ffffff;
  border-bottom: 0;
}

.my-teams__section { margin-bottom: 24px; }
.my-teams__section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.my-teams__list { display: flex; flex-direction: column; gap: 10px; }

.my-teams__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.my-teams__row:hover { background: #f9fafb; }
.my-teams__row--owned { border-color: #fde68a; background: #fffbeb; }
.my-teams__row--owned:hover { background: #fef3c7; }
.my-teams__row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.my-teams__row-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #ffffff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.my-teams__row-avatar--muted { background: linear-gradient(135deg, #64748b, #94a3b8); font-size: 14px; }
.my-teams__row-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.my-teams__row-name { margin: 0; font-weight: 600; color: #111827; }
.my-teams__row-meta { margin: 0; font-size: 12px; color: #6b7280; }

.my-teams__invite {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.my-teams__invite-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #f9fafb;
  border-left: 3px solid #94a3b8;
  font-size: 13px;
  color: #4b5563;
  font-style: italic;
  border-radius: 4px;
}
.my-teams__invite-actions { display: flex; gap: 8px; flex-shrink: 0; }

.my-teams__activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.my-teams__activity-icon {
  width: 40px;
  height: 40px;
  background: #dbeafe;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.my-teams__activity-body { flex: 1; min-width: 0; }
.my-teams__activity-title { margin: 0; font-weight: 500; color: #111827; }
.my-teams__activity-meta { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.my-teams__activity-team { font-weight: 600; color: #4b5563; }
.my-teams__activity-points { text-align: right; flex-shrink: 0; }
.my-teams__activity-points-value { margin: 0; font-size: 16px; font-weight: 700; color: #16a34a; }
.my-teams__activity-points-label { margin: 0; font-size: 10px; color: #6b7280; }

/* =========================================================
   Team Detail page (docs/FigmaCode/Community teams/src/app/
   components/TeamDetail.tsx) — hero + KPI + goals + members.
   ========================================================= */
.team-detail { min-height: 100%; background: #f9fafb; }
.team-detail__hero {
  color: #ffffff;
  padding: 24px 0;
}
.team-detail__hero--green  { background: linear-gradient(90deg, #16a34a, #22c55e); }
.team-detail__hero--purple { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.team-detail__hero--blue   { background: linear-gradient(90deg, #2563eb, #06b6d4); }
.team-detail__hero--pink   { background: linear-gradient(90deg, #db2777, #f43f5e); }
.team-detail__hero--orange { background: linear-gradient(90deg, #ea580c, #f97316); }
.team-detail__hero--yellow { background: linear-gradient(90deg, #ca8a04, #eab308); }
.team-detail__hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 720px) { .team-detail__hero-inner { grid-template-columns: 1fr; } }
.team-detail__back {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  align-self: flex-start;
  transition: background 0.12s;
}
.team-detail__back:hover { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.team-detail__hero-body { display: flex; flex-direction: column; gap: 10px; }
.team-detail__pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.team-detail__pill {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.team-detail__pill--gold { background: rgba(251, 191, 36, 0.3); color: #fef3c7; }
.team-detail__title { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; }
.team-detail__desc { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.95; max-width: 720px; }
.team-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  opacity: 0.9;
  margin-top: 6px;
}
.team-detail__meta span { display: inline-flex; align-items: center; gap: 6px; }
.team-detail__hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.team-detail__hero-btn { color: inherit; }
.team-detail__hero-actions .teams-btn--outline {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.team-detail__hero-actions .teams-btn--primary { background: #ffffff; color: #111827; }

.team-detail__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.team-detail__kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) { .team-detail__kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.team-detail__kpi {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
}
.team-detail__kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.team-detail__kpi--blue   .team-detail__kpi-icon { background: #2563eb; }
.team-detail__kpi--purple .team-detail__kpi-icon { background: #7c3aed; }
.team-detail__kpi--amber  .team-detail__kpi-icon { background: #ca8a04; }
.team-detail__kpi--green  .team-detail__kpi-icon { background: #16a34a; }
.team-detail__kpi-value { margin: 0; font-size: 24px; font-weight: 700; color: #111827; }
.team-detail__kpi-label { margin: 4px 0 0; font-size: 12px; color: #6b7280; }

.team-detail__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.team-detail__card-head { padding: 18px 20px; border-bottom: 1px solid #f3f4f6; }
.team-detail__card-title { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.team-detail__card-sub   { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.team-detail__card-body  { padding: 18px 20px; }

.team-detail__impact-summary {
  margin: 0;
  padding: 12px 16px;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
}

.team-detail__two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .team-detail__two-col { grid-template-columns: 1fr; } }

.team-detail__goals { display: flex; flex-direction: column; gap: 16px; }
.team-detail__goal-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.team-detail__goal-title { margin: 0; font-size: 13px; font-weight: 500; color: #111827; }
.team-detail__goal-pct { font-size: 13px; font-weight: 700; color: #16a34a; }
.team-detail__goal-progress { margin: 6px 0 0; font-size: 12px; color: #6b7280; }

.team-detail__upcoming { display: flex; flex-direction: column; gap: 12px; }
.team-detail__upcoming-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.team-detail__upcoming-title { margin: 0; font-weight: 500; color: #111827; }
.team-detail__upcoming-meta  { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.team-detail__upcoming-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.team-detail__halo-pill { background: linear-gradient(135deg, #f59e0b, #ea580c) !important; color: #ffffff !important; }

.team-detail__activities { display: flex; flex-direction: column; gap: 10px; }
.team-detail__activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}
.team-detail__activity-title { margin: 0; font-weight: 500; color: #111827; }
.team-detail__activity-meta  { margin: 2px 0 0; font-size: 12px; color: #6b7280; }

.team-detail__members { display: flex; flex-direction: column; gap: 10px; }
.team-detail__member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
}
.team-detail__member-rank {
  width: 24px;
  height: 24px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.team-detail__member-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.team-detail__member-body { flex: 1; min-width: 0; }
.team-detail__member-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-detail__member-name { margin: 0; font-weight: 500; color: #111827; font-size: 14px; }
.team-detail__member-meta { margin: 2px 0 0; font-size: 12px; color: #6b7280; }

/* =========================================================
   PM inspector · in-DOM region annotations (dev only)
   Rendered by pm_region(...) helper — see app/helpers/pm_helper.rb.
   ========================================================= */

.pm-region {
  position: relative;
  outline: 1px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
  border-radius: 4px;
}

.pm-region__chip {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 20;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(88, 28, 135, 0.85); /* purple-900 @ 85% */
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  pointer-events: auto;
  cursor: help;
  opacity: 0.45;
  transition: opacity 0.12s ease-in-out;
  white-space: nowrap;
}

.pm-region:hover > .pm-region__chip,
.pm-region--self-hover > .pm-region__chip,
.pm-region--highlight > .pm-region__chip {
  opacity: 1;
}

.pm-region--highlight {
  outline-color: #d97706; /* amber-600 — matches "hover from panel" direction */
  background: rgba(217, 119, 6, 0.06);
}

.pm-region--self-hover {
  outline-color: #7c3aed; /* violet-600 — matches "hover on-page → panel" direction */
  background: rgba(124, 58, 237, 0.05);
}

.pm-story--hover-target {
  background: rgba(124, 58, 237, 0.12) !important;
  outline: 1px solid #7c3aed;
  outline-offset: -1px;
}

/* PM overlay · compact-mode toggle (option D, dev-only) */

.pm-overlay__compact-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 14px;
  line-height: 1;
  color: #4b5563;
  cursor: pointer;
  margin-left: auto;
}
.pm-overlay__compact-btn:hover {
  background: #f3f4f6;
  color: #111827;
}
.pm-overlay__compact-btn-full    { display: none; }
.pm-overlay__compact-btn-compact { display: inline; }
.pm-overlay[data-compact="true"] .pm-overlay__compact-btn-full    { display: inline; }
.pm-overlay[data-compact="true"] .pm-overlay__compact-btn-compact { display: none; }

/* In compact mode, hide everything except header + Stories block.
   :has() targets the h4 headings that precede the collapsible sections
   so they collapse together with their bodies. Dev-only surface, so
   modern-browser :has() support is fine. */
.pm-overlay[data-compact="true"] .pm-overlay__meta,
.pm-overlay[data-compact="true"] .pm-overlay__blocked,
.pm-overlay[data-compact="true"] .pm-ref,
.pm-overlay[data-compact="true"] .pm-legend,
.pm-overlay[data-compact="true"] .pm-overlay__draft,
.pm-overlay[data-compact="true"] .pm-overlay__blockers,
.pm-overlay[data-compact="true"] .pm-overlay__no-meta,
.pm-overlay[data-compact="true"] h4:has(+ .pm-overlay__blocked),
.pm-overlay[data-compact="true"] h4:has(+ .pm-ref) {
  display: none;
}

/* Also trim the panel width a bit in compact mode so it covers less */
.pm-overlay[data-compact="true"] .pm-overlay__panel {
  width: 300px;
}

/* Close (×) button — sits next to the compact toggle in the header */
.pm-overlay__close-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 18px;
  line-height: 20px;
  color: #4b5563;
  cursor: pointer;
  margin-left: 4px;
}
.pm-overlay__close-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* Compact-mode height cap — keeps normal font/padding but shrinks the
   panel's max-height so the story list scrolls internally instead of
   dominating the viewport. Story titles truncate with ellipsis so the
   panel stays narrow. */
.pm-overlay[data-compact="true"] .pm-overlay__panel {
  max-height: 35vh;
}
.pm-overlay[data-compact="true"] .pm-story__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* User Dashboard · Achievement banner + Referral progress bar + Earn cards
   (Figma-parity audit medium #9 · 2026-07-30) */

.dash-achievement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  border: 2px solid #86efac;
  border-radius: 12px;
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
}
.dash-achievement__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-achievement__body { flex: 1; min-width: 0; }
.dash-achievement__title {
  font-weight: 700;
  color: #14532d;
  font-size: 15px;
}
.dash-achievement__desc {
  margin: 4px 0 0;
  color: #166534;
  font-size: 13px;
  line-height: 1.5;
}
.dash-achievement__dismiss {
  background: transparent;
  border: 0;
  color: #14532d;
  font-size: 22px;
  line-height: 1;
  cursor: not-allowed;
  opacity: 0.5;
  padding: 0 4px;
}

.stat-card__progress {
  margin-top: 8px;
  height: 6px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.stat-card__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border-radius: 999px;
  transition: width 0.3s ease-in-out;
}

.dash-earn-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) { .dash-earn-cards { grid-template-columns: 1fr; } }
.dash-earn-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.dash-earn-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-earn-card__icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.dash-earn-card--blue   .dash-earn-card__icon-tile { background: #dbeafe; }
.dash-earn-card--yellow .dash-earn-card__icon-tile { background: #fef3c7; }
.dash-earn-card--green  .dash-earn-card__icon-tile { background: #dcfce7; }
.dash-earn-card--orange .dash-earn-card__icon-tile { background: #ffedd5; }
.dash-earn-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.dash-earn-card__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}
.dash-earn-card__stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.dash-earn-card__stat-label { color: #6b7280; }
.dash-earn-card__stat-value { font-weight: 600; color: #111827; }
.dash-earn-card__callout {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.dash-earn-card--blue   .dash-earn-card__callout { background: #eff6ff; color: #1e40af; }
.dash-earn-card--yellow .dash-earn-card__callout { background: #fffbeb; color: #92400e; }
.dash-earn-card--green  .dash-earn-card__callout { background: #f0fdf4; color: #166534; }
.dash-earn-card--orange .dash-earn-card__callout { background: #fff7ed; color: #9a3412; }
.dash-earn-card__cta {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: filter 0.12s;
}
.dash-earn-card--blue   .dash-earn-card__cta { background: #2563eb; }
.dash-earn-card--yellow .dash-earn-card__cta { background: #ca8a04; }
.dash-earn-card--green  .dash-earn-card__cta { background: #16a34a; }
.dash-earn-card--orange .dash-earn-card__cta { background: #ea580c; }
.dash-earn-card__cta:hover { filter: brightness(1.08); }

/* Campaign tile · admin-only approval-status badge
   (2026-07-30 · feedback_campaign_approval_visibility.md)
   Rendered by publishable_helper#approval_badge — admin-only. */

.org-card__approval-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  border: 1px solid transparent;
  text-transform: uppercase;
}
.org-card__approval-badge--draft    { background: #d97706; border-color: #b45309; }
.org-card__approval-badge--pending  { background: #ca8a04; border-color: #a16207; }
.org-card__approval-badge--changes  { background: #2563eb; border-color: #1d4ed8; }
.org-card__approval-badge--rejected { background: #dc2626; border-color: #b91c1c; }

/* 2026-08-30 · NOT APPROVED umbrella pill — sits below the specific-
   status pill (draft/pending/etc). Red so the compliance verdict
   reads at a glance regardless of specific status. */
.org-card__not-approved-badge {
  position: absolute;
  top: 42px;
  left: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: #991b1b;
  border: 1px solid #7f1d1d;
  text-transform: uppercase;
}