/* ============================================================================
   Archive Dusk Palette — Unified 6-tier color system
   (deliberate-flooding-meridian I8, 2026-04-19)
   ----------------------------------------------------------------------------
   Defines the canonical 6-tier palette used to color-code FFA Control Panel
   items and Story / Chapter panels by theme_category. Each tier has three
   shades: base / light / deep.

   Tier mapping (first-cut, per /listen 2026-04-19):
     Tier 1 — Intelligence       — Indigo
     Tier 2 — Stories            — Violet
     Tier 3 — Historical context — Sage / Teal
     Tier 4 — Engagement         — Rose
     Tier 5 — Operations         — Amber
     Tier 6 — Coming of Age      — Copper

   theme_category → tier mapping:
     elders_origins           → tier 1 indigo
     travel_adventure         → tier 2 violet
     historical_context       → tier 3 sage
     community_work           → tier 4 rose
     celebrations_milestones  → tier 5 amber
     coming_of_age            → tier 6 copper

   Apply by adding .ffa-tier-N class OR by setting the CSS custom property
   --ffa-active-tier to one of the six tier base hues at component root.
   ============================================================================ */

:root {
  /* Tier 1 — Indigo (Intelligence / Elders & Origins) */
  --ffa-tier-1-base:  #4338CA;
  --ffa-tier-1-light: #818CF8;
  --ffa-tier-1-deep:  #312E81;

  /* Tier 2 — Violet (Stories / Travel & Adventure) */
  --ffa-tier-2-base:  #7C3AED;
  --ffa-tier-2-light: #C4B5FD;
  --ffa-tier-2-deep:  #4C1D95;

  /* Tier 3 — Sage / Teal (Historical Context) */
  --ffa-tier-3-base:  #0F766E;
  --ffa-tier-3-light: #5EEAD4;
  --ffa-tier-3-deep:  #134E4A;

  /* Tier 4 — Rose (Engagement / Community & Service) */
  --ffa-tier-4-base:  #BE185D;
  --ffa-tier-4-light: #F9A8D4;
  --ffa-tier-4-deep:  #831843;

  /* Tier 5 — Amber (Operations / Celebrations & Milestones) */
  --ffa-tier-5-base:  #D97706;
  --ffa-tier-5-light: #FCD34D;
  --ffa-tier-5-deep:  #92400E;

  /* Tier 6 — Copper (Coming of Age) */
  --ffa-tier-6-base:  #B45309;
  --ffa-tier-6-light: #FDBA74;
  --ffa-tier-6-deep:  #7C2D12;
}

/* Tier classes — apply to a panel root to set --ffa-active-tier-* shorthands. */
.ffa-tier-1 { --ffa-active-base: var(--ffa-tier-1-base); --ffa-active-light: var(--ffa-tier-1-light); --ffa-active-deep: var(--ffa-tier-1-deep); }
.ffa-tier-2 { --ffa-active-base: var(--ffa-tier-2-base); --ffa-active-light: var(--ffa-tier-2-light); --ffa-active-deep: var(--ffa-tier-2-deep); }
.ffa-tier-3 { --ffa-active-base: var(--ffa-tier-3-base); --ffa-active-light: var(--ffa-tier-3-light); --ffa-active-deep: var(--ffa-tier-3-deep); }
.ffa-tier-4 { --ffa-active-base: var(--ffa-tier-4-base); --ffa-active-light: var(--ffa-tier-4-light); --ffa-active-deep: var(--ffa-tier-4-deep); }
.ffa-tier-5 { --ffa-active-base: var(--ffa-tier-5-base); --ffa-active-light: var(--ffa-tier-5-light); --ffa-active-deep: var(--ffa-tier-5-deep); }
.ffa-tier-6 { --ffa-active-base: var(--ffa-tier-6-base); --ffa-active-light: var(--ffa-tier-6-light); --ffa-active-deep: var(--ffa-tier-6-deep); }

/* theme_category aliases — convenience class so JS can apply the literal
   theme_category value as a className without computing tier index. */
