/* ==================================================================
   /tools/youtube-chapter-generator on the foundation look.
   Loaded ONLY when the 'tools-chapter-generator-fnd' redesign switch is
   on for this viewer; the old page keeps its own stylesheets.

   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); the textarea, inputs, chips, badges and the
   numbered heads are the foundation's and are NOT redrawn here.

   Copied in part from the timestamp link page
   (tools-timestamp-link-fnd.css: the clock, the rules, the code panel),
   never shared, so neither page can move the other. One centred column
   on a phone and a tablet; on a laptop the box you type in sits on the
   left and the checked chapters on the right, so the check is in view
   while you type.
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE FIRST SCREEN
   ------------------------------------------------------------------ */
.fnd .cg3 .fnd-tool-lead,
.fnd .cg3 .cg3-ask,
.fnd .cg3 .cg3-out { max-width: 760px; margin-left: auto; margin-right: auto; }

/* The name and its line, centred over the tool they introduce. */
.fnd .cg3 .fnd-tool-lead { text-align: center; }
.fnd .cg3 .fnd-tool-lead .fnd-display,
.fnd .cg3 .fnd-tool-lead__sub { margin-left: auto; margin-right: auto; text-align: center; }
.fnd .cg3 .fnd-tool-lead__sub { text-wrap: balance; }
.fnd .cg3 h1.fnd-display,
.fnd .cg3-qa__list summary,
.fnd.cg3-page .fnd-tool-close .fnd-btn { text-wrap: balance; }
@media (max-width: 413px) {
  .fnd .cg3 .fnd-tool-lead .fnd-display { font-size: 2.15rem; }
}
@media (max-width: 559px) {
  .fnd .cg3 .fnd-tool-lead { margin-bottom: var(--fnd-s4); }
}

@media (min-width: 1024px) {
  .cg3-top .fnd-tool-top__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "lead lead" "ask ans";
    column-gap: var(--fnd-s6);
  }
  .fnd .cg3 .fnd-tool-lead { max-width: 960px; }
  .fnd .cg3 .fnd-tool-lead .fnd-display { max-width: none; }
  .fnd .cg3 .cg3-ask,
  .fnd .cg3 .cg3-out { max-width: none; margin: 0; align-self: start; }
  .fnd .cg3 .cg3-out { grid-area: ans; }
}
.cg3-ask,
.cg3-out { scroll-margin-top: calc(var(--header-height, 61px) + 16px); }

/* ------------------------------------------------------------------
   2. THE BOX: type or paste, a starter, the video's length
   ------------------------------------------------------------------ */
.cg3-edhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--fnd-s3); }
.fnd .cg3 .cg3-edhead__k { margin-bottom: 0; }
.cg3-saved { font-size: var(--fnd-t-meta); color: var(--fnd-text-faint); }
.cg3-saved i { margin-right: 2px; color: var(--fnd-ok); }
.cg3-saved[hidden] { display: none; }

/* Monospace so the times line up the way they will in the description. */
.fnd .cg3 .cg3-ed {
  display: block; width: 100%; margin-top: var(--fnd-s2);
  min-height: 176px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fnd-t-sm); line-height: 1.7;
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-ed { margin-top: var(--fnd-s2); }
.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-help,
.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-status,
.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-skip,
.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-note { margin-top: var(--fnd-s2); }
.fnd .cg3 .cg3-help { text-wrap: pretty; }

/* What the box read: a count and whether it is ready, said plainly. */
.fnd .cg3-status {
  margin: 0; font-size: var(--fnd-t-sm); line-height: 1.5; font-weight: 600;
  color: var(--fnd-text); text-wrap: pretty;
}
.cg3-status i { margin-right: 4px; }
.cg3-status--ok i { color: var(--fnd-ok); }
.cg3-status--no i { color: var(--fnd-danger); }
.cg3-status[hidden],
.cg3-skip[hidden],
.cg3-note[hidden] { display: none; }
.fnd .cg3 .cg3-skip,
.fnd .cg3 .cg3-note { overflow-wrap: anywhere; text-wrap: pretty; }
.fnd .cg3 .cg3-note .cg3-link { margin-left: 2px; }

.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-starters { margin-top: var(--fnd-s5); }
.fnd .cg3 .cg3-starters__k { margin: 0 0 var(--fnd-s2); }

/* Video length: hours, minutes and seconds like a clock, each box with
   its word under it, a colon between. */
