/* =========================================================================
   RENT-VS-OWN — shared calculator component styles
   Builds on colors_and_type.css + homepage.css tokens. Layout-agnostic:
   these style the calculator internals (controls, results, chart, report);
   each version page owns its own page-level layout.
   ========================================================================= */

/* ------------------------------------------------------------- controls */
.rvo-controls { display: flex; flex-direction: column; gap: var(--space-6); }
.rvo-field { display: flex; flex-direction: column; gap: 12px; }
.rvo-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.rvo-flabel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-1);
}
.rvo-per, .rvo-flabel .rvo-per {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-regular);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4);
}

/* mode toggle (Tokens / Estimate) */
.rvo-mode { display: inline-flex; gap: 2px; background: var(--ink-100); border-radius: var(--radius-pill); padding: 3px; }
.rvo-modebtn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  border: none; background: transparent; color: var(--fg-4); cursor: pointer;
  padding: 5px 11px; border-radius: var(--radius-pill); transition: all var(--duration-fast) var(--ease-out);
}
.rvo-modebtn.is-on { background: var(--ink-0); color: var(--coral-press); box-shadow: var(--shadow-xs); }

/* range input row */
.rvo-inputrow { display: flex; align-items: center; gap: 16px; }
.rvo-inputrow input[type="range"] { flex: 1; }
.rvo-inputrow output {
  font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--fg-1); min-width: 64px; text-align: right; font-feature-settings: "tnum" 1;
}
.rvo-inputrow input[type="number"] {
  font-family: var(--font-mono); font-size: var(--text-base); color: var(--fg-1);
  padding: 11px 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--ink-0); width: 120px;
}
.rvo-inputrow input:focus { outline: 2px solid var(--coral-300); outline-offset: 0; border-color: var(--coral-300); }
.rvo-unit { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-4); }

.rvo-subrow { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rvo-subrow label { font-size: var(--text-xs); color: var(--fg-3); }
.rvo-hint { margin: 6px 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-4); letter-spacing: 0.02em; }
.rvo-hint span { color: var(--coral-press); font-weight: var(--weight-medium); }

/* range track */
.rvo-controls input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: var(--ink-200); cursor: pointer;
}
.rvo-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral-500); border: 3px solid var(--ink-0); box-shadow: var(--shadow-sm); cursor: pointer;
}
.rvo-controls input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral-500); border: 3px solid var(--ink-0); box-shadow: var(--shadow-sm); cursor: pointer;
}

/* segmented control */
.rvo-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.rvo-seg button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--fg-2); background: var(--ink-0); border: 1px solid var(--ink-200);
  border-radius: var(--radius-md); padding: 11px 8px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.rvo-seg button em {
  font-family: var(--font-mono); font-style: normal; font-size: 10px; color: var(--fg-4); letter-spacing: 0.04em;
}
.rvo-seg button:hover { border-color: var(--coral-300); }
.rvo-seg button.is-on { border-color: var(--coral-500); background: var(--coral-50); color: var(--coral-press); }
.rvo-seg button.is-on em { color: var(--coral-press); }

/* stepper */
.rvo-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ink-200); border-radius: var(--radius-md); overflow: hidden; }
.rvo-stepper button {
  width: 42px; height: 44px; border: none; background: var(--ink-0); color: var(--coral-press);
  font-size: 20px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out);
}
.rvo-stepper button:hover { background: var(--coral-50); }
.rvo-stepper output {
  min-width: 48px; text-align: center; font-family: var(--font-mono); font-size: var(--text-md);
  font-weight: var(--weight-semibold); color: var(--fg-1); border-left: 1px solid var(--ink-200); border-right: 1px solid var(--ink-200); line-height: 44px;
}
.rvo-controls select {
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1);
  padding: 12px 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--ink-0); width: 100%; height: 44px;
}
.rvo-controls select:focus { outline: 2px solid var(--coral-300); outline-offset: 0; border-color: var(--coral-300); }

/* input/output custom rates + mix slider */
.rvo-customprice { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rvo-mixrow { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ink-200); }
.rvo-inputrow--mix { gap: 10px; }
.rvo-inputrow--mix input[type="range"] { direction: rtl; }
.rvo-mixend { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--fg-4); white-space: nowrap; flex: none; }
[data-rvo-blended] { color: var(--coral-press); font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------- verdict */
.rvo-verdict {
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8);
  background: var(--navy-500); color: var(--ink-0);
  display: flex; flex-direction: column; gap: 6px;
}
.rvo-verdict[data-state="early"] { background: var(--navy-400); }
.rvo-verdict .rvo-v-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; color: var(--coral-light, var(--coral-300));
}
.rvo-verdict [data-rvo-verdict-head] { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); line-height: 1.15; }
.rvo-verdict [data-rvo-verdict-head] strong { color: var(--coral-300); }
.rvo-verdict [data-rvo-verdict-sub] { font-size: var(--text-sm); color: var(--navy-100); }

