*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* THE SAGE PALETTE (15 Oct, Ben chose it over a neutral slate). Light mode
     had become white on white on white once the sidebar went light. Three
     layers now, every tint taken from the logo's green: the chrome (sidebar,
     phone bar) is the deepest, the page sits a step lighter, and cards stay
     white because that is where the figures are read. The accent IS the logo's
     green — buttons, the current page, positive figures, focus — replacing an
     emerald that matched nothing in the brand. Every text colour below is
     ≥4.5:1 on all three layers (checks/check_contrast.py, test_brand_mark.py). */
  --bg:#ECF0EC;--surface:#FFFFFF;--card:#FFFFFF;
  --ink:#2A2C33;--ink2:#55645B;--ink3:#5C6561;   /* ink is the logo's; ink3 darkened from #6A736F, which was 3.9:1 on the chrome */
  --rule:rgba(31,58,44,.10);--rule2:rgba(31,58,44,.18);
  --accent:#2E6F4E;--accent-lt:rgba(46,111,78,.10);--accent-mid:#5E9A7B;
  /* THE APP CHROME (15 Oct) — sidebar and phone bar. The logo sits on it as
     drawn (handoff 6h); dark mode keeps a dark chrome. Every colour in it reads
     these tokens, so the two themes cannot drift apart. */
  --sidebar-bg:#E1E8E3;
  --sb-line:rgba(31,58,44,.10);
  --sb-text:#55645B;          /* nav at rest — 5.0:1 on the chrome */
  --sb-text-hi:#2A2C33;       /* hover */
  --sb-text-dim:#5C6561;      /* group labels, company name, status — 4.8:1 */
  --sb-hover:rgba(31,58,44,.06);
  --sb-active:rgba(46,111,78,.13);
  --sb-active-text:#255C40;   /* the brand green one step deeper: 5.3:1 on the active tint (the green itself is 4.1) */
  --sb-control:rgba(31,58,44,.16);
  --mark-ink:#2A2C33;         /* the logo, exactly as handed off */
  --mark-check:#2E6F4E;
  --gain:#2E6F4E;--gain-bg:rgba(46,111,78,.12);
  --loss:#B42318;--loss-bg:#FBE9E7;   /* was #dc2626: 3.9:1 on the chrome */
  --warn:#A1490B;--warn-bg:#FCF0DC;   /* was #d97706: 3.2:1 even on white */
  --gold:#b45309;--gold-bg:#fefce8;
  --audit:#234F3A;--audit-lt:rgba(46,111,78,.12);--audit-mid:#2E6F4E;
  --serif:'Manrope',sans-serif;
  --sans:'Manrope',sans-serif;
  --mono:'Manrope',sans-serif;
  --r:6px;--r-lg:10px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  --sh-lg:0 8px 32px rgba(0,0,0,.1);
}
[data-theme="dark"]{
  --bg:#1A1C19;--surface:#232721;--card:#232721;
  --ink:#EAE6DF;--ink2:#9CA396;--ink3:#879188;   /* ≥4.5:1 on --bg and --card */
  --rule:rgba(255,255,255,.08);--rule2:rgba(255,255,255,.16);
  --accent:#4ADE80;--accent-lt:rgba(74,222,128,.12);--accent-mid:#34d399;
  --sidebar-bg:#111310;
  --sb-line:rgba(255,255,255,.07);
  --sb-text:rgba(255,255,255,.58);       /* 6.8:1 on the dark sidebar */
  --sb-text-hi:rgba(255,255,255,.85);
  --sb-text-dim:rgba(255,255,255,.46);   /* 4.7:1 — the group labels were 1.9:1 */
  --sb-hover:rgba(255,255,255,.07);
  --sb-active:rgba(255,255,255,.1);
  --sb-active-text:#FFFFFF;
  --sb-control:rgba(255,255,255,.16);
  /* The "b" takes the theme's ink; the tick keeps the brand green, which is
     3.1:1 on this sidebar — WCAG's 3:1 for graphics, with no new colour. */
  --mark-ink:#EAE6DF;
  --mark-check:#2E6F4E;
  --gain:#4ADE80;--gain-bg:rgba(74,222,128,.15);
  --loss:#f87171;--loss-bg:rgba(248,113,113,.15);
  --warn:#fbbf24;--warn-bg:rgba(251,191,36,.15);
  --gold:#fbbf24;--gold-bg:rgba(251,191,36,.1);
  --audit:#065f46;--audit-lt:rgba(74,222,128,.15);--audit-mid:#4ADE80;
  --sh:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);
  --sh-lg:0 8px 32px rgba(0,0,0,.45);
}
html{font-size:15px;overflow-x:hidden}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;display:flex;overflow-x:hidden;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ── Sidebar ── */
.sidebar{width:215px;min-height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--sb-line);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:50;overflow-y:auto}
.sb-brand{padding:1.5rem 1.25rem 1.25rem;border-bottom:1px solid var(--sb-line);flex-shrink:0}
.sb-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:800;font-size:1.35rem;color:var(--sb-text-hi);letter-spacing:-.02em}
/* THE LOGO, drawn inline (templates/_brand_mark.html) so it can take the
   theme's colours — an <img> cannot. Geometry and stroke exactly as handed off:
   7 units, round caps and joins, no fill. Was a white tile on a dark bar until
   15 Oct, which Ben found looked wrong; the chrome went light instead. */
.brand-mark{display:block;flex-shrink:0;fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.brand-mark .bm-ink{stroke:var(--mark-ink)}
.brand-mark .bm-check{stroke:var(--mark-check)}
.sb-logo .brand-mark{width:32px;height:32px}
.sb-co{font-size:.68rem;color:var(--sb-text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-nav{padding:.6rem .45rem;flex:1}
.sb-grp{font-size:.56rem;text-transform:uppercase;letter-spacing:.15em;color:var(--sb-text-dim);padding:.7rem .75rem .25rem}
.sb-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--r);color:var(--sb-text);font-family:var(--sans);font-size:.76rem;font-weight:500;cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:all .12s}
.sb-btn:hover{background:var(--sb-hover);color:var(--sb-text-hi)}
.sb-btn.active{background:var(--sb-active);color:var(--sb-active-text)}
.sb-ic{width:13px;height:13px;flex-shrink:0;opacity:.5}
.sb-btn.active .sb-ic,.sb-btn:hover .sb-ic{opacity:.9}
.sb-footer{padding:.875rem 1.25rem;border-top:1px solid var(--sb-line);flex-shrink:0}
.sb-foot-btn{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:var(--r);color:var(--sb-text);font-family:var(--sans);font-size:.72rem;font-weight:500;cursor:pointer;border:1px solid var(--sb-line);background:none;transition:all .12s}
.sb-foot-btn:hover{color:var(--sb-text-hi);background:var(--sb-hover);border-color:var(--sb-control)}
.sb-footer-row{display:flex;align-items:center;justify-content:space-between}
.sb-theme-toggle{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.75rem}
/* Footer account + logout row */
.sb-foot-row{display:flex;align-items:center;gap:.5rem}
.sb-account-btn{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--sb-line);background:none;border-radius:var(--r);cursor:pointer;transition:all .12s}
.sb-account-btn:hover{background:var(--sb-hover);border-color:var(--sb-control)}
.sb-account-av{width:24px;height:24px;border-radius:50%;background:var(--sb-control);color:var(--sb-text-hi);display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700}
/* Account page */
.acc-wrap{max-width:640px}
.acc-hero{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.acc-av{width:60px;height:60px;border-radius:50%;background:var(--accent-lt);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;flex-shrink:0}
.acc-hero-id{min-width:0}
.acc-hero-name{font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.acc-hero-email{font-size:.84rem;color:var(--ink3)}
.acc-field-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:700;margin:0 0 6px}
.acc-row{display:flex;gap:8px;align-items:center}
.acc-input{flex:1;padding:9px 11px;border:1px solid var(--rule2);border-radius:var(--r);font-size:.88rem;color:var(--ink);background:var(--surface);font-family:var(--sans)}
.acc-readonly{font-size:.88rem;color:var(--ink2);padding:9px 11px;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r)}
.acc-sec{padding:1.5rem 0;border-top:1px solid var(--rule)}
.acc-sec-h{font-size:.95rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 0 1rem}
.acc-org{padding:1.1rem 0;border-top:1px solid var(--rule)}
.acc-org:first-child{border-top:none;padding-top:0}
.acc-org-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}
.acc-org-name{font-size:.92rem;font-weight:700;color:var(--ink)}
.acc-caps{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px}
.acc-cap{display:flex;align-items:flex-start;gap:7px;font-size:.8rem;color:var(--ink2);line-height:1.35}
.acc-cap svg{width:13px;height:13px;flex-shrink:0;margin-top:3px;color:var(--accent)}
.acc-save-status{font-size:.74rem;color:var(--ink3)}
.acc-save-status.ok{color:var(--accent)}
.acc-save-status.err{color:var(--loss)}
@media(max-width:600px){.acc-caps{grid-template-columns:1fr}}
.sb-theme-label{font-size:.72rem;font-weight:500;color:var(--sb-text)}
.sb-switch{position:relative;width:42px;height:22px;border-radius:999px;background:var(--sb-control);border:none;cursor:pointer;padding:0;transition:background .2s;flex-shrink:0}
.sb-switch.on{background:var(--accent)}
.sb-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sb-switch.on .sb-switch-knob{transform:translateX(20px)}
.sb-logout-btn{flex:1;justify-content:center}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent-mid);flex-shrink:0}
.dot.off{background:var(--loss)}
.sb-status{display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:var(--sb-text-dim)}
.sb-edit-btn{font-size:.6rem;color:var(--sb-text-dim);background:none;border:none;cursor:pointer;font-family:var(--sans);transition:color .12s;padding:0}
.sb-edit-btn:hover{color:var(--sb-text-hi)}

/* ── Main ── */
.main{margin-left:215px;flex:1;padding:2rem 2.5rem 5rem;width:calc(100% - 215px)}
.ph{margin-bottom:1.75rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ph-title{font-family:var(--serif);font-size:1.7rem;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.ph-sub{font-size:.78rem;color:var(--ink3);margin-top:.2rem;line-height:1.4}
.sec{display:none}.sec.active{display:block}

/* ── Inner tabs ── */
.itabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:1.5rem;flex-wrap:wrap}
.itab{padding:.55rem 1rem;border:none;background:none;font-family:var(--sans);font-size:.75rem;font-weight:500;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .12s;white-space:nowrap}
.itab:hover{color:var(--ink2)}
.itab.active{color:var(--ink);border-bottom-color:var(--accent)}
.itab.audit-tab.active{border-bottom-color:var(--audit-mid);color:var(--audit-mid)}
.ipane{display:none}.ipane.active{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--sh)}
.card-hd{padding:.85rem 1.25rem;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.card-title{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink3);font-weight:600}
.card-body{padding:1.25rem}
.mb1{margin-bottom:1rem}

/* ── Metrics ── */
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.875rem;margin-bottom:1.5rem}
.metric{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--sh)}
.m-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:.3rem}
.m-val{font-family:var(--mono);font-size:1.35rem;font-weight:500;color:var(--ink)}
.m-val.gain{color:var(--gain)}.m-val.loss{color:var(--loss)}

/* ── Form elements ── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.875rem}
.fg{display:flex;flex-direction:column;gap:.27rem}
.vat-collapsed{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .6rem;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r)}
.vat-collapsed-txt{font-size:.76rem;color:var(--ink3)}
.vat-add-btn{font-size:.76rem;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}
.vat-add-btn:hover{color:var(--ink)}
.fg.full{grid-column:1/-1}
.fg label,.fg-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);font-weight:600}
input,select,textarea{font-family:var(--sans);font-size:.84rem;color:var(--ink);background:var(--bg);border:1px solid var(--rule2);border-radius:var(--r);padding:.56rem .76rem;outline:none;transition:border-color .13s,box-shadow .13s;width:100%}
/* CHECKBOXES AND RADIOS ARE NOT TEXT FIELDS (15 Oct). The rule above gave them
   `width:100%` and a text field's padding too, so in any flex row the box took
   the whole width and drew itself in the middle of it, far from its label —
   the Team page's approval settings were the worst of it. Some screens had
   patched their own (.exp-row, .mg-opt); this is the fix at the source, and
   those still win where they say more. */
input[type=checkbox],input[type=radio]{width:auto;flex:0 0 auto;padding:0;margin:0;
  accent-color:var(--accent);cursor:pointer}
/* Hide native number-input stepper arrows (not useful for money entry) */
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}
input:focus,select:focus,textarea:focus{border-color:var(--accent-mid);box-shadow:0 0 0 3px var(--accent-lt)}
input::placeholder,textarea::placeholder{color:var(--ink3)}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235C6561' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .72rem center;padding-right:1.9rem}
/* THE OPEN DROPDOWN IS DRAWN BY THE OS, NOT BY US.
   Styling `select` alone only themes the closed control — the option list keeps
   the browser's default, which in dark mode gave dark text on a white panel.
   `option` has to be coloured explicitly, and `color-scheme` is what tells the
   browser to draw its own chrome (scrollbar, focus ring) to match. */
select option{background:var(--surface);color:var(--ink)}
select option:checked{background:var(--accent-lt);color:var(--ink)}
select,input,textarea{color-scheme:light}
[data-theme="dark"] select,[data-theme="dark"] input,[data-theme="dark"] textarea,
.theme-dark select,.theme-dark input,.theme-dark textarea{color-scheme:dark}
textarea{resize:vertical;min-height:68px;line-height:1.5}

