/* =========================================================================
   IQ Books — design system
   Pass 2 (palette + chrome) and pass 3 (density + engineering) combined.
   Single sans-serif body (DM Sans) with JetBrains Mono for numerics.
   Fraunces is reserved for the IQ brand mark.
   ========================================================================= */

:root {
    /* Surfaces — warm editorial paper throughout (July 2026 elevation pass:
       the blue-grey app chrome was the last holdout against the IQ Suite
       editorial system; these tokens complete the migration, so every
       var-wired surface reads as one product with the dashboard). */
    --bg-page:        #ffffff;
    --bg-canvas:      #faf8f5;
    --bg-sidebar:     #f5f2ed;
    --bg-band:        #f7f4ee;
    --bg-row-hover:   #f5f1e9;
    --bg-row-stripe:  #fbf9f6;
    --bg-panel:       #ffffff;

    /* Borders — warm hairlines, not cool grey */
    --line:           #e4dfd5;
    --line-strong:    #c9c2b5;
    --line-soft:      #efeae1;

    /* Ink — warmed to sit on cream (the old #2d3748/#5b6473 were blue-cast) */
    --ink:            #1a1a1a;
    --ink-soft:       #3d3a34;
    --muted:          #6b6459;
    --muted-soft:     #6f695e;  /* WCAG 1.4.3: ≥4.6:1 on white and on the cream canvas */

    /* Brand — IQ Books editorial ink (was navy #2c4566 — navy "reads as another product") */
    --primary:        #1a1a1a;
    --primary-hover:  #2d2d2d;
    --primary-active: #000000;
    --primary-tint:   #f1efe9;
    --primary-tint-2: #e6e1d7;
    --primary-ink:    #ffffff;

    /* Accent (used sparingly, for highlights only) — RiQ indigo, so the one
       highlight colour belongs to the suite rather than generic link-blue */
    --accent:         #5b6eae;
    --accent-tint:    #eceff7;

    /* Section accent palette — drives the topbar accent strip and breadcrumb tint
       per workspace. Symbolic colour without altering the rest of the chrome. */
    --accent-navy:    #1a1a1a;   /* de-navied: Dashboard/Banking section accent now editorial ink */
    --accent-teal:    #4a9080;
    --accent-coral:   #c4576a;
    --accent-indigo:  #5b6eae;
    --accent-slate:   #6b7280;
    --accent-emerald: #2f7d57;

    /* Status */
    --success:        #15803d;
    --success-tint:   #dcfce7;
    --warning:        #b45309;
    --warning-tint:   #fef3c7;
    --danger:         #b91c1c;
    --danger-tint:    #fee2e2;
    --info:           #1e40af;
    --info-tint:      #dbeafe;

    /* Radius — toward the 2px editorial signature; pills stay 999px */
    --radius:         3px;
    --radius-sm:      2px;
    --radius-lg:      6px;

    /* Shadows — editorial surfaces are drawn with rules and whitespace, not
       elevation. Hairline "press" only; --shadow-pop is reserved for the
       genuinely floating layers (modals, toasts). */
    --shadow-1:       0 1px 0 rgba(26, 22, 15, 0.03);
    --shadow-2:       0 1px 0 rgba(26, 22, 15, 0.04);
    --shadow-pop:     0 12px 32px rgba(26, 22, 15, 0.14);
    --shadow-focus:   0 0 0 3px rgba(26, 26, 26, 0.45);  /* WCAG 2.4.7/1.4.11: visible keyboard focus ring (ink) */

    /* Type */
    --font-sans:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-display:   "Fraunces", Georgia, serif;

    /* Spacing scale */
    --gap-1:          4px;
    --gap-2:          8px;
    --gap-3:          12px;
    --gap-4:          16px;
    --gap-5:          20px;
    --gap-6:          24px;
    --gap-8:          32px;

    /* Max content width for ultrawide displays */
    --content-max:    1280px;
}

