/* ==================================================================
   /tools/youtube-subscribe-link-generator, rebuilt on the foundation.
   Loaded ONLY when the 'tools-subscribe-link-generator' redesign switch
   is on for this viewer; the old page keeps tools.css and its own sheet.

   Everything here is layout unique to this page. Components (buttons,
   cards, chips, tabs, fields, callouts, the accordion, the breadcrumb,
   the closing band) come from the foundation layer and are NOT redefined
   here. If a rule below starts redrawing a component, it belongs
   upstream.

   The .slg-* classes that appear alongside .fnd-* and .slg2-* classes in
   the markup are JAVASCRIPT HOOKS shared with the old page's script
   (/js/subscribe-link-generator.js) and carry no styling of their own in
   this sheet except the states the script sets: .slg-output--visible,
   .slg-copied, .tabs__item--active (mirrored by fnd-tab--on).
   ================================================================== */

/* ------------------------------------------------------------------
   1. HERO
   One centred column, two groups: what the page is (chip, title, sub)
   and the live counter line under it. The tool card right below is the
   action, so the hero carries no button.
   ------------------------------------------------------------------ */
.slg2-hero__in { text-align: center; }
.slg2-hero__in .fnd-chip { margin-bottom: var(--fnd-s4); }
.fnd .slg2-hero__title { max-width: 16ch; }
.slg2-hero__sub { max-width: 52ch; }
/* The social-proof counter the script fills ("12,482 links generated").
   Empty until then; margin lives on the element so an empty line adds
   no gap. */
.slg2-counter {
  margin: 0;
  font-size: var(--fnd-t-meta);
  color: var(--fnd-on-ink-faint);
}
.slg2-counter:empty { display: none; }

/* ------------------------------------------------------------------
   2. THE TOOL CARD
   The page's one job. Tighter section padding than a reading section:
   the card must be on screen with the hero at 375px.
   ------------------------------------------------------------------ */
.slg2-tool { padding-top: var(--fnd-s6); padding-bottom: var(--fnd-s6); }
.slg2-tool__wrap { max-width: 860px; }
.slg2-inputrow {
  display: flex; gap: var(--fnd-s2);
  margin-top: 2px;
}
.slg2-inputrow .fnd-input { flex: 1 1 auto; min-width: 0; }
.slg2-inputrow .fnd-btn { flex: 0 0 auto; }
@media (max-width: 559px) {
  .slg2-inputrow { flex-direction: column; }
  .slg2-inputrow .fnd-btn { width: 100%; }
}
/* Two quiet lines under the field: the promises, then the capabilities.
   Both are the shared .fnd-dotline, left-aligned inside the card; only
   the rhythm between them is this page's. */
.slg2-trust { margin-top: var(--fnd-s5); }
.slg2-features { margin-top: var(--fnd-s1); }

/* ------------------------------------------------------------------
   3. OUTPUT
   The section the script reveals. The soft entrance is progressive
   polish; visibility itself is the hidden attribute, which the script
   owns.
   ------------------------------------------------------------------ */
.slg2-output { padding-bottom: var(--fnd-s8); }
.slg2-output.slg-output--visible { animation: slg2-in 320ms cubic-bezier(.22,1,.36,1); }
@keyframes slg2-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slg2-output.slg-output--visible { animation: none; }
}

.slg2-tabs { margin-bottom: var(--fnd-s5); }

/* Panel titles take the device rung, not the section rung: they are
   card-level headings inside a working surface, and the page's real
   section headings keep the full size below. */
.fnd .slg2-panel-t { font-size: 22px; margin: 0 0 var(--fnd-s4); }
.fnd .slg2-sub-h { font-size: var(--fnd-t-h3); margin: var(--fnd-s6) 0 var(--fnd-s2); }

/* The link box: the generated value and its actions, one card. The
   code line wraps nowhere by default (a URL reads better on one line
   with sideways scroll) and everywhere with --wrap. */