/* ── Profile preview card (left rail) ── */
.prof-preview{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:1rem 1.1rem;margin-bottom:.875rem;position:relative;overflow:hidden}
.prof-preview::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(46,111,78,.25) 0%,transparent 70%)}
.pp-initial{width:36px;height:36px;border-radius:5px;background:var(--accent-mid);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:#fff;margin-bottom:.7rem}
.pp-name{font-family:var(--serif);font-size:1rem;color:#fff;line-height:1.2;margin-bottom:.2rem;min-height:1.2rem}
.pp-ind{font-size:.62rem;color:rgba(255,255,255,.4);margin-bottom:.65rem}
.pp-meta{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.pp-item{background:rgba(255,255,255,.04);border-radius:4px;padding:.35rem .5rem}
.pp-item-label{font-size:.52rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.28);margin-bottom:1px}
.pp-item-val{font-size:.67rem;color:rgba(255,255,255,.6);font-weight:500;min-height:.8rem}

/* ── Profile completeness bar ── */
.prof-progress{margin-bottom:.875rem}
.prof-progress-label{font-size:.6rem;color:rgba(255,255,255,.3);display:flex;justify-content:space-between;margin-bottom:.3rem}
.prof-progress-track{height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.prof-progress-fill{height:100%;background:var(--accent-mid);border-radius:99px;transition:width .4s ease}

/* ── Profile section nav (sidebar within profile) ── */
.prof-nav{display:flex;flex-direction:column;gap:2px}
.prof-nav-btn{display:flex;align-items:center;gap:.45rem;padding:.45rem .65rem;border-radius:var(--r);border:none;background:none;color:rgba(255,255,255,.42);font-family:var(--sans);font-size:.73rem;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:all .11s}
.prof-nav-btn:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.prof-nav-btn.active{background:rgba(255,255,255,.1);color:#fff}
.pnb-dot{width:5px;height:5px;border-radius:50%;background:var(--accent-mid);flex-shrink:0;opacity:0;transition:opacity .2s}
.prof-nav-btn.active .pnb-dot,.prof-nav-btn.filled .pnb-dot{opacity:1}

/* ── Profile layout ── */
.prof-layout{display:grid;grid-template-columns:195px 1fr;gap:1.5rem;min-height:0}
.prof-sidebar{position:sticky;top:2rem;height:fit-content}

.prof-section{display:none}.prof-section.active{display:block;animation:fadeIn .2s ease}

/* ── Industry grid ── */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.ind-tile{background:var(--bg);border:1.5px solid var(--rule);border-radius:var(--r);padding:.65rem .5rem;cursor:pointer;text-align:center;transition:all .13s;user-select:none}
.ind-tile:hover{border-color:var(--rule2);background:#fff}
.ind-tile.sel{background:var(--accent-lt);border-color:var(--accent-mid)}
.ind-icon{font-size:1.15rem;margin-bottom:.25rem;display:block}
.ind-name{font-size:.63rem;font-weight:500;color:var(--ink2);line-height:1.3}
.ind-tile.sel .ind-name{color:var(--accent)}

/* ── Model chips ── */
.chips{display:flex;flex-wrap:wrap;gap:.38rem;margin-top:.25rem}
.chip{padding:.28rem .7rem;border-radius:99px;border:1.5px solid var(--rule2);background:var(--card);color:var(--ink2);font-size:.7rem;font-weight:500;cursor:pointer;transition:all .12s;user-select:none}
.chip:hover{background:var(--bg)}
.chip.sel{background:var(--accent-lt);border-color:var(--accent-mid);color:var(--accent)}
.exp-group{margin-bottom:1.1rem}
.exp-group:last-of-type{margin-bottom:.25rem}
.exp-group-hd{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);font-weight:700;margin-bottom:.45rem}
.exp-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .75rem;border:1px solid var(--rule);border-radius:var(--r);margin-bottom:.4rem;cursor:pointer;transition:all .12s}
.exp-row:last-child{margin-bottom:0}
.exp-row:hover{background:var(--bg)}
.exp-row-label{font-size:.83rem;color:var(--ink2);line-height:1.3}
.exp-row input[type=radio]{width:16px;height:16px;flex:0 0 16px;accent-color:var(--accent);cursor:pointer;margin:0}
.exp-row:has(input:checked){border-color:var(--accent);background:var(--accent-lt)}
.exp-row:has(input:checked) .exp-row-label{color:var(--accent);font-weight:600}
/* Description quality nudge — soft, non-blocking encouragement.
   Uses --ink3 (the app's quiet-text colour), NOT --warn: this is a suggestion,
   not an error. Amber/red would imply the user did something wrong. */
.desc-nudge{display:none;margin-top:.35rem;font-size:.7rem;color:var(--ink3);line-height:1.45;font-style:italic}
.desc-nudge.show{display:block}
/* Click-to-accept description suggestion, from a read document.
   Sits where .desc-nudge sits so the form's vertical rhythm is unchanged, but
   styled as a CONTROL rather than as advice: .desc-nudge is faint italic ink3
   on purpose — it is a nag — and those are exactly the properties that make
   text look un-clickable. Borrows the accent tint .hint-box already uses, so
   this is an existing visual vocabulary applied to a button, not a new one.
   Nothing is written until it is clicked, which is why the accepted text is
   NOT tinted as machine-written: by then it is the person's choice. */
.desc-chip{display:none;margin-top:.45rem;align-items:center;gap:.5rem;flex-wrap:wrap}
.desc-chip.show{display:flex}
.desc-chip-lbl{font-size:.7rem;color:var(--ink3)}
.desc-chip-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent-lt);
  border:1px solid var(--audit-lt);color:var(--audit);border-radius:var(--r);
  padding:.25rem .55rem;font-size:.75rem;line-height:1.35;cursor:pointer;
  font-family:inherit;text-align:left}
.desc-chip-btn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:var(--accent)}
.desc-chip-btn .dc-plus{color:var(--accent);font-weight:700;font-size:.8rem;line-height:1}
/* Merge reconciliation panel — one row per conflicting field. */
.mg-conflict{border:1px solid var(--rule);border-radius:var(--r);padding:.55rem .7rem;margin-bottom:.5rem}
.mg-conflict-lbl{font-size:.68rem;font-weight:700;color:var(--ink2);margin-bottom:.15rem}
.mg-opt{display:flex;align-items:center;gap:.55rem;padding:.42rem .1rem;font-size:.82rem;color:var(--ink2);cursor:pointer;border-top:1px solid var(--rule)}
.mg-opt input[type=radio]{width:16px;height:16px;flex:0 0 16px;accent-color:var(--accent);margin:0;cursor:pointer}
.mg-opt-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);line-height:1.4;font-size:.82rem}
.mg-opt-tag{flex:0 0 auto;color:var(--ink3);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.mg-opt:has(input:checked) .mg-opt-val{color:var(--accent);font-weight:600}
.mg-field{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.45rem .7rem;border:1px solid var(--rule);border-radius:var(--r);margin-bottom:.4rem;font-size:.82rem}
.mg-field-lbl{color:var(--ink3);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}
.mg-field-val{color:var(--ink);min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

/* ── Hint box ── */
.hint-box{background:var(--accent-lt);border:1px solid var(--accent-lt);border-radius:var(--r);padding:.7rem .875rem;margin-top:.875rem;display:none;gap:.6rem;align-items:flex-start}
.hint-box.show{display:flex}
.hint-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.hint-title{font-size:.74rem;font-weight:600;color:var(--accent);margin-bottom:.18rem}
.hint-text{font-size:.7rem;color:var(--ink2);line-height:1.5}

/* ── Audit section ── */
.audit-hero{background:var(--audit);border-radius:var(--r-lg);padding:1.6rem 1.9rem;margin-bottom:1.25rem;color:#fff;position:relative;overflow:hidden}
/* No gradient and no giant "AUDIT" watermark (15 Oct): one flat brand colour
   is the page's one bold thing; the watermark repeated the page title as noise. */
.ah-eyebrow{font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.72);margin-bottom:.4rem}
.ah-title{font-family:var(--serif);font-size:1.3rem;margin-bottom:.25rem}
.ah-sub{font-size:.76rem;color:rgba(255,255,255,.78);line-height:1.5}
.ah-meta{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.1rem}
.ah-item{font-size:.7rem;color:rgba(255,255,255,.72)}  /* ≥4.5:1 on --audit (15 Oct; .4 was 2.9:1) */
.ah-item strong{color:rgba(255,255,255,.75);font-weight:500;display:block;margin-bottom:1px}

/* ── Risk cards ── */
.risk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1.25rem}
.risk-card{border-radius:var(--r);padding:.875rem 1rem;border:1px solid}
.risk-h{background:#fff7f7;border-color:#fca5a5}.risk-h .rlevel{color:var(--loss)}
.risk-m{background:#fffbeb;border-color:#fde68a}.risk-m .rlevel{color:var(--gold)}
.risk-l{background:#f0fdf4;border-color:#86efac}.risk-l .rlevel{color:var(--gain)}
.rlevel{font-size:.57rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:.25rem}
.rtitle{font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:.18rem}
.rdesc{font-size:.7rem;color:var(--ink3);line-height:1.5}

/* ── Checklist ── */
.checklist{display:flex;flex-direction:column;gap:.35rem}
.cl-item{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .875rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);cursor:pointer;transition:border-color .12s}
.cl-item:hover{border-color:var(--rule2)}
.cl-item.done{background:#f0fdf4;border-color:#86efac}
.cl-item.done .cl-text{text-decoration:line-through;color:var(--ink3)}
.cl-box{width:17px;height:17px;border:1.5px solid var(--rule2);border-radius:3px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .12s}
.cl-item.done .cl-box{background:var(--gain);border-color:var(--gain);color:#fff}
.cl-text{font-size:.8rem;color:var(--ink2);line-height:1.4}
.cl-sub{font-size:.67rem;color:var(--ink3);margin-top:1px}
.cl-cat{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-mid);margin-right:.35rem}

/* ── Walkthrough steps ── */
.wt-step{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:.5rem;overflow:hidden;box-shadow:var(--sh)}
.wt-hd{display:flex;align-items:center;gap:.75rem;padding:.8rem 1.1rem;cursor:pointer;user-select:none;transition:background .12s}
.wt-hd:hover{background:var(--surface)}
.wt-num{width:26px;height:26px;border-radius:50%;background:var(--audit-lt);color:var(--audit-mid);font-size:.67rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wt-title{font-size:.84rem;font-weight:600;color:var(--ink);flex:1}
.wt-area{font-size:.65rem;color:var(--ink3);margin-left:.35rem;font-weight:400}
.wt-badge{font-size:.62rem;padding:2px 7px;border-radius:99px;font-weight:600}
.wt-pending{background:var(--warn-bg);color:var(--warn)}
.wt-done{background:var(--gain-bg);color:var(--gain)}
.wt-na{background:var(--bg);color:var(--ink3);border:1px solid var(--rule2)}
.wt-body{display:none;padding:0 1.1rem 1.1rem 3.25rem}
.wt-body.open{display:block}
.wt-body p{font-size:.78rem;color:var(--ink2);line-height:1.65;margin-bottom:.75rem}
.wt-body textarea{min-height:75px;font-size:.78rem}
.wt-actions{display:flex;gap:.4rem;margin-top:.5rem}

/* ── Findings ── */
.finding{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1rem;margin-bottom:.5rem;box-shadow:var(--sh)}
.finding-hd{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.finding-ref{font-family:var(--mono);font-size:.68rem;color:var(--ink3)}
.finding-title{font-size:.84rem;font-weight:600;color:var(--ink);flex:1}
.f-sev{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.f-h{background:var(--loss-bg);color:var(--loss)}.f-m{background:var(--warn-bg);color:var(--warn)}.f-l{background:var(--gain-bg);color:var(--gain)}
.finding-desc{font-size:.76rem;color:var(--ink2);line-height:1.5}
.finding-rec{font-size:.72rem;color:var(--accent-mid);margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--rule);line-height:1.4}

/* ── Audit log ── */
.alog-row{display:grid;grid-template-columns:145px 115px 1fr 1fr;gap:.5rem;padding:.52rem .875rem;border-bottom:1px solid var(--rule);font-size:.74rem;color:var(--ink2);align-items:start}
.alog-row:last-child{border-bottom:none}
.alog-hd{background:var(--bg);font-size:.57rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);font-weight:600}
.alog-time{font-family:var(--mono);font-size:.66rem;color:var(--ink3)}
.alog-field{font-weight:500;color:var(--ink)}
.alog-old{color:var(--loss);font-size:.7rem;text-decoration:line-through}
.alog-new{color:var(--gain);font-size:.7rem}

/* ── Progress bar ── */
.prog-wrap{margin-bottom:1rem}
.prog-label{font-size:.62rem;color:var(--ink3);display:flex;justify-content:space-between;margin-bottom:.3rem}
.prog-track{height:4px;background:var(--rule);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;background:var(--gain);border-radius:99px;transition:width .4s ease}

/* ── Lines builder ── */
.lines-builder{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:.4rem}
.lines-hd{display:grid;grid-template-columns:1fr 108px 108px 32px;gap:.4rem;padding:.45rem .72rem;background:var(--bg);border-bottom:1px solid var(--rule)}
.lines-hd span{font-size:.56rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);font-weight:600}
.line-row{display:grid;grid-template-columns:1fr 108px 108px 32px;gap:.4rem;padding:.42rem .72rem;border-bottom:1px solid var(--rule);align-items:center}
.line-row:last-child{border-bottom:none}
.line-row input,.line-row select{padding:.38rem .52rem;font-size:.78rem;background-color:var(--surface)}
.del-ln{width:24px;height:24px;border:1px solid var(--rule2);background:var(--card);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink3);transition:all .11s;flex-shrink:0;font-size:.88rem}
.del-ln:hover{background:var(--loss-bg);border-color:#fca5a5;color:var(--loss)}
.lines-ft{padding:.5rem .72rem;background:var(--bg);border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between}
.bal{font-family:var(--mono);font-size:.72rem;font-weight:500}
.bal.ok{color:var(--gain)}.bal.off{color:var(--loss)}

/* ── Preview box ── */
.preview-box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.8rem .95rem;margin-top:.7rem}
.prow{display:flex;justify-content:space-between;padding:.25rem 0;font-size:.8rem;border-bottom:1px solid var(--rule)}
.prow:last-child{border-bottom:none;font-weight:600;padding-top:.35rem}
.prow span:last-child{font-family:var(--mono)}

/* ── Statements ── */
.stmt{width:100%;border-collapse:collapse}
.stmt td{padding:.4rem 0;border-bottom:1px solid var(--rule);font-size:.84rem;color:var(--ink2)}
.stmt tr:last-child td{border-bottom:none}
.stmt td:last-child{text-align:right;font-family:var(--mono);font-size:.76rem}
.stmt-sec{font-size:.56rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink3);padding:.82rem 0 .28rem;font-weight:600;border-bottom:none!important}
.stmt-total td{font-weight:700;color:var(--ink);border-top:1.5px solid var(--ink);border-bottom:none;padding-top:.5rem}
.stmt-net td{font-size:.98rem;font-weight:700;color:var(--ink)}
/* Statutory line — the caption that would appear in the filed accounts. Carries
   the line total; the accounts making it up are indented beneath. */
.stmt-line td{font-weight:600;color:var(--ink);padding-top:.3rem}
.stmt-line td:last-child{font-family:var(--mono)}
/* Individual ledger accounts inside a line. Quieter, so the eye reads the
   statutory captions first and the detail second. */
.stmt-acct td{padding-left:1.1rem;color:var(--ink2);font-size:.78rem}
.stmt-acct td:last-child{font-family:var(--mono);padding-left:0}

/* ── Tables ── */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
/* Journal table: fit by default; only when extra columns overflow does an
   OBVIOUS scroll cue appear (right-edge fade + a "Scroll →" pill). The .can-scroll
   class is toggled by JS (updateJnlScrollCue) based on real overflow, so the cue
   is never shown when everything already fits. */
.jnl-scroll{position:relative}
/* Right-edge fade + a centred round arrow when the table overflows — a clear,
   on-brand "scroll right for more columns" affordance. Both clear at the end. */
.jnl-scroll.can-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;background:linear-gradient(to right,transparent,var(--card));border-radius:0 var(--r) var(--r) 0;transition:opacity .18s;z-index:1}
.jnl-scroll.can-scroll.at-end::after{opacity:0}
.jnl-scroll-arrow{display:none;position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);z-index:40;width:34px;height:34px;padding:0;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--rule2);background:var(--surface);color:var(--ink2);box-shadow:var(--sh-lg);cursor:pointer;transition:opacity .18s,background .12s,color .12s,border-color .12s}
.jnl-scroll-arrow svg{width:15px;height:15px}
.jnl-scroll-arrow:hover{background:var(--accent-lt);color:var(--accent);border-color:var(--accent-mid)}
.jnl-scroll.can-scroll .jnl-scroll-arrow{display:inline-flex}
.jnl-scroll.can-scroll.at-end .jnl-scroll-arrow{opacity:0;pointer-events:none}
.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl th{text-align:left;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);padding:.62rem 1rem;border-bottom:1px solid var(--rule);font-weight:600}
.tbl td{padding:.75rem 1rem;border-bottom:1px solid var(--rule);color:var(--ink2);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface)}
.tbl th.r,.tbl td.r{text-align:right}
.jl{font-family:var(--mono);font-size:.68rem;color:var(--ink3);margin-top:3px;line-height:1.6}
.jl-row{display:flex;gap:.5rem}.jl-acc{flex:1}.jl-dr{color:var(--gain);min-width:68px;text-align:right}.jl-cr{color:var(--loss);min-width:68px;text-align:right}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .92rem;border-radius:var(--r);border:1px solid var(--rule2);background:var(--card);color:var(--ink2);font-family:var(--sans);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap}
.btn:hover{background:var(--bg)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:#235035}
.btn-audit{background:var(--audit-mid);color:#fff;border-color:var(--audit-mid)}.btn-audit:hover{background:var(--audit)}
.btn-ok{background:var(--gain);color:#fff;border-color:var(--gain)}
.btn-sm{padding:.3rem .65rem;font-size:.7rem}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink3)}.btn-ghost:hover{background:var(--bg);color:var(--ink2)}
.btn-danger{color:var(--loss);border-color:#fca5a5}.btn-danger:hover{background:var(--loss-bg)}

/* ── Banners ── */
.banner{border-radius:var(--r);padding:.65rem 1rem;font-size:.77rem;margin-bottom:.875rem;display:none;font-weight:500}
.banner.show{display:block}
.banner-ok{background:var(--gain-bg);border:1px solid #86efac;color:var(--gain)}
.banner-err{background:var(--loss-bg);border:1px solid #fca5a5;color:var(--loss)}
.banner-warn{background:#fffbeb;border:1px solid #fcd34d;color:#92400e}

/* ── Layout helpers ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.full{grid-column:1/-1}
.empty{text-align:center;padding:2rem;color:var(--ink3);font-size:.8rem}
/* TrueLayer's sandbox in production (20 Oct): every connection is test data. */
.bank-sandbox-note{font-size:.78rem;line-height:1.5;color:var(--ink2);background:var(--gold-bg);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:6px;padding:.6rem .8rem;margin-bottom:.6rem}

/* ── Toast ── */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--ink);color:#fff;padding:.58rem .95rem;border-radius:var(--r);font-size:.76rem;box-shadow:var(--sh-lg);opacity:0;transform:translateY(6px);transition:all .2s;pointer-events:none;z-index:2000;max-width:280px}
#toast.show{opacity:1;transform:translateY(0)}
#toast.err{background:var(--loss)}
/* "Confirm your email" (15 Oct): a pop-up that can be closed, bottom right,
   below the toast's layer. Not modal — nothing behind it is blocked. */
.verify-popup{position:fixed;right:1.5rem;bottom:1.5rem;z-index:1500;width:340px;
  max-width:calc(100vw - 2rem);background:var(--surface);color:var(--ink);
  border:1px solid var(--rule2);border-left:3px solid var(--warn);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:.95rem 2.4rem .95rem 1.1rem}
.verify-popup[hidden]{display:none}
.verify-popup-title{font-size:.86rem;font-weight:700;margin-bottom:.3rem}
.verify-popup-body{font-size:.78rem;line-height:1.5;color:var(--ink2);margin:0 0 .75rem}
.verify-popup-body b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.verify-popup-foot{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.verify-popup-status{font-size:.72rem;color:var(--ink3)}
.verify-popup-status.ok{color:var(--accent)}
.verify-popup-status.err{color:var(--loss)}
.verify-popup-close{position:absolute;top:.55rem;right:.55rem;width:28px;height:28px;display:flex;
  align-items:center;justify-content:center;border:none;background:none;color:var(--ink3);
  border-radius:var(--r);cursor:pointer}
.verify-popup-close:hover{background:var(--rule);color:var(--ink)}
.verify-popup-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:760px){.verify-popup{right:1rem;left:1rem;bottom:1rem;width:auto;max-width:none}}
.acc-email-status{margin-top:.5rem;font-size:.78rem;color:var(--ink2);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.acc-email-status[hidden]{display:none}

/* ── Aging analysis ── */
.aging-table{width:100%;border-collapse:collapse;font-size:.82rem}
.aging-table th{text-align:left;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);padding:.6rem .875rem;border-bottom:1px solid var(--rule);font-weight:600;white-space:nowrap}
.aging-table th.r,.aging-table td.r{text-align:right}
.aging-table td{padding:.72rem .875rem;border-bottom:1px solid var(--rule);color:var(--ink2);vertical-align:middle}
.aging-table tr:last-child td{border-bottom:none}
.aging-table tr:hover td{background:var(--surface)}
.aging-bar{height:6px;border-radius:99px;background:var(--rule);overflow:hidden;margin-top:3px;min-width:60px}
.aging-bar-fill{height:100%;border-radius:99px}
.bucket-curr{background:var(--gain)}.bucket-30{background:#A1490B}.bucket-60{background:#C2410C}.bucket-90{background:var(--loss)}.bucket-old{background:#7f1d1d}
.aging-badge{display:inline-block;padding:2px 7px;border-radius:99px;font-size:.62rem;font-weight:700}
.b-curr{background:#dcfce7;color:#166534}.b-30{background:#fef9c3;color:#854d0e}
.b-60{background:#ffedd5;color:#9a3412}.b-90{background:#fee2e2;color:#991b1b}.b-old{background:#4c0519;color:#fecdd3}
.aging-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin-bottom:1.25rem}
.aging-bucket{border-radius:var(--r);padding:.875rem 1rem;border:1px solid var(--rule);background:var(--card);box-shadow:var(--sh)}
.aging-bucket-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:.3rem}
.aging-bucket-val{font-family:var(--mono);font-size:1.15rem;font-weight:500;color:var(--ink)}
.aging-bucket-pct{font-size:.68rem;color:var(--ink3);margin-top:2px}

/* ── Ratio analysis ── */
.ratio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
.ratio-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--sh)}
.ratio-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:.25rem}
.ratio-val{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--ink)}
.ratio-val.good{color:var(--gain)}.ratio-val.warn{color:var(--gold)}.ratio-val.bad{color:var(--loss)}
.ratio-desc{font-size:.68rem;color:var(--ink3);margin-top:.2rem;line-height:1.4}
.ratio-benchmark{font-size:.65rem;margin-top:.3rem;padding:.2rem .6rem;border-radius:99px;display:inline-block}
.rb-good{background:var(--gain-bg);color:var(--gain)}.rb-warn{background:var(--warn-bg);color:var(--warn)}.rb-bad{background:var(--loss-bg);color:var(--loss)}
.chart-wrap{position:relative;width:100%;height:220px}
.month-select-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap}
.month-select-row label{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);font-weight:600;white-space:nowrap}
.month-select-row select{max-width:140px}
.ratio-trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.ratio-group-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink3);font-weight:600;padding:.5rem 0 .4rem;border-bottom:1px solid var(--rule);margin-bottom:.875rem}

