/* ExamStudyAid — the gate family's shelf pass (owner, 2026-10-08: "do the
   same to this ... menu, globally, and also the you are not taking this
   subject menu"): one language over the dashboard's first-visit dialog
   (pages/_dashboard_intro.html), the practice gate (noteviewer/_practice_gate.html),
   the login gate (noteviewer/nb_login_gate.html) and the Premium dialog
   (noteviewer/nb_premium_gate.html) — the split card everywhere it is drawn
   (also subject_resources.html, which only includes the last two).

   A layer over notebook-components.css sections 18 and 19, loaded after it
   (pages/nb_base.html, right after notebook-components.css, so it reaches
   every notebook study page and the dashboard without a second link; also
   after it on subject_resources.html where gate_on or premium_on draws one),
   in the language of the shelf passes already built for the profile, the
   subject cap overlay and the dashboard (profile-shelf.css, subject-cap.css,
   dashboard-shelf.css): dotted paper, Sora headings with the last word in the
   student's blue, a self-drawing blue tick, a little illustration that means
   something instead of a decorative line sketch, and motion that arrives
   once and finishes. A NEW file, not notebook-*.css, so its font-family and
   font-weight rules sit outside pages/tests_font_foundation.py's frozen
   fingerprint of that family; it touches no selector of dashboard-shelf.css,
   which keeps its own tests.

   NO GLOW, NO PILLS (owner, 2026-10-07, carried over from the profile and the
   overlay): nothing here is lit or haloed, and nothing is a capsule; the
   close button and the illustration apart, every radius is --nb-r-sm or
   --nb-r-md. Colour is tokens only (--nb-m-* and --nb-*, both already live in
   this family); --nb-soft (owner, 2026-10-08, the footer's own neutral grey)
   is the one for words that only state something — the context line, the
   explanatory sentence, a caption, "Or start with" — never a heading, a
   subject's name, a button or a link. Both themes come from the tokens;
   reduced motion keeps every picture still.

   §1 The heading voice   §2 The illustration   §3 The tick   §4 Supplementary
   ink   §5 Phone   §6 Reduced motion */

/* ── §1 · The heading voice ──────────────────────────────────────────────
   The left panel's heading was the serif voice (notebook-components.css);
   the right panel's was plain sans. One voice for the whole card: Sora, the
   profile's and the overlay's display face, with the subject's or the
   action's own word carried in an upright <em> (never italic) in the
   student's blue — the profile's "Your *subjects*" again. A title the script
   rewrites by textContent (the login gate's and the Premium dialog's own
   "where") is left plain: a word a script can strip the colour from is not
   worth colouring. */
