/* =========================================================================
   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; }
/* An account whose HMRC category is still only our guess: marked until a human
   has agreed with it, because the quarterly update will not file on a guess. */
.itsa-scope-todo td { background: color-mix(in srgb, #d98a2b 7%, transparent); }
.itsa-scope-todo td:first-child { box-shadow: inset 2px 0 0 #d98a2b; }
.aged-table td.money.is-bad { color: #8f2d3f; }

/* 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; }
/* The statutory accounts document is rendered by the server (the same renderer
   that produces the filed iXBRL) and shown in an iframe, so it keeps its own
   document typography and page rules, and Print/PDF prints the accounts alone. */
.acc-doc-frame { display: block; width: 100%; max-width: 900px; min-height: 720px; border: 1px solid var(--line); background: #fff; box-shadow: 0 6px 30px rgba(20,30,50,.10); }
.acc-doc-signhint { font-size: 12.5px; margin: 0 0 10px; }
.acc-doc-sigline { height: 1px; background: #1a1a1a; width: 200px; margin: 18px 0 6px; }

.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; }

/* Company search in the migration wizard. A Pandle master account reaches ~77k
   companies, so this is the only practical way to find one. */
.mig-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line, #d9d4cc);
    border-radius: 8px;
    background: var(--surface, #fff);
}
.mig-search:focus-within { border-color: var(--accent, #c4576a); }
.mig-search i { width: 15px; height: 15px; opacity: 0.55; flex: none; }
.mig-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
    padding: 0;
}