/* ============================================================
   ANNOTATED NOTEBOOK SKIN - account and billing family.
   COLORS ONLY. The legacy acct-hub/acg/pv/bm/bc layouts stay 1:1;
   this file re-points their ink, paper, and status colors to nb tokens.
   Loaded only when nb_active from pages/includes/nb_account_skin.html.
   ============================================================ */

/* ONE INK ON THE LEGACY PAGES (owner, 2026-09-26: "make all the text colors
   that are like this weird bluish, purple gray into fullbright white like
   the rest ... and also do the same for whitemode but make it fully black").
   The base.html pages (home, pricing, the pickers, the subject hubs, sign in
   and sign up, the legal pages, the sitemap, coming soon) paint their quiet
   words through the legacy muted, faint and placeholder variables, which
   styles.css and theme-light.css (never edited) declare on :root. This sheet
   reaches every page after both through nb_navchrome_skin.html, and (0,1,1)
   outranks :root whatever the order, so each variable is the legacy primary
   text of its own theme here: #F0EFEC by night, #151A2D by day. The account
   and auth scopes below re-point the same names to the notebook ink. On the
   notebook base --text is not declared, so these stay unset there, exactly
   as before. */
html.theme-light,
html:not(.theme-light) {
  --text-muted: var(--text);
  --text-faint: var(--text);
  --muted: var(--text);
  --faint: var(--text);
  --placeholder: var(--text);
}

html.theme-light body,
html:not(.theme-light) body {
  background-color: var(--nb-paper);
  background-image: radial-gradient(var(--nb-grid-dot) 1px, transparent 1px);
  background-size: var(--nb-grid-size) var(--nb-grid-size);
}

html.theme-light .lp-atmosphere,
html:not(.theme-light) .lp-atmosphere,
html.theme-light .pg-page-glow,
html:not(.theme-light) .pg-page-glow {
  display: none;
}

html.theme-light .acct-hub-hero,
html.theme-light .acct-hub-content,
html.theme-light .acg-page,
html.theme-light .pv-page,
html.theme-light .bc-page,
html:not(.theme-light) .acct-hub-hero,
html:not(.theme-light) .acct-hub-content,
html:not(.theme-light) .acg-page,
html:not(.theme-light) .pv-page,
html:not(.theme-light) .bc-page {
  --text: var(--nb-ink);
  --text-muted: var(--nb-ink-2);
  --muted: var(--nb-ink-2);
  --faint: var(--nb-ink-3);
  --placeholder: var(--nb-ink-2);
  --surface: var(--nb-paper-raised);
  --surface-soft: var(--nb-paper-sunken);
  --surface-elevated: var(--nb-paper-raised);
  --bg-elevated: var(--nb-paper-raised);
  --bg-3: var(--nb-paper-sunken);
  --border: var(--nb-border);
  --border-2: var(--nb-border-strong);
  --border-control: var(--nb-control-border);
  --border-focus: var(--nb-blue);
  --focus-ring: var(--nb-blue);
  --accent: var(--nb-blue);
  --accent-2: var(--nb-blue);
  --accent-soft: var(--nb-blue-wash);
  --accent-border: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  --text-link: var(--nb-blue);
  --text-link-hover: var(--nb-blue-strong);
  --success: var(--nb-success);
  --success-subtle-bg: color-mix(in srgb, var(--nb-success) 12%, transparent);
  --success-border: color-mix(in srgb, var(--nb-success) 28%, transparent);
  --danger: var(--nb-error);
  --danger-subtle-bg: color-mix(in srgb, var(--nb-error) 12%, transparent);
  --danger-border: color-mix(in srgb, var(--nb-error) 30%, transparent);
  --warning: var(--nb-error);
  --warning-subtle-bg: color-mix(in srgb, var(--nb-error) 12%, transparent);
  --warning-border: color-mix(in srgb, var(--nb-error) 30%, transparent);
  --premium-pill-bg: var(--nb-premium-wash);
  --premium-border: color-mix(in srgb, var(--nb-premium) 30%, transparent);
  --premium-pill-text: var(--nb-premium);
  --shadow-sm: var(--nb-shadow-1);
  --shadow-md: var(--nb-shadow-2);
  --shadow-lg: var(--nb-shadow-2);
  --shadow-hover: var(--nb-shadow-2);
  --glow-accent: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html.theme-light .pv-deco,
html:not(.theme-light) .pv-deco {
  display: none;
}

/* Account hub and billing manage */
html.theme-light .acct-hub-hero .pg-hero-title,
html:not(.theme-light) .acct-hub-hero .pg-hero-title {
  color: var(--nb-ink);
}

html.theme-light .acct-hub-hero .pg-hero-body,
html:not(.theme-light) .acct-hub-hero .pg-hero-body {
  color: var(--nb-ink);
}

html.theme-light .acct-hub-card,
html:not(.theme-light) .acct-hub-card {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-2);
  color: var(--nb-ink);
}

html.theme-light .acct-hub-profile,
html:not(.theme-light) .acct-hub-profile {
  background: var(--nb-paper-sunken);
  border-bottom-color: var(--nb-border);
}

html.theme-light .acct-hub-avatar,
html:not(.theme-light) .acct-hub-avatar {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-blue);
}

html.theme-light .acct-hub-name,
html.theme-light .acct-hub-free-name,
html:not(.theme-light) .acct-hub-name,
html:not(.theme-light) .acct-hub-free-name {
  color: var(--nb-ink);
}

html.theme-light .acct-hub-email,
html.theme-light .acct-hub-premium-note,
html.theme-light .acct-hub-free-desc,
html:not(.theme-light) .acct-hub-email,
html:not(.theme-light) .acct-hub-premium-note,
html:not(.theme-light) .acct-hub-free-desc {
  color: var(--nb-ink);
}

html.theme-light .acct-hub-section-label,
html.theme-light .acct-hub-signout-label,
html:not(.theme-light) .acct-hub-section-label,
html:not(.theme-light) .acct-hub-signout-label {
  color: var(--nb-blue);
}

