/* ========================================================================
   DEPLOY PATH: /css/mortgage-polish.fa129433.css
   Tepuy Solutions — Mortgage Calculator sidebar polish
   Version: 2026-03-31 (refactored)
   
   Load AFTER tepuy.css.
   Token overrides are scoped to .calc-aside — they do NOT bleed globally.
   ======================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1.  SIDEBAR SURFACE — base surface/background/scrollbar moved to
       css/simulators.css. Only the wide-tier flush-border block stays here.
       lmi-polish.css used to gate the same declarations behind
       @media (min-width:1025px) instead of this file's
       @container calc-layout (min-width:800px) — that mismatch is fixed
       (lmi-polish.css now uses the same container/threshold), so the three
       files' wide-tier blocks are functionally identical modulo
       offset-polish.css's border shorthand vs. this file's/lmi's longhands
       (see offset-polish.css's own note). Left duplicated per-file rather
       than folded into simulators.css in the same change that fixed the
       mechanism — that's a separate consolidation, not a mismatch fix.
   ══════════════════════════════════════════════════════════════════════════ */

/* Wide tier (>=800px) — same threshold as tepuy.css's shared calc-layout
   density tiers. Was a raw viewport min-width:1025px before container
   queries; now keyed off .main-layout's own rendered width (the iframe's
   width when embedded) via body.calc's calc-layout container. */
@container calc-layout (min-width: 800px) {
  body.calc .calc-aside .sidebar-panel {
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid #dce8e1 !important;
    padding: 0 !important;
  }
  body.calc .calc-aside .sidebar-scroll {
    padding: 0.5rem 0.6rem 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   2.  SIDEBAR TITLE / SUB — moved to css/simulators.css
       (.mort-sidebar-title / .mort-sidebar-sub, identical values)
   3.  ACCORDION CARDS — moved to css/simulators.css
       (card / card-header / chevron / card-content, identical values)

   REMOVED 2026-09-06 (R4). This file used to carry an extra
   `aside .card-content:not([hidden]).open { padding: 0.65rem 0.9rem 0.85rem }`
   alongside the plain `.open` one — offset/lmi never had it. The
   `:not([hidden])` form ties in specificity with tepuy.css's narrow-tier
   .card-content padding rule and, via source order, wins it. The note that
   used to sit here described that accurately and called it "a real
   pre-existing difference", then preserved it.

   Preserving it is what this row was about. Measured in Chromium with the
   0.3s transition allowed to settle, open accordion content at 700px wide:

       PvS       7.2 / 14.4 / 7.2      <- tepuy.css narrow tier
       LMI       7.2 / 14.4 / 7.2
       OVS       7.2 / 14.4 / 7.2
       Mortgage  10.4 / 14.4 / 13.6    <- this rule, alone against the other three

   So the one selector kept Mortgage on desktop spacing at every narrow width
   while its two siblings tightened, and it did it from a DESKTOP-level rule
   that no reader of the mobile block would think to look at. Three
   calculators that are meant to share a skin, and one of them silently did
   not. Deleted rather than copied to the other two: the narrow tier is
   deliberate, and the fix for "one page ignores it" is to stop ignoring it.

   Nothing replaces it. The shared `.open` padding lives in
   css/simulators.css; the narrow tier is tepuy.css's.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   4.  FORM ROWS
   ══════════════════════════════════════════════════════════════════════════ */
aside .form-row {
  margin-bottom: 0.5rem !important;
}
/* aside .form-row label now comes from css/tepuy.css, once, at 0.8125rem.
   This file's byte-identical override was one of four. */
/* border/border-color converged onto the shared --inp-border/--inp-focus
   tokens (2026-09) — css/simulators.css defines both, #c8ddd3/#1a6b4a
   exactly, and already loads on this page before this file. Offset vs
   Shares was already token-driven here; this was the hardcoded holdout.
   Same rendered colour, confirmed before/after. */
aside .form-row input[type="text"],
aside .form-row input[type="number"],
aside .form-row select {
  width: 100% !important;
  padding: 0.3rem 0.55rem !important;
  font-size: 0.845rem !important;
  border-radius: 5px !important;
  border: 1px solid var(--inp-border) !important;
  background: #ffffff !important;
  color: #0f1c16 !important;
  font-family: inherit !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}
aside .form-row input:focus,
aside .form-row select:focus {
  outline: none !important;
  border-color: var(--inp-focus) !important;
  box-shadow: 0 0 0 3px rgba(26,107,74,0.12) !important;
}
/* Select dropdown arrow.

   The selector carries `.form-row` deliberately. Until 2026-09-05 this rule
   was just `aside select` (specificity 0,1,1 -> 0,0,2), while the input
   styling above uses `aside .form-row select` (0,1,2) and sets a
   `background:` SHORTHAND — which resets background-image to none and, being
   more specific, won. Combined with `appearance: none` here, which the
   shorthand does NOT reset, the result was a select with no native arrow and
   no custom one.

   Measured across the four sidebar calculators: NINE of eleven selects
   rendered with no dropdown indicator at all. That is why the chevron's
   2.36:1 contrast never appeared in an axe scan — the chevron was not being
   painted. */
aside .form-row select,
aside select {
  appearance: none !important; -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2355685F'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 8px 5px !important;
  padding-right: 1.8rem !important;
  cursor: pointer !important;
}

aside .grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}
/* Sidebar's own cramped width, not the viewport — 300px matches the
   Narrow-tier "cramped sidebar" threshold used elsewhere (retirement's
   sidebar-polish.css); the sidebar's rendered width never reaches the old
   440px viewport value verbatim, so the number is recalibrated, not just
   the query type. */
@container calc-sidebar (max-width: 300px) {
  aside .grid-2 { grid-template-columns: 1fr !important; }
}

/* hint paragraph inside cards */
aside p.hint,
aside .hint {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  margin: -0.1rem 0 0.55rem !important;
  line-height: 1.4 !important;
}

/* check-row label */
aside .check-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.45rem !important;
  font-size: 0.8rem !important;
  color: #3d5248 !important;
  cursor: pointer !important;
  margin-top: 0.55rem !important;
}
aside .check-row input[type="checkbox"] {
  width: auto !important;
  margin: 2px 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: #1a5236 !important;
}

