/* calc-skin.css — brings the older card-style calculators (mortgage, fix & flip) into the
   spreadsheet look of the Advanced calculator without changing their markup or scripts.
   Load AFTER pro-sheet.css and the page's own <style>. */

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; background: #e8edf3 !important; color: #1e293b !important; font-size: 12.5px; }
.calc-container { max-width: 1010px !important; margin: 12px auto 50px !important; padding: 0 0 6px !important; background: #fff !important; border-radius: 16px; box-shadow: 0 8px 32px rgba(20,35,60,.12); overflow: hidden; }
.tband .tbig { font-size: 20px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.main-grid, .scenarios-grid { margin: 14px 24px !important; }
.saved-deals-panel { margin: 10px 24px !important; }
.amort-section { margin: 0 24px 16px !important; }
.flip-verdict { border: none !important; border-bottom: 1px solid #e3e9f1 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.disclaimer { margin: 0 24px !important; }

/* page header -> actions row + title band */
.header { background: #fff !important; border: none !important; border-radius: 12px 12px 0 0 !important; box-shadow: 0 8px 32px rgba(20,35,60,.12) !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
.header::before { display: none !important; }
.header-content { position: relative; z-index: 1; }
.header-top { padding: 10px 14px 10px 20px !important; gap: 10px !important; border-bottom: 1px solid #e3e9f1; }
.calc-title { font-size: 12px !important; font-weight: 600 !important; color: #64748b !important; background: none !important; -webkit-text-fill-color: #64748b !important; letter-spacing: 0 !important; }
.header-buttons { gap: 8px !important; }
.header-btn { border: 1px solid #d5dee8 !important; background: #fff !important; color: #33475e !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 14px !important; border-radius: 8px !important; transform: none !important; box-shadow: none !important; }
.header-btn:hover { border-color: #9fb2c6 !important; color: #24425f !important; box-shadow: 0 1px 6px rgba(20,35,60,.10) !important; transform: none !important; }
.header-btn svg { display: none; }
.property-address-input { display: block; width: 100% !important; margin: 0 !important; padding: 14px 24px 12px !important; background: #24425f !important; border: none !important; border-radius: 0 !important; color: #fff !important; font-family: inherit !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: .3px !important; text-transform: uppercase; box-shadow: none !important; }
.property-address-input::placeholder { color: rgba(255,255,255,.45) !important; text-transform: none; letter-spacing: 0; font-weight: 600; font-style: normal !important; }
.property-address-input:focus { outline: none !important; }

/* saved panel */
.saved-deals-panel { background: #fff !important; border: 1px solid #e3e9f1 !important; border-radius: 12px !important; box-shadow: none !important; margin: 10px 0 !important; }
.saved-deals-header h2 { font-size: 11px !important; letter-spacing: .05em; text-transform: uppercase; color: #24425f !important; }

/* cards -> sheets */
.main-grid { gap: 14px !important; margin: 0 0 14px !important; }
.card { background: #fff !important; border: 1px solid #e3e9f1 !important; border-radius: 10px !important; box-shadow: none !important; padding: 14px 16px 16px !important; transform: none !important; }
.card:hover { border-color: #e3e9f1 !important; box-shadow: none !important; }
.card-title { background: #24425f !important; color: #fff !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; padding: 6px 11px !important; margin: -14px -16px 12px !important; border-radius: 9px 9px 0 0 !important; display: flex !important; gap: 8px; }
.card-icon { display: none !important; }
.deal-category { margin-bottom: 12px !important; padding-bottom: 0 !important; border: none !important; }
.deal-category-title { font-size: 10px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #8fa0b3 !important; border-bottom: 1px solid #e3e9f1 !important; padding-bottom: 4px !important; margin-bottom: 8px !important; }
.deal-category-title::before { display: none !important; }

/* inputs -> cream cells with inline units */
.input-group { margin-bottom: 8px !important; }
.input-label, .tax-label, .scenario-input-label { font-size: 11.5px !important; font-weight: 600 !important; color: #44566b !important; margin-bottom: 3px !important; }
.input-field, .tax-input { background: #fdf8e3 !important; border: 1px solid #e3e9f1 !important; border-radius: 4px !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 700 !important; color: #1e293b !important; padding: 6px 10px !important; text-align: right !important; transition: none !important; }
.input-field:focus, .tax-input:focus { outline: none !important; border-color: #24425f !important; background: #fbf0bd !important; box-shadow: none !important; }
select.input-field { text-align: left !important; }
.input-prefix, .input-suffix { color: #a08f56 !important; font-size: 11px !important; font-weight: 700 !important; }
.input-sublabel { font-size: 10.5px !important; color: #9aa9ba !important; font-weight: 600 !important; }
.select-wrapper select { background: #f2e9c4 !important; border: 1px solid #e3e9f1 !important; border-radius: 4px !important; color: #7c6a2d !important; font-family: inherit !important; font-size: 11px !important; font-weight: 800 !important; padding: 7px 6px !important; }
.toggle-group { background: #fbfcfe !important; border: 1px solid #e3e9f1 !important; border-radius: 6px !important; padding: 8px 11px !important; margin: 8px 0 !important; }
.toggle-group label, .toggle-group span { font-size: 12px !important; font-weight: 700 !important; color: #44566b !important; }
.toggle-group input[type="checkbox"] { accent-color: #24425f !important; }
.clear-btn { background: #fff !important; border: 1px solid #d5dee8 !important; color: #33475e !important; border-radius: 8px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important; padding: 7px 14px !important; }
.itemize-btn { font-family: inherit !important; font-size: 10px !important; font-weight: 800 !important; border: 1px solid #c9d4e0 !important; background: #fff !important; color: #7c8ea3 !important; border-radius: 4px !important; padding: 1px 7px !important; }

/* computed boxes -> total rows */
.auto-calc-box, .buyer-summary { background: #eef3f8 !important; border: none !important; border-top: 2px solid #24425f !important; border-radius: 0 !important; padding: 7px 10px !important; margin-top: 8px !important; }
.auto-calc-label, .buyer-summary-label { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #24425f !important; }
.auto-calc-value, .buyer-summary-value { font-size: 16px !important; font-weight: 800 !important; color: #1e293b !important; font-variant-numeric: tabular-nums; }
.hero-result { background: #f7fafc !important; border: 1.5px solid #24425f !important; border-radius: 8px !important; padding: 14px !important; }
.hero-result-label { color: #24425f !important; font-size: 10.5px !important; letter-spacing: .08em !important; }
.hero-result-value { font-size: 28px !important; }

/* mortgage: results */
.monthly-pay-banner { background: #24425f !important; border-radius: 8px !important; padding: 12px 16px !important; }
.breakdown-table th { color: #8fa0b3 !important; font-size: 10px !important; letter-spacing: .06em !important; border-bottom: 1.5px solid #24425f !important; }
.breakdown-table td, .summary-table td { font-size: 12.5px !important; padding: 6px 8px !important; border-bottom: 1px solid #e3e9f1 !important; font-variant-numeric: tabular-nums; }
.breakdown-table tr.total-row td { background: #eef3f8 !important; border-top: 2px solid #24425f !important; color: #1e293b !important; font-weight: 800 !important; }
.summary-table tr:first-child td { color: #1e293b !important; border-bottom: 1px solid #e3e9f1 !important; font-size: 12.5px !important; }
.amort-section { background: #fff !important; border: 1px solid #e3e9f1 !important; border-radius: 10px !important; box-shadow: none !important; padding: 14px 16px !important; }
.amort-title { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: #fff !important; background: #24425f !important; -webkit-text-fill-color: #fff !important; padding: 6px 11px !important; border-radius: 7px !important; }
.schedule-toggle-btn { font-family: inherit !important; font-size: 11.5px !important; font-weight: 700 !important; border-radius: 6px !important; }
.schedule-toggle-btn.active { background: #24425f !important; color: #fff !important; }
.amort-table th { background: #fbfcfe !important; color: #8fa0b3 !important; font-size: 10px !important; letter-spacing: .06em !important; border-bottom: 1.5px solid #24425f !important; }
.amort-table td { font-size: 12px !important; border-bottom: 1px solid #e3e9f1 !important; color: #1e293b !important; font-variant-numeric: tabular-nums; }

/* fix & flip: verdict + scenarios + notes */
.flip-verdict { background: #fff !important; border: 1px solid #e3e9f1 !important; border-top: none !important; border-radius: 0 0 12px 12px !important; box-shadow: 0 8px 32px rgba(20,35,60,.12) !important; margin: 0 0 14px !important; }
.score-cap, .fv-sub { color: #94a3b8 !important; font-weight: 600 !important; }
.fv-profit { font-weight: 800 !important; letter-spacing: -.5px !important; }
.rule-badge { font-size: 10.5px !important; font-weight: 700 !important; border-radius: 7px !important; }
.prop-photo { border-radius: 12px !important; border: 1.5px dashed #cbd6e2 !important; background: #f7f9fc !important; }
.scenarios-grid { gap: 14px !important; }
.scenario-card { background: #fff !important; border: 1px solid #e3e9f1 !important; border-radius: 10px !important; box-shadow: none !important; padding: 14px 16px !important; transform: none !important; }
.scenario-card:hover { transform: none !important; box-shadow: none !important; }
.scenario-label { font-family: inherit !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; border-radius: 4px !important; background: #24425f !important; color: #fff !important; }
.scenario-label.conservative { background: #b3362c !important; }
.scenario-label.expected { background: #24425f !important; }
.scenario-label.optimistic { background: #14804a !important; }
.scenario-metric { border-bottom: 1px solid #e3e9f1 !important; padding: 7px 0 !important; }
.scenario-metric-label { font-size: 11px !important; font-weight: 600 !important; color: #44566b !important; }
.scenario-metric-value { font-size: 18px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; }
.notes-col .deal-category-title { background: #24425f !important; color: #fff !important; padding: 6px 11px !important; border: none !important; border-radius: 9px 9px 0 0 !important; margin: -14px -16px 0 !important; }
.notes-area { border: none !important; border-radius: 0 !important; padding: 11px 12px !important; font-family: inherit !important; font-size: 12px !important; line-height: 1.55 !important; color: #44566b !important; background: #fff !important; box-shadow: none !important; }
.notes-area:focus { outline: none !important; background: #fffdf4 !important; }
.toggle-slider { background: #c9d4e0 !important; }
.toggle-switch input:checked + .toggle-slider { background: #24425f !important; }
.toggle-label { font-size: 12px !important; font-weight: 700 !important; color: #44566b !important; }
.rp-total { background: #eef3f8 !important; border-top: 2px solid #24425f !important; border-radius: 0 !important; font-weight: 800 !important; }

.disclaimer { font-size: 10px !important; color: #94a3b8 !important; border-top: 1px solid #e3e9f1 !important; }

/* share overlay + pdf modal */
.pdf-style-modal { border-radius: 12px !important; font-family: inherit; }
.pdf-style-option .style-icon { display: none !important; }
.pdf-style-option { border-radius: 8px !important; }
.pdf-style-option.selected { border-color: #24425f !important; background: #eef3f8 !important; }
.pdf-modal-btn.primary { background: #24425f !important; border-radius: 8px !important; }
.pdf-modal-btn.secondary { background: #fff !important; color: #33475e !important; border: 1px solid #d5dee8 !important; border-radius: 8px !important; }
.share-overlay-btn { font-family: inherit !important; border-radius: 8px !important; }

/* keep the mobile breakpoints to screens */
@media print { .header-buttons, .clear-btn, .itemize-btn { display: none !important; } .header, .card, .scenario-card, .amort-section, .flip-verdict { box-shadow: none !important; } }

/* unit prefixes/suffixes need their gutter back (the skin's padding override was eating it) */
.input-field.has-prefix { padding-left: 26px !important; }
.input-field.has-suffix { padding-right: 32px !important; }
.input-suffix { right: 10px !important; }
.input-prefix { left: 10px !important; }

/* ── print: white page, one sheet where it fits, schedule on its own page ── */
@media print {
  @page { margin: 0.4in; }
  body { background: #fff !important; font-size: 11px; }
  .calc-container { max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .actions { display: none !important; }
  .main-grid, .scenarios-grid, .saved-deals-panel, .amort-section, .disclaimer { margin-left: 0 !important; margin-right: 0 !important; }
  .tband { display: flex !important; background: none !important; color: #000 !important; padding: 0 0 8px !important; border-bottom: 2px solid #000 !important; border-radius: 0 !important; -webkit-print-color-adjust: exact; }
  .tband .taddr, .tband .tbig { color: #000 !important; }
  .tband .ttitle { color: #444 !important; }
  .header { box-shadow: none !important; border-radius: 0 !important; border-bottom: 2px solid #000 !important; }
  .header-top { padding: 0 0 6px !important; border: none !important; }
  .calc-title { font-size: 15px !important; font-weight: 800 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; text-transform: uppercase; letter-spacing: .3px; }
  .property-address-input { background: none !important; color: #000 !important; padding: 2px 0 8px !important; font-size: 17px !important; }
  .property-address-input::placeholder { color: transparent !important; }
  .saved-deals-panel, .share-overlay, .pdf-style-selector, .toggle-row, .clear-btn, .itemize-btn, .header-buttons { display: none !important; }
  .flip-verdict { box-shadow: none !important; border: none !important; border-bottom: 1px solid #c2c2c2 !important; border-radius: 0 !important; }
  .prop-photo { display: none !important; }
  .main-grid, .scenarios-grid { gap: 10px !important; }
  .card, .scenario-card, .amort-section { border-color: #c2c2c2 !important; border-radius: 0 !important; padding: 10px 12px !important; break-inside: avoid; page-break-inside: avoid; }
  .card-title, .notes-col .deal-category-title, .amort-title, .monthly-pay-banner { background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border-bottom: 1.5px solid #000 !important; border-radius: 0 !important; padding: 0 0 3px !important; margin: 0 0 8px !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card-title { margin: -10px -12px 10px !important; padding: 6px 12px 4px !important; }
  .monthly-pay-banner * { color: #000 !important; }
  .input-field, .tax-input, .select-wrapper select { background: #fff !important; border-color: #c2c2c2 !important; }
  .auto-calc-box, .buyer-summary, .rp-total { background: #f1f1f1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scenario-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .notes-area { height: auto !important; min-height: 0 !important; resize: none !important; overflow: visible !important; }
  .disclaimer { border: none !important; padding-top: 6px !important; }
  /* mortgage: the amortization schedule gets its own page */
  .amort-section { break-before: page; page-break-before: always; }
  .amort-table-wrap { max-height: none !important; overflow: visible !important; border: none !important; }
  .amort-table th, .amort-table td { padding: 2px 8px !important; font-size: 9.5px !important; }
  .amort-content { grid-template-columns: 1fr !important; }
  .amort-chart-wrap { display: none !important; }
  .schedule-toggle { display: none !important; }
  .chart-container { break-inside: avoid; page-break-inside: avoid; }
}

/* ── phones: single column, nothing wider than the screen ── */
@media screen and (max-width: 768px) {
  .calc-container { margin: 10px 6px 40px !important; border-radius: 10px; }
  .main-grid, .scenarios-grid { grid-template-columns: minmax(0, 1fr) !important; margin: 12px 12px !important; }
  .card, .scenario-card, .amort-section { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
  .saved-deals-panel, .amort-section, .disclaimer { margin-left: 12px !important; margin-right: 12px !important; }
  .chart-container, .amort-chart-wrap { max-width: 100% !important; overflow: hidden; }
  canvas { max-width: 100% !important; height: auto !important; }
  .tband { padding: 12px 16px 10px !important; }
  .tband .tbig, .tband .taddr { font-size: 17px !important; }
  .flip-verdict { grid-template-columns: 1fr !important; }
}