html.theme-light .acct-hub-col + .acct-hub-col,
html.theme-light .acct-hub-signout,
html.theme-light .bm-footer,
html:not(.theme-light) .acct-hub-col + .acct-hub-col,
html:not(.theme-light) .acct-hub-signout,
html:not(.theme-light) .bm-footer {
  border-color: var(--nb-border);
}

html.theme-light .acct-hub-premium-status,
html:not(.theme-light) .acct-hub-premium-status {
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}

/* ── Account state (2026-08-30) — colours only, layout stays in styles.css.
   Both scopes are listed because this family is theme-agnostic: the tokens
   already carry the theme, exactly as the rules above do. ── */
html.theme-light .acct-hub-meta-k,
html.theme-light .acct-hub-grade,
html.theme-light .acct-hub-empty,
html.theme-light .acct-hub-check,
html:not(.theme-light) .acct-hub-meta-k,
html:not(.theme-light) .acct-hub-grade,
html:not(.theme-light) .acct-hub-empty,
html:not(.theme-light) .acct-hub-check {
  color: var(--nb-ink-2);
}

html.theme-light .acct-hub-meta-v,
html.theme-light .acct-hub-subject-name,
html:not(.theme-light) .acct-hub-meta-v,
html:not(.theme-light) .acct-hub-subject-name {
  color: var(--nb-ink);
}

html.theme-light .acct-hub-subject,
html.theme-light .acct-hub-grade,
html.theme-light .acct-hub-check-dot,
html.theme-light .acct-hub-foot,
html.theme-light .acct-hub-foot-actions,
html:not(.theme-light) .acct-hub-subject,
html:not(.theme-light) .acct-hub-grade,
html:not(.theme-light) .acct-hub-check-dot,
html:not(.theme-light) .acct-hub-foot,
html:not(.theme-light) .acct-hub-foot-actions {
  border-color: var(--nb-border);
}

html.theme-light .acct-hub-grade--target,
html:not(.theme-light) .acct-hub-grade--target {
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}

/* Kept apart on purpose. Grouping these two cost a render: the checklist
   item wants INK, the progress bar wants a FILL, and one rule carrying both
   painted every completed item as a solid green block with its label hidden
   inside it. The text inventory still read correctly -- only the screenshot
   showed it. */
html.theme-light .acct-hub-check--done,
html:not(.theme-light) .acct-hub-check--done {
  color: var(--nb-success);
}

html.theme-light .acct-hub-progress-fill,
html:not(.theme-light) .acct-hub-progress-fill {
  background-color: var(--nb-success);
}

/* The track is the unfilled remainder, so it reads as a hairline surface
   rather than ink -- the same weight as the borders above it. */
html.theme-light .acct-hub-progress-track,
html:not(.theme-light) .acct-hub-progress-track {
  background: var(--nb-border);
}

html.theme-light .acct-hub-action-link,
html:not(.theme-light) .acct-hub-action-link {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
}

html.theme-light .acct-hub-action-link:hover,
html.theme-light .acct-hub-action-link:focus-visible,
html:not(.theme-light) .acct-hub-action-link:hover,
html:not(.theme-light) .acct-hub-action-link:focus-visible {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-blue);
}

html.theme-light .acct-hub-action-arrow,
html:not(.theme-light) .acct-hub-action-arrow {
  color: var(--nb-ink-3);
}

html.theme-light .acct-hub-action-link:hover .acct-hub-action-arrow,
html.theme-light .acct-hub-action-link:focus-visible .acct-hub-action-arrow,
html:not(.theme-light) .acct-hub-action-link:hover .acct-hub-action-arrow,
html:not(.theme-light) .acct-hub-action-link:focus-visible .acct-hub-action-arrow {
  color: var(--nb-blue);
}

html.theme-light .acct-hub-upgrade-btn,
html.theme-light .bc-btn--primary,
html:not(.theme-light) .acct-hub-upgrade-btn,
html:not(.theme-light) .bc-btn--primary {
  background: var(--nb-blue);
  border: 1px solid var(--nb-blue);
  color: var(--nb-on-blue);
  box-shadow: none;
  text-shadow: none;
}

html.theme-light .acct-hub-upgrade-btn:hover,
html.theme-light .acct-hub-upgrade-btn:focus-visible,
html.theme-light .bc-btn--primary:hover,
html.theme-light .bc-btn--primary:focus-visible,
html:not(.theme-light) .acct-hub-upgrade-btn:hover,
html:not(.theme-light) .acct-hub-upgrade-btn:focus-visible,
html:not(.theme-light) .bc-btn--primary:hover,
html:not(.theme-light) .bc-btn--primary:focus-visible {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
  opacity: 1;
}

html.theme-light .acct-hub-upgrade-btn:focus-visible,
html.theme-light .acct-hub-action-link:focus-visible,
html.theme-light .acct-hub-logout-btn:focus-visible,
html.theme-light .bm-secondary-btn:focus-visible,
html.theme-light .bm-footer-link:focus-visible,
html:not(.theme-light) .acct-hub-upgrade-btn:focus-visible,
html:not(.theme-light) .acct-hub-action-link:focus-visible,
html:not(.theme-light) .acct-hub-logout-btn:focus-visible,
html:not(.theme-light) .bm-secondary-btn:focus-visible,
html:not(.theme-light) .bm-footer-link:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

html.theme-light .acct-hub-logout-btn,
html.theme-light .bm-notice,
html.theme-light .bm-status-badge--warning,
html:not(.theme-light) .acct-hub-logout-btn,
html:not(.theme-light) .bm-notice,
html:not(.theme-light) .bm-status-badge--warning {
  background: color-mix(in srgb, var(--nb-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-error) 30%, transparent);
  color: var(--nb-error);
}

