/* ═══════════════════════════════════════════════════════════
   Contributor Dashboard — Subpage Styles
   Extends twin3_home/style.css tokens (cream/green light + dark forest/gold dark)
   Future: served at twin3.ai/contributor
   ═══════════════════════════════════════════════════════════ */

/* ── Extra Variables ──────────────────────────────────────── */
:root {
  --bg-card: #ffffff;
  --bg-card-glass: rgba(255, 255, 255, 0.75);
  --bg-code: #f0efe8;
  --text-faint: #a0a0a0;
  --accent-bg: rgba(74, 124, 89, 0.06);
  --border-soft: rgba(197, 217, 203, 0.5);
  --radius: 16px;
  /* Role accent colors — same in both modes, just with alpha adjustments */
  --role-experiencer: #6366f1;
  --role-amplifier: #a855f7;
  --role-builder: #10b981;
  --role-creator: #ec4899;
  --role-connector: #3b82f6;
  --role-deentropizer: #06b6d4;
  --role-foresighter: #f59e0b;
  --role-backer: #f97316;

  /* Tailwind dark-theme shims → bound to CSS variables so they respond to theme */
  --t-background: 250 250 245;   /* cream */
  --t-surface:    245 243 238;   /* cream-dark */
  --t-card:       255 255 255;
  --t-border:     197 217 203;   /* green-light */
  --t-foreground: 26 26 26;
  --t-muted:      122 122 122;
}

body.dark {
  --bg-card: rgba(12, 26, 16, 0.6);
  --bg-card-glass: rgba(15, 32, 20, 0.65);
  --bg-code: #0f2014;
  --text-faint: #6a6450;
  --accent-bg: rgba(168, 184, 122, 0.08);
  --border-soft: rgba(168, 184, 122, 0.1);

  --t-background: 10 15 12;       /* deep forest black */
  --t-surface:    15 32 20;       /* cream-dark */
  --t-card:       18 37 23;
  --t-border:     29 56 36;
  --t-foreground: 232 224 200;
  --t-muted:      138 132 104;
}

/* ── Outer Page Wrapper ──────────────────────────────────── */
.contributor-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 2rem 3rem;
  position: relative;
  z-index: 1;
}

/* ── Hero ─────────────────────────────────────────────────── */
.contributor-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
}
.contributor-hero-label {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-forest); margin-bottom: 0.8rem;
}
.contributor-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700; line-height: 1.08;
  color: var(--green-deep); margin-bottom: 0.5rem;
}
.contributor-hero-subtitle {
  font-family: var(--font-serif);
  font-size: 0.95rem; font-style: italic;
  color: var(--text-secondary); max-width: 640px;
  margin: 0 auto 1.5rem; line-height: 1.7;
}
.contributor-hero-subtitle strong {
  font-style: normal; font-weight: 600;
  color: var(--green-deep);
}
body.dark .contributor-hero-subtitle strong { color: #d4c89a; }

/* ── Hero Stats Row ──────────────────────────────────────── */
.contributor-stats {
  display: flex; gap: 1.8rem; justify-content: center;
  flex-wrap: wrap; margin: 1.8rem 0 1rem;
}
.contributor-stat { text-align: center; min-width: 88px; }
.contributor-stat-value {
  font-family: var(--font-mono); font-size: 1.9rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--green-deep), var(--green-forest));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.dark .contributor-stat-value {
  background: linear-gradient(135deg, #d4c89a, #a8b87a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.contributor-stat-label {
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.2rem;
}

/* Live sync status badge */
.contributor-sync-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.7rem; margin-top: 0.6rem;
  background: var(--accent-bg);
  color: var(--green-forest); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6rem;
  font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid var(--green-light);
}
body.dark .contributor-sync-badge {
  color: #a8b87a; border-color: rgba(168, 184, 122, 0.2);
  background: rgba(168, 184, 122, 0.08);
}

