/* ===========================================================================
   MEDIA CONVERTER — the tool's own interface.

   Same rules as image-compressor-styling.css next door: every colour is a
   site token or derived from one, so the panel follows the reader's theme
   rather than carrying a palette of its own. --mc-* below is only for values
   that stay fixed whichever theme is on — the transparency checkerboard on
   the preview stage being the one deliberate exception, same reasoning as
   the other two tool pages give for theirs.

   THE ONE THING THIS FILE DOES THAT THE OTHERS DON'T is switch whole panels
   in and out depending on what the reader is converting TO. A JPEG has a
   quality dial and no frame rate; an MP4 has a frame rate and no colour
   count; a GIF wants both. Rather than the script hiding rows by hand, the
   script sets one attribute — data-target-kind on .vic-app — and every
   "only relevant when…" rule keys off that down at the bottom of this file,
   so the reason a control is hidden is readable in one place instead of
   scattered through the JS.
   =========================================================================== */

.vic-app {
    --mc-surface: var(--color-primary-a10);
    --mc-surface-raised: var(--color-primary-a20);
    --mc-border: var(--color-card-border);
    --mc-border-strong: var(--color-primary-a20);

    --mc-checker-a: #4a4a4a;
    --mc-checker-b: #5c5c5c;

    --mc-mono: "JetBrains Mono", "Fira Mono", "Consolas", ui-monospace, monospace;
    --mc-sans: "Circular Spotify", "Inter", sans-serif;

    font-family: var(--mc-sans);
    color: var(--color-text-1);

    display: flex;
    flex-direction: column;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 16px;
    overflow: hidden;
}

.vic-app :is(button, input, select, a):focus-visible {
    outline: 2px solid var(--color-selected-3);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Toolbar
   --------------------------------------------------------------------------- */

.vic-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--mc-surface-raised);
    border-bottom: 1px solid var(--mc-border);
}

.vic-toolbar-spacer { margin-left: auto; }

.vic-file-count {
    font-family: var(--mc-mono);
    font-size: 12px;
    color: var(--color-text-2);
}

.vic-sep {
    width: 1px;
    align-self: stretch;
    min-height: 22px;
    background: var(--mc-border-strong);
    margin: 0 2px;
}

/* ---------------------------------------------------------------------------
   Buttons — identical contract to .ic-btn next door.
   --------------------------------------------------------------------------- */

.vic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--mc-border-strong);
    background: transparent;
    color: var(--color-text-2);
    font-family: var(--mc-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-hover) var(--ease-soft),
        border-color var(--dur-hover) var(--ease-soft),
        color var(--dur-hover) var(--ease-soft),
        transform var(--dur-hover) var(--ease-pop);
}

@media (hover: hover) {
    .vic-btn:hover:not(:disabled) {
        background: var(--color-primary-a20);
        border-color: var(--color-primary-a30);
        color: var(--color-text-1);
    }
}

.vic-btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: var(--dur-press);
}

.vic-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.vic-btn--primary {
    background: var(--color-selected-2);
    border-color: var(--color-selected-2);
    color: #ffffff;
    padding: 8px 18px;
    font-size: 13px;
}

@media (hover: hover) {
    .vic-btn--primary:hover:not(:disabled) {
        background: var(--color-selected-3);
        border-color: var(--color-selected-3);
        color: #06121e;
    }
}

.vic-btn--accent { color: var(--color-accent-text); border-color: var(--color-selected-1); }

@media (hover: hover) {
    .vic-btn--accent:hover:not(:disabled) {
        background: rgba(91, 148, 198, 0.14);
        border-color: var(--color-selected-2);
        color: var(--color-accent-text);
    }
}

.vic-btn--wide { width: 100%; }

/* ---------------------------------------------------------------------------
   Drop zone
   --------------------------------------------------------------------------- */

.vic-drop {
    margin: 12px;
    padding: 28px 20px;
    border: 2px dashed var(--mc-border-strong);
    border-radius: 12px;
    text-align: center;
    color: var(--color-text-2);
    font-size: 13px;
    line-height: 1.6;
    transition:
        border-color var(--dur-hover) var(--ease-soft),
        background-color var(--dur-hover) var(--ease-soft);
}

.vic-app.is-dragging .vic-drop {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.1);
}

.vic-drop strong { display: block; color: var(--color-text-1); font-size: 15px; margin-bottom: 6px; }
.vic-drop-hint { display: block; margin-top: 10px; font-size: 12px; color: var(--color-primary-a30); }

