/* Accounting (acct-core.js and the lazy acct-<module>.js files) in the TryCleaning manager space.
   Tokens first; dark mode remaps them. The --tc-* tokens exist only in dark mode (theme.css), so they appear only
   inside the dark block. No raw colour outside the two token blocks, and never var(--navy) as a background (it
   turns pale in dark mode). Module files add their own extra rules with <style id="acct-<name>-css"> using only
   these tokens. Loaded by careers-admin.html straight after workspace.css.
   Source of truth: trycleaning-site\accounting.css */
:root{
  --acct-surface:#fff; --acct-inset:#F0F4FF; --acct-text:#0D1B4B; --acct-muted:#5c6583; --acct-border:rgba(13,27,75,0.12);
  --acct-rule:rgba(13,27,75,0.07); --acct-pos:#1e7a41; --acct-neg:#a12b1f; --acct-warn:#FFF6E9; --acct-link:#1466a8;
  --acct-hover:rgba(79,195,247,0.10); --acct-focus:#1466a8; --acct-bar:#4FC3F7; --acct-bar-2:#0D1B4B; --acct-bar-neg:#e0736a;
  --acct-banner-info-bg:#eaf6fd; --acct-banner-info-fg:#0f4f78; --acct-banner-info-bd:rgba(20,102,168,0.25);
  --acct-banner-warn-bg:#FFF6E9; --acct-banner-warn-fg:#7a4300; --acct-banner-warn-bd:rgba(197,122,20,0.35);
  --acct-pill-ok-bg:#e3f5ea; --acct-pill-ok-fg:#1a6437;
  --acct-pill-warn-bg:#fff0d9; --acct-pill-warn-fg:#824600;
  --acct-pill-bad-bg:#fde6e3; --acct-pill-bad-fg:#9e2a1e;
  --acct-pill-info-bg:#e1f1fb; --acct-pill-info-fg:#125985;
  --acct-pill-muted-bg:#eceff6; --acct-pill-muted-fg:#4d566f;
  --acct-cover-bg:#F0F4FF; --acct-shadow:0 10px 30px rgba(8,15,46,0.12); --acct-scrim:rgba(8,15,46,0.55);
  --acct-ghost-fg:#525b7a;   /* ghost buttons and unselected tabs on cream and white: 5.9:1 and 6.7:1 (the page's --grey is 2.8:1) */
}
:root[data-theme="dark"]{
  --acct-surface:var(--tc-surface,#172642); --acct-inset:var(--tc-surface-2,#101d33); --acct-text:var(--tc-text,#e8edf7);
  --acct-muted:#b7c0d8; --acct-border:var(--tc-border,rgba(255,255,255,0.14)); --acct-rule:rgba(255,255,255,0.07);
  --acct-pos:#7ee2a8; --acct-neg:#ff9b8f; --acct-warn:#3a2c14; --acct-link:#7fd3fb;
  --acct-hover:rgba(127,211,251,0.10); --acct-focus:#7fd3fb; --acct-bar:#7fd3fb; --acct-bar-2:#b7c0d8; --acct-bar-neg:#ff9b8f;
  --acct-banner-info-bg:#14324a; --acct-banner-info-fg:#cfeafc; --acct-banner-info-bd:rgba(127,211,251,0.30);
  --acct-banner-warn-bg:#3a2c14; --acct-banner-warn-fg:#ffe2b8; --acct-banner-warn-bd:rgba(255,194,122,0.35);
  --acct-pill-ok-bg:#15392a; --acct-pill-ok-fg:#7ee2a8;
  --acct-pill-warn-bg:#3d2d12; --acct-pill-warn-fg:#ffc27a;
  --acct-pill-bad-bg:#43201d; --acct-pill-bad-fg:#ff9b8f;
  --acct-pill-info-bg:#133047; --acct-pill-info-fg:#7fd3fb;
  --acct-pill-muted-bg:#262f47; --acct-pill-muted-fg:#b7c0d8;
  --acct-cover-bg:var(--tc-surface-2,#101d33); --acct-shadow:0 10px 30px rgba(0,0,0,0.35); --acct-scrim:rgba(0,0,0,0.6);
  --acct-ghost-fg:#b7c0d8;
}

/* ---- the Accounting dropdown: section headings in two columns, never taller than the screen. acct-core.js
   keepOnScreen() shifts it sideways after it opens so it never runs off either edge. Two CSS columns pack the
   sections without the gaps a two-column grid leaves under short sections. ---- */
.navgrp[data-grp="acct"] .navmenu{min-width:min(460px,calc(100vw - 16px));max-height:calc(100vh - 90px);overflow:auto;}
.navgrp.open[data-grp="acct"] .navmenu{display:block;columns:2;column-gap:0.35rem;}
.acct-sec{display:flex;flex-direction:column;break-inside:avoid;}
.acct-sec.hidden{display:none!important;}
.acct-mh{font-size:0.64rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--acct-muted);padding:0.55rem 0.7rem 0.2rem;}
.navgrp[data-grp="acct"] .navmenu button{width:100%;}
.acct-note{display:inline-block;margin-left:auto;padding-left:0.45rem;white-space:nowrap;font-size:0.66rem;font-weight:700;color:var(--acct-muted);letter-spacing:0.02em;}
/* a short laptop screen: one column that scrolls, so columns never spill sideways */
@media (max-height:620px){ .navgrp.open[data-grp="acct"] .navmenu{columns:auto;} }
/* A sixth item in the top bar wraps it onto two rows at 1366 and 1440 px (measured 23 Sep 2026). Between the phone
   layout (900 px) and 1535 px the top-level buttons drop their icons and some padding. Only for people who see
   Accounting (body.acct-nav-on), so every other position keeps today's top bar exactly. */
@media (min-width:901px) and (max-width:1535px){
  body.acct-nav-on #navwrap .navbtn{padding:0.45rem 0.55rem;}
  body.acct-nav-on #navwrap .navbtn .nvi{display:none;}
}

/* ---- the page frame of every screen (#view-acct-* carries .acct-host; the rw-wrap inside carries .acct-view) ---- */
.acct-host{position:relative;min-width:0;}
.acct-host.acct-covered{min-height:220px;}
.acct-view{position:relative;}
.acct-view .acct-body{min-height:120px;}
.acct-view .rw-head{flex-wrap:wrap;gap:0.6rem;}
.acct-view .rw-head > div:first-child{min-width:0;}
.acct-sub{margin:0.2rem 0 0;color:var(--acct-muted);font-size:0.86rem;}
.acct-actions{display:flex;flex-wrap:wrap;gap:0.45rem;align-items:center;}
.acct-actions:empty{display:none;}
.acct-banners:empty{display:none;}
.acct-banners{display:flex;flex-direction:column;gap:0.45rem;margin:0 0 0.8rem;}
.acct-banner{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.8rem;padding:0.55rem 0.8rem;border-radius:10px;font-size:0.84rem;line-height:1.4;border:1px solid var(--acct-banner-info-bd);background:var(--acct-banner-info-bg);color:var(--acct-banner-info-fg);}
.acct-banner.info{border-color:var(--acct-banner-info-bd);background:var(--acct-banner-info-bg);color:var(--acct-banner-info-fg);}
.acct-banner.warn{border-color:var(--acct-banner-warn-bd);background:var(--acct-banner-warn-bg);color:var(--acct-banner-warn-fg);}
.acct-banner.thin{padding:0.35rem 0.75rem;font-size:0.78rem;}
.acct-banner .acct-banner-t{flex:1 1 220px;min-width:0;}
.acct-banner .btn{flex:0 0 auto;}
.acct-banner b{font-weight:800;}
.acct-empty,.acct-placeholder{padding:1.6rem 1rem;text-align:center;color:var(--acct-muted);font-size:0.9rem;line-height:1.5;border:1px dashed var(--acct-border);border-radius:12px;background:var(--acct-surface);}
.acct-placeholder b{display:block;color:var(--acct-text);font-size:0.98rem;margin-bottom:0.2rem;}
.acct-locked{display:flex;gap:0.45rem;align-items:center;justify-content:center;flex-wrap:wrap;}
.acct-neg{color:var(--acct-neg);} .acct-pos{color:var(--acct-pos);}
.acct-link{color:var(--acct-link);text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;font:inherit;}

/* ---- cards, grids, label and value rows ---- */
.acct-card{background:var(--acct-surface);border:1px solid var(--acct-border);border-radius:14px;padding:0.9rem 1rem;color:var(--acct-text);min-width:0;}
.acct-card h3{margin:0 0 0.35rem;font-size:0.95rem;}
.acct-card .acct-big{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;margin:0.15rem 0;}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px;}
.brick-body .acct-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));}
.acct-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.3rem 0.8rem;font-size:0.86rem;color:var(--acct-text);}
.acct-kv > .k{color:var(--acct-muted);min-width:0;}
.acct-kv > .v{text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:break-word;}
/* 390 px phones: a long value (an account name, a reference) no longer pushes the card sideways; each pair stacks */
@media (max-width:420px){ .acct-kv{grid-template-columns:minmax(0,1fr);gap:0 0.8rem;} .acct-kv > .v{text-align:left;margin-bottom:0.35rem;} }