/* ── Cfg strip ── */
.cfg{background:var(--warn-bg);border:1px solid #fcd34d;border-radius:var(--r);padding:.58rem 1rem;font-size:.76rem;color:var(--warn);display:none;margin-bottom:1rem;align-items:center;gap:.6rem;flex-wrap:wrap}
.cfg.show{display:flex}
.cfg input{font-family:var(--mono);font-size:.7rem;padding:.28rem .58rem;border-color:#fcd34d;background:#fffbeb;max-width:195px}
.cfg button{padding:.28rem .72rem;background:var(--warn);color:#fff;border:none;border-radius:var(--r);font-size:.7rem;font-family:var(--sans);font-weight:600;cursor:pointer}

/* ── Chat UI ── */
.chat-msg-bot{display:flex;justify-content:flex-start}
.chat-msg-user{display:flex;justify-content:flex-end}
.chat-bubble-bot{background:var(--surface);border:1px solid var(--rule);border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);padding:.65rem .9rem;font-size:.82rem;color:var(--ink2);line-height:1.55;max-width:85%;white-space:pre-wrap}
.chat-bubble-user{background:var(--accent);color:#fff;border-radius:var(--r-lg) 0 var(--r-lg) var(--r-lg);padding:.65rem .9rem;font-size:.82rem;line-height:1.55;max-width:85%}
.chat-typing-indicator{display:flex;gap:4px;align-items:center;padding:.5rem .75rem}
.chat-typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:blink 1.2s infinite}
.chat-typing-indicator span:nth-child(2){animation-delay:.2s}
.chat-typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.2}30%{opacity:1}}

/* ══ GUIDED ENTRY ══════════════════════════════════════════════════════════ */
.ge-flow{display:flex;flex-direction:column;gap:1.1rem}
.ge-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:.4rem;margin-bottom:.3rem}
.ge-cat-btn{padding:.5rem .65rem;border-radius:var(--r);border:1.5px solid var(--rule2);background:var(--bg);font-size:.74rem;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;transition:all .12s;display:flex;align-items:center;gap:.4rem;line-height:1.3}
.ge-cat-btn:hover{border-color:var(--accent);color:var(--accent)}
.ge-cat-btn.ge-active{border-color:var(--accent);background:var(--accent);color:#fff}
.ge-cat-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--ink3)}
.ge-cat-icon svg{width:13px;height:13px}
.ge-cat-btn.ge-active .ge-cat-icon{color:var(--accent)}
.ge-step{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:.8rem}
.ge-step-hd{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;background:var(--bg)}
.ge-step-num{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ge-step-title{font-size:.81rem;font-weight:600;color:var(--ink)}
.ge-step-sub{font-size:.71rem;color:var(--ink3)}
.ge-step-body{padding:1rem}
.ge-grp-lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);padding:.25rem 0;margin-bottom:.3rem}
.ge-qs{display:flex;flex-direction:column;gap:.7rem}
.ge-q{display:flex;flex-direction:column;gap:.28rem}
.ge-q label{font-size:.77rem;font-weight:600;color:var(--ink)}
.ge-hint{font-size:.7rem;color:var(--ink3)}
.ge-q input[type=text],.ge-q input[type=number],.ge-q input[type=date],.ge-q select{font-size:.81rem;padding:.42rem .6rem;border-radius:var(--r);border:1px solid var(--rule2);background-color:var(--bg);color:var(--ink);width:100%;box-sizing:border-box}
.ge-radios{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}
.ge-radio{padding:.32rem .65rem;border-radius:var(--r);border:1.5px solid var(--rule2);cursor:pointer;font-size:.75rem;font-weight:500;color:var(--ink);background:var(--bg);transition:all .12s;user-select:none}
.ge-radio.ge-active{border-color:var(--accent);background:var(--accent);color:#fff}
.ge-prev{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:.7rem .85rem;margin-top:.4rem}
.ge-prev-hd{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-bottom:.45rem}
.ge-prev-row{display:flex;justify-content:space-between;align-items:baseline;padding:.22rem 0;font-size:.77rem;color:var(--ink);border-bottom:1px dashed var(--rule)}
.ge-prev-row:last-child{border-bottom:none;font-weight:700;padding-top:.38rem}
.ge-prev-indent{padding-left:1rem}
.ge-dr{color:#16a34a;font-weight:600}
.ge-cr{color:var(--loss);font-weight:600}
.ge-actions{display:flex;gap:.5rem;align-items:center;margin-top:.7rem}
.ge-btn-post{padding:.48rem 1.15rem;border-radius:var(--r);background:var(--accent);color:#fff;font-size:.79rem;font-weight:600;border:none;cursor:pointer}
.ge-btn-post:hover{opacity:.88}
.ge-btn-reset{padding:.46rem .85rem;border-radius:var(--r);background:transparent;color:var(--ink3);font-size:.77rem;font-weight:500;border:1px solid var(--rule2);cursor:pointer}

/* ══ PROFILE WIZARD — slideshow ══════════════════════════════════════════ */

/* Stage: full-width immersive container */
.sl-stage{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:var(--sh-lg);min-height:480px;display:flex;flex-direction:column}

/* Top bar */
.sl-topbar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.4rem;border-bottom:1px solid var(--rule);background:var(--surface)}
.sl-brand{display:flex;align-items:center;gap:.45rem}
.sl-brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sl-brand-text{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2)}
.sl-counter{font-family:var(--mono);font-size:.7rem;color:var(--ink3);letter-spacing:.03em}
.sl-reset{font-size:.65rem;font-weight:600;color:var(--ink3);background:none;border:1px solid var(--rule);padding:.22rem .6rem;border-radius:99px;cursor:pointer;transition:all .2s}
.sl-reset:hover{color:var(--loss);border-color:var(--loss)}

/* Progress bar */
.sl-progress{height:2px;background:var(--rule)}
.sl-progress-fill{height:100%;background:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1);width:0%}

/* Viewport / slide */
.sl-viewport{flex:1;display:flex;align-items:center;justify-content:center;padding:2.5rem 3rem;position:relative;overflow:hidden}
.sl-slide{width:100%;max-width:560px;animation:slIn .45s cubic-bezier(.22,1,.36,1)}
@keyframes slIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-40px)}}
@keyframes slInBack{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}

/* Section badge */
.sl-section{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.sl-section::after{content:'';flex:1;height:1px;background:var(--rule)}

/* Question text */
.sl-question{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:1.6rem}

/* Option chips — large, sleek, spaced */
.sl-options{display:flex;flex-wrap:wrap;gap:.55rem}
/* ── Multi-select (revenue model) ──────────────────────────────────────────
   Same chip as the single-select so the two read as one family, but it must
   NOT auto-advance — hence the explicit Continue button and a live count, so
   it is obvious that picking more than one is expected. */
.sl-hint{font-size:.78rem;color:var(--ink3);margin-bottom:.7rem;line-height:1.45}
/* ── Inline "what does this mean?" help ────────────────────────────────────
   For questions whose wording assumes knowledge the user may not have.
   "Related party" is jargon; asking it without explaining it produces a
   confident wrong answer rather than an admission of doubt. Click to expand,
   so it costs nothing to anyone who already knows. */
/* ── Chart of accounts ─────────────────────────────────────────────────────
   Balances take the ACCOUNT's colour, not the sign's. Colouring by sign made
   every expense look like bad news and every liability like a loss — but an
   £900 expense is just an expense. Only a balance sitting on the WRONG side of
   its normal is worth flagging, and that gets the warning colour. */
.coa-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.coa-count{font-size:.78rem;color:var(--ink3)}
.coa-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.78rem;
  font-family:var(--sans);padding:0;text-decoration:underline}
.coa-th{padding:.5rem .7rem;text-align:left;font-weight:700;font-size:.65rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink3)}
.coa-pill{font-size:.6rem;padding:.1rem .4rem;border-radius:8px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;margin-left:.4rem}
.coa-tag{display:inline-block;font-size:.58rem;padding:.05rem .32rem;border-radius:6px;
  background:var(--rule);color:var(--ink3);margin-left:.35rem;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;vertical-align:middle}
.coa-tag-off{background:var(--loss-bg);color:var(--loss)}
.coa-desc{font-size:.66rem;color:var(--ink3);margin-top:.1rem;line-height:1.35}
.coa-x{background:none;border:none;color:var(--ink3);cursor:pointer;font-size:.95rem;
  line-height:1;padding:0 .2rem;border-radius:4px}
.coa-x:hover{color:var(--loss);background:var(--loss-bg)}
/* ── Chart of accounts: sections above bands ───────────────────────────── */
.coa-table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:680px}
.coa-table thead tr{background:var(--bg);position:sticky;top:0;z-index:2}

/* Top-level statutory section — Current assets, Equity, and so on. Heavier
   than a band so the two levels are told apart at a glance. */
.coa-sec td{padding:.7rem .7rem .45rem;background:var(--bg);color:var(--ink);
  font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  border-top:2px solid var(--ink3)}
.coa-sec-n{display:inline-block;margin-left:.5rem;font-size:.62rem;font-weight:600;
  color:var(--ink3);background:var(--surface);border:1px solid var(--rule2);
  border-radius:99px;padding:.02rem .4rem;letter-spacing:0}
.coa-sec-total{text-align:right;font-family:var(--mono);font-weight:700;
  font-size:.72rem;letter-spacing:0;text-transform:none}

/* Band inside a section — lighter, indented, no top rule. */
.coa-band td{padding:.5rem .7rem .3rem 1.4rem;font-weight:700;font-size:.72rem;
  color:var(--ink2);background:transparent}

.coa-row{border-top:1px solid var(--rule)}
.coa-row-off{opacity:.5}
.coa-code{padding:.35rem .7rem .35rem 1.4rem;font-family:var(--mono);
  color:var(--ink3);font-size:.75rem}
.coa-name{padding:.35rem .7rem}
.coa-line{padding:.35rem .7rem;font-size:.68rem;color:var(--ink3)}
.coa-normal{padding:.35rem .7rem;text-align:center;font-size:.68rem;color:var(--ink3)}
.coa-bal{padding:.35rem .7rem;text-align:right;font-family:var(--mono)}
.coa-act{padding:.35rem .5rem;text-align:right}
/* Locked: still visible, visibly unavailable, and it explains itself on hover. */
.coa-x-off{opacity:.28;cursor:not-allowed}
.coa-x-off:hover{color:var(--ink3);background:none}

/* Add-account: the user picks what KIND of account it is in plain words, and
   the code and statutory line are derived. Asking a shop owner to choose a code
   band and a Companies Act caption is asking them to know the thing they came
   here to avoid knowing. */
.addacct-kinds{display:flex;flex-direction:column;gap:.4rem}
.addacct-kind{text-align:left;padding:.55rem .7rem;border-radius:8px;border:1.5px solid var(--rule2);
  background:var(--surface);cursor:pointer;transition:all .12s;font-family:var(--sans);width:100%}
.addacct-kind:hover{border-color:var(--accent-mid)}
.addacct-kind.on{border-color:var(--accent);background:var(--accent-lt)}
.addacct-kind-t{font-size:.82rem;font-weight:600;color:var(--ink)}
.addacct-kind-e{font-size:.68rem;color:var(--ink3);margin-top:.1rem}
.addacct-note{font-size:.7rem;color:var(--ink3);margin-top:.35rem}

.q-help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;border:1.5px solid var(--rule2);background:var(--surface);color:var(--ink3);
  font-size:.66rem;font-weight:700;cursor:pointer;vertical-align:middle;margin-left:.3rem;
  line-height:1;user-select:none;transition:all .12s}
.q-help:hover,.q-help:focus{border-color:var(--accent);color:var(--accent);outline:none}
/* HOVER BUBBLE. Was a click-to-toggle block that pushed the form down; now a
   tooltip anchored to the "?" itself.
   Shown on hover AND on keyboard focus — a control reachable only by hover is
   unreachable by keyboard, and on touch there is no hover at all, which is why
   the ? is still focusable and tappable. */
.q-help{position:relative}
.q-help-body{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  z-index:9800; width:max-content; max-width:270px;
  padding:.55rem .7rem; box-sizing:border-box;
  background:var(--ink); color:var(--surface);
  border-radius:var(--r); box-shadow:0 8px 20px rgba(0,0,0,.18);
  font-size:.72rem; font-weight:400; line-height:1.5; letter-spacing:0;
  text-transform:none; text-align:left; white-space:normal;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s}
/* The little arrow. */
.q-help-body::after{content:''; position:absolute; top:100%; left:50%;
  margin-left:-5px; border:5px solid transparent; border-top-color:var(--ink)}
.q-help:hover .q-help-body,
.q-help:focus .q-help-body,
.q-help:focus-within .q-help-body,
.q-help-body.open{opacity:1; visibility:visible}
.sl-multi-foot{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem}
/* The hint sits above the control inside .pe-field, which is a flex COLUMN.
   It previously carried flex:0 0 100% for the old chip row — a horizontal flex
   container, where that forced a line break. In a column container the same
   declaration means "take the full HEIGHT", which pushed the control out of its
   grid cell and over the field below. Basis stays auto here. */
.pe-multi-hint{font-size:.7rem;color:var(--ink3);line-height:1.4;margin:0}
.sl-opt{padding:.6rem 1.15rem;border-radius:10px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink2);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .22s cubic-bezier(.22,1,.36,1);position:relative;line-height:1.35}
.sl-opt:hover{border-color:var(--accent-mid);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(44,95,63,.1)}
.sl-opt.sl-sel{border-color:var(--accent);background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(44,95,63,.22)}

/* Text input */
.sl-text-wrap{max-width:420px}
.sl-text-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--rule);border-radius:10px;font-size:.92rem;font-family:var(--sans);color:var(--ink);background:var(--surface);transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.sl-text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(44,95,63,.08)}
.sl-text-input::placeholder{color:var(--ink3)}
.sl-text-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.75rem;padding:.55rem 1.3rem;border-radius:10px;background:var(--accent);color:#fff;font-size:.82rem;font-weight:600;border:none;cursor:pointer;transition:all .2s;font-family:var(--sans)}
.sl-text-go:hover{background:var(--accent-mid);transform:translateY(-1px);box-shadow:0 4px 14px rgba(44,95,63,.18)}
.sl-text-go svg{transition:transform .2s}
.sl-text-go:hover svg{transform:translateX(2px)}

/* Bottom bar */
.sl-bottombar{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.4rem;border-top:1px solid var(--rule);background:var(--surface)}
.sl-back{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:500;color:var(--ink3);background:none;border:none;cursor:pointer;padding:.3rem .5rem;border-radius:var(--r);transition:all .15s;visibility:hidden}
.sl-back:hover{color:var(--accent)}
.sl-back svg{transition:transform .15s}
.sl-back:hover svg{transform:translateX(-2px)}

/* Dots */
.sl-dots{display:flex;gap:3px;align-items:center}

/* Mini live profile preview in bottom right */
.sl-live-mini{display:flex;align-items:center;gap:.5rem}
.sl-live-avatar{width:28px;height:28px;border-radius:6px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.72rem;font-weight:700;flex-shrink:0}
.sl-live-name{font-size:.72rem;font-weight:600;color:var(--ink);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-live-detail{font-size:.6rem;color:var(--ink3);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Done state */
.sl-done{text-align:center;padding:1rem 0}
.sl-done-icon{width:56px;height:56px;border-radius:50%;background:var(--accent-lt);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;animation:slPop .5s cubic-bezier(.175,.885,.32,1.275)}
@keyframes slPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.sl-done-title{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--ink)}
.sl-done-sub{font-size:.8rem;color:var(--ink3);margin-top:.4rem;line-height:1.5;max-width:360px;margin-left:auto;margin-right:auto}


@media(max-width:768px){.pw-layout{grid-template-columns:1fr}}

/* Question card */
.pw-main{display:flex;flex-direction:column;gap:.6rem}
.pw-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem 1.6rem;box-shadow:var(--sh);min-height:240px;position:relative;animation:pwFadeIn .35s ease}
@keyframes pwFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.pw-q{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:1.1rem}

/* Option chips — large, tactile buttons */
.pw-options{display:flex;flex-wrap:wrap;gap:.5rem}
.pw-opt{padding:.55rem 1rem;border-radius:8px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink2);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);line-height:1.3;position:relative;overflow:hidden}
.pw-opt::before{content:'';position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity .18s}
.pw-opt:hover{border-color:var(--accent-mid);color:var(--accent);transform:translateY(-1px);box-shadow:0 2px 8px rgba(44,95,63,.1)}
.pw-opt.pw-sel{border-color:var(--accent);background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(44,95,63,.2)}

/* Text input for free-text questions */
.pw-text-wrap{margin-top:.3rem}
.pw-text-input{width:100%;padding:.65rem .9rem;border:1.5px solid var(--rule);border-radius:8px;font-size:.88rem;font-family:var(--sans);color:var(--ink);background:var(--surface);transition:border-color .15s;box-sizing:border-box}
.pw-text-input:focus{outline:none;border-color:var(--accent-mid);box-shadow:0 0 0 3px rgba(44,95,63,.1)}
.pw-text-input::placeholder{color:var(--ink3)}
.pw-text-btn{margin-top:.6rem;padding:.5rem 1.2rem;border-radius:8px;background:var(--accent);color:#fff;font-size:.8rem;font-weight:600;border:none;cursor:pointer;transition:all .15s;font-family:var(--sans)}
.pw-text-btn:hover{background:var(--accent-mid);transform:translateY(-1px)}

/* Navigation */
.pw-nav{display:flex;justify-content:space-between;align-items:center;padding:0 .2rem}
.pw-nav-back{font-size:.74rem;font-weight:500;color:var(--ink3);background:none;border:none;cursor:pointer;padding:.3rem .5rem;border-radius:var(--r);transition:color .12s;visibility:hidden}
.pw-nav-back:hover{color:var(--accent)}
.pw-dots{display:flex;gap:3px;align-items:center}

/* Done state */
.pw-done{text-align:center;padding:2.5rem 1rem}
.pw-done-check{width:48px;height:48px;border-radius:50%;background:var(--accent-lt);color:var(--accent);font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;animation:pwPop .4s cubic-bezier(.175,.885,.32,1.275)}
@keyframes pwPop{from{transform:scale(0)}to{transform:scale(1)}}
.pw-done-title{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--ink)}
.pw-done-sub{font-size:.78rem;color:var(--ink3);margin-top:.4rem;max-width:320px;margin-left:auto;margin-right:auto;line-height:1.5}