html.theme-light .acct-hub-logout-btn:hover,
html.theme-light .acct-hub-logout-btn:focus-visible,
html:not(.theme-light) .acct-hub-logout-btn:hover,
html:not(.theme-light) .acct-hub-logout-btn:focus-visible {
  background: color-mix(in srgb, var(--nb-error) 16%, transparent);
  border-color: color-mix(in srgb, var(--nb-error) 40%, transparent);
  color: var(--nb-error);
}

html.theme-light .bm-status-badge--ended,
html:not(.theme-light) .bm-status-badge--ended {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}

html.theme-light .bm-secondary-btn {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  color: var(--nb-ink-2);
}
html:not(.theme-light) .bm-secondary-btn {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}

html.theme-light .bm-secondary-btn:hover,
html.theme-light .bm-secondary-btn:focus-visible,
html:not(.theme-light) .bm-secondary-btn:hover,
html:not(.theme-light) .bm-secondary-btn:focus-visible {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  color: var(--nb-blue);
}

html.theme-light .bm-footer-link,
html:not(.theme-light) .bm-footer-link {
  color: var(--nb-blue);
}

html.theme-light .bm-footer-link:hover,
html.theme-light .bm-footer-link:focus-visible,
html:not(.theme-light) .bm-footer-link:hover,
html:not(.theme-light) .bm-footer-link:focus-visible {
  color: var(--nb-blue-strong);
}

@media (max-width: 800px) {
  html.theme-light .acct-hub-col + .acct-hub-col,
  html:not(.theme-light) .acct-hub-col + .acct-hub-col {
    border-top-color: var(--nb-border);
  }
}

/* Logged-out account gateway */
html.theme-light .acg-pill,
html:not(.theme-light) .acg-pill {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
  box-shadow: var(--nb-shadow-1);
}

html.theme-light .acg-pill-dot,
html.theme-light .acg-benefit-dot,
html:not(.theme-light) .acg-pill-dot,
html:not(.theme-light) .acg-benefit-dot {
  background: var(--nb-blue);
  box-shadow: none;
}

html.theme-light .acg-heading,
html.theme-light .acg-card-title,
html.theme-light .acg-benefit-text strong,
html:not(.theme-light) .acg-heading,
html:not(.theme-light) .acg-card-title,
html:not(.theme-light) .acg-benefit-text strong {
  color: var(--nb-ink);
}

html.theme-light .acg-body,
html.theme-light .acg-card-body,
html.theme-light .acg-benefit-text span,
html:not(.theme-light) .acg-body,
html:not(.theme-light) .acg-card-body,
html:not(.theme-light) .acg-benefit-text span {
  color: var(--nb-ink);
}

html.theme-light .acg-benefit,
html.theme-light .acg-card,
html:not(.theme-light) .acg-benefit,
html:not(.theme-light) .acg-card {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}

html.theme-light .acg-benefit::before,
html.theme-light .acg-card::before,
html:not(.theme-light) .acg-benefit::before,
html:not(.theme-light) .acg-card::before {
  background: var(--nb-border-strong);
}

html.theme-light .acg-card-eyebrow,
html:not(.theme-light) .acg-card-eyebrow {
  color: var(--nb-blue);
}

html.theme-light a.acg-btn-primary,
html.theme-light a.acg-btn-primary:link,
html.theme-light a.acg-btn-primary:visited,
html:not(.theme-light) a.acg-btn-primary,
html:not(.theme-light) a.acg-btn-primary:link,
html:not(.theme-light) a.acg-btn-primary:visited {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  color: var(--nb-on-blue);
  box-shadow: none;
}

html.theme-light a.acg-btn-primary:hover,
html.theme-light a.acg-btn-primary:focus-visible,
html:not(.theme-light) a.acg-btn-primary:hover,
html:not(.theme-light) a.acg-btn-primary:focus-visible {
  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 a.acg-btn-secondary,
html.theme-light a.acg-btn-secondary:link,
html.theme-light a.acg-btn-secondary:visited {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  color: var(--nb-ink);
  box-shadow: none;
}
html:not(.theme-light) a.acg-btn-secondary,
html:not(.theme-light) a.acg-btn-secondary:link,
html:not(.theme-light) a.acg-btn-secondary:visited {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
  box-shadow: none;
}

html.theme-light a.acg-btn-secondary:hover,
html.theme-light a.acg-btn-secondary:focus-visible,
html:not(.theme-light) a.acg-btn-secondary:hover,
html:not(.theme-light) a.acg-btn-secondary:focus-visible {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-blue);
}

html.theme-light .acg-forgot,
html:not(.theme-light) .acg-forgot {
  color: var(--nb-blue);
}

html.theme-light .acg-forgot:hover,
html.theme-light .acg-forgot:focus-visible,
html:not(.theme-light) .acg-forgot:hover,
html:not(.theme-light) .acg-forgot:focus-visible {
  color: var(--nb-blue-strong);
}

html.theme-light a.acg-btn-primary:focus-visible,
html.theme-light a.acg-btn-secondary:focus-visible,
html.theme-light .acg-forgot:focus-visible,
html:not(.theme-light) a.acg-btn-primary:focus-visible,
html:not(.theme-light) a.acg-btn-secondary:focus-visible,
html:not(.theme-light) .acg-forgot:focus-visible {
  outline-color: var(--nb-blue);
}

/* Profile editor */
html.theme-light .pv-page,
html:not(.theme-light) .pv-page {
  background: transparent;
}

html.theme-light .pv-title,
html.theme-light .pv-name,
html.theme-light .pv-section-title,
html.theme-light .pv-side-title,
html.theme-light .pv-subject-name,
html.theme-light .pv-toggle-label,
html:not(.theme-light) .pv-title,
html:not(.theme-light) .pv-name,
html:not(.theme-light) .pv-section-title,
html:not(.theme-light) .pv-side-title,
html:not(.theme-light) .pv-subject-name,
html:not(.theme-light) .pv-toggle-label {
  color: var(--nb-ink);
}

