/* ============================================================
   Insights (learn.html) — v2 visual redesign (premium emerald fintech)
   Additive OVERRIDE sheet. Loaded from the page <head> AFTER the
   existing stylesheet links, BEFORE the page's inline <style>.
   Every rule is prefixed `html body.learn-shell …` so it (a) stays
   scoped to the page content, never the shared top nav
   (.app-shell-header), and (b) carries one extra type selector so it
   reliably wins ties against the page's inline <style> and its
   html[data-theme="light"] rules, without touching any markup or JS.
   No structural class, id, or hook is changed — visuals only.
   ============================================================ */

html body.learn-shell {
  --l2-ink:       #0b1220;
  --l2-ink-2:     #47516b;
  --l2-muted:     #7b8699;
  --l2-line:      #e7ebf3;
  --l2-line-soft: #eef1f8;
  --l2-surface:   #ffffff;
  --l2-bg:        #f4f6fb;
  --l2-input:     #f3f5fb;
  --l2-accent:    #059669;
  --l2-accent-2:  #0d9488;
  --l2-accent-3:  #10b981;
  --l2-deep:      #047857;
  --l2-amber:     #d97706;
  --l2-grad:      linear-gradient(135deg, #10b981, #0d9488);
  --l2-shadow:    0 1px 2px rgba(15,23,42,.04), 0 12px 34px -14px rgba(24,28,54,.20);
  --l2-shadow-lg: 0 24px 60px -22px rgba(24,28,54,.30);
  --l2-radius:    18px;
  --l2-radius-lg: 20px;
}

/* ── Page surface + soft emerald glows ───────────────────────
   Glows anchor to the non-scrolling flex frame so they stay put
   as the module grid scrolls inside .learn-main.               */
html body.learn-shell .learn-body {
  background-color: var(--l2-bg);
  background-image:
    radial-gradient(1100px 520px at 85% -8%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(900px 480px at 8% -4%, rgba(5,150,105,.10), transparent 58%);
}
html body.learn-shell .learn-main { background: transparent; font-size: var(--fs-base); }

/* ── Sidebar shell ───────────────────────────────────────── */
html body.learn-shell .learn-sidebar {
  width: 244px;
  background: var(--l2-surface);
  border-right: 1px solid var(--l2-line);
  box-shadow: 1px 0 0 rgba(15,23,42,.02);
}
html body.learn-shell .learn-sidebar-top {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--l2-line);
}
html body.learn-shell .sidebar-group-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--l2-muted);
  padding: 14px 8px 6px;
}
html body.learn-shell .learn-sidebar-top .sidebar-group-label { padding: 0; }
html body.learn-shell .learn-sidebar-hint {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--l2-ink-2);
}
html body.learn-shell .sidebar-nav { padding: 10px; gap: 4px; }
html body.learn-shell .sidebar-filter-input {
  background: var(--l2-input);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  color: var(--l2-ink);
}
html body.learn-shell .sidebar-filter-input::placeholder { color: var(--l2-muted); }
html body.learn-shell .sidebar-filter-input:focus {
  background: #fff;
  border-color: var(--l2-accent);
  box-shadow: 0 0 0 4px rgba(5,150,105,.14);
}

/* ── Category / track buttons ────────────────────────────── */
html body.learn-shell .cat-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--l2-ink-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  padding: 10px 12px;
  gap: 10px;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
html body.learn-shell .cat-btn::before {
  width: 3px;
  border-radius: 999px;
  background: var(--cat-accent, var(--l2-accent));
  opacity: .85;
}
html body.learn-shell .cat-btn:hover {
  background: #f2f5fb;
  border-color: transparent;
  color: var(--l2-ink);
  transform: none;
}
html body.learn-shell .cat-btn.active {
  background: var(--l2-grad);
  border-color: transparent;
  color: #fff;
  font-weight: 750;
  box-shadow: 0 8px 18px -6px rgba(5,150,105,.5);
  transform: none;
}
html body.learn-shell .cat-btn.active::before { background: rgba(255,255,255,.85); opacity: 1; }
html body.learn-shell .cat-btn-label { letter-spacing: -.01em; }
html body.learn-shell .cat-btn-count {
  color: var(--l2-ink-2);
  background: #eef1f8;
  border: 1px solid var(--l2-line);
  border-radius: 999px;
  font-weight: 700;
}
html body.learn-shell .cat-btn.active .cat-btn-count {
  color: #fff;
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.34);
}
html body.learn-shell .cat-btn-pct { color: var(--l2-accent); font-weight: 800; }
html body.learn-shell .cat-btn-pct.cat-btn-pct--done { color: var(--l2-deep); }
html body.learn-shell .cat-btn.active .cat-btn-pct { color: #fff; }

/* ── Search row ──────────────────────────────────────────── */
html body.learn-shell .search-row { padding: 18px 24px 10px; }
html body.learn-shell .module-search-input {
  background: var(--l2-input);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--l2-ink);
}
html body.learn-shell .module-search-input::placeholder { color: var(--l2-muted); }
html body.learn-shell .module-search-input:focus {
  background: #fff;
  border-color: var(--l2-accent);
  box-shadow: 0 0 0 4px rgba(5,150,105,.14);
}