/* Live profile sidebar card */
.pw-sidebar{position:sticky;top:1rem}
.pw-live-card{background:linear-gradient(135deg,#1a3328 0%,#0f1f18 100%);border-radius:var(--r-lg);padding:1.2rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.pw-live-card::before{content:'';position:absolute;top:-40px;right:-40px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(46,111,78,.3) 0%,transparent 70%)}
.pw-live-card::after{content:'';position:absolute;bottom:-20px;left:-20px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(46,111,78,.15) 0%,transparent 70%)}
.pw-live-initial{width:40px;height:40px;border-radius:8px;background:rgba(46,111,78,.35);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;font-weight:700;color:#fff;margin-bottom:.6rem;backdrop-filter:blur(4px)}
.pw-live-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:#fff;line-height:1.2;min-height:1.2rem;margin-bottom:.15rem}
.pw-live-ind{font-size:.65rem;color:rgba(255,255,255,.4);margin-bottom:.7rem;letter-spacing:.02em}
.pw-live-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.pw-live-item{background:rgba(255,255,255,.05);border-radius:5px;padding:.4rem .55rem;transition:background .2s}
.pw-live-item:hover{background:rgba(255,255,255,.08)}
.pw-live-label{font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:.15rem}
.pw-live-val{font-size:.7rem;color:rgba(255,255,255,.7);font-weight:500}


/* ══ SMART INPUT BAR ════════════════════════════════════════════════════ */
.si-bar{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1.5px solid var(--rule);border-radius:12px;padding:.5rem .8rem;margin-bottom:1rem;box-shadow:0 1px 4px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s}
.si-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(44,95,63,.08),0 2px 8px rgba(0,0,0,.06)}
.si-icon{color:var(--ink3);flex-shrink:0;display:flex;align-items:center}
.si-input{flex:1;border:none;background:transparent;font-size:.88rem;font-family:var(--sans);color:var(--ink);outline:none}
.si-input::placeholder{color:var(--ink3);font-weight:400}
.si-hint{font-size:.62rem;font-weight:600;color:var(--ink3);background:var(--bg);padding:.15rem .45rem;border-radius:4px;white-space:nowrap;flex-shrink:0}
.si-preview{background:var(--card);border:1.5px solid var(--accent);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem;margin-top:-.5rem;animation:slIn .3s ease}
.si-preview-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.si-preview-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.si-preview-parsed{font-size:.78rem;color:var(--ink2);margin-bottom:.1rem}
.si-preview-lines{margin-top:.5rem}
.si-preview-row{display:flex;justify-content:space-between;align-items:baseline;padding:.3rem 0;font-size:.8rem;border-bottom:1px dashed var(--rule)}
.si-preview-row:last-child{border-bottom:none}
.si-preview-acct{color:var(--ink)}
.si-preview-dr{color:var(--gain);font-weight:600;font-family:var(--mono);font-size:.76rem}
.si-preview-cr{color:var(--loss);font-weight:600;font-family:var(--mono);font-size:.76rem;padding-left:1rem}
.si-preview-actions{display:flex;gap:.5rem;margin-top:.8rem}
.si-post-btn{padding:.45rem 1.1rem;border-radius:8px;background:var(--accent);color:#fff;font-size:.78rem;font-weight:600;border:none;cursor:pointer;transition:all .15s;font-family:var(--sans)}
.si-post-btn:hover{background:var(--accent-mid);transform:translateY(-1px)}
.si-cancel-btn{padding:.45rem .8rem;border-radius:8px;background:transparent;color:var(--ink3);font-size:.78rem;font-weight:500;border:1px solid var(--rule);cursor:pointer}
.si-err{color:var(--loss);font-size:.76rem;margin-top:.3rem;display:none}
.si-ok{color:var(--gain);font-size:.78rem;font-weight:600;display:none;margin-bottom:.5rem}


/* ── Accounting standard selector ── */
.si-std-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;padding:0 .1rem}
.si-std-label{font-size:.7rem;font-weight:600;color:var(--ink3);white-space:nowrap}
.si-std-chips{display:flex;gap:.3rem}
.si-std-chip{padding:.25rem .7rem;border-radius:99px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink3);font-size:.68rem;font-weight:600;cursor:pointer;transition:all .15s}
.si-std-chip:hover{border-color:var(--accent-mid);color:var(--accent)}
.si-std-chip.si-std-active{border-color:var(--accent);background:var(--accent);color:#fff}
/* ── Follow-up question UI ── */
.si-followup{margin-top:.6rem;padding:.7rem .9rem;background:var(--bg);border:1px solid var(--rule);border-radius:8px}
.si-followup-q{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.5rem}
.si-followup-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.si-followup-chip{padding:.35rem .8rem;border-radius:8px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink2);font-size:.76rem;font-weight:500;cursor:pointer;transition:all .15s}
.si-followup-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}


/* ══ ENTER HUB ══════════════════════════════════════════════════════════ */
.eh-prof-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap}
.eh-prof-label{font-size:.72rem;font-weight:600;color:var(--ink3);white-space:nowrap}
.eh-prof-chips{display:flex;gap:.3rem}
.eh-prof-chip{padding:.28rem .7rem;border-radius:99px;border:1.5px solid var(--rule);background:var(--surface);color:var(--ink3);font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s}
.eh-prof-chip:hover{border-color:var(--accent-mid);color:var(--accent)}
.eh-prof-chip.eh-prof-active{border-color:var(--accent);background:var(--accent);color:#fff}
.eh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.eh-card{background:var(--card);border:1.5px solid var(--rule);border-radius:12px;padding:1.2rem;cursor:pointer;transition:all .2s;position:relative}
.eh-card:hover{border-color:var(--accent-mid);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.eh-card-accent{border-color:var(--accent);background:linear-gradient(135deg,rgba(44,95,63,.04),rgba(44,95,63,.01))}
.eh-card-accent:hover{box-shadow:0 4px 20px rgba(44,95,63,.12)}
.eh-card-icon{font-size:1.4rem;margin-bottom:.5rem}
.eh-card-title{font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.eh-card-desc{font-size:.74rem;color:var(--ink3);line-height:1.45}
.eh-card-tag{position:absolute;top:.8rem;right:.8rem;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:var(--accent-lt);padding:.15rem .5rem;border-radius:99px}
.eh-card[data-eh-hidden="true"]{display:none}

/* ── Logo/screenshot upload ── */
.logo-upload{display:flex;align-items:center;gap:.8rem;margin-top:.5rem}
.logo-drop{width:80px;height:80px;border:2px dashed var(--rule);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;overflow:hidden;flex-shrink:0;position:relative;background:var(--surface)}
.logo-drop:hover{border-color:var(--accent);background:var(--accent-lt)}
.logo-drop img{width:100%;height:100%;object-fit:contain}
.logo-drop-text{font-size:.55rem;color:var(--ink3);text-align:center;line-height:1.3;padding:.3rem}
.logo-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.logo-hint{font-size:.66rem;color:var(--ink3);line-height:1.4}


/* ── Evidence upload ── */
.je-evidence{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--rule)}
.je-ev-label{font-size:.8rem;font-weight:700;color:var(--ink);display:flex;align-items:center}
.je-ev-hint{font-size:.68rem;color:var(--ink3);margin-top:.2rem;margin-bottom:.5rem;line-height:1.4}
.je-ev-dropzone{border:2px dashed var(--rule);border-radius:10px;padding:1.2rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface)}
.je-ev-dropzone:hover,.je-ev-dropzone.je-ev-drag{border-color:var(--accent);background:var(--accent-lt)}
.je-ev-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.je-ev-item{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;background:var(--bg);border:1px solid var(--rule);border-radius:8px;font-size:.72rem;color:var(--ink);position:relative}
.je-ev-item img{width:32px;height:32px;object-fit:cover;border-radius:4px;flex-shrink:0}
.je-ev-item-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.je-ev-item-size{color:var(--ink3);font-size:.6rem}
.je-ev-item-rm{width:18px;height:18px;border-radius:50%;border:none;background:var(--rule);color:var(--ink3);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.je-ev-item-rm:hover{background:var(--loss);color:#fff}
.je-ev-err{color:var(--loss);font-size:.72rem;margin-top:.3rem}

/* ══ PROFILE MODAL OVERLAY ══════════════════════════════════════════════ */
.profile-page{
  width:100%;
  display:flex;flex-direction:column;
}
.profile-page .sl-stage{border:none;border-radius:0;box-shadow:none;min-height:420px;overflow-y:auto}
.profile-page .sl-viewport{padding:2rem 2.5rem}
/* Profile overview (editable) */
/* NO SIDE OR TOP PADDING (14 Oct). The page heading above starts at the page's
   own edge, and this padding set every section 2.25rem further in, with a
   1.75rem gap stacked on the heading's own margin: two left edges and a hole.
   Only the bottom is kept — it is the gap before the documents card. */
.pe-wrap{padding:0 0 1.75rem;width:100%;box-sizing:border-box}
/* A second wrapper that continues the first (the company documents card, which
   sits outside the regenerated editor), so the card gets whatever spacing and
   width the sections above get — today that is the full width, tomorrow
   whatever .pe-wrap says. No top padding: the wrapper above leaves the gap.
   Two classes so it outranks the narrow-screen `.pe-wrap{padding:…}` below. */
.pe-wrap.pe-wrap-follow{padding-top:0}
.pe-banner{background:var(--accent-lt);border:1px solid var(--accent-lt);border-radius:var(--r);padding:.75rem 1.1rem;margin-bottom:1.4rem;font-size:.82rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem 1.1rem}
.pe-progress-note{font-size:.76rem;color:var(--ink2);background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:.6rem .95rem;margin-bottom:1.4rem}
/* NO overflow:hidden. It was only there to stop the header's square corners
   poking out of the rounded card — the header rounds its own corners now.
   Clipping the card also clipped anything trying to escape it: the help bubble
   on the top row, and the account dropdown before that was portalled out. */
.pe-card{margin-bottom:1.25rem;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--surface)}
/* A DARKER BAND, and no caret. These were collapsible and are not any more —
   see buildProfileEditHTML for why — so the header is a landmark rather than a
   control: it does not need to look pressable, and it does need to be findable
   when you are scrolling for "Tax & compliance".
   `--rule` rather than `--bg` because `--bg` is very close to the card itself
   in light mode, which made eight sections read as one long list. */
.pe-card-hd{padding:.8rem 1.25rem;background:var(--rule);font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  display:flex;align-items:center;color:var(--ink);
  border-bottom:1px solid var(--rule2);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.pe-card-body{padding:1.4rem 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 2.25rem;
  border-radius:0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px)}
.pe-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.pe-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);font-weight:700;display:flex;align-items:center;gap:.45rem}
.pe-add-tag{font-size:.55rem;font-weight:700;letter-spacing:.06em;color:var(--accent);background:var(--accent-lt);border-radius:99px;padding:.06rem .45rem;text-transform:uppercase}
.pe-input{padding:.5rem .65rem;border:1px solid var(--rule2);border-radius:var(--r);font-size:.86rem;background-color:var(--surface);color:var(--ink);font-family:var(--sans);width:100%;box-sizing:border-box}
.pe-input:focus{outline:none;border-color:var(--ink3)}
.pe-input.pe-empty{border-style:dashed;border-color:var(--accent-mid);background-color:var(--accent-lt)}
.pe-fixed{padding:.5rem .65rem;border:1px solid var(--rule);border-radius:var(--r);font-size:.86rem;background:var(--bg);color:var(--ink2);font-family:var(--sans)}
.pe-actions{display:flex;align-items:center;gap:1rem;margin-top:.5rem;padding-top:.25rem}
/* In the page header, top right, as other pages place page-level actions (14 Oct).
   min-height so the row does not jump when "Try again" appears. */
.pe-actions.pe-actions-top{margin:.35rem 0 0;padding:0;min-height:1.9rem}
/* `display:flex` here and `.btn`'s inline-flex both beat the `hidden`
   attribute — the row would show to viewers and "Try again" permanently. */
.pe-actions[hidden],.pe-actions [hidden]{display:none}
.pe-save-status{font-size:.72rem;color:var(--ink3)}
.pe-save-status.pe-save-saving{color:var(--ink2)}
.pe-save-status.pe-save-saved{color:var(--accent)}
.pe-save-status.pe-save-dirty{color:var(--ink3)}
.pe-save-status.pe-save-error{color:#c0392b}
.pe-save-hint{font-size:.72rem;color:var(--ink3)}
/* ── Role gating: hide controls the current role can't use (server still enforces) ── */
body:not(.cap-post) .sb-btn[data-a1="enter"],
body:not(.cap-post) .mm-btn[data-nav="enter"]{display:none!important}
body:not(.cap-post) .team-nav-item{display:none!important}
body:not(.cap-manage-members) .needs-manage-members{display:none!important}
body:not(.cap-edit-profile) #profile-page-inner input,
body:not(.cap-edit-profile) #profile-page-inner select,
body:not(.cap-edit-profile) #profile-page-inner textarea,
body:not(.cap-edit-profile) #profile-page-inner .pe-add-tag{pointer-events:none;opacity:.65}
.beri-readonly-banner{display:none;margin:0 0 1rem;padding:.6rem .9rem;border:1px solid var(--rule2);
  background:var(--warn-bg);color:var(--warn);border-radius:var(--r);font-size:.8rem;font-weight:600}
/* ── Team page ── */
.tm-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
.tm-row:first-child{border-top:none}
.tm-row.tm-inactive{opacity:.5}
.tm-av{width:38px;height:38px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--ink2);flex-shrink:0}
.tm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tm-name{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.25}
.tm-sub{font-size:.8rem;color:var(--ink2);line-height:1.25;word-break:break-all}
/* Right-hand cluster: role text + action icons, aligned across all rows */
.tm-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* LAST AND FIXED-WIDTH, so the role reads as a column rather than as text
   that happens to follow a job title of whatever length. `text-align:left`
   inside a fixed width puts every label's first letter on the same x — right
   alignment would line up the ENDS of "Owner" and "Member", which is the
   thing a reader is not scanning for. */
.tm-role-txt{font-size:.82rem;font-weight:600;color:var(--ink2);
  width:64px;text-align:left;flex-shrink:0}
/* Last, at the right-hand edge (18 Oct). Fixed width even when empty — the
   owner's row and your own have no buttons — so every role above and below
   still starts at the same x. */
.tm-actions{display:flex;align-items:center;gap:6px;width:66px;justify-content:flex-end}
.tm-iconbtn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule2);background:var(--surface);border-radius:var(--r);cursor:pointer;color:var(--ink2);padding:0}
.tm-iconbtn:hover{border-color:var(--ink3);color:var(--ink);background:var(--bg)}
.tm-iconbtn.tm-danger:hover{border-color:var(--loss);color:var(--loss)}
.tm-iconbtn svg{width:15px;height:15px;display:block}
/* Pending-invite rows */
.tm-code{font-family:var(--mono);font-size:.9rem;font-weight:700;letter-spacing:.05em}
.tm-code.tm-struck{text-decoration:line-through}
.tm-exp{width:96px;text-align:right;font-size:.76rem;color:var(--ink3)}
.tm-exp.tm-exp-bad{color:var(--loss)}
.tm-revoke{font-size:.78rem;color:var(--loss);background:none;border:none;cursor:pointer;font-weight:600;padding:0}
.tm-toggle{font-size:.78rem;color:var(--accent);background:none;border:none;cursor:pointer;font-weight:600;padding:12px 0 2px}
/* ONE PALETTE, the app's own. These were a purple, a blue, a green and a
   stone — four hues borrowed from nowhere, sitting next to an accent that is
   green, so the admin badge in particular read as a link or a status rather
   than a role.
   Still four distinguishable badges, separated by WEIGHT of the same green
   instead of by hue: owner darkest, then admin, then member, with viewer the
   neutral because a viewer is the absence of permission rather than a lesser
   kind of it. That ordering is also the permission ordering, which a set of
   unrelated colours could not express at all. */
.rbadge{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:10px;text-align:center}
.rbadge-owner{background:#0f5132;color:#ffffff}
.rbadge-admin{background:#a7d8bd;color:#0b3d25}
.rbadge-member{background:var(--accent-lt);color:var(--sb-active-text)}
.rbadge-viewer{background:#F1EFE8;color:#444441}
/* Reusable role chooser (shared by invite modal + edit popover) */
.rc-pills{display:flex;gap:6px;margin-bottom:12px}
.rc-pill{flex:1;font-size:.82rem;font-weight:600;padding:7px 6px;border:1px solid var(--rule2);background:var(--surface);color:var(--ink2);border-radius:var(--r);cursor:pointer;text-align:center}
.rc-pill:hover{border-color:var(--ink3)}
.rc-pill.rc-on{border-color:var(--accent);background:var(--accent-lt);color:var(--accent)}
.rc-caps{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:.7rem .85rem}
.rc-caps-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);font-weight:700;margin-bottom:6px}
.rc-cap{display:flex;align-items:flex-start;gap:7px;font-size:.8rem;color:var(--ink);padding:2px 0}
.rc-cap svg{width:13px;height:13px;flex-shrink:0;margin-top:3px;color:var(--accent)}
.tm-field-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:700;margin:14px 0 6px}
.tm-input{width:100%;padding:8px 10px;border:1px solid var(--rule2);border-radius:var(--r);font-size:.85rem;color:var(--ink);background:var(--surface);font-family:var(--sans)}
.tm-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
/* Anchored role-edit popover */
.tm-pop{position:absolute;z-index:9700;width:260px;background:var(--surface);border:1px solid var(--rule2);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:.85rem .9rem}
.tm-pop-h{font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:10px}
/* Generated-code result */
.tm-code-box{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px dashed var(--rule2);border-radius:var(--r);padding:.7rem .9rem;margin:6px 0 4px}
.tm-code-big{font-family:var(--mono);font-size:1.3rem;font-weight:800;letter-spacing:.12em;color:var(--ink)}
@media(max-width:760px){.pe-card-body{grid-template-columns:1fr}.pe-wrap{padding:0 0 1.25rem}}
/* Currency selector */
.cur-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .65rem;border:1px solid var(--rule2);border-radius:var(--r);background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:.86rem;cursor:pointer;width:100%;box-sizing:border-box;text-align:left}
.cur-btn:hover{border-color:var(--ink3)}
.cur-btn.cur-btn-open{border-color:var(--ink3);border-bottom-color:transparent;border-radius:var(--r) var(--r) 0 0}
/* Not bold. It is the field's value, not a heading, and it sat heavier than
   every other answer on the same form. */
.cur-btn-val{font-weight:400}
.cur-btn-caret{margin-left:auto;color:var(--ink3);font-size:.72rem}
/* ── Foreign-currency entry (multi-currency phase 2) ───────────────────────
   The sterling strip is the figure that actually reaches the ledger and the VAT
   return, so it is styled to read as a RESULT rather than a hint — same weight
   as the total above it, not greyed-out small print. The error variant uses the
   danger colour because a missing rate is a hard block on posting, not advice. */