/* Rate step rows */
.rate-step-row {
  margin-bottom: 0.4rem !important;
}
.rate-step-row .step-del {
  font-size: 0.72rem !important;
  padding: 0.18rem 0.5rem !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
  background: #fff5f5 !important;
}
.rate-step-row .step-del:hover {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
}

/* Add/Clear rate step buttons */
aside .form-actions {
  display: flex !important;
  gap: 0.4rem !important;
  margin-top: 0.25rem !important;
}
aside .form-actions .btn-primary,
aside #addRateStepBtn {
  font-size: 0.78rem !important;
  padding: 0.3rem 0.7rem !important;
  background: #1a5236 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
aside .form-actions .btn-secondary,
aside #clearRateStepsBtn {
  /* flex override added 2026-09, when this page started loading
     css/calculators.css. That file's `.btn-secondary { flex: 1; ... }` was
     written for a `.btn-row` layout and has ZERO consumers on the two pages
     that already loaded it (0 .btn-secondary elements in
     property_vs_shares.html and retirement.html) — #clearRateStepsBtn is its
     first real consumer anywhere. Left alone it stretched this button from
     70px to 251px, swallowing the row beside the 82px "+ Add step".
     Measured before/after; this restores the width the page rendered before
     calculators.css was added, without editing a shared file for one page. */
  flex: 0 1 auto !important;
  font-size: 0.78rem !important;
  padding: 0.3rem 0.7rem !important;
  background: #f0f5f2 !important;
  color: #3d5248 !important;
  border: 1px solid #c8ddd3 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   5.  SIDEBAR FOOTER — base surface and Calculate button moved to
       css/simulators.css. letter-spacing/line-height stay here: this page
       explicitly sets both (simulators.css deliberately leaves them out of
       the shared rule since offset sets neither — see offset-polish.css).
       Pro-badge hiding also stays here — offset-polish.css hides .pro-cta/
       #unlockPro globally (not scoped to .sidebar-footer) while this file
       and lmi-polish.css scope it to .sidebar-footer; a real scope
       difference, not safe to merge without checking whether either page
       has a .pro-cta/#unlockPro element outside the footer.
   ══════════════════════════════════════════════════════════════════════════ */
.pro-badge, #footerBadge { display: none !important; }
.sidebar-footer .pro-cta,
.sidebar-footer #unlockPro { display: none !important; }