html.theme-light .pv-subtitle,
html.theme-light .pv-email,
html.theme-light .pv-card-sub,
html.theme-light .pv-hint,
html.theme-light .pv-side-empty,
html.theme-light .pv-setup-item,
html:not(.theme-light) .pv-subtitle,
html:not(.theme-light) .pv-email,
html:not(.theme-light) .pv-card-sub,
html:not(.theme-light) .pv-hint,
html:not(.theme-light) .pv-side-empty,
html:not(.theme-light) .pv-setup-item {
  color: var(--nb-ink);
}

html.theme-light .pv-card,
html.theme-light .pv-side-card,
html.theme-light .pv-lb-pop,
html.theme-light .pv-toast,
html:not(.theme-light) .pv-card,
html:not(.theme-light) .pv-side-card,
html:not(.theme-light) .pv-lb-pop,
html:not(.theme-light) .pv-toast {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html.theme-light .pv-card::after,
html:not(.theme-light) .pv-card::after {
  background: var(--nb-border-strong);
}

html.theme-light .pv-top,
html.theme-light .pv-foot,
html:not(.theme-light) .pv-top,
html:not(.theme-light) .pv-foot {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
}

html.theme-light .pv-grid,
html.theme-light .pv-col + .pv-col,
html.theme-light .pv-prefs,
html.theme-light .pv-track-row,
html:not(.theme-light) .pv-grid,
html:not(.theme-light) .pv-col + .pv-col,
html:not(.theme-light) .pv-prefs,
html:not(.theme-light) .pv-track-row {
  border-color: var(--nb-border);
}

html.theme-light .pv-token,
html.theme-light .pv-avatar,
html.theme-light .pv-section-icon,
html.theme-light .pv-chip,
html.theme-light .pv-side-count,
html.theme-light .pv-mini-badge,
html:not(.theme-light) .pv-token,
html:not(.theme-light) .pv-avatar,
html:not(.theme-light) .pv-section-icon,
html:not(.theme-light) .pv-chip,
html:not(.theme-light) .pv-side-count,
html:not(.theme-light) .pv-mini-badge {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-blue);
  box-shadow: none;
}

html.theme-light .pv-chip-dot,
html.theme-light .pv-chip-dot--teal,
html.theme-light .pv-track-dot,
html.theme-light .pv-subject-dot,
html:not(.theme-light) .pv-chip-dot,
html:not(.theme-light) .pv-chip-dot--teal,
html:not(.theme-light) .pv-track-dot,
html:not(.theme-light) .pv-subject-dot {
  background: var(--nb-blue);
}

html.theme-light .pv-chip-dot--green,
html:not(.theme-light) .pv-chip-dot--green {
  background: var(--nb-success);
}

html.theme-light .pv-field > label,
html.theme-light .pv-track-subject,
html.theme-light .pv-track-glabel,
html:not(.theme-light) .pv-field > label,
html:not(.theme-light) .pv-track-subject,
html:not(.theme-light) .pv-track-glabel {
  color: var(--nb-ink);
}

html.theme-light .pv-field input,
html.theme-light .pv-field select,
html.theme-light .pv-select--sm select,
html.theme-light .pv-lb-btn,
html.theme-light .pv-lb-search {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  color: var(--nb-ink);
}

html:not(.theme-light) .pv-field input,
html:not(.theme-light) .pv-field select,
html:not(.theme-light) .pv-select--sm select,
html:not(.theme-light) .pv-lb-btn,
html:not(.theme-light) .pv-lb-search {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
}

html.theme-light .pv-field input:hover,
html.theme-light .pv-field select:hover,
html.theme-light .pv-select--sm select:hover,
html.theme-light .pv-lb-btn:hover {
  border-color: var(--nb-control-border);
}

html:not(.theme-light) .pv-field input:hover,
html:not(.theme-light) .pv-field select:hover,
html:not(.theme-light) .pv-select--sm select:hover,
html:not(.theme-light) .pv-lb-btn:hover {
  border-color: var(--nb-border-strong);
}

html.theme-light .pv-field input:focus,
html.theme-light .pv-field select:focus,
html.theme-light .pv-select--sm select:focus,
html.theme-light .pv-lb-btn:focus-visible,
html.theme-light .pv-lb-btn[data-ui-expanded="true"],
html.theme-light .pv-lb-search:focus,
html:not(.theme-light) .pv-field input:focus,
html:not(.theme-light) .pv-field select:focus,
html:not(.theme-light) .pv-select--sm select:focus,
html:not(.theme-light) .pv-lb-btn:focus-visible,
html:not(.theme-light) .pv-lb-btn[data-ui-expanded="true"],
html:not(.theme-light) .pv-lb-search:focus {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  box-shadow: 0 0 0 3px var(--nb-blue-wash);
}

html.theme-light .pv-select::after,
html.theme-light .pv-lb-chev,
html:not(.theme-light) .pv-select::after,
html:not(.theme-light) .pv-lb-chev {
  border-color: var(--nb-ink-2);
}

html.theme-light .pv-error,
html.theme-light .pv-verified--no,
html.theme-light .pv-track-gap--gap,
html.theme-light .pv-track-remove:hover,
html:not(.theme-light) .pv-error,
html:not(.theme-light) .pv-verified--no,
html:not(.theme-light) .pv-track-gap--gap,
html:not(.theme-light) .pv-track-remove:hover {
  color: var(--nb-error);
}

html.theme-light .pv-verified--no,
html.theme-light .pv-track-gap--gap,
html:not(.theme-light) .pv-verified--no,
html:not(.theme-light) .pv-track-gap--gap {
  background: color-mix(in srgb, var(--nb-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-error) 30%, transparent);
}

html.theme-light .pv-verified,
html.theme-light .pv-toast-icon,
html.theme-light .pv-check,
html.theme-light .pv-track-gap--ahead,
html.theme-light .pv-track-gap--met,
html:not(.theme-light) .pv-verified,
html:not(.theme-light) .pv-toast-icon,
html:not(.theme-light) .pv-check,
html:not(.theme-light) .pv-track-gap--ahead,
html:not(.theme-light) .pv-track-gap--met {
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}