/* ── Auth chip (header area) ─────────────────────────────── */
.contributor-auth-row {
  display: flex; justify-content: center; align-items: center;
  gap: 0.6rem; margin-top: 0.8rem;
}
.contributor-auth-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--green-deep); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem; border-radius: 0;
  border: 1px solid rgba(82, 168, 120, 0.4);
  text-decoration: none; cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(45, 74, 53, 0.15);
}
.contributor-auth-btn:hover {
  background: var(--green-forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(45, 74, 53, 0.25);
}
body.dark .contributor-auth-btn {
  background: rgba(45, 74, 53, 0.6); color: #e8e0c8;
  border-color: rgba(111, 219, 143, 0.3);
}
body.dark .contributor-auth-btn:hover {
  background: rgba(45, 74, 53, 0.9);
  border-color: rgba(111, 219, 143, 0.7);
}
.contributor-auth-btn svg { width: 14px; height: 14px; }

.contributor-profile-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(74, 124, 89, 0.08);
  border: 1px solid rgba(74, 124, 89, 0.2);
  border-radius: 999px; padding: 0.25rem 0.85rem 0.25rem 0.25rem;
  cursor: pointer; font-family: var(--font-mono);
  font-size: 0.68rem; color: var(--green-deep);
  transition: all 0.2s;
}
.contributor-profile-chip:hover {
  background: rgba(74, 124, 89, 0.14);
  border-color: rgba(74, 124, 89, 0.35);
}
.contributor-profile-chip img {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover;
}
body.dark .contributor-profile-chip {
  background: rgba(212, 200, 154, 0.08);
  border-color: rgba(212, 200, 154, 0.15);
  color: #d4c89a;
}
body.dark .contributor-profile-chip:hover {
  background: rgba(212, 200, 154, 0.14);
  border-color: rgba(212, 200, 154, 0.3);
}

/* ── Tab Navigation (8 roles) ────────────────────────────── */
.contributor-tabs-label {
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.7rem;
  text-align: left; padding-left: 0.2rem;
}
.contributor-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem; margin-bottom: 1.6rem;
}
@media (max-width: 640px) {
  .contributor-tabs { grid-template-columns: repeat(2, 1fr); }
}
.contributor-tab {
  position: relative;
  padding: 0.85rem 0.6rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.04em;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--green-light);
  border-radius: 0;
  color: var(--text-secondary);
  cursor: pointer; transition: all 0.25s;
  backdrop-filter: blur(8px);
}
body.dark .contributor-tab {
  background: var(--bg-card-glass);
  border-color: rgba(168, 184, 122, 0.12);
  color: var(--text-muted);
}
.contributor-tab:hover:not(:disabled) {
  border-color: var(--green-forest);
  color: var(--green-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 74, 53, 0.08);
}
body.dark .contributor-tab:hover:not(:disabled) {
  color: #d4c89a;
  border-color: rgba(168, 184, 122, 0.3);
}
.contributor-tab:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.contributor-tab.active {
  background: var(--green-deep); color: var(--cream);
  border-color: var(--green-deep);
  box-shadow: 0 4px 16px rgba(45, 74, 53, 0.22);
}
body.dark .contributor-tab.active {
  background: #d4c89a; color: #0a0f0c;
  border-color: #d4c89a;
  box-shadow: 0 4px 16px rgba(212, 200, 154, 0.2);
}
.contributor-tab .contributor-tab-dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin: 0 auto 0.35rem;
}

/* Role-specific accent dots */
.contributor-tab[data-role="humans"]      .contributor-tab-dot { background: var(--role-experiencer); }
.contributor-tab[data-role="amplifier"]   .contributor-tab-dot { background: var(--role-amplifier); }
.contributor-tab[data-role="builders"]    .contributor-tab-dot { background: var(--role-builder); }
.contributor-tab[data-role="creators"]    .contributor-tab-dot { background: var(--role-creator); }
.contributor-tab[data-role="connectors"]  .contributor-tab-dot { background: var(--role-connector); }
.contributor-tab[data-role="deentropizer"] .contributor-tab-dot { background: var(--role-deentropizer); }
.contributor-tab[data-role="foresighter"] .contributor-tab-dot { background: var(--role-foresighter); }
.contributor-tab[data-role="backer"]      .contributor-tab-dot { background: var(--role-backer); }

