/* Exports page: the CMS bulk-import batches (tools/import-bundle output).
   Built entirely on top of the shared tokens in style.css - no new colors,
   no fourth chip family. State chips are the shared .rs-stage / .rs-flag
   classes; everything else here is layout and quiet provenance ink. */

/* The Articles page widens .wrap.wide in index.css, which this page does not
   load, so it sat 400px narrower than its sibling. Same full-bleed width. */
.wrap.wide { max-width: min(1440px, calc(100vw - 56px)); }

.exports-empty {
  color: var(--muted);
  margin-top: 2em;
}

.exports-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exports-card {
  border-bottom: 1px solid var(--border);
  padding: 18px 2px 20px;
}

/* One flush-left line. The sequence number, the batch name and the timestamp
   used to be three anchors on three alignments with a void between them; they
   read as one sentence now. */
.exports-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
}

.exports-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: var(--chip-h, 20px);
  padding: 0 5px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--chip-r, 5px);
  background: var(--surface-sunken, transparent);
  color: var(--meta-fg, var(--muted));
  font-size: var(--chip-fs, 0.7188rem);
  font-weight: var(--chip-fw, 700);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.exports-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--heading-fg, var(--fg));
}

.exports-sep {
  color: var(--meta-fg-quiet, var(--muted));
  font-size: 0.8125rem;
}

.exports-meta {
  color: var(--meta-fg, var(--muted));
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Status row: the shared state chip, the check count and any supersession
   hint on one line. Colors come from style.css's lane system - amber = needs
   a human, red = blocks the import, ghost = settled, grey = inert. */
.exports-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
}

/* A clean check count is a number, not a state: plain text, no chip. Only a
   failure, which stops the packager, gets chip weight (.rs-flag). */
.exports-checks {
  font-variant-numeric: tabular-nums;
}

/* What the packager did on the way in, in plain language. Provenance ink:
   no hue, no chips, it reports rather than alarms. */
.exports-fidelity {
  margin: 8px 0 0;
  color: var(--meta-fg, var(--muted));
  font-size: 0.75rem;
  line-height: 1.45;
}

.exports-fidelity-none {
  color: var(--meta-fg-quiet, var(--muted));
}

.exports-titles {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 24px;
  font-size: 0.8125rem;
  color: var(--meta-fg, var(--muted));
}

.exports-titles li {
  margin: 0;
  padding: 3px 0;
}

/* Each title links back to the article page it was packaged from. Titles the
   built index does not carry (the franchisee portal set) stay plain text. */
.exports-titles a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.exports-titles a:hover {
  color: var(--fg);
  text-decoration-thickness: 2px;
}

.exports-title-plain {
  color: var(--meta-fg, var(--muted));
}

.exports-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.exports-actions button,
.exports-actions a {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 7px;
  background: var(--surface-control, var(--bg));
  color: var(--control-fg, var(--fg));
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 620;
  cursor: pointer;
  text-decoration: none;
}

.exports-actions button:hover,
.exports-actions a:hover {
  background: var(--surface-control-hover, var(--card-bg));
  border-color: var(--border-strong, var(--border));
}

/* Copy JSON is the primary action now: it is what the bulk API job consumes.
   Download is the file fallback beside it. */
.exports-actions button.exports-copy {
  background: var(--accent-navy, var(--fg));
  border-color: var(--accent-navy, var(--fg));
  color: var(--on-accent, #fff);
}

.exports-actions button.exports-copy:hover {
  background: var(--accent-navy-hover, var(--accent-navy, var(--fg)));
  border-color: var(--accent-navy-hover, var(--accent-navy, var(--fg)));
  color: var(--on-accent, #fff);
}

.exports-actions button.exports-checkoff.is-checked {
  color: var(--meta-fg-quiet, var(--muted));
}

/* Supersession hint: a newer batch exists in this family and this card is
   still unconfirmed. Never shown on a confirmed card - see app.py's
   superseded_by (only set on unchecked rows). */
.exports-superseded {
  font-size: 0.75rem;
}