/* Net Worth card additions and the Net Worth page (2026-09-25) — see js/24-net-worth.js */
.nw-group-title { margin:18px 0 6px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-teal-50); }
.nw-group-title span { margin-left:8px; font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--c-slate-60); }
.nw-hint { margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--c-slate-50); }
.nw-hint:empty { display:none; }
.nw-asset-rows { display:flex; flex-direction:column; gap:8px; }
.nw-asset-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr) 112px 34px; gap:8px; align-items:center; }
.nw-asset-row input, .nw-asset-row select { width:100%; min-height:40px; box-sizing:border-box; }
.nw-a-money, .nw-a-rate { position:relative; }
.nw-a-money i { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--c-slate-60); font-size:13px; }
.nw-a-money input { padding-left:22px !important; }
.nw-a-rate i { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--c-slate-60); font-size:12px; pointer-events:none; }
.nw-a-rate input { padding-right:42px !important; }
.nw-a-del { width:34px; height:34px; border:1px solid var(--c-gray-90); border-radius:50%; background:var(--c-gray-99); color:var(--c-slate-60); font-size:18px; line-height:1; cursor:pointer; }
.nw-a-del:hover { border-color:var(--c-red-50b); color:var(--c-red-50b); }
.nw-asset-add { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nw-asset-add .tx-btn { min-height:34px; padding:6px 12px; font-size:13px; }
.nw-open-btn { margin-top:12px; }
@media (max-width:700px){
  .nw-asset-row { grid-template-columns:1fr 1fr 34px; }
  .nw-asset-row .nw-a-name { grid-column:1 / 3; }
  .nw-asset-row .nw-a-kind { grid-column:1 / 3; }
  .nw-asset-row .nw-a-del { grid-column:3; grid-row:1; }
  .nw-asset-row .nw-a-money { grid-column:1; } /* 2026-10-14: it fell into the 34 px column */
  .nw-asset-row .nw-a-rate { grid-column:2 / 4; }
}

/* page */
#networthView .tx-empty { text-align:center; padding:44px 24px; }
#networthView .tx-empty strong { display:block; font-size:15px; color:var(--c-slate-25); margin-bottom:6px; }
#networthView .tx-empty p { margin:0 auto 16px; max-width:440px; font-size:13.5px; color:var(--c-slate-50); }
.nw-offnote { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 14px; padding:10px 14px; border:1px solid var(--c-sage-90); border-radius:12px; background:var(--c-gray-99); color:var(--c-sage-35); font-size:13.5px; }
.nw-offnote .tx-btn { min-height:34px; padding:6px 12px; font-size:13px; }
.nw-controls { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin:16px 0 10px; }
.nw-segs { display:inline-flex; padding:3px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); }
.nw-seg { min-height:34px; padding:6px 14px; border:0; border-radius:999px; background:transparent; color:var(--c-slate-45); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.nw-seg.is-on { background:var(--c-teal-50); color:var(--c-gray-99); }
.nw-seg:focus-visible { outline:2px solid var(--c-teal-50); outline-offset:2px; }
.nw-legend { margin-top:4px; }
.nw-legend span { display:inline-flex; align-items:center; }
.nw-lg-line { width:16px !important; height:2px !important; border-radius:1px !important; background:var(--c-slate-25); }
.nw-lg-dot { width:10px !important; height:10px !important; border-radius:50% !important; background:var(--c-gray-99); border:2px solid var(--c-slate-25); box-sizing:border-box; }
.nw-chart-wrap { position:relative; width:100%; overflow:hidden; }
.nw-chart-wrap > svg { display:block; width:100%; height:auto; }
.nw-cj { height:340px; }
@media (max-width:700px){ .nw-cj { height:270px; } }
.nw-legend .cfj-key i { margin-right:0; }
.nw-grid { stroke:var(--c-gray-95); stroke-width:1; }
.nw-zero { stroke:var(--c-slate-70); stroke-width:1; }
.nw-ax { font-size:11px; fill:var(--c-slate-60); font-variant-numeric:tabular-nums; }
.nw-ret { stroke:var(--c-slate-70); stroke-width:1; stroke-dasharray:3 3; }
.nw-ret-t { font-weight:700; }
.nw-line { fill:none; stroke:var(--c-slate-25); stroke-width:2; stroke-linejoin:round; pointer-events:none; }
.nw-logdot { fill:var(--c-gray-99); stroke:var(--c-slate-25); stroke-width:2; pointer-events:none; }
.nw-hdot { fill:var(--c-slate-25); stroke:var(--c-gray-99); stroke-width:2; pointer-events:none; }
.nw-sel { fill:none; stroke:var(--c-teal-50); stroke-width:1.5; rx:4; pointer-events:none; }
.nw-hit { cursor:pointer; }
.nw-tip { position:absolute; z-index:3; min-width:210px; padding:10px 12px; border:1px solid var(--c-gray-95); border-radius:12px; background:var(--c-gray-99); box-shadow:0 8px 24px rgba(var(--c-shadow-rgb), 0.12); font-size:12.5px; color:var(--c-slate-30); pointer-events:none; }
.nw-tip strong { display:block; margin-bottom:6px; font-size:13px; color:var(--c-blue-25); }
.nw-tip div { display:flex; align-items:center; gap:6px; padding:1px 0; }
.nw-tip div b { margin-left:auto; padding-left:12px; font-variant-numeric:tabular-nums; }
.nw-tip i { display:inline-block; width:9px; height:9px; border-radius:3px; }
.nw-tip .nw-tip-total { margin-top:4px; padding-top:5px; border-top:1px solid var(--c-gray-95); font-weight:800; }
.nw-yh { margin:0 0 4px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate-60); }
.nw-table { margin-top:12px; }
.nw-table summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--c-teal-50); }
.nw-table-scroll { overflow-x:auto; margin-top:8px; }
.nw-table table, .nw-log { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.nw-table th, .nw-table td, .nw-log th, .nw-log td { padding:6px 8px; border-bottom:1px solid var(--c-gray-95); text-align:right; white-space:nowrap; }
.nw-table th:first-child, .nw-table td:first-child, .nw-log th:first-child, .nw-log td:first-child, .nw-log td:nth-child(4), .nw-log th:nth-child(4) { text-align:left; }
.nw-table th, .nw-log th { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c-slate-60); }
.nw-table tr.is-sel td { background:var(--c-gray-99); }
.nw-log-now { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--c-sage-85b); border-radius:14px; background:var(--c-gray-99); }
.nw-log-now span { display:block; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--c-teal-50); }
.nw-log-now strong { display:block; font-size:22px; font-weight:800; color:var(--c-slate-25); font-variant-numeric:tabular-nums; }
.nw-log-now em { font-style:normal; font-size:12.5px; color:var(--c-slate-50); }
.nw-log-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 4px; font-size:13px; color:var(--c-slate-45); }
.nw-log-form label { display:inline-flex; align-items:center; gap:8px; }
.nw-log-form input { min-height:36px; padding:4px 10px; border:1px solid var(--c-gray-90); border-radius:8px; font:inherit; font-size:13px; }
.nw-log-form input[type=number] { width:150px; }
.nw-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.nw-up { color:var(--c-green-55); font-weight:700; }
.nw-down { color:var(--c-red-50b); font-weight:700; }
@media (max-width:700px){ .nw-controls { flex-direction:column; align-items:flex-start; } }
.nw-asset-row input, .nw-asset-row select { padding:8px 12px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--c-gray-99); color:var(--c-slate-25); font:inherit; font-size:14px; }
.nw-asset-row input:focus, .nw-asset-row select:focus { outline:2px solid var(--c-teal-50); outline-offset:1px; border-color:var(--c-teal-50); }
/* No spin buttons in the asset rows: in the narrow %/yr box they sat mid-field, and a click there stepped the value. */
.nw-asset-row input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.nw-asset-row input[type=number]::-webkit-outer-spin-button, .nw-asset-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Net Worth not on yet: three questions on the page (js/24 quickHtml, 2026-10-03) */
.nw-quick { margin:0 0 16px; padding:16px; border:1px solid var(--c-sage-90); border-radius:14px; background:var(--c-gray-99); color:var(--c-slate-30); }
.nw-q-h b { display:block; font-size:16px; }
.nw-q-h span { display:block; margin-top:2px; font-size:13.5px; color:var(--c-sage-35); }
.nw-q-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin-top:14px; font-size:14.5px; font-weight:700; }
.nw-q-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px 14px; margin-top:12px; }
.nw-q-grid[hidden] { display:none; }
.nw-q-f { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--c-slate-35); }
.nw-q-f em { font-style:normal; font-weight:500; color:var(--c-sage-35); }
.nw-q-in { display:flex; align-items:center; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); }
.nw-q-in i { padding:0 2px 0 10px; font-style:normal; color:var(--c-slate-55); }
.nw-q-in input { flex:1; min-width:0; min-height:42px; padding:8px 10px 8px 4px; border:0 !important; background:transparent !important; box-shadow:none !important; font:inherit; font-size:15px; }
.nw-q-note { margin:4px 0 0; font-size:13px; color:var(--c-sage-35); align-self:end; }
.nw-q-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; }
.nw-q-actions .nw-q-save { background:var(--c-teal-50); border-color:var(--c-teal-50); color:var(--c-gray-99); }
.nw-q-more { padding:0; border:0; background:none; font:inherit; font-size:13.5px; font-weight:700; color:var(--c-teal-50); text-decoration:underline; cursor:pointer; }
@media (max-width:600px){ .nw-q-actions .nw-q-save { width:100%; } }
.nw-q-in input::placeholder { color:var(--c-slate-65b); font-weight:400; opacity:1; }