/* ── Section Header (before leaderboards) ────────────────── */
.contributor-section {
  margin-bottom: 2rem;
}
.contributor-section-label {
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-forest); margin-bottom: 0.5rem;
}
.contributor-section-title {
  font-family: var(--font-serif); font-size: 1.6rem;
  font-weight: 700; color: var(--green-deep);
  margin-bottom: 0.4rem; line-height: 1.2;
}
.contributor-section-narrative {
  font-family: var(--font-serif); font-size: 0.88rem;
  color: var(--text-secondary); margin-bottom: 1.2rem;
  line-height: 1.7;
}
body.dark .contributor-section-label { color: #a8b87a; }
body.dark .contributor-section-title { color: #d4c89a; }
body.dark .contributor-section-narrative { color: #bfb89a; }

/* ── Leaderboard card container ──────────────────────────── */
.contributor-card {
  background: var(--bg-card); border: 1px solid var(--green-light);
  border-radius: var(--radius); padding: 0.5rem;
  box-shadow: 0 1px 3px rgba(45, 74, 53, 0.05);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
body.dark .contributor-card {
  background: var(--bg-card-glass);
  border-color: rgba(168, 184, 122, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Tailwind shim: bg-background / bg-surface / bg-card / border-border ── */
/* These map the existing Tailwind dark-theme classes to CSS variables so they
   switch when body.dark is toggled off (light mode). */
.bg-background { background-color: rgb(var(--t-background)) !important; }
.bg-surface    { background-color: rgb(var(--t-surface))    !important; }
.bg-card       { background-color: rgb(var(--t-card))       !important; }
.border-border { border-color:     rgb(var(--t-border))     !important; }
.text-foreground { color:          rgb(var(--t-foreground)) !important; }

/* Light-mode text adjustments — bump contrast, dark-mode greys are too faint on cream */
body:not(.dark) .text-white { color: var(--text-primary) !important; }
body:not(.dark) .text-slate-200 { color: #1a1a1a !important; }
body:not(.dark) .text-slate-300 { color: #2d4a35 !important; }
body:not(.dark) .text-slate-400 { color: #4a5a50 !important; }
body:not(.dark) .text-slate-500 { color: #5a6a60 !important; }

/* Scrollbar — theme-aware */
body:not(.dark) ::-webkit-scrollbar-track { background: var(--cream-dark); }
body:not(.dark) ::-webkit-scrollbar-thumb { background: var(--green-light); }
body:not(.dark) ::-webkit-scrollbar-thumb:hover { background: var(--green-sage); }

/* Body background override so the page respects the theme */
body { background: var(--cream) !important; }

/* Ensure the hex canvas sits behind everything */
#hex-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — complete visual redesign
   Dark mode is the primary design; light mode needs its own identity, not
   just "remove the darkness". Cream bg + forest green accents + solid colors.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Background: nearly invisible matrix */
body:not(.dark) #hex-canvas { opacity: 0.05; }

/* Remove backdrop blur — it makes text & images fuzzy on cream */
body:not(.dark) .contributor-tab,
body:not(.dark) .contributor-card { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Images with .invert (X logo) should NOT invert on cream */
body:not(.dark) img.invert { filter: none; }

/* Cards: clean white, subtle green border, light shadow */
body:not(.dark) .contributor-card {
  background: #ffffff !important;
  border-color: #d4dfcf !important;
  box-shadow: 0 1px 3px rgba(45, 74, 53, 0.08);
}

/* ── Tab Grid: role selector buttons ───────────────────────── */
/* Inactive tabs: white card with visible green border */
body:not(.dark) .grid.grid-cols-4 > button:not(:disabled) {
  background: #ffffff !important;
  border-color: #c5d9cb !important;
  color: #3d5a45 !important;
}
body:not(.dark) .grid.grid-cols-4 > button:not(:disabled):hover {
  background: #f0f7f2 !important;
  border-color: #4a7c59 !important;
  color: #2d4a35 !important;
}
/* Disabled tabs: muted cream */
body:not(.dark) .grid.grid-cols-4 > button:disabled {
  background: #f5f3ee !important;
  border-color: #e0ddd5 !important;
  color: #b0ada0 !important;
}

/* Active tab: SOLID role color with white text — not faint transparent tint */
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-indigo"] {
  background: #5b5fc7 !important; color: #fff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-emerald"] {
  background: #0d9668 !important; color: #fff !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-pink"] {
  background: #d6336c !important; color: #fff !important;
  border-color: #be185d !important;
  box-shadow: 0 2px 8px rgba(190, 24, 93, 0.25);
}
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-blue"] {
  background: #2563eb !important; color: #fff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — NO COLOR DIFFUSION POLICY
   Design rule: every coloured surface in light mode must be a SOLID pastel.
   No transparent tints (they bleed onto cream).
   No glow shadows (they smear colour outward).
   No gradients (they create ambiguous edges).
   Every colour = solid bg + solid deep text + solid 1px border.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Leaderboard surfaces ──────────────────────────────────── */
body:not(.dark) .bg-surface    { background-color: #f5f3ee !important; }
body:not(.dark) .bg-card       { background-color: #ffffff !important; }
body:not(.dark) .bg-background { background-color: #fafaf5 !important; }

/* Kill ALL coloured glow / drop shadows in light mode — they smear */
body:not(.dark) [class*="shadow-[0_0_"] { box-shadow: 0 1px 2px rgba(45, 74, 53, 0.08) !important; }
body:not(.dark) [class*="drop-shadow-[0_0_"] { filter: none !important; }
body:not(.dark) [class*="shadow-[inset_0_0_"] { box-shadow: none !important; }

/* Kill gradient fills — replace with solid pastel based on dominant colour */
body:not(.dark) [class*="from-indigo-900"] {
  background: #eef2ff !important;
  background-image: none !important;
}
body:not(.dark) [class*="from-amber-500"] {
  background: #fef3c7 !important; background-image: none !important;
}
body:not(.dark) [class*="from-emerald-500"] {
  background: #d1fae5 !important; background-image: none !important;
}
body:not(.dark) [class*="from-violet-500"] {
  background: #ede9fe !important; background-image: none !important;
}
body:not(.dark) [class*="from-blue-500"] {
  background: #dbeafe !important; background-image: none !important;
}

/* ── Transparent colour backgrounds → SOLID pastels ────────── */
/* The /10 /15 /20 /25 /30 opacity variants all become the same solid tint.
   Tailwind's escaped slash in class names is matched via attribute selector. */

/* amber → solid #fef3c7 */
body:not(.dark) [class*="bg-amber-500/1"],
body:not(.dark) [class*="bg-amber-500/2"],
body:not(.dark) [class*="bg-amber-500/3"],
body:not(.dark) [class*="bg-amber-400/"] {
  background-color: #fef3c7 !important;
}
body:not(.dark) [class*="text-amber-400"],
body:not(.dark) [class*="text-amber-500"] { color: #92400e !important; }
body:not(.dark) [class*="border-amber-500/"] { border-color: #f59e0b !important; }

/* emerald → solid #d1fae5 */
body:not(.dark) [class*="bg-emerald-500/1"],
body:not(.dark) [class*="bg-emerald-500/2"],
body:not(.dark) [class*="bg-emerald-500/3"],
body:not(.dark) [class*="bg-emerald-400/"] {
  background-color: #d1fae5 !important;
}
body:not(.dark) [class*="text-emerald-400"],
body:not(.dark) [class*="text-emerald-500"] { color: #065f46 !important; }
body:not(.dark) [class*="border-emerald-500/"] { border-color: #10b981 !important; }

/* indigo → solid #e0e7ff */
body:not(.dark) [class*="bg-indigo-500/1"],
body:not(.dark) [class*="bg-indigo-500/2"],
body:not(.dark) [class*="bg-indigo-500/3"],
body:not(.dark) [class*="bg-indigo-400/"] {
  background-color: #e0e7ff !important;
}
body:not(.dark) [class*="text-indigo-400"],
body:not(.dark) [class*="text-indigo-500"] { color: #3730a3 !important; }
body:not(.dark) [class*="border-indigo-500/"] { border-color: #6366f1 !important; }

/* violet → solid #ede9fe */
body:not(.dark) [class*="bg-violet-500/1"],
body:not(.dark) [class*="bg-violet-500/2"],
body:not(.dark) [class*="bg-violet-500/3"],
body:not(.dark) [class*="bg-violet-400/"] {
  background-color: #ede9fe !important;
}
body:not(.dark) [class*="text-violet-400"],
body:not(.dark) [class*="text-violet-500"] { color: #5b21b6 !important; }
body:not(.dark) [class*="border-violet-500/"] { border-color: #8b5cf6 !important; }

/* pink → solid #fce7f3 */
body:not(.dark) [class*="bg-pink-500/1"],
body:not(.dark) [class*="bg-pink-500/2"],
body:not(.dark) [class*="bg-pink-500/3"],
body:not(.dark) [class*="bg-pink-400/"] {
  background-color: #fce7f3 !important;
}
body:not(.dark) [class*="text-pink-400"],
body:not(.dark) [class*="text-pink-500"] { color: #9d174d !important; }
body:not(.dark) [class*="border-pink-500/"] { border-color: #ec4899 !important; }

/* blue → solid #dbeafe */
body:not(.dark) [class*="bg-blue-500/1"],
body:not(.dark) [class*="bg-blue-500/2"],
body:not(.dark) [class*="bg-blue-500/3"],
body:not(.dark) [class*="bg-blue-400/"] {
  background-color: #dbeafe !important;
}
body:not(.dark) [class*="text-blue-400"],
body:not(.dark) [class*="text-blue-500"] { color: #1e40af !important; }
body:not(.dark) [class*="border-blue-500/"] { border-color: #3b82f6 !important; }

/* purple → solid #f3e8ff */
body:not(.dark) [class*="bg-purple-500/1"],
body:not(.dark) [class*="bg-purple-500/2"],
body:not(.dark) [class*="bg-purple-500/3"],
body:not(.dark) [class*="bg-purple-400/"] {
  background-color: #f3e8ff !important;
}
body:not(.dark) [class*="text-purple-400"],
body:not(.dark) [class*="text-purple-500"] { color: #6b21a8 !important; }
body:not(.dark) [class*="border-purple-500/"] { border-color: #a855f7 !important; }

/* rose / red → solid #fee2e2 */
body:not(.dark) [class*="bg-red-500/"],
body:not(.dark) [class*="bg-red-600/"],
body:not(.dark) [class*="bg-rose-500/"] {
  background-color: #fee2e2 !important;
}
body:not(.dark) [class*="text-red-400"],
body:not(.dark) [class*="text-red-500"],
body:not(.dark) [class*="text-rose-400"] { color: #991b1b !important; }
body:not(.dark) [class*="border-red-500/"],
body:not(.dark) [class*="border-rose-500/"] { border-color: #ef4444 !important; }

/* orange → solid #ffedd5 */
body:not(.dark) [class*="bg-orange-500/"] {
  background-color: #ffedd5 !important;
}
body:not(.dark) [class*="text-orange-400"],
body:not(.dark) [class*="text-orange-500"] { color: #9a3412 !important; }
body:not(.dark) [class*="border-orange-500/"] { border-color: #f97316 !important; }

/* yellow → solid #fef9c3 */
body:not(.dark) [class*="bg-yellow-500/"],
body:not(.dark) [class*="bg-yellow-700/"] {
  background-color: #fef9c3 !important;
}

/* slate / dark greys used as "inactive" tint — pale green-grey instead */
body:not(.dark) [class*="bg-slate-700/"] {
  background-color: #eef0e8 !important;
}
body:not(.dark) [class*="text-slate-400"] { color: #4a5a50 !important; }
body:not(.dark) [class*="text-slate-500"] { color: #5a6a60 !important; }
body:not(.dark) [class*="text-slate-600"] { color: #6a7a70 !important; }
body:not(.dark) [class*="border-slate-700/"] { border-color: #d4dfcf !important; }

/* white text on now-light backgrounds → dark green */
body:not(.dark) .text-white { color: #1a1a1a !important; }

/* ── Active tab buttons: SOLID vivid color overrides the pastels above ── */
/* These must come AFTER the pastel rules to win specificity */
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-indigo"] {
  background: #5b5fc7 !important; color: #fff !important;
  border-color: #4f46e5 !important;
}
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-emerald"] {
  background: #0d9668 !important; color: #fff !important;
  border-color: #059669 !important;
}
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-pink"] {
  background: #d6336c !important; color: #fff !important;
  border-color: #be185d !important;
}
body:not(.dark) .grid.grid-cols-4 > button[class*="bg-blue"] {
  background: #2563eb !important; color: #fff !important;
  border-color: #1d4ed8 !important;
}

/* ── Discord / dark-hex utility backgrounds ────────────────── */
body:not(.dark) [class*="bg-[#121620]"],
body:not(.dark) [class*="bg-[#0a120c]"],
body:not(.dark) [class*="bg-[#0f1a12]"] {
  background-color: #ffffff !important;
}

/* Row hover: dark hex → pale green */
body:not(.dark) [class*="hover:bg-[#1"]:hover {
  background-color: #f5f3ee !important;
}
body:not(.dark) [class*="hover:bg-white/5"]:hover,
body:not(.dark) [class*="hover:bg-white/10"]:hover {
  background-color: #f0f7f2 !important;
}
body:not(.dark) [class*="bg-white/10"] {
  background-color: #f0f7f2 !important;
}

/* ── Sky / cyan text (used for X handles) ──────────────────── */
body:not(.dark) [class*="text-sky-400"] { color: #0369a1 !important; }
body:not(.dark) [class*="text-sky-300"] { color: #0284c7 !important; }
body:not(.dark) [class*="text-cyan-400"] { color: #155e75 !important; }

/* ── Inline ring (for pinned card) — make solid not glow ──── */
body:not(.dark) [class*="ring-2"][class*="ring-indigo-400"] {
  --tw-ring-color: #6366f1 !important;
  box-shadow: 0 0 0 2px #6366f1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPANDED DETAIL PANELS — Builder reports, Creator posts, Experiencer logs
   The dark `bg-black/20`, `bg-black/50` make cream mode look muddy grey.
   Flip them to clean white cards with dark text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer report/post/log card — was bg-black/20 (dark translucent) */
body:not(.dark) [class*="bg-black/10"],
body:not(.dark) [class*="bg-black/20"],
body:not(.dark) [class*="bg-black/30"] {
  background-color: #ffffff !important;
  border-color: #d4dfcf !important;
}

/* Inner "classification" / AI reasoning block — was bg-black/40 or /50 */
body:not(.dark) [class*="bg-black/40"],
body:not(.dark) [class*="bg-black/50"],
body:not(.dark) [class*="bg-black/60"],
body:not(.dark) [class*="bg-black/70"],
body:not(.dark) [class*="bg-black/80"] {
  background-color: #f5f3ee !important;
  color: #2d4a35 !important;
}

/* Hover border on detail cards */
body:not(.dark) [class*="hover:border-slate-600"]:hover {
  border-color: #4a7c59 !important;
}

/* Section headers inside detail panels (REPORT ACTIVITY LOG, CONTRIBUTION ACTIVITY) */
body:not(.dark) [class*="text-emerald-400"] {
  color: #065f46 !important;
}
body:not(.dark) [class*="text-emerald-300"] {
  color: #047857 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEATMAP — the contribution grid was all dark slate/blue/pink/emerald
   In light mode: pale grid on white, activity levels get solid pastel tones
   ═══════════════════════════════════════════════════════════════════════════ */

/* Empty cells: slate-800/50 → pale cream-grey */
body:not(.dark) .heatmap-cell[class*="bg-slate-800"] {
  background-color: #e5e7e0 !important;
}

/* BUILDER: emerald activity levels */
body:not(.dark) .heatmap-cell[class*="bg-emerald-900"] {
  background-color: #a7f3d0 !important;   /* emerald-200 */
}
body:not(.dark) .heatmap-cell[class*="bg-emerald-700"] {
  background-color: #34d399 !important;   /* emerald-400 */
}
body:not(.dark) .heatmap-cell[class*="bg-emerald-500/80"] {
  background-color: #059669 !important;   /* emerald-600 */
}
body:not(.dark) .heatmap-cell[class*="bg-emerald-400"] {
  background-color: #047857 !important;   /* emerald-700 */
  box-shadow: none !important;
}

/* CREATOR: pink activity levels */
body:not(.dark) .heatmap-cell[class*="bg-pink-900"] {
  background-color: #fbcfe8 !important;   /* pink-200 */
}
body:not(.dark) .heatmap-cell[class*="bg-pink-700"] {
  background-color: #f472b6 !important;   /* pink-400 */
}
body:not(.dark) .heatmap-cell[class*="bg-pink-500/80"] {
  background-color: #db2777 !important;   /* pink-600 */
}
body:not(.dark) .heatmap-cell[class*="bg-pink-400"] {
  background-color: #be185d !important;   /* pink-700 */
  box-shadow: none !important;
}

/* EXPERIENCER: blue + yellow + emerald bitmask */
body:not(.dark) .heatmap-cell[class*="bg-blue-700"] {
  background-color: #60a5fa !important;   /* blue-400 */
}
body:not(.dark) .heatmap-cell[class*="bg-yellow-700"] {
  background-color: #facc15 !important;   /* yellow-400 */
}

/* Progress bars (in row metrics, e.g. L4 funnel completion) */
body:not(.dark) .bg-slate-800 {
  background-color: #e5e7e0 !important;
}
body:not(.dark) [class*="bg-slate-800/80"] {
  background-color: #e5e7e0 !important;
}

/* Classification badge: amber FEEDBACK, slate NOISE — ensure text is dark on pastel */
body:not(.dark) [class*="text-amber-500/70"] { color: #b45309 !important; }
body:not(.dark) [class*="text-emerald-500/70"] { color: #047857 !important; }
body:not(.dark) [class*="text-sky-500/70"] { color: #0369a1 !important; }

/* Italic AI reasoning text inside the classification block */
body:not(.dark) [class*="bg-black/50"] .italic,
body:not(.dark) [class*="bg-black/50"] [class*="text-slate-400"] {
  color: #4a5a50 !important;
}

/* "#bug-report" channel tag inside detail card */
body:not(.dark) [class*="bg-slate-700/50"] {
  background-color: #e5e7e0 !important;
  color: #4a5a50 !important;
}

/* Hover tooltip on heatmap — already handled earlier, just ensure solid bg */
body:not(.dark) .heatmap-tooltip {
  background: #ffffff !important;
  color: #2d4a35 !important;
  border: 1px solid #c5d9cb !important;
  box-shadow: 0 4px 12px rgba(45, 74, 53, 0.15) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  margin-top: 4rem;
  padding: 2.5rem 2rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--text-secondary); letter-spacing: 0.04em;
  border-top: 1px solid rgba(197, 217, 203, 0.4);
  line-height: 2.2;
}
body.dark .footer {
  color: #9a9a80;
  border-top-color: rgba(168, 184, 122, 0.15);
}
.footer a { color: inherit; text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .contributor-page { padding: 5rem 1.2rem 2rem; }
}
@media (max-width: 640px) {
  .contributor-page { padding: 4.5rem 0.8rem 2rem; }
  .contributor-hero { padding: 1.5rem 0 1.2rem; }
  .contributor-hero-title { font-size: 1.7rem; }
  .contributor-hero-subtitle { font-size: 0.85rem; }
  .contributor-stats { gap: 0.8rem; }
  .contributor-stat-value { font-size: 1.3rem; }
  .contributor-stat { min-width: 64px; }
  .contributor-section-title { font-size: 1.25rem; }
}