/* ---------------------------------------------------------------------------
   Layout — preview + queue on the left, settings on the right. One column
   below 900px, same threshold as the other two tool pages.
   --------------------------------------------------------------------------- */

.vic-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 12px;
    padding: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .vic-body { grid-template-columns: 1fr; }
}

.vic-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.vic-panel {
    background: var(--color-primary-a0);
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    padding: 14px;
}

.vic-panel-title {
    display: block;
    margin: 0 0 12px;
    font-family: var(--mc-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
}

.vic-panel-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--color-primary-a30); }

/* ---------------------------------------------------------------------------
   Target picker — the control the whole rest of the panel hangs off.

   Grouped rather than one long list: "which of these is a video format" is
   the first question a reader actually has, and a flat grid of fourteen
   buttons makes them read every label to answer it.
   --------------------------------------------------------------------------- */

.vic-target-group { margin-bottom: 14px; }
.vic-target-group:last-child { margin-bottom: 0; }

.vic-target-group-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
}

.vic-target-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

@media (max-width: 1100px) and (min-width: 901px) {
    .vic-target-grid { grid-template-columns: repeat(2, 1fr); }
}

.vic-target-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--mc-border-strong);
    background: var(--color-primary-a0);
    cursor: pointer;
    text-align: left;
    transition:
        border-color var(--dur-hover) var(--ease-soft),
        background-color var(--dur-hover) var(--ease-soft),
        transform var(--dur-hover) var(--ease-pop);
}

@media (hover: hover) {
    .vic-target-btn:hover:not(:disabled) {
        border-color: var(--color-selected-2);
        background: rgba(91, 148, 198, 0.1);
    }
}

.vic-target-btn:active:not(:disabled) { transform: scale(0.97); transition-duration: var(--dur-press); }

.vic-target-btn.is-active {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.2);
    box-shadow: inset 0 0 0 1px var(--color-selected-2);
}

/* An encoder this browser turned out not to have. Left in place rather than
   removed so the row doesn't reflow into a different shape on a browser that
   is missing one — see the note on detectEncoders() in the script. */
.vic-target-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.vic-target-name { font-size: 12.5px; font-weight: 700; color: var(--color-text-1); font-family: var(--mc-sans); }
.vic-target-hint { font-size: 10px; color: var(--color-primary-a30); font-family: var(--mc-sans); line-height: 1.35; }

/* ---------------------------------------------------------------------------
   Preview stage — one element that shows a still, a video or a strip of
   extracted frames depending on what the active queue item turned out to be.
   Sized off the source's own aspect ratio, same --stage-ratio trick as the
   other tool pages use.
   --------------------------------------------------------------------------- */

.vic-stage {
    --vic-stage-ratio: 4 / 3;
    position: relative;
    width: 100%;
    aspect-ratio: var(--vic-stage-ratio);
    max-height: 62vh;
    border-radius: 8px;
    overflow: hidden;
    background-image:
        linear-gradient(45deg, var(--mc-checker-a) 25%, transparent 25%),
        linear-gradient(-45deg, var(--mc-checker-a) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--mc-checker-a) 75%),
        linear-gradient(-45deg, transparent 75%, var(--mc-checker-a) 75%);
    background-color: var(--mc-checker-b);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.vic-stage-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
}

/* Only ever one of the two is in play — .vic-stage-media covers both, and
   the script sets data-stage on .vic-app to say which. */
.vic-app:not([data-stage="image"]) #vic-stage-img { display: none; }
.vic-app:not([data-stage="video"]) #vic-stage-video { display: none; }

.vic-stage-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.vic-app[data-stage="image"] .vic-stage-empty,
.vic-app[data-stage="video"] .vic-stage-empty { display: none; }

/* Result strip — where a run that produced MANY files out of one input (a
   video taken apart into frames) shows what it got, since a single preview
   element has nothing useful to point at. */
.vic-frames {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    margin-top: 12px;
    max-height: 220px;
    overflow-y: auto;
}

.vic-frames:empty { display: none; }

.vic-frame-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    background: var(--color-primary-a10);
    display: block;
}

/* ---------------------------------------------------------------------------
   Busy overlay
   --------------------------------------------------------------------------- */

.vic-stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
}

.vic-app.is-busy .vic-stage-overlay { display: flex; }

.vic-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    animation: vic-spin 0.8s linear infinite;
}

@keyframes vic-spin { to { transform: rotate(360deg); } }