body.calc .calc-aside .sidebar-footer #runBtn { letter-spacing: 0.03em !important; }
.mort-calc-hint { line-height: 1.35 !important; }


/* ══════════════════════════════════════════════════════════════════════════
   6.  MOBILE
   ══════════════════════════════════════════════════════════════════════════ */
/* Same cramped-sidebar container as the grid-2 rule above — these values
   only ever applied once the sidebar itself was already narrow, so this is
   a calc-sidebar concern, not calc-layout. */
@container calc-sidebar (max-width: 300px) {
  body.calc .calc-aside .sidebar-panel { border-radius: 0 !important; }
  body.calc .calc-aside .card { margin-bottom: 0.3rem !important; }
  body.calc .calc-aside .card-header { height: 38px !important; font-size: 0.72rem !important; padding: 0 2.2rem 0 0.8rem !important; }
  aside .card-content.open { padding: 0.55rem 0.8rem 0.75rem !important; } /* stays bare — see simulators.css .card-content comment; tepuy.css's narrow-tier padding rule already out-specifies this at mobile widths, unchanged from before */
  body.calc .calc-aside .sidebar-footer { padding: 0.5rem !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7.  SCENARIO ROW — Save / Load / Share buttons
   ══════════════════════════════════════════════════════════════════════════ */
.ret-scenario-row {
  display: flex; gap: 0.35rem; margin-top: 0.1rem;
}
.ret-scen-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.28rem; padding: 0.38rem 0.4rem;
  font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  color: #3d5248; background: #f0f5f2; border: 1px solid #c8ddd3;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.ret-scen-btn:hover { background: #e6f2ec; border-color: #3db07e; color: #1a5236; }
.ret-scen-btn:active { background: #d4eae0; }
.ret-scen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Load-button busy state (fix-scenario-save-load-followup-bugs, 2026-08-30)
   — :disabled alone gave no visible cue a fetch was in flight, so a click
   right after Save/page-load (before the list request resolves) looked
   like a no-op; reuses tepuy.css's shared @keyframes spin. */
.ret-scen-btn.is-busy { opacity: 0.75; cursor: wait; }
.ret-scen-btn.is-busy::before {
  content: "";
  width: 0.85em; height: 0.85em;
  border-radius: 50%;
  border: 2px solid rgba(61,82,72,0.25);
  border-top-color: currentColor;
  animation: spin 0.8s linear infinite;
}
.ret-scen-btn--share { color: #1a5236; background: #edf7f2; border-color: #b3d9c4; }
.ret-scen-btn--share:hover { background: #d4ede2; border-color: #1a6b4a; }

.ret-scen-hint {
  display: none; font-size: 0.7rem; font-weight: 500;
  padding: 0.15rem 0; text-align: center; line-height: 1.35;
}


/* ══════════════════════════════════════════════════════════════════════════
   8.  LOAD DROPDOWN
   ══════════════════════════════════════════════════════════════════════════ */
.ret-load-dropdown {
  background: #fff; border: 1px solid #c8ddd3; border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13); overflow: hidden;
  margin: 0 0 0.5rem; z-index: 200;
  animation: rld-fadein 0.15s ease;
}
@keyframes rld-fadein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* The rest of .rld-* (header/list/item/name/date + most hover states)
   moved to css/simulators.css — confirmed byte-identical across this file,
   lmi-polish.css and offset-polish.css, via a direct diff, before the
   move. .rld-close itself stays here: lmi/offset also set
   `line-height: 1` on it and this file doesn't — a real, if tiny,
   difference the move must not erase. */
.rld-close { background: none; border: none; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; padding: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   9.  SHARED SCENARIO BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.ret-shared-banner {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 1rem; background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 10px; margin-bottom: 1rem; font-size: 0.85rem;
  color: #14532d; line-height: 1.45; animation: ret-banner-in 0.3s ease;
}
.ret-shared-banner[hidden] { display: none !important; }
@keyframes ret-banner-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.ret-shared-banner__close {
  margin-left: auto; flex-shrink: 0; background: none; border: none;
  font-size: 0.85rem; color: #4ade80; cursor: pointer; padding: 0.1rem 0.2rem; line-height: 1; border-radius: 3px;
}
.ret-shared-banner__close:hover { color: #15803d; background: rgba(21,128,61,0.08); }


/* ══════════════════════════════════════════════════════════════════════════
   10. SHARE RESULT BUTTON BAR
   ══════════════════════════════════════════════════════════════════════════ */
.ret-share-result-bar {
  display: flex; justify-content: flex-end; margin: 0.5rem 0 0.75rem;
}
.ret-share-result-bar[hidden] { display: none !important; }
.ret-share-result-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem; font-family: inherit; font-size: 0.82rem; font-weight: 600;
  color: #1a5236; background: #f0fdf4; border: 1.5px solid #86efac;
  border-radius: 8px; cursor: pointer; letter-spacing: 0.01em;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.ret-share-result-btn:hover {
  background: #dcfce7; border-color: #4ade80;
  box-shadow: 0 2px 8px rgba(26,107,74,0.15);
}


/* ══════════════════════════════════════════════════════════════════════════
   11. SHARE CARD MODAL
   ══════════════════════════════════════════════════════════════════════════ */

/* Most of .ret-sc-* moved to css/simulators.css — confirmed byte-identical
   across this file, lmi-polish.css and offset-polish.css, via a direct
   diff, before the move. What's left below is page-local ON PURPOSE, not
   an oversight:

   - .ret-sc-badge / .ret-sc-badge-good / .ret-sc-badge-warn: this file's
     bare .ret-sc-badge sets no background/color/border at all, so the
     -good/-warn variants each supply the FULL `border` shorthand. lmi/
     offset's bare .ret-sc-badge instead defaults background/color/border
     to the "good" look, and their variants only override `border-color`.
     Same rendered result for -good/-warn either way, but a DIFFERENT
     result for an unmodified .ret-sc-badge — moving this would be a
     behaviour change, not a move.
   - .ret-sc-action-primary: `color: #fff` here vs `#ffffff` in lmi/
     offset — identical rendered color, different bytes; left alone rather
     than picking a winner un-asked.

   The .ret-sc-stats/-headline/-action-btn tweak in the @container block
   below has the same values in all three files but stays local for a
   different reason: lmi gates the identical declarations with
   `@media (max-width: 500px)` instead of this file's (and offset's)
   `@container calc-layout (max-width: 500px)` — the same LMI/mortgage
   container-vs-media divergence already flagged elsewhere in this repo,
   not something to paper over here by picking one mechanism. */
.ret-sc-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.28rem 0.75rem; border-radius: 20px;
}
.ret-sc-badge.ret-sc-badge-good { background: rgba(26,107,74,0.25); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.ret-sc-badge.ret-sc-badge-warn { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

.ret-sc-action-primary { background: #1a5236; color: #fff; }

/* Split from the original single viewport query: the share-card modal is a
   .main-layout descendant sized against the overall embedded width
   (calc-layout), while .ret-scen-btn lives in the sidebar and should react
   to the sidebar's own cramped width (calc-sidebar) instead — the two no
   longer move together once the sidebar and main column can be different
   widths (e.g. embedded at a size where the sidebar is narrow but the
   overall layout isn't "500px narrow"). */
@container calc-layout (max-width: 500px) {
  .ret-sc-stats { grid-template-columns: 1fr; }
  .ret-sc-headline { font-size: 0.95rem; }
  .ret-sc-action-btn { padding: 0.5rem 0.75rem; font-size: 0.76rem; }
}
@container calc-sidebar (max-width: 300px) {
  .ret-scen-btn { font-size: 0.67rem; padding: 0.35rem 0.25rem; gap: 0.2rem; }
  .ret-scen-btn svg { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   RESULTS TAB SYSTEM — mirrors retirement calculator exactly
   ══════════════════════════════════════════════════════════════════════════ */
.results-tabs-wrap {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* .rtab-bar / .rtab-btn / .rtab-btn--active / .rtab-panel / .rtab-panel--hidden
   / .rtab-actions were verbatim copies of css/calculators.css's rules and are
   deleted here. This page did not load calculators.css when they were written;
   it has since #204, so the copies were pure duplication — except that
   .rtab-panel--hidden's copy carried `!important` and the shared rule does
   not, so the copy WON and the shared rule was dead on every page that had
   one. Measured after deletion: every panel still hides — calculators.css
   declares .rtab-panel--hidden AFTER .rtab-panel at equal specificity, so it
   wins without needing !important — and .rtab-btn--active still computes
   `2px solid rgb(26, 82, 54)` with font-weight 800, unchanged.
   (No line numbers quoted on purpose: docs/OPEN-ITEMS.md records a previous
   entry whose cited line had drifted by 41 before anyone checked.)
   One deliberate behaviour change: the copy's hover was `.rtab-btn:hover`,
   the shared rule's is `.rtab-btn:hover:not(:disabled)` — a disabled
   ("coming soon") tab no longer takes hover paint, which is what the shared
   rule always intended. */

/* Button styles matching retirement */
.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.775rem;
  font-weight: 500;
  color: #4a655a;
  background: transparent;
  border: 1px solid #c8ddd3;
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn-ghost-sm:hover { color: #0f1c16; border-color: #3db07e; background: #f8faf9; }
.btn-ghost-sm svg { flex-shrink: 0; }

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: #1a5236;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.btn-action:hover { background: #247857; box-shadow: 0 3px 8px rgba(26,82,54,0.25); transform: translateY(-1px); }
.btn-action:active { transform: translateY(0); }

.btn-action--ghost {
  color: #3d5248; background: #f1f7f4; box-shadow: none; border: 1px solid #e3ede8;
}
.btn-action--ghost:hover { background: #e6f0eb; border-color: #c8ddd3; box-shadow: none; color: #0f1c16; }

/* Chart container — mirrors chart-improvements.css */
body.calc {
  --chart-height-desktop: 400px;
  --chart-height-tablet:  300px;
  --chart-height-phone:   240px;
}
.rtab-chart {
  position: relative;
  width: 100%;
  height: var(--chart-height-desktop);
  min-height: 220px;
  overflow: hidden;
}
.rtab-chart canvas { display: block !important; width: 100% !important; height: 100% !important; }

/* Tepuy branding strip */
.rtab-chart::after {
  content: 'tepuysolutions.com';
  position: absolute;
  bottom: 4px; right: 8px;
  font-size: 9px; font-weight: 600;
  color: rgba(26,107,74,0.25);
  letter-spacing: 0.04em;
  pointer-events: none; z-index: 1;
  font-family: 'Inter', system-ui, sans-serif;
}

.tp-chart {
  position: relative;
  padding: 0.75rem 0.5rem 0.25rem;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e3ede8;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* Chart legend below chart */
.mort-chart-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.6rem 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5a7a6a;
}
.mort-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mort-legend-dot {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.mort-legend-dot--line {
  background: transparent !important;
  border-bottom: 2.5px solid;
  border-radius: 0;
  width: 16px; height: 0;
}
.mort-legend-dot--dot {
  border-radius: 50%;
}

/* This used to be @container calc-main, which sounds right for a chart
   living in <main> — it isn't: <main> gets display:contents at every
   stacked width below 800px (tepuy.css's .page-head comment, section 5b),
   and display:contents strips an element of its own box, including any
   container it declares. A @container calc-main query naming a broken
   container simply never matches, silently, so this bug applied here the
   same as everywhere else in this file. Converted to calc-layout (declared
   on body.calc, never display:contents) for consistency with the rest of
   this file's fix, same thresholds.

   That said: this specific pair is currently DEAD CODE either way, and was
   before this change too. css/tepuy.css declares its own .rtab-chart
   height at every tier via raw @media queries with !important (base,
   max-width:960px, max-width:640px) — !important always wins over a
   non-!important rule regardless of specificity or source order, so
   tepuy.css's value wins here unconditionally. Confirmed by deleting this
   pair entirely and measuring getComputedStyle('.rtab-chart').height at
   375px before and after: identical (260px) either way. So this does NOT
   explain the separately-reported "charts too small on mobile" suspicion
   — tepuy.css's own rule already governs this chart's height, unaffected
   by the calc-main bug. If that suspicion is real, the cause is elsewhere
   (the heights tepuy.css assigns, or a canvas/Chart.js sizing issue), not
   this. Left as a mechanical swap anyway for consistency with the rest of
   this file and in case tepuy.css's rule is ever weakened or removed —
   but it is inert today. */
@container calc-layout (max-width: 960px) { .rtab-chart { height: var(--chart-height-tablet); } }
@container calc-layout (max-width: 640px) { .rtab-chart { height: var(--chart-height-phone); min-height: 220px; } }


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS KPI STRIP — 4 cards above the tab panel
   ══════════════════════════════════════════════════════════════════════════ */
.mort-insights-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.mort-insight-card {
  background: #ffffff;
  border: 1px solid #dce8e1;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mort-insight-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.mort-insight-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f1c16;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mort-insight-value--warn  { color: #b45309; }
.mort-insight-value--good  { color: #15803d; }

.mort-insight-sub {
  font-size: 0.68rem;
  /* Was #3db07e, the same value as --gold-dim, which measures 2.72:1 on white.
     --gold-text is the same green family at #1a5236 and clears AA. */
  color: var(--gold-text);
  font-weight: 600;
  line-height: 1.3;
}

/* calc-layout, not calc-main — see the .rtab-chart comment above for why.
   Same fix lmi-polish.css's analogous .lmi-kpi-strip already got; this is
   the strip that comment used as the "sounds like calc-main" example. */
@container calc-layout (max-width: 768px) {
  .mort-insights-strip { grid-template-columns: repeat(2, 1fr); }
}
@container calc-layout (max-width: 440px) {
  .mort-insights-strip { grid-template-columns: 1fr 1fr; }
  .mort-insight-value  { font-size: 1rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS TAB CONTENT
   ══════════════════════════════════════════════════════════════════════════ */
.mort-insights-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mort-ins-headline {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
  color: #1a3326;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.mort-ins-headline strong { color: #15803d; }

.mort-ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.mort-ins-kpi {
  background: #f7faf8;
  border: 1px solid #e3ede8;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mort-ins-kpi-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.mort-ins-kpi-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f1c16;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.mort-ins-kpi-value--green { color: #15803d; }
.mort-ins-kpi-value--warn  { color: #b45309; }
.mort-ins-kpi-value--blue  { color: #1d4ed8; }

.mort-ins-kpi-sub {
  font-size: 0.67rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Comparison block */
.mort-ins-compare {
  background: #f7faf8;
  border: 1px solid #dce8e1;
  border-radius: 10px;
  padding: 1rem;
}
.mort-ins-compare-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.mort-ins-compare-grid {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mort-ins-comp-col { flex: 1; min-width: 120px; }
.mort-ins-comp-col--good .mort-ins-comp-val { color: #b45309; }
.mort-ins-comp-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; }
.mort-ins-comp-val   { font-size: 1.3rem; font-weight: 700; color: #1a5236; font-variant-numeric: tabular-nums; }
.mort-ins-comp-sub   { font-size: 0.7rem; color: var(--text-muted); }
.mort-ins-comp-arrow { font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; }

/* calc-layout, not calc-main — same defect and fix as .rtab-chart above. */
@container calc-layout (max-width: 640px) {
  .mort-ins-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SCHEDULE TABLE
   ══════════════════════════════════════════════════════════════════════════ */
.mort-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #e3ede8;
}

.mort-table-wrap table,
.mort-table-wrap .tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.mort-table-wrap thead th {
  padding: 0.5rem 0.75rem;
  background: #f7faf8;
  color: #4a655a;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid #dce8e1;
  white-space: nowrap;
  text-align: right;
}
.mort-table-wrap thead th:first-child { text-align: left; }

.mort-table-wrap tbody td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid #f0f5f2;
  color: #1a3326;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mort-table-wrap tbody td:first-child { text-align: left; color: #4a655a; font-weight: 600; }
.mort-table-wrap tbody tr:last-child td { border-bottom: none; }
.mort-table-wrap tbody tr:hover td { background: #f7faf8; }



/* ══════════════════════════════════════════════════════════════════════════
   TOOLTIP FIX — aside context only
   tepuy.css uses position:absolute for .i::after which gets clipped by
   .sidebar-scroll { overflow:auto }. Override inside aside to position:fixed
   using --tip-x / --tip-y custom props set by JS in mortgage-scenario.js.
   ══════════════════════════════════════════════════════════════════════════ */
aside .i::after {
  position: fixed !important;
  left: var(--tip-x, 50%) !important;
  top: var(--tip-y, -9999px) !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 99999 !important;
}
aside .i::before {
  position: fixed !important;
  left: var(--tip-arrow-x, 50%) !important;
  top: var(--tip-arrow-y, -9999px) !important;
  bottom: auto !important;
  transform: rotate(45deg) !important;
  z-index: 99998 !important;
}