/* ==================================================================
   /tools/youtube-description-generator on the foundation look.
   Loaded ONLY when the 'tools-description-generator-fnd' redesign switch
   is on for this viewer (never in embed mode); the old page keeps its
   own three stylesheets.

   Layout unique to this page only. The first screen, the answer, the
   offer, the guide, the questions, the links, the close and the pinned
   bar are the shared tool kit (foundation-tools.css); the inputs, the
   pickers, the chips, the segment, the switches, the icon buttons and
   YouTube's description box (.fnd-ytcard--about) are the foundation's
   and are NOT redrawn here.

   The dg3-* ids in the markup are JAVASCRIPT HOOKS for
   /js/description-generator-fnd.js.

   Two tabs, the money calculator's way: each is a panel that becomes
   display: contents from 1024px, so its card, its parts and its answer
   join the kit's grid and the answer rides beside them.
   ================================================================== */

/* Anything the script hides stays hidden, whatever display the kit gave
   it (a card, a grid, a badge). */
.dg3 [hidden] { display: none !important; }

@media (min-width: 1024px) {
  .dg3-panel:not([hidden]) { display: contents; }
}

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .dg3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .dg3 h1.fnd-display,
.fnd .dg3-qa__list summary,
.fnd.dg3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
/* "Description Generator" stays together on the second line, so no word
   sits alone. That pair is about 10.6 times the type size wide, so the
   size follows the screen on a phone and the column beside the answer on
   a computer. */
.fnd .dg3 .fnd-tool-lead .fnd-display { max-width: none; }
@media (max-width: 499px) {
  .fnd .dg3 .fnd-tool-lead .fnd-display { font-size: min(2.5rem, calc((100vw - 32px) / 11.2)); }
}
@media (min-width: 1024px) {
  .fnd .dg3 .fnd-tool-lead { container-type: inline-size; }
  .fnd .dg3 .fnd-tool-lead .fnd-display { font-size: min(3.75rem, calc(100cqi / 11)); }
}
@media (max-width: 559px) {
  .fnd .dg3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}
.dg3-ask,
.dg3-ans { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* The kind of video and Long or Short side by side from 480px; the
   segment fills its half and matches the picker's 52px, so both labels
   and both answers read as one row. */
@media (min-width: 480px) {
  .fnd .dg3 .dg3-ask .fnd-fieldrow.dg3-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.fnd .dg3 .dg3-kind { display: flex; width: 100%; min-height: 52px; margin-top: 10px; }
.fnd .dg3 .dg3-kind button { flex: 1 1 0; }
.fnd .dg3 .fnd-input::placeholder,
.fnd .dg3 .fnd-textarea::placeholder { font-weight: 400; opacity: .7; }

/* Parts to include: the system's chips under a label. A part a Short
   cannot have stays in view, quietly, and cannot be picked. */
.fnd .dg3 .dg3-pick .fnd-label { margin-bottom: var(--fnd-s2); }
.fnd .dg3 .dg3-pick .fnd-chip-btn:disabled,
.fnd .dg3 .dg3-pick .fnd-chip-btn:disabled:hover {
  cursor: not-allowed; transform: none; box-shadow: none;
  background: var(--fnd-card); border-color: var(--fnd-edge);
  color: var(--fnd-text-faint); opacity: .55;
}

/* Start over and the part tools: text buttons grown to a 44px tap, in the
   accent so they read as things to press. */
.dg3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fnd-s4); margin-top: var(--fnd-s1); }
.fnd .dg3 .dg3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .dg3 .dg3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .dg3 .dg3-link i { margin-right: 4px; }
.fnd .dg3 .dg3-opt { margin-left: 4px; font-weight: 400; color: var(--fnd-text-faint); }

/* ------------------------------------------------------------------
   2. THE PARTS, each a card in the order YouTube shows them
   ------------------------------------------------------------------ */
.fnd .dg3 .dg3-more { margin-top: var(--fnd-s6); }
/* minmax(0, 1fr): a plain grid column grows to its widest child, and a card
   wider than a small phone is a sideways scroll. */
.dg3-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fnd-s3); }
.fnd .dg3 .dg3-part .fnd-card-body > * + * { margin-top: var(--fnd-s3); }
@media (max-width: 479px) {
  .fnd .dg3 .dg3-part .fnd-card-body { padding: var(--fnd-s4); }
}
/* The name on the left; up, down and remove on the right, their 44px
   hit areas bleeding into the card's padding so the row stays name high. */