.fnd .cg3 .fnd-tool-form .fnd-card-body > .cg3-len { margin-top: var(--fnd-s5); }
.fnd .cg3-len { margin: 0; padding: 0; border: 0; min-width: 0; }
.fnd .cg3-len > .fnd-label { padding: 0; margin-bottom: var(--fnd-s2); }
.cg3-len__opt { font-weight: 400; color: var(--fnd-text-soft); }
.cg3-clock { display: flex; align-items: flex-start; gap: var(--fnd-s2); }
.cg3-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.fnd .cg3 .cg3-num {
  width: 72px; flex: 0 0 auto;
  font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.fnd .cg3 .cg3-num::placeholder { font-weight: 400; }
.cg3-unit__w { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }
/* As tall as the 52px box, so the colon sits on its middle. */
.cg3-colon { line-height: 52px; font-weight: 700; color: var(--fnd-text-faint); }
@media (max-width: 419px) {
  .fnd .cg3 .cg3-clock .cg3-num { width: 64px; }
}
.fnd .cg3 .cg3-len-help { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }

/* ------------------------------------------------------------------
   3. THE ANSWER: the chapter bar, the rules, the list and Copy
   ------------------------------------------------------------------ */
.fnd .cg3 .cg3-out { margin-top: var(--fnd-s5); }
@media (min-width: 1024px) {
  .fnd .cg3 .cg3-out { margin-top: 0; }
}
.cg3-out.cg3-out--in { animation: cg3-in 320ms cubic-bezier(.22, 1, .36, 1); }
@keyframes cg3-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cg3-out.cg3-out--in { animation: none; }
}

/* The example: a badge saying so, and nothing to copy. */
.fnd .cg3-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);
}
.cg3-out:not(.cg3-out--example) .cg3-exnote,
.cg3-out--example .cg3-row { display: none; }

/* Ready or not, in one line at the top of the card. */
.fnd .cg3-state {
  margin: 0;
  font-family: var(--fnd-display-font); font-weight: 700;
  font-size: var(--fnd-t-body); line-height: 1.4; text-wrap: pretty;
}
.cg3-state i { margin-right: 4px; }
.fnd .cg3-state--ok { color: var(--fnd-ok); }
.fnd .cg3-state--no { color: var(--fnd-text); }
.cg3-state--no i { color: var(--fnd-danger); }

/* The chapter bar, drawn like YouTube's player: a dark strip, the bar
   split into one piece per chapter, then the time and chapter name. The
   bar's press area is 44px tall around a thin visible track. */
