/* Campaign breakdown -- the funding picture under the thermometer.
 *
 * The design problem this solves: $3,500,000 of the $9,824,000 "committed" is a planned
 * bank loan plus the appraised value of the current house. Neither is money anyone has
 * given. A single uniform list of five numbers reads as five gifts, so the two kinds are
 * separated in the legend AND inside the bar itself -- the anticipated portion is a
 * hatched band, so you can see at a glance which part of the progress is promised money
 * and which part is a plan.
 *
 * Tokens are this site's own set (tokens.css / tokens-v2.css), matching contribute.css.
 * This is a legacy surface and is not on the RRFlows token contract.
 */

.cm-breakdown {
  max-width: 62rem;
  margin: var(--space-10) auto 0;
  padding-inline: var(--space-6);
  text-align: left;
}

.cm-breakdown__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.cm-breakdown__group {
  border-top: 3px solid var(--color-navy-900);
  padding-top: var(--space-4);
  /* Grid stretches both groups to the same height; this pushes each subtotal to the
   * bottom of that height so the two land on one line. The whole claim of this block is
   * that the parts add up, and subtotals at different heights read as two lists that
   * happen to sit side by side. */
  display: flex;
  flex-direction: column;
}

.cm-breakdown__list { flex: 1 1 auto; }

.cm-breakdown__group[data-kind="anticipated"] {
  border-top-color: var(--color-ink-300);
}

.cm-breakdown__group-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-1);
}

.cm-breakdown__group[data-kind="anticipated"] .cm-breakdown__group-title {
  color: var(--color-ink-500);
}

/* Says the quiet part out loud. Without this the two columns are just a layout choice. */
.cm-breakdown__group-note {
  font-size: var(--text-xs);
  color: var(--color-ink-500);
  margin: 0 0 var(--space-4);
  max-width: 34ch;
}

.cm-breakdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-breakdown__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.cm-breakdown__label {
  font-size: var(--text-base);
  color: var(--color-ink-900);
}

.cm-breakdown__sublabel {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}

.cm-breakdown__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy-900);
  white-space: nowrap;
  /* Exact dollars change width as they animate; without this the whole column jitters. */
  font-variant-numeric: tabular-nums;
}

.cm-breakdown__group[data-kind="anticipated"] .cm-breakdown__value {
  color: var(--color-ink-500);
}

.cm-breakdown__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  font-weight: 700;
}

.cm-breakdown__subtotal .cm-breakdown__label {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

.cm-breakdown__remaining {
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  background: var(--color-cream-50);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* The margin above separates this box from the two breakdown columns. Those columns were
   removed from the-house.html on 2026-08-12, leaving this as the wrapper's only child, so the
   margin stacked on .cm-breakdown's own margin-top and read as a gap rather than as spacing.
   Scoped to :first-child rather than deleted, so the rule stays correct if the columns ever
   come back.
   This file is byte-identical across ezofsigmachi-site and ezhc-landing, enforced by
   .scripts/check-campaign-component.mjs -- edit it in one repo and copy it to the other, or
   check-all fails. The rule is inert on ezhc's thermometer preview, where the columns are
   still present so this box is not the first child. */
.cm-breakdown__remaining:first-child {
  margin-top: 0;
}

.cm-breakdown__remaining-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text, #9A6B00);
}

.cm-breakdown__remaining-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--color-navy-900);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}

/* --- the bar's anticipated band ------------------------------------------------------ */

/* The band positions against the TRACK, which both sites' page CSS leaves `position:
 * static` (ezhc contribute.css:99, ezof pages/commit.css:894). Without this promotion it
 * resolves against `.cm-tracker__bar` instead, escapes the track's `overflow: hidden`, and
 * inherits its 999px radius -- rendering as a rounded lozenge dropped ON the bar rather
 * than as the bar's second segment. Scoped to the component so the older marker-and-tile
 * trackers on the live pages are untouched until they are swapped out. */
[data-campaign-tracker] .cm-tracker__track { position: relative; }

/* Align the bar with the breakdown beneath it: same max-width and inline padding, so the
 * track's ends land on the columns' outer edges. Both sites' page CSS gives the bar
 * `max-width: 960px` and no inline padding, which overhangs the 62rem breakdown by 8px a
 * side on desktop and runs the bar clean off both edges of a phone while every figure
 * under it stays inset. Safe to scope here because `.cm-tracker__marker` resolves its
 * `left: N%` against this box, and the component carries no markers. */
[data-campaign-tracker] .cm-tracker__bar {
  max-width: 62rem;
  padding-inline: var(--space-6);
}

.cm-tracker__fill--anticipated {
  position: absolute;
  inset-block: 0;
  left: 0;
  /* Hard vertical edge where the pledged money ends, pill cap on the right to match
   * `.cm-tracker__fill`. The two always end at the same x by construction, since
   * committed = pledged + anticipated, so the caps coincide instead of doubling up. */
  border-radius: 0 999px 999px 0;
  /* Hatching, not a flat colour: a second solid block reads as a second achievement. */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 22, 41, 0.28) 0 6px,
    rgba(0, 22, 41, 0.10) 6px 12px
  );
  pointer-events: none;
}

.cm-tracker__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}

.cm-tracker__legend-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cm-tracker__legend-swatch {
  width: 1rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-progress-fill, var(--color-gold-500));
}

.cm-tracker__legend-swatch[data-kind="anticipated"] {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0, 22, 41, 0.28) 0 4px,
    rgba(0, 22, 41, 0.10) 4px 8px
  );
  background-color: var(--color-progress-fill, var(--color-gold-500));
}

@media (max-width: 40rem) {
  .cm-breakdown__groups { grid-template-columns: 1fr; gap: var(--space-6); }
  .cm-breakdown__row { padding-block: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-tracker__fill,
  .cm-tracker__fill--anticipated { transition: none; }
}