/* ============================================================
   EternalCurrent.Online — Theme System v4
   theme.css — CSS custom properties for all 4 themes
   Themes: void (default) | deep-sea | grove | parchment
   ============================================================ */

/* ── STATIC TOKENS (unchanged across themes) ── */
:root {
  /* Typography */
  --font-display: 'Arial Black', Arial, sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;
  --font-mono:    Arial, Helvetica, sans-serif;

  /* Type scale — minimum 12px everywhere, prefer 14px for body */
  --text-xs:   12px;   /* was 11px — absolute floor */
  --text-sm:   13px;   /* was 11px — labels, meta, badges */
  --text-base: 14px;   /* was 13px — body text */
  --text-lg:   16px;   /* was 15px */
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  600;
  --weight-heavy:   900;

  /* Leading / tracking */
  --leading-snug:   1.3;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;

  /* Spacing (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Brand accents — fixed */
  --brand-blue:  #00AAFF;
  --brand-green: #00CC44;
  --brand-amber: #F39C12;
}

/* ──────────────────────────────────────────────────────────
   VOID — ECO Black · default · 100% dark
   ────────────────────────────────────────────────────────── */
:root,
[data-theme="void"] {
  --color-bg:       #080D14;
  --eco-violet:  #c09fe0;
  --eco-magenta: #F578B5;
  --eco-lime:    #AACC00;
  --color-surface:  #0D1820;
  --color-surface2: #0A1525;
  --color-text:     #E8F4F0;
  --color-text-dim: #888888; /* S320 a11y: was #3A5A54 — 2.57:1 FAIL → 5.1:1 PASS */
  --color-text-mid: rgba(232,244,240,0.55);
  --color-border:   rgba(0,170,255,0.14);
  --color-border-strong: rgba(0,170,255,0.30);
  --color-accent-c: #00AAFF;
  --color-accent-c-fg: #000000; /* bright — dark text for contrast */
  --color-accent-g-fg: #000000;
  --color-accent-a-fg: #000000;
  --color-accent-r-fg: #000000;
  --color-accent-g: #00CC44;
  --color-accent-a: #F39C12;
  --color-accent-r: #FF6B6B;

  /* Alias */
  --blue:   #00AAFF;
  --green:  #00CC44;
  --bg:     #080D14;
  --bg2:    #0D1820;
  --white:  #E8F4F0;
  --dim:    #888888; /* S320 a11y: was #3A5A54 */
  --border: rgba(0,170,255,0.14);
  --muted:  #888888; /* S320 a11y: was #3A5A54 */
  --muted2: rgba(0,170,255,0.12);
  --color-text-mid: rgba(232,244,240,0.60);
}

/* ──────────────────────────────────────────────────────────
   DEEP SEA — Ocean blue · 60% dark
   ────────────────────────────────────────────────────────── */
[data-theme="deep-sea"] {
  --color-bg:       #0F3854;
  --eco-violet:  #c09fe0;
  --eco-magenta: #F578B5;
  --eco-lime:    #AACC00;
  --color-surface:  #0A2840;
  --color-surface2: #082038;
  --color-text:     #E8F4F0;
  --color-text-dim: #7AAABB;
  --color-text-mid: rgba(232,244,240,0.65);
  --color-border:   rgba(0,229,204,0.22);
  --color-border-strong: rgba(0,229,204,0.45);
  --color-accent-c: #00E5CC;
  --color-accent-c-fg: #000000;
  --color-accent-g-fg: #000000;
  --color-accent-a-fg: #000000;
  --color-accent-r-fg: #000000;
  --color-accent-g: #00E040;
  --color-accent-a: #E09040;
  --color-accent-r: #FF8888;

  --blue:   #00E5CC;
  --green:  #00E040;
  --bg:     #0F3854;
  --bg2:    #0A2840;
  --white:  #E8F4F0;
  --dim:    #7AAABB;
  --border: rgba(0,229,204,0.22);
  --muted:  #7AAABB;
  --muted2: rgba(0,229,204,0.18);
  --color-text-mid: rgba(232,244,240,0.65);
}

/* ──────────────────────────────────────────────────────────
   GROVE — Sage green · 25% dark
   ────────────────────────────────────────────────────────── */
[data-theme="grove"] {
  --color-bg:       #C8DDD2;
  --eco-violet:  #6A2D9E;
  --eco-magenta: #8E1453;
  --eco-lime:    #404C00;
  --color-surface:  #B4CCBC;
  --color-surface2: #A8C4B0;
  --color-text:     #0D1F1A;
  --color-text-dim: #2A4A38;
  --color-text-mid: rgba(13,31,26,0.70);
  --color-border:   rgba(0,74,68,0.28);
  --color-border-strong: rgba(0,74,68,0.55);
  --color-accent-c: #004A44;
  --color-accent-c-fg: #ffffff;
  --color-accent-g-fg: #ffffff;
  --color-accent-a-fg: #ffffff;
  --color-accent-r-fg: #ffffff;
  --color-accent-g: #004A18;
  --color-accent-a: #6A3800;
  --color-accent-r: #8B1A00;

  --blue:   #004A44;
  --green:  #004A18;
  --bg:     #C8DDD2;
  --bg2:    #B4CCBC;
  --white:  #0D1F1A;
  --dim:    #2A4A38;
  --border: rgba(0,74,68,0.35);
  --muted:  #2A4A38;
  --muted2: rgba(0,74,68,0.25);
  --color-text-mid: rgba(13,31,26,0.72);
}

/* ──────────────────────────────────────────────────────────
   PARCHMENT — Off-white · lightest · 0% dark
   ────────────────────────────────────────────────────────── */
[data-theme="parchment"] {
  --color-bg:       #F5F2EC;
  --eco-violet:  #6A2D9E;
  --eco-magenta: #8E1453;
  --eco-lime:    #404C00;
  --color-surface:  #EAE6DC;
  --color-surface2: #E0DCD0;
  --color-text:     #1A1A14;
  --color-text-dim: #4A4838;
  --color-text-mid: rgba(26,26,20,0.72);
  --color-border:   rgba(0,107,98,0.24);
  --color-border-strong: rgba(0,107,98,0.50);
  --color-accent-c: #006B62;
  --color-accent-c-fg: #ffffff;
  --color-accent-g-fg: #ffffff;
  --color-accent-a-fg: #ffffff;
  --color-accent-r-fg: #ffffff;
  --color-accent-g: #006B20;
  --color-accent-a: #7A4500;
  --color-accent-r: #AA1A00;

  --blue:   #006B62;
  --green:  #006B20;
  --bg:     #F5F2EC;
  --bg2:    #EAE6DC;
  --white:  #1A1A14;
  --dim:    #4A4838;
  --border: rgba(0,107,98,0.30);
  --muted:  #4A4838;
  --muted2: rgba(0,107,98,0.20);
  --color-text-mid: rgba(26,26,20,0.72);
}

