/* ============================================================
   ANNOTATED NOTEBOOK SKIN - top navbar (.topbar).
   Owner directive: keep the OLD layout, just refine it and match the theme.
   Makes the subject nav clean ink links on the paper bar, with one precise
   selected-location pill; flattens the glassy blurred SaaS bar into a clean paper
   bar with one crisp hairline. COLORS/POLISH ONLY, tokens only. Markup + JS 1:1.
   Loaded site-wide from base.html head, gated on nb_active. Account
   button/popup are skinned separately by notebook-navchrome-skin.css.
   ============================================================ */

/* ---- The bar: flat paper, one hairline, no blur/glow/heavy shadow ---- */
html.theme-light .topbar,
html.theme-light .topbar.scrolled,
html:not(.theme-light) .topbar,
html:not(.theme-light) .topbar.scrolled {
  background: var(--nb-chrome);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--nb-border);
  box-shadow: none;
}
/* A whisper of lift only once the page scrolls under it. */
html.theme-light .topbar.scrolled,
html:not(.theme-light) .topbar.scrolled {
  border-bottom-color: var(--nb-border-strong);
  box-shadow: var(--nb-shadow-1);
}

/* ---- Brand lockup ---- */
html.theme-light .logo,
html:not(.theme-light) .logo {
  color: var(--nb-ink);
}
html.theme-light .logo-text,
html:not(.theme-light) .logo-text {
  color: var(--nb-ink);
}
/* The cap artwork is white; marketing light inks it via theme-light.css,
   which study pages never load - replicate the invert here. */
html.theme-light .logo-img {
  filter: brightness(0);
}

/* ---- Subject nav: clean ink links; only the current programme is selected. ---- */
html.theme-light .nav,
html:not(.theme-light) .nav {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: var(--nb-s1);
}

html.theme-light .nav-link,
html:not(.theme-light) .nav-link {
  color: var(--nb-ink-2);
  background: none;
  box-shadow: none;
  border-radius: var(--nb-r-pill);
  padding: 7px 16px;
  transition: color 0.18s ease, background 0.18s ease;
}
html.theme-light .nav-link:hover,
html:not(.theme-light) .nav-link:hover {
  color: var(--nb-blue);
  background: var(--nb-blue-wash);
  box-shadow: none;
}
/* Light current location mirrors dark mode's filled selection, without depth. */
html.theme-light .nav-link.is-active,
html.theme-light .nav-link[aria-current="page"] {
  color: var(--nb-on-blue);
  background: var(--nb-blue);
  box-shadow: none;
}
html.theme-light .nav-link.is-active:hover,
html.theme-light .nav-link[aria-current="page"]:hover {
  color: var(--nb-on-blue);
  background: var(--nb-blue-strong);
  box-shadow: none;
}
html:not(.theme-light) .nav-link.is-active,
html:not(.theme-light) .nav-link[aria-current="page"] {
  color: var(--nb-selection-ink);
  background: var(--nb-selection-fill);
  box-shadow: var(--nb-shadow-1), inset 0 -3px 0 var(--nb-selection-marker);
}
html:not(.theme-light) .nav-link.is-active:hover,
html:not(.theme-light) .nav-link[aria-current="page"]:hover {
  color: var(--nb-selection-ink);
  background: var(--nb-selection-fill-hover);
}
/* Retire the old underline sweep -- the pill carries the active state now. */
html.theme-light .nav-link::after,
html:not(.theme-light) .nav-link::after {
  display: none;
}
html.theme-light .nav-link:focus-visible,
html:not(.theme-light) .nav-link:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

/* ---- Get Premium CTA: clean blue pill ---- */
html.theme-light .nav-cta,
html:not(.theme-light) .nav-cta {
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  border: 1px solid var(--nb-blue);
  box-shadow: none;
  border-radius: var(--nb-r-pill);
}
html.theme-light .nav-cta:hover,
html:not(.theme-light) .nav-cta:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
}
html.theme-light .nav-cta:focus-visible,
html:not(.theme-light) .nav-cta:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

/* ---- Mobile: hamburger + drawer rows follow the same ink/paper system ---- */
html.theme-light .mobile-drawer-toggle {
  color: var(--nb-ink);
  background: none;
  border: 1px solid var(--nb-control-border);
}
html:not(.theme-light) .mobile-drawer-toggle {
  color: var(--nb-ink);
  background: none;
  border: 1px solid var(--nb-border);
}
html.theme-light .mobile-drawer-toggle span,
html:not(.theme-light) .mobile-drawer-toggle span {
  background: var(--nb-ink);
}
html.theme-light .mobile-nav-drawer__backdrop,
html:not(.theme-light) .mobile-nav-drawer__backdrop {
  background: color-mix(in srgb, var(--nb-ink) 58%, transparent);
}
html.theme-light .mobile-nav-drawer {
  background: color-mix(in srgb, var(--nb-ink) 28%, transparent);
}
html.theme-light .mobile-nav-drawer__panel,
html:not(.theme-light) .mobile-nav-drawer__panel {
  background: var(--nb-chrome);
  border-color: var(--nb-border);
}
html.theme-light .mobile-nav-row,
html:not(.theme-light) .mobile-nav-row {
  color: var(--nb-ink);
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
}
html.theme-light .mobile-nav-row:hover,
html.theme-light .mobile-nav-row:focus-visible,
html:not(.theme-light) .mobile-nav-row:hover,
html:not(.theme-light) .mobile-nav-row:focus-visible {
  background: var(--nb-blue-wash);
  color: var(--nb-blue);
}
html.theme-light .mobile-nav-row--program.is-active,
html.theme-light .mobile-nav-row--account[aria-current="page"],
html:not(.theme-light) .mobile-nav-row--program.is-active,
html:not(.theme-light) .mobile-nav-row--account[aria-current="page"] {
  color: var(--nb-blue);
}
html.theme-light .mobile-nav-row--premium,
html:not(.theme-light) .mobile-nav-row--premium {
  color: var(--nb-on-blue);
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  box-shadow: none;
}
html.theme-light .mobile-nav-row--premium:hover,
html:not(.theme-light) .mobile-nav-row--premium:hover {
  color: var(--nb-on-blue);
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
}
html.theme-light .mobile-nav-divider,
html:not(.theme-light) .mobile-nav-divider {
  background: var(--nb-border);
}