/* Styles for tools built on tools/tool_base.html (audio, GIF, image, PDF). */
.tool-controls { display: grid; gap: 1rem; margin-top: 1rem; }
.tool-controls:empty { display: none; }
.tool-controls fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tool-controls legend { font-weight: 600; font-size: 1rem; margin-bottom: 0.4rem; padding: 0; }
.tool-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool-choices label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}
.tool-choices label:has(input:checked) { border-color: var(--lemon-green); background: var(--lemon-green-light); }
.tool-choices label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.tool-choices label:has(input:focus-visible) { outline: 3px solid var(--lemon-green); outline-offset: 2px; }
.tool-field { display: grid; gap: 0.35rem; }
.tool-field label { font-weight: 600; }
.tool-field input[type="number"], .tool-field input[type="text"], .tool-field select {
    min-height: 2.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    max-width: 100%;
}
.tool-field-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.tool-hint { color: var(--text-tertiary); font-size: 0.8125rem; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }
.tool-error { color: var(--danger); margin-top: 0.75rem; }
.tool-error:empty { display: none; }

.tool-files { margin-top: 1rem; }
.tool-files-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tool-files h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.tool-link-button {
    background: none; border: 0; padding: 0.25rem; cursor: pointer;
    color: var(--text-secondary); text-decoration: underline; font: inherit; font-size: 0.875rem;
}
.tool-file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; counter-reset: file; }
.tool-file {
    counter-increment: file;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
}
.tool-file::before {
    content: counter(file);
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lemon-green-light);
    color: var(--lemon-green-dark);
    font-weight: 700;
    font-size: 0.875rem;
}
.tool-file[data-status="working"] { border-color: var(--lemon-primary); }
.tool-file[data-status="done"] { border-color: var(--lemon-green); }
.tool-file[data-status="failed"] { border-color: var(--danger); }
.tool-file-thumb { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 6px; overflow: hidden; background: var(--lemon-primary-light); display: grid; place-items: center; }
.tool-file-thumb img, .tool-file-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-file-body { flex: 1 1 auto; min-width: 0; }
.tool-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.tool-file-meta { color: var(--text-secondary); font-size: 0.8125rem; margin: 0; font-variant-numeric: tabular-nums; }
.tool-file-actions { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.tool-file-actions button {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
}
.tool-file-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-file-actions button:hover:not(:disabled) { border-color: var(--lemon-primary); background: var(--lemon-primary-light); }

.tool-result-summary { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 0.75rem; }
.tool-result-summary:empty { display: none; }
.tool-next { margin-top: 1.25rem; }
.tool-next h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.tool-next ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.tool-next li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.tool-next a { font-weight: 600; }
.tool-next span { color: var(--text-secondary); font-size: 0.875rem; }

/* Thumbnail grids for the page-organising PDF tools. */
.tool-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.tool-page {
    position: relative;
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    padding: 0.5rem;
    border-radius: 12px;
    border: 2px solid var(--border-default);
    background: var(--bg-surface);
    cursor: pointer;
}
.tool-page canvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px var(--shadow-sm); }
.tool-page[aria-pressed="true"] { border-color: var(--lemon-green); background: var(--lemon-green-light); }
.tool-page.is-deleted { opacity: 0.45; border-style: dashed; }
.tool-page:focus-visible { outline: 3px solid var(--lemon-green); outline-offset: 2px; }
.tool-page-number { font-size: 0.8125rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.output-container img.tool-preview, .output-container audio, .output-container video { display: block; width: 100%; max-height: 60vh; border-radius: 12px; }
.output-container video { background: #000; }
.output-container img.tool-preview { object-fit: contain; }

@media (max-width: 480px) {
    .tool-file-thumb { display: none; }
}

.tool-page-canvas { line-height: 0; }
.tool-page[aria-pressed="true"]::after {
    content: "✓";
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lemon-green);
    color: var(--on-accent);
    font-size: 0.8rem;
    line-height: 1;
}

/* Square thumbnail box: the page is centred and scaled to fit, whatever its turn. */
.tool-page-canvas.is-square { position: relative; width: var(--box); height: var(--box); overflow: hidden; }
.tool-page-canvas.is-square canvas, .tool-page-canvas.is-square > div {
    position: absolute; left: 50%; top: 50%; max-width: none;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--fit, 1));
    transition: transform 0.2s ease;
}
.tool-page-tools { display: flex; gap: 0.25rem; }
.tool-page-tools button {
    min-width: 2rem; min-height: 2rem; border-radius: 8px; border: 1px solid var(--border-default);
    background: var(--bg-surface); color: var(--text-primary); cursor: pointer; line-height: 1;
}
.tool-page-tools button:hover:not(:disabled) { border-color: var(--lemon-primary); background: var(--lemon-primary-light); }
.tool-page-tools button:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-page[draggable="true"] { cursor: grab; }
.tool-page.is-dragging { opacity: 0.4; }
.tool-page.is-drop-target { border-color: var(--lemon-primary); border-style: dashed; }
.tool-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Before/after comparison slider. */
.tool-compare { margin-bottom: 1rem; }
.tool-compare-stack { position: relative; line-height: 0; border-radius: 12px; overflow: hidden; background: var(--lemon-primary-light); --cut: 50%; }
.tool-compare-stack img.tool-preview { width: 100%; max-height: 60vh; object-fit: contain; }
.tool-compare-top { position: absolute; inset: 0; clip-path: inset(0 var(--cut) 0 0); }
.tool-compare input[type="range"] { width: 100%; margin-top: 0.5rem; }
.tool-compare-labels { display: flex; justify-content: space-between; margin-top: 0.25rem; }

