/* Tasks archive (docs/ARCHIVE.md): Old tasks from Linear to pick from, and the admins' Linear import.
   Locky Design System tokens only. */

.view[data-page="archive"], .view[data-page="archive-history"], .view[data-page="archive-linear"] { --locky: url("/img/locky-box.png"); --locky-shows: block; }

/* ---------- the menu: Archive is a menu of its own (app.js ownMenu), set apart like Loom, with a sky edge */
.nav-own-archive { --section-face: var(--face-sky); }
.nav-own-note { margin: 2px 10px 6px; font-size: 11.5px; color: var(--top-muted); }

/* ---------- #/archive */
.arc-welcome { margin-bottom: 16px; }
.arc-tabs { margin-bottom: 14px; }
.arc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.arc-filter { flex: 1 1 200px; max-width: 320px; }
.arc-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; }
.arc-rest select { max-width: 100%; }

.arc-group { margin-bottom: 14px; }
.arc-group-head { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.arc-list { list-style: none; margin: 0; padding: 0; }
.arc-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-top: 1.5px solid var(--line); }
.arc-row:first-child { border-top: 0; }
.arc-row.is-picked { background: var(--accent-soft); border-radius: var(--radius-s); }
.arc-row input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.arc-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; cursor: pointer; }
.arc-ref { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.arc-title { font-weight: 600; overflow-wrap: anywhere; }
.arc-meta { font-size: 12.5px; color: var(--muted); }
.arc-project { flex: none; max-width: 190px; font-size: 13px; }

/* What to do with the ticked ones, kept in reach at the bottom of the screen. */
.arc-bar {
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin-top: 6px; padding: 10px 14px; border-radius: var(--radius); background: var(--raised); border: 2px solid var(--keyline); box-shadow: var(--shadow-lift);
}
.arc-bar-count { font-weight: 700; }
.arc-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- #/archive/history: a record, so nothing to tick and the rows don't read as clickable */
.arc-past { cursor: auto; }
.chip.chip-arc-done { --chip-face: var(--face-green); }
.chip.chip-arc-cancelled { --chip-face: var(--face-grey); }
.chip.chip-arc-archived { --chip-face: var(--face-sky); }
.arc-more-text { margin-top: 2px; font-size: 13px; }
.arc-more-text summary { width: fit-content; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.arc-detail { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.arc-link { flex: none; }
.arc-more { display: flex; justify-content: center; margin: 4px 0 14px; }

/* ---------- #/archive/linear */
.arc-steps { margin: 0 0 12px 18px; display: grid; gap: 4px; font-size: 13.5px; }
.arc-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.arc-upload-row input[type="file"] { max-width: 100%; }
.arc-names { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.arc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.arc-name-text { flex: 1 1 180px; font-weight: 600; overflow-wrap: anywhere; }
.arc-name.is-out .arc-name-text { opacity: .65; }
.arc-field { display: grid; gap: 4px; margin: 0 0 12px; max-width: 440px; }
.arc-field label { font-weight: 600; }
.arc-field p { margin: 0; }
.arc-table-wrap { overflow-x: auto; }
.arc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.arc-table :is(th, td) { padding: 7px 8px; text-align: left; border-top: 1.5px solid var(--line); white-space: nowrap; }
.arc-table thead th { border-top: 0; font-size: 12px; color: var(--muted); }
.arc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.arc-loads { margin: 0 0 0 18px; display: grid; gap: 4px; font-size: 13px; }

@media (max-width: 640px) {
  .arc-row { flex-wrap: wrap; }
  .arc-project { flex: 1 1 100%; max-width: none; margin-left: 28px; }
  .arc-filter { max-width: none; }
}