.ffa-theme-elders_origins           { --ffa-active-base: var(--ffa-tier-1-base); --ffa-active-light: var(--ffa-tier-1-light); --ffa-active-deep: var(--ffa-tier-1-deep); }
.ffa-theme-travel_adventure         { --ffa-active-base: var(--ffa-tier-2-base); --ffa-active-light: var(--ffa-tier-2-light); --ffa-active-deep: var(--ffa-tier-2-deep); }
.ffa-theme-historical_context       { --ffa-active-base: var(--ffa-tier-3-base); --ffa-active-light: var(--ffa-tier-3-light); --ffa-active-deep: var(--ffa-tier-3-deep); }
.ffa-theme-community_work           { --ffa-active-base: var(--ffa-tier-4-base); --ffa-active-light: var(--ffa-tier-4-light); --ffa-active-deep: var(--ffa-tier-4-deep); }
.ffa-theme-celebrations_milestones  { --ffa-active-base: var(--ffa-tier-5-base); --ffa-active-light: var(--ffa-tier-5-light); --ffa-active-deep: var(--ffa-tier-5-deep); }
.ffa-theme-coming_of_age            { --ffa-active-base: var(--ffa-tier-6-base); --ffa-active-light: var(--ffa-tier-6-light); --ffa-active-deep: var(--ffa-tier-6-deep); }

/* ============================================================================
   Mac Safari surface application — Story panels, Chapter rows, Sidebar
   (deliberate-flooding-meridian D7h, D7i, D8b, D8h, D8i — 2026-04-19)
   ============================================================================ */

/* Story card thumbnail (D7h) — replaces the emoji icon when cover_image_id present. */
.story-card .story-card-thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}
.story-card .story-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Story card summary line (D7h) — placed below subtitle, above meta. */
.story-card .story-card-summary {
    margin: 6px 0 8px;
    font-size: calc(0.875rem * var(--type-scale, 1));
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Theme-tier coloring on Mac Safari story cards (D8h) — full-width colored
   panel using the active tier base + deep gradient. Inherits from .ffa-theme-X
   alias class on the card root which sets --ffa-active-* vars. */
.story-card[class*="ffa-theme-"] {
    background: linear-gradient(135deg, var(--ffa-active-base) 0%, var(--ffa-active-deep) 100%) !important;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}
.story-card[class*="ffa-theme-"] .story-card-title,
.story-card[class*="ffa-theme-"] .story-card-subtitle,
.story-card[class*="ffa-theme-"] .story-card-summary,
.story-card[class*="ffa-theme-"] .story-card-meta,
.story-card[class*="ffa-theme-"] .story-card-persons {
    color: rgba(255, 255, 255, 0.94);
}
.story-card[class*="ffa-theme-"] .story-card-arrow {
    color: rgba(255, 255, 255, 0.7);
}

/* Biography card per-card tint (standardizing-mobile-chrome S1, #3 — Joe iPhone
   walk directive). The bio gallery card (stories-view.js renderStoryBioCard)
   now carries an inline per-card gradient (a distinct teal→green→amber-earth
   family hashed on story_id, DELIBERATELY unlike the tiers' indigo/violet/rose/
   copper) so Bios read as their own color category — desktop parity with the
   mobile band. The gradient is inline; this block flips the body text to white
   for contrast on the colored card. Buttons keep their own solid/light fills
   (.bio-watch-btn indigo, .bio-play/.bio-view light-indigo pills,
   .bio-attribution white), so they stay legible without change. Pre-S1 the
   `.bio-card.ffa-theme-biography` class was inert — the !important theme
   gradients above target `.story-card`, not `.bio-card`, and there is no
   `biography` tier mapping — so bios rendered as plain white cards. */
.bio-card.bio-card-tinted {
    border-color: rgba(255, 255, 255, 0.16);
}
.bio-card.bio-card-tinted .bio-card-title,
.bio-card.bio-card-tinted .bio-card-subtitle,
.bio-card.bio-card-tinted .bio-card-summary,
.bio-card.bio-card-tinted .bio-card-meta,
.bio-card.bio-card-tinted .bio-card-meta > span {
    color: rgba(255, 255, 255, 0.94);
}

/* Chapter thumbnail (D7i) — replaces the chapter-number badge when
   cover_media_id present. Number remains as overlay corner badge. */
.story-chapter-item .chapter-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    margin-right: 12px;
}
.story-chapter-item .chapter-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-chapter-item .chapter-thumb-num {
    position: absolute;
    bottom: 3px;
    right: 3px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border-radius: 11px;
    font-size: calc(11px * var(--type-scale, 1));
    font-weight: 700;
    line-height: 1;
}

