/* ExamStudyAid — the pricing revamp's shelf pass (owner, 2026-10-08: "revamp the pricing page for non premium and
   premium users? make it more interactive, cool ui, and pretty animations and cool user flow too").

   A layer over notebook-pricing.css, loaded after it on both /pricing/ and nowhere else, carrying the language the
   rest of the site took on this week: headings in Sora, the plan's three periods as one segmented control whose
   blue thumb slides to the one chosen (:has(), no script), the buyer's own shelf of every subject the plan opens
   (subject-hues.css), and the figure turning over when the period changes. The words, the prices, the tax note,
   the currency line and the checkout form are notebook-pricing.css's own and untouched; this file only draws.
   Every rule hangs off .nb-pricing. Tokens only, both themes; reduced motion keeps every picture still; no glow
   (no box-shadow in this layer at all), no pill (no --nb-r-pill, no 999px). */

/* ── Headings: the display face, Sora ─────────────────────────────────── */
.nb-pricing .nb-pricing-title,
.nb-pricing .nb-pricing-h2,
.nb-pricing .nb-pricing-active-title {
  font-family: var(--nb-display);
}

/* ── No capsules: the one button that was a pill becomes a rectangle ──── */
.nb-pricing .nb-pricing-cta {
  border-radius: var(--nb-r-md);
}

/* ── The price card's left half: dotted paper under the offer ─────────── */
.nb-pricing .nb-pricing-sheet {
  overflow: hidden;
}
.nb-pricing .nb-pricing-buy {
  background:
    radial-gradient(circle at 1px 1px, var(--nb-grid-dot) 1px, transparent 1.5px) 9px 9px / 18px 18px,
    transparent;
}

/* ── The periods: one segmented control, a blue thumb sliding to the one
      chosen. The tabs are still the radios; :has() alone places the thumb,
      so the choice reads right with no script, same as the card beneath
      it already follows the checked plan. ──────────────────────────────── */
.nb-pricing .nb-pricing-plans {
  position: relative;
  gap: 0;
}
.nb-pricing .pxs-seg-thumb {
  position: absolute;
  top: var(--nb-s1);
  bottom: var(--nb-s1);
  left: var(--nb-s1);
  z-index: 0;
  width: calc((100% - 2 * var(--nb-s1)) / 3);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-md);
  background: color-mix(in srgb, var(--nb-blue) 14%, var(--nb-paper-raised));
  translate: calc(var(--pxs-seg, 2) * 100%) 0;
  transition: translate var(--nb-dur-3) var(--nb-ease);
  pointer-events: none;
}
.nb-pricing .nb-pricing-plans:has(.nb-pricing-radio[value="monthly"]:checked) .pxs-seg-thumb { --pxs-seg: 0; }
.nb-pricing .nb-pricing-plans:has(.nb-pricing-radio[value="3_month"]:checked) .pxs-seg-thumb { --pxs-seg: 1; }
.nb-pricing .nb-pricing-plans:has(.nb-pricing-radio[value="yearly"]:checked) .pxs-seg-thumb { --pxs-seg: 2; }
/* the thumb carries the selection now, so a checked tab's own fill steps aside */
.nb-pricing .nb-pricing-plan {
  position: relative;
  z-index: 1;
  transition: transform var(--nb-dur-1) var(--nb-ease), background-color var(--nb-dur-2) var(--nb-ease), border-color var(--nb-dur-2) var(--nb-ease);
}
.nb-pricing .nb-pricing-plan:active {
  transform: scale(0.97);
}
.nb-pricing .nb-pricing-plan:has(.nb-pricing-radio:checked) {
  background: transparent;
  border-color: transparent;
}
.nb-pricing .nb-pricing-plan:has(.nb-pricing-radio:checked) :is(.nb-pricing-plan-name, .nb-pricing-plan-amount, .nb-pricing-plan-per) {
  color: var(--nb-blue);
}

