/* ========================================================================
   DEPLOY PATH: /css/lmi-polish.448f5311.css
   Tepuy Solutions — LMI 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. The wide-tier flush-border block used to gate on
       @media (min-width:1025px) while mortgage/offset gated the identical
       declarations behind @container calc-layout (min-width:800px) — same
       decision, two different thresholds, so in any window ~800-1025px
       wide this page showed the mobile sidebar chrome while mortgage/offset
       already showed desktop. Converted to match mortgage/offset exactly
       (see the breakpoint-mismatch audit, finding #1).
   ══════════════════════════════════════════════════════════════════════════ */

/* Wide tier (>=800px) — same threshold as tepuy.css's shared calc-layout
   density tiers, and as mortgage-polish.css/offset-polish.css's identical
   block. Keyed off .main-layout's own rendered width (the iframe's width
   when embedded) via body.calc's calc-layout container, not the viewport. */
@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
       (.lmi-sidebar-title / .lmi-sidebar-sub, identical values)
   3.  ACCORDION CARDS — moved to css/simulators.css
       (card / card-header / chevron / card-content, identical values)

   Preserved here: this file's .card used overflow:hidden, not visible
   (mortgage/offset use visible) — a real difference, restored below
   rather than silently picking up simulators.css's shared value.
   ══════════════════════════════════════════════════════════════════════════ */
body.calc .calc-aside .card,
body.calc .calc-aside .tp-card { overflow: hidden !important; }


/* ══════════════════════════════════════════════════════════════════════════
   4.  FORM ROWS — tighter, more legible
   ══════════════════════════════════════════════════════════════════════════ */
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;
  background: #ffffff !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;
}

/* Radio rows */
aside .radio-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-bottom: 0.2rem !important;
}

aside .radio-row input[type="radio"] {
  width: auto !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #1a5236 !important;
}

aside .radio-row label {
  font-size: 0.78rem !important;
  margin: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

/* Grid helpers */
aside .grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}

/* Sidebar's own cramped width, not the viewport — matches mortgage-polish.css/
   offset-polish.css's identical .grid-2 collapse, which uses @container
   calc-sidebar (max-width:300px) rather than a viewport max-width. 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; }
}

/* Section intro text in card */
aside .section-intro,
aside p.section-intro {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  line-height: 1.45 !important;
  margin: -0.15rem 0 0.6rem !important;
}

/* Muted span in labels */
aside span.muted {
  font-size: 0.68rem !important;
  color: #b0bfba !important;
  font-weight: 400 !important;
}

/* Tiny muted paragraph */
aside p.tiny.muted {
  font-size: 0.68rem !important;
  color: #b0bfba !important;
  line-height: 1.4 !important;
  margin: 0.25rem 0 0.1rem !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   5.  SIDEBAR FOOTER — base surface and button base moved to
       css/simulators.css. Preserved here: this file's #runBtn is the only
       one of the three with a hover gradient-color change, and its
       transition list includes background 0.15s (mortgage/offset only
       transition transform + box-shadow) — both real, visible differences,
       not merged. letter-spacing/line-height also 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).
   ══════════════════════════════════════════════════════════════════════════ */

/* Remove the pro-badge text */
.pro-badge { display: none !important; }

/* Hide Pro CTA */
.sidebar-footer .pro-cta,
.sidebar-footer #unlockPro {
  display: none !important;
}

body.calc .calc-aside .sidebar-footer #runBtn,
body.calc .calc-aside .sidebar-footer .btn.btn-primary {
  letter-spacing: 0.03em !important;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s !important;
}
.lmi-calc-hint { line-height: 1.35 !important; }

.sidebar-footer #runBtn:hover,
.sidebar-footer .btn.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(26, 82, 54, 0.3) !important;
  background: linear-gradient(135deg, #1d5c3c 0%, #2b8f62 100%) !important;
}

.sidebar-footer #runBtn:active,
.sidebar-footer .btn.btn-primary:active {
  transform: translateY(0) !important;
}

