/* OXXON VERIFY — `/compare`, the dedicated Version Comparison workflow
   (2026-07-26 redesign). Page-specific styles only; the drop zones,
   processing steps and buttons read the shared `oxu-*`/`ox-*` classes and
   `--ox-*` tokens (VERIFY's blue accent applies automatically via the
   `.verify-theme` body class the shared shell already sets). */

/* Minimal focused header: shared now (`.ox-focused-*`, components.css). Only
   VERIFY's one remaining product-specific class stays here. */
.ox-focused-reports { flex-shrink: 0; }

/* ── Shared page rhythm ──────────────────────────────────────────────────── */
/* The results section (#oxr-results) is declared last in the document but
   must appear first once shown (2026-08-02 post-processing layout revision) —
   `order` rather than a DOM move, so it works purely by un-hiding, no JS
   reparenting required. */
#verify-compare-app { display: flex; flex-direction: column; }
#oxr-results { order: -1; }
.oxv-compare-container { max-width: 880px; margin: 0 auto; padding: 0 var(--ox-s5); }
.oxv-stage { padding: var(--ox-s8) 0; }
.oxv-stage + .oxv-stage { padding-top: 0; }

.oxv-compare-heading { text-align: center; }
.oxv-compare-lede {
  text-align: center; max-width: 560px; margin: var(--ox-s4) auto 0;
  color: var(--ox-body); font-size: var(--ox-size-2); line-height: 1.6;
}
.oxv-compare-sublede {
  text-align: center; margin: var(--ox-s2) auto 0;
  color: var(--ox-muted); font-size: var(--ox-size-1);
}

/* ── Upload cards ────────────────────────────────────────────────────────── */
.oxv-upload-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ox-s5);
  margin-top: var(--ox-s7); align-items: stretch;
}
.oxv-upload-card { display: flex; flex-direction: column; }
/* Upload area background: light grey (2026-08-02 layout revision). */
.oxv-upload-card .oxu-dropzone { background: #F2F3F2; }
.oxv-upload-eyebrow {
  font-family: var(--ox-font-ui); font-size: var(--ox-size-0); font-weight: 700;
  letter-spacing: 0.1em; color: var(--ox-accent); margin-bottom: var(--ox-s2);
}
.oxv-upload-title { margin-bottom: 4px; }
.oxv-upload-hint { color: var(--ox-muted); font-size: var(--ox-size-1); margin-bottom: var(--ox-s4); }
.oxv-upload-card .oxu-dropzone { flex: 1; margin-bottom: 0; }

/* The shared `upload.css` now carries the base no-check/no-remove rules
   (`.oxu-drop-selected`, `.oxu-browse-again`, the `[hidden]` specificity fix)
   unscoped, so every product gets them; this file only adds VERIFY's own
   weight/rhythm on top of that shared base. */
.oxv-upload-card .oxu-selected-name { color: var(--ox-ink); font-weight: 600; }
.oxv-upload-card .oxu-browse-again { margin-top: var(--ox-s2); }

.oxv-compare-form .oxu-error { margin-top: var(--ox-s5); margin-bottom: 0; }

.oxv-compare-submit {
  display: flex; width: 100%; max-width: 880px; margin: var(--ox-s6) auto 0;
  justify-content: center;
}

@media (max-width: 768px) {
  .oxv-upload-grid { grid-template-columns: 1fr; }
}

/* ── Processing stage ────────────────────────────────────────────────────── */
.oxv-processing { max-width: 520px; margin: 0 auto; text-align: center; }
.oxv-processing .oxu-steps { text-align: left; }
.oxv-processing-filenames {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-bottom: var(--ox-s7); color: var(--ox-ink); font-weight: 500;
  font-size: var(--ox-size-1); word-break: break-all;
}
.oxv-processing-filenames .oxv-proc-arrow { color: var(--ox-muted); font-weight: 400; }

/* ── Results stage ───────────────────────────────────────────────────────── */
.oxv-results-section { padding: var(--ox-s8) 0; }
.oxv-results-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ox-s5); flex-wrap: wrap; margin-bottom: var(--ox-s6); }
.oxv-results-eyebrow {
  text-align: center; letter-spacing: 0.15em; color: var(--ox-accent);
  font-weight: 700; margin-bottom: var(--ox-s2);
}
.oxv-compare-filenames {
  text-align: center; color: var(--ox-muted); font-size: var(--ox-size-1);
  margin: var(--ox-s2) 0 var(--ox-s7); word-break: break-all;
}
.oxv-compare-filenames .oxv-arrow { margin: 0 8px; color: var(--ox-border); }