.fx-strip{margin-top:.45rem;padding:.4rem .55rem;background:var(--bg);border:1px solid var(--rule);border-left:2px solid var(--accent-mid);border-radius:4px;font-size:.82rem;font-weight:600;color:var(--ink);text-align:right;line-height:1.4}
.fx-strip-sub{display:block;font-size:.68rem;font-weight:400;color:var(--ink2);font-family:var(--mono);margin-top:.15rem}
.fx-strip-err{font-weight:500;font-size:.72rem;color:var(--loss);border-left-color:var(--loss);text-align:left}
.fx-strip-err code{font-family:var(--mono);font-size:.68rem;background:var(--surface);padding:.05rem .25rem;border-radius:3px}
.fx-note{margin-top:.4rem;font-size:.7rem;color:var(--ink2);line-height:1.35}
.fx-note:empty{display:none}
.fx-note-err{color:var(--loss);font-weight:500}
.cur-pop{z-index:9700;background:var(--surface);border:1px solid var(--ink3);border-top:1px solid var(--rule2);border-radius:0 0 var(--r) var(--r);box-shadow:0 8px 20px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
.cur-search{margin:.5rem;padding:.45rem .6rem;border:1px solid var(--rule2);border-radius:var(--r);font-size:.82rem;font-family:var(--sans);background:var(--surface);color:var(--ink)}
.cur-search:focus{outline:none;border-color:var(--ink3)}
.cur-list{flex:1 1 auto;min-height:0;max-height:240px;overflow-y:auto;overscroll-behavior:contain;padding:0 .35rem .4rem}
.cur-group{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);font-weight:700;padding:.45rem .55rem .2rem}
.cur-row{display:flex;align-items:baseline;gap:.6rem;padding:.4rem .55rem;border-radius:var(--r);cursor:pointer}
.cur-row:hover{background:var(--bg)}
.cur-sym{width:1.6rem;flex-shrink:0;color:var(--ink3);font-size:.85rem}
.cur-code{font-weight:700;font-size:.82rem;color:var(--ink);width:2.6rem;flex-shrink:0}
.cur-name{color:var(--ink2);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur-empty{padding:.7rem .6rem;color:var(--ink3);font-size:.8rem}
.bo-currency{margin:.25rem 0 .5rem;max-width:280px}

/* ══ MOBILE TOP NAV BAR ════════════════════════════════════════════════ */
.mobile-topbar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:200;
  height:52px;background:var(--sidebar-bg);color:var(--sb-text-hi);
  border-bottom:1px solid var(--sb-line);
  padding:0 1rem;
  align-items:center;justify-content:space-between;
  gap:.5rem;
}
.mt-brand{display:flex;align-items:center;gap:.4rem;font-family:var(--sans);font-weight:800;font-size:1.05rem;color:var(--sb-text-hi);flex-shrink:0;letter-spacing:-.02em}
.mt-brand .brand-mark{width:26px;height:26px}
.mt-page-label{font-size:.72rem;color:var(--sb-text);flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-menu-btn{background:none;border:none;color:var(--sb-text);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.mt-menu-btn:hover,.mt-menu-btn:active{background:var(--sb-hover);color:var(--sb-text-hi)}

/* Mobile menu overlay + slide-in panel */
.mobile-menu-overlay{
  display:none;position:fixed;inset:0;z-index:250;
  background:rgba(0,0,0,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s ease;
}
.mobile-menu-overlay.show{display:block;opacity:1}
.mobile-menu{
  display:none;position:fixed;top:0;right:0;bottom:0;z-index:300;
  width:280px;max-width:80vw;background:var(--sidebar-bg);
  padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.25);
}
.mobile-menu.show{display:block;transform:translateX(0)}
.mm-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .7rem;border-bottom:1px solid var(--sb-line)}
.mm-title{font-family:var(--serif);font-size:1rem;color:var(--sb-text-hi);font-weight:600}
.mm-close{background:none;border:none;color:var(--sb-text);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s}
.mm-close:hover{color:var(--sb-text-hi);background:var(--sb-hover)}
.mm-group{font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;color:var(--sb-text-dim);padding:.85rem 1.1rem .3rem;font-weight:600}
.mm-btn{display:flex;align-items:center;gap:.65rem;width:100%;padding:.7rem 1.1rem;border:none;background:none;color:var(--sb-text);font-family:var(--sans);font-size:.82rem;font-weight:500;cursor:pointer;text-align:left;transition:all .12s;border-left:3px solid transparent}
.mm-btn:hover,.mm-btn:active{background:var(--sb-hover);color:var(--sb-text-hi)}
.mm-btn.active{background:var(--sb-active);color:var(--sb-active-text);border-left-color:var(--sb-active-text)}
.mm-icon{flex-shrink:0;width:22px;display:flex;align-items:center;justify-content:center}
/* The sidebar's own line icons, one colour, a little larger for a finger
   (16 Oct — they were emoji, a second icon set in a second style). */
.mm-icon svg{width:15px;height:15px;opacity:.55}
.mm-btn.active .mm-icon svg,.mm-btn:hover .mm-icon svg{opacity:.9}

/* ══ RESPONSIVE — TABLETS (≤1024px) ═══════════════════════════════════ */
@media(max-width:1024px){
  .main{padding:1.5rem 1.75rem 4rem}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .ratio-grid{grid-template-columns:repeat(2,1fr)}
  .risk-row{grid-template-columns:repeat(2,1fr)}
  .aging-summary{grid-template-columns:repeat(3,1fr)}
  .two-col{grid-template-columns:1fr}
  .ratio-trend-grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .fgrid3{grid-template-columns:1fr 1fr}
  .alog-row{grid-template-columns:1fr 1fr;gap:.3rem}
  .alog-row span:nth-child(3),.alog-row span:nth-child(4){font-size:.68rem}
  .prof-layout{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
}

/* ══ RESPONSIVE — MOBILE (≤768px) ═══════════════════════════════════ */
@media(max-width:768px){
  /* Hide desktop sidebar, show mobile top bar */
  .sidebar{display:none!important}
  .mobile-topbar{display:flex!important}

  .main{margin-left:0;margin-top:52px;padding:1rem 1rem 3rem;width:100%;max-width:100vw;overflow-x:hidden;box-sizing:border-box}
  .sec{max-width:100%;overflow-x:hidden}
  .ph{flex-direction:column;gap:.5rem}
  .ph-title{font-size:1.3rem}
  .ph>div{min-width:0;max-width:100%}
  .ph .btn{align-self:flex-start}
  .mgrid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .metric{padding:.75rem .8rem}
  .m-val{font-size:1.1rem}
  .ratio-grid{grid-template-columns:1fr}
  .risk-row{grid-template-columns:1fr}
  .aging-summary{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .ratio-trend-grid{grid-template-columns:1fr}
  .eh-grid{grid-template-columns:1fr}
  .fgrid,.fgrid3{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .itabs{gap:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .itab{padding:.45rem .7rem;font-size:.7rem;flex-shrink:0}
  .sl-viewport{padding:1.5rem 1.25rem}
  .sl-question{font-size:1.15rem}
  .sl-options{gap:.4rem}
  .sl-opt{padding:.5rem .9rem;font-size:.76rem}
  .card-body{padding:1rem}
  .card-hd{padding:.7rem 1rem}
  .card{overflow:hidden}

  /* Tables: allow horizontal scroll inside cards */
  .card-body:has(.tbl),.card-body:has(.aging-table),.card-body:has(.stmt){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card>.tbl-wrap,.card-body{max-width:100%}
  .tbl{font-size:.72rem;min-width:520px}
  .tbl th,.tbl td{padding:.5rem .55rem;white-space:nowrap}
  .aging-table{font-size:.68rem;min-width:600px}
  .aging-table th,.aging-table td{padding:.45rem .4rem;white-space:nowrap}
  .stmt{min-width:auto}

  /* Lines builder overflow */
  .lines-hd,.line-row{grid-template-columns:1fr 80px 80px 28px;gap:.3rem}
  .lines-hd span,.line-row input,.line-row select{font-size:.72rem}

  /* Audit log */
  .alog-row{grid-template-columns:1fr 1fr}
  .alog-row span:nth-child(3),.alog-row span:nth-child(4){font-size:.64rem}

  .chart-wrap{height:180px}
  .ge-cat-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}

  /* Profile modal on mobile */
    .profile-page .sl-viewport{padding:1.25rem 1rem}
  .profile-page .sl-question{font-size:1.1rem}
  .pw-layout{grid-template-columns:1fr}

  /* Storage bar stacking */
  #storage-bar{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ══ RESPONSIVE — SMALL PHONES (≤480px) ═══════════════════════════════ */
@media(max-width:480px){
  .main{padding:.75rem .75rem 2.5rem}
  .mgrid{grid-template-columns:1fr 1fr;gap:.5rem}
  .metric{padding:.6rem .65rem}
  .m-label{font-size:.52rem}
  .m-val{font-size:.95rem}
  .ph-title{font-size:1.15rem}
  .sl-question{font-size:1rem}
  .sl-opt{padding:.42rem .7rem;font-size:.72rem}
  .btn{padding:.4rem .7rem;font-size:.7rem}
  .aging-summary{grid-template-columns:1fr 1fr}
  .ind-grid{grid-template-columns:1fr 1fr}
  .eh-grid{grid-template-columns:1fr}
  .eh-card{padding:.9rem}
  .si-bar{padding:.4rem .6rem}
  .si-input{font-size:.8rem}
}

/* ══ RESPONSIVE — LARGE DESKTOPS (≥1400px) ═══════════════════════════ */
@media(min-width:1400px){
  .main{padding:2.5rem 3.5rem 5rem}
  .mgrid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .ratio-grid{grid-template-columns:repeat(3,1fr)}
  .eh-grid{grid-template-columns:repeat(3,1fr)}
  .aging-summary{grid-template-columns:repeat(5,1fr)}
}

/* ══ RESPONSIVE — ULTRAWIDE (≥1800px) ═════════════════════════════════ */
@media(min-width:1800px){
  .main{padding:3rem 4rem 5rem;max-width:1600px;margin-left:215px;margin-right:auto}
}


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

.bo-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.75rem;box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(26,36,30,.04)}
.bo-choice{display:flex;flex-direction:column;gap:.85rem;margin-top:1rem}
.bo-opt{display:flex;align-items:center;gap:1rem;text-align:left;width:100%;background:var(--surface);border:1px solid var(--rule2);border-radius:var(--r);padding:1.1rem 1.25rem;cursor:pointer;transition:border-color .15s,background .15s;font-family:var(--sans)}
.bo-opt:hover{border-color:var(--accent);background:var(--accent-lt)}
.bo-opt-ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--accent-lt);color:var(--accent);display:flex;align-items:center;justify-content:center}
.bo-opt-tt{display:block;font-size:.98rem;font-weight:700;color:var(--ink)}
.bo-opt-sb{display:block;font-size:.8rem;color:var(--ink2);margin-top:.15rem}
.bo-h{font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.bo-sub{font-size:.85rem;color:var(--ink2);margin-top:.3rem;margin-bottom:1.25rem}
.bo-dots{display:flex;gap:6px;justify-content:center;margin-bottom:1.5rem}
.bo-dot{width:8px;height:8px;border-radius:50%;background:var(--rule2);transition:background .2s}
.bo-dot.active{background:var(--accent)}
.bo-dot.done{background:var(--accent-mid)}
.bo-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}

/* The financial year end, when it is not one of the presets. Day then month,
   in that order, because that is how a UK year end is said and written. */
.ye-picker{display:flex;gap:.5rem;margin-top:.7rem}
.ye-sel{flex:1;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:6px;
  background:var(--card);color:var(--ink);font-size:.85rem;font-family:inherit;cursor:pointer}
.ye-sel:focus{outline:none;border-color:var(--accent-mid)}
.pe-help{font-size:.7rem;line-height:1.4;margin-top:.35rem}
.bo-chip{padding:.55rem .9rem;border-radius:999px;border:1px solid var(--rule2);font-size:.85rem;cursor:pointer;transition:all .12s;font-family:var(--sans);color:var(--ink);background:var(--surface)}
.bo-chip:hover{border-color:var(--accent)}
.bo-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.bo-input{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--rule2);border-radius:var(--r);padding:.75rem .9rem;outline:none;transition:border-color .15s,box-shadow .15s}
.bo-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt)}
.bo-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.75rem}
.bo-btn{padding:.65rem 1.3rem;border-radius:var(--r);font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:background .15s}
.bo-btn-primary{background:var(--accent);color:#fff}
.bo-btn-primary:hover{background:var(--accent-mid)}
.bo-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.bo-btn-ghost{background:transparent;color:var(--ink2);border:none;cursor:pointer;font-family:var(--sans);font-size:.88rem}
.bo-btn-ghost:hover{color:var(--ink)}
.bo-err{font-size:.82rem;color:var(--loss);background:var(--loss-bg);padding:.6rem .8rem;border-radius:var(--r);margin-top:1rem;display:none}
.bo-err.show{display:block}
.bo-code-input{width:100%;font-family:var(--mono);font-size:1.5rem;letter-spacing:.4em;text-align:center;text-transform:uppercase;color:var(--ink);background:var(--bg);border:1px solid var(--rule2);border-radius:var(--r);padding:.9rem;outline:none}
.bo-code-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt)}
.bo-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:beri-spin .6s linear infinite;vertical-align:middle;margin-right:.4rem}


.jd-thumb{width:30px;height:30px;border:0.5px solid var(--rule2);border-radius:6px;background:var(--surface);color:var(--ink2);font-size:.72rem;cursor:pointer;font-family:var(--sans)}
.jd-thumb.active{border-color:var(--accent);color:var(--accent);font-weight:700}
.jd-thumb:hover{border-color:var(--accent)}
.jnl-sum{cursor:pointer}
.jnl-sum:hover td{background:var(--accent-lt);color:var(--accent)!important}
.col-opt{display:flex;align-items:center;gap:.5rem;padding:.35rem .4rem;font-size:.8rem;color:var(--ink);cursor:pointer;border-radius:4px}
.col-opt:hover{background:var(--bg)}
.col-opt input{width:auto;height:auto;margin:0}
.jnl-funnel{display:inline-flex;align-items:center;cursor:pointer;color:var(--ink3);margin-left:.15rem;padding:1px;border-radius:3px;vertical-align:middle}
/* A heading and its filter stay on one line (18 Oct): with the Entry date and
   Transaction date columns side by side, "Journal #" and "Entry date" broke
   and dropped their funnels underneath. The table scrolls when it must. */
#jnl-head th{white-space:nowrap}
.jnl-funnel:hover{color:var(--ink);background:var(--bg)}
.jnl-funnel.active{color:var(--ink)}
#jnl-filter-pop{display:none;position:fixed;z-index:9600;background:var(--surface);border:1px solid var(--rule2);border-radius:var(--r);box-shadow:var(--sh-lg);padding:.6rem;min-width:190px}
#jnl-filter-pop .fp-in{width:100%;box-sizing:border-box;font-size:.78rem;padding:.3rem .45rem;border:1px solid var(--rule2);border-radius:var(--r);background-color:var(--surface);color:var(--ink);font-family:var(--sans)}
#jnl-filter-pop .fp-lbl{display:flex;flex-direction:column;gap:.2rem;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
#jnl-filter-pop .fp-select{position:relative}
#jnl-filter-pop .fp-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:1.6rem;cursor:pointer}
#jnl-filter-pop .fp-select::after{content:"▾";position:absolute;right:.55rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink3);font-size:.7rem}
#jnl-filter-pop .fp-in:focus{outline:none;border-color:var(--ink3)}
.fchip{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg);color:var(--ink);border:1px solid var(--rule2);border-radius:999px;padding:.2rem .6rem;font-size:.72rem;font-weight:600}
.fchip .fchip-x{cursor:pointer;opacity:.7;font-weight:700}
.fchip .fchip-x:hover{opacity:1}
.fchip-label{color:var(--ink3);font-weight:500;margin-right:.1rem}

/* ══════════════════════════════════════════════════════
   MULTI-SELECT DROPDOWN
   ══════════════════════════════════════════════════════
   Built to match the base-currency picker (.cur-btn / .cur-pop) — same borders,
   same joined-to-the-field look, same fixed list height — minus the search box
   and group headers. Every colour is a theme variable so it sits on the page
   background in dark mode too. */
.ms{position:relative;width:100%}
.ms-control{display:flex;align-items:center;gap:.5rem;width:100%;min-height:2.3rem;
  padding:.4rem .65rem;box-sizing:border-box;text-align:left;cursor:pointer;
  border:1px solid var(--rule2);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:.86rem}
.ms-control:hover{border-color:var(--ink3)}
/* Open: the control and panel read as one object, exactly like .cur-btn-open. */
.ms.open .ms-control{border-color:var(--ink3);border-bottom-color:transparent;
  border-radius:var(--r) var(--r) 0 0}
.ms-value{flex:1;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;min-width:0}
.ms-empty{color:var(--ink3);font-size:.82rem}
.ms-tag{display:inline-block;padding:.14rem .5rem;border-radius:99px;
  background:var(--accent-lt);color:var(--accent);border:1px solid var(--accent-mid);
  font-size:.72rem;font-weight:600;line-height:1.4;white-space:nowrap}
.ms-caret{flex:0 0 auto;margin-left:auto;color:var(--ink3);font-size:.72rem;transition:transform .2s}
.ms.open .ms-caret{transform:rotate(180deg)}

/* GEOMETRY BASELINE — this rule alone must produce the right box.
   Anchored to .ms (position:relative) and stretched left:0/right:0, so the panel
   is the width of the control by construction, with no measuring involved.
   msPositionPanel then re-anchors it to <body> with position:fixed so no
   overflow:hidden ancestor can clip it.
   The baseline matters because width was previously specified ONLY in JS: any
   path that skipped msPositionPanel left the panel with width:auto, and an
   out-of-flow block with width:auto shrinks to fit its longest label instead of
   failing visibly. That is a silent wrong-looking box, so CSS now owns the
   fallback and JS only upgrades it.
   max-height is fixed on purpose — deriving it from the space below the control
   made the panel open small and then grow as the page scrolled. */
.ms-panel{display:none;position:absolute;top:calc(100% - 1px);left:0;right:0;
  width:auto;z-index:9700;box-sizing:border-box;
  max-height:240px;overflow-y:auto;overscroll-behavior:contain;
  padding:.35rem;
  background:var(--surface);border:1px solid var(--ink3);border-top:1px solid var(--rule2);
  border-radius:0 0 var(--r) var(--r);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.ms-panel.open{display:block}
/* STICKY, because the panel is the thing that scrolls. A search box that
   scrolled away with the list would leave you typing into a field you can no
   longer see, three hundred countries down. The negative offsets and the
   background cancel the panel's own .35rem padding so the box sits flush and
   nothing shows through behind it. */
.ms-search-wrap{position:sticky;top:-.35rem;z-index:1;background:var(--surface);
  margin:-.35rem -.35rem .3rem;padding:.35rem .35rem .3rem;
  border-bottom:1px solid var(--rule)}
.ms-search{width:100%;box-sizing:border-box;padding:.4rem .55rem;font-size:.82rem;
  font-family:var(--sans);border:1px solid var(--rule2);border-radius:var(--r);
  background:var(--bg);color:var(--ink)}
.ms-search:focus{outline:none;border-color:var(--ink3)}
.ms-opts{display:block}

/* ── Company documents ───────────────────────────────────────────────────── */
.cdoc-group{display:flex;align-items:center;gap:.45rem;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);font-weight:700;
  margin:1.1rem 0 .45rem;padding-bottom:.3rem;border-bottom:1px solid var(--rule)}