/* big metric pair */
.rvo-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.rvo-metric { display: flex; flex-direction: column; gap: 4px; }
.rvo-metric .rvo-m-num {
  font-family: var(--font-sans); font-weight: var(--weight-black); font-size: var(--text-5xl);
  line-height: 1; letter-spacing: var(--tracking-tight); color: var(--coral-500); font-feature-settings: "tnum" 1;
}
.rvo-metric .rvo-m-label {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase; color: var(--fg-4);
}

/* ------------------------------------------------------------- chart shell */
.rvo-chart {
  background: var(--ink-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6); border: 1px solid var(--ink-150);
}
.rvo-chart-legend { display: flex; gap: 22px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.rvo-chart-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); letter-spacing: 0.02em; }
.rvo-sw { width: 20px; height: 4px; border-radius: 2px; display: inline-block; }
.rvo-sw--rent { background: var(--coral-500); }
.rvo-sw--own { background: var(--navy-500); }
.rvo-sw--band { background: rgba(247,87,75,0.18); height: 12px; }
.rvo-chart-cap { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--fg-3); }
.rvo-chart-cap em { font-style: italic; color: var(--fg-2); }

/* ------------------------------------------------------------- comparison cards */
.rvo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rvo-card { border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.rvo-card--rent { background: var(--ink-0); border: 1px solid var(--ink-200); box-shadow: var(--shadow-sm); }
.rvo-card--own { background: var(--coral-500); color: var(--ink-0); box-shadow: var(--shadow-brand); }
.rvo-card .rvo-card-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
}
.rvo-card--rent .rvo-card-tag { color: var(--fg-4); }
.rvo-card--own .rvo-card-tag { color: var(--coral-100); }
.rvo-card h3 { margin: 0; font-size: var(--text-xl); }
.rvo-card--own h3 { color: var(--ink-0); }
.rvo-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-loose); }
.rvo-card--rent p { color: var(--fg-2); }
.rvo-card--own p { color: var(--coral-50); }
.rvo-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rvo-card li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 1.45; }
.rvo-card li svg { flex: none; margin-top: 2px; }
.rvo-card--rent li { color: var(--fg-2); } .rvo-card--rent li svg { color: var(--ink-300); }
.rvo-card--own li { color: var(--ink-0); } .rvo-card--own li svg { color: var(--coral-100); }
.rvo-card-fig {
  margin-top: auto; padding-top: var(--space-4); border-top: 1px solid;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.02em;
}
.rvo-card--own .rvo-card-fig { border-color: rgba(255,255,255,0.25); color: var(--ink-0); }
.rvo-card--rent .rvo-card-fig { border-color: var(--ink-150); color: var(--fg-4); }

/* small stat table (cost per 1M) */
.rvo-per1m { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink-150); border: 1px solid var(--ink-150); border-radius: var(--radius-md); overflow: hidden; }
.rvo-per1m .cell { background: var(--ink-0); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 4px; }
.rvo-per1m .cell .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); }
.rvo-per1m .cell .v { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-1); }
.rvo-per1m .cell.hot .v { color: var(--coral-press); }

/* ------------------------------------------------------------- gate + report */
.rvo-gate {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.rvo-gate input[type="email"] {
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1);
  padding: 14px 18px; border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--ink-0); flex: 1; min-width: 240px;
}
.rvo-gate input[type="email"]:focus { outline: 2px solid var(--coral-300); outline-offset: 0; border-color: var(--coral-300); }

.rvo-report { border-radius: var(--radius-lg); overflow: hidden; }
.rvo-report[hidden] { display: none; }
.rvo-report-inner {
  background: var(--ink-0); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-10);
}
.rvo-rt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: var(--space-6); border-bottom: 1px solid var(--ink-150); margin-bottom: var(--space-6); }
.rvo-rt-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--coral-press); margin-bottom: 8px; }
.rvo-rt-head h3 { margin: 0; font-size: var(--text-2xl); }
.rvo-rt-stamp {
  flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: var(--weight-semibold); color: var(--coral-500);
  border: 2px solid var(--coral-500); border-radius: 8px; padding: 8px 14px; transform: rotate(-2deg);
}
.rvo-rt-inputs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-6); }
.rvo-rt-chip {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-1);
  background: var(--ink-100); border-radius: var(--radius-pill); padding: 7px 14px;
}
.rvo-rt-chip em { font-style: normal; color: var(--fg-4); margin-right: 6px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.rvo-rt-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }
.rvo-rt-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); text-align: left; padding: 0 14px 12px; border-bottom: 1px solid var(--ink-200); }
.rvo-rt-table td { padding: 12px 14px; border-bottom: 1px solid var(--ink-150); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-1); }
.rvo-rt-table td:first-child { color: var(--fg-3); }
.rvo-rt-table .rvo-rt-delta { color: var(--coral-press); font-weight: var(--weight-semibold); }
.rvo-rt-analysis p { font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--fg-2); margin: 0 0 var(--space-4); }
.rvo-rt-analysis p:last-child { margin-bottom: 0; }
.rvo-rt-foot { margin: var(--space-6) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-4); letter-spacing: 0.02em; }