.dg3-part__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fnd-s2); margin: -10px -10px 0 0; }
/* Type from .fnd-card-t; only the row's needs here. */
.fnd .dg3 .dg3-part__t { min-width: 0; text-wrap: balance; }
.dg3-part__tools { display: flex; flex: 0 0 auto; }
.fnd .dg3 .dg3-part .fnd-iconbtn { font-size: 15px; }
.fnd .dg3 .dg3-part .fnd-iconbtn:disabled,
.fnd .dg3 .dg3-part .fnd-iconbtn:disabled:hover { opacity: .3; cursor: default; background: none; }
.fnd .dg3 .dg3-part__help { margin: var(--fnd-s1) 0 0; text-wrap: pretty; }
.fnd .dg3 .dg3-part .fnd-field { margin-bottom: 0; }
/* The box grows with its words, so nothing hides behind an inner scroll
   on a phone. A browser without field-sizing keeps the rows in the markup. */
.fnd .dg3 .dg3-ta { display: block; width: 100%; resize: vertical; line-height: 1.55; field-sizing: content; min-height: 6.5em; max-height: 24em; }
.fnd .dg3 #dg3-chapters { font-variant-numeric: tabular-nums; }
.dg3-part__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--fnd-s4); }
.fnd .dg3 .dg3-part__foot .fnd-count { font-variant-numeric: tabular-nums; }
.fnd .dg3 .fnd-count.dg3-count-over { color: var(--fnd-warn); font-weight: 600; }
/* The links: two to a row from 560px, each box labelled. */
.dg3-links { display: grid; gap: var(--fnd-s3); }
@media (min-width: 560px) {
  .dg3-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   3. THE ANSWER: the description as YouTube shows it, on ink
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .fnd .dg3 .dg3-rail { margin-top: var(--fnd-s6); }
}
.fnd .dg3 .dg3-ans .fnd-tool-ans__top { flex-wrap: wrap; }
.fnd .dg3 .fnd-tool-ans__k { text-wrap: balance; }
.fnd .dg3 .dg3-yt .fnd-ytcard-t { text-wrap: balance; }
/* The kit cuts this line to one row. Here it holds the hashtags the member
   is checking, so it wraps instead. */
.fnd .dg3 .dg3-yt .fnd-ytcard-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-wrap: balance; }
/* Spaces stay as typed, because Copy keeps them. */
.fnd .dg3 .dg3-yt .fnd-ytcard-desc { white-space: pre-wrap; }
/* "...more" is a real button with a 44px press that bleeds into the box's
   padding, so the box stays YouTube's size. */
.fnd .dg3 .dg3-yt-more {
  margin: -12px; padding: 12px;
  background: none; border: 0; border-radius: 8px;
  text-align: left; cursor: pointer;
}
.fnd .dg3 .dg3-yt-more:hover { text-decoration: underline; }
.fnd .dg3 .dg3-yt-more:focus-visible { outline: 2px solid var(--fnd-accent); outline-offset: -4px; }
/* Opened: the whole description. In the rail beside the parts it scrolls
   inside the box past a third of the screen, so Copy stays in view. */
.fnd .dg3 .dg3-yt--open .fnd-ytcard-desc { max-height: none; overflow: visible; }
@media (min-width: 1024px) {
  .fnd .dg3 .dg3-yt--open .fnd-ytcard-desc { max-height: min(32vh, 320px); overflow-y: auto; }
}
.fnd .dg3 .fnd-ytcard-desc.dg3-yt-desc--empty { opacity: .6; }
/* A [blank] still to fill, marked so it cannot be missed. */
.dg3-blank {
  padding: 0 2px; border-radius: 3px;
  background: var(--fnd-accent-soft); color: var(--fnd-accent-deep);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.dg3-count {
  margin: var(--fnd-s3) 0 0;
  font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-soft);
  font-variant-numeric: tabular-nums;
}
.dg3-count--near { color: var(--fnd-on-ink-warn); }
.dg3-count--over { color: var(--fnd-on-ink-bad); font-weight: 700; }

/* The checks: one short line each, a mark for good, a tip or a fix. */
.dg3-chk { display: grid; gap: 6px; margin: var(--fnd-s3) 0 0; padding: 0; list-style: none; }
.dg3-chk__i {
  display: flex; align-items: baseline; gap: var(--fnd-s2);
  font-size: var(--fnd-t-meta); line-height: 1.45; color: var(--fnd-on-ink-soft);
  text-wrap: pretty;
}
.dg3-chk__i > i { flex: 0 0 14px; text-align: center; font-size: 13px; }
.dg3-chk__t { min-width: 0; }
.dg3-chk__i--ok > i { color: var(--fnd-on-ink-ok); }
.dg3-chk__i--tip > i { color: var(--fnd-on-ink-warn); }
.dg3-chk__i--no { color: var(--fnd-on-ink); }
.dg3-chk__i--no > i { color: var(--fnd-on-ink-bad); }