/* Chapter row tier shading (D8i) — chapter inherits parent story's theme tier;
   per-chapter shade lerps light → deep across the chapter set. */
.story-chapter-item[class*="ffa-theme-"].chapter-shade-light {
    background: linear-gradient(135deg, var(--ffa-active-light) 0%, var(--ffa-active-base) 100%) !important;
    color: #fff;
}
.story-chapter-item[class*="ffa-theme-"].chapter-shade-mid {
    background: linear-gradient(135deg, var(--ffa-active-base) 0%, var(--ffa-active-base) 100%) !important;
    color: #fff;
}
.story-chapter-item[class*="ffa-theme-"].chapter-shade-deep {
    background: linear-gradient(135deg, var(--ffa-active-base) 0%, var(--ffa-active-deep) 100%) !important;
    color: #fff;
}
.story-chapter-item[class*="ffa-theme-"] .chapter-info,
.story-chapter-item[class*="ffa-theme-"] .chapter-info strong,
.story-chapter-item[class*="ffa-theme-"] .chapter-info p,
.story-chapter-item[class*="ffa-theme-"] .chapter-subtitle {
    color: rgba(255, 255, 255, 0.94);
}
.story-chapter-item[class*="ffa-theme-"] .chapter-expand-icon {
    color: rgba(255, 255, 255, 0.7);
}

/* Mac Safari sidebar tier accents (D8b) — REMOVED 2026-06-01 (Joe directive).
   The 4px left-border + active-background tier accents painted a contrasting
   hue against each button's own gradient fill (background-clip: border-box),
   reading as a foreign "second control" sliver on the left edge. The tier
   palette (elders/travel/historical/community/celebrations/coming-of-age) was
   mapped onto whatever menu-item class/data-view happened to match and never
   agreed with the v10.3 Color-Coded Control Panel Groups in styles.css — e.g.
   Leaderboard double-matched (tier-3 teal vs tier-4 pink). Removed so the
   Control Panel buttons render as clean single-color gradients. */

/* Additional Mac Safari card variants — Featured Stories section, History cards, Family Member stories panel. */

/* Featured Stories card with thumbnail (in stories-view.js renderFeaturedStoriesSection). */
.featured-story-card[class*="ffa-theme-"] {
    background: linear-gradient(135deg, var(--ffa-active-base) 0%, var(--ffa-active-deep) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Story History card thumbnail + summary (in stories-view.js renderStoryHistoryCard). */
.story-history-card .story-history-thumb {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}
.story-history-card .story-history-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-history-card .story-history-summary {
    margin: 6px 0;
    font-size: calc(0.85rem * var(--type-scale, 1));
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.story-history-card[class*="ffa-theme-"] {
    background: linear-gradient(135deg, var(--ffa-active-base) 0%, var(--ffa-active-deep) 100%) !important;
    color: #fff;
}
.story-history-card[class*="ffa-theme-"] .story-history-title,
.story-history-card[class*="ffa-theme-"] .story-history-subtitle,
.story-history-card[class*="ffa-theme-"] .story-history-summary,
.story-history-card[class*="ffa-theme-"] .story-history-meta,
.story-history-card[class*="ffa-theme-"] .story-history-stat {
    color: rgba(255, 255, 255, 0.94);
}

/* Family Member modal story card thumbnail (in stories-chapters.js loadPersonStoriesPanel). */
.fm-story-card .fm-story-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    margin-right: 10px;
}
.fm-story-card .fm-story-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fm-story-card[class*="ffa-theme-"] {
    background: linear-gradient(135deg, var(--ffa-active-base) 0%, var(--ffa-active-deep) 100%) !important;
    color: #fff;
}
.fm-story-card[class*="ffa-theme-"] .fm-story-title,
.fm-story-card[class*="ffa-theme-"] .fm-story-meta {
    color: rgba(255, 255, 255, 0.95);
}
.fm-story-card[class*="ffa-theme-"] .fm-story-arrow {
    color: rgba(255, 255, 255, 0.7);
}