/* ============================================================
   THE ANNOTATED NOTEBOOK - Stage 5 Wave 4 account typography.

   Loaded last on notebook-active legacy-base pages. Legacy account,
   profile, billing, authentication, recovery, and status styles retain
   their geometry and color; this layer owns only canonical role metrics.
   ============================================================ */

html .acg-heading,
html .pv-title,
html .auth-context-title,
html .auth-title,
html .pwd-title,
html .bc-title,
html .status-title {
  font: var(--nb-type-headline);
}

html .acct-hub-name,
html .acct-hub-free-name,
html .acg-card-title,
html .pv-name,
html .pv-section-title,
html .nb-account-section-title {
  font: var(--nb-type-title);
}

html .acg-body,
html .pv-subtitle,
html .auth-context-sub,
html .pwd-subtitle,
html .bc-body,
html .status-body,
html .nb-account-copy,
html .nb-account-recipient,
html .nb-account-empty {
  font: var(--nb-type-prose);
}

html .acct-hub-section-label,
html .acct-hub-signout-label,
html .acg-pill,
html .acg-card-eyebrow,
html .pv-chip,
html .pv-verified,
html .pv-field label,
html .pv-track-glabel,
html .bm-status-badge,
html .auth-context-eyebrow,
html .auth-divider span,
html .auth-field-hint,
html .pwd-eyebrow,
html .pwd-aside-label {
  font: var(--nb-type-label);
}

html .acct-hub-premium-status,
html .acct-hub-upgrade-btn,
html .acct-hub-action-link,
html .acct-hub-logout-btn,
html .acg-benefit-text strong,
html .acg-btn-primary,
html .acg-btn-secondary,
html .pv-save,
html .pv-back,
html .pv-side-title,
html .bm-secondary-btn,
html .bm-footer-link,
html .bc-btn,
html .auth-page .google-btn,
html .auth-page .auth-btn,
html .auth-links a,
html .pwd-footer-link,
html .pwd-aside-link,
html .status-btn,
html .nb-account-action,
html .nb-account-provider-list a,
html .nb-account-details summary {
  font: var(--nb-type-control);
}

html .acct-hub-premium-note,
html .acct-hub-free-desc,
html .acg-benefit-text span,
html .acg-card-body,
html .pv-card-sub,
html .pv-field input,
html .pv-field select,
html .pv-hint,
html .pv-error,
html .pv-tracker-empty,
html .pv-side-empty,
html .pv-setup-item,
html .bm-notice,
html .bc-note,
html .auth-subtitle,
html .auth-context-list,
html .auth-links,
html .pwd-done-body,
html .pwd-aside-list,
html .pwd-aside-help,
html .status-body--sm,
html .nb-account-choice {
  font: var(--nb-type-ui);
}

/* Complete Wave 4 account coverage, including high-specificity legacy auth
   pages and shared popup/modal states that source-only broad selectors cannot
   safely win. */
html .auth-modal-title,
html .auth-page--login .auth-title,
html .auth-page--signup .auth-title,
html .pv-cd-n,
html .pv-cd-word,
html .pv-avatar {
  font: var(--nb-type-headline);
}

html .auth-modal--account .acct-name {
  font: var(--nb-type-title);
}

html .auth-page--login .auth-context-sub,
html .auth-page--signup .auth-context-sub {
  font: var(--nb-type-prose);
}

html .auth-field label,
html .auth-error,
html .pwd-form-error,
html .auth-page--login .auth-divider span,
html .auth-page--signup .auth-divider span,
html .auth-page--login .auth-field label,
html .auth-page--signup .auth-field label,
html .auth-page--login .auth-field-hint,
html .auth-page--signup .auth-field-hint,
html .pv-track-gap,
html .pv-mini-badge,
html .pv-side-count,
html .pv-cd-unit,
html .pv-cd-sub,
html .pv-cd-date,
html .account-popup-plan-badge,
html .account-popup-link,
html .acct-identity-label,
html .acct-plan-label {
  font: var(--nb-type-label);
}

html .acg-forgot,
html .pv-track-subject,
html .pv-subject-name,
html .pv-toggle-label,
html .bc-note-link,
html .auth-page--login .google-btn,
html .auth-page--signup .google-btn,
html .auth-page--login .auth-btn,
html .auth-page--signup .auth-btn,
html .auth-page--login .auth-links a,
html .auth-page--signup .auth-links a,
html .pwd-page .auth-btn,
html .account-popup-heading,
html .account-popup-action,
html .account-popup-nav-link,
html .account-popup-theme,
html .account-popup-signout,
html .auth-modal .google-btn,
html .auth-modal .auth-btn,
html .acct-plan-premium-title,
html .acct-plan-name,
html .acct-upgrade-btn,
html .acct-nav-link,
html .acct-logout-btn {
  font: var(--nb-type-control);
}