/* ---- tabs (reuse .segb) and the entity switcher ---- */
.acct-tabs{display:flex;flex-wrap:wrap;gap:0.35rem;margin:0 0 0.8rem;}
.acct-tabs .segb{flex:0 0 auto;}
.acct-entity{margin-bottom:0.8rem;}

/* ---- status pills: one colour per status, always with its text. html:root lifts them above theme.css
   ":root[data-theme=dark] .muted" (E51: a generic rule must never swallow a pill) ---- */
.acct-pill{display:inline-block;padding:0.12rem 0.55rem;border-radius:999px;font-size:0.72rem;font-weight:700;line-height:1.5;white-space:nowrap;background:var(--acct-pill-muted-bg);color:var(--acct-pill-muted-fg);}
/* the one small chip (tags such as Starting balance, Logbook, Draft beside a name): A.pill(status,kind,{sm:true}) or
   class "acct-pill sm". Modules use it instead of their own badge and chip classes. */
.acct-pill.sm{padding:0.04rem 0.45rem;font-size:0.68rem;line-height:1.45;vertical-align:0.05em;}
html:root .acct-pill.ok{background:var(--acct-pill-ok-bg);color:var(--acct-pill-ok-fg);}
html:root .acct-pill.warn{background:var(--acct-pill-warn-bg);color:var(--acct-pill-warn-fg);}
html:root .acct-pill.bad{background:var(--acct-pill-bad-bg);color:var(--acct-pill-bad-fg);}
html:root .acct-pill.info{background:var(--acct-pill-info-bg);color:var(--acct-pill-info-fg);}
html:root .acct-pill.muted{background:var(--acct-pill-muted-bg);color:var(--acct-pill-muted-fg);}

