/* Recover calculators (revenue leak, retention & ROI). Loaded by /js/calculators.js on any page. */

.rc { container: rc / inline-size; min-width: 0; }
.rc .calc { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
@container rc (min-width: 820px) {
  .rc .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .rc--compact .calc { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
.rc .calc > * { min-width: 0; }
.rc--compact .calc { padding: clamp(1rem, .8rem + 1.2vw, 1.75rem); border-radius: var(--radius-lg); }

/* ---------- inputs ---------- */
.rc .calc__inputs { gap: 1.1rem; }
.rc-cur { display: grid; gap: .35rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.rc-cur__select { max-width: 22rem; }
.rc-group { border: 0; margin: 0; padding: 0; display: grid; gap: 1.1rem; min-width: 0; }
.rc-group + .rc-group { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.rc-group__legend { float: left; width: 100%; padding: 0; margin-bottom: .2rem; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); display: inline-flex; align-items: center; gap: .5rem; }
.rc-group__legend::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--gold); }
.rc-group:nth-of-type(2) .rc-group__legend::before { background: var(--overdue); }
.rc-group:nth-of-type(3) .rc-group__legend::before { background: var(--dormant); }

.rc-row .range-row__head { align-items: center; flex-wrap: wrap; gap: .4rem 1rem; }
.rc-row__label { font-weight: 600; font-size: var(--fs-sm); flex: 1 1 12rem; line-height: 1.35; }
.rc-num { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding-inline: .7rem; min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.rc-num:focus-within { border-color: var(--deep); box-shadow: 0 0 0 4px rgba(18, 160, 108, .18); }
.rc-num__input.input { border: 0; box-shadow: none; padding: .45rem .2rem; min-height: 40px; width: 5.5rem; text-align: end; font-family: var(--font-mono); font-weight: 500; font-size: 1rem; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.rc-num--money .rc-num__input.input { width: 7.5rem; }
.rc-num__input.input:focus { box-shadow: none; }
.rc-num__input::-webkit-outer-spin-button, .rc-num__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rc-num__unit { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--slate); white-space: nowrap; }
.rc-num__unit--pre { margin-inline-end: .2rem; }
.rc .range { height: 32px; }
.rc .field__hint { margin: 0; }
.rc-compact-note { color: var(--slate); margin: 0; }

/* ---------- output panel ---------- */
.rc-out { position: relative; overflow: hidden; }
.rc-out::before { content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -200px; top: -220px; background: radial-gradient(closest-side, rgba(43, 212, 143, .16), transparent); pointer-events: none; }
.rc-out > * { position: relative; }
.rc-out__title { font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--signal) !important; margin: 0; }
.rc-out__label { color: #C7D8D3; font-size: var(--fs-sm); margin: 0 0 .35rem; }
.rc .calc__big { overflow-wrap: anywhere; margin: 0; font-variant-numeric: tabular-nums; }
.rc-out__sub { color: #C7D8D3; font-size: var(--fs-sm); margin: .5rem 0 0; }
.rc-out__sub .amount { color: var(--gold); }
.rc-out a:not(.btn) { color: var(--signal); }
.rc-out .source { color: #8FA8A2; }
.rc-cap { color: var(--gold); margin: .4rem 0 0; }

/* bar chart (leak) */
.rc-chart { overflow: visible; }
.rc-chart text { font-size: 12px; }
.rc-group > .rc-row { clear: both; }
.rc-bar__label { fill: #C7D8D3 !important; }
.rc-bar__value { fill: #fff !important; font-family: var(--font-mono) !important; font-weight: 500; }
.rc-bar__track { fill: rgba(255, 255, 255, .06); }
.rc-bar__fill { transition: width .45s var(--ease); }
.rc-bar--quotes .rc-bar__fill { fill: var(--gold); }
.rc-bar--react .rc-bar__fill { fill: #8FB3E8; }
.rc-bar--overdue .rc-bar__fill { fill: #F2A35E; }
.rc-bar--plan .rc-bar__fill { fill: var(--signal); }

/* line chart (retention) */
.rc-figure { margin: 0; }
.rc-grid .axis { stroke: rgba(255, 255, 255, .1); }
.rc-area { fill: rgba(43, 212, 143, .16); }
.rc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rc-line--improved { stroke: var(--signal); }
.rc-line--current { stroke: #A9BDB8; stroke-dasharray: 5 4; }
.rc-dot--improved { fill: var(--signal); }
.rc-dot--current { fill: var(--midnight); stroke: #A9BDB8; stroke-width: 2; }
.rc-xlab text { fill: #A9BDB8; }
.rc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; padding: 0; margin: .5rem 0 0; font-size: var(--fs-xs); color: #C7D8D3; }
.rc-legend__item { display: inline-flex; align-items: center; gap: .45rem; }
.rc-legend__item::before { content: ""; width: 18px; height: 0; border-top: 3px solid var(--signal); }
.rc-legend__item--current::before { border-top: 3px dashed #A9BDB8; }

.rc-rows { display: grid; }
.rc .calc__row { font-size: var(--fs-sm); align-items: baseline; }
.rc .calc__row span:first-child { color: #C7D8D3; }
.rc .calc__row span:last-child { white-space: nowrap; text-align: end; }

/* plan comparison */
.rc-plan { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1rem; display: grid; gap: .6rem; background: rgba(255, 255, 255, .03); }
.rc-plan__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.rc-plan__title { margin: 0; font-weight: 600; color: #fff; font-size: var(--fs-sm); }
.rc-plan__line { margin: 0; font-size: var(--fs-sm); color: #C7D8D3; }
.rc-roi { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.rc-roi__value { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); line-height: 1; color: var(--gold); letter-spacing: -.02em; }
.rc-roi__note { margin: 0; color: #C7D8D3; flex: 1 1 12rem; }
.rc-out .segmented { background: rgba(255, 255, 255, .08); }
.rc-out .segmented button { color: #C7D8D3; padding: .45rem .9rem; min-height: 36px; }
.rc-out .segmented button[aria-pressed="true"] { background: var(--signal); color: var(--midnight); }
.rc-out .segmented button:focus-visible { box-shadow: 0 0 0 2px var(--midnight), 0 0 0 4px var(--signal); }

.rc-honest { margin: 0; padding: .7rem .9rem; border-inline-start: 3px solid var(--gold); background: rgba(242, 181, 68, .08); border-radius: 0 10px 10px 0; color: #E6EFEC; font-size: var(--fs-sm); }
.rc-ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.rc-ctas .btn { flex: 1 1 11rem; white-space: normal; text-align: center; }

/* formula + sources */
.rc-formula-wrap { border-top: 1px dashed var(--line-dark); padding-top: 1rem; display: grid; gap: .6rem; }
.rc-formula__title { font-family: var(--font-text); font-size: var(--fs-sm); color: #fff !important; margin: 0; }
.rc-formula { display: grid; gap: .45rem; color: #A9BDB8; }
.rc-formula p { margin: 0; }
.rc-formula strong { color: #E6EFEC; }
.rc-sources { display: grid; gap: .45rem; padding-top: .4rem; }
.rc-sources .source { margin: 0; }
.rc-details { border-top: 1px dashed var(--line-dark); padding-top: .75rem; }
.rc-details summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--signal); min-height: 32px; display: flex; align-items: center; }
.rc-details[open] summary { margin-bottom: .6rem; }
.rc-details .rc-sources { margin-top: .6rem; }

/* email-me form */
.rc-foot { margin-top: 1rem; }
.rc-email { display: grid; gap: .75rem; background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1rem, .8rem + 1vw, 1.5rem); }
@container rc (min-width: 820px) {
  .rc-email { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 2rem; }
  .rc-email > :not(.rc-email__text):not(.form-inline) { grid-column: 2; }
  .rc-email__text { grid-row: span 3; }
}
.rc-email__title { font-size: var(--fs-lg); margin: 0 0 .25rem; }
.rc-email__text p { margin: 0; }
.rc-email .form-inline .btn { flex: 0 1 auto; }

@media (max-width: 420px) {
  .rc-num--money .rc-num__input.input { width: 6.5rem; }
  .rc-email .form-inline .btn { flex: 1 1 100%; }
}

@media print {
  .rc-ctas, .rc-foot, .rc-seg { display: none !important; }
  .rc .calc__out { background: #fff !important; color: #000 !important; border: 1px solid #999; }
}