.cdoc-group:first-child{margin-top:.3rem}
.cdoc-group-n{font-size:.58rem;color:var(--ink3);font-weight:600;
  background:var(--bg);border-radius:99px;padding:.05rem .4rem;letter-spacing:.04em}
.cdoc-item{padding:.5rem .1rem;border-bottom:1px solid var(--rule)}
.cdoc-item:last-child{border-bottom:none}
.cdoc-item-hd{display:flex;align-items:center;gap:.6rem;min-width:0}
.cdoc-name{color:var(--accent);text-decoration:none;font-size:.84rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdoc-name:hover{text-decoration:underline}
.cdoc-meta{font-size:.68rem;color:var(--ink3);white-space:nowrap;flex-shrink:0}
.cdoc-who{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.cdoc-btn{margin-left:auto;background:none;border:1px solid var(--rule2);
  border-radius:var(--r);color:var(--ink3);cursor:pointer;font-size:.68rem;
  padding:.12rem .45rem;font-family:var(--sans);flex-shrink:0}
.cdoc-btn:hover{color:var(--ink);border-color:var(--ink3)}
.cdoc-btn + .cdoc-btn{margin-left:.35rem}
.cdoc-del{color:var(--loss);font-size:.85rem;line-height:1;padding:.05rem .4rem}
.cdoc-desc{font-size:.75rem;color:var(--ink2);line-height:1.45;margin-top:.25rem;
  max-width:70ch}
/* ── Supporting documents on the invoice screen ──────────────────────────
   For an external invoice the attached file IS the document, so that case
   gets the accent border: it is the thing the reader came for, not a footnote
   to the panel above it. */
.invdoc-ev{border:1px solid var(--rule);border-radius:var(--r);padding:.75rem .9rem;
  background:var(--surface)}
.invdoc-ev-primary{border-left:3px solid var(--accent-mid);background:var(--accent-lt)}
.invdoc-ev-missing{border-left:3px solid var(--loss)}
.invdoc-ev-hd{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink3);font-weight:700;margin-bottom:.35rem}
.invdoc-ev-sub{font-size:.76rem;color:var(--ink2);line-height:1.5;margin-bottom:.5rem;
  max-width:66ch}
.invdoc-ev-item{display:flex;align-items:center;gap:.6rem;padding:.4rem .1rem;
  text-decoration:none;border-top:1px solid var(--rule)}
.invdoc-ev-item:first-of-type{border-top:none}
.invdoc-ev-name{font-size:.84rem;font-weight:600;color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.invdoc-ev-item:hover .invdoc-ev-name{text-decoration:underline}
.invdoc-ev-size{font-size:.68rem;color:var(--ink3);margin-left:auto;white-space:nowrap}
/* A link points at evidence somebody else controls, so it is labelled rather
   than shown as an equal to an uploaded file. */
.invdoc-ev-kind{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink3);background:var(--bg);border:1px solid var(--rule);
  border-radius:99px;padding:.05rem .4rem;margin-left:auto}

/* The "+N more" summary at the end of a capped tag list. Deliberately quieter
   than a real tag — it is a count, not an answer. */
.ms-tag-more{opacity:.72;font-style:italic;cursor:default}
.cdoc-field{margin-bottom:.9rem;display:flex;flex-direction:column;gap:.35rem}
.cdoc-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.cdoc-chip{font-size:.72rem;padding:.25rem .55rem;border-radius:99px;cursor:pointer;
  border:1px solid var(--rule2);background:var(--surface);color:var(--ink2);
  font-family:var(--sans)}
.cdoc-chip:hover{border-color:var(--ink3);color:var(--ink)}
.cdoc-chip.sel{background:var(--accent-lt);border-color:var(--accent-mid);
  color:var(--accent);font-weight:600}

.ms-opt{display:flex;align-items:center;gap:.6rem;padding:.4rem .55rem;border-radius:var(--r);
  cursor:pointer;font-size:.82rem;color:var(--ink2);line-height:1.35}
.ms-opt:hover{background:var(--bg);color:var(--ink)}
/* label. — MULTI-select rows only. Single-select rows are <div> and show no
   emphasis at all: the chosen answer is already displayed in the closed
   control, and marking it again in the list made one row read as a heading.
   Matches .cur-row, which has never had a selected state either.

   Scoped by ELEMENT TYPE rather than an ancestor class on purpose. The panel is
   moved to <body> while open, so a rule written as `.ms-single .ms-opt.on`
   loses its ancestor and silently stops applying at exactly the moment the
   panel is on screen. */
label.ms-opt.on{color:var(--ink);font-weight:500}
.ms-opt input{position:absolute;opacity:0;width:0;height:0}
.ms-box{flex:0 0 auto;width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--rule2);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.ms-opt.on .ms-box{background:var(--accent);border-color:var(--accent)}
.ms-opt.on .ms-box::after{content:'';width:4px;height:8px;margin-top:-2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ms-lbl{flex:1}

/* In the onboarding wizard the control is centred and capped, so it doesn't
   stretch the full width of a wide slide. */
.sl-ms-wrap{max-width:26rem;margin:0 auto}

/* Full category picker inside "Add an account" — only shown for
   "Any other category", so the common paths stay one click. */
.addacct-picker{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--rule2)}
.addacct-lbl{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink3);font-weight:700;margin-bottom:.3rem}
.addacct-picker select{width:100%}
.addacct-picker option:disabled{color:var(--ink3)}

/* Shown in place of a chart canvas when the charting library is unavailable —
   a blank card is indistinguishable from "you have no data". */
.chart-missing{display:flex;align-items:center;justify-content:center;height:100%;
  min-height:140px;padding:1rem;text-align:center;font-size:.78rem;color:var(--ink3);
  border:1px dashed var(--rule2);border-radius:var(--r)}

/* What a role cannot do by default but may be granted individually. */
.rc-note{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--rule2);
  font-size:.7rem;color:var(--ink3);line-height:1.45}

/* ══════════════════════════════════════════════════════
   FINANCIAL STATEMENTS
   ══════════════════════════════════════════════════════ */
.fs-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.4rem}
.fs-co{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--ink)}
.fs-per{font-size:.8rem;color:var(--ink3);margin-top:.15rem}
.fs-actions{display:flex;gap:.5rem}
.fs-warn{background:var(--loss-bg);color:var(--loss);border:1px solid var(--loss);
  border-radius:var(--r);padding:.6rem .9rem;font-size:.8rem;margin-bottom:1rem;line-height:1.5}

.fs-block{margin-bottom:2.2rem;break-inside:avoid}
.fs-title{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--ink);
  padding-bottom:.5rem;border-bottom:1.5px solid var(--ink);margin-bottom:.2rem}
.fs-table{width:100%;border-collapse:collapse;font-size:.82rem}
.fs-table th{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink3);font-weight:600;padding:.55rem .9rem .45rem;text-align:right;
  border-bottom:1px solid var(--rule)}
.fs-table th:first-child{text-align:left}
.fs-table td{padding:.3rem .9rem;color:var(--ink2)}
/* Figures line up only if the digits are the same width. */
.fs-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  width:8.5rem;font-family:var(--mono);font-size:.78rem}
.fs-prv{color:var(--ink3)}

.fs-head td{padding-top:.9rem;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700;color:var(--ink)}
.fs-item td{color:var(--ink2)}
/* A subtotal rules off the figures above it, not the label. */
.fs-sub td{font-weight:600;color:var(--ink);padding-top:.35rem}
.fs-sub .fs-num{border-top:1px solid var(--rule2)}
.fs-total td{font-weight:700;color:var(--ink);padding-top:.4rem;padding-bottom:.5rem}
.fs-total .fs-num{border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.fs-blank td{padding:.3rem 0}
.fs-note{font-size:.7rem;color:var(--ink3);line-height:1.6;border-top:1px solid var(--rule);
  padding-top:.8rem;max-width:46rem}

/* ── PRINT: the statements only, on A4 ──────────────────────────────────
   Triggered by .printing-fs on <body>, so the same markup serves the screen
   and the PDF and the two cannot drift apart. */
/* ── The invoice document ─────────────────────────────────────────────────
   THE DOCUMENT'S OWN STYLES ARE NOT HERE ANY MORE. They live inside
   templates/invoice_doc.html, which the server renders for both the screen and
   the PDF — one file, so the two cannot drift. About twenty rules used to sit
   here describing an invoice this stylesheet no longer draws.

   All that is left is the frame it arrives in. */
.invdoc-frame{width:100%;min-height:40rem;border:1px solid var(--rule);
  border-radius:var(--r-lg);background:#fff;display:block}

@media print{
  /* .sidebar is position:fixed and body is display:flex with a 215px offset —
     both have to be undone or the statements print in a narrow column with an
     empty band down the left. */
  body.printing-fs .sidebar, body.printing-fs .fs-actions,
  body.printing-fs .sec:not(#sec-statements),
  body.printing-fs #toast, body.printing-fs .modal-ov{display:none !important}
  body.printing-fs{display:block !important;background:#fff;color:#000}
  body.printing-fs .main{margin-left:0 !important;width:100% !important;
    padding:0 !important}
  body.printing-fs #sec-statements{display:block !important;padding:0;margin:0}
  body.printing-fs{background:#fff;color:#000}
  body.printing-fs .fs-table td, body.printing-fs .fs-table th{color:#000}
  body.printing-fs .fs-prv{color:#444}
  /* NO .printing-inv RULES. The invoice PDF is produced by the server from
     templates/invoice_doc.html, not by the browser's print dialog, so the
     page-break and hide-the-app rules that used to live here now live in that
     template's own @page block. Leaving them would have been a second
     stylesheet for a document this file no longer renders. */

  /* Never split a statement across a page if it fits on one. */
  body.printing-fs .fs-block{break-inside:avoid;page-break-inside:avoid;margin-bottom:1.6rem}
  body.printing-fs .fs-warn{border:1px solid #000;color:#000;background:#fff}
  @page{size:A4 portrait;margin:18mm 16mm}
}

/* ══════════════════════════════════════════════════════
   NOTES & BREAKDOWN
   ══════════════════════════════════════════════════════ */
.nt-ok{font-size:.76rem;color:var(--gain);background:var(--gain-bg);
  border:1px solid var(--gain);border-radius:var(--r);padding:.5rem .85rem;margin-bottom:1.2rem}
.nt-part{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--ink);
  margin:1.8rem 0 .3rem;padding-bottom:.45rem;border-bottom:1.5px solid var(--ink)}
.nt-part:first-child{margin-top:0}
.nt-sec{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--ink3);margin:1.1rem 0 .5rem}

.nt-note{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);
  margin-bottom:.7rem;overflow:hidden}
.nt-hd{display:flex;align-items:baseline;gap:.75rem;padding:.6rem .9rem;
  background:var(--bg);border-bottom:1px solid var(--rule)}
.nt-line{flex:1;font-weight:700;font-size:.84rem;color:var(--ink)}
.nt-tot{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--ink);
  width:8.5rem;text-align:right;font-variant-numeric:tabular-nums}
.nt-prv{color:var(--ink3);font-weight:500}

.nt-table{width:100%;border-collapse:collapse;font-size:.78rem}
.nt-table tr{cursor:pointer}
.nt-table tr:hover td{background:var(--bg)}
.nt-table td{padding:.36rem .9rem;border-bottom:1px solid var(--rule);color:var(--ink2)}
.nt-table tr:last-child td{border-bottom:none}
.nt-code{width:3.4rem;font-family:var(--mono);font-size:.72rem;color:var(--ink3)}
.nt-name{color:var(--ink2)}
.nt-num{width:8.5rem;text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){
  .nt-tot,.nt-num{width:6rem}
  .nt-prv{display:none}
}

/* ══════════════════════════════════════════════════════
   CHART DRIFT — profile no longer matches the chart
   ══════════════════════════════════════════════════════ */
.coa-drift{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem;padding:.7rem 1rem;border-radius:var(--r);
  font-size:.8rem;line-height:1.5;
  background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn)}
/* A missing ROLE account stops entries posting, so it reads as an error. */
.coa-drift-req{background:var(--loss-bg);border-color:var(--loss)}

/* The chart failed to load. Not dismissible: every screen is wrong until it
   does, so hiding this would leave the app looking merely empty. */
.chart-fail{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0 0 1rem;padding:.7rem .9rem;border:1px solid var(--loss);
  border-radius:8px;background:var(--loss-bg);font-size:.8rem;color:var(--ink)}
.chart-fail .cf-msg{font-size:.72rem;color:var(--ink2);margin-top:.15rem}

.drift-req{background:var(--loss-bg);border:1px solid var(--loss);border-radius:var(--r);
  padding:.65rem .85rem;font-size:.8rem;line-height:1.5;color:var(--ink);margin-bottom:1rem}
.drift-h{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  color:var(--ink3);margin:1.1rem 0 .5rem}
.drift-h:first-child{margin-top:0}
.drift-sub{display:block;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:.72rem;color:var(--ink3);margin-top:.3rem;line-height:1.5}
.drift-list{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.drift-row{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .75rem;
  border-bottom:1px solid var(--rule);cursor:pointer;font-size:.8rem}
.drift-row:last-child{border-bottom:none}
.drift-row:hover{background:var(--bg)}
.drift-row input{margin-top:.15rem;width:14px;height:14px;flex:0 0 14px}
.drift-code{font-family:var(--mono);font-size:.72rem;color:var(--ink3);flex:0 0 3rem}
.drift-name{flex:1;color:var(--ink)}
.drift-tag{display:inline-block;margin-left:.4rem;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:.05rem .35rem;border-radius:99px;
  background:var(--loss-bg);color:var(--loss)}
.drift-desc{display:block;font-size:.7rem;color:var(--ink3);margin-top:.15rem;line-height:1.4}
.drift-band{flex:0 0 auto;font-size:.68rem;color:var(--ink3);white-space:nowrap}
@media(max-width:600px){.drift-band{display:none}}

/* Merge dialog. */
.mg-src{font-size:.86rem;color:var(--ink);line-height:1.5}
.mg-note{font-size:.75rem;color:var(--ink3);line-height:1.55;margin-top:.5rem;
  padding:.6rem .75rem;background:var(--bg);border-radius:var(--r);
  border:1px solid var(--rule)}

/* ══════════════════════════════════════════════════════
   VAT RETURN
   ══════════════════════════════════════════════════════ */
.vat-scheme{font-size:.78rem;color:var(--ink2);background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--r);padding:.5rem .85rem;margin-bottom:1rem}
.vat-filed{font-size:.78rem;color:var(--ink);background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:var(--r);padding:.55rem .85rem;margin-bottom:1rem;line-height:1.5}
.vat-table{margin-bottom:.2rem}
.vat-box{font-family:var(--mono);font-weight:700;color:var(--ink3)}
.vat-amt{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vat-sub td{font-weight:600;color:var(--ink)}
.vat-net td{font-weight:700;color:var(--ink);background:var(--bg)}
.vat-verdict{margin-top:1rem;padding:.8rem 1rem;border-radius:var(--r);font-size:.9rem;
  line-height:1.5}
.vat-verdict.owe{background:var(--loss-bg);border:1px solid var(--loss);color:var(--ink)}
.vat-verdict.due{background:var(--gain-bg);border:1px solid var(--gain);color:var(--ink)}
.vat-work{margin-top:.9rem;padding:.7rem .9rem;background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--r);font-size:.76rem;color:var(--ink2);line-height:1.6}
.vat-note{margin-top:.9rem;font-size:.72rem;color:var(--ink3);line-height:1.6;max-width:44rem}
/* Filed returns (10 Oct, §3.50 #20): where each one stands, and recording its payment */
.vat-filed-st{margin:.2rem 0 .9rem;padding:.7rem .9rem;background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--r);font-size:.82rem;line-height:1.6}
.vat-filed-st .btn{margin-left:.5rem}
.vat-filings td{vertical-align:middle}
.vat-sub-l{font-size:.7rem;color:var(--ink3);margin-top:.15rem;line-height:1.45}
.vat-st{display:inline-block;padding:.16rem .55rem;border-radius:99px;font-size:.72rem;font-weight:600;
  border:1px solid transparent;line-height:1.5}
.vat-st.owe{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}
/* Ink, not red, on the red tint: red text on it was 3.96:1, under AA's 4.5:1 */
.vat-st.late{background:var(--loss-bg);border-color:var(--loss);color:var(--ink)}
.vat-st.due{background:var(--gain-bg);border-color:var(--gain);color:var(--ink)}
.vat-st.done{background:var(--bg);border-color:var(--rule);color:var(--ink2)}
.vat-st.muted{background:none;border-color:var(--rule);color:var(--ink3)}
.vat-st.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}
.vat-pay-row td{background:var(--bg)}
.vat-pay{padding:.8rem .9rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.vat-pay-title{font-weight:600;font-size:.84rem;margin-bottom:.6rem}
.vat-pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem}
/* Grid items may shrink below a select's natural width, or the form outgrows a phone. */
.vat-pay-grid>.fg{min-width:0}.vat-pay-grid select,.vat-pay-grid input{max-width:100%}
.vat-pay-hint{font-size:.7rem;color:var(--ink3);margin-top:.25rem;line-height:1.5}
.vat-pay-actions{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.vat-pay-err{color:var(--loss);font-size:.76rem;margin-top:.5rem}
.vat-pay-err:empty{display:none}
.vat-verdict.done{background:var(--bg);border:1px solid var(--rule);color:var(--ink)}
.vat-f-act{text-align:right;white-space:nowrap}
.vat-f-act .btn+.btn{margin-left:.35rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* On a phone each return is a card: what it is and what it is for, where it
   stands, then what to do. A table there hid the status and the buttons
   behind a sideways scroll. */
@media(max-width:640px){
  .vat-filings thead{display:none}
  /* Not the phone rule that gives every .tbl 520px: stacked, it fits the screen. */
  .tbl.vat-filings{min-width:0}
  .vat-filings,.vat-filings tbody,.vat-filings tr,.vat-filings td{display:block;width:100%}
  .vat-filings tr.vat-f-row{display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;
    padding:.75rem 0;border-bottom:1px solid var(--rule)}
  .vat-filings tr.vat-f-row td{padding:0;border:none}
  .vat-filings .vat-f-status{grid-column:1 / -1}
  .vat-filings td.vat-f-act{grid-column:1 / -1;text-align:left;white-space:normal}
  .vat-filings .vat-f-act .btn{min-height:40px}
  .vat-filings tr.vat-pay-row td{padding:.5rem 0}
}

/* ══════════════════════════════════════════════════════
   CORPORATION TAX
   ══════════════════════════════════════════════════════ */
/* Accounts that mix allowable and disallowable spend. Highlighted until
   answered, because a nil default that nobody looked at is the failure mode. */
.ct-review td{background:var(--warn-bg);padding:.35rem .9rem}
.ct-review.answered td{background:transparent}
.ct-of{display:block;font-size:.68rem;color:var(--ink3);margin-top:.1rem;line-height:1.4}
.ct-input{width:7.5rem;text-align:right;font-family:var(--mono);font-size:.78rem;
  padding:.2rem .4rem;border:1px solid var(--rule2);border-radius:var(--r);
  background-color:var(--surface);color:var(--ink)}
.ct-input:focus{outline:none;border-color:var(--accent)}
.ct-input:disabled{background-color:var(--bg2);color:var(--ink3);cursor:not-allowed}
select.ct-input{width:auto;text-align:left;font-family:inherit}
select.ct-wide{max-width:22rem}
/* The rule behind the answer, under it. A choice like "car over 50g/km" is
   only checkable if it says what it does. */
.ct-choice-note{padding:0 .9rem .5rem 1.8rem;font-size:.7rem;color:var(--ink3);
  line-height:1.5;background:var(--warn-bg)}

/* The inputs that decide the answer, above the figures they decide.
   Associated companies and the allowance election cannot be read from the
   ledger, so they get a block of their own rather than sitting in a warning. */
.ct-settings{display:flex;flex-wrap:wrap;gap:1.4rem;padding:.7rem .9rem .9rem}
.ct-set{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--ink2)}
.ct-set > span{display:flex;align-items:center;gap:.25rem}
.ct-open td{padding:.35rem .9rem}
.ct-open .ct-of{display:inline;font-size:.7rem}

/* Why, next to what. A note that has to be hunted for does not get written. */
.ct-note{display:block;width:100%;max-width:32rem;margin-top:.35rem;
  font-size:.72rem;padding:.25rem .4rem;border:1px solid var(--line);
  border-radius:4px;background:var(--bg);color:var(--ink)}
.ct-note::placeholder{color:var(--ink3)}
.ct-note:focus{outline:none;border-color:var(--accent)}
.ct-addrow td{padding:.5rem .9rem}
.ct-addrow .ct-note{display:inline-block;width:16rem;margin:0 .4rem 0 0;vertical-align:middle}
.ct-addrow .ct-input{margin-right:.4rem;vertical-align:middle}

/* Saved / unsaved / finalised. Quiet, because it is a state and not an alert. */
.ct-badge{display:inline-block;margin-left:.5rem;padding:.05rem .4rem;border-radius:3px;
  font-size:.66rem;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.ct-badge.saved{background:var(--ok-bg,var(--bg2));color:var(--ink2)}
.ct-badge.dirty{background:var(--warn-bg);color:var(--ink2)}
.ct-badge.none{display:none}
.ct-badge.locked{background:var(--bg2);color:var(--ink2);border:1px solid var(--line)}

/* Evidence upload, shared by the invoice and expense forms. */
.ev-wrap{border:1px solid var(--rule);border-radius:8px;padding:.7rem .8rem;background:var(--bg2)}
.ev-hd{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);
  font-weight:600;margin-bottom:.5rem}
.ev-drop{display:block;border:1px dashed var(--rule2);border-radius:6px;padding:.8rem;
  text-align:center;font-size:.76rem;color:var(--ink3);cursor:pointer;background:var(--surface)}
.ev-drop:hover{border-color:var(--accent);color:var(--accent)}
.ev-list{margin-top:.4rem}
.ev-item{display:flex;align-items:center;gap:.5rem;padding:.3rem .45rem;font-size:.74rem;
  border:1px solid var(--rule);border-radius:5px;background:var(--surface);margin-top:.3rem}
.ev-item .ev-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-item .ev-size{color:var(--ink3);font-size:.68rem}
.ev-item button{background:none;border:0;color:var(--loss);cursor:pointer;font-size:.85rem;line-height:1}
/* Only shown when nothing is attached — asking for both makes the reason meaningless. */
.ev-noneed{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--rule)}
.ev-noneed label{display:block;font-size:.72rem;color:var(--ink2);margin-bottom:.3rem}
.ev-noneed select,.ev-noneed input{width:100%;font-size:.78rem}
.ev-noneed input{margin-top:.4rem}
/* Same control inside the smart-input preview, which has its own type scale. */
.si-ev-noneed{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--rule)}
.si-ev-noneed label{display:block;font-size:.7rem;color:var(--ink3);margin-bottom:.25rem}
.si-ev-noneed select,.si-ev-noneed input{width:100%;font-size:.76rem}
.si-ev-noneed input{margin-top:.35rem}