.nb-gate .nb-gate-headline,
.nb-gate .nb-gate-title {
  font-family: var(--nb-display);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.nb-gate .nb-gate-headline em,
.nb-gate .nb-gate-title em {
  font-style: normal;
  color: var(--nb-blue);
}
/* the dynamic subject name inside a title keeps its own hue, as the
   overlay's row names do (subject-cap.css .cap-name), not the generic blue */
.nb-gate .nb-gate-name {
  font-style: normal;
  color: var(--subject-text, var(--nb-blue));
}

/* ── §2 · The illustration ───────────────────────────────────────────────
   Where the meaningless line sketch stood: a small picture that says what
   this gate is about, at the top of the paper panel, over the dotted grid,
   never over a word. Flat shapes in the ink and the student's blue (a
   subject's accent where one is known, through data-subject), arriving once
   as the panel does and then still. */
.nb-gate .nb-gate-illus {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0 0 var(--nb-s5);
  overflow: visible;
}
.nb-gate .nb-gate-illus .ngi-shelf {
  fill: none;
  stroke: color-mix(in srgb, var(--nb-ink) 28%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}
.nb-gate .nb-gate-illus .ngi-book {
  fill: color-mix(in srgb, var(--nb-ink) 24%, var(--nb-paper));
}
/* an empty slot on the dashboard intro's shelf: waiting, not yet a book */
.nb-gate .nb-gate-illus .ngi-book.ngi-slot {
  fill: none;
  stroke: color-mix(in srgb, var(--nb-ink) 32%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.nb-gate .nb-gate-illus .ngi-book-accent {
  fill: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 86%, var(--nb-paper));
}
.nb-gate .nb-gate-illus .ngi-ribbon {
  fill: var(--nb-blue);
}
.nb-gate .nb-gate-illus .ngi-cover {
  fill: color-mix(in srgb, var(--nb-ink) 16%, var(--nb-paper));
  stroke: color-mix(in srgb, var(--nb-ink) 34%, transparent);
  stroke-width: 1.5;
}
.nb-gate .nb-gate-illus .ngi-spine {
  stroke: color-mix(in srgb, var(--nb-ink) 34%, transparent);
  stroke-width: 1.5;
}
.nb-gate .nb-gate-illus .ngi-fill {
  fill: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 86%, var(--nb-paper));
}
/* the illustration settles in once, with the panel; it never loops */
@keyframes ngi-rise {
  from { opacity: 0; transform: translateY(6px); }
}
.nb-gate .nb-gate-illus .ngi-book,
.nb-gate .nb-gate-illus .ngi-cover,
.nb-gate .nb-gate-illus .ngi-ribbon {
  animation: ngi-rise 420ms var(--nb-ease) backwards;
}
.nb-gate .nb-gate-illus .ngi-book:nth-of-type(2) { animation-delay: 60ms; }
.nb-gate .nb-gate-illus .ngi-book:nth-of-type(3) { animation-delay: 120ms; }
.nb-gate .nb-gate-illus .ngi-book:nth-of-type(4) { animation-delay: 180ms; }
/* the practice gate's dropped book: it falls into its gap and settles */
@keyframes ngi-drop {
  0% { transform: translateY(-16px); opacity: 0; }
  60% { opacity: 1; }
  78% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.nb-gate .nb-gate-illus .ngi-drop {
  animation: ngi-drop 560ms var(--nb-ease) 260ms backwards;
}
/* the dashboard intro's empty shelf: one book fills a sliver, once, the way
   a chapter's own bar fills from its foot (dashboard-shelf.css) */
@keyframes ngi-fill-rise {
  from { transform: scaleY(0); }
}
.nb-gate .nb-gate-illus .ngi-fill {
  transform-origin: 50% 100%;
  animation: ngi-fill-rise 520ms var(--nb-ease) 420ms backwards;
}

/* ── §3 · The tick: a small blue square, drawn in ────────────────────────
   Nicer than a bare checkmark, still the self-drawing stroke
   (notebook-components.css §11): a rounded blue square under it, the stroke
   now the on-blue ink. The square itself fades and pops in with the stroke's
   own timing so the two read as one glyph arriving, not a flash then a
   draw. */
.nb-gate .nb-gate-item .nb-tick {
  overflow: visible;
}
.nb-gate .nb-gate-item .nb-tick-sq {
  fill: var(--nb-blue);
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 50% 50%;
  transition: opacity var(--nb-dur-1) var(--nb-ease), transform var(--nb-dur-1) var(--nb-ease);
}
.nb-gate .nb-gate-item .nb-tick-path {
  stroke: var(--nb-on-blue);
  stroke-width: 2.6;
}
.nb-gate .nb-gate-item .nb-is-drawn .nb-tick-sq,
.nb-gate .nb-gate-item.nb-is-drawn .nb-tick-sq,
dialog.nb-gate:not(:modal) .nb-gate-item .nb-tick-sq,
.nb-gate--practice .nb-gate-item .nb-tick-sq {
  opacity: 1;
  transform: none;
}

/* ── §4 · Supplementary ink (owner, 2026-10-08: "bring back a beautiful
   neutral gray ... for supplementary text") ─────────────────────────────
   Everything here only states something, never names, acts or links: the
   context line, the count of what is waiting, the explanatory sentence
   under a heading, the tick list (read once, not acted on) and "Or start
   with" 's lead-in words. Headings, a subject's own name, buttons and links
   stay the ink or the blue. */
.nb-gate .nb-gate-where,
.nb-gate .nb-gate-count,
.nb-gate .nb-gate-lede,
.nb-gate .nb-gate-item {
  color: var(--nb-soft);
}
.nb-gate .nb-gate-foot {
  color: var(--nb-soft);
}
/* the dashboard intro's "Or start with Biology or Chemistry": the lead-in
   is supplementary, the subjects it names stay links in the blue */
.nb-gate .nb-gate-foot a {
  color: var(--nb-blue);
}

/* ── §5 · A phone ────────────────────────────────────────────────────────
   The illustration keeps its place above the context line on a narrow
   column too (the panels already stack there, notebook-components.css). */
@container nb-gate (max-width: 520px) {
  .nb-gate .nb-gate-illus {
    height: 46px;
    margin-bottom: var(--nb-s4);
  }
}

/* ── §6 · Reduced motion: every picture still ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nb-gate .nb-gate-illus *,
  .nb-gate .nb-gate-item .nb-tick-sq {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}