/* ── Charity Journal — Global Giving Tracker v2 ─────────────────────────────
   Brand: Teal #00A99D · Navy #0D2B3E · Coral arc #FF6B6B
   Mobile-first, CMC-style donor table, detail panel overlays map
   ──────────────────────────────────────────────────────────────────────────── */

/* Cormorant Garamond + DM Sans — used by the charity rating card (.ct-org-card)
   to match the standalone Rating Authority Engine's card typography exactly. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --cj-teal:       #00A99D;
  --cj-teal-dark:  #007A72;
  --cj-teal-deep:  #005C56;
  --cj-teal-light: #E6F7F6;
  --cj-teal-mid:   #4DC9C2;
  --cj-navy:       #0D2B3E;
  --cj-navy-mid:   #1A4258;
  --cj-white:      #F4FAFA;
  --cj-accent-dark: #0D2B3E;
  --cj-text:       #0D2B3E;
  --cj-text-mid:   #3D6070;
  --cj-text-soft:  #7A9BAA;
  --cj-border:     rgba(0,169,157,0.12);
  --cj-border-mid: rgba(0,169,157,0.28);
  --cj-up:         #00A99D;
  --cj-down:       #E8394D;
  --cj-radius:     10px;
  --cj-radius-lg:  16px;
  --cj-radius-xl:  22px;
  --cj-shadow:     0 2px 16px rgba(0,169,157,0.09);
  --cj-shadow-lg:  0 8px 40px rgba(13,43,62,0.12);
  --cj-card-bg:    #fff;
  --cj-hover-bg:   #FAFCFD;
  --cj-toggle-bg:  #EEF3F5;
  --cj-page-bg:    transparent;
}

#ct-app[data-theme="dark"] {
  --cj-teal-light: rgba(0,169,157,0.14);
  --cj-navy:       #E8F1F4;
  --cj-navy-mid:   #C7D8DF;
  --cj-text:       #E8F1F4;
  --cj-text-mid:   #A9C0CA;
  --cj-text-soft:  #7590A0;
  --cj-border:     rgba(255,255,255,0.09);
  --cj-border-mid: rgba(255,255,255,0.16);
  --cj-shadow:     0 2px 16px rgba(0,0,0,0.25);
  --cj-shadow-lg:  0 8px 40px rgba(0,0,0,0.4);
  --cj-card-bg:    #14222B;
  --cj-hover-bg:   #1B2C37;
  --cj-toggle-bg:  #1B2C37;
  --cj-page-bg:    #0A151C;
  background: var(--cj-page-bg);
  transition: background .2s;
}
#ct-app[data-theme="dark"] .ct-fbtn.active { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   LIGHT MODE — white/classy treatment for the hero, metric cards, live
   donation feed, live activity feed and "today's top inflows" panel.

   These sections were originally built dark-styled on purpose (photo hero,
   navy feed cards) and stayed that way in BOTH themes — see the
   "regardless of the site's light/dark toggle" notes elsewhere in this
   file. This block carves light mode back out for just these sections:
   everything below is scoped to #ct-app:not([data-theme="dark"]) and
   overrides on class selectors alone (dark mode's rules above are
   untouched and still win when data-theme="dark" is set). Elements not
   listed here (e.g. text colour on children with no hardcoded colour)
   inherit the new navy text automatically from their section wrapper.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero + metric cards ──
   Light mode treats the rotating photo as a *texture*, not a picture you're
   meant to study. Three layers make that work, and each has to live at the
   right depth in the stack:
     1. A solid white base on .ct-hero itself — BEHIND the photo — so the
        scrim composites predictably no matter how bright or dark the
        current shot is (the photos rotate; without this, legibility swings
        shot to shot). It must go here and not in .ct-hero-bg-tint, which
        sits *above* the image and would simply hide it.
     2. The photo itself gently desaturated and lifted, so it reads as tonal
        texture rather than a scene competing with the copy on top of it.
     3. A *directional* scrim in .ct-hero-bg-tint — heavy behind the text on
        the left, easing well back toward the right so the image genuinely
        shows through there. The old flat wash was equally milky everywhere,
        which is what made it read as haze rather than composition.
   Get those right and the text needs no text-shadow crutches at all. */
#ct-app:not([data-theme="dark"]) .ct-hero {
  background: #fff;
  border-color: rgba(0,169,157,0.28);
  box-shadow:
    0 1px 2px rgba(13,43,62,0.04),
    0 24px 56px -28px rgba(13,43,62,0.28),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
#ct-app:not([data-theme="dark"]) .ct-hero.ct-hero-compact {
  box-shadow:
    0 1px 2px rgba(13,43,62,0.04),
    0 16px 36px -22px rgba(13,43,62,0.22),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
#ct-app:not([data-theme="dark"]) .ct-hero-bg-img {
  /* Muted and lifted a touch so the photo sits as background texture
     rather than fighting the teal palette — but not so far that the
     subject disappears. */
  filter: saturate(0.62) brightness(1.06) contrast(0.97);
}
#ct-app:not([data-theme="dark"]) .ct-hero-bg-tint {
  background:
    /* Warm the top-left corner very slightly toward brand teal so the hero
       doesn't read as a grey box. */
    radial-gradient(120% 140% at 0% 0%, rgba(0,169,157,0.14) 0%, rgba(0,169,157,0) 55%),
    /* The scrim proper: heavy behind the headline on the left, easing well
       back toward the right so the photo genuinely reads there. Every layer
       here must stay translucent — this element sits *above* the photo
       (z-index 1 vs 0), so any fully opaque colour hides the image
       entirely rather than backing it. The solid white floor that keeps
       legibility consistent between photo rotations lives on .ct-hero
       itself, behind the image, which is where it belongs. */
    linear-gradient(105deg,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.88) 32%,
      rgba(255,255,255,0.72) 58%,
      rgba(255,255,255,0.52) 82%,
      rgba(255,255,255,0.44) 100%);
}
/* With the scrim doing the work, the text can just be text. The old
   white text-shadows were compensating for an under-built background and
   left a visible halo on the glyph edges. */
#ct-app:not([data-theme="dark"]) .ct-title {
  color: var(--cj-navy);
  text-shadow: none;
}
#ct-app:not([data-theme="dark"]) .ct-title span {
  color: var(--cj-teal-deep);
  text-shadow: none;
}
#ct-app:not([data-theme="dark"]) .ct-subtitle {
  /* Size stays inherited from the base .ct-subtitle rule so both themes
     track the same value — colour/weight only. Navy rather than the muted
     mid-tone: this sits over the hero photo scrim, where --cj-text-mid was
     washing out. */
  color: var(--cj-navy);
  font-weight: 600;
  text-shadow: none;
}

/* "LIVE" badge — was thin/faint teal-on-teal, hard to read against the
   lighter hero. */
#ct-app:not([data-theme="dark"]) .ct-live-label {
  color: var(--cj-teal-deep); font-weight: 800;
  background: rgba(0,169,157,0.18); border-color: rgba(0,169,157,0.45);
}
#ct-app:not([data-theme="dark"]) .ct-theme-toggle {
  border-color: rgba(13,43,62,0.12); background: rgba(13,43,62,0.04); color: var(--cj-navy);
}
#ct-app:not([data-theme="dark"]) .ct-theme-toggle:hover {
  background: var(--cj-teal-light); color: var(--cj-teal-dark); border-color: rgba(0,169,157,0.5);
}
/* The nav strip and stat cards sit *on* the hero photo, so anything
   translucent lets the image muddy them. Solid (or near-solid) surfaces
   with real borders read as deliberate UI layered over the texture,
   rather than half-dissolved into it. */
#ct-app:not([data-theme="dark"]) .ct-hero-nav {
  background: rgba(255,255,255,0.86);
  border-color: rgba(13,43,62,0.10);
  box-shadow: 0 1px 3px rgba(13,43,62,0.05);
}
#ct-app:not([data-theme="dark"]) .ct-hero-nav-link { color: var(--cj-text-mid); font-weight: 700; }
#ct-app:not([data-theme="dark"]) .ct-hero-nav-link:hover { color: var(--cj-navy); background: rgba(13,43,62,0.05); }
#ct-app:not([data-theme="dark"]) .ct-hero-nav-link-red { color: #C63C3C; }
#ct-app:not([data-theme="dark"]) .ct-hero-nav-link-red:hover { color: #791F1F; background: rgba(198,60,60,0.08); }

#ct-app:not([data-theme="dark"]) .ct-stat-card {
  background: rgba(255,255,255,0.94);
  border-color: rgba(13,43,62,0.10);
  box-shadow: 0 1px 2px rgba(13,43,62,0.04), 0 8px 20px -14px rgba(13,43,62,0.20);
}
#ct-app:not([data-theme="dark"]) .ct-stat-card:hover {
  border-color: rgba(0,169,157,0.42); background: #fff;
  box-shadow: 0 2px 4px rgba(13,43,62,0.05), 0 14px 28px -14px rgba(0,169,157,0.28);
}
#ct-app:not([data-theme="dark"]) .ct-stat-card-primary {
  background: linear-gradient(160deg, rgba(0,169,157,0.13), rgba(255,255,255,0.96) 62%);
  border-color: rgba(0,169,157,0.38);
}
#ct-app:not([data-theme="dark"]) .ct-stat-card-label,
#ct-app:not([data-theme="dark"]) .ct-stat-card-change { color: var(--cj-text-mid); }
#ct-app:not([data-theme="dark"]) .ct-stat-card-val { color: var(--cj-navy); }

#ct-app:not([data-theme="dark"]) .ct-hero-corner-stat {
  background: #fff; border-color: rgba(0,169,157,0.28);
  box-shadow: 0 14px 30px -18px rgba(13,43,62,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
}
#ct-app:not([data-theme="dark"]) .ct-hero-corner-stat-label { color: var(--cj-text-mid); }
#ct-app:not([data-theme="dark"]) .ct-hero-corner-stat-val { color: var(--cj-navy); }

/* The small teal icon glows are a dark-mode device — on a near-white card
   the halo just reads as a smudge around the glyph. Drop the glow and use
   the deeper teal so the icons stay legible at 11–12px. */
#ct-app:not([data-theme="dark"]) .ct-stat-card-label i,
#ct-app:not([data-theme="dark"]) .ct-hero-corner-stat-label i {
  filter: none;
  color: var(--cj-teal-dark);
}

/* "No change logged today", "0.0%", "±0", "No data yet" etc. — the flat/
   neutral change state was near-white, invisible on any of the cards this
   block turns light. The still-dark cards (weekly leaderboard's trend
   ticker) keep their own darker-context override further down the file,
   which is more specific than this and wins there. */
#ct-app:not([data-theme="dark"]) .ct-chg-flat { color: var(--cj-text-mid); }

/* ── Live donation feed ── */
#ct-app:not([data-theme="dark"]) .ct-live-section {
  background: #fff; border-color: var(--cj-border);
}
#ct-app:not([data-theme="dark"]) .ct-live-head .ct-section-title { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-live-head .ct-section-sub { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-live-list {
  scrollbar-color: rgba(13,43,62,0.15) transparent;
}
#ct-app:not([data-theme="dark"]) .ct-live-list::-webkit-scrollbar-thumb { background: rgba(13,43,62,0.15); }
#ct-app:not([data-theme="dark"]) .ct-live-row { border-bottom-color: var(--cj-border); }
#ct-app:not([data-theme="dark"]) .ct-live-row:hover { background: var(--cj-teal-light); }
#ct-app:not([data-theme="dark"]) .ct-live-time-col { color: var(--cj-text-mid); }
#ct-app:not([data-theme="dark"]) .ct-live-name { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-live-recipient-inline { color: var(--cj-text-mid); }
#ct-app:not([data-theme="dark"]) .ct-live-recipient-inline i { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-live-amt { color: var(--cj-teal-dark); }
#ct-app:not([data-theme="dark"]) .ct-live-empty { color: var(--cj-text-soft); }

/* ── Today's top inflows ── */
#ct-app:not([data-theme="dark"]) .ct-today-section {
  background: #fff; border: 1px solid var(--cj-border);
}
#ct-app:not([data-theme="dark"]) .ct-today-head .ct-section-title { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-today-head .ct-section-sub { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-today-toggle { background: var(--cj-toggle-bg); }
#ct-app:not([data-theme="dark"]) .ct-tbtn { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-tbtn:hover { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-tbtn.active { background: var(--cj-accent-dark); color: #fff; box-shadow: 0 1px 4px rgba(13,43,62,0.25); }
#ct-app:not([data-theme="dark"]) .ct-today-list {
  scrollbar-color: rgba(13,43,62,0.15) transparent;
}
#ct-app:not([data-theme="dark"]) .ct-today-list::-webkit-scrollbar-thumb { background: rgba(13,43,62,0.15); }
#ct-app:not([data-theme="dark"]) .ct-today-bar-amt { color: var(--cj-teal-dark); }
#ct-app:not([data-theme="dark"]) .ct-today-bar-track { background: var(--cj-toggle-bg); }
#ct-app:not([data-theme="dark"]) .ct-today-bar-meta { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-today-empty { color: var(--cj-text-soft); }

/* ── Live activity feed (Activity view) ── */
#ct-app:not([data-theme="dark"]) .ct-act-feed-section {
  background: #fff; border-color: var(--cj-border); color: var(--cj-navy);
}
#ct-app:not([data-theme="dark"]) .ct-act-count-badge {
  color: var(--cj-text-mid); background: var(--cj-toggle-bg); border-color: var(--cj-border-mid);
}
#ct-app:not([data-theme="dark"]) .ct-act-count-badge span { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-act-search-toggle {
  background: var(--cj-toggle-bg); border-color: var(--cj-border-mid); color: var(--cj-navy);
}
#ct-app:not([data-theme="dark"]) .ct-act-search-toggle:hover { color: var(--cj-teal-dark); background: var(--cj-teal-light); }
#ct-app:not([data-theme="dark"]) .ct-act-feed-list {
  scrollbar-color: rgba(13,43,62,0.15) transparent;
}
#ct-app:not([data-theme="dark"]) .ct-act-feed-list::-webkit-scrollbar-thumb { background: rgba(13,43,62,0.15); }
#ct-app:not([data-theme="dark"]) .ct-act-row { border-bottom-color: var(--cj-border); }
#ct-app:not([data-theme="dark"]) .ct-act-row:hover { background: var(--cj-teal-light); }
#ct-app:not([data-theme="dark"]) .ct-act-headline { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-act-time { color: var(--cj-text-mid); }

/* Live feed filter/search bar + date banner, light mode */
#ct-app:not([data-theme="dark"]) .ct-act-filter-search {
  background: var(--cj-toggle-bg); border-color: var(--cj-border-mid);
}
#ct-app:not([data-theme="dark"]) .ct-act-filter-search i { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-act-filter-search input { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-act-filter-search input::placeholder { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-act-filter-select {
  background: var(--cj-toggle-bg); border-color: var(--cj-border-mid); color: var(--cj-navy);
}
#ct-app:not([data-theme="dark"]) .ct-act-filter-clear {
  background: var(--cj-toggle-bg); border-color: var(--cj-border-mid); color: var(--cj-text-soft);
}
#ct-app:not([data-theme="dark"]) .ct-act-filter-clear:hover { color: var(--cj-navy); background: var(--cj-hover-bg); }
#ct-app:not([data-theme="dark"]) .ct-act-date-banner { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-act-date-banner button {
  background: #fff; border-color: var(--cj-border-mid); color: var(--cj-navy);
}
#ct-app:not([data-theme="dark"]) .ct-act-date-banner button:hover { background: var(--cj-hover-bg); }

/* ── Ticker bar (24H VOLUME / DONORS / 7D VOLUME strip under the hero) ── */
#ct-app:not([data-theme="dark"]) .ct-ticker {
  background: #fff; border-color: var(--cj-border);
  box-shadow: 0 2px 10px rgba(13,43,62,0.06);
}
#ct-app:not([data-theme="dark"]) .ct-ticker-label { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-ticker-val { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-ticker-sep { background: var(--cj-border-mid); }

/* ── Data/Activity segmented toggle (sits top-right of the hero) ── */
#ct-app:not([data-theme="dark"]) .ct-view-toggle {
  background: rgba(13,43,62,0.045); border-color: rgba(13,43,62,0.1);
}
#ct-app:not([data-theme="dark"]) .ct-vbtn { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-vbtn.active { color: #fff; }

/* ── Single-org page activity feed title (sits on the now-white
   .ct-act-feed-section via the .ct-org-feed-card modifier) ── */
#ct-app:not([data-theme="dark"]) .ct-org-feed-card .ct-section-title { color: var(--cj-navy); }
#ct-app:not([data-theme="dark"]) .ct-org-feed-card .ct-section-sub { color: var(--cj-text-soft); }
#ct-app:not([data-theme="dark"]) .ct-org-feed-card #ct-org-feed::-webkit-scrollbar-thumb { background: rgba(13,43,62,0.15); }


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

#ct-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 36px) 48px;
  color: var(--cj-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Hero top bar (Live badge + theme toggle, now inside the dark panel) ── */
.ct-hero-topbar {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 3;
}
.ct-topbar-left { display: flex; align-items: center; gap: 7px; }
.ct-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cj-teal-mid);
  box-shadow: 0 0 8px rgba(0,169,157,0.8);
  animation: ct-breathe 2.4s ease-in-out infinite; flex-shrink: 0;
}
.ct-live-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.075em; color: var(--cj-teal-mid);
  background: rgba(0,169,157,0.14); border: 1px solid rgba(0,169,157,0.32);
  border-radius: 20px; padding: 2.5px 9px;
}
/* Negative, and deliberately so: the LIVE badge and the toggle pills are
   short controls sitting in a taller line box, and the leftover space read
   as a gap above the title. */
.ct-hero-topbar { margin-bottom: -17px; }
.ct-theme-toggle {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
  color: rgba(232,241,244,0.7); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; transition: all .15s; flex-shrink: 0;
}
.ct-theme-toggle:hover { background: rgba(0,169,157,0.16); color: var(--cj-teal-mid); border-color: rgba(0,169,157,0.5); }

/* ── Hero ──
   Desktop-only ~30% size cut for the DATA view specifically. The
   Activity view's hero (.ct-hero-compact, further down) already sets its
   own padding/gap/title-size/topbar-margin, so it keeps its existing look
   untouched. Mobile is untouched too — the max-width:700px block further
   down redefines every one of these same properties for phones. */
.ct-hero {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 14px; padding: 4px 16px 7px;
  position: relative; overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,169,157,0.22);
  box-shadow: 0 24px 60px -20px rgba(0,10,15,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Rotating hero background photos, crossfaded by JS */
.ct-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.ct-hero-bg-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease;
}
.ct-hero-bg-img.is-active { opacity: 1; }
.ct-hero-bg-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 15%, rgba(0,169,157,0.20), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(0,169,157,0.10), transparent 45%),
    linear-gradient(150deg, rgba(10,23,32,0.93) 0%, rgba(13,35,49,0.90) 55%, rgba(10,23,32,0.94) 100%);
}
.ct-hero-text { position: relative; z-index: 3; }
/* Title and strapline share one line from tablet up, instead of the H1
   taking a row of its own and pushing the whole hero taller.

   Nothing here touches SEO: the <h1> is still a real, visible, un-clipped
   heading with the same text — it just sits beside the strapline rather
   than above it. Only the hidden view-title H1s are display:none, and they
   were already, for reasons unrelated to this.

   Below 700px they stack again (a phone can't fit both on one line without
   wrapping to something taller than stacking) — the mobile block reclaims
   the same height by tightening the gaps instead. */
@media (min-width: 701px) {
  .ct-hero-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; }
  /* A hairline rule rather than a bullet: at the size and opacity a bullet
     needs to stay subtle it just read as an accidental gap, which is what
     made the two look unaligned rather than deliberately paired. */
  .ct-subtitle {
    margin-top: 0; padding-left: 14px;
    border-left: 2px solid rgba(0,169,157,0.6);
  }
  #ct-app:not([data-theme="dark"]) .ct-subtitle { border-left-color: rgba(0,169,157,0.55); }
}
.ct-title {
  font-size: clamp(16px, 1.85vw, 21px); font-weight: 800;
  color: #F3FAFA; letter-spacing: -0.03em; line-height: 1.15;
}
.ct-title span { color: var(--cj-teal-mid); text-shadow: 0 0 22px rgba(0,169,157,0.55); }
.ct-subtitle { font-size: 14px; color: rgba(232,241,244,0.62); margin-top: 4px; line-height: 1.45; max-width: 480px; }

.ct-hero-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px;
  width: 100%; position: relative; z-index: 3;
}
/* ── Section-nav menu wrapper (hero + org toolbar) ──
   Desktop: inert. The toggle is hidden and the nav inside renders exactly
   as it always did. Phones turn the toggle on and the nav becomes the
   panel it drops down — see the MOBILE TAIL block at the end of this
   file. Both navs share the wrapper so they behave identically. */
.ct-navmenu { position: relative; }
.ct-navmenu-toggle { display: none; }
/* .ct-hero is a flex column with a 6px gap, so this only tops up what the
   nav used to get from the stat grid's own row gap. */
.ct-hero-navmenu { position: relative; z-index: 3; margin-top: 3px; }