/* Supplier payment operations — a calm, auditable payment desk. */
.payment-desk-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr); gap:18px; align-items:start; }
.payment-desk-side { display:grid; gap:18px; }
.payment-desk-builder .panel-header, .payment-run-detail__header { align-items:flex-end; }
.payment-desk-selection, .payment-run-detail__total { display:grid; justify-items:end; gap:2px; white-space:nowrap; }
.payment-desk-selection strong, .payment-run-detail__total strong { font:600 1.65rem/1.1 'Fraunces',serif; color:var(--ink, #17231f); }
.payment-desk-selection small, .payment-run-detail__total small { color:var(--muted, #68736e); }
.payment-run-fields { display:grid; grid-template-columns:1.2fr .8fr 1.4fr; gap:12px; border-bottom:1px solid var(--border, #e3e5df); }
.payment-run-picker tr.is-selected td { background:color-mix(in srgb, var(--accent-teal, #19766b) 7%, transparent); }
.payment-run-picker .check-cell { width:42px; text-align:center; }
.payment-profile-list { display:grid; gap:10px; }
.payment-profile-row, .supplier-bank-row { display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border, #e3e5df); }
.payment-profile-row:last-child, .supplier-bank-row:last-child { border-bottom:0; }
.payment-profile-row p, .payment-profile-row small, .supplier-bank-row p { margin:2px 0 0; color:var(--muted, #68736e); }
.payment-profile-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--accent-teal, #19766b); background:color-mix(in srgb, var(--accent-teal, #19766b) 10%, white); }
.payment-profile-mark svg { width:17px; }
.payment-profile-create { border-top:1px solid var(--border, #e3e5df); }
.payment-profile-create > summary { display:flex; align-items:center; gap:8px; padding:14px 18px; color:var(--accent-teal, #19766b); font-weight:650; cursor:pointer; list-style:none; }
.payment-profile-create > summary::-webkit-details-marker { display:none; }
.payment-profile-create > summary svg { width:17px; }
.payment-run-list { display:grid; }
.payment-run-card { appearance:none; border:0; border-top:1px solid var(--border, #e3e5df); background:transparent; padding:14px 18px; display:grid; grid-template-columns:1fr auto; gap:4px 10px; text-align:left; color:inherit; cursor:pointer; position:relative; }
.payment-run-card:first-child { border-top:0; }
.payment-run-card:hover { background:color-mix(in srgb, var(--accent-teal, #19766b) 5%, transparent); }
.payment-run-card > span:not(.status-pill) { color:var(--muted, #68736e); font-size:.82rem; }
.payment-run-card > b { grid-column:2; grid-row:2; font-family:'JetBrains Mono',monospace; font-size:.86rem; }
.payment-run-card > svg { position:absolute; right:14px; top:17px; width:16px; opacity:.45; }
.payment-run-card__status { justify-self:end; margin-right:22px; }
.payment-run-timeline { display:grid; grid-template-columns:repeat(5,1fr); padding:18px; border-top:1px solid var(--border, #e3e5df); border-bottom:1px solid var(--border, #e3e5df); }
.payment-run-step { display:grid; justify-items:center; gap:7px; color:var(--muted, #68736e); position:relative; text-transform:capitalize; }
.payment-run-step::before { content:''; position:absolute; height:2px; left:-50%; right:50%; top:13px; background:var(--border, #dfe3dc); }
.payment-run-step:first-child::before { display:none; }
.payment-run-step span { width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--border, #dfe3dc); border-radius:50%; background:var(--surface, #fff); font:600 .75rem 'JetBrains Mono',monospace; z-index:1; }
.payment-run-step.is-complete span { border-color:var(--accent-teal, #19766b); background:var(--accent-teal, #19766b); color:white; }
.payment-run-step.is-complete::before { background:var(--accent-teal, #19766b); }
.payment-run-bill { display:block; font-size:.82rem; margin:2px 0; }
.payment-run-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.payment-run-actions p { margin:3px 0 0; }
.supplier-bank-list { padding-top:8px; padding-bottom:8px; }
.supplier-bank-panel .inline-alert { margin-top:4px; }
.payment-profile-empty { padding:38px 20px; }
.text-btn { appearance:none; border:0; background:transparent; color:var(--accent-teal, #19766b); padding:0; display:flex; align-items:center; gap:6px; cursor:pointer; font-weight:650; }
.text-btn svg { width:16px; }
.mono { font-family:'JetBrains Mono',monospace; }

/* Purchase orders — commercial commitments remain visually distinct from bills. */
.po-editor-fields { display:grid; grid-template-columns:1.4fr repeat(5,minmax(120px,1fr)); gap:12px; }
.po-delivery-fields { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; border-top:1px solid var(--line); }
.po-lines { overflow-x:auto; }
.po-line { display:grid; grid-template-columns:minmax(210px,1.7fr) minmax(170px,1.3fr) minmax(130px,1fr) minmax(130px,1fr) 74px 100px 82px 100px 36px; gap:7px; align-items:center; min-width:1160px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.po-line--head { color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.po-line input,.po-line select { min-width:0; width:100%; }
.po-editor-footer { display:flex; align-items:flex-end; justify-content:flex-end; gap:24px; border-top:1px solid var(--line); }
.po-editor-total { display:grid; justify-items:end; }
.po-editor-total span,.po-editor-total small { color:var(--muted); font-size:.75rem; }
.po-editor-total strong,.po-detail-total strong { font:600 1.7rem/1.15 var(--font-display); }
.po-detail-total { display:grid; justify-items:end; gap:6px; }
.po-detail-meta { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.po-detail-meta>div { display:grid; gap:4px; padding:14px 18px; border-right:1px solid var(--line); }
.po-detail-meta>div:last-child { border-right:0; }
.po-detail-meta span { color:var(--muted); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; }
.po-linked-bills { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); }
.po-linked-bills>span { padding:6px 10px; background:var(--bg-canvas); border:1px solid var(--line); border-radius:var(--radius); }
.po-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--line); }
.po-actions p { margin:4px 0 0; }
@media(max-width:1100px){.po-editor-fields{grid-template-columns:repeat(3,1fr)}.po-detail-meta{grid-template-columns:repeat(2,1fr)}.po-detail-meta>div:nth-child(2){border-right:0}}
@media(max-width:720px){.po-editor-fields,.po-delivery-fields,.po-detail-meta{grid-template-columns:1fr}.po-detail-meta>div{border-right:0;border-bottom:1px solid var(--line)}.po-actions,.po-editor-footer{align-items:flex-start;flex-direction:column}.po-editor-total,.po-detail-total{justify-items:start}}

/* Optional feature settings — progressive disclosure, never feature soup. */
.feature-settings-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:24px; align-items:end; padding:26px; background:var(--bg-panel); border:1px solid var(--line); border-top:4px solid var(--ink); }
.feature-settings-intro h2 { margin:5px 0 8px; font:600 1.75rem/1.2 var(--font-display); }
.feature-settings-intro p { margin:0; color:var(--muted); max-width:720px; }
.feature-core { display:flex; align-items:center; gap:12px; padding:14px; background:var(--bg-canvas); border:1px solid var(--line); border-radius:var(--radius); }
.feature-core>svg { color:var(--accent-teal); }
.feature-core div { display:grid; gap:2px; }
.feature-core span { color:var(--muted); font-size:.78rem; }
.feature-module-list { display:grid; gap:10px; margin:18px 0; }
.feature-controls-card { margin:0 0 18px; padding:18px; background:var(--bg-panel); border:1px solid var(--line); border-left:4px solid var(--ink); }
.feature-controls-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.feature-controls-head>svg { color:var(--accent-teal); flex:none; margin-top:2px; }
.feature-controls-head p { margin:2px 0 0; color:var(--muted); font-size:.85rem; }
.feature-controls-list { display:grid; gap:2px; }
.feature-control-row { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.feature-control-row input { margin-top:3px; flex:none; }
.feature-control-row:last-child { border-bottom:0; }
.feature-control-row span { display:grid; gap:2px; }
.feature-control-row small { color:var(--muted); }
.feature-module-card { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:18px; background:var(--bg-panel); border:1px solid var(--line); border-left:4px solid transparent; transition:border-color .15s ease,background .15s ease; }
.feature-module-card.is-enabled { border-left-color:var(--accent-teal); background:color-mix(in srgb,var(--accent-teal) 3%,white); }
.feature-module-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius); background:var(--bg-canvas); color:var(--muted); }
.feature-module-card.is-enabled .feature-module-icon { color:var(--accent-teal); background:color-mix(in srgb,var(--accent-teal) 10%,white); }
.feature-module-title { display:flex; align-items:center; gap:9px; }
.feature-module-title h3,.feature-module-copy p { margin:0; }
.feature-module-copy p { margin-top:4px; color:var(--muted); }
.feature-module-copy small { display:block; margin-top:8px; color:var(--muted); }
.feature-switch { display:grid; grid-template-columns:auto auto; align-items:center; gap:8px; cursor:pointer; }
.feature-switch input { position:absolute; opacity:0; pointer-events:none; }
.feature-switch span { width:42px; height:24px; padding:3px; border-radius:99px; background:var(--line-strong); transition:background .15s ease; }
.feature-switch span::after { content:''; display:block; width:18px; height:18px; border-radius:50%; background:white; box-shadow:var(--shadow-1); transition:transform .15s ease; }
.feature-switch input:checked+span { background:var(--accent-teal); }
.feature-switch input:checked+span::after { transform:translateX(18px); }
.feature-switch input:focus-visible+span { box-shadow:var(--shadow-focus); }
.feature-switch input:disabled+span { opacity:.55; }
.feature-switch b { min-width:54px; font-size:.78rem; }
@media(max-width:760px){.feature-settings-intro{grid-template-columns:1fr}.feature-module-card{grid-template-columns:auto 1fr}.feature-switch{grid-column:2;justify-self:start}}

/* CIS — an optional tax-month desk, visually part of Reports rather than a
   second accounting application. Dense evidence stays tabular; setup recedes. */
.cis-desk { display:grid; gap:16px; }
.cis-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:28px; align-items:end; overflow:hidden; padding:26px 28px; color:#f7f1e5; background:#173f3a; border-left:5px solid #b9844f; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.cis-hero::after { content:'CIS'; position:absolute; right:330px; bottom:-35px; color:rgba(255,255,255,.045); font-family:var(--font-display); font-size:9rem; line-height:1; pointer-events:none; }
.cis-hero h2 { margin:3px 0 7px; color:#f7f1e5; font-family:var(--font-display); font-size:clamp(1.55rem,3vw,2.25rem); font-weight:500; }
.cis-hero p { margin:0; max-width:720px; color:rgba(255,255,255,.74); }
.cis-hero .eyebrow { color:#e5c79d; }
.cis-period span,.cis-period small { color:rgba(255,255,255,.78); }
.cis-period select { background:#fff; color:var(--ink, #16211f); border-color:transparent; }
.cis-readiness { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cis-ready-item { display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; padding:14px 16px; border:1px solid var(--line); background:var(--bg-panel); }
.cis-ready-item>svg { width:20px; color:var(--muted); }
.cis-ready-item div { display:grid; gap:2px; }
.cis-ready-item span { color:var(--muted); font-size:12.5px; }
.cis-ready-item.is-ready { border-top:3px solid var(--accent-teal); padding-top:12px; }
.cis-ready-item.is-ready>svg { color:var(--accent-teal); }
.cis-two-col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
/* A lone panel (e.g. role setup before any role is chosen) takes the full
   width instead of squeezing into half with dead space beside it. */
.cis-two-col > :only-child { grid-column: 1 / -1; }
.cis-role-tabs { display:inline-flex; justify-self:start; gap:4px; padding:4px; border:1px solid var(--line); background:var(--bg-panel); box-shadow:var(--shadow-sm); }
.cis-role-tabs button { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:0; color:var(--muted); background:transparent; font:600 13px var(--font-sans); cursor:pointer; }
.cis-role-tabs button svg { width:16px; }
.cis-role-tabs button.active { color:#fff; background:var(--accent-teal); }
.cis-role-settings { margin-top:4px; }
.cis-role-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.cis-role-choices>label { display:grid; grid-template-columns:auto 28px 1fr; gap:10px; align-items:start; padding:14px; border:1px solid var(--line); background:var(--bg-canvas); cursor:pointer; }
.cis-role-choices>label:has(input:checked) { border-color:var(--accent-teal); background:color-mix(in srgb,var(--accent-teal) 7%,white); }
.cis-role-choices svg { width:19px; color:var(--accent-teal); }
.cis-role-choices span { display:grid; gap:3px; }
.cis-role-choices small { color:var(--muted); line-height:1.4; }
.cis-subcontractor-fields { display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.cis-statement-actions { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.cis-lock { width:18px; color:var(--accent-teal); }
.cis-pds-select { width:34px; }
.cis-email-composer>summary { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; padding:17px 20px; cursor:pointer; list-style:none; }
.cis-email-composer>summary::-webkit-details-marker { display:none; }
.cis-email-composer>summary span { display:grid; gap:2px; }
.cis-email-composer>summary small { color:var(--muted); font-weight:400; }
.cis-return-list { display:grid; gap:12px; }
.cis-return-row { display:flex; justify-content:space-between; gap:14px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); }
.cis-return-row:last-child { border-bottom:0; padding-bottom:0; }
.cis-return-row strong+.status-pill { margin-left:8px; }
.cis-return-row p { margin:4px 0 0; color:var(--muted); font-size:12.5px; }
.cis-setup>summary { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:18px 20px; cursor:pointer; list-style:none; }
.cis-setup>summary::-webkit-details-marker { display:none; }
.cis-setup>summary span:nth-child(2) { display:grid; gap:2px; }
.cis-setup>summary small { color:var(--muted); font-weight:400; }
.cis-footnote { text-align:center; margin:0; font-size:12.5px; }
.cis-line-description { display:grid; gap:4px; min-width:0; }
.cis-line-description input,.cis-line-description select { width:100%; min-width:0; }
.cis-line-description select { font-size:11px; color:#78502d; background:#fcf6ed; border-color:#dfc8aa; }
.cis-verification-block { display:grid; gap:10px; padding:16px; border:1px solid var(--line); background:var(--bg-canvas); }
.cis-verification-block p { margin:0; }
.cis-payment-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); background:var(--line); }
.cis-payment-preview>div { display:grid; gap:4px; padding:13px 15px; background:var(--bg-panel); }
.cis-payment-preview span { color:var(--muted); font-size:12px; }
.cis-payment-preview strong { font-family:var(--font-mono); font-size:15px; }
.cis-payment-preview .is-net { background:color-mix(in srgb,var(--accent-teal) 8%,white); }
.cis-payment-preview .inline-error { grid-column:1/-1; padding:12px 14px; color:var(--danger); background:var(--bg-panel); }
.cis-bookkeeping-path { border:1px solid var(--line-strong); border-top:4px solid var(--accent-teal); background:var(--bg-panel); }
.cis-bookkeeping-path__header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; padding:22px 24px 18px; border-bottom:1px solid var(--line); }
.cis-bookkeeping-path__header h3 { margin:3px 0 6px; font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.55rem); font-weight:550; }
.cis-bookkeeping-path__header p { margin:0; max-width:760px; color:var(--muted); }
.cis-bookkeeping-path__actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cis-bookkeeping-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.cis-bookkeeping-steps>li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; min-height:176px; padding:20px 18px; border-right:1px solid var(--line); }
.cis-bookkeeping-steps>li:last-child { border-right:0; }
.cis-bookkeeping-step__number { display:grid; place-items:center; align-self:start; width:26px; height:26px; border:1px solid var(--line-strong); color:var(--muted); font:600 12px var(--font-mono); border-radius:50%; }
.cis-bookkeeping-step__number svg { width:15px; }
.cis-bookkeeping-steps>li.is-done .cis-bookkeeping-step__number { border-color:var(--accent-teal); color:#fff; background:var(--accent-teal); }
.cis-bookkeeping-steps>li>div { display:flex; flex-direction:column; min-width:0; }
.cis-bookkeeping-steps strong { font-size:13.5px; }
.cis-bookkeeping-step__route { margin-top:4px; color:var(--accent-teal); font:600 10.5px/1.45 var(--font-mono); }
.cis-bookkeeping-steps p { margin:10px 0 12px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.cis-bookkeeping-steps small { margin-top:auto; color:var(--ink-soft); font-weight:600; }
.cis-bookkeeping-path__ledger { display:grid; grid-template-columns:26px 1fr; gap:11px; align-items:start; padding:15px 24px; border-top:1px solid var(--line); background:var(--bg-canvas); }
.cis-bookkeeping-path__ledger>svg { width:19px; color:var(--accent-teal); }
.cis-bookkeeping-path__ledger p { margin:2px 0 0; color:var(--muted); font-size:12.5px; }
.cis-role-intro { padding:13px 15px; border-left:3px solid var(--accent-teal); background:var(--bg-canvas); }
.cis-role-intro p { margin:3px 0 0; color:var(--muted); font-size:12.5px; }
.cis-contact-effect { margin-bottom:14px; }
.cis-allocation-instruction { margin:0; padding:11px 13px; border-left:3px solid var(--accent-teal); color:var(--muted); background:var(--bg-canvas); font-size:12.5px; line-height:1.5; }
.cis-allocation-instruction strong { color:var(--ink); }
@media(max-width:1000px){.cis-bookkeeping-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.cis-bookkeeping-steps>li:nth-child(2){border-right:0}.cis-bookkeeping-steps>li:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:800px){.cis-hero,.cis-two-col,.cis-role-choices{grid-template-columns:1fr}.cis-hero::after{display:none}.cis-readiness{grid-template-columns:1fr}.cis-return-row{align-items:flex-start;flex-direction:column}.cis-role-tabs{display:grid;grid-template-columns:1fr;width:100%}.cis-role-tabs button{justify-content:center}.cis-payment-preview{grid-template-columns:1fr}.cis-bookkeeping-path__header{grid-template-columns:1fr}.cis-bookkeeping-path__actions{justify-content:flex-start}}
@media(max-width:560px){.cis-bookkeeping-steps{grid-template-columns:1fr}.cis-bookkeeping-steps>li{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.cis-bookkeeping-steps>li:last-child{border-bottom:0}.cis-bookkeeping-path__header,.cis-bookkeeping-path__ledger{padding-left:16px;padding-right:16px}}

@media (max-width: 1040px) {
  .payment-desk-grid { grid-template-columns:1fr; }
  .payment-desk-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .payment-desk-side, .payment-run-fields { grid-template-columns:1fr; }
  .payment-desk-builder .panel-header, .payment-run-detail__header, .payment-run-actions { align-items:flex-start; flex-direction:column; }
  .payment-desk-selection, .payment-run-detail__total { justify-items:start; }
  .payment-run-timeline { overflow-x:auto; min-width:560px; }
  .payment-run-detail { overflow:hidden; }
  .supplier-bank-row { grid-template-columns:auto 1fr auto; }
  .supplier-bank-row .secondary-btn { grid-column:2 / -1; justify-self:start; }
}

* { box-sizing: border-box; }

html, body {
    background: var(--bg-page);
    color: var(--ink);
    /* `clip` instead of `hidden` so this doesn't create a scroll container —
       which would break position:sticky on the sidebar. */
    overflow-x: clip;
}

html {
    /* Keep the vertical scrollbar permanently. Otherwise the viewport is
       ~15px narrower on tall views than short ones, so the whole body shifts
       sideways every time a tab switch toggles the scrollbar. (Tested:
       scrollbar-gutter alone does NOT reserve the gutter here — Chromium
       ignores it on a root with clipped overflow-x — so force the track.) */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01" on, "tnum" on;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================================================================
   APP SHELL
   ========================================================================= */

.app-shell {
    min-height: 100vh;
    background: var(--bg-page);
    overflow-x: clip;
}

.boot-panel,
.signed-out {
    width: min(520px, calc(100vw - 32px));
    margin: 14vh auto;
    padding: 36px 32px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
}

.signed-out h1 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink);
}

.signed-out p { color: var(--muted); margin: 8px 0 0; }

.layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 0.18s ease;
}

.layout.sidebar-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
}

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}

h1 { font-size: 1.25rem; font-weight: 600; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }

p { line-height: 1.5; margin: 0; }

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.muted, .field-note {
    color: var(--muted);
    font-size: 0.82rem;
}

/* =========================================================================
   SIDEBAR
   ========================================================================= */

.sidebar-backdrop {
    display: none;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 14px 12px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    transition: padding 0.18s ease;
}

.sidebar.collapsed {
    padding: 14px 6px;
}

/* "The IQ Suite" — a way back up to the suite hub (/dashboard), distinct from
   IQ Books' own Dashboard nav item. Reads as a breadcrumb above the brand. */
.suite-home {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.suite-home > [data-lucide]:first-child,
.suite-home > svg:first-child { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.65; }
.suite-home-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suite-home-go { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0; transform: translateX(-2px); transition: opacity 0.15s ease, transform 0.15s ease; }
.suite-home:hover { color: var(--ink); border-color: var(--line); background: #ffffff; }
.suite-home:hover .suite-home-go { opacity: 0.6; transform: translateX(0); }
.sidebar.collapsed .suite-home { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .suite-home-label,
.sidebar.collapsed .suite-home-go { display: none; }

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--line);
}

.sidebar.collapsed .sidebar-head {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: inherit;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.sidebar.collapsed .brand-mark {
    justify-content: center;
}

.sidebar-toggle {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sidebar-toggle:hover {
    background: var(--bg-page);
    border-color: var(--line);
    color: var(--ink);
}

.sidebar-toggle i { width: 14px; height: 14px; }

.brand-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    background: var(--primary);
    letter-spacing: -0.02em;
}

.brand-copy strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
}

.brand-copy span {
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.org-picker {
    display: grid;
    gap: 6px;
    padding: 0 4px;
}

.org-picker .field span {
    font-size: 0.65rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.org-picker select {
    background: var(--bg-page);
}

/* Icon overlay used only by the mobile compact org-picker. Desktop renders
   the select normally and shows the org name, so the icon is redundant. */
.org-picker .org-picker-icon { display: none; }

.nav-list {
    display: grid;
    gap: 1px;
    margin-top: 4px;
    /* On short viewports the nav must scroll inside its flex slot instead of
       painting over the credits/organisation footer below it. */
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar-foot {
    margin-top: auto;
    display: grid;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* Account chip — the user's IQ Suite avatar + name, links to /account. */
.sidebar-account {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar-account:hover { background: #ffffff; border-color: var(--line); }
.sidebar-account-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-tint, #f1efe9);
}
.sidebar-account-avatar svg,
.sidebar-account-avatar img { width: 100%; height: 100%; display: block; }
.sidebar-account-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.sidebar-account-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-account-email {
    font-size: 0.68rem;
    color: var(--muted-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-account-cog {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sidebar-account:hover .sidebar-account-cog { opacity: 0.7; }

/* Collapsed sidebar — hide labels, center icons, leave just the rail */
.sidebar.collapsed .brand-copy,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .org-picker,
.sidebar.collapsed .sidebar-account-meta,
.sidebar.collapsed .sidebar-account-cog {
    display: none;
}
.sidebar.collapsed .sidebar-account { justify-content: center; padding: 6px 0; }

.sidebar.collapsed .nav-list {
    gap: 4px;
}

.sidebar.collapsed .nav-btn {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 38px;
    margin: 0 auto;
    border-radius: 8px;
    position: relative;
}

.sidebar.collapsed .nav-btn i {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

/* Tooltip on hover when collapsed */
.sidebar.collapsed .nav-btn:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--shadow-pop);
    pointer-events: none;
}

.sidebar.collapsed .nav-btn:hover::before {
    content: "";
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: var(--ink);
    z-index: 100;
}

/* =========================================================================
   BUTTONS — system
   ========================================================================= */

.nav-btn,
.text-btn,
.icon-btn,
.primary-btn,
.secondary-btn,
.danger-btn,
.subnav-btn,
.bank-tab {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.nav-btn {
    justify-content: flex-start;
    padding: 6px 10px;
    color: var(--muted);
    min-height: 32px;
    position: relative;
    border-radius: var(--radius-sm);
}

.nav-btn i {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    opacity: 0.7;
}

.nav-btn:hover {
    color: var(--ink);
    background: var(--bg-page);
}

.nav-btn.active {
    color: var(--primary-ink);
    background: var(--primary);
    font-weight: 600;
}

.nav-btn.active i { opacity: 1; color: var(--primary-ink); }

.primary-btn,
.secondary-btn,
.danger-btn {
    min-height: 30px;
    padding: 0 12px;
    justify-content: center;
}

.primary-btn {
    background: var(--primary);
    color: var(--primary-ink);
    border-color: var(--primary);
    font-weight: 500;
}

.primary-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.primary-btn:active { background: var(--primary-active); }
.primary-btn i { width: 13px; height: 13px; }

.secondary-btn {
    background: var(--bg-page);
    color: var(--ink);
    border-color: var(--line-strong);
}

.secondary-btn:hover {
    background: var(--bg-band);
    border-color: var(--ink-soft);
}

/* Row-action clusters (Send · Share link · Print · Void) — up to five per
   table row, so they whisper at rest and only reach full strength when the
   pointer is on their row. */
td .secondary-btn { min-height: 26px; padding: 0 9px; font-size: 0.72rem; }
td .secondary-btn i { width: 12px; height: 12px; }
tr:not(:hover) td .secondary-btn:not(:hover) { color: var(--muted); border-color: var(--line); }

.secondary-btn i { width: 13px; height: 13px; opacity: 0.7; }

/* CodeIQ enrichment surfaces — branded shading inside IQ Books drafts */
.codeiq-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.codeiq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #c4576a 0%, #9d3f56 100%);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.codeiq-btn:hover { opacity: 0.92; }
.codeiq-btn:disabled { opacity: 0.6; cursor: progress; }
.codeiq-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    /* Hard-shade to white when sitting on coloured surfaces (button + banner) */
    filter: brightness(0) invert(1);
}
.codeiq-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #c4576a 0%, #9d3f56 100%);
    color: #fff;
    padding: 10px 16px;
    font-size: 0.85rem;
}
.codeiq-banner .codeiq-mark { background: rgba(255,255,255,0.22); }
.codeiq-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 3px 8px;
    background: rgba(196, 87, 106, 0.12);
    color: #9d3f56;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
}
.codeiq-chip .codeiq-mark {
    width: 16px;
    height: 16px;
    /* Keep native colours on the soft tinted chip background */
    filter: none;
}

.codeiq-handoff-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px;
    background: linear-gradient(135deg, #fff5f7 0%, #ffeaef 100%);
    border: 1px solid #f5cfd6;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}
.codeiq-handoff-mark {
    flex: 0 0 88px;
    height: 88px;
    /* Crimson tile + white-shaded glyph — the PNG's native artwork is the
       retired purple/pink palette, so it never sits raw on brand surfaces. */
    background: linear-gradient(135deg, #c4576a 0%, #9d3f56 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(196, 87, 106, 0.28);
}
.codeiq-handoff-mark img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.codeiq-handoff-body { flex: 1; }
.codeiq-handoff-body h3 {
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    color: #9d3f56;
    margin: 4px 0 8px;
}
.codeiq-handoff-body p {
    color: var(--ink-soft);
    margin: 0 0 12px;
    font-size: 0.92rem;
}
.codeiq-handoff-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.codeiq-handoff-bullets li {
    padding: 4px 0 4px 22px;
    position: relative;
}
.codeiq-handoff-bullets li::before {
    content: "✓";
    color: #c4576a;
    font-weight: 700;
    position: absolute;
    left: 0;
}

.link-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--ink);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    font: inherit;
}
.link-btn:hover { color: var(--accent); }

.danger-btn {
    background: var(--bg-page);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

.danger-btn:hover { background: var(--danger-tint); }

.text-btn {
    color: var(--primary);
    justify-content: flex-start;
    min-height: 28px;
    padding: 0 4px;
    font-weight: 500;
}

.icon-btn {
    width: 30px;
    height: 30px;
    min-height: 30px;
    justify-content: center;
    border-color: var(--line);
    background: var(--bg-page);
}

.icon-btn:hover { background: var(--bg-band); border-color: var(--line-strong); }
.icon-btn i { width: 13px; height: 13px; opacity: 0.6; }
.icon-btn--danger { color: var(--ciq, #c4576a); }
.icon-btn--danger:hover { background: color-mix(in srgb, var(--ciq, #c4576a) 8%, transparent); border-color: var(--ciq, #c4576a); }
.icon-btn--danger i { opacity: 0.85; }
/* Filled icon button for the primary post action (Confirm / Apply / transfer)
   when the row's controls are icon-only — reads as the main action. */
.icon-btn--primary { background: var(--ink, #2a2620); border-color: var(--ink, #2a2620); color: #fff; }
.icon-btn--primary:hover { background: #000; border-color: #000; }
.icon-btn--primary i { opacity: 1; color: #fff; }

button:disabled,
.primary-btn:disabled,
.secondary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =========================================================================
   MAIN AREA
   ========================================================================= */

.main {
    min-width: 0;
    background: var(--bg-page);
    /* Bottom clearance so the floating RiQ launcher never covers the last
       row of actions (Record receipt, Submit VAT return, edit pencils…). */
    padding: 0 0 84px;
}

/* =========================================================================
   TOPBAR — editorial header per workspace
   Eyebrow row (breadcrumb + org pill) → Headline (Fraunces serif) + actions →
   Subtitle → 2px section-coloured accent strip.
   ========================================================================= */

.topbar {
    display: block;
    padding: 22px max(clamp(20px, 3vw, 32px), calc((100% - var(--content-max)) / 2)) 0;
    background: var(--bg-page);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
    --section-accent: var(--primary);
}

.topbar-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.topbar-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topbar-breadcrumb .bc-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--section-accent) 14%, transparent);
    color: var(--section-accent);
    flex-shrink: 0;
}

.topbar-breadcrumb .bc-icon i { width: 13px; height: 13px; }

.topbar-breadcrumb .bc-section {
    color: var(--section-accent);
    letter-spacing: 0.08em;
}

.topbar-breadcrumb .bc-sep {
    color: var(--muted-soft);
    font-weight: 400;
    margin: 0 2px;
}

.topbar-breadcrumb .bc-sub {
    color: var(--ink-soft);
    letter-spacing: 0.06em;
}

.topbar-org {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.78rem;
    flex-shrink: 0;
    max-width: 280px;
}

.topbar-org i {
    width: 13px;
    height: 13px;
    color: var(--section-accent);
    flex-shrink: 0;
}

.topbar-org span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
}

.topbar-headline-copy {
    min-width: 0;
    flex: 1;
}

.topbar-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.85rem;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.012em;
    margin: 0;
    /* Fraunces ligatures + lining figures look great at this size */
    font-feature-settings: "ss01" on, "lnum" on;
}

.topbar-subtitle {
    color: var(--muted);
    margin: 6px 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    max-width: 720px;
    /* Reserve two lines so the accent bar + everything below stays put when
       the user navigates between subviews with shorter copy. */
    min-height: calc(0.86rem * 1.4 * 2);
}


.topbar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: flex-start;
    padding-top: 4px;
}

.topbar-accent {
    height: 2px;
    background: var(--section-accent);
    border-radius: 0;
    margin: 0 calc(-1 * max(clamp(20px, 3vw, 32px), calc((100% - var(--content-max)) / 2)));
    opacity: 0.85;
}

.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    padding: 0 max(clamp(20px, 3vw, 32px), calc((100% - var(--content-max)) / 2));
    background: var(--bg-band);
    /* Hide the visual scrollbar in every browser — the mask-fade on the right
       edge already telegraphs "scroll for more". Wheel + touch + drag still
       work fine; we just don't draw the bar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Subtle fade on the right edge as a "more content" affordance. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.subnav::-webkit-scrollbar { display: none; }

.subnav::-webkit-scrollbar { height: 4px; }
.subnav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

.subnav-btn {
    min-height: 36px;
    padding: 0 12px;
    color: var(--muted);
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.subnav-btn:hover { color: var(--ink); }

.subnav-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    border-bottom-width: 3px;
    background: var(--bg-panel);
    font-weight: 700;
}

.notice-band {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    background: var(--warning-tint);
    border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line));
    padding: 9px max(clamp(20px, 3vw, 32px), calc((100% - var(--content-max)) / 2));
    font-size: 0.85rem;
}

.notice-band strong { color: var(--ink); }
.notice-band span { color: var(--muted); margin-right: auto; }

#mainContent > .section,
#mainContent > .panel,
#mainContent > .grid-2,
#mainContent > section {
    padding: 16px max(clamp(20px, 3vw, 32px), calc((100% - var(--content-max)) / 2)) 28px;
}

/* LedgerIQ iframe respects the same content-max gutter as every other panel
   so it visually sits inside the topbar's framed content area instead of
   spreading edge-to-edge and triggering a horizontal scroll on wide viewports. */
#mainContent > .ledgeriq-embed {
    padding: 0 max(clamp(20px, 3vw, 32px), calc((100% - var(--content-max)) / 2)) 0 !important;
}

.section {
    display: grid;
    gap: 14px;
}

/* =========================================================================
   METRIC STRIP
   ========================================================================= */

/* Cards-as-grid: 1px hairline dividers via gap + rule background, individual
   cream cells. Same editorial pattern as the dashboard status cards. */
.metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.metric {
    padding: 16px 18px;
    background: var(--cream);
}

.metric span {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.metric strong {
    display: block;
    margin-top: 6px;
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    /* Never break "−£5,563.68" after the minus sign in a narrow column. */
    white-space: nowrap;
}

/* =========================================================================
   PANELS
   ========================================================================= */

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.panel-header,
.panel-body {
    padding: 12px 16px;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-band);
}

.panel-header h3 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.panel-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    /* Same idea as .topbar-subtitle — reserve two lines so the form row
       below sits at the same y-coordinate across subviews. */
    min-height: calc(0.78rem * 1.4 * 2);
}

.panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-actions .compact-check {
    min-height: 32px;
    padding: 0 4px;
    color: var(--muted);
}

.panel-actions .compact-check span {
    font-size: 0.76rem;
    white-space: nowrap;
}

.callout--quiet {
    display: grid;
    gap: 3px;
    border-left: 2px solid var(--line-strong);
    background: var(--bg-band);
    color: var(--muted);
}

.callout--quiet strong {
    color: var(--ink);
}

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.form-subhead {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 6px 0 0;
}

/* =========================================================================
   FORMS
   ========================================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
}

.entry-form {
    display: grid;
    gap: 12px;
}

.field {
    display: grid;
    gap: 5px;
}

.field > span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field > span > small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    opacity: 0.65;
    font-size: 0.92em;
    margin-left: 5px;
}

/* Inline checkbox/radio fields — labels read as prose, not eyebrow style. */
.field--check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    padding: 4px 0;
}

.field--check > input[type="checkbox"],
.field--check > input[type="radio"] {
    width: 16px;
    min-height: 0;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.field--check > span {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.4;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: var(--bg-page);
    color: var(--ink);
    border-radius: var(--radius-sm);
    min-height: 37px;
    padding: 7px 11px;
    /* Form controls do NOT inherit the document font by default — without
       this they render in the UA's system font and read as raw HTML. */
    font-family: inherit;
    font-size: 0.88rem;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); opacity: 1; }

input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }

textarea {
    min-height: 80px;
    padding: 8px 10px;
    line-height: 1.45;
}

input:hover,
select:hover,
textarea:hover { border-color: var(--ink-soft); }

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

button:focus-visible {
    border-color: var(--primary);
}

/* Skip-to-content link (WCAG 2.4.1) — off-screen until keyboard-focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 1000;
    padding: 9px 16px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius);
    text-decoration: none;
}
.skip-link:focus {
    left: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#mainContent:focus { outline: none; }

select {
    /* Crisp stroked chevron (replaces the old pixel-y CSS-triangle). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235b6473' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-position: calc(100% - 10px) 50%;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    cursor: pointer;
    /* A long selected option fades out with an ellipsis instead of hard-clipping
       mid-letter against the chevron. */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* ============================================================
   FILE INPUTS — the raw native "Choose File" grey button was the
   single most unpolished thing in the app. Turn it into an inset,
   branded upload control (button + filename) matching our buttons.
   ============================================================ */
input[type="file"] {
    padding: 0;
    color: var(--muted);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}
input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    height: 30px;
    margin: 0 13px 0 0;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--cream, #faf8f5);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
input[type="file"]:hover::file-selector-button { background: var(--ink); color: var(--cream, #faf8f5); }
/* Legacy WebKit alias (older Chrome/Safari) */
input[type="file"]::-webkit-file-upload-button {
    font: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    height: 30px;
    margin: 0 13px 0 0;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--cream, #faf8f5);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
input[type="file"]:hover::-webkit-file-upload-button { background: var(--ink); color: var(--cream, #faf8f5); }

/* Native date/month picker indicator — muted, hover-emphasised */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.14s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }

/* ============================================================
   .filedrop — premium upload control: a real drop-or-browse zone
   (icon + prompt + filename) with the native file input overlaid
   invisibly, so click AND drag-drop work with no extra handlers.
   Matches the receipt-capture dropzone language.
   ============================================================ */
.filedrop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border: 1.5px dashed var(--line-strong);
    border-radius: 2px;
    background: var(--bg-page);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.filedrop:hover,
.filedrop.drag {
    border-color: var(--section-accent, var(--ink));
    background: color-mix(in srgb, var(--section-accent, var(--ink)) 5%, var(--bg-page));
}
.filedrop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.filedrop input[type="file"]::file-selector-button,
.filedrop input[type="file"]::-webkit-file-upload-button { display: none; }
.filedrop-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--section-accent, var(--ink)) 11%, transparent);
    color: var(--section-accent, var(--ink));
}
.filedrop-icon svg { width: 18px; height: 18px; }
.filedrop-text {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.35;
    min-width: 0;
}
.filedrop-text strong { color: var(--ink); font-weight: 600; }
.filedrop-name {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--section-accent, var(--ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filedrop.has-file { border-style: solid; border-color: var(--section-accent, var(--ink)); }

/* Attachments: the raw file input is triggered by the styled "Upload file"
   label beside it — hide the redundant native control so only the button shows. */
.attachment-input { display: none; }

/* Money/quantity fields: strip the native number spinners (up/down arrows) —
   they're noise on financial inputs and never used for entry here. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Inline loading glyphs actually spin (the lucide 'loader' is otherwise a
   frozen static icon next to "Running…"/"Fetching…"/"Posting…"). */
[data-lucide="loader"],
svg.lucide-loader,
.lucide-loader {
    animation: iqb-spin 0.7s linear infinite;
    transform-origin: center;
}
@keyframes iqb-spin { to { transform: rotate(360deg); } }

.span-2 { grid-column: span 2; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* =========================================================================
   SETUP / CREATE ORG
   ========================================================================= */

.setup-form {
    display: grid;
    gap: 24px;
}

.setup-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--line);
}
.setup-hero h2 {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 28px;
    margin: 4px 0 8px;
    letter-spacing: -0.01em;
}
.setup-hero .eyebrow { color: var(--text-muted, #888); }
.setup-hero p.muted { max-width: 540px; line-height: 1.5; }

.setup-stepper {
    list-style: none;
    margin: 0;
    padding: 14px 28px;
    display: flex;
    gap: 24px;
    background: var(--bg-band);
    border-bottom: 1px solid var(--line);
    counter-reset: step;
}
.setup-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #888);
    font-size: 13px;
    font-weight: 500;
}
.setup-step .setup-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-cream, #faf8f5);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}
.setup-step.active { color: var(--ink); }
.setup-step.active .setup-step-num { background: var(--ink); color: var(--bg-cream, #faf8f5); border-color: var(--ink); }
.setup-step.done .setup-step-num { background: var(--liq, #4a9080); color: #fff; border-color: var(--liq); }
.setup-step.done .setup-step-num::before { content: '✓'; }
.setup-step.done .setup-step-num { font-size: 0; }
.setup-step.done .setup-step-num::before { font-size: 13px; }

.setup-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 4px 0 22px;
    border-bottom: 1px solid var(--line);
}
.setup-section:last-of-type { border-bottom: 0; padding-bottom: 0; }

.setup-section-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 4px;
}
.setup-section-num {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-cream, #faf8f5);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif, 'Fraunces', serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}
.setup-section-head h3 {
    font-size: 1.05rem;
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.setup-section-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.setup-coa-preview { margin-top: 6px; }
.setup-after-card {
    margin-top: 4px;
    padding: 18px 22px;
    border-radius: var(--radius);
    background: var(--bg-band);
    border: 1px dashed var(--line);
}
.setup-after-card h4 {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-style: italic;
    margin: 0 0 8px;
    font-size: 1rem;
}
.setup-after-card ul { margin: 0; padding-left: 18px; }
.setup-after-card li { margin: 4px 0; line-height: 1.45; font-size: 0.88rem; color: var(--ink); }

.setup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
}

.field-hint {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .setup-hero { flex-direction: column; padding: 20px; }
    .setup-stepper { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
    .setup-section { padding: 4px 0 18px; }
    .setup-section-head { gap: 10px; }
    .setup-actions { flex-direction: column; }
    .setup-actions button { width: 100%; }
}

.profile-preview {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-band);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 8px;
}

.profile-preview > div:first-child strong { display: block; font-weight: 600; }
.profile-preview > div:first-child p { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; }

.account-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.account-preview span {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    background: var(--bg-page);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    color: var(--muted);
    font-size: 0.74rem;
}

.account-preview strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* =========================================================================
   POSTING SHAPE
   ========================================================================= */

.posting-shape { display: grid; gap: 6px; }
.posting-shape div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 2px 10px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}
.posting-shape div:last-child { border-bottom: 0; padding-bottom: 0; }
.posting-shape strong {
    grid-row: span 2;
    font-family: var(--font-mono);
    color: var(--primary);
    font-weight: 600;
}
.posting-shape em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
}

/* =========================================================================
   JOURNAL LINE GRID
   ========================================================================= */

.journal-line-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr);
    gap: 6px;
    align-items: center;
}

/* When VAT picker is shown alongside account/memo/debit/credit */
.journal-line-grid.journal-line-grid-vat {
    grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(110px, 0.6fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr);
}

.journal-line-grid > strong {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =========================================================================
   TABLES
   ========================================================================= */

/* Tables read as defined objects, not loose text on the page: panel ground,
   a real border, a soft radius and a hairline lift. This single container is
   what separates "structured financial data" from "mildly styled HTML". */
.table-wrap {
    overflow-x: auto;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
                0 4px 12px rgba(16, 24, 40, 0.07);
}
/* When a table-wrap sits directly under a filter band inside the same panel,
   merge them into one object rather than stacking two boxes. */
.table-controls + .table-wrap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    /* Lining + tabular numerals on EVERY table cell so columns of numbers
       align by place value without needing a monospace font (Rutter, Ström,
       Datawrapper). Modern sans gives us this for free. */
    font-variant-numeric: lining-nums tabular-nums;
}

/* Tables stay fluid by default. Tables that *genuinely* need a horizontal
   scroll on narrow screens opt in via .table--wide. .table-wrap still
   handles overflow when content does spill — but it no longer forces it. */
table.table--wide {
    min-width: 720px;
}

/* Tables in narrow grid-2 side panels: column-flex so name/email collapse
   gracefully and don't trip the overflow scrollbar. */
.grid-2 .panel .table-wrap {
    overflow-x: auto;
}
.grid-2 .panel table {
    min-width: 0;
    table-layout: auto;
}

/* Soft vertical column rules — the structural signal that most separates a
   curated financial table from a bare HTML one. Kept light so it organises
   the grid without caging it; last column has no trailing rule. */
th, td {
    border-right: 1px solid var(--line-soft);
}
tr > th:last-child,
tr > td:last-child {
    border-right: 0;
}

th, td {
    text-align: left;
    /* Density target: 22px horizontal gives every column real breathing room
       (Pandle uses 26px; we sit slightly tighter to fit 7-column workspace
       widths). 14px vertical → ~46px row height with 13.5px body — UI Prep
       "regular" density. */
    padding: 14px 22px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

/* Editorial header treatment: small uppercase muted label, no fill, hairline
   under the header row in ink-soft (not full ink — the rule should sit
   quietly, not declare a section). Data is the figure; header is the ground. */
/* A real header band: a tinted ground and a definite 2px rule under it so
   the column labels read as the frame around the data, not a faint whisper
   that disappears into the page. */
thead tr { background: #e9edf3; }

th {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--muted-soft);
    background: #e9edf3;
    white-space: nowrap;
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Body cells get a softer, lower-contrast ink so the data reads calmly
   instead of shouting (Pandle's main calm trick). Full ink is reserved for
   headlines and primary actions; tables sit at #3a3a3a. */
tbody td {
    color: #3a3a3a;
}

tbody tr {
    transition: background 0.08s ease;
}

/* Zebra striping: alternate rows carry a faint stripe so the eye can track
   a figure straight across a wide 7-column cashbook without a ruler. Hover
   lifts the targeted row clearly above the stripe. This is the structure
   that was missing — rows now have rhythm instead of floating. */
tbody tr:nth-child(even) {
    background: #f3f5f9;
}
tbody tr:hover,
tbody tr:nth-child(even):hover {
    background: #e6ecf6;
}

td.money,
th.money {
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

/* Stacked cell content: primary line (full body weight + colour) on top,
   small muted subtext underneath for codes / refs / secondary labels.
   Replaces the need for separate JE#, bank, source columns. */
.cell-primary { line-height: 1.35; }
.cell-subtext {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.3;
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
}
.cell-subtext .link-btn {
    color: var(--muted);
    text-decoration: none;
}
.cell-subtext .link-btn:hover {
    color: var(--ink);
    text-decoration: underline;
}
.cell-subtext .sep {
    color: var(--muted-soft, #b8b5ad);
    font-size: 0.68rem;
}
/* In right-aligned money cells the subtext row should hug the right edge
   too, so "382d oldest" sits under the amount it annotates. */
td.money .cell-subtext { justify-content: flex-end; }

/* Signed amount tones — desaturated so urgency whispers (per Ström: tints
   reserved for genuine signal; here the +/- direction is the signal). */
.amount-pos { color: #4a7d5e; }
.amount-neg { color: #a55a5a; }

/* Totals / subtotal rows — the only place a background tint is permitted
   (Ström: data domain shifts only). Heavier top rule signals "this is the
   summary row, not just another data row". */
tfoot td,
tr.row-total td,
tr.report-section-row td {
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    background: var(--bg-band);
    font-weight: 700;
    color: var(--ink);
    padding-top: 15px;
    padding-bottom: 15px;
}
/* De-emphasise empty money cells (£0.00 / —) so real figures carry the
   visual weight and ageing reports stop reading as a wall of noise. */
td.money.is-zero,
td.money[data-zero] {
    color: var(--muted-soft);
}

td.table-action {
    text-align: right;
    white-space: nowrap;
}

td.table-action .primary-btn,
td.table-action .secondary-btn,
td.table-action .danger-btn,
td.table-action .icon-btn {
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.78rem;
}

td.table-action .icon-btn { width: 26px; height: 26px; padding: 0; }

/* Reveal-on-hover for action icons — keeps every row calm by default,
   surfaces controls only on the row the user is targeting (Coyle).
   Touch devices (no hover) keep actions persistently visible. */
@media (hover: hover) {
    td.table-action .icon-btn,
    td.table-action .primary-btn,
    td.table-action .secondary-btn,
    td.table-action .danger-btn {
        opacity: 0;
        transition: opacity 0.12s ease;
    }
    tbody tr:hover td.table-action .icon-btn,
    tbody tr:hover td.table-action .primary-btn,
    tbody tr:hover td.table-action .secondary-btn,
    tbody tr:hover td.table-action .danger-btn,
    tbody tr:focus-within td.table-action .icon-btn,
    tbody tr:focus-within td.table-action .primary-btn,
    tbody tr:focus-within td.table-action .secondary-btn,
    tbody tr:focus-within td.table-action .danger-btn {
        opacity: 1;
    }
}

/* Bank transactions / drafts review table. It carries many columns (select,
   category picker, VAT code + amount, money in/out) so it can overflow its
   wrapper — pin the action column to the right edge so Confirm is always
   reachable without horizontal scrolling, and keep the Confirm/Save buttons
   visible (the generic reveal-on-hover above is wrong for a review table whose
   whole job is confirming). Backgrounds mirror the row striping/hover so
   scrolled cells are occluded cleanly. */
.bank-tx-table thead th:last-child,
.bank-tx-table td.table-action {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -8px 0 8px -8px rgba(26, 22, 15, 0.16);
}
.bank-tx-table thead th:last-child { background: var(--bg-panel); }
.bank-tx-table td.table-action { background: var(--bg-panel); }
.bank-tx-table tbody tr:nth-child(even) td.table-action { background: var(--bg-panel); }
.bank-tx-table tbody tr:hover td.table-action { background: var(--bg-row-hover); }
.bank-tx-table td.table-action .primary-btn,
.bank-tx-table td.table-action .secondary-btn { opacity: 1 !important; }

/* Compact so the whole row fits without horizontal scrolling. The big driver
   was the 120px min-width on every in-cell select/input (3 per row); let them
   shrink to share the available width instead. Plus tighter padding/font and a
   capped CodeIQ chip so a long account name can't stretch the category column. */
.bank-tx-table { font-size: 0.8rem; width: 100%; }
/* Fixed layout on the drafts review table so toggling "Bill payment" (which
   swaps a narrow VAT select for a wider bill dropdown) can't resize columns. */
.bank-tx-table--fixed { table-layout: fixed; }
/* Fixed-layout cells must clip their own overflow — an overlong date used to
   paint over the description's first characters ("SHELL" read as "HELL"). */
.bank-tx-table--fixed td, .bank-tx-table--fixed th { overflow: hidden; }
.bank-tx-table--fixed td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-tx-table--fixed .money-input { min-width: 0; }
.bank-tx-table--fixed .tx-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-tx-table .pay-col { text-align: center; }
.bank-tx-table .pay-col i { width: 15px; height: 15px; opacity: 0.55; vertical-align: middle; }
.bank-tx-table .pay-cell { text-align: center; }
.pay-check { margin: 0; cursor: pointer; accent-color: var(--liq, #4a9080); }
/* Once a value is chosen the label can be long; drop the chevron and reclaim its
   padding so the text isn't overlaid by the arrow. Empty selects keep it. */
.bank-tx-table .table-select.has-value {
    background-image: none;
    padding-right: 8px;
    text-overflow: ellipsis;
}
.bank-tx-table th,
.bank-tx-table td { padding-left: 7px; padding-right: 7px; }
.bank-tx-table .table-select,
.bank-tx-table .table-input { min-width: 0; width: 100%; font-size: 0.78rem; }
/* VAT amount can't collapse below its value — "1034.70" was clipping. */
.bank-tx-table .money-input { min-width: 78px; padding-left: 5px; padding-right: 6px; }
.bank-tx-table .codeiq-chip {
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Manual invoice-match picker — open-bill/invoice list (dedicated layout, not
   the space-between .alloc-row which off-kilters a radio-first row). */
.mi-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 340px; overflow-y: auto; }
.mi-list .mi-empty { margin: 6px 2px; }
.mi-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--line, #e7e1d6);
    border-radius: 2px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.mi-row:hover { background: var(--bg-band, #f6f2ea); }
.mi-row input[type="radio"] { margin: 2px 0 0; flex: 0 0 auto; }
.mi-row .mi-doc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-row .mi-num { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mi-row .mi-meta { font-size: 12px; color: var(--ink-soft, #6b6459); }
.mi-row .mi-tag {
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--liq, #4a9080); background: color-mix(in srgb, var(--liq, #4a9080) 12%, transparent);
    padding: 1px 6px; border-radius: 2px;
}
.mi-row.is-exact { border-color: color-mix(in srgb, var(--liq, #4a9080) 55%, var(--line, #e7e1d6)); }
.mi-hint {
    margin: 12px 2px 0;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 11px;
    border-radius: 2px;
    border-left: 2px solid var(--line, #e7e1d6);
    background: var(--bg-band, #f6f2ea);
    color: var(--ink-soft, #6b6459);
}
.mi-hint--ok   { border-left-color: var(--liq, #4a9080); }
.mi-hint--part { border-left-color: var(--bronze, #a8762e); }
.mi-hint--over { border-left-color: var(--ciq, #c4576a); }
.mi-hint--fx   { border-left-color: var(--riq, #5b6eae); }
.mi-hint strong { color: var(--ink, #2a2620); }
/* Review-drafts coding cell — a clean vertical stack (select / provenance /
   match link), so nothing off-kilters beside the dropdown. */
.review-coding { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.review-coding .table-select { width: 100%; }
.review-coding .codeiq-chip { margin: 0; }
/* "Bill/Invoice payment" toggle that swaps the row into settlement mode. */
.pay-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-soft, #6b6459); cursor: pointer; user-select: none; white-space: nowrap; }
.pay-toggle input { margin: 0; cursor: pointer; accent-color: var(--liq, #4a9080); }
.pay-toggle:hover { color: var(--ink, #2a2620); }
/* Settlement outcome shown in the VAT-amount column while in pay-mode. */
.pay-note { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 2px; white-space: nowrap; }
.pay-note--ok   { color: var(--liq, #4a9080);  background: color-mix(in srgb, var(--liq, #4a9080) 12%, transparent); }
.pay-note--part { color: var(--bronze, #a8762e); background: color-mix(in srgb, var(--bronze, #a8762e) 14%, transparent); }
.pay-note--over { color: var(--ciq, #c4576a);  background: color-mix(in srgb, var(--ciq, #c4576a) 12%, transparent); }
.pay-note--fx   { color: var(--riq, #5b6eae);  background: color-mix(in srgb, var(--riq, #5b6eae) 12%, transparent); }
/* Compact CodeIQ provenance badge (no repeated account name, no stray bar). */
.ciq-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 12px;
    background: rgba(196, 87, 106, 0.10); color: #9d3f56;
    font-size: 0.68rem; font-weight: 500; white-space: nowrap;
}
.ciq-badge .codeiq-mark { width: 14px; height: 14px; }
/* Invoice/bill match chip — a tidy tagged pill, not a name floating on a bar. */
.ciq-matchchip {
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 100%;
    padding: 4px 10px; border-radius: 2px;
    background: color-mix(in srgb, var(--liq, #4a9080) 9%, transparent);
    border-left: 2px solid var(--liq, #4a9080);
    color: var(--ink, #2a2620); font-size: 0.74rem; line-height: 1.35;
}
.ciq-matchchip > i { width: 13px; height: 13px; color: var(--liq, #4a9080); flex: 0 0 auto; }
.ciq-matchchip .ciq-matchtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ciq-matchchip .ciq-by {
    flex: 0 0 auto; font-size: 0.6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: #9d3f56; background: rgba(196, 87, 106, 0.12); padding: 1px 5px; border-radius: 2px;
}
/* Subtle "match to a bill/invoice" / "unmatch" affordance. */
.matchlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    color: var(--ciq, #c4576a);
    opacity: 0.85;
}
.matchlink:hover { opacity: 1; text-decoration: underline; }
.matchlink i { width: 12px; height: 12px; }
.matchlink--clear { color: var(--ink-soft, #6b6459); }
.bank-tx-table td.table-action { padding-left: 8px; }
.bank-tx-table td.table-action .primary-btn,
.bank-tx-table td.table-action .secondary-btn { padding: 0 7px; }

.table-select,
.table-input {
    min-height: 28px;
    min-width: 120px;
    padding: 3px 8px;
    font-size: 0.78rem;
}

.money-input {
    max-width: 92px;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* A nil/zero value in a numeric cell — shown as a quiet em-dash so columns of
   real figures read cleanly and the eye isn't pulled to rows of £0.00. */
.cell-nil { color: var(--muted-soft); }

/* =========================================================================
   PILLS — type and status
   ========================================================================= */

.type-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

/* Status / type pills — colour lives in the text and a soft tinted border;
   no saturated fill (Ström/Rutter: monochromatic by default, tints reserved
   for genuine domain shifts). */
.status-pill.posted,
.status-pill.confirmed,
.type-pill.asset {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 28%, var(--line));
}

.status-pill.issued {
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 28%, var(--line));
}

.status-pill.partial {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
}

.status-pill.draft {
    color: var(--muted);
    border-color: var(--line-strong);
}

.status-pill.ignored {
    color: var(--muted-soft);
    border-color: var(--line);
}

.type-pill.liability { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, var(--line)); }
.type-pill.revenue   { color: var(--info);    border-color: color-mix(in srgb, var(--info) 28%, var(--line)); }
.type-pill.expense   { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.type-pill.equity    { color: var(--info);    border-color: color-mix(in srgb, var(--info) 28%, var(--line)); }
.type-pill.suspense  { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }

/* =========================================================================
   OPENING BALANCE / DYNAMIC ROW
   ========================================================================= */

/* Column headers for the opening-balance editor — same track sizing as
   .ob-row so labels sit over their fields (parity with the adjustments grid). */
.ob-head {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(100px, 0.8fr) minmax(120px, 1fr) minmax(150px, 1.4fr) 30px;
    gap: 6px;
    margin-bottom: 6px;
}
.ob-head > span {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ob-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(100px, 0.8fr) minmax(120px, 1fr) minmax(150px, 1.4fr) 30px;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

/* Soft warning when a document's currency differs from the contact's default. */
.ccy-mismatch-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 4px;
    padding: 8px 11px;
    border-radius: 2px;
    border-left: 2px solid var(--bronze, #a8762e);
    background: color-mix(in srgb, var(--bronze, #a8762e) 10%, transparent);
    color: var(--ink, #2a2620);
    font-size: 12.5px;
    line-height: 1.4;
}
.ccy-mismatch-note i { width: 15px; height: 15px; color: var(--bronze, #a8762e); flex: 0 0 auto; }
.ccy-mismatch-note strong { font-weight: 600; }
/* display:flex above beats the UA's [hidden]{display:none} — restate it, or the
   note renders as an empty amber strip whenever the currency matches. */
.ccy-mismatch-note[hidden] { display: none; }
.balance-line {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.balance-line strong { color: var(--ink); }
/* The gross figure is the one that matters — let it lead. */
.balance-line span:last-child { color: var(--ink); }
.balance-line span:last-child strong { font-size: 1.05rem; font-weight: 700; }

/* =========================================================================
   INVOICE / BILL LINE-ITEM EDITOR
   A proper headed grid — Account · Description · Qty · Unit price · VAT % ·
   Project · (remove). Replaces the old 5-column .ob-row reuse, which crushed
   VAT % into a 30px cell and wrapped Project/remove onto a second line.
   ========================================================================= */

.line-items {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-panel);
}

.line-items-head,
.line-row {
    display: grid;
    grid-template-columns:
        minmax(124px, 1.3fr)   /* item      */
        minmax(120px, 1.3fr)   /* account   */
        minmax(130px, 1.7fr)   /* description */
        66px                   /* qty       */
        98px                   /* unit price */
        178px                  /* vat (code + amount) */
        minmax(92px, 0.9fr)    /* project   */
        30px;                  /* remove    */
    gap: 8px;
    align-items: center;
}

/* No products in the catalogue → the Item cell renders as a hidden input
   (display:none, occupies no grid track), so the whole grid must drop the
   item column or every cell shifts one column left of its header. */
.line-items--no-item .line-items-head,
.line-items--no-item .line-row {
    grid-template-columns:
        minmax(120px, 1.3fr)   /* account   */
        minmax(130px, 1.7fr)   /* description */
        66px                   /* qty       */
        98px                   /* unit price */
        178px                  /* vat (code + amount) */
        minmax(92px, 0.9fr)    /* project   */
        30px;                  /* remove    */
}

.line-items-head {
    padding: 8px 12px;
    background: var(--bg-subtle, color-mix(in srgb, var(--line) 22%, transparent));
    border-bottom: 1px solid var(--line);
}

.line-items-head > span {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-items-head > span.num { text-align: right; }

.line-row {
    padding: 10px 12px;
}
.line-row + .line-row { border-top: 1px solid var(--line-soft); }

/* "Add line" sits under the editor as a compact button, not a full-width
   pill (grid children otherwise stretch to the column width). */
.entry-form > .secondary-btn { justify-self: start; padding: 0 14px; }

/* Inputs/selects fill their cell — the column already sizes them, so no field
   gets clipped and nothing wraps. */
.line-row > input,
.line-row > select { width: 100%; min-width: 0; }
.line-row .money-input { max-width: none; }

/* VAT cell: a code picker + an editable VAT-amount box sharing one column,
   used by the sales/purchase line editors and the edit-invoice modal. */
.vat-cell {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.vat-cell select.line-vat { flex: 1 1 auto; min-width: 0; }
.vat-cell .vat-amt {
    flex: 0 0 66px;
    width: 66px;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.vat-cell .vat-amt[readonly] { opacity: 0.6; cursor: not-allowed; }

/* Receipt allocation rows: label + amount sit together at a sensible width
   instead of stretching across the full-width panel. */
.alloc-list { display: grid; gap: 6px; }
.alloc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
    align-items: center;
    max-width: 560px;
}
.alloc-row .alloc-label { font-size: 0.85rem; }
.alloc-row .money-input { max-width: none; width: 100%; }

/* =========================================================================
   TOAST
   ========================================================================= */

.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: min(380px, calc(100vw - 32px));
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    padding: 10px 14px;
    box-shadow: var(--shadow-pop);
    font-size: 0.85rem;
    z-index: 30;
    line-height: 1.4;
}

.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* =========================================================================
   EMPTY STATES
   ========================================================================= */

.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--muted);
}

.empty-state h3 {
    margin-bottom: 4px;
    color: var(--ink);
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
}

.empty-state p {
    color: var(--muted);
    font-size: 0.85rem;
}

.hidden { display: none !important; }

/* =========================================================================
   TABLE CONTROLS — search, filter, sort, pagination
   ========================================================================= */

.table-controls {
    border-bottom: 1px solid var(--line);
    background: var(--bg-band);
    padding: 12px 16px;
}

/* Native inputs in the filter band were raw browser chrome — the single
   biggest "unfinished HTML" tell. Give every control one consistent
   bordered, rounded shape with a real focus ring. */
.filter-row input[type="search"],
.filter-row input[type="text"],
.filter-row input[type="date"],
.filter-row input[type="number"],
.filter-row select,
.inline-field input,
.inline-field select {
    height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--bg-page);
    padding: 0 10px;
    font-size: 0.8rem;
    color: var(--ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.filter-row input:focus,
.filter-row select:focus,
.inline-field input:focus,
.inline-field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}
.filter-row input[type="checkbox"],
.inline-field input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filter-row > input[type="search"] {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 360px;
}

.inline-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}

.inline-field > span {
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
}

.inline-field input,
.inline-field select {
    min-height: 28px;
    padding: 4px 8px;
    width: auto;
    min-width: 110px;
}

/* Checkboxes must escape the text-input treatment above — the 110px
   min-width + border/background was stretching them into empty boxes. */
.inline-field input[type="checkbox"] {
    min-width: 0;
    min-height: 0;
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    background: transparent;
}

th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    color: var(--ink);
}

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--line);
    background: var(--bg-band);
}

.pager-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Footer pager under a table-wrap (e.g. the drafts review tab). */
.table-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--bg-panel);
    font-size: 0.82rem;
}
.table-pager .pager-page { color: var(--muted-soft); font-variant-numeric: tabular-nums; }

/* MTD filed/receipt confirmation card (VAT + ITSA). Replaces the submit form
   once a period has been filed: success header, key/value receipt grid. */
.mtd-filed { border-color: color-mix(in srgb, #1f9d6b 40%, var(--line-strong)); }
.mtd-filed-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: color-mix(in srgb, #1f9d6b 9%, transparent);
    border-bottom: 1px solid color-mix(in srgb, #1f9d6b 24%, var(--line));
    border-radius: 10px 10px 0 0;
}
.mtd-filed-head h3 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.mtd-filed-head p { margin: 0; }
.mtd-filed-tick {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: #1f9d6b; color: #fff;
}
.mtd-filed-tick svg { width: 20px; height: 20px; }
.filed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
}
@media (max-width: 760px) { .filed-grid { grid-template-columns: 1fr; } }
.filed-kv { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.filed-kv span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-soft); }
.filed-kv strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================================
   FINAL DECLARATION (MTD ITSA crystallisation) — gated stepper UX
   ========================================================================= */
.fd-railwrap { padding: 0; overflow: hidden; }
.fd-steps {
    display: flex;
    list-style: none;
    margin: 0; padding: 4px 6px;
    counter-reset: fd;
}
.fd-step { flex: 1 1 0; position: relative; min-width: 0; }
/* connector line between steps */
.fd-step::before {
    content: "";
    position: absolute; top: 30px; left: -50%; width: 100%; height: 2px;
    background: var(--line-strong); z-index: 0;
}
.fd-step:first-child::before { display: none; }
.fd-step.is-active::before, .fd-step.is-done::before { background: var(--accent-teal); }
.fd-step-btn {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    width: 100%; padding: 14px 6px 12px; border: 0; background: none; cursor: pointer;
    color: var(--muted-soft); font-family: var(--font-body, inherit);
}
.fd-step-btn[disabled] { cursor: default; }
.fd-step-num {
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 999px; border: 2px solid var(--line-strong); background: var(--bg-panel);
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--muted-soft);
    transition: all .15s ease;
}
.fd-step-num svg { width: 16px; height: 16px; }
.fd-step-label { font-size: 12.5px; font-weight: 500; letter-spacing: .01em; text-align: center; }
.fd-step.is-done .fd-step-num { background: var(--accent-teal); border-color: var(--accent-teal); color: #fff; }
.fd-step.is-active .fd-step-num { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-tint); }
.fd-step.is-active .fd-step-label { color: var(--ink); font-weight: 600; }
.fd-step.is-done .fd-step-label { color: var(--ink); }

/* readiness — HMRC band + checklist */
.fd-band {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--bg-subtle, #f7f9fc); margin-bottom: 16px;
}
.fd-band.is-good { border-color: color-mix(in srgb, var(--accent-teal) 40%, var(--line-strong)); background: color-mix(in srgb, var(--accent-teal) 7%, transparent); }
.fd-band strong { display: block; font-family: var(--font-display); font-weight: 500; }
.fd-band .muted { font-size: 13px; }
.fd-band-actions { display: flex; align-items: center; gap: 10px; }
.fd-checks { display: flex; flex-direction: column; gap: 2px; }
.fd-check { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.fd-check:last-child { border-bottom: 0; }
.fd-check-icon { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; }
.fd-check-icon svg { width: 15px; height: 15px; }
.fd-check.is-ok .fd-check-icon { background: color-mix(in srgb, #1f9d6b 15%, transparent); color: #157a52; }
.fd-check.is-warn .fd-check-icon { background: color-mix(in srgb, #d98a2b 18%, transparent); color: #b9701a; }
.fd-check.is-pending .fd-check-icon { background: var(--line); color: var(--muted-soft); }
.fd-check-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fd-check-body strong { font-weight: 600; font-size: 14px; }
.fd-check-body .muted { font-size: 12.5px; }
.fd-check-fix { flex: 0 0 auto; border: 0; background: none; color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.fd-check-fix svg { width: 14px; height: 14px; }
.fd-year { min-height: 34px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-panel); font-size: 13px; }

/* income — self-employment card + opt-in source accordion */
.fd-se-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--bg-subtle, #f7f9fc); margin-bottom: 18px; }
.fd-se-card > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.fd-se-card strong { font-family: var(--font-display); font-weight: 500; }
.fd-se-card .muted { font-size: 12.5px; }
.fd-subhead { font-family: var(--font-display); font-weight: 500; font-size: 15px; margin: 4px 0 10px; }
.fd-sources { display: flex; flex-direction: column; gap: 8px; }
.fd-source { border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; background: var(--bg-panel); }
.fd-source[open] { border-color: var(--primary-tint-2); }
.fd-source-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
.fd-source-head::-webkit-details-marker { display: none; }
.fd-source-name { display: flex; flex-direction: column; gap: 1px; font-weight: 600; font-size: 14px; }
.fd-source-name .muted { font-weight: 400; font-size: 12.5px; }
.fd-source-val { font-family: var(--font-mono); font-size: 14px; color: var(--muted-soft); }
.fd-source-val.is-set { color: var(--accent-teal); font-weight: 600; }
.fd-source-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.fd-tally { margin-top: 14px; padding: 12px 16px; border-radius: 2px; background: var(--primary-tint); color: var(--primary-active); font-size: 13.5px; }
.fd-tally strong { font-family: var(--font-mono); }

/* computation */
.fd-calc-cta { text-align: center; padding: 28px 16px; }
.fd-sandbox-scenario { max-width: 460px; margin: 0 auto 18px; text-align: left; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--accent-teal) 45%, var(--line)); border-radius: 2px; background: color-mix(in srgb, var(--accent-teal) 6%, transparent); }
.fd-sandbox-scenario label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-teal); margin-bottom: 6px; }
.fd-sandbox-scenario label svg { width: 14px; height: 14px; }
.fd-sandbox-scenario select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-sans); font-size: 13px; background: var(--bg-panel); color: var(--ink); }
.fd-sandbox-scenario .muted { display: block; margin-top: 6px; font-size: 11.5px; }
.fd-error { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 2px; background: color-mix(in srgb, #c4576a 12%, transparent); color: #8f2d3f; font-size: 13.5px; }
.fd-error svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

/* review — RiQ sense-check */
.fd-sensecheck { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 2px; border: 1px solid var(--primary-tint-2); background: var(--primary-tint); }
.fd-sensecheck-mark { flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--primary); background: #fff; border-radius: 8px; padding: 4px 9px; letter-spacing: .02em; }
.fd-sensecheck p { margin: 0; font-size: 13.5px; line-height: 1.5; }

/* declare — the heaviest, set-apart panel */
.fd-declare { border: 1.5px solid var(--primary); }
.fd-declare-head { padding: 16px 18px; background: var(--primary-tint); border-bottom: 1px solid var(--primary-tint-2); border-radius: 9px 9px 0 0; }
.fd-declare-head h3 { margin: 0; font-family: var(--font-display); font-weight: 500; }
.fd-declare-figs { display: flex; gap: 28px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.fd-declare-figs > div { display: flex; flex-direction: column; gap: 2px; }
.fd-declare-figs small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-soft); }
.fd-declare-figs strong { font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
.fd-declare-statement { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.fd-declare-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.fd-declare-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.fd-irreversible { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 2px; background: color-mix(in srgb, #d98a2b 14%, transparent); color: #8a5413; font-size: 13px; }
.fd-irreversible svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.iqb-btn--lg { padding: 0 22px; min-height: 46px; font-size: 15px; }

@media (max-width: 760px) {
    .fd-step-label { display: none; }
    .fd-declare-figs { gap: 18px; }
}

/* ===== Statutory accounts (Companies House iXBRL) — acc-* ===== */
.acc-railwrap { margin: 18px 0 8px; }
.acc-steps { display: flex; align-items: flex-start; }
.acc-step { flex: 1; position: relative; }
.acc-step:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: 50%; right: -50%; height: 2px; background: var(--line); z-index: 0; }
.acc-step.is-done::after { background: var(--accent-teal); }
.acc-step-btn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; background: none; border: 0; cursor: pointer; padding: 0; font-family: var(--font-sans); }
.acc-step-btn[disabled] { cursor: default; }
.acc-step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-panel); border: 2px solid var(--line); color: var(--muted); font-weight: 600; font-size: 14px; }
.acc-step-num svg { width: 16px; height: 16px; }
.acc-step.is-active .acc-step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.acc-step.is-done .acc-step-num { background: var(--accent-teal); border-color: var(--accent-teal); color: #fff; }
.acc-step-label { font-size: 12.5px; color: var(--muted); text-align: center; }
.acc-step.is-active .acc-step-label { color: var(--ink); font-weight: 600; }

.acc-band { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--primary-tint); margin-bottom: 18px; }
.acc-band strong { display: block; font-size: 14px; }
.acc-band .muted { font-size: 12.5px; }

.acc-subhead { font-family: var(--font-display); font-size: 15px; margin: 22px 0 10px; color: var(--ink); }
.acc-frameworks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc-framework-card { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 2px; background: var(--bg-panel); cursor: pointer; position: relative; }
.acc-framework-card.is-selected { border-color: var(--primary); background: var(--primary-tint); }
.acc-framework-card strong { font-size: 14.5px; }
.acc-framework-card .muted { font-size: 12px; line-height: 1.45; }
.acc-fw-check { position: absolute; top: 12px; right: 12px; color: var(--primary); }
.acc-fw-check svg { width: 18px; height: 18px; }

.acc-checks { display: grid; gap: 8px; margin-bottom: 12px; }
.acc-check { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); }
.acc-check.is-ok { background: color-mix(in srgb, var(--accent-teal) 7%, transparent); }
.acc-check.is-warn { background: color-mix(in srgb, #d98a2b 12%, transparent); }
.acc-check-icon svg { width: 18px; height: 18px; }
.acc-check.is-ok .acc-check-icon { color: var(--accent-teal); }
.acc-check.is-warn .acc-check-icon { color: #b06a16; }
.acc-check-body strong { display: block; font-size: 13.5px; }
.acc-check-body .muted { font-size: 12px; }
.acc-elig-verdict { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; }
.acc-elig-verdict.is-ok { background: color-mix(in srgb, var(--accent-teal) 12%, transparent); color: #1a7a57; }
.acc-elig-verdict.is-warn { background: color-mix(in srgb, #d98a2b 14%, transparent); color: #8a5413; }
.acc-elig-verdict svg { width: 18px; height: 18px; }

.acc-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 4px; }
.acc-dormant { flex-direction: row; align-items: center; gap: 8px; }
.acc-dormant input { width: 18px; height: 18px; }

.acc-map { display: grid; gap: 10px; }
.acc-map-group { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.acc-map-group > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: var(--primary-tint); list-style: none; }
.acc-map-group > summary::-webkit-details-marker { display: none; }
.acc-map-grouptitle { font-weight: 600; font-size: 13.5px; flex: 1; }
.acc-map-grouptotal { font-family: var(--font-mono); font-size: 13px; }
.acc-map-ok { color: var(--accent-teal); display: flex; }
.acc-map-ok svg { width: 16px; height: 16px; }
.acc-map-row { display: grid; grid-template-columns: 64px 1fr 110px 230px; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); }
.acc-map-code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.acc-map-name { font-size: 13px; }
.acc-map-tag { font-size: 10.5px; background: var(--primary-tint); color: var(--primary); padding: 1px 6px; border-radius: 999px; }
.acc-map-amt { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.acc-map-target { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; font-family: var(--font-sans); background: var(--bg-panel); color: var(--ink); }
.acc-map-unmapped { border: 1px solid color-mix(in srgb, #d98a2b 40%, var(--line)); border-radius: 2px; padding: 12px 14px; margin-bottom: 12px; background: color-mix(in srgb, #d98a2b 8%, transparent); }
.acc-map-unmapped strong { display: flex; align-items: center; gap: 8px; }
.acc-map-unmapped svg { width: 16px; height: 16px; }
.count-pill.is-good { background: color-mix(in srgb, var(--accent-teal) 16%, transparent); color: #1a7a57; }
.count-pill.is-bad { background: color-mix(in srgb, #d98a2b 16%, transparent); color: #8a5413; }

/* the document artefact — reads like genuine filed accounts */
.acc-doc-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 2px; background: color-mix(in srgb, #c4576a 12%, transparent); color: #8f2d3f; font-size: 13.5px; margin-bottom: 14px; }
.acc-doc-warn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.acc-doc-wrap { background: var(--bg-page); padding: 26px; border-radius: 2px; display: flex; justify-content: center; }
.acc-doc { background: #fff; width: 100%; max-width: 820px; padding: 56px 64px; box-shadow: 0 6px 30px rgba(20,30,50,.10); border: 1px solid var(--line); color: #1a1a1a; }
.acc-doc-cover { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.acc-doc-cover h1 { font-family: var(--font-display); font-size: 28px; margin: 0 0 4px; letter-spacing: -.01em; }
.acc-doc-reg { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.acc-doc-missing { color: #b06a16; }
.acc-doc-title { font-family: var(--font-display); font-size: 19px; margin: 0; }
.acc-doc-sub { font-size: 13px; margin: 2px 0 0; }
.acc-doc-section { margin-bottom: 34px; }
.acc-doc-section-title { font-family: var(--font-display); font-size: 17px; margin: 0 0 2px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acc-doc-asat { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.acc-stmt { width: 100%; border-collapse: collapse; }
.acc-stmt-head th { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; padding: 0 0 6px; border-bottom: 1px solid #d9dde3; color: var(--muted); }
.acc-stmt-head th:first-child { text-align: left; }
.acc-stmt td { padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid #f0f1f3; }
.acc-stmt-caption { padding-right: 16px; }
.acc-stmt-num { font-family: var(--font-mono); font-size: 13px; text-align: right; width: 120px; white-space: nowrap; }
.acc-stmt-sub td { font-weight: 600; border-top: 1px solid #c9ced6; border-bottom: none; }
.acc-stmt-total td { font-weight: 700; border-top: 2px solid #1a1a1a; border-bottom: 3px double #1a1a1a; }
.acc-stmt-tag { font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--muted); background: var(--primary-tint); padding: 2px 9px; border-radius: 999px; }
.acc-doc-approval { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fcfcfb; font-size: 12.5px; }
.acc-doc-approval p { margin: 0 0 8px; line-height: 1.5; }
.acc-doc-sign { margin-top: 14px; }
.acc-doc-sigline { height: 1px; background: #1a1a1a; width: 200px; margin: 18px 0 6px; }
.acc-doc-signname { font-weight: 600; margin: 0; }
.acc-doc-notes { margin: 0; padding-left: 20px; font-size: 13px; }
.acc-doc-notes li { margin-bottom: 12px; line-height: 1.5; }
.acc-note-tbl { width: 65%; margin: 8px 0 2px; }
.acc-note-tbl td { padding: 3px 0; font-size: 12.5px; border-bottom: 1px solid #f0f1f3; }

.acc-tag-summary { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 2px; border: 1px solid var(--line); background: var(--primary-tint); margin-bottom: 16px; }
.acc-tag-summary svg { width: 26px; height: 26px; color: var(--primary); flex: 0 0 auto; }
.acc-tag-summary strong { display: block; font-size: 14px; margin-bottom: 2px; }
.acc-tag-summary .muted { font-size: 12.5px; line-height: 1.5; }
.acc-tag-summary.is-ok { background: color-mix(in srgb, var(--accent-teal) 10%, transparent); border-color: color-mix(in srgb, var(--accent-teal) 40%, var(--line)); }
.acc-tag-summary.is-ok svg { color: var(--accent-teal); }
.acc-tag-summary.is-bad { background: color-mix(in srgb, #c4576a 10%, transparent); border-color: color-mix(in srgb, #c4576a 40%, var(--line)); }
.acc-tag-summary.is-bad svg { color: #b0394f; }
.acc-tag-cta { text-align: center; padding: 10px 0 4px; }
.acc-tag-errs { margin: 0 0 12px; padding-left: 20px; font-size: 12.5px; color: #8f2d3f; }
.acc-tag-errs li { margin-bottom: 4px; }
.acc-tag-actions { display: flex; gap: 10px; margin-bottom: 8px; }

.acc-declare-figs { display: flex; gap: 30px; flex-wrap: wrap; padding: 14px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.acc-declare-figs > div { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 20px; }
.acc-declare-figs small { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.acc-declare-statement { font-size: 13.5px; line-height: 1.55; margin: 4px 0 14px; }
.acc-declare-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.acc-declare-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.acc-irreversible { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 2px; background: color-mix(in srgb, #d98a2b 14%, transparent); color: #8a5413; font-size: 13px; }
.acc-irreversible svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.acc-file-summary { margin-bottom: 16px; }
.acc-review-actions { justify-content: flex-end; gap: 10px; }

@media (max-width: 760px) {
    .acc-step-label { display: none; }
    .acc-frameworks, .acc-setup-grid { grid-template-columns: 1fr; }
    .acc-map-row { grid-template-columns: 1fr 90px; }
    .acc-doc { padding: 28px 22px; }
}

/* Small count chip next to a section heading. */
.count-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-navy, #2c4566) 12%, transparent);
    color: var(--accent-navy, #2c4566);
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.journal-line-table .muted {
    color: var(--muted-soft);
    font-size: 0.8rem;
}

/* =========================================================================
   LOADING / SPINNER
   ========================================================================= */

.loading-screen {
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 80px 20px;
}

.loading-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =========================================================================
   ACCESSIBLE SCROLLBARS
   ========================================================================= */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 6px;
    border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* =========================================================================
   BANK LIST + DETAIL
   ========================================================================= */

.bank-list-table tbody tr {
    cursor: pointer;
}

.bank-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 22px 26px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
                0 4px 12px rgba(16, 24, 40, 0.07);
}

/* Count chip — turns a bare "N drafts" string into a defined object that
   reads at a glance: amber when work is waiting, calm green when clear. */
.count-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
}
.count-chip strong { font-size: 0.86rem; font-weight: 700; }
.count-chip.is-attention {
    background: var(--warning-tint);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--warning);
}
.count-chip.is-clear {
    background: color-mix(in srgb, var(--accent-teal) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-teal) 30%, transparent);
    color: var(--accent-teal);
}

.bank-summary > div:first-child {
    display: grid;
    gap: 4px;
}

/* Echoes the dashboard "CASH ON HAND" hero: mono eyebrow, Fraunces
   display figure, mono meta line. Keeps the inner workspaces reading at
   the same editorial bar the dashboard sets. */
.bank-summary .bank-balance {
    font-family: var(--serif);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    margin: 1px 0;
}

.bank-summary .muted {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--ink-3);
}

.bank-summary > div:first-child .muted:last-child {
    text-transform: none;
    letter-spacing: 0.01em;
}

.bank-summary-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 4px;
}

/* Reconciled marker — replaces the bare ✓/· glyphs. Filled teal dot reads
   as "healthy / reconciled" (LiQ symbolism); hollow ring as outstanding.
   Legible at a glance down a long cashbook without shouting. */
.recon-col {
    width: 48px;
    text-align: center;
}

th.recon-col {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.recon-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.recon-dot.is-on {
    background: var(--liq);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--liq) 16%, transparent);
}

.recon-dot.is-off {
    background: transparent;
    border: 1.5px solid var(--rule-strong);
}

.bank-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--line);
    margin: 0;
}

.bank-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    padding: 9px 0;
    border-radius: 0;
    min-height: 0;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: -1px;
}

.bank-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    border-bottom-width: 3px;
    font-weight: 700;
}

.bank-tab:hover { color: var(--ink); }

/* =========================================================================
   REPORT TOTAL ROW + NET LINE
   ========================================================================= */

.report-total-row td {
    border-top: 2px solid var(--line-strong);
    border-bottom: 0;
    background: var(--bg-band);
    font-weight: 600;
}

.report-total-row td:first-child { color: var(--ink); }

/* =========================================================================
   IMPORT DATA workspace — entity picker + drop zone
   ========================================================================= */
.import-entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

@media (min-width: 760px) {
    .import-entity-grid {
        /* 4 cards = exactly 2x2 on desktop, no orphaned card on a row alone. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .import-entity-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.import-entity-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.import-entity-card:hover { border-color: var(--ink); }
.import-entity-card.active {
    border-color: var(--ink);
    background: var(--bg-cream, #faf8f5);
}
.import-entity-card input[type="radio"] { display: none; }
.import-entity-card strong { font-size: 14px; }
.import-entity-card .muted { font-size: 12px; line-height: 1.4; }

.import-dropzone {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted, #666);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg-cream, #faf8f5);
}
.import-dropzone:hover, .import-dropzone.drag {
    border-color: var(--ink);
    background: #fff;
}
.import-dropzone i { width: 32px; height: 32px; margin-bottom: 8px; color: var(--text-muted, #888); }
.import-dropzone p { margin: 4px 0; font-size: 14px; }
.import-dropzone code { background: var(--bg-band); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

.doc-type-chip.doc-sent {
    background: #e8f1ee;
    color: #2d6f5f;
    border-color: #b8d8cf;
}
.doc-type-chip.doc-opened {
    background: #eaf0fb;
    color: #3a5ba0;
    border-color: #c3d3f0;
    gap: 4px;
}
.doc-type-chip.doc-opened i { width: 11px; height: 11px; }
.doc-type-chip.doc-deposit {
    background: #fbf3e4;
    color: #8a6116;
    border-color: #e8d5a8;
}

/* Deposit request control (new-invoice form + edit modal) */
.deposit-inline { display: flex; gap: 8px; align-items: center; }
.deposit-inline select { flex: 0 0 auto; }
.deposit-inline input { width: 110px; }

.report-section-row td {
    background: var(--bg-band);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

/* Aged-debtors / creditors: clarifying row when GL balance differs from
   sum of open invoices (typically opening balances brought forward). */
.aged-unalloc-row td {
    background: var(--bg-cream, #faf8f5);
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    color: var(--ink);
    font-style: italic;
    padding: 10px 12px;
}
.aged-unalloc-row .muted { font-style: normal; }

.notice-band {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-cream, #faf8f5);
    border-left: 3px solid var(--liq, #4a9080);
    border-radius: var(--radius);
    align-items: flex-start;
    line-height: 1.5;
}
.notice-band i { margin-top: 3px; flex-shrink: 0; color: var(--liq); }
.notice-band strong { display: block; margin-bottom: 4px; }
.notice-band .muted { font-size: 0.88rem; }

/* =========================================================================
   ORGANISATION LOGO CONTROLS
   ========================================================================= */
.org-logo-controls {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
    padding: 20px 24px;
}
.org-logo-preview {
    width: 220px;
    height: 140px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--bg-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.org-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.org-logo-placeholder {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}
.org-logo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
@media (max-width: 700px) {
    .org-logo-controls { grid-template-columns: 1fr; }
}

/* =========================================================================
   PRINTABLE DOCUMENT (invoice + statement) — full-page branded layout
   ========================================================================= */
.print-shell {
    background: #fff;
    color: #1a1a1a;
    padding: 48px;
    max-width: 820px;
    margin: 0 auto;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.print-shell .print-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.print-doc { padding: 32px 40px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.print-doc-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.print-doc-head img.print-logo { max-height: 80px; max-width: 280px; object-fit: contain; }
.print-doc h1 { font-family: 'Fraunces', serif; font-size: 32px; margin: 0 0 4px; letter-spacing: -0.02em; }
.print-doc h1.print-doc-title-credit { color: var(--ciq); }
.print-doc h1.print-doc-title-quote { color: var(--liq); }
.print-doc .print-meta { font-size: 12px; line-height: 1.6; color: #555; }
.print-doc .print-meta strong { color: #1a1a1a; }
.print-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.print-party-block h4 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin: 0 0 8px; }
.print-party-block p { margin: 0; line-height: 1.5; font-size: 14px; }
.print-doc table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.print-doc th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #888; text-align: left; padding: 10px 8px; border-bottom: 2px solid #1a1a1a; }
.print-doc th.money, .print-doc td.money { text-align: right; }
.print-doc td { padding: 10px 8px; border-bottom: 1px solid #ececec; font-size: 14px; vertical-align: top; }
.print-doc tfoot td { border-bottom: 0; font-size: 14px; padding: 6px 8px; }
.print-doc tfoot tr.print-grand td { border-top: 2px solid #1a1a1a; font-weight: 600; font-size: 16px; padding-top: 12px; }
.print-doc .print-notes { margin-top: 24px; padding: 16px; background: #faf8f5; border-left: 3px solid var(--liq); font-size: 13px; line-height: 1.5; }
.print-doc .print-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #ececec; font-size: 11px; color: #888; line-height: 1.5; text-align: center; }

/* ── Invoice design templates (organisations.settings.invoice) ─────────────
   One skeleton, four personalities, driven by data-template + --inv-accent.
   Classic = the original look (serif, ruled). Modern = accent band + big
   total. Minimal = hairlines and whitespace. Bold = solid accent masthead. */
.print-doc { --inv-accent: #1d3a52; }

.print-doc .print-pay {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px 24px;
    padding: 14px 16px;
    background: #faf8f5;
    border: 1px solid #ececec;
    border-radius: 8px;
    font-size: 12.5px;
}
.print-doc .print-pay h4 { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin: 0 0 2px; }
.print-doc .print-pay span { color: #777; }
.print-doc .print-pay strong { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12.5px; }
.print-doc .print-terms { margin-top: 16px; font-size: 12px; color: #666; line-height: 1.55; white-space: pre-line; }

/* classic — accent touches only */
.print-doc[data-template="classic"] h1 { color: var(--inv-accent); }
.print-doc[data-template="classic"] tfoot tr.print-grand td { border-top-color: var(--inv-accent); }

/* modern — sans masthead on an accent band, airy table */
.print-doc[data-template="modern"] h1 { font-family: 'DM Sans', sans-serif; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.print-doc[data-template="modern"] .print-doc-head {
    background: var(--inv-accent);
    color: #fff;
    margin: -32px -40px 32px;
    padding: 28px 40px;
    border-radius: 6px 6px 0 0;
}
.print-doc[data-template="modern"] .print-doc-head .print-meta { color: rgba(255,255,255,0.85); }
.print-doc[data-template="modern"] .print-doc-head .print-meta strong { color: #fff; }
.print-doc[data-template="modern"] .print-doc-head h2 { color: #fff; }
.print-doc[data-template="modern"] th { border-bottom: 2px solid var(--inv-accent); color: var(--inv-accent); }
.print-doc[data-template="modern"] tfoot tr.print-grand td { border-top: none; background: var(--inv-accent); color: #fff; border-radius: 6px; }

/* minimal — hairlines, small-caps title, restraint */
.print-doc[data-template="minimal"] h1 { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: #1a1a1a; margin-top: 6px; }
.print-doc[data-template="minimal"] th { border-bottom: 1px solid #dcdcdc; color: #999; font-weight: 500; }
.print-doc[data-template="minimal"] td { border-bottom-color: #f3f3f3; }
.print-doc[data-template="minimal"] tfoot tr.print-grand td { border-top: 1px solid #1a1a1a; font-weight: 500; }
.print-doc[data-template="minimal"] tfoot tr.print-grand td.money:last-child { color: var(--inv-accent); }
.print-doc[data-template="minimal"] .print-pay { background: transparent; border: none; border-top: 1px solid #ececec; border-radius: 0; padding-left: 0; padding-right: 0; }

/* bold — solid accent masthead, zebra body, filled total */
.print-doc[data-template="bold"] { border-top: 10px solid var(--inv-accent); }
.print-doc[data-template="bold"] h1 { color: var(--inv-accent); font-size: 40px; }
.print-doc[data-template="bold"] tbody tr:nth-child(even) td { background: #fafafa; }
.print-doc[data-template="bold"] th { background: var(--inv-accent); color: #fff; border-bottom: none; padding: 10px 8px; }
.print-doc[data-template="bold"] tfoot tr.print-grand td { background: #1a1a1a; color: #fff; border-top: none; }


@media print {
    body { background: #fff; }
    /* When the curated print-doc modal is open, hide EVERYTHING except that modal
       — the app shell AND every floating widget (RiQ avatar, toasts, chatbot)
       that lives as a direct body child and otherwise leaks into the print. The
       previous rule hid #iqbModal itself (the modal holding the invoice), so print
       dumped the app page; and only hiding .app-shell left the floating widgets.
       Scoped via :has() so an ordinary Ctrl+P elsewhere is unaffected. */
    body:has(#iqbModal .print-doc) > *:not(#iqbModal) { display: none !important; }
    body:has(#iqbModal .print-doc) #iqbModal {
        display: block !important;
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    /* modal-card is a flex column on screen; that makes the print-shell shrink to
       its intrinsic content width (~420px) and float left. Force plain block flow
       so the shell fills the printable page width. */
    #iqbModal .modal-card { display: block !important; box-shadow: none !important; border: 0 !important; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .print-shell { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
    .print-shell .print-toolbar { display: none !important; }
    .print-doc { border: 0; padding: 0; width: 100%; }
    @page { margin: 14mm; }
}

.net-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 16px;
    background: var(--bg-band);
}

.net-line span {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.net-line strong {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 500;
}

/* =========================================================================
   LEDGERIQ EMBED
   ========================================================================= */

/* When the workspace shows LedgerIQ, lock .main as a flex column so the
   iframe takes EXACTLY the remaining viewport height. Without this the
   iframe + outer page both render scrollbars and RiQ chat ends up below
   the fold (you couldn't reach it without scrolling the wrong scrollbar). */
.main:has(.ledgeriq-embed) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
}

.main:has(.ledgeriq-embed) #mainContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Compact the IQ Books topbar when LedgerIQ is embedded so the iframe gets
   the vertical space it needs. LedgerIQ has its own dashboard header with
   period pickers + export buttons, so duplicating the long copy line here
   just shrinks the visible content area. We keep the breadcrumb + title +
   actions but hide the long subtitle paragraph and drop the bottom padding. */
.main:has(.ledgeriq-embed) .topbar {
    padding-top: 12px;
    padding-bottom: 0;
}
.main:has(.ledgeriq-embed) .topbar-eyebrow { margin-bottom: 4px; }
.main:has(.ledgeriq-embed) .topbar-headline { padding-bottom: 6px; }
.main:has(.ledgeriq-embed) .topbar-subtitle { display: none; }
.main:has(.ledgeriq-embed) .topbar-title { font-size: 1.4rem; }
.main:has(.ledgeriq-embed) .topbar-accent { display: none; }

.ledgeriq-embed {
    padding: 0 !important;
    margin: 0;
    flex: 1;
    min-height: 0;
    background: var(--bg-page);
    overflow: hidden;
}

.ledgeriq-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-page);
    display: block;
}

/* One RiQ per screen: while the LedgerIQ embed is up, its own RiQ (the
   analysis copilot inside the iframe) is the assistant — hide the IQ Books
   voice bubble so two robots don't stack in the corner. */
body:has(.ledgeriq-embed) .riqv-fab { display: none; }

/* =========================================================================
   MOBILE
   ========================================================================= */

/* =========================================================================
   MODAL
   ========================================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    width: min(720px, 100%);
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Wide variant — used by the invoice/bill editor and other multi-column
   modals. This class was applied in markup but never defined, so those
   modals stayed at the 720px default and their line-item tables overflowed
   into a horizontal scrollbar. Give them the room the columns need. */
.modal-card--wide {
    width: min(1040px, 100%);
}

/* Invoice/bill line editor: a fixed-width modal can never fit seven form
   controls on one row without cramming them illegibly, so DON'T keep it a
   table row. Each line becomes a bordered card; every field carries its own
   label (data-label) and sits at a comfortable width, wrapping onto as many
   lines as it needs. No horizontal scroll, nothing cramped, at any width. */
#invoiceEditLines,
#invoiceEditLines thead,
#invoiceEditLines tbody,
#invoiceEditLines tr,
#invoiceEditLines td { display: block; width: auto; }
#invoiceEditLines thead { display: none; }
#invoiceEditLines { border-collapse: separate; }
#invoiceEditLines tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 46px 14px 16px;   /* right pad reserves the remove-button corner */
    margin-bottom: 12px;
    background: var(--bg-panel);
}
#invoiceEditLines td {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 0;
    padding: 0;
    min-width: 0;
}
#invoiceEditLines td::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
#invoiceEditLines td input,
#invoiceEditLines td select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Comfortable minimum widths; fields grow to fill the row, then wrap. */
#invoiceEditLines td[data-label="Description"]      { flex: 5 1 260px; }
#invoiceEditLines td[data-label$="account"]         { flex: 4 1 220px; }  /* Income / Expense account */
#invoiceEditLines td[data-label="Qty"]              { flex: 1 1 90px; }
#invoiceEditLines td[data-label^="Unit"]            { flex: 1 1 110px; }
#invoiceEditLines td[data-label="VAT"]              { flex: 3 1 210px; }
#invoiceEditLines td.money                          { flex: 1 1 110px; }
#invoiceEditLines td.money { justify-content: flex-end; padding-bottom: 8px; font-variant-numeric: tabular-nums; }
#invoiceEditLines td .vat-cell { display: flex; gap: 8px; min-width: 0; }
#invoiceEditLines td .vat-cell select { flex: 1 1 auto; min-width: 0; }
#invoiceEditLines td .vat-cell .vat-amt { flex: 0 0 72px; width: 72px; }
/* Remove button: no label, parked in the card's top-right corner. */
#invoiceEditLines td.line-remove-cell {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0;
}
#invoiceEditLines td.line-remove-cell::before { content: none; }

/* Phones: every field takes the full width of the card, one per line. */
@media (max-width: 560px) {
    #invoiceEditLines td[data-label] { flex: 1 1 100%; }
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-band);
}

.modal-header h2 {
    margin: 2px 0 4px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.1rem;
}

.modal-body {
    padding: 12px 18px 18px;
}

tr.clickable {
    cursor: pointer;
}

tr.clickable:hover {
    background: var(--bg-row-hover);
}

/* Cards that act as buttons — desk + aging cards on the dashboard.
   Subtle hover lift makes the affordance clear without overpowering
   the editorial dashboard feel. */
.dash-desk-card.clickable,
.dash-aging-card.clickable {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.dash-desk-card.clickable:hover,
.dash-aging-card.clickable:hover {

    border-color: var(--line-strong);
}

.dash-desk-card.clickable:focus-visible,
.dash-aging-card.clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Subnav group separator — a tall divider between report categories
   so 13+ subviews can sit on one bar without feeling like a flat list. */
.subnav-group-divider {
    align-self: center;
    width: 1px;
    height: 16px;
    background: var(--line-strong);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Reports has ~15 reports — a horizontal scroll bar hides most of them on a
   normal laptop (worse on tablet/phone). For the reports section the bar wraps
   into one tidy pill set so every report is visible on any width. Scoped under
   #mainContent so the active pill's white text beats the section-accent rule
   (#mainContent .subnav-btn.active) that would otherwise tint it invisible. */
#mainContent .subnav[data-section="reports"] {
    flex-wrap: wrap;
    overflow: visible;
    gap: 7px;
    padding-top: 11px;
    padding-bottom: 12px;
    -webkit-mask-image: none;
            mask-image: none;
}
/* Keep the group separators inline (thin rule) so pills flow and fill rows
   evenly, with a quiet break between report groups. */
#mainContent .subnav[data-section="reports"] .subnav-group-divider {
    align-self: center;
    height: 18px;
    margin: 0 4px;
}
#mainContent .subnav[data-section="reports"] .subnav-btn {
    min-height: 31px;
    padding: 0 14px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#mainContent .subnav[data-section="reports"] .subnav-btn:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--bg-panel);
}
#mainContent .subnav[data-section="reports"] .subnav-btn.active {
    color: #fff;
    background: var(--section-accent, var(--primary));
    border-color: var(--section-accent, var(--primary));
    border-bottom-color: var(--section-accent, var(--primary));
    font-weight: 600;
}

/* =========================================================================
   ATTACHMENTS
   ========================================================================= */

.attachment-list {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-band);
}

.attachment-item i[data-lucide="paperclip"] {
    color: var(--muted);
    flex: 0 0 auto;
}

.attachment-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 1px;
}

.attachment-meta strong {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta .muted {
    font-size: 0.78rem;
}

.attachment-item .secondary-btn,
.attachment-item .danger-btn {
    min-height: 28px;
    padding: 0 8px;
}

.attachment-input {
    display: none;
}

label.secondary-btn {
    cursor: pointer;
}

/* Evidence belongs to the record, so attachment panels inside record modals
   read as the final section of the same sheet rather than a nested card. */
.modal-card > [data-attachments-panel] {
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
}

.modal-card > [data-attachments-panel] .panel-header {
    padding-inline: 18px;
}

.modal-card > [data-attachments-panel] .panel-body {
    padding-inline: 18px;
}

/* =========================================================================
   MOBILE — hamburger drawer + denser layout
   ========================================================================= */

.menu-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-page);
    align-items: center;
    justify-content: center;
}

@media (max-width: 980px) {
    /* Mobile keeps the 64px icon-rail. No drawer, no hamburger — just the
       rail with icons, tap to navigate. Saving screen for the workspace. */
    .layout,
    .layout.sidebar-collapsed {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .sidebar {
        padding: 14px 6px;
    }
    .sidebar .brand-copy,
    .sidebar .nav-label,
    .sidebar .sidebar-account-meta,
    .sidebar .sidebar-account-cog,
    .sidebar-toggle {
        display: none;
    }
    .sidebar .sidebar-account { justify-content: center; padding: 6px 0; }
    /* Org picker stays on mobile, but compacted to fit the 64px rail.
       The native <select> is sized to a button, its text/chevron hidden,
       and an icon overlay sits centred on top. Tapping anywhere on the
       cell opens the native option list (one tap, native UX). */
    .sidebar .sidebar-foot {
        padding: 8px 0 4px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        border-top: 1px solid var(--rule);
    }
    .sidebar .org-picker {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .sidebar .org-picker .field {
        position: relative;
        width: 44px;
        height: 38px;
        padding: 0;
        margin: 0;
    }
    .sidebar .org-picker .field span { display: none; }
    .sidebar .org-picker .org-picker-icon {
        display: block;
        position: absolute;
        inset: 0;
        margin: auto;
        width: 18px;
        height: 18px;
        pointer-events: none;
        color: var(--muted);
    }
    .sidebar .org-picker select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        color: transparent;
        border: 1px solid var(--rule);
        border-radius: 8px;
        padding: 0;
        margin: 0;
        font-size: 0;
        cursor: pointer;
    }
    .sidebar .org-picker select:focus {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }
    /* Native dropdown options need readable text — restore font-size on options */
    .sidebar .org-picker select option { color: var(--ink); font-size: 14px; }
    .sidebar .org-picker #newOrgBtn {
        width: 44px;
        height: 38px;
        padding: 0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar .org-picker #newOrgBtn span { display: none; }
    .sidebar .org-picker #newOrgBtn i { width: 18px; height: 18px; }
    .sidebar .sidebar-head {
        flex-direction: column-reverse;
        gap: 8px;
        padding: 0 0 8px;
    }
    .sidebar .brand-mark { justify-content: center; }
    .sidebar .iqb-brand-mark { font-size: 18px; }
    .sidebar .iqb-brand-mark em { display: none; }
    .nav-list { gap: 4px; }
    .nav-btn {
        justify-content: center;
        padding: 0;
        width: 44px;
        height: 38px;
        margin: 0 auto;
        border-radius: 8px;
        position: relative;
    }
    .nav-btn .nav-label { display: none; }
    .nav-btn i { width: 18px; height: 18px; opacity: 0.9; }
    /* Drawer + hamburger leftovers — hide on mobile, the rail handles it */
    .menu-toggle,
    .dash-menu-toggle,
    .sidebar-backdrop { display: none !important; }

    .topbar-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .topbar {
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
        gap: 10px;
    }

    .topbar h1 { font-size: 1.05rem; }

    .metric-strip,
    .grid-2,
    .form-grid,
    .setup-section,
    .journal-line-grid {
        grid-template-columns: 1fr;
    }

    .span-2 { grid-column: auto; }

    .notice-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .ob-head { display: none; }
    .ob-row {
        grid-template-columns: 1fr;
        border-bottom: 1px solid var(--line);
        padding-bottom: 12px;
    }

    /* Line-item editor: drop the header strip and stack each field one per row
       (placeholders carry the labels) so nothing is clipped on narrow screens. */
    .line-items-head { display: none; }
    .line-row { grid-template-columns: 1fr; }
    .line-row + .line-row { border-top: 1px solid var(--line); }
    .alloc-row { max-width: none; }

    /* Metric strip: stack vertically with row dividers instead of column */
    .metric { border-right: 0; border-bottom: 1px solid var(--line); }
    .metric:last-child { border-bottom: 0; }

    /* Filter row stacks */
    .filter-row {
        gap: 6px;
    }
    .filter-row > input[type="search"] {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .inline-field { flex: 1 1 calc(50% - 4px); min-width: 130px; }

    .pager { flex-direction: column; gap: 8px; align-items: stretch; }
    .pager-controls { justify-content: space-between; }

    /* Detail pages (customer/supplier/bank/invoice/journal) — keep panel
       headers from squeezing actions onto the right. Stack the "back to
       list" link + title + actions vertically. */
    .panel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .panel-header > .panel-actions,
    .panel-header > .form-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .panel-header .back-link { margin-bottom: 4px; }

    /* Two/three-pane detail layouts: single column on mobile so each panel
       gets full width. Covers customer detail, supplier detail, bank detail,
       and journal entry detail. */
    .detail-grid,
    .detail-2col,
    .detail-3col,
    .grid-3,
    .panel-split {
        grid-template-columns: 1fr !important;
    }

    /* Subnav scrolls horizontally rather than wrapping, so users can swipe
       through all sub-tabs without losing the active highlight. */
    .subnav {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .subnav::-webkit-scrollbar { display: none; }
    .subnav-btn { flex-shrink: 0; }

    /* Table row actions wrap onto a second line cleanly, keeping the
       primary action on top. Used on the invoice/bill rows. */
    td.table-action {
        white-space: normal;
        text-align: right;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
    }

    /* Doc-type tabs on the sales/purchase invoice list: shrink + scroll. */
    .doc-type-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .doc-type-tabs::-webkit-scrollbar { display: none; }
    .doc-type-tab { flex-shrink: 0; }

    /* Modal body should not blow past the viewport on small screens. */
    .modal-card {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    /* Sidebar foot (org picker) — keep it usable when collapsed rail
       expands the picker to a normal width on rotation. */
    .sidebar-foot { padding-bottom: env(safe-area-inset-bottom, 12px); }

    /* Aged + statement tables fit-content on mobile so they don't push the
       chrome out. Their internal table-wrap already scrolls horizontally. */
    .aged-table, .statement-table { font-size: 0.78rem; }
}

/* Even tighter: phones < 480px. Actions stack, headlines drop a step. */
@media (max-width: 480px) {
    .topbar h1 { font-size: 1rem; }
    .panel-header h3 { font-size: 1rem; }
    .table-wrap table { font-size: 0.78rem; }
    th, td { padding: 6px 8px; }
    .modal-card { padding: 12px; }
    .modal-header { padding: 0 0 8px; }
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .form-actions .primary-btn,
    .form-actions .secondary-btn,
    .form-actions .iqb-btn { width: 100%; justify-content: center; }
    /* Logo controls cap height so the preview doesn't dominate the form. */
    .org-logo-preview { height: 100px; width: 100%; }
}

/* Touch devices: larger targets per Apple HIG / Material guidance */
@media (hover: none) and (pointer: coarse) {
    .primary-btn,
    .secondary-btn,
    .danger-btn,
    .icon-btn,
    .nav-btn,
    .subnav-btn,
    .bank-tab {
        min-height: 40px;
    }

    input, select, textarea {
        min-height: 40px;
        font-size: 16px; /* prevent iOS zoom-on-focus */
    }

    .table-input, .table-select { min-height: 36px; font-size: 0.9rem; }
}

/* =========================================================================
   SOURCE CHIP — V/T column abbreviations (M / FI / CIQ / OB / REC / PAY / etc.)
   Tone classes drive the colour. Tooltip carries the full source_reference.
   ========================================================================= */

.source-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    cursor: help;
}

/* Source variants: tone lives only in the text + a tinted border — no
   saturated background fills (Ström: monochromatic by default; colour
   reserved for genuine signal). */
.source-chip.src-ciq    { color: #9d3f56; border-color: #ebd6dc; }
.source-chip.src-bank   { color: var(--ink); border-color: var(--line); }
.source-chip.src-doc    { color: #4a9080; border-color: #cfdcd6; }
.source-chip.src-pay    { color: #5b6eae; border-color: #d8dde9; }
.source-chip.src-sys    { color: #6b7280; border-color: var(--line); }
.source-chip.src-manual { color: #92660b; border-color: #ead9b3; }

/* =========================================================================
   DASHBOARD — editorial briefing layout
   Masthead → 30-day cashflow frieze → Hero "Cashflow Horizon" + inbox column
   → AR/AP aging → Recent activity. Heavy whitespace, Fraunces serif for the
   big numbers, coral / teal / navy semantic colours.
   ========================================================================= */

/* Dashboard scopes the workspace to the IQ Suite editorial vocabulary:
   cream paper, soft orb backdrop, Fraunces light + italic-gradient emphasis,
   2px square radii, pill controls. Tokens come from iq-suite-editorial.css. */
.dashboard-section { position: relative; }

.dashboard-shell {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 36px);
    color: var(--ink);
    /* Cream paper background applied via the orb-field below; transparent here
       so the workspace cream shows through. */
}

.dashboard-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
}

.dashboard-loading i {
    width: 16px; height: 16px;
    animation: dash-spin 1.2s linear infinite;
}

@keyframes dash-spin { to { transform: rotate(360deg); } }

.dashboard-empty { padding: 36px 0; text-align: center; }

/* Soft gradient orb backdrop. Sits BEHIND the dashboard hero — the
   "Today at <em>Org</em>" headline overlays this glow, with the italic-
   gradient on the org name picking up the colour vocabulary. Spans the
   width of the hero area; overflow hidden so the blur doesn't bleed
   sideways into the sidebar. */
.dash-orb-field {
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    height: 360px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
}
.dash-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(96px);
    opacity: 0.55;
}
.dash-orb--riq { width: 320px; height: 320px; left: 5%;   top: -40px;   background: var(--riq, #5b6eae); }
.dash-orb--ciq { width: 280px; height: 280px; left: 35%;  top: -20px;   background: var(--ciq, #c4576a); }
.dash-orb--liq { width: 320px; height: 320px; right: 5%;  top: 0;       background: var(--liq, #4a9080); }

/* All sections sit above the orb field. The :not(.dash-orb-field) is critical:
   without it the orb gets `position: relative` and lands in the flex flow,
   shoving the hero ~360px down its own little box instead of glowing softly
   BEHIND the hero (which was the whole point of having an orb backdrop). */
.dashboard-shell > *:not(.dash-orb-field) { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.dash-hero {
    padding-top: 8px;
    max-width: 880px;
}
.dash-kicker {
    margin: 0 0 18px;
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--ink-3, #6b6b6b);
    text-transform: uppercase;
}
.dash-hero-title {
    font-family: var(--serif, Fraunces);
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 14px;
    padding-bottom: 0.06em;
}
.dash-hero-title-fixed { display: inline; padding-right: 0.18em; }
.dash-hero-title-org {
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(90deg, var(--riq, #5b6eae), var(--ciq, #c4576a) 55%, var(--liq, #4a9080));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-right: 0.06em;
    letter-spacing: -0.02em;
}
.dash-hero-dek {
    font-family: var(--serif, Fraunces);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.45;
    color: var(--ink-2, #3d3d3d);
    margin: 0;
    max-width: 640px;
}

/* Section eyebrow used across pulse / cash / desk / aging / activity */
.dash-section-eyebrow {
    margin: 0 0 14px;
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink-3, #6b6b6b);
    text-transform: uppercase;
}

/* ---------- 30-day pulse frieze ---------- */
.dash-pulse {
    padding: 8px 0 12px;
}

/* IQ Suite integration portal — fills the dashboard's left column with the
   four IQ tools, each routing to where it plugs into this ledger. Product
   accents (coral/periwinkle/teal/bronze) give it identity; restrained so it
   reads as part of the books, not a marketing strip. */
.dash-suite { margin-top: 20px; }
.dash-suite-head { margin-bottom: 12px; }
.dash-suite-note {
    margin: 5px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 56ch;
}
.dash-suite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
    gap: 10px;
}
.suite-card {
    --card-accent: var(--primary);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 17px;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.suite-card::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--card-accent);
    opacity: 0.9;
}
.suite-card:hover,
.suite-card:focus-visible {
    border-color: color-mix(in srgb, var(--card-accent) 45%, var(--line));

    outline: none;
}
.suite-card-text { flex: 1; min-width: 0; }
.suite-card-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 21px;
}
/* The brand wordmark (inline SVG) — fixed height, width scales to the name. */
.suite-wordmark {
    height: 28px;
    width: auto;
    max-width: 100%;
    display: block;
    flex-shrink: 0;
}

/* IQ Suite explainer modal — opened from a portal card: what the tool does,
   where it lives in IQ Books, why it helps, and a CTA straight to it. */
.suite-modal { --modal-accent: var(--primary); border-top: 3px solid var(--modal-accent); }
.suite-modal--ciq { --modal-accent: #c4576a; }
.suite-modal--riq { --modal-accent: #5b6eae; }
.suite-modal--liq { --modal-accent: #4a9080; }
.suite-modal--piq { --modal-accent: #a8762e; }
.suite-modal-head { align-items: center; }
.suite-modal-logo .suite-wordmark { height: 38px; }
.suite-modal-body { display: grid; gap: 16px; }
.suite-modal-tagline {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.suite-modal-label {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}
.suite-modal-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 10px;
}
.suite-modal-steps li {
    position: relative;
    counter-increment: step;
    padding-left: 32px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.suite-modal-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--modal-accent);
    background: color-mix(in srgb, var(--modal-accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--modal-accent) 26%, transparent);
}
.suite-modal-steps strong { font-weight: 600; color: var(--ink); }
.suite-modal-why {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
}
.suite-modal-foot { display: flex; justify-content: flex-end; gap: 10px; }
.suite-modal-cta {
    background: var(--modal-accent);
    border-color: var(--modal-accent);
}
.suite-modal-cta:hover { filter: brightness(0.93); }
.suite-card-role {
    margin: 5px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted);
}
.suite-card-badge {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--liq);
    background: color-mix(in srgb, var(--liq) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--liq) 30%, transparent);
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.5;
}
.suite-card-go {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--muted-soft);
    transition: color 0.15s ease, transform 0.15s ease;
}
.suite-card:hover .suite-card-go,
.suite-card:focus-visible .suite-card-go {
    color: var(--card-accent);
    transform: translate(2px, -2px);
}
.suite-card--ciq { --card-accent: var(--ciq); }
.suite-card--riq { --card-accent: var(--riq); }
.suite-card--liq { --card-accent: var(--liq); }
.suite-card--piq { --card-accent: #a8762e; }
.frieze-strip {
    display: flex;
    align-items: center;
    height: 44px;
    gap: 3px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
    padding-bottom: 8px;
}
.frieze-bar {
    flex: 1;
    min-height: 4px;
    border-radius: 1px;
    transition: opacity 0.15s ease, transform 0.15s ease;
    cursor: help;
    align-self: center;
    transform-origin: center;
}
.frieze-bar:hover { opacity: 0.7; transform: scaleY(1.08); }
.frieze-bar.tone-pos  { background: var(--liq, #4a9080); }
.frieze-bar.tone-neg  { background: var(--ciq, #c4576a); }
.frieze-bar.tone-flat { background: var(--rule, #d4d0c8); }
.frieze-quiet {
    font-family: var(--serif, Fraunces);
    font-style: italic;
    font-weight: 300;
    font-size: 0.92rem;
    color: var(--ink-3, #6b6b6b);
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
    margin: 0;
}
.frieze-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.66rem;
    color: var(--ink-4, #999);
    letter-spacing: 0.05em;
}

/* ---------- Cashflow figure ---------- */
.dash-figure {
    border-top: 1px solid var(--rule, #d4d0c8);
    padding-top: var(--space-5, 28px);
}
.dash-figure-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
    margin-bottom: 24px;
}
.dash-figure-meta { min-width: 0; }
.dash-figure-amount {
    font-family: var(--serif, Fraunces);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin: 0;
    font-feature-settings: 'lnum', 'tnum';
}
.dash-figure-amount-cur {
    font-family: var(--sans);
    font-size: 0.36em;
    color: var(--ink-3, #6b6b6b);
    font-weight: 500;
    margin-left: 0.2em;
    vertical-align: 0.55em;
    letter-spacing: 0.04em;
}
.dash-figure-sub {
    margin: 12px 0 0;
    font-family: var(--serif, Fraunces);
    font-style: italic;
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink-2, #3d3d3d);
}

/* Per-bank balances — clean vertical list rather than chips */
.dash-bank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    min-width: 220px;
}
.dash-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.dash-bank-row:last-child { border-bottom: 0; }
.dash-bank-row-name {
    font-size: 0.78rem;
    color: var(--ink-3, #6b6b6b);
    font-weight: 500;
    text-align: left;
}
.dash-bank-row-balance {
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
    font-feature-settings: 'tnum';
}
.dash-bank-row-balance.is-negative { color: var(--ciq, #c4576a); }

.dash-horizon-chart {
    margin: 0 -12px;
    min-height: 280px;
}

/* ---------- On the desk ---------- */
.dash-desk {
    border-top: 1px solid var(--rule, #d4d0c8);
    padding-top: var(--space-5, 28px);
}
.dash-desk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule, #d4d0c8);
    border-top: 1px solid var(--rule, #d4d0c8);
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.dash-desk-card {
    background: var(--cream, #faf8f5);
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
}
.dash-desk-count {
    font-family: var(--serif, Fraunces);
    font-weight: 300;
    font-size: clamp(40px, 4vw, 56px);
    line-height: 1;
    margin: 0 0 8px;
    color: var(--ink);
    font-feature-settings: 'lnum', 'tnum';
    letter-spacing: -0.025em;
}
.dash-desk-card.tone-ciq .dash-desk-count { color: var(--ciq, #c4576a); }
.dash-desk-card.tone-riq .dash-desk-count { color: var(--riq, #5b6eae); }
.dash-desk-card.tone-liq .dash-desk-count { color: var(--liq-deep, #2d5a50); opacity: 0.42; }
.dash-desk-label {
    margin: 0 0 6px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
}
.dash-desk-sub {
    margin: 0 0 18px;
    font-family: var(--serif, Fraunces);
    font-style: italic;
    font-weight: 300;
    color: var(--ink-3, #6b6b6b);
    font-size: 0.9rem;
}
.dash-desk-quiet {
    margin-top: auto;
    color: var(--ink-4, #999);
    font-size: 0.82rem;
    font-style: italic;
    font-family: var(--serif, Fraunces);
}

/* ---------- Aging row ---------- */
.dash-aging-row {
    /* Note: this class is also used inside the buckets list below — context
       differentiates: as a section the parent is .dash-aging-row, as a row
       inside a card it's .dash-aging-card .dash-aging-row. */
}
.dash-aging-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule, #d4d0c8);
    border-top: 1px solid var(--rule, #d4d0c8);
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.dash-aging-card {
    background: var(--cream, #faf8f5);
    padding: 28px 24px;
}
.dash-aging-total {
    font-family: var(--serif, Fraunces);
    font-weight: 300;
    font-size: clamp(36px, 3.6vw, 48px);
    line-height: 1;
    color: var(--ink);
    margin: 0 0 6px;
    font-feature-settings: 'lnum', 'tnum';
    letter-spacing: -0.025em;
}
.dash-aging-total-meta {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-3, #6b6b6b);
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 8px;
}
.dash-aging-overdue {
    margin: 0 0 18px;
    color: var(--ciq, #c4576a);
    font-size: 0.86rem;
    font-weight: 500;
    font-family: var(--serif, Fraunces);
    font-style: italic;
}
.dash-aging-clean {
    margin: 0 0 18px;
    color: var(--liq-deep, #2d5a50);
    font-size: 0.86rem;
    font-weight: 500;
    font-family: var(--serif, Fraunces);
    font-style: italic;
}
.dash-aging-buckets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.dash-aging-card .dash-aging-row {
    display: grid;
    grid-template-columns: 64px 1fr 100px 32px;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
}
.dash-aging-name {
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.72rem;
    color: var(--ink-3, #6b6b6b);
    letter-spacing: 0.05em;
}
.dash-aging-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.dash-aging-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.dash-aging-card.tone-liq .dash-aging-bar > span { background: var(--liq, #4a9080); }
.dash-aging-card.tone-ciq .dash-aging-bar > span { background: var(--ciq, #c4576a); }
.dash-aging-amt {
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.82rem;
    color: var(--ink);
    text-align: right;
    font-feature-settings: 'tnum';
}
.dash-aging-count {
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.7rem;
    color: var(--ink-4, #999);
    text-align: right;
}

/* ---------- Recent activity ---------- */
.dash-activity {
    border-top: 1px solid var(--rule, #d4d0c8);
    padding-top: var(--space-5, 28px);
}
.dash-activity-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
}
.dash-activity-meta {
    font-family: var(--serif, Fraunces);
    font-style: italic;
    font-weight: 300;
    color: var(--ink-3, #6b6b6b);
    font-size: 0.88rem;
}
.dash-activity-table {
    width: 100%;
    border-collapse: collapse;
}
.dash-activity-table thead th {
    text-align: left;
    color: var(--ink-3, #6b6b6b);
    font-family: var(--mono, JetBrains Mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.dash-activity-table thead th.money { text-align: right; }
.dash-activity-table tbody td {
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 60%, transparent);
    font-size: 0.92rem;
    color: var(--ink-2, #3d3d3d);
}
.dash-activity-table tbody tr:last-child td { border-bottom: 0; }
.dash-activity-table tbody tr.clickable:hover {
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
}
.dash-activity-table .money {
    text-align: right;
    font-family: var(--mono, JetBrains Mono);
    font-feature-settings: 'tnum';
    color: var(--ink);
}

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
    .dash-figure-head { grid-template-columns: 1fr; gap: 16px; }
    .dash-bank-list { text-align: left; min-width: 0; }
    .dash-desk-grid { grid-template-columns: 1fr; }
    .dash-aging-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   IQ Books brand mark — sidebar header
   Serif "IQ" + italic-gradient "Books", same vocabulary as dashboard.html.
   ========================================================================= */
.iqb-brand { color: inherit; text-decoration: none; }
.iqb-brand-mark {
    font-family: var(--serif, 'Fraunces');
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 0.22em;
}
.iqb-brand-mark em {
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(90deg, var(--riq, #5b6eae), var(--ciq, #c4576a) 55%, var(--liq, #4a9080));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* When sidebar is collapsed, only the "IQ" portion shows. */
.sidebar.collapsed .iqb-brand-mark {
    font-size: 18px;
}
.sidebar.collapsed .iqb-brand-mark em {
    display: none;
}

/* =========================================================================
   IQ Books canonical button — solid pill (filled) + ghost pill (outlined).
   Use these for any new UI; legacy primary-btn / secondary-btn classes still
   work but should drift toward this.
   ========================================================================= */
.iqb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    text-decoration: none;
    white-space: nowrap;
}
.iqb-btn--solid { background: var(--ink); color: var(--cream, #faf8f5); border-color: var(--ink); }
.iqb-btn--solid:hover { background: var(--primary-active, #000000); border-color: var(--primary-active, #000000); }
.iqb-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule, #d4d0c8); }
.iqb-btn--ghost:hover { background: var(--ink); color: var(--cream, #faf8f5); border-color: var(--ink); }
.iqb-btn--riq  { background: var(--riq, #5b6eae);   color: #fff; border-color: var(--riq, #5b6eae); }
.iqb-btn--riq:hover  { background: var(--riq-deep, #3d4d7a);  border-color: var(--riq-deep, #3d4d7a); }
.iqb-btn--ciq  { background: var(--ciq, #c4576a);   color: #fff; border-color: var(--ciq, #c4576a); }
.iqb-btn--ciq:hover  { background: var(--ciq-deep, #9a4054);  border-color: var(--ciq-deep, #9a4054); }
.iqb-btn--liq  { background: var(--liq, #4a9080);   color: #fff; border-color: var(--liq, #4a9080); }
.iqb-btn--liq:hover  { background: var(--liq-deep, #2d5a50);  border-color: var(--liq-deep, #2d5a50); }
.iqb-btn--sm { padding: 6px 14px; font-size: 0.78rem; }
.iqb-btn--lg { padding: 12px 22px; font-size: 0.92rem; }

/* =========================================================================
   VAT CHIP — V/T column, recent activity, bank txn review.
   Tone classes drive colour by code (NV/ST/RR/EX/ZR).
   ========================================================================= */

/* VAT codes: pure text (no chip frame, no border, no fill). The colour
   alone encodes the code; framing the text added ink without earning it
   (Ström/Rutter: only colour where it carries signal). */
.vat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: help;
}

.vat-chip .vat-code {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.vat-chip .vat-rate {
    color: var(--muted);
    font-size: 0.7rem;
    opacity: 0.85;
}

.vat-chip.vat-st { color: #4051a0; }
.vat-chip.vat-rr { color: #92660b; }
.vat-chip.vat-zr { color: #4a9080; }
.vat-chip.vat-ex { color: #6b7280; }
.vat-chip.vat-nv { color: var(--muted); }

/* =========================================================================
   SESSION-EXPIRY BANNER (global, served by /js/auth-session.js)
   Sticky to the bottom-right; non-blocking; dismissible.
   ========================================================================= */

.iq-session-banner {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    max-width: min(520px, calc(100vw - 40px));
    background: #b91c1c;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    animation: iq-banner-in 0.18s ease-out;
}

.iq-session-banner-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.iq-session-banner-msg {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
}

.iq-session-banner-cta {
    background: #fff;
    color: #b91c1c;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.iq-session-banner-cta:hover {
    background: #fee2e2;
    text-decoration: none;
}

.iq-session-banner-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.7;
    cursor: pointer;
}

.iq-session-banner-close:hover { opacity: 1; }

@keyframes iq-banner-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Doc-type tab strip above sales/purchase document lists */
.doc-type-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
    background: var(--ivory, #f5f2ed);
}
.doc-type-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-3, #6b6b6b);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.doc-type-tab:hover { color: var(--ink, #1a1a1a); }
.doc-type-tab.active {
    color: var(--ink, #1a1a1a);
    border-bottom-color: var(--ink, #1a1a1a);
    font-weight: 600;
}

/* Document-type chip on invoices/bills lists — distinguishes credit notes */
.doc-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.doc-type-chip.doc-credit {
    background: color-mix(in srgb, var(--ciq, #c4576a) 14%, transparent);
    color: var(--ciq, #c4576a);
    border: 1px solid color-mix(in srgb, var(--ciq, #c4576a) 30%, transparent);
}

/* Document numbers ("INV-0002") never wrap mid-reference. */
.cell-nowrap { white-space: nowrap; }

/* Aged debtors / creditors report tables */
.aged-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.aged-table thead th {
    text-align: left;
    color: var(--ink-3, #6b6b6b);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.aged-table thead th.money { text-align: right; }
.aged-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 50%, transparent);
}
.aged-table tbody td.money,
.aged-table tfoot td.money {
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}
.aged-table tfoot td {
    padding: 14px;
    background: var(--ivory, #f5f2ed);
    font-weight: 600;
}
.aged-table .aged-warn { color: var(--warning, #d97706); }
.aged-table .aged-bad { color: var(--ciq, #c4576a); font-weight: 600; }

/* Statement panel + table */
.statement-panel { background: #fff; }
.statement-balance-label {
    text-align: right;
    margin: 0 0 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.statement-balance {
    font-family: var(--serif, Fraunces);
    font-weight: 600;
    font-size: 1.8rem;
    margin: 0;
    text-align: right;
    color: var(--ink);
}
.statement-balance.is-negative { color: var(--ciq, #c4576a); }
.statement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.statement-table thead th {
    text-align: left;
    color: var(--ink-3, #6b6b6b);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.statement-table thead th.money { text-align: right; }
.statement-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 50%, transparent);
}
.statement-table .money {
    text-align: right;
    font-family: var(--font-mono);
}
.statement-table .money.is-negative { color: var(--ed-success, #059669); }
.statement-opening,
.statement-closing { background: var(--ivory, #f5f2ed); }
.statement-opening td,
.statement-closing td { padding: 12px 14px; }

/* Print: hide all chrome, show only the report */
@media print {
    .sidebar, .topbar, .subnav, .toast, .iq-session-banner { display: none !important; }
    .layout { display: block !important; }
    .main { padding: 0 !important; }
    .panel { box-shadow: none !important; border: 0 !important; }
    body { background: #fff !important; }
}
.doc-type-chip.doc-quote {
    background: color-mix(in srgb, var(--riq, #5b6eae) 14%, transparent);
    color: var(--riq, #5b6eae);
    border: 1px solid color-mix(in srgb, var(--riq, #5b6eae) 30%, transparent);
}

/* Members table */
.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.members-table thead th {
    text-align: left;
    color: var(--ink-3, #6b6b6b);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule, #d4d0c8);
}
.members-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 50%, transparent);
}
.role-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--ivory, #f5f2ed);
    color: var(--ink, #1a1a1a);
}
.role-pill.role-owner { background: color-mix(in srgb, var(--riq, #5b6eae) 14%, transparent); color: var(--riq, #5b6eae); }
.role-pill.role-admin { background: color-mix(in srgb, var(--ciq, #c4576a) 14%, transparent); color: var(--ciq, #c4576a); }
.role-pill.role-bookkeeper { background: color-mix(in srgb, var(--liq, #4a9080) 14%, transparent); color: var(--liq, #4a9080); }
.status-pill.invited { background: var(--ed-warning-light, #fef3c7); color: var(--ed-warning, #d97706); }
.status-pill.active { background: var(--ed-success-light, #d1fae5); color: var(--ed-success, #059669); }

/* Floating menu-toggle on the dashboard (mobile only). The base .menu-toggle
   rule already hides on desktop and shows ≤980px; .dash-menu-toggle just
   positions it so it floats top-left without disrupting the editorial hero. */
.dash-menu-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 40;
    background: var(--cream, #faf8f5);
    border: 1px solid var(--rule, #d4d0c8);
    box-shadow: var(--shadow-sm);
}


/* ================================================================
 * NAV-LIST flex with bottom-pinned Guides button
 * ================================================================
 * Make .nav-list a flex column that fills the sidebar's middle area
 * so margin-top: auto on the Guides button visually pins it to the
 * bottom — just above the org-picker in .sidebar-foot. */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-height: 0;
}
.nav-btn[data-view="guides"] {
    margin-top: auto;
    border-top: 1px dotted var(--rule, #d4d0c8);
    padding-top: 12px;
    margin-bottom: 4px;
}

/* ================================================================
 * GUIDES — in-product help system
 * ================================================================
 * Two-pane layout. Left rail uses the same surface colour as the
 * IQ Books sidebar (--bg-sidebar) so it reads as a continuation of
 * the chrome. Right pane uses --cream as paper background. Body
 * content is centred in a typographic-width column for readability.
 * Tokens, type scale, italic-gradient <em>, 2px / 999px radii — all
 * per design-system.md. No new colours, no new shadows.
 * ================================================================ */

.guides-workspace {
    background: var(--cream, #faf8f5);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.guides-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    border-top: 1px solid var(--rule, #d4d0c8);
}

/* ---- Left rail ------------------------------------------------- */
.guides-rail {
    background: var(--bg-sidebar, #f3f5f9);
    border-right: 1px solid var(--rule, #d4d0c8);
    padding: 18px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    min-height: 0;
}
.guides-search {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 999px;
    padding: 0 12px;
    transition: border-color 0.12s ease;
    flex-shrink: 0;
}
.guides-search:focus-within {
    border-color: var(--ink, #1a1a1a);
}
.guides-search-icon {
    width: 14px; height: 14px;
    color: var(--ink-3, #6b6b6b);
    flex-shrink: 0;
}
.guides-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 9px 6px;
    font: 13.5px/1.4 var(--sans, system-ui);
    color: var(--ink, #1a1a1a);
    min-width: 0;
}
.guides-search input::placeholder {
    color: var(--ink-3, #6b6b6b);
    opacity: 0.7;
}
.guides-search-clear {
    background: transparent;
    border: 0;
    color: var(--ink-3, #6b6b6b);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 999px;
    flex-shrink: 0;
}
.guides-search-clear:hover { color: var(--ink, #1a1a1a); }
.guides-search-clear i { width: 14px; height: 14px; }

.guides-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 2px;
}
.guides-group { display: flex; flex-direction: column; gap: 2px; }
.guides-group.is-hidden { display: none; }
.guides-group-label {
    font: 600 0.66rem/1.4 var(--mono, monospace);
    color: var(--ink-3, #6b6b6b);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 4px;
    padding: 0 8px;
}
.guides-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.guides-item.is-hidden { display: none; }
.guides-item a {
    display: block;
    padding: 8px 10px;
    border-radius: 2px;
    color: var(--ink-2, #3d3d3d);
    text-decoration: none;
    font: 500 13.5px/1.35 var(--sans, system-ui);
    transition: background 0.1s ease, color 0.1s ease;
}
.guides-item a:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ink, #1a1a1a);
}
.guides-item.is-active a {
    background: var(--ink, #1a1a1a);
    color: #fff;
}
.guides-rail-foot {
    font-size: 0.72rem;
    line-height: 1.45;
    margin: 0;
    padding: 10px 8px 0;
    border-top: 1px dotted var(--rule, #d4d0c8);
    color: var(--ink-3, #6b6b6b);
    flex-shrink: 0;
}
.guides-rail-foot code {
    font: 0.7rem/1 var(--mono, monospace);
    background: #fff;
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid var(--rule, #d4d0c8);
}

/* ---- Content pane ---------------------------------------------- */
.guides-content {
    background: var(--cream, #faf8f5);
    overflow-y: auto;
    min-height: 0;
}
.guides-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 48px 96px;
}

.guides-article-head { margin-bottom: 32px; }
.guides-eyebrow {
    font: 600 0.7rem/1.4 var(--mono, monospace);
    color: var(--ink-3, #6b6b6b);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.guides-title {
    font-family: var(--serif, Georgia, serif);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.022em;
    color: var(--ink, #1a1a1a);
    margin: 0 0 14px;
    line-height: 1.1;
}
.guides-title em {
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(90deg, var(--riq, #5b6eae), var(--ciq, #c4576a) 55%, var(--liq, #4a9080));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.guides-summary {
    font-family: var(--serif, Georgia, serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--ink-2, #3d3d3d);
    margin: 0;
    max-width: 60ch;
}

.guides-body {
    font: 400 16.5px/1.65 var(--sans, system-ui);
    color: var(--ink-2, #3d3d3d);
}
.guides-body .guides-lede {
    font-size: 17.5px;
    line-height: 1.55;
    color: var(--ink, #1a1a1a);
    border-left: 2px solid var(--ink, #1a1a1a);
    padding: 4px 0 4px 18px;
    margin: 0 0 32px;
}
.guides-body h2 {
    font-family: var(--serif, Georgia, serif);
    font-weight: 500;
    font-size: 1.5rem;
    margin: 40px 0 14px;
    color: var(--ink, #1a1a1a);
    letter-spacing: -0.012em;
    line-height: 1.2;
}
.guides-body h3 {
    font-family: var(--sans, system-ui);
    font-weight: 600;
    font-size: 1.04rem;
    margin: 24px 0 10px;
    color: var(--ink, #1a1a1a);
    letter-spacing: -0.005em;
}
.guides-body p { margin: 0 0 16px; }
.guides-body ul, .guides-body ol {
    margin: 0 0 18px;
    padding-left: 24px;
}
.guides-body ul { list-style: none; padding-left: 0; }
.guides-body ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}
.guides-body ul li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 11px;
    width: 6px;
    height: 1px;
    background: var(--ink-3, #6b6b6b);
}
.guides-body ul ul li::before { width: 4px; }
.guides-body ol li { margin-bottom: 8px; }
.guides-body a {
    color: var(--ink, #1a1a1a);
    text-decoration: none;
    border-bottom: 1px solid var(--rule, #d4d0c8);
    transition: border-color 0.12s ease;
}
.guides-body a:hover {
    border-bottom-color: var(--ink, #1a1a1a);
}
.guides-body strong {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
}
.guides-body code {
    font: 0.84em/1 var(--mono, monospace);
    background: var(--ivory, #f5f2ed);
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid var(--rule, #d4d0c8);
    color: var(--ink, #1a1a1a);
}

/* Inline route reference (Banking → Bank rules) */
.guides-route {
    display: inline-block;
    font: 600 0.82em/1.3 var(--mono, monospace);
    background: #fff;
    color: var(--ink, #1a1a1a);
    padding: 2px 8px;
    border-radius: 2px;
    border: 1px solid var(--rule-strong, #8a8578);
    white-space: nowrap;
}
.guides-key {
    display: inline-block;
    font: 600 0.78em/1 var(--mono, monospace);
    background: #fff;
    border: 1px solid var(--rule-strong, #8a8578);
    border-bottom-width: 2px;
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--ink, #1a1a1a);
}

/* Numbered steps as editorial cards */
.guides-steps {
    list-style: none;
    counter-reset: gstep;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guides-steps > li {
    counter-increment: gstep;
    background: #fff;
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 2px;
    padding: 16px 18px 16px 56px;
    position: relative;
    margin: 0;
}
.guides-steps > li::before {
    content: counter(gstep, decimal-leading-zero);
    position: absolute;
    left: 16px;
    top: 17px;
    font: 600 0.78rem/1 var(--mono, monospace);
    color: var(--ink-3, #6b6b6b);
    letter-spacing: 0.08em;
}
.guides-steps > li > ul,
.guides-steps > li > ol {
    margin-top: 8px;
}

/* Callouts: note (default), watch (coral), tip (teal) */
.guides-callout {
    display: block;
    padding: 16px 20px;
    margin: 22px 0;
    border-radius: 2px;
    font-size: 0.96rem;
    line-height: 1.55;
    background: #fff;
    border: 1px solid var(--rule, #d4d0c8);
    border-left-width: 3px;
}
.guides-callout strong { color: var(--ink, #1a1a1a); margin-right: 4px; }
.guides-callout--note  { border-left-color: var(--rule-strong, #8a8578); }
.guides-callout--watch {
    border-left-color: var(--ciq, #c4576a);
    background: color-mix(in srgb, var(--ciq, #c4576a) 5%, #fff);
}
.guides-callout--watch strong { color: var(--ciq, #c4576a); }
.guides-callout--tip {
    border-left-color: var(--liq, #4a9080);
    background: color-mix(in srgb, var(--liq, #4a9080) 5%, #fff);
}
.guides-callout--tip strong { color: var(--liq, #4a9080); }

/* Related guides footer block */
.guides-related {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--rule, #d4d0c8);
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 2px;
}
.guides-related li {
    background: #fff;
    margin: 0;
    padding: 14px 16px;
    list-style: none;
}
.guides-related li::before { display: none; }
.guides-related a {
    border-bottom: 0;
    font-weight: 500;
    color: var(--ink, #1a1a1a);
    line-height: 1.4;
}
.guides-related a:hover { color: var(--riq, #5b6eae); }

/* Article footer */
.guides-article-foot {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--rule, #d4d0c8);
    font-size: 0.9rem;
    color: var(--ink-3, #6b6b6b);
}
.guides-article-foot a {
    color: var(--ink-2, #3d3d3d);
    border-bottom: 1px solid var(--rule, #d4d0c8);
    text-decoration: none;
}
.guides-article-foot a:hover { color: var(--ink, #1a1a1a); border-bottom-color: var(--ink, #1a1a1a); }

/* Responsive: narrow screens collapse to single column */
@media (max-width: 980px) {
    .guides-shell { grid-template-columns: 1fr; }
    .guides-rail {
        max-height: 320px;
        border-right: 0;
        border-bottom: 1px solid var(--rule, #d4d0c8);
    }
    .guides-article { padding: 28px 22px 48px; }
    .guides-related { grid-template-columns: 1fr; }
}

/* =====================================================================
   Fixed Assets + Projects — supporting styles
   ===================================================================== */

/* Dim disposed/archived asset rows so they don't read as "active" */
tr.muted-row td { color: var(--ink-3, #6b6b6b); background: var(--bg-band, #faf8f5); }
tr.muted-row strong { color: var(--ink-2, #3d3d3d); }

/* Funding fieldset on FAS create form. We deliberately do NOT add the
   .field class to the fieldset because .field is a one-column grid that
   ends up squeezing the radio-row labels into a narrow column. Instead the
   fieldset is a regular block with its own flex-column layout for the
   radio rows. */
fieldset.fas-funding {
    display: block;
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 8px;
    padding: 12px 14px 14px;
    background: var(--bg-band, #faf8f5);
    margin: 0;
    min-width: 0;
}
fieldset.fas-funding legend {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6b6b6b);
    padding: 0 6px;
}
fieldset.fas-funding .fas-funding-account {
    margin-top: 8px;
    margin-left: 24px;
}

/* Radio + label inline rows (FAS create form). The radio-row is a label
   element, so the input + span need to sit side by side, not stack. */
label.radio-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    line-height: 1.4;
    width: 100%;
}
label.radio-row input[type="radio"] {
    /* Override the global `input { width: 100% }` rule (line ~1061) which
       would otherwise stretch the radio to the full row, collapsing the
       span next to it to 0px. */
    width: 16px;
    margin: 3px 0 0;
    flex: 0 0 auto;
}
label.radio-row span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--ink-2, #3d3d3d);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Checkbox + label inline rows (Project P&L toggle). Same shape as
   .radio-row — overrides .field's grid behaviour so input + span sit
   side-by-side instead of stacked. */
label.checkbox-row {
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
}
label.checkbox-row input[type="checkbox"] {
    /* Same width-override as .radio-row above. */
    width: 16px;
    margin: 0;
    flex: 0 0 auto;
}
label.checkbox-row span {
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--ink-2, #3d3d3d);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Modal footer — row of action buttons */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 0 0;
    margin-top: 14px;
    border-top: 1px solid var(--rule, #d4d0c8);
}

/* Project tag select on invoice/bill line rows. Narrower than the others;
   if no projects exist, the select still renders with just "No project" so
   the column stays consistent. */
.invoice-line-project {
    max-width: 160px;
    min-width: 110px;
    font-size: 0.82rem;
}

/* Styled async confirm dialog (iqbConfirm). Same modal-card chrome as
   the other modals — replaces the OS-native window.confirm() so archive
   / delete / void prompts read in IQ Books' own visual language. */
.iqb-confirm.modal-card {
    max-width: 480px;
    padding: 22px 24px;
    background: var(--paper, #ffffff);
}
.iqb-confirm .modal-header h3 {
    font-size: 1.05rem;
    margin: 0;
}
.iqb-confirm .modal-body p {
    color: var(--ink-2, #3d3d3d);
    line-height: 1.5;
    margin: 6px 0;
}
.iqb-confirm .modal-body p:first-child { margin-top: 0; }
.iqb-confirm .modal-body p:last-child  { margin-bottom: 0; }
.iqb-btn--danger {
    background: var(--ciq, #c4576a);
    color: #fff;
    border: 1px solid var(--ciq, #c4576a);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.iqb-btn--danger:hover { background: #a8455a; border-color: #a8455a; }

/* =========================================================================
   CSV IMPORT — column mapping
   Header dropdowns + amount-shape and date-format segmented controls + a
   live preview table that renders the *resolved* shape of each row before
   import. Match the iq-books panel vocabulary; no inline styles in the markup.
   ========================================================================= */
.csv-mapping {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-band);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.csv-mapping__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}
.csv-mapping__title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin: 0;
}
.csv-mapping__counter {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
}
.csv-mapping__counter strong { color: var(--ink); font-weight: 600; }
.csv-mapping__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.csv-mapping__field { display: flex; flex-direction: column; gap: 6px; }
.csv-mapping__field--full { grid-column: 1 / -1; }
.csv-mapping__field label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.csv-mapping__field label em {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.74rem;
}
.csv-mapping__field label em.is-warning { color: var(--accent-coral); }
.csv-mapping__field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.csv-mapping__field select:hover { border-color: var(--primary); }
.csv-mapping__field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

/* Segmented pill toggle — replaces raw radios for amount shape and date format.
   Markup pattern: <label><input type="radio"><span>Label</span></label>
   The span is the visible chip; :checked + span lights it up. */
.csv-segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--bg-page);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    gap: 2px;
}
.csv-segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.csv-segmented label {
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.csv-segmented label > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    transition: background 0.15s, color 0.15s;
}
.csv-segmented label:hover > span { color: var(--ink); }
.csv-segmented input[type="radio"]:checked + span {
    background: var(--primary);
    color: var(--primary-ink);
    font-weight: 600;
}

/* Status banner under the mapping grid */
.csv-mapping__status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.csv-mapping__status.is-ok    { background: var(--success-tint); color: var(--success); }
.csv-mapping__status.is-warn  { background: var(--warning-tint); color: var(--warning); }
.csv-mapping__status.is-error { background: var(--danger-tint);  color: var(--danger); }
.csv-mapping__status .lucide {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Empty state shown before any file is uploaded */
.csv-mapping__empty {
    margin-top: 12px;
    padding: 24px;
    background: var(--bg-band);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
}
.csv-mapping__empty p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}
.csv-mapping__empty p strong { color: var(--ink-soft); font-weight: 500; }

/* Resolved preview table — readable amounts in mono, ready/skipped pills */
.csv-preview-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.csv-preview-table thead th {
    text-align: left;
    padding: 8px 10px;
    background: var(--bg-band);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.csv-preview-table thead th.money,
.csv-preview-table tbody td.money {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.csv-preview-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.csv-preview-table tbody tr:nth-child(even) td { background: var(--bg-row-stripe); }
.csv-preview-table tbody tr.is-skipped td {
    color: var(--muted-soft);
    font-style: italic;
}
.csv-preview-table .direction-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--line);
}
.csv-preview-table .direction-pill.is-in  { color: var(--success); border-color: color-mix(in srgb, var(--success) 28%, var(--line)); }
.csv-preview-table .direction-pill.is-out { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.csv-preview-table .ready-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 4px;
}
.csv-preview-table .skipped-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted-soft);
    margin-right: 4px;
}

@media (max-width: 720px) {
    .csv-mapping__grid { grid-template-columns: 1fr; }
    .csv-segmented { width: 100%; }
    .csv-segmented label { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------------------
 * Payroll-accounts toggle (Settings -> Organisation) + hint banner inside
 * the Adjustments workspace when the toggle is OFF.
 * ------------------------------------------------------------------------ */
.status-pill.status-on {
    background: rgba(74, 144, 128, 0.15);
    color: var(--liq, #4a9080);
    border: 1px solid rgba(74, 144, 128, 0.35);
}
.status-pill.status-off {
    background: rgba(26, 26, 26, 0.06);
    color: var(--ink-soft, #5e5950);
    border: 1px solid var(--rule, #d4d0c8);
}
.payroll-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px 16px;
    padding: 4px 0 0;
}
.payroll-account-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--cream-soft, #f4f0e6);
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 6px;
    font-size: 0.88rem;
}
.payroll-account-code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.82rem;
}
.payroll-account-name { color: var(--ink); }
.payroll-account-type {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}
.payroll-account-type.type-expense {
    background: rgba(196, 87, 106, 0.12);
    color: var(--ciq, #c4576a);
}
.payroll-account-type.type-liability {
    background: rgba(91, 110, 174, 0.12);
    color: var(--riq, #5b6eae);
}
.payroll-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 24px 16px;
    padding: 12px 16px;
    background: rgba(91, 110, 174, 0.06);
    border: 1px solid rgba(91, 110, 174, 0.25);
    border-left: 3px solid var(--riq, #5b6eae);
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--ink);
}
.payroll-hint i {
    color: var(--riq, #5b6eae);
    flex-shrink: 0;
    margin-top: 2px;
}
.payroll-hint strong { display: block; margin-bottom: 2px; }
.payroll-hint a {
    color: var(--riq, #5b6eae);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.payroll-hint a:hover { color: var(--ciq, #c4576a); }
.payroll-hint-cta {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--riq, #5b6eae);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font: inherit;
}
.payroll-hint-cta:hover { color: var(--ciq, #c4576a); }
.payroll-account-row.is-relocated {
    border-left: 3px solid var(--liq, #4a9080);
    background: rgba(74, 144, 128, 0.06);
}
.payroll-account-row.is-missing {
    opacity: 0.55;
    border-style: dashed;
}
.payroll-account-code small {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ink-soft, #5e5950);
    margin-top: 2px;
    letter-spacing: 0;
}
.payroll-note {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: rgba(74, 144, 128, 0.08);
    border-left: 3px solid var(--liq, #4a9080);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--ink);
}

/* =========================================================================
   =========================================================================
   V2 VISUAL LAYER — June 2026 overhaul
   Per-section identity, semantic status system, statement typography,
   receipt-capture queue, bulk actions, contrast fixes.
   This layer deliberately sits at the END of the sheet so it wins the
   cascade against the generic component styles above without surgery.
   =========================================================================
   ========================================================================= */

:root {
    /* Contrast fixes: muted text was 5.2:1 / 4.1:1 against white. */
    --muted:          #4d5563;
    --muted-soft:     #646e7c;  /* WCAG 1.4.3: >=4.7:1 (was #76808f, 4.0:1) */
    /* Reports own a bronze "statutory ledger" hue — already in the palette
       as the manual-entry chip gold; promoted to a section accent. */
    --accent-bronze:  #8a650c;
}

/* ---- 1. Section accent cascade -----------------------------------------
   render() stamps #mainContent with data-section + --section-accent.
   Every chrome element below derives its tint from that one variable, so
   each workspace carries its own identity without bespoke rules. */
#mainContent {
    --section-accent: var(--primary);
    /* Derived washes — the whole per-section theming system is these four. */
    --section-wash:       color-mix(in srgb, var(--section-accent) 7%, #fbfcfd);
    --section-wash-soft:  color-mix(in srgb, var(--section-accent) 3.5%, #ffffff);
    --section-wash-hover: color-mix(in srgb, var(--section-accent) 11%, #ffffff);
    --section-rule:       color-mix(in srgb, var(--section-accent) 38%, var(--line-strong));
}

#mainContent .subnav-btn.active {
    color: var(--section-accent);
    border-bottom-color: var(--section-accent);
}

#mainContent thead tr,
#mainContent th {
    background: var(--section-wash);
}
#mainContent th {
    border-bottom-color: var(--section-rule);
    color: color-mix(in srgb, var(--section-accent) 55%, var(--ink));
}
#mainContent tbody tr:nth-child(even) {
    background: var(--section-wash-soft);
}
#mainContent tbody tr:hover,
#mainContent tbody tr:nth-child(even):hover {
    background: var(--section-wash-hover);
}
#mainContent tfoot td,
#mainContent tr.row-total td,
#mainContent tr.report-section-row td {
    background: var(--section-wash);
}
#mainContent .panel-header {
    background: var(--section-wash-soft);
}
#mainContent .panel-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
#mainContent .panel-header h3::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--section-accent);
    flex-shrink: 0;
}
#mainContent .bank-summary {
    border-left-color: var(--section-accent);
}
#mainContent .bank-tab.active {
    color: var(--section-accent);
    border-bottom-color: var(--section-accent);
}
#mainContent input:focus,
#mainContent select:focus,
#mainContent textarea:focus {
    border-color: var(--section-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent) 22%, transparent);
}
#mainContent .primary-btn,
#mainContent .iqb-btn--solid {
    background: color-mix(in srgb, var(--section-accent) 88%, #10131a);
    border-color: color-mix(in srgb, var(--section-accent) 88%, #10131a);
}
#mainContent .primary-btn:hover,
#mainContent .iqb-btn--solid:hover {
    background: color-mix(in srgb, var(--section-accent) 72%, #10131a);
}

/* Keep the dashboard editorial: no washed tables, its own chrome. */
#mainContent[data-section="dashboard"] thead tr,
#mainContent[data-section="dashboard"] th {
    background: transparent;
}

/* Row actions: half-visible at rest (discoverable), full on hover. The old
   opacity:0 made actions invisible to anyone who didn't already know. */
@media (hover: hover) {
    td.table-action .icon-btn,
    td.table-action .primary-btn,
    td.table-action .secondary-btn,
    td.table-action .danger-btn {
        opacity: 0.45;
    }
}

/* ---- 2. Status pills v2 — filled tints, scannable at table density ----- */
.type-pill,
.status-pill {
    min-height: 21px;
    padding: 1px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.status-pill.posted,
.status-pill.confirmed,
.status-pill.paid {
    color: #135f4d;
    background: color-mix(in srgb, var(--accent-teal) 14%, #ffffff);
    border-color: color-mix(in srgb, var(--accent-teal) 38%, var(--line));
}
.status-pill.issued,
.status-pill.open,
.status-pill.sent {
    color: #2c3f86;
    background: color-mix(in srgb, var(--accent-indigo) 13%, #ffffff);
    border-color: color-mix(in srgb, var(--accent-indigo) 36%, var(--line));
}
.status-pill.partial,
.status-pill.due {
    color: #8a4d04;
    background: color-mix(in srgb, var(--warning) 12%, #ffffff);
    border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
}
.status-pill.draft {
    color: var(--muted);
    background: color-mix(in srgb, var(--accent-slate) 9%, #ffffff);
    border-color: var(--line-strong);
}
.status-pill.overdue,
.status-pill.void,
.status-pill.failed {
    color: #97243d;
    background: color-mix(in srgb, var(--accent-coral) 13%, #ffffff);
    border-color: color-mix(in srgb, var(--accent-coral) 40%, var(--line));
}
.status-pill.void { text-decoration: line-through; text-decoration-thickness: 1px; }
.status-pill.scanning {
    color: #2c3f86;
    background: color-mix(in srgb, var(--accent-indigo) 10%, #ffffff);
    border-color: color-mix(in srgb, var(--accent-indigo) 30%, var(--line));
}

/* ---- 3. Empty states v2 ------------------------------------------------ */
.empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 44px 24px;
    text-align: center;
}
.empty-state .empty-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 9%, #ffffff);
    color: var(--section-accent, var(--primary));
    margin-bottom: 6px;
}
.empty-state .empty-icon svg { width: 22px; height: 22px; }
.empty-state h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-transform: none;
}
.empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    max-width: 420px;
}
.empty-state .empty-cta { margin-top: 10px; }

/* ---- 4. Metric strip: hero + tones ------------------------------------- */
.metric-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metric.metric--hero strong {
    /* Clamped so a nowrap "−£5,563.68" fits the column instead of clipping. */
    font-size: clamp(1.35rem, 1.9vw, 2.15rem);
    color: var(--section-accent, var(--ink));
}
.metric.tone-good strong  { color: var(--accent-teal); }
.metric.tone-bad strong   { color: var(--accent-coral); }
.metric.tone-warn strong  { color: var(--warning); }
.metric small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

/* ---- 5. Statement typography for statutory reports ---------------------
   Reports drop the operational zebra/columns chrome and read like a typeset
   financial statement: hairline rules, serif section heads, double-ruled
   grand totals, generous leading. */
.report-table-mode .table-wrap {
    border: 1px solid var(--line);
    box-shadow: none;
    background: #fffefb;
}
.report-table-mode table { font-size: 0.88rem; }
.report-table-mode th,
.report-table-mode td { border-right: 0; }
.report-table-mode tbody tr:nth-child(even) { background: transparent; }
.report-table-mode tbody tr:hover,
.report-table-mode tbody tr:nth-child(even):hover {
    background: color-mix(in srgb, var(--section-accent) 6%, #ffffff);
}
.report-table-mode thead tr,
.report-table-mode th {
    background: transparent;
    color: var(--muted);
    border-bottom: 1px solid var(--ink);
}
.report-table-mode td { border-bottom: 1px solid var(--line-soft); }
.report-table-mode tr.report-group-head td {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding-top: 22px;
}
.report-table-mode tfoot td,
.report-table-mode tr.row-total td,
.report-table-mode tr.report-section-row td {
    background: transparent;
    border-top: 1px solid var(--ink);
    font-weight: 700;
}
.report-table-mode tr.report-grand-total td {
    border-top: 3px double var(--ink);
    border-bottom: 3px double var(--ink);
    background: transparent;
    font-weight: 700;
    padding-top: 14px;
    padding-bottom: 14px;
}
/* Drillable account rows */
tr[data-drill-account] { cursor: pointer; }
tr[data-drill-account]:hover .cell-primary,
tr[data-drill-account]:hover td:first-child {
    text-decoration: underline;
    text-decoration-color: var(--section-accent);
    text-underline-offset: 3px;
}

/* ---- 6. Filter chips + date presets ------------------------------------ */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.filter-chip {
    min-height: 26px;
    padding: 2px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: #ffffff;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}
.filter-chip:hover { border-color: var(--section-rule); color: var(--ink); }
.filter-chip.active {
    background: var(--section-accent);
    border-color: var(--section-accent);
    color: #ffffff;
}
.filter-chip .chip-count {
    margin-left: 6px;
    font-weight: 500;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}
.date-presets {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.date-presets button {
    min-height: 24px;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}
.date-presets button:hover {
    border-color: var(--section-accent);
    color: var(--section-accent);
}

/* ---- 7. Bulk action bar ------------------------------------------------- */
.bulk-bar {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 16px;
    background: var(--ink);
    color: #f5f5f2;
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
}
.bulk-bar .bulk-count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.bulk-bar select {
    min-height: 28px;
    max-width: 240px;
    background: #2a2a2a;
    color: #f5f5f2;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    font-size: 0.78rem;
}
.bulk-bar .iqb-btn,
.bulk-bar .secondary-btn {
    min-height: 28px;
    font-size: 0.78rem;
}
.bulk-bar .secondary-btn {
    background: transparent;
    color: #d8d8d2;
    border-color: #4a4a4a;
}
.bulk-bar .bulk-dismiss {
    margin-left: auto;
    background: none;
    border: 0;
    color: #9a9a94;
    font-size: 0.78rem;
}
.bulk-bar .bulk-dismiss:hover { color: #ffffff; }

/* ---- 8. Receipt capture v2 ---------------------------------------------- */
.rc-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 980px) { .rc-layout { grid-template-columns: 1fr; } }

.rc-dropzone {
    border: 2px dashed var(--line-strong);
    border-radius: 10px;
    background: var(--section-wash-soft);
    padding: 22px 16px;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.rc-dropzone:hover,
.rc-dropzone.drag {
    border-color: var(--section-accent);
    background: color-mix(in srgb, var(--section-accent) 7%, #ffffff);
}
.rc-dropzone i, .rc-dropzone svg { color: var(--section-accent); }
.rc-dropzone p { margin: 0; font-size: 0.82rem; color: var(--muted); }
.rc-dropzone strong { color: var(--ink); }

.rc-queue { display: grid; gap: 6px; margin-top: 10px; }
.rc-queue-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
}
.rc-queue-item:hover { border-color: var(--section-rule); }
.rc-queue-item.active {
    border-color: var(--section-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--section-accent) 22%, transparent);
}
.rc-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-band);
    border: 1px solid var(--line-soft);
    display: grid;
    place-items: center;
    color: var(--muted-soft);
    overflow: hidden;
}
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rc-queue-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-queue-sub { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }

.rc-review {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}
@media (max-width: 1180px) { .rc-review { grid-template-columns: 1fr; } }
.rc-preview {
    background: #23252a;
    min-height: 420px;
    max-height: 720px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: auto;
}
.rc-preview img {
    max-width: 100%;
    max-height: 700px;
    object-fit: contain;
    display: block;
}
.rc-preview iframe {
    width: 100%;
    height: 700px;
    border: 0;
    background: #ffffff;
}
.rc-preview .rc-preview-empty { color: #9aa0ab; font-size: 0.85rem; padding: 40px; text-align: center; }
.rc-fields { padding: 16px 18px; }
.rc-fields .form-grid { gap: 12px 10px; }

/* Per-field confidence markers */
.conf-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.conf-dot.hi  { background: var(--accent-teal); }
.conf-dot.mid { background: var(--warning); }
.conf-dot.lo  { background: var(--accent-coral); }
.rc-conf-legend {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 0.7rem;
    color: var(--muted);
    padding: 8px 0 2px;
}
.rc-conf-legend .conf-dot { margin-left: 0; margin-right: 4px; }
.rc-vat-check {
    margin-top: 4px;
    font-size: 0.74rem;
    font-family: var(--font-mono);
    color: var(--muted);
}
.rc-vat-check.bad { color: var(--accent-coral); font-weight: 600; }
.rc-dup-warning {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--warning);
    background: var(--warning-tint);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--ink);
}

/* ---- 9. IQ Suite integration band -------------------------------------- */
.iq-band {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--ciq, #c4576a) 24%, var(--line));
    border-left: 3px solid var(--ciq, #c4576a);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ciq, #c4576a) 4%, #ffffff);
}
.iq-band.iq-band--liq {
    border-color: color-mix(in srgb, var(--liq, #4a9080) 24%, var(--line));
    border-left-color: var(--liq, #4a9080);
    background: color-mix(in srgb, var(--liq, #4a9080) 4%, #ffffff);
}
.iq-band.iq-band--riq {
    border-color: color-mix(in srgb, var(--riq, #5b6eae) 24%, var(--line));
    border-left-color: var(--riq, #5b6eae);
    background: color-mix(in srgb, var(--riq, #5b6eae) 4%, #ffffff);
}
.iq-band .iq-band-mark {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}
.iq-band .iq-band-copy { flex: 1; min-width: 220px; }
.iq-band .iq-band-copy strong { display: block; font-size: 0.85rem; color: var(--ink); }
.iq-band .iq-band-copy span { font-size: 0.76rem; color: var(--muted); }
.iq-band .iq-band-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

/* CodeIQ confidence mini-bar inside chips */
.codeiq-chip .conf-bar {
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ciq, #c4576a) 18%, #ffffff);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.codeiq-chip .conf-bar span {
    display: block;
    height: 100%;
    background: var(--ciq, #c4576a);
}

/* ---- 10. Report toolbar (presets + export) ------------------------------ */
.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.report-toolbar .date-presets { margin-right: auto; }

/* Overdue inline note next to a status pill */
.overdue-days {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-coral);
    white-space: nowrap;
}

/* Account-balance column in Categories */
.coa-balance { font-variant-numeric: tabular-nums; }
.coa-balance.is-zero { color: var(--muted-soft); }

/* =========================================================================
   V2 STRUCTURAL LAYER — pass 2 (spatial recomposition)
   ========================================================================= */

/* ---- Dashboard recomposition: quick actions + working grid -------------- */
.dash-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(18px, 2.4vw, 28px) 0 clamp(22px, 3vw, 36px);
}
.dash-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid var(--rule, #d4d0c8);
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink-2, #3d3d3d);
    font-size: 0.84rem;
    font-weight: 600;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.dash-quick-btn i, .dash-quick-btn svg { width: 16px; height: 16px; color: var(--ink-3, #6b6b6b); }
.dash-quick-btn:hover {
    border-color: var(--ink);
    background: #ffffff;

}
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(280px, 2fr);
    gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
    margin-bottom: clamp(28px, 3.4vw, 44px);
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-main { display: grid; gap: clamp(22px, 2.8vw, 34px); min-width: 0; }
.dash-side {
    display: grid;
    gap: 12px;
    min-width: 0;
    border-left: 1px solid var(--rule, #d4d0c8);
    padding-left: clamp(16px, 2vw, 26px);
}
@media (max-width: 1100px) { .dash-side { border-left: 0; padding-left: 0; } }
.dash-side .dash-desk-card { width: 100%; }
.dash-side .dash-aging-card { width: 100%; }
.dash-side .dash-aging-total { font-size: clamp(24px, 2.2vw, 30px); }

/* ---- Create drawers: collapsed "add" forms under panel headers ---------- */
.create-drawer {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--section-wash-soft, #fbfcfd);
    box-shadow: inset 0 3px 6px -4px rgba(15, 23, 42, 0.18);
}
.create-drawer .form-subhead { margin-bottom: 10px; }

/* ---- Overdue amount inside list rows ------------------------------------ */
.overdue-amount {
    color: var(--accent-coral);
    font-weight: 700;
}

/* ---- Bank cards ---------------------------------------------------------- */
.bank-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.bank-card {
    display: grid;
    gap: 4px;
    padding: 18px 20px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.bank-card:hover {
    border-color: var(--section-accent, var(--primary));
    background: var(--cream, #faf8f5);
}
.bank-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.bank-card-id {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
/* Bank monogram — navy (section accent) avatar so each account is recognisable
   at a glance, consistent with the record-identity language elsewhere. */
.bank-card-mono {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    color: var(--section-accent, var(--primary));
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--section-accent, var(--primary)) 20%, transparent);
}
.bank-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.bank-card-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.bank-card-balance {
    margin: 2px 0 6px;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.05;
}
.bank-card-balance.is-negative { color: var(--accent-coral); }
.bank-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--muted);
    border-top: 1px solid var(--line-soft);
    padding-top: 9px;
}
.bank-card-meta .sep { color: var(--muted-soft); }
.bank-card-unrec { color: var(--warning); font-weight: 600; }
.bank-card-open {
    margin-left: auto;
    color: var(--section-accent, var(--primary));
    display: inline-flex;
}
.bank-card-open i, .bank-card-open svg { width: 15px; height: 15px; }

/* ---- Chart of accounts: grouped type bands ------------------------------ */
.coa-table tr.coa-group-head td {
    border-top: 2px solid var(--line-strong);
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 700;
}
.coa-group-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.coa-group-count {
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.coa-table tr.coa-group-head.coa-type-asset td     { background: color-mix(in srgb, var(--success) 7%, #ffffff); }
.coa-table tr.coa-group-head.coa-type-liability td { background: color-mix(in srgb, var(--warning) 8%, #ffffff); }
.coa-table tr.coa-group-head.coa-type-equity td    { background: color-mix(in srgb, var(--info) 7%, #ffffff); }
.coa-table tr.coa-group-head.coa-type-revenue td   { background: color-mix(in srgb, var(--accent-teal) 9%, #ffffff); }
.coa-table tr.coa-group-head.coa-type-expense td   { background: color-mix(in srgb, var(--accent-coral) 7%, #ffffff); }
.coa-table tr.coa-group-head.coa-type-suspense td  { background: color-mix(in srgb, var(--accent-slate) 9%, #ffffff); }
.coa-table tbody tr:nth-child(even) { background: transparent; }
.coa-table .coa-code { width: 70px; }

/* ---- Journal composer ----------------------------------------------------- */
.journal-composer {
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
}
.jl-row { display: contents; }
.jl-row.hidden { display: none; }
.jc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.jc-totals {
    display: flex;
    align-items: center;
    gap: 22px;
}
.jc-total { display: grid; justify-items: end; }
.jc-total span {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.jc-total strong {
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--ink);
}
.jc-diff {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 2px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}
.jc-diff.is-balanced {
    color: #135f4d;
    border-color: color-mix(in srgb, var(--accent-teal) 40%, var(--line));
    background: color-mix(in srgb, var(--accent-teal) 12%, #ffffff);
}
.jc-diff.is-out {
    color: #97243d;
    border-color: color-mix(in srgb, var(--accent-coral) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-coral) 11%, #ffffff);
}

/* ---- Pass-3 global polish -------------------------------------------------
   Control-level fixes that read as quality everywhere at once. */

/* Checkboxes/radios inherited min-height:32px from the generic input rule and
   rendered as big empty boxes in filter rows. Hard-size them. */
/* Custom-drawn checkboxes/radios — native boxes read as unfinished. An
   appearance:none square (2px) that fills ink with a white tick when checked;
   the tick is centre-anchored so it stays aligned at any of our sizes. */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    border: 1.5px solid var(--line-strong);
    border-radius: 2px;
    background: var(--bg-panel, #ffffff);
    transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--ink); }
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--ink); border-color: var(--ink); }
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%);
}
.filter-row label.inline-field input[type="checkbox"] { margin: 0; }

/* Filter rows: every control sits on one 36px baseline. */
.filter-row > input[type="search"],
.filter-row .inline-field input,
.filter-row .inline-field select,
.filter-row .secondary-btn,
.filter-row .primary-btn {
    min-height: 34px;
}
.filter-row .date-presets { align-self: center; }

/* Panel headers carry slightly more presence. */
.panel-header h3 { font-size: 0.8rem; }

/* Subnav tabs: a touch larger and roomier — they're primary navigation. */
.subnav-btn { font-size: 0.84rem; min-height: 38px; padding: 0 14px; }

/* Pager block aligns as one bar. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager-controls { display: flex; gap: 6px; }

/* Drill rows advertise themselves. */
tr[data-drill-account] td:first-child { position: relative; }

/* Legacy buttons inherit the pill language so the two button systems stop
   reading as two different products. */
.primary-btn, .secondary-btn, .danger-btn {
    border-radius: 999px;
}

/* ---- Contact cockpit band (customer/supplier detail) --------------------- */
.contact-band {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}
.contact-band .metric-strip { min-width: 0; }
.contact-band-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .contact-band-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

/* Record identity — a monogram + at-a-glance status chip that anchors the
   detail header, so a customer/supplier page reads as a record, not a form.
   The monogram tint follows the section accent stamped on #mainContent. */
.record-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--cream);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    flex-shrink: 0;
}
.record-monogram {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--section-accent);
    background: color-mix(in srgb, var(--section-accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--section-accent) 22%, transparent);
}
.record-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    white-space: nowrap;
}
.record-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.record-status--bad  { color: var(--accent-coral); border-color: color-mix(in srgb, var(--accent-coral) 32%, var(--line)); }
.record-status--good { color: var(--accent-teal);  border-color: color-mix(in srgb, var(--accent-teal) 32%, var(--line)); }
.record-status--warn { color: var(--warning);      border-color: color-mix(in srgb, var(--warning) 32%, var(--line)); }
.record-status--neutral { color: var(--ink-3); }
@media (max-width: 900px) {
    .record-identity { flex-direction: row; justify-content: flex-start; width: 100%; }
}

/* Ageing strip — a stacked bar of outstanding balance by days past due, with
   a muted calm→warm→hot ramp. The thin track gaps + pill ends keep it crisp. */
.aging {
    background: var(--cream);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 13px 18px 15px;
    display: grid;
    gap: 11px;
}
.aging-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.aging-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}
.aging-sum {
    font-size: 0.82rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.aging-sum .muted { font-family: var(--sans); }
.aging-bar {
    display: flex;
    height: 11px;
    border-radius: 999px;
    overflow: hidden;
    gap: 2px;
    background: color-mix(in srgb, var(--rule) 55%, transparent);
}
.aging-seg {
    min-width: 5px;
    flex-basis: 0;
    transition: filter 0.14s ease;
}
.aging-seg:hover { filter: brightness(1.07) saturate(1.05); }
.aging-seg--current,  .aging-swatch--current  { background: #4a9080; }
.aging-seg--d30,      .aging-swatch--d30       { background: #b8923f; }
.aging-seg--d60,      .aging-swatch--d60       { background: #c47a3f; }
.aging-seg--d90,      .aging-swatch--d90       { background: #c4576a; }
.aging-seg--d90p,     .aging-swatch--d90p      { background: #9e3550; }
.aging-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.aging-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.aging-swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}
.aging-key b {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}

/* ---- Report mastheads ----------------------------------------------------- */
.report-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px 18px;
    border-bottom: 2px solid var(--ink);
    background: #fffefb;
}
.report-masthead-org {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.report-masthead-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.02em;
    color: var(--ink);
}
.report-masthead-period {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.verdict-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    font-size: 0.8rem;
    font-weight: 700;
}
.verdict-chip i, .verdict-chip svg { width: 14px; height: 14px; }
.verdict-chip.is-good {
    color: #135f4d;
    border-color: color-mix(in srgb, var(--accent-teal) 42%, var(--line));
    background: color-mix(in srgb, var(--accent-teal) 12%, #ffffff);
}
.verdict-chip.is-bad {
    color: #97243d;
    border-color: color-mix(in srgb, var(--accent-coral) 44%, var(--line));
    background: color-mix(in srgb, var(--accent-coral) 11%, #ffffff);
}
.verdict-figure {
    display: grid;
    justify-items: end;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.verdict-figure small {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.verdict-figure.is-good { color: #135f4d; }
.verdict-figure.is-bad { color: #97243d; }

/* PrepIQ year-end handoff — a complete job brief embedded in the close flow. */
.prepiq-panel {
    --prepiq: var(--bronze, #a8762e);
    border-left: 3px solid var(--prepiq);
    border-color: color-mix(in srgb, var(--prepiq) 28%, var(--rule));
}
.prepiq-panel .panel-header {
    background: color-mix(in srgb, var(--prepiq) 5%, var(--cream));
}
.prepiq-panel .panel-header h3::before {
    background: var(--prepiq);
}
.prepiq-panel #prepiqPrepareBtn {
    background: var(--prepiq);
    border-color: var(--prepiq);
}
.prepiq-period-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.8fr) minmax(220px, 1fr);
    gap: var(--space-3);
    align-items: end;
}
.prepiq-period-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-family: var(--mono);
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.prepiq-continuity-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    margin-block: var(--space-4);
    padding-block: var(--space-3);
    border-block: 1px solid color-mix(in srgb, var(--prepiq) 30%, var(--rule));
}
.prepiq-continuity-note > i { color: var(--prepiq); margin-top: 2px; }
.prepiq-continuity-note p { margin: 3px 0 0; color: var(--ink-3); line-height: 1.55; }
.prepiq-brief {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--cream);
}
.prepiq-brief > summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}
.prepiq-brief > summary::-webkit-details-marker { display: none; }
.prepiq-brief > summary span { display: grid; gap: 2px; min-width: 0; }
.prepiq-brief > summary small { color: var(--ink-3); font-weight: 400; }
.prepiq-brief > summary > i { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
.prepiq-brief[open] > summary > i { transform: rotate(180deg); }
.prepiq-brief-body {
    padding: 18px 16px 20px;
    border-top: 1px solid var(--rule);
}
.prepiq-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-block: var(--space-3);
    background: var(--rule);
    border: 1px solid var(--rule);
}
.prepiq-upload-card {
    position: relative;
    min-width: 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    background: var(--cream);
    cursor: pointer;
}
.prepiq-upload-card:hover { background: color-mix(in srgb, var(--prepiq) 5%, var(--cream)); }
.prepiq-upload-card:focus-within { outline: 2px solid var(--prepiq); outline-offset: -2px; }
.prepiq-upload-card > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 9px; }
/* Lucide swaps <i data-lucide> for an <svg>, so target both — with `i` alone
   the icon fell out of its rows and <small> collapsed into the 20px icon
   column, wrapping one word per line. Text is pinned to column 2 explicitly. */
.prepiq-upload-card > span :is(i, svg) { grid-row: 1 / 3; grid-column: 1; color: var(--prepiq); }
.prepiq-upload-card > span :is(strong, small) { grid-column: 2; min-width: 0; }
.prepiq-upload-card small { color: var(--ink-3); line-height: 1.45; }
.prepiq-upload-card > b { color: var(--prepiq); font-size: 13px; }
.prepiq-upload-card input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.prepiq-file-group {
    display: grid;
    grid-template-columns: minmax(130px, 0.25fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-block: 8px;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
}
.prepiq-file-group > div { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.prepiq-file-pill {
    max-width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline-start: 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--ivory);
}
.prepiq-file-pill > span { min-width: 0; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prepiq-file-pill > i { width: 14px; color: var(--prepiq); }
.prepiq-file-pill .icon-btn { width: 32px; height: 32px; min-height: 32px; border: 0; }
.prepiq-depth {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: var(--space-4) 0 0;
    padding: 0;
    border: 0;
}
.prepiq-depth legend { margin-bottom: 8px; font-weight: 600; }
.prepiq-depth label { position: relative; display: block; cursor: pointer; }
.prepiq-depth input { position: absolute; opacity: 0; }
.prepiq-depth label > span {
    min-height: 86px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding: 14px;
    border: 1px solid var(--rule);
    background: var(--cream);
}
.prepiq-depth small { grid-column: 1; color: var(--ink-3); }
.prepiq-depth b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--prepiq); font-family: var(--mono); font-size: 12px; }
.prepiq-depth input:checked + span { border-color: var(--prepiq); background: color-mix(in srgb, var(--prepiq) 6%, var(--cream)); box-shadow: inset 3px 0 var(--prepiq); }
.prepiq-depth input:focus-visible + span { outline: 2px solid var(--prepiq); outline-offset: 2px; }
.prepiq-submit-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: var(--space-4);
}
.prepiq-submit-row .muted { font-size: 12px; line-height: 1.45; }
@media (max-width: 840px) {
    .prepiq-period-grid,
    .prepiq-upload-grid,
    .prepiq-depth { grid-template-columns: 1fr; }
    .prepiq-file-group { grid-template-columns: 1fr; }
    .prepiq-upload-card { min-height: 116px; }
}
@media (max-width: 560px) {
    .prepiq-submit-row { grid-template-columns: 1fr; }
    .prepiq-submit-row .iqb-btn { width: 100%; justify-content: center; }
    .prepiq-file-pill .icon-btn { width: 44px; height: 44px; min-height: 44px; }
}

/* =====================================================================
   Bank reconciliation (Reconcile tab)
   ===================================================================== */

.recon-upload-grid { margin-top: 16px; }
.recon-run-row { display: flex; align-items: flex-end; gap: 14px; }
.recon-tolerance select { min-width: 110px; }
.recon-preview table td { font-size: 13px; }
.recon-row-skip td { color: var(--muted, #8a8578); font-style: italic; font-size: 12px; }

.recon-results { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

/* Verdict masthead — tone-tinted band with a match dial */
.recon-masthead {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    border-radius: 14px; padding: 22px 26px; color: #fff;
}
.recon-masthead--good { background: linear-gradient(135deg, #2e5d43, #3d7a58); }
.recon-masthead--warn { background: linear-gradient(135deg, #7a5c18, #9a7a28); }
.recon-masthead--bad  { background: linear-gradient(135deg, #6e3024, #8a4535); }
.recon-masthead .eyebrow { color: rgba(255,255,255,0.75); margin: 0 0 4px; }
.recon-masthead h3 { margin: 0 0 6px; font-size: 1.35rem; color: #fff; }
.recon-masthead-sub { margin: 0; color: rgba(255,255,255,0.85); font-size: 13.5px; }
.recon-dial { position: relative; color: #fff; flex: 0 0 auto; }
.recon-dial strong {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; font-variant-numeric: tabular-nums;
}

.recon-walk .metric strong { font-variant-numeric: tabular-nums; }

.recon-note {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--line, #e4ded2); border-left: 3px solid #b48228;
    background: #fdf9ee; border-radius: 10px; padding: 12px 14px; font-size: 13.5px;
}
.recon-note svg { flex: 0 0 auto; margin-top: 1px; width: 16px; height: 16px; color: #7a5c18; }

/* Discrepancy buckets */
.recon-bucket .panel-header h3 { display: flex; align-items: center; gap: 8px; }
.recon-bucket .panel-header h3 svg { width: 17px; height: 17px; }
.recon-bucket--suggest { border-left: 3px solid #b48228; }
.recon-bucket--books   { border-left: 3px solid #8a4535; }
.recon-bucket--stmt    { border-left: 3px solid #3d6a8a; }
.recon-bucket--matched { border-left: 3px solid #3d7a58; }
.recon-bucket-body { display: flex; flex-direction: column; gap: 10px; }

.recon-pair {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    border: 1px solid var(--line, #ece6da); border-radius: 10px; padding: 10px 14px;
    background: #fffdf9;
}
.recon-pair--dup { border-color: #d8b08a; background: #fdf6ec; }
.recon-pair--matched { background: #f7faf6; }
.recon-pair-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; flex: 1 1 auto; min-width: 0; }
/* Grid items default to min-width:auto, so a nowrap description forces the
   whole results column past the viewport and clips the fix buttons. */
.recon-pair-cols > div { min-width: 0; }
.recon-results { min-width: 0; }
.recon-pair-cols--single { grid-template-columns: 1fr; }
.recon-side-label {
    margin: 0 0 3px; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted, #8a8578); font-weight: 600;
}
.recon-pair-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.recon-days { font-size: 12px; color: var(--muted, #8a8578); white-space: nowrap; }

.recon-item-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 2px 0; }
.recon-item-date { flex: 0 0 78px; font-size: 12.5px; color: var(--muted, #6f6a5e); font-variant-numeric: tabular-nums; }
.recon-item-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.recon-item-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; }

.recon-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600;
    background: #f1ece1; color: #5d574a; white-space: nowrap;
}
.recon-chip svg { width: 12px; height: 12px; }
.recon-chip--receipt { background: #e9f0ea; color: #2e5d43; }
.recon-chip--payment { background: #f0eae9; color: #6e3024; }
.recon-chip--transfer { background: #e9edf2; color: #3d5a78; }
.recon-chip--bank { background: #f1ece1; color: #5d574a; }
.recon-chip--journal { background: #efe9f0; color: #5d4a6e; }
.recon-chip--matched { background: #e9f0ea; color: #2e5d43; }

.recon-dup-note {
    display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 2px;
    font-size: 12.5px; color: #6e4a24; background: #f9efdd; border-radius: 8px; padding: 8px 10px;
}
.recon-dup-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.recon-consequence { margin: 4px 0 0; font-size: 12px; color: var(--muted, #8a8578); }

.recon-matched-header { cursor: pointer; user-select: none; }
.recon-matched-header:hover h3 { color: #2e5d43; }

.recon-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 2px 18px; }
.recon-footer-right { display: flex; align-items: center; gap: 10px; }

.status-pill.pill-good { background: #e9f0ea; color: #2e5d43; }

@media (max-width: 900px) {
    .recon-masthead { flex-direction: column; align-items: flex-start; }
    .recon-pair { flex-direction: column; align-items: stretch; }
    .recon-pair-cols { grid-template-columns: 1fr; }
    .recon-pair-actions { justify-content: flex-end; }
}

/* =====================================================================
   Tax statement modal — the drill surface behind VAT boxes and ITSA
   categories. A statement document: navy masthead, totals band, ledger
   table with mono figures, paginated footer.
   ===================================================================== */

.tax-stmt-card {
    max-width: 920px;
    width: min(920px, calc(100vw - 48px));
    padding: 0;
    overflow: hidden;
    border-top: 3px solid var(--ink);
}
.tax-stmt-mast {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; padding: 22px 26px 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, #ffffff), #ffffff);
    border-bottom: 1px solid var(--line, #e4e0d8);
}
.tax-stmt-eyebrow {
    display: inline-block; font-family: var(--mono, ui-monospace);
    font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 6px;
}
.tax-stmt-mast h3 {
    font-family: var(--serif, Georgia); font-weight: 600; font-size: 1.45rem;
    letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.15;
}
.tax-stmt-mast p { margin: 0; font-size: .85rem; color: var(--ink-soft, #6f675e); }
.tax-stmt-close { flex-shrink: 0; }

.tax-stmt-band {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line, #e4e0d8); background: #fcfbf8;
}
.ts-fig { padding: 14px 26px; border-left: 1px solid var(--line, #e4e0d8); }
.ts-fig:first-child { border-left: 0; }
.ts-fig span {
    display: block; font-family: var(--mono, ui-monospace); font-size: 9.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft, #8a8578);
    margin-bottom: 3px;
}
.ts-fig strong {
    font-family: var(--serif, Georgia); font-weight: 600; font-size: 1.3rem;
    letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.ts-fig:first-child strong { color: var(--ink); }

.tax-stmt-scroll { max-height: min(52vh, 560px); overflow: auto; }
.tax-stmt-table { width: 100%; border-collapse: collapse; }
.tax-stmt-table thead th {
    position: sticky; top: 0; z-index: 1; background: #fff;
    font-family: var(--mono, ui-monospace); font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft, #8a8578);
    text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-strong, #d8d2c4);
}
.tax-stmt-table thead th.ts-amt { text-align: right; padding-right: 26px; }
.tax-stmt-table tbody td {
    padding: 9px 14px; border-bottom: 1px solid var(--line-soft, #efece6);
    font-size: 13.5px; vertical-align: baseline;
}
.tax-stmt-table tbody tr:hover td { background: #faf8f4; }
.tax-stmt-table .ts-date { white-space: nowrap; font-family: var(--mono, ui-monospace); font-size: 12px; color: var(--ink-soft, #6f675e); padding-left: 26px; }
.tax-stmt-table .ts-entry { white-space: nowrap; }
.tax-stmt-table .ts-desc { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tax-stmt-table .ts-acct { font-size: 12.5px; color: var(--ink-soft, #6f675e); white-space: nowrap; }
.tax-stmt-table .ts-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-right: 26px; }
.tax-stmt-empty { text-align: center; color: var(--ink-soft, #8a8578); font-style: italic; padding: 34px 14px !important; }

.tax-stmt-skel td { padding: 12px 26px; }
.tax-stmt-skel span {
    display: block; height: 12px; border-radius: 4px;
    background: linear-gradient(90deg, #f1ede5 25%, #faf8f4 50%, #f1ede5 75%);
    background-size: 200% 100%; animation: tsShimmer 1.2s linear infinite;
}
@keyframes tsShimmer { to { background-position: -200% 0; } }

.tax-stmt-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 26px;
    border-top: 1px solid var(--line, #e4e0d8); background: #fcfbf8;
}
.tax-stmt-pageinfo {
    font-family: var(--mono, ui-monospace); font-size: 11px;
    letter-spacing: .06em; color: var(--ink-soft, #6f675e);
}

/* Drillable rows on the tax reports themselves */
.vat-box-row, .itsa-cat { cursor: pointer; }
.vat-box-row:hover td, .itsa-cat:hover td { background: #faf7f0; }
.vat-box-go {
    width: 12px; height: 12px; margin-left: 7px; vertical-align: -1px;
    color: var(--ink); opacity: 0; transition: opacity .15s ease;
}
.vat-box-row:hover .vat-box-go, .itsa-cat:hover .vat-box-go { opacity: .85; }

@media (max-width: 700px) {
    .tax-stmt-band { grid-template-columns: 1fr 1fr; }
    .ts-fig:nth-child(3) { display: none; }
    .tax-stmt-table .ts-desc { max-width: 160px; }
}

/* ── Receipt capture review pane: room to breathe ──
   The shared 4-column .form-grid crushes inside the ~440px review pane:
   labels collide and inputs shrink below usability. Two columns here,
   with the long CodeIQ-suggestion suffix in normal case. */
.rc-fields { padding: 20px 22px 18px; }
.rc-fields .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
}
.rc-fields .field > span {
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-fields .field > span .muted {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.rc-fields .field select,
.rc-fields .field input { width: 100%; min-width: 0; }
.rc-fields #rcCreateSupplierBtn { margin-top: 8px; }
.rc-preview { min-height: 560px; }
.rc-preview iframe { height: 640px; }
@media (min-width: 1400px) {
    .rc-layout { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
    .rc-review { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
}

/* Receipt capture pane — alignment + breathing room (round 2) */
.rc-fields .form-grid { align-items: start; }
.rc-fields .rc-vat-check { display: block; margin: 2px 0 4px; }
.rc-fields .form-actions { margin-top: 16px; gap: 12px; }
.rc-fields h3 { margin-bottom: 6px; }
.rc-conf-legend { padding: 6px 0 10px; }

/* ── View transactions: reversed / reversal rows ──
   These pairs net to zero in the ledger; without distinct styling an edited
   transaction looks duplicated. */
.journal-line-table tr.jl-void td { opacity: 0.55; }
.journal-line-table tr.jl-void .jl-desc-text { text-decoration: line-through; }
.journal-line-table tr.jl-void .money span { color: var(--muted) !important; }
.jl-void-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fbe9e7;
    color: #b3463c;
    margin-right: 7px;
    vertical-align: 1px;
}
.jl-void-badge.reversal { background: #eef1f4; color: #5a6772; }

/* Multi-currency: a base-currency amount whose underlying line carried a
   foreign original. The dotted underline + help cursor signal that hovering
   reveals the original foreign amount and rate (via the title tooltip). */
.fx-amount {
    border-bottom: 1px dotted color-mix(in srgb, currentColor 55%, transparent);
    cursor: help;
}

/* =====================================================================
   PRODUCTS / STOCK (Task 5) — Products section. Reuses bank-card,
   metric-strip, table, subnav, create-drawer; adds stock-specific chrome.
   ===================================================================== */

/* Item type chip — mono pill, like vat/source chips. */
.prod-type-chip {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.prod-type-chip.is-tracked {
    color: var(--accent-emerald);
    background: color-mix(in srgb, var(--accent-emerald) 11%, transparent);
    border-color: color-mix(in srgb, var(--accent-emerald) 26%, transparent);
}
.prod-type-chip.is-service {
    color: var(--accent-indigo);
    background: color-mix(in srgb, var(--accent-indigo) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-indigo) 24%, transparent);
}
.prod-type-chip.is-untracked {
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 9%, transparent);
    border-color: color-mix(in srgb, var(--muted) 22%, transparent);
}

.prod-card .bank-card-balance.is-muted { color: var(--ink-3, var(--muted)); }
.prod-card .prod-priceunit { font-size: 0.5em; color: var(--muted); font-family: var(--font-sans); letter-spacing: 0; }
.prod-card .prod-low { color: var(--accent-coral); font-weight: 600; }

/* Record band: identity + metric-strip side by side (mirrors customer detail). */
.prod-record-band {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.prod-record-band .record-identity { min-width: 110px; }
.prod-record-band .metric-strip { flex: 1; min-width: 280px; }
.prod-stat-band .metric small { color: var(--accent-emerald); }
.prod-stat-band .metric.tone-bad small { color: var(--accent-coral); }

/* Item record detail tabs (reuse subnav-btn) + actions row. */
.prod-detail-tabs { display: flex; gap: 4px; }
.prod-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The Balance-Sheet tie-out hero — the highest-trust affordance. */
.prod-tie-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--accent-emerald);
    border-radius: 10px;
}
.prod-tie-hero.is-untied { border-left-color: var(--warning); }
.prod-tie-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.prod-tie-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing: -0.025em;
    line-height: 1.02;
    color: var(--ink);
}
.prod-tie-sub { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); }
.prod-tie-badge {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-radius: 8px;
}
.prod-tie-badge.is-tied {
    color: var(--accent-emerald);
    background: color-mix(in srgb, var(--accent-emerald) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-emerald) 26%, transparent);
}
.prod-tie-badge.is-untied {
    color: var(--warning);
    background: var(--warning-tint);
    border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
}
.prod-tie-badge i { width: 26px; height: 26px; }
.prod-tie-badge strong { display: block; font-size: 0.86rem; }
.prod-tie-badge small { display: block; font-size: 0.72rem; opacity: 0.85; font-family: var(--font-mono); }

/* Movement type tag in the ledgers. */
.prod-move-tag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 8%, transparent);
}
.prod-move-tag.move-opening { color: var(--accent-slate); background: color-mix(in srgb, var(--accent-slate) 10%, transparent); }
.prod-move-tag.move-receipt { color: var(--accent-emerald); background: color-mix(in srgb, var(--accent-emerald) 10%, transparent); }
.prod-move-tag.move-issue { color: var(--accent-coral); background: color-mix(in srgb, var(--accent-coral) 10%, transparent); }
.prod-move-tag.move-adjustment,
.prod-move-tag.move-revaluation { color: var(--accent-bronze); background: color-mix(in srgb, var(--accent-bronze) 12%, transparent); }
.prod-move-tag.move-writedown,
.prod-move-tag.move-writedown_reversal { color: var(--accent-indigo); background: color-mix(in srgb, var(--accent-indigo) 10%, transparent); }

/* Ledger tables — the dual running balance reads as the authoritative pair. */
.prod-ledger .prod-ref { color: var(--ink-2, var(--ink)); }
.prod-ledger .prod-move-item { color: var(--muted); }
.prod-ledger tfoot td,
.prod-levels tfoot td { border-top: 2px solid var(--rule); font-size: 0.86rem; }
.prod-ledger tfoot .prod-foot-label,
.prod-levels tfoot .prod-foot-label { text-align: right; color: var(--muted); font-weight: 600; }
.prod-ledger th:nth-last-child(-n+2),
.prod-ledger td:nth-last-child(-n+2) { background: color-mix(in srgb, var(--accent-emerald) 4%, transparent); }
.prod-ledger thead th:last-child,
.prod-ledger tbody td:last-child { font-weight: 600; }

.prod-levels tr.clickable { cursor: pointer; }
.prod-levels tr.is-low td { background: color-mix(in srgb, var(--accent-coral) 5%, transparent); }
.prod-reorder-flag {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-coral);
    background: color-mix(in srgb, var(--accent-coral) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-coral) 24%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.prod-tie-row td { color: var(--muted); }

/* Stocktake worksheet. */
.prod-status-chip {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}
.prod-status-chip.status-draft { color: var(--accent-bronze); background: color-mix(in srgb, var(--accent-bronze) 12%, transparent); }
.prod-status-chip.status-posted { color: var(--accent-emerald); background: color-mix(in srgb, var(--accent-emerald) 11%, transparent); }
.prod-status-chip.status-cancelled { color: var(--muted); background: color-mix(in srgb, var(--muted) 9%, transparent); }
.prod-count-input {
    width: 96px;
    text-align: right;
    font-family: var(--font-mono);
    padding: 5px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
}
.prod-count-input:focus { outline: none; border-color: var(--accent-emerald); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-emerald) 18%, transparent); }
.prod-variance { font-family: var(--font-mono); }

/* Item Details tab. */
.prod-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}
.prod-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cream);
}
.prod-detail-row span { color: var(--muted); font-size: 0.82rem; }
.prod-detail-row strong { font-weight: 600; color: var(--ink); }
.prod-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 2px;
    padding: 12px 14px;
    font-size: 0.82rem;
    color: var(--ink-2, var(--ink));
    background: color-mix(in srgb, var(--accent-indigo) 6%, transparent);
    border-radius: var(--radius);
}
.prod-detail-note i { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent-indigo); margin-top: 1px; }

/* VAT scheme note — flat-rate / cash-accounting explainer above the VAT return. */
.vat-scheme-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2, var(--ink));
    background: color-mix(in srgb, var(--accent-indigo) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-indigo) 20%, transparent);
    border-radius: var(--radius);
}
.vat-scheme-note i { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent-indigo); margin-top: 1px; }

/* Flat Rate Scheme detail band — full-width row inside the Tax & Accounting
   grid, revealed when VAT scheme = Flat rate. Groups the sector/rate/date
   fields so they read as one set and don't interleave with fiscal-year fields. */
.frs-band {
    grid-column: 1 / -1;
    margin: 4px 0 2px;
    padding: 14px 16px 13px;
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    border: 1px solid var(--line-strong);
    border-left: 2px solid var(--primary);
    border-radius: var(--radius);
}
.frs-band-head { margin-bottom: 12px; }
.frs-band-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 4px;
}
.frs-band-note {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2, var(--ink));
    max-width: 70ch;
}
.frs-band .form-grid { gap: 10px; }
.frs-band-foot {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted);
}

/* =========================================================================
   ELEVATION — 2026-07 visual uplift
   One coherent premium pass: dark ink-navy sidebar, content floating as
   white cards on a cool canvas, per-section colour washes, segmented pill
   subnav, KPI metric cards, deeper shadows and hover physics.
   Appended last on purpose: at equal specificity these rules win.
   ========================================================================= */

/* ---- 1. Canvas ------------------------------------------------------- */
.main {
    background:
        radial-gradient(1100px 260px at 18% 0%, rgba(44, 69, 102, 0.05) 0%, transparent 62%),
        linear-gradient(180deg, #f2f4f8 0%, #edf0f5 100%);
}

/* Each workspace gets a faint wash of its own accent at the top of the
   page — instant section identity without touching any component. */
#mainContent {
    background: radial-gradient(1100px 300px at 22% 0%,
        color-mix(in srgb, var(--section-accent, var(--primary)) 6%, transparent) 0%,
        transparent 60%);
    min-height: 100vh;
}

/* ---- 2. Sidebar: soft ivory rail ---------------------------------------
   Was dark navy in the first elevation cut — too harsh next to the
   per-section coloured tabs. Back to a light rail like before, with a
   gentle warm-ivory tint so it still reads as its own layer against the
   cool content canvas. Everything on it keeps the base light styling. */
.sidebar {
    background: linear-gradient(180deg, #f8f7f2 0%, #f2f0e9 100%);
    border-right: 1px solid #e6e3d8;
}
.sidebar-head,
.sidebar.collapsed .sidebar-head { border-bottom-color: #e6e3d8; }
.sidebar-foot { border-top-color: #e6e3d8; }
/* :not(.active) — the active pill is navy with white text; a plain white
   hover background made the current section vanish under the cursor. */
.sidebar .nav-btn:not(.active):hover { background: rgba(255, 255, 255, 0.9); }
.sidebar .secondary-btn { border-radius: 999px; }

/* ---- 3. Topbar: frosted, stronger masthead ---------------------------- */
.topbar {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.topbar-title { font-size: 2.05rem; letter-spacing: -0.016em; }
.topbar-accent {
    height: 3px;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--section-accent),
        color-mix(in srgb, var(--section-accent) 45%, transparent) 46%,
        transparent 82%);
}

/* ---- 4. Subnav: segmented pills on the canvas ------------------------- */
.subnav {
    background: transparent;
    border-bottom: 0;
    gap: 6px;
    padding-top: 12px;
    padding-bottom: 10px;
}
.subnav-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    min-height: 32px;
    margin-bottom: 0;
    padding: 0 14px;
    font-weight: 500;
}
.subnav-btn:hover {
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 10%, #ffffff);
    border-color: color-mix(in srgb, var(--section-accent, var(--primary)) 28%, transparent);
    color: var(--ink);
}
#mainContent .subnav-btn.active {
    background: var(--section-accent, var(--primary));
    border-color: var(--section-accent, var(--primary));
    color: #ffffff;
    font-weight: 600;
}

/* Bank-detail inner tabs pick up the same pill language, one size down. */
.bank-tab {
    border-radius: 999px;
    padding: 0 13px;
    min-height: 30px;
}
#mainContent .bank-tab.active {
    background: color-mix(in srgb, var(--section-accent) 12%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--section-accent) 42%, transparent);
    border-bottom-color: color-mix(in srgb, var(--section-accent) 42%, transparent);
    color: var(--section-accent);
}

/* ---- 5. Panels: flat editorial containers (hairline-ruled, not floating) --- */
.panel {
    border-radius: 2px;
    border-color: var(--line);
    box-shadow: none;
}
.panel-header { padding: 13px 18px; }
.panel-body { padding: 15px 18px; }

/* ---- 6. Metric strip → KPI cards -------------------------------------- */
.metric-strip {
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.metric {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 2px;          /* editorial signature — was a 13px floating tile */
    box-shadow: none;
    overflow: hidden;
}
.metric::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 55%, #ffffff);
}
.metric--hero::before { background: var(--section-accent, var(--primary)); }
.metric.tone-good::before { background: var(--accent-teal, #4a9080); }
.metric.tone-warn::before { background: #c9932c; }
.metric.tone-bad::before  { background: var(--accent-coral, #c4576a); }
.metric strong { font-size: 1.85rem; }
@media (max-width: 900px) {
    .metric { border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent); }
}

/* ---- 7. Buttons: pill + hover physics ---------------------------------- */
.primary-btn,
.secondary-btn,
.danger-btn {
    border-radius: 999px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}
/* Editorial restraint: buttons change colour/border on hover — no lift, no shadow bloom. */
.primary-btn { box-shadow: none; }
.primary-btn:hover { background: var(--primary-hover); }
.primary-btn:active { background: var(--primary-active); }
.secondary-btn {
    background: #ffffff;
    border-color: var(--line-strong);
    box-shadow: none;
}
.secondary-btn:hover {
    border-color: var(--ink, #1a1a1a);
    background: var(--cream, #faf8f5);
}
.secondary-btn:active { background: var(--primary-tint); }
.iqb-btn--solid { box-shadow: none; }
.iqb-btn--solid:hover { box-shadow: none; }

/* Search inputs read as pills, matching the subnav language. */
.filter-row > input[type="search"],
.table-controls input[type="search"] {
    border-radius: 999px;
    padding-left: 14px;
}

/* ---- 8. Tables: crisper headers ---------------------------------------- */
#mainContent thead th {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
}

/* ---- 9. Dashboard: editorial cards — flat, hairline-ruled (no elevated tiles) --- */
.dash-desk-card,
.dash-aging-card {
    background: var(--cream, #faf8f5);
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 2px;                 /* editorial signature radius */
    box-shadow: none;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.dash-desk-card.clickable:hover,
.dash-aging-card.clickable:hover {
    border-color: var(--ink, #1a1a1a);
    background: #ffffff;
}
.suite-card {
    transition: border-color 0.16s ease, background 0.16s ease;
}
.suite-card:hover {
    border-color: var(--ink, #1a1a1a);
}
.dash-quick-btn {
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dash-quick-btn:hover {
    border-color: var(--ink, #1a1a1a);
    background: var(--cream, #faf8f5);
}

/* ---- 10. Small physics + selection ------------------------------------- */
::selection { background: color-mix(in srgb, var(--primary) 20%, transparent); }

/* ---- 11. Modals + overlays join the elevated language ------------------ */
.modal-overlay {
    background: rgba(13, 20, 33, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.modal-card {
    border-radius: 2px;
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: 0 24px 64px -24px rgba(10, 16, 28, 0.5), 0 2px 6px rgba(10, 16, 28, 0.12);
}
.toast { border-radius: 2px; }

/* Guides divider on the ivory rail — match the rail's own hairline. */
.sidebar .nav-btn[data-view="guides"] { border-top-color: #ddd9cc; }

/* =====================================================================
   SIDEBAR CREDITS BAR — the permanently visible IQ Suite balance.
   Three states:
   1. Expanded rail  → full meter (label / fill track / plan + top-up)
   2. Collapsed rail → 44px ring chip with a hover tooltip
   3. Mobile ≤980px  → same ring chip inside the 64px icon rail
   ===================================================================== */
.credits-bar { min-width: 0; }

.credits-full {
    display: grid;
    gap: 6px;
    padding: 0 6px;
}
.credits-bar-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.credits-bar-label {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-soft, #8b97a6);
}
.credits-bar-value {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.credits-bar-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(26, 26, 26, 0.08);
    overflow: hidden;
}
.credits-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--riq, #5b6eae), var(--ciq, #c4576a) 55%, var(--liq, #4a9080));
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.credits-bar-fill.tone-warn { background: linear-gradient(90deg, #d9a03d, #b97a1d); }
.credits-bar-fill.tone-bad { background: linear-gradient(90deg, #c4576a, #9a3648); }
.credits-bar-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.credits-bar-plan {
    font-size: 0.66rem;
    color: var(--muted-soft, #8b97a6);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.credits-bar-link {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted, #5b6b7d);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.credits-bar-link:hover { color: var(--ink); }

/* --- Ring chip (collapsed + mobile) --------------------------------- */
.credits-mini {
    display: none;
    width: 44px;
    height: 38px;
    margin: 0 auto;
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.credits-mini:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--line-strong, #b9b2a2); }
.credits-mini-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(var(--primary, #2c4566) 0%, rgba(26, 26, 26, 0.12) 0);
    position: relative;
}
/* donut hole — matches the ivory rail so the ring reads as a ring */
.credits-mini-ring::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #f5f4ee;
}

/* Collapsed rail: swap full meter for the ring, tooltip on hover
   (same pattern as the collapsed nav-btn tooltips). */
.sidebar.collapsed .credits-full { display: none; }
.sidebar.collapsed .credits-mini { display: flex; }
.sidebar.collapsed .credits-mini:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 7px;
    white-space: nowrap;
    z-index: 60;
    pointer-events: none;
}

/* Mobile icon rail: ring chip only, sized into the 64px column. */
@media (max-width: 980px) {
    .sidebar .credits-full { display: none; }
    .sidebar .credits-mini { display: flex; }
}

/* =====================================================================
   CONVEYANCE PASS (Jul 2026)
   1. jump-flash — contact cockpit "Raise invoice / Record receipt" jump
      lands on the panel with a brief accent ring so the eye follows.
   2. rc-pipeline — receipt capture first-visit strip: what happens after
      you drop a file, and where the finished drafts land.
   ===================================================================== */
.jump-flash {
    outline: 3px solid transparent;
    outline-offset: 3px;
    animation: jumpFlash 1.3s ease-out 0.25s 1;
}
@keyframes jumpFlash {
    0%, 30% { outline-color: color-mix(in srgb, var(--section-accent, #2c4566) 60%, transparent); }
    100% { outline-color: transparent; }
}

.rc-pipeline {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 16px 24px 4px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
}
.rc-step {
    flex: 1 1 220px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}
.rc-step-num {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--section-accent, var(--primary));
    border: 1px solid color-mix(in srgb, var(--section-accent, var(--primary)) 35%, transparent);
    border-radius: 999px;
    padding: 3px 8px;
    flex-shrink: 0;
    margin-top: 1px;
}
.rc-step strong { display: block; font-size: 0.88rem; margin-bottom: 2px; }
.rc-step p { margin: 0; font-size: 0.78rem; color: var(--muted, #5b6b7d); line-height: 1.45; }
.rc-step-arrow {
    align-self: center;
    width: 16px;
    height: 16px;
    color: var(--muted-soft, #8b97a6);
    flex: 0 0 auto;
}
@media (max-width: 860px) { .rc-step-arrow { display: none; } }
.rc-pipeline-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 24px 18px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

/* =====================================================================
   CREDIT CHARGING SURFACES (Jul 2026)
   1. credits-modal — the one disclosure dialog every metered action uses
   2. liq-gate — the LedgerIQ analysis period-picker gate
   ===================================================================== */
.credits-modal { max-width: 460px; }
.credits-modal-intro {
    font-size: 0.88rem;
    color: var(--ink-soft, #3d4c5c);
    line-height: 1.55;
    margin: 0 0 14px;
}
.credits-modal-rows {
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
}
.credits-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 14px;
    font-size: 0.84rem;
}
.credits-modal-row + .credits-modal-row { border-top: 1px solid var(--line); }
.credits-modal-row span { color: var(--muted, #5b6b7d); }
.credits-modal-row strong { text-align: right; }
.credits-modal-cost {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 7%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--section-accent, var(--primary)) 22%, transparent);
}
.credits-modal-cost.is-short {
    background: color-mix(in srgb, #c4576a 8%, #ffffff);
    border-color: color-mix(in srgb, #c4576a 32%, transparent);
}
.credits-modal-cost-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.credits-modal-cost-main > i {
    width: 18px; height: 18px; flex-shrink: 0;
    color: var(--section-accent, var(--primary));
}
.credits-modal-cost.is-short .credits-modal-cost-main > i { color: #9a3648; }
.credits-modal-cost-label {
    display: block;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-soft, #8b97a6);
}
.credits-modal-cost-value { font-size: 0.95rem; }
.credits-modal-balance {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted, #5b6b7d);
    white-space: nowrap;
}
.credits-modal-balance i { width: 13px; height: 13px; color: var(--muted-soft, #8b97a6); }
.credits-modal-balance-after { font-weight: 700; color: var(--ink); }
.credits-modal-balance-after.is-neg { color: #9a3648; }
.credits-modal-short {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: #9a3648;
}
.credits-modal-short i { width: 15px; height: 15px; flex-shrink: 0; }
.credits-modal-short a { font-weight: 700; color: #9a3648; }

.credits-modal-overage {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #5a4a1c;
    background: rgba(185, 122, 29, 0.08);
    border: 1px solid rgba(185, 122, 29, 0.22);
    border-radius: 10px;
}
.credits-modal-overage i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.credits-modal-overage strong { color: #7a5a10; }

/* --- Plan gating: subscriber upsell panel + lock marks ------------------ */
.upsell-panel {
    max-width: 640px;
    margin: 32px auto;
    padding: 44px 40px;
    text-align: center;
}
.upsell-panel .upsell-mark {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--section-accent, var(--primary)) 22%, transparent);
}
.upsell-panel .upsell-mark i { width: 26px; height: 26px; color: var(--section-accent, var(--primary)); }
.upsell-panel .eyebrow { margin-bottom: 6px; }
.upsell-panel h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; margin: 0 0 10px; }
.upsell-panel .upsell-pitch { max-width: 46ch; margin: 0 auto 18px; color: var(--ink-soft, #555); }
.upsell-panel .upsell-includes {
    display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
    margin: 0 0 22px;
}
.upsell-panel .upsell-includes span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: var(--ink-soft, #555);
    padding: 5px 11px;
    border: 1px solid rgba(26, 26, 26, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}
.upsell-panel .upsell-includes i { width: 13px; height: 13px; color: var(--section-accent, var(--primary)); }
.upsell-panel .upsell-foot { font-size: 0.76rem; max-width: 52ch; margin: 18px auto 0; }
.upsell-panel a.iqb-btn { text-decoration: none; }

/* --- Migration wizard + entry bands ------------------------------------ */
.mig-modal { max-width: 620px; width: min(620px, 92vw); }
.mig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mig-tile {
    display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
    padding: 14px 16px; text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 2px;
    font: inherit; transition: border-color 0.15s ease, transform 0.15s ease;
}
.mig-tile:hover { border-color: var(--primary); }
.mig-tile strong { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.mig-tile > span:not(.status-pill) { font-size: 0.76rem; color: var(--ink-soft, #555); }
.mig-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.mig-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 10px; font: inherit;
}
.mig-row:hover { border-color: var(--primary); }
.mig-row i { width: 16px; height: 16px; flex-shrink: 0; }
.mig-radio { align-items: flex-start; }
.mig-radio input[type="radio"] { margin-top: 3px; }
.mig-radio small { color: var(--ink-soft, #555); }
.mig-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.mig-dest {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 10px; font-size: 0.85rem;
    padding: 8px 12px; border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.mig-dest i { width: 14px; height: 14px; }
.mig-offer {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 18px 22px; border-radius: 2px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
.mig-offer--compact { padding: 14px 18px; }
.mig-offer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mig-offer-body .eyebrow { margin: 0; }
.mig-offer-body strong { font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; }
.mig-offer-body span { font-size: 0.8rem; color: var(--ink-soft, #555); }

.nav-btn .nav-lock {
    margin-left: auto;
    display: inline-flex;
    opacity: 0.55;
}
.nav-btn .nav-lock i { width: 12px; height: 12px; }
.subnav-btn .subnav-lock { width: 11px; height: 11px; opacity: 0.55; vertical-align: -1px; }
/* Action button present but gated by plan (e.g. Send on a premium account):
   still clickable — it opens the upgrade modal — but reads as locked. */
.iqb-btn.is-locked, .secondary-btn.is-locked { opacity: 0.6; }
.iqb-btn.is-locked i, .secondary-btn.is-locked i { opacity: 0.75; }

/* --- LedgerIQ gate ---------------------------------------------------- */
.liq-gate .panel-header p { max-width: 68ch; }
.liq-gate-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.liq-gate-chip {
    border: 1px solid var(--line);
    background: var(--bg-panel, #fff);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--muted, #5b6b7d);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.liq-gate-chip:hover {
    border-color: color-mix(in srgb, var(--section-accent, var(--primary)) 40%, transparent);
    color: var(--ink);
}
.liq-gate-chip.active {
    background: var(--section-accent, var(--primary));
    border-color: var(--section-accent, var(--primary));
    color: #fff;
    font-weight: 600;
}
.liq-gate-estimate { font-size: 0.92rem; color: var(--ink-soft, #3d4c5c); }
.liq-gate-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.liq-gate-cost { display: flex; align-items: center; gap: 11px; min-width: 0; }
.liq-gate-cost > i { width: 18px; height: 18px; flex-shrink: 0; color: var(--section-accent, var(--primary)); }
.liq-gate-cost strong { display: block; font-size: 0.95rem; }
.liq-gate-cost small { color: var(--muted, #5b6b7d); font-size: 0.76rem; line-height: 1.4; display: block; max-width: 52ch; }

/* Unlocked-state period chip in the topbar actions */
.liq-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--section-accent, var(--primary)) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--section-accent, var(--primary)) 30%, transparent);
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--section-accent, var(--primary));
    white-space: nowrap;
}
.liq-period-chip i { width: 13px; height: 13px; }

/* Low-confidence CodeIQ suggestion chip — a real button: click writes the
   suggestion into the row's category. Distinct from the passive chip so
   "suggested but not applied" can't be mistaken for "already filled in". */
button.codeiq-chip--pick {
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    border: 1px dashed color-mix(in srgb, #c4576a 55%, transparent);
    background: color-mix(in srgb, #c4576a 6%, #ffffff);
    color: #9d3f56;
    transition: background 0.15s ease, border-color 0.15s ease;
}
button.codeiq-chip--pick:hover {
    background: color-mix(in srgb, #c4576a 12%, #ffffff);
    border-color: #c4576a;
}
button.codeiq-chip--pick i { width: 12px; height: 12px; }


/* ── Invoice design studio ── */
.inv-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); gap: 28px; align-items: start; }
@media (max-width: 980px) { .inv-studio { grid-template-columns: 1fr; } .inv-preview-col { position: static !important; } }
.inv-sec { margin-bottom: 26px; }
.inv-sec > h4 { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin: 0 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.inv-hint { font-size: 12px; margin-top: 10px; }
.inv-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.inv-tpl-card { display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-panel); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.inv-tpl-card:hover { border-color: #9aa8b5; }
.inv-tpl-card.selected { border-color: var(--accent, #1d3a52); box-shadow: 0 0 0 3px rgba(29, 58, 82, 0.12); }
.inv-tpl-card strong { font-size: 0.85rem; margin-top: 7px; }
.inv-tpl-card span { font-size: 11px; color: var(--muted); line-height: 1.35; }
.inv-thumb-clip { position: relative; width: 100%; aspect-ratio: 794 / 560; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: #fff; pointer-events: none; }
.inv-thumb-clip iframe { width: 794px; height: 1123px; border: 0; transform-origin: top left; pointer-events: none; }
.inv-swatch-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 12px; }
.inv-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.inv-swatch.selected { box-shadow: 0 0 0 2px var(--ink); }
.inv-swatch-custom { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line); cursor: pointer; background: conic-gradient(#e05252, #e0b152, #7fc260, #52b9e0, #7a52e0, #e052b9, #e05252); display: inline-block; }
.inv-swatch-custom input { position: absolute; inset: -8px; width: 46px; height: 46px; opacity: 0.01; cursor: pointer; }
.inv-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-chip { font: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg-panel); cursor: pointer; color: var(--ink); }
.inv-chip:hover { border-color: #9aa8b5; }
.inv-chip.selected { border-color: var(--accent, #1d3a52); background: rgba(29, 58, 82, 0.07); font-weight: 600; }
.inv-show-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.inv-show-row label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.inv-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
/* Sections below the template gallery + preview run full width, two-up. */
.inv-detail-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; margin-top: 6px; }
@media (max-width: 980px) { .inv-detail-cols { grid-template-columns: 1fr; } }
.inv-detail-cols + .inv-actions { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.inv-preview-col { position: sticky; top: 14px; }
.inv-preview-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.inv-preview-scale { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #e8e6e0; }
.inv-preview-scale iframe { width: 794px; height: 1123px; border: 0; transform-origin: top left; display: block; }

/* ── Printable document modal (isolated iframe) ── */
.print-modal-card { max-width: 900px; width: min(92vw, 900px); padding: 0; overflow: hidden; }
.print-doc-toolbar { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-band); flex-wrap: wrap; align-items: center; }
.print-design-ctl { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.print-design-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.print-design-ctl select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; background: var(--bg-panel); }
.print-design-ctl input[type="color"] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-panel); cursor: pointer; }
.print-doc-frame { display: block; width: 100%; height: min(76vh, 1160px); border: 0; background: #e8e6e0; }

/* ── Payment reminders panel ── */
.rem-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 6px 0; }
.rem-toggle input { margin-top: 3px; }
.rem-rule { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--line); }
.rem-when { font-size: 0.85rem; color: var(--muted); min-width: 96px; }
.rem-rule .rem-offset { width: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.rem-rule .rem-dir { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.rem-del { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.rem-del:hover { color: #a55a5a; background: rgba(165,90,90,0.08); }

/* ── Invoice design live preview ── */
.inv-preview-wrap { margin-top: 20px; }
.inv-preview-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.inv-preview-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }

/* ── Payments (Stripe Connect) panel ── */
.pay-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--line); }
.pay-status i { width: 26px; height: 26px; flex: none; }
.pay-status--off { background: #faf8f5; }
.pay-status--off i { color: var(--muted); }
.pay-status--pending { background: #fdf6e3; border-color: #ecd9a0; }
.pay-status--pending i { color: #9a6b00; }
.pay-status--on { background: #edf7f0; border-color: #b7ddc4; }
.pay-status--on i { color: #1e7a4d; }
/* Optional employee-expenses workspace: one calm lane from evidence to
   approval to treasury, using the same paper panels and restrained coral
   accent as supplier purchasing. */
.expense-workspace { display:grid; gap:18px; }
.nav-btn[hidden] { display:none !important; }
.expense-tabs { display:flex; gap:6px; padding:5px; width:max-content; max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--bg-panel); }
.expense-tabs button { border:0; background:transparent; color:var(--muted); border-radius:8px; padding:9px 14px; font:inherit; font-weight:700; white-space:nowrap; cursor:pointer; }
.expense-tabs button.is-active { background:color-mix(in srgb, var(--accent-coral) 11%, var(--bg-panel)); color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-coral) 24%, transparent); }
.expense-lines { display:grid; gap:12px; }
.expense-line { border:1px solid var(--line); border-radius:12px; padding:16px; background:color-mix(in srgb, var(--bg-panel) 92%, var(--bg-canvas)); }
.expense-line-head,.expense-person,.expense-settlement { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.expense-line-head { margin-bottom:14px; }
.expense-columns { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:16px; align-items:start; }
.expense-settlement { justify-content:flex-end; border-top:1px solid var(--line); }
.expense-settlement div { display:grid; gap:3px; min-width:130px; text-align:right; }
.expense-settlement span,.expense-person small { color:var(--muted); font-size:.78rem; }
.expense-settlement strong { font-family:var(--font-mono); font-size:1.08rem; }
.payment-run-amount { width:110px; text-align:right; font-family:var(--font-mono); padding:6px 8px; border:1px solid var(--line); border-radius:8px; }
.payment-run-amount:focus { outline:none; border-color:var(--accent); }
.expense-editor-totals { display:flex; gap:18px; margin-right:auto; }
.expense-editor-totals span { color:var(--muted); font-size:.82rem; }
.expense-editor-totals strong { font-family:var(--font-mono); color:var(--ink); margin-left:5px; }
.expense-team-list,.expense-batch-claims { display:grid; gap:0; }
.expense-person { padding:14px 0; border-bottom:1px solid var(--line); }
.expense-person:last-child { border-bottom:0; }
.expense-person p { margin:3px 0; color:var(--muted); }
.expense-person .form-actions { justify-content:flex-end; }
.expense-batch-claims { max-height:350px; overflow:auto; margin-bottom:18px; }
.expense-batch-claims .check-row { padding:12px 0; border-bottom:1px solid var(--line); }
.expense-batch-claims .check-row span { display:grid; gap:3px; }
.expense-batch-claims small { color:var(--muted); }
@media (max-width: 880px) { .expense-columns { grid-template-columns:1fr; } .expense-person { align-items:flex-start; flex-direction:column; } .expense-person .form-actions { justify-content:flex-start; } }

/* Optional budgets: spreadsheet density inside the existing editorial panels,
   with variance colour reserved for meaning rather than decoration. */
.budget-workspace { display:grid; gap:16px; }
.budget-toolbar,.budget-report-controls { display:flex; align-items:end; gap:12px; flex-wrap:wrap; padding:14px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-panel); }
.budget-toolbar .field,.budget-report-controls .field { min-width:150px; margin:0; }
.budget-toolbar .form-actions { margin-left:auto; }
.budget-grid-wrap { overflow:auto; border-top:1px solid var(--line); }
.budget-grid { min-width:max-content; width:100%; border-collapse:separate; border-spacing:0; }
.budget-grid th,.budget-grid td { min-width:132px; padding:9px 10px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.budget-grid th:first-child { position:sticky; left:0; z-index:2; min-width:230px; background:var(--bg-panel); text-align:left; }
.budget-grid thead th { position:sticky; top:0; z-index:3; background:var(--bg-band); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.budget-grid thead th:first-child { z-index:4; background:var(--bg-band); }
.budget-group-row th { color:var(--muted); background:var(--bg-canvas)!important; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.budget-cell-wrap { display:flex; align-items:center; gap:4px; }
.budget-cell-wrap span { color:var(--muted); }
.budget-cell { min-width:96px; width:100%; text-align:right; font-family:var(--font-mono); border:1px solid transparent; background:transparent; padding:7px; border-radius:5px; }
.budget-cell:hover,.budget-cell:focus { border-color:var(--line-strong); background:var(--bg-panel); outline:none; }
.budget-report-controls .segmented { margin-left:auto; }
.budget-report-cell { display:grid; gap:3px; font-family:var(--font-mono); font-size:.75rem; text-align:right; }
.budget-report-cell span { color:var(--muted); }
.budget-favourable { color:var(--success); }
.budget-unfavourable { color:var(--danger); }
@media (max-width:700px){.budget-toolbar .field,.budget-report-controls .field{min-width:calc(50% - 8px)}.budget-toolbar .form-actions{margin-left:0}}

/* Optional project operations: dense detail lives in a modal, leaving the
   everyday project list quiet until a job is deliberately opened. */
.project-work-modal{width:min(1120px,100%);max-height:94vh;overflow:auto}
.project-work-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);background:var(--bg-band)}
.project-work-kpis>div{padding:14px 18px;border-right:1px solid var(--line);display:grid;gap:4px}.project-work-kpis>div:last-child{border:0}
.project-work-kpis span{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.project-work-kpis strong{font-family:var(--font-display);font-size:1.35rem}
.project-work-tabs{display:flex;gap:4px;padding:10px 18px;border-bottom:1px solid var(--line);overflow:auto}.project-work-tabs .subnav-btn{white-space:nowrap}
.project-work-body{min-height:380px}.work-split{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.5fr);gap:18px;align-items:start}
.work-composer{padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-band);position:sticky;top:0}
.work-card-list{display:grid;gap:8px}.work-card-list article{display:flex;justify-content:space-between;gap:16px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-panel)}
.work-card-list article div{display:grid;gap:4px}.work-card-list article span,.work-card-list article b{font-size:.78rem;color:var(--muted)}
.work-card-list article .work-card-actions{display:flex;gap:4px;align-items:center;flex:none}
.project-work-body td small{display:block;margin-top:3px;color:var(--muted)}.project-work-body input[type="date"]{min-width:138px}
.project-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.project-overview-grid .span-all{grid-column:1/-1}
.project-work-loading{min-height:260px;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}.project-work-loading svg{width:24px;height:24px;color:var(--accent);animation:iqb-spin 1s linear infinite}.project-work-loading p{margin:4px 0 0}
.project-work-modal[aria-busy="true"] .project-work-body{opacity:.58;pointer-events:none}.project-work-modal[aria-busy="true"]{cursor:progress}
.project-cost-layout{display:grid;grid-template-columns:minmax(270px,.7fr) minmax(0,1.5fr);gap:18px;align-items:start}.project-cost-ledger,.project-commercial-history{min-width:0;display:grid;gap:8px}
.project-cost-section{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:2px 2px 8px}.project-cost-section h3,.project-cost-section p{margin:0}.project-cost-section--manual{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.project-cost-row,.project-document-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-panel)}
.project-cost-main,.project-cost-value,.project-document-row>div{min-width:0;display:grid;gap:4px}.project-cost-title{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.project-cost-title strong,.project-document-row strong{overflow-wrap:anywhere}.project-cost-main>span,.project-cost-value>span,.project-document-row span{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere}.project-cost-value{text-align:right}.project-cost-row.is-inactive{background:var(--bg-band);color:var(--muted)}
.project-cost-treatment{grid-column:1/-1;border-top:1px solid var(--line-soft);padding-top:9px}.project-cost-treatment summary{width:max-content;max-width:100%;font-size:.78rem;font-weight:700;color:var(--accent);cursor:pointer}.project-cost-treatment form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,.45fr) auto;align-items:end;gap:10px;padding-top:12px}.project-cost-treatment .field{margin:0}
.project-billing-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.72fr);gap:18px;align-items:start}.project-document-form{grid-row:span 2}.project-deposit-form,.project-commercial-history{padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-band)}.project-document-row>div:last-child{text-align:right}.project-document-row .secondary-btn{margin-top:4px;justify-self:end}.project-document-form .check-list{max-height:220px;overflow:auto;overscroll-behavior:contain}
.project-document-form [hidden]{display:none!important}
.entry-form[aria-busy="true"]{cursor:progress;opacity:.72}.entry-form[aria-busy="true"] button{position:relative}
@keyframes iqb-spin{to{transform:rotate(360deg)}}
@media(max-width:860px){.project-cost-layout,.project-billing-layout{grid-template-columns:1fr}.project-document-form{grid-row:auto}.project-cost-layout .work-composer{position:static}}
@media(max-width:760px){.project-work-kpis{grid-template-columns:repeat(2,1fr)}.work-split,.project-overview-grid{grid-template-columns:1fr}.work-composer{position:static}.project-cost-row,.project-document-row{grid-template-columns:1fr}.project-cost-value,.project-document-row>div:last-child{text-align:left}.project-document-row .secondary-btn{justify-self:start}.project-cost-treatment form{grid-template-columns:1fr}.project-work-tabs{padding-inline:12px}.project-work-body{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.project-work-loading svg{animation-duration:2s}}

/* =========================================================================
   ORGANISATION LOGO STUDIO — canvas editor (src/03b-logo-studio.js)
   Layer builder inside the shared #iqbModal shell:
   rail (add blocks) | canvas + layers | inspector.
   ========================================================================= */
.modal-card.logo-studio.ls-v2 { width: min(1180px, 100%); }
.logo-studio .ls-sub { margin: 3px 0 0; font-size: 0.82rem; max-width: 64ch; }

.logo-studio .ls-body2 {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 288px;
    max-height: 76vh;
    min-height: 520px;
}
.logo-studio .ls-rail { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px 12px; }
.logo-studio .ls-rail-sec { margin-bottom: 16px; }
.logo-studio .ls-add-text { width: 100%; justify-content: center; }
.logo-studio .ls-h { margin: 0 0 8px; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.logo-studio .ls-add-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.logo-studio .ls-add { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); cursor: pointer; transition: border-color 0.1s ease, transform 0.1s ease; }
.logo-studio .ls-add:hover { border-color: var(--accent); transform: translateY(-1px); }
.logo-studio .ls-add svg { width: 100%; height: 100%; display: block; }

.logo-studio .ls-canvas-col { display: flex; flex-direction: column; min-width: 0; background: var(--bg-band); }
.logo-studio .ls-stage2 { flex: 1; min-height: 0; padding: 18px; display: flex; }
.logo-studio .ls-art-wrap { flex: 1; position: relative; display: flex; }
.logo-studio #lsArt {
    flex: 1; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); touch-action: none;
    background-color: #fbfbfa;
    background-image:
        linear-gradient(45deg, #edefec 25%, transparent 25%),
        linear-gradient(-45deg, #edefec 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #edefec 75%),
        linear-gradient(-45deg, transparent 75%, #edefec 75%);
    background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.logo-studio .ls-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; pointer-events: none; color: var(--muted); text-align: center; }
.logo-studio .ls-empty i { width: 34px; height: 34px; opacity: 0.5; margin-bottom: 4px; }
.logo-studio .ls-empty p { margin: 0; font-weight: 600; color: var(--ink); }
.logo-studio .ls-empty span { font-size: 0.82rem; max-width: 24ch; }

.logo-studio .ls-sel-box { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; vector-effect: non-scaling-stroke; }
.logo-studio .ls-handle { fill: #fff; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.logo-studio .ls-rot { cursor: grab; }

.logo-studio .ls-layers { border-top: 1px solid var(--line); background: var(--bg-panel); padding: 10px 12px; max-height: 170px; overflow-y: auto; }
.logo-studio .ls-layers-empty { font-size: 0.82rem; padding: 6px 2px; }
.logo-studio .ls-layer { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius); cursor: pointer; }
.logo-studio .ls-layer:hover { background: var(--bg-row-hover); }
.logo-studio .ls-layer.selected { background: var(--accent-tint); }
.logo-studio .ls-layer > i { width: 15px; height: 15px; color: var(--muted); flex: none; }
.logo-studio .ls-layer-name { flex: 1; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-studio .ls-layer-sw { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
.logo-studio .ls-lyr-btn { border: 0; background: none; padding: 3px; border-radius: 4px; cursor: pointer; color: var(--muted); flex: none; }
.logo-studio .ls-lyr-btn:hover { background: var(--bg-canvas); color: var(--ink); }
.logo-studio .ls-lyr-btn i { width: 14px; height: 14px; }

.logo-studio .ls-inspector { border-left: 1px solid var(--line); overflow-y: auto; padding: 14px 14px 20px; }
.logo-studio .ls-insp-empty { text-align: center; padding: 18px 8px; font-size: 0.84rem; }
.logo-studio .ls-insp-empty i { width: 26px; height: 26px; opacity: 0.5; }
.logo-studio .ls-insp-empty p { margin: 8px 0 0; }
.logo-studio .ls-insp-sec { padding: 12px 0; border-top: 1px solid var(--line); }
.logo-studio .ls-insp-sec:first-child { border-top: 0; padding-top: 0; }
.logo-studio .ls-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.logo-studio .ls-swatch { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(0,0,0,0.12); transition: box-shadow 0.12s ease, transform 0.1s ease; }
.logo-studio .ls-swatch:hover { transform: scale(1.08); }
.logo-studio .ls-swatch.selected { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent); }
.logo-studio .ls-text-input { width: 100%; padding: 8px 10px; font-size: 0.92rem; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.logo-studio .ls-font-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.logo-studio .ls-font-chip { min-height: 38px; padding: 4px 6px; font-size: 0.95rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); cursor: pointer; overflow: hidden; white-space: nowrap; color: var(--ink); }
.logo-studio .ls-font-chip.selected { border-color: var(--accent); background: var(--accent-tint); }
.logo-studio .ls-chip-row { display: flex; gap: 6px; }
.logo-studio .ls-chip { padding: 5px 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-panel); cursor: pointer; color: var(--ink); }
.logo-studio .ls-chip.selected { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.logo-studio .ls-slider { display: flex; align-items: center; gap: 9px; }
.logo-studio .ls-slider input[type="range"] { flex: 1; accent-color: var(--accent); }
.logo-studio .ls-slider .mono { font-size: 0.78rem; min-width: 36px; text-align: right; }
.logo-studio .ls-xy { display: flex; gap: 8px; margin-bottom: 10px; }
.logo-studio .ls-xy label { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.logo-studio .ls-xy input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.logo-studio .ls-check { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.logo-studio .ls-del { width: 100%; justify-content: center; color: var(--accent-coral); }
.logo-studio .ls-foot-hint { flex: 1; font-size: 0.76rem; }
.logo-studio #lsSave.is-busy { opacity: 0.7; pointer-events: none; }

@media (max-width: 960px) {
    .logo-studio .ls-body2 { grid-template-columns: 1fr; max-height: 82vh; overflow-y: auto; }
    .logo-studio .ls-rail, .logo-studio .ls-inspector { border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .logo-studio #lsArt { min-height: 320px; }
}

/* Logo studio — custom colour control (native picker + hex field) */
.logo-studio .ls-swatch-custom { position: relative; overflow: hidden; border-color: rgba(0,0,0,0.22); background: conic-gradient(from 0deg, #ff5f5f, #ffd15f, #7bff8a, #5fd0ff, #a97bff, #ff5fd0, #ff5f5f); }
.logo-studio .ls-swatch-custom .ls-color-native { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.logo-studio .ls-hex-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.logo-studio .ls-hex-chip { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
.logo-studio .ls-hex-input { flex: 1; min-width: 0; padding: 6px 9px; font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.logo-studio .ls-hex-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* =========================================================================
   Journey polish — July 2026
   Load-failure notice · Settlement panel + on-account allocation ·
   New-document contact picker · Aged report drill-through
   ========================================================================= */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Workspace load notice ---------------------------------------------- */
/* One calm editorial band, not an alarm. The left rule carries the tone;
   the copy does the reassuring; Retry is the only control. */
.load-notice {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 18px; padding: 14px 18px;
    background: var(--cream, #faf8f5);
    border: 1px solid var(--rule, #d4d0c8);
    border-left: 3px solid var(--ciq, #c4576a);
    border-radius: var(--radius, 2px);
}
.load-notice-mark {
    flex: none; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 999px;
    background: color-mix(in srgb, var(--ciq, #c4576a) 10%, transparent);
    color: var(--ciq, #c4576a);
}
.load-notice-mark svg { width: 17px; height: 17px; }
.load-notice-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.load-notice-copy strong { font-size: 0.9rem; color: var(--ink, #1a1a1a); }
.load-notice-copy span { font-size: 0.8rem; line-height: 1.45; color: var(--ink-3, #6b6b6b); }
.load-notice .iqb-btn { flex: none; }
@media (max-width: 640px) {
    .load-notice { flex-wrap: wrap; }
    .load-notice .iqb-btn { margin-left: 48px; }
}

/* --- Settlement panel (receipt / payment record modal) ------------------ */
.settlement-block {
    margin-top: 16px; padding: 14px 16px 12px;
    background: var(--ivory, #f5f2ed);
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: var(--radius, 2px);
}
.settlement-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--rule, #d4d0c8);
}
.settlement-title {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-3, #6b6b6b);
}
.settlement-meta { font-size: 0.8rem; color: var(--ink-3, #6b6b6b); }
.settlement-meta strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.78rem; color: var(--ink, #1a1a1a); }
.settlement-meta .settlement-onaccount { color: var(--ciq, #c4576a); }
.settlement-rows { display: flex; flex-direction: column; }
.settlement-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 55%, transparent);
}
.settlement-row:last-child { border-bottom: 0; }
.settlement-doc { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.84rem; min-width: 0; }
.settlement-doc svg { width: 13px; height: 13px; color: var(--ink-4, #999); flex: none; }
.settlement-date { font-size: 0.76rem; color: var(--ink-4, #999999); }
.settlement-amt { margin-left: auto; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.82rem; }
.settlement-empty { margin: 10px 0 0; font-size: 0.8rem; color: var(--ink-3, #6b6b6b); }
.settlement-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.settlement-hint { margin: 10px 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--ink-4, #999999); }
.settlement-cta .settlement-hint { margin: 0; flex: 1; min-width: 200px; }

/* --- On-account allocation modal ----------------------------------------- */
.oa-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.oa-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    background: var(--cream, #faf8f5);
    border: 1px solid var(--rule, #d4d0c8);
    border-radius: var(--radius, 2px);
}
.oa-row.is-exact { border-color: color-mix(in srgb, var(--liq, #4a9080) 55%, var(--rule, #d4d0c8)); }
.oa-row.is-cis { opacity: 0.72; background: var(--paper, #edeae4); }
.oa-doc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.oa-num { font-weight: 600; font-size: 0.86rem; display: flex; align-items: center; gap: 8px; }
.oa-meta { font-size: 0.75rem; color: var(--ink-3, #6b6b6b); }
.oa-meta strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 600; }
.oa-cis-tag {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; padding: 1px 7px;
    border-radius: 999px; background: var(--ink, #1a1a1a); color: var(--cream, #faf8f5);
}
.oa-cis-note { font-size: 0.72rem; color: var(--ink-4, #999999); font-style: italic; }
.oa-fill {
    flex: none; padding: 4px 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-3, #6b6b6b);
    background: transparent; border: 1px solid var(--rule, #d4d0c8); border-radius: 999px; cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.oa-fill:hover { color: var(--ink, #1a1a1a); border-color: var(--rule-strong, #8a8578); }
.oa-input { width: 108px; flex: none; text-align: right; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.oa-footer {
    margin-top: 12px; padding: 10px 12px;
    font-size: 0.8rem; color: var(--ink-3, #6b6b6b);
    background: var(--ivory, #f5f2ed);
    border: 1px solid var(--rule, #d4d0c8); border-radius: var(--radius, 2px);
}
.oa-footer strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); color: var(--ink, #1a1a1a); }
.oa-footer.is-bad { border-color: color-mix(in srgb, var(--ciq, #c4576a) 55%, var(--rule, #d4d0c8)); color: var(--ciq, #c4576a); }
.oa-footer.is-bad strong { color: var(--ciq, #c4576a); }

/* --- New-document contact picker ------------------------------------------ */
.ndp-body { display: flex; flex-direction: column; gap: 10px; }
.ndp-search {
    width: 100%; padding: 12px 14px; font-size: 1rem;
    border: 1px solid var(--rule, #d4d0c8); border-radius: var(--radius, 2px);
    background: var(--cream, #faf8f5);
}
.ndp-search:focus { outline: none; border-color: var(--rule-strong, #8a8578); }
.ndp-list { display: flex; flex-direction: column; max-height: 44vh; overflow-y: auto; border-top: 1px solid var(--rule, #d4d0c8); }
.ndp-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 8px; text-align: left; cursor: pointer;
    background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 55%, transparent);
    transition: background 100ms ease;
}
.ndp-row:hover { background: var(--ivory, #f5f2ed); }
.ndp-row.is-active { background: var(--ivory, #f5f2ed); box-shadow: inset 3px 0 0 var(--ink, #1a1a1a); }
.ndp-mono {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 999px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.7rem; font-weight: 600;
    background: var(--paper, #edeae4); color: var(--ink-2, #3d3d3d);
}
.ndp-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ndp-name strong { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndp-name small { font-size: 0.72rem; color: var(--ink-4, #999999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndp-owing {
    flex: none; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.7rem;
    padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--ciq, #c4576a) 9%, transparent); color: var(--ciq, #c4576a);
}
.ndp-empty { padding: 18px 8px; }
.ndp-keys { margin: 0; font-size: 0.7rem; color: var(--ink-4, #999999); text-align: right; }
.ndp-keys kbd {
    display: inline-block; min-width: 16px; padding: 1px 5px; margin: 0 1px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.66rem; text-align: center;
    border: 1px solid var(--rule, #d4d0c8); border-bottom-width: 2px; border-radius: 4px;
    background: var(--cream, #faf8f5); color: var(--ink-3, #6b6b6b);
}

/* --- Aged report drill-through ------------------------------------------ */
.aged-table--live tbody tr.aged-row { cursor: pointer; transition: background 100ms ease; }
.aged-table--live tbody tr.aged-row:hover,
.aged-table--live tbody tr.aged-row:focus-visible { background: var(--ivory, #f5f2ed); outline: none; }
.aged-actions-col { width: 84px; text-align: right; white-space: nowrap; }
.aged-row .icon-btn { opacity: 0; transition: opacity 120ms ease; vertical-align: middle; }
.aged-row .aged-row-go {
    display: inline-grid; place-items: center; vertical-align: middle;
    width: 26px; height: 26px; margin-left: 2px; color: var(--ink-4, #999999);
    opacity: 0; transform: translateX(-3px);
    transition: opacity 120ms ease, transform 120ms ease;
}
.aged-row .aged-row-go svg { width: 14px; height: 14px; }
.aged-row:hover .icon-btn,
.aged-row:focus-visible .icon-btn,
.aged-row:hover .aged-row-go,
.aged-row:focus-visible .aged-row-go { opacity: 1; transform: translateX(0); }
@media (hover: none) {
    .aged-row .icon-btn, .aged-row .aged-row-go { opacity: 1; transform: none; }
}

/* --- Bank settings: fixed-fact row + readiness-gated retire section ------ */
.bank-fact { }
.bank-fact-body {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; background: var(--ivory, #f5f2ed);
    border: 1px dashed var(--rule, #d4d0c8); border-radius: var(--radius, 2px);
}
.bank-fact-body strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.85rem; }
.bank-fact-body small { font-size: 0.72rem; line-height: 1.5; color: var(--ink-4, #999999); }
.bank-retire {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--rule, #d4d0c8);
}
.bank-retire-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.bank-retire-check {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; font-size: 0.8rem; color: var(--ink-2, #3d3d3d);
}
.bank-retire-check strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.bank-retire-mark {
    flex: none; display: grid; place-items: center;
    width: 20px; height: 20px; margin-top: 1px; border-radius: 999px;
}
.bank-retire-mark svg { width: 12px; height: 12px; }
.bank-retire-check.is-ok .bank-retire-mark { background: color-mix(in srgb, var(--liq, #4a9080) 14%, transparent); color: var(--liq, #4a9080); }
.bank-retire-check.is-blocked .bank-retire-mark { background: color-mix(in srgb, var(--ciq, #c4576a) 12%, transparent); color: var(--ciq, #c4576a); }
.bank-retire-check.is-blocked { color: var(--ink-2, #3d3d3d); }

/* --- Archived banks: quiet footer + restore list -------------------------- */
.archived-banks-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 55%, transparent); }
.archived-banks-foot .link-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-3, #6b6b6b); }
.archived-banks-foot .link-btn svg { width: 13px; height: 13px; }
.archived-banks-foot .link-btn:hover { color: var(--ink, #1a1a1a); }
.archived-bank-list { display: flex; flex-direction: column; }
.archived-bank-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 2px; border-bottom: 1px solid color-mix(in srgb, var(--rule, #d4d0c8) 55%, transparent);
}
.archived-bank-row:last-child { border-bottom: 0; }
.archived-bank-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.archived-bank-meta strong { font-size: 0.88rem; }
.archived-bank-meta small { font-size: 0.72rem; color: var(--ink-4, #999999); }

/* --- Organisation lifecycle (Settings → Organisation) --------------------- */
/* Calm by design: the safety lives in the type-to-confirm interaction, so
   the panel keeps its editorial voice instead of shouting in red. */
.org-lifecycle .org-archive-row { max-width: 640px; }
.org-archive-copy { display: flex; flex-direction: column; gap: 4px; }
.org-archive-copy strong { font-size: 0.92rem; }
.org-archive-copy span { font-size: 0.8rem; line-height: 1.55; color: var(--ink-3, #6b6b6b); }
.org-archive-confirm {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 14px;
    background: var(--ivory, #f5f2ed);
    border: 1px solid var(--rule, #d4d0c8); border-radius: var(--radius, 2px);
}
.org-archive-confirm .field { flex: 1; min-width: 220px; margin: 0; }
.org-archive-confirm .danger-btn { flex: none; }
.org-archive-confirm input::placeholder { color: var(--ink-4, #999999); font-style: italic; }
.archived-orgs { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule, #d4d0c8); display: flex; flex-direction: column; gap: 4px; }
.archived-orgs .settlement-title { margin-bottom: 6px; }

/* --- Payment runs: foreign-currency bills, named not hidden --------------- */
.fx-excluded-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 10px 24px 0; padding: 10px 12px;
    font-size: 0.78rem; line-height: 1.5; color: var(--ink-3, #6b6b6b);
    background: var(--ivory, #f5f2ed);
    border: 1px solid var(--rule, #d4d0c8); border-radius: var(--radius, 2px);
}
.fx-excluded-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--riq, #5b6eae); }
.fx-excluded-note strong { color: var(--ink-2, #3d3d3d); }

/* =========================================================================
   EDITORIAL ELEVATION — July 2026
   The finishing layer over the token retune above. One thesis: the ledger
   is a typeset financial document, not a SaaS grid. Tables lose their
   zebra and blue band and gain accounting typography; chrome loses its
   shadows and gains hairline structure; everything that moves, moves with
   one short, confident easing.
   ========================================================================= */

:root {
    --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
}

::selection { background: #1a1a1a; color: #faf8f5; }

/* Warm, thin scrollbars — the blue-grey OS default breaks the paper. */
* { scrollbar-width: thin; scrollbar-color: #c9c2b5 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c9c2b5; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #8a8578; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- Tables: the typeset ledger ------------------------------------------ */
/* Flat editorial object: hairline frame, no elevation. */
.table-wrap {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    box-shadow: none;
}

/* The header is the frame, not a filled band: quiet small-caps labels on the
   paper itself, closed by a single definite rule — the line a typesetter
   draws before the figures start. */
thead tr { background: transparent; }
th {
    background: transparent;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    border-bottom: 1px solid var(--rule-strong, #8a8578);
    padding-top: 11px;
    padding-bottom: 9px;
}

/* No zebra. Rows are separated by hairlines and tracked by a warm hover
   wash — a ruler-under-the-line gesture, not a repaint. */
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover,
tbody tr:nth-child(even):hover { background: var(--bg-row-hover); }
tbody tr { transition: background 0.14s var(--ease-out); }
tbody td { color: var(--ink-soft); }

th, td { padding: 11px 18px; border-right: 0; }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }

/* Money is set in the mono face — the design system's own rule ("mono:
   money, dates, codes") finally applied where most of the money lives. */
td.money {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: -0.01em;
}
td.money strong { font-weight: 600; }
td.money.is-zero, .cell-nil { color: var(--muted-soft); opacity: 0.55; }

/* Accounting totals: a single rule opens the total row, a double rule
   closes the statement — the oldest convention in the trade. */
tfoot tr td,
tr.report-total-row td,
tr.report-grand-total td {
    border-top: 1px solid var(--ink);
    background: transparent;
    font-variant-numeric: lining-nums tabular-nums;
}
tr.report-grand-total td { border-bottom: 3px double var(--ink); }

/* Section rows inside statements (Revenue / Expenses / Assets…) read as
   small-caps side-heads on the paper, not filled bands. */
tr.report-section-row td {
    background: transparent;
    color: var(--ink);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
tr.report-section-row strong { font-weight: 600; }

/* --- Panels: paper cards, hairline structure ------------------------------ */
.panel {
    border-radius: var(--radius-sm);
    box-shadow: none;
}
.panel-header {
    background: transparent;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--line);
}
.panel-header h3 {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    color: var(--ink);
}
.panel-header h3 .count-pill { vertical-align: 1px; }
.panel-body { padding: 14px 18px; }

/* Clickable cards (banks, suite tiles, desk cards): hairline sharpens and
   the card leans forward half a step — presence, not levitation. */
.bank-card,
.dash-desk-card,
.suite-card {
    transition: border-color 0.16s var(--ease-out), transform 0.16s var(--ease-out), background 0.16s var(--ease-out);
}
.bank-card:hover,
.dash-desk-card.clickable:hover,
.suite-card:hover {
    border-color: var(--rule-strong, #8a8578);
    transform: translateY(-1px);
}
.bank-card:active,
.dash-desk-card.clickable:active,
.suite-card:active { transform: translateY(0); }
.bank-card .bank-card-open { transition: transform 0.16s var(--ease-out); }
.bank-card:hover .bank-card-open { transform: translateX(3px); }

/* --- Metric strips: serif figures on hairline cells ----------------------- */
.metric-strip { border-radius: var(--radius-sm); }
.metric strong { font-variant-numeric: lining-nums tabular-nums; }
.metric small { color: var(--muted-soft); }
.metric.tone-good strong { color: var(--liq, #4a9080); }
.metric.tone-bad strong { color: var(--ciq, #c4576a); }
.metric.tone-warn strong { color: #a8762e; }

/* --- Subnav: the underline follows the section's accent ------------------- */
.subnav { background: transparent; }
.subnav-btn { transition: color 0.12s var(--ease-out), border-color 0.12s var(--ease-out); }
.subnav-btn.active {
    color: var(--ink);
    border-bottom-color: var(--section-accent, var(--ink));
    background: transparent;
    font-weight: 600;
}
.subnav-btn:not(.active):hover { border-bottom-color: var(--line-strong); }

/* --- Buttons: confident press, visible keyboard focus --------------------- */
.primary-btn, .secondary-btn, .danger-btn, .icon-btn,
.iqb-btn, .nav-btn, .subnav-btn, .bank-tab {
    transition: background 0.12s var(--ease-out), border-color 0.12s var(--ease-out),
                color 0.12s var(--ease-out), transform 0.06s ease;
}
.primary-btn:active, .secondary-btn:active, .danger-btn:active,
.iqb-btn:active, .icon-btn:active { transform: translateY(1px); }
.primary-btn:focus-visible, .secondary-btn:focus-visible, .danger-btn:focus-visible,
.iqb-btn:focus-visible, .icon-btn:focus-visible, .nav-btn:focus-visible,
.subnav-btn:focus-visible, .bank-tab:focus-visible, .link-btn:focus-visible,
a:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- Inputs: quiet at rest, accented in hand ------------------------------- */
input, select, textarea {
    border-radius: var(--radius-sm);
    transition: border-color 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out), background 0.14s var(--ease-out);
}
input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--rule-strong, #8a8578); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--section-accent, var(--ink));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--section-accent, var(--ink)) 13%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--muted-soft); opacity: 0.75; }
input:disabled, select:disabled, textarea:disabled, input[readonly] {
    background: var(--bg-band);
    color: var(--muted);
}

/* --- Status pills: small caps + a state dot -------------------------------- */
.status-pill {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.status-pill::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.8;
    flex: none;
}

/* --- Toast: a small ink card that rises from the base ---------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 400;
    max-width: min(560px, calc(100vw - 40px));
    padding: 11px 18px 11px 15px;
    background: #1a1a1a;
    color: #faf8f5;
    font-size: 0.84rem;
    line-height: 1.45;
    border: 0;
    border-left: 3px solid var(--riq, #5b6eae);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
.toast:not(.hidden) { animation: iqb-toast-in 0.26s var(--ease-out); }
.toast.success { background: #1a1a1a; border-left-color: var(--liq, #4a9080); }
.toast.error   { background: #1a1a1a; border-left-color: var(--ciq, #c4576a); }
@keyframes iqb-toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Modals: a settled arrival, a receded page ----------------------------- */
.modal-overlay {
    background: rgba(26, 22, 15, 0.42);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
}
.modal-overlay.open > .modal-card { animation: iqb-modal-in 0.22s var(--ease-out); }
.modal-card {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
@keyframes iqb-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Empty states: an invitation, not a void -------------------------------- */
.empty-state i, .empty-state svg {
    color: var(--section-accent, var(--muted));
    opacity: 0.85;
}
.empty-state h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* --- Sidebar: ivory rail, ink-pill active ----------------------------------- */
.sidebar { border-right: 1px solid var(--line); }
.nav-btn { border-radius: 999px; padding: 6px 12px; }
.nav-btn:hover { background: var(--bg-page); }
.nav-btn.active { background: var(--ink); color: #faf8f5; }
.nav-btn.active .nav-label { color: #faf8f5; }

/* --- Filter rows: one quiet toolbar, not scattered controls ------------------ */
.filter-row input[type="search"] {
    background: var(--bg-page);
}
.date-presets button {
    transition: color 0.12s var(--ease-out), border-color 0.12s var(--ease-out), background 0.12s var(--ease-out);
}
.date-presets button:hover { color: var(--ink); border-color: var(--rule-strong, #8a8578); }

/* --- Source / VAT chips: mono metadata, quieter than the data --------------- */
.source-chip, .vat-chip { border-radius: var(--radius-sm); }

/* --- Loading screen: the pulse of the ledger --------------------------------- */
.loading-screen .loading-spinner { border-top-color: var(--ink); }

/* --- Motion is a courtesy, never a requirement ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   MASTHEAD REFINEMENT — July 2026
   The workspace header becomes a material, not a band: translucent paper
   with a real backdrop blur, a faint atmosphere of the section's colour
   breathing from the top corner, the flat 2px stripe replaced by a rule
   that fades as it travels, and the Apple large-title gesture — the
   masthead condenses as you scroll and the title steps down to compact.
   Colour stays exactly per-section; only the craft changes.
   ========================================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    overflow: hidden;
    background: color-mix(in srgb, #faf8f5 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--line);
    transition: padding 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
@supports not (backdrop-filter: blur(1px)) {
    .topbar { background: var(--bg-canvas); }
}

/* The section's atmosphere: a soft light of its accent breathing in from
   the top corner, plus the faintest wash along the top edge. Never louder
   than ~8% — colour as air, not paint. */
.topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 200% at 8% -70%, color-mix(in srgb, var(--section-accent) 20%, transparent), transparent 60%),
        radial-gradient(90% 160% at 96% -80%, color-mix(in srgb, var(--section-accent) 9%, transparent), transparent 55%),
        linear-gradient(to bottom, color-mix(in srgb, var(--section-accent) 9%, transparent), transparent 70%);
}
.topbar > * { position: relative; }

/* The accent rule: begins assured, exhales to nothing — a drawn line,
   not a printed stripe. A soft 1px bloom beneath gives it seat. */
.topbar-accent {
    height: 2px;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--section-accent) 0,
        var(--section-accent) 28%,
        color-mix(in srgb, var(--section-accent) 45%, transparent) 62%,
        transparent 92%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--section-accent) 12%, transparent);
}

/* Breadcrumb chip: a jewelled squircle — gradient tint, hairline ring in
   the accent, a thread of inner light along the top edge. */
.topbar-breadcrumb .bc-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--section-accent) 88%, #ffffff),
        color-mix(in srgb, var(--section-accent) 92%, #000000));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 0 0 1px color-mix(in srgb, var(--section-accent) 55%, transparent),
        0 2px 6px color-mix(in srgb, var(--section-accent) 30%, transparent);
}
.topbar-breadcrumb .bc-icon i { width: 14px; height: 14px; }

/* Org pill: glass, not cardboard. */
.topbar-org {
    background: color-mix(in srgb, #ffffff 62%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Title: a settled arrival on every workspace change. */
.topbar-title {
    letter-spacing: -0.02em;
    transition: font-size 0.28s var(--ease-out);
    animation: iqb-title-in 0.32s var(--ease-out);
}
.topbar-subtitle {
    transition: opacity 0.22s var(--ease-out), min-height 0.28s var(--ease-out),
                max-height 0.28s var(--ease-out), margin 0.28s var(--ease-out);
    max-height: calc(0.86rem * 1.4 * 2 + 6px);
    overflow: hidden;
}
@keyframes iqb-title-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The large-title collapse. Past the fold, the masthead condenses: padding
   tightens, the title steps down to compact, the subtitle folds away, and
   a soft warm shadow separates the material from the page moving beneath
   it. Hysteresis lives in the JS (engage late, release early) so the
   header never flutters at the boundary. */
.topbar.is-stuck {
    padding-top: 10px;
    box-shadow: 0 1px 0 var(--line), 0 10px 28px rgba(26, 22, 15, 0.07);
}
.topbar.is-stuck .topbar-eyebrow { margin-bottom: 6px; }
.topbar.is-stuck .topbar-title { font-size: 1.22rem; }
.topbar.is-stuck .topbar-subtitle {
    opacity: 0;
    min-height: 0;
    max-height: 0;
    margin-top: 0;
}
.topbar.is-stuck .topbar-headline { padding-bottom: 10px; }
.topbar-headline { transition: padding 0.28s var(--ease-out); }
.topbar-eyebrow { transition: margin 0.28s var(--ease-out); }

/* =========================================================================
   DASHBOARD — MAXIMUM POLISH, July 2026
   The briefing becomes a performance with restraint: a staggered arrival,
   living light behind the hero, editorial label-rules on every section,
   glass quick-actions, bars that grow into place, and cards that answer
   the hand. All of it collapses under prefers-reduced-motion.
   ========================================================================= */

@keyframes iqb-rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Arrival choreography — kicker, headline, dek, actions, then the page. */
.dash-kicker      { animation: iqb-rise 0.5s var(--ease-out) 0.02s both; }
.dash-hero-title  { animation: iqb-rise 0.55s var(--ease-out) 0.08s both; }
.dash-hero-dek    { animation: iqb-rise 0.55s var(--ease-out) 0.16s both; }
.dash-quick       { animation: iqb-rise 0.5s var(--ease-out) 0.24s both; }
.dash-grid        { animation: iqb-rise 0.55s var(--ease-out) 0.3s both; }

/* The orb field breathes — barely. A 20-second tide, not a screensaver. */
.dash-orb { animation: iqb-orb-drift 22s ease-in-out infinite alternate; }
.dash-orb--ciq { animation-duration: 26s; animation-delay: -8s; }
.dash-orb--liq { animation-duration: 30s; animation-delay: -14s; }
@keyframes iqb-orb-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(28px, 14px) scale(1.12); }
}

/* Editorial label-rules: every section eyebrow gains a hairline running to
   the margin — the label and its rule, the oldest layout device in print. */
.dash-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
}
.dash-section-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule, #d4d0c8);
    min-width: 24px;
}
.dash-activity-head .dash-section-eyebrow,
.dash-suite-head .dash-section-eyebrow { flex: 1; }
.dash-activity-head, .dash-suite-head { display: flex; align-items: center; gap: 14px; }
.dash-activity-meta { flex: none; }

/* Quick actions: frosted glass that answers the hand. */
.dash-quick-btn {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color 0.14s var(--ease-out), background 0.14s var(--ease-out),
                transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.dash-quick-btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(26, 22, 15, 0.07);
}
.dash-quick-btn:hover i, .dash-quick-btn:hover svg { color: var(--ink); }
.dash-quick-btn:active { transform: translateY(0); }
.dash-quick-btn i, .dash-quick-btn svg { transition: color 0.14s var(--ease-out); }

/* The cash figure: tabular serif, tight and certain. */
.dash-figure-amount {
    font-feature-settings: "lnum" on, "tnum" on;
    letter-spacing: -0.028em;
}
.dash-bank-row { transition: background 0.12s var(--ease-out); border-radius: 3px; }
.dash-bank-row:hover { background: color-mix(in srgb, #ffffff 55%, transparent); }
.dash-bank-row-balance { font-family: var(--mono, 'JetBrains Mono'); font-size: 0.8rem; }

/* The 30-day pulse grows into place, each bar from its baseline. */
.frieze-bar {
    transform-origin: bottom;
    animation: iqb-frieze-grow 0.6s var(--ease-out) 0.35s both;
    border-radius: 1.5px 1.5px 0 0;
}
@keyframes iqb-frieze-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* Suite cards: the rail widens and the card takes the product's air. */
.suite-card::before { transition: width 0.16s var(--ease-out); }
.suite-card:hover::before,
.suite-card:focus-visible::before { width: 5px; }
.suite-card:hover,
.suite-card:focus-visible {
    background: color-mix(in srgb, var(--card-accent) 4%, #ffffff);
    border-color: color-mix(in srgb, var(--card-accent) 38%, var(--line));
}
.suite-card-logo { transition: transform 0.16s var(--ease-out); }
.suite-card:hover .suite-card-logo { transform: translateX(2px); }

/* Ageing bars draw themselves in from the left. */
.dash-aging-bar > span {
    transform-origin: left;
    animation: iqb-bar-draw 0.7s var(--ease-out) 0.25s both;
}
@keyframes iqb-bar-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.dash-aging-card .dash-aging-total { font-feature-settings: "lnum" on, "tnum" on; }

/* Activity: quiet rows that answer the pointer. */
.dash-activity-table tbody tr { transition: background 0.12s var(--ease-out); }
.dash-activity-table tbody tr:hover { background: var(--bg-row-hover, #f5f1e9); }
.dash-activity-table td.money { font-family: var(--font-mono, 'JetBrains Mono'); font-size: 0.78rem; }

/* Desk cards: the number is the headline — let it breathe. */
.dash-desk-card { transition: transform 0.16s var(--ease-out), border-color 0.16s var(--ease-out), background 0.16s var(--ease-out); }
.dash-desk-card.clickable:hover { transform: translateY(-1px); }

/* =========================================================================
   DASHBOARD ARCHITECTURE — the at-rest upgrade
   Motion polish reads as nothing when the page is still. This layer gives
   the briefing visible structure: the loose sections become framed
   editorial cards on the paper, desk cards carry tone rails, quick
   actions get their icon discs, and the bank list reads like a ledger
   with dotted leaders. Unmissable at a glance, still restrained.
   ========================================================================= */

/* The main-column sections become editorial cards: white paper, hairline
   frame, generous padding — visible architecture instead of loose blocks. */
.dash-figure,
.dash-pulse,
.dash-suite,
.dash-activity {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: clamp(18px, 2.2vw, 26px);
    margin-top: 18px;
}
.dash-figure { margin-top: 0; }
.dash-suite { margin-top: 18px; }
.dash-pulse { padding-bottom: clamp(18px, 2.2vw, 24px); }

/* The cash headline gets the section's full presence: a taller serif
   figure over a hairline, with the bank list set apart on its own side. */
.dash-figure-amount { font-size: clamp(2.3rem, 3.4vw, 3rem); }
.dash-figure-head {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

/* Bank rows: dotted leaders between name and balance — the oldest way a
   financial document connects a label to its figure. */
.dash-bank-row {
    border-bottom: 0;
    gap: 10px;
    padding: 7px 2px;
}
.dash-bank-row-name {
    flex: none;
    max-width: 60%;
}
.dash-bank-row .dash-bank-row-name + .dash-bank-row-balance { margin-left: auto; }
.dash-bank-row { position: relative; }
/* The leader hangs on the ROW so both spans paint their paper over it —
   a pseudo on the name would sit above the name's own background and
   strike through the text. */
.dash-bank-row::after {
    content: '';
    position: absolute;
    left: 2px; right: 2px; bottom: 13px;
    border-bottom: 1px dotted var(--rule, #d4d0c8);
    z-index: 0;
}
.dash-bank-row-name, .dash-bank-row-balance {
    position: relative;
    z-index: 1;
    background: var(--bg-panel, #ffffff);
    padding: 0 6px 0 0;
}
.dash-bank-row-balance { padding: 0 0 0 8px; }

/* Quick actions: each icon sits in its own tinted disc — the chips stop
   being text pills and become instruments. */
.dash-quick-btn { padding: 5px 16px 5px 7px; gap: 10px; }
.dash-quick-btn i, .dash-quick-btn svg {
    width: 28px; height: 28px;
    padding: 6.5px;
    border-radius: 999px;
    background: var(--bg-band, #f7f4ee);
    box-shadow: inset 0 0 0 1px var(--line, #e4dfd5);
    color: var(--ink-2, #3d3d3d);
    transition: background 0.14s var(--ease-out), color 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.dash-quick-btn:hover i, .dash-quick-btn:hover svg {
    background: var(--ink, #1a1a1a);
    color: #faf8f5;
    box-shadow: none;
}

/* Desk cards: a tone rail declares each card's temperature at a glance,
   and the count is unmistakably the headline. */
.dash-desk-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    padding-left: 18px;
}
.dash-desk-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--rule, #d4d0c8);
}
.dash-desk-card.tone-ciq::before { background: var(--ciq, #c4576a); }
.dash-desk-card.tone-liq::before { background: var(--liq, #4a9080); }
.dash-desk-card.tone-riq::before { background: var(--riq, #5b6eae); }
.dash-desk-count {
    font-family: var(--serif, Fraunces) !important;
    font-size: 2.1rem !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-feature-settings: "lnum" on, "tnum" on;
}

/* Ageing cards: framed like the rest of the column. */
.dash-aging-card {
    border-radius: 4px;
}

/* Activity: the table lives inside its card now — drop its own chrome. */
.dash-activity .dash-activity-table th { border-bottom-color: var(--rule-strong, #8a8578); }

/* =========================================================================
   P&L BY MONTH + CODING DEFAULTS — July 2026 features
   ========================================================================= */

/* View toggle: two quiet tabs in the report's own panel header. */
.pl-view-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px;
    background: var(--bg-band, #f7f4ee);
    flex: none;
}
.pl-view-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 14px;
    border: 0; border-radius: 999px;
    background: transparent; cursor: pointer;
    font-size: 0.76rem; font-weight: 600;
    color: var(--muted);
    transition: background 0.14s var(--ease-out), color 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.pl-view-btn i, .pl-view-btn svg { width: 13px; height: 13px; }
.pl-view-btn:hover { color: var(--ink); }
.pl-view-btn.active {
    background: var(--bg-panel, #ffffff);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(26, 22, 15, 0.08), inset 0 0 0 1px var(--line);
}

/* The monthly grid: pinned account column, mono figures, dimmed nils so
   the shape of the year reads at a glance, tone-coloured net row. */
.plm-wrap { overflow-x: auto; }
.plm-table { min-width: 100%; }
.plm-table th, .plm-table td { white-space: nowrap; }
.plm-table .plm-sticky {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-panel, #ffffff);
    min-width: 220px; max-width: 300px;
    white-space: normal;
    box-shadow: 8px 0 8px -8px rgba(26, 22, 15, 0.12);
}
.plm-table thead .plm-sticky { background: var(--bg-panel, #ffffff); z-index: 3; }
.plm-table .plm-month small { font-size: 0.85em; color: var(--muted-soft); font-weight: 500; margin-left: 2px; }
.plm-cell { font-family: var(--font-mono, 'JetBrains Mono'); font-size: 0.76rem; }
.plm-cell.is-nil { color: var(--muted-soft); opacity: 0.4; text-align: right; }
.plm-cell.is-neg { color: var(--ciq, #c4576a); }
.plm-cell.is-strong { font-weight: 600; }
.plm-table .plm-total-col,
.plm-table td:last-child { border-left: 2px solid var(--ink); background: var(--bg-band, #f7f4ee); }
.plm-table thead th:last-child { border-left: 2px solid var(--ink); }
.plm-total td { border-top: 1px solid var(--ink); }
.plm-net td { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.plm-net .plm-cell:not(.is-nil):not(.is-neg) { color: var(--liq, #4a9080); }
.plm-table tbody tr[data-drill-account] { cursor: pointer; }

/* Coding defaults: the hint under the line editor, and the block in the
   contact edit panel. */
.coding-default-hint {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 0 0;
    font-size: 0.74rem; color: var(--muted);
}
.coding-default-hint i, .coding-default-hint svg { width: 13px; height: 13px; color: var(--riq, #5b6eae); flex: none; }
.coding-default-hint strong { color: var(--ink-soft); font-weight: 600; }
.coding-defaults-block {
    margin-top: 6px; padding: 14px;
    background: var(--bg-band, #f7f4ee);
    border: 1px solid var(--line);
    border-radius: var(--radius, 3px);
}
.coding-defaults-block .form-subhead { margin-top: 0; }