.cg3-player {
  margin-top: var(--fnd-s3);
  padding: 0 var(--fnd-s3) var(--fnd-s2);
  background: var(--fnd-ink); color: var(--fnd-on-ink);
  border-radius: var(--fnd-r-sm);
  user-select: none; -webkit-user-select: none;
}
.cg3-bar {
  display: flex; align-items: center; gap: 2px;
  height: 44px; cursor: pointer; touch-action: pan-y;
  border-radius: 2px;
}
.cg3-bar:focus { outline: none; }
.cg3-bar:focus-visible { outline: 2px solid var(--fnd-on-ink); outline-offset: 2px; }
.cg3-seg {
  flex: 1 1 0; min-width: 3px; height: 5px;
  background: rgba(255, 255, 255, .32); border-radius: 1px;
  transition: height 120ms ease, background-color 120ms ease;
}
.cg3-seg--on { height: 9px; background: var(--fnd-on-ink); }
.cg3-seg--bad { background: var(--fnd-danger); }
.cg3-seg--on.cg3-seg--bad { background: var(--fnd-danger); }
.cg3-ctrl {
  display: flex; align-items: center; gap: var(--fnd-s2);
  min-height: 28px; min-width: 0;
  font-size: var(--fnd-t-meta); line-height: 1.3;
}
.cg3-ctrl__play { flex: 0 0 auto; font-size: 13px; }
.cg3-ctrl__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .86; }
.cg3-ctrl__dot { flex: 0 0 auto; opacity: .6; }
.cg3-ctrl__ch { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cg3-ctrl__chev { flex: 0 0 auto; font-size: 12px; opacity: .7; }
.fnd .cg3 .cg3-bar-help { margin: var(--fnd-s2) 0 0; text-wrap: pretty; }

/* YouTube's four rules, each ticked or crossed, with a fix beside a miss. */
.cg3-rules { list-style: none; margin: var(--fnd-s4) 0 0; padding: 0; }
.cg3-rule {
  display: flex; align-items: baseline; gap: var(--fnd-s2);
  padding: 3px 0;
  font-size: var(--fnd-t-sm); line-height: 1.5; color: var(--fnd-text);
  text-wrap: pretty;
}
.cg3-rule > i { flex: 0 0 auto; }
.cg3-rule > span { min-width: 0; overflow-wrap: anywhere; }
.cg3-rule--ok > i { color: var(--fnd-ok); }
.cg3-rule--no > i { color: var(--fnd-danger); }
.cg3-rule--ok { color: var(--fnd-text-soft); }
.fnd .cg3 .cg3-rule .cg3-fix { margin-left: 4px; }

/* Worth a look: things that do not stop chapters but may surprise. */
.cg3-notes { list-style: none; margin: var(--fnd-s2) 0 0; padding: 0; }
.cg3-notes[hidden] { display: none; }
.cg3-notes li {
  display: flex; align-items: baseline; gap: var(--fnd-s2);
  padding: 3px 0;
  font-size: var(--fnd-t-sm); line-height: 1.5; color: var(--fnd-text);
  text-wrap: pretty;
}
.cg3-notes li > i { flex: 0 0 auto; color: var(--fnd-warn); }
.cg3-notes li > span { min-width: 0; overflow-wrap: anywhere; }

/* The clean list on its soft panel, set like the description it goes in. */
.cg3-codehead { display: flex; align-items: center; min-height: 44px; margin-top: var(--fnd-s4); }
.fnd .cg3-codehead__k { margin: 0; font-size: var(--fnd-t-meta); font-weight: 600; color: var(--fnd-text-soft); }
.fnd .cg3-code {
  margin: var(--fnd-s1) 0 0;
  padding: var(--fnd-s3);
  max-height: 260px; overflow: auto;
  background: var(--fnd-paper-2); border-radius: var(--fnd-r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fnd-t-sm); line-height: 1.6; color: var(--fnd-text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  text-wrap: pretty;
}
.cg3-code:focus-visible { outline: 2px solid var(--fnd-accent-deep); outline-offset: 2px; }
@media (max-width: 559px) {
  .fnd .cg3 .cg3-out .cg3-code { max-height: 200px; }
}
.fnd .cg3 .cg3-stats,
.fnd .cg3 .cg3-advice { margin: var(--fnd-s2) 0 0; text-wrap: pretty; font-variant-numeric: tabular-nums; }
.fnd .cg3 .cg3-stats--warn { color: var(--fnd-text); font-weight: 600; }
.fnd .cg3 .cg3-stats--danger { color: var(--fnd-danger); font-weight: 600; }
.cg3-advice[hidden],
.cg3-stats[hidden] { display: none; }
/* Focus lands here after a fix, so the place in the card is kept. */
.cg3-state:focus:not(:focus-visible) { outline: none; }

.cg3-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fnd-s2) var(--fnd-s4); margin-top: var(--fnd-s4); }
/* While the list breaks a rule: a plain warning over a quieter Copy. */
.fnd .cg3 .cg3-copywarn { margin: var(--fnd-s4) 0 0; }
.cg3-copywarn[hidden] { display: none; }
.cg3-copywarn:not([hidden]) + .cg3-row { margin-top: var(--fnd-s2); }
.fnd .cg3 .cg3-copy[data-copied="true"] { background: var(--fnd-ok); border-color: var(--fnd-ok); }
@media (max-width: 559px) {
  .fnd .cg3 .cg3-copy { flex: 1 1 100%; justify-content: center; }
}
/* Text buttons grown to a 44px tap, in the accent so they read as things
   to press. */
.fnd .cg3-page .cg3-link.fnd-textbtn { --fnd-hit-y: 14px; font-size: var(--fnd-t-meta); color: var(--fnd-accent-deep); }
.fnd .cg3-page .cg3-link.fnd-textbtn:hover { color: var(--fnd-text); }
.fnd .cg3-page .cg3-link[hidden] { display: none; }

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

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

/* The three examples: a small head, the list, and a way into the box. */
.cg3-ex { margin-top: var(--fnd-s5); }
.fnd .cg3-guide .cg3-ex__h { margin: 0; }
.fnd .cg3-guide .cg3-ex__code { margin-top: var(--fnd-s2); max-height: none; }
.fnd .cg3-guide .cg3-ex__load { margin-top: 2px; }