/* roi.css · the value model page · static authored stylesheet, theme-token
   driven so it repaints in light and dark, overflow-safe at 1280 and 375.
   Every color resolves a aero.css token (cyan for figures and links, gold
   reserved for the deliverable total and the payback headline, warn / ok for
   the graded states). Raw hex appears only as a var() fallback. Reduced motion
   is honored on every eased element.

   No new color token. No banned word. No antithesis. No em dash or semicolon in
   any visible string (there are no content strings here, only rules). */

/* ---- intro ---- */
.roi-intro { display: grid; gap: 14px; min-width: 0; }
.roi-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 72ch;
}

/* ---- the two model cards, side by side on wide, stacked on narrow ---- */
.roi-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.roi-card { display: grid; gap: 12px; min-width: 0; align-content: start; }
.roi-card-h { margin: 4px 0 0; font-size: 20px; }
.roi-card-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ---- the input stack ---- */
.roi-inputs { display: grid; gap: 16px; min-width: 0; }
.roi-field { display: grid; gap: 6px; min-width: 0; }
.roi-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.roi-out {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-deep);
}

/* sliders pick up the cyan accent; gold is reserved for the deliverable */
.roi-field input[type="range"] {
  width: 100%;
  max-width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 2px 0;
}
.roi-field input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* the open number field, legible in both themes */
.roi-field input[type="number"] {
  width: 100%;
  max-width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 14px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.roi-field input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

/* the band dropdown */
.roi-select {
  width: 100%;
  max-width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
}
.roi-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

/* min / max range hint under each slider */
.roi-range-hint {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dimmer);
}

/* the gauge track + fill (range dial) */
.roi-gauge {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.roi-gauge-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 200ms ease;
}

/* the per-input cite note */
.roi-cite {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-dimmer);
  font-style: normal;
}

/* ---- each card's own total line ---- */
.roi-card-out {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--accent-pale);
  min-width: 0;
}
.roi-card-out-k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.roi-card-out-v {
  font-size: clamp(24px, 3vw, 30px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--accent-deep);
  line-height: 1.1;
  word-break: break-word;
}
.roi-card-out-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* ---- the gold headline total (the deliverable figure) ---- */
.roi-headline {
  display: grid;
  gap: 10px;
  text-align: center;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(135deg, var(--gold-pale), var(--surface));
  min-width: 0;
}
.roi-total-v {
  font-size: clamp(40px, 7vw, 64px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gold-deep);
  line-height: 1.05;
  word-break: break-word;
}
.roi-total-note {
  margin: 0 auto;
  max-width: 64ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.roi-total-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.roi-split-cell {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-width: 0;
}
.roi-split-k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.roi-split-v {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
.roi-value-bars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.roi-value-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.roi-value-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  transition: width 220ms ease;
}
.roi-value-bar.is-time span { background: var(--accent); }
.roi-value-bar.is-hold span { background: var(--gold); }

/* ---- decision ripple simulator ---- */
.roi-cascade {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.roi-cascade-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px;
  align-items: end;
  min-width: 0;
}
.roi-cascade-select {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.roi-cascade-select span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.roi-cascade-select select,
.roi-cascade-select button,
.roi-cascade-choice {
  max-width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
}
.roi-cascade-select select {
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
}
.roi-cascade-select select:focus-visible,
.roi-cascade-choice:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.roi-cascade-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.roi-cascade-choice {
  min-height: 38px;
  padding: 9px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.roi-cascade-choice.is-on {
  border-color: var(--gold-soft);
  background: var(--gold-pale);
  color: var(--gold-deep);
}
.roi-cascade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 16px;
  min-width: 0;
}
.roi-projection-main,
.roi-cascade-controls {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}
.roi-quarter-chart {
  min-height: 170px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-width: 0;
}
.roi-quarter-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}
.roi-quarter-values span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}
.roi-quarter-values b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.roi-quarter-values span span {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.roi-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.roi-metric-card,
.roi-risk-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}
.roi-risk-card {
  border-color: var(--warn);
  background: var(--warn-wash);
}
.roi-metric-k {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-dim);
}
.roi-metric-v {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  word-break: break-word;
}
.roi-metric-note,
.roi-risk-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}
.roi-risk-card h3 {
  margin: 0;
  font-size: 18px;
  color: var(--warn);
}
.roi-sentiment-band {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.roi-sentiment-band span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gold);
  transition: width 220ms ease;
}
.roi-cascade-sliders {
  display: grid;
  gap: 15px;
  min-width: 0;
}
.roi-cascade-slider {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.roi-cascade-slider input[type="range"] {
  width: 100%;
  max-width: 100%;
  accent-color: var(--accent);
}
.roi-cascade-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.roi-agent-strip {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.roi-agent-strip .ti-agent-steps {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.roi-agent-guardrail {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- payback check ---- */
.roi-payback { min-width: 0; }
.roi-pilot {
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: grid;
  gap: 9px;
  min-width: 0;
}
.roi-pilot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.roi-pilot-head strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}
.roi-pilot input[type="range"] {
  width: 100%;
  max-width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}
.roi-pilot input[type="range"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.roi-pilot-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

.roi-gp {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  min-width: 0;
}
.roi-gp-v {
  margin: 2px 0;
  font-size: clamp(26px, 4vw, 34px);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--gold-deep);
  line-height: 1.1;
  word-break: break-word;
}
.roi-gp-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.roi-gp-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gold);
  transition: width 220ms ease;
}
.roi-gp-note {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ---- claims grid ---- */
.roi-claims { display: grid; gap: 14px; min-width: 0; }
.roi-claim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.roi-claim {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-width: 0;
}
.roi-clean-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.roi-clean-list li { min-width: 0; }

/* ---- result surface ---- */
.roi-result { display: grid; gap: 12px; min-width: 0; }
.roi-result-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* ---- view-mode helpers (the Guided / Visual / Detailed hook is real) ----
   Guided carries the extra help; Visual trims to inputs and totals; Detailed
   shows everything. The hook trims, never invents. */
body[data-roi-mode="visual"] .roi-lead,
body[data-roi-mode="visual"] .roi-card-out-note,
body[data-roi-mode="visual"] .roi-cite,
body[data-roi-mode="visual"] .roi-agent-guardrail,
body[data-roi-mode="visual"] .roi-claims { display: none; }

.roi-mode-help { display: none; }
body[data-roi-mode="guided"] .roi-mode-help.guided-only { display: block; }
body[data-roi-mode="visual"] .roi-mode-help.visual-only { display: block; }
body[data-roi-mode="detailed"] .roi-mode-help.detailed-only { display: block; }

/* ---- responsive: collapse the grids on narrow screens (no overflow at 375) ---- */
@media (max-width: 720px) {
  .roi-cards,
  .roi-cascade-head,
  .roi-cascade-grid,
  .roi-result-grid,
  .roi-quarter-values,
  .roi-claim-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .roi-total-split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .roi-gauge-fill,
  .roi-gp-fill,
  .roi-value-bar span,
  .roi-sentiment-band span { transition: none; }
}

/* ---- print: a clean one-flow value model, gauges and controls dropped ---- */
@media print {
  .roi-field input[type="range"],
  .roi-cascade-slider input[type="range"],
  .roi-gauge,
  .roi-range-hint,
  .roi-pilot input[type="range"],
  .roi-gp-bar { display: none; }
  .roi-cards,
  .roi-claim-grid,
  .roi-total-split { grid-template-columns: minmax(0, 1fr); }
}