/* Borrowing Capacity — page-specific layer.
   Tokens and shared components come from ../dark.css, ../light.css, ../shared.css. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500;600&display=swap');

:root{ --input-bg:rgba(28,41,66,0.7); }

.container{max-width:1440px;}
.layout{grid-template-columns:380px 1fr;}
/* Height and the inner scroller come from shared.css (.controls:has(.ctrl-scroll)),
   which keeps the quick-start row and the tab bar pinned to the top of the card. */
.btn-back{text-decoration:none;display:inline-flex;align-items:center;}
h1{font-size:1.85rem;margin:0 0 4px;}

/* ── Quick Start scenarios ── */
.quick-start-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.quick-start-label{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.82rem;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.quick-start-label .tico{width:1.05em;height:1.05em;}
.quick-start-btns{display:flex;gap:6px;flex-wrap:wrap;}
.quick-start-btn{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--muted);padding:5px 11px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--motion-fast);white-space:nowrap;}
.quick-start-btn:hover{border-color:var(--accent);color:var(--text);}
.quick-start-btn.active{border-color:var(--accent2);color:var(--text);background:rgba(143,205,189,.15);}

/* ── Control panel extras ── */
.ctrl-tab{padding:10px 4px;font-size:.78rem;line-height:1.3;}
.ctrl-tabs.stacked .tico{width:1.45em;height:1.45em;}
/* Every panel is a stack of cards, so the first card needs no extra gap above
   the panel's own padding. */
.ctrl-panel>:first-child{margin-top:0;}
/* markFirstRows() in script.js marks the first row still showing inside each
   card. A hairline there would double the card's own border or underline the
   group title, so it is dropped. Kept at the same specificity as the
   .field-group rules in shared.css, and loaded after them, so it wins. */
.field-group>.rule-off,.mode-block>.rule-off,.ctrl-panel>.rule-off{border-top:none;}
.field-group>.slider-block.rule-off{padding-top:4px;}
.inline-row{display:flex;gap:8px;align-items:center;}
.inline-row .grow{flex:1;min-width:0;}
.shade-wrap{flex:0 0 92px;width:92px;}
.shade-wrap .currency-input{padding-left:8px;padding-right:28px;text-align:right;}
.shade-wrap .suffix{right:8px;}
.currency-wrap .suffix{font-size:.8rem;}
/* shared.css ships .toggle-switch / .toggle-track / .toggle-knob but not the
   row that holds them, which the design reference documents. The switch is a
   <label>, so it only takes a width once this row makes it a flex item. */
.toggle-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);}
.toggle-label{font-weight:700;font-size:.88rem;flex:1;}
.ctrl-panel>.help:first-child{margin:0 0 4px;}

/* ── Mode switches: Simple vs Detailed, Employee vs Self-employed ── */
.mode-block{border:1px solid var(--border);border-radius:12px;padding:2px 12px 6px;background:var(--bg-subtle);}
.mode-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;}
.mode-row+.mode-row{border-top:1px solid var(--border);}
.mode-label{font-weight:700;font-size:.88rem;color:var(--text);flex:1 0 auto;display:inline-flex;align-items:center;gap:5px;}
.seg-group{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px;}
.seg-btn{background:transparent;border:none;border-radius:7px;padding:5px 12px;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--motion-fast);font-family:inherit;white-space:nowrap;flex-shrink:0;}
.seg-btn.active{background:var(--accent-strong);color:var(--text-inv);box-shadow:var(--shadow-sm);}
.seg-btn:hover:not(.active){color:var(--text);}

/* ── Checklists: reveal a group only once the user says they have it ── */
.chk-block{border:1px solid var(--border);border-radius:12px;padding:10px 12px 8px;margin-top:14px;background:var(--bg-subtle);}
.chk-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin-bottom:4px;}
.chk-row{display:flex;align-items:flex-start;gap:9px;padding:5px 0;cursor:pointer;font-size:.84rem;line-height:1.35;color:var(--text);}
.chk-row input{accent-color:var(--accent);width:15px;height:15px;margin:1px 0 0;flex-shrink:0;cursor:pointer;}
.chk-row:hover{color:var(--accent);}