/* ---- tables: the sticky header sticks inside the card, which has its own height ---- */
.acct-scroll{overflow:auto;max-height:min(70vh,720px);border:1px solid var(--acct-border);border-radius:12px;background:var(--acct-surface);max-width:100%;}
.brick-body .acct-scroll{max-height:none;}
.acct-tbl{width:100%;border-collapse:collapse;font-size:0.85rem;color:var(--acct-text);}
.acct-tbl th{position:sticky;top:0;z-index:1;background:var(--acct-surface);text-align:left;padding:0.5rem 0.75rem;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--acct-muted);border-bottom:2px solid var(--acct-border);white-space:nowrap;}
.brick-body .acct-tbl th{top:0;}
.acct-tbl th button.acct-sort{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;}
.acct-tbl th button.acct-sort:focus-visible{outline:2px solid var(--acct-focus);outline-offset:2px;}
/* break-word (not anywhere): a long word still wraps when it must, but the column is never squeezed below its
   longest word, so "Change" and "Nguyen" stay whole (UI review 24 Sep 2026) */
.acct-tbl td{padding:0.5rem 0.75rem;border-bottom:1px solid var(--acct-rule);vertical-align:top;overflow-wrap:break-word;}
.acct-tbl td:first-child{min-width:6rem;}
.acct-tbl .btn,.acct-tbl .acct-pill{white-space:nowrap;}
.acct-tbl .num,.acct-tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.acct-tbl tr.total td,.acct-tbl tfoot td{font-weight:800;border-top:2px solid var(--acct-border);border-bottom:0;}
.acct-tbl tbody tr.acct-click{cursor:pointer;}
.acct-tbl tbody tr.acct-click:hover{background:var(--acct-hover);}
.acct-tbl tbody tr.acct-click:focus-visible{outline:2px solid var(--acct-focus);outline-offset:-2px;}
.acct-tbl .acct-empty-row td{text-align:center;color:var(--acct-muted);padding:1.4rem 0.75rem;}
.acct-more{display:flex;justify-content:center;margin-top:0.6rem;}
@media (max-width:640px){ .acct-narrow-hide{display:none;} }
@container brick (max-width:640px){ .acct-narrow-hide{display:none;} }
/* SPEC 9.5: on a phone (or a brick under 640 px) an A.table() table turns each row into a card: the first column is
   the title, the status pill sits top right, every other cell is a "label ... value" line, so money and status are
   never cut off at the edge. A.table() marks the table .acct-cards and each cell with data-label; a module can keep
   the scrolling table with {cards:false}. Tables a module writes itself are not touched. */
