/* File converter (/file-converter), in the site's look. */
.tool-crumb { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 700; }
.tool-crumb a { text-decoration: none; border-bottom: var(--rule-ink) solid currentColor; }
.tool-crumb a::before { content: "← "; }
.fc-band { padding-top: var(--space-md); }
.fc-ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-promise { display: flex; align-items: flex-start; gap: var(--space-2xs); }
.fc-promise .fc-ic { margin-top: 0.2em; color: var(--color-sign); }

.fc-drop {
  position: relative; display: grid; place-items: center; gap: var(--space-3xs); text-align: center;
  min-height: 12rem; padding: var(--space-lg) var(--space-md);
  border: var(--rule-ink) dashed var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2);
  cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.fc-drop:hover, .fc-drop.is-over { background: color-mix(in srgb, var(--color-sign) 10%, var(--color-paper-2)); border-color: var(--color-sign); }
.fc-drop:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.fc-drop-ic { width: 2.5rem; height: 2.5rem; color: var(--color-sign); }
.fc-drop-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.fc-drop-hint { color: var(--color-muted); font-size: var(--text-sm); }
.fc-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.fc-error { margin-top: var(--space-md); }
.fc-work { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.fc-work:empty { display: none; }
.fc-info, .fc-result { background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); padding: var(--space-md); display: grid; gap: var(--space-3xs); }
.fc-result { border-color: var(--color-sign); box-shadow: 0 6px 0 var(--color-sign); }
.fc-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); overflow-wrap: anywhere; }
.fc-result-note { font-size: var(--text-sm); font-weight: 600; }
.fc-result-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.fc-info[hidden], .fc-result[hidden], .fc-targets[hidden], .fc-status[hidden], .fc-go[hidden], .fc-error[hidden], [hidden].fc-result-note, [hidden].fc-media-note { display: none; }

.fc-targets { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-xs); }
.fc-target-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.fc-target { position: relative; }
.fc-target input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-target label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm);
  border: var(--rule-ink) solid var(--color-ink); border-radius: 999px; background: var(--color-paper-2);
  font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.fc-target label:hover { background: var(--color-paper-3); }
.fc-target input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.fc-target input:focus-visible + label { outline: 3px solid var(--color-sign); outline-offset: 2px; }
.fc-go { justify-self: start; min-width: 10rem; }

.fc-status { display: grid; gap: var(--space-2xs); font-weight: 600; }
.fc-status progress { width: 100%; max-width: 28rem; height: 0.75rem; accent-color: var(--color-sign); }

.fc-matrix-title { margin-top: var(--space-xl); margin-bottom: var(--space-xs); }
.fc-matrix { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-paper-2); border: var(--rule-ink) solid var(--color-ink); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--text-sm); }
.fc-matrix th, .fc-matrix td { text-align: left; vertical-align: top; padding: var(--space-2xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.fc-matrix thead th { background: var(--color-paper-3); }
.fc-matrix tbody th { font-weight: 700; white-space: nowrap; }
.fc-matrix tr:last-child th, .fc-matrix tr:last-child td { border-bottom: 0; }
.fc-matrix td:last-child { white-space: nowrap; }
.fc-fine { margin-top: var(--space-sm); font-size: var(--text-sm); max-width: 46rem; }