@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;min-width:0;margin:0;padding:0;}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);transition:background var(--motion-base),color var(--motion-base);min-height:100vh;overflow-x:hidden;}
.container{max-width:1600px;margin:0 auto;padding:20px 24px;}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);}

/* Header */
.header{padding:18px 24px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.header-left h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;}
.header-left p{color:var(--muted);font-size:.88rem;line-height:1.5;}
.header-right{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.btn-theme{background:var(--input-bg);border:1.5px solid var(--border);color:var(--muted);border-radius:var(--radius-md);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--motion-fast);white-space:nowrap;font-family:inherit;}
.btn-theme:hover{border-color:var(--accent);color:var(--text);}
a.btn-theme{text-decoration:none;display:inline-flex;align-items:center;}

/* Controls bar */
.controls-bar{padding:10px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:50;}
.ctrl-row{display:flex;align-items:center;gap:8px;}
.controls-label{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap;}
.ctrl-select{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;font-family:inherit;padding:6px 10px;outline:none;cursor:pointer;transition:border-color var(--motion-fast);}
.ctrl-select:focus{border-color:var(--accent);}

/* Segmented controls */
.seg-group{display:inline-flex;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
.seg-btn{background:transparent;border:none;padding:7px 14px;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--motion-fast);font-family:inherit;white-space:nowrap;}
.seg-btn.active{background:var(--accent);color:#fff;}
.seg-btn:not(.active):hover{color:var(--text);}

/* Year input */
.year-wrap{display:flex;align-items:center;gap:8px;}
.year-input{width:4.5em;background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums;padding:6px 8px;text-align:center;outline:none;}
.year-input:focus{border-color:var(--accent);}
.year-hint{font-size:.75rem;color:var(--muted);}

/* Table */
.sens-wrap{overflow-x:auto;padding-bottom:2px;}
table.dt{width:100%;border-collapse:collapse;font-size:.84rem;}
.dt th{padding:10px 11px;background:var(--input-bg);border:1px solid var(--border);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;text-align:left;vertical-align:bottom;}
.dt td{padding:7px 9px;border:1px solid var(--border);vertical-align:middle;}
.dt .num-td{font-family:'DM Mono',monospace;text-align:right;}
.dt .label-td{font-weight:600;min-width:200px;white-space:nowrap;color:var(--text);background:var(--input-bg);}
.dt .unit-td{min-width:90px;white-space:nowrap;color:var(--muted);background:var(--input-bg);font-family:'DM Mono',monospace;font-size:.74rem;}
.dt .unit-th{min-width:90px;}
.dt .scen-th{min-width:185px;text-align:center;}
.dt .scen-td{min-width:185px;}

/* Scenario header */
.scen-header-cell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;}
.scen-name-input{background:transparent;border:none;border-bottom:1.5px solid var(--border);color:var(--text);font-weight:700;font-size:.85rem;width:100%;outline:none;padding:2px 0;font-family:inherit;}
.scen-name-input:focus{border-bottom-color:var(--accent);}
.scen-header-actions{display:flex;align-items:center;gap:6px;width:100%;}
.scen-header-sub{font-size:.7rem;color:var(--muted);font-family:'DM Mono',monospace;}

/* Buttons */
.btn-add{background:transparent;border:1px dashed var(--border);border-radius:8px;padding:5px 13px;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all 140ms;font-family:inherit;white-space:nowrap;}
.btn-add:hover{border-color:var(--accent-strong);color:var(--accent-strong);}
.btn-remove{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:2px 5px;border-radius:5px;transition:all 130ms;font-family:inherit;line-height:1;}
.btn-remove:hover{background:var(--data-neg-bg);color:var(--data-neg-em);}
.btn-dupe{background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:.72rem;padding:2px 6px;border-radius:5px;transition:all 130ms;font-family:inherit;line-height:1.4;}
.btn-dupe:hover{border-color:var(--accent);color:var(--accent);}

/* Group separator row */
.dt tr.group-sep-tr td{background:var(--bg);color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:8px 11px 5px;border-top:2px solid var(--border);border-bottom:none;}

/* Output separator */
.dt tr.sep-tr td{padding:0;border-top:2px dashed var(--accent);border-bottom:none;border-left:1px solid var(--border);border-right:1px solid var(--border);height:2px;}

