/* ============================================================
   AgentCore course — shared theme layer (NETS red/blue)
   Default theme = LIGHT (defined inline per page).
   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(228,0,43,.10);
  --gnav-btn-bg-active:rgba(228,0,43,.16);
  --gnav-btn-border:rgba(15,15,25,.12);
  --gnav-btn-border-hover:rgba(228,0,43,.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:#0B0F14;
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.10);
  --pink:#FF4D6D;--pink-light:#FF7285;--pink-bright:#FF4D6D;
  --teal:#5FAAF0;--teal-light:#93C5FD;
  --text:#F1F5F9;--text-body:#C6D2E0;--text-muted:#93A4B8;--text-dim:#5B6B80;
  --border:rgba(255,77,109,.16);
  /* nav vars */
  --gnav-btn-bg:rgba(17,21,29,.92);
  --gnav-btn-bg-hover:rgba(255,77,109,.16);
  --gnav-btn-bg-active:rgba(255,77,109,.26);
  --gnav-btn-border:rgba(255,255,255,.12);
  --gnav-btn-border-hover:rgba(255,77,109,.5);
  --gnav-btn-color:#F1F5F9;
  --gnav-panel-bg:rgba(13,17,23,.98);
  --gnav-panel-border:rgba(255,255,255,.10);
  --gnav-shadow:rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:#0B0F14;color:var(--text-body)}

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

