/* ============================================================
   styles.css - Rent vs Buy Calculator
   All styling for this tool lives here, in plain CSS, so it never
   depends on which Tailwind utility classes happen to be compiled
   into the shared /tailwind.output.css. The nav and footer above
   still use that shared stylesheet, since those exact classes are
   already proven to exist there. Colors follow the same tokens as
   every other tool: indigo for "buy", teal added for "rent".
   ============================================================ */

:root {
  --ink: #1a1a2e;
  --t2: #4a4a6a;
  --mut: #8888aa;
  --bd: rgba(0, 0, 0, .1);
  --bd2: rgba(0, 0, 0, .16);
  --surface: #fff;
  --field-bg: #f9fafb;
  --page-bg: #f3f4f6;

  --ind: #2A3AAF;
  --ind-tint: #eef0fb;
  --ind-soft: #b5bef6;
  --teal: #0284C7;
  --teal-d: #075985;
  --teal-tint: #e0f2fe;
  --teal-soft: #93c5fd;
  --slate: #434a6b;
  --slate-tint: #e9eaf0;
  --amber: #C2760C;
  --amber-tint: #fdf1e0;
  --err: #B93A2E;
  --err-tint: #fdf1ef;
  --warn-tint: #fffaeb;
  --warn-tx: #8a5a00;

  /* Fixed banner fills for the verdict, deliberately NOT redefined in
     html.dark below. Every other colour in this file legitimately gets
     lighter in dark mode so it reads against a dark page background --
     but these three are solid, opaque fills with white text sitting
     directly on top, so they need to stay dark in both themes. Reusing
     --ind/--teal-d/--slate here (which do flip) put white text on a
     bright mint or pale lavender fill in dark mode. */
  --verdict-buy: #2A3AAF;
  --verdict-rent: #0D7A56;
  --verdict-close: #434a6b;

  /* The page header (breadcrumb + H1) uses the sitewide convention of
     darkening in dark mode, same as every other tool's header (SIP, CTC,
     Freelance all use bg-[#2A3AAF] dark:bg-[#1a1f6e]). --ind is the wrong
     source for this: it deliberately LIGHTENS in dark mode for buttons and
     icons sitting on the dark page background, which is the opposite of
     what a solid header fill needs. */
  --hero-bg: #2A3AAF;
}

html.dark {
  --ink: #e8e8f5;
  --t2: #9898bb;
  --mut: #6b6b8a;
  --bd: rgba(255, 255, 255, .1);
  --bd2: rgba(255, 255, 255, .16);
  --surface: #1a1a2e;
  --field-bg: #161625;
  --page-bg: #0f0f1a;

  --ind: #6B7FE8;
  --ind-tint: #1e2060;
  --ind-soft: #3a3f8a;
  --teal: #38BDF8;
  --teal-d: #7DD3FC;
  --teal-tint: #0c2d3d;
  --teal-soft: #1e4e6b;
  --slate: #c7cbe0;
  --slate-tint: #262a45;
  --amber: #F2B94A;
  --amber-tint: #332409;
  --err: #E27060;
  --err-tint: #341f1c;
  --warn-tint: #2a2308;
  --warn-tx: #E8C468;

  --hero-bg: #1a1f6e;
}

/* ---------- reset-ish base ---------- */
/* The [hidden] attribute must always win, even against classes like
   .rvb-fields that set display:flex with the same CSS specificity --
   otherwise a hidden loan-fields block (100% down payment) or a hidden
   step section would still render because the later same-specificity
   rule wins the cascade tie. */
[hidden] { display: none !important; }

#rvb-app, .rvb-hero, .rvb-faq { box-sizing: border-box; }
#rvb-app *, .rvb-hero *, .rvb-faq * { box-sizing: border-box; }
.rvb-btn, .rvb-chip, .rvb-input, .rvb-link { font-family: inherit; }