html.theme-light .pv-tracker-empty,
html:not(.theme-light) .pv-tracker-empty {
  border-color: var(--nb-border-strong);
  color: var(--nb-ink);
}

html.theme-light .pv-add-plus,
html.theme-light .pv-add-select,
html:not(.theme-light) .pv-add-plus,
html:not(.theme-light) .pv-add-select {
  color: var(--nb-blue);
}

/* The one native <select> on this page that pv-listbox.js does not enhance,
   so the browser paints its option popup itself -- and Chromium paints that
   popup with this background-color over a white base. --nb-blue-wash is
   translucent in dark (10% blue), which composited to a white popup carrying
   pale --nb-blue text in BOTH themes. Same opaque treatment as the other
   unenhanced native selects on this page (.pv-select--sm select, above), so
   the page has one native-select idiom rather than two. */
html.theme-light .pv-add-select,
html:not(.theme-light) .pv-add-select {
  background: var(--nb-paper-sunken);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-ink);
  box-shadow: none;
}

html.theme-light .pv-add-select:not(:disabled) {
  border-color: var(--nb-control-border);
}

html.theme-light .pv-add-select:hover:not(:disabled),
html:not(.theme-light) .pv-add-select:hover:not(:disabled) {
  border-color: var(--nb-blue);
}

html.theme-light .pv-switch-track,
html:not(.theme-light) .pv-switch-track {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border-strong);
}

html.theme-light .pv-switch-track::after,
html:not(.theme-light) .pv-switch-track::after {
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-shadow-1);
}

html.theme-light .pv-switch:has(input:checked) .pv-switch-track,
html:not(.theme-light) .pv-switch:has(input:checked) .pv-switch-track {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
}

html.theme-light .pv-switch:has(input:focus-visible) .pv-switch-track,
html.theme-light .pv-track-remove:focus-visible,
html.theme-light .pv-add-select:focus-visible,
html.theme-light .pv-back:focus-visible,
html.theme-light .pv-save:focus-visible,
html.theme-light .pv-toast-x:focus-visible,
html:not(.theme-light) .pv-switch:has(input:focus-visible) .pv-switch-track,
html:not(.theme-light) .pv-track-remove:focus-visible,
html:not(.theme-light) .pv-add-select:focus-visible,
html:not(.theme-light) .pv-back:focus-visible,
html:not(.theme-light) .pv-save:focus-visible,
html:not(.theme-light) .pv-toast-x:focus-visible {
  outline-color: var(--nb-blue);
}

html.theme-light .pv-back,
html:not(.theme-light) .pv-back {
  color: var(--nb-blue);
}

html.theme-light .pv-back:hover,
html.theme-light .pv-back:focus-visible,
html:not(.theme-light) .pv-back:hover,
html:not(.theme-light) .pv-back:focus-visible {
  color: var(--nb-blue-strong);
}

html.theme-light .pv-save,
html:not(.theme-light) .pv-save {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  color: var(--nb-on-blue);
  box-shadow: none;
}

html.theme-light .pv-save:hover,
html.theme-light .pv-save:focus-visible,
html:not(.theme-light) .pv-save:hover,
html:not(.theme-light) .pv-save:focus-visible {
  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 .pv-save.is-loading .pv-save-spinner,
html:not(.theme-light) .pv-save.is-loading .pv-save-spinner {
  border-color: color-mix(in srgb, var(--nb-on-blue) 45%, transparent);
  border-top-color: var(--nb-on-blue);
}

html.theme-light .pv-lb-opt,
html:not(.theme-light) .pv-lb-opt {
  color: var(--nb-ink);
}

html.theme-light .pv-lb-opt:hover,
html:not(.theme-light) .pv-lb-opt:hover {
  background: var(--nb-paper-sunken);
}

html.theme-light .pv-lb-opt[data-ui-selected="true"],
html:not(.theme-light) .pv-lb-opt[data-ui-selected="true"],
html.theme-light .pv-lb-opt.is-active,
html:not(.theme-light) .pv-lb-opt.is-active {
  background: var(--nb-blue-wash);
  color: var(--nb-blue);
}

html.theme-light .pv-lb-empty,
html.theme-light .pv-toast-x,
html.theme-light .pv-cd-unit,
html.theme-light .pv-cd-date,
html:not(.theme-light) .pv-lb-empty,
html:not(.theme-light) .pv-toast-x,
html:not(.theme-light) .pv-cd-unit,
html:not(.theme-light) .pv-cd-date {
  color: var(--nb-ink);
}

html.theme-light .pv-toast-x:hover,
html.theme-light .pv-toast-x:focus-visible,
html:not(.theme-light) .pv-toast-x:hover,
html:not(.theme-light) .pv-toast-x:focus-visible {
  background: var(--nb-paper-sunken);
  color: var(--nb-ink);
}

html.theme-light .pv-side-card--exam,
html:not(.theme-light) .pv-side-card--exam {
  background: var(--nb-paper-raised);
}

html.theme-light .pv-cd-n,
html.theme-light .pv-cd-word,
html:not(.theme-light) .pv-cd-n,
html:not(.theme-light) .pv-cd-word {
  color: var(--nb-blue);
}

html.theme-light .pv-cd-word--past,
html:not(.theme-light) .pv-cd-word--past {
  color: var(--nb-ink-3);
}

/* Billing success/cancel */
html.theme-light .bc-card,
html:not(.theme-light) .bc-card {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-2);
  color: var(--nb-ink);
}

html.theme-light .bc-title,
html:not(.theme-light) .bc-title {
  color: var(--nb-ink);
}

html.theme-light .bc-body,
html:not(.theme-light) .bc-body {
  color: var(--nb-ink);
}

html.theme-light .bc-note,
html:not(.theme-light) .bc-note {
  color: var(--nb-ink);
}

html.theme-light .bc-note-link,
html:not(.theme-light) .bc-note-link {
  color: var(--nb-blue);
}

