/* Scribe — the Assignments archive.
 *
 * Loaded after billing.css: the archive's dialog is one of billing's
 * (.billing-dialog), with its backdrop, scroll lock, heading, close button,
 * confirm step and error line, so this file adds only the list and narrows
 * the dialog to it. Built from styles.css's tokens, like billing.css.
 * Everything here is created by lib/archive.js. */

/* One column of rows is all it holds: narrower than the plans. */
.billing-dialog.archive-dialog { width: min(640px, calc(100vw - 32px)); }
.archive-lead { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
/* No handwriting in this browser: said once, above the list, in the voice of the sign-in notice. */
.archive-note { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.archive-status { margin: 18px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.archive-status.bad { color: var(--danger-text); }
.archive-status button { margin-left: 6px; font-size: 12px; padding: 5px 12px; }

.archive-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.archive-list:empty { display: none; }
.archive-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.archive-info { display: grid; gap: 2px; min-width: 0; }
.archive-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.archive-meta { color: var(--muted); font-size: 11px; }
.archive-actions { display: flex; gap: 6px; }
.archive-actions button { font-size: 12px; padding: 7px 12px; white-space: nowrap; }
.archive-actions button[aria-busy="true"] { opacity: .8; cursor: progress; }
/* The one action that can't be undone, in the red of billing's errors. */
.archive-delete { color: var(--danger-text); }
.archive-delete:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger-line); }
/* The "are you sure" and a row's error take the row's whole width, under its title. */
.archive-row > .billing-confirm, .archive-row > .billing-error { grid-column: 1 / -1; }

.archive-empty { margin: 18px 0 0; padding: 22px 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.archive-foot { display: grid; justify-items: center; gap: 6px; margin-top: 16px; }
.archive-foot button { font-size: 12px; }

/* On a phone each row is its title, then its three buttons sharing the full width. */
@media (max-width: 740px) {
  .archive-row { grid-template-columns: minmax(0, 1fr); }
  .archive-actions { flex-wrap: wrap; }
  .archive-actions button { flex: 1 1 auto; }
  .archive-foot button { width: 100%; }
}