/* ==================================================================
   /tools/youtube-citation-generator, rebuilt on the foundation.
   Loaded ONLY when the 'tools-citation-generator' redesign switch is on
   for this viewer (never in embed mode); the old page keeps tools.css,
   tool-night-hero.css and tools-citation.css.

   Layout unique to this page only. The first screen, the guide, the
   questions, the links and the close are the shared tool kit
   (foundation-tools.css); buttons, cards, fields, the segment, tabs,
   callouts, the data table and the numbered heads are the foundation's
   and are NOT redrawn here.

   The cite-* ids and classes in the markup (and .tool-workspace) are
   JAVASCRIPT HOOKS for /js/citation-generator.js and carry no styling
   of their own here except the one state the script sets on a copy
   button for a moment after it copies: data-copied="true".
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   Below 1024px one column: the citation lands right under the box, in
   a column that holds a long reference without running too wide.
   From 1024px the kit's grid: the name and the box on the left, and on
   the right an example citation (APA's own) until theirs replaces it,
   so the right half of a laptop screen is never empty.
   ------------------------------------------------------------------ */
.cite2-ask,
.cite2-out { max-width: 820px; }
.cite2-sample { display: none; }
@media (min-width: 1024px) {
  .cite2-ask,
  .cite2-out { max-width: none; }
  .cite2-out,
  .cite2-sample { grid-area: ans; align-self: start; }
  .cite2-sample:not([hidden]) { display: block; }
  .fnd .cite2-out { margin-top: 0; }
}
/* The example sits on the soft paper so it reads as a sample, not a
   result; its reference boxes stay white like the real ones. */
.fnd .cite2-sample { background: var(--fnd-paper-2); }
.cite2-sample__note { margin: var(--fnd-s4) 0 0; }

/* No word left alone on a last line: the title on a phone, a question,
   the closing button and the formats in the quick reference. */
.fnd .cite2 h1.fnd-display,
.fnd .cite2-qa__list summary,
.fnd.cite2-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
.fnd .cite2-tbl td { text-wrap: pretty; }
/* This page's name is long: under 414px "Citation Generator" will not fit
   one line at the kit's 40px floor, so "Generator" fell alone. The kit's
   own small-phone size keeps it to two lines (measured at 375). */
@media (max-width: 413px) {
  .fnd .cite2 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}

/* The two places the page scrolls to (the box on Cite another video,
   the result on Cite) clear the sticky header. */
.cite2-ask,
.cite2-out { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* The link box and its button on one line; stacked on a small phone so
   the button keeps its full label at a real tap size. */
.cite2-inputrow { display: flex; gap: var(--fnd-s2); }
.cite2-inputrow .fnd-input { flex: 1 1 auto; min-width: 0; }
.cite2-inputrow .fnd-btn { flex: 0 0 auto; }
@media (max-width: 559px) {
  .cite2-inputrow { flex-direction: column; }
  .cite2-inputrow .fnd-btn { width: 100%; }
}

/* Type the details. The kit spaces the card's children with a margin on
   each one after the first, and the hidden link mode still counts as a
   sibling, so this block opened with a stray gap above it and had none
   between its own rows. The card body becomes a column with the kit's
   20px gap instead: a hidden block takes no room in a gap. */
.fnd .fnd-tool-form.cite2-ask > .fnd-card-body { display: flex; flex-direction: column; gap: var(--fnd-s4); }
.fnd .fnd-tool-form.cite2-ask > .fnd-card-body > * + * { margin-top: 0; }
.fnd .fnd-tool-form .cite2-manual > * + * { margin-top: var(--fnd-s4); }
.fnd .fnd-tool-form .cite2-manual > .fnd-error { margin-top: var(--fnd-s2); }
@media (max-width: 559px) {
  .cite2-manual .fnd-btn { width: 100%; }
}

/* ------------------------------------------------------------------
   2. THE CITATION
   The video it came from, the style tabs, then the reference itself
   set the way a reference list sets it: a hanging indent, so the paste
   looks like the page it is going onto.
   ------------------------------------------------------------------ */
.cite2-out { margin-top: var(--fnd-s6); }
.cite2-out:not([hidden]) { animation: cite2-in 320ms cubic-bezier(.22,1,.36,1); }
@keyframes cite2-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cite2-out:not([hidden]) { animation: none; }
}

