/* assets/css/calculators.css — F05 program calculator spokes.
 * Extends the shared .mm-calc__* chrome from public-calculators.css
 * (value-of-a-mile / redemption-grader) with the pieces unique to spokes:
 * a mode toggle, a segment-builder list, and a tier-progress bar.
 *
 * No bare hex; every colour is a var(--mm-*, #fallback) token. The token
 * NAMES here are ones lib/app.css actually defines and the fallbacks are
 * those tokens' real values, so a v2 route that never loads app.css still
 * paints the same colours instead of drifting. css-token-guard downgrades
 * an undefined token to a warning when it carries a fallback, which is
 * exactly how an invented name survives review; these are all real.
 */
.calc-spoke__mode-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.calc-spoke__mode-btn {
  flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--mm-border, #E2E7F0);
  background: var(--mm-bg-surface, #FFFFFF); color: var(--mm-fg, #111111); cursor: pointer; font: 600 14px/1.4 var(--mm-font-body);
}
.calc-spoke__mode-btn[aria-pressed="true"] { background: var(--mm-accent, #FF6810); color: var(--mm-bg-surface, #FFFFFF); border-color: var(--mm-accent, #FF6810); }
.calc-spoke__segment-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.calc-spoke__segment-remove { background: none; border: none; color: var(--mm-fg-muted, #6B7A99); cursor: pointer; }
.calc-spoke__tier-bar { position: relative; height: 10px; border-radius: 6px; background: var(--mm-bg-alt, #F8FAFC); margin: 12px 0 6px; overflow: hidden; }
.calc-spoke__tier-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--mm-accent, #FF6810); border-radius: 6px; }
.calc-spoke__tier-labels { display: flex; justify-content: space-between; font: 500 12px/1.4 var(--mm-font-body); color: var(--mm-fg-muted, #6B7A99); }
.calc-spoke__gbp-hint { font: 400 13px/1.5 var(--mm-font-body); color: var(--mm-fg-muted, #6B7A99); margin-top: 4px; }
/* "Rules at a glance" is server rendered from rules_json, so it is the one
 * part of this page a visitor with JS off gets in full. A definition list
 * rather than a table: the rows are label/value pairs of differing shapes
 * (a rate, a sentence, a carrier list), not a grid. */
.calc-spoke__rules-h { font: 600 15px/1.4 var(--mm-font-body); color: var(--mm-fg, #111111); margin: 18px 0 8px; }
.calc-spoke__rules { margin: 0; }
.calc-spoke__rules dt { font: 600 13px/1.5 var(--mm-font-body); color: var(--mm-fg-muted, #6B7A99); }
.calc-spoke__rules dd { margin: 0 0 10px; font: 400 15px/1.6 var(--mm-font-body); color: var(--mm-fg, #111111); }
.calc-spoke__not-covered { padding: 12px 14px; border-radius: 8px; background: var(--mm-warning-bg, #FBEAD2); border: 1px solid var(--mm-warning-100, #FEF3C7); color: var(--mm-warning, #985A0E); font: 500 14px/1.5 var(--mm-font-body); }

/* The spend field the page controller injects. Sized so a six-figure spend
 * is fully visible on a 375px viewport without the row wrapping. */
.calc-spoke__field { display: block; margin-bottom: 12px; font: 600 14px/1.5 var(--mm-font-body); color: var(--mm-fg, #111111); }
.calc-spoke__field input,
.calc-spoke__field select { display: block; margin-top: 4px; width: 100%; max-width: 220px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mm-border, #E2E7F0); background: var(--mm-bg-surface, #FFFFFF); color: var(--mm-fg, #111111); font: 500 16px/1.4 var(--mm-font-body); }
/* 16px on the inputs is deliberate and load-bearing on iOS: anything smaller
 * makes Safari zoom the viewport on focus, which on the partner row (five
 * fields) leaves the visitor scrolled sideways with no obvious way back. */

/* The partner row holds five short fields. It wraps rather than scrolls, so
 * a 375px viewport stacks them instead of hiding the last two off-screen --
 * the acceptance criterion is no horizontal scroll at 375x812. */
.calc-spoke__segment-row { flex-wrap: wrap; align-items: flex-end; }
.calc-spoke__segment-row .calc-spoke__field { margin-bottom: 0; }
/* The page controller hides the inactive mode with the `hidden` attribute,
 * which the UA stylesheet implements as `[hidden] { display: none }`. A class
 * rule setting `display: flex` on the same element WINS that cascade, so
 * without this line the partner row stayed visible underneath the home-ticket
 * spend field on every dual-mode spoke. Caught by screenshot, not by any
 * test: both engines and the whole payload were correct, and only the pixels
 * were wrong. */
.calc-spoke__segment-row[hidden] { display: none; }
/* Personalised, session-gated lines: the tracked-programme prefill and the
 * gap-to-next-tier readout. Only ever rendered for a signed-in visitor who
 * tracks this programme, and carrying data-nosnippet. */
.calc-spoke__personal { font: 500 13px/1.5 var(--mm-font-body); color: var(--mm-accent, #FF6810); margin: 0 0 10px; }
.calc-spoke__gap-line { margin-top: 10px; }

/* Share-card action. Server-rendered [hidden]; the page controller un-hides
 * it only once the Studio bundle is loaded AND there is a real total. */
.calc-spoke__share-actions { margin: 14px 0 0; }
.calc-spoke__share-actions [hidden] { display: none; }

/* Change-report form. Mirrors .dv-report-form in assets/css/devaluations.css
 * (same shape of form, same honeypot-offscreen trick) rather than inventing a
 * second visual language for the same job. */
.calc-spoke__report { background: var(--mm-bg-alt, #FAF6EF); color: inherit; }
.calc-spoke__report .v2-policy-cta__lede,
.calc-spoke__report .v2-policy-cta__copy { color: inherit; }
.calc-spoke__report-form { max-width: 480px; }
.calc-spoke__report-row { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.calc-spoke__report-row label { font: 600 13px/1.4 var(--mm-font-body); }
.calc-spoke__report-row input,
.calc-spoke__report-row textarea {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mm-border, #E2E7F0);
  background: var(--mm-bg-surface, #FFFFFF); color: var(--mm-fg, #111111);
  font: 500 16px/1.4 var(--mm-font-body); width: 100%;
}
.calc-spoke__report-row textarea { resize: vertical; }
/* Offscreen rather than display:none: a bot that skips hidden inputs is
 * exactly the bot this field is meant to catch. */
.calc-spoke__report-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.calc-spoke__report-actions { margin: 4px 0 0; }
.calc-spoke__report-status { min-height: 1.4em; font: 400 13px/1.4 var(--mm-font-body); margin: 10px 0 0; }

.calc-spoke__result { font: 600 16px/1.6 var(--mm-font-body); color: var(--mm-fg, #111111); }
.calc-spoke__result strong { color: var(--mm-accent, #FF6810); }
.calc-spoke__result-note { font: 400 13px/1.5 var(--mm-font-body); color: var(--mm-fg-muted, #6B7A99); margin-top: 4px; }