/* ============================================================
   PINd.AI · Train the Trainer — shared theme layer
   Brand: violet (#7C3AED) + cyan (#06B6D4). Light default.
   This file adds the DARK alternate + nav FAB vars + reduced motion.
   Toggle cycles: light -> dark -> system, via nav.js.
   ============================================================ */

/* ---- Global nav FAB variables (light defaults) ---- */
html{
  --gnav-btn-bg:rgba(255,255,255,.94);
  --gnav-btn-bg-hover:rgba(124,58,237,.10);
  --gnav-btn-bg-active:rgba(124,58,237,.16);
  --gnav-btn-border:rgba(15,15,25,.12);
  --gnav-btn-border-hover:rgba(124,58,237,.45);
  --gnav-btn-color:#1A1A2E;
  --gnav-panel-bg:rgba(255,255,255,.98);
  --gnav-panel-border:rgba(15,15,25,.10);
  --gnav-shadow:rgba(15,15,25,.18);
}

/* ============================================================
   DARK THEME
   ============================================================ */
html[data-theme="dark"]{
  --bg:#0B0F1A;
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.10);
  --violet:#A78BFA;--violet-light:#C4B5FD;--violet-bright:#A78BFA;
  --cyan:#22D3EE;--cyan-light:#67E8F9;
  --text:#F1F5F9;--text-body:#C6D2E0;--text-muted:#93A4B8;--text-dim:#5B6B80;
  --border:rgba(167,139,250,.16);
  /* nav vars */
  --gnav-btn-bg:rgba(17,21,29,.92);
  --gnav-btn-bg-hover:rgba(167,139,250,.16);
  --gnav-btn-bg-active:rgba(167,139,250,.26);
  --gnav-btn-border:rgba(255,255,255,.12);
  --gnav-btn-border-hover:rgba(167,139,250,.5);
  --gnav-btn-color:#F1F5F9;
  --gnav-panel-bg:rgba(13,17,26,.98);
  --gnav-panel-border:rgba(255,255,255,.10);
  --gnav-shadow:rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:#0B0F1A;color:var(--text-body)}