.vic-stage-overlay-text { font-family: var(--mc-sans); font-size: 12.5px; font-weight: 600; color: #ffffff; max-width: 44ch; }

.vic-progress { display: none; width: min(260px, 100%); height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.vic-progress.is-active { display: block; }
.vic-progress-bar { width: 0%; height: 100%; background: var(--color-selected-3); border-radius: inherit; transition: width 0.15s linear; }

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */

.vic-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------------------------------------------------------------------------
   Queue
   --------------------------------------------------------------------------- */

.vic-queue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
}

.vic-queue-empty { margin: 0; font-size: 12.5px; color: var(--color-primary-a30); }

.vic-queue-item {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    background: var(--color-primary-a0);
    border: 1px solid var(--mc-border);
    overflow: hidden;
}

.vic-queue-item.is-active { border-color: var(--color-selected-2); box-shadow: inset 0 0 0 1px var(--color-selected-2); }
.vic-queue-item.is-error { border-color: var(--color-warning-2); }
.vic-queue-item.is-skipped { opacity: 0.55; }

/* Which row convertAll() is on right now. A slow gentle pulse rather than
   anything that steals attention, since this sits under a queue that might
   be thirty rows tall and several could finish within a second of each
   other. */
.vic-queue-item.is-processing {
    border-color: var(--color-selected-2);
    animation: vic-queue-pulse 1.1s ease-in-out infinite;
}

@keyframes vic-queue-pulse {
    0%, 100% { background: var(--color-primary-a0); }
    50% { background: rgba(91, 148, 198, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
    .vic-queue-item.is-processing {
        animation: none;
        background: rgba(91, 148, 198, 0.14);
    }
}

.vic-queue-select {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 8px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font-family: var(--mc-sans);
}

.vic-queue-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-primary-a10);
}

/* A queue row for a file that never produced a thumbnail (an audio-only
   input, or a still whose decode failed) still needs something 40px square
   there, or every row below it shifts left by the width of the missing one. */
.vic-queue-kind {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--color-primary-a10);
    color: var(--color-primary-a30);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vic-queue-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vic-queue-name { font-size: 12px; font-weight: 600; color: var(--color-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vic-queue-stat { font-size: 11px; color: var(--color-text-2); }
.vic-queue-item.is-error .vic-queue-stat { color: var(--color-warning-2); }

.vic-queue-remove {
    width: 32px;
    flex-shrink: 0;
    border: none;
    border-left: 1px solid var(--mc-border);
    background: none;
    color: var(--color-primary-a30);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-soft), color var(--dur-hover) var(--ease-soft);
}

@media (hover: hover) {
    .vic-queue-remove:hover { color: var(--color-warning-2); background: rgba(231, 140, 140, 0.1); }
}

.vic-queue-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Fields — one idiom shared by every setting, same as the compressor's.
   --------------------------------------------------------------------------- */

.vic-field { margin-bottom: 12px; }
.vic-field:last-child { margin-bottom: 0; }

.vic-field-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--mc-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
}

.vic-field-row { display: flex; align-items: center; gap: 8px; }

.vic-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--mc-border-strong);
    cursor: pointer;
}

.vic-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-selected-2);
    border: 2px solid var(--mc-surface);
    cursor: pointer;
}

.vic-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-selected-2);
    border: 2px solid var(--mc-surface);
    cursor: pointer;
}

.vic-range:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bigger grab target on touch. A 16px thumb is sized for a mouse cursor,
   not a fingertip, and a slider is the one control on this page where a
   slightly-off tap can't just be retried like a mis-tapped button can, it
   drags to the wrong value instead. */
@media (pointer: coarse) {
    .vic-range {
        height: 8px;
    }

    .vic-range::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }

    .vic-range::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }
}

.vic-number {
    width: 58px;
    flex-shrink: 0;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--mc-border-strong);
    background: var(--color-primary-a0);
    color: var(--color-text-1);
    font-family: var(--mc-mono);
    font-size: 12px;
    text-align: center;
}

.vic-number--wide { width: 78px; }
.vic-output { display: inline-flex; align-items: center; justify-content: center; }
.vic-unit { font-size: 11px; color: var(--color-primary-a30); }
.vic-exact-x { color: var(--color-primary-a30); font-size: 12px; }

.vic-select {
    width: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--mc-border-strong);
    background: var(--color-primary-a0);
    color: var(--color-text-1);
    font-family: var(--mc-sans);
    font-size: 12.5px;
    cursor: pointer;
}

.vic-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mc-sans);
    font-size: 12.5px;
    color: var(--color-text-2);
    cursor: pointer;
    margin-bottom: 10px;
}