/* form-actions wrapper — make it transparent */
.form-actions {
  display: contents !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   6.  TOOLTIP — REMOVED 2026-09-07 (R5)

   The `.i` / `data-tip` CSS-only ::after tooltip block lived here. LMI and
   Offset vs Shares are the only two pages that load this file, and both now
   mount the shared .info-tip component driven by js/pvs-tooltip.js — the
   same one PvS and Retirement use. With no `.i` markup left on either page,
   every rule in this section matched nothing.

   Deleted only after a raw-byte sweep of the whole repo, because the same
   pattern is NOT dead everywhere: `calculators/cgt_indexation/index.html`
   still carries one `class="i" data-tip=`, and it loads css/tepuy.css and
   css/sidebar-polish.css. Both of those keep their `.i` rules for exactly
   that consumer, and tepuy.css groups `.i` with `.tp-tip`, which retirement
   still uses. This file is the only one where the block had no consumer.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   7.  MOBILE — this used to be one @media (max-width:768px) block, but it
       was actually two unrelated concerns riding the same viewport query:

       (a) .sidebar-panel's own horizontal padding, which only matters once
           .main-layout itself has switched to the stacked column (tepuy.css
           section 3, @container calc-layout (max-width:799.98px), which
           gives .main-layout the same 0.75rem horizontal inset) — a
           calc-layout concern, not a cramped-sidebar one.
       (b) everything else (card sizing, footer padding), which is the exact
           same "sidebar has physically narrowed" case mortgage-polish.css/
           offset-polish.css already gate behind
           @container calc-sidebar (max-width:300px) — same selectors,
           same threshold there, LMI's own values kept here since the audit
           only flagged the mechanism/threshold, not a value difference.

       Splitting them onto their real triggers, rather than one viewport
       number that happened to cover both by coincidence.

       One behaviour change worth calling out: the `.sidebar-panel
       {border-radius:0}` line below is copied verbatim from mortgage/
       offset's own calc-sidebar block, but calc-sidebar is declared ON
       .sidebar-panel itself (tepuy.css) — a size container can't match a
       query against its own box, so this selector is dead in mortgage/
       offset too (verified with Playwright: their sidebar stays rounded
       at every narrow width, never flush, despite this rule). Previously
       LMI's version of this line lived in a plain @media query, where it
       had no such restriction and DID paint flush corners on real phones.
       Moving it here makes LMI's very-narrow-phone sidebar corners go from
       flush to rounded — a small extra change beyond the ~800-1025px
       item this PR is centrally about, but it's what makes LMI's sidebar
       chrome actually match what mortgage/offset render today, not just
       what their CSS appears to say. */
@container calc-layout (max-width: 799.98px) {
  body.calc .calc-aside .sidebar-panel {
    padding: 0 0.75rem 0 !important;
  }
}
@container calc-sidebar (max-width: 300px) {
  body.calc .calc-aside .sidebar-panel { border-radius: 0 !important; } /* dead: see comment above */
  body.calc .calc-aside .card { margin-bottom: 0.35rem !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 0.75rem 0.5rem !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8.  SCENARIO ROW BUTTONS (re-used from retirement design)
   ══════════════════════════════════════════════════════════════════════════ */
.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;
}

/* ══════════════════════════════════════════════════════════════════════════
   9.  LOAD DROPDOWN
   ══════════════════════════════════════════════════════════════════════════ */
.ret-load-dropdown {
  background: #ffffff;
  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,
   mortgage-polish.css and offset-polish.css, via a direct diff, before the
   move. .rld-close itself stays here: this file (and offset's) set
   `line-height: 1` on it, mortgage-polish.css 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; line-height: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   10. 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); }


/* ══════════════════════════════════════════════════════════════════════════
   11. SHARE RESULT BUTTON BAR (in main results area)
   ══════════════════════════════════════════════════════════════════════════ */
.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);
}