.ct-hero-nav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 8px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ct-hero-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  /* Horizontal padding grew with the type bump, but vertical padding is
     held at the original 7px — the nav is the last row of the hero grid,
     so any extra height here makes the whole hero box taller. */
  padding: 7px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  color: rgba(255,255,255,0.6); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, transform .15s;
}
.ct-hero-nav-link i { font-size: 16px; opacity: .85; }
.ct-hero-nav-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
.ct-hero-nav-link.active { color: #06201D; background: var(--cj-teal); box-shadow: 0 4px 14px rgba(0,169,157,0.35); }
.ct-hero-nav-link.active i { opacity: 1; }
.ct-hero-nav-link-red { color: #FF9C9C; }
.ct-hero-nav-link-red:hover { color: #fff; background: rgba(255,90,90,0.14); }
.ct-hero-nav-link-red.active { color: #3D0A0A; background: #FF6B6B; box-shadow: 0 4px 14px rgba(255,107,107,0.35); }
.ct-hero-nav-link-red.active i { opacity: 1; }
@media (max-width: 780px) { .ct-hero-nav-link span { display: none; } .ct-hero-nav-link { padding: 8px 10px; } }
.ct-stat-card {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px; padding: 6px 9px 5px; min-width: 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ct-stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cj-teal-mid), transparent);
  opacity: 0.55;
}
.ct-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,169,157,0.45);
  background: rgba(0,169,157,0.06);
  box-shadow: 0 10px 28px -8px rgba(0,169,157,0.28);
}
.ct-stat-card-primary {
  border-color: rgba(0,169,157,0.4);
  background: linear-gradient(160deg, rgba(0,169,157,0.14), rgba(255,255,255,0.03) 65%);
}
.ct-stat-card-primary::before { opacity: 0.9; height: 2.5px; }
.ct-stat-card-label {
  margin: 0 0 2px 0;
  font-size: 11px; color: rgba(232,241,244,0.55); text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-weight: 700;
}
.ct-stat-card-label i { font-size: 11.5px; color: var(--cj-teal-mid); flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(0,169,157,0.65)); }
.ct-stat-card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.ct-stat-card-val {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 17px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
  font-variant-numeric: tabular-nums;
}
.ct-stat-card-spark { flex: 1 1 auto; min-width: 50%; max-width: none; line-height: 0; }
.ct-stat-card-spark svg { display: block; width: 100%; height: 19px; }
.ct-hero-spark-empty { opacity: 0.6; }
.ct-stat-card-change { font-size: 11px; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(232,241,244,0.55); }
.ct-green { color: var(--cj-teal-mid) !important; font-size: 16px !important; text-shadow: 0 0 16px rgba(0,169,157,0.4); }
.ct-stat-card-centered .ct-stat-card-label,
.ct-stat-card-centered .ct-stat-card-val { justify-content: center; text-align: center; }

.ct-chg-up   { color: #33E0B4;   font-weight: 700; }
.ct-chg-down { color: #FF6B7A; font-weight: 700; }
.ct-chg-flat { color: rgba(232,241,244,0.45); font-weight: 500; }
.ct-chg-info { color: var(--cj-teal-mid) !important; }

/* ── Hero corner stat (Activity view: "Activities tracked") ── */
.ct-hero-corner-stat {
  position: absolute; right: 22px; bottom: 19px; z-index: 3;
  min-width: 138px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(0,169,157,0.3);
  border-radius: 11px; padding: 10px 14px 9px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -14px rgba(0,10,15,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  text-align: right;
}
.ct-hero-corner-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cj-teal-mid), transparent);
  opacity: 0.75; border-radius: 14px 14px 0 0;
}
.ct-hero-corner-stat-label {
  font-size: 10px; color: rgba(232,241,244,0.55); text-transform: uppercase; letter-spacing: 0.065em;
  display: flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap;
}
.ct-hero-corner-stat-label i { font-size: 12px; color: var(--cj-teal-mid); filter: drop-shadow(0 0 5px rgba(0,169,157,0.65)); }
.ct-hero-corner-stat-val {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 20px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ct-hero-corner-stat-change { font-size: 10px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .ct-hero-corner-stat {
    position: static; align-self: flex-start; align-items: flex-start; text-align: left;
    margin-top: 4px; width: max-content;
  }
}

/* ── Secondary ticker bar ── */
.ct-ticker {
  display: flex; align-items: center; flex-wrap: wrap;
  background: linear-gradient(150deg, #0A1720 0%, #0D2331 100%);
  border: 1px solid rgba(0,169,157,0.2);
  border-radius: var(--cj-radius-lg); padding: 13px 22px; margin-bottom: 20px;
  box-shadow: 0 14px 36px -16px rgba(0,10,15,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  gap: 20px; font-size: 12px; position: relative; overflow: hidden;
}
.ct-ticker-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; position: relative; z-index: 1; }
.ct-ticker-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,169,157,0.14); border: 1px solid rgba(0,169,157,0.28);
  color: var(--cj-teal-mid); font-size: 14px;
}
.ct-ticker-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-ticker-val-row { display: flex; align-items: baseline; gap: 6px; }
/* Type here was sized down tight to fit the strip; the icon and row heights
   have enough slack to carry a couple more pixels on each, which buys real
   legibility without the strip growing. Same in both themes. */
.ct-ticker-label { color: rgba(232,241,244,0.5); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.055em; display: flex; align-items: center; gap: 4px; }
.ct-ticker-label i { font-size: 12px; color: var(--cj-teal-mid); }
.ct-ticker-val   {
  color: #FFFFFF; font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.ct-ticker-chg   { font-weight: 700; font-size: 12.5px; }
.ct-ticker-sep   { width: 1px; height: 28px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.ct-ticker-spark { display: flex; align-items: center; line-height: 0; flex-shrink: 0; }
.ct-ticker-area-empty { opacity: 0.6; }
.ct-ticker-sep-live { margin-left: auto; }
.ct-ticker-live  { display: flex; align-items: center; gap: 6px; }
.ct-ticker-live .ct-live-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cj-teal-mid); box-shadow: 0 0 8px rgba(0,169,157,0.8); animation: ct-breathe 2.4s ease-in-out infinite; }
.ct-ticker-live .ct-ticker-label { color: var(--cj-teal-mid); font-weight: 700; }
/* Collapse/dropdown wrapper markup exists everywhere, but only does
   anything on mobile once docked inside the hero (.ct-ticker-in-hero,
   see the MOBILE block below). Elsewhere .ct-ticker-inner stays
   display:contents so it's invisible to layout — desktop and tablet
   render the ticker exactly as if this wrapper weren't there — and the
   toggle tab button stays hidden. */
.ct-ticker-inner { display: contents; }
.ct-ticker-toggle { display: none; }

/* ── Filters ── */
.ct-filters { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.ct-fbtn {
  font-size: 12px; padding: 6px 14px; border-radius: 30px;
  border: 1.5px solid var(--cj-border-mid); background: var(--cj-card-bg);
  color: var(--cj-text-mid); cursor: pointer; font-family: inherit;
  font-weight: 500; transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.ct-fbtn i { font-size: 13px; }
.ct-fbtn:hover  { border-color: var(--cj-teal); color: var(--cj-teal-dark); background: var(--cj-teal-light); }
.ct-fbtn.active { background: var(--cj-teal); color: #fff; border-color: var(--cj-teal); box-shadow: 0 2px 10px rgba(0,169,157,0.3); }

.ct-arc-controls { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.ct-arc-label    { font-size: 11px; color: var(--cj-text-soft); white-space: nowrap; }
.ct-abtn {
  font-size: 11px; padding: 5px 10px; border-radius: 20px;
  border: 1px solid var(--cj-border-mid); background: transparent;
  color: var(--cj-text-soft); cursor: pointer; font-family: inherit; transition: all .15s;
}
.ct-abtn:hover  { background: var(--cj-teal-light); color: var(--cj-teal-dark); }
.ct-abtn.active { background: var(--cj-accent-dark); color: #fff; border-color: var(--cj-accent-dark); }

/* ── Map wrapper — position:relative so detail panel can anchor to it ── */
.ct-map-wrap {
  position: relative;
  border-radius: var(--cj-radius-lg);
  overflow: hidden;
  background: #C2DCF0;
  box-shadow: var(--cj-shadow-lg);
  margin-bottom: 10px;
}
#ct-map { width: 100%; display: block; }

.ct-map-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: rgba(13,43,62,0.55);
  background: rgba(255,255,255,0.75); padding: 4px 12px;
  border-radius: 20px; pointer-events: none; white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* ── Tooltip ── */
#ct-tip {
  position: absolute; pointer-events: none; display: none;
  background: var(--cj-accent-dark); border-radius: var(--cj-radius);
  padding: 12px 15px; font-size: 12px; color: #fff;
  z-index: 15; min-width: 190px; max-width: 240px;
  box-shadow: 0 10px 32px rgba(13,43,62,0.38), 0 0 0 1px rgba(255,255,255,0.06);
}
.ct-tip-row1 { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ct-tip-flag { font-size: 18px; }
.ct-tip-name { font-weight: 600; font-size: 13px; }
.ct-tip-rank { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.ct-tip-amount { font-size: 18px; font-weight: 700; color: var(--cj-teal-mid); margin-bottom: 6px; }
.ct-tip-bar-bg { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); margin-bottom: 8px; overflow: hidden; }
.ct-tip-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,#00A99D,#4DC9C2); }
.ct-tip-meta   { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.ct-tip-row2 { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); }
.ct-tip-row2-val { color: #fff; font-weight: 600; }

/* ── Loading ── */
#ct-loading {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #C8E8F4 0%, #B0D8E8 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; z-index: 20; border-radius: var(--cj-radius-lg);
}
.ct-spinner-ring {
  width: 44px; height: 44px;
  border: 3px solid rgba(0,169,157,0.2);
  border-top-color: var(--cj-teal);
  border-radius: 50%; animation: ct-spin 0.9s linear infinite;
}
#ct-loading-msg { font-size: 13px; color: var(--cj-navy); font-weight: 500; }

/* ── Country detail panel — dark glass overlay inside the map ── */
#ct-detail {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(320px, calc(100% - 24px));
  background: rgba(10,32,48,0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,169,157,0.35);
  border-radius: var(--cj-radius-lg);
  padding: 14px;
  z-index: 18;
  color: #fff;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  scrollbar-width: none;
}
#ct-detail::-webkit-scrollbar { display: none; }
#ct-detail::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cj-teal), var(--cj-teal-mid));
  border-radius: var(--cj-radius-lg) var(--cj-radius-lg) 0 0;
}

.ct-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ct-detail-flag-name { display: flex; align-items: center; gap: 10px; }
.ct-det-flag  { font-size: 26px; line-height: 1; }
.ct-det-name  { font-size: 15px; font-weight: 700; color: #fff; }
.ct-det-cause { font-size: 11px; color: var(--cj-teal-mid); font-weight: 500; margin-top: 2px; }
.ct-close-btn {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,169,157,0.4); background: rgba(0,169,157,0.15);
  color: rgba(255,255,255,0.7); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all .15s;
}
.ct-close-btn:hover { background: var(--cj-teal); color: #fff; border-color: var(--cj-teal); }

.ct-det-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 12px; }
.ct-det-card {
  background: rgba(0,169,157,0.12); border-radius: 8px;
  padding: 9px 10px; border: 1px solid rgba(0,169,157,0.2);
}
.ct-det-card-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.45); margin-bottom: 4px; }
.ct-det-card-val   { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }

.ct-det-cols { display: grid; grid-template-columns: 65fr 55fr; gap: 12px; }
.ct-col-lbl  { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }

.ct-sec-row { margin-bottom: 7px; }
.ct-sec-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.7); margin-bottom: 3px; }
.ct-bar-bg  { height: 4px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.ct-bar-fill { height: 100%; border-radius: 3px; }

.ct-rec-row { display: flex; align-items: flex-start; justify-content: space-between; font-size: 11px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); gap: 6px; }
.ct-rec-row:last-child { border-bottom: none; }
.ct-rec-amount { font-weight: 700; color: var(--cj-teal-mid); flex-shrink: 0; }

.ct-insight {
  font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.6;
  padding: 9px 11px; background: rgba(0,169,157,0.1);
  border-radius: 8px; margin-top: 10px;
  border-left: 2px solid var(--cj-teal);
}

/* ── Legend ── */
.ct-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ct-legend-scale, .ct-legend-arc, .ct-legend-nodata { display: flex; align-items: center; gap: 4px; }
.ct-legend-text { font-size: 11px; color: var(--cj-text-soft); }
.ct-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ── Donor section ── */
.ct-donor-section {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); overflow: hidden;
  margin-bottom: 20px; box-shadow: var(--cj-shadow);
}
.ct-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 14px; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--cj-border);
}
.ct-section-title { font-size: 16px; font-weight: 700; color: var(--cj-navy); display: flex; align-items: center; gap: 8px; margin: 0; line-height: 1.3; }
.ct-title-icon { font-size: 15px; color: var(--cj-teal); }
.ct-section-sub   { font-size: 12px; color: var(--cj-text-soft); margin-top: 3px; }

.ct-donor-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ct-period-toggle { display: flex; gap: 2px; background: var(--cj-toggle-bg); border-radius: 8px; padding: 2px; }
.ct-pbtn {
  font-size: 11px; padding: 5px 12px; border-radius: 6px;
  border: none; background: transparent;
  color: var(--cj-text-soft); cursor: pointer; font-family: inherit;
  font-weight: 600; transition: all .15s; white-space: nowrap;
}
.ct-pbtn:hover  { color: var(--cj-navy); }
.ct-pbtn.active { background: var(--cj-accent-dark); color: #fff; box-shadow: 0 1px 3px rgba(13,43,62,0.25); }

.ct-donor-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.ct-dfbtn {
  font-size: 11px; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--cj-border-mid); background: transparent;
  color: var(--cj-text-soft); cursor: pointer; font-family: inherit;
  font-weight: 500; transition: all .15s; white-space: nowrap;
}
.ct-dfbtn:hover  { background: var(--cj-teal-light); color: var(--cj-teal-dark); border-color: var(--cj-teal); }
.ct-dfbtn.active { background: var(--cj-teal); color: #fff; border-color: var(--cj-teal); }

/* ── Live donation feed ── */
.ct-feed-row { display: flex; gap: 20px; margin-bottom: 20px; align-items: stretch; }
.ct-live-section {
  flex: 0 0 65%; max-width: 65%;
  background: linear-gradient(160deg,#0B1A22,#0F2530);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow-lg);
  padding: 18px 20px 8px; color: #fff; display: flex; flex-direction: column;
}
.ct-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ct-live-head .ct-section-title { color: #fff; }
.ct-live-head .ct-section-sub   { color: rgba(255,255,255,0.4); }
.ct-live-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cj-teal); background: rgba(0,169,157,0.14);
  border: 1px solid rgba(0,169,157,0.3); border-radius: 20px; padding: 4px 10px;
  flex-shrink: 0;
}
.ct-live-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cj-teal); animation: ct-breathe 2.4s ease-in-out infinite; }

