/* The YouTube title checker (/youtube-title-checker), on the counters' sheet (counter.css): the title in its well, the
   count in a row under it with where YouTube cuts it and the pennant, then YouTube's own cards (r/yt.css) on a well.
   The cards keep every size of YouTube's; this file only places them. */
.ytt .tool { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px; }
.ytt .tool .write textarea, .ytt .tool .marks { min-height: 104px; }

/* The count, the cut and the pennant in one row: the count on the left in the counters' smaller set. */
.ytt .tally { position: static; display: grid; grid-template-columns: 306px minmax(0, 1fr) auto; align-items: center; gap: 0 48px; padding-top: 36px; }
.ytt .left { display: flex; align-items: baseline; gap: 12px; }
.ytt .left b { font-size: 64px; line-height: .9; margin-left: -0.035em; }
.ytt .left span { margin: 0; font-size: 18px; }
.ytt .meter { margin-top: 14px; }
.ytt .more { margin: 0; }
.ytt .next { margin: 0; }

/* YouTube's cards on a well: Up next as its column shows it, the phone's list at 390. */
.ytcards { display: flex; justify-content: center; align-items: flex-start; gap: 44px; margin-top: 32px; padding: 40px; border-radius: 16px; background: var(--well); }
.ytcard { margin: 0; min-width: 0; }
.ytcard figcaption { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ytframe { overflow: hidden; border-radius: 12px; background: #fff; }
.on-desk .ytframe { padding: 12px; }

@media (max-width: 1119px) {
  .ytt .tally { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; }
  .ytt .sum { grid-column: 1 / -1; max-width: 360px; }
  .ytcards { gap: 32px; padding: 32px 24px; }
}
@media (max-width: 899px) {
  .ytt .sum { position: static; order: 0; margin: 0; padding: 0; background: none; }
  .ytcards { flex-direction: column; align-items: center; }
}
@media (max-width: 759px) {
  .ytt .tool { padding: 20px 20px 0; }
  .ytt .tool .write textarea, .ytt .tool .marks { min-height: 104px; }
  .ytt .tally { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 28px; }
  .ytt .sum { max-width: none; }
  .ytt .left span { font-size: 16px; }
  .ytt .more { margin-top: 20px; }
  .ytt .next { margin-top: 24px; }
  /* On a phone, the phone's card alone, edge to edge as the app draws it. */
  .ytcards { display: block; margin: 28px -20px 0; padding: 20px 0 0; border-radius: 0 0 var(--r-sheet) var(--r-sheet); overflow: hidden; }
  .ytcards .on-desk { display: none; }
  .ytcards figcaption { padding: 0 20px; }
  .on-phone .ytframe { border-radius: 0 0 var(--r-sheet) var(--r-sheet); }
}