/* The video row: its picture beside its title, small on a phone so the
   citation stays near the top of the screen. */
.cite2-video {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--fnd-s4);
  align-items: center;
}
@media (max-width: 559px) {
  .cite2-video { grid-template-columns: 112px minmax(0, 1fr); gap: var(--fnd-s3); align-items: start; }
}
/* In the laptop's right column the title needs the room more. */
@media (min-width: 1024px) {
  .cite2-video { grid-template-columns: 160px minmax(0, 1fr); }
}
/* A typed-in video with no YouTube link has no picture: the script hides
   the image, and the row closes up to the text alone. */
.cite2-thumb:has(img[hidden]) { display: none; }
.cite2-video:has(img[hidden]) { grid-template-columns: minmax(0, 1fr); }
.cite2-thumb { border-radius: var(--fnd-r-sm); }
.cite2-video__info { min-width: 0; }
/* The script moves focus here when the citation appears, so a keyboard
   or screen reader lands on the result; it is a heading, not a control,
   so it shows no ring. */
.cite2-video__title:focus { outline: none; }
.fnd .cite2-video__title {
  margin: 0 0 4px;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3); line-height: 1.3; letter-spacing: -.01em;
  color: var(--fnd-text);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.cite2-video__meta {
  margin: 0;
  font-size: var(--fnd-t-meta); line-height: 1.5;
  color: var(--fnd-text-soft);
  overflow-wrap: anywhere;
}
.cite2-video__meta:empty { display: none; }
.cite2-video__info .fnd-btn { margin-top: var(--fnd-s2); }
@media (max-width: 559px) {
  .fnd .cite2-video__title { font-size: 16px; }
}

.cite2-edit { margin-top: var(--fnd-s4); }
/* The title field stands alone at full width; the rows around it set the gaps */
.fnd .cite2-wide { margin-bottom: 0; }
/* "Keep my capitals" sits under the title field, not in a checklist; the
   label's own padding is the gap to the field above */
.fnd .fnd-check.cite2-keep { border-bottom: 0; margin-top: 0; }
/* ...and its 12px of tap padding already spaces it from the next row */
.fnd .fnd-tool-form .cite2-manual > .cite2-wide + .fnd-fieldrow { margin-top: calc(var(--fnd-s4) - 12px); }
.fnd .cite2-edit .fnd-card-body > .cite2-wide + .fnd-fieldrow { margin-top: calc(var(--fnd-s5) - 12px); }

.cite2-tabs { margin: var(--fnd-s5) 0 var(--fnd-s4); }
/* "IEEE" is the shortest name and drew a 33px tab; every tab is at least
   a finger wide, its name centred. */
.fnd .cite2-tabs .fnd-tab { min-width: 44px; justify-content: center; text-align: center; }
/* On a phone the six styles need 359px on one line and the column has
   320 (measured at 375), so BibTeX was cut off. They sit in two rows of
   three instead: every style in view, full-size type, each tab a third
   of the width. Each row carries its own hairline, so the strip's rule
   and the scroll fade go. The names are proper names and do not grow
   in translation. */
