/* ==========================================================================
   YouTube Thumbnail Downloader (tool.css)
   Only styles unique to this tool, scoped under .fe-youtube-thumbnail-downloader-tool.
   Design tokens only (var(--fe-...)). Parts listed in AGENTS.md > Tool-only parts.
   Layout (owner's picks): big best-size preview + list of the other sizes;
   empty frames before a link is pasted; HD gets all buttons, others Download + More.
   ========================================================================== */
.fe-youtube-thumbnail-downloader-tool .fe-thumb-form { display: flex; flex-wrap: wrap; gap: var(--fe-s2); align-items: center; margin: 0; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-form .fe-input { flex: 1 1 320px; min-width: 0; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--fe-s2); }

.fe-youtube-thumbnail-downloader-tool .fe-thumb-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--fe-s4); margin-top: var(--fe-s4); align-items: start; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-main { display: grid; gap: var(--fe-s2); padding: var(--fe-s3); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-lg); background: var(--fe-bg); }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-list { display: grid; gap: var(--fe-s2); margin: 0; padding: 0; list-style: none; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--fe-s3); align-items: center; padding: var(--fe-s2); border: 1px solid var(--fe-border); border-radius: var(--fe-radius-lg); background: var(--fe-bg); }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-missing { opacity: .6; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-info { display: grid; gap: 6px; min-width: 0; }

/* Picture frames: dashed until a thumbnail fills them */
.fe-youtube-thumbnail-downloader-tool .fe-thumb-frame { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--fe-s2); border: 2px dashed var(--fe-border); border-radius: var(--fe-radius); color: var(--fe-muted); font-size: var(--fe-text-sm); text-align: center; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-frame-sm { aspect-ratio: 4 / 3; padding: 0; font-size: var(--fe-text-xs); }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-frame:has(img) { padding: 0; border: 0; aspect-ratio: auto; }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-img { display: block; width: 100%; height: auto; border: 1px solid var(--fe-border); border-radius: var(--fe-radius); }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-size { font-weight: var(--fe-weight-bold); color: var(--fe-text); }
.fe-youtube-thumbnail-downloader-tool .fe-thumb-btns { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 760px) {
  .fe-youtube-thumbnail-downloader-tool .fe-thumb-grid { grid-template-columns: 1fr; }
}
/* Small phones: narrower preview so Download and More stay side by side */
@media (max-width: 360px) {
  .fe-youtube-thumbnail-downloader-tool .fe-thumb-row { grid-template-columns: 72px minmax(0, 1fr); gap: var(--fe-s2); }
}