/* ── KPI strip ── */
.metrics{grid-template-columns:repeat(3,1fr);}
.metric{padding:14px 16px;min-height:96px;}
.metric .label{display:flex;align-items:center;gap:5px;}
.metric .value{font-size:1.35rem;}
.metric .value.small{font-size:1.02rem;letter-spacing:0;}
.metric .sub{color:var(--muted);font-size:.78rem;margin-top:5px;line-height:1.35;}
.metric .value.pos{color:var(--data-pos-em);}
.metric .value.neg{color:var(--data-neg-em);}

/* ── Chart ──
   The export row itself — .chart-head, .detail-head, .btn-cluster, .btn-sm and
   their phone layout — is shared.css's, so this tool's cluster is the one
   every other tool carries. */
.chart-card{padding:20px;margin-bottom:18px;}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 14px;font-size:.84rem;}
.legend-item{display:flex;align-items:center;gap:7px;cursor:pointer;transition:opacity .15s;}
.legend-item.hidden{opacity:.35;}
.canvas-wrap{height:430px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card-bg);}
.hover-box{margin-top:10px;color:var(--muted);font-size:.84rem;min-height:22px;line-height:1.5;}

/* ── Detail tables ── */
.detail-section{padding:20px;margin-bottom:18px;}
.detail-head{margin-bottom:10px;}
table{width:100%;border-collapse:collapse;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;font-size:.85rem;}
th,td{padding:9px 8px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;}
th:first-child,td:first-child{text-align:left;white-space:normal;font-family:'DM Sans',sans-serif;}
th{color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
/* shared.css caps .table-wrap at 400px with an inner scroll. These tables are
   bounded by the number of input rows and their closing total matters, so they
   scroll with the page instead of hiding their last row in a clipped box. */
.table-wrap{max-height:none;overflow-y:visible;overflow-x:auto;}
tr:hover td{background:rgba(141,187,255,.05);}
body.light tr:hover td{background:rgba(90,145,232,.05);}
tr.total td{font-weight:800;border-top:1.5px solid var(--border);}
tr.bind td{background:rgba(141,187,255,.10);}
body.light tr.bind td{background:rgba(90,145,232,.10);}
tr.bind:hover td{background:rgba(141,187,255,.16);}
body.light tr.bind:hover td{background:rgba(90,145,232,.16);}
td.neg{color:var(--data-neg-em);}
td.pos{color:var(--data-pos-em);}
td.note{font-family:'DM Sans',sans-serif;color:var(--muted);font-size:.8rem;white-space:normal;text-align:left;}
.badge{border-radius:var(--radius-pill);padding:2px 9px;font-size:.72rem;font-weight:700;display:inline-block;font-family:'DM Sans',sans-serif;}

/* ── Banners ── */
.warning{margin:0 18px 14px;}
.warning p{margin:0;color:inherit;line-height:inherit;}
.warning ul{margin:0;padding-left:17px;}
.warning li+li{margin-top:5px;}
.page-footer{max-width:1440px;margin:0 auto;padding:0 24px 24px;}

@media(max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .controls{position:static;max-height:none;}
  .metrics{grid-template-columns:repeat(2,1fr);}
  .canvas-wrap{height:360px;}
}
@media(max-width:600px){
  h1{font-size:1.35rem;}
  .container{padding:10px;}
  .page-footer{padding:0 10px 16px;}
  .metrics{grid-template-columns:1fr;}
  .canvas-wrap{height:300px;}
  .btn-row{flex-direction:column;}
  .ctrl-tab{font-size:.7rem;}
}

/* ── Redesign: shared skeleton fit ── */
/* Column heads over the income streams: the amount a year, then the share a
   lender counts. Same widths as .inline-row below them. */
.stream-head{display:flex;gap:8px;padding:2px 0 4px;color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.stream-head span:first-child{flex:1;}
.stream-head span:last-child{flex:0 0 92px;text-align:right;}
/* A status that is neither good nor bad: there is room left under this cap. */
.badge-muted{background:var(--bg-subtle);color:var(--muted);border:1px solid var(--border);}
.detail-section .unit-note{margin:-2px 0 10px;}
.detail-section>h2+.unit-note{margin-top:-4px;}
.verdict{margin-bottom:18px;}
.assumes-card{margin-bottom:18px;}