@media (max-width:640px){
  .acct-scroll.acct-scroll-cards{max-height:none;overflow:visible;}
  .acct-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .acct-cards,.acct-cards tbody,.acct-cards tfoot,.acct-cards caption{display:block;}
  .acct-cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.25rem 0.75rem;padding:0.65rem 0.8rem;border-bottom:1px solid var(--acct-rule);}
  .acct-cards tbody tr:last-child{border-bottom:0;}
  .acct-cards tfoot tr{border-top:2px solid var(--acct-border);border-bottom:0;}
  table.acct-cards td,table.acct-cards tr.total td,table.acct-cards tfoot td{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;grid-column:1 / -1;padding:0;border:0;min-width:0;text-align:right;}
  .acct-cards td::before{content:attr(data-label);flex:0 0 auto;max-width:48%;color:var(--acct-muted);font-size:0.74rem;font-weight:700;text-align:left;}
  .acct-cards td > .acct-cv{min-width:0;overflow-wrap:break-word;}
  .acct-cards td.acct-c-title{grid-column:1;grid-row:1;display:block;text-align:left;font-weight:700;}
  .acct-cards td.acct-c-pin{grid-column:2;grid-row:1;display:block;text-align:right;}
  .acct-cards td.acct-c-title::before,.acct-cards td.acct-c-pin::before,.acct-cards td[data-label=""]::before{content:none;}
  .acct-cards td.acct-c-empty,.acct-cards td.acct-narrow-hide{display:none;}
  .acct-cards .acct-empty-row{display:block;}
  .acct-cards .acct-empty-row td{display:block;text-align:center;}
  .acct-cards .acct-empty-row td::before{content:none;}
}
@container brick (max-width:640px){
  .acct-scroll.acct-scroll-cards{max-height:none;overflow:visible;}
  .acct-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .acct-cards,.acct-cards tbody,.acct-cards tfoot,.acct-cards caption{display:block;}
  .acct-cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.25rem 0.75rem;padding:0.6rem 0.7rem;border-bottom:1px solid var(--acct-rule);}
  .acct-cards tbody tr:last-child{border-bottom:0;}
  .acct-cards tfoot tr{border-top:2px solid var(--acct-border);border-bottom:0;}
  table.acct-cards td,table.acct-cards tr.total td,table.acct-cards tfoot td{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;grid-column:1 / -1;padding:0;border:0;min-width:0;text-align:right;}
  .acct-cards td::before{content:attr(data-label);flex:0 0 auto;max-width:48%;color:var(--acct-muted);font-size:0.74rem;font-weight:700;text-align:left;}
  .acct-cards td > .acct-cv{min-width:0;overflow-wrap:break-word;}
  .acct-cards td.acct-c-title{grid-column:1;grid-row:1;display:block;text-align:left;font-weight:700;}
  .acct-cards td.acct-c-pin{grid-column:2;grid-row:1;display:block;text-align:right;}
  .acct-cards td.acct-c-title::before,.acct-cards td.acct-c-pin::before,.acct-cards td[data-label=""]::before{content:none;}
  .acct-cards td.acct-c-empty,.acct-cards td.acct-narrow-hide{display:none;}
  .acct-cards .acct-empty-row{display:block;}
  .acct-cards .acct-empty-row td{display:block;text-align:center;}
  .acct-cards .acct-empty-row td::before{content:none;}
}

