/* The Convert dialog (shared/convert/dialog.js): a TlbxUI dialog (shared/tlbxui.css) sized for File Converter's tool
 * (convert/css/tool.css, scoped under .cv-tool), which takes the dialog's colours (the app's theme, through the --s-*
 * tokens TlbxUI sets) instead of File Converter's own. Large on wide screens, the whole screen on phones. */
.sui-dlg.sl-cvt-dlg { width: min(860px, 100%); height: min(780px, calc(100vh - 32px)); max-height: calc(100dvh - 32px); }
.sl-cvt-dlg .sui-body { flex: 1; min-height: 0; padding: 0; overflow: auto; overscroll-behavior: contain; }
.sl-cvt { display: flex; flex-direction: column; min-height: 100%; }
.sui-dlg.sl-cvt-dlg .cv-tool.sl-cvt-tool {
  --bg: var(--s-bg); --panel: var(--s-bg2); --panel-2: color-mix(in srgb, var(--s-fg) 8%, var(--s-bg)); --ink: var(--s-fg); --muted: var(--s-dim);
  --line: var(--s-line); --accent: var(--s-accent); --accent-ink: var(--s-accent-ink); --focus: var(--s-accent);
  color-scheme: inherit; flex: 1; padding: 14px 18px 4px; font: 14px/1.45 var(--s-font); background: var(--s-bg);
}
.sl-cvt-dlg .cv-tool .cv-flow { margin-top: 0; }
.sl-cvt-from {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 18px 0; padding: 8px 10px 8px 12px;
  font: 13px/1.4 var(--s-font); color: var(--s-fg); background: var(--s-sel); border: 1px solid var(--s-line); border-radius: 8px;
}
.sl-cvt-from[hidden], .sl-cvt-note[hidden] { display: none; }
.sl-cvt-from-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.sl-cvt-from-rm, .sl-cvt-dlg .sl-cvt-save, .sl-cvt-dlg .sl-cvt-open {
  font: inherit; font-size: 13px; padding: 4px 10px; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid var(--s-line); border-radius: 6px; white-space: nowrap;
}
.sl-cvt-from-rm:hover, .sl-cvt-dlg .sl-cvt-save:hover:not(:disabled), .sl-cvt-dlg .sl-cvt-open:hover { background: var(--s-hover); }
.sl-cvt-dlg .sl-cvt-save:disabled { opacity: .65; cursor: default; }
.sl-cvt-from-rm:focus-visible, .sl-cvt-dlg .sl-cvt-save:focus-visible, .sl-cvt-dlg .sl-cvt-open:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.sl-cvt-dlg .cv-out-item { flex-wrap: wrap; }
.sl-cvt-notes { padding: 0 18px; }
.sl-cvt-note { margin: 8px 18px 0; font: 13px/1.45 var(--s-font); color: var(--s-dim); }
.sl-cvt-notes .sl-cvt-note { margin: 0 0 6px; }
.sl-cvt-err { color: var(--s-danger); }
.sl-cvt-foot { margin: 0; padding: 10px 18px 12px; font: 12px/1.4 var(--s-font); color: var(--s-dim); }
/* A file dragged over the dialog: one outline round the whole dialog (TlbxDrop marks its target .sd-over). */
.sui-back.sd-over .sl-cvt-dlg { outline: 3px dashed var(--s-accent); outline-offset: -3px; }
@media (max-width: 640px) {
  .sui-back:has(> .sl-cvt-dlg) { padding: 0; }
  .sui-dlg.sl-cvt-dlg { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .sl-cvt-dlg .sui-head { cursor: default; }
  .sl-cvt-dlg .sui-x { width: 40px; height: 40px; }
  .sui-dlg.sl-cvt-dlg .cv-tool.sl-cvt-tool { padding: 12px 16px 4px; }
  .sl-cvt-from { margin: 12px 16px 0; }
  .sl-cvt-notes, .sl-cvt-foot { padding-inline: 16px; }
}