/* ═══════════════════════════════════════════════════════════════════════
   === ACCT (butter-verbatim) ===
   Round 4 — the accounting UI is a straight port of butter's accounting-
   dropin component tree (Dashboard, Invoices, InvoiceForm, InvoiceDetail,
   ClientPicker, Clients, ClientDetail, Expenses, Reports, Settings): same
   markup structure, same layout, same proportions as the butter original,
   re-skinned onto Callsheet's tokens (Schibsted Grotesk, terracotta as
   punctuation only, ink-only money, white cards + hairlines). Controls
   (buttons/inputs/selects/modals/fields/tables) reuse the app's existing
   cc-btn/cc-input/cc-modal/cc-field/cc-tbl primitives verbatim — that's
   the skin seam already applied to every other Callsheet screen. Classes
   below are new, butter-shaped layout that didn't already exist, prefixed
   acct- to avoid collisions; a handful of existing cc-* rules (palette
   grid, chip input, W-9 card, kit picker, scaled doc preview) are
   RESTORED here verbatim because acct.js still renders them — they lived
   in the now-deleted rounds 1-3 accounting CSS and would otherwise be
   lost. One reversible block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   === ACCT SUB-NAV (round 6 — butter's inner panel, restored) ===
   Tomas reversed round 4's inline sidebar fan-out: the tool nav is back as
   butter's own inner sub-nav panel (accounting.html <Sidebar/>, its
   .shell-sidebar), 1:1 on desktop — a ~248px rail between the app's main
   sidebar and the accounting content, pinned "+ New invoice" action, then
   VIEW / COMPANY groups, active item filled black. Same DOM (CC.ui.AcctSubNav)
   flips to a sticky horizontal row under the top bar on mobile via CSS only —
   no JS branching. Breakpoint matches .cc-side's own mobile collapse (860px,
   see the "Mobile" block earlier in this file).
   ═══════════════════════════════════════════════════════════════════════ */
.acct-shell { display: flex; align-items: stretch; flex: 1; min-height: 0; min-width: 0; }
.acct-shell-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* Desktop rail — sticky under the (also-sticky) top bar, own scroller if the
   list ever outgrows the viewport, same idiom as .cc-split2-panel/.cc-gd-rail
   elsewhere in this file. 248px matches butter's own .shell-sidebar width
   (accounting.html) verbatim. */
.acct-subnav {
  width: 248px; flex: none; display: flex; flex-direction: column; gap: 22px;
  padding: 18px 14px; background: var(--cc-surface);
  border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
  margin: 24px 0 24px 26px;
  position: sticky; top: calc(var(--cc-topbar-h) + 16px); align-self: flex-start;
  max-height: calc(100vh - var(--cc-topbar-h) - 40px); overflow-y: auto;
}
/* min-height 40px on the pinned action too (button-box contract: ≥40px tap
   target on mobile) — the shared .cc-btn padding alone falls short of it. */
.acct-subnav-new { width: 100%; justify-content: center; padding: 10px 12px; font-size: 13px; min-height: 40px; white-space: nowrap; }
.acct-subnav-group { display: flex; flex-direction: column; gap: 4px; }
/* Section header — small uppercase, weight/letter-spacing carry the
   hierarchy (never grey: ink at reduced opacity, per the black/white-only
   design bible). Mirrors butter's .side-label. line-height 1.2, not the
   bare /1 shorthand — button-box contract: descender ink can exceed a 1em
   box even on a static label. */