/* Subgroup rows */
.dt tr.subgroup-row td{background:var(--panel-raised);}
.dt tr.subgroup-row td.label-td{padding-left:26px;}
.dt tr.subgroup-first td{border-top:1.5px solid var(--accent);}
.dt tr.subgroup-last td{border-bottom:1.5px solid var(--accent);}
.ongoing-unit{display:block;font-size:.68rem;color:var(--muted);font-family:'DM Mono',monospace;margin-top:2px;}

/* Output rows */
.dt tr.out-own td{background:var(--data-pos-bg);font-weight:700;}
.dt tr.out-rent td{background:rgba(143,205,189,.18);font-weight:700;}
body.light .dt tr.out-rent td{background:#E8F7F3;}
.dt tr.out-delta td{background:var(--input-bg);font-weight:700;}
.pos-val{color:var(--data-pos-em);}
.neg-val{color:var(--data-neg-em);}

/* Param inputs */
.param-input{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums;padding:5px 8px;width:100%;min-width:100px;transition:border-color var(--motion-fast);}
.param-input:focus{outline:none;border-color:var(--accent);}
.param-select{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;font-family:inherit;padding:5px 8px;width:100%;cursor:pointer;outline:none;transition:border-color var(--motion-fast);}
.param-select:focus{border-color:var(--accent);}
.param-bool-wrap{display:flex;align-items:center;gap:7px;padding:3px 0;}
.param-bool{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;}
.param-bool-label{font-size:.78rem;color:var(--muted);}

.tip-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--input-bg);border:1px solid var(--border);font-size:.65rem;color:var(--muted);flex-shrink:0;cursor:help;margin-left:3px;vertical-align:middle;}
.tip-icon:hover{border-color:var(--accent);color:var(--accent);}

/* Section mode rows (Simple/Detailed toggles that apply to all scenarios) */
.dt tr.mode-tr td.mode-td{background:var(--panel-raised);text-align:left;}
.mode-seg{vertical-align:middle;}
.mode-seg .seg-btn{padding:5px 16px;font-size:.76rem;}

/* Detailed cells: mortgage rate periods & cost items */
.dt td.detail-td{background:var(--panel-raised);}
.dcell{display:flex;flex-direction:column;gap:5px;}
.dcell-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.dcell-yrs{font-size:.72rem;font-weight:700;color:var(--muted);font-family:'DM Mono',monospace;white-space:nowrap;}
.dcell-beyond{opacity:.45;}
.mini-input{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.78rem;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;padding:4px 6px;width:4.2em;text-align:right;outline:none;transition:border-color var(--motion-fast);}
.mini-input:focus{border-color:var(--accent);}
.mini-input.mini-amt{flex:1;min-width:5.5em;width:auto;}
.mini-select{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.74rem;font-family:inherit;padding:4px 5px;cursor:pointer;outline:none;max-width:11em;transition:border-color var(--motion-fast);}
.mini-select:focus{border-color:var(--accent);}
.mini-unit{font-size:.7rem;color:var(--muted);white-space:nowrap;}
.rp-dash{color:var(--muted);font-size:.78rem;}

/* Inactive (unused) cells — darkened to preserve table integrity while showing
   which inputs are actually considered for each scenario */
.dt td.inactive-td{
  background:repeating-linear-gradient(45deg, var(--bg) 0 7px, var(--input-bg) 7px 14px);
  opacity:.55;
  cursor:not-allowed;
}

/* Per-scenario add buttons for periods / cost items */
.dt td.add-td{background:var(--panel-raised);}
.add-td .btn-add{width:100%;font-size:.74rem;padding:4px 8px;}

/* ── Per-scenario action row (download Own/Rent cashflow + chart) ── */
tr.out-actions td.label-td{font-weight:600;color:var(--muted);}
.action-td{text-align:center;}
.scen-actions{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;}
.btn-scen-action{
  background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:.9rem;line-height:1;padding:5px 8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:1px;transition:border-color var(--motion-fast),background var(--motion-fast);
}
.btn-scen-action:hover{border-color:var(--accent);background:rgba(139,184,248,.12);}
.btn-scen-action:active{transform:scale(.95);}
.btn-scen-action .ricon{margin-right:0;width:1.1em;height:1.1em;}

