/* ExamStudyAid: one dialog, sitewide (owner, 2026-10-23, of the "Sign in to answer" dialog: "can you standardize this new
   design for all popups").

   THE DESIGN is the answer dialog as a student without Premium met it that day (noteviewer/_practice_gate.html in the
   Premium dialog's lit look, nb-premium-gate.css): one centred column on a raised sheet, the page behind stepped back under
   a dark veil with a little blur. From the top, each part only where the dialog has it:
     · the close button, 44px, quiet, in the corner
     · a small picture that says what the dialog is about (gate-shelf.css draws the shelves and books)
     · the context line, small and soft ("1.1 Characteristics of living organisms")
     · the headline, big and plain (IBM Plex Sans 600, 26 to 32px)
     · up to three ticked lines, one block in the middle that reads from the left
     · a hairline, then the ask: its title (Sora 600, 24px), one soft sentence, and the buttons side by side, the one
       solid blue action first and the quiet way out beside it, both 54px tall with the same 12px corners
   On a phone the same sheet rises from the bottom edge and the buttons stack. A dialog with nothing to pitch (a "Retry
   these questions?", a "Cancel your subscription?") is the ask alone: the context line, the headline, its sentence, a tick
   for what is kept, the buttons.

   WHAT CHANGED FROM THAT DIALOG, by the site's own standing rules (apple style, DESIGN.md): its sheet loses the 1px edge
   that survived the no-outline rule and floats on the lit object's paper shadow instead, and its quiet button takes the
   primary's 12px corners (it kept the sitewide 8px, so the pair did not match).

   HOW: a dialog opts in with the class nb-dialog beside its own, and draws its parts with the gate family's names
   (.nb-gate-card, .nb-gate-close, .nb-gate-value, .nb-gate-where, .nb-gate-headline, .nb-gate-list, .nb-gate-auth,
   .nb-gate-title, .nb-gate-lede, .nb-gate-actions, .nb-gate-foot). Every rule here names html body dialog.nb-dialog, so it
   outranks the older gate sheets it sits over (notebook-components.css sections 18 and 19, gate-shelf.css, practice-gate.css,
   nb-premium-gate.css) without touching a page that has no such dialog. The one popup that is not a <dialog>, the navbar's
   sign-in window (#auth-modal, pages/includes/site_navbar.html and navbar.js), takes the same sheet, veil, close button,
   headline and buttons at the foot of this file.

   Loaded by the three base templates after nb-buttons.css, nb-fields.css and nb-boxes.css (pages/base.html,
   pages/nb_base.html, onboarding/base_wizard.html). Tokens only, both themes; reduced motion keeps everything still. */