/* Match the legacy link-state specificity so account gateway actions cannot
   retain their old 17px/700 CTA metrics. */
html a.acg-btn-primary:link,
html a.acg-btn-primary:visited,
html a.acg-btn-secondary:link,
html a.acg-btn-secondary:visited,
html .pv-add-plus {
  font: var(--nb-type-control);
}

html .acct-hub-email,
html .pv-email,
html .pv-toast-msg,
html .pv-track-grade select,
html .pv-add-select,
html .auth-field input,
html .auth-page--login .auth-subtitle,
html .auth-page--signup .auth-subtitle,
html .auth-page--login .auth-field input,
html .auth-page--signup .auth-field input,
html #auth-modal .auth-field input,
html .auth-page--login .auth-context-list,
html .auth-page--signup .auth-context-list,
html .auth-page--login .auth-links,
html .auth-page--signup .auth-links,
html .account-popup-email,
html .account-popup-support,
html .account-popup-footer,
html .auth-modal-footer,
html .auth-modal-footer-link,
html .auth-modal-switch-btn,
html .auth-modal-notice,
html .auth-modal--account .acct-email,
html .acct-plan-premium-sub,
html .acct-plan-desc {
  font: var(--nb-type-ui);
}

/* theme-light.css still carries a historical email emphasis. This late
   typography layer owns the role without changing that file's colors. */
html.theme-light .acct-hub-email {
  font: var(--nb-type-ui);
}

/* Native account controls stay at or above the mobile zoom threshold while
   retaining the UI role's family, weight, and leading. */
html .auth-field input,
html .auth-page--login .auth-field input,
html .auth-page--signup .auth-field input,
html #auth-modal .auth-field input,
html .pv-field input,
html .pv-field select,
html .pv-track-grade select,
html .pv-add-select {
  font-size: var(--nb-text-md);
}

/* ── The dedicated auth pages sit one rung up the scale ──────
   A 460px card carrying 30px/15px/13px type read as a widget dropped on the
   canvas rather than the page's purpose: at 1440x900 it filled 32% of the
   width with 222px of dead space above it. Owner call 2026-09-04, ~20%
   bigger.

   Each replacement is the next rung of the SAME scale, so every computed
   size stays inside CANONICAL_SIZE_PX and the Stage 6 census still
   classifies the page: 13->15, 15->17, 17->20, 30->38. A literal 1.2x was
   measured first and rejected -- it multiplies the vertical rhythm too, and
   the card overflowed the fold by 25px at 1280x800.

   These are the ROLE tokens, not the four scale tokens underneath them.
   Overriding the scale here does nothing: --nb-type-headline is declared on
   :root, so its var(--nb-text-2xl) is already substituted by the time the
   value inherits into .auth-page. Only a re-declaration of the role itself
   re-resolves in this scope. (Measured: a scale-only override moved the one
   direct consumer -- the input -- and left the headline at 30px.)

   Scoped to .auth-page, the four dedicated templates. #auth-modal is
   deliberately outside it -- the navbar popup is an interruption over
   another page, not the page itself, and keeps the canonical scale.
*/
html .auth-page {
  --nb-type-headline: 700 var(--nb-text-3xl)/1.2 var(--nb-sans);
  --nb-type-ui: 400 var(--nb-text-md)/1.5 var(--nb-sans);
  --nb-type-control: 600 var(--nb-text-md)/1.2 var(--nb-sans);
  --nb-type-label: 600 var(--nb-text-base)/1.2 var(--nb-sans);
}

/* The input pins its own font-size above to clear the iOS zoom floor, so the
   role override cannot reach it. Matched per surface at the pin's own
   specificity and declared after it, which is what makes this win. */
html .auth-page .auth-field input,
html .auth-page--login .auth-field input,
html .auth-page--signup .auth-field input {
  font-size: var(--nb-text-lg);
}

/* ONE INK (owner, 2026-09-26): every placeholder is the full ink (the colour
   lives in the account skin and the auth layer) and is set in IBM Plex Sans
   italic 400, so an empty field never reads as filled. */
html .auth-field input::placeholder {
  font-style: italic;
}