@media (max-width: 559px) {
  .fnd .cite2-tabs.fnd-tabs--scroll {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    border-bottom: 0; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .fnd .cite2-tabs.fnd-tabs--scroll::after { content: none; }
  body.fnd .cite2-tabs .fnd-tab { box-shadow: inset 0 -1px 0 var(--fnd-rule); }
  body.fnd .cite2-tabs .fnd-tab:hover { box-shadow: inset 0 -2px 0 var(--fnd-rule); }
  body.fnd .cite2-tabs .fnd-tab--on,
  body.fnd .cite2-tabs .fnd-tab--on:hover { box-shadow: inset 0 -2px 0 var(--fnd-text); }
}
/* From 560px up the six names fit on one line, so the scroll fade and its
   34px spacer only hid half of BibTeX (the 1024px laptop column is 414px,
   the strip 409px). Both go; the laptop's narrower gap leaves room for a
   wider font or a longer name in translation. */
@media (min-width: 560px) {
  .fnd .cite2-tabs.fnd-tabs--scroll { -webkit-mask-image: none; mask-image: none; }
  .fnd .cite2-tabs.fnd-tabs--scroll::after { content: none; }
}
@media (min-width: 1024px) {
  .fnd .cite2-tabs.fnd-tabs--scroll { gap: var(--fnd-s3); }
}

/* Chicago's 17th or 18th edition: the shared segment, set apart from the
   style name under it. */
.fnd .cite2-edition { margin: 0 0 var(--fnd-s4); }

/* The style's name and where the reference goes, on one line. */
.cite2-panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px var(--fnd-s2);
  margin: 0 0 var(--fnd-s2);
}
.cite2-panel__head b {
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-body); color: var(--fnd-text);
}
.cite2-panel__head span { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
.cite2-panel__sub {
  margin: var(--fnd-s5) 0 var(--fnd-s2);
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-sm); color: var(--fnd-text);
}

/* The reference. A hanging indent, the way APA, MLA, Chicago and
   Harvard all set a reference list. Long URLs break anywhere rather
   than push the page sideways. */
.cite2-ref {
  margin: 0;
  background: var(--fnd-card);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-sm);
  padding: var(--fnd-s4) var(--fnd-s4) var(--fnd-s4) calc(var(--fnd-s4) + 2em);
  text-indent: -2em;
  font-size: var(--fnd-t-body); line-height: 1.6;
  color: var(--fnd-text);
  overflow-wrap: anywhere;
}
/* An in-text citation is one short line: no indent to hang. */
.cite2-ref--intext { padding-left: var(--fnd-s4); text-indent: 0; }
/* The BibTeX entry is code: its own line breaks, monospace, no indent. */
.cite2-ref--code {
  padding-left: var(--fnd-s4); text-indent: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fnd-t-sm); line-height: 1.55;
  white-space: pre-wrap;
}
@media (max-width: 559px) {
  .cite2-ref { padding: var(--fnd-s3) var(--fnd-s3) var(--fnd-s3) calc(var(--fnd-s3) + 1.5em); text-indent: -1.5em; font-size: var(--fnd-t-sm); }
  .cite2-ref--intext,
  .cite2-ref--code { padding-left: var(--fnd-s3); text-indent: 0; }
}

/* The buttons under a reference, and the page's own actions row. */
.cite2-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fnd-s2);
  margin-top: var(--fnd-s3);
}
/* Copy keeps its width when its label swaps to "Copied!", so the row
   beside it never jumps. */
.fnd .cite2-panel .cite2-row .fnd-btn { min-width: 120px; }
.cite2-hint { margin-top: var(--fnd-s4); max-width: 62ch; }
.cite2-panel__note { margin: var(--fnd-s4) 0 0; max-width: 62ch; }
/* The italics note is about rich paste; a BibTeX entry is plain code. */
.cite2-out:has(.cite2-panel:not([hidden]) .cite2-ref--code) .cite2-hint { display: none; }
.cite2-actions {
  margin-top: var(--fnd-s5);
  padding-top: var(--fnd-s4);
  border-top: 1px solid var(--fnd-rule);
}
@media (max-width: 559px) {
  .cite2-actions .fnd-btn { flex: 1 1 100%; }
}

/* Copied: the button already swaps its own label; the colour is the
   visible confirmation. */
.fnd .cite2 .fnd-btn[data-copied="true"] {
  background: var(--fnd-ok); border-color: var(--fnd-ok); color: #fff;
}