/* ── The dialog, its veil, its sheet ── */
html body dialog.nb-dialog {
  --nb-dlg-r: 24px;
  --nb-dlg-shadow: 0 1px 2px color-mix(in srgb, black 40%, transparent), 0 40px 80px -36px color-mix(in srgb, black 90%, transparent);
  --nb-dlg-edge: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  container: nb-gate / inline-size;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nb-ink);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-base);
  line-height: 1.5;
}
html.theme-light body dialog.nb-dialog {
  --nb-dlg-shadow: 0 1px 2px color-mix(in srgb, var(--nb-ink) 4%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--nb-ink) 28%, transparent);
  --nb-dlg-edge: inset 0 0 0 0 transparent;
}
html body dialog.nb-dialog:focus {
  outline: none; /* focused by script so a reader starts at its top; not a control */
}
html body dialog.nb-dialog:modal {
  width: min(100%, 37rem);
  max-width: 100%;
  max-height: 100dvh;
  margin: auto;
  padding: var(--nb-s6) var(--nb-s5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body dialog.nb-dialog::backdrop {
  background: color-mix(in srgb, black 58%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity var(--nb-dur-2) var(--nb-ease);
}
html.theme-light body dialog.nb-dialog::backdrop {
  background: color-mix(in srgb, var(--nb-ink) 26%, transparent);
}
html:has(dialog.nb-dialog:modal) {
  overflow: hidden;
  scrollbar-gutter: stable;
}
/* without script (the login dialog's ?next= arrival): the same sheet as a card in the page */
html body dialog.nb-dialog:not(:modal) {
  position: static;
  width: 100%;
  max-width: 37rem;
  margin: 0 auto var(--nb-s7);
}
html body dialog.nb-dialog .nb-gate-card {
  position: relative;
  display: block;
  min-height: 0;
  padding: var(--nb-s7) clamp(20px, 4vw, 44px) var(--nb-s6);
  overflow: hidden;
  text-align: center;
  background: var(--nb-paper-raised);
  border: 0;
  border-radius: var(--nb-dlg-r);
  box-shadow: var(--nb-dlg-edge), var(--nb-dlg-shadow);
}
html body dialog.nb-dialog[open] .nb-gate-card {
  transition:
    opacity var(--nb-dur-2) var(--nb-ease),
    transform var(--nb-dur-3) var(--nb-ease);
}
@starting-style {
  html body dialog.nb-dialog[open] .nb-gate-card {
    opacity: 0;
    transform: translateY(var(--nb-s3)) scale(0.985);
  }
  html body dialog.nb-dialog[open]::backdrop {
    opacity: 0;
  }
}
/* leaving, for a dialog whose script waits for it (the dashboard's first visit, the subject cap) */
html body dialog.nb-dialog:is(.is-leaving, .is-out) .nb-gate-card {
  opacity: 0;
  transform: translateY(var(--nb-s2)) scale(0.985);
  transition: opacity 200ms var(--nb-ease), transform 200ms var(--nb-ease);
}
html body dialog.nb-dialog:is(.is-leaving, .is-out)::backdrop {
  opacity: 0;
  transition: opacity 200ms var(--nb-ease);
}

/* ── The close button ── */
html body dialog.nb-dialog .nb-gate-close {
  position: absolute;
  top: var(--nb-s3);
  right: var(--nb-s3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--nb-r-md);
  background: transparent;
  box-shadow: none;
  color: var(--nb-soft);
  cursor: pointer;
  transform: none;
  transition: background-color var(--nb-dur-1) var(--nb-ease), color var(--nb-dur-1) var(--nb-ease);
}
@media (hover: hover) {
  html body dialog.nb-dialog .nb-gate-close:hover {
    background: var(--nb-btn-quiet);
    color: var(--nb-ink);
    transform: none;
  }
}
html body dialog.nb-dialog .nb-gate-close[hidden] {
  display: none;
}

/* ── The pitch: picture, context line, headline, ticks ── */
html body dialog.nb-dialog .nb-gate-value {
  display: flex;
  flex-direction: column;
  padding: var(--nb-s8) var(--nb-s7);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--nb-border); /* the hairline before the ask */
}
html body dialog.nb-dialog .nb-gate-pitch {
  margin-block: auto;
  padding: 0;
}
html body dialog.nb-dialog .nb-gate-illus {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0 0 var(--nb-s5);
}
html body dialog.nb-dialog .nb-gate-where {
  margin: 0;
  padding-inline: var(--nb-s7); /* clears the close button */
  font: 500 var(--nb-text-sm)/1.4 var(--nb-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--nb-soft);
  text-wrap: balance;
}
html body dialog.nb-dialog .nb-gate-headline {
  margin: var(--nb-s2) 0 0;
  font: 600 clamp(1.625rem, 3vw, 2rem)/1.15 var(--nb-sans);
  letter-spacing: -0.02em;
  color: var(--nb-ink);
  text-wrap: balance;
}
html body dialog.nb-dialog .nb-gate-headline:first-child {
  margin-top: 0;
  padding-inline: var(--nb-s7);
}
html body dialog.nb-dialog :is(.nb-gate-headline, .nb-gate-title) em {
  font-style: normal;
  color: var(--nb-blue);
}
html body dialog.nb-dialog .nb-gate-name {
  font-style: normal;
  color: var(--subject-text, var(--nb-blue));
}
html body dialog.nb-dialog .nb-gate-list {
  display: grid;
  gap: var(--nb-s3);
  width: fit-content;
  max-width: 100%;
  margin: var(--nb-s6) auto 0;
  padding: 0;
  list-style: none;
  text-align: start;
}
html body dialog.nb-dialog .nb-gate-item {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-s3);
  margin: 0;
  font: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  color: var(--nb-soft);
  text-wrap: pretty;
}
/* the tick: a small blue square, its stroke inked once as the sheet arrives, in reading order */
html body dialog.nb-dialog .nb-gate-item .nb-tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  overflow: visible;
}
html body dialog.nb-dialog .nb-gate-item .nb-tick-sq {
  fill: var(--nb-blue);
  stroke: none;
  opacity: 1;
  transform: none;
}
html body dialog.nb-dialog .nb-gate-item .nb-tick-path {
  fill: none;
  stroke: var(--nb-on-blue);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}
