/* =============================================================================
   stage-comparison.css — page-specific styles for the Comparison stage.

   Loaded after controls.css + pages.css. Mirrors mockup/html/stage-comparison.jsx
   and the relevant rules from mockup/html/styles.css, adapted to platform tokens.
   Visual law: square corners, no drop shadows, colour only via custom properties.
   ========================================================================== */

/* ── shared atoms ─────────────────────────────────────────────────────────── */

.cmp-kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.cmp-kicker--accent { color: var(--accent-emphasis); }

.cmp-mono-cap {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmp-mono-cap--accent { color: var(--accent-emphasis); }

.cmp-body {
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
}
.cmp-body--lg { font-size: var(--text-body); }
.cmp-body--sm { font-size: var(--text-body-sm); }
.cmp-body--xs { font-size: var(--text-body-xs); }
.cmp-body--primary { color: var(--text-primary); }
.cmp-body + .cmp-body { margin-top: var(--space-2); }

.cmp-empty-line {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.cmp-section-title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

/* ── tab body · sections · cards ──────────────────────────────────────────── */

.cmp-tab { display: flex; flex-direction: column; gap: var(--space-7); }
.cmp-section { display: flex; flex-direction: column; gap: var(--space-3); }
.cmp-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Movement-section head — the count sits right after the label, not floated. */
.cmp-mv__head { display: flex; align-items: center; gap: var(--space-3); }
.cmp-mv__head .kicker { margin: 0; }
.cmp-reads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.cmp-hero { margin-bottom: var(--space-6); }
.cmp-hero__panel { margin-top: var(--space-3); }

.cmp-hero__lede {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-primary);
  max-width: 68rem;
}
/* Spacer only — the feathered divider was removed; the margin keeps the gap. */
.cmp-hero__rule {
  height: 1px;
  margin: var(--space-5) 0 0;
  background: transparent;
}

/* ── tab bar ──────────────────────────────────────────────────────────────── */

.cmp-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.cmp-tabbar .kicker { margin: 0; }
.cmp-seg { flex-wrap: wrap; }

.cmp-tabbody { margin-bottom: var(--space-10); }

/* ── cards & stacks ───────────────────────────────────────────────────────── */

.cmp-stack { display: grid; gap: var(--space-3); }
.cmp-stack--lg { gap: var(--space-4); }

.cmp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.cmp-card__head-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cmp-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.cmp-card__title--lg { font-size: 1.125rem; line-height: 1.3; }

.cmp-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--text-muted);
}

.cmp-summary-panel { margin-bottom: var(--space-6); }

/* ── IC summary layout ────────────────────────────────────────────────────── */

.cmp-summary {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-6);
}

.cmp-card__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--hairline);
}

[data-depth="ic"] .cmp-card__split--analyst { display: none; }

/* ── approval checklist ───────────────────────────────────────────────────── */

.cmp-checklist { margin-top: var(--space-3); }
.cmp-checklist .panel__body { padding: 0; }

.cmp-checklist__head {
  padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--card-bg) 60%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.cmp-checklist__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
}
.cmp-checklist__row:first-child { border-top: 0; }
.cmp-checklist__deliverable {
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  line-height: 1.5;
}
.cmp-checklist__owner {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.cmp-card--implication { margin-top: var(--space-5); }

/* ── compare grid (LtH vs IM) ─────────────────────────────────────────────── */

.cmp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  margin-top: var(--space-4);
}
.cmp-compare__cell { padding: var(--space-4); }
.cmp-compare__cell:first-child { border-right: 1px solid var(--hairline); }

.cmp-card__notes {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-4);
}

.cmp-ic-callout {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--accent);
  padding: var(--space-3) var(--space-4);
}

.cmp-card__consequence {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--hairline);
}
.cmp-card__figures { margin-top: var(--space-3); margin-bottom: var(--space-3); }

/* ── deal-evolution table ─────────────────────────────────────────────────── */

.cmp-evo .panel__body { padding: 0; }