/* ------------------------------------------------------------------
   3. THE GUIDE
   The kit's reading column; this page's guide runs five sections, so
   each section heading takes the air above it and is a scroll target
   for the contents rail.
   ------------------------------------------------------------------ */
.fnd .cite2-guide .fnd-tool-read .fnd-h2 {
  margin-top: var(--fnd-s8);
  max-width: 24ch;
  scroll-margin-top: calc(var(--header-height, 61px) + var(--fnd-s4));
}
.cite2-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .cite2-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}

/* A link inside a sentence is one line of text tall (21px). Clear padding
   above and below grows what a finger can press to 45px; an inline box's
   padding takes no room in the line, so the text does not move (measured:
   the paragraph keeps its exact height). */
.fnd .cite2-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .cite2-qa__list p a:not(.fnd-btn) { padding-block: 12px; }

/* The three steps: the shared numbered heads, a paragraph under each. */
.cite2-steps { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.cite2-steps li + li { margin-top: var(--fnd-s5); }
.cite2-steps .fnd-numhead { margin-bottom: var(--fnd-s2); }
.fnd .cite2-steps .fnd-numhead__t { font-size: var(--fnd-t-h3); }
.cite2-steps p { margin: 0; padding-left: calc(32px + var(--fnd-s3)); }
@media (max-width: 559px) {
  .cite2-steps p { padding-left: 0; }
}

/* Code inside the prose and the table (\cite{key}, @misc). */
.cite2-guide code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--fnd-paper-2);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-xs);
  padding: 1px 6px;
  color: var(--fnd-text);
  overflow-wrap: anywhere;
}

/* The quick reference is a table of formats, not figures: the shared
   data table keeps its card and rules, but its cells wrap here, and on
   a phone the long format takes its own full line under the style. */
.fnd .cite2-tbl tbody td:not(:first-child) { white-space: normal; font-variant-numeric: normal; }
.fnd .cite2-tbl td:first-child { white-space: nowrap; }
@media (min-width: 640px) {
  .cite2-tbl td { vertical-align: top; }
  .cite2-tbl th:first-child { width: 16%; }
  .cite2-tbl th:last-child { width: 24%; }
}
@media (max-width: 639px) {
  /* A sentence-long format, not a figure: regular weight reads as text
     where the shared table's bold suits a short number. */
  .fnd .cite2-tbl.fnd-tbl--data tbody td:not(:first-child):not(:last-child) {
    flex: 0 0 100%; min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 400;
    color: var(--fnd-text);
  }
  /* Its small grey label ("Reference format") on its own line above the
     format, so the two never run together into one sentence. */
  .fnd .cite2-tbl.fnd-tbl--data tbody td:not(:first-child):not(:last-child)::before {
    display: block; margin-bottom: 2px;
  }
  .fnd .cite2-tbl.fnd-tbl--data tbody td:last-child { white-space: nowrap; }
}
/* The official-sources line reads as the table's caption: a small gap, not flush. */
.fnd .cite2-src { margin-top: var(--fnd-s2); }

/* ------------------------------------------------------------------
   4. THE HERO (switch 'tools-citation-hero', 2026-10-28)
   One centred column at every width, in the order a student works:
   the style their teacher asked for, one paste bar, then the citation
   card. The card is never empty: it shows a real example in the chosen
   style (cite2-out--example) until their own replaces it. Everything
   here is scoped to .cite2-hero, so with the switch off sections 1 and
   2 draw the first screen exactly as before.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .cite2-hero .fnd-tool-top__in { display: block; }
}
.fnd .cite2-hero .fnd-tool-lead,
.fnd .cite2-hero .cite2-styles,
.fnd .cite2-hero .cite2-ask,
.fnd .cite2-hero .cite2-out { max-width: 760px; margin-left: auto; margin-right: auto; }

/* The name and its line, centred over the bar they introduce. The words
   are the same as with the switch off (search ranks them). */