/* ---- forms and pickers ---- */
.acct-field{display:flex;flex-direction:column;gap:0.25rem;min-width:0;}
.acct-field > label,.acct-lbl{font-size:0.74rem;font-weight:700;color:var(--acct-muted);}
.acct-select,.acct-input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;}
.acct-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:0.7rem;}
.acct-contact{position:relative;}
.acct-contact-list{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--acct-surface);border:1px solid var(--acct-border);border-radius:10px;box-shadow:var(--acct-shadow);max-height:260px;overflow:auto;margin-top:2px;}
.acct-contact-list button{display:block;width:100%;text-align:left;background:none;border:0;padding:0.5rem 0.7rem;color:var(--acct-text);font:inherit;cursor:pointer;}
.acct-contact-list button:hover,.acct-contact-list button:focus-visible{background:var(--acct-hover);}
.acct-contact-list .acct-sub2{display:block;font-size:0.74rem;color:var(--acct-muted);}

/* ---- the document lines grid (bills, spend, receive, credit notes) ---- */
.acct-lines{display:flex;flex-direction:column;gap:0.5rem;}
.acct-lines-top{display:flex;flex-wrap:wrap;gap:0.5rem 0.9rem;align-items:center;justify-content:space-between;}
.acct-lines-head,.acct-line{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,0.6fr) minmax(0,0.9fr) minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,0.9fr) auto;gap:0.4rem;align-items:start;}
.acct-lines.with-bu .acct-lines-head,.acct-lines.with-bu .acct-line{grid-template-columns:minmax(0,2.2fr) minmax(0,0.6fr) minmax(0,0.9fr) minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,0.6fr) minmax(0,0.9fr) auto;}
.acct-lines-head{font-size:0.68rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--acct-muted);padding:0 calc(0.45rem + 1px);column-gap:0.4rem;}
.acct-lines-head .num,.acct-line .num{text-align:right;}
.acct-line{background:var(--acct-inset);border:1px solid var(--acct-rule);border-radius:10px;padding:0.45rem;}
.acct-line input,.acct-line select{width:100%;min-width:0;box-sizing:border-box;}
.acct-line .acct-amt{align-self:center;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--acct-text);}
.acct-line .acct-line-tools{display:flex;gap:0.2rem;align-self:center;}
.acct-line .acct-line-tools button{min-width:30px;}
.acct-line .acct-cell-lbl{display:none;}
.acct-lines-totals{display:grid;grid-template-columns:auto auto;gap:0.2rem 1rem;justify-content:end;font-variant-numeric:tabular-nums;color:var(--acct-text);font-size:0.9rem;}
.acct-lines-totals .t{font-weight:800;}
.acct-lines-totals > span:nth-child(odd){color:var(--acct-muted);}
.acct-lines-totals > span:nth-child(even){text-align:right;}
@media (max-width:640px){
  .acct-lines-head{display:none;}
  .acct-lines .acct-line,.acct-lines.with-bu .acct-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .acct-line > .c-desc,.acct-line > .c-acct,.acct-line > .c-tax{grid-column:1 / -1;}
  .acct-line .acct-cell-lbl{display:block;font-size:0.68rem;font-weight:700;color:var(--acct-muted);margin-bottom:0.1rem;}
  .acct-line .acct-amt{text-align:left;}
}
@container brick (max-width:640px){
  .acct-lines-head{display:none;}
  .acct-lines .acct-line,.acct-lines.with-bu .acct-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .acct-line > .c-desc,.acct-line > .c-acct,.acct-line > .c-tax{grid-column:1 / -1;}
  .acct-line .acct-cell-lbl{display:block;font-size:0.68rem;font-weight:700;color:var(--acct-muted);margin-bottom:0.1rem;}
  .acct-line .acct-amt{text-align:left;}
}

