:root{
  --bg:#0f1729; --panel:#fff; --ink:#1e293b; --muted:#64748b; --line:#e2e8f0;
  /* 2026-07-21 rebrand, revised: accent color is now gray (matches the marketing site's gray
     header) — --bg (the dark navy sidebar) is intentionally left as the one "stand out" dark blue,
     same role the logo mark plays on the marketing site. Was copper (#ba7e55/#77472e), briefly
     blue (#2563eb/#0b1e4e), now gray per Derek's direction 2026-07-21. */
  /* --green darkened from #059669 to #047857 on 2026-07-25: the old value was 3.77:1 on white,
     under the 4.5:1 minimum, so income figures on the Dashboard cards and Recent-transactions table
     were washing out. #047857 is 5.48:1 and reads as the same green. On the navy ledger blocks it
     flips to the mint below (a dark green on navy is unreadable — 2.5:1). */
  --brand:#64748b; --brand-d:#334155; --green:#047857; --green-on-dark:#6ee7b7; --red:#dc2626; --amber:#d97706;
  /* Pale blue-white app-wide background, Derek's pick 2026-07-21 (previously used only on the now-
     removed top bar) — now the page background behind every card/panel, not just white/light-gray. */
  --soft:#EAF1F8; --radius:12px; --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
}
/* Real E-13B MICR font for the check numbers line — maps the Unicode transit/on-us symbols
   (U+2446/2448) the app already emits, so the routing/account/check# line prints as true MICR
   glyphs instead of the Courier-New Unicode-symbol approximation. */
@font-face{
  font-family:'Covix MICR';
  src:url('fonts/CovixMICRU.ttf') format('truetype');
  font-weight:normal; font-style:normal;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--soft)}
/* Top bar (logo) removed 2026-07-21 per Derek — revisiting branding placement later. #app/.sidebar
   reverted to their pre-topbar full-height sizing below. */