html.theme-light .bc-note-link:hover,
html.theme-light .bc-note-link:focus-visible,
html:not(.theme-light) .bc-note-link:hover,
html:not(.theme-light) .bc-note-link:focus-visible {
  color: var(--nb-blue-strong);
}

html.theme-light .bc-icon--success,
html:not(.theme-light) .bc-icon--success {
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}

html.theme-light .bc-icon--cancel,
html:not(.theme-light) .bc-icon--cancel {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-3);
}

html.theme-light .bc-btn--secondary {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  color: var(--nb-ink);
}
html:not(.theme-light) .bc-btn--secondary {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
}

html.theme-light .bc-btn--secondary:hover,
html.theme-light .bc-btn--secondary:focus-visible,
html:not(.theme-light) .bc-btn--secondary:hover,
html:not(.theme-light) .bc-btn--secondary:focus-visible {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-blue);
}

html.theme-light .bc-btn:focus-visible,
html:not(.theme-light) .bc-btn:focus-visible {
  outline-color: var(--nb-blue);
}

/* Auth chain and shared auth form internals */
html.theme-light .auth-page,
html.theme-light .pwd-page,
html.theme-light .status-page,
html:not(.theme-light) .auth-page,
html:not(.theme-light) .pwd-page,
html:not(.theme-light) .status-page {
  --text: var(--nb-ink);
  --text-muted: var(--nb-ink-2);
  --muted: var(--nb-ink-2);
  --faint: var(--nb-ink-3);
  --placeholder: var(--nb-ink-2);
  --surface: var(--nb-paper-raised);
  --surface-soft: var(--nb-paper-sunken);
  --surface-elevated: var(--nb-paper-raised);
  --bg: var(--nb-paper);
  --bg-elevated: var(--nb-paper-raised);
  --bg-3: var(--nb-paper-sunken);
  --border: var(--nb-border);
  --border-2: var(--nb-border-strong);
  --border-control: var(--nb-control-border);
  --border-focus: var(--nb-blue);
  --focus-ring: var(--nb-blue);
  --accent: var(--nb-blue);
  --accent-2: var(--nb-blue);
  --accent-soft: var(--nb-blue-wash);
  --accent-border: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  --text-link: var(--nb-blue);
  --text-link-hover: var(--nb-blue-strong);
  --success: var(--nb-success);
  --success-subtle-bg: color-mix(in srgb, var(--nb-success) 12%, transparent);
  --success-border: color-mix(in srgb, var(--nb-success) 28%, transparent);
  --danger: var(--nb-error);
  --danger-subtle-bg: color-mix(in srgb, var(--nb-error) 12%, transparent);
  --danger-border: color-mix(in srgb, var(--nb-error) 30%, transparent);
  --shadow-sm: var(--nb-shadow-1);
  --shadow-md: var(--nb-shadow-2);
  --shadow-lg: var(--nb-shadow-3);
  color: var(--nb-ink);
}

html.theme-light .auth-page,
html.theme-light .pwd-page,
html.theme-light .status-page,
html:not(.theme-light) .auth-page,
html:not(.theme-light) .pwd-page,
html:not(.theme-light) .status-page {
  background: transparent;
}

html.theme-light .auth-page--login::before,
html.theme-light .auth-page--signup::before,
html.theme-light .pwd-page::before,
html:not(.theme-light) .auth-page--login::before,
html:not(.theme-light) .auth-page--signup::before,
html:not(.theme-light) .pwd-page::before {
  display: none;
}

html.theme-light .auth-card,
html.theme-light .pwd-form-panel,
html.theme-light .status-card,
html:not(.theme-light) .auth-card,
html:not(.theme-light) .pwd-form-panel,
html:not(.theme-light) .status-card {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  border-top-color: var(--nb-border);
  box-shadow: var(--nb-shadow-2);
  color: var(--nb-ink);
}

html.theme-light .auth-context-panel,
html:not(.theme-light) .auth-context-panel {
  color: var(--nb-ink);
}

html.theme-light .auth-context-eyebrow,
html.theme-light .pwd-eyebrow,
html:not(.theme-light) .auth-context-eyebrow,
html:not(.theme-light) .pwd-eyebrow {
  color: var(--nb-blue);
}

html.theme-light .auth-context-eyebrow::before,
html:not(.theme-light) .auth-context-eyebrow::before {
  background: var(--nb-blue);
}

html.theme-light .auth-title,
html.theme-light .auth-context-title,
html.theme-light .pwd-title,
html.theme-light .status-title,
html:not(.theme-light) .auth-title,
html:not(.theme-light) .auth-context-title,
html:not(.theme-light) .pwd-title,
html:not(.theme-light) .status-title {
  background: none;
  color: var(--nb-ink);
  text-shadow: none;
  -webkit-text-fill-color: currentColor;
}

html.theme-light .auth-subtitle,
html.theme-light .auth-context-sub,
html.theme-light .pwd-subtitle,
html.theme-light .pwd-done-body,
html.theme-light .status-body,
html.theme-light .status-body--sm,
html:not(.theme-light) .auth-subtitle,
html:not(.theme-light) .auth-context-sub,
html:not(.theme-light) .pwd-subtitle,
html:not(.theme-light) .pwd-done-body,
html:not(.theme-light) .status-body,
html:not(.theme-light) .status-body--sm {
  color: var(--nb-ink);
}

html.theme-light .auth-context-list li,
html:not(.theme-light) .auth-context-list li {
  color: var(--nb-ink);
}

/* The side panel on the email and sign-out pages (.pwd-aside). styles.css
   draws its words by night in white at 52 and 70 percent and its label and
   link in a faded periwinkle, which read as the bluish grey the owner named
   (2026-09-26). One ink: the words are the ink, the label and the link the
   student's blue, the list dots blue, all opaque, in both themes. */
html.theme-light .pwd-aside-list li,
html.theme-light .pwd-aside-help,
html:not(.theme-light) .pwd-aside-list li,
html:not(.theme-light) .pwd-aside-help {
  color: var(--nb-ink);
}