.fnd .cite2-hero .fnd-tool-lead { text-align: center; }
.fnd .cite2-hero .fnd-tool-lead .fnd-display,
.fnd .cite2-hero .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .cite2-hero .fnd-tool-lead__sub { text-wrap: balance; }

/* The six styles: the system's filter chips, standing in for a tablist,
   so the chosen one reads aria-selected where a chip reads aria-pressed.
   On a phone two rows of three, every name in view at full size. */
.fnd .cite2-hero .cite2-styles {
  justify-content: center;
  margin-bottom: var(--fnd-s4);
  scroll-margin-top: calc(var(--header-height, 61px) + 16px);
}
.fnd .cite2-hero .fnd-chip-btn { justify-content: center; font-size: var(--fnd-t-sm); }
/* The script also marks the chosen one fnd-tab--on (the old strip's hook),
   whose underline must not reach a chip. */
.fnd .cite2-hero .fnd-chip-btn[aria-selected="true"] {
  background: var(--fnd-ink); border-color: var(--fnd-ink); color: var(--fnd-on-ink); box-shadow: none;
}
.fnd .cite2-hero .fnd-chip-btn:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
@media (min-width: 560px) {
  .fnd .cite2-hero .fnd-chip-btn { padding: 0 var(--fnd-s4); }
}
@media (max-width: 559px) {
  .fnd .cite2-hero .cite2-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fnd .cite2-hero .fnd-chip-btn { padding: 0 8px; }
}

/* The paste bar sits bare on the page, like a search box. Typing the
   details instead puts the form back in its card (cite2-ask--manual). */
.fnd .cite2-hero .cite2-ask:not(.cite2-ask--manual) { background: none; border: 0; border-radius: 0; }
.fnd .cite2-hero .cite2-ask:not(.cite2-ask--manual) > .fnd-card-body { padding: 0; }

.fnd .cite2-bar {
  display: flex; align-items: center; gap: var(--fnd-s2);
  background: var(--fnd-card);
  border: 1px solid var(--fnd-edge);
  border-radius: 999px;
  padding: 5px 5px 5px 20px;
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
/* The bar takes the field's focus look as a whole: ink edge, soft ring. */
.fnd .cite2-bar:focus-within {
  border-color: var(--fnd-text);
  box-shadow: 0 0 0 3px var(--fnd-accent-soft), 0 12px 28px -16px rgba(23, 20, 31, .3);
}
.cite2-bar > .fa-link { flex: 0 0 auto; font-size: 15px; color: var(--fnd-text-faint); }
.fnd .cite2-hero .cite2-bar .fnd-input {
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 0 var(--fnd-s1);
  background: transparent; border: 0; border-radius: 0;
}
.fnd .cite2-hero .cite2-bar .fnd-input:focus { box-shadow: none; }
.fnd .cite2-bar .fnd-btn { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }
@media (max-width: 559px) {
  .fnd .cite2-bar { padding-left: 16px; }
  .cite2-bar__long { display: none; }
}
.fnd .cite2-hero .cite2-bar__help { margin: var(--fnd-s3) 0 0; text-align: center; text-wrap: pretty; }
.fnd .cite2-bar__alt { margin: var(--fnd-s1) 0 0; text-align: center; }
/* A message about the link sits centred under the bar, like the lines below it. */
.fnd .cite2-hero .cite2-bar ~ .fnd-error { text-align: center; text-wrap: pretty; }
/* With their own citation on show the two lines under the bar step aside,
   so the citation and its Copy sit higher (set by the script). */
.fnd .cite2-hero--done .cite2-bar__help,
.fnd .cite2-hero--done .cite2-bar__alt { display: none; }
/* One ring at a time: when the Cite button has the keyboard, it carries the
   ring and the bar goes back to its resting edge. */
.fnd .cite2-bar:has(.fnd-btn:focus-visible) {
  border-color: var(--fnd-edge);
  box-shadow: 0 1px 2px rgba(23, 20, 31, .05), 0 12px 28px -16px rgba(23, 20, 31, .3);
}

/* The two ways across: "Or type the details yourself" under the bar, "Paste
   a link instead" at the head of the form. In the accent so they read as
   things to press; text buttons grown to a 44px tap. */
.fnd .cite2-hero .cite-mode-btn.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .cite2-hero .cite-mode-btn.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .cite2-manual__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fnd-s2) var(--fnd-s4);
}
.fnd .cite2-manual__head b {
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-h3); color: var(--fnd-text);
}