/* 2026-10-04: after-tax net worth line */
.nw-line-at { stroke:var(--c-teal-50); stroke-dasharray:6 4; stroke-width:2; }
.nw-lg-at { background:none !important; height:0 !important; border-top:2px dashed var(--c-teal-50); }
.tx-insight .tx-btn { margin-top:8px; }
/* 2026-10-04: the empty log's hint ("No entries yet…") inherited the table's nowrap and made the page 699px wide on a
   phone (sideways scrolling for every new user). It wraps now. */
.nw-log td.nw-hint { white-space:normal !important; }
/* A mortgage without the home's value (2026-10-10) */
.nw-onnote .nw-homewarn { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; padding:12px 14px; border-radius:10px; background:var(--c-sand-99); border:1px solid var(--c-amber-90b); color:var(--c-amber-35); }
.nw-homewarn p { flex-basis:100%; margin:0; font-size:13.5px; line-height:1.5; }
.nw-homewarn .nw-q-f { min-width:200px; }
.nw-hint-warn { color:var(--c-amber-40); font-weight:600; }
.nw-hint-warn[hidden] { display:none; }
.nw-q-warn { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--c-sand-99); border:1px solid var(--c-amber-90b); color:var(--c-amber-35); font-size:13.5px; line-height:1.5; }
/* Other assets, item by item, in the year breakdown (2026-10-10) */
.tx-yrow.nw-ysub { padding-left:22px; font-size:12.5px; color:var(--c-slate-45); border-bottom-style:dashed; }
.nw-ysub-note { padding:4px 0 6px 22px; font-size:12px; color:var(--c-slate-55); }