.btn-link{background:none;border:0;padding:0;font:inherit;font-size:.7rem;
  color:var(--accent);cursor:pointer;text-decoration:underline}
.btn-link:hover{opacity:.8}
.ct-ca th{font-size:.6rem}
.ct-ca td{padding:.4rem .6rem;font-size:.78rem}
@media(max-width:900px){.ct-ca{font-size:.72rem}}

/* ══════════════════════════════════════════════════════
   REVIEW NOTICE
   ══════════════════════════════════════════════════════
   Things to look at before filing — NOT errors. Deliberately quiet: one line,
   collapsed, in the app's own idiom. Full-width red panels for these pushed the
   figures below the fold and made a correct computation look broken, which is
   how people learn to scroll past warnings that matter. */
.rv{margin-bottom:1.1rem;border:1px solid var(--rule2);border-radius:var(--r);
  background:var(--surface);overflow:hidden}
.rv-head{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .8rem;
  background:none;border:none;cursor:pointer;text-align:left;font-family:var(--sans);
  font-size:.78rem;color:var(--ink2)}
.rv-head:hover{background:var(--bg)}
/* Same circular treatment as the "?" help markers, so it reads as part of the
   interface rather than an exception thrown at the user. */
.rv-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--warn);
  color:var(--warn);font-size:.62rem;font-weight:700;line-height:1;user-select:none}
.rv-label{flex:1;color:var(--ink2)}
.rv-caret{flex:0 0 auto;color:var(--ink3);font-size:.7rem;transition:transform .18s}
.rv.open .rv-caret{transform:rotate(180deg)}

.rv-body{display:none;padding:.2rem .8rem .7rem 2rem;border-top:1px solid var(--rule)}
.rv.open .rv-body{display:block}
.rv-item{font-size:.76rem;color:var(--ink2);line-height:1.6;padding:.4rem 0;
  border-bottom:1px solid var(--rule)}
.rv-item:last-child{border-bottom:none}
.rv-item a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ── Reading a document ──────────────────────────────────────────────────
   The drop zone, and the panel that says what came back. The panel matters
   more than the zone: a form that fills itself silently is a form nobody
   checks, and an unchecked prefilled box is worse than an empty one because
   it looks answered. Everything machine-read is marked until touched. */
.ocr-drop{border:1.5px dashed var(--rule2);border-radius:var(--r);padding:1.6rem 1rem;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.ocr-drop:hover{border-color:var(--accent);background:var(--bg)}
.ocr-drop.over{border-color:var(--accent);background:var(--bg);border-style:solid}
.ocr-drop-main{font-size:.86rem;font-weight:600;color:var(--ink)}
.ocr-drop-sub{font-size:.72rem;color:var(--ink3);margin-top:.25rem}

/* ── SUBLEDGERS ──────────────────────────────────────────────────────────
   A tab per register. The four that are not built yet are visibly quieter
   rather than hidden: somebody with prepayments needs to know Berified intends to
   handle them, and a menu that silently lacks one reads as a product that
   never will. */
.sl-tab .sl-count{display:inline-block;margin-left:.35rem;padding:0 .32rem;
  border-radius:999px;background:var(--rule2);font-size:.62rem;font-weight:700;
  color:var(--ink2);vertical-align:middle}
.sl-tab .sl-warn{color:var(--warn);font-weight:800;margin-left:.25rem}
.sl-soon{opacity:.55}
.sl-soon-title{font-size:.82rem;font-weight:650;color:var(--ink);margin-bottom:.4rem}
.sl-soon-body{font-size:.76rem;color:var(--ink2);line-height:1.6;margin:.3rem 0}

.sl-summary{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.9rem 0 .5rem}
.sl-fig-l{font-size:.63rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink3);font-weight:600}
.sl-fig-v{font-size:1.02rem;font-weight:600;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.sl-fig-strong{color:var(--ink);font-weight:700}

.sl-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin:.7rem 0 1rem}
.sl-uptodate{font-size:.74rem;color:var(--ink3)}
/* ── Prepayments and deferred revenue ── */
/* A secondary line under a table cell — the dates under a name, the months
   under a term. Same job as .ct-of on the tax working; a separate name because
   the two tables have different type scales and sharing one would mean a change
   for one silently restyling the other. */
.sl-of{display:block;font-size:.68rem;color:var(--ink3);margin-top:.15rem;
  line-height:1.4}
/* A month already posted. Muted rather than hidden — the point of the schedule
   is that somebody can check the whole thing, including what has gone. */
.sl-sched-done{color:var(--ink3)}
.sl-sched-done td{opacity:.62}
/* The current / non-current split. Two figures side by side, because they only
   mean anything against each other. */
/* Month-end suggestions. Deliberately quieter than .fs-warn: these are
   questions, not errors — a quiet month for a supplier is a normal thing, and
   a list styled as a problem is one people learn to dismiss unread. */
/* An overdrawn director's loan: the company is owed, not owing. Marked so the
   figure is not read as another debt in a column of debts. */
.sl-owed-us{color:var(--warn,#b45309);font-size:.74rem}
.sl-suggest{border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:8px;padding:.7rem .9rem;margin-bottom:.9rem}
.sl-suggest-head{font-size:.8rem;font-weight:600;color:var(--ink)}
.sl-suggest-note{font-size:.72rem;color:var(--ink3);line-height:1.5;
  margin:.3rem 0 .6rem}
.sl-suggest-row{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.35rem 0;border-top:1px solid var(--rule)}
.sl-suggest-name{font-size:.78rem;color:var(--ink2)}
.sl-split{display:flex;flex-wrap:wrap;gap:1.4rem;padding:.6rem .9rem;
  margin-bottom:.9rem;border:1px solid var(--rule);border-radius:8px;
  font-size:.75rem;color:var(--ink2);background:var(--bg2,transparent)}
.sl-split strong{color:var(--ink);font-variant-numeric:tabular-nums;
  margin-left:.3rem}
.sl-sub{font-size:.68rem;color:var(--ink3);margin-top:.12rem}
.sl-gone-head{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink3);font-weight:600;margin:1.4rem 0 .5rem}

.sl-form{border:1px solid var(--rule2);border-radius:var(--r);
  padding:.9rem;margin:.4rem 0 1rem;background:var(--bg)}
.sl-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.7rem}
.sl-form-grid label{display:flex;flex-direction:column;gap:.25rem;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink3);font-weight:600}
.sl-form-note{font-size:.72rem;color:var(--ink3);margin:.7rem 0 .2rem;
  line-height:1.5}
.sl-form-actions{display:flex;gap:.5rem;margin-top:.7rem}

/* Cost, itemised the way IAS 16.16–17 itemises it. One box saying "cost" is
   where the training day and the extended warranty get capitalised — both of
   which belong in this year's P&L. Asking for the parts separately puts the
   rule in front of somebody at the one moment it is useful. */
.sl-cost{margin-top:1rem;border-top:1px solid var(--rule);padding-top:.8rem}
.sl-cost-head{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink3);font-weight:650;margin-bottom:.5rem}
.sl-cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.6rem}
.sl-cost-row{display:flex;flex-direction:column;gap:.2rem}
.sl-cost-row label{font-size:.7rem;color:var(--ink2);font-weight:600}
/* The boxes line up across a row whatever the length of the hint above them:
   the grid stretches each row to its tallest, and the box sits at the bottom. */
.sl-cost-row input{margin-top:auto}
.sl-form-grid label>input,.sl-form-grid label>select,.sl-form-grid label>.sl-combo{margin-top:auto}
/* One height for every box. Chrome draws a date box 2px taller than a text box
   (its calendar button), so a row with a date in it was out by those 2px. */
.sl-form :is(input:not([type=checkbox]):not([type=radio]),select){height:2.2rem}
.sl-cost-note{display:block;font-size:.65rem;color:var(--ink3);font-weight:400;
  line-height:1.4;margin-top:.1rem}
/* "including VAT" beside a money field. Deliberately quiet but always in the
   label, never in a note underneath — the amount and what it means have to be
   readable in the same glance or the note gets skipped. */
.sl-vat-tag{display:inline-block;margin-left:.35rem;font-size:.62rem;
  font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink3);vertical-align:middle}
.sl-check{display:flex;align-items:flex-start;gap:.45rem;font-size:.78rem;
  color:var(--ink2);margin:.7rem 0 .2rem;cursor:pointer}
.sl-check input{margin-top:.15rem;flex:none}
.sl-cost-total{margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--ink2);display:flex;justify-content:space-between;
  align-items:baseline}
.sl-cost-total strong{font-size:1rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sl-vat-note{font-size:.72rem;color:var(--ink2);background:var(--bg2,var(--bg));
  border-left:2px solid var(--accent);padding:.45rem .6rem;margin-bottom:.7rem;
  line-height:1.5}
.sl-vat-exc{color:var(--ink3)}
.sl-cost-not{margin-top:.8rem;font-size:.72rem}
.sl-cost-not summary{cursor:pointer;color:var(--warn);font-weight:600}
.sl-cost-not ul{margin:.5rem 0 .4rem 1rem;padding:0;line-height:1.65;
  color:var(--ink2)}
.sl-cost-not p{color:var(--ink3);line-height:1.55;margin:.4rem 0 0}

/* The improvement / disposal panel under a row. */
.sl-panel{margin-top:1rem}
.sl-panel-title{font-size:.82rem;font-weight:650;color:var(--ink);
  margin-bottom:.35rem}
.sl-panel-note{font-size:.73rem;color:var(--ink2);line-height:1.55;
  margin:.3rem 0 .7rem}
.sl-add-row td{padding-top:0;border-top:none}
.sl-add-item{display:inline-block;font-size:.68rem;color:var(--ink3);
  margin-right:1rem}

/* The monthly scan allowance, above the drop zone.
   Three states, and the ordinary one is deliberately QUIET: a plan limit that
   shouts at somebody with eight of ten scans left is nagging, not informing.
   It gains a colour only as it runs low, and only becomes a filled panel once
   it is actually spent — the one moment the message has something to tell
   somebody they did not already know. */
.ocr-allowance{font-size:.74rem;color:var(--ink3);margin-bottom:.6rem;
  line-height:1.5}
.ocr-allowance strong{color:var(--ink2);font-weight:650}
.ocr-allowance-low{color:var(--warn)}
.ocr-allowance-low strong{color:var(--warn)}
.ocr-allowance-out{background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:var(--r);padding:.6rem .7rem;color:var(--ink2)}
.ocr-allowance-out strong{color:var(--ink);display:block;margin-bottom:.15rem}

.ocr-status{margin-top:.75rem;font-size:.78rem;color:var(--ink2);
  display:flex;align-items:center;gap:.5rem}
.ocr-status .ocr-spin{width:.8rem;height:.8rem;border:2px solid var(--rule2);
  border-top-color:var(--accent);border-radius:50%;animation:ocrspin .7s linear infinite}
@keyframes ocrspin{to{transform:rotate(360deg)}}

.ocr-review{margin-top:.85rem;border-top:1px solid var(--rule);padding-top:.8rem}
.ocr-review h4{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink3);margin:0 0 .45rem;font-weight:600}
.ocr-note{font-size:.75rem;line-height:1.5;color:var(--ink2);
  padding:.45rem .6rem;border-radius:var(--r);background:var(--bg);margin-bottom:.4rem}
.ocr-note.warn{background:color-mix(in srgb,var(--loss) 8%,transparent);
  color:var(--ink);border-left:2px solid var(--loss)}
.ocr-note.blocked{background:color-mix(in srgb,var(--loss) 8%,transparent);
  border-left:2px solid var(--loss)}
.ocr-note b{font-weight:600}
/* Net + VAT = total, under the amount field. Filling 15.62 when the receipt
   says 18.75 looks like an error until you can see where the other 3.13 went. */
.ocr-bd{display:block;font-size:.72rem;color:var(--ink2);line-height:1.5}
.ocr-bd b{font-weight:600;color:var(--ink)}
.ocr-bd-note{display:block;font-size:.68rem;color:var(--ink3);line-height:1.45;margin-top:.2rem}
.ocr-said{font-size:.72rem;color:var(--ink3);line-height:1.5;margin:.15rem 0 .15rem 1rem;
  list-style:disc}

/* A field Berified filled from the document, not the person. Cleared the moment
   they type in it — at that point it is theirs and the marker would be a lie. */
.ocr-filled{background:color-mix(in srgb,var(--accent) 7%,transparent) !important;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--rule2)) !important}
.fg-hint{font-size:.7rem;color:var(--ink3);margin-top:.3rem;line-height:1.45}
.fg-hint.warn{color:var(--loss)}
.ocr-linkbtn{background:none;border:none;padding:0;font:inherit;font-size:.7rem;
  color:var(--accent);cursor:pointer;text-decoration:underline}

/* Job title in the team list. Muted next to the role badge: the role is the
   thing with consequences, the title is a label. Styling them alike would
   suggest they do the same kind of work. */