.cmp-evo__head,
.cmp-evo__row {
  display: grid;
  grid-template-columns: 11rem 1fr 1fr 1.1fr 9rem;
  gap: 0;
}
.cmp-evo__head {
  padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, var(--card-bg) 60%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.cmp-evo__row {
  padding: var(--space-5);
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.cmp-evo__row:first-child { border-top: 0; }
.cmp-evo__row > * { padding-right: var(--space-4); }
.cmp-evo__row--empty { grid-template-columns: 1fr; }

.cmp-evo__topic {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-sm);
  line-height: 1.35;
  color: var(--text-primary);
}
.cmp-evo__impl {
  border-left: 1px dashed var(--hairline);
  padding-left: var(--space-4);
}

/* ── financial changes ────────────────────────────────────────────────────── */

.cmp-fin-section { margin-bottom: var(--space-6); }

.cmp-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.cmp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-3);
}

.cmp-fin-rows { margin-top: var(--space-3); }
.cmp-fin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
}
.cmp-fin-srow {
  display: grid;
  grid-template-columns: 1fr 8rem auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
}
.cmp-fin-row--first,
.cmp-fin-srow--first { border-top: 0; }
.cmp-fin-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-body-xs);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.cmp-fin-row__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-primary);
}

.cmp-icread { margin-top: var(--space-4); }

/* ── cost & price table ───────────────────────────────────────────────────── */

.cmp-cost .panel__body { padding: 0; }
.cmp-cost__head,
.cmp-cost__row {
  display: grid;
  grid-template-columns: 12.5rem 1fr 1fr;
}
.cmp-cost__head { border-bottom: 1px solid var(--hairline); }
.cmp-cost__head > * { padding: var(--space-3) var(--space-4); }
.cmp-cost__head > * + * { border-left: 1px solid var(--hairline); }

.cmp-cost__row { border-top: 1px solid var(--hairline); }
.cmp-cost__row:first-child { border-top: 0; }
.cmp-cost__row > * { padding: var(--space-4); }
.cmp-cost__row > * + * { border-left: 1px solid var(--hairline); }

.cmp-cost__dim {
  font-family: var(--font-mono);
  font-size: var(--text-body-xs);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.cmp-cost__scenarios { display: grid; gap: var(--space-3); }

/* ── stress rows ──────────────────────────────────────────────────────────── */

.cmp-stress-rows { margin-top: var(--space-3); }
.cmp-stress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
}
.cmp-stress-row:first-child { border-top: 0; }
.cmp-stress-row__stress {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.cmp-stress-row__result {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text-primary);
}
.cmp-stress-row__result--warn { color: var(--cta); }

/* ── debt fields ──────────────────────────────────────────────────────────── */

.cmp-field {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.cmp-field:first-of-type { border-top: 0; margin-top: var(--space-3); }
.cmp-field--inline { border-top: 0; margin-top: 0; padding-top: 0; }
.cmp-field .cmp-body { margin-top: var(--space-1); line-height: 1.5; }
.cmp-field__warn { color: var(--cta); }

/* ── scores tab ───────────────────────────────────────────────────────────── */

.cmp-scores { display: block; }
.cmp-sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .cmp-summary { grid-template-columns: 1fr; }
  .cmp-grid-2 { grid-template-columns: 1fr; }
  .cmp-grid-3 { grid-template-columns: 1fr; }
  .cmp-evo__head { display: none; }
  .cmp-evo__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .cmp-evo__row > * { padding-right: 0; }
  .cmp-evo__impl { border-left: 0; padding-left: 0; }
  .cmp-cost__head { display: none; }
  .cmp-cost__row { grid-template-columns: 1fr; }
  .cmp-cost__row > * + * { border-left: 0; border-top: 1px solid var(--hairline); }
  .cmp-compare { grid-template-columns: 1fr; }
  .cmp-compare__cell:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .cmp-fin-srow { grid-template-columns: 1fr auto; }
  .cmp-reads { grid-template-columns: 1fr; }
}