/* Text selection — light text on stronger violet wash so it stays readable on dark */
html[data-theme="dark"] ::selection{background:rgba(167,139,250,.42);color:#FFFFFF}
html[data-theme="dark"] ::-moz-selection{background:rgba(167,139,250,.42);color:#FFFFFF}

/* Surfaces that hardcode light colours in the page <style> */
html[data-theme="dark"] .tab-nav{background:rgba(11,15,26,.96) !important;border-bottom-color:rgba(255,255,255,.08) !important}
html[data-theme="dark"] .tab-nav .tnum{background:rgba(34,211,238,.20) !important}
html[data-theme="dark"] .tab-nav button.active{color:#67E8F9 !important}
html[data-theme="dark"] .tab-nav button.active .tnum{background:#22D3EE !important;color:#0B0F1A !important}
html[data-theme="dark"] .tab-nav button.active::after{background:linear-gradient(90deg,#22D3EE,#67E8F9) !important}
html[data-theme="dark"] .top-nav{background:rgba(11,15,26,.96) !important;border-bottom-color:rgba(255,255,255,.08) !important}
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .subsection{color:var(--text)}
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .section-desc{color:var(--text-muted)}

html[data-theme="dark"] .info-card{background:#141a26 !important;border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] .info-card h4{color:var(--text)}
html[data-theme="dark"] .info-card p{color:var(--text-muted)}
html[data-theme="dark"] .detail-panel{background:#11161f !important;border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] .detail-panel h4{color:var(--text)}
html[data-theme="dark"] .detail-panel p,html[data-theme="dark"] .detail-panel li{color:var(--text-body)}
html[data-theme="dark"] .stat-card{background:#141a26 !important;border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] .stat-card .lbl{color:var(--text-muted)}

html[data-theme="dark"] .flow-wrap{background:#11161f !important;border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] [style*="background:#FAFAFA"]{background:#11161f !important}

html[data-theme="dark"] .narrator{background:rgba(34,211,238,.12) !important;border-color:rgba(34,211,238,.30) !important}
html[data-theme="dark"] .narrator-text{color:var(--text-body)}
html[data-theme="dark"] .narrator-text strong{color:#67E8F9 !important}

/* Cards / grids */
html[data-theme="dark"] .module-card{background:linear-gradient(145deg,#141a26,#1a1230) !important;border-color:rgba(255,255,255,.08) !important}
html[data-theme="dark"] .module-card h3{color:var(--text)}
html[data-theme="dark"] .module-card .mod-desc{color:var(--text-body)}
html[data-theme="dark"] .resource-card{background:linear-gradient(145deg,#141a26,#101722) !important;border-color:rgba(255,255,255,.08) !important}
html[data-theme="dark"] .resource-card h4{color:var(--text)}
html[data-theme="dark"] .resource-card p{color:var(--text-body)}

/* Notices */
html[data-theme="dark"] .notice-violet{background:rgba(167,139,250,.10) !important;border-color:rgba(167,139,250,.30) !important;color:var(--text-body) !important}
html[data-theme="dark"] .notice-cyan{background:rgba(34,211,238,.10) !important;border-color:rgba(34,211,238,.28) !important;color:var(--text-body) !important}
html[data-theme="dark"] .notice-amber{background:rgba(245,158,11,.10) !important;border-color:rgba(245,158,11,.28) !important;color:var(--text-body) !important}
html[data-theme="dark"] .notice-green{background:rgba(16,185,129,.12) !important;border-color:rgba(16,185,129,.30) !important;color:var(--text-body) !important}
html[data-theme="dark"] .notice strong{color:var(--text)}
.notice a{color:#7C3AED;font-weight:600;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] .notice a{color:#C4B5FD !important}

/* Chips, feature list, next-links */
html[data-theme="dark"] .chip{background:rgba(34,211,238,.16) !important;color:#67E8F9 !important;border-color:rgba(34,211,238,.35) !important}
html[data-theme="dark"] .feature-list li{color:var(--text-body);border-bottom-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .next-link{background:#141a26 !important;border-color:rgba(167,139,250,.3) !important;color:#C4B5FD !important}
html[data-theme="dark"] .mod-status.soon{background:rgba(148,163,184,.16) !important;color:#B4C0CE !important;border-color:rgba(148,163,184,.3) !important}

/* Module-card accents */
html[data-theme="dark"] .module-card .mod-tag{background:rgba(34,211,238,.16) !important;color:#67E8F9 !important;border-color:rgba(34,211,238,.34) !important}
html[data-theme="dark"] .module-card .mod-num{color:#A78BFA !important;background:rgba(167,139,250,.14) !important}
html[data-theme="dark"] .module-card .mod-cta,
html[data-theme="dark"] .module-card:hover .mod-cta{color:#C4B5FD !important}
html[data-theme="dark"] .top-nav a.active{color:#A78BFA !important;background:rgba(167,139,250,.12) !important;border-color:rgba(167,139,250,.3) !important}
html[data-theme="dark"] .feature-list li::before{color:#A78BFA !important}

/* Footer */
html[data-theme="dark"] .footer{border-top-color:rgba(255,255,255,.08);color:var(--text-dim)}

/* ---- SVG node theming (class-based) ---- */
.node-bg,.flow-bg{fill:#FFFFFF;stroke:rgba(124,58,237,.3);stroke-width:2}
html[data-theme="dark"] .node-bg{fill:#1a2130 !important;stroke:rgba(167,139,250,.4) !important}
html[data-theme="dark"] .dag-svg-node:hover .node-bg{stroke:rgba(167,139,250,.7) !important}
html[data-theme="dark"] .dag-svg-node.active .node-bg{stroke:#A78BFA !important;filter:drop-shadow(0 0 12px rgba(167,139,250,.5)) !important}
html[data-theme="dark"] .flow-bg{fill:#1a2130 !important;stroke:rgba(167,139,250,.4) !important}
html[data-theme="dark"] .flow-node:hover .flow-bg{stroke:rgba(167,139,250,.7) !important}
html[data-theme="dark"] .flow-node.active .flow-bg{stroke:#A78BFA !important;filter:drop-shadow(0 0 12px rgba(167,139,250,.45)) !important}
html[data-theme="dark"] .node-label{fill:#F1F5F9 !important}
html[data-theme="dark"] .node-sub{fill:#93A4B8 !important}
html[data-theme="dark"] .flow-label{fill:#8CA0B6 !important}
html[data-theme="dark"] .flow-name{fill:#F1F5F9 !important}
html[data-theme="dark"] .flow-sub{fill:#AEBED0 !important}
html[data-theme="dark"] .flow-node .flow-bg{fill:#1a2130 !important}

/* ============================================================
   CONNECTOR EDGES — reusable, pre-themed, solid in BOTH themes.
   ============================================================ */
.edge-v{stroke:rgba(124,58,237,.6);stroke-width:2.4}   /* violet */
.edge-c{stroke:rgba(6,182,212,.6);stroke-width:2.4}    /* cyan */
.edge-g{stroke:rgba(16,185,129,.6);stroke-width:2.4}   /* green */
.edge-a{stroke:rgba(245,158,11,.6);stroke-width:2.4}   /* amber */
html[data-theme="dark"] .edge-v{stroke:rgba(167,139,250,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] .edge-c{stroke:rgba(103,232,249,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] .edge-g{stroke:rgba(52,211,153,.95) !important;stroke-width:2.6 !important}
html[data-theme="dark"] .edge-a{stroke:rgba(251,191,36,.92) !important;stroke-width:2.6 !important}

/* Legacy inline strokes — bolden on dark so old diagrams don't look faint */
html[data-theme="dark"] svg [stroke="rgba(124,58,237,.4)"],
html[data-theme="dark"] svg [stroke="rgba(124,58,237,.35)"],
html[data-theme="dark"] svg [stroke="rgba(124,58,237,.3)"]{stroke:rgba(167,139,250,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(6,182,212,.55)"],
html[data-theme="dark"] svg [stroke="rgba(6,182,212,.4)"],
html[data-theme="dark"] svg [stroke="rgba(6,182,212,.35)"]{stroke:rgba(103,232,249,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(16,185,129,.65)"],
html[data-theme="dark"] svg [stroke="rgba(16,185,129,.5)"]{stroke:rgba(52,211,153,.95) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(245,158,11,.5)"]{stroke:rgba(251,191,36,.92) !important;stroke-width:2.6 !important}

/* Decorative dashed container frames — brighten but stay thinner than connectors */
html[data-theme="dark"] svg [stroke="rgba(124,58,237,.28)"]{stroke:rgba(167,139,250,.6) !important;stroke-width:1.9 !important}
html[data-theme="dark"] svg [stroke="rgba(6,182,212,.28)"]{stroke:rgba(103,232,249,.6) !important;stroke-width:1.9 !important}

/* Light/base: thicken legacy connectors so they read solid on white too. */
svg [stroke="rgba(124,58,237,.4)"],
svg [stroke="rgba(124,58,237,.35)"],
svg [stroke="rgba(124,58,237,.3)"],
svg [stroke="rgba(6,182,212,.55)"],
svg [stroke="rgba(6,182,212,.4)"],
svg [stroke="rgba(6,182,212,.35)"],
svg [stroke="rgba(16,185,129,.65)"]{stroke-width:2.3}

/* ---- SVG attribute-selector overrides (no-class inline fills) ---- */
html[data-theme="dark"] svg [fill="#1A1A2E"]{fill:#F1F5F9 !important}
html[data-theme="dark"] svg [fill="#6B7280"]{fill:#93A4B8 !important}
html[data-theme="dark"] svg [fill="#9CA3AF"]{fill:#7B8CA0 !important}
html[data-theme="dark"] svg [fill="#FFFFFF"]{fill:#1a2130 !important}
html[data-theme="dark"] svg [fill="#374151"]{fill:#C6D2E0 !important}
/* brand-coloured text stays readable on dark */
html[data-theme="dark"] svg [fill="#7C3AED"]{fill:#A78BFA !important}
html[data-theme="dark"] svg [fill="#5B21B6"],
html[data-theme="dark"] svg [fill="#6D28D9"]{fill:#C4B5FD !important}
html[data-theme="dark"] svg [fill="#06B6D4"],
html[data-theme="dark"] svg [fill="#0891B2"]{fill:#67E8F9 !important}
html[data-theme="dark"] svg [fill="#059669"]{fill:#34D399 !important}

/* ============================================================
   Reduced motion — respect OS setting in both themes
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============================================================
   HERO NETWORK MESH — keep the violet lines recessive on both themes.
   ============================================================ */
.hero-mesh g[stroke^="rgba(124"]{stroke-opacity:.5}