.rvb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- page header ---------- */
.rvb-hero { background: var(--hero-bg); color: #fff; padding: 28px 20px 32px; }
.rvb-hero-inner { max-width: 1152px; margin: 0 auto; }
.rvb-crumb { font-size: 13px; line-height: 18px; margin-bottom: 12px; color: rgba(255, 255, 255, .78); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rvb-crumb a { color: inherit; text-decoration: none; }
.rvb-crumb a:hover { text-decoration: underline; }
.rvb-crumb-current { color: rgba(255, 255, 255, .92); }
.rvb-hero h1 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.rvb-hero p { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #c9d0fb; max-width: 640px; }
@media (min-width: 900px) {
  .rvb-hero { padding: 40px 88px 46px; }
  .rvb-hero h1 { font-size: 34px; line-height: 42px; }
}

/* ---------- layout shell ---------- */
#rvb-app { background: var(--page-bg); }
.rvb-shell { max-width: 1152px; margin: 0 auto; padding: 24px 20px 8px; }
.rvb-screen[hidden] { display: none; }
.rvb-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
/* Grid items default to min-width:auto, which refuses to shrink below the
   content's intrinsic width and can push the whole card wider than its
   track (and the viewport) at narrow widths. min-width:0 lets the card
   shrink to fit, same fix a flex item would need. */
.rvb-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .rvb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
}

.rvb-card {
  background: var(--surface); border: 1px solid var(--bd); border-radius: 16px;
  box-sizing: border-box; transition: background-color .2s ease, border-color .2s ease;
}
.rvb-form-card, .rvb-explain { padding: 20px; }
@media (min-width: 640px) { .rvb-form-card, .rvb-explain { padding: 24px; } }

/* ---------- stepper ---------- */
.rvb-stepper { display: flex; align-items: center; gap: 8px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.rvb-step-item { display: flex; align-items: center; gap: 8px; flex: none; }
.rvb-step-circle {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; box-sizing: border-box; background: var(--surface); color: var(--mut); border: 1.5px solid var(--bd2);
}
.rvb-step-item.is-active .rvb-step-circle { background: var(--ind); color: #fff; border-color: var(--ind); box-shadow: 0 0 0 4px var(--ind-tint); }
.rvb-step-item.is-done .rvb-step-circle { background: var(--ind); color: #fff; border-color: var(--ind); }
.rvb-step-item.is-done .rvb-step-circle::before { content: '\2713'; }
.rvb-step-name { font-size: 13px; font-weight: 500; color: var(--mut); white-space: nowrap; }
.rvb-step-item.is-active .rvb-step-name, .rvb-step-item.is-done .rvb-step-name { color: var(--ink); font-weight: 600; }
.rvb-step-bar { flex: 1; height: 2px; min-width: 12px; border-radius: 2px; background: var(--bd2); }
.rvb-step-bar.is-done { background: var(--ind); }
@media (max-width: 480px) { .rvb-step-name { display: none; } }

/* ---------- fields ---------- */
.rvb-fields { display: flex; flex-direction: column; gap: 20px; }
.rvb-fields--nested { margin-top: 4px; padding-top: 4px; }
.rvb-field { display: flex; flex-direction: column; gap: 6px; }
.rvb-field-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rvb-label { font-size: 12px; font-weight: 500; color: var(--t2); line-height: 16px; }

.rvb-control {
  display: flex; align-items: stretch; height: 46px; box-sizing: border-box;
  border: 1px solid var(--bd2); border-radius: 10px; background: var(--field-bg); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rvb-control:focus-within { border-color: var(--ind); box-shadow: 0 0 0 3px var(--ind-tint); }
.rvb-control.is-error { border-color: var(--err); background: var(--err-tint); }
.rvb-control.is-error:focus-within { box-shadow: 0 0 0 3px var(--err-tint); }
.rvb-control.is-warn { border-color: var(--amber); }
.rvb-affix {
  display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 13px; color: var(--mut);
  white-space: nowrap; background: rgba(0, 0, 0, .02); border-right: 1px solid var(--bd); flex: none;
}
.rvb-affix--suffix { border-right: 0; border-left: 1px solid var(--bd); }
.rvb-input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 12px;
  font-size: 15px; color: var(--ink); outline: none;
}
.rvb-input::placeholder { color: var(--mut); opacity: .8; }

.rvb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rvb-chip {
  height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--bd2); background: var(--surface); color: var(--t2); transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.rvb-chip:hover { border-color: var(--ind); color: var(--ind); }
.rvb-chip[aria-pressed="true"] { background: var(--ind); border-color: var(--ind); color: #fff; }

.rvb-msg { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 17px; min-height: 0; color: var(--mut); }
.rvb-msg:empty { display: none; }
.rvb-msg svg { flex: none; margin-top: 1px; }
.rvb-msg--help { color: var(--mut); }
.rvb-msg--warn { color: var(--warn-tx); }
.rvb-msg--error { color: var(--err); font-weight: 500; }

.rvb-pill { font-size: 11px; line-height: 16px; font-weight: 500; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.rvb-pill--default { color: var(--mut); background: var(--slate-tint); }
.rvb-pill--edited { color: var(--ind); background: var(--ind-tint); font-weight: 600; }

.rvb-group { padding-top: 18px; border-top: 1px solid var(--bd); margin-top: 4px; }
.rvb-group:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.rvb-group-title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.rvb-group-sub { font-size: 12px; line-height: 17px; color: var(--mut); margin: 2px 0 14px; }

.rvb-emi { margin-top: 22px; border-radius: 14px; background: var(--ind-tint); padding: 16px 18px; }
.rvb-emi-num { margin: 4px 0 4px; font-size: 26px; line-height: 34px; font-weight: 600; color: var(--ind); }
.rvb-emi-num span { font-size: 14px; font-weight: 400; color: var(--t2); }
.rvb-emi p { margin: 0; font-size: 13px; line-height: 19px; color: var(--t2); }

.rvb-step-actions { display: flex; gap: 12px; margin-top: 26px; align-items: stretch; }
.rvb-step-actions-main { flex: 1; min-width: 0; }
.rvb-skip { text-align: center; margin-top: 14px; }

.rvb-note {
  display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; margin-bottom: 22px;
}
.rvb-note p { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink); }
.rvb-note--indigo { background: var(--ind-tint); }
.rvb-note--teal { background: var(--teal-tint); }
.rvb-note-ico, .rvb-callout-ico { flex: none; color: var(--ind); margin-top: 1px; }

/* ---------- buttons and links ---------- */
.rvb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.rvb-btn--primary { width: 100%; background: var(--ind); color: #fff; border-color: var(--ind); }
.rvb-btn--primary:hover { opacity: .92; }
.rvb-btn--ghost { background: var(--surface); color: var(--t2); border-color: var(--bd2); flex: none; }
.rvb-btn--ghost:hover { border-color: var(--ind); color: var(--ind); }
.rvb-btn--sm { height: 38px; padding: 0 14px; font-size: 14px; }
.rvb-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  color: var(--ind); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.rvb-link:hover { text-decoration: underline; }

/* ---------- side-panel content (views.js output) ---------- */
.rvb-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.rvb-h2 { margin: 10px 0 20px; font-size: 21px; line-height: 27px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.rvb-h3 { margin: 0 0 4px; font-size: 19px; line-height: 25px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.rvb-sub { margin: 0; font-size: 13px; line-height: 19px; color: var(--t2); }
.rvb-lead { margin: 0 0 18px; font-size: 14px; line-height: 20px; color: var(--t2); }
.rvb-fine { margin: 0; font-size: 12px; line-height: 17px; color: var(--mut); }
.rvb-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .rvb-h2 { font-size: 24px; line-height: 32px; } }

.rvb-people { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 560px) { .rvb-people { flex-direction: row; } }
.rvb-person { flex: 1; min-width: 0; border-radius: 14px; padding: 18px 16px; }
.rvb-person--buy { background: var(--ind-tint); }
.rvb-person--rent { background: var(--teal-tint); }
.rvb-person-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rvb-person-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex: none; }
.rvb-person--buy .rvb-person-ico, .rvb-person--buy .rvb-person-role { color: var(--ind); }
.rvb-person--rent .rvb-person-ico, .rvb-person--rent .rvb-person-role { color: var(--teal-d); }
.rvb-person-who { font-size: 12px; line-height: 16px; color: var(--t2); }
.rvb-person-role { font-size: 17px; line-height: 22px; font-weight: 600; }
.rvb-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rvb-checklist li { display: flex; gap: 8px; font-size: 13px; line-height: 18px; color: var(--ink); }
.rvb-checklist--lg li { font-size: 14px; line-height: 20px; }
.rvb-checklist li span:first-child { flex: none; margin-top: 1px; color: var(--ind); }

.rvb-callout { margin-top: 18px; border-radius: 14px; background: var(--page-bg); padding: 16px 18px; display: flex; gap: 12px; align-items: center; }
.rvb-callout p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.rvb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rvb-tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--page-bg); font-size: 13px; color: var(--t2); white-space: nowrap; }
.rvb-tag svg { color: var(--ind); }

.rvb-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.rvb-bar--tall { height: 24px; border-radius: 8px; }
.rvb-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; transition: width .5s ease; }
.rvb-seg-down { background: var(--ind); }
.rvb-seg-closing { background: var(--amber); }
.rvb-seg-loan { background: var(--ind-soft); }
.rvb-seg-rent { background: var(--teal-d); }
.rvb-seg-invest { background: var(--teal-soft); color: var(--ink); }

.rvb-daylist { display: flex; flex-direction: column; }
.rvb-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bd); font-size: 14px; line-height: 20px; color: var(--t2); }
.rvb-dayrow:last-child { border-bottom: 0; }
.rvb-dayrow-label { display: flex; align-items: center; gap: 10px; }
.rvb-dayrow-label small { display: block; font-size: 12px; color: var(--mut); }
.rvb-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.rvb-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: var(--ind-tint); }
.rvb-total span:first-child { font-size: 14px; font-weight: 600; color: var(--ink); }
.rvb-total-num { font-size: 22px; font-weight: 600; color: var(--ind); }
@media (min-width: 640px) { .rvb-total-num { font-size: 24px; } }

.rvb-mrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rvb-mrow-who { font-size: 14px; font-weight: 600; }
.rvb-who--buy { color: var(--ind); }
.rvb-who--rent { color: var(--teal-d); }
.rvb-mrow ~ .rvb-fine { margin: 8px 0 20px; }

/* ---------- placeholder in the side panel before enough numbers are entered ---------- */
.rvb-explain:empty::before {
  content: 'Fill in the numbers on the left and this picture appears here.';
  display: block; font-size: 14px; line-height: 21px; color: var(--mut); padding: 8px 0;
}

/* ---------- result screen ---------- */
.rvb-empty { padding: 40px 24px; text-align: center; }
.rvb-empty[hidden] { display: none; }
.rvb-empty .rvb-h2 { margin-top: 8px; }

.rvb-chipbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rvb-chipbar-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.rvb-fact { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--page-bg); font-size: 13px; color: var(--t2); white-space: nowrap; }
@media (max-width: 640px) { .rvb-hide-sm { display: none; } }