.tool-check { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-weight: 600; cursor: pointer; }
.tool-choices input[type="number"] {
    width: 6rem; min-height: 2.25rem; padding: 0.3rem 0.5rem; border-radius: 8px;
    border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); font: inherit;
}

/* Two-handle range slider (audio cutter, same look as the trim tool). */
.range-slider { position: relative; height: 2.2rem; margin: 1rem 0 0.5rem; }
.range-track, .range-selection { position: absolute; top: 50%; height: 0.5rem; transform: translateY(-50%); border-radius: 999px; }
.range-track { left: 0; right: 0; background: var(--border-default); }
.range-selection { background: var(--lemon-green); }
.range-slider input[type="range"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range-slider input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: none; border: 0; }
.range-slider input[type="range"]::-moz-range-track { height: 100%; background: none; border: 0; }
.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 1.4rem; height: 2.2rem; border-radius: 6px;
    background: var(--lemon-primary); border: 2px solid var(--lemon-primary-dark); cursor: ew-resize;
}
.range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 1.4rem; height: 2.2rem; border-radius: 6px;
    background: var(--lemon-primary); border: 2px solid var(--lemon-primary-dark); cursor: ew-resize;
}
.range-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--lemon-green); outline-offset: 2px; }
.range-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--lemon-green); outline-offset: 2px; }
.range-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; }
.range-times input[type="text"] { font-variant-numeric: tabular-nums; }
.range-times input[aria-invalid="true"] { border-color: var(--danger); }
.range-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.75rem 0; }

.tool-gif-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.tool-gif-compare figure { margin: 0; }
.tool-gif-compare img { width: 100%; height: auto; max-height: 40vh; object-fit: contain; }
.tool-gif-compare figcaption { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }

/* Rotate tool: the source video mirrors the chosen turn with a transform. */
.rotate-stage { display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #000; margin-bottom: 1rem; }
.rotate-stage video { display: block; width: 100%; max-height: 45vh; transition: transform 0.25s ease; }
.output-container video.tool-preview { display: block; width: 100%; max-height: 60vh; background: #000; }

/* Quick-size buttons: the whole pill is the control, the radio dot is hidden. */
#pixelsField:not([hidden]) { display: grid; gap: 0.85rem; }
.tool-quick .tool-choices label { position: relative; }
.tool-quick .tool-choices input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tool-size-readout:empty { display: none; }
.tool-size-readout { margin: 0; }

/* Live preview of the first image at the chosen size. */
.tool-live { display: grid; gap: 0.5rem; justify-items: center; padding: 0.75rem; border-radius: 12px; background: var(--lemon-primary-light); }
.tool-live[hidden] { display: none; }
.tool-live canvas { display: block; max-width: 100%; max-height: 45vh; width: auto; height: auto; border-radius: 8px; }
.tool-live canvas[hidden] { display: none; }
.tool-live .tool-size-readout { text-align: center; }