
:root{
  /* The app's own color names, used by every component and by the charts drawn in JS
     (results.js, montecarlo.js). Values match the landing page (css/landing.css):
     navy-black text, soft blue-gray rules, brand navy from the logo. */
  --ink:#152238; --ink-soft:#43506a;
  --paper:#fff; --paper-raised:#f7f9fc;
  --canvas:#f5f8fc;               /* page background behind the white cards */
  --card:#fff;
  --rule:#e2e8f0; --rule-soft:#edf1f6;
  --rg:#0d6efd; --rg-soft:#cfe2ff;
  --rm:#198754; --rm-soft:#d1e7dd;
  --cash:#0dcaf0;
  --muted:#6b7588; --danger:#dc3545; --good:#198754;
  /* brand navy from the logo, shared with the landing page */
  --brand:#1f3a5f; --brand-2:#2f5d92; --brand-soft:#e8eff8;
  --c-lifestyle:#198754; --c-discretionary:#0d6efd; --c-family:#6f42c1; --c-philanthropy:#fd7e14;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(21,34,56,.04), 0 4px 16px -8px rgba(21,34,56,.12);
  --shadow:0 18px 50px -18px rgba(21,34,56,.28);
  --focus-ring:0 0 0 4px rgba(47,93,146,.15);
}
:root{ --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--canvas); color:var(--ink); font-family:var(--bs-font-sans-serif); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased;}
/* Inter with tabular figures keeps numbers lined up in stats and inputs; the dense
   tables keep the monospace font. */
.tnum{font-variant-numeric:tabular-nums;}

.wrap{max-width:1360px; margin:0 auto; padding:44px 36px 120px;}
.app-shell{display:flex; align-items:stretch; min-height:calc(100vh - 68px);}
.sidebar{width:240px; flex:0 0 240px; background:var(--card); border-right:1px solid var(--rule);}
.sidebar:empty{display:none;}
.sidebar-backdrop{display:none;}
@media (max-width: 991.98px){
  .sidebar:not(:empty){
    position:fixed; top:0; left:0; height:100vh; z-index:1045;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:none;
  }
  .sidebar.show{transform:translateX(0); box-shadow:var(--shadow);}
  .sidebar-backdrop.show{
    display:block; position:fixed; inset:0; background:rgba(21,34,56,0.4); z-index:1044;
  }
}
.sidebar-inner{position:sticky; top:0; max-height:100vh; overflow-y:auto;}
.sidebar .nav-link{color:var(--ink-soft); border-radius:var(--radius-sm); font-size:15px; font-weight:500; padding:8px 12px; margin-bottom:2px; transition:background .15s, color .15s;}
.sidebar .nav-link:hover{color:var(--brand); background:var(--brand-soft);}
.sidebar .nav-link.active{color:var(--brand); font-weight:600; background:var(--brand-soft);}
.sidebar hr{border-color:var(--rule); opacity:1;}
.dash-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-top:28px;}
.dash-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm);}
.dash-card i{display:block; width:12px; height:12px; border-radius:50%; margin-bottom:14px;}
.dash-card-label{font-family:var(--bs-font-sans-serif); font-size:13px; color:var(--muted); margin-bottom:4px; font-weight:500;}
.dash-card-val{font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:21px; color:var(--ink); font-weight:700; letter-spacing:-.01em;}
.app-main{flex:1 1 auto; min-width:0;}
.app-main .wrap{margin:0; max-width:none;}
.page-col{max-width:880px; margin:0 auto;}
.view{display:none;}

