/*
 * File Converter — the file cards with their previews, the format grid and
 * the download receipt. The drop target, fields and status card are
 * media-tools.css; the frame is app-shell.css.
 */

.fc-files { margin-top: 16px; }

.fc-files-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.fc-files-head h2 { margin: 0; font-size: .9rem; }
.fc-total { color: #8b867d; font-family: "DM Mono", ui-monospace, monospace; font-size: .64rem; }

.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 12px;
}

/* .file-item stays on the card so media-tools.css still folds the drop
   target into a strip once there are files; the card undoes its row layout. */
.fc-grid .fc-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--media-line);
  border-radius: 13px;
  background: #fffdf8;
}

.fc-thumb {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--media-line);
  background-color: #efebe3;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 0, 0, .045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, .045) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.fc-thumb canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fc-ext {
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--media-accent-dark);
  background: var(--media-soft);
  font: 600 .62rem "DM Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fc-thumb.is-loading .fc-ext { animation: fc-wait 1.2s ease-in-out infinite; }
@keyframes fc-wait { 50% { opacity: .45; } }

.fc-info { min-width: 0; padding: 9px 11px 10px; }
.fc-info .file-name { font-size: .72rem; }
.fc-info .file-meta { font-family: "DM Mono", ui-monospace, monospace; font-size: .6rem; }
.fc-outcome { margin: 5px 0 0; color: var(--media-accent-dark); font-size: .64rem; font-weight: 650; }
.fc-outcome:empty { display: none; }
.fc-card.is-error .fc-outcome { color: #b73f31; font-weight: 600; line-height: 1.35; }

.fc-card.is-working {
  border-color: var(--media-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--media-accent) 14%, transparent);
}

.fc-card.is-done { border-color: color-mix(in srgb, var(--media-accent) 45%, var(--media-line)); }

.fc-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--media-line);
  border-radius: 8px;
  color: #6f6b62;
  background: rgba(255, 253, 248, .94);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}

.fc-remove svg { width: 12px; height: 12px; }
.fc-card:hover .fc-remove,
.fc-card:focus-within .fc-remove { opacity: 1; }

@media (hover: hover) {
  .fc-remove:hover { border-color: #aca397; color: #b73f31; }
}

/* A finger cannot hover to find it, and has nothing to drop: once there are
   files, more come from Add files in the bar. */
@media (hover: none) {
  .fc-remove { opacity: 1; }
  .fc-main:has(.file-item) > .converter-drop { display: none; }
}

/* Every output in view at once, so the one wanted is found by looking. */
.fc-formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.fc-formats button {
  height: 36px;
  padding: 0;
  border: 1px solid var(--media-line);
  border-radius: 9px;
  color: #5e5b54;
  background: #fffdf8;
  cursor: pointer;
  font: 700 .7rem "Inter", system-ui, sans-serif;
}

.fc-formats button[aria-pressed="true"] {
  border-color: var(--media-accent);
  color: var(--media-accent-dark);
  background: color-mix(in srgb, var(--media-soft) 60%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--media-accent) 12%, transparent);
}

.fc-formats button:disabled { cursor: not-allowed; opacity: .4; }

@media (hover: hover) {
  .fc-formats button:hover:not(:disabled):not([aria-pressed="true"]) { border-color: #aca397; }
}

/* The progress bar means something only while there is work going on. */
.status-card:not(.is-working) .progress-track { display: none; }

.fc-receipt { margin: 9px 0 0 18px; }
.fc-receipt .qp-link { font-size: .7rem; }
.fc-receipt-files { margin: 10px 0 0 18px; }
.fc-receipt-files summary { color: var(--text-secondary, #56534d); cursor: pointer; font-size: .66rem; font-weight: 650; }
.fc-receipt-list { display: grid; gap: 2px; margin-top: 8px; max-height: 260px; overflow-y: auto; }

.fc-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--media-line);
}

.fc-receipt-copy { display: grid; min-width: 0; }
.fc-receipt-name { overflow: hidden; font-size: .66rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.fc-receipt-meta { color: #8b867d; font-size: .6rem; }
.fc-receipt-row .qp-link { flex: none; font-size: .66rem; }

/* In one column the settings would follow every card, so once there are
   files the format (and the download it made) come before the cards and
   the options after them. The shell makes a .qp-work a block here, hence
   .qp-work.fc-work; the panel's sections become the column's own items. */
@media (max-width: 840px) {
  .qp-work.fc-work:has(.file-item) { display: flex; flex-direction: column; }
  .qp-work.fc-work:has(.file-item) .qp-side { display: contents; }
  .qp-work.fc-work:has(.file-item) .qp-side > .qp-sec { order: 1; padding-inline: var(--qp-pad); }
  .qp-work.fc-work:has(.file-item) .qp-side > .fc-format-sec,
  .qp-work.fc-work:has(.file-item) .qp-side > #statusSection { order: -1; }
  .qp-work.fc-work:has(.file-item) .qp-side > .fc-options-sec { border-top: 1px solid var(--border, #ded8cd); }
}

@media (max-width: 540px) {
  .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-thumb.is-loading .fc-ext { animation: none; }
}