/* manifest-diff.css — assets.gf.cx · shared before/after delta UI (single source)
 *
 * Two composable pieces for "what changed between two snapshots":
 *   1. a .verdict block — a headline callout that states the decoded delta in
 *      one sentence, with directional variants (.up = growth, red left-edge;
 *      .down = shrink, green left-edge) and a .sub before→after line.
 *   2. a delta table — a comparison table with signed Δ columns (.pos / .neg /
 *      .zero) and per-row .tag.new / .tag.gone markers, plus a .cap caption.
 *
 * Extracted from the inline styles of gfcx_r2_manifest.py (the _diff_section /
 * _breakdown_table renderers behind status.gf.cx/r2/<bucket>/manifest/) so any
 * surface can carry the same "mystery, decoded" UI without copying the CSS —
 * the favicon-control-plane / op-panel single-source model applied to a diff.
 *
 * Usage:
 *   <link rel="stylesheet" href="https://assets.gf.cx/manifest-diff/manifest-diff.css">
 *   <div class="manifest-diff"> …verdict + table markup… </div>
 *
 * Everything is namespaced under .manifest-diff so a host page's own bare
 * <table> / .verdict / .tag rules are never touched (the inline source styles a
 * bare table, which is fine inside its own page but wrong for a shared sheet).
 * All colours read the portfolio design tokens with standalone fallbacks.
 *
 * v1.0.0 · 2026-08-19 · extracted from gfcx_r2_manifest.py (_diff_section / _breakdown_table)
 */

.manifest-diff {
  /* self-contained fallbacks so the module works with no host tokens loaded */
  --md-ink: var(--ink, #1a1816);
  --md-ink-soft: var(--ink-soft, #5a544d);
  --md-accent: var(--accent, #2c4a3a);
  --md-line: var(--line, rgba(26,24,22,0.12));
  --md-line-strong: var(--line-strong, rgba(26,24,22,0.32));
  --md-red: var(--red, #a83333);
  --md-green: var(--green, #2c4a3a);
  --md-surface: var(--md-diff-surface, #fff);
  --md-surface-alt: var(--md-diff-surface-alt, #faf7f1);
  --md-mono: var(--mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace);
  --md-serif: var(--serif, 'Newsreader', 'Times New Roman', Georgia, serif);
  color: var(--md-ink);
}

.manifest-diff .mono { font-family: var(--md-mono); }

/* ── verdict — the one-sentence headline that decodes the delta ─────────────── */
.manifest-diff .verdict {
  padding: 14px 18px;
  border: 1px solid var(--md-line);
  border-left: 3px solid var(--md-line-strong);
  border-radius: 6px;
  background: var(--md-surface);
  margin-bottom: 22px;
  font-size: 14.5px;
  line-height: 1.5;
}
.manifest-diff .verdict.up   { border-left-color: var(--md-red); }   /* growth */
.manifest-diff .verdict.down { border-left-color: var(--md-green); } /* shrink */
.manifest-diff .verdict strong {
  font-family: var(--md-serif);
  font-weight: 600;
}
.manifest-diff .verdict em {
  font-family: var(--md-serif);
  font-style: italic;
  color: var(--md-accent);
  font-weight: 400;
}
.manifest-diff .verdict .sub {
  color: var(--md-ink-soft);
  font-size: 13px;
  margin-top: 4px;
}

/* ── delta / breakdown table ───────────────────────────────────────────────── */
.manifest-diff table {
  width: 100%;
  border-collapse: collapse;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
  margin-bottom: 8px;
}
.manifest-diff thead th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--md-ink-soft);
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-line);
  background: var(--md-surface-alt);
}
.manifest-diff th.num,
.manifest-diff td.num {
  text-align: right;
  font-family: var(--md-mono);
  white-space: nowrap;
}
.manifest-diff tbody td { padding: 9px 14px; border-bottom: 1px solid var(--md-line); }
.manifest-diff tbody tr:last-child td { border-bottom: none; }
.manifest-diff tbody tr:hover td { background: var(--md-surface-alt); }
.manifest-diff td.ext { font-family: var(--md-mono); }

/* signed-delta cell tints: positive = red (grew), negative = green (shrank) */
.manifest-diff .pos  { color: var(--md-red); }
.manifest-diff .neg  { color: var(--md-green); }
.manifest-diff .zero { color: var(--md-ink-soft); }

/* per-row new / gone markers */
.manifest-diff .tag {
  font-family: var(--md-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}
.manifest-diff .tag.new  { color: var(--md-red);   background: rgba(168,51,51,0.10); }
.manifest-diff .tag.gone { color: var(--md-green); background: rgba(44,74,58,0.10); }

/* caption line under a table */
.manifest-diff .cap {
  font-size: 12px;
  color: var(--md-ink-soft);
  margin: 2px 0 20px;
}

/* honest empty state — one manifest so far, nothing to diff against yet */
.manifest-diff .empty {
  padding: 16px 18px;
  border: 1px dashed var(--md-line-strong);
  border-radius: 6px;
  color: var(--md-ink-soft);
  font-size: 14px;
  background: var(--md-surface);
  margin-bottom: 22px;
}

/* optional section eyebrow above a verdict / table (matches the source pages) */
.manifest-diff .section-label {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-accent);
  margin: 30px 0 12px;
}
.manifest-diff .section-label:first-child { margin-top: 0; }