.rvb-result-card { overflow: hidden; }

.rvb-verdict { padding: 26px 20px; color: #fff; }
.rvb-verdict--buy { background: var(--verdict-buy); }
.rvb-verdict--rent { background: var(--verdict-rent); }
.rvb-verdict--close { background: var(--verdict-close); }
.rvb-verdict-kicker { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.rvb-verdict-title { margin: 8px 0 8px; font-size: 27px; line-height: 33px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.rvb-verdict-title:focus { outline: none; }
.rvb-verdict-sub { margin: 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .92); max-width: 640px; }
@media (min-width: 900px) {
  .rvb-verdict { padding: 30px 32px; }
  .rvb-verdict-title { font-size: 40px; line-height: 48px; }
  .rvb-verdict-sub { font-size: 17px; line-height: 26px; }
}
.rvb-stay { margin-top: 18px; }
.rvb-stay-label { font-size: 13px; color: rgba(255, 255, 255, .85); margin-bottom: 10px; }
/* Narrow screens: a wrapping grid, so five or six stay-length options
   never need a horizontal scrollbar. Widescreen (>=900px) keeps the
   original single-row layout, unchanged. */
.rvb-stay-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.rvb-stay-chip {
  height: 54px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.rvb-stay-chip.is-active { border-color: #fff; background: #fff; }
.rvb-verdict--buy .rvb-stay-chip.is-active { color: var(--verdict-buy); }
.rvb-verdict--rent .rvb-stay-chip.is-active { color: var(--verdict-rent); }
.rvb-verdict--close .rvb-stay-chip.is-active { color: var(--verdict-close); }
.rvb-stay-years { font-size: 14px; font-weight: 600; }
.rvb-stay-cap { font-size: 11px; opacity: .9; }
@media (min-width: 900px) {
  .rvb-stay-chips { display: flex; gap: 10px; overflow: visible; }
  .rvb-stay-chip { flex: none; min-width: 100px; }
}

.rvb-tiles { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
@media (min-width: 900px) { .rvb-tiles { flex-direction: row; padding: 22px 24px; } }
.rvb-tile { flex: 1; min-width: 0; border-radius: 16px; padding: 18px; }
@media (min-width: 900px) { .rvb-tile { padding: 22px 24px; } }
.rvb-tile--buy { background: var(--ind-tint); }
.rvb-tile--rent { background: var(--teal-tint); }
.rvb-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rvb-tile-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.rvb-tile--buy .rvb-tile-title { color: var(--ind); }
.rvb-tile--rent .rvb-tile-title { color: var(--teal-d); }
.rvb-tile-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex: none; }
.rvb-badge { font-size: 11px; font-weight: 600; background: var(--surface); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rvb-tile--buy .rvb-badge { color: var(--ind); }
.rvb-tile--rent .rvb-badge { color: var(--teal-d); }
.rvb-tile-num { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 900px) { .rvb-tile-num { font-size: 32px; line-height: 40px; } }
.rvb-tile--buy .rvb-tile-num { color: var(--ind); }
.rvb-tile--rent .rvb-tile-num { color: var(--teal-d); }
.rvb-tile-cap { font-size: 12px; line-height: 17px; color: var(--t2); margin-bottom: 12px; }
.rvb-tile-rows { display: flex; flex-direction: column; }
.rvb-crow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 13px; line-height: 19px; color: var(--t2); }
html.dark .rvb-crow { border-top-color: rgba(255, 255, 255, .08); }
.rvb-crow span:first-child small { display: block; font-size: 11px; color: var(--mut); margin-top: 1px; }
.rvb-crow span:last-child { font-weight: 500; color: var(--ink); white-space: nowrap; }
.rvb-crow--strong { border-top-width: 1.5px; font-weight: 600; }
.rvb-crow--strong span:last-child { color: var(--ink); font-weight: 700; }

.rvb-charges { margin-top: 10px; }
.rvb-charges summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px; font-size: 13px; font-weight: 500; color: var(--ind); }
.rvb-charges summary::-webkit-details-marker { display: none; }
.rvb-charges summary svg { transition: transform .15s ease; }
.rvb-charges[open] summary svg { transform: rotate(180deg); }
.rvb-charges-body { padding: 2px 2px 6px; }

.rvb-section { padding: 24px 20px; border-top: 1px solid var(--bd); }
@media (min-width: 900px) { .rvb-section { padding: 28px 32px; } }
.rvb-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.rvb-legend { display: flex; gap: 18px; font-size: 13px; color: var(--t2); }
.rvb-legend span { display: flex; align-items: center; gap: 8px; }
.rvb-key { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.rvb-key--buy { background: var(--ind); }
.rvb-key--rent { background: var(--teal); }
.rvb-chart { width: 100%; }
.rvb-chart svg { display: block; width: 100%; height: auto; }

.rvb-accs { border-top: 1px solid var(--bd); }
.rvb-acc { border-bottom: 1px solid var(--bd); }
.rvb-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 20px; font-size: 15px; font-weight: 500; color: var(--ink); }
@media (min-width: 900px) { .rvb-acc summary { padding: 18px 32px; } }
.rvb-acc summary::-webkit-details-marker { display: none; }
.rvb-acc summary svg { transition: transform .15s ease; color: var(--mut); flex: none; }
.rvb-acc[open] summary svg { transform: rotate(180deg); }
.rvb-acc-body { padding: 0 20px 24px; }
@media (min-width: 900px) { .rvb-acc-body { padding: 0 32px 28px; } }

.rvb-table-wrap {
  overflow-x: auto; border: 1px solid var(--bd); border-radius: 12px;
  /* A visible scrollbar track here reads as broken/unfinished. The sizing
     below is chosen so real phone widths never actually need to scroll;
     this stays only as a silent safety net for unusually narrow devices,
     still swipeable, just without the scrollbar chrome on top of it. */
  scrollbar-width: none;
}
.rvb-table-wrap::-webkit-scrollbar { display: none; }
.rvb-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 14px; }
.rvb-table th, .rvb-table td { padding: 10px 14px; text-align: right; white-space: nowrap; }
.rvb-table thead th { font-size: 12px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bd); }
.rvb-table thead th:first-child, .rvb-th-buy, .rvb-th-rent { text-align: left; }
.rvb-th-buy { color: var(--ind); }
.rvb-th-rent { color: var(--teal-d); }
.rvb-table tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.rvb-table tbody tr { border-top: 1px solid var(--bd); }
.rvb-table tbody tr.is-you { background: var(--page-bg); }
.rvb-mini { font-size: 11px; font-weight: 600; color: var(--ind); background: var(--ind-tint); border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }
.rvb-ahead { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
/* Narrow screens: shrink everything and let the "Your stay" badge drop to
   its own line, so all four columns fit without needing to scroll at all
   at realistic phone widths (this is sized and tested down to 360px). */
@media (max-width: 640px) {
  .rvb-table { min-width: 0; font-size: 11.5px; }
  .rvb-table th, .rvb-table td { padding: 8px 5px; }
  .rvb-mini { display: block; width: fit-content; margin: 3px 0 0; font-size: 9.5px; padding: 1px 6px; }
  .rvb-ahead { font-size: 10.5px; padding: 2px 7px; }
}
.rvb-ahead--buy { color: var(--ind); background: var(--ind-tint); }
.rvb-ahead--rent { color: var(--teal-d); background: var(--teal-tint); }
.rvb-ahead--close { color: var(--slate); background: var(--slate-tint); }

.rvb-assume-cols { display: flex; flex-direction: column; gap: 0 24px; }
@media (min-width: 640px) { .rvb-assume-cols { flex-direction: row; } }
.rvb-assume-cols > div { flex: 1; min-width: 0; }
.rvb-arow { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bd); font-size: 14px; line-height: 20px; }
.rvb-arow span:first-child { color: var(--t2); }
.rvb-arow span:last-child { font-weight: 500; color: var(--ink); text-align: right; }
.rvb-assume > .rvb-fine { margin-top: 18px; }
.rvb-assume .rvb-link { margin-top: 14px; }

.rvb-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin: 20px 0 32px; }
@media (min-width: 900px) { .rvb-actions { flex-direction: row; align-items: center; justify-content: space-between; } }
.rvb-actions .rvb-fine { max-width: 640px; }
.rvb-actions-btns { display: flex; gap: 12px; width: 100%; }
@media (min-width: 900px) { .rvb-actions-btns { width: auto; } }
.rvb-actions-btns .rvb-btn { flex: 1; }
@media (min-width: 900px) { .rvb-actions-btns .rvb-btn { flex: none; } }