/* ── Start Here onboarding banner ────────────────────────── */
html body.learn-shell #learn-start-here {
  margin: 6px 24px 22px;
  padding: 24px 26px;
  border-radius: var(--l2-radius-lg);
  background:
    radial-gradient(520px 200px at 90% -40%, rgba(16,185,129,.12), transparent 70%),
    var(--l2-surface);
  border: 1px solid var(--l2-line);
  box-shadow: var(--l2-shadow);
}
html body.learn-shell .sh-eyebrow {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--l2-accent);
  margin-bottom: 8px;
}
html body.learn-shell .sh-title {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  background: linear-gradient(100deg, var(--l2-ink) 30%, var(--l2-accent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body.learn-shell .sh-sub {
  font-size: 13.5px;
  color: var(--l2-ink-2);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 560px;
}
html body.learn-shell .sh-tracks { gap: 12px; }
html body.learn-shell .sh-track-btn {
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--l2-line);
  background: #fff;
  color: var(--l2-ink);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
html body.learn-shell .sh-track-btn:hover {
  background: #fff;
  border-color: var(--l2-accent);
  color: var(--l2-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(5,150,105,.4);
}
html body.learn-shell .sh-track-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--l2-grad);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 10px -3px rgba(5,150,105,.55);
}
html body.learn-shell .sh-dismiss {
  color: var(--l2-muted);
  border-radius: 8px;
}
html body.learn-shell .sh-dismiss:hover { color: var(--l2-ink); background: rgba(15,23,42,.05); }

/* ── Section blocks ──────────────────────────────────────── */
html body.learn-shell #learn-rows { padding: 4px 24px 28px; }
html body.learn-shell .section-block { margin-bottom: 26px; }
html body.learn-shell .section-header {
  border-top: 1px solid var(--l2-line);
  padding-top: 22px;
  margin-bottom: 16px;
  align-items: flex-start;
}
html body.learn-shell .section-accent-bar {
  width: 4px;
  height: 26px;
  border-radius: 999px;
}
html body.learn-shell .section-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--l2-ink);
}
html body.learn-shell .section-count {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--l2-muted);
}
html body.learn-shell .section-pct { color: var(--l2-accent); font-weight: 800; }
html body.learn-shell .section-pct.section-pct--done { color: var(--l2-deep); }

/* Section progress strip (under title) — uniform emerald for brand cohesion.
   The inline group colour is overridden with !important on the fill only. */
html body.learn-shell .section-progress-strip { margin-top: 10px; gap: 12px; }
html body.learn-shell .section-progress-bar {
  flex: 0 0 180px;
  height: 7px;
  background: var(--l2-line-soft);
  border-radius: 999px;
}
html body.learn-shell .section-progress-fill {
  background: var(--l2-grad) !important;
  border-radius: 999px;
}
html body.learn-shell .section-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--l2-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ── Section grid spacing ───────────────────────────────── */
html body.learn-shell .section-row { gap: 16px; }
@media (min-width: 1200px) { html body.learn-shell .section-row { gap: 18px; } }

/* ── Module cards — the star ─────────────────────────────── */
html body.learn-shell .module-card {
  background: linear-gradient(180deg, #ffffff, #fdfeff);
  border: 1px solid var(--l2-line);
  border-radius: var(--l2-radius);
  box-shadow: var(--l2-shadow);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease;
}
html body.learn-shell .module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--l2-shadow-lg);
  border-color: rgba(5,150,105,.4);
}
html body.learn-shell .card-accent-line { height: 3px; opacity: .95; }
html body.learn-shell .module-card-inner { padding: 16px 16px 18px; }
html body.learn-shell .card-top-row { margin-bottom: 10px; }
html body.learn-shell .card-index {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--l2-muted);
}

