/* The rent-to-own calculator, ported from the application's own
   apps/web/src/rent-to-own-calculator.css so the page someone lands on from
   Google and the one they use after signing in are visibly the same tool.

   Four substitutions, and nothing else:
     --accent-deep      → --label-primary, which is what it aliases in the app
     --bg-soft          → --fill-quaternary, the same inert pill track
     --space-N          → the literal pixel step, as everywhere in seo-pages.css
     --label-secondary  → mixed locally into --rto-muted, because .seo-page
                          reassigns --label-secondary to --label-primary and
                          every muted line here would come out full strength.
                          Mixed at 74%, not the app's 62%: 62% fell to 3.8:1
                          on the cream page and failed WCAG AA (4.5:1).
   --labs-blue is #4f92fb in both codebases; here it comes from labs-chrome.css. */

.rto {
  --rto-blue: var(--labs-blue);
  /* Blue as text: --labs-blue on the cream page is 2.9:1. Mixing toward the label colour darkens it in
     light mode and lightens it in dark mode, so the value stays blue and passes AA (4.5:1) in both. */
  --rto-blue-text: color-mix(in srgb, var(--rto-blue) 64%, var(--label-primary));
  --rto-blue-dark: var(--label-primary);
  --rto-ink: var(--label-primary);
  --rto-muted: color-mix(in srgb, var(--label-primary) 74%, transparent);
  --rto-surface: var(--bg-grouped-secondary);
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  font-family: inherit;
  color: var(--rto-ink);
}

.rto-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.rto-header h2 {
  margin: 0 0 8px;
  font-size: var(--t-largetitle-size);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.rto-header p {
  margin: 0;
  color: var(--rto-muted);
  font-size: 17px;
}

.rto-currency {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--fill-quaternary);
}

.rto-currency button {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 9px;
  font: inherit;
  font-size: var(--t-subhead-size);
  font-weight: 500;
  color: var(--rto-muted);
  cursor: pointer;
}

.rto-currency button.active {
  background: var(--bg-grouped-secondary);
  color: var(--rto-ink);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

.rto-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  background: var(--rto-surface);
  border-radius: 24px;
  padding: 36px 40px;
}

.rto-slider-row {
  margin-bottom: 26px;
}

.rto-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.rto-slider-label {
  font-size: var(--t-callout-size);
  font-weight: 500;
}

.rto-slider-value {
  font-size: 17px;
  font-weight: 500;
  color: var(--rto-blue-text);
}

.rto-slider-hint {
  display: block;
  text-align: right;
  margin-top: 6px;
  font-size: var(--t-footnote-size);
  color: var(--rto-muted);
}

/* The input is a 44px touch target; the visible 6px track is drawn by the
   track pseudo-elements, so a tap anywhere near the line moves the value. */
.rto-slider-row input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  margin: -16px 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.rto-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--fill-tertiary);
}

.rto-slider-row input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--fill-tertiary);
}

/* outline: none above removes the browser ring, so keyboard focus is shown on the thumb. */
.rto-slider-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--bg-grouped-secondary), 0 0 0 6px var(--rto-blue);
}

.rto-slider-row input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--bg-grouped-secondary), 0 0 0 6px var(--rto-blue);
}

.rto-slider-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  margin-top: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rto-blue);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.25);
  cursor: pointer;
}

.rto-slider-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rto-blue);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.25);
  cursor: pointer;
}

/* Shown under any term longer than 120 months. Styled with the app's
   .long-term-notice, which lives in its token sheet rather than beside the
   calculator; the two rules are the same. The app mounts and unmounts the
   element, this page toggles [hidden] on it, and a `display` here would
   otherwise beat the attribute and leave the warning on at every term. */
.rto-notice[hidden] {
  display: none;
}

.rto-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 4px 0 26px;
  color: var(--rto-muted);
  font-size: var(--t-footnote-size);
  line-height: 1.45;
}

.rto-notice svg {
  flex: none;
  margin-top: 2px;
  color: var(--ios-orange);
}

.rto-flow-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 17px;
  color: var(--rto-muted);
}

.rto-flow-row strong {
  color: var(--rto-ink);
}

.rto-flow-equity,
.rto-flow-equity strong {
  color: var(--rto-blue-text);
  font-weight: 500;
}

.rto-summary > .rto-flow-equity {
  padding-bottom: 14px;
}

.rto-total {
  margin-top: 18px;
}

.rto-total > span {
  color: var(--rto-muted);
  font-size: 17px;
}

.rto-total strong {
  display: block;
  font-size: 46px;
  font-weight: 500;
  color: var(--rto-blue-text);
  letter-spacing: -0.02em;
  margin: 4px 0;
}

.rto-total p {
  margin: 0 0 14px;
  font-weight: 500;
}

.rto-progress {
  display: flex;
  height: 10px;
  border-radius: 999px;
  background: var(--fill-tertiary);
  overflow: hidden;
  margin-bottom: 18px;
}

.rto-progress-down {
  background: var(--rto-blue-dark);
}

.rto-progress-equity {
  background: var(--rto-blue);
}

.rto-breakdown {
  margin: 0;
}

.rto-breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: var(--t-callout-size);
}

.rto-breakdown dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rto-muted);
}

.rto-breakdown dd {
  margin: 0;
  font-weight: 500;
}

.rto-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
}

.rto-dot-down {
  background: var(--rto-blue-dark);
}

.rto-dot-equity {
  background: var(--rto-blue);
}

.rto-dot-final {
  background: var(--gray-2);
}

.rto-breakdown-total {
  margin-top: 6px;
}

.rto-breakdown-total dt,
.rto-breakdown-total dd {
  color: var(--rto-ink);
  font-weight: 500;
  font-size: 17px;
}

.rto-ownership {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  margin-top: 18px;
  font-size: 18px;
}

.rto-ownership span {
  color: var(--rto-muted);
  font-weight: 500;
}

.rto-ownership strong {
  color: var(--rto-blue-text);
  font-weight: 500;
}

.rto-summary-line {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fill-quaternary);
  font-size: var(--t-subhead-size);
  line-height: 1.45;
  color: var(--rto-ink);
}

.rto-disclaimer {
  margin: 16px 0 0;
  font-size: var(--t-footnote-size);
  color: var(--rto-muted);
}

.rto-why {
  display: block;
  padding: 20px 0;
  margin-top: 24px;
  font-size: var(--t-callout-size);
  line-height: 1.5;
  color: var(--rto-ink);
}

@media (max-width: 900px) {
  .rto {
    padding-inline: 0;
  }

  .rto-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }

  .rto-header {
    flex-direction: column;
  }

  .rto-header h2 {
    font-size: 27px;
  }

  .rto-total strong {
    font-size: 38px;
  }
}