/* Property & Debts lists (js/24, 2026-10-12): a row per property / debt, labelled boxes; a loan line on each thing you own */
.nw-list { display:flex; flex-direction:column; gap:10px; }
.nw-item { padding:12px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); }
.nw-item-h { display:grid; grid-template-columns:minmax(0,1fr) auto 34px; gap:8px; align-items:center; }
.nw-item-h:not(:has(select)) { grid-template-columns:minmax(0,1fr) 34px; }
.nw-item-g, .nw-a-loan { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px 10px; margin-top:10px; }
.nw-a-loan { grid-column:1 / -1; margin-top:0; }
.nw-f { display:flex; flex-direction:column; gap:3px; margin:0; font-size:12px; color:var(--c-slate-50); }
.nw-f > span:first-child { font-weight:600; }
.nw-in { position:relative; display:block; }
.nw-in .nw-pre { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--c-slate-60); font-size:13px; pointer-events:none; }
.nw-in .nw-suf { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--c-slate-60); font-size:12px; pointer-events:none; }
.nw-item input, .nw-item select, .nw-a-loan input { width:100%; min-height:40px; box-sizing:border-box; padding:8px 12px; border:1px solid var(--c-gray-90); border-radius:12px; background:var(--panel); color:var(--c-slate-25); font:inherit; font-size:14px; }
.nw-in input.has-pre { padding-left:22px; }
.nw-in input.has-suf { padding-right:44px; }
.nw-item input:focus, .nw-item select:focus, .nw-a-loan input:focus { outline:2px solid var(--c-teal-50); outline-offset:1px; border-color:var(--c-teal-50); }
.nw-item input[type=number], .nw-a-loan input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.nw-item input[type=number]::-webkit-outer-spin-button, .nw-item input[type=number]::-webkit-inner-spin-button,
.nw-a-loan input[type=number]::-webkit-outer-spin-button, .nw-a-loan input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nw-item-note { grid-column:1 / -1; margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--c-slate-50); }
.nw-item-note:empty { display:none; }
.nw-asset-row .nw-a-loan .nw-f { font-size:12px; }