/* ── Giving by cause (live stacked-area chart) ── */
.ct-cause-section {
  background: linear-gradient(160deg,#0B1A22,#0F2530);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--cj-radius-lg);
  /* Fixed, theme-independent shadow — this card is always dark-styled
     regardless of the site's light/dark toggle, so it needs the "dark
     surroundings" shadow treatment always, not var(--cj-shadow-lg), which
     drops to a much fainter navy tint in light mode and made the whole
     card look flat/washed-out against a light page. */
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  padding: 18px 22px 20px; margin-bottom: 20px; color: #fff;
}
/* A permanently-dark card against a light page reads as flat/plain with
   just the faint 8%-white border above — a touch more definition (a
   teal-tinted edge plus a soft inset top highlight, like glass catching
   light) makes it feel like a deliberately-styled panel rather than a
   dark rectangle dropped onto the page. Dark mode already has enough
   contrast from its own dark surroundings, so this only applies in light
   mode. */
#ct-app:not([data-theme="dark"]) .ct-cause-section {
  border: 1px solid rgba(0,169,157,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(13,43,62,0.05),
    0 26px 52px -26px rgba(13,43,62,0.38);
}
.ct-cause-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-cause-head .ct-section-title { color: #fff; }
.ct-cause-head .ct-section-sub   { color: rgba(255,255,255,0.4); }
.ct-cause-head-right { display: flex; align-items: center; gap: 10px; }
.ct-cause-period-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.09); border-radius: 8px; padding: 2px; flex-shrink: 0; }
.ct-cause-period-toggle .ct-tbtn { min-width: 26px; }
.ct-org-chart-toggles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
#ct-org-metric-toggle .ct-tbtn { min-width: unset; padding: 0 10px; font-size: 11px; }
.ct-cause-chart-wrap { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.ct-cause-chart { width: 100%; line-height: 0; cursor: crosshair; }
.ct-cause-svg { width: 100%; height: 240px; display: block; overflow: visible; }
.ct-cause-axis-label {
  font-size: 9.5px; fill: rgba(255,255,255,0.4); font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
}
.ct-cause-axis-label-x { text-anchor: middle; }
.ct-cause-chart-empty {
  height: 180px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); font-size: 13px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 10px;
}
.ct-cause-tooltip {
  position: absolute; top: 10px; z-index: 5; min-width: 130px; pointer-events: none;
  background: rgba(6,16,22,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 8px 10px; box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.ct-cause-tooltip-date  { font-size: 10.5px; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.ct-cause-tooltip-total {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px;
}
.ct-cause-tooltip-row { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.7); padding: 1.5px 0; }
.ct-cause-tooltip-val {
  margin-left: auto; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  color: #fff; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ct-cause-reset-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  background: rgba(0,169,157,0.16); border: 1px solid rgba(0,169,157,0.35); color: var(--cj-teal-mid);
  border-radius: 20px; padding: 4px 10px; cursor: pointer;
}
.ct-cause-reset-zoom:hover { background: rgba(0,169,157,0.28); }
.ct-cause-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); }
.ct-cause-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,0.7); }
.ct-cause-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.ct-cause-legend-pct {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.ct-cause-legend-empty { color: rgba(255,255,255,0.4); font-size: 12.5px; }

.ct-live-list {
  display: flex; flex-direction: column; flex: 1; overflow-y: auto; max-height: 380px;
  padding-right: 12px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.ct-live-list::-webkit-scrollbar { width: 5px; }
.ct-live-list::-webkit-scrollbar-track { background: transparent; }
.ct-live-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.ct-live-list::-webkit-scrollbar-thumb:hover { background: rgba(0,169,157,0.4); }
.ct-live-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background .15s;
}
.ct-live-list .ct-live-row:last-child { border-bottom: none; }
.ct-live-row:hover { background: rgba(255,255,255,0.03); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.ct-live-fresh { position: relative; }
.ct-live-fresh::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 55%; border-radius: 2px; background: var(--cj-teal);
}
.ct-live-time-col {
  font-size: 10.5px; color: rgba(255,255,255,0.4); white-space: nowrap; flex-shrink: 0;
  width: 52px; display: flex; align-items: center; gap: 4px;
}
.ct-live-body { flex: 1; min-width: 0; }
.ct-live-flow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ct-live-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-live-tags { margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.ct-live-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.ct-live-recipient-inline {
  font-size: 13px; color: rgba(255,255,255,0.5); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
  display: inline-flex; align-items: center; gap: 3px;
}
.ct-live-recipient-inline i { font-size: 10px; color: rgba(255,255,255,0.35); flex-shrink: 0; }
/* The highlight sentence — "to feed 5 million people in third world
   countries" — used to live only in a title attribute, which meant it was
   invisible on every touchscreen (no hover) and invisible to search engines
   (title text isn't page content). It now sits on the row's second line
   beside the cause pill, where the recipient used to be before that moved up
   to the donor's line.

   One line, clipped with an ellipsis: the feed is a fixed-height scroll
   panel, so rows have to stay predictable. The full sentence is still in the
   DOM (and in the title, for a hover tooltip on desktop), so nothing is lost
   to a crawler — only to the visible width. */
.ct-live-highlight {
  font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto;
}
#ct-app:not([data-theme="dark"]) .ct-live-highlight { color: var(--cj-text-mid); }
/* The donor name no longer needs the whole line to itself; cap it so a long
   org name can't push the recipient off the row entirely. */
.ct-live-flow .ct-live-name { flex: 0 1 auto; max-width: 58%; }
.ct-live-amt  { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; }
.ct-live-amt .ct-amt-short { display: none; }
.ct-live-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: var(--cj-teal); animation: ct-breathe 2.4s ease-in-out infinite; flex-shrink: 0; }
.ct-live-empty { padding: 20px 2px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px; }

/* ── Today's top inflows ── */
.ct-today-section {
  flex: 0 0 35%; max-width: 35%;
  background: linear-gradient(135deg,#0D2B3E,#123A52);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow-lg);
  padding: 18px 20px 20px; color: #fff; display: flex; flex-direction: column;
}
.ct-today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-today-head .ct-section-title { color: #fff; }
.ct-today-head .ct-section-sub   { color: rgba(255,255,255,0.55); }
.ct-today-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.09); border-radius: 8px; padding: 2px; flex-shrink: 0; }
.ct-tbtn {
  font-size: 11px; padding: 5px 13px; border-radius: 6px;
  border: none; background: transparent;
  color: rgba(255,255,255,0.55); cursor: pointer; font-family: inherit;
  font-weight: 600; transition: all .15s; white-space: nowrap;
}
.ct-tbtn:hover  { color: #fff; }
.ct-tbtn.active { background: #fff; color: var(--cj-accent-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

.ct-today-list {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; max-height: 430px;
  padding-right: 12px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.ct-today-list::-webkit-scrollbar { width: 5px; }
.ct-today-list::-webkit-scrollbar-track { background: transparent; }
.ct-today-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.ct-today-list::-webkit-scrollbar-thumb:hover { background: rgba(0,169,157,0.4); }
.ct-today-bar-row { display: flex; align-items: center; gap: 11px; }
.ct-today-bar-body { flex: 1; min-width: 0; }
.ct-today-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ct-today-bar-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-today-bar-amt  { font-size: 13px; font-weight: 700; color: #4DC9C2; white-space: nowrap; flex-shrink: 0; }
.ct-today-bar-amt .ct-amt-short { display: none; }
.ct-today-bar-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.ct-today-bar-fill  { height: 100%; border-radius: 3px; background: linear-gradient(90deg,#00A99D,#4DC9C2); }
.ct-today-bar-meta  { font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-today-empty { font-size: 12px; color: rgba(255,255,255,0.5); padding: 10px 2px; }

.ct-donor-thead {
  display: grid;
  grid-template-columns: 40px minmax(200px,2.2fr) 100px 130px 110px 84px 116px;
  padding: 10px 20px;
  background: var(--cj-hover-bg); border-bottom: 1px solid var(--cj-border);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cj-text-soft);
  position: sticky; top: 0; z-index: 2;
}
.ct-th-amount, .ct-th-wow { text-align: right; }
.ct-th-spark { text-align: right; }
.ct-donor-row {
  display: grid;
  grid-template-columns: 40px minmax(200px,2.2fr) 100px 130px 110px 84px 116px;
  padding: 10px 20px; border-bottom: 1px solid var(--cj-border);
  align-items: center; transition: background .1s; cursor: default;
  font-variant-numeric: tabular-nums;
}
.ct-donor-row:last-child { border-bottom: none; }
.ct-donor-row:hover { background: var(--cj-hover-bg); }

.ct-donor-rank-cell { display: flex; align-items: center; gap: 4px; }
.ct-rank-num  { font-size: 13px; font-weight: 700; color: var(--cj-text-soft); min-width: 18px; }
.ct-rank-move { font-size: 8px; font-weight: 700; line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ct-rank-up   { color: var(--cj-up); }
.ct-rank-down { color: var(--cj-down); }
.ct-rank-same { color: var(--cj-text-soft); font-size: 11px; }

.ct-donor-name-cell { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.ct-donor-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; letter-spacing: -0.02em;
  position: relative; overflow: hidden;
}
.ct-donor-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  background: #fff;
}
.ct-avatar-fallback {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.ct-donor-name-inner { display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
.ct-donor-name-row   { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ct-donor-name      { font-size: 13px; font-weight: 700; color: var(--cj-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-donor-badges    { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.ct-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.ct-badge-new      { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.ct-badge-country  { background: var(--cj-teal-light); color: var(--cj-teal-dark); border: 1px solid var(--cj-border-mid); }

/* Category chip — one consistent style for every value, since the list is
   admin-managed and open-ended (renamed or created from inside the plugin,
   not hardcoded here). Per-value colors would need a CSS update every time a
   category is added or renamed, which defeats the point of making it
   editable in the first place. The Donor/Service-organization badge that
   used to sit next to this was retired from the frontend entirely — it still
   drives which card leads the profile and which leaderboard the rank chip
   pulls from, just without a visible chip of its own. */
.ct-type-chip {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  white-space: nowrap; display: inline-block; text-transform: uppercase; letter-spacing: 0.04em;
  background: #F1F5F9; color: #334155;
}

.ct-cause-pill { font-size: 12px; color: var(--cj-text-mid); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-donor-region { font-size: 12px; color: var(--cj-text-soft); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-donor-amount { font-size: 13px; font-weight: 700; color: var(--cj-navy); white-space: nowrap; text-align: right; }
.ct-wow-cell { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ct-spark-cell { display: flex; align-items: center; justify-content: flex-end; }
.ct-spark { display: block; }
.ct-spark-empty { opacity: 0.7; }
.ct-donor-row-top { display: flex; align-items: center; gap: 10px; }
.ct-donor-row-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-wow-up   { font-size: 12px; font-weight: 700; color: var(--cj-up); }
.ct-wow-down { font-size: 12px; font-weight: 700; color: var(--cj-down); }
.ct-donor-empty { padding: 36px 20px; text-align: center; color: var(--cj-text-soft); font-size: 14px; }

/* ── Load more (top organizations) ── */
.ct-donor-loadmore-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--cj-border);
}
.ct-donor-count { font-size: 12px; color: var(--cj-text-soft); }
.ct-donor-loadmore-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  padding: 9px 18px; border-radius: 20px;
  background: var(--cj-teal-light); color: var(--cj-teal-dark);
  border: 1px solid var(--cj-border-mid); transition: all .15s;
}
.ct-donor-loadmore-btn:hover { background: var(--cj-teal); color: #fff; border-color: var(--cj-teal); }
.ct-donor-loadmore-btn:active { transform: translateY(1px); }
@media (max-width: 700px) {
  .ct-donor-loadmore-wrap { justify-content: center; text-align: center; }
  .ct-donor-loadmore-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── Leaderboard ── */
.ct-lb-section {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); padding: 20px;
  box-shadow: var(--cj-shadow); margin-bottom: 20px;
}
.ct-lb-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.ct-lb-card {
  background: var(--cj-card-bg); border-radius: var(--cj-radius);
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--cj-border); transition: all .15s;
}
.ct-lb-card:hover { background: var(--cj-teal-light); border-color: var(--cj-teal); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,169,157,0.1); }
.ct-lb-top  { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.ct-lb-rank { font-size: 12px; font-weight: 700; color: var(--cj-teal); min-width: 16px; }
.ct-lb-rank-top {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cj-teal); color: #fff; font-size: 10px; min-width: 18px;
}
.ct-lb-flag { font-size: 15px; }
.ct-lb-name { font-size: 12px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cj-navy); }
.ct-lb-amt  { font-size: 12px; color: var(--cj-teal-dark); font-weight: 700; }
.ct-lb-bar-bg   { height: 3px; background: rgba(0,169,157,0.1); border-radius: 2px; overflow: hidden; }
.ct-lb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cj-teal), var(--cj-teal-dark)); border-radius: 2px; }

/* ── Arc animation ── */
.ct-arc { stroke-dasharray: 5 9; animation: ct-dash 2s linear infinite; }

@keyframes ct-pulse   { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes ct-breathe { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.5} }
@keyframes ct-spin    { to { transform: rotate(360deg); } }
@keyframes ct-dash    { to { stroke-dashoffset: -28; } }

/* ── MOBILE ── */
@media (max-width: 700px) {
  /* Hero — trimmed down but only about half as aggressively as before, so
     there's still breathing room; the jump-link nav stays removed. */
  .ct-hero { padding: 5px 10px 9px; border-radius: 12px; gap: 0; margin-bottom: 16px; }

  /* Title/subtitle — bumped a notch and given real contrast (dark text-
     shadow to lift them off the photo backdrop, higher-opacity subtitle
     colour) rather than just being small and semi-transparent. The extra
     line-height/size is paid for by trimming the topbar's negative margin
     and the subtitle's top margin, so the hero's total height doesn't grow. */
  /* Line-height pulled in and the topbar's negative margin deepened, which
     together reclaim roughly the row the H1 now occupies — so the hero ends
     up the height it was before the heading existed. */
  .ct-title {
    font-size: 17px; line-height: 1.12; font-weight: 800;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  }
  .ct-subtitle {
    font-size: 12px; font-weight: 500; margin-top: 2px; max-width: 100%; line-height: 1.25;
    color: rgba(240,247,248,0.82);
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  }
  .ct-hero-topbar { margin-bottom: -13px; }
  .ct-live-amt .ct-amt-full, .ct-today-bar-amt .ct-amt-full { display: none; }
  .ct-live-amt .ct-amt-short, .ct-today-bar-amt .ct-amt-short { display: inline; }
  .ct-live-label { font-size: 9.5px; padding: 1.5px 7px; }
  .ct-theme-toggle { width: 25px; height: 25px; font-size: 12px; }

  /* Data/Activity toggle — same pill size as before, just more legible:
     higher-contrast inactive-state colour and a touch more letter-spacing
     instead of a bigger hit area. */
  .ct-vbtn span, .ct-vbtn {
    font-size: 11px; font-weight: 800; letter-spacing: 0.01em;
    padding: 6px 10px; color: rgba(255,255,255,0.72);
  }
  .ct-vbtn i { font-size: 13px; }
  .ct-vbtn.active { color: #fff; }

  /* Metric cards, Data view (#ct-hero-stats-data) — the real win for
     shrinking the Data hero isn't smaller type, it's dropping the second
     row entirely: the 4 cards go from a 2×2 grid to a single horizontally
     swipeable row (CoinMarketCap-ticker style), with the next card peeking
     in from the edge as a scroll affordance. That alone removes almost a
     full row's worth of height from the hero. */
  .ct-hero-stats {
    display: flex; flex-wrap: nowrap; width: 100%; max-width: none;
    gap: 8px; margin: 0 -10px; padding: 0 10px 3px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 91%, transparent 100%);
    mask-image: linear-gradient(to right, #000 91%, transparent 100%);
  }
  .ct-hero-stats::-webkit-scrollbar { display: none; }
  .ct-stat-card { flex: 0 0 23%; scroll-snap-align: start; padding: 8px 10px; border-radius: 9.5px; }
  .ct-stat-card-label { font-size: 9.5px; margin-bottom: 4px; gap: 4px; }
  .ct-stat-card-label i { font-size: 12px; }
  .ct-stat-card-row { gap: 8px; justify-content: flex-start; }
  .ct-cause-section { padding: 16px 14px 16px; }
  .ct-cause-svg { height: 150px; }
  .ct-stat-card-val { font-size: 16px; }
  /* Trend sparkline is back — with the cards now in a single horizontal
     row instead of a 2×2 grid, there's spare width (not height) per card
     to show it again, so it doesn't push the hero taller. */
  .ct-stat-card-spark { max-width: 42px; min-width: 22px; }
  .ct-stat-card-spark svg { height: 16px; }
  .ct-stat-card-change { font-size: 9.5px; margin-top: 3px; }
  .ct-green { font-size: 16px !important; }

  /* Ticker bar — default (undocked, JS-off) mobile styling. Once JS parks
     it inside the hero it switches to .ct-ticker-in-hero below instead. */
  .ct-ticker { padding: 12px 14px; gap: 12px; }
  .ct-ticker-item { flex: 1 1 42%; }
  .ct-ticker-sep { display: none; }
  .ct-ticker-sep-live { margin-left: 0; width: 100%; height: 0; display: block; }

  /* ── Ticker docked inside the hero (see ct-script.js initMobileTickerDock)
     — collapsed into a single tappable tab by default. Tapping it toggles
     .is-open, which expands .ct-ticker-inner (display:contents the rest of
     the time, so desktop/tablet are completely unaffected by it existing
     in the markup) into the full metrics row. ── */
  .ct-ticker.ct-ticker-in-hero {
    position: relative; z-index: 3;
    display: block;
    margin: 0; margin-top: 8px;
    padding: 0; gap: 0;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
  }
  .ct-ticker-in-hero .ct-ticker-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 8px 10px; color: #FFFFFF;
  }
  .ct-ticker-in-hero .ct-ticker-toggle { padding: 7px 10px; }
  .ct-ticker-toggle-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 700; color: rgba(232,241,244,0.75);
    line-height: 1;
  }
  .ct-ticker-toggle-label i { font-size: 13px; color: var(--cj-teal-mid); }
  .ct-ticker-toggle-chevron { font-size: 13px; color: rgba(232,241,244,0.5); transition: transform .2s ease; }
  .ct-ticker-in-hero.is-open .ct-ticker-toggle-chevron { transform: rotate(180deg); color: var(--cj-teal-mid); }
  .ct-ticker-in-hero .ct-ticker-inner {
    display: flex; flex-wrap: wrap; gap: 11px 10px;
    max-height: 0; opacity: 0; overflow: hidden;
    padding: 0 12px; transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
  }
  /* Opened, the six figures were packed corner to corner. Real row gaps, a
     hairline under the tab and honest padding give them room to read as
     six separate metrics. */
  .ct-ticker-in-hero.is-open .ct-ticker-inner {
    max-height: 340px; opacity: 1; padding: 11px 12px 13px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .ct-ticker-in-hero .ct-ticker-item { flex: 1 1 30%; gap: 5px; }
  /* Icons are dropped once docked. That frees ~25px of width per item,
     which is what pays for the larger figures below — the row still fits
     three across without wrapping. Label and value line-heights are
     pinned and the body gap removed so the type can grow by a third
     while each row stays the same height it was before. */
  .ct-ticker-in-hero .ct-ticker-icon { display: none; }
  .ct-ticker-in-hero .ct-ticker-body { gap: 1px; }
  .ct-ticker-in-hero .ct-ticker-label { font-size: 8.5px; gap: 3px; line-height: 1; letter-spacing: 0.03em; }
  .ct-ticker-in-hero .ct-ticker-label i { font-size: 9px; }
  .ct-ticker-in-hero .ct-ticker-val { font-size: 14.5px; line-height: 1.05; }
  .ct-ticker-in-hero .ct-ticker-chg { font-size: 9.5px; line-height: 1; }
  .ct-ticker-in-hero .ct-ticker-sep { display: none; }
  .ct-ticker-in-hero .ct-ticker-sep-live { display: none; }
  .ct-ticker-in-hero .ct-ticker-live { display: none; }

  /* Light mode: the docked tab inherited the dark hero's near-white text,
     which left "24h volume & more" invisible against the white hero. Give
     it a tinted surface and dark type of its own. */
  #ct-app:not([data-theme="dark"]) .ct-ticker.ct-ticker-in-hero {
    background: var(--cj-teal-light);
    border-color: var(--cj-border-mid);
    box-shadow: none;
  }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-toggle { color: var(--cj-navy); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-toggle-label { color: var(--cj-navy); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-toggle-label i { color: var(--cj-teal-dark); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-toggle-chevron { color: var(--cj-text-soft); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero.is-open .ct-ticker-toggle-chevron { color: var(--cj-teal-dark); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-label { color: var(--cj-text-mid); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-label i { color: var(--cj-teal-dark); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero .ct-ticker-val { color: var(--cj-navy); }
  #ct-app:not([data-theme="dark"]) .ct-ticker-in-hero.is-open .ct-ticker-inner { border-top-color: var(--cj-border-mid); }

  .ct-filters { gap: 5px; }
  .ct-fbtn { font-size: 11px; padding: 5px 10px; }
  .ct-arc-controls { margin-left: 0; width: 100%; }
  .ct-map-hint { display: none; }
  /* Top organizations table stays a real grid table on mobile — it just
     scrolls horizontally inside .ct-table-scroll (see rule near the
     Impact ranking table below) instead of reflowing into stacked cards. */
  .ct-det-cols  { grid-template-columns: 1fr; }
  .ct-det-stats { grid-template-columns: repeat(2,1fr); }
  .ct-lb-grid   { grid-template-columns: 1fr; }
  .ct-section-header { flex-direction: column; }
  .ct-donor-filters  { width: 100%; }
  .ct-donor-controls { width: 100%; flex-direction: column; align-items: stretch; }
  .ct-period-toggle  { width: 100%; }
  .ct-period-toggle .ct-pbtn { flex: 1; }
  .ct-today-head { flex-direction: column; align-items: stretch; }
  .ct-today-toggle { align-self: flex-start; }
  .ct-feed-row { flex-direction: column; }
  .ct-live-section, .ct-today-section { flex: 0 0 100%; max-width: 100%; }
  .ct-live-row { align-items: flex-start; }
  .ct-live-flow { flex-wrap: wrap; }
  /* On mobile, detail panel goes full width at top of map */
  #ct-detail { width: calc(100% - 16px); top: 8px; right: 8px; }
}

@media (max-width: 480px) {
  .ct-hero-stats { gap: 6px; }
  .ct-stat-card { flex: 0 0 37%; }
  .ct-stat-card-val { font-size: 15px; }
  .ct-ticker-in-hero .ct-ticker-item { flex: 1 1 45%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACTIVITY VIEW — Data/Activity hero toggle + activity feed, heatmap, ranking
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero top-right group + Data/Activity segmented toggle ── */
.ct-topbar-right { display: flex; align-items: center; gap: 10px; }
.ct-view-toggle {
  display: flex; gap: 3px; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 4px;
}
.ct-vbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  padding: 8px 18px; border-radius: 20px; border: none; cursor: pointer;
  background: transparent; color: rgba(232,241,244,0.55); transition: all .15s;
  white-space: nowrap;
}
.ct-vbtn i { font-size: 15px; }
.ct-vbtn:hover  { color: #fff; }
.ct-vbtn.active { background: var(--cj-teal); color: #fff; box-shadow: 0 2px 10px rgba(0,169,157,0.45); }
/* Below 480px the 700px block above (11px, bold, higher-contrast) still
   applies — kept as-is here so the toggle stays legible right down to the
   smallest phones instead of shrinking further. */

/* ── Floating Data/Activity toggle (shows once the hero scrolls off) ──
   Fixed to the viewport, not the hero, so it survives the hero's
   overflow:hidden and stays reachable no matter how far the user scrolls. */
.ct-sticky-toggle {
  position: fixed;
  top: 14px; left: 50%;
  transform: translate(-50%, -18px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  background: rgba(13,35,49,0.88);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  padding: 4px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -8px rgba(0,10,15,0.55);
}
.ct-sticky-toggle.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.ct-sticky-toggle .ct-view-toggle {
  background: transparent; border: none; padding: 0;
}
/* The floating toggle's pill background is always dark (rgba(13,35,49,0.88)),
   regardless of site theme. But the light-mode rule above sets .ct-vbtn's
   text to var(--cj-navy) (#0D2B3E) — nearly the same dark color — so the
   inactive label (e.g. "Activity") disappears once you scroll past the hero
   in light mode. Force the light-on-dark colors here so it stays legible. */
#ct-app:not([data-theme="dark"]) .ct-sticky-toggle .ct-vbtn {
  color: rgba(232,241,244,0.55);
}
#ct-app:not([data-theme="dark"]) .ct-sticky-toggle .ct-vbtn:hover {
  color: #fff;
}
#ct-app:not([data-theme="dark"]) .ct-sticky-toggle .ct-vbtn.active {
  color: #fff;
}
/* WordPress admin bar offset, so the floating toggle doesn't sit under it */
body.admin-bar .ct-sticky-toggle { top: 46px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ct-sticky-toggle { top: 60px; }
}
@media (max-width: 480px) {
  .ct-sticky-toggle { left: auto; right: 14px; transform: translateY(-18px); }
  .ct-sticky-toggle.is-visible { transform: translateY(0); }
}

/* ── Compact hero for the Activity view — ~45% shorter than the Data hero
   so the live feed sits closer to the top of the page. ── */
.ct-hero.ct-hero-compact {
  gap: 12px; padding: 14px 15px 13px;
  border-color: rgba(0,169,157,0.14);
  box-shadow: 0 10px 30px -16px rgba(0,10,15,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
}
.ct-hero.ct-hero-compact .ct-hero-topbar { margin-bottom: 0; }
.ct-hero.ct-hero-compact .ct-title { font-size: clamp(19px, 2.15vw, 26px); }
.ct-hero.ct-hero-compact .ct-subtitle { margin-top: 4px; }
@media (min-width: 701px) { .ct-hero.ct-hero-compact .ct-subtitle { margin-top: 0; } }

/* ── Live activity feed (full-width dark card, mirrors data-view live feed) ── */
.ct-act-feed-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-act-count-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px; padding: 4px 12px; white-space: nowrap;
}
.ct-act-count-badge i { color: var(--cj-teal-mid); font-size: 12px; }
.ct-act-count-badge span { color: #fff; font-variant-numeric: tabular-nums; }

/* Icon-only search trigger — replaces the "Live" badge slot */
.ct-act-search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65); cursor: pointer; transition: all .15s; font-size: 13px;
}
.ct-act-search-toggle:hover { color: #fff; background: rgba(255,255,255,0.14); }
.ct-act-search-toggle.active { color: #fff; background: var(--cj-teal); border-color: var(--cj-teal); box-shadow: 0 2px 10px rgba(0,169,157,0.4); }

/* Live feed + weekly leaderboard side by side */
.ct-act-split {
  display: grid; grid-template-columns: 70fr 30fr; gap: 20px;
  margin-bottom: 20px;
}
.ct-act-feed-section {
  background: linear-gradient(160deg,#0B1A22,#0F2530);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow-lg);
  padding: 18px 20px 12px; color: #fff;
  height: 460px; display: flex; flex-direction: column;
}
/* ~5 rows visible (each row ≈ 70px), then scroll — fills remaining section height */
.ct-act-feed-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding-right: 12px; margin-right: -4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.ct-act-feed-list::-webkit-scrollbar { width: 5px; }
.ct-act-feed-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.ct-act-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background .15s;
}
.ct-act-feed-list .ct-act-row:last-child { border-bottom: none; }
.ct-act-row:hover { background: rgba(255,255,255,0.03); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.ct-act-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: rgba(0,169,157,0.16); color: var(--cj-teal-mid); border: 1px solid rgba(0,169,157,0.3);
}
.ct-act-body { flex: 1; min-width: 0; }
.ct-act-headline { font-size: 13px; line-height: 1.45; color: #fff; }
.ct-act-headline b { font-weight: 700; }
.ct-act-meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-act-time {
  font-size: 10.5px; color: rgba(255,255,255,0.4); white-space: nowrap;
  flex-shrink: 0; width: 50px; text-align: right; margin-top: 2px;
}

/* ── Weekly activity leaderboard ── */
.ct-weekly-lb-section {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #1D3E49 0%, #142B34 100%);
  border: 1px solid rgba(0,169,157,0.28);
  border-radius: var(--cj-radius-lg);
  /* Same fix as .ct-cause-section above — fixed dark-appropriate shadow
     instead of the theme-variable one, which was nearly invisible in
     light mode against this permanently-dark card. */
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  padding: 18px 20px; height: 460px; display: flex; flex-direction: column;
}
.ct-weekly-lb-section::before {
  content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(0,169,157,0.22), transparent 70%);
  pointer-events: none;
}
.ct-weekly-lb-section .ct-section-title { color: #F3FAFA; }
.ct-weekly-lb-section .ct-section-sub   { color: rgba(232,241,244,0.5); }
.ct-wlb-trend {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 6px; padding: 10px 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(0,169,157,0.18);
  border-radius: 10px; position: relative; z-index: 1;
}
.ct-wlb-spark-svg { width: 60%; height: 40px; flex-shrink: 0; }
.ct-wlb-trend-side { flex: 1; min-width: 0; text-align: right; }
.ct-wlb-trend-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(232,241,244,0.45); font-weight: 700; }
.ct-wlb-trend-ticker { font-size: 15px; font-weight: 800; margin-top: 2px; white-space: nowrap; }
.ct-wlb-trend-ticker.ct-chg-up   { color: #33E0B4; }
.ct-wlb-trend-ticker.ct-chg-down { color: #FF6B7A; }
.ct-wlb-trend-ticker.ct-chg-flat { color: rgba(232,241,244,0.45); }
/* ── THIS WEEK — aggregate stats where the weekly ranked list used to be.
   Two-up on desktop and phones alike: four cells in a row would squeeze the
   longer values ("Sub-Saharan Africa") to breaking point, and this block sits
   in the narrow column beside the live feed. */
.ct-week-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative; z-index: 1; margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden;
}
/* Dividers drawn with per-cell borders rather than a grid gap over a coloured
   backdrop: this card keeps its dark gradient in BOTH themes, so cells have to
   stay transparent and let it through. Killing the outer edges keeps the rules
   from doubling against the container border. */
.ct-week-stat {
  padding: 11px 12px; min-width: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.ct-week-stat:nth-child(-n+2) { border-top: none; }
.ct-week-stat:nth-child(odd)  { border-left: none; }
.ct-week-stat-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(232,241,244,0.45);
}
.ct-week-stat-val {
  font-size: 17px; font-weight: 800; color: #fff; margin-top: 3px;
  font-variant-numeric: tabular-nums; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-week-stat-sub {
  font-size: 10.5px; color: rgba(232,241,244,0.5); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-weekly-lb-list {
  overflow: hidden; position: relative; z-index: 1;
}
.ct-wlb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ct-wlb-row:last-child { border-bottom: none; }
.ct-wlb-rank {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
}
.ct-wlb-rank-1 { background: rgba(255,196,0,0.18); color: #FFC400; }
.ct-wlb-rank-2 { background: rgba(200,210,220,0.18); color: #C8D2DC; }
.ct-wlb-rank-3 { background: rgba(205,127,50,0.2);  color: #CD7F32; }
.ct-wlb-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #F3FAFA;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-wlb-score {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 13px; font-weight: 700; color: #33E0B4; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 780px) {
  .ct-act-split { grid-template-columns: 1fr; }
}


/* ── "On this day" — its own row now, relocated from beside Top Stories ── */
/* stretch (not flex-start) so the milestones card always matches the
   height of the chart card beside it, even on days with one fact or none
   — otherwise it stops at its content height and leaves a ragged gap. */
.ct-data-history-row { display: flex; align-items: stretch; gap: 20px; margin-bottom: 20px; }
.ct-data-history-row .ct-cause-section { flex: 0 0 65%; max-width: 65%; margin-bottom: 0; }
.ct-data-history-row .ct-milestones {
  flex: 0 0 35%; max-width: 35%; margin-bottom: 0;
  display: flex; flex-direction: column;
}
/* Push the card list into the leftover space so the card's own padding
   stays even top and bottom regardless of how many facts there are. */
.ct-data-history-row .ct-milestones-viewport,
.ct-data-history-row .ct-milestones-empty { flex: 1 1 auto; }
@media (max-width: 780px) {
  .ct-data-history-row { flex-direction: column; }
  .ct-data-history-row .ct-cause-section,
  .ct-data-history-row .ct-milestones { flex: 1 1 auto; max-width: 100%; }
}

/* ── Top Stories — full-width, big hero on the left + headline list on the
   right (modeled on the charityjournal.org front-page treatment). Both
   panes are pinned to the same fixed content height (below) so the box's
   overall height never shifts, no matter how many headlines come back. ── */
.ct-top-stories-section {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow);
  padding: 0 0 20px; overflow: hidden; margin-bottom: 20px;
}
.ct-top-stories-section .ct-section-header {
  padding: 14px 20px 12px;
}
/* The default .ct-section-sub grey is too low-contrast on this card —
   darker + semibold for legibility. */
.ct-top-stories-section .ct-section-sub {
  color: #5B7885; font-weight: 600; font-size: 12.5px;
}
.ct-top-stories-section .ct-section-title { font-weight: 800; }
.ct-top-stories-viewall {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 700; color: var(--cj-teal);
  background: rgba(0,169,157,0.10); border: 1px solid rgba(0,169,157,0.25);
  padding: 5px 12px; border-radius: 20px; white-space: nowrap;
  text-decoration: none; transition: background .15s ease;
}
.ct-top-stories-viewall:hover { background: rgba(0,169,157,0.18); }
.ct-top-stories-viewall i { font-size: 11px; }

/* The one fixed height that governs the whole widget — hero image, hero
   text column and the headline list on the right are all budgeted against
   this so the box height is constant. */
.ct-story-split { display: flex; align-items: stretch; gap: 22px; padding: 0 20px; }

/* ── Left: the big story ── */
.ct-story-hero-viewport { flex: 1.55 1 0; height: 343px; overflow: hidden; position: relative; }
.ct-story-hero-track { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.ct-story-hero-card { display: block; text-decoration: none; flex-shrink: 0; }
.ct-story-hero-media { position: relative; width: 100%; height: 260px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background-color: var(--cj-toggle-bg); }
.ct-story-hero-img { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--cj-toggle-bg); }
.ct-story-hero-img-fallback { background: linear-gradient(135deg, var(--cj-teal), #005C56); }
.ct-story-hero-cat {
  position: absolute; left: 10px; bottom: 10px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: #fff;
  background: rgba(0,0,0,0.55); padding: 4px 10px; border-radius: 20px;
}
.ct-story-hero-title {
  /* These titles live inside <a> tags, which the WordPress theme styles
     with its own display font — it overrides #ct-app's stack and made the
     headlines read in a different typeface to the rest of the tracker.
     Restating the stack here (and on .ct-story-row-title below) keeps the
     panel typographically consistent regardless of the active theme. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  /* An <h3> now (these are headlines, and the page outline should say so),
     which brings default UA margins the fixed height below can't absorb. */
  margin: 0;
  height: 47px; font-size: 18px; font-weight: 800; color: var(--cj-navy); line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; transition: color .15s ease;
}
.ct-story-hero-meta {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  display: flex; align-items: center; gap: 6px; margin-top: 8px; height: 16px;
  font-size: 12px; font-weight: 700; color: var(--cj-text-soft); text-transform: uppercase; letter-spacing: .02em;
}
.ct-story-hero-meta i { font-size: 12px; color: var(--cj-teal); }
.ct-story-hero-card:hover .ct-story-hero-title { color: var(--cj-teal); }

/* ── Right: the rest, as a compact headline list ── */
.ct-story-list {
  flex: 1 1 0; min-width: 0; height: 343px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.ct-story-row {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid var(--cj-border);
}
.ct-story-row:first-child { padding-top: 2px; }
.ct-story-row:last-child { border-bottom: none; }
.ct-story-row-cat {
  font-size: 10.5px; font-weight: 800; color: var(--cj-teal);
  text-transform: uppercase; letter-spacing: .04em;
}
.ct-story-row-title {
  /* Same theme-font override as .ct-story-hero-title above. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--cj-navy); line-height: 1.4;
  letter-spacing: -0.005em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; transition: color .15s ease;
}
.ct-story-row:hover .ct-story-row-title { color: var(--cj-teal); }

@media (max-width: 780px) {
  .ct-story-split { flex-direction: column; }
  .ct-story-hero-viewport { height: 300px !important; }
  .ct-story-list { height: auto; max-height: 260px; }
}

/* ── Activity calendar heatmap ── */
.ct-heatmap-section {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow);
  padding: 18px 20px 20px; margin-bottom: 20px;
}
.ct-heatmap-wrap { overflow-x: auto; padding: 14px 2px 4px; }

/* Compact variant — used when the heatmap sits next to the "On this day"
   panel, so the row doesn't run wider than the live feed above it. */
.ct-heatmap-compact .ct-hm-daylabels { padding-top: 24px; gap: 4px; }
.ct-heatmap-compact .ct-hm-daylabel { height: 16px; line-height: 16px; font-size: 11px; }
.ct-heatmap-compact .ct-hm-monthlabel { width: 16px; font-size: 11.5px; }
.ct-heatmap-compact .ct-heatmap-grid,
.ct-heatmap-compact .ct-hm-col,
.ct-heatmap-compact .ct-hm-layout,
.ct-heatmap-compact .ct-hm-monthlabels { gap: 4px; }
.ct-heatmap-compact .ct-hm-cell { width: 16px; height: 16px; border-radius: 4px; }

/* Layout: day-of-week labels on the left, month labels above the grid */
.ct-hm-layout { display: flex; gap: 6px; width: max-content; }
.ct-hm-daylabels { display: flex; flex-direction: column; gap: 3px; padding-top: 20px; flex-shrink: 0; }
.ct-hm-daylabel { height: 12px; line-height: 12px; font-size: 9.5px; color: var(--cj-text-soft); white-space: nowrap; }
.ct-hm-main { display: flex; flex-direction: column; }
.ct-hm-monthlabels { display: flex; gap: 3px; height: 16px; margin-bottom: 4px; }
.ct-hm-monthlabel { width: 12px; font-size: 10px; font-weight: 700; color: var(--cj-text-soft); white-space: nowrap; overflow: visible; }

.ct-heatmap-grid { display: flex; gap: 3px; width: max-content; }
.ct-hm-col { display: flex; flex-direction: column; gap: 3px; }
.ct-hm-cell {
  width: 12px; height: 12px; border-radius: 3px; background: var(--cj-toggle-bg);
  cursor: pointer; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .12s;
}
.ct-hm-cell-empty { background: transparent; cursor: default; }
.ct-hm-cell:not(.ct-hm-cell-empty):hover { outline-color: var(--cj-teal); }
.ct-hm-cell-selected { outline-color: var(--cj-navy) !important; }
.ct-hm-cell[data-level="1"] { background: #C8EDE9; }
.ct-hm-cell[data-level="2"] { background: #4DC9C2; }
.ct-hm-cell[data-level="3"] { background: #00A99D; }
.ct-hm-cell[data-level="4"] { background: #005C56; }
#ct-app[data-theme="dark"] .ct-hm-cell:not([data-level]),
#ct-app[data-theme="dark"] .ct-hm-cell[data-level="0"] { background: rgba(255,255,255,0.06); }
.ct-heatmap-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 10.5px; color: var(--cj-text-soft); margin-top: 6px; }
.ct-hm-sw { width: 11px; height: 11px; border-radius: 3px; background: var(--cj-toggle-bg); display: inline-block; }
.ct-hm-sw[data-level="1"] { background: #C8EDE9; }
.ct-hm-sw[data-level="2"] { background: #4DC9C2; }
.ct-hm-sw[data-level="3"] { background: #00A99D; }
.ct-hm-sw[data-level="4"] { background: #005C56; }

/* ── Streak badge (in heatmap section header) ── */
.ct-hm-streaks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-hm-streak-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 20px; color: var(--cj-text-soft);
  background: var(--cj-toggle-bg); border: 1px solid var(--cj-border);
}
.ct-hm-streak-badge.ct-hm-streak-on { color: #C05A00; background: rgba(255,150,0,0.12); border-color: rgba(255,150,0,0.3); }
.ct-hm-streak-badge i { font-size: 13px; }
.ct-hm-streak-sub { font-size: 11px; color: var(--cj-text-soft); }

/* ── Milestones / "On This Day In Philanthropy" panel ── */
.ct-milestones {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow);
  padding: 18px 20px 20px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.ct-milestones::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cj-teal), #C05A00, #2563EB, var(--cj-teal));
  background-size: 200% 100%; opacity: .55;
}
.ct-milestones .ct-section-header { align-items: flex-start; flex-direction: column; gap: 8px; }
.ct-milestones-date { align-self: center; }
.ct-milestones-date {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 13.5px; font-weight: 700; color: var(--cj-teal);
  background: rgba(0,169,157,0.10); border: 1px solid rgba(0,169,157,0.25);
  padding: 5px 13px; border-radius: 20px; white-space: nowrap;
}
.ct-milestones-date i { font-size: 14px; }

/* Fixed-height window that always shows exactly 3 cards. The track inside
   holds every card and quietly slides upward on a timer — no pagination,
   no dots. Card height is fixed (with 2-line text clamping) so the math
   behind the slide distance and viewport height stays exact. */
.ct-milestones-viewport {
  height: 210px; /* 3 cards × 64px + 2 gaps × 9px */
  overflow: hidden; margin-top: 14px; position: relative;
}
/* 1 or 2 milestones today — sized to just those cards instead of the
   fixed 3-card height above, so the box doesn't show a slab of empty
   space under a single card. */
.ct-milestones-viewport-auto { height: auto; overflow: visible; }
.ct-milestones-track { display: flex; flex-direction: column; gap: 9px; will-change: transform; }
.ct-milestones-empty { font-size: 12.5px; color: var(--cj-text-soft); padding: 10px 2px; margin-top: 12px; }

/* ── Frontline Watch panel — a normal light-aware card (var(--cj-card-bg)),
   unlike .ct-cause-section which is permanently dark. Every color below
   comes from a theme variable or is defined explicitly for both themes, so
   it never falls into the "dark text on dark background" trap the sticky
   toggle had. ── */
.ct-aid-section {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow);
  padding: 18px 20px 20px; margin-bottom: 20px;
}
.ct-aid-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.ct-aid-period-toggle { display: flex; gap: 2px; background: var(--cj-toggle-bg); border-radius: 8px; padding: 2px; flex-shrink: 0; }
.ct-aid-tbtn {
  border: none; background: transparent; cursor: pointer; padding: 6px 12px;
  font-size: 12px; font-weight: 600; border-radius: 7px; color: var(--cj-text-soft);
  transition: background .15s ease, color .15s ease; white-space: nowrap;
}
.ct-aid-tbtn:hover  { color: var(--cj-navy); }
#ct-app[data-theme="dark"] .ct-aid-tbtn:hover { color: #fff; }
.ct-aid-tbtn.active { background: var(--cj-teal); color: #fff; }

.ct-aid-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.ct-aid-card { border-radius: 12px; padding: 14px 16px; }
.ct-aid-card-label { font-size: 12px; font-weight: 600; line-height: 1.3; min-height: 31px; display: flex; align-items: flex-end; margin-bottom: 4px; }
.ct-aid-card-val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ct-aid-card-chg { font-size: 11.5px; font-weight: 700; margin-top: 5px; opacity: .85; }
.ct-chg-up   { color: #B23B1A; font-weight: 700; }
.ct-chg-down { color: #0E7A5F; font-weight: 700; }
.ct-chg-flat { color: var(--cj-text-soft); font-weight: 700; }

/* Light-mode card fills/text (explicit hex, not tinted off the shared navy
   var, so these stay legible regardless of what --cj-navy resolves to).
   Killed runs the deepest/most saturated red since it's the most severe
   metric; wounded and kidnapped/detained get a bit more colour than a flat
   neutral tint so all three read as distinct at a glance. */
.ct-aid-card-killed    { background: #FBDBDB; }
.ct-aid-card-killed    .ct-aid-card-label { color: #82201F; }
.ct-aid-card-killed    .ct-aid-card-val   { color: #4A0F0F; }
.ct-aid-card-wounded   { background: #FBE3B8; }
.ct-aid-card-wounded   .ct-aid-card-label { color: #6B3D05; }
.ct-aid-card-wounded   .ct-aid-card-val   { color: #422602; }
.ct-aid-card-kidnapped { background: #E4E3F6; }
.ct-aid-card-kidnapped .ct-aid-card-label { color: #3E3D73; }
.ct-aid-card-kidnapped .ct-aid-card-val   { color: #24234A; }

/* Dark-mode equivalents — same hues, dropped to a translucent tint over the
   dark card so they don't glow, with light text pulled back up for contrast. */
#ct-app[data-theme="dark"] .ct-aid-card-killed    { background: rgba(198,60,60,0.22); }
#ct-app[data-theme="dark"] .ct-aid-card-killed    .ct-aid-card-label { color: #F4B6B6; }
#ct-app[data-theme="dark"] .ct-aid-card-killed    .ct-aid-card-val   { color: #FCE2E2; }
#ct-app[data-theme="dark"] .ct-aid-card-wounded   { background: rgba(197,138,15,0.16); }
#ct-app[data-theme="dark"] .ct-aid-card-wounded   .ct-aid-card-label { color: #E9C57C; }
#ct-app[data-theme="dark"] .ct-aid-card-wounded   .ct-aid-card-val   { color: #F8E6BF; }
#ct-app[data-theme="dark"] .ct-aid-card-kidnapped { background: rgba(120,116,214,0.16); }
#ct-app[data-theme="dark"] .ct-aid-card-kidnapped .ct-aid-card-label { color: #C6C4EE; }
#ct-app[data-theme="dark"] .ct-aid-card-kidnapped .ct-aid-card-val   { color: #EBEAFB; }
#ct-app[data-theme="dark"] .ct-chg-up   { color: #F0A8A8; }
#ct-app[data-theme="dark"] .ct-chg-down { color: #5FE3BE; }

.ct-aid-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: end; }
@media (max-width: 780px) {
  .ct-aid-stats { grid-template-columns: 1fr; }
  .ct-aid-body { grid-template-columns: 1fr; }
}
.ct-aid-subhead { font-size: 12px; color: var(--cj-text-soft); margin-bottom: 8px; font-weight: 600; }

.ct-aid-trend { position: relative; }
.ct-aid-trend-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.ct-aid-bar {
  flex: 1; background: #5DCAA5; border-radius: 3px 3px 0 0; min-height: 4px;
  cursor: pointer; transition: background .12s ease, transform .12s ease; transform-origin: bottom;
}
.ct-aid-bar:hover, .ct-aid-bar-hover { background: var(--cj-teal); transform: scaleY(1.03); }
.ct-aid-bar-current { background: var(--cj-teal); }
.ct-aid-bar-current:hover, .ct-aid-bar-current.ct-aid-bar-hover { background: #007A70; }
#ct-app[data-theme="dark"] .ct-aid-bar { background: #2E6E5E; }
#ct-app[data-theme="dark"] .ct-aid-bar:hover, #ct-app[data-theme="dark"] .ct-aid-bar-hover { background: var(--cj-teal); }
#ct-app[data-theme="dark"] .ct-aid-bar-current { background: var(--cj-teal); }

/* Floating tooltip on trend-bar hover — reuses the same dark tooltip look
   as the cause chart (.ct-cause-tooltip-date/-total/-row/-val/-dot), so
   hovering here feels like the same interaction language as the chart
   above it rather than a plain browser title="" tip. Fixed dark styling
   works over either theme since it never sits flush against the card. */
.ct-aid-tooltip {
  position: absolute; bottom: calc(100% + 8px); z-index: 5; min-width: 140px; pointer-events: none;
  background: rgba(6,16,22,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 8px 10px; box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

.ct-aid-countries { display: flex; flex-direction: column; gap: 8px; }
.ct-aid-country-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--cj-navy);
}
.ct-aid-country-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-aid-empty { font-size: 12.5px; color: var(--cj-text-soft); padding: 6px 2px; }
.ct-aid-countries-full { max-height: 340px; overflow-y: auto; padding-right: 4px; }

/* ── "Explore" button — sits to the left of the YTD/12M/All-time toggle on
   the homepage panel, compact by design (small pill, icon + one word) so
   it doesn't compete with the toggle for attention. ── */
.ct-aid-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* Explore button — it wasn't reading as interactive, so it now carries
   three signals a static pill doesn't: a slow idle lift (so it's the one
   moving thing in the panel), a light sweep across its face, and an arrow
   that steps forward on hover. Motion is switched off entirely for anyone
   who's asked for reduced motion. */
.ct-aid-explore-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.01em; color: #fff;
  background: linear-gradient(135deg, var(--cj-teal) 0%, #00887E 100%);
  border: 1px solid rgba(0,169,157,0.55);
  border-radius: 20px; padding: 8px 15px; cursor: pointer;
  white-space: nowrap; font-family: inherit;
  box-shadow: 0 4px 14px -4px rgba(0,169,157,0.55);
  animation: ct-aid-explore-float 2.8s ease-in-out infinite;
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
.ct-aid-explore-ico { font-size: 14px; }
.ct-aid-explore-arrow { font-size: 13px; transition: transform .18s ease; }
.ct-aid-explore-btn:hover {
  animation-play-state: paused;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px -6px rgba(0,169,157,0.6);
}
.ct-aid-explore-btn:hover .ct-aid-explore-arrow { transform: translateX(3px); }
.ct-aid-explore-btn:active { transform: translateY(0); }
.ct-aid-explore-btn:focus-visible { outline: 2px solid var(--cj-teal-dark); outline-offset: 2px; }

/* The sweep — a soft highlight that crosses the face on a long loop. */
.ct-aid-explore-scan {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
  animation: ct-aid-explore-sweep 2.8s ease-in-out infinite;
}
@keyframes ct-aid-explore-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes ct-aid-explore-sweep {
  0%, 62%  { left: -60%; }
  92%, 100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-aid-explore-btn { animation: none; }
  .ct-aid-explore-scan { display: none; }
}

/* Panel subtitle — sat too pale against the card at this size. */
.ct-aid-head-sub { color: var(--cj-text-mid); font-weight: 600; }
#ct-app[data-theme="dark"] .ct-aid-head-sub { color: rgba(232,241,244,0.72); }

/* ── Compact panel, richer variant (Data + Activity views) ──────────────
   These two panels sit inside an existing .ct-aid-section card, so their
   inner chart/ranking panels drop the extra border and shadow that make
   sense standalone on the Explore page — otherwise it's a card in a card. */
.ct-org-toolbar-sub { font-size: 14.5px; color: var(--cj-text-soft); margin-top: 3px; font-weight: 500; }

.ct-aid-section .ct-aid-panel {
  background: transparent; border: none; box-shadow: none;
  padding: 0;
  /* Column layout with the chart pushed down, so a short chart sits on the
     same baseline as the taller ranking list beside it rather than floating
     at the top of a stretched grid cell. */
  display: flex; flex-direction: column;
}
.ct-aid-section .ct-aid-chart { margin-top: auto; }
.ct-aid-section .ct-aid-panel-chart { padding-right: 20px; border-right: 1px solid var(--cj-border); }
@media (max-width: 900px) {
  .ct-aid-section .ct-aid-panel-chart { padding-right: 0; border-right: none; padding-bottom: 18px; border-bottom: 1px solid var(--cj-border); }
}
.ct-aid-section .ct-aid-panel-title { font-size: 14px; }
.ct-aid-section .ct-aid-panel-sub { font-size: 12px; }
.ct-aid-section .ct-aid-ov-grid { gap: 20px; }

/* ══════════════════════════════════════════════════════════════════════
   FRONTLINE WATCH — EXPLORE PAGE
   Purpose-built rather than the compact homepage panel scaled up. Three
   ideas carry the whole page: one dark band for identity (hero), one dark
   band for framing (masthead), then light editorial cards for the data —
   so the eye always knows whether it's reading context or evidence.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page hero ── */
.ct-aid-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #0C1A22 0%, #122A36 52%, #0C1A22 100%);
  border: 1px solid rgba(0,169,157,0.24);
  border-radius: var(--cj-radius-lg);
  box-shadow: 0 20px 54px -26px rgba(0,10,15,0.6);
  padding: 18px 22px; margin-bottom: 16px;
}
.ct-aid-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 120% at 0% 0%, rgba(198,60,60,0.16), transparent 58%);
}
.ct-aid-hero-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ct-aid-hero-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.ct-aid-hero-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 21px; color: #fff;
  background: linear-gradient(140deg, #E05252, #8E2323);
  box-shadow: 0 10px 24px -10px rgba(224,82,82,0.7);
}
.ct-aid-hero-idtext { min-width: 0; }
.ct-aid-hero-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: #FF9C9C; margin-bottom: 3px;
}
.ct-aid-hero-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: #FF6B6B;
  box-shadow: 0 0 9px rgba(255,107,107,0.95); animation: ct-breathe 2.4s ease-in-out infinite;
}
.ct-aid-hero-name {
  font-size: clamp(21px, 2.1vw, 27px); font-weight: 800; color: #fff;
  letter-spacing: -0.028em; line-height: 1.1; margin: 0;
}
.ct-aid-hero-tag {
  font-size: 12.5px; color: rgba(255,255,255,0.58); margin: 3px 0 0; line-height: 1.4;
}
.ct-aid-hero-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ct-aid-hero-back, .ct-aid-hero-theme {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px; padding: 8px 14px; cursor: pointer; transition: all .15s;
}
.ct-aid-hero-theme { padding: 8px; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
.ct-aid-hero-back:hover, .ct-aid-hero-theme:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Nav sits inline between the identity block and the controls — a pill
   group rather than underline tabs, since it no longer has a full-width
   row (and its own border) to anchor to. */
.ct-aid-hero-nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 3px;
}
.ct-aid-hero-navlink {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,0.6); text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.ct-aid-hero-navlink i { font-size: 14px; opacity: .8; }
.ct-aid-hero-navlink:hover { color: #fff; background: rgba(255,255,255,0.07); }
.ct-aid-hero-navlink.active { color: #06201D; background: var(--cj-teal); }
.ct-aid-hero-navlink.active i { opacity: 1; }
@media (max-width: 1080px) {
  /* The base rule allows flex-wrap, which let the three links wrap onto a
     second line on narrow screens instead of scrolling horizontally —
     overflow-x:auto only kicks in once wrapping is off the table. */
  .ct-aid-hero-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 620px) {
  /* Back + theme toggle used to sit inline with the identity block, which
     meant they were vertically centred against a two-line title+tag block
     rather than pinned to a corner, and reserved horizontal room from that
     row the whole time. Pulling them out of flow and into the top-right
     corner frees that width back to the identity block — the icon, title
     and tag below all shrink to spend that freed space as a shorter hero
     instead of a wider one. */
  .ct-aid-hero { padding: 14px 16px 12px; }
  .ct-aid-hero-top { gap: 8px; }
  /* The back/theme buttons only sit over the identity row above the nav —
     the nav itself is a full-width row underneath (order:3), where nothing
     overlaps. Reserving clearance on the whole .ct-aid-hero-top row (as a
     previous version of this did) cost the nav 80px of width it never
     needed to give up, which is what left "Countries" clipped at the edge
     of the scrollable strip. Scoped to just the identity block instead. */
  .ct-aid-hero-id { padding-right: 80px; }
  .ct-aid-hero-actions {
    position: absolute; top: 0; right: 0; gap: 6px;
  }
  .ct-aid-hero-back span { display: none; }
  .ct-aid-hero-back {
    padding: 8px; width: 32px; height: 32px; justify-content: center; border-radius: 50%;
  }
  .ct-aid-hero-theme { width: 32px; height: 32px; }
  .ct-aid-hero-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
  .ct-aid-hero-kicker { font-size: 9px; margin-bottom: 2px; }
  .ct-aid-hero-name { font-size: 18px; }
  .ct-aid-hero-tag { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
  .ct-aid-hero-navlink span { display: inline; }
}

/* ── Masthead — three columns so the middle carries a live outcome split
   instead of dead space, which keeps the band short. ── */
.ct-aid-masthead {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr) auto;
  gap: 26px; align-items: center;
  background: linear-gradient(150deg, #1A1012 0%, #241417 55%, #1A1012 100%);
  border: 1px solid rgba(198,60,60,0.26);
  border-radius: var(--cj-radius-lg);
  box-shadow: 0 8px 36px rgba(0,0,0,0.36);
  padding: 18px 24px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.ct-aid-masthead::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 130% at 100% 0%, rgba(198,60,60,0.18), transparent 62%);
}
.ct-aid-masthead-copy { position: relative; z-index: 1; }
.ct-aid-masthead-title {
  font-size: 17px; font-weight: 800; color: #fff;
  letter-spacing: -0.018em; line-height: 1.28; margin: 0 0 5px;
}
.ct-aid-masthead-lede {
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.62); margin: 0;
}

.ct-aid-masthead-split { position: relative; z-index: 1; }
.ct-aid-msplit-bar {
  display: flex; height: 9px; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,0.08); margin-bottom: 11px;
}
.ct-aid-msplit-seg { display: block; height: 100%; }
.ct-aid-msplit-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ct-aid-msplit-key { display: inline-flex; align-items: baseline; gap: 5px; }
.ct-aid-msplit-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; flex-shrink: 0; }
.ct-aid-msplit-n {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 13.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
.ct-aid-msplit-l { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600; }

.ct-aid-masthead-figure {
  position: relative; z-index: 1; text-align: right; flex-shrink: 0;
  padding-left: 26px; border-left: 1px solid rgba(255,255,255,0.12);
}
.ct-aid-masthead-figure:empty { display: none; }
.ct-aid-masthead-figure-val {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; color: #FF6B6B;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.ct-aid-masthead-figure-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.78); margin-top: 7px;
}
.ct-aid-masthead-figure-meta { font-size: 11px; color: rgba(255,255,255,0.46); margin-top: 3px; }
@media (max-width: 980px) {
  .ct-aid-masthead { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .ct-aid-masthead-figure {
    text-align: left; padding-left: 0; padding-top: 16px;
    border-left: none; border-top: 1px solid rgba(255,255,255,0.12);
  }
}

/* ── Overview ── */
.ct-aid-overview { margin-bottom: 26px; }
.ct-aid-ov-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.ct-aid-ov-title {
  font-size: 20px; font-weight: 800; color: var(--cj-navy);
  letter-spacing: -0.02em; margin: 0;
}
.ct-aid-ov-sub { font-size: 13.5px; color: var(--cj-text-soft); margin-top: 3px; }
.ct-aid-period-toggle-lg { padding: 3px; border-radius: 20px; }
.ct-aid-period-toggle-lg .ct-aid-tbtn { padding: 8px 16px; font-size: 12.5px; font-weight: 700; border-radius: 20px; }

/* Stat cards — a share bar turns four isolated numbers into a composition,
   which is what the reader actually wants to compare. */
.ct-aid-ov-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin-bottom: 16px;
}
.ct-aid-ovcard {
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border);
  border-top: 3px solid var(--ct-oc);
  border-radius: 14px; padding: 12px 14px 11px;
  box-shadow: 0 1px 2px rgba(13,43,62,0.04), 0 14px 30px -24px rgba(13,43,62,0.3);
}
.ct-aid-ovcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ct-aid-ovcard-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ct-oc);
}
.ct-aid-ovcard-chg { font-size: 10.5px; }
.ct-aid-ovcard-val {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 26px; font-weight: 800; color: var(--cj-navy);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.ct-aid-ovcard-bar {
  height: 4px; border-radius: 20px; background: var(--cj-toggle-bg); overflow: hidden; margin-bottom: 6px;
}
.ct-aid-ovcard-bar span { display: block; height: 100%; border-radius: 20px; background: var(--ct-oc); }
/* One line, not two — the label already names the outcome, so the share
   only needs the figure and a short qualifier. */
.ct-aid-ovcard-share { font-size: 11px; color: var(--cj-text-soft); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .ct-aid-ov-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Phones used to drop to a single column here, stacking Killed/Wounded/
   Kidnapped/Detained into four full-width rows. Two-up all the way down
   instead — the compact padding/font sizes (.ct-aid-ov-compact) already give
   each card enough room at half-width on a phone. */
@media (max-width: 520px)  { .ct-aid-ov-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } }

/* Compact variant — the in-page Data/Activity panels sit inside an existing
   card and are competing with the rest of the tracker for vertical space,
   so they run tighter than the same cards on the dedicated Explore page. */
.ct-aid-ov-compact .ct-aid-ovcard { padding: 10px 12px 9px; border-radius: 12px; border-top-width: 2.5px; }
.ct-aid-ov-compact .ct-aid-ovcard-top { margin-bottom: 2px; }
.ct-aid-ov-compact .ct-aid-ovcard-label { font-size: 9.5px; letter-spacing: 0.06em; }
.ct-aid-ov-compact .ct-aid-ovcard-chg { font-size: 10px; }
.ct-aid-ov-compact .ct-aid-ovcard-val { font-size: 21px; margin-bottom: 6px; }
.ct-aid-ov-compact .ct-aid-ovcard-bar { height: 3px; margin-bottom: 4px; }
.ct-aid-ov-compact .ct-aid-ovcard-share { font-size: 10px; }

/* The compact panels also get a shorter chart than the Explore page — but
   since the chart is bottom-aligned against a taller ranking list, it can
   claim most of that slack rather than leaving it empty above the columns. */
.ct-aid-chart-sm .ct-aid-chart-svg { height: 210px; }

/* Chart + ranking panels */
.ct-aid-ov-grid { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 16px; }
@media (max-width: 900px) { .ct-aid-ov-grid { grid-template-columns: 1fr; } }
.ct-aid-panel {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: 18px; padding: 18px 20px 20px;
  box-shadow: 0 1px 2px rgba(13,43,62,0.04), 0 16px 34px -26px rgba(13,43,62,0.3);
}
.ct-aid-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.ct-aid-panel-title { font-size: 15.5px; font-weight: 800; color: var(--cj-navy); margin: 0; letter-spacing: -0.01em; }
.ct-aid-panel-sub { font-size: 12.5px; color: var(--cj-text-soft); margin: 3px 0 0; }
.ct-aid-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ct-aid-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--cj-text-mid); }
.ct-aid-lg-dot { width: 8px; height: 8px; border-radius: 2px; }

.ct-aid-chart { position: relative; }
.ct-aid-chart-svg { display: block; width: 100%; height: 230px; overflow: visible; }
.ct-aid-grid { stroke: var(--cj-border); stroke-width: 1; }
.ct-aid-axis { font-size: 10px; font-weight: 700; fill: var(--cj-text-soft); font-family: inherit; }
.ct-aid-seg { transition: opacity .12s ease; }
.ct-aid-seg-zero { fill: var(--cj-border-mid); }
.ct-aid-colhit { cursor: pointer; }
.ct-aid-col-on .ct-aid-seg { opacity: .78; }
.ct-aid-col-on .ct-aid-colhit { fill: rgba(0,169,157,0.06); }

/* Ranked countries — proportional bars instead of a bare list, so the gap
   between first and fifth is visible rather than arithmetic. */
.ct-aid-ranks { display: flex; flex-direction: column; gap: 14px; }
.ct-aid-rank { display: flex; align-items: center; gap: 12px; }
.ct-aid-rank-n {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--cj-text-soft);
  background: var(--cj-toggle-bg); font-variant-numeric: tabular-nums;
}
.ct-aid-rank:first-child .ct-aid-rank-n { background: rgba(214,69,69,0.14); color: #C63C3C; }
.ct-aid-rank-body { flex: 1; min-width: 0; }
.ct-aid-rank-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ct-aid-rank-name { font-size: 13.5px; font-weight: 700; color: var(--cj-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-aid-rank-val {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 13.5px; font-weight: 800; color: var(--cj-navy); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.ct-aid-rank-bar { height: 6px; border-radius: 20px; background: var(--cj-toggle-bg); overflow: hidden; }
.ct-aid-rank-bar span {
  display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, #D64545, #E07A5F);
}

/* ── Cases ── */
.ct-aid-cases-section { margin-top: 8px; }
.ct-aid-cases-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 14px 0 18px;
}
.ct-aid-cases-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--cj-card-bg); border: 1px solid var(--cj-border-mid);
  border-radius: 20px; padding: 9px 14px; flex: 1 1 240px; max-width: 340px;
  color: var(--cj-text-soft); font-size: 13px;
}
.ct-aid-cases-search:focus-within { border-color: var(--cj-teal); box-shadow: 0 0 0 3px rgba(0,169,157,0.12); }
.ct-aid-cases-search input {
  border: none; outline: none; background: transparent; flex: 1;
  font-size: 13px; color: var(--cj-navy); font-family: inherit; min-width: 0;
}
.ct-aid-cases-search input::placeholder { color: var(--cj-text-soft); }
.ct-aid-cases-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-aid-cases-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-aid-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--cj-toggle-bg); border: none; cursor: pointer;
  color: var(--cj-text-soft); font-size: 12px; padding: 0;
}
.ct-aid-search-clear:hover { background: var(--cj-border-mid); color: var(--cj-navy); }
.ct-aid-sort { display: inline-flex; align-items: center; gap: 7px; }
.ct-aid-sort-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cj-text-soft);
}
.ct-aid-sort select {
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--cj-navy);
  background: var(--cj-card-bg); border: 1px solid var(--cj-border-mid);
  border-radius: 20px; padding: 8px 13px; cursor: pointer;
}
.ct-aid-sort select:focus-visible { outline: 2px solid var(--cj-teal); outline-offset: 1px; }

.ct-aid-cases-list {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px; align-items: start;
}
@media (max-width: 900px) { .ct-aid-cases-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ct-aid-cases-search { max-width: none; } }

/* Case card — a severity rail down the left edge means you can read the
   worst outcome before reading any text; the rest is a strict hierarchy of
   when → what → where → how many → who. */
.ct-aid-case {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(13,43,62,0.04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#ct-app:not([data-theme="dark"]) .ct-aid-case {
  border-color: rgba(13,43,62,0.10);
  box-shadow: 0 1px 3px rgba(13,43,62,0.05), 0 16px 34px -26px rgba(13,43,62,0.3);
}
.ct-aid-case:hover {
  border-color: color-mix(in srgb, var(--ct-accent) 45%, transparent);
  box-shadow: 0 4px 10px rgba(13,43,62,0.07), 0 22px 44px -22px rgba(13,43,62,0.34);
  transform: translateY(-2px);
}
.ct-aid-case-summary {
  display: flex; width: 100%; padding: 0; gap: 0;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.ct-aid-case-summary:focus-visible { outline: 2px solid var(--cj-teal); outline-offset: -3px; border-radius: 18px; }
.ct-aid-case-rail { width: 4px; flex-shrink: 0; background: var(--ct-accent); }
.ct-aid-case-inner { flex: 1; min-width: 0; padding: 14px 18px 13px; }

.ct-aid-case-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ct-aid-case-date {
  font-size: 11px; font-weight: 800; color: var(--cj-text-mid);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ct-aid-case-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cj-border-mid); }
.ct-aid-case-type { font-size: 11px; font-weight: 700; color: var(--ct-accent); }
.ct-aid-case-verify {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--cj-text-soft);
  background: var(--cj-toggle-bg); border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}
.ct-aid-case-title {
  font-size: 16.5px; font-weight: 800; color: var(--cj-navy); line-height: 1.28;
  letter-spacing: -0.016em; margin: 0 0 7px; overflow-wrap: anywhere;
}

/* Location/org and the avatar stack share one row — the faces sit right of
   the place they belong to instead of taking a line of their own. */
.ct-aid-case-where {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 10px;
}
.ct-aid-case-where-txt {
  display: flex; gap: 14px; flex-wrap: wrap; min-width: 0;
  font-size: 12px; color: var(--cj-text-soft);
}
.ct-aid-case-where-txt span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ct-aid-case-where-txt i { font-size: 12.5px; flex-shrink: 0; }

/* Counts and the expand control likewise share the last row. */
.ct-aid-case-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 10px; border-top: 1px solid var(--cj-border);
}
.ct-aid-case-stats { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; }
.ct-aid-case-stat { display: flex; flex-direction: column; gap: 0; }
.ct-aid-case-stat-n {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;
  font-size: 18px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ct-aid-case-stat-l {
  font-size: 9.5px; font-weight: 700; color: var(--cj-text-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ct-aid-case-stat-none { font-size: 12px; color: var(--cj-text-soft); font-style: italic; }

/* Avatars sized up again (45 → 63px). The negative block margin lets them
   overflow into the row's own spacing instead of pushing it taller, so the
   card height is unchanged: 63px of circle occupies 31px of layout. */
.ct-aid-case-people { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: -16px 0; }
.ct-aid-case-avatars { display: flex; align-items: center; flex-shrink: 0; }
.ct-aid-case-avatar {
  width: 63px; height: 63px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--cj-card-bg); margin-left: -20px;
  box-shadow: 0 2px 6px rgba(13,43,62,0.2);
}
.ct-aid-case-avatar:first-child { margin-left: 0; }
.ct-aid-case-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--cj-teal), var(--cj-teal-dark));
}
.ct-aid-case-avatar-more {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--cj-text-mid); background: var(--cj-toggle-bg);
}
.ct-aid-case-people-note { font-size: 11px; font-weight: 700; color: var(--cj-text-soft); white-space: nowrap; }
.ct-aid-case-people-none { font-style: italic; font-weight: 600; }
.ct-aid-case-cta {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; color: var(--cj-teal-dark);
}
#ct-app[data-theme="dark"] .ct-aid-case-cta { color: var(--cj-teal-mid); }
.ct-aid-case-chevron { font-size: 14px; transition: transform .2s; }
.ct-aid-case-expanded .ct-aid-case-chevron { transform: rotate(180deg); }

@media (max-width: 520px) {
  .ct-aid-case-where { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.ct-aid-case-detail { padding: 4px 20px 20px 24px; }
.ct-aid-case-summary-text {
  font-size: 14px; line-height: 1.65; color: var(--cj-text-mid); margin: 0 0 16px;
  padding-left: 14px; border-left: 2px solid var(--ct-accent);
}
.ct-aid-case-victims-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--cj-text-soft); margin-bottom: 10px;
}
.ct-aid-case-victims { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ct-aid-case-nonames {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--cj-text-soft); line-height: 1.55;
  background: var(--cj-toggle-bg); border-radius: 12px; padding: 12px 14px;
}
.ct-aid-case-nonames i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ct-aid-case-source {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--cj-teal-dark); text-decoration: none;
  border: 1px solid var(--cj-border-mid); border-radius: 20px; padding: 7px 14px;
  transition: all .15s;
}
.ct-aid-case-source:hover { background: var(--cj-teal-light); border-color: rgba(0,169,157,0.4); }
#ct-app[data-theme="dark"] .ct-aid-case-source { color: var(--cj-teal-mid); }

/* Victim card — a person, presented as a person: portrait, name, then the
   facts. The status accent runs down the left so a row of them scans. */
.ct-aid-victim-card {
  display: flex; gap: 13px; margin: 0; padding: 13px 14px;
  border-radius: 14px; background: var(--cj-toggle-bg);
  border: 1px solid var(--cj-border); border-left: 3px solid var(--ct-vc);
}
.ct-aid-victim-photowrap { flex-shrink: 0; }
.ct-aid-victim-photo { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; display: block; }
.ct-aid-victim-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--cj-teal), var(--cj-teal-dark));
}
.ct-aid-victim-info { min-width: 0; }
.ct-aid-victim-name { font-size: 14.5px; font-weight: 800; color: var(--cj-navy); letter-spacing: -0.01em; }
.ct-aid-victim-status {
  display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2.5px 8px; border-radius: 20px; margin-top: 4px;
  color: #fff; background: var(--ct-vc);
}
.ct-aid-victim-meta { font-size: 12.5px; color: var(--cj-text-mid); margin-top: 5px; font-weight: 600; }
.ct-aid-victim-sub { font-size: 12px; color: var(--cj-text-soft); margin-top: 2px; }
.ct-aid-victim-bio { font-size: 12.5px; color: var(--cj-text-mid); margin: 7px 0 0; line-height: 1.55; }

/* ── Cases empty state ── */
.ct-aid-cases-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; gap: 6px;
  background: var(--cj-card-bg); border: 1px dashed var(--cj-border-mid); border-radius: 18px;
}
.ct-aid-cases-empty-icon { font-size: 30px; color: var(--cj-text-soft); margin-bottom: 6px; }
.ct-aid-cases-empty-title { font-size: 15.5px; font-weight: 800; color: var(--cj-navy); }
.ct-aid-cases-empty-sub { font-size: 13.5px; color: var(--cj-text-soft); max-width: 42ch; }
.ct-aid-cases-empty-btn {
  margin-top: 12px; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--cj-teal); border: none; border-radius: 20px;
  padding: 9px 20px; cursor: pointer; transition: background .15s;
}
.ct-aid-cases-empty-btn:hover { background: var(--cj-teal-dark); }
.ct-aid-loadmore-count { opacity: 0.6; font-weight: 600; }

.ct-milestone-card {
  display: flex; align-items: center; gap: 12px;
  height: 64px; box-sizing: border-box; flex-shrink: 0;
  padding: 10px 16px; border-radius: var(--cj-radius-lg);
  background: linear-gradient(135deg, rgba(0,169,157,0.10), rgba(0,169,157,0.03));
  border: 1px solid rgba(0,169,157,0.25);
  font-size: 13px; font-weight: 600; color: var(--cj-navy); line-height: 1.4;
  transition: box-shadow .15s ease;
}
.ct-milestone-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.ct-milestone-card i {
  font-size: 16px; color: #fff; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cj-teal);
}
.ct-milestone-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.ct-milestone-new_org { background: linear-gradient(135deg, rgba(124,58,237,0.09), rgba(124,58,237,0.02)); border-color: rgba(124,58,237,0.22); }
.ct-milestone-new_org i { background: #7C3AED; }
.ct-milestone-on_this_day { background: linear-gradient(135deg, rgba(37,99,235,0.09), rgba(37,99,235,0.02)); border-color: rgba(37,99,235,0.22); }
.ct-milestone-on_this_day i { background: #2563EB; }
.ct-milestone-history { background: linear-gradient(135deg, rgba(192,90,0,0.09), rgba(192,90,0,0.02)); border-color: rgba(192,90,0,0.22); }
.ct-milestone-history i { background: #C05A00; }

/* ── Live feed filter/search bar ── */
.ct-act-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.ct-act-filter-search {
  display: flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 140px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 7px 10px;
}
.ct-act-filter-search i { color: rgba(255,255,255,0.4); font-size: 13px; }
.ct-act-filter-search input {
  background: transparent; border: none; outline: none; color: #fff; font-size: 12.5px;
  font-family: inherit; width: 100%;
}
.ct-act-filter-search input::placeholder { color: rgba(255,255,255,0.35); }
.ct-act-filter-select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 7px 8px; color: #fff; font-size: 12px; font-family: inherit;
  max-width: 130px;
}
.ct-act-filter-select option { color: #0D2B3E; }
.ct-act-filter-clear {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.6); cursor: pointer; transition: all .12s;
}
.ct-act-filter-clear:hover { color: #fff; background: rgba(255,255,255,0.12); }

.ct-act-date-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 4px; padding: 9px 12px;
  background: rgba(0,169,157,0.14); border: 1px solid rgba(0,169,157,0.32);
  border-radius: 8px; font-size: 12.5px; color: #fff;
}
.ct-act-date-banner i { color: var(--cj-teal-mid); margin-right: 4px; }
.ct-act-date-banner button {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-family: inherit;
}
.ct-act-date-banner button:hover { background: rgba(255,255,255,0.18); }

/* ── Impact ranking table ── modeled on Top organizations: same rank/name/
   avatar/badge cell, a single cause pill, a bold right-aligned metric, and a
   real trend line (reusing sparkSVG) as the last column. ── */
.ct-impact-thead {
  display: grid; grid-template-columns: 40px minmax(200px,2.1fr) 120px 110px 100px 110px;
  padding: 10px 20px; background: var(--cj-hover-bg); border-bottom: 1px solid var(--cj-border);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cj-text-soft); position: sticky; top: 0; z-index: 2;
}
.ct-impact-row {
  display: grid; grid-template-columns: 40px minmax(200px,2.1fr) 120px 110px 100px 110px;
  padding: 10px 20px; border-bottom: 1px solid var(--cj-border);
  align-items: center; transition: background .1s;
}
.ct-impact-row:last-child { border-bottom: none; }
.ct-impact-row:hover { background: var(--cj-hover-bg); }
/* Impact score positioned exactly like the "This year" amount column on
   Top organizations — one bold, right-aligned number. */
.ct-impact-score-cell { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.ct-impact-score-val { font-size: 14px; font-weight: 800; color: var(--cj-navy); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
/* Reach sits under the count as context: the number says how much was
   logged, this says where it landed. */
.ct-impact-reach {
  font-size: 10px; font-weight: 600; color: var(--cj-text-soft); text-align: right;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Activity — the 8-week heatmap strip (restored) */
.ct-impact-mini-hm { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 6px); gap: 2px; justify-content: end; }
.ct-impact-mini-cell { width: 6px; height: 6px; border-radius: 1.5px; background: var(--cj-toggle-bg); }
.ct-impact-mini-cell[data-level="1"] { background: #C8EDE9; }
.ct-impact-mini-cell[data-level="2"] { background: #4DC9C2; }
.ct-impact-mini-cell[data-level="3"] { background: #00A99D; }
.ct-impact-mini-cell[data-level="4"] { background: #005C56; }

/* Bolder, more legible text throughout this table */
.ct-impact-row .ct-donor-name { font-weight: 800; }
.ct-impact-row .ct-cause-pill { font-weight: 700; color: var(--cj-navy); }
.ct-impact-row .ct-rank-num   { font-weight: 800; color: var(--cj-navy); }
.ct-impact-section .ct-section-title { font-weight: 800; }
.ct-impact-section .ct-section-sub   { color: #5B7885; font-weight: 600; }

/* Top organizations + Impact ranking tables: identical grid layout on every
   breakpoint. On mobile the grid is wider than the viewport, so this wrapper
   (placed around the thead + row list in the markup) scrolls horizontally
   instead of the table reflowing into stacked cards. */
.ct-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The ranking tables are real <table> elements (semantics for search engines
   and screen readers — a figure means nothing without its column header),
   but they're laid out with CSS Grid, so the browser's own table layout has
   to be switched off. The rows themselves keep their existing grid rules;
   these just stop <table>/<thead>/<tbody> from imposing table-layout on top.
   The markup carries explicit ARIA roles precisely because this override
   drops native table semantics from the accessibility tree. */
.ct-donor-table, .ct-impact-table { display: block; width: 100%; border-collapse: collapse; }
.ct-donor-table > thead, .ct-impact-table > thead,
.ct-donor-table > tbody, .ct-impact-table > tbody { display: block; }
/* <th> defaults to centred and bold; the .ct-th rules expect neither. */
.ct-donor-table th, .ct-impact-table th { text-align: left; font-weight: 700; }
.ct-th-amount, .ct-th-wow, .ct-th-spark { text-align: right; }
@media (max-width: 700px) {
  .ct-table-scroll { margin: 0 -1px; }
  .ct-donor-thead,  .ct-donor-row  { min-width: 800px; }
  .ct-impact-thead, .ct-impact-row { min-width: 700px; }
}
/* ── ORGANIZATION PROFILE PAGE ───────────────────────────────────────────────
   A CoinMarketCap-style "asset page" for one org. Uses the same --cj-* theme
   variables as the rest of the app, so it follows light/dark mode for free. */

/* Any row with a data-org attribute is a link into an org's profile page. */
.ct-donor-row[data-org],
.ct-today-bar-row[data-org],
.ct-live-row[data-org],
.ct-act-row[data-org],
.ct-wlb-row[data-org],
.ct-impact-row[data-org] { cursor: pointer; }
.ct-donor-row[data-org]:hover .ct-donor-name,
.ct-live-row[data-org]:hover .ct-donor-name,
.ct-act-row[data-org]:hover .ct-act-headline,
.ct-wlb-row[data-org]:hover .ct-wlb-name,
.ct-impact-row[data-org]:hover .ct-donor-name { text-decoration: underline; text-underline-offset: 2px; }

/* The org name inside each row is now a real <a href> (for crawlability —
   search engines and "open in new tab" need a genuine link, not a div with
   a click handler) rather than a span/div. Reset default anchor styling so
   it reads identically to before; the hover-underline above still applies
   since it targets the same classes regardless of tag name. */
/* The org name inside each row is now a real <a href> (for crawlability —
   search engines and "open in new tab" need a genuine link, not a div with
   a click handler) rather than a span/div. Anchors need an explicit color
   or the browser's default blue-link color wins regardless of inheritance
   — so each class below gets back the exact color it had before it became
   a link. (.ct-today-bar-name and .ct-act-headline-link never had their
   own color; those two correctly inherit white from their dark-card
   ancestor, so `inherit` is the right call only for them.) */
.ct-donor-name,
.ct-today-bar-name,
.ct-live-name,
.ct-wlb-name,
.ct-act-headline-link { text-decoration: none; }
.ct-donor-name { color: var(--cj-navy); }
.ct-live-name  { color: #fff; }
.ct-wlb-name   { color: #F3FAFA; }
.ct-today-bar-name,
.ct-act-headline-link { color: inherit; }

.ct-org-loading, .ct-org-notfound {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 80px 20px; color: var(--cj-text-soft); font-size: 14px; font-weight: 600;
}
.ct-org-notfound i { font-size: 32px; opacity: .6; }
.ct-org-spin { display: inline-block; animation: ct-org-spin 0.9s linear infinite; }
@keyframes ct-org-spin { to { transform: rotate(360deg); } }

/* Header */
.ct-org-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 4px 24px;
}
.ct-org-header-logo { flex-shrink: 0; }
.ct-org-logo-img {
  width: 64px; height: 64px; border-radius: 16px; object-fit: cover;
  border: 1px solid var(--cj-border-mid); background: var(--cj-card-bg);
}
.ct-org-header-body { min-width: 0; }
.ct-org-header-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-org-header-name { font-size: 24px; font-weight: 800; color: var(--cj-navy); line-height: 1.2; }
.ct-org-verified { color: var(--cj-teal); font-size: 22px; display: inline-flex; }
.ct-org-header-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ct-org-rank-badge {
  font-size: 11px; font-weight: 700; color: var(--cj-teal-dark);
  background: var(--cj-teal-light); border: 1px solid var(--cj-border-mid);
  border-radius: 20px; padding: 4px 10px;
}

/* Stat row */
.ct-org-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 22px;
}
.ct-org-stat-card {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); padding: 16px 18px; box-shadow: var(--cj-shadow);
}
.ct-org-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cj-text-soft); }
.ct-org-stat-val { font-size: 22px; font-weight: 800; color: var(--cj-navy); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ct-org-stat-sub { font-size: 12px; color: var(--cj-text-mid); margin-top: 4px; }

/* Generic section wrapper (chart / about / cause breakdown / feed / heatmap) */
.ct-org-section {
  background: var(--cj-card-bg); border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg); box-shadow: var(--cj-shadow);
  padding: 18px 20px 22px; margin-bottom: 16px;
}
.ct-org-section .ct-section-header { padding: 0 0 14px; border-bottom: none; margin-bottom: 4px; }

.ct-org-chart { width: 100%; }
.ct-org-chart .ct-cause-svg { width: 100%; height: 260px; display: block; }

/* Standard "visually hidden, still accessible" pattern — NOT display:none.
   Content hidden this way stays in the accessibility tree and is still
   read/indexed normally by Google (this is the same technique used for
   legitimate hidden content like tabs/accordions, not the display:none
   cloaking Google's guidelines actually warn against). Used to give charts
   a real text/table equivalent of their data, for anything with no other
   crawlable text form on the page. */
.ct-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Top row — Giving over time chart (~65%) + Cause breakdown pie (~35%),
   side by side. Stacks to full width on narrow screens. */
.ct-org-top-row { display: flex; align-items: stretch; gap: 16px; margin-bottom: 16px; }
.ct-org-top-row-chart { flex: 0 0 65%; max-width: 65%; margin-bottom: 0; }
.ct-org-top-row-cause { flex: 0 0 35%; max-width: 35%; margin-bottom: 0; display: flex; flex-direction: column; }
@media (max-width: 860px) {
  .ct-org-top-row { flex-direction: column; }
  .ct-org-top-row-chart, .ct-org-top-row-cause { flex: 1 1 100%; max-width: 100%; }
}

/* Activity split — feed (~60%, the bigger, scrollable column) + largest
   recipient (~40%, top 5, never scrolls) side by side at equal height.
   Same stretch/stack pattern as .ct-org-top-row above. */
.ct-org-activity-split { display: flex; align-items: stretch; gap: 16px; margin-bottom: 16px; }
.ct-org-activity-col-feed { flex: 0 0 70%; max-width: 70%; margin-bottom: 0; }
.ct-org-activity-col-lb { flex: 1 1 30%; max-width: 30%; margin-bottom: 0; display: flex; flex-direction: column; }
.ct-org-activity-solo .ct-org-activity-col-feed { flex: 1 1 100%; max-width: 100%; }
/* Stacked, the two columns leave flex layout entirely. A percentage
   flex-basis in a column container with no definite height is the classic
   way to get a card collapse to zero height on mobile WebKit, which is
   what made the activity feed card vanish on phones — plain block boxes
   have no such failure mode. */
@media (max-width: 860px) {
  .ct-org-activity-split { display: block; }
  .ct-org-activity-col-feed, .ct-org-activity-col-lb {
    display: flex; width: 100%; max-width: 100%; margin-bottom: 16px;
  }
  .ct-org-activity-col-lb:last-child { margin-bottom: 0; }
}
@media (max-width: 700px) {
  /* 460px of card is most of a phone screen — shorter, and the feed still
     scrolls inside itself rather than running the page long. */
  .ct-act-feed-section { height: 380px; }
}

/* About — a deliberately different, more editorial treatment than the
   other cards: warm ivory/gold palette (mirrors the gold accent already
   used on the rating card), full-width prose instead of the boxed-in
   column the other sections use, and a pull-quote bar for the org's
   mission statement, serif-set like an old-fashioned masthead quote. */
.ct-org-about-card {
  --cj-about-accent:      #c9a84c;
  --cj-about-accent-soft: rgba(201,168,76,0.14);
  --cj-about-bg-1:        #fbf8f1;
  --cj-about-bg-2:        #f3ecda;
  --cj-about-ink:         #2b2418;
  --cj-about-ink-soft:    #5c5236;
  background: linear-gradient(155deg, var(--cj-about-bg-1) 0%, var(--cj-about-bg-2) 100%);
  border: 1px solid rgba(201,168,76,0.35);
  position: relative;
  overflow: hidden;
}
.ct-org-about-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--cj-teal-deep) 0%, var(--cj-about-accent) 60%, #e8c568 100%);
}
#ct-app[data-theme="dark"] .ct-org-about-card {
  --cj-about-accent-soft: rgba(201,168,76,0.16);
  --cj-about-bg-1: #1a2530;
  --cj-about-bg-2: #10171d;
  --cj-about-ink: #F3EFE4;
  --cj-about-ink-soft: #C9C2AE;
  border-color: rgba(201,168,76,0.28);
}

.ct-org-about-heading {
  font-family: Georgia, 'Times New Roman', serif; font-size: 25px; font-weight: 700;
  letter-spacing: 0.01em; color: var(--cj-about-ink);
}
.ct-org-about-heading .ct-title-icon { font-size: 20px; color: var(--cj-about-accent); }

/* Identity header banner — moved here from the old standalone rating card,
   sits flush at the top edges of the About card (cancelling out the card's
   own padding) before the "About {name}" title. */
#ct-org-card-header { margin: -18px -20px 22px; }
#ct-org-card-header .ct-org-card { border-radius: var(--cj-radius-lg) var(--cj-radius-lg) 0 0; box-shadow: none; border: none; }
@media (max-width: 640px) { #ct-org-card-header { margin: -14px -16px 18px; } }

.ct-org-about-body { font-size: 16px; line-height: 1.9; color: var(--cj-about-ink-soft); max-width: none; width: 100%; }
.ct-org-about-body p { margin: 0 0 16px; }
.ct-org-about-body p:last-child { margin-bottom: 0; }
.ct-org-about-empty { font-size: 14px; font-style: italic; color: var(--cj-about-ink-soft); opacity: 0.8; }

/* Mission statement — deliberately a different design language from the
   ivory/gold prose card it sits inside: a solid deep-navy plaque with a
   teal quotation mark, centered like a stamped pull-quote rather than a
   left-bordered inline note. Sits below the prose, not above it. */
.ct-org-about-mission {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  margin: 26px 0 2px; padding: 26px 30px 24px;
  background: linear-gradient(160deg, #0D2B3E 0%, #123449 100%);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(13,43,62,0.25);
}
.ct-org-about-mission-mark {
  font-family: Georgia, 'Times New Roman', serif; font-size: 40px; line-height: 0.5;
  color: var(--cj-teal-mid); opacity: 0.9;
}
.ct-org-about-mission-text {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500;
  font-size: 18px; line-height: 1.6; color: #F4F1E6; margin: 0; max-width: 620px;
}

@media (max-width: 640px) {
  .ct-org-about-heading { font-size: 21px; }
  .ct-org-about-mission { padding: 20px 18px 20px; margin-top: 20px; }
  .ct-org-about-mission-mark { font-size: 32px; }
  .ct-org-about-mission-text { font-size: 16px; }
}


/* Cause breakdown — donut chart + compact legend */
.ct-org-pie-wrap { position: relative; width: 100%; max-width: 190px; margin: 4px auto 14px; }
.ct-org-pie-svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.ct-org-pie-arc { transition: stroke-dasharray .6s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .6s cubic-bezier(0.4,0,0.2,1); }
.ct-org-pie-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
}
.ct-org-pie-center-pct { font-size: 20px; font-weight: 800; line-height: 1; }
.ct-org-pie-center-lbl { font-size: 10px; font-weight: 700; color: var(--cj-text-soft); margin-top: 4px; max-width: 76px; }
.ct-org-pie-legend { display: flex; flex-direction: column; gap: 9px; }
.ct-org-pie-legend-row { display: flex; align-items: center; gap: 8px; }
.ct-org-cause-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ct-org-cause-name { font-size: 13px; font-weight: 700; color: var(--cj-navy); }
.ct-org-cause-pct { font-size: 12px; font-weight: 700; color: var(--cj-text-mid); margin-left: auto; }

/* ── Charity rating card — pixel-for-pixel copy of the standalone Rating
   Authority Engine's score card (.cjr-score-card), so a charity's card
   looks identical whether it's rendered here or by that plugin: dark
   teal/gold header banner on top (name, pills, links, badge label), the
   ivory ring/grade row, then sub-scores. Scoped custom properties keep it
   in that plugin's own palette regardless of the tracker's light/dark
   theme toggle — this card never themes with the rest of the dashboard,
   same as the original never did. Animated entrance + hover interactions
   are handled in ct-script.js's animateOrgCard(). ── */
.ct-org-card {
  --cro-teal:        #0d5c63;
  --cro-teal-dark:   #073d42;
  --cro-teal-deep:   #041f22;
  --cro-teal-mid:    #147d87;
  --cro-gold:        #c9a84c;
  --cro-gold-light:  #f0dfa8;
  --cro-ivory:       #faf7f2;
  --cro-ivory2:      #f2ede4;
  --cro-text:        #1a1612;
  --cro-text-mid:    #3d3830;
  --cro-muted:       #7a7268;
  --cro-border:      #ddd6c8;
  --cro-border-soft: #ede8df;
  --cro-grade-a:     #1a6b3a;
  --cro-grade-b:     #2d8a52;
  --cro-grade-c:     #b8820a;
  --cro-grade-d:     #c0522a;
  --cro-grade-f:     #8b0000;

  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff; border: 1px solid var(--cro-border); border-radius: var(--cj-radius-lg);
  overflow: hidden; position: relative;
  box-shadow: 0 6px 28px rgba(10,15,13,0.11);
  transition: box-shadow .3s cubic-bezier(0.4,0,0.2,1);
}
.ct-org-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg, var(--cro-teal-dark) 0%, var(--cro-teal-mid) 30%, var(--cro-gold) 65%, #e8a925 100%);
}
.ct-org-card-empty { text-align: center; padding: 36px 20px; }
.ct-org-card-empty-text { color: var(--cj-text-soft); font-size: 13px; font-weight: 600; max-width: 420px; margin: 0 auto; }

/* ── Header banner (name, pills, links, badge label) ── */
.ct-org-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, var(--cro-teal-deep) 0%, var(--cro-teal-dark) 45%, var(--cro-teal) 100%);
  padding: 28px 32px 24px; position: relative; overflow: hidden; flex-wrap: wrap;
}
.ct-org-card-header::before {
  content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px;
  border-radius: 50%; border: 60px solid rgba(201,168,76,0.07); pointer-events: none;
}
.ct-org-card-header::after {
  content: ''; position: absolute; bottom: -30px; left: 35%; width: 140px; height: 140px;
  border-radius: 50%; border: 28px solid rgba(255,255,255,0.03); pointer-events: none;
}
.ct-org-card-header-l { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ct-org-card-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ct-org-card-logo {
  flex-shrink: 0; width: 56px; height: 56px; min-width: 56px; border-radius: 10px; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55), 0 0 0 3.5px rgba(201,168,76,0.5),
              0 0 18px 4px rgba(201,168,76,0.28), 0 6px 22px rgba(0,0,0,0.55);
}
.ct-org-card-logo img {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain; object-position: center; display: block;
  filter: brightness(1.25) contrast(1.1) drop-shadow(0 0 6px rgba(255,255,255,0.45));
}
.ct-org-card-name-block { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.ct-org-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600;
  color: #fff; line-height: 1.2; letter-spacing: -0.01em;
}
.ct-org-card-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ct-org-pill {
  font-size: 11px; font-weight: 400; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); letter-spacing: 0.02em;
}
.ct-org-pill-v { background: rgba(26,107,58,0.28); border-color: rgba(45,138,82,0.45); color: #a7f3c5; font-weight: 500; }
.ct-org-card-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.ct-org-web-link {
  font-size: 12px; font-weight: 400; color: var(--cro-gold-light); text-decoration: none; display: inline-flex;
  align-items: center; gap: 4px; border-bottom: 1px solid rgba(240,223,168,0.3); padding-bottom: 1px;
  transition: border-color .3s cubic-bezier(0.4,0,0.2,1), color .3s cubic-bezier(0.4,0,0.2,1);
}
.ct-org-web-link:hover { border-color: var(--cro-gold-light); text-decoration: none; }
.ct-org-donate-link { color: var(--cro-gold-light); border-bottom-color: rgba(201,168,76,0.4); font-weight: 500; }
.ct-org-card-badge-lbl {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.6); padding: 5px 12px; border-radius: 20px;
  white-space: nowrap; align-self: flex-start; flex-shrink: 0; position: relative; z-index: 1; font-weight: 400;
}

/* ── Overall row (ring, grade, score, verdict) ── */
.ct-org-overall-row {
  display: flex; align-items: center; gap: 24px; padding: 24px 32px;
  background: var(--cro-ivory); border-bottom: 1px solid var(--cro-border-soft); position: relative; flex-wrap: wrap;
}
.ct-org-overall-row::after {
  content: 'CJ'; position: absolute; right: 20px; bottom: -10px; font-family: 'Cormorant Garamond', serif;
  font-size: 100px; font-weight: 700; color: rgba(13,92,99,0.04); pointer-events: none; line-height: 1; user-select: none;
}
.ct-org-ring-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; display: block; }
.ct-org-ring-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ct-org-ring-track { fill: none; stroke: #e2dbd0; stroke-width: 10; }
.ct-org-ring-arc { fill: none; stroke-width: 10; stroke-linecap: round; }
.ct-org-ring-inner {
  position: absolute; top: 16px; left: 16px; right: 16px; bottom: 16px; border-radius: 50%;
  background: var(--cro-ivory); display: flex; align-items: center; justify-content: center; z-index: 3;
}
.ct-org-ring-num {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; transition: transform .2s ease;
}
.ct-org-ring-wrap:hover .ct-org-ring-num { transform: scale(1.06); }
.ct-org-overall-info { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.ct-org-grade { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ct-org-grade-lbl { font-size: 11px; color: var(--cro-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.ct-org-badge-pill { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; display: inline-block; margin-top: 6px; width: fit-content; letter-spacing: 0.03em; }
.ct-ga { color: var(--cro-grade-a); } .ct-gb { color: var(--cro-grade-b); } .ct-gc { color: var(--cro-grade-c); } .ct-gd { color: var(--cro-grade-d); } .ct-gf { color: var(--cro-grade-f); }
.ct-org-overall-r { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ct-org-num-big { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--cro-text); line-height: 1; letter-spacing: -0.02em; }
.ct-org-num-max { font-size: 16px; color: var(--cro-muted); font-family: 'DM Sans', sans-serif; font-weight: 300; }
.ct-org-verdict-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ct-org-verdict-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cro-muted); font-weight: 600; }
.ct-org-verdict-pill { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; white-space: nowrap; border: 1.5px solid currentColor; letter-spacing: 0.02em; }

/* ── Sub scores ── */
.ct-org-sub-scores { display: flex; flex-direction: column; padding: 24px 32px 8px; }
.ct-org-sub-row {
  display: grid; grid-template-columns: 210px 1fr 44px; align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--cro-border-soft); transition: background .3s cubic-bezier(0.4,0,0.2,1);
}
.ct-org-sub-row:last-of-type { border-bottom: none; }
.ct-org-sub-row:hover { background: var(--cro-ivory); margin: 0 -32px; padding: 10px 32px; border-radius: 6px; }
.ct-org-sub-lbl { font-size: 13px; color: var(--cro-text-mid); display: flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: 0.01em; }
.ct-org-sub-ico { font-size: 15px; }
.ct-org-bar-track { height: 8px; background: var(--cro-ivory2); border-radius: 6px; overflow: hidden; position: relative; }
.ct-org-bar-fill { height: 100%; border-radius: 6px; width: 0%; position: relative; }
.ct-org-bar-fill::after {
  content: ''; position: absolute; top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: ctOrgBarShimmer 2s ease 1.9s forwards; opacity: 0;
}
@keyframes ctOrgBarShimmer { 0% { left: -100%; opacity: 1; } 100% { left: 200%; opacity: 0; } }
.ct-org-sub-val { font-size: 13px; font-weight: 700; color: var(--cro-text); text-align: right; font-variant-numeric: tabular-nums; }
.ct-org-bar-tip {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--cro-teal-dark); color: var(--cro-gold-light); font-size: 11px; padding: 4px 9px; border-radius: 5px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 20;
  border: 1px solid rgba(201,168,76,0.25); box-shadow: 0 3px 10px rgba(10,15,13,0.2);
}

/* ── Highlights & concerns ── */
.ct-org-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 32px 24px;
  border-top: 1px solid var(--cro-border-soft); background: linear-gradient(to bottom, var(--cro-ivory) 0%, #fff 100%);
}
.ct-org-list-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.ct-org-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-org-list li { font-size: 13px; color: var(--cro-text-mid); padding: 8px 12px; border-radius: 8px; line-height: 1.45; list-style: none; transition: transform .3s cubic-bezier(0.4,0,0.2,1); }
.ct-org-list li:hover { transform: translateX(2px); }

/* ── Footnote ── */
.ct-org-footnote { font-size: 12.5px; color: var(--cro-muted); line-height: 1.6; padding: 16px 32px 24px; }
.ct-org-footnote a { color: var(--cro-teal); text-decoration: none; }
.ct-org-footnote a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .ct-org-stats { grid-template-columns: repeat(2, 1fr); }
  .ct-org-card-header { padding: 22px 20px 20px; }
  .ct-org-overall-row { padding: 20px; }
  .ct-org-overall-r { margin-left: 0; align-items: flex-start; text-align: left; width: 100%; }
  .ct-org-sub-scores { padding: 20px 20px 4px; }
  .ct-org-two-col { grid-template-columns: 1fr; padding: 18px 20px 20px; }
  .ct-org-footnote { padding: 14px 20px 20px; }
}
@media (max-width: 480px) {
  .ct-org-header-name { font-size: 19px; }
  .ct-org-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ct-org-stat-card { padding: 12px 14px; }
  .ct-org-stat-val { font-size: 18px; }
  .ct-org-card-name { font-size: 21px; }
  .ct-org-card-logo { width: 46px; height: 46px; min-width: 46px; }
  .ct-org-ring-wrap { width: 96px; height: 96px; }
  .ct-org-ring-inner { top: 11px; left: 11px; right: 11px; bottom: 11px; }
  .ct-org-ring-num { font-size: 26px; }
  .ct-org-grade { font-size: 40px; }
  .ct-org-num-big { font-size: 32px; }
  .ct-org-sub-row { grid-template-columns: 1fr; row-gap: 4px; }
  .ct-org-sub-val { text-align: left; }
}

/* Org card header on phones — one line of identity pills instead of four,
   and both links sharing the bottom line, so the header stops eating half
   the screen before the About prose starts. Country, Est. and CEO keep
   source order, Verified is pulled up beside them, and budget + review
   date drop to the line below. Sits after the 780/480 blocks above on
   purpose: same specificity, so source order is what decides. */
@media (max-width: 700px) {
  .ct-org-card-header { padding: 18px 16px 16px; }
  .ct-org-card-pills { gap: 5px; margin-bottom: 10px; }
  .ct-org-pill { font-size: 9.5px; padding: 3px 7px; letter-spacing: 0; }
  .ct-org-pill-ceo { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ct-org-pill-v { order: 1; }
  .ct-org-pill-budget, .ct-org-pill-review { order: 2; }
  .ct-org-card-links { flex-wrap: nowrap; gap: 14px; }
  .ct-org-web-link { font-size: 11.5px; white-space: nowrap; }
  .ct-org-card-name { font-size: 20px; }
  .ct-org-card-name-row { gap: 10px; margin-bottom: 8px; }
  .ct-org-card-logo { width: 46px; height: 46px; min-width: 46px; }
  .ct-org-card-badge-lbl { display: none; }
}

/* ── ORG PAGE v3 — the org page hides the main dashboard hero via
   .ct-app-org-view below (that class was already being toggled by
   openOrg()/closeOrg() in JS, just never wired to any CSS), and restores
   the identity/toolbar strip. Finer stat cards below; dark chart+feed
   cards, standalone About section, and chart tooltip carried over. ── */

/* Hide the main "Global Charity Fund Flows" hero + its scroll sentinel
   ONLY while an organization page is open — everywhere else (the main
   dashboard) it's untouched. The floating Data/Activity toggle has to go
   too: it watches the sentinel to decide when to appear, and a hidden
   sentinel never "intersects" the viewport, so without this it would
   pop up on the org page and its buttons would reveal the dashboard
   view underneath instead of the org content. */
#ct-app.ct-app-org-view #ct-hero,
#ct-app.ct-app-org-view #ct-hero-sentinel,
#ct-app.ct-app-org-view #ct-sticky-toggle {
  display: none;
}

.ct-org-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  padding: 26px 28px;
  margin-bottom: 24px;
  background: var(--cj-card-bg);
  border: 1px solid rgba(0,169,157,0.18);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(13,43,62,0.04), 0 12px 32px -18px rgba(13,43,62,0.18);
}
.ct-org-toolbar-id { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 auto; }
.ct-org-id-logo { flex-shrink: 0; }
.ct-org-toolbar-logo-img {
  width: 58px; height: 58px; border-radius: 16px; object-fit: cover;
  border: 1px solid rgba(0,169,157,0.22); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,43,62,0.08);
}
.ct-org-id-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ct-org-id-eyebrow {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--cj-teal-dark); opacity: 0.85;
}
.ct-org-id-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-org-toolbar-name {
  font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--cj-navy);
  letter-spacing: -0.015em; line-height: 1.15; overflow-wrap: anywhere;
}
.ct-org-id-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-org-flag-chip { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; }

.ct-org-toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ct-org-toolbar-actions { display: flex; align-items: center; gap: 6px; }
.ct-org-back-icon, .ct-org-toolbar-actions .ct-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: transparent; border: 1px solid var(--cj-border-mid);
  color: var(--cj-text-mid); cursor: pointer; font-size: 15px;
  transition: all .15s;
}
.ct-org-back-icon:hover, .ct-org-toolbar-actions .ct-theme-toggle:hover {
  background: rgba(0,169,157,0.1); color: var(--cj-teal-dark); border-color: rgba(0,169,157,0.4);
}

.ct-org-nav {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: var(--cj-toggle-bg); border: 1px solid var(--cj-border);
  border-radius: 30px; padding: 3px;
}
.ct-org-nav-btn {
  font-size: 12px; font-weight: 700; color: var(--cj-text-soft);
  padding: 7px 13px; border-radius: 24px; text-decoration: none;
  white-space: nowrap; transition: all .15s;
}
.ct-org-nav-btn:hover { color: var(--cj-navy); }
.ct-org-nav-btn.active { background: var(--cj-card-bg); color: var(--cj-teal-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
#ct-app[data-theme="dark"] .ct-org-nav-btn.active { color: var(--cj-teal-mid); }

@media (max-width: 780px) {
  /* Stacking the toolbar used to drop the back and theme buttons to the
     bottom right, below the section nav — a long way from where a back
     control is looked for. Pinned to the top right corner instead, with
     the identity block padded so a long org name never runs under them. */
  .ct-org-toolbar { position: relative; flex-direction: column; align-items: flex-start; padding: 20px 20px 22px; }
  .ct-org-toolbar-right { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .ct-org-navmenu { width: 100%; order: 1; }
  .ct-org-toolbar-actions { position: absolute; top: 14px; right: 14px; order: 0; margin-left: 0; z-index: 2; }
  .ct-org-toolbar-id { padding-right: 84px; }
}

/* Stat cards — clean hairline border, tabular numerals, and a slim
   colour-coded left rail per metric instead of one flat teal box for all
   four. Restrained shadow, no gradient noise — reads as a proper metrics
   row rather than four plain rectangles. */
.ct-org-stat-card {
  position: relative;
  padding: 13px 14px 13px 16px;
  border-radius: 10px;
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border-mid);
  box-shadow: 0 1px 2px rgba(13,43,62,0.03), 0 8px 20px -16px rgba(13,43,62,0.28);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ct-org-stat-card::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px;
  background: var(--ct-stat-accent, var(--cj-teal));
}
.ct-org-stat-card:hover {
  border-color: var(--ct-stat-accent, var(--cj-teal));
  box-shadow: 0 1px 2px rgba(13,43,62,0.04), 0 12px 26px -16px rgba(13,43,62,0.32);
  transform: translateY(-1px);
}
.ct-org-stat-teal  { --ct-stat-accent: var(--cj-teal); }
.ct-org-stat-gold  { --ct-stat-accent: #D9A62E; }
.ct-org-stat-navy  { --ct-stat-accent: var(--cj-navy-mid); }
.ct-org-stat-coral { --ct-stat-accent: #E8763F; }

.ct-org-stat-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ct-org-stat-icon {
  width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ct-stat-accent, var(--cj-teal)) 14%, transparent);
  color: var(--ct-stat-accent, var(--cj-teal-dark)); font-size: 10px;
}
.ct-org-stat-label { font-size: 10px; letter-spacing: 0.06em; }
.ct-org-stat-val { font-size: 17px; font-weight: 800; margin-top: 0; font-variant-numeric: tabular-nums; }
.ct-org-stat-val-sm { font-size: 13px; }
.ct-org-stat-val-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ct-org-stat-figure { min-width: 0; }
/* Split value row (streak cards only) — two paired figures separated by a
   hairline rule: the run currently going on the left, the all-time total
   on the right. Each carries its own caption, so neither number can be
   read as the other's timeframe. The rule stretches the full row height
   while both figures stay bottom-aligned. */
.ct-org-stat-val-row-split { gap: 12px; }
.ct-org-stat-count {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  align-self: stretch; flex-shrink: 0; text-align: right;
  padding-left: 12px; border-left: 1px solid var(--cj-border);
}
.ct-org-stat-count-num {
  font-size: 15px; font-weight: 800; color: var(--ct-stat-accent, var(--cj-navy));
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
/* Captions under both figures — deliberately quieter than the card label
   above them so the row reads figure-first, caption-second. */
.ct-org-stat-cap,
.ct-org-stat-count-label {
  font-size: 9.5px; font-weight: 600; color: var(--cj-text-soft);
  line-height: 1.25; margin-top: 3px;
}
.ct-org-stat-count-label { max-width: 96px; }
/* Generic full/short text swap, same idea as .ct-amt-full / .ct-amt-short
   on the feed rows: the long wording everywhere, the short wording on
   phones. Used by the streak caption and the org card header. */
.ct-cap-short { display: none; }
.ct-org-stat-sub {
  font-size: 10.5px; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--cj-border);
}
.ct-org-stat-sub-main { display: block; }
.ct-org-stat-subrow { display: flex; align-items: center; gap: 12px; }
.ct-org-stat-period-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 9px; font-weight: 900; letter-spacing: 0.04em;
  color: var(--ct-stat-accent, var(--cj-teal-dark));
  background: color-mix(in srgb, var(--ct-stat-accent, var(--cj-teal)) 18%, transparent);
  border-radius: 4px; padding: 2px 5px;
}
.ct-org-stat-subrow .ct-wow-up,
.ct-org-stat-subrow .ct-wow-down { flex-shrink: 0; }
.ct-org-stat-spark { display: inline-flex; flex: 1 1 auto; min-width: 0; }
.ct-org-stat-spark svg { display: block; width: 100%; height: 24px; }

/* Chart + activity feed are permanently-dark cards (same treatment as the
   dashboard's own cause chart / live feed), so the components they reuse
   — .ct-cause-period-toggle, .ct-act-row, axis labels — read correctly
   without fighting a light background in light mode. */
.ct-org-chart-card { position: relative; }
.ct-org-chart-card .ct-section-title,
.ct-org-feed-card .ct-section-title { color: #fff; }
.ct-org-chart-card .ct-section-sub,
.ct-org-feed-card .ct-section-sub { color: rgba(255,255,255,0.4); }
.ct-org-feed-card { display: flex; flex-direction: column; }
.ct-org-feed-card #ct-org-feed { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8px; }
.ct-org-feed-card #ct-org-feed::-webkit-scrollbar { width: 5px; }
.ct-org-feed-card #ct-org-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.ct-org-chart-svg .ct-org-chart-hit { cursor: crosshair; }
.ct-org-chart-dot { transition: r .1s ease; }
.ct-org-chart-tooltip {
  position: absolute; transform: translate(-50%, -115%);
  background: #0D2B3E; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 7px 10px; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35); z-index: 5; white-space: nowrap;
}
.ct-org-tip-val { font-size: 13px; font-weight: 800; color: #fff; }
.ct-org-tip-sub { font-size: 11px; font-weight: 600; color: #E8763F; margin-top: 2px; }
.ct-org-tip-pct { font-weight: 500; color: rgba(255,255,255,0.6); }
.ct-org-tip-lbl { font-size: 10.5px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.ct-org-chart-legend { margin-top: 10px; }

@media (max-width: 480px) {
  .ct-org-toolbar-logo-img { width: 46px; height: 46px; }
}
/* ── BOARD & TEAM ────────────────────────────────────────────────────────
   Sits under About for every organization (donor or service org alike).
   Photo-card grid, quietly classy — no color gimmicks, just clean cards
   that lean on the same card/border tokens as the rest of the page. */
.ct-org-board-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}
.ct-org-board-member { text-align: center; }
.ct-org-board-photo-wrap {
  position: relative; display: inline-block; margin-bottom: 12px;
  border-radius: 50%;
}
/* Whole photo is the click target when a LinkedIn URL is present (the
   wrap renders as an <a> in that case — see renderOrgBoard() in
   ct-script.js). Hover/focus feedback is box-shadow only — no transform
   on the image or its wrapper (a fractional-pixel transform forces the
   browser to resample/blur the image on repaint).

   Belt-and-suspenders: some themes ship a generic hover-blur/fade effect
   for any "<a><img></a>" pattern (thumbnail/gallery hover treatment).
   Force-neutralize anything a theme might apply on hover/focus/active so
   ONLY our own box-shadow ring shows. */
a.ct-org-board-photo-wrap { cursor: pointer; }
a.ct-org-board-photo-wrap,
a.ct-org-board-photo-wrap:hover,
a.ct-org-board-photo-wrap:focus,
a.ct-org-board-photo-wrap:focus-visible,
a.ct-org-board-photo-wrap:active,
a.ct-org-board-photo-wrap img,
a.ct-org-board-photo-wrap:hover img,
a.ct-org-board-photo-wrap:focus img,
a.ct-org-board-photo-wrap:focus-visible img,
a.ct-org-board-photo-wrap:active img,
a.ct-org-board-photo-wrap .ct-org-board-photo,
a.ct-org-board-photo-wrap:hover .ct-org-board-photo,
a.ct-org-board-photo-wrap:focus .ct-org-board-photo,
a.ct-org-board-photo-wrap:focus-visible .ct-org-board-photo,
a.ct-org-board-photo-wrap:active .ct-org-board-photo {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
a.ct-org-board-photo-wrap:hover .ct-org-board-photo,
a.ct-org-board-photo-wrap:focus-visible .ct-org-board-photo {
  box-shadow: 0 0 0 1px var(--cj-teal-dark), 0 6px 16px rgba(0,0,0,.18) !important;
}
.ct-org-board-photo {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--cj-card-bg); box-shadow: 0 0 0 1px var(--cj-border), var(--cj-shadow);
  display: block;
}
.ct-org-board-photo-placeholder {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--cj-toggle-bg); box-shadow: 0 0 0 1px var(--cj-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cj-text-soft); font-size: 34px;
}
.ct-org-board-linkedin {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cj-teal-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid var(--cj-card-bg);
  transition: background .15s ease;
  pointer-events: none; /* the whole wrap is already the link */
}
a.ct-org-board-photo-wrap:hover .ct-org-board-linkedin,
a.ct-org-board-photo-wrap:focus-visible .ct-org-board-linkedin {
  background: var(--cj-teal);
}
.ct-org-board-name { font-size: 14.5px; font-weight: 800; color: var(--cj-navy); line-height: 1.3; }
.ct-org-board-role { font-size: 12px; font-weight: 600; color: var(--cj-teal-dark); margin-top: 2px; }
.ct-org-board-bio { font-size: 12px; color: var(--cj-text-mid); line-height: 1.55; margin-top: 8px; }

/* ── GRANTS ──────────────────────────────────────────────────────────────
   Donor organizations only. A grant PROGRAM this org runs (e.g. "AI
   Grant") — visually distinct from a donation row: status pill up top,
   optional apply CTA, and a quiet "awarded to" line once it's been given
   out. */
/* Two per row on tablet/desktop so a short grant list doesn't read as one
   long column of empty-feeling white space; back to a single column once
   there isn't room for two to sit comfortably side by side. */
.ct-org-grants-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 640px) { .ct-org-grants-list { grid-template-columns: 1fr; } }

/* Styled like a receipt/bill stub rather than a plain bordered box: a soft
   tinted card with a status-colored spine down the left edge, a large
   faint watermark icon anchored in the corner for a little visual
   personality, and a dashed "tear line" separating the grant's details
   from its amount/date — same grammar as a billing line item, plus enough
   color and texture that it doesn't read as a flat white rectangle. */
.ct-org-grant-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--cj-border); border-radius: 16px;
  padding: 18px 20px 16px 22px;
  background: linear-gradient(155deg, var(--cj-card-bg) 55%, var(--cj-teal-light) 155%);
  box-shadow: 0 3px 14px rgba(13,43,62,0.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.ct-org-grant-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--cj-teal), var(--cj-teal-dark));
}
.ct-org-grant-card:hover {
  box-shadow: 0 10px 28px rgba(13,43,62,0.12); transform: translateY(-3px);
  border-color: var(--cj-border-mid);
}
.ct-org-grant-watermark {
  position: absolute; right: -8px; bottom: -18px; font-size: 86px; line-height: 1;
  color: var(--cj-teal); opacity: .06; transform: rotate(-10deg); pointer-events: none;
}
.ct-org-grant-card[data-status="closed"] { background: linear-gradient(155deg, var(--cj-card-bg) 55%, rgba(122,155,170,0.10) 155%); }
.ct-org-grant-card[data-status="closed"]::before { background: linear-gradient(180deg, #9AAAB4, #6E828E); }
.ct-org-grant-card[data-status="closed"] .ct-org-grant-watermark { color: var(--cj-text-soft); }
.ct-org-grant-card[data-status="awarded"] { background: linear-gradient(155deg, var(--cj-card-bg) 55%, rgba(201,168,76,0.12) 155%); }
.ct-org-grant-card[data-status="awarded"]::before { background: linear-gradient(180deg, #E0BB5C, #A5822A); }
.ct-org-grant-card[data-status="awarded"] .ct-org-grant-watermark { color: #a5822a; }
.ct-org-grant-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; position: relative; }
.ct-org-grant-name { font-size: 14.5px; font-weight: 800; color: var(--cj-navy); line-height: 1.35; }
.ct-org-grant-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; flex-shrink: 0; margin-top: 1px;
}
.ct-org-grant-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ct-org-grant-status-open      { background: rgba(0,169,157,0.14); color: var(--cj-teal-dark); }
.ct-org-grant-status-closed    { background: rgba(122,155,170,0.18); color: var(--cj-text-mid); }
.ct-org-grant-status-awarded   { background: rgba(201,168,76,0.18); color: #a5822a; }
.ct-org-grant-desc { font-size: 12.5px; color: var(--cj-text-mid); line-height: 1.6; margin-top: 7px; position: relative; }
.ct-org-grant-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--cj-border-mid); flex-wrap: wrap; position: relative;
}
.ct-org-grant-amount {
  display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--cj-teal), var(--cj-teal-dark));
  padding: 5px 13px; border-radius: 999px; font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(0,169,157,0.32);
}
.ct-org-grant-card[data-status="awarded"] .ct-org-grant-amount {
  background: linear-gradient(135deg, #E0BB5C, #A5822A); box-shadow: 0 3px 10px rgba(165,130,42,0.32);
}
.ct-org-grant-card[data-status="closed"] .ct-org-grant-amount {
  background: linear-gradient(135deg, #9AAAB4, #6E828E); box-shadow: 0 3px 10px rgba(110,130,142,0.28);
}
.ct-org-grant-date { font-size: 11.5px; color: var(--cj-text-soft); }
.ct-org-grant-apply {
  margin-left: auto; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--cj-teal-dark); padding: 6px 14px; border-radius: 20px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s ease;
}
.ct-org-grant-apply:hover { background: var(--cj-teal); }
.ct-org-grant-recipient {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--cj-border);
  font-size: 12.5px; color: var(--cj-text-mid);
}

/* ── LEADERBOARD ─────────────────────────────────────────────────────────
   Top 5 recipients of this org's grants, donor organizations only. Ranked
   rows with a medal for the top 3 and a proportional amount bar. */
.ct-org-lb-list { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; margin-right: -4px; }
.ct-org-lb-list::-webkit-scrollbar { width: 5px; }
.ct-org-lb-list::-webkit-scrollbar-thumb { background: var(--cj-border-mid); border-radius: 4px; }
/* Pinned to the exact same fixed height as .ct-act-feed-section (the feed
   card next to it, see ct-org-activity-split), so the "Largest recipients"
   column always matches the feed's height regardless of whether the avg-gift
   banner + 5 rows happen to add up to more or less room than that — extra
   content scrolls inside the list instead of stretching the whole card
   taller than its neighbor. */
.ct-org-lb-card { height: 460px; display: flex; flex-direction: column; overflow: hidden; }
.ct-org-lb-card .ct-section-header, .ct-org-lb-card .ct-org-lb-avg { flex: 0 0 auto; }
.ct-org-lb-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 6px; border-bottom: 1px solid var(--cj-border);
}
.ct-org-lb-row:last-child { border-bottom: none; }
.ct-org-lb-rank { width: 30px; flex-shrink: 0; text-align: center; font-size: 18px; }
.ct-org-lb-rank-num { font-size: 13px; font-weight: 800; color: var(--cj-text-soft); }
.ct-org-lb-avatar { flex-shrink: 0; }
.ct-org-lb-body { flex: 1 1 auto; min-width: 0; }
.ct-org-lb-name { font-size: 13.5px; font-weight: 700; color: var(--cj-navy); margin-bottom: 6px; }
.ct-org-lb-country { font-size: 11px; margin-left: 2px; }
.ct-org-lb-bar-track { height: 5px; border-radius: 3px; background: var(--cj-toggle-bg); overflow: hidden; }
.ct-org-lb-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cj-teal-dark), var(--cj-teal)); }
.ct-org-lb-amount { font-size: 14px; font-weight: 800; color: var(--cj-navy); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* "Average gift" stat banner — sits between the card header and the top-5
   list, so the list sits a little lower than before. That's deliberate:
   with only 5 rows the card often had blank space at the bottom, so this
   banner borrows some of that room up top instead of adding real height. */
.ct-org-lb-avg {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0 16px; padding: 12px 14px;
  border-radius: 12px; background: linear-gradient(135deg, var(--cj-teal-light), rgba(0,169,157,0.02));
  border: 1px solid var(--cj-border-mid);
}
.ct-org-lb-avg-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--cj-teal), var(--cj-teal-dark));
  color: #fff; font-size: 16px; box-shadow: 0 3px 10px rgba(0,169,157,0.35);
}
.ct-org-lb-avg-body { min-width: 0; }
.ct-org-lb-avg-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cj-teal-dark); opacity: .85; line-height: 1.3;
}
.ct-org-lb-avg-value {
  font-size: 19px; font-weight: 800; color: var(--cj-navy);
  font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 1px;
}
#ct-app[data-theme="dark"] .ct-org-lb-avg-icon { box-shadow: 0 3px 10px rgba(0,169,157,0.22); }

@media (max-width: 640px) {
  .ct-org-board-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .ct-org-board-photo, .ct-org-board-photo-placeholder { width: 84px; height: 84px; }
  .ct-org-grant-apply { margin-left: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TAIL — org stat cards
   These override base rules declared earlier in this file. A media query
   adds no specificity, so a `.ct-org-stat-count` rule inside @media still
   loses to a plain `.ct-org-stat-count` rule written below it. Anything
   that has to beat those base declarations belongs here, last.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .ct-cap-full { display: none; }
  .ct-cap-short { display: inline; }
  /* Streak card: the all-time total reads on one line beside its figure
     instead of stacking under it, and the left caption goes — "Longest"
     on the line below already says what the big number is. */
  .ct-org-stat-cap { display: none; }
  .ct-org-stat-count {
    flex-direction: row; align-items: baseline; align-self: auto;
    gap: 4px; padding-left: 10px;
  }
  .ct-org-stat-count-num { font-size: 14px; }
  .ct-org-stat-count-label { margin-top: 0; max-width: none; white-space: nowrap; }
  .ct-org-stat-val-row-split { gap: 10px; }
  /* Largest recipients sizes to its own content on a phone rather than
     holding the desktop card's fixed 460px. */
  .ct-org-lb-card { height: auto; max-height: 380px; }
}
@media (max-width: 480px) {
  .ct-org-stat-val-row-split { gap: 8px; }
  .ct-org-stat-count { padding-left: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TAIL — Top Stories header
   Same source-order reason as the block above: these beat the base
   .ct-top-stories-section rules declared earlier in the file.

   Layout: the title/strapline wrapper is dissolved with display:contents
   so the h2, the strapline and the News link all become direct children of
   the header. The h2 and the link then share the top line, and the
   strapline is forced onto a full-width row of its own below them — which
   is the only way it gets the whole card width and stays on one line.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .ct-top-stories-section .ct-section-header {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 5px 10px;
    padding: 14px 16px 12px;
  }
  .ct-top-stories-section .ct-section-header > div { display: contents; }
  .ct-top-stories-section .ct-section-title { font-size: 15px; }
  .ct-top-stories-section .ct-section-sub {
    order: 1; flex: 1 0 100%; margin-top: 0; font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Trimmed so it reads as a quiet corner action next to the heading
     rather than a second focal point. */
  .ct-top-stories-section .ct-top-stories-viewall {
    align-self: center; font-size: 10.5px; font-weight: 700;
    padding: 3px 9px; gap: 4px;
  }
  .ct-top-stories-section .ct-top-stories-viewall i { font-size: 9.5px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TAIL — section nav as a dropdown menu
   Below 780px both section navs (hero jump-links, org profile sections)
   collapse into a single-line menu button: it names whichever section is
   currently in view, and opens the full list as a panel beneath itself.
   Replaces the icon-only strip on the hero and the sideways-scrolling
   pill row on the org page — neither of which showed where you were.

   Kept last for the usual reason: these beat base .ct-hero-nav /
   .ct-org-nav declarations written earlier, and media queries add no
   specificity of their own.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .ct-navmenu-toggle {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 12px; border-radius: 11px; cursor: pointer;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.11);
    color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .ct-navmenu-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; font-size: 12px;
    background: rgba(0,169,157,0.18); color: var(--cj-teal-mid);
  }
  .ct-navmenu-label {
    flex: 1 1 auto; min-width: 0; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ct-navmenu-chevron { font-size: 13px; opacity: 0.55; transition: transform .2s ease; }
  /* The hero is a flex column with its own 6px gap, so the desktop
     grid-row margin would double up here. */
  .ct-hero-navmenu { margin-top: 3px; }
  .ct-navmenu.is-open .ct-navmenu-chevron { transform: rotate(180deg); opacity: 1; }

  /* The panel floats over the content below rather than pushing it down,
     so opening the menu never shifts the page under the thumb. */
  .ct-navmenu .ct-navmenu-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 6px; border-radius: 12px;
    background: #0D2B3E; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 18px 44px -14px rgba(0,0,0,0.6);
    max-height: 62vh; overflow-y: auto; overflow-x: hidden;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .ct-navmenu.is-open .ct-navmenu-panel { display: flex; }
  .ct-navmenu .ct-hero-nav-link,
  .ct-navmenu .ct-org-nav-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; padding: 10px 11px; border-radius: 8px;
    font-size: 13px; white-space: nowrap;
  }
  /* Labels come back inside the panel — the icon-only treatment only ever
     made sense on a single cramped line. */
  .ct-navmenu .ct-hero-nav-link span { display: inline; }
  .ct-navmenu .ct-hero-nav-link.active,
  .ct-navmenu .ct-org-nav-btn.active { box-shadow: none; }

  /* .ct-hero has overflow:hidden to keep its photo inside the rounded
     corners, which would also crop the panel. JS un-clips it for as long
     as the menu is open; the bg layer carries its own radius (above), so
     nothing spills at the corners while it is. */
  .ct-hero.ct-hero-menu-open { overflow: visible; }

  #ct-app:not([data-theme="dark"]) .ct-navmenu-toggle {
    background: rgba(255,255,255,0.9); border-color: rgba(13,43,62,0.12); color: var(--cj-navy);
  }
  #ct-app:not([data-theme="dark"]) .ct-navmenu-icon { color: var(--cj-teal-dark); background: rgba(0,169,157,0.12); }
  #ct-app:not([data-theme="dark"]) .ct-navmenu .ct-navmenu-panel {
    background: #fff; border-color: rgba(13,43,62,0.12);
    box-shadow: 0 18px 44px -16px rgba(13,43,62,0.38);
  }
  /* The org toolbar is a light card in both themes, so its menu follows
     the card rather than the hero's dark panel. */
  .ct-org-navmenu .ct-navmenu-toggle {
    background: var(--cj-toggle-bg); border-color: var(--cj-border-mid); color: var(--cj-navy);
  }
  .ct-org-navmenu .ct-navmenu-panel { background: var(--cj-card-bg); border-color: var(--cj-border-mid); }
  #ct-app[data-theme="dark"] .ct-org-navmenu .ct-navmenu-panel { box-shadow: 0 18px 44px -14px rgba(0,0,0,0.6); }
}

/* ── ORGANIZATION INDEX ────────────────────────────────────────────────────
   Server-rendered directory of every tracked org, sitting at the foot of the
   Data view. Exists primarily so the raw HTML contains real internal links to
   every profile (see the markup comment in charity-tracker.php), but it's
   styled as a genuine, readable directory because that's what it is — a
   hidden link farm would be cloaking, and this is useful to a reader who
   wants to browse the full set rather than page through a table. */
.ct-org-index {
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-lg);
  padding: 20px 22px 22px;
  margin-bottom: 16px;
}
.ct-org-index-title { margin-bottom: 14px; }
/* Multi-column so a long list stays compact instead of running the page on
   for hundreds of rows; collapses to fewer columns as the screen narrows. */
.ct-org-index-list {
  list-style: none; margin: 0; padding: 0;
  columns: 4; column-gap: 22px;
}
.ct-org-index-list li { break-inside: avoid; margin-bottom: 7px; }
.ct-org-index-list a {
  font-size: 12.5px; font-weight: 600; color: var(--cj-text-mid);
  text-decoration: none; line-height: 1.35;
  display: block; padding: 2px 0;
  transition: color .12s;
}
.ct-org-index-list a:hover { color: var(--cj-teal-dark); text-decoration: underline; }
@media (max-width: 1000px) { .ct-org-index-list { columns: 3; } }
@media (max-width: 780px)  { .ct-org-index-list { columns: 2; } .ct-org-index { padding: 16px 16px 18px; } }
@media (max-width: 480px)  { .ct-org-index-list { columns: 2; column-gap: 14px; } }

/* ── FRONTLINE WATCH PRIVACY NOTE ─────────────────────────────────────────
   Explains why some cases carry no name or photograph. Styled as a quiet
   editorial aside rather than a warning banner: this is a considered policy
   statement about protecting people, and a yellow alert box would read as an
   error or a disclaimer. The left rule and muted surface mark it as separate
   from the case data without shouting over it. */
.ct-aid-privacy-note {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 18px; padding: 15px 18px;
  background: var(--cj-toggle-bg);
  border: 1px solid var(--cj-border);
  border-left: 3px solid var(--cj-teal);
  border-radius: 10px;
}
.ct-aid-privacy-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(0,169,157,0.12); color: var(--cj-teal-dark);
  font-size: 17px;
}
.ct-aid-privacy-body { min-width: 0; }
.ct-aid-privacy-title {
  margin: 0 0 4px; font-size: 13px; font-weight: 800;
  color: var(--cj-navy); letter-spacing: -0.01em;
}
/* Capped at a comfortable reading measure — this is prose, and a paragraph
   run full-width across a desktop card is genuinely harder to read. */