/* ── The figure, turning over when the period changes ─────────────────── */
.nb-pricing .nb-pricing-buy {
  perspective: 800px;
}
@keyframes pxs-figure-turn {
  from { opacity: 0; transform: rotateX(-55deg) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.nb-pricing .nb-pricing-figure {
  transform-origin: 50% 0%;
  animation: pxs-figure-turn 480ms var(--nb-ease);
}

/* ── The buyer's shelf: a book for every subject the plan opens, in its
      own hue (subject-hues.css), set down one by one the first time the
      card is on screen (pricing.js's own reveal observer adds nb-is-visible
      to the plans section; the books ride the same signal). ────────────── */
.nb-pricing .pxs-shelf {
  display: grid;
  gap: var(--nb-s2);
  margin: var(--nb-s5) 0 var(--nb-s6);
}
.nb-pricing .pxs-shelf-books {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 52px;
  padding: 0 4px var(--nb-s2);
}
.nb-pricing .pxs-shelf-books::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  height: 4px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-ink) 18%, transparent);
}
.nb-pricing .pxs-shelf-books i {
  display: block;
  flex: 1 1 0;
  max-width: 13px;
  height: 78%;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 80%, var(--nb-paper));
  transform-origin: 50% 100%;
}
.nb-pricing .pxs-shelf-books i:nth-child(3n + 2) { height: 92%; }
.nb-pricing .pxs-shelf-books i:nth-child(3n) { height: 64%; }
.nb-pricing .pxs-shelf-books b {
  display: block;
  flex: none;
  width: 4px;
  height: 58%;
  margin-left: 4px;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: color-mix(in srgb, var(--nb-ink) 70%, transparent);
}
.nb-pricing .pxs-shelf-cap {
  font: 600 var(--nb-text-sm)/1.3 var(--nb-sans);
  color: var(--nb-soft);
}
@keyframes pxs-book {
  from { opacity: 0; translate: 0 -14px; rotate: -6deg; }
  60% { opacity: 1; }
}
.nb-anim .nb-pricing-plans-section:not(.nb-is-visible) .pxs-shelf-books i {
  opacity: 0;
}
.nb-anim .nb-pricing-plans-section.nb-is-visible .pxs-shelf-books i {
  animation: pxs-book 460ms var(--nb-ease) backwards;
  animation-delay: calc(var(--pxs-i, 0) * 30ms);
}

/* ── The second pass (owner, 2026-10-08: "more interactive, cool ui, and pretty animations and cool user flow"):
      the page answers the pointer everywhere it can. ────────────────────── */

/* A book under the pointer lifts and its neighbours lean away, as the profile's shelf and the subject cap overlay's do;
   the line under the shelf says the book's name while it is lifted (IGCSE Biology, SAT Math: pricing-shelf.js). */
.nb-pricing .pxs-shelf-books {
  height: 60px;
}
.nb-pricing .pxs-shelf-books i {
  position: relative;
  transition: translate var(--nb-dur-2) var(--nb-ease), rotate var(--nb-dur-2) var(--nb-ease), filter var(--nb-dur-2) var(--nb-ease);
}
.nb-pricing .pxs-shelf-books i:hover {
  translate: 0 -8px;
}
.nb-pricing .pxs-shelf-books i:hover + i {
  rotate: 5deg;
}
.nb-pricing .pxs-shelf-books i:has(+ i:hover) {
  rotate: -5deg;
}
.nb-pricing .pxs-shelf-books:hover i:not(:hover) {
  filter: saturate(0.55);
}
.nb-pricing .pxs-shelf-cap {
  transition: color var(--nb-dur-1) var(--nb-ease);
}
.nb-pricing .pxs-shelf-cap.is-naming {
  color: var(--nb-ink);
}

/* The Premium card's open shelf: the same books, under the card's head. */
.nb-pricing .pxs-shelf--open {
  margin: var(--nb-s6) 0 var(--nb-s2);
}
.nb-pricing .pxs-shelf--open .pxs-shelf-books {
  height: 72px;
  gap: 6px;
}
.nb-pricing .pxs-shelf--open .pxs-shelf-books i {
  max-width: 34px;
}

/* The periods answer the pointer: an unchosen one warms, and its price leans toward the thumb. */
.nb-pricing .nb-pricing-plan:not(:has(.nb-pricing-radio:checked)):hover {
  background: color-mix(in srgb, var(--nb-ink) 5%, transparent);
}