.tm-title-btn{background:none;border:none;padding:0;font:inherit;cursor:pointer;text-align:right}
.tm-title-txt{display:block;font-size:.8rem;color:var(--ink2);line-height:1.3;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-title-btn:hover .tm-title-txt{color:var(--accent);text-decoration:underline}
.tm-title-empty{color:var(--ink3)}

/* Idle session warning. A strip along the bottom rather than a modal: what it
   warns about has not happened yet, and stealing focus mid-sentence is its own
   small disaster. */
#idle-warn .idle-msg{font-size:.8rem;line-height:1.5;color:var(--ink);flex:1 1 260px}
#idle-warn .idle-act{display:flex;gap:.45rem;flex:0 0 auto}
/* ── Hoverable list rows ──────────────────────────────────────────────────
   Replaces six inline handlers of the form

       onmouseover="this.style.background='var(--bg)'"
       onmouseout="this.style.background='none'"

   on the combobox suggestions, the saved-journal-view menu and the merge
   picker. Those set an INLINE style, which outranks any stylesheet rule and
   so quietly made these rows unthemeable. As a class the highlight also
   survives keyboard focus and does not get stuck "on" when a row is removed
   from under the pointer, which the mouseout pair could not handle.

   The three used 'none', 'none' and 'transparent' to switch off — all three
   mean the same thing, so nothing is lost by having one rule. */
.hover-row { background: none; }
.hover-row:hover,
.hover-row:focus-visible { background: var(--bg); }

/* ── Dropdowns: one behaviour across all three kinds ──────────────────────
   The profile page shows three controls that all read as "a dropdown":

     select.pe-input   a native <select>          (Ownership, and the generic
                                                   profile fields)
     .ms-control       the multi-select widget    ("What matters to you")
     .cur-btn          the base-currency picker

   Border, radius, background, colour, font family and size already matched —
   and native selects already get the same custom SVG arrow via the
   `select{appearance:none}` rule above. What did NOT match was how they
   respond to being pointed at, and it was exactly complementary:

       .pe-input     highlighted on FOCUS, nothing on hover
       .ms-control   highlighted on HOVER, nothing on focus
       .cur-btn      highlighted on HOVER, nothing on focus

   So hovering "What matters to you" lit up and hovering "Ownership" did not,
   on the same form, one field apart. Both directions are closed below.

   :focus-visible rather than :focus on the two button-based controls, so the
   treatment appears for keyboard users without also firing on every mouse
   click — and, unlike .pe-input:focus, it does not remove the browser's focus
   ring, which is the only thing telling a keyboard user where they are. */
select.pe-input { cursor: pointer; min-height: 2.3rem; }
select.pe-input:hover { border-color: var(--ink3); }
.ms-control:focus-visible,
.cur-btn:focus-visible { border-color: var(--ink3); }

/* ── Every <select> keeps room for its arrow ──────────────────────────────
   The global `select` rule sets appearance:none, a custom SVG arrow, and
   padding-right:1.9rem to leave space for it. Seven rules then styled selects
   with the `padding` SHORTHAND, which resets padding-right — so the label text
   ran under the arrow, or (before the background-color fix above) there was no
   arrow at all and the control looked like a plain box.

   That is why the profile page's Industry, Payment terms, Annual revenue, VAT
   status and the rest did not look like the rest of the app: appearance:none
   had removed the operating system's arrow, and `background: var(--surface)`
   had removed the replacement.

   Someone hit half of this before — #jnl-filter-pop .fp-select select re-adds
   padding-right but not the image, so that one had the space and no arrow.

   Each selector below is deliberately one step more specific than the rule it
   corrects, so it wins without !important. */
select.pe-input,
select.ct-input,
.line-row select,
.ge-q select,
#jnl-filter-pop select.fp-in {
  padding-right: 1.9rem;
}
/* A dropdown should say it is one. The custom controls (.ms-control, .cur-btn)
   already do; native selects did not. */
select { cursor: pointer; }

/* ── The select arrow follows the theme ───────────────────────────────────
   The arrow is a data: URL, so its colour is baked into the SVG and cannot be
   var(--ink3) the way the custom widgets' carets are. In light mode the baked
   value (#5C6561 since 15 Oct; was #6A736F) happens to BE --ink3, so nothing looked wrong. In dark mode
   --ink3 is #879188 and the arrow stayed light — leaving native selects with a
   noticeably brighter caret than .ms-control and .cur-btn, on the same form.

   A CSS mask would keep one definition, but mask-image masks the whole element
   rendering including background-color, and <select> cannot carry a reliable
   pseudo-element to hang one on. So there are two encoded copies, and
   check_dropdown_styles.py asserts each one's fill matches that theme's
   --ink3 — which is what makes the duplication safe rather than a thing that
   quietly drifts. */
[data-theme="dark"] select,
.theme-dark select { background-image: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23879188' d='M6 8L1 3h10z'/></svg>"); }

/* ── Single-select variant of the .ms widget ──────────────────────────────
   Replaces the native <select> on the profile page. Same shell, same panel,
   same open/close behaviour — the difference is one answer instead of many,
   so there is no checkbox and no tag.

   It exists because `appearance:none` only themes the CLOSED control. The
   option list a native <select> drops down is drawn by the operating system
   and cannot be styled (see the note beside `select option` above), so those
   fourteen fields opened a platform menu right next to the custom panels of
   "What matters to you" and the currency picker. */
.ms-one { font-size: .86rem; color: var(--ink); }
/* Single-select rows: pointer only. No gutter, no tick — see the note on
   label.ms-opt.on above. Both of those were written as `.ms-single .ms-opt`
   and so never applied to an OPEN panel anyway, for the portalling reason
   given there. */
div.ms-opt { cursor: pointer; }

/* The KEYBOARD-active row, which is not the same thing as :hover.
   Arrow keys move this; the mouse moves :hover. Without a visible marker for
   it, a keyboard user pressing Down sees nothing move at all — the state is
   announced through aria-activedescendant and shown by nothing. */
.ms-opt.active { background: var(--bg); }
.ms-opt.active .ms-lbl { color: var(--ink); }

/* The "not filled in yet" treatment, matching .pe-input.pe-empty so a blank
   single-select is flagged the same way a blank text field is. */
.ms-empty-field .ms-control {
  border-style: dashed;
  border-color: var(--accent-mid);
  background-color: var(--accent-lt);
}

/* ── Account page: sign-in security ──────────────────────────────────────
   Reuses .acc-sec / .fg-hint from the rest of the Account page; only the
   pieces with no existing equivalent are defined here. */
.tfa-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; }
.tfa-state { font-size: .88rem; font-weight: 600; color: var(--ink); }
.tfa-badge { flex: 0 0 auto; font-size: .68rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 99px;
  background: var(--bg2, var(--bg)); color: var(--ink3); border: 1px solid var(--rule2); }
.tfa-badge.on { background: var(--accent-lt); color: var(--accent);
  border-color: transparent; }

.tfa-block { padding-top: .9rem; margin-top: .9rem; border-top: 1px solid var(--rule); }
.tfa-block-h { font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.tfa-block .btn { margin-top: .55rem; }

/* Running low on recovery codes is a warning, not a statistic. In grey hint
   text it reads as neither, and "you have none left" is discovered at exactly
   the moment it cannot be fixed. */
.fg-hint.tfa-warn { color: var(--warn, #b45309); font-weight: 600; }

.tfa-dev { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.tfa-dev:last-child { border-bottom: none; }
.tfa-dev-name { font-size: .84rem; color: var(--ink); }
.tfa-dev-this { font-size: .64rem; font-weight: 600; color: var(--accent);
  background: var(--accent-lt); border-radius: 99px; padding: .05rem .4rem;
  margin-left: .3rem; }

/* Approvals badge — the count of entries waiting, on the sidebar item.
   A queue with nothing in it shows no badge at all (the element is hidden by
   the renderer), because a persistent "0" trains people to stop reading it. */
.approvals-badge{margin-left:auto;min-width:1.15rem;padding:0 .35rem;border-radius:999px;
  background:var(--loss,#c0392b);color:#fff;font-size:.68rem;font-weight:700;
  line-height:1.15rem;text-align:center}

/* A confirmation's message is written in paragraphs ("\n\n"); textContent
   keeps the line breaks, and this shows them (16 Oct). */
#confirm-message{white-space:pre-line}

/* The fixed asset movements note (16 Oct): a column per class, the year's
   movements in rows. Section heads and closing figures carry the weight. */
.fa-note td,.fa-note th{white-space:nowrap}
.fa-note .fa-head td{font-weight:600;color:var(--ink);padding-top:.9rem;border-bottom:none}
.fa-note .fa-sum td{font-weight:600;border-top:1px solid var(--rule2)}
.fa-basis{font-size:.7rem;color:var(--ink3);margin:.35rem 0 1rem}

/* ══ SUBLEDGERS (16 Oct) ═════════════════════════════════════════════════
   The register's arithmetic as one line — first − second = third — with the
   ledger's figure under each term. The one bold thing on the page; the rest is
   quiet white cards on the sage ground, as everywhere else. */
.sl-eq{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:1.1rem 1.35rem .95rem;margin:1rem 0 .75rem}
.sl-eq-bad{border-color:color-mix(in srgb,var(--loss) 45%,var(--rule));
  box-shadow:inset 3px 0 0 var(--loss)}
.sl-eq-row{display:flex;align-items:flex-start;gap:1.1rem;flex-wrap:wrap}
.sl-eq-term{min-width:9rem}
.sl-eq-label{font-size:.74rem;color:var(--ink3);margin-bottom:.2rem}
.sl-eq-value{font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--ink2);
  font-variant-numeric:tabular-nums lining-nums}
.sl-eq-total .sl-eq-value{color:var(--ink);font-weight:600}
.sl-eq-op{font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--ink3);
  padding-top:1.05rem}
.sl-eq-ledger{font-size:.72rem;color:var(--ink3);margin-top:.3rem;font-variant-numeric:tabular-nums}
.sl-eq-ledger.sl-eq-off{color:var(--loss);font-weight:600}
.sl-eq-status{font-size:.76rem;color:var(--ink2);margin-top:.85rem;padding-top:.7rem;
  border-top:1px solid var(--rule)}
.sl-eq-bad .sl-eq-status{color:var(--loss)}
.sl-eq-tick{color:var(--accent);font-weight:700;margin-right:.25rem}

/* The job somebody comes here for, when there is one. */
.sl-due{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--accent-lt);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  color:var(--ink);border-radius:10px;padding:.65rem .9rem .65rem 1.1rem;margin:0 0 .75rem;
  font-size:.82rem}

.sl-card{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  margin:.75rem 0;overflow:hidden}
.sl-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1.1rem;border-bottom:1px solid var(--rule)}
.sl-card-title{font-size:.86rem;font-weight:600;color:var(--ink)}
.sl-card-count{font-weight:500;color:var(--ink3);margin-left:.2rem}
.sl-card .tbl-wrap{margin:0;border:none;border-radius:0}
/* A register wider than the card scrolls inside it. The card clips (for its
   rounded corners), so without this a phone lost the Edit and Dispose buttons
   off the right-hand edge with no way to reach them. */
.sl-card .tbl-wrap,#sl-unreg .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sl-card .sl-form{margin:0;border:none;border-bottom:1px solid var(--rule);border-radius:0}
/* Across the card: the 60ch cap broke "…in guided entry" onto a second line
   in a card with room for the whole sentence (18 Oct). */
.sl-empty{padding:1.6rem 1.1rem;color:var(--ink3);font-size:.8rem;line-height:1.55}
/* A row's buttons sit together at the right-hand edge, on one line: the column
   is as narrow as its buttons, so the figures take the rest of the width. They
   floated and stacked in a wide column on the prepayment, accrual and loan
   registers (18 Oct). */
.sl-row-actions{white-space:nowrap;width:1%;text-align:right}
.sl-row-actions .btn+.btn{margin-left:.15rem}
.sl-row-actions .btn-xs:not(.btn-primary){background:none;border-color:transparent;color:var(--accent)}
.sl-row-actions .btn-xs:not(.btn-primary):hover{background:var(--accent-lt)}
.sl-form-grid .sl-vat-rate,.sl-form-grid .sl-cp{display:flex;flex-direction:column}

@media(max-width:640px){
  .sl-eq-row{gap:.5rem}
  .sl-eq-op{display:none}
  .sl-eq-term{min-width:45%}
  .sl-eq-value{font-size:1.25rem}
  .sl-due{flex-direction:column;align-items:flex-start}
}
.sl-card .tbl td{vertical-align:middle}

/* 17 Oct: the contact box on register forms, the entries behind a
   disagreement, and the note on a form filled in from a journal entry. */
.sl-combo{position:relative;display:block}
.sl-combo input{width:100%}
.sl-combo-menu{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--surface);
  border:1px solid var(--rule2);border-radius:0 0 var(--r) var(--r);max-height:200px;
  overflow-y:auto;box-shadow:var(--sh);text-transform:none;letter-spacing:0;font-weight:400}
.sl-eq-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
#sl-unreg .tbl-wrap{margin-top:.6rem}
.sl-unreg-note{font-size:.76rem;color:var(--ink2);margin-top:.75rem;line-height:1.5}
/* A form filled in from a journal entry posts nothing (see slFromEntryOff). */
.sl-from-entry .sl-money-field,.sl-save-link{display:none}
.sl-from-entry .sl-save-link{display:inline}
.sl-from-entry .sl-save-post{display:none}
.sl-prefill-note{font-size:.76rem;color:var(--ink);background:var(--accent-lt);
  border-radius:8px;padding:.55rem .75rem;margin-bottom:.75rem}

/* ══ TEAM PAGE (18 Oct) ══════════════════════════════════════════════════
   One gap between every card: the Approvals card carried its own margin and
   the others none, so two cards touched and two did not. */
#sec-team > .card + .card{margin-top:1.25rem}
/* The count beside the heading it counts. */
.tm-count{margin-left:.45rem;font-size:.72rem;letter-spacing:0;color:var(--ink2);font-weight:600;
  font-variant-numeric:tabular-nums}
.tm-count:empty{display:none}

/* Approvals: four titled sections, divided by a rule. */
.apv-sec{padding:1.1rem 0;border-top:1px solid var(--rule)}
.apv-sec:first-child{padding-top:0;border-top:none}
/* Three sizes on this page, shared with the member list: names and headings
   .92rem, what a setting does .82rem, the explanation .8rem. Weight 600 — Manrope
   has no 650, so it was being faked. */
.apv-h{font-size:.92rem;font-weight:600;color:var(--ink);margin:0 0 .55rem;letter-spacing:0}
.apv-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;cursor:pointer}
/* The text runs to the switch, every section the same (18 Oct): a 68ch cap broke
   some paragraphs early and left others to run on, so the right edges wandered. */
.apv-text{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0}
.apv-label{font-size:.82rem;font-weight:500;color:var(--ink)}
.apv-help{font-size:.8rem;line-height:1.5;color:var(--ink2);margin:0}
.apv-note{font-size:.8rem;line-height:1.5;color:var(--ink2);margin:.7rem 0 0;padding-right:calc(36px + 1.5rem)}
/* A paragraph with no switch beside it stops where the others do. */
.apv-sec > .apv-help{padding-right:calc(36px + 1.5rem)}
.apv-note-warn{color:var(--loss)}
.apv-people{display:flex;flex-direction:column;margin-top:.6rem;border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.apv-person{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;font-size:.82rem;cursor:pointer}
.apv-person + .apv-person{border-top:1px solid var(--rule)}
.apv-person input{width:15px;height:15px;flex:none;margin:0}
.apv-person-name{flex:1;color:var(--ink);font-weight:500}
.apv-person-role{color:var(--ink3);font-size:.8rem}
.apv-save{padding-top:1.1rem;border-top:1px solid var(--rule);margin-top:.2rem}
/* An on/off setting looks like one. Still a checkbox underneath, so the form
   reads it as before; role="switch" tells a screen reader what it is. */
/* input[type=checkbox] in the selector: the global checkbox rule has that
   specificity and set the width back to auto, leaving a 2px sliver. */
input[type=checkbox].apv-switch{appearance:none;border:none;padding:0;-webkit-appearance:none;flex:none;width:36px;height:20px;margin:.1rem 0 0;
  border-radius:999px;background:var(--rule2);position:relative;cursor:pointer;transition:background .15s}
input[type=checkbox].apv-switch::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
input[type=checkbox].apv-switch:checked{background:var(--accent)}
input[type=checkbox].apv-switch:checked::before{transform:translateX(16px)}
input[type=checkbox].apv-switch:disabled{opacity:.45;cursor:not-allowed}
input[type=checkbox].apv-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.apv-switch,.apv-switch::before{transition:none}}
@media(max-width:640px){
  .apv-row{gap:1rem}
}

/* Dashboard: the entries most recently recorded (18 Oct). */
.dash-act{display:flex;align-items:baseline;gap:.9rem;padding:.68rem 1.25rem;border-bottom:1px solid var(--rule)}
.dash-act:last-child{border-bottom:none}
.dash-act-date{font-size:.76rem;color:var(--ink3);min-width:5.5rem;font-variant-numeric:tabular-nums}
.dash-act-ref{font-size:.76rem;color:var(--ink3);min-width:4.5rem}
.dash-act-desc{flex:1;min-width:0;font-size:.82rem;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-act-sub{margin-left:.5rem;color:var(--ink3);font-size:.76rem}
.dash-act-amt{font-size:.82rem;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:640px){.dash-act-ref{display:none}}

/* Invoice line items (18 Oct): the headings and every row on one grid. The
   description starts where the Description field above starts; Qty, Unit price
   and Line total are right-aligned over right-aligned figures. */
.inv-li{margin-top:.875rem}
.inv-li-title{display:block;margin-bottom:.45rem}
.inv-li-row{display:grid;grid-template-columns:minmax(0,1fr) 80px 120px 100px 28px;gap:.5rem;align-items:center}
.inv-li-row + .inv-li-row{margin-top:.45rem}
.inv-li-head{padding-bottom:.35rem;border-bottom:1px solid var(--rule);margin-bottom:.5rem}
.inv-li-head .r,.inv-li-row input.r{text-align:right}
.inv-li-row input{width:100%;box-sizing:border-box}
.inv-li-desc{position:relative;min-width:0}
.inv-li-menu{position:absolute;left:0;right:0;top:100%;z-index:80;background:var(--surface);border:1px solid var(--rule2);
  border-radius:0 0 var(--r) var(--r);max-height:180px;overflow-y:auto;box-shadow:var(--sh-lg)}
.inv-li-total{text-align:right;font-size:.84rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-li-x{background:none;border:none;color:var(--ink3);cursor:pointer;font-size:1rem;line-height:1;padding:.2rem;border-radius:var(--r)}
.inv-li-x:hover{color:var(--loss);background:var(--bg)}
@media(max-width:640px){.inv-li-row{grid-template-columns:minmax(0,1fr) 56px 84px 76px 24px;gap:.35rem}}
/* The totals end where the line totals end, not past the remove column. */
.inv-li #inv-totals{padding-right:calc(28px + .5rem)}
@media(max-width:640px){.inv-li #inv-totals{padding-right:calc(24px + .35rem)}}

/* Team page: access activity (22 Oct). */
.tm-activity{display:flex;flex-direction:column}
.tm-act-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-top:1px solid var(--rule)}
.tm-act-row:first-child{border-top:none}
.tm-act-sum{font-size:.84rem;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.tm-act-when{font-size:.74rem;color:var(--ink3);white-space:nowrap}
@media (max-width:560px){.tm-act-row{flex-direction:column;gap:.15rem}}