.acct-subnav-label { font: 700 10px/1.2 var(--cc-font); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-ink); opacity: .5; padding: 0 10px; margin-bottom: 2px; }
.acct-subnav-item {
  display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: var(--cc-radius-sm);
  font: 500 13px/1.2 var(--cc-font-soft); color: var(--cc-soft); background: transparent; border: 0;
  text-align: left; width: 100%; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-subnav-item:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.acct-subnav-item.on { background: var(--cc-ink); color: #fff; font-weight: 600; }

/* ── Mobile bar (round 7 — Tomas: "on mobile, the top shouldn't scroll
   horizontally"). Round 6's mobile treatment above (the same 7-item rail
   laid out as a horizontally-scrolling row) is retired outright: it's not
   just replaced with a non-scrolling layout of the SAME items, the item SET
   itself changes on mobile (Estimates/Expenses fold into the Invoices tab;
   Settings drops off the bar entirely, reached only from the Dashboard's
   mobile tool-card grid — see acct.js). CC.ui.AcctSubNav therefore renders
   the desktop rail (.acct-subnav, untouched above) AND this separate mobile
   bar (.acct-mnav) unconditionally, side by side in the DOM — CSS shows
   exactly one of the two per breakpoint (hidden here by default so it never
   paints on desktop; the ≤860px block below both flips it to flex AND hides
   .acct-subnav, matching .cc-side's own 860px collapse). Fixed 5-item strip,
   never a scroller: [+] Dashboard Invoices Clients Reports. */
.acct-mnav { display: none; }
@media (max-width: 860px) {
  .acct-shell { flex-direction: column; }
  .acct-subnav { display: none; }
  .acct-mnav {
    display: flex; align-items: center; gap: 4px;
    width: 100%; margin: 0; padding: 8px 6px;
    background: var(--cc-surface); border: 0; border-bottom: 1px solid var(--cc-line);
    border-radius: 26px 26px 0 0;
    position: sticky; top: var(--cc-topbar-h); z-index: 4;
  }
  /* The one accent moment in the bar — same vermillion-gradient/white-text
     treatment as the top bar's own "+ Post a job" primary (.cc-topcreate),
     reused verbatim so the two "create" affordances in the app read as the
     same control. Fixed 40x40 square (button-box contract: ≥40px tap
     target); the 4 text tabs split whatever width is left. */
  .acct-mnav-plus {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--cc-grad-accent); color: #fff;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .acct-mnav-plus:hover { filter: brightness(1.05); }
  /* flex:1 1 0 + min-width:0 splits the remaining width evenly across the 4
     tabs regardless of label length. The truncate quartet (button-box
     contract) does NOT live on this element even though it's the one that
     needs to shrink: text-overflow:ellipsis on an element that's ALSO a
     flex container (display:flex, needed here for vertical centering)
     silently fails to truncate in Chromium — the button-box probe caught it
     live (scrollWidth 62 > clientWidth 54 on "Dashboard" at 320px, no
     ellipsis painted, real clipped overflow). The quartet moves one level
     down, onto .acct-mnav-item-lbl (a plain non-flex span) below. */
  .acct-mnav-item {
    flex: 1 1 0; min-width: 0; height: 40px; padding: 0 2px; border: 0; border-radius: 10px;
    background: transparent; color: var(--cc-soft); cursor: pointer;
    font: 600 12px/1.2 var(--cc-font-soft);
    display: flex; align-items: center; justify-content: center;
  }
  .acct-mnav-item.on { background: var(--cc-ink); color: #fff; font-weight: 700; }
  .acct-mnav-item-lbl { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  /* Invisible click-catcher — closes the flyout on any tap outside it
     (Escape and picking an action also close it, wired in components.js). */
  .acct-mnav-backdrop { position: fixed; inset: 0; z-index: 25; background: transparent; }
  .acct-mnav-flyout {
    position: absolute; left: 8px; top: 100%; margin-top: 6px; z-index: 30;
    width: 200px; max-width: calc(100vw - 32px);
    background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
    padding: 6px; box-shadow: 0 18px 40px -14px rgba(20,18,12,.35);
    display: flex; flex-direction: column; gap: 2px;
  }
  .acct-mnav-flyout-item {
    display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px;
    border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left;
    font: 600 13px/1.3 var(--cc-font-soft); color: var(--cc-ink);
  }
  .acct-mnav-flyout-item:hover { background: var(--cc-surface-2); }
}
/* ═══ end ACCT SUB-NAV ═══ */

/* Round 5 — desktop sizing: 1080px was choking every accounting page on a
   normal monitor (confirmed cramped at 1440px+); 1560px gives the KPI row /
   dash-grid / editor room to actually use the screen while staying centred
   and readable — same sane-outer-bound idea as the home feed's 1280 cap. */
.acct-maxw { max-width: 1560px; }

/* ── PageHero — title + count line + right-aligned actions (butter's
   PageHero, same proportions as the app's existing .cc-hdr). ── */
.acct-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.acct-hero h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.acct-hero-count { font-size: 12px; color: var(--cc-muted); margin-top: 3px; }
.acct-hero-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Tabs (Owed to you / You owe — GRAFT, a Callsheet-only concept) and
   status-filter pills (butter's sidebar Filter group, now an inline row
   since the inner sub-nav is gone). Monochrome selection. ── */
.acct-tabs { display: flex; gap: 6px; margin: 14px 0 10px; }
.acct-tab { font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); padding: 7px 14px; cursor: pointer; }
.acct-tab.on { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
.acct-tab .cc-num { opacity: .7; margin-left: 4px; }
.acct-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.acct-pill { font: 500 12px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); padding: 6px 12px; cursor: pointer; }
.acct-pill:hover { border-color: var(--cc-faint); }
.acct-pill.on { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }

/* ── Sortable table rows shared by Invoices/Clients/ClientDetail/Dashboard
   "needs attention" — a plain clickable row, overdue rows get the one
   terracotta tint+left-border moment (never red). ── */
.acct-tbl-wrap { margin-top: 4px; }
.cc-tbl .acct-row { cursor: pointer; }
.acct-row.over { border-left: 3px solid var(--cc-accent); background: var(--cc-accent-tint); }
.acct-row.over td:first-child { padding-left: 13px; }
.acct-cell-client { display: inline-flex; align-items: center; gap: 8px; }
.acct-row-del { background: none; border: 0; color: var(--cc-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
.acct-row-del:hover { color: var(--cc-ink); }
.acct-empty-msg { color: var(--cc-muted); font-size: 13px; padding: 20px 4px; }
.acct-loading { color: var(--cc-muted); font-size: 13px; padding: 8px 0; }
.acct-note { color: var(--cc-muted); font-size: 12.5px; line-height: 1.6; }
.acct-note.acct-accent { color: var(--cc-accent-ink); }
.acct-cardlabel { font: 600 11px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 8px; }

/* ── Badges — payment/lifecycle/overdue pills (butter's Badges component),
   monochrome weight/border instead of a hue-coded green/amber/red. ── */
.acct-badges { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acct-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--cc-radius-sm); font: 600 10px/1.5 var(--cc-font-soft); color: var(--cc-muted); background: var(--cc-chip); text-transform: capitalize; }
.acct-badge.on { color: #fff; background: var(--cc-ink); }
.acct-badge-over { color: var(--cc-accent-ink); background: var(--cc-accent-tint); }

/* ── ClientPicker — combobox with a dropdown listbox. ── */
.acct-clientpicker { position: relative; display: inline-block; min-width: min(240px, 100%); max-width: 100%; }
.acct-clientpicker-input { width: 100%; }
.acct-clientpicker-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); box-shadow: 0 6px 24px rgba(20,18,12,.12); max-height: 248px; overflow-y: auto; }
.acct-clientpicker-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.acct-clientpicker-row.hi { background: var(--cc-surface-2); }
.acct-clientpicker-removed { font-size: 11px; color: var(--cc-faint); }
.acct-clientpicker-empty { padding: 8px 12px; font-size: 12px; color: var(--cc-muted); }
.acct-clientpicker-add { padding: 8px 12px; font: 600 12.5px/1.3 var(--cc-font-soft); color: var(--cc-ink); cursor: pointer; border-top: 1px solid var(--cc-line); }
.acct-clientpicker-add.hi { background: var(--cc-surface-2); }

/* ── Clients quick-add row + billing panel (ClientDetail). ── */
.acct-quickadd { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.acct-quickadd .cc-input { flex: 1 1 160px; min-width: 0; }
.acct-billing-panel { margin-bottom: 16px; }
.acct-billing-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.acct-billing-panel-label { font: 600 11px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); }
.acct-billing-panel-label span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.acct-billing-lines { font-size: 13px; color: var(--cc-ink); line-height: 1.6; display: flex; flex-direction: column; }
.acct-billing-empty { font-size: 12.5px; color: var(--cc-muted); }
.acct-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.acct-catchip { font: 600 11px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-chip); border-radius: var(--cc-radius-pill); padding: 3px 9px; }

/* ── KPI cards — Dashboard's 4-up row and ClientDetail's Billed/Paid/
   Outstanding row share this card. ── */
.acct-kpi { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 14px 16px; }
.acct-kpi-label { font: 600 10px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); }
.acct-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-kpi-value.acct-accent { color: var(--cc-accent-ink); }
.acct-kpi-sub { font-size: 11px; color: var(--cc-muted); margin-top: 2px; }
.acct-kpi-row4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* ── RevenueTrend — compact SVG line chart card, Month/Quarter/Year zoom. ── */
/* Round 5 — 360px was sized for the old 1080px maxw; on the new 1560px
   dashboard it'd sit stranded with ~1200px of dead space beside it. The SVG
   scales by viewBox (width:100%/height:auto below), so a wider card just
   reads as a clearer chart, not a stretched one. */
.acct-trend-card { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 14px 16px; margin-bottom: 18px; max-width: 640px; }
.acct-trend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; font: 600 11px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); }
.acct-trend-toggle { display: inline-flex; border: 1px solid var(--cc-line); border-radius: 7px; overflow: hidden; }
.acct-trend-btn { padding: 2px 9px; font: 700 11px/1.8 var(--cc-font); border: 0; background: transparent; color: var(--cc-faint); cursor: pointer; }
.acct-trend-btn.on { background: var(--cc-ink); color: #fff; }
.acct-trend-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ── Dashboard footer grid — Needs-attention + Income-by-category. ── */
.acct-dash-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .acct-dash-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-plaintable { width: 100%; border-collapse: collapse; }
.acct-plaintable td { padding: 8px; border-top: 1px solid var(--cc-line); font-size: 13px; }
.acct-plaintable tr:first-child td { border-top: 0; }
.acct-plaintable td.r { text-align: right; font-weight: 600; }
.acct-plaintable tr.acct-row.over { background: var(--cc-accent-tint); }

/* ── Reports — Income/Expenses/Net three-card layout, year picker + Print. ── */
.acct-reports-grid { display: grid; gap: 16px; }
.acct-cardtotal { display: flex; flex-wrap: wrap; justify-content: space-between; border-top: 2px solid var(--cc-line); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.acct-cardtotal .cc-num { margin-left: auto; }
.acct-netcard { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.acct-netcard span:first-child { font-weight: 700; font-size: 15px; }
.acct-net-fig { font-size: 24px; font-weight: 700; }
.acct-net-fig.neg { color: var(--cc-muted); }

/* ── InvoiceForm / InvoiceEditor — client+date+terms row, line-item grid,
   totals row, live-preview column (sanctioned 5% addition). ── */
/* Round 5 — the preview was a fixed 240–340px sidebar (a doc thumbnail next
   to a huge dead gutter); it's now a true equal partner with the form, both
   sides sharing the row via 1fr so the doc can actually fill the space it's
   given. Form keeps its ≥620px floor so the 6-col line-item grid never
   collapses (that grid bug already happened once). */
.acct-editor-wrap { display: grid; grid-template-columns: minmax(620px, 1fr) minmax(420px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1180px) { .acct-editor-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .acct-editor-wrap { grid-template-columns: minmax(0, 1fr); } }
.acct-editor-preview { position: sticky; top: 18px; }
/* The shared .cc-form primitive caps every OTHER form in the app at 640px —
   correct ergonomics for label+input forms, but wrong here: the editor's
   column is now a fluid ≥620px grid track and the 6-col line-item row wants
   the room. Same specificity as .cc-form (single class), later in source
   order wins, so this is a plain override — no !important needed. */
.acct-editor-form { max-width: none; }
.acct-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.acct-editor-head h2 { margin: 0; font-size: 18px; }
.acct-kindtoggle { display: inline-flex; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); overflow: hidden; }
.acct-kindtoggle-btn { padding: 6px 14px; font: 600 12px/1 var(--cc-font-soft); border: 0; cursor: pointer; background: transparent; color: var(--cc-soft); }
.acct-kindtoggle-btn.on { background: var(--cc-ink); color: #fff; }
.acct-editor-toprow { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; }
.acct-editor-toprow .cc-field { min-width: 160px; }
.acct-linelabel { font: 600 11px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 6px; }
.acct-lines { display: flex; flex-direction: column; gap: 8px; }
.acct-line { display: grid; grid-template-columns: minmax(0,1.6fr) 112px 60px 92px minmax(88px, max-content) 24px; gap: 8px; align-items: center; }
.acct-line .cc-combo, .acct-line .cc-rolepick { min-width: 0; width: 100%; }
.acct-line .cc-combo input, .acct-line .cc-rolepick input { width: 100%; min-width: 0; }
.acct-line-amt { text-align: right; color: var(--cc-soft); }
.acct-line-x { background: none; border: 0; color: var(--cc-muted); cursor: pointer; display: flex; justify-content: center; }
.acct-line-x:hover:not(:disabled) { color: var(--cc-danger-ink, var(--cc-ink)); }
.acct-line-x:disabled { color: var(--cc-faint); cursor: default; }
.acct-line-kit { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; margin-top: -3px; padding-left: 2px; color: var(--cc-faint); }
.acct-line-kit-chip { font: 500 11.5px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm); padding: 4px 8px; }
.acct-lineadd { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.acct-totalsrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: flex-end; border-top: 1px solid var(--cc-line); padding-top: 12px; margin-top: 4px; }
.acct-totalsrow .cc-field { flex: 0 0 auto; }
.acct-totals-fig { color: var(--cc-soft); font-size: 13px; }
.acct-colorrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acct-color-chip { font: 600 11.5px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); padding: 7px 12px; cursor: pointer; }
.acct-color-chip.on { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
.acct-color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.acct-color-swatch.on { border-color: var(--cc-ink); }
/* (superseded — ≤640px line-item layout now lives in the ACCT MOBILE R5
   stacked grid at EOF; the crushed 6-col grid here left the name track ~0px) */

/* ── InvoiceDetail — action row, style picker, the doc as centerpiece,
   payments panel. The doc itself renders inline HTML from
   CC.renderInvoiceDoc — this is just the surrounding stage/card. ── */
.acct-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.acct-w9-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cc-soft); cursor: pointer; user-select: none; }
.acct-styles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.acct-styles-lbl { font: 600 11px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); margin-right: 4px; }
.acct-style-btn { padding: 5px 12px; font: 500 12px/1.3 var(--cc-font-soft); color: var(--cc-soft); background: transparent; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); cursor: pointer; }
.acct-style-btn.on { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
.acct-doc-stage { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 22px; overflow-x: auto; margin-bottom: 18px; }
.acct-doc-frame { width: 100%; }
.acct-payments { margin-top: 4px; }
.acct-payrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acct-paylist { margin-top: 14px; }
.acct-paylist ul { list-style: none; margin: 8px 0 0; padding: 0; }
.acct-paylist li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cc-line); color: var(--cc-soft); font-size: 13px; }
.acct-paylist li button { background: none; border: 0; color: var(--cc-faint); cursor: pointer; font-size: 12px; }
.acct-paylist li button:hover { color: var(--cc-ink); }
@media (max-width: 640px) { .acct-doc-stage { padding: 14px; } }

