/* revenue-split.css — "what flows to the association" split view.
   Pairs with dist/js/client/revenue-split.js and the #cv-split markup in
   src/ephemeral/association-revenue-split.md. Zone colours are driven by a
   [data-zone] attribute the JS stamps on #cv-split. */

.cv-split {
  --cv-rosie: #6c757d;          /* Rosie's take — neutral slate */
  --cv-assoc: #198754;          /* association keeps — success green */
  --cv-funding: #dc3545;        /* association funds — danger red */
  --cv-ramp: #fd7e14;           /* ramp (< half) — amber */
  margin: 2rem 0;
}

/* ── Readout cards ───────────────────────────────────────────── */
.cv-split__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cv-split__card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  text-align: center;
  background: var(--bs-body-bg);
}
.cv-split__role { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); }
.cv-split__verb { font-size: 0.95rem; color: var(--bs-secondary-color); margin-top: 0.25rem; }
.cv-split__amt  { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.1; }
.cv-split__note { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 0.1rem; }

.cv-split__card--rosie .cv-split__amt { color: var(--cv-rosie); }
/* Association card: green when it keeps, red when it funds (net negative). */
.cv-split__card--assoc[data-sign="pos"] { border-color: var(--cv-assoc); }
.cv-split__card--assoc[data-sign="pos"] .cv-split__amt { color: var(--cv-assoc); }
.cv-split__card--assoc[data-sign="neg"] { border-color: var(--cv-funding); }
.cv-split__card--assoc[data-sign="neg"] .cv-split__amt,
.cv-split__card--assoc[data-sign="neg"] .cv-split__verb { color: var(--cv-funding); }

/* ── Proportional split bar ──────────────────────────────────── */
.cv-split-bar {
  display: flex;
  height: 2.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  margin-bottom: 1.5rem;
}
.cv-split-bar__seg {
  transition: width 0.25s ease;
  min-width: 0;
}
.cv-split-bar__seg--assoc { background: var(--cv-assoc); }
.cv-split-bar__seg--rosie { background: var(--cv-rosie); }
/* Funding zone: no association segment — flag the all-Rosie bar with a red
   hatch so the "association is paying in" state reads at a glance. */
.cv-split[data-zone="funding"] .cv-split-bar__seg--rosie {
  background-image: repeating-linear-gradient(45deg, var(--cv-funding) 0 8px, transparent 8px 16px);
  background-color: var(--cv-rosie);
}
.cv-split[data-zone="ramp"] .cv-split-bar__seg--assoc { background: var(--cv-ramp); }

/* ── Gross-revenue axis with hash marks ──────────────────────── */
.cv-split-axis { margin: 0 0 1.5rem; }
.cv-split-axis__track {
  position: relative;
  height: 0.5rem;
  border-radius: 1rem;
  /* Three zone bands: funding | ramp | 50-50. Stops match axisPct():
     break-even ($2,500) at 25%, 50/50 ($5,000) at 50%. */
  background: linear-gradient(to right,
    rgba(220, 53, 69, 0.25) 0 25%,
    rgba(253, 126, 20, 0.25) 25% 50%,
    rgba(25, 135, 84, 0.20) 50% 100%);
}
.cv-split-axis__marker {
  position: absolute;
  top: 50%;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--bs-body-color);
  border: 2px solid var(--bs-body-bg);
  transform: translate(-50%, -50%);
  transition: left 0.25s ease;
  box-shadow: 0 0 0 1px var(--bs-border-color);
}
.cv-split-axis__hash {
  position: absolute;
  top: -0.35rem;
  transform: translateX(-50%);
  border-left: 2px solid var(--bs-secondary-color);
  height: 1.2rem;
  padding-left: 0.35rem;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
.cv-split-axis__hash span { display: block; font-weight: 400; color: var(--bs-secondary-color); }
.cv-split-axis__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  margin-top: 1.6rem;
}

/* ── Zone caption ────────────────────────────────────────────── */
.cv-split__zone {
  text-align: center;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
}
.cv-split__zone[data-zone="funding"] { color: var(--cv-funding); }
.cv-split__zone[data-zone="ramp"]    { color: var(--cv-ramp); }
.cv-split__zone[data-zone="fifty"]   { color: var(--cv-assoc); }

/* ── Inline gloss (minimum guarantee) ────────────────────────── */
.cv-gloss {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  border-left: 3px solid var(--bs-border-color);
  padding-left: 0.75rem;
  margin-top: 1.25rem;
}
.cv-gloss dfn { font-style: normal; font-weight: 600; color: var(--bs-body-color); }

/* ── Member-organizations multiplier (lives in the split, not the calc) ── */
.cv-split-scale { background: var(--bs-tertiary-bg); }
.cv-split-gross-line {
  font-size: 1.05rem;
  color: var(--bs-secondary-color);
}
.cv-split-gross-line strong {
  color: var(--bs-body-color);
  font-size: 1.25rem;
}

/* ── Footer reminder: the split is cost recovery, not a revenue share ── */
.cv-split-footer .bi { color: var(--cv-assoc, #198754); }

@media (max-width: 480px) {
  .cv-split__cards { grid-template-columns: 1fr; }
}