/* The citation card under the bar. Inside a white card the reference is
   set straight on the paper the way a reference list sets it: a hanging
   indent and no box of its own. BibTeX stays code on its soft panel. */
.fnd .cite2-hero .cite2-out { margin-top: var(--fnd-s5); }
.fnd .cite2-hero .cite2-ref {
  background: none; border: 0; border-radius: 0;
  padding: 0 0 0 2em; text-indent: -2em;
  text-wrap: pretty;
}
@media (max-width: 559px) {
  .fnd .cite2-hero .cite2-ref { padding: 0 0 0 1.5em; text-indent: -1.5em; }
}
.fnd .cite2-hero .cite2-ref--intext { padding-left: 0; text-indent: 0; text-wrap: balance; }
.fnd .cite2-hero .cite2-video__title { text-wrap: balance; }
/* BibTeX keeps its own lines and scrolls inside its panel when a line is
   wider than a phone, never breaking a key in half. */
.fnd .cite2-hero .cite2-ref--code {
  padding: var(--fnd-s3); text-indent: 0;
  background: var(--fnd-paper-2); border-radius: var(--fnd-r-sm);
  white-space: pre; overflow-wrap: normal; word-break: normal; overflow-x: auto;
  text-wrap: nowrap;
}
.fnd .cite2-hero .cite2-tabs { display: none; }

/* The example: a badge saying so, and nothing to copy, edit or download
   (copying the example would put the wrong video in someone's paper). */
.fnd .cite2-exnote {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--fnd-s2);
  margin: 0 0 var(--fnd-s4);
  font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-text-soft);
}
/* Its ending follows the way they chose: link, or typed details. */
.cite2-exnote__typed,
.cite2-ask--manual ~ .cite2-out .cite2-exnote__link { display: none; }
.cite2-ask--manual ~ .cite2-out .cite2-exnote__typed { display: inline; }
/* Their own citation opens on its video row: the hidden note above it
   still counts as a sibling, so the row would keep the gap meant for it. */
.fnd .cite2-hero .cite2-out:not(.cite2-out--example) .cite2-video { margin-top: 0; }
.cite2-out:not(.cite2-out--example) .cite2-exnote,
.cite2-out--example .cite2-video,
.cite2-out--example .cite2-edit,
.cite2-out--example .cite2-row,
.cite2-out--example .cite2-hint,
.cite2-out--example .cite2-panel__note { display: none; }

/* ------------------------------------------------------------------
   5. THE STUDENT PAGE (/tools/youtube-citation-generator/student,
   switch 'tools-citation-student', 2026-10-30)
   The tool alone, for a school guide to send young students to. No bar
   above it, so the first screen gets its own top space; then three short
   steps and a plain closing line, both in the hero's one centred column.
   ------------------------------------------------------------------ */
body.cite2-student .cite2-top { padding-top: var(--fnd-s7); }
@media (min-width: 768px) {
  body.cite2-student .cite2-top { padding-top: var(--fnd-s8); }
}
.cite2-learn { border-top: 1px solid var(--fnd-rule); }
.cite2-learn__in { max-width: 760px; margin: 0 auto; }
.cite2-studentfoot { padding: 0 0 var(--fnd-s8); text-align: center; }
.cite2-studentfoot p {
  margin: 0; font-size: var(--fnd-t-sm); color: var(--fnd-text-faint); text-wrap: balance;
}
.cite2-studentfoot p + p { margin-top: var(--fnd-s1); }
@media (max-width: 767px) {
  .cite2-learn__in { max-width: none; }
}