/* ── AcctSettings — two-column form + live preview (Settings' own version
   of the editor's live-preview layout). Round 5 — the preview column was
   capped minmax(280,380) (a fixed sidebar); now 1fr like the editor, so the
   live-preview doc actually gets a real column to scale into instead of
   being stuck under 380px regardless of how wide the page is. ── */
.acct-settings-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(380px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .acct-settings-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-settings-col { display: flex; flex-direction: column; gap: 16px; }
.acct-settings-col .acct-cardlabel { margin-bottom: 10px; }
/* The form column is now a fluid ≥300px 1fr track, wider than the shared
   .cc-form primitive's 640px cap — without this, "Billed from"/"Defaults"
   (which carry .cc-form) would sit narrower than "Invoice style"/"Palette"
   (which don't), an inconsistent half-cramped column. Scoped to this page's
   columns only, both sides (harmless on the preview side — it has no
   .cc-form descendants). */
.acct-settings-col .cc-form { max-width: none; }

/* ── Restored primitives — still rendered by acct.js, previously part of
   the now-deleted rounds 1-3 accounting CSS. ── */
.cc-palgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.cc-palsw { display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); background: var(--cc-surface); cursor: pointer; }
.cc-palsw:hover { border-color: var(--cc-faint); }
.cc-palsw-strip { display: flex; height: 20px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(20,18,12,.06); }
.cc-palsw-strip span { flex: 1; }
.cc-palsw-name { font: 600 11.5px/1.3 var(--cc-font-soft); color: var(--cc-soft); }
.cc-palsw.on { outline: 2px solid var(--cc-ink); outline-offset: 1px; border-color: transparent; }
.cc-hexrow { display: flex; gap: 8px; align-items: center; }
.cc-hexrow .cc-input { flex: 1; min-width: 0; }
.cc-colorswatch { width: 34px; height: 34px; flex-shrink: 0; padding: 0; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm); background: none; cursor: pointer; }
.cc-chipinput-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 7px 9px; background: var(--cc-surface); }
.cc-chip-blk { display: inline-flex; align-items: center; gap: 5px; background: var(--cc-ink); color: #fff; font: 600 11.5px/1.2 var(--cc-font); padding: 5px 8px; border-radius: var(--cc-radius-sm); max-width: 100%; }
.cc-chip-blk button { background: none; border: 0; color: #fff; opacity: .72; display: flex; padding: 0; cursor: pointer; flex-shrink: 0; }
.cc-chip-blk button:hover { opacity: 1; }
.cc-chipinput-field { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent; font: 500 13px/1.3 var(--cc-font); color: var(--cc-ink); padding: 4px 2px; }
/* Round 5 — the inner doc used to sit at a fixed width:182% (a hardcoded
   inverse of a fixed 0.55 scale) inside a frame capped at max-width:460px;
   together that meant the doc never actually reached its column's real
   width. Both are gone: ScaledDocPreview (acct.js) now measures the frame
   via ResizeObserver and sets the inner's width/scale inline per render, so
   the doc fills whatever column it's given (editor's ~equal-partner column,
   Settings' narrower one) instead of being capped a second time here. */
.cc-docprev-frame { border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); background: #fff; overflow: hidden; position: relative; }
.cc-docprev-inner { transform-origin: top left; pointer-events: none; }
.cc-brandprev { position: sticky; top: 18px; }
.cc-brandprev-lbl { font: 700 10.5px/1 var(--cc-font); text-transform: uppercase; letter-spacing: .08em; color: var(--cc-faint); margin: 0 0 8px 2px; }
.cc-w9card { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 14px 18px; margin-top: 14px; }
.cc-w9-h { display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--cc-font-soft); color: var(--cc-ink); margin-bottom: 10px; }
.cc-w9-h svg { color: var(--cc-soft); }
.cc-w9-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-w9-name { font: 600 13.5px/1.3 var(--cc-font-soft); color: var(--cc-ink); }
.cc-w9-sub { font: 400 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-w9-acts { display: flex; gap: 8px; flex-shrink: 0; }
.cc-kitpick { max-height: 300px; overflow-y: auto; margin: 4px 0; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 6px; }
.cc-kitpick-cat { font: 700 9.5px/1 var(--cc-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-faint); padding: 8px 8px 4px; }
.cc-kitpick-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--cc-radius-sm); cursor: pointer; font: 500 13.5px/1.2 var(--cc-font-soft); color: var(--cc-ink); }
.cc-kitpick-row:hover, .cc-kitpick-row.on { background: var(--cc-surface-2); }
.cc-kitpick-row input { width: 15px; height: 15px; accent-color: var(--cc-accent); flex-shrink: 0; }
.cc-kitpick-add { margin-top: 4px; }
.cc-kitpick-addacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cc-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.cc-th-sort:hover { color: var(--cc-soft); }
.cc-th-sort.r { text-align: right; }