/* report actions */
.rvo-report-actions { display: flex; gap: 12px; margin-top: var(--space-5); flex-wrap: wrap; }

/* regulated-only block toggle */
[data-rvo-regulated][hidden] { display: none; }

/* ------------------------------------------------------------- info tooltips */
.rvo-lbl { display: inline-flex; align-items: center; gap: 6px; }
.rvo-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: none; background: none;
  color: var(--navy-400); cursor: pointer; border-radius: 50%;
  transition: color var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.rvo-info:hover, .rvo-info:focus-visible { color: var(--coral-500); }
.rvo-info:focus-visible { outline: 2px solid var(--coral-300); outline-offset: 2px; }
.rvo-info svg { display: block; }

.rvo-tip {
  position: fixed; z-index: 2000; max-width: 280px;
  background: var(--ink-0); color: var(--navy-500);
  border: 1px solid rgba(27, 55, 83, 0.2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(1, 12, 69, 0.14), 0 2px 6px rgba(1, 12, 69, 0.08);
  padding: 12px 14px; font-family: var(--font-sans); font-size: var(--text-sm);
  line-height: 1.5; pointer-events: none;
}
.rvo-tip[hidden] { display: none; }
.rvo-tip::after {
  content: ""; position: absolute; left: var(--caret, 50%); transform: translateX(-50%);
  width: 10px; height: 10px; background: var(--ink-0);
  border: 1px solid rgba(27, 55, 83, 0.2); border-top: none; border-left: none;
}
.rvo-tip[data-side="above"]::after { bottom: -6px; transform: translateX(-50%) rotate(45deg); }
.rvo-tip[data-side="below"]::after { top: -6px; transform: translateX(-50%) rotate(-135deg); }

/* [hidden] must win over flex/grid display on calculator internals */
.rvo-controls [hidden], [data-rvo] [hidden] { display: none !important; }

/* ------------------------------------------------------------- version switcher */
.rvo-switch {
  position: sticky; top: 57px; z-index: 40;
  background: var(--ink-0); border-bottom: 1px solid var(--ink-150);
}
.rvo-switch-inner { display: flex; align-items: center; gap: 8px; padding: 10px 40px; max-width: 1240px; margin: 0 auto; overflow-x: auto; }
.rvo-switch .rvo-sw-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); margin-right: 6px; white-space: nowrap; }
.rvo-switch a {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em;
  color: var(--fg-3); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-pill);
  white-space: nowrap; transition: all var(--duration-fast) var(--ease-out);
}
.rvo-switch a:hover { color: var(--coral-press); background: var(--coral-50); }
.rvo-switch a.active { color: var(--ink-0); background: var(--navy-500); }

/* ------------------------------------------------------------- utility */
.rvo-panel { background: var(--ink-0); border: 1px solid var(--ink-150); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-8); }
.rvo-eyebrow-block { display: block; margin-bottom: var(--space-4); }
.rvo-free-note { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--fg-4); }
.rvo-free-note strong { color: var(--coral-press); font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------- mobile */
@media (max-width: 768px) {
  .rvo-field--split { grid-template-columns: 1fr; }
  .rvo-cards { grid-template-columns: 1fr; }
  .rvo-metrics { grid-template-columns: 1fr 1fr; }
  .rvo-metric .rvo-m-num { font-size: var(--text-4xl); }
  .rvo-report-inner { padding: var(--space-6); }
  .rvo-rt-head { flex-direction: column; }
  .rvo-switch-inner { padding: 10px 20px; }
  .rvo-verdict { padding: var(--space-5) var(--space-6); }
  .rvo-verdict [data-rvo-verdict-head] { font-size: var(--text-xl); }
}

/* ------------------------------------------------------------- print (report PDF) */
@media print {
  body * { visibility: hidden; }
  .rvo-report, .rvo-report * { visibility: visible; }
  .rvo-report { position: absolute; left: 0; top: 0; width: 100%; }
  .rvo-report-inner { box-shadow: none; border: none; }
  .rvo-report-actions { display: none; }
}