/* OBSCURA Converter.

   One window, as Erase and Books are: the top bar across, with the File,
   Edit and Help menus; the queue in the middle; the options for what is
   chosen down the right; a status line along the foot. Before anything is
   added, the middle is the start: a place to drop files, the commonest
   conversions, and the presets.

   A file in the queue is one row: what it is (by its bytes, not its name),
   what it will become, the options that differ from the defaults, and
   then its bar, its result and its size against the original. The format
   names are set in the monospace face, as code is, because they are
   names a person types into a search box and matches by eye.

   On a phone the options become a sheet over the queue, opened from a
   row, and each row stacks its parts.

   Every colour, size, corner and duration is a theme.css token, so the
   Converter follows the colourway, the dark mode and the motion setting
   the rest of the site does. */

body.cv-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.cv *, .cv *::before, .cv *::after { box-sizing: border-box; }
.cv :where(button, input, select, textarea) { font: inherit; color: inherit; }
.cv-grow { flex: 1; }
.cv-sprite { display: none; }
.cv svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cv code, .cv kbd, .cv-fmt { font-family: var(--font-mono); }
.cv kbd, .cv-dialog kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-soft); font: 600 var(--text-2xs) var(--font-mono); }
.cv :focus-visible, .cv-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cv { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }

/* ---------------------------------------------------------------- top bar */

.cv-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.cv-home { flex: none; }
.cv-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.cv-menubar { display: flex; gap: 2px; }
.cv-menubar > div { position: relative; }
.cv-mb { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
.cv-mb:hover:not(:disabled), .cv-mb[aria-expanded="true"] { background: var(--paper-inset); color: var(--ink); }
.cv-mb:disabled { opacity: .45; cursor: default; }
.cv-state { margin: 0; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.cv-state[data-kind="bad"] { color: var(--danger); }
.cv-watching { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px 0 10px; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.cv-watching[hidden] { display: none; }
.cv-watching i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: cv-pulse var(--dur-turn) var(--ease-in-out) infinite; }
.cv-watching button { min-height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: var(--text-2xs); font-weight: 650; cursor: pointer; }
.cv-watching button:hover { background: var(--paper-raised); }
@keyframes cv-pulse { 50% { opacity: .35; } }
.cv-icon-btn { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.cv-icon-btn:hover { background: var(--paper-inset); color: var(--ink); }
.cv-icon-btn svg { width: 18px; height: 18px; }

.cv-menu { position: absolute; z-index: 60; top: calc(100% + var(--space-1)); left: 0; min-width: 270px; max-width: min(360px, calc(100vw - 20px)); padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: cv-pop var(--dur-3) var(--ease-standard); }
.cv-menu[hidden] { display: none; }
.cv-menubar > div:last-child > .cv-menu { left: auto; right: 0; }
@media (max-width: 520px) {
  .cv-menu { min-width: 230px; }
  .cv-menubar > div:nth-child(2) > .cv-menu { left: auto; right: 0; }
}
.cv-menu button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 34px; padding: 6px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.cv-menu button:hover, .cv-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.cv-menu button:disabled { opacity: .45; cursor: default; }
.cv-menu button span { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; }
.cv-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
.cv-menu .cv-menu-h { margin: 6px 11px 2px; font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
@keyframes cv-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ------------------------------------------------------------ the body */

.cv-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 328px; min-height: 0; }
.cv-body.is-start { grid-template-columns: minmax(0, 1fr); }
.cv-main { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.cv-boot { margin: var(--space-6); color: var(--ink-faint); }
.cv-side { min-height: 0; overflow-y: auto; border-left: 1px solid var(--rule); background: var(--paper-raised); }
.cv-side[hidden] { display: none; }

/* A file dragged over the window: the whole window is the target, and
   says so, in the plain dimming the site uses (no blur). */
.cv-drop { position: absolute; inset: 10px; z-index: 50; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--accent-strong); font-size: var(--text-lg); font-weight: 650; pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease-standard); }
.cv.is-dragging .cv-drop { opacity: .96; }
.cv-drop span { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.cv-drop svg { width: 34px; height: 34px; }
.cv-drop small { font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); }

/* ---------------------------------------------------------------- the start */

.cv-start { height: 100%; overflow-y: auto; padding: var(--space-6) max(var(--space-5), calc((100% - 1040px) / 2)) var(--space-7); animation: cv-arrive var(--dur-4) var(--ease-standard); }
@keyframes cv-arrive { from { opacity: 0; transform: translateY(4px); } }
.cv-h { margin: 0 0 var(--space-1); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.cv-lead { max-width: var(--measure); margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.cv-label { margin: var(--space-6) 0 var(--space-2); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

.cv-zone { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-5); border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); background: var(--paper-raised); }
.cv-zone:hover { border-color: var(--accent-border); }
.cv-zone h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); font-weight: 650; }
.cv-zone p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.cv-zone-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-3); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); }
.cv-zone-ico svg { width: 26px; height: 26px; }
.cv-zone-btns { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 190px; }

