/* The Premium dialog in the lit look (owner, 2026-10-21, of the paywall mock-up: "I like it ... make it that theme
   and style but don't change the features"). nb_premium_gate.html loads this after nb-lit.css.

   The dialog is a small copy of the homepage's Premium card and the page's one lit object: one centred column (the
   topic it came from, the chapter's headline, the line on the whole notebook, the period switch, the price big and
   light with its tax note, Get Premium and Not now side by side, what Premium opens as one quiet line, the log-in
   line), on a raised sheet that tilts toward the pointer and catches the light. The page behind steps back under a
   soft veil. Everything else is the login gate's dialog (notebook-components.css section 18): the top layer, Esc,
   the backdrop click, the phone's sheet from the bottom edge, the plain card in the page without script.

   Every rule names dialog.nb-gate--premium. Since the one dialog (owner, 2026-10-23: "standardize this new design for all
   popups") its sheet, veil, type and buttons are every pop-up's, drawn by nb-dialog.css one step stronger; what only this
   dialog has (the period switch, the price, the quiet line, the lit tilt) is this file's own. Tokens only. */

/* the page behind steps back: a soft veil and a little blur */
dialog.nb-gate--premium::backdrop {
  background: color-mix(in srgb, black 58%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
html.theme-light dialog.nb-gate--premium::backdrop {
  background: color-mix(in srgb, var(--nb-ink) 26%, transparent);
}

dialog.nb-gate--premium:modal {
  width: min(100%, 37rem);
}
dialog.nb-gate--premium:not(:modal) {
  max-width: 37rem;
}

/* one lit sheet, one column (the two pages, the dotted paper and the login sheet's measured height are gone) */
dialog.nb-gate--premium .nb-gate-card {
  display: block;
  min-height: 0;
  padding: var(--nb-s7) clamp(20px, 4vw, 44px) var(--nb-s6);
  text-align: center;
  background-color: var(--nb-paper-raised);
  background-image: none;
  border-radius: var(--nb-lit-r);
  box-shadow: var(--nb-lit-edge), var(--nb-lit-shadow);
}
/* the dialog's own arrival transition, and the lit object's tilt, both kept */
dialog.nb-gate--premium[open] .nb-gate-card.nb-lit {
  transition:
    opacity var(--nb-dur-2) var(--nb-ease),
    transform 700ms var(--nb-ease);
}
dialog.nb-gate--premium[open] .nb-gate-card.nb-lit.is-lit-tracking {
  transition: opacity var(--nb-dur-2) var(--nb-ease), transform 120ms linear;
}
dialog.nb-gate--premium .nb-gate-close {
  top: var(--nb-s3);
  right: var(--nb-s3);
  color: var(--nb-soft);
}

dialog.nb-gate--premium .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);
}
dialog.nb-gate--premium .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;
}
dialog.nb-gate--premium .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;
}

dialog.nb-gate--premium .nb-gate-switch {
  margin-top: var(--nb-s6);
}
/* without script there is no thumb to slide: the chosen period is a lifted segment of its own */
dialog.nb-gate--premium .nb-gate-switch:not(:has(.nb-switch-thumb)) > button.is-on {
  background: var(--nb-paper);
}

dialog.nb-gate--premium .nb-gate-price {
  margin-top: var(--nb-s5);
}
dialog.nb-gate--premium .nb-gate-price p:first-child {
  margin: 0;
}
dialog.nb-gate--premium .nb-price-fig {
  font-size: clamp(64px, 8vw, 84px);
}
/* "/ month" beside the figure, and under it a small remark of what is charged and how often (owner, 2026-10-22:
   "$8 / month", "$96 billed yearly"; the same as the homepage card and /pricing/) */
dialog.nb-gate--premium .nb-price-unit {
  margin-left: var(--nb-s2);
  font-size: var(--nb-text-xl);
}
dialog.nb-gate--premium .nb-price-per {
  margin-top: var(--nb-s3);
  font-size: var(--nb-text-base);
}
dialog.nb-gate--premium .nb-price-tax {
  margin-top: var(--nb-s1);
}

/* Get Premium and Not now as a pair */
dialog.nb-gate--premium .nb-gate-actions {
  display: flex;
  justify-content: center;
  gap: var(--nb-s3);
  margin-top: var(--nb-s6);
}
dialog.nb-gate--premium .nb-gate-action {
  width: auto;
  min-height: 54px;
  border-radius: var(--nb-r-lg);
  font: 600 var(--nb-text-md)/1 var(--nb-sans);
}
dialog.nb-gate--premium .nb-gate-action.nb-btn--primary {
  min-width: 13.75rem;
  padding-inline: var(--nb-s6);
}
dialog.nb-gate--premium .nb-gate-action.nb-btn--quiet {
  padding-inline: var(--nb-s6);
  border: 1px solid var(--nb-border);
  background: transparent;
  color: var(--nb-ink);
}
@media (hover: hover) {
  dialog.nb-gate--premium .nb-gate-action.nb-btn--quiet:hover {
    border-color: var(--nb-border-strong);
    background: transparent;
  }
}

/* the card is narrow, so the quiet line falls into three: one point to a line, no separators left hanging */
dialog.nb-gate--premium .nb-gate-inc {
  margin-top: var(--nb-s5);
  font-size: var(--nb-text-sm);
  line-height: 1.7;
  color: var(--nb-soft);
}
dialog.nb-gate--premium .nb-gate-inc span {
  display: block;
}
dialog.nb-gate--premium .nb-gate-inc i {
  display: none;
}
dialog.nb-gate--premium .nb-gate-foot {
  margin-top: var(--nb-s3);
  font: 400 var(--nb-text-sm)/1.5 var(--nb-sans);
}

/* a phone: the same sheet from the bottom edge, its top corners rounded, the two buttons stacked */
@media (max-width: 860px) {
  dialog.nb-gate--premium:modal .nb-gate-card {
    border-radius: var(--nb-lit-r) var(--nb-lit-r) 0 0;
    padding-bottom: calc(var(--nb-s6) + env(safe-area-inset-bottom));
  }
}
@media (max-width: 640px) {
  dialog.nb-gate--premium .nb-gate-card {
    padding-inline: var(--nb-s4);
  }
  dialog.nb-gate--premium .nb-gate-actions {
    flex-direction: column;
  }
  dialog.nb-gate--premium .nb-gate-action,
  dialog.nb-gate--premium .nb-gate-action.nb-btn--primary {
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.nb-gate--premium[open] .nb-gate-card.nb-lit { transition: none; }
}