html.theme-light .pwd-aside-label,
html.theme-light .pwd-aside-link,
html:not(.theme-light) .pwd-aside-label,
html:not(.theme-light) .pwd-aside-link {
  color: var(--nb-blue);
}

html.theme-light .pwd-aside-link:hover,
html:not(.theme-light) .pwd-aside-link:hover {
  color: var(--nb-blue-strong);
}

html.theme-light .pwd-aside-list li::before,
html:not(.theme-light) .pwd-aside-list li::before {
  background: var(--nb-blue);
}

html.theme-light .auth-context-dot,
html:not(.theme-light) .auth-context-dot {
  background: var(--nb-blue);
  box-shadow: none;
}

html.theme-light .google-btn {
  background: var(--nb-paper-raised);
  border-color: var(--nb-control-border);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}
html:not(.theme-light) .google-btn {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html.theme-light .google-btn:hover,
html.theme-light .google-btn:focus-visible {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html:not(.theme-light) .google-btn:hover,
html:not(.theme-light) .google-btn:focus-visible {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html.theme-light .google-btn:focus-visible,
html:not(.theme-light) .google-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

html.theme-light .auth-divider::before,
html.theme-light .auth-divider::after,
html:not(.theme-light) .auth-divider::before,
html:not(.theme-light) .auth-divider::after {
  background: var(--nb-border);
}

html.theme-light .auth-divider span,
html:not(.theme-light) .auth-divider span {
  color: var(--nb-ink-2);
}

html.theme-light .auth-field label,
html:not(.theme-light) .auth-field label {
  color: var(--nb-ink);
}

html.theme-light .auth-field input,
html.theme-light .auth-field select {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html:not(.theme-light) .auth-field input,
html:not(.theme-light) .auth-field select {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html.theme-light .auth-field input::placeholder,
html:not(.theme-light) .auth-field input::placeholder {
  /* ONE INK (owner, 2026-09-26): a placeholder is full ink; its italic, which
     says the field is empty, is typography and lives in
     notebook-account-typography.css */
  color: var(--nb-ink);
  opacity: 1;
}

html.theme-light .auth-field input:hover,
html.theme-light .auth-field select:hover {
  border-color: var(--nb-control-border);
}

html:not(.theme-light) .auth-field input:hover,
html:not(.theme-light) .auth-field select:hover {
  border-color: var(--nb-border-strong);
}

html.theme-light .auth-field input:focus,
html.theme-light .auth-field select:focus,
html:not(.theme-light) .auth-field input:focus,
html:not(.theme-light) .auth-field select:focus {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  box-shadow: 0 0 0 3px var(--nb-blue-wash);
  outline: none;
}

html.theme-light .auth-page .auth-card .auth-field input:not(:focus),
html.theme-light .auth-page .auth-card .auth-field select:not(:focus) {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-control-border);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-ink);
}

html.theme-light .auth-page .auth-card .auth-field input:focus,
html.theme-light .auth-page .auth-card .auth-field select:focus {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  box-shadow: 0 0 0 3px var(--nb-blue-wash);
  outline: none;
}

html.theme-light .auth-field input:-webkit-autofill,
html.theme-light .auth-field input:-webkit-autofill:hover,
html.theme-light .auth-field input:-webkit-autofill:focus,
html.theme-light .auth-field input:-webkit-autofill:active,
html:not(.theme-light) .auth-field input:-webkit-autofill,
html:not(.theme-light) .auth-field input:-webkit-autofill:hover,
html:not(.theme-light) .auth-field input:-webkit-autofill:focus,
html:not(.theme-light) .auth-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--nb-paper-sunken) inset;
  -webkit-text-fill-color: var(--nb-ink);
  caret-color: var(--nb-ink);
}

html.theme-light .auth-field select option,
html:not(.theme-light) .auth-field select option {
  background: var(--nb-paper-raised);
  color: var(--nb-ink);
}

html.theme-light .auth-field-hint,
html.theme-light .date-label,
html:not(.theme-light) .auth-field-hint,
html:not(.theme-light) .date-label {
  color: var(--nb-ink-2);
}

html.theme-light .auth-page--login .auth-btn,
html.theme-light .auth-page--signup .auth-btn,
html.theme-light .pwd-form-panel .auth-btn,
html.theme-light .auth-btn,
html.theme-light .status-btn,
html:not(.theme-light) .auth-btn,
html:not(.theme-light) .status-btn {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  box-shadow: none;
  color: var(--nb-on-blue);
  text-shadow: none;
}

html.theme-light .auth-page--login .auth-btn:hover,
html.theme-light .auth-page--login .auth-btn:focus-visible,
html.theme-light .auth-page--signup .auth-btn:hover,
html.theme-light .auth-page--signup .auth-btn:focus-visible,
html.theme-light .pwd-form-panel .auth-btn:hover,
html.theme-light .pwd-form-panel .auth-btn:focus-visible,
html.theme-light .auth-btn:hover,
html.theme-light .auth-btn:focus-visible,
html.theme-light .status-btn:hover,
html.theme-light .status-btn:focus-visible,
html:not(.theme-light) .auth-btn:hover,
html:not(.theme-light) .auth-btn:focus-visible,
html:not(.theme-light) .status-btn:hover,
html:not(.theme-light) .status-btn:focus-visible {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  box-shadow: var(--nb-shadow-1);
  color: var(--nb-on-blue);
}

html.theme-light .auth-btn:focus-visible,
html.theme-light .status-btn:focus-visible,
html:not(.theme-light) .auth-btn:focus-visible,
html:not(.theme-light) .status-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

html.theme-light .auth-links,
html.theme-light .auth-links span,
html.theme-light .pwd-footer-links,
html.theme-light .pwd-footer-sep,
html:not(.theme-light) .auth-links,
html:not(.theme-light) .auth-links span,
html:not(.theme-light) .pwd-footer-links,
html:not(.theme-light) .pwd-footer-sep {
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}

html.theme-light .auth-links a,
html.theme-light .pwd-footer-link,
html.theme-light .status-body--sm a,
html:not(.theme-light) .auth-links a,
html:not(.theme-light) .pwd-footer-link,
html:not(.theme-light) .status-body--sm a {
  color: var(--nb-blue);
  text-shadow: none;
}

html.theme-light .auth-links a:hover,
html.theme-light .auth-links a:focus-visible,
html.theme-light .pwd-footer-link:hover,
html.theme-light .pwd-footer-link:focus-visible,
html.theme-light .status-body--sm a:hover,
html.theme-light .status-body--sm a:focus-visible,
html:not(.theme-light) .auth-links a:hover,
html:not(.theme-light) .auth-links a:focus-visible,
html:not(.theme-light) .pwd-footer-link:hover,
html:not(.theme-light) .pwd-footer-link:focus-visible,
html:not(.theme-light) .status-body--sm a:hover,
html:not(.theme-light) .status-body--sm a:focus-visible {
  color: var(--nb-blue-strong);
  text-decoration-color: currentColor;
  text-shadow: none;
}

html.theme-light .auth-links a:focus-visible,
html.theme-light .pwd-footer-link:focus-visible,
html.theme-light .status-body--sm a:focus-visible,
html:not(.theme-light) .auth-links a:focus-visible,
html:not(.theme-light) .pwd-footer-link:focus-visible,
html:not(.theme-light) .status-body--sm a:focus-visible {
  border-radius: var(--nb-r-sm);
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
  box-shadow: none;
}

html.theme-light .auth-error,
html.theme-light .pwd-form-error,
html.theme-light .auth-change-msg--error,
html.theme-light .auth-change-msg--warning,
html:not(.theme-light) .auth-error,
html:not(.theme-light) .pwd-form-error,
html:not(.theme-light) .auth-change-msg--error,
html:not(.theme-light) .auth-change-msg--warning {
  color: var(--nb-error);
}

html.theme-light .auth-error--block,
html.theme-light .pwd-form-error,
html.theme-light .auth-change-msg--error,
html.theme-light .auth-change-msg--warning,
html:not(.theme-light) .auth-error--block,
html:not(.theme-light) .pwd-form-error,
html:not(.theme-light) .auth-change-msg--error,
html:not(.theme-light) .auth-change-msg--warning {
  /* 6%, as on the password and email pages: at 12% the dark wash held the
     --nb-error text at 4.38:1, under AA (mobile audit 2026-09-25) */
  background: color-mix(in srgb, var(--nb-error) 6%, transparent);
  border-color: color-mix(in srgb, var(--nb-error) 30%, transparent);
}

html.theme-light .auth-change-msg--success,
html:not(.theme-light) .auth-change-msg--success {
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}

html.theme-light .auth-change-msg--info,
html:not(.theme-light) .auth-change-msg--info {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-ink);
}