/* ══════════════════════════════════════════════════════════════════════════
   12. SHARE CARD MODAL — overlay, card (dark/light), action buttons
       Reuses ret-sc-* class names so all the CSS from sidebar-polish.css
       applies here too when both files are loaded. Defined here independently
       so lmi.html works standalone without sidebar-polish.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Most of .ret-sc-* moved to css/simulators.css — confirmed byte-identical
   across this file, mortgage-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 defaults background/color/border to the "good"
     look, and the -good/-warn variants only override `border-color`.
     mortgage-polish.css's bare .ret-sc-badge sets none of that, so its
     variants each supply the FULL `border` shorthand instead. 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: #ffffff` here vs `#fff` in
     mortgage-polish.css — identical rendered color, different bytes; left
     alone rather than picking a winner un-asked.

   The .ret-sc-stats/-headline/-action-btn tweak just below has the same
   values in all three files but stays local for a different reason: this
   file gates the identical declarations with `@media (max-width: 500px)`
   where mortgage/offset use `@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;
  background: rgba(26,107,74,0.25); color: #4ade80; border: 1px solid rgba(74,222,128,0.3);
}
.ret-sc-badge.ret-sc-badge-good { background: rgba(26,107,74,0.25); color: #4ade80; border-color: rgba(74,222,128,0.3); }
.ret-sc-badge.ret-sc-badge-warn { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.3); }

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

@media (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; }
  .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 + mortgage 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. */

.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;
  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; }

.lmi-tab-intro {
  font-size: 0.85rem;
  color: #4a655a;
  line-height: 1.55;
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: #f7faf8;
  border-radius: 8px;
  border-left: 3px solid #c8ddd3;
}


/* ══════════════════════════════════════════════════════════════════════════
   KPI STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.lmi-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.lmi-kpi-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;
}

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

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

.lmi-kpi-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
}

/* .lmi-kpi-strip lives in <main>, which sounds like a calc-main case (see
   mortgage-polish.css's analogous .mort-insights-strip, same two
   thresholds). It isn't: <main> gets display:contents at the stacked tier
   (tepuy.css's page-head comment, section 5b) for an unrelated flex-reorder
   trick, 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 at every stacked/narrow
   width (where this strip most needs to collapse) it would stay stuck at
   its wide-tier column count — confirmed with Playwright before shipping
   this. tepuy.css's own .page-head hits the same wall and deliberately
   targets calc-layout (declared on body.calc, never display:contents)
   instead; doing the same here keeps the exact thresholds this file
   already used as @media values, so there's no behaviour change outside
   an embedded iframe, and it now also does the right thing inside one. */
@container calc-layout (max-width: 768px) {
  .lmi-kpi-strip { grid-template-columns: 1fr 1fr; }
}
@container calc-layout (max-width: 440px) {
  .lmi-kpi-strip { grid-template-columns: 1fr 1fr; }
  .lmi-kpi-value { font-size: 1rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SUMMARY GRID (3 columns in Summary tab)
   ══════════════════════════════════════════════════════════════════════════ */
.lmi-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.lmi-sum-section {
  background: #f7faf8;
  border: 1px solid #e3ede8;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lmi-sum-title {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e3ede8;
}

.lmi-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid #f0f5f2;
}
.lmi-sum-row:last-child { border-bottom: none; }
.lmi-sum-row span { color: #4a655a; flex-shrink: 0; }
.lmi-sum-row strong { color: #0f1c16; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lmi-sum-row--total {
  margin-top: 0.2rem;
  padding-top: 0.4rem;
  border-top: 1.5px solid #dce8e1;
  border-bottom: none;
}
.lmi-sum-row--total strong { color: #1a5236; font-weight: 700; }
.lmi-sum-note { font-size: 0.72rem; color: var(--text-muted); font-style: italic; font-weight: 400; text-align: right; }

/* Same calc-layout reasoning as .lmi-kpi-strip above (this grid is also in
   <main>, which is display:contents — and so not a valid container — at
   exactly the stacked width these queries need to fire at). LMI-exclusive
   component with no mortgage/offset equivalent to match values against,
   so the pixel thresholds are kept as-is; only the query mechanism changes
   (viewport width -> body.calc's own rendered width via calc-layout,
   correct in an embedded iframe where the two can differ). */
@container calc-layout (max-width: 768px) {
  .lmi-summary-grid { grid-template-columns: 1fr; }
}
@container calc-layout (min-width: 769px) and (max-width: 1100px) {
  .lmi-summary-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR FOOTER TWEAKS
   ══════════════════════════════════════════════════════════════════════════ */
.lmi-calc-hint {
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Hide pro badge + pro emoji spans */
.pro-badge, #footerBadge { display: none !important; }
.pro-emoji { display: none !important; }