h1.page-title{font-family:var(--bs-font-sans-serif); font-weight:800; font-size:36px; margin:0 0 8px; letter-spacing:-.025em; color:var(--ink);}
.page-sub{color:var(--ink-soft); font-size:17px; margin:0 0 32px; max-width:600px;}
.methodology-toc{display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; margin:0 0 40px; padding:22px 26px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.methodology-toc a{font-family:var(--bs-font-sans-serif); font-size:14.5px; color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted transparent;}
@media (max-width: 767.98px){
  .methodology-toc{grid-template-columns:1fr;}
}
.methodology-toc a:hover{color:var(--brand); border-bottom-color:var(--rule);}
.method-section{margin:0 0 40px; padding-top:8px; scroll-margin-top:20px;}
.method-section h2{font-family:var(--bs-font-sans-serif); font-weight:700; letter-spacing:-.01em; font-size:21px; color:var(--ink); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--rule);}
.method-section p{font-size:15.5px; line-height:1.65; color:var(--ink); margin:0 0 14px;}
.method-section ul{margin:0 0 14px; padding-left:22px;}
.method-section li{font-size:15.5px; line-height:1.65; color:var(--ink); margin-bottom:8px;}
.method-section code{font-family:var(--bs-font-monospace); font-size:13.5px; background:var(--brand-soft); color:var(--brand); padding:1px 6px; border-radius:5px;}
section.block{margin-top:56px;}
.block-head{display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--rule); padding-bottom:12px; margin-bottom:22px;}
.block-num{font-family:var(--bs-font-sans-serif); font-style:italic; font-weight:600; font-size:20px; color:var(--brand-2); min-width:20px;}
.block-head h2{font-family:var(--bs-font-sans-serif); font-weight:700; letter-spacing:-.02em; font-size:25px; margin:0; color:var(--ink);}
.block-note{color:var(--muted); font-size:15.5px; max-width:640px; margin:-10px 0 22px;}