/* ──────────────────────────────────────────────────────────
   GLOBAL BASE STYLES — respect theme vars
   ────────────────────────────────────────────────────────── */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Cards and surfaces */
.card, .info-card, .profile-section, .section,
.post-card, .result-card, .feed-card, .pair-card,
.pet-card, .confirm-card, .profile-hero {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Inputs */
input, textarea, select {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
input::placeholder, textarea::placeholder {
  color: var(--color-text-dim);
}

/* Accent text */
.accent-blue, .nav-e { color: var(--color-accent-c); }
.accent-green, .nav-c { color: var(--color-accent-g); }

/* Dim text */
.dim, .muted { color: var(--color-text-dim); }

/* ── THEME SELECTOR WIDGET STYLES ── */
.theme-selector {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* "Themes" label appears on hover/focus */
.theme-toggle-btn {
  position: relative;
}
.theme-toggle-btn::before {
  content: "Themes";
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .03em;
}
.theme-toggle-btn:hover::before,
.theme-toggle-btn:focus::before {
  opacity: 1;
}

.theme-toggle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-blue); /* S320: was hardcoded #00AAFF */
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 20px rgba(0,170,255,.5), 0 0 0 3px rgba(0,170,255,.15);
  touch-action: manipulation;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus  { background: #0099EE; outline: none; }
.theme-toggle-btn.open   { background: #00CC44; border-color: rgba(255,255,255,.5); }

.theme-panel {
  position: absolute;
  bottom: 54px;
  right: 0;
  width: 240px; /* S320: was 220px, expanded to fit Parchment without clipping */
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.theme-panel.hidden { display: none; }

.theme-panel-title {
  font-size: var(--text-xs); /* S320 a11y: was 10px */
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.theme-panel-title .accent { color: var(--color-accent-c); }

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.theme-option:hover  { background: rgba(128,128,128,.1); }
.theme-option.active { background: rgba(128,128,128,.15); }

.theme-swatch {
  width: 32px;
  height: 22px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(128,128,128,.2);
}

.theme-info { flex: 1; }
.theme-name { font-size: 12px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.theme-sub  { font-size: var(--text-xs); color: var(--color-text-dim); } /* S320 a11y: was 10px */

.theme-tick {
  font-size: 12px;
  color: var(--color-accent-g);
  opacity: 0;
}
.theme-option.active .theme-tick { opacity: 1; }

/* Grove theme — ensure text is always dark enough */
[data-theme="grove"] .nav-item,
[data-theme="grove"] .panel,
[data-theme="grove"] .card,
[data-theme="grove"] .info-card {
  color: var(--color-text);
}
/* Parchment theme — same */
[data-theme="parchment"] .nav-item,
[data-theme="parchment"] .panel,
[data-theme="parchment"] .card,
[data-theme="parchment"] .info-card {
  color: var(--color-text);
}

/* ============================================================
   ECO GLOBAL MOBILE STYLES — Session 11
   Applies across all pages via theme.css
   ============================================================ */

/* ── Base mobile resets ───────────────────────────────────── */

/* ── ECO DARK SECTION ─────────────────────────────────────────
   Apply to any section with a dark background image so text
   stays legible in all themes. Uses Void theme values.
   Usage: <div class="eco-dark-section"> on .hero, .energy-wrap etc.
───────────────────────────────────────────────────────────── */
.eco-dark-section,
.eco-dark-section * {
  --color-bg:            #080D14;
  --color-surface:       #0D1820;
  --color-surface2:      #0A1525;
  --color-text:          #E8F4F0;
  --color-text-dim:      #888888; /* S320 a11y fix */
  --color-text-mid:      rgba(232,244,240,0.60);
  --color-border:        rgba(0,170,255,0.14);
  --color-border-strong: rgba(0,170,255,0.30);
  --color-accent-c:      #00AAFF;
  --color-accent-g:      #00CC44;
  --color-accent-a:      #F39C12;
  --color-accent-r:      #FF6B6B;
  --void:   #080D14;
  --depth:  #0D1820;
  --bg:     #080D14;
  --bg2:    #0D1820;
  --white:  #E8F4F0;
  --blue:   #00AAFF;
  --green:  #00CC44;
  --border: rgba(0,170,255,0.14);
  --muted:  rgba(232,244,240,0.45);
  color: #E8F4F0;
}

@media (max-width: 600px) {

  /* Prevent horizontal scroll from fixed-width elements */
  body { overflow-x: hidden; }

  /* Page wrappers — full width with safe padding */
  .page-wrap,
  .content-wrap,
  .inner-wrap,
  .app-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* Cards — full width, reduced padding */
  .card, .section-card, .org-card, .nation-card,
  .network-card, .export-card, .hero-card,
  .net-post-card, .feed-card {
    border-radius: 10px;
    padding: 16px !important;
  }

  /* Grids → single column */
  .nation-grid,
  .network-grid,
  .org-grid,
  .stats-row,
  .info-grid,
  .connections-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Stats row → 2 columns on mobile */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Typography — scale down large headings */
  .page-title { font-size: 24px !important; }
  .hero-name  { font-size: 22px !important; }

  /* Tables — horizontal scroll container */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav hamburger — ensure tap target is 44px min */
  .eco-hdr-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Theme selector — larger tap target on mobile */
  #eco-theme-selector {
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
  }
  .theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .theme-panel {
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
  }

  /* Floating buttons — safe from notch/home bar */
  .admin-float-btn,
  #eco-theme-selector {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Hide non-essential decorative elements */
  .desktop-only { display: none !important; }

  /* Full-width buttons on mobile */
  .btn-primary,
  .btn-green,
  .export-btn {
    width: 100%;
    text-align: center;
  }

  /* Prevent overflow in post/note content */
  .npc-content,
  .hero-bio,
  .card-desc {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Tab bars — scrollable horizontal */
  .page-tabs,
  .tab-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .page-tabs::-webkit-scrollbar { display: none; }
}

/* ── Tablet (601–900px) ───────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .nation-grid,
  .network-grid,
  .org-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .page-title { font-size: 28px !important; }
}

/* ============================================================
   ECO GLOBAL MOBILE STYLES — Session 11
   Applies across all pages via theme.css
   ============================================================ */

/* ── Base mobile resets ───────────────────────────────────── */
@media (max-width: 600px) {

  /* Prevent horizontal scroll from fixed-width elements */
  body { overflow-x: hidden; }

  /* Page wrappers — full width with safe padding */
  .page-wrap,
  .content-wrap,
  .inner-wrap,
  .app-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* Cards — full width, reduced padding */
  .card, .section-card, .org-card, .nation-card,
  .network-card, .export-card, .hero-card,
  .net-post-card, .feed-card {
    border-radius: 10px;
    padding: 16px !important;
  }

  /* Grids → single column */
  .nation-grid,
  .network-grid,
  .org-grid,
  .stats-row,
  .info-grid,
  .connections-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Stats row → 2 columns on mobile */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Typography — scale down large headings */
  .page-title { font-size: 24px !important; }
  .hero-name  { font-size: 22px !important; }

  /* Tables — horizontal scroll container */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav hamburger — ensure tap target is 44px min */
  .eco-hdr-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Theme selector — larger tap target on mobile */
  #eco-theme-selector {
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
  }
  .theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .theme-panel {
    left: 0 !important;
    right: auto !important;
    bottom: 48px !important;
  }

  /* Floating buttons — safe from notch/home bar */
  .admin-float-btn,
  #eco-theme-selector {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Hide non-essential decorative elements */
  .desktop-only { display: none !important; }

  /* Full-width buttons on mobile */
  .btn-primary,
  .btn-green,
  .export-btn {
    width: 100%;
    text-align: center;
  }

  /* Prevent overflow in post/note content */
  .npc-content,
  .hero-bio,
  .card-desc {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Tab bars — scrollable horizontal */
  .page-tabs,
  .tab-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .page-tabs::-webkit-scrollbar { display: none; }
}

/* ── Tablet (601–900px) ───────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .nation-grid,
  .network-grid,
  .org-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .page-title { font-size: 28px !important; }
}

/* ============================================================
   LIGHT THEME OVERRIDES — Grove & Parchment
   Force all hardcoded dark-theme colors to use CSS vars
   so text is readable on light backgrounds.
   ============================================================ */

[data-theme="grove"],
[data-theme="parchment"] {

  /* ── Page & layout backgrounds ── */
  --bg:    var(--color-bg);
  --bg2:   var(--color-surface);
  --white: var(--color-text);
  --dim:   var(--color-text-dim);
  --muted: var(--color-text-dim);
  --border: var(--color-border);

  /* ── Force body text readable ── */
  color: var(--color-text);
  background: var(--color-bg);
}

/* Body text — pages use hardcoded rgba(255,255,255,.xx) */
[data-theme="grove"] .page p, [data-theme="grove"] .shell p,
[data-theme="parchment"] .page p, [data-theme="parchment"] .shell p {
  color: var(--color-text-mid) !important;
}

[data-theme="grove"] .page li, [data-theme="grove"] .page ul, [data-theme="grove"] .page ol,
[data-theme="parchment"] .page li, [data-theme="parchment"] .page ul, [data-theme="parchment"] .page ol {
  color: var(--color-text-mid) !important;
}

/* Headings */
[data-theme="grove"] h1,
[data-theme="grove"] h2,
[data-theme="grove"] h3,
[data-theme="grove"] h4,
[data-theme="parchment"] h1,
[data-theme="parchment"] h2,
[data-theme="parchment"] h3,
[data-theme="parchment"] h4 {
  color: var(--color-text) !important;
}

/* Section headers on legal/faq pages */
[data-theme="grove"] .section-h2,
[data-theme="grove"] .section-h3,
[data-theme="grove"] .page-h1,
[data-theme="grove"] .page-sub,
[data-theme="parchment"] .section-h2,
[data-theme="parchment"] .section-h3,
[data-theme="parchment"] .page-h1,
[data-theme="parchment"] .page-sub {
  color: var(--color-text) !important;
}

/* FAQ accordion */
[data-theme="grove"] summary,
[data-theme="parchment"] summary {
  color: var(--color-text) !important;
}
[data-theme="grove"] details[open] summary,
[data-theme="parchment"] details[open] summary {
  color: var(--color-accent-c) !important;
}
[data-theme="grove"] .faq-body,
[data-theme="parchment"] .faq-body {
  color: var(--color-text-mid) !important;
}

/* Callout boxes */
[data-theme="grove"] .callout,
[data-theme="parchment"] .callout {
  background: var(--color-surface) !important;
  color: var(--color-text-mid) !important;
}
[data-theme="grove"] .ban,
[data-theme="parchment"] .ban {
  background: rgba(180,0,0,.06) !important;
}
[data-theme="grove"] .ban ul,
[data-theme="parchment"] .ban ul {
  color: var(--color-text-mid) !important;
}

/* Cards and surfaces */
[data-theme="grove"] .role-card,
[data-theme="grove"] .price-pill,
[data-theme="grove"] .contact-card,
[data-theme="grove"] .overlay-card,
[data-theme="grove"] .toc,
[data-theme="grove"] .promise-banner,
[data-theme="parchment"] .role-card,
[data-theme="parchment"] .price-pill,
[data-theme="parchment"] .contact-card,
[data-theme="parchment"] .overlay-card,
[data-theme="parchment"] .toc,
[data-theme="parchment"] .promise-banner {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

[data-theme="grove"] .promise-banner p,
[data-theme="parchment"] .promise-banner p {
  color: var(--color-text) !important;
}

/* Role/price cards text */
[data-theme="grove"] .role-name,
[data-theme="grove"] .price-name,
[data-theme="grove"] .cc-val,
[data-theme="parchment"] .role-name,
[data-theme="parchment"] .price-name,
[data-theme="parchment"] .cc-val {
  color: var(--color-text) !important;
}
[data-theme="grove"] .role-price,
[data-theme="grove"] .price-amt,
[data-theme="parchment"] .role-price,
[data-theme="parchment"] .price-amt {
  color: var(--color-accent-c) !important;
}
[data-theme="grove"] .role-desc,
[data-theme="grove"] .price-desc,
[data-theme="grove"] .overlay-card p,
[data-theme="parchment"] .role-desc,
[data-theme="parchment"] .price-desc,
[data-theme="parchment"] .overlay-card p {
  color: var(--color-text-dim) !important;
}

/* About page legal links */
[data-theme="grove"] .legal-link,
[data-theme="parchment"] .legal-link {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-dim) !important;
}

/* ToC links */
[data-theme="grove"] .toc a,
[data-theme="parchment"] .toc a {
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .toc-title,
[data-theme="parchment"] .toc-title {
  color: var(--color-text-dim) !important;
}

/* User.html & network pages — hardcoded surface colors */
[data-theme="grove"] .feed-card,
[data-theme="grove"] .stat-chip,
[data-theme="grove"] .viz-card,
[data-theme="grove"] .health-card,
[data-theme="grove"] .profile-field,
[data-theme="grove"] .prompt-card,
[data-theme="parchment"] .feed-card,
[data-theme="parchment"] .stat-chip,
[data-theme="parchment"] .viz-card,
[data-theme="parchment"] .health-card,
[data-theme="parchment"] .profile-field,
[data-theme="parchment"] .prompt-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

[data-theme="grove"] .fc-name,
[data-theme="grove"] .fc-body,
[data-theme="grove"] .fc-meta,
[data-theme="grove"] .sec-title,
[data-theme="grove"] .stat-num,
[data-theme="grove"] .prompt-text,
[data-theme="parchment"] .fc-name,
[data-theme="parchment"] .fc-body,
[data-theme="parchment"] .fc-meta,
[data-theme="parchment"] .sec-title,
[data-theme="parchment"] .stat-num,
[data-theme="parchment"] .prompt-text {
  color: var(--color-text) !important;
}

/* Navigation bar — header is always ECO black, never follows page theme */
/* (background override removed S320 — header uses solid #080D14 in header-injected.css) */
[data-theme="grove"] .eco-hdr-links a,
[data-theme="parchment"] .eco-hdr-links a {
  color: rgba(255,255,255,0.65) !important; /* light text on always-dark header */
}
[data-theme="grove"] .eco-hdr-wm .o,
[data-theme="parchment"] .eco-hdr-wm .o {
  color: #ffffff !important; /* .Online always white on dark header */
}
[data-theme="grove"] .eco-hdr-tri-menu,
[data-theme="grove"] .eco-hdr-user-menu,
[data-theme="parchment"] .eco-hdr-tri-menu,
[data-theme="parchment"] .eco-hdr-user-menu {
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
}
[data-theme="grove"] .eco-hdr-tri-menu a,
[data-theme="grove"] .eco-hdr-user-menu a,
[data-theme="grove"] .eco-hdr-user-menu button,
[data-theme="grove"] .tri-label,
[data-theme="grove"] .um-name,
[data-theme="parchment"] .eco-hdr-tri-menu a,
[data-theme="parchment"] .eco-hdr-user-menu a,
[data-theme="parchment"] .eco-hdr-user-menu button,
[data-theme="parchment"] .tri-label,
[data-theme="parchment"] .um-name {
  color: var(--color-text-mid) !important;
}

/* Footer */
[data-theme="grove"] footer,
[data-theme="parchment"] footer {
  border-top-color: var(--color-border) !important;
}
[data-theme="grove"] footer a,
[data-theme="parchment"] footer a {
  color: var(--color-text-dim) !important;
}

/* Inputs */
[data-theme="grove"] input,
[data-theme="grove"] textarea,
[data-theme="grove"] select,
[data-theme="parchment"] input,
[data-theme="parchment"] textarea,
[data-theme="parchment"] select {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Section labels / eyebrows */
[data-theme="grove"] .section-label,
[data-theme="grove"] .page-eye,
[data-theme="grove"] .updated,
[data-theme="parchment"] .section-label,
[data-theme="parchment"] .page-eye,
[data-theme="parchment"] .updated {
  color: var(--color-text-dim) !important;
}

/* Story/AI chat bubbles */
[data-theme="grove"] .msg-eco,
[data-theme="grove"] .msg-user,
[data-theme="grove"] .wl-msg-eco,
[data-theme="grove"] .wl-msg-user,
[data-theme="parchment"] .msg-eco,
[data-theme="parchment"] .msg-user,
[data-theme="parchment"] .wl-msg-eco,
[data-theme="parchment"] .wl-msg-user {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* strong tags — ensure readable */
[data-theme="grove"] .page strong, [data-theme="grove"] .shell strong,
[data-theme="parchment"] .page strong, [data-theme="parchment"] .shell strong {
  color: var(--color-text) !important;
}

/* ── Confluence page — hardcoded white text fixes ── */
[data-theme="grove"] .library-ft,
[data-theme="grove"] .ft,
[data-theme="parchment"] .library-ft,
[data-theme="parchment"] .ft {
  color: var(--color-text) !important;
}

[data-theme="grove"] .vc-card,
[data-theme="grove"] .vc-word,
[data-theme="grove"] .vc-def,
[data-theme="grove"] .vc-usage,
[data-theme="parchment"] .vc-card,
[data-theme="parchment"] .vc-word,
[data-theme="parchment"] .vc-def,
[data-theme="parchment"] .vc-usage {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* ── Member page ── */
[data-theme="grove"] .shell,
[data-theme="grove"] .hero-card,
[data-theme="grove"] .conn-section,
[data-theme="parchment"] .shell,
[data-theme="parchment"] .hero-card,
[data-theme="parchment"] .conn-section {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="grove"] .hero-name,
[data-theme="grove"] .hero-bio,
[data-theme="parchment"] .hero-name,
[data-theme="parchment"] .hero-bio {
  color: var(--color-text) !important;
}

/* ── Pulse/feed date — dark-on-dark fix for all themes ── */
.pulse-collapsed-date,
.lb-no-comments {
  color: var(--color-text-dim);
}

/* ── Inline rgba(255,255,255,x) patterns — catch-all for light themes ── */
[data-theme="grove"] [style*="color:rgba(255,255,255"],
[data-theme="grove"] [style*="color: rgba(255,255,255"],
[data-theme="parchment"] [style*="color:rgba(255,255,255"],
[data-theme="parchment"] [style*="color: rgba(255,255,255"] {
  color: var(--color-text-mid) !important;
}

/* ── Inline hardcoded light hex text — catch-all ── */
[data-theme="grove"] [style*="color:#E8F4F0"],
[data-theme="grove"] [style*="color:#C8D4D0"],
[data-theme="grove"] [style*="color:#7AADA0"],
[data-theme="parchment"] [style*="color:#E8F4F0"],
[data-theme="parchment"] [style*="color:#C8D4D0"],
[data-theme="parchment"] [style*="color:#7AADA0"] {
  color: var(--color-text-mid) !important;
}

/* ── Inline hardcoded dark hex text — catch-all for dark themes ── */
[data-theme="void"] [style*="color:#2A3A34"],
[data-theme="void"] [style*="color:#1A2A24"],
[data-theme="deep-sea"] [style*="color:#2A3A34"],
[data-theme="deep-sea"] [style*="color:#1A2A24"] {
  color: var(--color-text-dim) !important;
}

/* ============================================================
   LIGHT THEME OVERRIDES — Grove & Parchment v2
   SURGICAL — class-targeted only. No catch-alls. No [style*=].
   No --white override. Header always stays dark.
   ============================================================ */

/* ── Body text — pages that hardcode rgba(255,255,255) in CSS rules ── */
[data-theme="grove"] .page p, [data-theme="grove"] .shell p,
[data-theme="parchment"] .page p, [data-theme="parchment"] .shell p {
  color: var(--color-text-mid) !important;
}
[data-theme="grove"] .page li, [data-theme="grove"] .page ul, [data-theme="grove"] .page ol,
[data-theme="parchment"] .page li, [data-theme="parchment"] .page ul, [data-theme="parchment"] .page ol {
  color: var(--color-text-mid) !important;
}
[data-theme="grove"] .page strong, [data-theme="grove"] .shell strong,
[data-theme="parchment"] .page strong, [data-theme="parchment"] .shell strong {
  color: var(--color-text) !important;
}

/* ── Headings ── */
[data-theme="grove"] .page h1,[data-theme="grove"] .page h2,
[data-theme="grove"] .page h3,[data-theme="grove"] .page h4,
[data-theme="parchment"] .page h1,[data-theme="parchment"] .page h2,
[data-theme="parchment"] .page h3,[data-theme="parchment"] .page h4 {
  color: var(--color-text) !important;
}

/* ── Legal/FAQ page specific classes ── */
[data-theme="grove"] .section-h2,[data-theme="grove"] .section-h3,
[data-theme="grove"] .page-h1,[data-theme="grove"] .page-sub,
[data-theme="parchment"] .section-h2,[data-theme="parchment"] .section-h3,
[data-theme="parchment"] .page-h1,[data-theme="parchment"] .page-sub {
  color: var(--color-text) !important;
}
[data-theme="grove"] .page-eye,[data-theme="grove"] .updated,
[data-theme="grove"] .section-label,[data-theme="grove"] .toc-title,
[data-theme="parchment"] .page-eye,[data-theme="parchment"] .updated,
[data-theme="parchment"] .section-label,[data-theme="parchment"] .toc-title {
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .callout,[data-theme="parchment"] .callout {
  background: var(--color-surface) !important;
  color: var(--color-text-mid) !important;
}
[data-theme="grove"] .toc,[data-theme="grove"] .promise-banner,
[data-theme="grove"] .role-card,[data-theme="grove"] .price-pill,
[data-theme="grove"] .contact-card,[data-theme="grove"] .overlay-card,
[data-theme="parchment"] .toc,[data-theme="parchment"] .promise-banner,
[data-theme="parchment"] .role-card,[data-theme="parchment"] .price-pill,
[data-theme="parchment"] .contact-card,[data-theme="parchment"] .overlay-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="grove"] .promise-banner p,[data-theme="parchment"] .promise-banner p {
  color: var(--color-text) !important;
}
[data-theme="grove"] .role-name,[data-theme="grove"] .price-name,
[data-theme="parchment"] .role-name,[data-theme="parchment"] .price-name {
  color: var(--color-text) !important;
}
[data-theme="grove"] .role-price,[data-theme="grove"] .price-amt,
[data-theme="parchment"] .role-price,[data-theme="parchment"] .price-amt {
  color: var(--color-accent-c) !important;
}
[data-theme="grove"] .role-desc,[data-theme="grove"] .price-desc,
[data-theme="parchment"] .role-desc,[data-theme="parchment"] .price-desc {
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .toc a,[data-theme="parchment"] .toc a {
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .legal-link,[data-theme="parchment"] .legal-link {
  background: var(--color-surface) !important;
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .ban ul,[data-theme="parchment"] .ban ul {
  color: var(--color-text-mid) !important;
}
[data-theme="grove"] summary,[data-theme="parchment"] summary {
  color: var(--color-text) !important;
}
[data-theme="grove"] .faq-body,[data-theme="parchment"] .faq-body {
  color: var(--color-text-mid) !important;
}
[data-theme="grove"] .cc-val,[data-theme="parchment"] .cc-val {
  color: var(--color-text) !important;
}

/* ── user.html — tab buttons on light themes ── */
[data-theme="grove"] .page-tab-btn,
[data-theme="parchment"] .page-tab-btn {
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .page-tab-btn.active,
[data-theme="parchment"] .page-tab-btn.active {
  /* The base .page-tab-btn.active fills the pill with --color-accent-c; text must
     stay white for contrast. (Was --color-accent-c → dark text on dark fill.) */
  color: #fff !important;
  border-bottom-color: var(--color-accent-c) !important;
}
[data-theme="grove"] .page-tab-bar,
[data-theme="parchment"] .page-tab-bar {
  border-bottom-color: var(--color-border) !important;
}

/* ── user.html — section labels & stat chips ── */
[data-theme="grove"] .sec-label,[data-theme="grove"] .sec-title,
[data-theme="parchment"] .sec-label,[data-theme="parchment"] .sec-title {
  color: var(--color-text-dim) !important;
}
[data-theme="grove"] .stat-chip,[data-theme="grove"] .health-card,
[data-theme="grove"] .feed-card,[data-theme="grove"] .viz-card,
[data-theme="grove"] .prompt-card,[data-theme="grove"] .profile-field,
[data-theme="parchment"] .stat-chip,[data-theme="parchment"] .health-card,
[data-theme="parchment"] .feed-card,[data-theme="parchment"] .viz-card,
[data-theme="parchment"] .prompt-card,[data-theme="parchment"] .profile-field {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="grove"] .fc-name,[data-theme="grove"] .stat-num,
[data-theme="parchment"] .fc-name,[data-theme="parchment"] .stat-num {
  color: var(--color-text) !important;
}
[data-theme="grove"] .fc-body,[data-theme="grove"] .fc-meta,
[data-theme="grove"] .prompt-text,
[data-theme="parchment"] .fc-body,[data-theme="parchment"] .fc-meta,
[data-theme="parchment"] .prompt-text {
  color: var(--color-text-mid) !important;
}

/* ── member.html ── */
[data-theme="grove"] .hero-card,[data-theme="grove"] .conn-section,
[data-theme="parchment"] .hero-card,[data-theme="parchment"] .conn-section {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="grove"] .hero-name,[data-theme="parchment"] .hero-name {
  color: var(--color-text) !important;
}

/* ── Dropdowns — desktop only (mobile uses hardcoded dark bg) ── */
@media(min-width:641px){
  [data-theme="grove"] .eco-hdr-tri-menu,
  [data-theme="grove"] .eco-hdr-user-menu,
  [data-theme="parchment"] .eco-hdr-tri-menu,
  [data-theme="parchment"] .eco-hdr-user-menu {
    background: var(--color-surface) !important;
    border-color: var(--color-border-strong) !important;
  }
  [data-theme="grove"] .eco-hdr-tri-menu a,
  [data-theme="grove"] .eco-hdr-user-menu a,
  [data-theme="grove"] .eco-hdr-user-menu button,
  [data-theme="parchment"] .eco-hdr-tri-menu a,
  [data-theme="parchment"] .eco-hdr-user-menu a,
  [data-theme="parchment"] .eco-hdr-user-menu button {
    color: var(--color-text-mid) !important;
  }
  [data-theme="grove"] .tri-label,[data-theme="grove"] .um-name,
  [data-theme="parchment"] .tri-label,[data-theme="parchment"] .um-name {
    color: var(--color-text-dim) !important;
  }
}

/* ── Footer links ── */
[data-theme="grove"] footer a,[data-theme="parchment"] footer a {
  color: var(--color-text-dim) !important;
}

/* ── Inputs ── */
[data-theme="grove"] input,[data-theme="grove"] textarea,[data-theme="grove"] select,
[data-theme="parchment"] input,[data-theme="parchment"] textarea,[data-theme="parchment"] select {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ── Dark-on-dark fix — applies to ALL themes via CSS var ── */
.pulse-collapsed-date,.lb-no-comments {
  color: var(--color-text-dim) !important;
}

/* ============================================================
   DARK BACKGROUND SECTION RESETS — Grove & Parchment
   Pages/sections with dark image backgrounds must keep
   brand colors (blue/green/white) regardless of theme.
   Redefine vars locally so all child elements inherit correctly.
   ============================================================ */

[data-theme="grove"] .hero,
[data-theme="grove"] .hero-full,
[data-theme="grove"] .m-hero,
[data-theme="grove"] .energy-wrap,
[data-theme="grove"] .globe-full,
[data-theme="grove"] .phase-strip,
[data-theme="grove"] .feat-section,
[data-theme="grove"] .banner-section,
[data-theme="grove"] .story-row,
[data-theme="parchment"] .hero,
[data-theme="parchment"] .hero-full,
[data-theme="parchment"] .m-hero,
[data-theme="parchment"] .energy-wrap,
[data-theme="parchment"] .globe-full,
[data-theme="parchment"] .phase-strip,
[data-theme="parchment"] .feat-section,
[data-theme="parchment"] .banner-section,
[data-theme="parchment"] .story-row {
  --white:          #E8F4F0;
  --blue:           #00AAFF;
  --green:          #00CC44;
  --muted:          rgba(232,244,240,0.55);
  --dim:            rgba(232,244,240,0.40);
  --color-text:     #E8F4F0;
  --color-text-mid: rgba(232,244,240,0.70);
  --color-text-dim: rgba(232,244,240,0.45);
  --color-accent-c: #00AAFF;
  --color-accent-c-fg: #000000; /* bright — dark text for contrast */
  --color-accent-g-fg: #000000;
  --color-accent-a-fg: #000000;
  --color-accent-r-fg: #000000;
  --color-accent-g: #00CC44;
}

/* index.html glassdoor — full dark canvas, always light text */
[data-theme="grove"] body > .hero-wrap,
[data-theme="grove"] .hero-section,
[data-theme="grove"] #hero-canvas-wrap,
[data-theme="parchment"] body > .hero-wrap,
[data-theme="parchment"] .hero-section,
[data-theme="parchment"] #hero-canvas-wrap {
  --white:          #E8F4F0;
  --blue:           #00AAFF;
  --green:          #00CC44;
  --muted:          rgba(232,244,240,0.55);
  --color-text:     #E8F4F0;
  --color-text-dim: rgba(232,244,240,0.45);
  --color-accent-c: #00AAFF;
  --color-accent-c-fg: #000000; /* bright — dark text for contrast */
  --color-accent-g-fg: #000000;
  --color-accent-a-fg: #000000;
  --color-accent-r-fg: #000000;
  --color-accent-g: #00CC44;
}

/* index.html — #glass wraps the entire glassdoor page */
[data-theme="grove"] #glass,
[data-theme="parchment"] #glass {
  --white:          #E8F4F0;
  --blue:           #00AAFF;
  --green:          #00CC44;
  --muted:          rgba(232,244,240,0.55);
  --color-text:     #E8F4F0;
  --color-text-dim: rgba(232,244,240,0.45);
  --color-accent-c: #00AAFF;
  --color-accent-c-fg: #000000; /* bright — dark text for contrast */
  --color-accent-g-fg: #000000;
  --color-accent-a-fg: #000000;
  --color-accent-r-fg: #000000;
  --color-accent-g: #00CC44;
}
[data-theme="grove"] h1.hero,
[data-theme="grove"] .tagline,
[data-theme="grove"] .hero-q,
[data-theme="parchment"] h1.hero,
[data-theme="parchment"] .tagline,
[data-theme="parchment"] .hero-q {
  color: #E8F4F0 !important;
}

/* Ensure hero text uses white/brand colors directly */
[data-theme="grove"] .hero h1,
[data-theme="grove"] .hero-h1,
[data-theme="grove"] .hero-eye,
[data-theme="grove"] .hero-tag,
[data-theme="grove"] .hero-content p,
[data-theme="grove"] .cf-q,
[data-theme="grove"] .vc-term,
[data-theme="grove"] .rs-num,
[data-theme="grove"] .ft,
[data-theme="parchment"] .hero h1,
[data-theme="parchment"] .hero-h1,
[data-theme="parchment"] .hero-eye,
[data-theme="parchment"] .hero-tag,
[data-theme="parchment"] .hero-content p,
[data-theme="parchment"] .cf-q,
[data-theme="parchment"] .vc-term,
[data-theme="parchment"] .rs-num,
[data-theme="parchment"] .ft {
  color: #E8F4F0 !important;
}

/* Brand accent spans inside hero headings */
[data-theme="grove"] .hero-h1 .b,
[data-theme="grove"] .hero-h1 .e,
[data-theme="parchment"] .hero-h1 .b,
[data-theme="parchment"] .hero-h1 .e { color: #00AAFF !important; }

[data-theme="grove"] .hero-h1 .g,
[data-theme="grove"] .hero-h1 .c,
[data-theme="parchment"] .hero-h1 .g,
[data-theme="parchment"] .hero-h1 .c { color: #00CC44 !important; }

/* ── S236: Theme Selector Positioning Classes (no inline styles) ── */

/* admin-offset: admin-float-btn removed; keep selector at default bottom */
#eco-theme-selector.admin-offset {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Mobile layout: adjust positioning for smaller screens */
@media (max-width: 600px) {
  #eco-theme-selector.mobile-layout {
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
  }
  
  #eco-theme-selector.mobile-layout #eco-theme-panel {
    bottom: 50px !important;
    right: 0 !important;
  }
}

/* Light/Dark color scheme support */
html.theme-light {
  color-scheme: light;
}

html.theme-dark {
  color-scheme: dark;
}

/* ── Theme Swatch Elements (no inline styles) ── */
.theme-swatch {
  position: relative;
  /* S320 fix: removed width:100%; height:100% which overrode the
     32x22px sizing in the panel rule above and pushed theme names off-screen */
}

.swatch-bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.swatch-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: var(--bar);
}

.swatch-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
}

.swatch-line {
  position: absolute;
  top: 14px;
  left: 5px;
  right: 13px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  opacity: 0.5;
}

/* ── Per-theme swatch CSS variables (CSP-safe, replaces inline style) ── */
.theme-swatch-void {
  --bg: #070D14;
  --bar: #040810;
  --dot: #00AAFF;
  --line: #00CC44;
}

.theme-swatch-deep-sea {
  --bg: #0F3854;
  --bar: #0A2840;
  --dot: #00E5CC;
  --line: #00E040;
}

.theme-swatch-grove {
  --bg: #C8DDD2;
  --bar: #B4CCBC;
  --dot: #004A44;
  --line: #004A18;
}

.theme-swatch-parchment {
  --bg: #F5F2EC;
  --bar: #EAE6DC;
  --dot: #006B62;
  --line: #006B20;
}

/* ── Modal & Dialog Styles (no inline styles) ── */
.eco-svg-icon {
  display: block;
  overflow: visible;
}

.eco-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.eco-modal-box {
  background: #0D1825;
  border: 1px solid rgba(0, 170, 255, 0.22);
  border-radius: 14px;
  width: 100%;
  max-width: 380px;
  padding: 28px 24px;
}

.eco-modal-title {
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: #E8F4F0;
  margin-bottom: 6px;
}

.eco-modal-desc {
  font-size: 12px;
  color: #5A8A80;
  margin-bottom: 20px;
}

.eco-modal-input {
  width: 100%;
  background: #080D14;
  border: 1px solid rgba(0, 170, 255, 0.22);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #E8F4F0;
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.eco-modal-input:last-of-type {
  margin-bottom: 16px;
}

.eco-modal-msg {
  font-size: 12px;
  min-height: 18px;
  margin-bottom: 12px;
  color: #E8F4F0;
}

.eco-modal-msg.eco-error {
  color: #ff6666;
}

.eco-modal-msg.eco-success {
  color: #00CC44;
}

.eco-modal-buttons {
  display: flex;
  gap: 8px;
}

.eco-btn-primary {
  flex: 1;
  background: var(--brand-blue); /* S320: was hardcoded #00AAFF */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.eco-btn-primary.eco-loading {
  opacity: 0.6;
}

.eco-btn-secondary {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #5A8A80;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 12px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE UX FIXES — S319
   ═══════════════════════════════════════════════════════════════════ */

/* FIX 3 — Theme selector above iPhone home indicator                  */
.theme-selector-widget,
#eco-theme-selector {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* S320: FIX 14 resolved — theme-panel-title and theme-sub base sizes corrected above */

/* ════════════════════════════════════════════════════════════════════
   S324 — Move the theme selector to the bottom-LEFT corner.
   It was at bottom:20px/right:20px (z-index 9000), directly beneath the
   bottom-right help "?" fab (z-index 9999), so it was hidden. Bottom-left
   is free (admin float button shares the bottom-right column). Overrides
   the mobile media-query right-pin too (equal specificity, later source).
   ════════════════════════════════════════════════════════════════════ */
#eco-theme-selector {
  left: 20px !important;
  right: auto !important;
  align-items: flex-start !important;
}
#eco-theme-panel,
.theme-selector .theme-panel {
  left: 0 !important;
  right: auto !important;
}
.theme-toggle-btn::before {
  left: 52px !important;
  right: auto !important;
}


/* ============================================================
   S394 — LIGHT THEME TEXT/BORDER CONTRAST FIX
   Comprehensive catch-all for all user-facing pages.
   Converts dark-theme-only rgba(255,255,255,x) patterns to
   CSS vars so grove/parchment themes are readable.
   Borders: rgba(255,255,255,.xx) → var(--color-border)
   Backgrounds: rgba(255,255,255,<.10) tints → var(--color-surface2)
   Text: rgba(255,255,255,x) → var(--color-text-mid/dim)
   ============================================================ */

/* ── Button text on accent-colored buttons ── */
[data-theme="grove"] .btn-primary,
[data-theme="grove"] .btn-green,
[data-theme="grove"] .btn-blue,
[data-theme="grove"] .su-btn-blue,
[data-theme="grove"] .su-btn-green,
[data-theme="grove"] .afc-btn-blue,
[data-theme="parchment"] .btn-primary,
[data-theme="parchment"] .btn-green,
[data-theme="parchment"] .btn-blue,
[data-theme="parchment"] .su-btn-blue,
[data-theme="parchment"] .su-btn-green,
[data-theme="parchment"] .afc-btn-blue {
  color: #ffffff !important; /* white on colored button bg — always readable */
}

/* ── Ghost / outline buttons ── */
[data-theme="grove"] .btn-g,
[data-theme="grove"] .btn-outline,
[data-theme="grove"] .pin-cancel,
[data-theme="grove"] .btn-rm-row,
[data-theme="grove"] .invite-row .btn-rm-row,
[data-theme="grove"] .type-pill,
[data-theme="grove"] .cat-pill,
[data-theme="grove"] .filter-pill,
[data-theme="grove"] .lang-pill,
[data-theme="grove"] .role-btn,
[data-theme="grove"] .react-btn,
[data-theme="parchment"] .btn-g,
[data-theme="parchment"] .btn-outline,
[data-theme="parchment"] .pin-cancel,
[data-theme="parchment"] .btn-rm-row,
[data-theme="parchment"] .invite-row .btn-rm-row,
[data-theme="parchment"] .type-pill,
[data-theme="parchment"] .cat-pill,
[data-theme="parchment"] .filter-pill,
[data-theme="parchment"] .lang-pill,
[data-theme="parchment"] .role-btn,
[data-theme="parchment"] .react-btn {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  background: var(--color-surface2) !important;
}

/* ── Pill/chip active states ── */
[data-theme="grove"] .type-pill.active,
[data-theme="grove"] .cat-pill.active,
[data-theme="grove"] .filter-pill.active,
[data-theme="grove"] .lang-pill.active,
[data-theme="grove"] .role-btn.active,
[data-theme="parchment"] .type-pill.active,
[data-theme="parchment"] .cat-pill.active,
[data-theme="parchment"] .filter-pill.active,
[data-theme="parchment"] .lang-pill.active,
[data-theme="parchment"] .role-btn.active {
  color: var(--color-accent-c-fg) !important;
  background: var(--color-accent-c) !important;
  border-color: var(--color-accent-c) !important;
}

/* ── Surface/tint backgrounds → themed surface ── */
[data-theme="grove"] .tab-bar,
[data-theme="grove"] .poll-closed-badge,
[data-theme="grove"] .btn-draft,
[data-theme="grove"] .attr-tier,
[data-theme="grove"] .vocab-group-head,
[data-theme="grove"] .su-card-icon,
[data-theme="grove"] .tv-screen-banner,
[data-theme="grove"] .preview-box,
[data-theme="parchment"] .tab-bar,
[data-theme="parchment"] .poll-closed-badge,
[data-theme="parchment"] .btn-draft,
[data-theme="parchment"] .attr-tier,
[data-theme="parchment"] .vocab-group-head,
[data-theme="parchment"] .su-card-icon,
[data-theme="parchment"] .tv-screen-banner,
[data-theme="parchment"] .preview-box {
  background: var(--color-surface2) !important;
  border-color: var(--color-border) !important;
}

/* ── Text colors ── */
[data-theme="grove"] .vocab-empty,
[data-theme="grove"] .vc-origin,
[data-theme="grove"] .conf-empty,
[data-theme="grove"] .conf-hero-sub,
[data-theme="grove"] .pin-lightbox-loc,
[data-theme="grove"] .poll-closed-badge,
[data-theme="parchment"] .vocab-empty,
[data-theme="parchment"] .vc-origin,
[data-theme="parchment"] .conf-empty,
[data-theme="parchment"] .conf-hero-sub,
[data-theme="parchment"] .pin-lightbox-loc,
[data-theme="parchment"] .poll-closed-badge {
  color: var(--color-text-dim) !important;
}

/* ── Dividers & row separators ── */
[data-theme="grove"] .pc-row,
[data-theme="grove"] .note-card,
[data-theme="grove"] .contrib-nom-row,
[data-theme="grove"] .member-map-row,
[data-theme="grove"] .result-item,
[data-theme="grove"] .place-result,
[data-theme="grove"] .mb-link-row,
[data-theme="grove"] .pet-footer-row,
[data-theme="grove"] .mb-sep-row,
[data-theme="parchment"] .pc-row,
[data-theme="parchment"] .note-card,
[data-theme="parchment"] .contrib-nom-row,
[data-theme="parchment"] .member-map-row,
[data-theme="parchment"] .result-item,
[data-theme="parchment"] .place-result,
[data-theme="parchment"] .mb-link-row,
[data-theme="parchment"] .pet-footer-row,
[data-theme="parchment"] .mb-sep-row {
  border-color: var(--color-border) !important;
}

/* ── Progress / bar tracks ── */
[data-theme="grove"] .contrib-nom-bar,
[data-theme="grove"] .progress-bar,
[data-theme="parchment"] .contrib-nom-bar,
[data-theme="parchment"] .progress-bar {
  background: var(--color-border) !important;
}

/* ── Legal / long-form pages — p and ul/ol text ── */
[data-theme="grove"] .page p,
[data-theme="grove"] .page li,
[data-theme="parchment"] .page p,
[data-theme="parchment"] .page li {
  color: var(--color-text-mid) !important;
}

/* ── Landing page dividers ── */
[data-theme="grove"] .section-divider,
[data-theme="grove"] .service-section,
[data-theme="parchment"] .section-divider,
[data-theme="parchment"] .service-section {
  border-color: var(--color-border) !important;
}

/* ── Signup card icon ── */
[data-theme="grove"] .su-card-icon,
[data-theme="parchment"] .su-card-icon {
  color: var(--color-text) !important;
}