html.theme-light .pwd-done-icon,
html.theme-light .status-icon,
html:not(.theme-light) .pwd-done-icon,
html:not(.theme-light) .status-icon {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  box-shadow: none;
  color: var(--nb-blue);
}

/* ============================================================
   GROUP C - errors + legal (404, 500, privacy, terms).
   Page bg drops the banned gold radial glow for notebook paper +
   dotted grid; card/text/links re-point to nb tokens. Buttons
   (.auth-btn) and .pwd-footer-link already skinned above.
   ============================================================ */
html.theme-light .error-page,
html.theme-light .legal-page,
html:not(.theme-light) .error-page,
html:not(.theme-light) .legal-page {
  background-color: var(--nb-paper);
  background-image: radial-gradient(var(--nb-grid-dot) 1px, transparent 1px);
  background-size: var(--nb-grid-size) var(--nb-grid-size);
  color: var(--nb-ink);
}

html.theme-light .error-card,
html.theme-light .legal-card,
html:not(.theme-light) .error-card,
html:not(.theme-light) .legal-card {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}

html.theme-light .error-eyebrow,
html.theme-light .legal-eyebrow,
html:not(.theme-light) .error-eyebrow,
html:not(.theme-light) .legal-eyebrow {
  color: var(--nb-blue);
}

html.theme-light .error-title,
html.theme-light .legal-title,
html.theme-light .legal-section h2,
html:not(.theme-light) .error-title,
html:not(.theme-light) .legal-title,
html:not(.theme-light) .legal-section h2 {
  color: var(--nb-ink);
}

html.theme-light .error-lede,
html.theme-light .legal-lede,
html.theme-light .legal-section p,
html:not(.theme-light) .error-lede,
html:not(.theme-light) .legal-lede,
html:not(.theme-light) .legal-section p {
  color: var(--nb-ink);
}

html.theme-light .legal-section + .legal-section,
html:not(.theme-light) .legal-section + .legal-section {
  border-top-color: var(--nb-border);
}

html.theme-light .legal-section a,
html:not(.theme-light) .legal-section a {
  color: var(--nb-blue);
}

html.theme-light .legal-section a:hover,
html.theme-light .legal-section a:focus-visible,
html:not(.theme-light) .legal-section a:hover,
html:not(.theme-light) .legal-section a:focus-visible {
  color: var(--nb-blue-strong);
}

/* The account pages' footer links (the password pages):
   each link keeps its words on one line, and the dot lines up with the
   words, not with the middle of the link's 44px box (styles.css gives each
   link a 44px height as a flex item, words at its top). Where the pair does
   not fit one line (a 320px phone, the 246px panel on an 820px tablet),
   the links stack, centred, one line each, with no dot between them. */
html .pwd-page .pwd-footer-links {
  container-type: inline-size;
  flex-wrap: wrap;
  row-gap: 0;
  align-items: flex-start;
}

html .pwd-page .pwd-footer-link {
  white-space: nowrap;
}

@container (max-width: 259px) {
  html .pwd-page .pwd-footer-sep {
    display: none;
  }

  html .pwd-page .pwd-footer-link {
    flex-basis: 100%;
    text-align: center;
  }
}