.cv-common { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cv-pair { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.cv-pair:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.cv-pair svg { width: 14px; height: 14px; color: var(--ink-faint); }

.cv-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); max-width: 760px; }
.cv-rows li { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.cv-rows li > div { flex: 1; min-width: 0; }
.cv-rows b { display: block; font-weight: 600; }
.cv-rows small { display: block; color: var(--ink-faint); font-size: var(--text-xs); }

/* ------------------------------------------------------------ the queue */

.cv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper); }
.cv-count { margin: 0 var(--space-2); font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cv-head, .cv-row { display: grid; grid-template-columns: 28px 44px minmax(0, 1.4fr) 18px minmax(214px, .9fr) minmax(0, 1fr) 132px 38px; align-items: center; column-gap: var(--space-3); }
.cv-head { padding: 0 var(--space-4); min-height: 30px; border-bottom: 1px solid var(--rule); background: var(--paper); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cv-head span:first-child { grid-column: 3; }
.cv-head span:nth-child(2) { grid-column: 5; }
.cv-head span:nth-child(3) { grid-column: 6; }
.cv-head span:nth-child(4) { grid-column: 7; text-align: right; }

.cv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 var(--space-6); }
.cv-row { position: relative; min-height: 64px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule); cursor: default; }
.cv-row:hover { background: var(--paper-inset); }
.cv-row.is-sel { background: var(--accent-soft); }
.cv-row.is-sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.cv-tick { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; }
.cv-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.cv-thumb { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-faint); }
.cv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cv-thumb svg { width: 18px; height: 18px; margin-bottom: 13px; }
.cv-thumb b { position: absolute; left: 2px; right: 2px; bottom: 2px; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink-soft); font: 600 var(--text-2xs)/1.4 var(--font-mono); text-align: center; text-transform: uppercase; white-space: nowrap; }

.cv-name { min-width: 0; }
.cv-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cv-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.cv-name small.is-warn { color: var(--warn); }
.cv-arrow { width: 18px; height: 18px; color: var(--ink-faint); }

.cv-to { width: 100%; min-height: 34px; padding: 4px 28px 4px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font: 600 var(--text-xs) var(--font-mono); letter-spacing: .02em; cursor: pointer; }
.cv-to:hover:not(:disabled) { border-color: var(--accent-border); }
.cv-to:disabled { opacity: .6; cursor: default; }
.cv-none { font-size: var(--text-xs); color: var(--ink-faint); }

.cv-opts { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-soft); }
.cv-opts button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.cv-opts button:hover { color: var(--accent-strong); text-decoration: underline; }

.cv-result { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
.cv-result small { color: var(--ink-faint); white-space: nowrap; }
.cv-result .is-down { color: var(--good); }
.cv-result .is-up { color: var(--ink-soft); }
.cv-result .is-bad { color: var(--danger); font-weight: 600; white-space: normal; }
.cv-meter { width: 100%; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--paper-inset); box-shadow: inset 0 0 0 1px var(--rule); }
.cv-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--dur-2) linear; }
.cv-meter.is-wait i { width: 32%; animation: cv-wait var(--dur-turn) var(--ease-in-out) infinite; }
@keyframes cv-wait { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
.cv-done { display: inline-flex; align-items: center; gap: 4px; color: var(--good); font-weight: 650; white-space: nowrap; }
.cv-done svg { width: 14px; height: 14px; }

.cv-acts { display: flex; justify-content: flex-end; }
.cv-err { grid-column: 3 / -1; margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--danger); line-height: 1.45; }
.cv-note { grid-column: 3 / -1; margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.45; }

/* The bar at the foot of the queue once something is made: the totals and
   the saving. */
.cv-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--rule); background: var(--paper-raised); }
.cv-save[hidden] { display: none; }
.cv-save p { margin: 0; font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cv-save p b { color: var(--ink); }

/* ---------------------------------------------------------------- the side */

.cv-panel { padding: var(--space-4); animation: cv-arrive var(--dur-3) var(--ease-standard); }
.cv-panel h3 { margin: 0; font-size: var(--text-md); font-weight: 650; overflow-wrap: anywhere; }
.cv-panel-sub { margin: 2px 0 var(--space-4); font-size: var(--text-xs); color: var(--ink-faint); overflow-wrap: anywhere; }
.cv-group { margin: 0 0 var(--space-4); padding: 0 0 var(--space-4); border-bottom: 1px solid var(--rule); }
.cv-group:last-child { border-bottom: 0; }
.cv-group > h4 { margin: 0 0 var(--space-2); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cv-fmt-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-soft); }
.cv-fmt-note.is-lossless { color: var(--good); }

