/**
 * Learn Platform — sidebar / hamburger nav active item (LP spec v1)
 * Replicate in each app (no build step). FluentFlow: html.dark; vanilla: [data-theme="dark"].
 *
 * Tokens required:
 *   :root { --lp-accent-text: #1e40af; }
 *   dark  { --lp-accent-text: #93c5fd; }
 */

/* Nav launcher (hamburger) — same SVG in all apps; larger glyph on compact header, 44px hit target unchanged. */
:root {
  --lp-navbtn-icon-size: 20px;
  --lp-navbtn-icon-size-compact: 26px;
}

.navigation-launcher .lp-nav-svg,
.topbar-menu .lp-nav-svg,
#menuToggle .lp-nav-svg,
#topbarMenuToggle .lp-nav-svg,
.unified-nav-trigger .lp-nav-svg,
.header-redesigned__menu-icon.lp-nav-svg {
  width: var(--lp-navbtn-icon-size);
  height: var(--lp-navbtn-icon-size);
}

@media (max-width: 860px) {
  .navigation-launcher .lp-nav-svg,
  .topbar-menu .lp-nav-svg,
  #menuToggle .lp-nav-svg,
  #topbarMenuToggle .lp-nav-svg,
  .unified-nav-trigger .lp-nav-svg,
  .header-redesigned__menu-icon.lp-nav-svg {
    width: var(--lp-navbtn-icon-size-compact);
    height: var(--lp-navbtn-icon-size-compact);
  }
}

/* Light */
.lp-nav-item.is-active,
.nav-item.is-active,
.sb-item.active,
.unified-nav-item.is-active,
.header-side-menu__item--active {
  background: var(--lp-accent-soft);
  color: var(--lp-accent-text);
  font-weight: 700;
}

/* Dark — ~6.3:1 contrast on active surface (WCAG AA) */
[data-theme="dark"] .lp-nav-item.is-active,
[data-theme="dark"] .nav-item.is-active,
[data-theme="dark"] .sb-item.active,
[data-theme="dark"] .unified-nav-item.is-active,
html.dark .header-side-menu__item--active {
  background: color-mix(in srgb, var(--lp-accent) 20%, var(--lp-surface-raised));
  border: 1px solid color-mix(in srgb, var(--lp-accent-text) 42%, transparent);
  color: var(--lp-accent-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lp-accent-text) 10%, transparent);
}

[data-theme="dark"] .lp-nav-footer .lp-nav-icon,
[data-theme="dark"] .sidebar__footer .nav-icon,
[data-theme="dark"] .sidebar-footer .sb-icon,
[data-theme="dark"] .unified-nav-footer .unified-nav-icon,
html.dark .header-side-menu__footer .header-side-menu__icon {
  color: var(--lp-accent-text);
}

/* Stat reveal — count-up / bar fill after cloud sync (zeros paint immediately). */
.lp-stat-fill--animate {
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-stats-syncing] .progress-track__fill,
html[data-stats-syncing] .progress-snapshot__visual,
html[data-stats-syncing] .context-card__visual {
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .lp-stat-fill--animate {
    transition: none;
  }

  html[data-stats-syncing] .progress-track__fill,
  html[data-stats-syncing] .progress-snapshot__visual,
  html[data-stats-syncing] .context-card__visual {
    opacity: 1;
  }
}