/* ExamStudyAid: one button, sitewide (owner, 2026-10-23, of the profile's and the billing demo's buttons: "I love what you
   do to buttons ... before it was with outline and boxy but this new apple one is nice, i want you to audit website and do
   the same for all btns").

   THE RULE. A button that is not the page's one solid action is TINTED, the way Apple's sheets draw one: a soft wash of its
   colour, its words in that colour, no edge, a rounded rectangle (--nb-r-md), and under the pointer a deeper wash, never a
   lift or a shadow. Three tints, each meaning one thing, as the site's colours already do:
     · blue   a secondary action (Find your course, Ask tutor, Retry questions, Got it, Browse free chapters)
     · quiet  the ink's own wash, for what only moves you or backs out (Log In, Continue with Google, Not now, Back,
              Previous, the question pager's numbers)
     · red    what signs out or deletes
   The solid blue button stays as it is, and no button is square (4px) or a capsule (999px) any more.

   NOT BUTTONS, SO NOT HERE: a multiple-choice option (an answer, drawn as a choice), the chapter rail (its own design,
   owner 2026-10-08), a segmented switch, the bar's links, form fields, the theme button.

   Loaded by the three base templates after every page's own sheets (pages/base.html, pages/nb_base.html,
   onboarding/base_wizard.html), so it outranks a page's rule by order; where a page's rule is stronger, the rule here
   names the same context. Audited by scratchpad btn_audit.py on 2026-10-23: 683 buttons on 55 page states, 462 drawn with an
   outline, every one of them a component listed below or one of the exclusions above. Tokens only, both themes. */