/* The buy button: an arrow that leans on, and a lighter band that sweeps across it under the pointer. */
.nb-pricing .nb-pricing-cta:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.nb-pricing .nb-pricing-cta:not(:disabled)::after {
  content: "\2192";
  font-weight: 600;
  transition: translate var(--nb-dur-2) var(--nb-ease);
}
.nb-pricing .nb-pricing-cta:not(:disabled)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--nb-on-blue) 16%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nb-pricing .nb-pricing-cta:not(:disabled):hover::before,
.nb-pricing .nb-pricing-cta:not(:disabled):focus-visible::before {
  transform: scaleX(1);
}
.nb-pricing .nb-pricing-cta:not(:disabled):hover::after,
.nb-pricing .nb-pricing-cta:not(:disabled):focus-visible::after {
  translate: 5px 0;
}
.nb-pricing .nb-pricing-cta:not(:disabled):active {
  scale: 0.985;
}

/* The figures of the library count up to what the page printed (pricing-shelf.js), and the four columns answer the
   pointer: the icon lifts, the figure takes the blue. */
.nb-pricing .nb-pricing-stat-icon {
  transition: translate var(--nb-dur-2) var(--nb-ease);
}
.nb-pricing .nb-pricing-stat-figure {
  font-variant-numeric: tabular-nums;
  transition: color var(--nb-dur-2) var(--nb-ease);
}
.nb-pricing .nb-pricing-stat:hover .nb-pricing-stat-icon {
  translate: 0 -4px;
}
.nb-pricing .nb-pricing-stat:hover .nb-pricing-stat-figure {
  color: var(--nb-blue);
}

/* Premium: the green disc lands and its tick draws itself; the plan's facts follow one by one. */
@keyframes pxs-disc {
  from { scale: 0.6; opacity: 0; }
  70% { scale: 1.08; opacity: 1; }
  to { scale: 1; }
}
@keyframes pxs-check {
  from { stroke-dashoffset: 22; }
  to { stroke-dashoffset: 0; }
}
@keyframes pxs-rise {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.nb-pricing .nb-pricing-active-disc svg path {
  stroke-dasharray: 22;
}
.nb-anim .nb-pricing .nb-pricing-active-disc {
  animation: pxs-disc 560ms var(--nb-ease) 200ms backwards;
}
.nb-anim .nb-pricing .nb-pricing-active-disc svg path {
  animation: pxs-check 420ms var(--nb-ease) 620ms backwards;
}
.nb-anim .nb-pricing .nb-pricing-meta > *,
.nb-anim .nb-pricing .nb-pricing-premium-actions > * {
  animation: pxs-rise 420ms var(--nb-ease) backwards;
}
.nb-anim .nb-pricing .nb-pricing-meta > :nth-child(1) { animation-delay: 700ms; }
.nb-anim .nb-pricing .nb-pricing-meta > :nth-child(2) { animation-delay: 760ms; }
.nb-anim .nb-pricing .nb-pricing-meta > :nth-child(3) { animation-delay: 820ms; }
.nb-anim .nb-pricing .nb-pricing-meta > :nth-child(4) { animation-delay: 880ms; }
.nb-anim .nb-pricing .nb-pricing-meta > :nth-child(n + 5) { animation-delay: 940ms; }
.nb-anim .nb-pricing .nb-pricing-premium-actions > :nth-child(1) { animation-delay: 1000ms; }
.nb-anim .nb-pricing .nb-pricing-premium-actions > :nth-child(2) { animation-delay: 1080ms; }

/* ── Reduced motion: every picture still ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nb-pricing .pxs-shelf-books i { animation: none; }
  .nb-pricing .pxs-seg-thumb { transition: none; }
  .nb-pricing .nb-pricing-plan { transition: none; }
  .nb-pricing .nb-pricing-figure { animation: none; }
  .nb-pricing .pxs-shelf-books i,
  .nb-pricing .nb-pricing-cta::before,
  .nb-pricing .nb-pricing-cta::after,
  .nb-pricing .nb-pricing-stat-icon { transition: none; }
  .nb-pricing .pxs-shelf-books i:hover,
  .nb-pricing .pxs-shelf-books i:hover + i,
  .nb-pricing .pxs-shelf-books i:has(+ i:hover),
  .nb-pricing .nb-pricing-stat:hover .nb-pricing-stat-icon { translate: none; rotate: none; }
  .nb-pricing .nb-pricing-active-disc,
  .nb-pricing .nb-pricing-active-disc svg path,
  .nb-pricing .nb-pricing-meta > *,
  .nb-pricing .nb-pricing-premium-actions > * { animation: none; }
}

/* ── Responsive: the shelf steps aside before the tabs ever wrap ──────── */
@media (max-width: 420px) {
  .nb-pricing .pxs-shelf-books { height: 40px; }
}