.slg2-linkbox {
  background: var(--fnd-card);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  padding: var(--fnd-s4);
}
.slg2-code {
  display: block;
  font-size: var(--fnd-t-sm);
  line-height: 1.5;
  color: var(--fnd-text);
  background: var(--fnd-paper-2);
  border-radius: var(--fnd-r-xs);
  padding: 12px var(--fnd-s3);
  overflow-x: auto;
  white-space: nowrap;
}
.slg2-code--wrap { white-space: normal; word-break: break-all; overflow-x: visible; }
.slg2-code:empty::before { content: "\2014"; color: var(--fnd-text-faint); }
.slg2-actions {
  display: flex; flex-wrap: wrap; gap: var(--fnd-s2);
  margin-top: var(--fnd-s3);
}
.slg2-actions--center { justify-content: center; margin-top: var(--fnd-s4); }
.slg2-note { max-width: 62ch; }

/* The copied state the script sets. The button already swaps its own
   label; the colour shift is the visible confirmation. */
.fnd .fnd-btn.slg-copied { background: var(--fnd-ok); color: #fff; }

.slg2-bell { margin-top: var(--fnd-s6); }
.slg2-callout { margin-top: var(--fnd-s3); max-width: 72ch; }

/* Option groups: label above, options on one wrapping row. The rows
   reuse .fnd-radio (44px, real inputs) laid inline. */
.slg2-options {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--fnd-s3) var(--fnd-s6);
  margin-bottom: var(--fnd-s4);
}
@media (min-width: 720px) { .slg2-options { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.slg2-optgroup .fnd-label { margin-bottom: 2px; }
.slg2-radiorow { display: flex; flex-wrap: wrap; gap: 0 var(--fnd-s4); }
.slg2-radiorow .fnd-radio { align-items: center; padding: 4px 0; }
.slg2-radiorow .fnd-radio input { margin: 0; }
.slg2-colorwrap { margin-top: var(--fnd-s2); }
.slg2-color {
  display: block; width: 64px; height: 44px;
  padding: 3px; border: 1px solid var(--fnd-rule); border-radius: var(--fnd-r-xs);
  background: var(--fnd-card); cursor: pointer;
}

/* The live embed preview and the two canvases sit on a tint field so
   a white badge and a white button both stay visible. */
.slg2-embed-preview,
.slg2-canvaswrap {
  display: flex; align-items: center; justify-content: center;
  background: var(--fnd-paper-2);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  padding: var(--fnd-s5);
  min-height: 96px;
}
.slg2-canvaswrap canvas { max-width: 100%; height: auto; }
.slg2-canvaswrap--qr canvas { background: #fff; border-radius: var(--fnd-r-sm); padding: 10px; }

/* UTM fields: three across where they fit. */
.slg2-utm {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--fnd-s4);
  margin-bottom: var(--fnd-s4);
}
@media (min-width: 760px) { .slg2-utm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Share rows: a hairline list, name left, actions right. No brand
   discs: seven tinted circles in a grid was the loudest thing on the
   page and none of them were the action. */
.slg2-sharerows { border-top: 1px solid var(--fnd-rule); }
.slg2-sharerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fnd-s3);
  padding: var(--fnd-s2) 0;
  border-bottom: 1px solid var(--fnd-rule);
}
.slg2-sharename {
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-sm);
}
.slg2-shareacts { display: flex; align-items: center; gap: var(--fnd-s2); }
/* The icon-only copy control needs its edge here: it stands beside a
   real button, and a bare glyph next to a bordered pill reads as
   decoration. --edge exists for exactly this. */
