/* ==========================================================================
   Scenario Comparison — comparison.css
   Page-specific styles for calculators/comparison.php
   Inherits design tokens from styles.css (:root vars)
   ========================================================================== */

/* ── Layout ─────────────────────────────────────────────── */

.amort-page{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  padding-top:56px;
}
.amort-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:32px 20px 64px;
}
.amort-hero{
  text-align:center;
  margin-bottom:36px;
}
.amort-hero h1{
  font-family:"DM Serif Display",serif;
  font-size:clamp(1.75rem,4vw,2.5rem);
  color:var(--white);
  margin:0 0 8px;
}
.amort-hero p{
  color:var(--text-muted);
  font-size:1rem;
  max-width:560px;
  margin:0 auto;
}

/* ── Scenario Input Panels ─────────────────────────────── */

.scenario-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:28px;
}
.scenario-panels.has-three{
  grid-template-columns:1fr 1fr 1fr;
}

.scenario-panel{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  overflow:hidden;
}
.scenario-panel--hidden{
  display:none;
}

.scenario-panel__header{
  padding:16px 20px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--border);
}
.scenario-panel__color{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
}
.scenario-panel__label{
  flex:1;
  border:none;
  background:transparent;
  font-family:"DM Serif Display",serif;
  font-size:1.15rem;
  color:var(--text);
  padding:0;
  outline:none;
}
.scenario-panel__label:focus{
  border-bottom:2px solid var(--brand);
}
.scenario-panel__remove{
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  font-size:1.2rem;
  padding:4px;
  line-height:1;
  border-radius:4px;
}
.scenario-panel__remove:hover{
  color:var(--red);
  background:rgba(240,68,56,.08);
}

.scenario-panel__body{
  padding:20px;
}
.scenario-panel__body .input-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.scenario-panel__body .input-group:last-child{
  margin-bottom:0;
}
.scenario-panel__body label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}
.scenario-panel__body input,
.scenario-panel__body select{
  height:44px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  font-size:16px;
  font-family:inherit;
  color:var(--text);
  background:var(--card);
  width:100%;
  box-sizing:border-box;
  transition:border-color .15s;
}
.scenario-panel__body input:focus,
.scenario-panel__body select:focus{
  outline:none;
  border-color:#0f5fff;
  box-shadow:0 0 0 3px rgba(15,95,255,.15);
}
.scenario-panel__body .input-hint{
  font-size:.75rem;
  color:var(--text-muted);
}