.cv-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); min-width: 0; }
.cv-field > span { display: flex; justify-content: space-between; gap: var(--space-2); font-weight: 600; color: var(--ink); }
.cv-field > span output { font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cv-field small { color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.4; }
.cv-field[hidden] { display: none; }
.cv input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), .cv select:not(.cv-to), .cv textarea,
.cv-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .cv-dialog select, .cv-dialog textarea { width: 100%; min-height: 34px; padding: 5px var(--space-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.cv input:focus, .cv select:focus, .cv-dialog input:focus, .cv-dialog select:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.cv input[type="range"] { width: 100%; margin: 4px 0; accent-color: var(--accent); }
.cv input[type="color"] { width: 44px; height: 30px; padding: 0 2px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); }
.cv-unit { display: flex; align-items: center; gap: var(--space-2); }
.cv-unit em { font-style: normal; color: var(--ink-faint); white-space: nowrap; }
.cv-check { display: flex; align-items: flex-start; gap: 8px; min-height: 30px; padding: 5px 0; margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--ink); cursor: pointer; }
.cv-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.cv-check small { display: block; color: var(--ink-faint); font-size: var(--text-2xs); line-height: 1.4; }
.cv-side-acts { display: flex; flex-direction: column; gap: var(--space-2); }

.cv-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.cv-seg button { flex: 1; min-height: 28px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.cv-seg button:hover { color: var(--ink); }
.cv-seg [aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, .08); }

/* The formats a choice offers, as a grid of names under their family. */
.cv-fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.cv-fmts button { min-height: 32px; padding: 0 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cv-fmts button:hover { border-color: var(--accent-border); }
.cv-fmts button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cv-fmts-fam { grid-column: 1 / -1; margin: var(--space-2) 0 0; font-size: var(--text-2xs); color: var(--ink-faint); }
.cv-fmts-fam:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- controls */

.cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.cv-btn svg { width: 16px; height: 16px; flex: none; }
.cv-btn:hover:not(:disabled) { background: var(--paper-inset); }
.cv-btn:active:not(:disabled) { transform: translateY(1px); }
.cv-btn:disabled { opacity: .5; cursor: default; }
.cv-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cv-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
.cv-btn-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.cv-btn-quiet:hover:not(:disabled) { color: var(--ink); }
.cv-btn-danger { color: var(--danger); }
.cv-btn-sm { min-height: 28px; padding: 2px 9px; font-size: var(--text-xs); }
.cv-mini { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-faint); cursor: pointer; }
.cv-mini:hover { background: var(--paper-raised); color: var(--ink); }
.cv-mini svg { width: 16px; height: 16px; }
.cv-link { min-height: 28px; padding: 0; border: 0; background: none; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 600; cursor: pointer; text-decoration: none; }
.cv-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- status */

.cv-status { display: flex; align-items: center; gap: var(--space-4); min-width: 0; min-height: 26px; padding: 0 150px 0 var(--space-3); border-top: 1px solid var(--rule); background: var(--paper-raised); font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; }
.cv-status span { overflow: hidden; text-overflow: ellipsis; }
.cv-status [data-kind="bad"] { color: var(--danger); font-weight: 650; }
.cv-totals { font-variant-numeric: tabular-nums; }
/* The privacy badge sits in the status line, at its right-hand end, as
   in the other applications, rather than over the queue. */
body.cv-app #ppBadge { left: auto; right: var(--space-2); bottom: 1px; min-height: 24px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }

/* ---------------------------------------------------------------- dialogs */