.slg2-sharerow .fnd-iconbtn { box-shadow: inset 0 0 0 1px var(--fnd-rule); }
.slg2-sharerow .fnd-iconbtn:hover { box-shadow: inset 0 0 0 1px var(--fnd-text-faint); }
.fnd .fnd-iconbtn.slg-copied { background: var(--fnd-ok); color: #fff; box-shadow: none; }

.slg2-postcta { margin-top: var(--fnd-s7); }

/* ------------------------------------------------------------------
   4 + 5. THE READING COLUMN
   The educational content reads at 720px. Section headings take the
   full rung; the h3s inside prose take the device rung.
   ------------------------------------------------------------------ */
.slg2-read { max-width: 784px; }

/* The video walkthrough and the embed box are SHARED tool partials that
   bring their own stylesheets, written for the old design and loaded
   after this sheet from the page body. On a foundation page their
   #4F46E5 marks are the one value the foundation names as permanently
   excluded, so the accents are repainted ink here. .fnd.slg2-page
   outranks their single-class rules whatever the load order. A proper
   foundation variant of both partials is raised in the promotion
   handover; these overrides keep one page from restyling a shared file. */
.fnd.slg2-page .tool-video-section h2 { font-family: var(--fnd-display-font); font-weight: 800; letter-spacing: -.028em; font-size: var(--fnd-t-h2); color: var(--fnd-text); }
.fnd.slg2-page .tool-video__btn { background: var(--fnd-ink); box-shadow: 0 8px 26px rgba(22, 20, 26, .4); }
.fnd.slg2-page .tool-video:hover .tool-video__btn { box-shadow: 0 12px 34px rgba(22, 20, 26, .5); }
.fnd.slg2-page .tool-video__play:focus-visible { outline-color: var(--fnd-text); }
.fnd.slg2-page .tool-embed-section__toggle-icon { background: var(--fnd-ink); }
.fnd.slg2-page .tool-embed-section__step-num { background: var(--fnd-ink); }
.fnd.slg2-page .tool-embed-section__code:focus { border-color: var(--fnd-text); box-shadow: 0 0 0 3px var(--fnd-accent-soft); }
.slg2-content .fnd-h2 { margin-top: var(--fnd-s8); }
.slg2-content .fnd-h2:first-of-type { margin-top: 0; }
.fnd .slg2-h3 { font-size: var(--fnd-t-h3); margin: var(--fnd-s5) 0 var(--fnd-s2); }
.slg2-content p { margin: 0 0 var(--fnd-s3); color: var(--fnd-text-soft); }
.slg2-content p code, .slg2-content li code, .slg2-standfirst code {
  font-size: .92em;
  background: var(--fnd-paper-2);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-xs);
  padding: 1px 6px;
  color: var(--fnd-text);
  word-break: break-all;
}
/* Prose links: the base rule at (0,2,2) forces color inherit, so the
   counter-selector matches it and wins, same as every rebuilt page. */
.fnd .slg2-content p a:not(.fnd-btn),
.fnd .slg2-content li a:not(.fnd-btn),
.fnd .slg2-standfirst a:not(.fnd-btn) {
  color: var(--fnd-accent-deep);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.fnd .slg2-content p a:not(.fnd-btn):hover,
.fnd .slg2-content li a:not(.fnd-btn):hover { text-decoration-thickness: 2px; }

/* The standfirst: the page's answer paragraph, marked by two hairlines
   and a step up, the same standfirst move as the shared summary device,
   without its question column because this one has no question. */
.slg2-standfirst {
  font-size: var(--fnd-t-lede);
  line-height: 1.75;
  color: var(--fnd-text-soft);
  padding: var(--fnd-s5) 0;
  border-top: 1px solid var(--fnd-rule);
  border-bottom: 1px solid var(--fnd-rule);
  margin: 0 0 var(--fnd-s7);
}

/* The anatomy strip: three labelled parts joined by operators. */
.slg2-anatomy {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--fnd-s2);
  align-items: center;
  margin: var(--fnd-s4) 0;
}
.slg2-anatomy__part {
  background: var(--fnd-card);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-sm);
  padding: var(--fnd-s3) var(--fnd-s4);
}
.slg2-anatomy__part--result { border-color: var(--fnd-text); }
.slg2-anatomy__label {
  display: block;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-micro); color: var(--fnd-text-faint);
  margin-bottom: 3px;
}
.slg2-anatomy code { display: block; font-size: var(--fnd-t-meta); word-break: break-all; }
.slg2-anatomy__op {
  text-align: center;
  font-family: var(--fnd-display-font); font-weight: 800;
  font-size: 20px; color: var(--fnd-text-faint);
}

