/* rental.css — styles specific to the Rental Property Cash Flow Calculator.
   Reuses the shared tokens (global.css) and form/result classes from
   calculator.css (.field, .input-wrap, .card, .summary-stat, .seg-toggle,
   .opt-fields, .breakdown, .section-label, .chart-wrap/.legend). Only the
   genuinely new pieces live here: the preset+region bar, region badges, $/%
   mode toggles, the cash-flow hero, screening chips, the itemized CapEx table,
   the stress-test panel, and the projection table. */

/* Guard against sideways scroll on phones from AdSense (see side-hustle.css). */
.ad-unit { max-width: 100%; overflow: hidden; }
.ad-unit .adsbygoogle { max-width: 100%; }

/* Tooltip popovers are absolutely positioned and up to 240px wide; near the right
   edge on a phone they'd push the page sideways (they count toward scroll width
   even while hidden). `overflow-x: clip` stops the shift WITHOUT creating a scroll
   container, so the sticky header + sticky results panel keep working (plain
   `hidden` would break them). */
body { overflow-x: clip; }

/* This tool's form is long; give it a touch more room than the 920px default. */
.container { max-width: 1080px; }
.site-header .nav { max-width: 1080px; }
article .content-section { max-width: 74ch; }

/* All selects get the themed caret (page-scoped), matching side-hustle. */
.preset-bar select,
.calc-form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.1rem;
}

/* Preset + region bar */
.preset-bar { margin-bottom: 0.85rem; }
.preset-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .preset-row { grid-template-columns: 1.3fr 1fr; } }
.preset-bar select {
  width: 100%; font-size: 1rem; font-family: inherit;
  padding: 0.65rem 2.1rem 0.65rem 0.8rem;
  border: 1px solid var(--border); border-radius: 10px;
  background-color: var(--surface); color: var(--text); cursor: pointer;
}
.preset-bar select:focus { border-color: var(--accent); }
.preset-blurb { margin: 0.6rem 0 0; }

/* ---- Desktop layout: a single stacked column of full-width form cards beside
   a sticky results rail. Each fieldset is its own card spanning the full content
   column (no masonry), stacked in logical top-to-bottom order; the results panel
   sticks and trails the form as the user scrolls. ---- */
@media (max-width: 979.98px) { #calculator { grid-template-columns: 1fr; } }
@media (min-width: 980px) {
  #calculator { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  #rp-form {
    display: flex; flex-direction: column; gap: 1.25rem;
    background: transparent; border: none; box-shadow: none; padding: 0;
  }
  #rp-form fieldset {
    margin: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.05rem 1.15rem; box-shadow: var(--shadow);
  }
  /* Render the section title as a block fully INSIDE the card, below a complete
     top border — instead of the default <legend> that breaks through the border.
     Floating the legend full-width removes it from the border-notch layout; every
     following block must then CLEAR it, or grid/flex rows (which shrink-to-fit
     beside a float instead of dropping below it) collapse to zero width. */
  #rp-form legend { float: left; width: 100%; margin: 0 0 0.85rem; padding: 0; }
  #rp-form fieldset > :not(legend) { clear: both; }
  .results-panel { position: sticky; top: 4.75rem; align-self: start; }
}
.calc-form fieldset { margin-bottom: 1.25rem; }
.calc-form fieldset[hidden] { display: none; }

/* Legend flag on fieldsets (matches side-hustle's .legend-flag) */
.calc-form .legend-flag {
  font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle;
}

/* Region "estimate · edit me" badge */
.region-badge {
  display: inline-block; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 0.05rem 0.4rem; border-radius: 999px; margin-left: 0.3rem; vertical-align: middle;
}

/* In-field $/% unit toggle — a compact segmented control pinned to the right
   edge of the input, replacing the old "use $" text link. */