.scenario-panel__footer{
  padding:12px 20px 16px;
  border-top:1px solid var(--border);
  display:flex;
  gap:8px;
}
.copy-btn{
  flex:1;
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.copy-btn:hover{
  border-color:#0f5fff;
  background:rgba(15,95,255,.06);
}

.add-scenario-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:28px;
}
.add-scenario-btn{
  padding:10px 24px;
  background:transparent;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  font-size:.9rem;
  font-weight:600;
  color:var(--text-muted);
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.add-scenario-btn:hover{
  border-color:#0f5fff;
  color:#0f5fff;
}
.add-scenario-btn--hidden{
  display:none;
}

/* ── Summary Cards ─────────────────────────────────────── */

.summary-cards{
  display:flex;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.summary-card{
  flex:1;
  min-width:200px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  overflow:hidden;
}
.summary-card__border{
  height:4px;
}
.summary-card__body{
  padding:20px;
}
.summary-card__label{
  font-family:"DM Serif Display",serif;
  font-size:1.05rem;
  color:var(--text);
  margin:0 0 16px;
}
.summary-card__metric{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:6px 0;
  border-bottom:1px solid var(--border);
}
.summary-card__metric:last-child{
  border-bottom:none;
}
.summary-card__metric-label{
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--text-muted);
}
.summary-card__metric-value{
  font-family:"DM Serif Display",serif;
  font-size:1.1rem;
  color:var(--text);
}

/* ── Winner Highlighting ───────────────────────────────── */

.winner{
  background:rgba(18,183,106,.10);
  font-weight:600;
}
[data-theme="dark"] .winner{
  background:rgba(52,211,153,.12);
}

/* ── Sort Control ──────────────────────────────────────── */

.sort-control{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.sort-control__label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-muted);
}
.sort-btn{
  padding:6px 16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.sort-btn:hover{
  border-color:#0f5fff;
}
.sort-btn--active{
  background:#0f5fff;
  border-color:#0f5fff;
  color:#fff;
}

/* ── Comparison Table ──────────────────────────────────── */

.compare-table-wrap{
  overflow-x:auto;
  margin-bottom:28px;
  -webkit-overflow-scrolling:touch;
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  overflow:hidden;
}
.compare-table caption{
  text-align:left;
  padding:16px 20px 12px;
  font-family:"DM Serif Display",serif;
  font-size:1.1rem;
  color:var(--text);
  caption-side:top;
}
.compare-table thead th{
  padding:12px 16px;
  text-align:left;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.compare-table thead th.scenario-col{
  text-align:right;
  min-width:120px;
}
.compare-table tbody td{
  padding:10px 16px;
  font-size:.9rem;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.compare-table tbody td:first-child{
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.compare-table tbody td.scenario-val{
  text-align:right;
  font-family:"DM Sans",sans-serif;
  font-variant-numeric:tabular-nums;
}
.compare-table tbody td.winner{
  background:rgba(18,183,106,.10);
  font-weight:700;
}
[data-theme="dark"] .compare-table tbody td.winner{
  background:rgba(52,211,153,.12);
}
.compare-table tbody tr.annotation-row td{
  font-size:.8rem;
  color:var(--green);
  font-weight:600;
  border-bottom:none;
  padding-top:2px;
}

.collapsed-row{
  display:none;
}
.collapsed-row--visible{
  display:table-row;
}

.toggle-btn{
  display:block;
  width:100%;
  padding:12px;
  background:var(--card);
  border:none;
  border-top:1px solid var(--border);
  font-size:.85rem;
  font-weight:600;
  color:#0f5fff;
  cursor:pointer;
  text-align:center;
}
.toggle-btn:hover{
  background:rgba(15,95,255,.04);
}

/* Sticky first column on mobile */
@media(max-width:900px){
  .compare-table tbody td:first-child,
  .compare-table thead th:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--card);
  }
}

/* ── Chart Sections ────────────────────────────────────── */

.chart-section{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  padding:24px;
  margin-bottom:28px;
}
.chart-section__title{
  font-family:"DM Serif Display",serif;
  font-size:1.1rem;
  color:var(--text);
  margin:0 0 16px;
}
.chart-section canvas{
  width:100% !important;
  max-height:360px;
}

/* ── Break-Even Cards ──────────────────────────────────── */

.breakeven-section{
  margin-bottom:28px;
}
.breakeven-section__title{
  font-family:"DM Serif Display",serif;
  font-size:1.2rem;
  color:var(--text);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.breakeven-cards{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.breakeven-card{
  flex:1;
  min-width:280px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  padding:20px;
}
.breakeven-card__title{
  font-family:"DM Serif Display",serif;
  font-size:1rem;
  color:var(--text);
  margin:0 0 12px;
}
.breakeven-card__detail{
  font-size:.9rem;
  color:var(--text);
  margin:0 0 8px;
  line-height:1.5;
}
.breakeven-card__month{
  font-size:1rem;
  font-weight:700;
  color:#0f5fff;
  margin:12px 0 8px;
}
.breakeven-card__guidance{
  font-size:.85rem;
  color:var(--text-muted);
  margin:4px 0 0;
  padding-left:16px;
  position:relative;
}
.breakeven-card__guidance::before{
  content:"\2192";
  position:absolute;
  left:0;
}

/* ── Winner Banner ─────────────────────────────────────── */

.winner-banner{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  border-left:4px solid var(--green);
  padding:20px 24px;
  margin-bottom:28px;
}
.winner-banner__title{
  font-family:"DM Serif Display",serif;
  font-size:1.1rem;
  color:var(--text);
  margin:0 0 12px;
}
.winner-banner__line{
  font-size:.9rem;
  color:var(--text);
  margin:4px 0;
}
.winner-banner__guidance{
  font-size:.85rem;
  color:var(--text-muted);
  margin:12px 0 0;
  font-style:italic;
}

/* ── Export Section ─────────────────────────────────────── */

.export-section{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  border:1px solid var(--border);
  padding:24px;
  margin-bottom:28px;
  text-align:center;
}
.export-section__title{
  font-family:"DM Serif Display",serif;
  font-size:1.1rem;
  color:var(--text);
  margin:0 0 16px;
}
.prepared-for-input{
  display:block;
  width:100%;
  max-width:400px;
  margin:0 auto 16px;
  height:44px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  font-size:16px;
  font-family:inherit;
  color:var(--text);
  background:var(--card);
  text-align:center;
  box-sizing:border-box;
}
.prepared-for-input:focus{
  outline:none;
  border-color:#0f5fff;
  box-shadow:0 0 0 3px rgba(15,95,255,.15);
}
.export-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 32px;
  background:#0f5fff;
  color:#fff;
  border:none;
  border-radius:var(--radius2);
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s;
}
.export-btn:hover{
  background:#0d4fd4;
}
.export-btn svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
}

/* ── Lead Gate Modal ───────────────────────────────────── */

.lead-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.lead-modal--active{
  opacity:1;
  pointer-events:auto;
}
.lead-modal__content{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px;
  max-width:400px;
  width:90%;
}
.lead-modal__title{
  font-family:"DM Serif Display",serif;
  font-size:1.2rem;
  color:var(--text);
  margin:0 0 8px;
}
.lead-modal__subtitle{
  font-size:.9rem;
  color:var(--text-muted);
  margin:0 0 20px;
}
.lead-modal__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.lead-modal__field label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
}
.lead-modal__field input{
  height:44px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  font-size:16px;
  font-family:inherit;
  color:var(--text);
  background:var(--card);
}
.lead-modal__field input:focus{
  outline:none;
  border-color:#0f5fff;
  box-shadow:0 0 0 3px rgba(15,95,255,.15);
}
.lead-modal__actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}
.lead-modal__submit{
  flex:1;
  padding:12px;
  background:#0f5fff;
  color:#fff;
  border:none;
  border-radius:var(--radius2);
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
}
.lead-modal__submit:hover{
  background:#0d4fd4;
}
.lead-modal__cancel{
  padding:12px 20px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  font-size:.9rem;
  color:var(--text-muted);
  cursor:pointer;
}
.lead-modal__cancel:hover{
  border-color:var(--text-muted);
}
.lead-modal__error{
  color:var(--red);
  font-size:.8rem;
  margin-top:4px;
  display:none;
}