/* The ten placements: a numbered list where the numeral leads, the
   same numeral treatment as the rebuilt landing pages. The tenth is
   ours and takes the ink card. */
.slg2-placements {
  list-style: none; margin: var(--fnd-s5) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--fnd-s3);
  counter-reset: none;
}
@media (min-width: 720px) { .slg2-placements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slg2-placement {
  background: var(--fnd-card);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  padding: var(--fnd-s5);
}
/* The numeral is the shared .fnd-stepnum since 2026-08-09. */
.fnd .slg2-placement__h { font-size: var(--fnd-t-h3); margin: 0 0 var(--fnd-s2); }
.slg2-placement p { margin: 0; font-size: var(--fnd-t-sm); }
.slg2-placement--us { background: var(--fnd-ink); border-color: var(--fnd-on-ink-rule); }
.fnd .slg2-placement--us h3 { color: var(--fnd-on-ink); }
.slg2-placement--us .fnd-stepnum { color: var(--fnd-accent); }
.slg2-placement--us p { color: var(--fnd-on-ink-soft); }
.fnd .slg2-placement--us p a:not(.fnd-btn) { color: #fff; }

/* Lists in the prose and inside the practice cards. */
.slg2-list { margin: 0 0 var(--fnd-s3); padding-left: 20px; }
.slg2-list li { margin-bottom: var(--fnd-s2); color: var(--fnd-text-soft); font-size: var(--fnd-t-sm); line-height: 1.6; }
.slg2-list li strong { color: var(--fnd-text); }
.slg2-list li::marker { color: var(--fnd-text-faint); }

/* The practice pair: Do on paper, Don't on ink. Named sides. The list
   keeps a real gap under its card title; zeroing it entirely was
   caught by the spacing check, because the card body's own rhythm rule
   loses to a two-class selector. */
.slg2-practices { margin-top: var(--fnd-s5); }
.slg2-practices .slg2-list { margin: var(--fnd-s3) 0 0; padding-left: 18px; }
.slg2-practices__dont .slg2-list li { color: var(--fnd-on-ink-soft); }

/* ------------------------------------------------------------------
   6. QUESTIONS
   ------------------------------------------------------------------ */
.fnd .slg2-qa__h { text-align: center; margin: 0 auto var(--fnd-s2); }
.slg2-qa__body { overflow: hidden; transition: height 260ms cubic-bezier(.22,1,.36,1); }
.slg2-qa__body p { margin: -4px 0 26px; }
.fnd .slg2-qa__list p a:not(.fnd-btn) { color: var(--fnd-accent-deep); }
.slg2-qa__list p code {
  font-size: .92em;
  background: var(--fnd-paper-2);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-xs);
  padding: 1px 6px;
  word-break: break-all;
}

/* ------------------------------------------------------------------
   7. MORE FREE YOUTUBE TOOLS
   Quiet link rows with a title and one line, above the close. The h3
   keeps the page's heading outline; it is drawn at link weight.
   ------------------------------------------------------------------ */
/* The rows are the shared .fnd-links, extended in foundation-devices to
   draw h3 + p rows so this ranking page keeps its heading outline. Only
   the gap above the list is this page's. */
.slg2-siblinks { margin-top: var(--fnd-s4); }

/* ------------------------------------------------------------------
   8. THE CLOSE
   The em in the heading is semantic emphasis carried at weight, not
   italics and not a second accent: the accent underline is spent once,
   in the hero.
   ------------------------------------------------------------------ */
.fnd .slg2-close h2 { max-width: 24ch; }
.slg2-close h2 em { font-style: normal; }
.slg2-close .fnd-btn { margin-top: var(--fnd-s5); }
.slg2-close__note span + span::before {
  content: "\00b7";
  margin: 0 9px;
  opacity: .6;
}