.input-wrap.has-unit-toggle input { padding-right: 3.5rem; }
.unit-toggle {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
  background: var(--surface); z-index: 1;
}
.unit-opt {
  border: none; background: transparent; color: var(--text-faint);
  font-family: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1;
  padding: 0.32rem 0.45rem; min-width: 1.55rem; cursor: pointer;
}
.unit-opt + .unit-opt { border-left: 1px solid var(--border); }
.unit-opt[aria-pressed='true'] { background: var(--accent); color: #fff; }
.unit-opt:hover:not([aria-pressed='true']) { color: var(--text); }

/* Refinance / sub-group block inside a fieldset */
.subgroup {
  margin-top: 0.85rem; padding: 0.75rem 0.85rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.subgroup-title { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.9rem; }

/* ---- Cash-flow hero ---- */
.hero-cf {
  text-align: center; border-top: 3px solid var(--success);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
}
.hero-cf.is-negative { border-top-color: #dc2626; }
.hero-cf-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.hero-cf-num {
  font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 800; line-height: 1.05;
  color: var(--success); font-variant-numeric: tabular-nums; margin: 0.15rem 0;
}
.hero-cf-num.is-negative { color: #dc2626; }
[data-theme='dark'] .hero-cf-num.is-negative { color: #f87171; }
.hero-cf-sub { font-size: 0.92rem; color: var(--text-muted); }
.hero-cf-year {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
  padding: 0.1rem 0.4rem; border-radius: 999px; vertical-align: middle;
}

/* Headline ratio grid + secondary stats reuse .summary-grid/.summary-stat */
.rp-headline, .rp-secondary, .rp-returns { margin-top: 0.85rem; }

/* ---- Screening chips ---- */
.chips-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; font-weight: 700; padding: 0.28rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border);
}
.chip em { font-style: normal; font-weight: 600; opacity: 0.85; font-variant-numeric: tabular-nums; }
.chip-pass { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.chip-borderline { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
[data-theme='dark'] .chip-borderline { color: #fbbf24; }
.chip-fail { background: color-mix(in srgb, #dc2626 12%, transparent); color: #dc2626; border-color: color-mix(in srgb, #dc2626 35%, transparent); }
[data-theme='dark'] .chip-fail { color: #f87171; }
.chip-na { background: var(--surface-2); color: var(--text-faint); }

.brrrr-note { margin-top: 0.85rem; }

/* ---- Chart card ---- */
.chart-card { margin-top: 0.25rem; }
#rp-results-wide { margin-top: 1.25rem; }
#rp-results-wide .chart-wrap { justify-content: center; gap: 2.5rem; }
#rp-results-wide .legend { flex: 0 1 360px; }
@media (max-width: 560px) {
  #rp-results-wide .chart-wrap { justify-content: flex-start; gap: 1.25rem; }
}

/* ---- Itemized CapEx table ---- */
.capex-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.5rem 0; }
.capex-table th[scope='col'] { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 0.78rem; padding: 0.3rem 0.3rem; }
.capex-table td { padding: 0.2rem 0.3rem; }
.capex-table input[type='text'], .capex-table input[type='number'] {
  width: 100%; font-size: 0.88rem; font-family: inherit; padding: 0.4rem 0.5rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); appearance: none;
}
.capex-table .input-wrap .affix:first-child { left: 0.5rem; }
.capex-table .input-wrap:has(.affix:first-child) input { padding-left: 1.3rem; }
.capex-table tfoot th { text-align: right; padding: 0.5rem 0.3rem; font-weight: 700; }
.capex-table tfoot td { text-align: right; padding: 0.5rem 0.3rem; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }

/* ---- Stress test ---- */
#rp-stress-section, #rp-projection-section, #rp-tax-section { margin-top: 1.25rem; }
.stress-grid { display: grid; gap: 0.85rem 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .stress-grid { grid-template-columns: 1fr; } }
.stress-slider label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }
.stress-delta { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.stress-slider input[type='range'] { width: 100%; accent-color: var(--accent); }

.stress-readout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.stress-stat-num { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stress-stat-num.is-negative { color: #dc2626; }
[data-theme='dark'] .stress-stat-num.is-negative { color: #f87171; }
.stress-stat-label { font-size: 0.82rem; color: var(--text-faint); }
.stress-readout .btn-secondary { cursor: pointer; }

.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.85rem 0; }
.scenario { border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem 0.5rem; text-align: center; background: var(--surface-2); }
.scenario-tag { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-faint); }
.scenario-num { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.scenario-sub { font-size: 0.72rem; color: var(--text-faint); }
.scenario.worst { border-top: 3px solid #dc2626; }
.scenario.likely { border-top: 3px solid var(--accent); }
.scenario.best { border-top: 3px solid var(--success); }

.breakeven-list { list-style: none; margin: 0.85rem 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; }
.breakeven-list li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; }
.breakeven-list strong { font-variant-numeric: tabular-nums; }
.be-key {
  display: inline-block; min-width: 9.5rem; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.1rem 0.5rem; border-radius: 999px;
}

/* ---- Projection table ---- */
.projection-wrap .table-scroll { overflow-x: auto; }
.projection-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.projection-table th[scope='col'] { text-align: right; color: var(--text-faint); font-weight: 600; font-size: 0.78rem; padding: 0.5rem 0.5rem; white-space: nowrap; }
.projection-table th[scope='col']:first-child { text-align: left; }
.projection-table td { text-align: right; padding: 0.4rem 0.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.projection-table td:first-child { text-align: left; color: var(--text-faint); }
.projection-table tbody tr { border-bottom: 1px solid var(--border); }
.projection-table td.neg { color: #dc2626; }
[data-theme='dark'] .projection-table td.neg { color: #f87171; }

/* ---- Tax hand-off card (mirrors side-hustle .taxcard) ---- */
.taxcard { border-left: 4px solid var(--accent); }
.taxcard-eyebrow { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.taxcard-figures { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0.6rem; }
.taxcard-figures > div { display: flex; flex-direction: column; }
.taxcard-num { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.taxcard-lab { font-size: 0.78rem; color: var(--text-faint); }
.taxcard-note { font-size: 0.88rem; margin: 0 0 0.85rem; }

/* ---- Share bar ---- */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }
.share-bar .btn-secondary { cursor: pointer; }
.share-status { min-height: 1.2em; }

/* ============================================================================
   New-investor friendliness: info tooltips, always-visible target hints, and
   the glossary. The goal is that every indicator says what it is and what a
   good value looks like, so a first-time landlord isn't staring at jargon.
   ============================================================================ */

/* ---- Reusable info tooltip ("?" button + popover) ----
   Author the text once in data-tip; main.js mirrors it into aria-label for
   screen readers and toggles .is-open on tap for touch devices. */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; padding: 0; margin-left: 0.25rem;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text-faint);
  font-family: inherit; font-size: 0.68rem; font-weight: 800; line-height: 1;
  cursor: help; position: relative; vertical-align: middle; flex: none;
}
.tip:hover, .tip:focus-visible, .tip.is-open { color: #fff; background: var(--accent); border-color: var(--accent); }
.tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px;
  background: var(--text); color: var(--bg);
  padding: 0.55rem 0.7rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 500; line-height: 1.45; letter-spacing: normal;
  text-align: left; text-transform: none; white-space: normal;
  box-shadow: var(--shadow-lg); z-index: 80;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
  pointer-events: none;
}
.tip::before { /* little caret */
  content: ''; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--text);
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 80;
}
.tip:hover::after, .tip:focus-visible::after, .tip.is-open::after,
.tip:hover::before, .tip:focus-visible::before, .tip.is-open::before { opacity: 1; visibility: visible; }
/* Desktop only: tips inside the right-hand results column anchor popovers to the
   right edge so they don't spill off-screen. (On mobile the popover becomes a
   centered bottom bar — see below — so this must not apply there.) */
@media (min-width: 821px) {
  .results-panel .tip:last-child::after, .summary-stat .tip::after { left: auto; right: 0; transform: none; }
  .summary-stat .tip::before { left: auto; right: 6px; transform: none; }
}
/* On phones/tablets, tips can sit anywhere across a row, so no left/right anchor
   stays on screen for all of them. Drop the popover into a centered bar pinned to
   the bottom of the viewport — always fully visible regardless of the button's
   position. (overflow-x: clip on body doesn't trap fixed elements.) */
@media (max-width: 820px) {
  .tip::after {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; top: auto;
    width: auto; max-width: 460px; margin-inline: auto; transform: none;
    font-size: 0.85rem; padding: 0.7rem 0.85rem;
  }
  .tip::before { display: none; } /* no caret in bottom-bar mode */
}

/* ---- Always-visible "good value" hint under a metric ---- */
.metric-hint { font-size: 0.72rem; color: var(--text-faint); margin-top: 0.15rem; line-height: 1.3; }

/* ---- Cash-flow hero caption ---- */
.hero-cf-note {
  margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed var(--border);
  font-size: 0.78rem; color: var(--text-faint); line-height: 1.4;
}

/* ---- Screening chips: heading + pass/watch/fail legend ---- */
.chips-head {
  display: flex; align-items: center; gap: 0.1rem;
  margin-top: 1rem; font-size: 0.82rem; font-weight: 700; color: var(--text-muted);
}
.chips-legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.5rem 0 0;
  font-size: 0.72rem; color: var(--text-faint);
}
.chips-legend .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: middle; }
.chips-legend .dot.pass { background: var(--success); }
.chips-legend .dot.borderline { background: #f59e0b; }
.chips-legend .dot.fail { background: #dc2626; }
/* the per-chip target, e.g. "aim ≥ 1.25" */
.chip .chip-target { font-weight: 600; opacity: 0.8; }

/* ---- Itemized CapEx: equivalent %-of-rent readout ---- */
.capex-equiv { font-weight: 700; font-size: 0.78rem; color: var(--success); margin-left: 0.4rem; font-variant-numeric: tabular-nums; }
.capex-equiv-note { margin: 0.5rem 0 0; line-height: 1.4; }

/* ---- Stress test: scenario assumptions caption ---- */
.scenario-assumptions {
  margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--text-faint); line-height: 1.45;
}
.stress-intro { margin: 0 0 1rem; font-size: 0.88rem; color: var(--text-muted); }
.stress-stat-label .tip { margin-left: 0.15rem; }

/* ---- Glossary ("what these numbers mean") ---- */
.glossary-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 680px) { .glossary-grid { grid-template-columns: 1fr 1fr; } }
.glossary-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 0.85rem 1rem;
}
.glossary-item h3 { margin: 0 0 0.3rem; font-size: 1rem; display: flex; align-items: baseline; gap: 0.5rem; }
.glossary-item .g-target {
  font-size: 0.7rem; font-weight: 700; color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  padding: 0.08rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.glossary-item p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* ---- Share bar (Download PDF button uses the shared .btn-secondary) ---- */
.share-bar .btn-secondary { cursor: pointer; }

/* ---- Print / Save-as-PDF report ----
   A JS-populated report is hidden on screen and is the ONLY thing shown when the
   user prints (or saves to PDF). Its own markup carries explicit light colors via
   inline styles, so the PDF looks right regardless of the on-screen theme. */
.print-report { display: none; }
@media print {
  /* Hide the live app entirely; show only the report. */
  body > *, main.container > * { display: none !important; }
  main.container { display: block !important; max-width: none; padding: 0; margin: 0; }
  #rp-print-report { display: block !important; }
  /* Keep background fills (headline band, tiles, chips) in the printout. */
  #rp-print-report { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]:after { content: ''; } /* don't append URLs to links */
}
@page { margin: 14mm; }