/* Property cards (js/61, 2026-10-13): every property — your home, a second home, a rental, land — the same card in Property &
   Debts and in the Expense Planner (Home): worth, yearly costs, "Still owe on it?", More, and where it counts. */
.prop-list { display:flex; flex-direction:column; gap:12px; }
.prop-intro { margin:0; font-size:13px; line-height:1.5; color:var(--c-slate-50); }
.prop-card { position:relative; display:flex; flex-direction:column; gap:10px; }
.prop-card .nw-item-g { margin-top:0; }
.prop-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-right:42px; min-height:34px; }
.prop-title { font-size:15px; color:var(--c-slate-25); }
.prop-card .prop-head .prop-name { flex:1 1 160px; width:auto; }
.prop-card .prop-head .prop-use { flex:0 1 150px; width:auto; }
.prop-tag { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--c-teal-90); color:var(--c-teal-40); }
.prop-x { position:absolute; top:12px; right:12px; }
.prop-card .prop-need input { border-color:var(--c-amber-60); }
.prop-q { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:14px; font-weight:600; color:var(--c-slate-25); }
.prop-seg { display:inline-flex; flex-wrap:wrap; gap:8px; }
.prop-card .prop-seg button { min-height:40px; padding:0 14px; border:1px solid var(--c-gray-85); border-radius:10px; background:var(--panel); color:var(--c-slate-40); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.prop-card .prop-seg button.on { border-color:var(--c-teal-50); background:var(--c-teal-90); color:var(--c-teal-40); }
.prop-card .prop-seg button.on::before { content:'✓ '; }
.prop-card .nw-f em { font-style:normal; font-weight:400; color:var(--c-slate-60); }
.prop-chk { display:flex; align-items:flex-start; gap:8px; margin:0; font-size:13px; line-height:1.45; color:var(--c-slate-40); }
.prop-card .prop-chk input { width:auto; min-height:0; margin-top:2px; }
.prop-out, .prop-note, .prop-foot { margin:0; font-size:12.5px; line-height:1.5; color:var(--c-slate-50); }
.prop-out:empty, .prop-foot:empty { display:none; }
.prop-foot { padding-top:8px; border-top:1px solid var(--c-gray-90); color:var(--c-slate-40); }
.prop-more summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--c-teal-40); }
.prop-more[open] > .nw-item-g { margin:8px 0 6px; }
.prop-add { align-self:flex-start; }
.prop-card .xb-mtg-out:empty { display:none; }
/* the status question first (Boldin's pattern): unanswered, its answers are large stacked choices; then a row to change it */
.prop-q-open { flex-direction:column; align-items:stretch; }
.prop-q-open > span:first-child { font-size:16px; color:var(--c-teal-40); }
.prop-q-open .prop-seg { flex-direction:column; }
.prop-card .prop-q-open .prop-seg button { min-height:56px; padding:0 18px; text-align:left; font-size:15px; border-color:var(--c-gray-80); }
.prop-card .prop-q-open .prop-seg button:hover { border-color:var(--c-slate-45); }
.prop-sub { font-size:13.5px; font-weight:700; color:var(--c-slate-40); } /* sentence case (2026-10-13 design pass) */
.prop-edit { margin-left:auto; min-height:34px; padding:0 12px; border:1px solid var(--c-gray-85); border-radius:10px; background:var(--panel); color:var(--c-teal-40); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.prop-sum { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-size:13px; color:var(--c-slate-40); }
.prop-sum-l, .prop-sum-r { display:flex; flex-direction:column; gap:2px; }
.prop-sum-r { text-align:right; }
.prop-sum b { font-size:14px; color:var(--c-teal-40); }
.prop-payoff { display:inline-flex; align-items:baseline; gap:6px; margin-right:6px; padding:4px 10px; border:1px solid var(--c-teal-80); border-radius:10px; }
.prop-payoff b { font-size:15px; color:var(--c-teal-40); }
.prop-payoff small { font-size:12px; color:var(--c-slate-55); }
@media (max-width:600px){ .prop-sum-r { text-align:left; } }
.prop-card .prop-nosale { min-height:34px; padding:0 12px; border:1px solid var(--c-red-50b); border-radius:10px; background:var(--panel); color:var(--c-red-50b); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } /* Delete sale: the sale and what follows it removed */
/* Debt cards (js/62, 2026-10-13): the property card's look; a car added in the Expense Planner asks its value in its row */
.debt-card .prop-head .prop-name { flex:1 1 140px; }
.nw-a-money.prop-need input { border-color:var(--c-amber-60); }
.nw-asset-row .nw-a-tag { grid-column:1 / -1; justify-self:start; }

/* Design pass (2026-10-13): the first question with a hint under each answer; a finished card "equity first" (B); the sale
   as steps (A); the debts as a statement (A, js/62). */
.prop-card .prop-q-open .prop-seg button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:10px 18px; }
.prop-card .prop-q-open .prop-seg button small { font-size:13px; font-weight:400; color:var(--c-slate-55); }
.prop-card .prop-q-open .prop-seg button.on::before { content:none; }
.prop-kind { font-size:13px; color:var(--c-slate-55); }
.prop-eq-top { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 28px; }
.prop-eq-top > div { display:flex; flex-direction:column; }
.prop-k { font-size:12.5px; color:var(--c-slate-55); }
.prop-eq-top b { font-size:15px; font-weight:700; color:var(--c-slate-25); }
.prop-eq-top b.prop-big { font-size:28px; line-height:1.1; letter-spacing:-.015em; }
.prop-eq-top b.prop-big small { font-size:15px; font-weight:600; }
.prop-eq-bar { display:flex; height:32px; border-radius:8px; overflow:hidden; background:var(--c-gray-90); }
.prop-eq-own { display:flex; align-items:center; gap:5px; padding:0 12px; background:var(--c-teal-50); color:var(--c-gray-99); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; }
.prop-eq-owe { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding:0 10px; color:var(--c-amber-35); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--c-amber-90b) 0 6px, transparent 6px 12px), var(--c-sand-99, var(--c-gray-95)); }
.prop-eq-leg { display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:13px; color:var(--c-slate-55); }
.prop-track { position:relative; height:58px; margin:10px 4px 0; }
.prop-track .rail { position:absolute; left:0; right:0; top:24px; height:2px; background:var(--c-gray-85); }
.prop-track .paid { position:absolute; top:23px; height:4px; border-radius:2px; background:var(--c-amber-60); }
.prop-track .pin { position:absolute; top:16px; width:2px; height:18px; margin-left:-1px; background:var(--c-slate-40); }
.prop-track .pin.ret { top:12px; height:26px; background:var(--c-green-55b); }
.prop-track .pin.faint { background:var(--c-gray-85); }
.prop-track .lab { position:absolute; top:38px; transform:translateX(-50%); font-size:12px; color:var(--c-slate-55); white-space:nowrap; }
.prop-track .lab.up { top:-2px; }
.prop-track .lab b { color:var(--c-slate-25); font-weight:600; }
.prop-track .lab.l { transform:none; }
.prop-track .lab.r { transform:translateX(-100%); }
.prop-track .lab.faint { color:var(--c-slate-60); }
.prop-steps { display:flex; flex-direction:column; margin-top:8px; }
.prop-steps-h { font-size:15px; font-weight:700; color:var(--c-slate-25); margin-bottom:2px; }
.prop-step { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--c-gray-90); font-size:14px; color:var(--c-slate-40); }
.prop-step em { font-style:normal; color:var(--c-slate-55); font-size:12.5px; }
.prop-step .amt { font-weight:700; color:var(--c-slate-25); white-space:nowrap; }
.prop-step.end { border-bottom:0; font-weight:700; font-size:15px; color:var(--c-slate-25); }
.prop-step.end .amt { color:var(--c-green-55b); }
.prop-step.end.short .amt { color:var(--c-amber-60); }
/* the debts as a statement (js/62) */
.debt-tab { width:100%; border-collapse:collapse; font-size:14px; }
.debt-tab th { text-align:left; font-size:12.5px; font-weight:500; color:var(--c-slate-55); padding:0 8px 8px; border-bottom:1px solid var(--c-gray-85); }
.debt-tab td { padding:11px 8px; border-bottom:1px solid var(--c-gray-90); vertical-align:middle; color:var(--c-slate-25); }
.debt-tab .n { text-align:right; white-space:nowrap; }
.debt-tab .money { font-weight:700; }
.debt-tab .muted { color:var(--c-slate-55); }
.debt-tab .nm b { display:block; font-weight:600; }
.debt-tab .nm span { font-size:12.5px; color:var(--c-slate-55); }
.debt-tab .act { text-align:right; white-space:nowrap; }
.debt-tab .act .prop-edit { margin:0; }
.debt-tab tr.debt-edit > td { padding:4px 0 12px; white-space:normal; } /* the open card wraps (2026-10-14: it inherited nowrap and widened the table past its column) */
.debt-tab tr.debt-edit .prop-card { border-style:dashed; }
.debt-pill { display:inline-block; font-size:12.5px; font-weight:600; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.debt-pill.pre { background:var(--c-green-85); color:var(--c-green-35); }
.debt-pill.ret { background:var(--c-amber-90b); color:var(--c-amber-35); }
.debt-pill.owe { background:var(--c-gray-95); color:var(--c-amber-60); }
.debt-pill.bad { background:var(--c-gray-95); color:var(--c-red-50b); }
.debt-pill.flat { background:var(--c-gray-95); color:var(--c-slate-55); }
.debt-acts { margin-left:auto; display:flex; gap:6px; align-items:center; }
.debt-card .prop-head { padding-right:0; }
.debt-sum { margin:10px 0 0; font-size:13.5px; color:var(--c-slate-40); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media (max-width:600px){
  .debt-tab thead { display:none; }
  .debt-tab, .debt-tab tbody { display:block; width:100%; } /* the same on phones (Expense Planner → Loans) */
  .debt-tab tr:not(.debt-edit) { display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--c-gray-90); }
  .debt-tab tr:not(.debt-edit) > td { display:block; padding:0; border:0; }
  .debt-tab tr:not(.debt-edit) > td.nm { grid-column:1; }
  .debt-tab tr:not(.debt-edit) > td.money { grid-column:2; grid-row:1; }
  .debt-tab tr:not(.debt-edit) > td:nth-child(3) { grid-column:2; text-align:right; }
  .debt-tab tr:not(.debt-edit) > td:nth-child(4) { grid-column:1; grid-row:2; }
  .debt-tab tr:not(.debt-edit) > td.act { grid-column:1 / -1; text-align:left; margin-top:6px; }
  .debt-tab tr.debt-edit { display:block; } .debt-tab tr.debt-edit > td { display:block; }
}
.prop-track-key { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; } /* read by screen readers; shown on phones */
@media (max-width:600px){
  .prop-track { height:30px; margin-top:6px; } .prop-track .lab { display:none; }
  .prop-track .rail { top:14px; } .prop-track .paid { top:13px; } .prop-track .pin { top:6px; } .prop-track .pin.ret { top:2px; }
  .prop-track-key { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; display:flex; flex-direction:column; gap:2px; padding:0; list-style:none; font-size:14px; color:var(--c-slate-40); }
  .prop-track-key b { color:var(--c-slate-25); font-weight:600; }
  .prop-track-key li.faint { color:var(--c-slate-60); }
  .prop-eq-own span, .prop-eq-owe span { display:none; } /* "Yours" / "Owed": the amounts are under the bar */
  .debt-tab .act .prop-edit { min-height:44px; min-width:44px; padding:0 14px; font-size:14px; }
}
/* the sale on a finished card: one line, the steps a click away (2026-10-13) */
.prop-sale-sum { margin:4px 0 0; padding:10px 12px; border-radius:10px; background:var(--c-gray-95); font-size:13.5px; line-height:1.5; color:var(--c-slate-40); }
.prop-sale-sum summary { cursor:pointer; list-style:none; } .prop-sale-sum summary::-webkit-details-marker { display:none; }
.prop-sale-sum b { color:var(--c-slate-25); } .prop-sale-sum b.prop-in { color:var(--c-green-55b); } .prop-sale-sum b.prop-short { color:var(--c-amber-60); }
.prop-sale-sum .prop-more-link { color:var(--c-teal-40); font-weight:600; white-space:nowrap; }
.prop-sale-sum[open] .prop-more-link { display:none; }
.prop-sale-sum .prop-steps { margin-top:8px; }
.prop-sale-sum .prop-steps-h { display:none; } /* its line above says it */

/* UX audit fixes (2026-10-13, ui-ux-pro-max): tap areas, focus, a delete you can undo, nothing under 13 px */
.prop-list .tx-btn:focus-visible, .prop-card button:focus-visible, .prop-card select:focus-visible, .prop-card input:focus-visible, .prop-card summary:focus-visible,
.prop-list summary:focus-visible, .debt-tab button:focus-visible, .prop-sale-sum summary:focus-visible { outline:3px solid var(--c-teal-50); outline-offset:2px; box-shadow:none; }
.debt-tab tr[data-dc-row] { cursor:pointer; }
.debt-tab tr[data-dc-row]:hover > td { background:var(--c-gray-95); }
.debt-add-one { display:none; }
.prop-toast { display:flex; align-items:center; gap:12px; margin-top:8px; padding:6px 6px 6px 14px; border-radius:12px; background:var(--c-slate-25); color:var(--c-gray-99); font-size:14px; }
.prop-toast .prop-edit { margin-left:auto; background:transparent; color:var(--c-gray-99); border-color:var(--c-slate-60); }
.prop-track .lab { font-size:13px; }
.debt-pill, .prop-k, .prop-step em, .debt-tab th, .debt-tab .nm span, .prop-tag, .prop-payoff small, .prop-kind, .prop-eq-leg, .nw-f em { font-size:13px; }
@media (max-width:600px){
  .prop-list .tx-btn, .prop-add, .prop-card .prop-edit, .prop-card .prop-seg button, .prop-nosale, .prop-toast .prop-edit { min-height:44px; }
  .prop-card .nw-a-del, .debt-acts .nw-a-del { width:44px; height:44px; }
  .prop-card select, .prop-card input { min-height:44px; }
  .debt-add-many { display:none; }
  .debt-add-one { display:block; width:100%; min-height:44px; }
  .debt-tab tr:not(.debt-edit) { min-height:64px; }
}
/* the Studio look sets every .tx-btn to 36 px and a faint focus glow, !important (compass-studio.css): on these cards, the
   audit's 44 px on phones and a 3 px ring win */
@layer studio { /* in its layer: an !important in a layer beats one outside it */
  html.studio .prop-list .tx-btn:focus-visible, html.studio .prop-card .tx-btn:focus-visible { outline:3px solid var(--c-teal-50) !important; outline-offset:2px !important; box-shadow:none !important; }
  @media (max-width:600px){ html.studio .prop-list .tx-btn, html.studio .prop-list .prop-edit, html.studio .prop-card button { min-height:44px !important; } }
}

/* ---------------------------------------------------------------- the balance sheet (2026-10-14; user picked A, "a balance sheet",
   in the Property & Debts review): You own − You owe = Net worth today on top, then What you own | What you owe, each with one
   add menu. Two columns when the section is wide enough, stacked otherwise (a phone). */
#netWorthSection { container-type:inline-size; }
.nw-sheet-top { display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 22px; margin:16px 0 20px; padding:0 0 14px; border-bottom:2px solid var(--c-slate-25); }
.nw-st { display:flex; flex-direction:column; min-width:0; }
.nw-st small { font-size:14px; font-weight:500; color:var(--c-slate-55); }
.nw-st strong { font-size:28px; line-height:1.15; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--c-slate-25); }
.nw-st.own strong { color:var(--c-green-35); }
.nw-st.owe strong { color:var(--c-red-45); }
.nw-st-op { font-size:24px; line-height:1; color:var(--c-slate-55); padding-bottom:6px; }
.nw-st-link { margin-left:auto; padding-bottom:6px; font-size:15px; font-weight:600; color:var(--c-teal-40); text-decoration:none; }
.nw-st-link:hover { text-decoration:underline; }
.nw-sheet { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
@container (min-width:860px){ .nw-sheet { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
@container (max-width:520px){
  .nw-sheet-top { gap:4px 14px; }
  .nw-st strong { font-size:22px; }
  .nw-st-op { font-size:20px; padding-bottom:3px; }
  .nw-st-op.eq { flex-basis:100%; height:0; padding:0; overflow:hidden; } /* a line break: net worth on its own line */
  .nw-st.net { flex-direction:row; align-items:baseline; gap:10px; }
  .nw-st-link { display:inline-flex; align-items:center; min-height:44px; padding-bottom:0; }
}
.nw-col-h { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 10px; font-size:17px; font-weight:700; color:var(--c-slate-25); }
.nw-col-h span { font-size:14px; font-weight:500; color:var(--c-slate-55); }
.nw-own .prop-list, .nw-owe .prop-list { margin:0; }
.nw-own .prop-card { container-type:inline-size; }
@container (max-width:600px){ .nw-own .prop-card .prop-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.nw-own .nw-asset-rows:not(:empty) { margin-top:10px; }
.nw-addmenu { margin-top:10px; }
.nw-addmenu > summary { list-style:none; display:flex; align-items:center; min-height:44px; padding:0 16px; border:1px dashed var(--c-gray-75); border-radius:12px; font-size:15px; font-weight:600; color:var(--c-teal-40); cursor:pointer; }
.nw-addmenu > summary::-webkit-details-marker { display:none; }
.nw-addmenu > summary:hover, .nw-addmenu[open] > summary { border-style:solid; border-color:var(--c-teal-40); }
.nw-addmenu-k { display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 2px; }
.nw-empty { margin:0 0 4px; font-size:14.5px; color:var(--c-slate-55); }
.nw-owe-note { margin-top:12px; }
/* What you owe in its column: each row on two lines — what and owed, then when it ends and the payment — with Open / Edit beside */
.nw-owe { container-type:inline-size; }
@container (max-width:600px){
  .nw-owe .debt-tab, .nw-owe .debt-tab tbody { display:block; width:100%; } /* 2026-10-14: as a table it widened to the open debt card's longest line (911 px) and pushed the page sideways */
  .nw-owe .debt-tab tr.debt-edit .prop-card { min-width:0; max-width:100%; box-sizing:border-box; }
  .nw-owe .debt-tab thead { display:none; }
  .nw-owe .debt-tab tr:not(.debt-edit) { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--c-gray-90); }
  .nw-owe .debt-tab tr:not(.debt-edit) > td { display:block; padding:0; border:0; }
  .nw-owe .debt-tab tr:not(.debt-edit) > td.nm { grid-column:1; grid-row:1; }
  .nw-owe .debt-tab tr:not(.debt-edit) > td.money { grid-column:2; grid-row:1; text-align:right; }
  .nw-owe .debt-tab tr:not(.debt-edit) > td:nth-child(3) { grid-column:2; grid-row:2; text-align:right; }
  .nw-owe .debt-tab tr:not(.debt-edit) > td:nth-child(4) { grid-column:1; grid-row:2; }
  .nw-owe .debt-tab tr:not(.debt-edit) > td.act { grid-column:3; grid-row:1 / 3; margin:0; }
  .nw-owe .debt-tab tr.debt-edit { display:block; } .nw-owe .debt-tab tr.debt-edit > td { display:block; }
  .nw-owe .debt-pill { white-space:normal; }
}
.debt-tab .nm .debt-on { color:var(--c-teal-40); font-weight:600; }
/* the property card's fields (same review): where the numbers come from, and Years left behind "Don't know the payment?" */
.prop-hint { margin:6px 0 0; font-size:14px; color:var(--c-slate-55); }
.prop-link { border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--c-teal-40); cursor:pointer; }
.prop-link:hover { text-decoration:underline; }
.prop-out:empty { display:none; }
@layer studio {
  html.studio .nw-addmenu-k .tx-btn { min-height:44px !important; padding:0 16px !important; font-size:15px !important; }
  html.studio .nw-st-link, html.studio .nw-owe-note a { color:var(--c-teal-40) !important; text-decoration:none !important; font-weight:600; }
  html.studio .nw-addmenu-k .tx-btn:focus-visible, html.studio .nw-addmenu > summary:focus-visible, html.studio .prop-link:focus-visible { outline:3px solid var(--c-teal-50) !important; outline-offset:2px !important; box-shadow:none !important; }
}
/* Property & Debts (2026-10-15): no bar — equity and what you owe in large type, then payment and costs, then what it's worth;
   the top line is property only, with the net worth (savings included) in a note under it */
.prop-eq-top.prop-eq-2 { margin-top:12px; }
.prop-eq-top b.prop-big.prop-owed { color:var(--c-slate-40); }
.prop-worth { margin:10px 0 0; font-size:13px; color:var(--c-slate-55); }
.nw-st-note { margin:8px 0 18px; font-size:13px; line-height:1.5; color:var(--c-slate-55); }
.nw-st-note .nw-st-link { margin:0; padding:0; font-size:13px; }
.prop-eq-top.prop-eq-2:empty { display:none; }
.prop-card .prop-what { margin:0 0 10px; } .prop-card .prop-what .prop-use { width:100%; flex:none; }