/*! SilverLion ERP - additions on top of the house look (erp.css + erp-5a.css, unchanged). Tokens only, no new colours. */

/* ---- shell */
.side .grp>a.grpbtn,.side .grp summary.grpbtn{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:var(--r);color:var(--side-text);cursor:pointer;font-weight:500;list-style:none;text-decoration:none}
.side .grp summary.grpbtn::-webkit-details-marker{display:none}
.side .grp>a.grpbtn:hover,.side .grp summary.grpbtn:hover{background:var(--side-hover);text-decoration:none}
.side .grp>a.grpbtn.on{background:var(--side-active);color:var(--gold-lt);font-weight:600}
.side .grp details[open]>summary{color:#FFFFFF}
.side .grp summary .chev{margin-inline-start:auto;width:14px;height:14px;color:var(--side-muted)}
.side .foot{padding:12px 20px}
.bysl{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--f-ui);letter-spacing:.06em;color:var(--side-muted);text-decoration:none}
.bysl img{width:20px;height:20px;display:block}
.erp-mark{font:400 17px/1 var(--f-display);color:var(--gold-lt);letter-spacing:.3px;white-space:nowrap}
.erp-mark b{font-weight:400;color:var(--gold)}
.mtop .erp-mark{font-size:16px}
.top details{position:relative}
.top summary{list-style:none;cursor:pointer}.top summary::-webkit-details-marker{display:none}
.top .pop.menu{width:260px;padding:6px 0}
.top .pop.menu a.on{font-weight:600}
.top .pop.menu form button{all:unset;display:block;width:100%;box-sizing:border-box;padding:9px 14px;font-size:13.5px;cursor:pointer;color:var(--text)}
.top .pop.menu form button:hover{background:var(--sunken)}
.top .pop.menu form button:focus-visible,.side a:focus-visible,.side summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.coswitch-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);font:600 13px var(--f-ui);color:var(--text);white-space:nowrap}
.coswitch-btn svg.i{width:15px;height:15px;color:var(--text-2)}