/* ---- busy buttons (never the disabled attribute: offline-ui re-enables [data-needs-online]) ---- */
.acct-busy{opacity:0.7;cursor:progress!important;}
.acct-busy .acct-spin{display:inline-block;width:0.8em;height:0.8em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acct-spin 0.8s linear infinite;vertical-align:-0.1em;margin-right:0.35em;}
@keyframes acct-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .acct-busy .acct-spin{animation:none;} }

/* ---- small bar chart ---- */
.acct-bars{width:100%;min-width:0;}
.acct-bars svg{display:block;width:100%;height:auto;overflow:visible;}
.acct-bars .b{fill:var(--acct-bar);}
.acct-bars .b2{fill:var(--acct-bar-2);}
.acct-bars .bn{fill:var(--acct-bar-neg);}
.acct-bars .ax{stroke:var(--acct-border);stroke-width:1;}
.acct-bars text{fill:var(--acct-muted);font-size:10px;font-family:inherit;}
.acct-bars .acct-legend{display:flex;flex-wrap:wrap;gap:0.3rem 0.8rem;font-size:0.74rem;color:var(--acct-muted);margin-top:0.3rem;}
.acct-bars .acct-key{display:inline-block;width:0.7em;height:0.7em;border-radius:2px;margin-right:0.3em;vertical-align:-0.05em;}
.acct-bars .acct-key.b{background:var(--acct-bar);} .acct-bars .acct-key.b2{background:var(--acct-bar-2);}

/* ---- confirm and the code prompt: their own layer above the page's modal (z-index 120) ---- */
.acct-ovl{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem;overflow:auto;background:var(--acct-scrim);}
.acct-ovl-card{background:var(--acct-surface);color:var(--acct-text);border-radius:18px;max-width:440px;width:100%;box-shadow:var(--acct-shadow);border:1px solid var(--acct-border);}
/* ---- pop-ups built by modules inside the page's modal() card ---- */
.acct-mdl{padding:1.1rem 1.2rem 1.2rem;color:var(--acct-text);}
.acct-mdl h2{margin:0 0 0.5rem;font-size:1.08rem;}
.acct-mdl p{margin:0 0 0.7rem;line-height:1.5;}
.acct-mdl .acct-mdl-row{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:flex-end;margin-top:0.9rem;}
.acct-mdl .acct-code{letter-spacing:0.3em;font-size:1.2rem;text-align:center;width:100%;box-sizing:border-box;}
.acct-mdl .acct-err{color:var(--acct-neg);font-size:0.84rem;min-height:1.1em;margin:0.3rem 0 0;}
.acct-danger{background:var(--acct-pill-bad-fg)!important;color:var(--acct-surface)!important;border-color:transparent!important;}

/* ---- payroll bricks start behind a privacy cover ---- */
.acct-cover{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;padding:1rem;text-align:center;background:var(--acct-cover-bg);color:var(--acct-text);border-radius:inherit;}
.acct-cover p{margin:0;font-weight:700;}
.acct-cover .acct-cover-sub{font-weight:400;font-size:0.82rem;color:var(--acct-muted);max-width:28rem;}
.acct-covered > .rw-wrap{visibility:hidden;}

/* ---- phone (390 px) and narrow bricks (260 px) ---- */
@media (max-width:640px){
  .acct-view .rw-head{flex-direction:column;align-items:stretch;}
  .acct-actions{justify-content:flex-start;}
  .acct-card{padding:0.8rem;}
  .acct-mdl{padding:1rem;}
}
@container brick (max-width:640px){
  .acct-view .rw-head{flex-direction:column;align-items:stretch;}
  .acct-actions{justify-content:flex-start;}
  .acct-card{padding:0.7rem;}
  .acct-tbl th,.acct-tbl td{padding:0.4rem 0.5rem;}
}
@container brick (max-width:360px){
  .acct-banner{font-size:0.76rem;}
  .acct-card .acct-big{font-size:1.25rem;}
}
.acct-view,.acct-view *{box-sizing:border-box;}
.acct-view .acct-body{min-width:0;max-width:100%;}