html body dialog.nb-dialog[open] .nb-gate-item .nb-tick-path {
  animation: nb-dialog-ink var(--nb-dur-3) var(--nb-ease) both;
}
html body dialog.nb-dialog[open] .nb-gate-item:nth-child(2) .nb-tick-path { animation-delay: 90ms; }
html body dialog.nb-dialog[open] .nb-gate-item:nth-child(3) .nb-tick-path { animation-delay: 180ms; }
html body dialog.nb-dialog[open] .nb-gate-item:nth-child(4) .nb-tick-path { animation-delay: 270ms; }
@keyframes nb-dialog-ink {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

/* ── The ask: title, sentence, buttons, a last line ── */
html body dialog.nb-dialog .nb-gate-auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nb-s8) var(--nb-s8) var(--nb-s7);
  background: none;
}
html body dialog.nb-dialog .nb-gate-title {
  margin: 0 0 var(--nb-s3);
  padding: 0;
  border: 0;
  font-family: var(--nb-display);
  font-size: var(--nb-text-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--nb-ink);
  text-wrap: balance;
}
html body dialog.nb-dialog .nb-gate-lede {
  max-width: 30em;
  margin: var(--nb-s3) auto 0;
  font: 400 var(--nb-text-md)/1.55 var(--nb-sans);
  color: var(--nb-soft);
  text-wrap: pretty;
}
html body dialog.nb-dialog .nb-gate-title + .nb-gate-lede {
  margin-top: var(--nb-s3);
}
html body dialog.nb-dialog .nb-gate-actions {
  display: flex;
  justify-content: center;
  gap: var(--nb-s3);
  margin: var(--nb-s6) 0 0;
}
/* whole here, so a page without the notebook's button sheet (the billing page, the sign-up guide) draws them the same */
html body dialog.nb-dialog .nb-gate-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-s2);
  width: auto;
  min-height: 54px;
  margin: 0;
  padding: 0 var(--nb-s6);
  border: 1px solid transparent;
  border-radius: var(--nb-r-lg);
  box-shadow: none;
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0; /* each keeps its words whole; a pair wider than the column spreads into the sheet's margin, centred */
  cursor: pointer;
  transform: none;
  transition: background-color var(--nb-dur-1) var(--nb-ease), color var(--nb-dur-1) var(--nb-ease);
}
html body dialog.nb-dialog .nb-gate-action[hidden] {
  display: none;
}
html body dialog.nb-dialog .nb-gate-action.nb-btn--primary {
  min-width: 13.75rem;
  border-color: transparent;
  background: var(--nb-blue);
  color: var(--nb-on-blue);
}
html body dialog.nb-dialog .nb-gate-action.nb-btn--danger {
  border-color: transparent;
  background: var(--nb-btn-red);
  color: var(--nb-error);
}
@media (hover: hover) {
  html body dialog.nb-dialog .nb-gate-action.nb-btn--primary:hover {
    background: var(--nb-blue-strong);
    color: var(--nb-on-blue);
  }
  html body dialog.nb-dialog .nb-gate-action.nb-btn--danger:hover {
    background: var(--nb-btn-red-on);
    color: var(--nb-error);
  }
}
html body dialog.nb-dialog .nb-gate-action.nb-btn--quiet {
  border-color: transparent;
  background: var(--nb-btn-quiet);
  color: var(--nb-ink);
}
@media (hover: hover) {
  html body dialog.nb-dialog .nb-gate-action.nb-btn--quiet:hover {
    border-color: transparent;
    background: var(--nb-btn-quiet-on);
    color: var(--nb-ink);
  }
}
html body dialog.nb-dialog .nb-gate-foot {
  margin: var(--nb-s3) 0 0;
  font: 400 var(--nb-text-sm)/1.5 var(--nb-sans);
  color: var(--nb-soft);
}
html body dialog.nb-dialog .nb-gate-foot a {
  font-weight: 600;
  color: var(--nb-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html body dialog.nb-dialog :is(a, button):focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

/* ── A sign-in inside the ask (the Resources page's login dialog): the same column, the form reading from the left, and
   a step less air above and below the pitch, so Log in is in view on a laptop ── */
html body dialog.nb-dialog:has(.nb-gate-form) .nb-gate-value {
  padding-block: var(--nb-s6);
}
html body dialog.nb-dialog:has(.nb-gate-form) .nb-gate-auth {
  padding-top: var(--nb-s6);
}
html body dialog.nb-dialog .nb-gate-auth > :is(.nb-gate-google, .nb-gate-or, .nb-gate-form) {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}
html body dialog.nb-dialog .nb-gate-auth > .nb-gate-title {
  margin-bottom: var(--nb-s5);
}
html body dialog.nb-dialog .nb-gate-google {
  min-height: 54px;
  border-radius: var(--nb-r-lg);
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
}
html body dialog.nb-dialog .nb-gate-or {
  margin-block: var(--nb-s5);
  color: var(--nb-soft);
}
html body dialog.nb-dialog .nb-gate-form {
  text-align: start;
}
html body dialog.nb-dialog .nb-gate-submit {
  min-height: 54px;
  margin-top: var(--nb-s2);
  border-radius: var(--nb-r-lg);
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
}

/* ── A narrow column: the pages' own margins ── */
@container nb-gate (max-width: 520px) {
  html body dialog.nb-dialog .nb-gate-value,
  html body dialog.nb-dialog .nb-gate-auth {
    padding: var(--nb-s6) var(--nb-s5);
  }
  html body dialog.nb-dialog .nb-gate-illus {
    height: 46px;
    margin-bottom: var(--nb-s4);
  }
}

/* ── A phone: the same sheet from the bottom edge, the buttons stacked ── */
@media (max-width: 860px) {
  html body dialog.nb-dialog:modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--nb-s6));
    margin: auto 0 0;
    padding: 0;
  }
  html body dialog.nb-dialog:modal .nb-gate-card {
    border-radius: var(--nb-dlg-r) var(--nb-dlg-r) 0 0;
    padding-bottom: calc(var(--nb-s6) + env(safe-area-inset-bottom));
  }
  @starting-style {
    html body dialog.nb-dialog[open] .nb-gate-card {
      transform: translateY(var(--nb-s6));
    }
  }
}
@media (min-width: 768px) and (max-width: 860px) {
  html body dialog.nb-dialog:modal {
    max-width: 40rem;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  html body dialog.nb-dialog {
    --nb-dlg-r: 20px;
  }
  html body dialog.nb-dialog .nb-gate-card {
    padding-inline: var(--nb-s4);
  }
  html body dialog.nb-dialog .nb-gate-actions {
    flex-direction: column;
  }
  html body dialog.nb-dialog .nb-gate-action,
  html body dialog.nb-dialog .nb-gate-action.nb-btn--primary {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body dialog.nb-dialog[open] .nb-gate-card,
  html body dialog.nb-dialog:is(.is-leaving, .is-out) .nb-gate-card {
    transform: none;
    transition: opacity 120ms linear;
  }
  html body dialog.nb-dialog .nb-gate-item .nb-tick-path {
    animation: none !important;
  }
}

/* ── The navbar's sign-in window (#auth-modal): the same veil, sheet, close button, headline and buttons ──
   It is a <div> over the page rather than a <dialog> (navbar.js opens it, traps the keys and takes a step of history on a
   phone), so it is named by its ids; each rule here restates a rule of chrome-navbar.css, notebook-auth.css or
   notebook-navchrome-skin.css one step stronger (its fields by both ids: notebook-auth.css draws them as a ruled line
   at html #auth-modal .auth-field input:not(:focus)). */
html body #auth-modal-overlay {
  padding: var(--nb-s6) var(--nb-s5);
  background: color-mix(in srgb, black 58%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
html.theme-light body #auth-modal-overlay {
  background: color-mix(in srgb, var(--nb-ink) 26%, transparent);
}
html body #auth-modal {
  --nb-dlg-r: 24px;
  --nb-dlg-shadow: 0 1px 2px color-mix(in srgb, black 40%, transparent), 0 40px 80px -36px color-mix(in srgb, black 90%, transparent);
  --nb-dlg-edge: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  width: 100%;
  max-width: 37rem;
  max-height: calc(100dvh - var(--nb-s7));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--nb-s9) clamp(20px, 8vw, 84px) var(--nb-s8);
  background: var(--nb-paper-raised);
  border: 0;
  border-radius: var(--nb-dlg-r);
  box-shadow: var(--nb-dlg-edge), var(--nb-dlg-shadow);
  text-align: center;
}
html.theme-light body #auth-modal {
  --nb-dlg-shadow: 0 1px 2px color-mix(in srgb, var(--nb-ink) 4%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--nb-ink) 28%, transparent);
  --nb-dlg-edge: inset 0 0 0 0 transparent;
}
html body #auth-modal:has(#auth-modal-panel-signup:not(.auth-modal-panel--hidden)) {
  max-width: 37rem;
}
html body #auth-modal .auth-modal-close {
  top: var(--nb-s3);
  right: var(--nb-s3);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: transparent;
  box-shadow: none;
  color: var(--nb-soft);
}
@media (hover: hover) {
  html body #auth-modal .auth-modal-close:hover {
    border: 0;
    background: var(--nb-btn-quiet);
    color: var(--nb-ink);
  }
}
html body #auth-modal .auth-modal-title {
  margin: 0 0 var(--nb-s6);
  padding: 0 var(--nb-s7);
  font: 600 clamp(1.625rem, 3vw, 2rem)/1.15 var(--nb-sans);
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--nb-ink);
  text-wrap: balance;
}
html body #auth-modal .auth-modal-notice {
  color: var(--nb-soft);
  font-size: var(--nb-text-md);
  line-height: 1.55;
}
html body #auth-modal :is(form, .auth-divider, .google-btn) {
  text-align: start;
}
html body #auth-modal .google-btn,
html body #auth-modal .auth-btn {
  width: 100%;
  min-height: 54px;
  border-radius: var(--nb-r-lg);
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
  justify-content: center;
}
html body #auth-modal .auth-divider span {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--nb-text-sm);
  color: var(--nb-soft);
}
html body #auth-modal-overlay #auth-modal .auth-field input {
  min-height: 48px;
  padding: var(--nb-s3) var(--nb-s4);
  border: 1px solid transparent;
  border-radius: var(--nb-r-md);
  background-color: var(--nb-field);
  box-shadow: none;
}
@media (hover: hover) {
  html body #auth-modal-overlay #auth-modal .auth-field input:hover:not(:focus) {
    background-color: var(--nb-field-on);
  }
}
html body #auth-modal-overlay #auth-modal .auth-field input:focus {
  border-color: var(--nb-blue);
  box-shadow: inset 0 0 0 1px var(--nb-blue);
  outline: none;
}
html body #auth-modal .auth-modal-footer {
  justify-content: center;
  border-top: 1px solid var(--nb-border);
  color: var(--nb-soft);
}
@media (max-width: 860px) {
  html body #auth-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  html body #auth-modal {
    max-height: calc(100dvh - var(--nb-s6));
    padding: var(--nb-s9) var(--nb-s5) calc(var(--nb-s7) + env(safe-area-inset-bottom));
    border-radius: var(--nb-dlg-r) var(--nb-dlg-r) 0 0;
  }
}
@media (min-width: 768px) and (max-width: 860px) {
  html body #auth-modal { max-width: 40rem; }
}
@media (max-width: 640px) {
  html body #auth-modal { --nb-dlg-r: 20px; }
}