.field{display:flex; flex-direction:column; gap:6px;}
.field-check{justify-content:center;}
.check-label{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); cursor:pointer;}
.check-label input[type="checkbox"]{width:16px; height:16px; cursor:pointer; accent-color:var(--brand);}
.radio-row input[type="radio"]{accent-color:var(--brand);}
.field label{font-size:13.5px; color:var(--ink-soft); font-weight:600; line-height:1.3; min-height:2.4em; display:flex; align-items:flex-end;}
.field .hint{font-size:12.5px; color:var(--muted);}
input[type=number], input[type=text], input[type=date], input[type=email], input[type=password], select{
  font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:16px; color:var(--ink);
  background:var(--card); border:1.5px solid #d5dde8; border-radius:var(--radius-sm); padding:9px 12px; outline:none; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input[type=number]:hover, input[type=text]:hover, input[type=date]:hover, select:hover{border-color:#b9c6d8;}
input:focus, select:focus{border-color:var(--brand-2); box-shadow:var(--focus-ring);}
select{font-family:var(--bs-font-sans-serif); font-size:15.5px;}
.assumptions{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; background:var(--card); border:1px solid var(--rule); padding:24px 26px; border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.composition-note{margin-top:6px; font-size:13.5px; font-family:var(--bs-font-sans-serif) !important; color:var(--ink-soft); padding:6px 10px !important;}
.composition-note::placeholder{color:var(--muted); font-style:italic;}
.readonly-note{font-family:var(--bs-font-monospace); font-size:15px; color:var(--ink-soft); padding:9px 12px; background:var(--paper-raised); border:1.5px dashed var(--rule); border-radius:var(--radius-sm);}

.btn{display:inline-flex; align-items:center; gap:8px; border:1.5px solid #c7d4e6; color:var(--brand); background:var(--card); padding:10px 20px; border-radius:999px; font-family:var(--bs-font-sans-serif); font-size:15px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;}
.btn:hover{border-color:var(--brand); background:var(--brand-soft); color:var(--brand);}
.btn:active{transform:translateY(1px);}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 8px 20px -10px rgba(31,58,95,.7);}
.btn.primary:hover{background:var(--brand-2); border-color:var(--brand-2); color:#fff;}
.btn.small{padding:6px 14px; font-size:13.5px;}
.btn.danger{border-color:#f1c3c8; color:var(--danger);}
.btn.danger:hover{border-color:var(--danger); background:#fdecee; color:var(--danger);}
.sidebar-toggle-btn{display:inline-flex; align-items:center; justify-content:center; border:none; background:none; color:var(--brand); font-size:20px; line-height:1; padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer;}
.sidebar-toggle-btn:hover, .sidebar-toggle-btn:focus-visible{background:var(--brand-soft);}

.client-table{width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;}
.client-table th{text-align:left; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:14px 0 12px; border-bottom:1px solid var(--rule); background:var(--paper-raised);}
.client-table td{padding:16px 0; border-bottom:1px solid var(--rule-soft); vertical-align:middle;}
.client-table th:first-child, .client-table td:first-child{padding-left:22px;}
.client-table th:last-child, .client-table td:last-child{padding-right:22px; text-align:right;}
.client-table tr:last-child td{border-bottom:none;}
.client-table tbody tr:hover td{background:var(--paper-raised);}
@media (max-width: 767.98px){
  /* Below this width the table reflows into a stacked card per client, rather
     than trying to scroll a cramped row horizontally: column headers don't
     mean anything once there's only one column, so they're hidden, and each
     row becomes its own block with a single divider -- the per-cell divider
     is turned off in favor of that one divider per client. */
  .client-table, .client-table thead, .client-table tbody, .client-table th, .client-table td, .client-table tr{
    display:block;
  }
  .client-table thead{display:none;}
  .client-table tr{border-bottom:1px solid var(--rule); padding:16px 18px;}
  .client-table tr:last-child{border-bottom:none;}
  .client-table td, .client-table td:first-child, .client-table td:last-child{padding:2px 0; border-bottom:none; text-align:left;}
  .client-table td:last-child{display:flex; gap:10px; margin-top:12px;}
}
.client-name{font-family:var(--bs-font-sans-serif); font-size:17.5px; font-weight:600; color:var(--ink); cursor:pointer;}
.client-name:hover{color:var(--brand-2);}
.client-meta{font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:14.5px; color:var(--ink-soft);}
.badge{display:inline-block; font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px;}
.badge.funded{background:#e3f4ea; color:var(--good);}
.badge.underfunded{background:#fbe7e9; color:var(--danger);}
.badge.neutral{background:var(--rule-soft); color:var(--ink-soft);}
.empty-state{border:1.5px dashed #cfd9e6; border-radius:var(--radius); padding:36px 24px; text-align:center; color:var(--muted); margin-top:8px; font-size:15.5px; background:rgba(255,255,255,.6);}

.form-card{max-width:560px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:30px 30px 26px; box-shadow:var(--shadow-sm);}
/* The New Client form's title/subtitle otherwise span the full page-col width
   while the (narrower) card beneath them is centered within it -- scoped here
   rather than changing .page-title/.page-sub globally, since every other page
   using those classes has full-width content where that's the correct look. */
#view-newclient .page-title, #view-newclient .page-sub{max-width:560px; margin-left:auto; margin-right:auto;}
.form-card .field{margin-bottom:20px;}
.radio-row{display:flex; gap:18px; margin-bottom:10px;}
.radio-row label{display:flex; align-items:center; gap:6px; font-size:15px; color:var(--ink-soft); cursor:pointer; font-weight:500;}

.client-banner{border-bottom:1px solid var(--rule); padding-bottom:18px; margin-bottom:4px;}
.client-banner h1{margin:0 0 6px;}
.client-banner .meta{font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:14.5px; color:var(--muted);}

.subtabs{display:flex; gap:26px; border-bottom:1px solid var(--rule); margin:22px 0 28px;}
.subtabs button{background:none; border:none; font-family:var(--bs-font-sans-serif); font-size:15px; font-weight:500; color:var(--ink-soft); padding:0 0 11px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s;}
.subtabs button:hover{color:var(--brand);}
.subtabs button.active{color:var(--brand); border-bottom-color:var(--brand-2); font-weight:600;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.result-subtabs{display:flex; gap:26px; border-bottom:1px solid var(--rule); margin:8px 0 32px;}
.result-subtabs button{background:none; border:none; font-family:var(--bs-font-sans-serif); font-size:15px; font-weight:500; color:var(--ink-soft); padding:0 0 11px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s;}
.result-subtabs button:hover{color:var(--brand);}
.result-subtabs button.active{color:var(--brand); border-bottom-color:var(--brand-2); font-weight:600;}
.result-tab-panel{display:none;}
.result-tab-panel.active{display:block;}

.assets-card{max-width:420px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm);}

.subsection-head{margin-bottom:4px;}
.subsection-head h3{font-family:var(--bs-font-sans-serif); font-weight:700; letter-spacing:-.015em; font-size:22px; margin:0;}

.asset-row{display:grid; grid-template-columns:2fr 1fr auto; gap:14px; align-items:end; padding:16px 0; border-bottom:1px solid var(--rule-soft);}
.asset-row:first-child{padding-top:0;}
/* asset accounts have a fourth column (account type); liabilities reuse .asset-row without it */
@media (min-width: 768px){ .asset-row:has(select){grid-template-columns:2fr 1fr 1fr auto;} }
.asset-row .remove-btn, .income-row .remove-btn{margin-bottom:6px;}

.income-row{display:grid; grid-template-columns:1.6fr 1fr 0.7fr 0.7fr auto; gap:14px; align-items:end; padding:16px 0; border-bottom:1px solid var(--rule-soft);}
.income-row:first-child{padding-top:0;}
@media (max-width: 767.98px){
  .asset-row{grid-template-columns:1fr; gap:8px;}
  .income-row{grid-template-columns:1fr; gap:8px;}
  .asset-row .remove-btn, .income-row .remove-btn{justify-self:start;}
}

.coverage-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:22px 24px; margin-bottom:28px; box-shadow:var(--shadow-sm);}
.coverage-card h4{font-family:var(--bs-font-sans-serif); font-weight:700; font-size:18px; margin:0 0 4px;}
.coverage-axis{display:flex; justify-content:space-between; font-family:var(--bs-font-monospace); font-size:12.5px; color:var(--muted); margin:14px 0 6px;}
.coverage-row{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.coverage-row-label{width:150px; flex:none; font-size:14px; color:var(--ink-soft); font-family:var(--bs-font-sans-serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.coverage-strip{display:flex; gap:1px; flex:1;}
.coverage-cell{height:16px; flex:1 0 4px; min-width:3px; border-radius:2px; background:var(--rule-soft);}
.coverage-warnings{margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-soft);}
.coverage-warnings ul{margin:0; padding-left:18px; font-size:14.5px;}
.coverage-warnings li{margin-bottom:6px;}
.coverage-warnings li.warn{color:var(--danger);}
.coverage-warnings li.ok{color:var(--good);}

.cat-section{margin-bottom:36px;}
.cat-section-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.cat-section-head h3{font-family:var(--bs-font-sans-serif); font-weight:700; letter-spacing:-.015em; font-size:21px; margin:0;}
.cat-section .btn.small{margin-top:2px;}

.goal{border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:16px; background:var(--card); overflow:hidden; box-shadow:var(--shadow-sm);}
.goal-top-row{display:flex; justify-content:space-between; align-items:center; padding:16px 20px 0;}
.goal-head{display:flex; align-items:center; gap:10px;}
.cat-chip{width:10px; height:10px; border-radius:50%; flex:none;}
.goal-name-input{width:280px; font-family:var(--bs-font-sans-serif); font-size:16px; font-weight:600; color:var(--ink); border:1.5px solid transparent; background:transparent; border-radius:var(--radius-sm); padding:7px 10px;}
@media (max-width: 767.98px){
  .goal-top-row{flex-wrap:wrap; gap:10px;}
  .goal-head{flex:1 1 auto; min-width:0;}
  .goal-name-input{width:100%; min-width:0;}
}
.goal-name-input::placeholder{color:var(--muted); font-weight:500; font-style:italic;}
.goal-name-input:hover{border-color:#d5dde8;}
.goal-name-input:focus{background:var(--card);}
.goal-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px 20px; padding:14px 20px 18px;}
.remove-btn{background:none; border:1.5px solid var(--rule); color:var(--muted); font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; cursor:pointer; font-family:var(--bs-font-sans-serif); transition:border-color .15s, color .15s, background .15s;}
.remove-btn:hover{border-color:#f1c3c8; background:#fdecee; color:var(--danger);}
.goal-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--rule-soft); background:var(--paper-raised);}
.goal-out > div{padding:14px 20px; border-right:1px solid var(--rule-soft);}
.goal-out > div:last-child{border-right:none;}
.goal-out .num{font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:18.5px; font-weight:700; letter-spacing:-.01em;}
.goal-out .lbl{font-size:12.5px; color:var(--muted); margin-top:2px;}
.funded{color:var(--good);}
.underfunded{color:var(--danger);}
.ladder-strip{display:flex; gap:1px; padding:14px 20px 0; flex-wrap:wrap;}
.ladder-cell{height:20px; flex:1 0 8px; min-width:8px; border-radius:2px;}
.ladder-legend{display:flex; gap:16px; padding:8px 20px 16px; font-size:13px; color:var(--muted); flex-wrap:wrap;}
.ladder-legend span{display:inline-flex; align-items:center; gap:5px;}
.ladder-legend i{width:9px; height:9px; display:inline-block; border-radius:2px;}
.add-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}

.chart-wrap{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:24px 26px 20px; box-shadow:var(--shadow-sm);}
.legend{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:14px; font-size:14px; color:var(--ink-soft);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.swatch{width:14px; height:3px; display:inline-block; border-radius:2px;}
.dot-swatch{width:9px; height:9px; border-radius:50%; display:inline-block;}
.summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.stat-row{display:flex; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.stat{display:inline-block; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-sm); min-width:220px;}
.stat-row > .stat{flex:1 1 180px; min-width:180px;}
.stat .num{font-family:var(--bs-font-sans-serif); font-variant-numeric:tabular-nums; font-size:28px; font-weight:800; letter-spacing:-.02em;}
.stat .lbl{font-size:13.5px; color:var(--muted); margin-top:2px; max-width:220px;}
.bar-outer{height:34px; width:100%; background:var(--rule-soft); border-radius:8px; overflow:hidden; display:flex;}
.donut-wrap{display:flex; align-items:center; gap:24px; margin-bottom:8px;}
.allocation-centered{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin:40px 0 44px; padding:36px 24px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.alloc-title{font-family:var(--bs-font-sans-serif); font-size:16px; font-weight:700; color:var(--ink); margin:0; letter-spacing:-.01em;}
.allocation-centered .bar-caption{justify-content:center; gap:28px; font-size:15.5px;}
.allocation-centered .cat-bars{width:100%; max-width:640px; margin-top:10px;}
.funding-table-wrap{max-width:760px; margin:0 auto; overflow-x:auto; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:18px 24px 8px; box-shadow:var(--shadow-sm);}
.funding-table tr:last-child td{border-bottom:none;}
.mc-table-wrap{max-height:420px; overflow-y:auto; overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); margin-top:18px; background:var(--card); box-shadow:var(--shadow-sm);}
.mc-table-wrap table{width:100%;}
.mc-table-wrap thead th{position:sticky; top:0; background:var(--paper-raised); z-index:1; padding-top:10px;}
.mc-table-wrap .funding-table td, .mc-table-wrap .funding-table th{padding-left:16px; padding-right:16px;}

.cf-table-wrap{max-height:640px; overflow:auto; border:1px solid var(--rule); border-radius:var(--radius); margin-top:18px; background:var(--card); box-shadow:var(--shadow-sm);}
.cf-table{border-collapse:collapse; font-family:var(--bs-font-monospace); font-size:13.5px; white-space:nowrap;}
.cf-table th, .cf-table td{padding:8px 14px; text-align:right; border-bottom:1px solid var(--rule-soft);}
.cf-table th:first-child, .cf-table td:first-child{
  text-align:left; font-family:var(--bs-font-sans-serif); position:sticky; left:0; background:var(--paper); z-index:1;
  border-right:1px solid var(--rule); min-width:220px;
}
.cf-table thead th{position:sticky; top:0; background:var(--paper-raised); z-index:2; color:var(--ink-soft); font-weight:600;}
.cf-table thead th:first-child{z-index:3;}
.cf-table tr.cf-section td:first-child{font-weight:700; color:var(--brand); font-family:var(--bs-font-sans-serif); padding-top:16px;}
.cf-table tr.cf-item td:first-child{padding-left:26px; color:var(--ink-soft);}
.cf-table tr.cf-subtotal td{font-weight:600; border-top:1px solid var(--rule); background:var(--paper-raised);}
.cf-table tr.cf-subtotal td:first-child{background:var(--paper-raised);}
.cf-table tr.cf-boundary td{font-weight:700; background:var(--brand-soft); color:var(--brand); border-top:1px solid #c7d4e6; border-bottom:1px solid #c7d4e6;}
.cf-table tr.cf-boundary td:first-child{background:var(--brand-soft);}
.cf-dash{color:var(--muted);}
.minvol-compare{display:flex; gap:48px; margin-top:6px; max-width:760px; flex-wrap:wrap;}
.minvol-col{flex:1; min-width:260px;}
.minvol-col-head{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.bar-rm{background:var(--rm); height:100%;}
.bar-rg{background:var(--rg); height:100%;}
.bar-caption{display:flex; justify-content:space-between; font-family:var(--bs-font-monospace); font-size:14px; margin-top:8px; color:var(--ink-soft);}
.cat-bars{margin-top:26px;}
.cat-bar-row{margin-bottom:24px; text-align:left;}
.cat-bar-row.surplus-row{margin-top:20px; padding-top:20px; border-top:1.5px dashed #cfd9e6;}
.cat-bar-row-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:8px; font-size:15.5px;}
.cat-bar-row-head .cat-name{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600;}
.cat-bar-row-head .cat-name i{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;}
.cat-bar-row-head .amt{font-family:var(--bs-font-monospace); color:var(--ink-soft); white-space:nowrap;}
.cat-bar-track{height:14px; background:var(--rule-soft); border-radius:99px; overflow:hidden; display:flex;}
.cat-bar-split{display:flex; justify-content:space-between; font-family:var(--bs-font-monospace); font-size:13.5px; color:var(--muted); margin-top:6px;}
.funding-table{width:100%; border-collapse:collapse; font-size:15px;}
.funding-table th{text-align:left; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--rule);}
.funding-table td{padding:10px 0; border-bottom:1px solid var(--rule-soft); font-family:var(--bs-font-monospace);}
.funding-table td.name{font-family:var(--bs-font-sans-serif); font-weight:500; display:flex; align-items:center; gap:8px;}
.funding-table td.name i{width:8px; height:8px; border-radius:50%; display:inline-block;}

.save-flash{font-size:13.5px; font-weight:600; color:var(--good); font-family:var(--bs-font-sans-serif); opacity:0; transition:opacity .3s;}
.save-flash.show{opacity:1;}

.modal-overlay{position:fixed; inset:0; background:rgba(21,34,56,0.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.modal-overlay.show{display:flex;}
.modal-card{background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:30px 32px; max-width:440px; box-shadow:var(--shadow);}
.modal-card h3{font-family:var(--bs-font-sans-serif); font-weight:700; letter-spacing:-.015em; font-size:21px; margin:0 0 10px;}
.modal-card p{color:var(--ink-soft); font-size:15.5px; margin:0 0 24px; line-height:1.5;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end;}
footer{margin-top:64px; padding-top:20px; border-top:1px solid var(--rule); color:var(--muted); font-size:13.5px; max-width:660px;}

.storage-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); max-width:calc(100% - 32px); background:var(--danger); color:#fff; padding:12px 18px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:500; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .3s; z-index:1100;}
.storage-toast.show{opacity:1;}

/* ================= top bar (matches the landing page nav) ================= */
.topnav{position:sticky; top:0; z-index:1040; display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px; padding:0 28px; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--rule);}
.topnav .brand{display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--brand);}
.topnav .brand b{font-weight:700; font-size:20px; letter-spacing:-.02em;}
.topnav .brand span{color:var(--muted); font-size:13px; font-weight:500; margin-left:4px; padding-left:12px; border-left:1px solid var(--rule); white-space:nowrap;}
.topnav nav{display:flex; gap:6px; align-items:center;}
.topnav nav a{font-size:15px; font-weight:500; color:var(--ink-soft); text-decoration:none; cursor:pointer; padding:8px 14px; border-radius:999px; white-space:nowrap; transition:background .15s, color .15s;}
.topnav nav a:hover{color:var(--brand); background:var(--brand-soft);}
.topnav nav a.active{color:var(--brand); background:var(--brand-soft); font-weight:600;}
body.signed-out .topnav nav{display:none;}
body.signed-out .topnav .brand{pointer-events:none;}
@media (max-width: 767.98px){
  .topnav{height:58px; padding:0 10px; gap:6px;}
  .topnav .brand span, .topnav .brand b{display:none;}
  .topnav .brand img{width:26px; height:26px;}
  .topnav nav{gap:2px; overflow-x:auto; scrollbar-width:none;}
  .topnav nav a{font-size:12.5px; padding:6px 6px;}
  .sidebar-toggle-btn{padding:4px 6px;}
}
/* the sticky top bar is 68px tall: keep the sidebar and in-page jump links clear of it */
html{scroll-padding-top:84px;}
@media (min-width: 992px){ .sidebar-inner{top:68px; max-height:calc(100vh - 68px);} }

/* ================= sign in ================= */
body.signed-out{background:radial-gradient(900px 480px at 85% -10%, #dbe8f8 0%, transparent 60%), radial-gradient(700px 420px at -10% 10%, #e9f4ee 0%, transparent 60%), linear-gradient(180deg, #f7faff 0%, #eef4fb 100%) fixed; min-height:100vh;}
body.signed-out .topnav{background:rgba(255,255,255,.6); border-bottom-color:transparent;}
.auth-landscape{display:none;}
body.signed-out .auth-landscape{display:block; position:fixed; left:0; right:0; bottom:0; width:100%; height:240px; z-index:0; pointer-events:none;}
body.signed-out .app-shell{position:relative; z-index:1;}
#view-auth{padding:24px 0 260px;}
.auth-card{max-width:440px; margin:0 auto; background:var(--card); border:1px solid var(--rule); border-radius:20px; padding:40px 40px 32px; box-shadow:0 24px 60px -24px rgba(21,34,56,.35);}
.auth-logo{display:block; margin:0 auto 18px;}
.auth-title{font-size:28px; font-weight:800; letter-spacing:-.02em; text-align:center; color:var(--ink); margin:0;}
.auth-sub{font-size:15.5px; color:var(--ink-soft); text-align:center; margin:8px 0 28px;}
.auth-card .field{margin-bottom:18px;}
.auth-card .field label{min-height:0; font-size:14px; color:var(--ink);}
.auth-card input[type=email], .auth-card input[type=password]{padding:11px 14px;}
.auth-label-row{display:flex; justify-content:space-between; align-items:baseline;}
#view-auth .auth-label-row a{font-size:13.5px; font-weight:500; color:var(--brand-2); cursor:pointer; text-decoration:none;}
#view-auth .auth-label-row a:hover{text-decoration:underline;}
.auth-card .hint{line-height:1.45;}
.auth-msg{font-size:14px; color:var(--good); margin:0 0 10px; min-height:1.2em; text-align:center;}
.auth-msg.error{color:var(--danger);}
.btn.auth-submit{width:100%; justify-content:center; padding:13px 18px; font-size:16px;}
.btn.auth-submit:disabled{opacity:.6; cursor:wait;}
.auth-switch{display:flex; justify-content:center; margin:22px 0 0; padding-top:20px; border-top:1px solid var(--rule-soft); font-size:14.5px;}
#view-auth .auth-switch a{color:var(--ink-soft); cursor:pointer; text-decoration:none;}
.auth-switch a b{color:var(--brand-2); font-weight:600;}
.auth-switch a:hover b, .auth-switch a:hover{color:var(--brand);}
.auth-home{display:none; font-size:14.5px; font-weight:500; color:var(--ink-soft); text-decoration:none;}
.auth-home:hover{color:var(--brand);}
body.signed-out .topnav .auth-home{display:inline-block; padding:8px 14px; border-radius:999px;}
body.signed-out .topnav .auth-home:hover{background:var(--brand-soft);}
@media (max-width: 600px){
  #view-auth{padding:4px 0 180px;}
  .auth-card{padding:30px 22px 24px; border-radius:16px;}
  body.signed-out .auth-landscape{height:150px;}
}

/* ================= account menu (avatar + dropdown) ================= */
.topnav nav{margin-left:auto;}
.user-menu{position:relative; flex:none;}
body.signed-out .user-menu{display:none;}
.avatar-btn{width:38px; height:38px; border-radius:50%; border:0; padding:0; cursor:pointer; display:grid; place-items:center; background:linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; font-weight:700; font-size:16px; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #c7d4e6; transition:box-shadow .15s;}
.avatar-btn:hover, .avatar-btn[aria-expanded="true"]{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--brand-2);}
.avatar-btn:focus-visible{outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 5px var(--brand-2);}
.user-menu-panel{position:absolute; right:0; top:calc(100% + 10px); width:270px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px; z-index:1050;}
.user-menu-head{display:flex; align-items:center; gap:12px; padding:10px 10px 12px; margin-bottom:4px; border-bottom:1px solid var(--rule-soft);}
.avatar-lg{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; font-weight:700; font-size:17px;}
.user-menu-id{min-width:0; display:flex; flex-direction:column;}
.user-menu-id b{font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-menu-id span{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-menu-item{display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; text-align:left; padding:9px 10px; border-radius:var(--radius-sm); font-family:var(--bs-font-sans-serif); font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer;}
.user-menu-item svg{width:18px; height:18px; fill:none; stroke:var(--ink-soft); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.user-menu-item:hover, .user-menu-item:focus-visible{background:var(--brand-soft); color:var(--brand); outline:none;}
.user-menu-item:hover svg, .user-menu-item:focus-visible svg{stroke:var(--brand);}
.user-menu-divider{margin:6px 4px; border:0; border-top:1px solid var(--rule); opacity:1;}
@media (max-width: 767.98px){
  .avatar-btn{width:32px; height:32px; font-size:14px;}
  .user-menu-panel{position:fixed; right:10px; top:62px; width:min(270px, calc(100vw - 20px));}
}

/* ================= profile page ================= */
.profile-col{max-width:760px;}
.profile-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:26px 28px; margin-bottom:20px;}
.profile-card-head{margin-bottom:18px;}
.profile-card-head h2{font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0 0 4px; color:var(--ink);}
.profile-card-head p{font-size:14.5px; color:var(--muted); margin:0;}
.profile-card-head p b{color:var(--ink); font-weight:600;}
.profile-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
.profile-grid .span-2{grid-column:1 / -1;}
.profile-grid .field label{min-height:0;}
.profile-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px;}
.profile-msg{font-size:14px; color:var(--good); font-weight:500;}
.profile-msg.error{color:var(--danger);}
@media (max-width: 600px){
  .profile-card{padding:22px 18px;}
  .profile-grid{grid-template-columns:1fr;}
}

/* ================= workspace step buttons ================= */
.ws-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:32px; border-top:1px solid var(--rule); padding-top:24px;}
.ws-actions-right{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto;}
@media (max-width: 600px){
  /* phones: next step first and full width, then View results, then Back to clients */
  .ws-actions{flex-direction:column-reverse; align-items:stretch;}
  .ws-actions-right{flex-direction:column-reverse; margin-left:0;}
  .ws-actions .btn{justify-content:center;}
}
