/* The practice gate's sheet (noteviewer/_practice_gate.html; owner,
   2026-10-07: "make it good looking ... match our theme").

   It IS the Premium dialog's sheet (notebook-components.css sections 18 and
   19: the dotted paper, the two pages, the subject's sketches, the ask on its
   solid page), laid in the practice page where the questions would be rather
   than opened over it. Only what an inline sheet needs that a dialog does not
   lives here: its own size container (the dialog declares one on itself), no
   dialog height, a resting shadow instead of the dialog's lifted one, the
   ticks inked as it arrives, and the ask's heading without the close button's
   clearance. Loaded by the two notebook practice templates only while the
   gate is drawn. Every colour is a token. */
/* The sheet keeps a sheet's proportions (owner, 2026-10-08: "it is too wide
   and too short vertically"): it ran the whole 982px question column at
   about 280px tall, a strip. Now it is held to 48rem and centred on the desk,
   and side by side it keeps 27.5rem of height, so the two pages stand
   upright like the Premium dialog's (52.5rem by 32.75rem) at the column's
   scale. Stacked on a phone it takes only the height its words need. */
.nb-gate--practice {
  container: nb-gate / inline-size;
  max-width: 48rem;
  margin: var(--nb-s6) auto var(--nb-s7);
  color: var(--nb-ink);
  font-family: var(--nb-sans);
}
/* Its sheet, height and shadow are the one dialog's now (nb-dialog.css; owner, 2026-10-23: "standardize this new design
   for all popups"): the resting shadow and the 27.5rem two-page height that stood here were the inline sheet's. */
.nb-gate--practice .nb-gate-title {
  padding-right: 0;
}
/* A short subject name (22 characters or fewer, so it fits one line of the
   ask's page) breaks as one piece: "Add AP Calculus / BC to your subjects"
   split the name. A longer one (AP Physics C: Electricity & Magnetism) has
   no --whole and wraps with the words, or it would stand alone between "Add"
   and "to your subjects". Every name keeps .nb-gate-name, which gate-shelf.css
   colours in the subject's hue. */
.nb-gate--practice .nb-gate-name--whole {
  display: inline-block;
}
.nb-gate--practice .nb-gate-lede {
  margin-bottom: var(--nb-s5);
}
/* The dialog's column is centred (nb-premium-gate.css); the ticked lines are
   one block in its middle that reads from the left, so a line that wraps on
   a phone keeps to its tick instead of centring under it. */
.nb-gate--practice .nb-gate-list {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: start;
}
/* The topic, then how many questions wait behind the sheet, on a line of its own. */
.nb-gate--practice .nb-gate-count {
  display: block;
  font-weight: 400;
}
/* The ticks ink themselves once, in reading order, as the sheet arrives; the
   resting state is drawn, so a page whose animations never run still shows
   them (DESIGN.md: motion enhances what is already visible). */
.nb-gate--practice .nb-tick-path {
  stroke-dashoffset: 0;
  animation: nb-practice-gate-ink var(--nb-dur-3) var(--nb-ease) both;
}
.nb-gate--practice .nb-gate-item:nth-child(2) .nb-tick-path { animation-delay: 90ms; }
.nb-gate--practice .nb-gate-item:nth-child(3) .nb-tick-path { animation-delay: 180ms; }
@keyframes nb-practice-gate-ink {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
/* A narrow column (a phone): the two pages stack and keep a phone's margins. */
@container nb-gate (max-width: 520px) {
  .nb-gate--practice .nb-gate-value {
    padding: var(--nb-s6) var(--nb-s5);
  }
  .nb-gate--practice .nb-gate-auth {
    padding: var(--nb-s6) var(--nb-s5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nb-gate--practice .nb-tick-path { animation: none; }
}