/* Surfaces that hardcode light colours in the page <style> */
html[data-theme="dark"] .tab-nav{background:rgba(11,15,20,.96) !important;border-bottom-color:rgba(255,255,255,.08) !important}
html[data-theme="dark"] .tab-nav .tnum{background:rgba(95,170,240,.20) !important}
html[data-theme="dark"] .tab-nav button.active{color:#93C5FD !important}
html[data-theme="dark"] .tab-nav button.active .tnum{background:#5FAAF0 !important;color:#0B0F14 !important}
html[data-theme="dark"] .tab-nav button.active::after{background:linear-gradient(90deg,#5FAAF0,#93C5FD) !important}
html[data-theme="dark"] .top-nav{background:rgba(11,15,20,.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:#141a23 !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:#11161e !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:#141a23 !important;border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] .stat-card .lbl{color:var(--text-muted)}
html[data-theme="dark"] .news-card{background:#141a23 !important;border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] .news-card h4{color:var(--text)}
html[data-theme="dark"] .news-card p{color:var(--text-muted)}
html[data-theme="dark"] .news-card .date{background:rgba(95,170,240,.16) !important;color:#93C5FD !important;border-color:rgba(95,170,240,.34) !important}

html[data-theme="dark"] .flow-wrap{background:#11161e !important;border-color:rgba(255,255,255,.09) !important}
/* inline gradient flow-wrap backgrounds (m01, deep-dive) */
html[data-theme="dark"] [style*="linear-gradient(135deg,#FAFBFF"]{background:#11161e !important}
html[data-theme="dark"] [style*="background:#FAFAFA"]{background:#11161e !important}

html[data-theme="dark"] .narrator{background:rgba(95,170,240,.12) !important;border-color:rgba(95,170,240,.30) !important}
html[data-theme="dark"] .narrator-text{color:var(--text-body)}
html[data-theme="dark"] .narrator-text strong{color:#93C5FD !important}

/* Cards / grids */
html[data-theme="dark"] .module-card{background:linear-gradient(145deg,#141a23,#1a1216) !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,#141a23,#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)}

/* Comparison columns */
html[data-theme="dark"] .cmp-col{border-color:rgba(255,255,255,.09) !important}
html[data-theme="dark"] .cmp-col.trad{background:#11161e !important}
html[data-theme="dark"] .cmp-col.agentic{background:linear-gradient(160deg,#1a1216,#101722) !important;border-color:rgba(255,77,109,.25) !important}
html[data-theme="dark"] .cmp-col li{color:var(--text-body)}

/* Notices */
html[data-theme="dark"] .notice-pink{background:rgba(255,77,109,.10) !important;border-color:rgba(255,77,109,.25) !important;color:var(--text-body) !important}
html[data-theme="dark"] .notice-teal{background:rgba(95,170,240,.10) !important;border-color:rgba(95,170,240,.25) !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:#005CB9;font-weight:600;text-decoration:underline;text-underline-offset:2px}
html[data-theme="dark"] .notice a{color:#93C5FD !important}

/* Chips, feature list, next-links */
html[data-theme="dark"] .chip{background:rgba(95,170,240,.16) !important;color:#93C5FD !important;border-color:rgba(95,170,240,.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:#141a23 !important;border-color:rgba(255,77,109,.3) !important;color:#FF7285 !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 — brighten blue tags, soften red badge/CTA */
html[data-theme="dark"] .module-card .mod-tag{background:rgba(95,170,240,.16) !important;color:#93C5FD !important;border-color:rgba(95,170,240,.34) !important}
html[data-theme="dark"] .module-card .mod-num{color:#FF4D6D !important;background:rgba(255,77,109,.14) !important}
html[data-theme="dark"] .module-card .mod-cta,
html[data-theme="dark"] .module-card:hover .mod-cta{color:#FF7285 !important}
html[data-theme="dark"] .top-nav a.active{color:#FF4D6D !important;background:rgba(255,77,109,.12) !important;border-color:rgba(255,77,109,.3) !important}
/* hero accent gradients already flow through --pink/--teal; feature-list check ✓ pink bullet */
html[data-theme="dark"] .feature-list li::before{color:#FF4D6D !important}
html[data-theme="dark"] .cmp-col.agentic h4{color:#FF7285 !important}
html[data-theme="dark"] .cmp-col.agentic li::before{color:#93C5FD !important}

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

/* ---- SVG node theming (class-based) ---- */
/* Base (light) fill for ANY .node-bg / .flow-bg — including rects used OUTSIDE a
   .dag-svg-node group. Page inline CSS only scopes fill as ".dag-svg-node .node-bg",
   so a standalone <rect class="node-bg"> would otherwise fall back to SVG-default
   black (unreadable in light mode). This base rule guarantees a themed surface. */
.node-bg,.flow-bg{fill:#FFFFFF;stroke:rgba(228,0,43,.3);stroke-width:2}
html[data-theme="dark"] .node-bg{fill:#1a2130 !important;stroke:rgba(255,77,109,.4) !important}
html[data-theme="dark"] .dag-svg-node:hover .node-bg{stroke:rgba(255,77,109,.7) !important}
html[data-theme="dark"] .dag-svg-node.active .node-bg{stroke:#FF4D6D !important;filter:drop-shadow(0 0 12px rgba(255,77,109,.5)) !important}
html[data-theme="dark"] .flow-bg{fill:#1a2130 !important;stroke:rgba(255,77,109,.4) !important}
html[data-theme="dark"] .flow-node:hover .flow-bg{stroke:rgba(255,77,109,.7) !important}
html[data-theme="dark"] .flow-node.active .flow-bg{stroke:#FF4D6D !important;filter:drop-shadow(0 0 12px rgba(255,77,109,.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}
/* deep-dive flow diagram classes (node title/sub, edges, icons) */
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.
   New diagrams: put class="edge-r|edge-b|edge-g|edge-i" on connector
   <path>s (keep fill="none" + dasharray + marker inline). No need to
   hand-pick stroke colours/widths — these are correct in light AND dark.
   ============================================================ */
.edge-r{stroke:rgba(228,0,43,.6);stroke-width:2.4}
.edge-b{stroke:rgba(0,92,185,.55);stroke-width:2.4}
.edge-g{stroke:rgba(16,185,129,.6);stroke-width:2.4}
.edge-i{stroke:rgba(99,102,241,.55);stroke-width:2.4}
html[data-theme="dark"] .edge-r{stroke:rgba(255,77,109,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] .edge-b{stroke:rgba(95,170,240,.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-i{stroke:rgba(140,150,255,.92) !important;stroke-width:2.6 !important}

/* Dark: bolden EXISTING inline-stroke connectors (legacy diagrams).
   Covers every connector rgba value in use so none stay thin.
   (Decorative strokes use distinct alphas — .28 frame, .32 mesh. Frames get a colour
   BRIGHTEN on dark (see below) but stay thin; the .32 mesh is left as-is.) */
html[data-theme="dark"] .flow-edge{stroke:rgba(255,77,109,.9) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(228,0,43,.4)"],
html[data-theme="dark"] svg [stroke="rgba(228,0,43,.35)"],
html[data-theme="dark"] svg [stroke="rgba(228,0,43,.3)"]{stroke:rgba(255,77,109,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(239,68,68,.4)"]{stroke:rgba(255,114,133,.9) !important;stroke-width:2.4 !important}
html[data-theme="dark"] svg [stroke="rgba(0,92,185,.55)"],
html[data-theme="dark"] svg [stroke="rgba(0,92,185,.35)"]{stroke:rgba(95,170,240,.92) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(16,185,129,.65)"]{stroke:rgba(52,211,153,.95) !important;stroke-width:2.6 !important}
html[data-theme="dark"] svg [stroke="rgba(99,102,241,.3)"]{stroke:rgba(140,150,255,.92) !important;stroke-width:2.6 !important}
/* Dark: BRIGHTEN decorative dashed container frames (.28 alpha) so they don't vanish on
   the dark bg — raise alpha + a small width nudge, but keep them thinner than connector
   arrows (2.6) so they still read as a frame, not a flow edge. */
html[data-theme="dark"] svg [stroke="rgba(0,92,185,.28)"]{stroke:rgba(95,170,240,.6) !important;stroke-width:1.9 !important}
html[data-theme="dark"] svg [stroke="rgba(228,0,43,.28)"]{stroke:rgba(255,77,109,.6) !important;stroke-width:1.9 !important}

/* Light/base: also thicken legacy inline connectors so they read solid on white too. */
svg [stroke="rgba(228,0,43,.4)"],
svg [stroke="rgba(228,0,43,.35)"],
svg [stroke="rgba(228,0,43,.3)"],
svg [stroke="rgba(0,92,185,.55)"],
svg [stroke="rgba(0,92,185,.35)"],
svg [stroke="rgba(16,185,129,.65)"],
svg [stroke="rgba(239,68,68,.4)"]{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="#FFF6F7"]{fill:#241820 !important}
html[data-theme="dark"] svg [fill="#374151"]{fill:#C6D2E0 !important}
/* keep brand-colored text readable: brighten red/blue text fills on dark */
html[data-theme="dark"] svg [fill="#E4002B"]{fill:#FF4D6D !important}
html[data-theme="dark"] svg [fill="#008F89"],
html[data-theme="dark"] svg [fill="#003876"],
html[data-theme="dark"] svg [fill="#005CB9"]{fill:#93C5FD !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}
}

/* ============================================================
   Navigation + narrator chrome → BLUE (was pink/light-red).
   These override the per-page inline .narrator / .tnum / active-tab
   rules — this stylesheet loads AFTER each page's <style>, so
   equal-specificity selectors here win. Red stays reserved for the
   hero title accent, diagram edges, and CTAs. Dark equivalents live
   in the dark block above.
   ============================================================ */
.narrator{background:#EEF4FF;border-color:rgba(0,92,185,.18)}
.narrator-text strong{color:#005CB9}
.tab-nav .tnum{background:rgba(0,92,185,.10)}
.tab-nav button.active{color:#005CB9}
.tab-nav button.active .tnum{background:#005CB9;color:#fff}
.tab-nav button.active::after{background:linear-gradient(90deg,#005CB9,#3A8FE5)}

/* ============================================================
   HERO NETWORK MESH — keep the crimson lines recessive.
   The red mesh <g> uses the same alpha as the soft-blue <g>, but
   saturated crimson reads far stronger and starts to dominate the
   hero background. Halve the red line visibility so the mesh stays
   ambient decoration, not a focal point. Applies to EVERY page
   (all hero-mesh red line groups start with stroke="rgba(228,...").
   Red nodes/particle are small and left as-is; this targets the lines.
   ============================================================ */
.hero-mesh g[stroke^="rgba(228"]{stroke-opacity:.45}