/* ── Scenario comparison chart popup ── */
.chart-modal-overlay{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(7,12,24,.62);backdrop-filter:blur(2px);
}
.chart-modal-overlay.open{display:flex;}
.chart-modal{
  position:relative;
  width:min(960px,100%);max-height:92vh;overflow:auto;
  padding:20px;box-shadow:0 18px 60px rgba(0,0,0,.45);
}
/* Close button pinned to the top-right corner of the popup */
.chart-modal-close{
  position:absolute;top:12px;right:12px;z-index:3;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);
  color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;font-family:inherit;
  transition:all var(--motion-fast);
}
.chart-modal-close:hover{border-color:var(--accent);color:var(--text);}
.chart-modal-close:active{transform:scale(.95);}
.chart-modal .chart-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding-right:42px;}
.chart-modal .chart-header h2{font-size:1.05rem;margin:0;}
.chart-modal .chart-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.chart-modal .graph-btn{
  background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);
  color:var(--muted);padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;
  transition:all var(--motion-fast);letter-spacing:.01em;
}
.chart-modal .graph-btn.active{border-color:var(--accent);color:var(--text);background:rgba(139,184,248,.12);}
.chart-modal .chart-export-btn{flex:0 0 auto;min-width:48px;padding:6px 10px;font-size:.68rem;line-height:1;white-space:nowrap;text-align:center;font-weight:600;}
.chart-modal .legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:.86rem;}
.chart-modal .legend-item{display:flex;align-items:center;gap:7px;}
.chart-modal .dot{width:11px;height:11px;border-radius:999px;flex-shrink:0;}
.chart-modal .hover-box{margin-top:10px;color:var(--muted);font-size:.84rem;min-height:20px;}

/* ── CSV action button group (⬆ CSV · ⬇ CSV · 📈 Compare) ── */
.controls-bar .csv-actions{margin-left:auto;gap:8px;flex-wrap:wrap;}

/* ── Global multi-scenario comparison chart ── */
.chart-modal .gc-toggle{opacity:.5;}
.chart-modal .gc-toggle.active{opacity:1;border-color:var(--accent);color:var(--text);background:rgba(139,184,248,.12);}
.gc-scenarios-wrap{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.gc-scenarios-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-top:5px;white-space:nowrap;}
.gc-scenarios{display:flex;gap:8px 14px;flex-wrap:wrap;flex:1;}
.gc-scen-item{display:inline-flex;align-items:center;gap:6px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:4px 9px;cursor:pointer;font-size:.82rem;}
.gc-scen-item:hover{border-color:var(--accent);}
.gc-include{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;}
.gc-color{width:24px;height:22px;border:1px solid var(--border);border-radius:5px;background:none;cursor:pointer;padding:0;flex-shrink:0;}
.gc-color::-webkit-color-swatch-wrapper{padding:2px;}
.gc-color::-webkit-color-swatch{border:none;border-radius:3px;}
.gc-scen-name{color:var(--text);font-weight:600;white-space:nowrap;}
.gc-line-hint{display:flex;align-items:center;gap:18px;font-size:.8rem;color:var(--muted);margin-bottom:10px;}
.gc-line-key{display:inline-flex;align-items:center;gap:8px;}
.gc-line-sample{display:inline-block;width:28px;height:0;border-top:2.5px solid var(--text);}
.gc-line-dotted{border-top-style:dotted;border-top-width:3px;}

/* Footer */
.page-footer{margin-top:18px;}

@media(max-width:600px){
  .container{padding:10px 12px;}
  .header{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;}
  .header-left h1{font-size:1.25rem;}
  .header-right{flex-wrap:nowrap;}
  .header-right .btn-theme{flex:1;text-align:center;justify-content:center;}
  .controls-bar{flex-direction:column;align-items:stretch;gap:10px;}
  .ctrl-row{justify-content:space-between;flex-wrap:wrap;}
  .controls-bar .csv-actions{margin-left:0!important;align-self:stretch;}
  .controls-bar .csv-actions .btn-theme{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:8px 6px;}
}