/* The YouTube thumbnail preview (/youtube-thumbnail-preview), on the previewers' tool.css: the editor holds the image,
   the title and YouTube's checks; the well holds each place YouTube shows a thumbnail, at YouTube's sizes (r/yt.css for
   the type and colours, the cards measured in thumb.js). This file only places them and draws home, search and the
   Shorts shelves. */

/* The editor: a drop tile, then the chosen image's row, the title, the checks. */
.ytp .editor { border-radius: 12px; transition: background .15s ease-out, box-shadow .15s ease-out; }
.ytp .editor.drop { background: var(--muted); box-shadow: 0 0 0 12px var(--muted); }
.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 168px;
  padding: 24px; border: 0; border-radius: 12px; background: var(--muted); color: var(--foreground); cursor: pointer; transition: box-shadow .15s ease-out;
}
.pick b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.pick span { font-size: 14.5px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) { .pick:hover { box-shadow: inset 0 0 0 1px var(--border); } }
.pick .coarse { display: none; }
@media (pointer: coarse) { .pick .fine { display: none; } .pick .coarse { display: inline; } }
.pick[hidden], .chosen[hidden] { display: none; }
.chosen { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.chosen img { flex: none; width: 96px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--muted); }
.chosen span { flex: 1; min-width: 0; font-size: 14.5px; color: var(--foreground-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl { display: block; margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.ttl input {
  display: block; width: 100%; height: 48px; margin-top: 6px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--background);
  font-size: 16px; color: var(--foreground); outline: none;
}
.ttl input:focus-visible { border-color: var(--foreground); }
.ttl input::placeholder { color: var(--muted-foreground); opacity: 1; }
.hint { margin: 10px 0 0; font-size: 14.5px; color: var(--destructive); }
.hint:empty { display: none; }
.verdict { margin: 24px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.checks li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.45; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: #2f8f4e; }
.checks li.warn::before { background: #c98a12; }
.checks li.bad::before { background: var(--destructive); }
.checks b { font-weight: 600; }
.checks span { color: var(--foreground-soft); }

/* The well: each place in a column, its name over it and its size under it. */
/* On a computer the places wrap, two to a row where they fit; search, the widest, takes a row of its own. */
.ytp .stage { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 36px 40px; padding: 40px 32px; }
.ytp .stage > .wide { flex-basis: 100%; }
.ytp .shown > .said { max-width: 420px; }
.ytp .stage[data-view="desktop"] .on-phone, .ytp .stage[data-view="phone"] .on-desk { display: none; }
.ytp .shown { align-items: flex-start; }
.ytp .shown { margin: 0; }
.ytp .said { margin-top: 10px; font-size: 14px; color: var(--muted-foreground); }
.ytbox { position: relative; overflow: hidden; border-radius: 12px; }
.ytbox > .ytr { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 12px; }
.ytbox > .ytr { box-sizing: content-box; }
.ytbox > .ytr-mcard { padding: 0 0 12px; }

/* YouTube's dark theme, the same values as yt.css's. */
.ytx-dark .ytr { --yt-bg: #0f0f0f; --yt-tx: #f1f1f1; --yt-tx2: #aaa; --yt-hair: rgba(255,255,255,.1); --yt-line: rgba(255,255,255,.2); --yt-tone: rgba(255,255,255,.1); --yt-sub-bg: #f1f1f1; --yt-sub-tx: #0f0f0f; }

/* Home, on a computer: 347.3 wide, the picture 16:9 with radius 12, avatar 36, the title 16/22 weight 500 in two lines. */
.ytx-home { width: 347.3px; }
.ytx-home .ytr-th { height: 195.4px; border-radius: 12px; }
.ytx-hrow { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 12px 24px 0 0; }
.ytx-hrow b { font: 500 16px/22px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin-bottom: 4px; }
.ytx-hrow small { display: block; font-size: 14px; line-height: 20px; color: var(--yt-tx2); }
.ytx-hrow > .ytr-i { position: absolute; right: -8px; top: 6px; }

/* Search, on a computer: the picture 500 × 280.5 radius 12, then a 636 column 16 after it. */
.ytx-search { display: grid; grid-template-columns: 500px 636px; column-gap: 16px; width: 1152px; }
.ytx-search .ytr-th { height: 280.5px; border-radius: 12px; }
.ytx-st { display: flex; flex-direction: column; min-width: 0; }
.ytx-st b { font: 400 18px/26px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ytx-st > small { font-size: 12px; line-height: 18px; color: var(--yt-tx2); }
.ytx-ch { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.ytx-ch small { font-size: 12px; line-height: 18px; color: var(--yt-tx2); }

/* The Shorts shelf on a computer: 217.6 × 326.4, radius 8, the title 16/22 weight 500 8 under it. */
.ytx-shelf { width: 217.6px; }
.ytx-shelf .ytr-th { height: 326.4px; border-radius: 8px; }
.ytx-sht { padding: 8px 36px 0 0; }
.ytx-sht b { font: 500 16px/22px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ytx-sht small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--yt-tx2); }

/* The Shorts shelf on a phone: 175 × 262.5, radius 8, shaded at the foot, the title 14/20 white over it. */
.ytx-mshelf { width: 175px; }
.ytx-mshelf .ytr-th { height: 262.5px; border-radius: 8px; }
.ytx-mshelf .ytr-th::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0, transparent 30%); }
.ytx-over { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 6px; color: #fff; }
.ytx-over b { font: 400 14px/20px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ytx-over small { display: block; font-size: 12px; line-height: 18px; }
.ytx-mby { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 6px; padding: 8px 0 0 0; }
.ytx-mby span { display: block; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytx-mby small { display: block; font-size: 12px; line-height: 18px; color: var(--yt-tx2); }

/* Below the tool: YouTube's rules, as the guide has them. */
.ytrules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.ytrules div { padding: 14px 0; border-top: 1px solid var(--border); }
.ytrules dt { font-weight: 600; }
.ytrules dd { margin: 4px 0 0; color: var(--foreground-soft); }

@media (max-width: 759px) {
  .ytp .stage { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 24px 0; gap: 28px; }
  .ytp .shown > .said { max-width: none; }
  .ytp .shown > .where, .ytp .shown > .said { padding: 0 20px; }
  .ytp .shown { align-items: center; }
  .ytbox { border-radius: 0; }
  .ytrules { grid-template-columns: 1fr; }
}