/* ============================================================
   THE ANNOTATED NOTEBOOK - Stage 4 typography bridge.

   Loaded only by pages/base.html when nb_active is true, after
   page-specific CSS. It gives legacy-base pages the canonical IBM
   Plex Sans role system without changing /?nb=0 or adding typography
   to either theme stylesheet. Page-family headings remain owned by
   the controlled Stage 5 waves.
   ============================================================ */

/* Base inheritance and native controls. */
body {
  font: var(--nb-type-ui);
}

button {
  font: var(--nb-type-control);
}

input,
select,
textarea {
  font: var(--nb-type-ui);
}

a {
  font-family: inherit;
}

label {
  font: var(--nb-type-label);
}

/* Shared legacy action primitives. */
.btn,
.btn-primary,
.primary-btn {
  font: var(--nb-type-control);
}

/* Shared navbar and mobile drawer. */
.topbar,
.account-popup,
.auth-modal,
.mobile-nav-drawer {
  font-family: var(--nb-sans);
}

.logo {
  font: var(--nb-type-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav-link,
.nav-cta,
.account-btn,
.account-avatar-btn,
.mobile-nav-row {
  font: var(--nb-type-control);
}

/* Frozen theme/chrome files still carry higher-specificity migration weights.
   Keep the canonical role theme-independent while making this later bridge the
   computed owner for shared navigation in both themes. */
html .topbar .nav-link,
html .topbar .dropdown-trigger,
html .topbar .dropdown-menu a,
html .topbar .nav-cta,
html .topbar .account-btn,
html .topbar .account-avatar-btn,
html #mobile-nav-drawer .mobile-nav-row {
  font: var(--nb-type-control);
}

/* The programme links are the bar's primary wayfinding — one scale step above
   the flanking controls so they don't read as minor chrome. Scoped to the
   desktop .nav pill; drawer rows keep the control metric. */
html .topbar .nav .nav-link {
  font-size: var(--nb-text-md);
}

.nav-link.is-active,
.nav-link[data-ui-current="page"],
.mobile-nav-row--program.is-active {
  font-weight: 700;
}

html .topbar .nav-link.is-active,
html .topbar .nav-link[data-ui-current="page"],
html #mobile-nav-drawer .mobile-nav-row--program.is-active {
  font-weight: 700;
}

.mobile-drawer-toggle,
.auth-modal-close,
.x-close {
  font: var(--nb-type-control);
}

/* Account dropdown. */
.account-popup-heading {
  font: var(--nb-type-control);
  letter-spacing: normal;
}

/* In lockstep with notebook-page.css (owner, 2026-10-10: one navbar, one
   light mode): the signed-in email and the menu's small print are 13px at
   500 on every page. At this weight of selector they also outrank
   notebook-account-typography.css's ui role, as they do on the notebook
   pages; at .account-popup-email alone they lost to it and read 15px 400. */
html #account-popup [class~="account-popup-email"],
html #account-popup [class~="account-popup-support"],
html #account-popup [class~="account-popup-footer"] {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-weight: 500;
  line-height: 1.4;
}

.account-popup-plan-badge,
.account-popup-link {
  font: var(--nb-type-label);
}

.account-popup-action,
.account-popup-nav-link,
.account-popup-theme,
.account-popup-signout {
  font: var(--nb-type-control);
}

/* Shared authentication modal. */
.auth-modal-title {
  font: var(--nb-type-headline);
  letter-spacing: -0.015em;
}

.auth-field label {
  font: var(--nb-type-label);
}

.auth-field input {
  font: var(--nb-type-ui);
}

.google-btn,
.auth-btn {
  font: var(--nb-type-control);
}

.auth-divider span,
.auth-field-hint {
  font: var(--nb-type-label);
}

.auth-modal-footer,
.auth-modal-footer-link,
.auth-modal-switch-btn,
.auth-modal-notice {
  font: var(--nb-type-ui);
}

/* Authenticated account panel inside the shared modal. */
.acct-identity-label,
.acct-plan-label {
  font: var(--nb-type-label);
}

.acct-name {
  font: var(--nb-type-title);
}