.vic-checkbox-row:last-child { margin-bottom: 0; }
.vic-checkbox-row input[type="checkbox"] { accent-color: var(--color-selected-2); width: 15px; height: 15px; margin: 0; flex-shrink: 0; }
.vic-checkbox-row input[type="checkbox"]:disabled { cursor: not-allowed; }
.vic-checkbox-row:has(input:disabled) { opacity: 0.55; }

.vic-hint { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--color-primary-a30); }

.vic-swatch-btn {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 2px solid var(--mc-border-strong);
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
}

.vic-swatch { display: block; width: 100%; height: 100%; }

.vic-swatch-btn input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Choice pills — rotation and a couple of small either/or rows.
   --------------------------------------------------------------------------- */

.vic-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vic-choices:last-child { margin-bottom: 0; }

.vic-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--mc-border-strong);
    font-family: var(--mc-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-2);
    cursor: pointer;
    transition:
        border-color var(--dur-hover) var(--ease-soft),
        background-color var(--dur-hover) var(--ease-soft),
        color var(--dur-hover) var(--ease-soft);
}

.vic-choice input { accent-color: var(--color-selected-2); margin: 0; }

.vic-choice:has(input:checked) {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.16);
    color: var(--color-text-1);
}

/* :has() fallback — the script mirrors checked state onto .is-checked. */
.vic-choice.is-checked {
    border-color: var(--color-selected-2);
    background: rgba(91, 148, 198, 0.16);
    color: var(--color-text-1);
}

/* ---------------------------------------------------------------------------
   Advanced disclosure
   --------------------------------------------------------------------------- */

.vic-advanced-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px dashed var(--mc-border-strong);
    background: none;
    color: var(--color-text-2);
    font-family: var(--mc-sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-soft), color var(--dur-hover) var(--ease-soft);
}

@media (hover: hover) {
    .vic-advanced-toggle:hover { background: var(--color-primary-a10); color: var(--color-text-1); }
}

.vic-advanced-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mc-border); }
.vic-app:not(.adv-open) .vic-advanced-body { display: none; }

/* ---------------------------------------------------------------------------
   Status, caution and the status bar — identical contract to the other two.
   --------------------------------------------------------------------------- */

.vic-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 24px;
    font-size: 11.5px;
    font-weight: 600;
}

.vic-status:empty { display: none; }

.vic-status[data-tone="ok"] { background: rgba(74, 222, 128, 0.14); color: #38b869; }
:root:not([data-theme="light"]) .vic-status[data-tone="ok"] { color: #4ade80; }

.vic-status[data-tone="error"] { background: rgba(231, 140, 140, 0.16); color: var(--color-warning-2); }
:root:not([data-theme="light"]) .vic-status[data-tone="error"] { color: var(--color-warning-1); }

.vic-status[data-tone="info"] { background: rgba(91, 148, 198, 0.16); color: var(--color-accent-text); }

.vic-caution {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 8px;
    border-left: 3px solid var(--color-warning-2);
    background: rgba(231, 140, 140, 0.1);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--color-text-2);
}

.vic-caution strong { color: var(--color-text-1); }
.vic-caution[hidden] { display: none; }

.vic-statusbar {
    padding: 9px 12px;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface-raised);
    font-size: 12px;
    color: var(--color-text-2);
}

/* ---------------------------------------------------------------------------
   Loaded / busy gates
   --------------------------------------------------------------------------- */

.vic-app:not(.has-files) [data-needs-files] { display: none; }
.vic-app.has-files .vic-drop { display: none; }