/* ---- UI review fixes, 24 Sep 2026 ---- */
/* a sub-label under a menu row, so look-alike pairs (Invoices / Invoices in the books, Bills and suppliers / Bills
   and costs, Reports / Reports and Xero export) read differently in the dropdown and on the phone sheet */
.navgrp[data-grp="acct"] .navmenu button,#mnav .acct-mnav button{flex-wrap:wrap;row-gap:0.05rem;}
.navgrp[data-grp="acct"] .navmenu .acct-note,#mnav .acct-mnav .acct-note{flex-basis:100%;display:block;margin:0;padding:0 0 0 calc(16px + 0.5rem);white-space:normal;font-size:0.68rem;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--acct-muted);}
#mnav .acct-mnav .acct-note{padding-left:calc(17px + 0.55rem);}
#mnav .acct-mnav-sh{margin:0.7rem 0 0.35rem;padding-left:2px;font-size:0.76rem;font-weight:700;color:var(--acct-muted);}
#mnav .acct-mnav-sec:first-child .acct-mnav-sh{margin-top:0.1rem;}
#mnav .acct-mnav-sec.hidden,#mnav .acct-mnav.hidden{display:none;}
/* a disabled button looks disabled (the page only dims .ck-sec-acts); .acct-busy never uses the attribute */
[id^="view-acct-"] .btn:disabled,.acct-mdl .btn:disabled,.acct-ovl .btn:disabled,#crm-modal:has([class*="acct-"]) .btn:disabled{opacity:0.45;cursor:not-allowed;box-shadow:none;}
/* light mode: ghost buttons, unselected tabs and the help line pass 4.5:1 (dark mode already did) */
:root:not([data-theme="dark"]) [id^="view-acct-"] .btn-ghost,
:root:not([data-theme="dark"]) [id^="view-acct-"] .segb:not(.active),
:root:not([data-theme="dark"]) .acct-ovl .btn-ghost,
:root:not([data-theme="dark"]) #crm-modal:has([class*="acct-"]) .btn-ghost,
:root:not([data-theme="dark"]) #crm-modal:has([class*="acct-"]) .segb:not(.active){color:var(--acct-ghost-fg);}
:root:not([data-theme="dark"]) .acct-view .rw-head p.acct-sub{color:var(--acct-muted);}
/* the floating light switch never covers a pop-up's buttons, and the last row of a screen clears it */
body:has(#crm-modal) #tc-theme-toggle,body:has(.acct-ovl) #tc-theme-toggle{display:none!important;}
.acct-view .acct-body{padding-bottom:72px;}
.brick-body .acct-view .acct-body{padding-bottom:0;}
/* three kinds of row, three looks: the business switcher is a labelled outlined group, section tabs keep .segb,
   filters (role="group") are light chips */
.acct-tabs.acct-entity{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0.25rem;max-width:100%;padding:0.2rem 0.25rem 0.2rem 0.7rem;border:1px solid var(--acct-border);border-radius:12px;background:var(--acct-surface);}
.acct-tabs.acct-entity::before{content:"Business";font-size:0.66rem;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:var(--acct-muted);margin-right:0.3rem;}
.acct-tabs.acct-entity .segb{padding:0.4rem 0.7rem;font-size:0.8rem;}
.acct-tabs[role="group"]:not(.acct-entity) .segb{border:1px solid var(--acct-border);border-radius:999px;padding:0.3rem 0.75rem;font-size:0.78rem;font-weight:600;background:transparent;}
html:root .acct-tabs[role="group"]:not(.acct-entity) .segb.active{background:var(--acct-pill-info-bg)!important;color:var(--acct-pill-info-fg)!important;border-color:var(--acct-pill-info-fg);font-weight:700;}

/* phones: every Accounting button is a full-size touch target (calendar.css does the same for its own) */
@media (max-width:640px){ .acct-view .btn, .acct-mdl .btn, .acct-ovl .btn, .acct-view .btn-sm { min-height:44px; } }