.cv-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(16, 16, 24, .3); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.cv-dialog.is-wide { width: min(900px, calc(100vw - 24px)); }
.cv-dialog::backdrop { background: rgba(10, 10, 14, .38); }
.cv-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
.cv-dialog header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.cv-dialog header h2 { flex: 1; margin: 0; font-size: var(--text-md); font-weight: 650; overflow-wrap: anywhere; }
.cv-dialog-body { padding: var(--space-4); overflow-y: auto; }
.cv-dialog-body > p { max-width: var(--measure); margin: 0 0 var(--space-3); line-height: 1.55; }
.cv-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--rule); }
.cv-form-err { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--danger); }
.cv-keys { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.cv-keys td { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.cv-keys td:first-child { width: 42%; white-space: nowrap; }

/* What converts to what: one row a kind of file, its formats after it. */
.cv-matrix-find { margin: 0 0 var(--space-3); }
.cv-matrix { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.cv-matrix th { padding: var(--space-3) 0 var(--space-1); font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: left; }
.cv-matrix td { padding: 7px var(--space-2) 7px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.5; }
.cv-matrix td:first-child { width: 34%; font-weight: 600; }
.cv-matrix td:first-child small { display: block; font: 500 var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.cv-matrix .cv-fmt { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-2xs); white-space: nowrap; }

/* Before and after. */
.cv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cv-compare figure { margin: 0; min-width: 0; }
.cv-compare img, .cv-compare video { display: block; width: 100%; max-height: 52vh; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); }
.cv-compare figcaption { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cv-compare figcaption b { color: var(--ink); }
.cv-preview-text { max-height: 52vh; overflow: auto; margin: 0; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-files { max-height: 46vh; overflow: auto; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.cv-files li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); }
.cv-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-files li small { flex: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1180px) {
  .cv-body { grid-template-columns: minmax(0, 1fr) 296px; }
  .cv-head, .cv-row { grid-template-columns: 28px 44px minmax(0, 1.3fr) 18px minmax(204px, .9fr) 118px 38px; }
  .cv-head span:nth-child(3), .cv-opts { display: none; }
  .cv-head span:nth-child(4) { grid-column: 6; }
}

.cv-side-close { display: none; }

/* A phone, or a narrow window: the options are a sheet over the queue,
   opened from a row, and a row stacks its parts under its name. */
@media (max-width: 860px) {
  .cv-body { grid-template-columns: minmax(0, 1fr); }
  .cv-side { position: absolute; inset: auto 0 0 0; z-index: 40; max-height: 78%; border-left: 0; border-top: 1px solid var(--rule-strong); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -12px 40px rgba(16, 16, 24, .22); }
  .cv-side.is-closed { display: none; }
  .cv-side-close { display: inline-grid; }
  .cv-head { display: none; }
  .cv-row { grid-template-columns: 28px 44px minmax(0, 1fr) 38px; grid-template-areas: "tick thumb name acts" ". . to to" ". . result result"; row-gap: var(--space-2); padding: var(--space-3) var(--space-3); }
  .cv-row > .cv-tick { grid-area: tick; }
  .cv-row > .cv-thumb { grid-area: thumb; }
  .cv-row > .cv-name { grid-area: name; }
  .cv-row > .cv-arrow, .cv-row > .cv-opts { display: none; }
  .cv-row > .cv-to-cell { grid-area: to; }
  .cv-row > .cv-result { grid-area: result; align-items: flex-start; text-align: left; }
  .cv-row > .cv-acts { grid-area: acts; }
  .cv-err, .cv-note { grid-column: 3 / -1; }
  .cv-zone { grid-template-columns: minmax(0, 1fr); }
  .cv-zone-btns { min-width: 0; }
  .cv-status { padding-right: 130px; }
  .cv-hide-sm { display: none !important; }
}

@media (max-width: 520px) {
  .cv-top { gap: 2px; padding: 6px var(--space-2); }
  .cv-mb { padding: 0 8px; }
  .cv-state, .cv-hide-xs { display: none !important; }
  .cv-bar { padding: var(--space-2) var(--space-3); }
  .cv-bar .cv-btn-label { display: none; }
  .cv-start { padding: var(--space-5) var(--space-4) var(--space-7); }
  .cv-compare { grid-template-columns: 1fr; }
  .cv-status { flex-wrap: wrap; padding: 4px var(--space-3) 4px var(--space-3); white-space: normal; }
  .cv-totals { display: none; }
}

@media (pointer: coarse) {
  .cv-btn, .cv-mb, .cv-to, .cv-pair, .cv-fmts button, .cv-seg button { min-height: 44px; }
  /* "File" and "Edit" are shorter than a fingertip: the menu buttons take its width too. */
  .cv-mb { min-width: 44px; }
  .cv-mini, .cv-icon-btn { width: 44px; height: 44px; }
  .cv-tick { width: 44px; height: 44px; }
  .cv-menu button { min-height: 44px; }
  .cv input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), .cv select:not(.cv-to), .cv-dialog input:not([type="checkbox"]):not([type="range"]), .cv-dialog select { min-height: 44px; font-size: var(--text-md); }
  .cv-check { min-height: 44px; align-items: center; }
  body.cv-app #ppBadge { min-height: 44px; }
  /* The badge is as tall as a finger needs, so the status line is too,
     and the badge lies on it rather than on the page above. */
  .cv-status { min-height: 46px; }
  .cv-link { min-height: 44px; }
}

@media print {
  .cv-top, .cv-status, .cv-bar, .cv-side { display: none !important; }
}

/* Small pieces the views draw. */
.cv-wrap { position: relative; }
.cv-menu.is-right { left: auto; right: 0; }
.cv-panel-top { display: flex; align-items: flex-start; gap: var(--space-2); }
.cv-panel-top > div { flex: 1; min-width: 0; }
.cv-field-gap { margin-top: var(--space-4); }
.cv-audio { display: block; width: 100%; }
.cv-compare.is-one { grid-template-columns: minmax(0, 1fr); }