.vic-app.is-busy #vic-open,
.vic-app.is-busy #vic-drop-open,
.vic-app.is-busy #vic-run,
.vic-app.is-busy #vic-download,
.vic-app.is-busy #vic-download-all,
.vic-app.is-busy #vic-queue-clear,
.vic-app.is-busy .vic-target-btn {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   WHICH SETTINGS ARE ON SCREEN.

   This started as one attribute holding the target's own kind, which was
   enough while there was only ever one target. Grouped mode can have a
   picture format and a video format live at the same time, so the question
   stopped being "what kind is the target" and became "does anything in play
   need this panel" — a set of independent booleans instead of one value.

   Every flag below is written by updateTargetUI() in media-converter.js and
   read by exactly one rule here, so the reason a control is hidden is
   findable from either end.

     data-grouped    which of the two sets of target buttons is showing
     data-picture    something is producing stills or GIF frames
     data-video      something is producing a video file
     data-sampling   a moving file is being taken apart into stills
     data-still-clip a still is being held on screen as a clip
     data-quality    at least one live format has a quality dial
     data-palette    at least one live format is GIF
     data-ico        at least one live format is ICO
     data-alpha      at least one live format can hold transparency
   --------------------------------------------------------------------------- */

.vic-app[data-grouped="true"] [data-set="single"] { display: none; }
.vic-app:not([data-grouped="true"]) [data-set="grouped"] { display: none; }

.vic-mix-toggle { margin-bottom: 4px; }
.vic-mix-hint { margin-bottom: 14px; }

.vic-app:not([data-picture="true"]) .vic-image-panel { display: none; }
.vic-app:not([data-video="true"]) .vic-video-panel { display: none; }
.vic-app:not([data-sampling="true"]) .vic-sampling-panel { display: none; }
.vic-app:not([data-audio="true"]) .vic-audio-panel { display: none; }

/* A straight copy has no dials at all, and WAV has a sample rate but no
   bitrate — it is uncompressed, so the bitrate is whatever the rate and the
   channel count make it. */
.vic-app:not([data-audio-bitrate="true"]) .vic-audio-bitrate-row { display: none; }
.vic-app:not([data-audio-rate="true"]) .vic-audio-rate-row { display: none; }

/* Only relevant while a still is being stretched into a clip, which cannot
   happen at all unless the mixing toggle is on. */
.vic-app:not([data-still-clip="true"]) .vic-still-clip-row { display: none; }

/* Quality has to actually exist in the encoder before a slider for it means
   anything. PNG, BMP and ICO have no such dial at all. */
.vic-app:not([data-quality="true"]) .vic-quality-row { display: none; }

/* Palette size and dithering are the GIF's only real size lever, the same way
   the compressor's Colours slider is PNG's. Nothing else uses them. */
.vic-app:not([data-palette="true"]) .vic-palette-row { display: none; }

/* ICO is the only output that holds several sizes of the same picture at once. */
.vic-app:not([data-ico="true"]) .vic-ico-row { display: none; }

/* A format that cannot hold transparency always flattens, so there is no
   choice to offer — the swatch stays, the checkbox goes. */
.vic-app:not([data-alpha="true"]) .vic-flatten-check { display: none; }

.vic-app:not([data-resize-mode="fit"]) .vic-fit-row { display: none; }
.vic-app:not([data-resize-mode="exact"]) .vic-exact-row { display: none; }
.vic-app:not([data-resize-mode="percent"]) .vic-percent-row { display: none; }

.vic-app:not([data-rate-mode="size"]) .vic-size-row { display: none; }
.vic-app:not([data-rate-mode="bitrate"]) .vic-bitrate-row { display: none; }
.vic-app:not([data-rate-mode="quality"]) .vic-vquality-row { display: none; }

/* ---------------------------------------------------------------------------
   Format tables — the "what goes in, what comes out" reference on the page
   itself rather than inside the tool.

   The wrapper scrolls rather than the page: a table with four columns of real
   prose in them cannot be made narrow enough for a phone without either
   wrapping every cell to one word per line or pushing the whole document
   sideways, and of those three the scrolling box is the only one that leaves
   the rest of the page alone.
   --------------------------------------------------------------------------- */

.UT-table-wrap {
    overflow-x: auto;
    margin: 0 0 16px;
    border-radius: 12px;
    border: 1px solid var(--color-card-border);
    background: var(--color-primary-a10);
}

.UT-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Circular Spotify", "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.55;
    /* Stops the first column collapsing to nothing when the box scrolls. */
    min-width: 560px;
}

.UT-table caption {
    caption-side: top;
    text-align: left;
    padding: 14px 16px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
}

.UT-table th,
.UT-table td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-card-border);
}

.UT-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
    white-space: nowrap;
}

.UT-table tbody th {
    font-weight: 700;
    color: var(--color-text-1);
    white-space: nowrap;
}

.UT-table td { color: var(--color-text-2); }
.UT-table tbody tr:last-child th,
.UT-table tbody tr:last-child td { border-bottom: none; }

.UT-table code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--color-primary-a20);
    color: var(--color-text-1);
    font-family: "JetBrains Mono", "Fira Mono", "Consolas", ui-monospace, monospace;
    font-size: 12px;
    white-space: nowrap;
}

/* A cell saying "this combination does nothing" should read as quieter than
   one describing a real conversion, not the same weight. */
.UT-table .is-na { color: var(--color-primary-a30); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .vic-file-count { width: 100%; order: 1; }
    .vic-target-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
    .vic-target-grid { grid-template-columns: 1fr; }
}