/* ============================================================
   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,
.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 #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[aria-current="page"],
.mobile-nav-row--program.is-active {
  font-weight: 700;
}

html .topbar .nav-link.is-active,
html .topbar .nav-link[aria-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;
}

.account-popup-email,
.account-popup-support,
.account-popup-footer {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-weight: 400;
  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 separately earned
   editorial tagline keeps Vollkorn. */
.site-footer {
  font-family: var(--nb-sans);
}

.ft-tagline {
  font-family: var(--nb-serif);
  font-style: italic;
}

/* Legal prose outside the protected .nb-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-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);
}