.fnd .dg3 .dg3-copy { margin-top: var(--fnd-s4); }
@media (max-width: 559px) {
  .fnd .dg3 .dg3-copy { width: 100%; }
}
/* Notes on ink take the ink colours. */
.fnd .dg3 .fnd-ink-surface .fnd-tool-note { color: var(--fnd-on-ink-soft); text-wrap: pretty; }
.fnd .dg3 .fnd-ink-surface .fnd-tool-note i { color: var(--fnd-accent); }

.fnd .dg3 .dg3-offer .fnd-tool-offer__t { text-wrap: balance; }
/* The AI tab's title is a p, so it does not repeat the heading above it. It
   keeps the heading's look. */
.fnd .dg3 .dg3-offer p.fnd-tool-offer__t { font-family: var(--fnd-display-font); font-weight: 800; }
.fnd .dg3 .dg3-offer .fnd-tool-offer__p { text-wrap: pretty; }

/* ------------------------------------------------------------------
   4. WRITE IT WITH AI
   ------------------------------------------------------------------ */
.dg3-switches { display: grid; gap: var(--fnd-s1); }
.fnd .dg3 .fnd-switch:has(input:disabled) { cursor: not-allowed; }
.fnd .dg3 .dg3-ai-go { margin-top: var(--fnd-s5); }
.fnd .dg3 .dg3-ai-go svg { flex: 0 0 auto; padding: 2px; background: #fff; border-radius: 50%; box-sizing: content-box; }
@media (max-width: 559px) {
  .fnd .dg3 .dg3-ai-go { width: 100%; }
}
.fnd .dg3 .dg3-ai-free { margin-top: var(--fnd-s2); }
.fnd .dg3 .dg3-ai-err a { font-weight: 600; color: var(--fnd-accent-deep); padding-block: 13px; }
.fnd .dg3 .dg3-ai-err--ok i { color: var(--fnd-ok); }
.fnd .dg3 .dg3-ai-studio a { color: var(--fnd-accent-deep); font-weight: 600; padding-block: 13px; }
.fnd .dg3 .dg3-ai-err a:hover,
.fnd .dg3 .dg3-ai-studio a:hover { text-decoration: underline; }

.dg3-ans--ai .dg3-badge { flex: 0 0 auto; }
.dg3-res + .dg3-res { margin-top: var(--fnd-s5); padding-top: var(--fnd-s5); border-top: 1px solid var(--fnd-on-ink-rule); }
.dg3-res__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--fnd-s3);
  margin: 0 0 var(--fnd-s2);
  font-size: var(--fnd-t-meta); color: var(--fnd-on-ink-soft); font-variant-numeric: tabular-nums;
}
.dg3-res__n { font-weight: 700; color: var(--fnd-on-ink); }
.fnd .dg3 .dg3-res__copy { margin-top: var(--fnd-s3); }
.dg3-ai-chnote { margin: var(--fnd-s4) 0 0; font-size: var(--fnd-t-meta); line-height: 1.5; color: var(--fnd-on-ink-soft); text-wrap: pretty; }
.dg3-ai-chnote i { margin-right: 4px; color: var(--fnd-accent); }
.dg3-ans--ai .dg3-ai-list { transition: opacity 150ms ease; }
.fnd-tool-ans--wait .dg3-ai-list { opacity: .35; }

/* ------------------------------------------------------------------
   5. THE PINNED BAR, below 1024px
   ------------------------------------------------------------------ */
@media (max-width: 359px) {
  .fnd .dg3 .dg3-peek-go { display: none; }
}

/* ------------------------------------------------------------------
   6. THE GUIDE
   ------------------------------------------------------------------ */
.fnd .dg3-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));
}
.dg3-guide .fnd-tool-read .fnd-h2:focus { outline: none; }
@media (max-width: 767px) {
  .fnd .dg3-guide .fnd-tool-read .fnd-h2 { margin-top: var(--fnd-s7); }
}
/* A link inside a sentence grows to a 44px press without moving the text. */
.fnd .dg3-guide .fnd-tool-read p a:not(.fnd-btn),
.fnd .dg3-guide .fnd-tool-read li a:not(.fnd-btn) { padding-block: 13px; }

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