/* The Desk tools for files, office documents and keys: CHECKDIGIT,
   SSHKEY, CSR, IWORK, SLIM, ROUTE, OFFICEKEY, COMBINE, QRSCAN, UNPACK, PGP
   and FONTSWAP.

   They share four things and no more: a place to drop a file, a finding
   with a coloured edge that says whether it is good or bad news, a box of
   monospace text that is a key or a certificate, and a list of files with
   a button on each. The drop target takes its surface from theme.css's
   list of drop zones (.drop); this sheet only lays out what is inside. */

.fk-drop { padding: 26px 18px; text-align: center; }
.fk-drop strong { display: block; font-size: var(--text-md); color: var(--ink); margin-bottom: 4px; }
.fk-drop span { display: block; font-size: var(--text-xs); color: var(--ink-soft); max-width: 58ch; margin: 0 auto; }
.fk-drop .btn-secondary { margin-top: 14px; }

.fk-find {
  font-size: var(--text-sm);
  line-height: 1.55;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  margin: 0 0 8px;
  background: var(--paper-raised);
  word-break: break-word;
}
.fk-find.is-bad { border-left-color: var(--danger); }
.fk-find.is-warn { border-left-color: var(--warn); }
.fk-find.is-ok { border-left-color: var(--good); }
.fk-find code { font: var(--text-xs) var(--font-mono); word-break: break-all; }
.fk-soft { color: var(--ink-soft); }
.fk-yes { color: var(--accent-strong); }
.fk-no { color: var(--danger); }
.fk-scroll { overflow-x: auto; }

.fk-key {
  width: 100%;
  font: var(--text-2xs)/1.5 var(--font-mono);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-inset);
  color: var(--ink);
  resize: vertical;
  word-break: break-all;
}

.fk-list { list-style: none; margin: 12px 0 0; padding: 0; }
.fk-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
}
.fk-list li > span:first-child { flex: 1 1 220px; min-width: 0; word-break: break-all; }
.fk-list .fk-size { font: var(--text-2xs) var(--font-mono); color: var(--ink-soft); }
.fk-list .btn-secondary { min-height: 44px; }

.fk-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font: var(--text-sm) var(--font-sans); color: var(--ink); }
.fk-check input { width: 20px; height: 20px; }

.fk-preview { max-width: 100%; margin: 12px 0 0; border-radius: var(--radius-md); border: 1px solid var(--rule); background: var(--paper-inset); }
.fk-preview img, .fk-preview canvas, .fk-preview video { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); }
.fk-narrow { max-width: 360px; }
.fk-h { margin-top: 22px; }

/* ROUTE draws a track with no map under it: the line, the waypoints, and
   where it starts and ends. */
.fk-map { margin: 14px 0 0; background: var(--paper-inset); border-radius: var(--radius-md); padding: 8px; }
.fk-map svg { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; margin: 0 auto; }
.fk-track { fill: none; stroke: var(--accent-strong); stroke-width: var(--icon-stroke); stroke-linejoin: round; stroke-linecap: round; }
.fk-wpt { fill: var(--ink-soft); }
.fk-start { fill: var(--good); }
.fk-end { fill: var(--danger); }
.fk-flags { margin: 6px 0 0 18px; }

/* PGP's four jobs, as a segmented control: the same shape as CIPHER's. */
.fk-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px 4px; margin: 0 0 16px; background: var(--paper-inset); border-radius: var(--radius-pill); box-shadow: var(--elev-sunk); }
.fk-tab { font: 500 var(--text-sm) var(--font-sans); min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); cursor: pointer; }
.fk-tab:hover { color: var(--ink); }
.fk-tab[aria-selected="true"] { font-weight: 600; color: var(--ink); background: var(--paper-raised); box-shadow: 0 0 0 .5px var(--hairline), var(--elev-1); }