/* ---------- chart (SVG classes drawn by chart.js) ---------- */
.rvb-c-grid { stroke: var(--bd2); stroke-width: 1; }
.rvb-c-zero { stroke: var(--mut); stroke-width: 1; }
.rvb-c-zone { fill: var(--page-bg); opacity: .8; }
.rvb-c-tick { fill: var(--mut); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.rvb-c-tick-strong { fill: var(--ink); font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.rvb-c-rent-line { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rvb-c-buy-line { fill: none; stroke: var(--ind); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rvb-c-faint { opacity: .5; stroke-dasharray: 6 6; stroke-width: 3; }
.rvb-c-rent-fill { fill: var(--teal-tint); }
.rvb-c-buy-fill { fill: var(--ind-tint); }
.rvb-c-marker { stroke: var(--ink); stroke-opacity: .4; stroke-dasharray: 4 4; }
.rvb-c-note { fill: var(--mut); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.rvb-c-dot-rent { fill: var(--surface); stroke: var(--teal-d); stroke-width: 3.5; }
.rvb-c-dot-buy { fill: var(--surface); stroke: var(--ind); stroke-width: 3.5; }
.rvb-c-pill-rent { fill: var(--teal-d); }
.rvb-c-pill-buy { fill: var(--ind); }
.rvb-c-pill-text { fill: #fff; font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.rvb-c-gap-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.rvb-c-gap-text { fill: var(--ink); font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.rvb-c-label-rent { fill: var(--teal-d); font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.rvb-c-label-buy { fill: var(--ind); font-weight: 600; font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* ---------- FAQ ---------- */
.rvb-faq { background: var(--surface); border-top: 1px solid var(--bd); }
.rvb-faq-inner { max-width: 720px; margin: 0 auto; padding: 48px 20px; }
.rvb-faq-item { border-bottom: 1px solid var(--bd); }
.rvb-faq-item:first-of-type { border-top: 1px solid var(--bd); }
.rvb-faq-item summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); position: relative; }
.rvb-faq-item summary::-webkit-details-marker { display: none; }
.rvb-faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ind); }
.rvb-faq-item[open] summary::after { content: '\2212'; }
.rvb-faq-item p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--t2); }
.rvb-faq-disclaimer { margin-top: 24px; }

/* ---------- toast ---------- */
.rvb-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--ink); color: var(--surface); font-size: 14px; line-height: 20px;
  padding: 12px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60; max-width: calc(100vw - 32px);
}
.rvb-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .rvb-bar-seg, .rvb-toast, .rvb-charges summary svg, .rvb-acc summary svg { transition: none; }
}