.ct-aid-privacy-text {
  margin: 0; font-size: 12.5px; line-height: 1.6;
  color: var(--cj-text-mid); max-width: 78ch;
}
#ct-app[data-theme="dark"] .ct-aid-privacy-icon { color: var(--cj-teal-mid); }
@media (max-width: 700px) {
  .ct-aid-privacy-note { gap: 11px; padding: 13px 14px; margin-bottom: 14px; }
  .ct-aid-privacy-icon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
  .ct-aid-privacy-title { font-size: 12.5px; }
  .ct-aid-privacy-text { font-size: 12px; line-height: 1.55; }
}

/* ── SOURCE PILL (feed rows) ───────────────────────────────────────────────
   Links a figure to the press release or filing it came from. Sits in the
   gap between the row body and the amount, so it costs no vertical height
   and the amount column stays aligned down the feed.

   Outlined rather than filled on purpose: the cause pill on the line above
   is already a filled chip, and two filled chips per row compete with each
   other instead of reading as label-plus-action. flex-shrink:0 keeps it from
   being squeezed to nothing when a long org name fills the row. */
.ct-live-source {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 2.5px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--cj-teal-dark); text-decoration: none;
  border: 1px solid rgba(0,169,157,0.4);
  background: transparent;
  transition: background .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.ct-live-source i { font-size: 11px; }