/* Status pills */
html body.learn-shell .card-status-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 3px 9px;
  border-radius: 999px;
}
html body.learn-shell .pill-mastered {
  background: rgba(5,150,105,.08);
  color: var(--l2-accent);
  border: 1px solid rgba(5,150,105,.2);
}
html body.learn-shell .pill-unlocked {
  background: rgba(5,150,105,.08);
  color: var(--l2-accent);
  border: 1px solid rgba(5,150,105,.2);
}
html body.learn-shell .pill-progress {
  background: rgba(217,119,6,.1);
  color: var(--l2-amber);
  border: 1px solid rgba(217,119,6,.24);
}
html body.learn-shell .pill-locked {
  background: #f1f4fa;
  color: var(--l2-muted);
  border: 1px solid var(--l2-line);
}

html body.learn-shell .card-title {
  font-size: var(--fs-base);
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--l2-ink);
  line-height: 1.35;
  margin-bottom: 7px;
}
html body.learn-shell .card-desc {
  font-size: var(--fs-sm);
  color: var(--l2-ink-2);
  line-height: 1.55;
  margin-bottom: 12px;
}
html body.learn-shell .card-meta-row { font-size: 10px; color: var(--l2-muted); }

/* Card quiz-progress bar */
html body.learn-shell .card-progress-wrap { margin-bottom: 12px; }
html body.learn-shell .card-progress-track {
  height: 5px;
  background: var(--l2-line-soft);
  border-radius: 999px;
}
html body.learn-shell .card-progress-fill {
  background: var(--l2-grad);
  border-radius: 999px;
}
html body.learn-shell .card-progress-fill.done { background: linear-gradient(90deg, #059669, #047857); }
html body.learn-shell .card-progress-fill.partial { background: linear-gradient(90deg, #f59e0b, #d97706); }

/* CTA — soft by default, lights up to the emerald gradient on card hover */
html body.learn-shell .card-cta-btn {
  padding: 10px 0;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  background: rgba(5,150,105,.08);
  border: 1px solid rgba(5,150,105,.18);
  color: var(--l2-accent);
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
html body.learn-shell .module-card:hover .card-cta-btn {
  background: var(--l2-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(5,150,105,.5);
}
html body.learn-shell .card-cta-btn.done-btn {
  background: #fff;
  border-color: var(--l2-line);
  color: var(--l2-deep);
}
html body.learn-shell .module-card:hover .card-cta-btn.done-btn {
  background: #fff;
  border-color: var(--l2-accent);
  color: var(--l2-deep);
  box-shadow: 0 8px 20px -10px rgba(5,150,105,.4);
}
html body.learn-shell .card-cta-btn.locked-btn {
  background: #f1f4fa;
  border-color: var(--l2-line);
  color: var(--l2-muted);
}
html body.learn-shell .module-card:hover .card-cta-btn.locked-btn {
  background: #f1f4fa;
  border-color: var(--l2-line);
  color: var(--l2-muted);
  box-shadow: none;
}

/* Mastered state — emerald identity */
html body.learn-shell .module-card.done-card {
  border: 1.5px solid rgba(5,150,105,.55);
  background: linear-gradient(180deg, rgba(5,150,105,.05), rgba(5,150,105,.02));
}
html body.learn-shell .module-card.done-card:hover {
  border-color: var(--l2-accent);
  box-shadow: 0 22px 50px -22px rgba(5,150,105,.45);
}
html body.learn-shell .card-mastered-check {
  background: var(--l2-grad);
  box-shadow: 0 4px 10px -3px rgba(5,150,105,.5);
}

/* Locked cards */
html body.learn-shell .module-card.locked-card { opacity: .58; filter: grayscale(.35); }

/* ── Optional legacy promo / banner / tools blocks ──────────
   Not rendered in the current build, styled for safety so that
   if they reappear they inherit the emerald system.            */
html body.learn-shell a.learn-ml-promo,
html body.learn-shell .learn-ml-banner {
  border-radius: var(--l2-radius-lg);
  background:
    radial-gradient(420px 160px at 88% -30%, rgba(16,185,129,.12), transparent 70%),
    var(--l2-surface);
  border: 1px solid var(--l2-line);
  box-shadow: var(--l2-shadow);
}
html body.learn-shell .learn-ml-promo__kicker,
html body.learn-shell .tool-card__kicker { color: var(--l2-accent); }
html body.learn-shell .learn-ml-banner__btn {
  background: var(--l2-grad);
  box-shadow: 0 10px 24px -8px rgba(5,150,105,.5);
}
html body.learn-shell .tools-section {
  border-radius: var(--l2-radius-lg);
  border: 1px solid var(--l2-line);
  background: var(--l2-surface);
  box-shadow: var(--l2-shadow);
}
html body.learn-shell .tools-section__subtitle { color: var(--l2-accent); }
html body.learn-shell .tool-card {
  border: 1px solid var(--l2-line);
  border-radius: 14px;
  background: var(--l2-surface);
}
html body.learn-shell .tool-card:hover {
  border-color: rgba(5,150,105,.4);
  background: rgba(5,150,105,.04);
}

/* ── Welcome tour modal ──────────────────────────────────── */
html body.learn-shell .site-welcome-tour { background: rgba(11,18,32,.55); }
html body.learn-shell .site-welcome-tour__card {
  border-radius: 24px;
  border: 1px solid var(--l2-line);
  background: var(--l2-surface);
  box-shadow: 0 40px 100px -30px rgba(11,18,32,.55);
  color: var(--l2-ink);
}
html body.learn-shell .site-welcome-tour__eyebrow {
  color: var(--l2-accent);
  letter-spacing: .12em;
}
html body.learn-shell .site-welcome-tour__title {
  color: var(--l2-ink);
  letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--l2-ink) 30%, var(--l2-accent) 135%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body.learn-shell .site-welcome-tour__copy { color: var(--l2-ink-2); }
html body.learn-shell .site-welcome-tour__steps li {
  border: 1px solid var(--l2-line);
  background: #f7f9fd;
  border-radius: 14px;
}
html body.learn-shell .site-welcome-tour__steps li strong { color: var(--l2-ink); }
html body.learn-shell .site-welcome-tour__btn--primary {
  background: var(--l2-grad);
  border: none;
  color: #fff;
  border-radius: 12px;
  font-weight: 750;
  box-shadow: 0 8px 18px -6px rgba(5,150,105,.5);
}
html body.learn-shell .site-welcome-tour__btn--secondary {
  background: #fff;
  border: 1px solid var(--l2-line);
  color: var(--l2-ink-2);
  border-radius: 12px;
  font-weight: 700;
}
html body.learn-shell .site-welcome-tour__btn--secondary:hover {
  border-color: var(--l2-accent);
  color: var(--l2-deep);
}

/* ── Empty state ─────────────────────────────────────────── */
html body.learn-shell #learn-empty {
  color: var(--l2-muted);
  font-size: 14px;
  font-weight: 650;
}

/* ── Legal footer (light polish only) ────────────────────── */
html body.learn-shell .jag-legal-footer__copy { color: var(--l2-muted); }
html body.learn-shell .jag-legal-footer a:hover { color: var(--l2-accent); }

/* ── Narrow viewports: stack the category rail above the catalog ──
   .learn-sidebar is a fixed 244px with no breakpoint, so at a 375px
   viewport the module grid collapsed to 131px. Below 900px — the
   breakpoint module.html and this page's own .section-row rule already
   use — the rail becomes a full-width band above the content and its
   category buttons become a horizontally scrolling chip row.
   Every declaration is inside the media query, so the desktop layout
   (>= 901px) is byte-for-byte unchanged.                            */
@media (max-width: 900px) {
  html body.learn-shell .learn-body { flex-direction: column; }

  html body.learn-shell .learn-sidebar {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--l2-line);
    box-shadow: 0 1px 0 rgba(15,23,42,.03);
  }
  /* Keeps the scroll container from being pushed past the viewport. */
  html body.learn-shell .learn-main { min-height: 0; }

  html body.learn-shell .learn-sidebar-top {
    padding: 12px 16px 8px;
    border-bottom: 0;
  }
  /* "Choose a track to jump to that section" is desktop-only guidance;
     the chip row is self-explanatory and vertical space is scarce.   */
  html body.learn-shell .learn-sidebar-hint { display: none; }

  html body.learn-shell .sidebar-nav {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 0 16px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* JS injects a .sidebar-group-label between groups; as a flex row
     item it would read as a stray chip, so it is dropped on mobile.  */
  html body.learn-shell .sidebar-nav .sidebar-group-label { display: none; }

  html body.learn-shell .cat-btn {
    width: auto;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 9px 14px;
    border: 1px solid var(--l2-line);
    background: var(--l2-surface);
  }
  html body.learn-shell .cat-btn.active { border-color: transparent; }
  html body.learn-shell .cat-btn-label {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}