.acct-email,
.acct-plan-premium-sub,
.acct-plan-desc {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-weight: 400;
  line-height: 1.5;
}

.acct-plan-premium-title,
.acct-plan-name {
  font: var(--nb-type-control);
}

.acct-upgrade-btn,
.acct-nav-link,
.acct-logout-btn {
  font: var(--nb-type-control);
}

/* The shared footer's role metrics and geometry are protected. Only its
   inherited sans family follows the selected system.

   The tagline used to be carved out as an "editorial" line in Vollkorn
   italic. Owner call 2026-08-19: in a footer it did not read as editorial,
   it read as a mistake -- one italic serif sentence sitting under a sans
   wordmark, beside sans link columns, with nothing else on the page in that
   voice. It now inherits the footer's sans like everything else around it. */
.site-footer {
  font-family: var(--nb-sans);
}

/* Legal prose outside the protected .site-footer component. */
.legal-page {
  font-family: var(--nb-sans);
}

.legal-eyebrow {
  font: var(--nb-type-label);
}

.legal-title {
  font: var(--nb-type-headline);
}

.legal-lede,
.legal-section p {
  font: var(--nb-type-prose);
}

.legal-section h2 {
  font: var(--nb-type-title);
}

.legal-section a {
  font-family: inherit;
}

/* Persistent sitemap navigation is product navigation, not an editorial
   voice. The page hero may retain its separately earned serif treatment. */
.sm-page {
  font-family: var(--nb-sans);
}

.sm-program-title,
.sm-program-title a,
.sm-subject-name {
  font: var(--nb-type-title);
}

.sm-eyebrow,
.sm-board-label {
  font: var(--nb-type-label);
}

.sm-res-link {
  font: var(--nb-type-control);
}

/* Shared breadcrumb/label families that still appear on legacy-base pages. */
.breadcrumbs,
.note-breadcrumbs {
  font: var(--nb-type-label);
}

/* Stage 5 Wave 1: public and picker page families. These selectors are
   deliberately page-scoped and typography-only so the bridge can sit after
   legacy page CSS without changing layout, color, or the legacy homepage. */
.pg-board-title,
.pg-hero-title,
.sr-title,
.cs-heading,
.error-title {
  font: var(--nb-type-headline);
}

.sm-title {
  font: var(--nb-type-editorial);
}

.pg-board-lede,
.pg-hero-body,
.sr-subtitle,
.cs-body,
.sm-lead,
.error-lede {
  font: var(--nb-type-prose);
}

.pg-board-cards-heading,
.pg-bcard-name,
.si-card-name,
.sr-card-title,
.sr-card--featured .sr-card-title,
.cs-proof-title,
.pg-cta-title {
  font: var(--nb-type-title);
}

.pg-board-context,
.pg-bcard-chip,
.pg-bcard-count,
.si-card-meta,
.sr-card-label,
.sr-soon-tag,
.sr-tips-label,
.cs-page .nv-hero-tag,
.cs-status,
.cs-proof-icon,
.cs-support-label,
.cs-timeline-meta,
.cs-stage strong,
.cs-stage span:not(.cs-stage-dot),
.error-eyebrow {
  font: var(--nb-type-label);
}

.pg-back,
.pg-bcard-go,
.pg-cta-section .lp-cta-primary,
.sr-card-cta,
html .cs-page a.cs-btn,
.error-actions .auth-btn,
.error-actions .pwd-footer-link {
  font: var(--nb-type-control);
}

/* .pg-board-help is orphaned: the board-uncertainty aside was removed from
   subject_index.html (owner call 2026-09-04) and no template carries the class
   now. The entry stays because pages/tests_typography_stage5_wave1.py reads
   this file as source and asserts the selector verbatim -- the same reason the
   .auth-context-* entries stay in notebook-account-typography.css. */
.pg-bcard-qual,
.pg-board-help,
.pg-cta-body,
.sr-card-desc,
.sr-card--featured .sr-card-desc,
.sr-tips p,
.cs-proof-text,
.cs-inline-note,
.cs-support-text,
.cs-chip {
  font: var(--nb-type-ui);
}