.ct-live-source:hover {
  background: var(--cj-teal); border-color: var(--cj-teal); color: #fff;
}
/* The feed sits on a dark panel in both themes, so the resting state needs
   its own lighter treatment there rather than inheriting the light-mode teal. */
#ct-app[data-theme="dark"] .ct-live-source,
.ct-act-feed-section .ct-live-source {
  color: var(--cj-teal-mid); border-color: rgba(0,169,157,0.45);
}
#ct-app[data-theme="dark"] .ct-live-source:hover,
.ct-act-feed-section .ct-live-source:hover { color: #06201D; background: var(--cj-teal); }
/* Org profile feed: icon only, at every width. That row carries the most of
   any in the system — recipient promoted onto the name line AND the visible
   highlight sentence below it — so the ~40px the word costs is worth more as
   reading room for the highlight than as a label. The title attribute and
   aria-label carry the meaning the word was providing.

   Scoped on .ct-org-feed-card, which only the org profile feed has. */
.ct-org-feed-card .ct-live-source {
  font-size: 0; gap: 0; padding: 4px 6px; border-radius: 50%;
}
.ct-org-feed-card .ct-live-source i { font-size: 12px; }

/* Phones: the label goes, the icon stays — the row is tight enough that a
   word here would start squeezing the recipient line. */
@media (max-width: 560px) {
  .ct-live-source { font-size: 0; padding: 4px 6px; gap: 0; border-radius: 50%; }
  .ct-live-source i { font-size: 12px; }
}

/* ── SERVER-RENDERED CASE CARDS ────────────────────────────────────────────
   The pre-JavaScript rendering of a Frontline Watch case: title, date,
   place, organization, summary. Deliberately simpler than the interactive
   card the script builds (no rail, no expand, no victim rows) — it exists so
   crawlers and AI readers get the actual records instead of "No data yet",
   and so a slow script doesn't leave the page looking empty. */
.ct-aid-case-static {
  display: block; padding: 14px 18px 13px;
  border-bottom: 1px solid var(--cj-border);
}
.ct-aid-case-static:last-child { border-bottom: none; }
.ct-aid-case-static .ct-aid-case-title {
  margin: 0 0 5px; font-size: 14.5px; font-weight: 800;
  line-height: 1.35; letter-spacing: -0.01em;
}
.ct-aid-case-static .ct-aid-case-title a { color: var(--cj-navy); text-decoration: none; }
.ct-aid-case-static .ct-aid-case-title a:hover { color: var(--cj-teal-dark); text-decoration: underline; }
#ct-app[data-theme="dark"] .ct-aid-case-static .ct-aid-case-title a { color: #fff; }
.ct-aid-case-static .ct-aid-case-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
  font-size: 11px; color: var(--cj-text-soft);
}
.ct-aid-case-static .ct-aid-case-summary {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--cj-text-mid);
  max-width: 78ch;
}

