/* ============================================================
   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 ----
   THE ONE BAR (owner, 2026-10-10: "standardize the navbar to be the
   dashboard navbar color, the black sitewide", then "make this the navbar
   default, delete any other navbar"). Every page's bar is the dashboard's:
   the page's own paper (the black by night) over the desk's hairline. The
   bar sets its two colour tokens here, so everything in it reads them and no
   page re-points them; the thumb bar wears the same pair
   (notebook-thumbbar.css). */
html.theme-light .topbar,
html.theme-light .topbar.scrolled,
html:not(.theme-light) .topbar,
html:not(.theme-light) .topbar.scrolled {
  --nb-chrome: var(--nb-m-paper);
  --nb-border: var(--nb-m-hairline);
  /* the bar's own ink, so nothing in it inherits theme-light.css's
     (base.html pages only) by day: one light bar, as one dark */
  color: var(--nb-ink);
  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);
}
/* By day the bar has no line under it at all (owner, 2026-10-06: "a dark
   outline on the bottom edge of the navbar in white mode ... makes the
   website look cheap"). The paper tone sets it off at rest; once the page
   scrolls under it the soft lift alone does. The border keeps its width,
   transparent, so nothing under the bar moves. */
html.theme-light .topbar,
html.theme-light .topbar.scrolled {
  border-bottom-color: transparent;
}

/* ---- 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);
  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[data-ui-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[data-ui-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[data-ui-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[data-ui-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 {
  color: var(--nb-ink);  /* not theme-light.css's ink (base.html pages only) */
  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);
}
/* One ink (owner, 2026-09-26): the theme row's "Dark" or "Light" is the
   row's own ink at full strength (chrome-navbar.css faded it to 66%); its
   600 against the label is the step. */
html.theme-light .mobile-nav-theme-state,
html:not(.theme-light) .mobile-nav-theme-state {
  opacity: 1;
}
/* The Sign out row's icon keeps its red at full strength beside its label
   (chrome-navbar.css faded it to 72%): a translucent hue is the same hue,
   opaque. */
html.theme-light .mobile-nav-signout-icon,
html:not(.theme-light) .mobile-nav-signout-icon {
  opacity: 1;
}
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--account[data-ui-current="page"],
html:not(.theme-light) .mobile-nav-row--account[data-ui-current="page"] {
  color: var(--nb-blue);
}
/* The current programme (and Dashboard, which shares the row) is the same
   persistent selection the desktop pill shows, so it takes the same solid
   fill in both themes (DESIGN.md, The Three-Ink Rule; audit K-018,
   2026-09-25). It was blue text on the same raised row as its neighbours.
   The identity row above keeps its blue name: it carries the avatar and the
   email, and the desktop menu marks that page the same quiet way. The shared
   focus ring (chrome-navbar.css) is drawn 3px outside the row, on the panel. */
html.theme-light .mobile-nav-row--program.is-active {
  color: var(--nb-on-blue);
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  box-shadow: none;
}
html.theme-light .mobile-nav-row--program.is-active:hover,
html.theme-light .mobile-nav-row--program.is-active:focus-visible {
  color: var(--nb-on-blue);
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
}
html:not(.theme-light) .mobile-nav-row--program.is-active {
  color: var(--nb-selection-ink);
  background: var(--nb-selection-fill);
  border-color: var(--nb-selection-border);
  box-shadow: none;
}
html:not(.theme-light) .mobile-nav-row--program.is-active:hover,
html:not(.theme-light) .mobile-nav-row--program.is-active:focus-visible {
  color: var(--nb-selection-ink);
  background: var(--nb-selection-fill-hover);
  border-color: var(--nb-selection-fill-hover);
}
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);
}