/* ── Tooltip (reused from amortization.css) ────────────── */

.tooltip-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid var(--text-muted);
  color:var(--text-muted);
  font-size:.65rem;
  font-weight:700;
  cursor:pointer;
  background:transparent;
  padding:0;
  line-height:1;
  flex-shrink:0;
  transition:border-color .15s, color .15s;
}
.tooltip-trigger:hover,
.tooltip-trigger:focus{
  border-color:#0f5fff;
  color:#0f5fff;
  outline:none;
}
.tooltip-content{
  position:absolute;
  z-index:9000;
  max-width:300px;
  padding:12px 16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  font-size:.85rem;
  line-height:1.5;
  color:var(--text);
  display:none;
}
.tooltip-content.visible{
  display:block;
}

/* ── PDF Overlay ───────────────────────────────────────── */

.pdf-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.pdf-overlay.active{
  opacity:1;
  pointer-events:auto;
}
.pdf-spinner{
  background:var(--card);
  padding:24px 40px;
  border-radius:var(--radius);
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  box-shadow:var(--shadow);
}

/* ── No Results / Empty State ──────────────────────────── */

.empty-state{
  text-align:center;
  padding:40px 20px;
  color:var(--text-muted);
  font-size:.95rem;
}

/* ── Responsive ────────────────────────────────────────── */

@media(max-width:900px){
  .scenario-panels,
  .scenario-panels.has-three{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .summary-cards{
    flex-direction:column;
  }
  .breakeven-cards{
    flex-direction:column;
  }
  .sort-control{
    flex-direction:column;
    align-items:flex-start;
  }
  .chart-section canvas{
    max-height:260px;
  }
  .lead-modal__content{
    padding:24px 20px;
  }
}