#app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--bg);color:#cbd5e1;display:flex;flex-direction:column;padding:22px 14px;position:sticky;top:0;height:100vh}
.brand{font-size:22px;font-weight:800;color:#fff;padding:6px 12px 20px;display:flex;align-items:center;gap:9px}
.brand span{color:var(--brand)}
.brand-icon{width:38px;height:38px;flex:0 0 auto}
nav{display:flex;flex-direction:column;gap:2px}
nav a{padding:11px 14px;border-radius:9px;color:#cbd5e1;text-decoration:none;cursor:pointer;font-weight:500;font-size:15px;transition:.15s}
nav a:hover{background:#1e293b;color:#fff}
nav a.active{background:var(--brand);color:#fff}
.logout-link{color:#94a3b8;cursor:pointer;text-decoration:none;font-weight:600}
.logout-link:hover{color:#fff;text-decoration:underline}
#auth-root{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.auth-card{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.4);padding:34px 30px;width:100%;max-width:360px;text-align:center}
.auth-brand{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:10px}
.auth-brand span{color:var(--brand)}
.auth-brand .brand-icon{width:64px;height:64px}
.auth-sub{color:var(--muted);font-size:14px;margin:0 0 20px}
.auth-card input{width:100%;margin-bottom:12px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px}
.auth-err{color:var(--red);font-size:13px;margin-top:12px;min-height:16px}
.calc-launch{display:block;width:100%;padding:11px 14px;border-radius:9px;background:transparent;color:#cbd5e1;border:none;cursor:pointer;font-size:15px;font-weight:500;text-align:left;font-family:inherit;transition:.15s}
.calc-launch:hover{background:#1e293b;color:#fff}
.side-foot{margin-top:auto;font-size:12px;color:#94a3b8;padding:12px}
/* Corporate seal, Derek 2026-07-25: the "A CoreLedgery, Inc. product" credit is deliberately the
   OLD CoreLedgery copper (#b87333, 4.71:1 on the navy — passes AA), paired with the copper CL mark.
   It's the one place the retired brand still lives on purpose. The previous opacity:.5 dropped it to
   roughly 1.4:1 — effectively invisible — so the opacity is gone and the color carries it instead. */
.side-foot .seal{display:flex;align-items:center;gap:8px;margin-top:8px;color:#b87333;font-size:9.5px;font-weight:700;letter-spacing:.02em;line-height:1.35}
.side-foot .seal .seal-t{flex:1;min-width:0}
.side-foot .seal img{width:26px;height:26px;border-radius:5px;flex:0 0 auto;display:block}
/* pop-out calc sheet */
#calc-pop{position:fixed;top:90px;right:30px;z-index:200;width:560px;max-width:94vw;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(15,23,42,.35);overflow:hidden}
.calc-head{background:var(--bg);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:move;font-weight:700;border-bottom:3px solid var(--brand)}
.calc-btn{background:transparent;border:1px solid #475569;color:#e2e8f0;border-radius:7px;padding:3px 10px;margin-left:6px;cursor:pointer;font-size:13px}
.calc-btn:hover{background:#334155}
.calc-hint{padding:7px 14px;font-size:12px;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line)}
.calc-hint code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--brand)}
.calc-grid{max-height:60vh;overflow:auto}
.calc-grid table{border-collapse:collapse;width:100%;font-size:13px}
.calc-grid th{background:var(--soft);color:var(--muted);font-weight:700;font-size:11px;border:1px solid var(--line);padding:3px 6px;position:sticky;top:0}
.calc-grid tbody th{position:static;width:32px;text-align:center}
.calc-grid td{border:1px solid var(--line);padding:0}
.calc-cell{width:100%;min-width:66px;border:none;padding:5px 6px;font:inherit;text-align:right;background:transparent}
.calc-cell:focus{outline:2px solid var(--brand);background:#fffbf9}
.calc-cell.err{color:var(--red)}
.brand-biz{padding:0 12px 16px;margin:-6px 0 12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid #1e293b}
.brand-biz:empty{display:none}
.brand-biz img{max-width:100%;max-height:74px;object-fit:contain;background:transparent;align-self:flex-start}
.brand-biz .biz-name{color:#e2e8f0;font-weight:600;font-size:14px;line-height:1.3}
.content{flex:1;padding:30px 36px;max-width:1296px;width:100%}
/* Page titles and panel section headers ("Invoices", "Accounts", etc.) are plain — no pill, no
   color — per Derek 2026-07-21 ("leave the invoices and other page markers alone"). The gray only
   belongs on the actual table column headers (the th rule further down already uses var(--muted),
   the same gray as the sidebar highlight — that's the "field headers" he means, and it was already
   correct/untouched this whole time). */
h1{font-size:26px;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 24px;font-size:14px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
/* Card labels + values bolded 2026-07-25 (Derek: "make all header and card words bold"). */
.card .label{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:700}
.card .value{font-size:26px;font-weight:800}
.card .value.green{color:var(--green)} .card .value.red{color:var(--red)} .card .value.amber{color:var(--amber)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-h{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:800}
/* .panel has no padding of its own — only .panel-h does — so any panel with plain body content
   needs this or the text sits flush against the border. */
.panel-b{padding:18px}
/* Scoped to just the Dashboard's three panel headers ("Accounts", "Recent transactions",
   "Upcoming bills") — same solid gray-fill/white-text treatment as the confirmed-correct table
   field headers (Invoices, etc. — see the plain th rule below), not just colored text. Every other
   page's .panel-h is untouched — Derek 2026-07-21. */
#view[data-view="dashboard"] .panel-h{background:var(--brand);color:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--line)}
/* The actual "field headers" — solid gray fill (#64748b, same as var(--brand)/the sidebar
   highlight), white text — not just muted-gray text on a light background. Derek 2026-07-21. */
/* font-weight:800 added 2026-07-25 — th only inherited the browser default 700, which at 12px
   uppercase on a mid-gray fill read closer to medium. Derek asked for headers to stand out. */
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--brand);font-weight:800}
#view[data-view="banking"] th{color:var(--muted);background:var(--soft)}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* ---- Amount sign convention, Derek 2026-07-25 ----
   Negatives are parenthesized by fmt() in app.js — ($412.88) — and carry NO red. Red is now
   reserved for genuine alerts (an overdue bill), never for "this number happens to be negative."
   Since color no longer signals the sign, the parentheses do, which is also the standard accounting
   convention and survives being printed in black and white.
   Light surfaces: negatives are ink, positives green. Navy ledger blocks: negatives and the running
   balance are white, positives flip to mint. */
.amt-pos{color:var(--green)}
.amt-neg,.amt-bal{color:var(--ink)}
.ledger tbody.date-group tr:not(.date-row) .amt-neg,
.ledger tbody.date-group tr:not(.date-row) .amt-bal{color:#fff}
.ledger tbody.date-group tr:not(.date-row) .amt-pos{color:var(--green-on-dark)}
.btn{border:none;border-radius:9px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;background:var(--brand);color:#fff;transition:.15s}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft)}
.btn.sm{padding:6px 11px;font-size:13px}
/* Some .btn's are anchors, not buttons ("Connect with Stripe", the Office plan's "Let's talk") —
   without this they render with the browser's default link underline through the pill. */
a.btn,a.btn:hover{text-decoration:none;display:inline-block}
.btn.danger{background:#fff;color:var(--red);border:1px solid var(--line)}
.btn.danger:hover{background:#fef2f2}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge.draft{background:#f1f5f9;color:#475569}
.badge.sent,.badge.unpaid{background:#e2e8f0;color:#334155}
.badge.paid,.badge.accepted{background:#d1fae5;color:#047857}
.badge.partial{background:#fef3c7;color:#b45309}
.badge.overdue,.badge.declined,.badge.void{background:#fee2e2;color:#b91c1c}
.muted{color:var(--muted)}
.empty{padding:44px;text-align:center;color:var(--muted)}
/* modal */
#modal-root:empty{display:none}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:50}
.modal{background:#fff;border-radius:14px;width:100%;max-width:620px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal.wide{max-width:820px}

/* bills */
tr.bills-upcoming-row{cursor:pointer}
tr.bills-upcoming-row:hover td{background:var(--soft)}
tr.bill-overdue-row td{background:#fef2f2}
tr.bill-overdue-row td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.match-hint{margin-top:4px;font-size:12px;color:var(--amber);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.match-hint .btn{padding:3px 10px;font-size:12px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-month-label{font-weight:700;font-size:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0}
.cal-cell{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:4px;font-size:11px;overflow:hidden}
.cal-cell.cal-empty{border:none}
.cal-cell.cal-today{border-color:var(--brand);background:#f1f5f9}
.cal-daynum{font-weight:700;color:var(--muted);margin-bottom:3px}
.cal-pill{border-radius:6px;padding:2px 6px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-pill-unpaid{background:#e2e8f0;color:#334155}
.cal-pill-overdue{background:#fee2e2;color:#b91c1c}
.cal-pill-paid{background:#d1fae5;color:#047857}
.cal-legend{display:flex;gap:14px;margin-top:14px;font-size:12px}
.cal-legend .cal-pill{cursor:default;padding:3px 10px}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-h h3{margin:0;font-size:18px}
.modal-b{padding:22px}
.modal-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
label.field{display:block;margin-bottom:14px;font-size:13px;font-weight:600;color:#334155}
label.field span{display:block;margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #cbd5e1;border-color:var(--brand)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.items th,.items td{padding:8px 10px}
.items input{padding:8px}
.lnk{color:var(--brand);cursor:pointer;font-weight:600}
.lnk:hover{text-decoration:underline}
.totbox{margin-top:14px;margin-left:auto;width:260px;font-size:14px}
.totbox .l{display:flex;justify-content:space-between;padding:5px 0}
.totbox .l.total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:700;font-size:16px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:100;font-size:14px;opacity:0;transform:translateY(10px);transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}
th.rec-head{white-space:nowrap}
.rec-head label{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;text-transform:none;letter-spacing:0}
.rec-head input,.rec-box,.sel-box{cursor:pointer;width:15px;height:15px;accent-color:var(--brand)}
td.rec-cell{text-align:center}
tr.rec-row{background:var(--soft)}
.table-wrap{overflow-x:auto}
/* Plain (non date-grouped) ledger rows that open a record on click — e.g. the all-accounts
   checks list on the Checks tab. */
.ledger tr.row-click{cursor:pointer}
.ledger tr.row-click:hover td{background:#f1f5f9}
.ledger tr.row-click:hover td.actions{background:#f1f5f9}
.ledger{min-width:760px}
.ledger th,.ledger td{white-space:nowrap}
.ledger .notes-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
/* keep Edit/Delete pinned to the right edge so they're always reachable */
.ledger td.actions{position:sticky;right:0;background:#fff;box-shadow:-8px 0 8px -6px rgba(15,23,42,.12)}
.ledger tr.rec-row td.actions{background:var(--soft)}
.ledger thead th:last-child{position:sticky;right:0;background:var(--brand);box-shadow:-8px 0 8px -6px rgba(15,23,42,.12)}
#view[data-view="banking"] .ledger thead th:last-child{background:var(--soft)}
/* date-grouped ledger — each day is its own <tbody>: a copper date bubble on top, the whole
   block of that day's transactions in navy underneath, white text throughout. */
.ledger tbody.date-group tr.date-row td{padding:12px 18px;border-bottom:none;background:var(--brand);text-align:center;position:static}
/* The ledger table is wider than the panel (Notes/Actions scroll into view), so centering across
   the FULL table puts the bubble right of what's actually on screen. Sticky + translateX keeps it
   centered in whatever portion of the table is currently visible, no matter how far you've scrolled. */
.ledger tbody.date-group tr.date-row .date-bubble{display:inline-block;position:sticky;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ledger tbody.date-group tr:not(.date-row) td{background:var(--bg);color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.ledger tbody.date-group tr:not(.date-row) td.notes-cell{color:#cbd5e1}
.ledger tbody.date-group tr:not(.date-row) .muted{color:#94a3b8} /* var(--muted) is too dark to read on navy */
.ledger tbody.date-group tr:not(.date-row) td.actions{background:var(--bg);box-shadow:-8px 0 8px -6px rgba(0,0,0,.3)}
.ledger tbody.date-group tr.rec-row td{background:#1e293b} /* reconciled = a lighter navy tint, not the old cream */
.ledger tbody.date-group tr.rec-row td.actions{background:#1e293b}
/* Single-account view: whole row opens the edit modal (Edit button removed in favor of this) */
.ledger tbody.date-group tr.clickable{cursor:pointer}
.ledger tbody.date-group tr.clickable:hover td{background:#233246}
.ledger tbody.date-group tr.clickable.rec-row:hover td{background:#2a3b52}
.ledger tbody.date-group tr:last-child td{border-bottom:none}
.ledger tbody.date-group tr:nth-child(2) td:first-child{border-top-left-radius:10px}
.ledger tbody.date-group tr:nth-child(2) td:last-child{border-top-right-radius:10px}
.ledger tbody.date-group tr:last-child td:first-child{border-bottom-left-radius:10px}
.ledger tbody.date-group tr:last-child td:last-child{border-bottom-right-radius:10px}
.ledger tbody.date-group tr.date-row td{border-radius:10px 10px 0 0}
.ledger tbody.group-gap td{border:none;padding:7px 0;background:transparent}
.settings-layout{display:flex;gap:22px;align-items:flex-start}
.settings-nav{width:210px;flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}
.settings-section{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 10px 4px;font-weight:700}
.settings-nav a{display:block;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--ink);font-size:14px;text-decoration:none}
.settings-nav a:hover{background:var(--soft)}
.settings-nav a.active{background:var(--brand);color:#fff}
.settings-body{flex:1;min-width:0}
.add-row{display:flex;gap:10px;margin-bottom:14px}
.add-row input{flex:1}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.tier-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.tier-card.current{border-color:var(--brand);box-shadow:0 0 0 2px #cbd5e1}
.tier-name{font-weight:800;font-size:15px}
.tier-price{font-size:22px;font-weight:800;color:var(--brand);margin:2px 0 6px}
.tier-blurb{font-size:12.5px;color:var(--muted);line-height:1.4}
.lock-screen{display:flex;justify-content:center;padding:60px 20px}
.lock-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 34px;max-width:420px;text-align:center}
.lock-title{font-size:18px;font-weight:800}
.plugins-panel{overflow:visible}
.plugin-table{padding:0 18px 14px}
.plugin-head,.plugin-row{display:grid;grid-template-columns:1.4fr 2.8fr 0.9fr 132px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.plugin-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;border-bottom:2px solid var(--line);position:sticky;top:0;z-index:5;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.plugin-row:last-child{border-bottom:none}
.plugin-head div:nth-child(3),.plugin-head div:nth-child(4){text-align:right}
.pl-name{font-weight:600}
.pl-desc{font-size:13px;color:var(--muted);line-height:1.35}
.pl-price{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
.pl-action{text-align:right}
.badge.paid{background:#d1fae5;color:#047857}
@media(max-width:720px){.plugin-head{display:none}.plugin-row{grid-template-columns:1fr auto;row-gap:4px}.pl-desc{grid-column:1/-1}.pl-price{text-align:left}.pl-action{grid-column:2;grid-row:1}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg-btn{padding:9px 20px;border:none;background:#fff;cursor:pointer;font-weight:600;font-size:14px;color:var(--muted);transition:.15s}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}
.seg-btn:hover{background:var(--soft)}
.seg-btn.active-exp{background:#fef2f2;color:var(--red)}
.seg-btn.active-cred{background:#ecfdf5;color:var(--green)}
.mini-card{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow);line-height:1}
.mini-card .mini-label{font-size:12px;color:var(--muted);font-weight:700}
.mini-card .mini-value{font-size:15px;font-weight:800}
.mini-card .mini-value.green{color:var(--green)}
.mini-card .mini-value.red{color:var(--red)}
.acct-cards{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.acct-card{cursor:pointer;transition:.15s;padding:12px 16px;min-width:170px}
.acct-card .value{font-size:20px}
.acct-card:hover{border-color:#94a3b8;box-shadow:0 4px 10px rgba(100,116,139,.15)}
.card.sel{border-color:var(--brand);box-shadow:0 0 0 2px #cbd5e1}
.logo-box{display:flex;gap:18px;align-items:flex-start}
.logo-preview{width:130px;height:130px;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--soft);overflow:hidden;flex:0 0 auto}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.logo-controls{padding-top:4px}
/* ===== printable estimate sheet ===== */
.doc-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sheet{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-width:900px;margin:0 auto;padding:34px 38px;color:#1e293b}
.sheet-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;background:var(--bg);margin:-34px -38px 20px;padding:24px 38px 18px;border-radius:8px 8px 0 0;border-bottom:3px solid var(--brand);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet-top .biz-name{color:#fff}
.sheet-top .biz-info{color:#cbd5e1}
.biz-block{display:flex;gap:16px;align-items:flex-start}
.sheet-logo{max-height:84px;max-width:180px;object-fit:contain}
.biz-info{font-size:13px;line-height:1.5;color:#475569}
.biz-name{font-size:17px;font-weight:800;color:#1e293b;margin-bottom:2px}
.sheet-title{font-size:30px;font-weight:800;letter-spacing:.06em;color:var(--brand)}
.sheet-parties{display:flex;gap:24px;margin-bottom:18px}
.party-col{flex:1;min-width:0}
.project-box{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--soft)}
.col-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--brand);margin-bottom:6px}
.party-select{margin-bottom:8px;max-width:260px}
.party-info{font-size:13px;line-height:1.55}
.pf{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;margin-bottom:7px;font-size:12px;font-weight:600;color:#334155}
.pf span{font-weight:600}
.pf input{padding:5px 7px}
.meta-row{display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.meta{flex:1;min-width:130px;display:flex;flex-direction:column;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--muted)}
.meta input{text-transform:none;font-weight:400}
.meta-val{font-size:15px;font-weight:700;color:#1e293b;text-transform:none;letter-spacing:0}
.est-table{width:100%;border-collapse:collapse;font-size:12px;min-width:820px}
.est-table th{background:var(--bg);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.03em;padding:8px 8px;text-align:left;white-space:nowrap}
.est-table th.num{text-align:right}
.est-table td{border:1px solid var(--line);padding:3px 5px;vertical-align:middle}
.est-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.est-table input,.est-table select{width:100%;border:1px solid transparent;border-radius:5px;padding:5px 5px;font:inherit;background:transparent}
.est-table input:focus,.est-table select:focus{border-color:var(--brand);outline:none;background:#fff}
.est-table input.w-num{width:64px;text-align:right}
.disc-cell{white-space:nowrap}
.disc-cell input.w-disc{width:56px;display:inline-block;text-align:right}
.disc-cell select{width:42px;display:inline-block}
.tax-cell{white-space:nowrap}
.tax-cell input{width:52px;display:inline-block;text-align:right}
.tax-cell .pct{color:var(--muted)}
.est-totals{margin-left:auto;width:280px;margin-top:14px;font-size:14px}
.est-totals .l{display:flex;justify-content:space-between;padding:5px 0}
.est-totals .l.total{border-top:2px solid var(--brand);margin-top:6px;padding-top:10px;font-weight:800;font-size:17px}
@media print{
  @page{size:letter;margin:0.5in}
  body{background:#fff}
  .sidebar,.doc-toolbar,.no-print{display:none !important}
  .content{padding:0 !important;max-width:none !important}
  #app{display:block}
  .sheet{box-shadow:none;border:none;border-radius:0;margin:0;max-width:none;width:100%;padding:0}
  .sheet-top{margin:0 0 18px 0 !important;border-radius:0 !important}
  .table-wrap{overflow:visible !important}
  .est-table{min-width:0;width:100%;font-size:10.5px}
  .est-table thead{display:table-header-group}
  .est-table th{background:var(--bg) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .est-table input,.est-table select,.meta input,.project-box input,.party-select{border:none !important;background:transparent !important;padding:1px 2px !important;-webkit-appearance:none;appearance:none}
  tr{page-break-inside:avoid}
}
@media(max-width:720px){.sidebar{display:none}.content{padding:18px}.grid2,.grid3{grid-template-columns:1fr}.logo-box{flex-direction:column}.settings-layout{flex-direction:column}.settings-nav{width:100%}.sheet-parties{flex-direction:column}.sheet{padding:20px}.sheet-top{margin:-20px -20px 16px;padding:18px 20px 14px}}

/* ===== check printing: 3-part, check-on-top (check + 2 stub copies) ===== */
.check-page{max-width:900px;margin:0 auto;background:#fff;color:#1e293b}
.check-top{border:1px solid var(--line);border-radius:8px;padding:18px 22px;height:3.4in;box-sizing:border-box;position:relative;overflow:hidden;transform:translate(var(--chk-off-x,0),var(--chk-off-y,0))}
.chk-inner{display:flex;flex-direction:column;gap:10px;height:100%}
.chk-row{display:flex;align-items:flex-end;gap:14px;min-width:0}
.chk-header{justify-content:space-between;align-items:flex-start}
.chk-payer-name{font-weight:800;font-size:15px}
.chk-payer-addr{font-size:11px;color:#475569;line-height:1.4;margin-top:2px}
/* Bank name/address sits in its own middle column — between the payer block (left) and the
   check number/date block (right) — per Derek's layout call. */
.chk-bank-block{font-size:11px;color:#1e293b;line-height:1.4;text-align:center;flex:0 1 auto}
.chk-topright{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.chk-number{font-weight:800;font-size:15px;white-space:nowrap}
.chk-date{font-size:12px;color:#1e293b;white-space:nowrap;margin-top:4px}
.chk-payto{align-items:flex-end;margin-top:-0.06in}
.chk-payto-label{font-size:11px;color:#475569;white-space:nowrap}
.chk-amt-box{border:1px solid #1e293b;border-radius:4px;padding:4px 10px;font-weight:400;font-size:15px;white-space:nowrap}
.chk-words{align-items:flex-end;margin-top:-0.06in}
.chk-dollars{font-size:11px;color:#475569;white-space:nowrap}
/* Fraud-guard fill: after the real payee name / written amount, 4 spaces then a run of asterisks
   that always exactly fills whatever line-space is left, so nothing can be inserted after it. */
.chk-securefill{display:flex;overflow:hidden;min-width:0}
.chk-fill-text{white-space:nowrap;flex:0 0 auto}
.chk-fill-stars{white-space:nowrap;overflow:hidden;flex:1 1 0;min-width:0;letter-spacing:1px;color:#1e293b}
/* Optional payee mailing-address block (windowed-envelope layout) — offset ~3/4in right of the
   payer block above it, only rendered when set. */
.chk-lower{min-height:0}
.chk-payee-block{font-size:11px;color:#1e293b;line-height:1.4;margin-left:0.75in;margin-top:0.09in}
.chk-payee-name{font-weight:700}
.chk-memo-sig{justify-content:space-between;align-items:flex-end;margin-top:-0.125in}
.chk-memo{font-size:11px;color:#475569;display:flex;align-items:flex-end;gap:6px;flex:1}
/* Signature sits bottom-right, over the security-tinted rectangle pre-printed on check stock. */
.chk-sig-wrap{width:220px;text-align:center}
.chk-sig{width:100%}
.chk-sig-caption{font-size:9px;color:#94a3b8;letter-spacing:.03em;margin-top:2px}
.chk-fill{flex:1;min-width:0;border-bottom:1px solid #94a3b8;padding-bottom:2px;font-size:13px;min-height:16px}
/* MICR (routing/account/check#) line sits centered, pinned to the very bottom of the check.
   margin-top:auto pushes it to the bottom of the flex column's free space — this only works
   reliably because .check-top now has a definite (not min-) height, so chk-inner's height:100%
   resolves to a real value instead of 'auto'. justify-content:center (not text-align) is what
   actually centers it: .chk-micr shares the .chk-row class (display:flex), and flex containers
   ignore text-align on their anonymous text child — justify-content is the correct property for
   centering content on a flex container's main axis. */
.chk-micr{margin-top:auto;margin-bottom:0.15in;justify-content:center;font-family:'Covix MICR','Courier New',monospace;font-size:12px;letter-spacing:0.5px;white-space:nowrap;color:#1e293b;width:100%}
.check-stub{border-top:1px dashed var(--line);padding:16px 22px;min-height:3.2in;box-sizing:border-box}
.stub-h{font-size:12px;color:#475569;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.stub-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:12px}
.stub-label{font-weight:700;color:var(--brand);text-transform:uppercase;font-size:10px;letter-spacing:.04em;display:block}
.stub-amt{grid-column:2}
.chk-offset-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chk-offset-controls .field{min-width:110px}
@media print{
  .check-page{max-width:none}
  .check-top{page-break-inside:avoid}
  .check-stub{page-break-inside:avoid}
  .chk-offset-controls{display:none !important}
}