/* Thumbnail Maker workspace: upload control in the first screen, one set of limits next to it. */

/* The shared guest note repeats limits that now sit under the drop zone. */
.thumbnail-maker #toolState > .guest-note { display: none; }

/* Compact intro */
.thumbnail-maker main { margin-top: 28px; }
.thumbnail-maker #toolState .hero { display: block; margin-bottom: 18px; }
.thumbnail-maker #toolState .hero h1 { margin: 6px 0 8px; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.02; letter-spacing: -.045em; }
.thumbnail-maker #toolState .hero p:last-child { max-width: 640px; font-size: 16px; line-height: 1.5; }

/* The workspace heading repeated the page title */
.thumbnail-maker .workspace-heading { display: none; }
.thumbnail-maker .workspace .steps { margin: 0 0 18px; }

/* Drop zone */
.thumbnail-maker #dropZone { min-height: 170px; padding: 24px; }
.thumbnail-maker .drop-icon svg { display: block; }
.thumbnail-maker #dropZone strong { font-size: 17px; }
.thumbnail-maker #dropZone:focus-within { outline: 3px solid var(--blue, #1463ff); outline-offset: 3px; }
.thumbnail-maker .drop-zone-small:focus-within { outline: 3px solid var(--blue, #1463ff); outline-offset: 3px; }

/* One line of limits under the drop zone */
.ws-tm-limits { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 12px 0 4px; color: #4f5d72; font-size: 13px; line-height: 1.5; text-align: center; }
.ws-tm-limits > span:not(.ws-tm-legal)::after { content: "·"; margin: 0 8px; color: #9aa6b8; }
.ws-tm-limits > span:nth-last-child(2)::after { content: none; }
.ws-tm-limits .ws-tm-legal { flex-basis: 100%; color: var(--muted, #627087); font-size: 12px; }
.ws-tm-limits a { color: #104db9; font-weight: 700; text-decoration: underline; }
.ws-tm-limits a:focus-visible { outline: 2px solid var(--blue, #1463ff); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 680px) {
    /* Header: one row for brand and account, the tool finder link below it */
    .thumbnail-maker .tool-header { min-height: 0; padding-block: 6px; row-gap: 0; }
    .thumbnail-maker .tool-header nav { flex-direction: row; align-items: center; gap: 8px; }
    .thumbnail-maker .tool-header .app-tool-search-link { flex-basis: 100%; min-height: 40px; display: flex; align-items: center; font-size: 14px; }
    .thumbnail-maker main { margin-top: 14px; }
    .thumbnail-maker #toolState .hero { margin-bottom: 12px; }
    .thumbnail-maker #toolState .hero h1 { font-size: 30px; margin: 4px 0 6px; }
    .thumbnail-maker #toolState .hero p:last-child { font-size: 15px; }
    .thumbnail-maker .workspace { padding: 14px; }
    .thumbnail-maker .workspace .steps { margin-bottom: 12px; }
    .thumbnail-maker .workspace .steps li { min-height: 40px; }
    .thumbnail-maker #dropZone { min-height: 150px; padding: 18px 14px; }
    .ws-tm-limits { flex-direction: column; gap: 2px; }
    .ws-tm-limits > span:not(.ws-tm-legal)::after { content: none; }
    .ws-tm-limits .ws-tm-legal { margin-top: 4px; }
}