:root {
  --nb-btn-blue: color-mix(in srgb, var(--nb-blue, #175BE8) 10%, transparent);
  --nb-btn-blue-on: color-mix(in srgb, var(--nb-blue, #175BE8) 16%, transparent);
  --nb-btn-quiet: color-mix(in srgb, var(--nb-ink, #111C34) 7%, transparent);
  --nb-btn-quiet-on: color-mix(in srgb, var(--nb-ink, #111C34) 11%, transparent);
  --nb-btn-red: color-mix(in srgb, var(--nb-error, #9B3028) 10%, transparent);
  --nb-btn-red-on: color-mix(in srgb, var(--nb-error, #9B3028) 16%, transparent);
}

/* ── Blue: a secondary action ── */
html body :is(
  .hp-btn--ghost,
  .nb-btn--secondary,
  .nb-mcq-retry-btn,
  .bm-page .bm-btn--ghost,
  .nb-pricing-active-btn--ghost,
  .pp-action:not(.pp-action--primary),
  .cs-page a.cs-btn:not(.cs-btn--primary),
  .sr-tutor-link
),
html body #nb-dm :is(.nb-min-btn--secondary, .ovx-got, .nb-dm-u-actions > a.nb-min-link) {
  border-color: transparent;
  border-radius: var(--nb-r-md, 8px);
  background: var(--nb-btn-blue);
  box-shadow: none;
  color: var(--nb-blue, #175BE8);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  html body :is(
    .hp-btn--ghost,
    .nb-btn--secondary,
    .nb-mcq-retry-btn,
    .bm-page .bm-btn--ghost,
    .nb-pricing-active-btn--ghost,
    .pp-action:not(.pp-action--primary),
    .cs-page a.cs-btn:not(.cs-btn--primary),
    .sr-tutor-link
  ):hover:not(:disabled, [aria-disabled="true"], [data-ui-disabled="true"]),
  html body #nb-dm :is(.nb-min-btn--secondary, .ovx-got, .nb-dm-u-actions > a.nb-min-link):hover:not(:disabled, [data-ui-disabled="true"]),
  html body #nb-dm .nb-dm-unit:has(.nb-dm-next) .nb-dm-u-actions > a.nb-min-link:hover {
    border-color: transparent;
    background: var(--nb-btn-blue-on);
    box-shadow: none;
    color: var(--nb-blue-strong, #0B43C7);
    transform: none;
  }
}
html body :is(.hp-btn--ghost, .nb-btn--secondary, .nb-mcq-retry-btn, .bm-page .bm-btn--ghost, .nb-pricing-active-btn--ghost, .sr-tutor-link):active,
html body #nb-dm :is(.nb-min-btn--secondary, .ovx-got, .nb-dm-u-actions > a.nb-min-link):active {
  border-color: transparent;
  background: var(--nb-btn-blue-on);
  box-shadow: none;
  color: var(--nb-blue-strong, #0B43C7);
}

/* ── Quiet: what only moves you or backs out ── */
html body :is(
  .account-btn,
  .google-btn,
  .asu-page .asu-google,
  .nb-gate .nb-gate-google,
  .nb-gate-action.nb-btn--quiet,
  .account-popup-action--ghost,
  .nb-account-action--secondary,
  .ob-body .lp-cta-ghost.ob-back,
  .cap-btn--secondary,
  .qg-pager .qg-pager-btn,
  .nb-qg-practice > .qg-pager .qg-pager-btn
) {
  border-color: transparent;
  border-radius: var(--nb-r-md, 8px);
  background: var(--nb-btn-quiet);
  box-shadow: none;
  color: var(--nb-ink, #111C34);
}
@media (hover: hover) {
  html body :is(
    .account-btn,
    .google-btn,
    .asu-page .asu-google,
    .nb-gate .nb-gate-google,
    .nb-gate-action.nb-btn--quiet,
    .account-popup-action--ghost,
    .nb-account-action--secondary,
    .ob-body .lp-cta-ghost.ob-back,
    .cap-btn--secondary,
    .qg-pager .qg-pager-btn,
    .nb-qg-practice > .qg-pager .qg-pager-btn
  ):hover:not(:disabled, [aria-disabled="true"], [data-ui-disabled="true"]) {
    border-color: transparent;
    background: var(--nb-btn-quiet-on);
    box-shadow: none;
    color: var(--nb-ink, #111C34);
    transform: none;
  }
}
/* the sign-in pop-up's Google button: its own rule, because an id inside the list above would lend the whole list its weight */
html body #auth-modal .google-btn { border-color: transparent; background: var(--nb-btn-quiet); box-shadow: none; color: var(--nb-ink, #111C34); }
@media (hover: hover) {
  html body #auth-modal .google-btn:hover { border-color: transparent; background: var(--nb-btn-quiet-on); box-shadow: none; transform: none; }
}
/* the question pager's numbers: quiet at rest; this question stays the solid blue it was; a marked one says how it went in
   its own wash, green for full marks, red for anything less (the words those numbers had as edges) */
html body :is(.qg-pager, .nb-qg-practice > .qg-pager) .qg-pager-num:not(.is-current) {
  border-color: transparent;
  border-radius: var(--nb-r-md, 8px);
  background: var(--nb-btn-quiet);
  box-shadow: none;
  color: var(--nb-ink, #111C34);
}
html body :is(.qg-pager, .nb-qg-practice > .qg-pager) .qg-pager-num[data-grade-state="full"]:not(.is-current) {
  background: color-mix(in srgb, var(--nb-success, #176B57) 13%, transparent);
  color: var(--nb-success, #176B57);
}
html body :is(.qg-pager, .nb-qg-practice > .qg-pager) .qg-pager-num:is([data-grade-state="partial"], [data-grade-state="zero"]):not(.is-current) {
  background: var(--nb-btn-red);
  color: var(--nb-error, #9B3028);
}
html body :is(.qg-pager, .nb-qg-practice > .qg-pager) .qg-pager-num.is-current { border-color: transparent; border-radius: var(--nb-r-md, 8px); }
@media (hover: hover) {
  html body :is(.qg-pager, .nb-qg-practice > .qg-pager) .qg-pager-num:not(.is-current):not([data-grade-state="full"], [data-grade-state="partial"], [data-grade-state="zero"]):hover {
    border-color: transparent;
    background: var(--nb-btn-quiet-on);
    box-shadow: none;
    transform: none;
  }
}

/* the question pager (tq-desk.css and the plain one): Previous, and either end of the set, quiet; Next question the blue
   action */
html body .nb-qg-practice > .qg-pager .qg-pager-btn:is(.qg-pager-prev, :disabled) {
  border-color: transparent;
  background: var(--nb-btn-quiet);
  color: var(--nb-ink, #111C34);
}
html body .qg-pager .qg-pager-btn.qg-pager-next:not(:disabled),
html body .nb-qg-practice > .qg-pager .qg-pager-btn.qg-pager-next:not(:disabled) {
  border-color: transparent;
  background: var(--nb-btn-blue);
  color: var(--nb-blue, #175BE8);
}
@media (hover: hover) {
  html body .nb-qg-practice > .qg-pager .qg-pager-btn.qg-pager-prev:hover:not(:disabled) { border-color: transparent; background: var(--nb-btn-quiet-on); color: var(--nb-ink, #111C34); }
  html body .qg-pager .qg-pager-btn.qg-pager-next:hover:not(:disabled),
  html body .nb-qg-practice > .qg-pager .qg-pager-btn.qg-pager-next:hover:not(:disabled) { border-color: transparent; background: var(--nb-btn-blue-on); color: var(--nb-blue-strong, #0B43C7); }
}

/* ── Red: what signs out or deletes ── */
html body :is(.nb-account-action--danger, .account-logout-form .account-popup-action, .nb-btn--danger) {
  border-color: transparent;
  border-radius: var(--nb-r-md, 8px);
  background: var(--nb-btn-red);
  box-shadow: none;
  color: var(--nb-error, #9B3028);
}
@media (hover: hover) {
  html body :is(.nb-account-action--danger, .account-logout-form .account-popup-action, .nb-btn--danger):hover {
    border-color: transparent;
    background: var(--nb-btn-red-on);
    box-shadow: none;
    transform: none;
  }
}

/* ── The two side tabs on a notes page (owner, 2026-10-23: "for the chapter tab make it blue tint but for tutor tab
   apple-style it") ──
   Chapters, folded to the left edge while the tutor is open, is the blue tint of a second action, its words in the blue;
   the tutor's tab on the right is a cream that reads the same by day as by night: a soft warm wash on the dark desk, the
   sheet's own lighter cream on the light desk, where that wash read as tan (owner, same day: "make the your tutor color
   in dark mode the same color for light too"), its words in the tutor's ink. Both flat: no edge, no
   shadow, no grain, the free corner rounded (--nb-r-lg). Their places, sizes and motion are the page's own. */
html.nb-tutor-open body .nb-page-layout:has(.nb-tutor-margin) .nb-rail-fold {
  border: 0;
  border-radius: 0 0 var(--nb-r-lg, 12px) 0;
  background: color-mix(in srgb, var(--nb-blue, #175BE8) 10%, var(--nb-paper, #F1F2EF));
  box-shadow: none;
  color: var(--nb-blue, #175BE8);
}
/* the word down the spine at the body size, in the deeper blue, so it reads cleanly turned on its side (at 13px in the
   lighter blue it looked garbled, owner 2026-10-23) */
html.nb-tutor-open body .nb-page-layout:has(.nb-tutor-margin) .nb-rail-fold .nb-rail-fold-lbl { font-size: var(--nb-text-base); font-weight: 600; letter-spacing: .03em; color: var(--nb-blue-strong, #0B43C7); }
@media (hover: hover) {
  html.nb-tutor-open body .nb-page-layout:has(.nb-tutor-margin) .nb-rail-fold:hover {
    background: color-mix(in srgb, var(--nb-blue, #175BE8) 16%, var(--nb-paper, #F1F2EF));
    color: var(--nb-blue-strong, #0B43C7);
  }
}
/* The words down both tabs are smoothed in grey, as every turned word is (owner, 2026-10-23, of "Ask your tutor" and "Chapters":
   "they arte so low quality, please fix it make it look like normal text"). A Windows browser smooths a line of text with coloured
   sub-pixels made for upright text; turned on its side the fringes run the wrong way, and the words came out jagged with orange and
   blue edges (measured in a desktop Chromium at 125%: about 300 fringed pixels in "Ask your tutor", none after). On a layer of
   their own the browser smooths them in grey and they read like the rest of the page's words. */
html body :is(.nb-tutor-tab-lbl, .nb-rail-fold-lbl) { will-change: transform; }
html body .nb-tutor-tab,
html.theme-light body .nb-tutor-tab {
  border: 0;
  border-radius: 0 0 0 var(--nb-r-lg, 12px);
  background-color: color-mix(in srgb, var(--nb-tutor-accent, #7C4E20) 14%, var(--nb-tutor-paper, #F4F1EA));
  background-image: none;
  box-shadow: none;
}
html.theme-light body .nb-tutor-tab { background-color: var(--nb-tutor-paper, #F4F1EA); }
@media (hover: hover) {
  html body .nb-tutor-tab:hover { background-color: color-mix(in srgb, var(--nb-tutor-accent, #7C4E20) 20%, var(--nb-tutor-paper, #F4F1EA)); }
  html.theme-light body .nb-tutor-tab:hover { background-color: color-mix(in srgb, var(--nb-tutor-accent, #7C4E20) 7%, var(--nb-tutor-paper, #F4F1EA)); }
}

/* ── No square buttons and no capsules: every button a rounded rectangle ── */
html body :is(.fc-btn, .auth-btn, .google-btn, a.nb-btn, button.nb-btn, .prf-btn, .sr-tutor-link),
html body #auth-modal :is(.auth-btn, .google-btn) { border-radius: var(--nb-r-md, 8px); }
/* the forgot-password page drew its one button and its field as capsules (its 2026-10-01 mockup, before "no pills",
   owner 2026-10-07): both rounded rectangles now, so they still match */
html body .prf-page--allauth :is(.prf-btn, .prf-field input) { border-radius: var(--nb-r-md, 8px); }