/* ---- small layout helpers */
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.row-wrap{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.inline{display:inline}
.mt{margin-top:var(--s4)} .mb{margin-bottom:var(--s4)}
.money,td.num,th.num{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.tbl tr.total td{font-weight:700;border-top:1px solid var(--line-strong)}
.tbl tr.sub td{color:var(--text-2)}
.tbl td.wrap,.wrap{white-space:normal}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel+.panel,.kpis+.panel,.panel+.kpis{margin-top:var(--s4)}
.kpis>.panel{margin-top:0}
a.panel.kpi{color:inherit;text-decoration:none}a.panel.kpi:hover{border-color:var(--line-strong)}
.muted{color:var(--text-3)}
.alert{margin-bottom:var(--s3)}
.lines td{height:auto;padding:6px 8px}
.lines input,.lines select{font:400 13.5px var(--f-ui);height:34px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);width:100%;min-width:90px}
.lines input.num{text-align:end}
.empty b{display:block;font:600 15px var(--f-ui);color:var(--text);margin-bottom:6px}
.tblempty{padding:32px 16px;text-align:center;color:var(--text-2)}
.searchbar{display:flex;gap:var(--s2);align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.searchbar input{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 14px var(--f-ui)}
.pagerbar{display:flex;gap:4px;align-items:center;padding:10px 12px;font-size:12.5px;color:var(--text-2)}
.pagerbar .sp{flex:1}
.needs{list-style:none;margin:0;padding:0}
.needs li{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-top:1px solid var(--line-soft);font-size:13.5px}
.needs li:first-child{border-top:0}
.needs li span{flex:1;min-width:0;overflow-wrap:anywhere}
.needs li .btn{flex:none}
.asat{font-size:12px;color:var(--text-3)}
.menulist{list-style:none;margin:0;padding:0}
.menulist li a,.menulist li button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 16px;border-top:1px solid var(--line-soft);font:500 15px var(--f-ui);color:var(--text);cursor:pointer}
.menulist li a img{width:24px;height:24px}
.menulist h4{margin:16px 16px 4px;font:600 12px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.bulkbar{display:flex;gap:var(--s2);align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.chkcol{width:36px}
.chkcol input{width:20px;height:20px}
/* press feedback: buttons answer the finger */
.btn{transition:transform .08s ease-out,background-color .12s ease-out}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* ---- sign-in pages */
.authbody{min-height:100vh;display:grid;place-items:center;background:var(--ink);padding:max(24px,var(--sat)) 16px max(24px,var(--sab))}
.authwrap{width:100%;max-width:400px}
.authbrand{text-align:center;margin-bottom:var(--s5)}
.authbrand .erp-mark{font-size:26px}
.authbrand small{display:block;margin-top:8px;color:var(--side-muted);font:500 12px var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.auth-card{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.auth-card h1{font:400 23px var(--f-display);margin:0}
.auth-card .btn{width:100%;height:44px}
.or-line{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:12.5px}
.or-line::before,.or-line::after{content:"";flex:1;border-top:1px solid var(--line)}
.flash{padding:10px 12px;border-radius:var(--r);font-size:13.5px}
.flash-bad{background:var(--bad-bg);color:var(--bad)}

/* ---- printable tax invoice / credit note (A4) */
.a4doc{background:var(--canvas)}
.a4bar{max-width:800px;margin:16px auto 0;display:flex;gap:8px;padding:0 16px}
.a4{max-width:800px;margin:16px auto 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.a4head{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.a4head h1{font:400 26px var(--f-display);margin:0 0 4px}
.a4co{text-align:end;font-size:13px}
.a4to{display:flex;justify-content:space-between;gap:24px;margin-bottom:16px;font-size:13.5px}
.a4to label{display:block;font:600 12px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-top:6px}
.a4lines td{white-space:normal}
.a4foot{margin-top:24px;font-size:12px;color:var(--text-3)}
@media print{.a4doc{background:var(--surface)}.a4bar{display:none}.a4{border:0;margin:0;padding:0;max-width:none}}

/* ---- phones */
@media (max-width:760px){
  body{font-size:16px}
  .phead .acts.keep{display:flex;width:100%;margin-inline-start:0;margin-top:4px}
  .phead .acts.keep>*{flex:1 1 auto}
  .phead .acts.keep .btn{height:44px;width:100%}
  .btn.sm{min-height:44px;height:auto;padding:0 14px;font-size:14px}
  .filter{min-height:44px}
  .seg a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px}
  .av{width:36px;height:36px}.mtop .av{width:44px;height:44px}
  .needs li{padding:12px 16px;font-size:16px}
  .needs li .btn{height:44px}
  .lines input,.lines select{height:44px;font-size:16px}
  .searchbar input{height:44px;font-size:16px}
  /* wide tables become the house cards */
  .cardable .tblwrap{display:none}
  .cardable .mcards{display:flex;padding:12px}
  .mcard .row2{flex-wrap:wrap}
  .mcard a.mono,.mcard .who a{display:inline-block;padding:10px 0;margin:-10px 0}
  .tbl td,.tbl th{padding:0 8px}.tbl th:first-child,.tbl td:first-child{padding-inline-start:12px}
  .a4{margin:0;border-radius:0;padding:16px}.a4head,.a4to{flex-direction:column}.a4co{text-align:start}
  .bulkbar{flex-wrap:wrap}.bulkbar .btn{width:100%;height:44px}
  .mcard .row2 .btn{white-space:normal;height:auto;min-height:44px;max-width:100%;text-align:start;justify-content:flex-start;padding:8px 14px}
  .mcard .row2 form,.mcard .row2 select{max-width:100%;min-width:0}
  .mcard .row2 form.row-wrap{width:100%;flex-wrap:nowrap}.mcard .row2 form.row-wrap select,.mcard .row2 form.row-wrap input{flex:1;height:44px}
}

/* ---- critic round 2: type floor 12px, whole-card links, the tick on phone cards, 200% text */
.bnav a,.tbl th,.chip,.kpi label,.facts label{font-size:12px}
.side .brand small{font-size:12px}
.mcard{position:relative}
.mcard .who a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mcard .row2,.mcard .mtick{position:relative;z-index:1}
.mtick{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:44px;margin:-8px 0 0;font:500 14px var(--f-ui);color:var(--text-2);cursor:pointer}
.mtick input{width:24px;height:24px;margin:0}
.jtot{padding:10px 16px;font:500 14px var(--f-ui);color:var(--text-2);font-variant-numeric:tabular-nums;border-top:1px solid var(--line-soft)}
main p.muted{max-width:68ch}
.mtop .erp-mark{min-width:0;overflow:hidden;text-overflow:ellipsis}
.seg.full a{text-align:center}
@media (max-width:760px){
  .phead .sub,.alert{font-size:16px}
  .mcard .sub2{font-size:14px}
  .kpi .v{font-size:clamp(18px,6.5vw,22px);overflow-wrap:anywhere}
  .panel>header{flex-wrap:wrap}.panel>header .acts{flex-wrap:wrap}
  .a4bar .btn{height:44px;flex:1}
  .a4lines thead{display:none}
  .a4lines tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .a4lines td{display:block;height:auto;padding:0;border:0;text-align:start}
  .a4lines td.num{text-align:start}
  .a4lines td:nth-child(-n+2){grid-column:1/-1}
  .a4lines td[data-l]::before{content:attr(data-l) " ";color:var(--text-3)}
  .a4lines td:empty{display:none}
  .row-wrap select,.row-wrap input:not([type=checkbox]):not([type=file]){min-height:44px;font-size:16px}
}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;padding:5px 12px;border-radius:4px;font:500 13px var(--f-ui);color:var(--text-2);text-align:center}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
@media (max-width:760px){.seg button{min-height:44px;font-size:14px;flex:1;display:inline-flex;align-items:center;justify-content:center}}
@media (max-width:760px){.seg.full a{padding:0 6px;justify-content:center}}
/* entry lines (journals, documents) become stacked cards on a phone: one card per line, each box labelled */
@media (max-width:760px){
  .tbl.lines thead{display:none}
  .tbl.lines,.tbl.lines tbody{display:block}
  .tbl.lines tr{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .tbl.lines td{display:block;height:auto;padding:0;border:0;min-width:0}
  .tbl.lines td.wide{grid-column:1/-1}
  .tbl.lines td.chkcol{display:none}
  .tbl.lines td[data-l]::before{content:attr(data-l);display:block;font:600 13px var(--f-ui);color:var(--text);margin-bottom:4px}
  .tbl.lines input,.tbl.lines select{min-width:0}
  .panel>.tblwrap:has(.tbl.lines){overflow:visible}
}
/* critic round 3 */
.field input[type=checkbox],.field input[type=radio]{width:22px;height:22px;min-height:0;padding:0;flex:none;margin:0;accent-color:var(--ink)}
.field label.row-wrap{min-height:44px;font:500 14px var(--f-ui);flex-wrap:nowrap;align-items:center;gap:12px;cursor:pointer}
.field .help{font-size:13px}
.a4head p{font-size:14px}.a4co,.a4to{font-size:14px}
.searchbar select{height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 14px var(--f-ui);max-width:40%}
.searchbar{flex-wrap:wrap}
.seg.full button{flex:1}
.kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts .num-note{font-weight:400;color:var(--text-3)}
@media (max-width:760px){
  .seg.full{display:flex}.seg.full a{flex:1}
  .field input[type=checkbox]{height:24px;width:24px}
  .field .help{font-size:14px}
  .mcard .sub2,.jtot{font-size:15px}
  .searchbar select{height:44px;font-size:16px;max-width:100%;flex:1 1 100%}
  .seg.full button{white-space:normal;line-height:1.2;padding:4px 6px}
  .kpis.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl.lines tr.spare{display:none}
}
.tbl.lines td.nogl>*{visibility:hidden}
@media (max-width:760px){.tbl.lines td.nogl{display:none}}
.phead h1 .h1code{font:500 .78em var(--f-mono);letter-spacing:0;color:var(--text-2);margin-right:.25em}
.a4pay{margin-top:16px;font-size:15px}.a4pay .mono{font-size:15px}
@media (max-width:760px){.kpis.three>.kpi:last-child{grid-column:1/-1}}
/* critic round 4: reading text 16px on phones, print on the 4px grid */
.a4lines td,.a4lines th{padding:4px 8px}
.a4foot{font-size:14px}
.facts a{display:inline-block;padding:10px 0;margin:-10px 0}
details>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer}
@media (max-width:760px){
  .mcard .sub2,.jtot,.field .help,.field label.row-wrap,main p.muted,.panel .body p.muted,.a4to,.a4co,.a4head p,.a4pay,.a4foot,.tbl.a4lines td{font-size:16px}
  .tbl.lines td.ltot{grid-column:1/-1;text-align:end;font-weight:600}
  .row-wrap .btn,.panel .body form .btn{min-height:44px}
  .iname{display:block;font-size:14px;color:var(--text-2);margin-top:4px}
}
.iname{display:block;font-size:13px;color:var(--text-2);margin-top:2px}
.iname:empty{display:none}
.help.bad,[data-pinfo].bad{color:var(--bad)}
details.morefields{grid-column:1/-1}
details.morefields>summary{font:600 14px var(--f-ui);color:var(--text)}
details.morefields>.formgrid{margin-top:8px}
/* critic round 5 */
@media (max-width:760px){.mcard .who,.mcard .who a,.menulist .muted,.menulist li a span{font-size:16px}}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 6px 0 2px;transition:transform .12s ease-out}
details[open]>summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){details>summary::before{transition:none}}
/* critic round 6 */
@media (max-width:320px){.kpis,.kpis.three{grid-template-columns:1fr}.kpis.three>.kpi:last-child{grid-column:auto}}
.savebar.static{position:static!important;bottom:auto!important;box-shadow:none}
@media (max-width:760px){.savebar.static{margin:0!important}}
.countsheet td.box{width:120px;border-bottom:1px solid var(--line-strong)}
.cnt{width:100%;max-width:110px;height:36px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 14px var(--f-ui);text-align:end}
@media (max-width:760px){.cnt{max-width:none;height:44px;font-size:16px}}
details.capture{margin-top:6px}
details.capture>summary{min-height:36px;font:500 14px var(--f-ui);color:var(--text-2)}
details.capture .formgrid{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken)}
@media (max-width:760px){details.capture>summary{min-height:44px}}

/* fields that do not apply to the choice made stay out of the way */
[hidden]{display:none!important}
@media (max-width:760px){.field textarea,.field input:not([type=checkbox]):not([type=file]),.field select{font-size:16px}.field label{font-size:14px}}
/* a long settings form in named parts */
.panel .body+header{border-top:1px solid var(--line)}
/* an email waiting for approval, shown as the customer will see it */
.mailview{width:100%;height:560px;border:1px solid var(--line);border-radius:10px;background:#F5F3EE}
.mailtext{white-space:pre-wrap;font:13px/1.5 var(--f-mono,monospace);margin:8px 0 0}
.mt{margin-top:12px}
@media (max-width:760px){.mailview{height:480px}}
/* critic round 9 (27 Sept): print pages stay paper-white in dark mode, long addresses wrap, one chevron, big text fits */
.a4doc .a4{--text:#141414;--text-2:#5E594F;--text-3:#6F6A5F;--line:#E2DDD2;--line-strong:#CFC8BA;--surface:#FFFFFF;--sunken:#F8F6F1;background:#FFFFFF;color:#141414;border-color:#E2DDD2}
.a4doc .a4 label,.a4doc .a4foot{color:#6F6A5F}
@media print{.a4doc{background:#FFFFFF}}
.facts>div{min-width:0}.facts b{overflow-wrap:anywhere}
@media (max-width:760px){
  .facts.mailfacts>div.wide{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
  .a4lines td,.a4lines th{padding:0}.a4 .totals .grand{margin-inline:0}
  .phead .acts .btn,.savebar .btn,.a4bar .btn{white-space:normal;height:auto;min-height:44px}
}
.side summary::before,.top summary::before{content:none}
.alert.warn a:not(.btn){color:inherit;text-decoration:underline}
.alert .btn{margin-top:8px}
.facts b.big{font-size:23px;font-weight:600;line-height:1.2}
.a4big{display:block;font:600 22px var(--f-ui);margin-bottom:6px}
.facts span.num-note{display:block;font-size:13px;margin-top:2px}
/* critic round 10: phone section headings, branch rows in a card */
.mcards .mhead{margin:10px 2px 0;font:600 13px var(--f-ui);letter-spacing:.02em;color:var(--text-2)}
.mcards .mhead:first-child{margin-top:0}
.sub2 .brl{display:flex;justify-content:space-between;gap:12px}
.mshow{display:none}
summary .sumnote{font-weight:400}
@media (max-width:760px){.facts .mshow{display:block} summary .sumnote{display:block;margin-top:2px}}
/* a save bar line that must be read on the phone too ("Nothing is posted", what a refund is set against) */
@media (max-width:760px){.savebar:has(.msg.keep){flex-wrap:wrap}.savebar .msg.keep{display:block;flex-basis:100%;margin:0 0 4px;font-size:16px}}
/* a file picker is a real 48px button */
.field input[type=file]{height:auto;padding:0;border:0;background:none;font:14px var(--f-ui);color:var(--text-2)}
.field input[type=file]::file-selector-button{height:48px;padding:0 18px;margin-inline-end:12px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:600 14px var(--f-ui);cursor:pointer}
/* More: the page's less-used actions in one menu */
.amore{position:relative}
.amore>summary{list-style:none}
.amore>summary::-webkit-details-marker{display:none}
.amore .amenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.amore .amenu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r);color:var(--text);text-decoration:none;font:500 14px var(--f-ui)}
.amore .amenu a:hover,.amore .amenu a:focus-visible{background:var(--sunken)}
/* phones: with a More menu, the plain buttons share a row and the main action takes its own */
@media (max-width:760px){.phead .acts.keep:has(>.amore)>.btn:not(.primary),.phead .acts.keep:has(>.amore)>.amore{flex:1 1 40%;width:auto;min-width:0}.phead .acts.keep:has(>.amore)>.btn.primary{flex-basis:100%}}
/* picking slip and delivery note: a box to tick per line, lines to sign on */
.a4lines.pick td.pickbox{width:64px}
.a4lines.pick td.pickbox span{display:inline-block;width:18px;height:18px;border:1.5px solid var(--text-2);border-radius:3px;vertical-align:middle}
.a4lines.pick tr.part td{color:var(--text-2);font-size:13px}
.a4lines.pick tr.part td:nth-child(2){padding-left:22px}
.signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.signs label{display:block;font:600 12px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.signs span{display:block;height:40px;border-bottom:1px solid var(--text-2)}
@media (max-width:760px){.signs{grid-template-columns:1fr;gap:12px}}
/* stock below nil in a warehouse */
.negq{color:var(--bad);font-weight:600}
/* form grid spans erp.css does not have (kept out of erp.css, which stays unchanged) */
.c2{grid-column:span 2}.c5{grid-column:span 5}
@media (max-width:760px){.formgrid>.c2,.formgrid>.c5{grid-column:1/-1}}
/* More actions: a down chevron after the words, not the generic "go to" arrow before them */
.amore>summary::before{display:none}
.amore>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .12s ease-out}
.amore[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.amore>summary::after{transition:none}}
/* the account page: the balance leads, the ageing is the smaller row under it */
.facts.small b{font-size:14px;font-weight:600}
.facts.small label{font-size:12px}
/* large text (200%) on a small phone: button rows wrap one per line instead of clipping, and money may break */
.a4bar{flex-wrap:wrap}
@media (max-width:320px){.phead .acts.keep>*,.a4bar>*{flex:1 1 100%}}
.facts b,.facts b .money{white-space:normal;overflow-wrap:anywhere}
/* picking slip: the tick column is for the pen, so it shows in print only; code and description line up; on a phone the lines come first */
@media screen{.a4lines.pick .pickcol{display:none}}
@media print{.noprint{display:none!important}}
.a4lines.pick th,.a4lines.pick td{padding-left:0;padding-right:12px}
@media screen and (max-width:760px){.a4.pickdoc{display:flex;flex-direction:column}.a4.pickdoc>.tblwrap{order:-1;margin-bottom:16px}.a4.pickdoc>.alert{order:-2}}
/* a statement (cash flow) stays a two-column table on the phone: label and amount rows */
.tbl.stmt{width:100%}
.tbl.stmt td{white-space:normal}
@media (max-width:760px){.tbl.stmt td,.tbl.stmt th{padding:10px 8px;font-size:16px}.tbl.stmt td.num{white-space:nowrap}}
.facts .chip{white-space:normal;max-width:100%;height:auto;min-height:24px;line-height:1.3;padding-top:3px;padding-bottom:3px}
/* a chip in a list row keeps its own width (the Clear chips stretched into 550px bars) */
.needs li .chip{flex:none}
/* 200% text on a small phone: a button inside an alert, and money in a card, may wrap instead of running off */
.alert .btn{white-space:normal;max-width:100%;height:auto;min-height:36px}
.mcard .amt .money{white-space:normal;overflow-wrap:anywhere}
/* find anything: the box in the desk top bar (the phone has a search button in its top bar, and Find in More) */
.tfind{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text-3);width:min(360px,38vw)}
.tfind input{all:unset;flex:1;min-width:0;height:100%;font:400 14px var(--f-ui);color:var(--text)}
.tfind input::placeholder{color:var(--text-3)}
.tfind:focus-within{border-color:var(--line-strong);outline:2px solid var(--gold);outline-offset:1px}
.findbar{padding:0;border:0;margin:0 0 var(--s4)}
@media (max-width:760px){.tfind{display:none}.findbar .btn{height:44px}}
/* source papers on a document or journal */
.attlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.attlist li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.attname{display:inline-flex;align-items:center;gap:6px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.attlist li>.muted{font-size:13px}
.attrm{margin-left:auto}
.attrm[open]{flex-basis:100%;margin-left:0}
.attrm summary{list-style:none;cursor:pointer}
.attrm summary::-webkit-details-marker{display:none}
.attrm form{margin-top:8px}
.attrm input[type=text]{flex:1;min-width:0}
.attadd input[type=file]{min-width:0;max-width:100%;font:400 14px var(--f-ui)}
@media (max-width:760px){.attname{min-height:44px}.attrm summary{min-height:44px}.attlist li>.muted{font-size:12px}.attadd input[type=file]{font-size:16px}}
.papers{display:inline-flex;vertical-align:-2px;color:var(--text-3)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* notes on an account: the newest under the balance, the log in its own panel */
.lastnote{margin:10px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.noteline .chip{vertical-align:1px}
.notelist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.notelist li{border-top:1px solid var(--line);padding-top:10px;min-width:0}
.notelist li:first-child{border-top:0;padding-top:0}
.notelist p{margin:0 0 4px;white-space:normal;overflow-wrap:anywhere}
.notelist .muted{font-size:13px}
.notefrm textarea{width:100%;min-height:64px;resize:vertical;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 14px/1.45 var(--f-ui)}
.notefrm .row-wrap{align-items:flex-end;margin-top:8px}
@media (max-width:760px){.notefrm textarea,.notefrm input[type=date]{font-size:16px}.notefrm .btn{min-height:44px}.lastnote,.notelist .muted{font-size:14px}}
/* the month-end checklist: one step per row, its state first, the way to fix it last */
.steplist{list-style:none;margin:0;padding:0}
.steplist .step{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);min-width:0}
.steplist .step:first-child{border-top:0}
.steplist .step>div{flex:1;min-width:0;display:grid;gap:2px}
.steplist .step>div .muted{font-size:13px;overflow-wrap:anywhere}
.steplist .step>.i{flex:none}
.steplist .i.ok{color:var(--ok)} .steplist .i.bad{color:var(--bad)} .steplist .i.muted{color:var(--text-3)}
.steplist .step>.btn{flex:none}
@media (max-width:760px){.steplist .step{flex-wrap:wrap;padding:12px}.steplist .step>div .muted{font-size:14px}.steplist .step>.btn{min-height:44px;margin-left:30px}}
/* one-tap attach (critic r13): a house button over the file box; choosing the file sends it */
.attadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.attpick{position:relative;overflow:hidden;cursor:pointer}
.attpick .attfile{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.attpick:focus-within{outline:2px solid var(--gold);outline-offset:1px}
.attpick.busy{opacity:.7;pointer-events:none}
.attadd.js .attsend{display:none}
.attthumb{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none;background:var(--sunken)}
.attlist li.new{box-shadow:inset 3px 0 0 var(--gold);padding-left:10px}
@media (max-width:760px){.attadd .attpick{min-height:44px;flex:1 1 100%;justify-content:center}.attadd .attpick.sm{flex:none;min-height:44px}}
/* one way to search (critic r13): the Find button as tall as its box, the house focus ring, jump links, the VAT note's button */
.searchbar .btn{height:36px}
.searchbar input:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--line-strong)}
.findjump{margin:0 0 var(--s3);flex-wrap:wrap}
.alert.vatnote .btn{flex:none;white-space:nowrap}
.vatlead .facts .big{font-size:28px}
@media (max-width:760px){.searchbar .btn{height:44px}.alert.vatnote{flex-wrap:wrap}.alert.vatnote .btn{flex:1 1 100%;min-height:44px;justify-content:center}}
/* critic r14: notes wrap in lists and get their own line on a phone card */
td .noteline,.tbl td.wide{white-space:normal}
td .noteline{display:block;max-width:60ch;overflow-wrap:anywhere}
.mcard .mwide{grid-column:1/-1;font-size:14px;color:var(--text-2);overflow-wrap:anywhere}
.mcard .mwide .noteline{display:block}
.mcard .chip{white-space:normal;max-width:100%}
/* the newest note under the balance: inside the panel's own padding, a readable width */
.lastnote{margin:0;padding:0 16px 14px;max-width:70ch}
.lastnote .btn{vertical-align:middle;margin-inline-start:4px}
/* the note form: the day box, its day buttons and the send button one height */
.notefrm .nfu input[type=date]{height:36px}
.notefrm .nfu .btn{height:36px}
.notefrm .nprom{font-size:14px;align-items:center;gap:8px}
.empty.left{text-align:left;align-items:flex-start}
.steplist .step.look b{font-weight:600}
.field input::placeholder,.field textarea::placeholder,.searchbar input::placeholder,.tfind input::placeholder{color:var(--text-3);opacity:1}
@media (max-width:760px){
  .steplist .step>div .muted,.lastnote,.mcard .mwide,.notefrm .nprom{font-size:16px}
  .notefrm .nfu input[type=date],.notefrm .nfu .btn,.notefrm .btn{height:44px;min-height:44px}
  .alert .btn{min-height:44px}
  .facts b a{display:inline-flex;align-items:center;min-height:44px}
}
/* critic r15: a card stacks at 200% text; checklist amounts stay whole and buttons go under the words on phones */
@media (max-width:300px){.mcard{grid-template-columns:minmax(0,1fr)}.mcard .amt{text-align:start}}
.steplist .money{white-space:nowrap}
.mcard .chip,.lastnote .chip,.tbl td .chip{height:auto;min-height:22px;white-space:normal}
.facts:has(>div:only-child){grid-template-columns:1fr}
/* an empty state with its next step, left: the sentence at its own width */
.empty.left p{margin:0 0 16px;max-width:60ch}
/* the notes form on a desk: the day box its own width with its buttons beside it; text at a readable width */
.notefrm .nfu input[type=date]{width:auto;flex:none}
.notefrm textarea,.notelist p{max-width:70ch}
/* a list in settings: every line, references lined up */
.setlist{font-family:var(--f-mono);max-width:80ch;line-height:1.5}
@media (max-width:760px){.steplist .step>div{flex-basis:calc(100% - 30px)}.empty.left p{font-size:16px}.empty.left .btn{min-height:44px}}
/* since Sage stopped: a held row is marked at its edge (the phone card says Held in its chip) */
.tbl tr.row-held td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* Helpers (29 Sept 2026): one tab per helper, the reason leads each row, Accept / Reject (with an optional why) at the end */
.htabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.htabs::-webkit-scrollbar{display:none}
.htabs .filter{flex:none}
.hauto{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.hreason{max-width:72ch;overflow-wrap:anywhere;line-height:1.45}
.hrej{display:inline-flex;align-items:center;gap:6px}
.hrej input{width:170px;height:30px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 13px var(--f-ui)}
.hfind{margin-left:auto}
.hfind select,.hfind input[type=search]{height:30px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 13px var(--f-ui)}
.hbulk{display:flex;justify-content:flex-end;padding-top:0}
@media (max-width:760px){.hrej{display:flex;width:100%}.hrej input{flex:1;min-width:0;width:auto;height:44px;font-size:16px}.hrej .btn{min-height:44px}.hfind{margin-left:0;width:100%}.hfind input[type=search]{flex:1;min-width:0;font-size:16px;height:40px}.hfind select{height:40px;font-size:16px}.hbulk{justify-content:stretch}.hbulk form,.hbulk .btn{width:100%}}