.oxv-summary-panel {
  display: flex; align-items: center; justify-content: center; gap: var(--ox-s8);
  border: 1px solid var(--ox-border); border-radius: var(--ox-radius-card);
  background: var(--ox-accent-tint); padding: var(--ox-s7) var(--ox-s6);
  margin-bottom: var(--ox-s7);
}
.oxv-summary-metric { text-align: center; }
.oxv-summary-value {
  font-family: var(--ox-font-mono); font-size: 2.5rem; font-weight: 700;
  color: var(--ox-accent); line-height: 1;
}
.oxv-summary-label {
  margin-top: var(--ox-s2); color: var(--ox-body); font-size: var(--ox-size-1); font-weight: 500;
}
.oxv-summary-divider { width: 1px; align-self: stretch; background: var(--ox-border); }

.oxv-clean-banner {
  border: 1px solid var(--ox-accent); background: var(--ox-accent-tint);
  border-radius: var(--ox-radius); padding: var(--ox-s6); text-align: center;
  color: var(--ox-ink); font-weight: 600; margin-bottom: var(--ox-s7);
}

.oxv-section-heading {
  font-size: var(--ox-size-1); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ox-muted); margin-bottom: var(--ox-s4);
}

.oxv-domain-rows { display: flex; flex-direction: column; gap: var(--ox-s3); margin-bottom: var(--ox-s8); }
.oxv-domain-row {
  border: 1px solid var(--ox-border-subtle); border-radius: var(--ox-radius);
  padding: var(--ox-s4) var(--ox-s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ox-s5); flex-wrap: wrap;
}
.oxv-domain-row-label { font-weight: 600; color: var(--ox-ink); min-width: 110px; }
.oxv-domain-row-stats { display: flex; gap: var(--ox-s6); flex-wrap: wrap; }
.oxv-stat { text-align: center; min-width: 56px; }
.oxv-stat-value { display: block; font-family: var(--ox-font-mono); font-weight: 700; font-size: var(--ox-size-2); }
.oxv-stat-label { display: block; font-size: 0.6875rem; color: var(--ox-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.oxv-stat--changed .oxv-stat-value { color: var(--ox-accent); }
.oxv-stat--added .oxv-stat-value,
.oxv-stat--removed .oxv-stat-value { color: var(--ox-ink); }
.oxv-stat--unchanged { opacity: 0.55; }

.oxv-reports-heading { text-align: center; margin-bottom: var(--ox-s5); }
.oxv-report-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ox-s5); margin-bottom: var(--ox-s7); }
.oxv-report-card {
  border: 1px solid var(--ox-border-subtle); border-radius: var(--ox-radius-card);
  padding: var(--ox-s5); display: flex; flex-direction: column;
}
.oxv-report-card h3 { margin-bottom: var(--ox-s2); }
.oxv-report-card p { color: var(--ox-muted); font-size: var(--ox-size-1); line-height: 1.5; flex: 1; margin-bottom: var(--ox-s5); }
.oxv-report-btn { width: 100%; justify-content: center; }

.oxv-again-row { text-align: center; padding-top: var(--ox-s5); border-top: 1px solid var(--ox-border-subtle); }

@media (max-width: 768px) {
  .oxv-summary-panel { flex-direction: column; gap: var(--ox-s5); }
  .oxv-summary-divider { width: 60%; height: 1px; }
  .oxv-report-cards { grid-template-columns: 1fr; }
  .oxv-domain-row { flex-direction: column; align-items: flex-start; }
  .oxv-domain-row-stats { gap: var(--ox-s5); }
}