/* ── SERVER-RENDERED FALLBACKS ─────────────────────────────────────────────
   Plain markup for sections that JavaScript later replaces with their
   interactive versions. They exist so crawlers, AI readers and anyone whose
   script hasn't run yet get the actual content instead of an empty box —
   styled enough to look deliberate in that brief window, not styled to
   imitate the richer versions that supersede them. */

/* Data tables standing in for canvas/SVG charts. For a reader that can't see
   a drawing, the numbers behind it are strictly more useful than the picture,
   so these are real tables rather than an attempt at fake chart markup. */
.ct-sr-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; color: var(--cj-text-mid);
}
.ct-sr-table th, .ct-sr-table td {
  padding: 5px 8px; text-align: right;
  border-bottom: 1px solid var(--cj-border);
}
.ct-sr-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cj-text-soft); }
.ct-sr-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--cj-navy); }
#ct-app[data-theme="dark"] .ct-sr-table th[scope="row"] { color: #E8F1F4; }

/* Cause legend rows — the donut's numbers, which are the part that carries
   meaning outside the drawing. */
.ct-legend-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--cj-border);
}
.ct-legend-row:last-child { border-bottom: none; }
.ct-legend-name { font-weight: 600; color: var(--cj-navy); }
.ct-legend-val  { color: var(--cj-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
#ct-app[data-theme="dark"] .ct-legend-name { color: #E8F1F4; }

/* Board members and grant programmes on an org profile. */
.ct-org-board-item, .ct-org-grant-item {
  padding: 11px 0; border-bottom: 1px solid var(--cj-border);
}
.ct-org-board-item:last-child, .ct-org-grant-item:last-child { border-bottom: none; }
.ct-org-board-name, .ct-org-grant-name {
  font-size: 13px; font-weight: 800; color: var(--cj-navy); letter-spacing: -0.01em;
}
#ct-app[data-theme="dark"] .ct-org-board-name,
#ct-app[data-theme="dark"] .ct-org-grant-name { color: #fff; }
.ct-org-board-role, .ct-org-grant-meta {
  font-size: 11.5px; color: var(--cj-text-soft); margin-top: 2px;
}
.ct-org-board-bio, .ct-org-grant-desc {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--cj-text-mid); max-width: 78ch;
}

/* ── ORG PAGE ACTIVITY FEED HEIGHT (PHONES ONLY) ──────────────────────────
   Phones cap this feed at 380px, which on an org profile is roughly five
   rows before scrolling — thin for what is that organization's full record
   rather than a rolling sample. Raised to 560px here, still short of filling
   a typical phone screen so the sections below stay discoverable.

   Tablet and desktop are deliberately untouched and keep the shared 460px.
   Scoped to .ct-org-feed-card so the homepage feeds are unaffected. */
@media (max-width: 700px) {
  .ct-org-feed-card.ct-act-feed-section { height: 560px; }
}

/* ── BIGGEST PROGRAMS BY REACH ────────────────────────────────────────────
   The activity-org counterpart to "Largest recipients". Reuses that card's
   row structure wholesale — only the bar colour and the extra meta line are
   specific to it, so the two read as the same component measured on a
   different axis rather than two unrelated widgets. */
.ct-org-lb-meta {
  font-size: 10.5px; color: var(--cj-text-soft);
  margin: 1px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Coral rather than teal: teal reads as money everywhere else on the profile
   (donations, giving chart), so people-reached gets the accent already used
   for activity streaks and the activity bars on the impact chart. */
.ct-org-lb-bar-impact { background: linear-gradient(90deg, #E8763F, #F0A070); }