@media (max-width: 640px) {
  .cc-chipinput-field { font-size: 16px; }
  .cc-palgrid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
}

/* ── Print / PDF — the accounting document as a clean, page-by-page
   printout. Drops the app chrome entirely (display:none, no blank pages)
   and lets .acct-doc-frame flow in normal document flow so the browser
   paginates it. Callsheet's ONLY print surface (Reports + InvoiceDetail's
   Print buttons) — the generic chrome-hiding selectors apply to any page
   window.print() is called from, not just accounting. ── */
/* ═══════════════════════════════════════════════════════════════════════
   === Receipt OCR + reimbursement + ZIP + send-composer templates ===
   2026-08 accounting port, PR-C §4 — the photo-first receipt intake shared
   by InvoiceDetail's Add-expense modal, Dashboard's QuickExpenseModal, and
   the Expenses quickadd row; the receipt chip/viewer on Expenses; the
   Reports profit-by-category table; and the send composer's template
   controls. Monochrome, weight/size hierarchy, no grey — same canon as the
   rest of this file.
   ═══════════════════════════════════════════════════════════════════════ */
.acct-receipt-pick { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.acct-receipt-staged { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); background: var(--cc-surface); margin-bottom: 8px; max-width: 100%; }
.acct-receipt-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: var(--cc-radius-sm); flex-shrink: 0; }
.acct-receipt-name { font: 500 12.5px/1.3 var(--cc-font-soft); color: var(--cc-soft); min-width: 0; max-width: 180px; }
.acct-scan-status { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin: 2px 0 10px; }
.acct-quickadd-scan { width: 100%; margin: -8px 0 10px; }
.acct-receipt-chip { background: none; border: 0; color: var(--cc-soft); cursor: pointer; padding: 4px 6px; display: inline-flex; }
.acct-receipt-chip:hover { color: var(--cc-ink); }
.acct-receipt-view { max-width: 100%; max-height: 60vh; display: block; margin: 8px auto; border-radius: var(--cc-radius-md); border: 1px solid var(--cc-line); }
.acct-billit-row { display: flex; gap: 6px; flex-wrap: wrap; }
.acct-tpl-save-link { background: none; border: 0; color: var(--cc-soft); font: 600 12px/1.3 var(--cc-font-soft); cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 2px; }
.acct-tpl-save-link:hover { color: var(--cc-ink); }
.acct-tpl-save-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; }
.acct-tpl-save-row .cc-input { flex: 1 1 160px; min-width: 0; }
.acct-profitcard { margin-bottom: 16px; }
.acct-profit-neg { color: var(--cc-muted); }

@media print {
  @page { margin: 14mm; }
  .cc-side, .cc-dock, .cc-nav-backdrop, .cc-top, .cc-mbar, .acct-detail-actions,
  .acct-styles, .cc-back, .acct-payments, .cc-w9card, .cc-bootload, #cc-toast-root, .cc-modal-bg,
  .acct-subnav { display: none !important; }
  html, body, #root, .cc-main, .cc-body, .cc-maxw, .acct-maxw, .acct-shell, .acct-shell-content {
    display: block !important; margin: 0 !important; padding: 0 !important;
    width: auto !important; max-width: none !important; min-height: 0 !important;
    height: auto !important; overflow: visible !important;
    background: #fff !important; box-shadow: none !important; }
  #root:has(> .cc-dock) { background: #fff !important; }
  .acct-doc-stage { padding: 0 !important; border: 0 !important; background: #fff !important; }
  .acct-doc-frame, .acct-doc-frame * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
/* ═══ end ACCT (butter-verbatim) ═══ */