/* ============================================================
   style/thumbnail-downloader.css
   Page-scoped styles for frontend/thumbnail-downloader.html.

   Only what this tool's own markup needs. Buttons reuse the shared
   .utl-process-btn / .utl-download-btn, toasts reuse .toast from
   main.css, and the page frame reuses .pagebox / .tool-area /
   .sidebar-ads. Everything below is prefixed .tdl- or scoped under
   body.tdl-page, so nothing can reach another tool.
   ============================================================ */

/* main.css positions .backtohome absolutely, which drops it out of the
   flow and onto this page's heading. Put it back in the flow here only. */
body.tdl-page .backtohome {
    position: relative;
    margin: 0 0 18px;
}

body.tdl-page .tool-area {
    padding-top: 12px;
    min-width: 0;          /* lets the flex child shrink instead of overflowing */
}

/* ── Header ────────────────────────────────────────────── */
.tdl-header {
    margin-bottom: 26px;
}

.tdl-title {
    font-size: 34px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 12px;
}

.tdl-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
}

.tdl-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #64748b;
    max-width: 760px;
}

/* ── Input ─────────────────────────────────────────────── */
.tdl-form {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.tdl-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.tdl-input-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.tdl-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;          /* without this a long URL stretches the row */
}

.tdl-input {
    width: 100%;
    /* main.css resets margin and padding globally but not box-sizing, so the
       padding below would otherwise be added on top of the 100% width and push
       the field past the edge of the screen on narrow viewports. */
    box-sizing: border-box;
    padding: 13px 40px 13px 14px;
    font-family: inherit;
    font-size: 15px;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    /* Long URLs stay inside the field instead of widening the layout. */
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tdl-input::placeholder {
    color: #94a3b8;
}

.tdl-input:focus {
    outline: none;
    border-color: #ff7a1a;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.tdl-input[aria-invalid="true"] {
    border-color: #dc2626;
    background: #fef2f2;
}

.tdl-input:read-only {
    background: #f8fafc;
    color: #64748b;
}

.tdl-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tdl-clear:hover {
    background: #f1f5f9;
    color: #334155;
}

.tdl-submit {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tdl-submit.is-busy {
    cursor: progress;
}

.tdl-hint {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #94a3b8;
}

.tdl-error {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 9px;
}

/* Paired with the icon and colour so errors never rely on colour alone. */
.tdl-error::before {
    content: '\f06a';                       /* circle-exclamation */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    margin-right: 8px;
}

.tdl-status {
    margin-top: 14px;
    font-size: 13.5px;
    color: #0369a1;
    text-align: center;
    min-height: 20px;
}

/* ── Results ───────────────────────────────────────────── */
.tdl-results {
    margin-top: 28px;
}

.tdl-results-head,
.tdl-all-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tdl-all-head {
    margin-top: 32px;
    align-items: center;
}

.tdl-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.tdl-source {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    padding: 5px 12px;
    background: #f1f5f9;
    border-radius: 999px;
}

/* Recommended thumbnail — the primary result presentation */
.tdl-best {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
    gap: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.tdl-best-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 222px;   /* was 200px — 10px padding + 1px border */
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

/* Aspect ratio is never forced — the image sizes itself inside the frame. */
.tdl-best-img,
.tdl-card-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tdl-best-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.tdl-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.tdl-best-quality {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

/* ── Metadata list ─────────────────────────────────────── */
.tdl-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin-bottom: 18px;
    font-size: 13.5px;
}

.tdl-meta dt {
    color: #94a3b8;
    font-weight: 600;
}

.tdl-meta dd {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tdl-meta-compact {
    gap: 3px 10px;
    margin-bottom: 12px;
    font-size: 12.5px;
}

/* ── Buttons ───────────────────────────────────────────── */
/* main.css ships .utl-download-btn as display:none for the tools that
   reveal it after processing; here it is present from the start. */
.tdl-download-btn {
    display: inline-flex !important;
    width: 100%;
    margin-top: 0;
}

.tdl-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.tdl-btn-row-tight {
    margin-top: 0;
}

.tdl-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tdl-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

.tdl-btn-primary {
    color: #0369a1;
    border-color: #bae6fd;
    background: #f0f9ff;
}

.tdl-btn-reset:hover {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

.tdl-btn:focus-visible,
.tdl-clear:focus-visible,
.tdl-submit:focus-visible,
.tdl-download-btn:focus-visible,
.tdl-input:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: 2px;
}

/* ── Result grid ───────────────────────────────────────── */
.tdl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    list-style: none;
}

.tdl-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tdl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
}

/* The recommended card is marked with a label as well as a border, so the
   distinction is not carried by colour alone. */
.tdl-card.is-recommended {
    border-color: #86efac;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.14);
}

.tdl-card-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 166px;   /* was 150px — 8px padding */
    padding: 8px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}

.tdl-card-img {
    max-height: 100%;
    object-fit: contain;
}

.tdl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px;
}

.tdl-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.tdl-tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    padding: 3px 8px;
}

.tdl-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.tdl-card-actions .tdl-btn {
    flex: 1 1 auto;
    min-width: 116px;   /* was 96px — 10px side padding */
    padding: 8px 10px;
    font-size: 12.5px;
}

/* Visually hidden but still selectable — used by the clipboard fallback. */
.tdl-offscreen {
    position: fixed;
    top: 0;
    left: -9999px;
    opacity: 0;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1200px) {
    body.tdl-page .sidebar-ads {
        display: none;
    }
}

@media (max-width: 900px) {
    .tdl-best {
        grid-template-columns: minmax(0, 1fr);
    }

    body.tdl-page .pagebox {
        padding: 20px 24px;
    }
}

@media (max-width: 640px) {
    /* Stacked input: the field and the button each take the full width
       rather than squeezing onto one line. */
    .tdl-input-row {
        flex-direction: column;
    }

    .tdl-submit {
        width: 100%;
    }

    .tdl-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 560px) {
    body.tdl-page .pagebox {
        padding: 16px 14px;
    }

    .tdl-title {
        font-size: 27px;
    }

    .tdl-form,
    .tdl-best {
        padding: 16px;
    }

    .tdl-all-head {
        align-items: stretch;
        flex-direction: column;
    }

    /* "Copy Image URL" and "Open Image" cannot sit side by side once the
       column is this narrow, so each action takes the full width instead of
       being squeezed past the edge. */
    .tdl-btn-row {
        flex-direction: column;
    }

    .tdl-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tdl-card-preview {
        height: 170px;
    }
}