/* What the real product adds to base.css (the rules it took from the retired prototype's prototype.css, last version at fcd6b723). */
/* Names may be Arabic: the font stacks end with an Arabic fallback (architecture.md section 2, addition 7). */
:root{
  --f-ui:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
  --f-num:"Barlow Semi Condensed","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
}
[dir=auto]{unicode-bidi:plaintext}
bdi[dir=auto]{unicode-bidi:isolate}
/* The company's name shows once (lead, 2026-10-14): a computer has it at the sidebar's top, a phone shows the page's title; only a tablet's bar
   says it, beside the rail's mark. */
.topbar-company{display:none;flex:1;min-width:0;font-size:13px;line-height:1.2;color:var(--muted)}
@media(min-width:701px) and (max-width:1100px){.topbar-company{display:block}}
.topbar-company strong{font-weight:600;color:var(--ink)}
.top-actions>a.other-company{white-space:nowrap}
.top-actions>a.help-button{color:var(--muted);font-weight:500}
.help-button svg{flex:none}
.page-picture{display:block;max-width:100%;height:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius)}
.bullet-list{margin:0;padding-left:20px;line-height:1.55}
fieldset{border:1.5px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin:0;min-width:0}
legend{font-size:12px;font-weight:600;padding:0 6px}
.is-sending button[type=submit],.is-sending button:not([type]){opacity:.55;cursor:progress}
.banner[data-flash]{transition:opacity .3s}
@media(max-width:700px){
  .top-actions>a.other-company{max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .top-actions>a.help-button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border:0;border-radius:var(--radius);background:transparent;color:#fff}
  .top-actions>a.help-button span{display:none}
  .topbar .workspace-menu>summary{width:auto;max-width:110px;padding:0 8px;border-radius:var(--radius)}
  .topbar .workspace-menu>summary bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .portal-sign-in{margin:4vh auto;padding:16px}
}
.portal-sign-in form{display:grid;gap:12px}
/* Reception (prototype.js `receivePage`; prototype.css styles the blocks, the pills and the bar). The prototype draws the complaint tabs
   and chips as buttons with its script; here they are a radio per category and a checkbox per complaint, shown with :has(). */
.rv-results{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.rv-results a{display:flex;align-items:center;gap:8px}
.rv-tab,.rv-chip{position:relative;display:inline-flex}
.rv-tab>input,.rv-chip>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.rv-tab>span{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;color:var(--muted);font-weight:600;font-size:13.5px;box-shadow:inset 0 -2px 0 transparent}
.rv-tab>input:checked+span{color:var(--navy);box-shadow:inset 0 -3px 0 var(--navy)}
.rv-chip>span{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--soft);font-size:13.5px;line-height:1.25}
.rv-chip>input:checked+span{background:#e8eef7;border-color:var(--navy);color:var(--navy);font-weight:600}
.rv-chip>input:checked+span::before{content:"✓ "}
.rv-tab>input:focus-visible+span,.rv-chip>input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.rv-quick-box .rv-items{display:none}
.rv-quick-box:has([name=rv_cat][value="0"]:checked) .rv-items[data-cat="0"],.rv-quick-box:has([name=rv_cat][value="1"]:checked) .rv-items[data-cat="1"],.rv-quick-box:has([name=rv_cat][value="2"]:checked) .rv-items[data-cat="2"],.rv-quick-box:has([name=rv_cat][value="3"]:checked) .rv-items[data-cat="3"],.rv-quick-box:has([name=rv_cat][value="4"]:checked) .rv-items[data-cat="4"],.rv-quick-box:has([name=rv_cat][value="5"]:checked) .rv-items[data-cat="5"],.rv-quick-box:has([name=rv_cat][value="6"]:checked) .rv-items[data-cat="6"],.rv-quick-box:has([name=rv_cat][value="7"]:checked) .rv-items[data-cat="7"],.rv-quick-box:has([name=rv_cat][value="8"]:checked) .rv-items[data-cat="8"],.rv-quick-box:has([name=rv_cat][value="9"]:checked) .rv-items[data-cat="9"],.rv-quick-box:has([name=rv_cat][value="10"]:checked) .rv-items[data-cat="10"],.rv-quick-box:has([name=rv_cat][value="11"]:checked) .rv-items[data-cat="11"]{display:flex}
@media(max-width:700px){.rv-chip>span,.rv-tab>span{min-height:44px}}
/* The full file list under the job card's strip: its rows (a file's category and day, remove) and GaragePlug's files. */
:is(.jc-docs .doc-list,.doc-list.attachments){list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
:is(.jc-docs .doc-list,.doc-list.attachments) li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
:is(.jc-docs .doc-list,.doc-list.attachments) li>a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-docs .gp-kind{flex:none;min-width:36px;font-size:11px;font-weight:600;color:var(--muted)}
.jc-docs form{display:inline;margin:0}
/* The bill's items: one row each on a desktop (kind, the job card's part or the account, description, qty, price); stacked on a phone. */
/* The printed invoice and receipt (sales/views.ts `printPage`): the document alone on A4; Back and Print show on screen only. */
.print-page{max-width:210mm;margin:0 auto;padding:16px}
.print-document{background:#fff;padding:12mm;border:1px solid var(--line);border-radius:var(--radius)}
.document-company span,.document-footer p{white-space:pre-line}
@page{size:A4;margin:12mm}
@media screen and (max-width:700px){.print-document{padding:16px}.document-header{flex-wrap:wrap}}
/* On paper (desktop or phone, A4): white, no shadows or link colours, compact rows, a row or the totals never cut across two pages and the
   table head repeated on each page. */
@media print{:root:root{--bg:#fff;background:#fff}:root body{background:#fff}.print-page{max-width:none;padding:0}.print-document{padding:0;border:0}
  th,td{padding:5px 8px}thead{display:table-header-group}
  tr,.totals,.document-header,.invoice-parties,.document-footer{break-inside:avoid}.tax-invoice-title{break-after:avoid}
  :root a{color:inherit;text-decoration:none}}
/* The advisor's phone tab bar (web/layout.ts; prototype.css draws the bar): the centre + Receive opens the two Receive pages above it. */
/* A form page's bar sits inside the page column here (prototype.css pulls it out over the prototype's own padding). */
.fp-bar{margin:0;border-radius:16px}
/* The signature pad (people/hr-views.ts): a white field to sign with a finger or the mouse; the page does not scroll while signing. */
.signature-thumb{ display: block; height: 32px; margin-top: 4px; background: #fff; }
/* Phone and tablet (notes/design-system.md, Phone and tablet; node tools/layout-sweep-app.mjs finds what these fix). On a tablet the person's
   role is in their menu, as on a phone, so the bar keeps one row. On touch a short link in a cell (an account code, INV-1, Edit) gets a 44 px
   wide hit area, and Change and the ✕ buttons 44 px. */
/* A customer row's plate and open job keep their 44 px in the line, so neither covers the other or Spent and Owes. */
/* The car (plate and name) has the whole line: in 45% the name was cut to "Mercede". */
/* A section's rarely used lists (platform/ui.ts SectionTab `more`) open from ⋯, not the tab row. The phone's section sheet in the top bar
   copies the row's links, so it keeps them. */
.main nav.section-tabs>a.more{display:none}
@media(max-width:1100px){.topbar .workspace-role{display:none}}
@media(max-width:700px),(pointer:coarse){
  body :is(main,#dialog) :is(p,small,span,li,td,th,dd,strong,em,b,h2,h3,.kv,.empty,.panel-header)>a:not(.button):not(.badge):not(.tile):not(.lst-open):not(td.act a){padding-inline:11px;margin-inline:-11px}
  .rv-picked-head>a{display:inline-flex;align-items:center;min-height:44px}
  button.text{min-width:44px}
}
/* A table wider than its page lets its first column (the account, the name) take a second line instead of scrolling sideways. */
/* Documents on file: the Add or Replace form takes the row's full width under the document's name. */
@media(max-width:700px),(pointer:coarse){
  /* A short link in a table cell (an account code) is at least 44 px wide to tap. */
  main td :is(a,strong>a):not(.button):not(.badge){display:inline-block;min-width:44px}
}
/* Text or a control kept for the script and the screen reader only (the visually hidden required radio of the insurer chips). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none}
/* The job card (notes/design-system.md, The job card): the header with its one next action, four figures, the photos and documents, the work in one
   column and the Timeline and Car and customer beside it. On a phone one column; the header's actions become the bar at the foot. */
.job-page{max-width:1240px}
.jc-two{display:grid;gap:2px;font-size:14px}
.jc-two i{margin-right:6px;font-style:normal;font-weight:500;color:var(--muted)}
.dc-list{list-style:none;margin:6px 0 0;padding:0;display:grid}
.dc-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0;border-top:1px solid var(--line)}
.dc-row:first-child{border-top:0}
.dc-mark{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:14px;font-weight:700;line-height:1}
.is-have .dc-mark{background:#dcf3e4;color:#1a7f43}
.is-missing .dc-mark{background:#fdf0cf;color:#9a6500}
.is-urgent .dc-mark{background:#fbe0e0;color:#b42318}
.dc-file{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.dc-name{display:grid;min-width:0;line-height:1.3}
.dc-name b{font-weight:600;overflow-wrap:anywhere}
.dc-name small{font-size:12.5px}
.dc-file .dc-name{flex:1}
.dc-row>.dc-name{flex:1}
.dc-pic{flex:none;width:44px;height:44px;border-radius:7px;object-fit:cover;background:var(--soft)}
.dc-pic.icon{display:grid;place-items:center;border:1px solid var(--line);background:#fff;overflow:hidden}
.dc-pic.icon svg{width:22px;height:28px}
.dc-state{flex:none;font-size:13px;font-weight:700;color:#9a6500}
.is-urgent .dc-state{color:#b42318}
.jc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:8px}
.jc-tile{position:relative;display:grid;gap:2px;align-content:start;min-width:0;color:inherit;text-decoration:none}
.jt-pic{display:block;width:100%;aspect-ratio:3/2;border-radius:9px;object-fit:cover;background:var(--soft)}
.jt-pic.icon{display:grid;place-items:center;background:#fff;border:1px solid var(--line)}
.jt-type{position:absolute;right:6px;top:6px;padding:1px 6px;border-radius:5px;background:rgba(17,24,39,.65);color:#fff;font:700 10.5px var(--f-ui);font-style:normal}
.jt-name{font-weight:600;font-size:13.5px;line-height:1.25;overflow-wrap:anywhere;margin-top:4px}
.jc-tile small{font-size:12.5px}
.jc-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;margin-top:12px;align-items:start}
.jc-main,.jc-side{display:grid;gap:12px;min-width:0}
.jc-rows{display:grid;margin:0;padding:0;list-style:none}
.jc-rows>li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"m c a" "x x x";align-items:center;gap:2px 14px;padding:10px 0;border-top:1px solid var(--line2)}
.jc-rows>li:first-child{border-top:0}
.jc-rows .m{grid-area:m;display:grid;gap:1px;min-width:0;color:inherit;text-decoration:none}
.jc-rows .m b{font-weight:600;overflow-wrap:anywhere}
.jc-rows .m small{color:var(--muted)}
.jc-rows a.m:hover b{text-decoration:underline}
.jc-rows .c{grid-area:c}
.jc-rows .a{grid-area:a;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.jc-rows .act{grid-area:x}
.jc-complaint{margin:0;font-size:14.5px;color:var(--ink2);overflow-wrap:anywhere;white-space:pre-line}
.jc-totals{display:grid;gap:4px;width:min(100%,340px);margin:12px 0 0 auto}
.jc-totals>div{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.jc-totals :is(dt,dd){margin:0}
.jc-totals>.tot{margin-top:2px;padding-top:6px;border-top:1px solid var(--line);color:var(--ink);font-size:16px;font-weight:700}
.jc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2);font-size:13px;color:var(--muted)}
.jc-foot form{margin:0}
.jc-facts{display:grid}
.jc-fact{display:grid;grid-template-columns:minmax(90px,28%) minmax(0,1fr) auto;align-items:center;gap:4px 12px;min-height:44px;padding:4px 0;border-top:1px solid var(--line2)}
.jc-fact:first-child{border-top:0}
.jc-fact .k{color:var(--muted);font-size:13.5px}
.jc-fact .v{min-width:0;overflow-wrap:anywhere}
.jc-fact .a{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.jc-result{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--tint);color:var(--muted);font-size:13px}
.jc-result b{color:var(--ink)}
.jc-result b.pos{color:var(--green)}
.jc-result b.neg{color:var(--red)}
.jc-tl{margin:0;padding:0;list-style:none}
.jc-tl li{position:relative;padding:0 0 14px 22px;font-size:13.5px}
.jc-tl li::before{content:"";position:absolute;left:4px;top:6px;width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.jc-tl li::after{content:"";position:absolute;left:7.5px;top:16px;bottom:-2px;width:1px;background:var(--line)}
.jc-tl li:last-child::after{display:none}
.jc-tl li.ok::before{background:#22c55e}
.jc-tl .when{font-size:12px;color:var(--muted)}
.jc-tl .q{display:grid;gap:2px;margin-top:3px;padding:6px 9px;border-radius:7px;background:var(--tint);color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.jc-kv{display:grid;margin:0}
.jc-kv>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:13.5px}
.jc-kv>div:first-child{border-top:0}
.jc-kv dt{flex:none;color:var(--muted)}
.jc-kv dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.jc-docs{display:none}
.jc-docs:is(:target,:has(:target)){display:block}
@media(max-width:1100px){.jc-cols{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1100px),(pointer:coarse){
  .jc-fact>.a>a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}
@media(max-width:700px){
  .jc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jc-rows>li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m a" "c c" "x x"}
  .jc-rows .c{margin-top:2px;justify-self:start}
  .jc-fact{grid-template-columns:minmax(0,1fr) auto}
  .jc-fact .k{grid-column:1/-1;font-size:12.5px}
}
/* Phone screens (notes/design-system.md, Phone screens; so far only Job cards and the job card). The pieces the phone adds are not drawn from 701 px up. */
.board-seg,.pb-head,.top-receive{display:none}
@media(max-width:700px){
  /* Job cards: cars first. The band with its Receive buttons goes; Receive is the bottom bar's centre (the top bar's + for a role without the
     bar), and the board's cars are one list grouped by what the advisor must do (phone1 below). */
  .board-band,.advisor-page>.empty .button{display:none}
  /* The top bar's + (Receive) for a role without the bottom bar. */
  .top-receive{display:block;position:relative}
  .top-receive>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:4px solid transparent;border-radius:14px;background:var(--amber);background-clip:padding-box;color:var(--amber-on);font:700 22px/1 var(--f-ui);cursor:pointer}
  .top-receive>summary::-webkit-details-marker{display:none}
  .top-receive>.tab-receive-list{top:calc(100% + 6px);bottom:auto;left:auto;right:0;transform:none;z-index:40}
  .jc-figs>.is-days{display:none}
  /* The Invoice tile with two invoices spans the full width; each label stands above its state. */
  .jc-figs{grid-auto-flow:dense}
  .jc-figs>.tile:has(.jc-two){grid-column:1/-1}
  .jc-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
  .jc-two>span{display:grid;gap:1px;min-width:0}
  .jc-two i{margin:0;font-size:12px}
  .topbar.has-back .module-menu{display:none}
  .jc-figs>.tile:nth-last-child(2):nth-child(odd){grid-column:1/-1}
}
/* A document line's Add (a car with no Mulkiya yet) is a full touch target. */
/* A card's cell keeps a word whole: it takes the width of its longest word (never more than the card) before it shares the row (Chart of Accounts, 390 px). */
/* phone3: finance */
/* Finance on a phone (notes/phone-prototype.html, Look 1): the hero figure, the two tiles, the money rows, Home's queues as groups, Sales' segmented control. A
   wide screen keeps its desktop layout: `.on-phone` is for the phone only (`.off-phone` for the wide screen only). */
@media(max-width:700px){
  .f-hero{display:grid;gap:2px;padding:4px 4px 14px}
  .f-hero .k{font-size:14px;font-weight:600;color:var(--muted)}
  .f-hero .v{font:700 34px/1.1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink)}
  .f-hero .v small{font-size:.5em;font-weight:600;color:var(--muted);margin-right:2px}
  .f-hero .n{font-size:13.5px;color:var(--muted)}
  .fi-totals{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
  /* FF (QA N1): a long chip (To Invoice's "No Xero invoice found ...") wraps on its own lines and never widens the row past the card, so the
     amount and the date stay in view at 360 and 390 px. */
  /* Home: two tiles, then the queues in groups (Today, Purchases, Bank & Cash, Month End), each opening its own page. */
  .desk-layout .desk-queues{background:none;border:0;padding:0;display:block}
  .desk-layout .desk-queues h3{display:block;margin:20px 4px 8px;font:700 18px var(--f-ui);letter-spacing:0;text-transform:none;color:var(--ink)}
  .desk-layout .desk-queues .desk-queue{display:flex;width:100%;min-height:60px;padding:10px 16px;border:0;border-top:1px solid var(--line2);border-radius:0;background:#fff;color:var(--ink);font-size:16px;font-weight:600;white-space:normal;overflow-wrap:anywhere;box-shadow:none}
  .desk-queues .desk-queue>:first-child{min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
  .desk-queues h3+.desk-queue{border-top:0;border-radius:14px 14px 0 0}
  .desk-queues .desk-queue:is(:last-child,:has(+h3)){border-radius:0 0 14px 14px}
  .desk-queues h3+.desk-queue:is(:last-child,:has(+h3)){border-radius:14px}
  /* Records to check has no heading over its queues: the first and the last (before the health line) round the group's corners. */
  .desk-queues>.desk-queue:first-child{border-top:0;border-radius:14px 14px 0 0}
  .desk-queues>.desk-queue:has(+.wf-desk){border-radius:0 0 14px 14px}
  .desk-queues>.desk-queue:first-child:has(+.wf-desk){border-radius:14px}
  .desk-queue .queue-amount{font-weight:500;font-size:13.5px}
  .desk-queue .count{margin-left:auto;background:var(--amber-soft)!important;color:var(--amber-ink)!important}
  .desk-queue.is-zero .count{background:var(--grey-soft)!important;color:var(--grey-ink)!important}
  .desk-queue::after{content:"›";flex:none;margin-left:6px;font-size:24px;line-height:1;font-weight:400;color:var(--muted)}
  .desk-layout:not(.is-open) .desk-work{display:none}
  .desk-layout.is-open .desk-queues{display:none}
  .desk-back{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--link);text-decoration:none}
  /* Sales: the segmented control, its figure and the rows; the section tabs, tiles and chips of the desktop make way. */
  .main:has(.f-hero) .tiles.section{display:none}
  /* Issue invoice: the invoices of the job together, the excess discount under the invoice. */
  /* An invoice and a receipt: the figure first, the document under it. */
  .main:has(form[data-command="sales-invoice"]) .document-header{display:none}
  /* A document on the phone (an invoice, a receipt): its tables sit in the document's card, with no box of their own. */
  /* The money forms (Receive money, Pay supplier) look one way: a list in the form's card has no edge of its own and a bare tick, as on a
     wide screen; four choices (Paid by) sit two by two in their track. */
  .segmented:has(>.seg:nth-child(4)):not(:has(>.seg:nth-child(5))){display:grid;grid-template-columns:1fr 1fr}
  .segmented:has(>.seg:nth-child(4)):not(:has(>.seg:nth-child(5)))>.seg>span{display:flex;justify-content:center}
}
/* phone1: advisor */
@media(max-width:700px){
  /* Job Cards home: Open | Discharged, then the groups of what he must do; a row is three lines and no word is cut. */
  .board-seg{display:block;margin:2px 0 18px}
  /* The board's own markup, one list: the payer columns and their stage bands give way (display:contents), each payer's cars of a group are a
     white block and the groups follow the advisor's order under their headings. */
  .advisor-page .job-board{display:flex;flex-direction:column;align-items:stretch;margin-top:-14px;padding:0;overflow:visible;max-height:none;background:none;scroll-snap-type:none}
  .board-col,.board-rows{display:contents}
  .advisor-page .board-col>h2,.advisor-page .board-stage{display:none}
  .pb-head{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;font:700 17px/1.2 var(--f-ui);color:var(--ink)}
  .pb-head i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--grey)}
  .pb-head small{font-size:15px;font-weight:500;color:var(--muted)}
  .pb-head.g-ready i{background:var(--green)}
  .pb-head.g-received i{background:var(--a-work)}
  .pb-head.g-repair i{background:var(--navy2)}
  .pb-head.g-waiting i{background:var(--amber)}
  .pb-head.g-ready,.pb-head.g-delivered{order:1}
  .board-block.g-ready,.board-block.g-delivered{order:2}
  .pb-head.g-received{order:3}
  .board-block.g-received{order:4}
  .pb-head.g-repair{order:5}
  .board-block.g-repair{order:6}
  .pb-head.g-waiting{order:7}
  .board-block.g-waiting{order:8}
  .board-block{margin:0 0 8px;background:var(--surface);border-radius:14px;overflow:hidden}
  .board-row{position:relative;grid-template-columns:auto minmax(0,1fr) fit-content(65%);gap:3px 8px;min-height:60px;padding:12px 16px;border:0}
  .board-row+.board-row::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--line2)}
  .board-row .br-plate{grid-area:1/1}
  .board-row .br-car{grid-area:1/2/2/4;display:block;margin:0;font-size:16px;font-weight:600;line-height:1.25;color:var(--ink)}
  .board-row .br-name{margin-right:.3em;white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .board-row .br-year{font-weight:400;color:var(--muted)}
  .board-row .br-id{grid-area:2/1/3/4;align-items:baseline;gap:6px;font-size:13.5px;color:var(--muted)}
  .board-row .br-no{font-weight:600;color:var(--ink2)}
  .board-row .br-age{flex:none;font-size:13.5px}
  .board-row .br-sub{grid-area:3/1/4/3;margin:0;font-size:13.5px}
  .board-row .br-sub-text{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .board-row .br-sub>small{margin-left:8px}
  .board-row>.badge{grid-area:3/3/4/4;justify-self:end;margin:0}
  .board-row .br-id>.payer-tag{min-width:0;padding:1px 8px;font-size:12px}
  .advisor-page .board-rows>.muted{display:none}
}
.jc-person,.jc-qsum{display:none}
@media(max-width:700px){
  /* The job card: a navy head (plate and stage, the car, one line of who pays, the stage track), the person with call and WhatsApp, then the
     sections as a heading over a white group, the photos strip, and the foot with the one amber next step or the waiting state in words. */
  .job-page{display:flex;flex-direction:column}
  .jc-cols,.jc-main,.jc-side{display:contents}
  .jc-person{order:1;display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--surface)}
  .jp-who{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
  .jp-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tile);color:var(--navy);font-size:15px;font-weight:700}
  .jp-name{min-width:0;display:grid;gap:1px}
  .jp-name b{font-size:17px;font-weight:700;line-height:1.25;color:var(--ink)}
  .jp-name small{display:grid;font-size:13.5px;color:var(--muted)}
  .jp-name .sep{display:none}
  .jp-ph{white-space:nowrap}
  .jp-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--seg-bg);color:var(--navy)}
  .jp-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .job-page>.banner{order:2;margin:12px 0 0}
  /* One column in the order of the prototype: the claim or complaint, quotation, photos, expenses, the invoice, timeline, car. */
  #job-complaint,#job-claim{order:3}
  #job-quotation,#job-gp-work{order:4}
  #job-checklist,#job-photos{order:5}
  #job-expenses{order:6}
  .jc-figs{order:7}
  #job-invoice{order:8}
  .jc-side>*{order:9}
  .jc-rows>li{padding:12px 0}
  /* The name over its detail (base.css's touch rule for a link in a list item would put them side by side). */
  body .jc-rows>li>a.m:not(.button):not(.badge){display:grid;align-content:center;min-height:44px}
  .jc-figs.tiles{gap:0;margin:22px 0 0;border-radius:14px;overflow:hidden;background:var(--surface)}
  body .jc-figs.tiles>.tile{border:0;border-radius:0;background:none;box-shadow:none;padding:14px 16px}
  .jc-figs>.tile:only-of-type{grid-column:1/-1}
  /* Quotation: a summary that opens the page, Print under it. */
  #job-quotation .jc-qfull,#job-quotation>.panel-header>:not(h2){display:none}
  .jc-qsum{display:block}
  .jc-qsum>a{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:inherit;text-decoration:none}
  .qs-n,.qs-t{display:grid;gap:2px;min-width:0}
  .qs-t{text-align:right;flex:none}
  .qs-n b{font-size:17px;font-weight:600}
  .qs-t b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .qs-t small{font-size:13.5px;color:var(--muted)}
  .qs-act{display:flex;gap:8px;margin-top:14px}
  .qs-act>:is(form,a){flex:1 1 0;margin:0}
  .qs-act :is(button,a.button){width:100%;min-height:52px;border:0;border-radius:14px;background:var(--seg-bg);font-size:15px;box-shadow:none}
  /* The foot: ⋯ at the left, the amber next step filling the rest; a waiting state is a line in words. */
}
/* Task pages (Receive, Work done, Discharge, the job's forms) name the car at every width: the plate and the car, then the job and who pays. */
.task-head{margin:0 0 12px}
.th-car{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;line-height:1.25}
.th-car b{min-width:0;font-weight:600}
.th-sub{margin:3px 0 0;font-size:14px;color:var(--muted)}
.th-sub b{color:var(--ink2)}
.th-sub .sep{margin:0 6px;font-style:normal}
@media(max-width:700px){.task-head{margin:0 0 8px}}
.cp-acts{display:none}
@media(max-width:700px){
  /* The customer: the person centred with call and WhatsApp, the foot holds Receive and ⋯. */
  .main:has(.person-band){padding-bottom:104px}
  .person-band .band-head{flex-direction:column;align-items:center;gap:8px;text-align:center}
  .person-band .band-initials{width:72px;height:72px;font-size:24px}
  .person-band .band-row:not(.band-head){justify-content:center}
  .person-band .band-row>span:has(>a[href^="tel:"]){display:none}
  .cp-acts{display:flex;gap:12px}
  .cp-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
  body .record-band .band-row a.cp-btn{margin:0!important;padding:0!important;text-decoration:none}
  .cp-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .person-band .band-actions{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
  .person-band .band-actions>.menu{order:-1;flex:none}
  .person-band .band-actions .menu>summary{display:grid;place-items:center;width:52px;min-height:52px;padding:0;border:0;border-radius:14px;background:var(--seg-bg);color:var(--ink);box-shadow:none;font-size:20px}
  .person-band .band-actions>a.button{flex:1 1 0;min-height:52px;display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;background:var(--seg-bg);color:var(--ink);min-width:0;padding:0 6px;font-size:15px;line-height:1.2;font-weight:600;white-space:normal;text-align:center;box-shadow:none}
  .person-band .band-actions>a.button.primary{background:var(--amber);color:var(--amber-on)}
  .person-band .menu-list{top:auto;bottom:calc(100% + 8px)}
  /* Customers: one scrolling chip row of the types, the service state one choice under it. */
  /* Search: one large field. */
  .toolbar[role=search] label{font-size:0}
  .toolbar[role=search] input[type=search]{min-height:48px;border-radius:12px;font-size:17px}
}
/* phone4: finance */
/* Sales opens with its segmented control alone; Receive money and the issuing sheet are the prototype's pages (notes/phone-prototype.html). Phone only. */
@media(max-width:700px){
  /* Receive money: the invoices as one white group, a round tick, the number and its due date, the balance on the right. */
  form[data-command="sales-receipt"] .grid :is(.money-box,.num-field,input[inputmode=decimal]){max-width:none}
  .rm-owed label.check{display:grid;place-items:center;min-height:44px;padding:0;border:0;background:none}
  .rm-owed label.check input{width:24px;height:24px;margin:0;accent-color:var(--navy)}
  /* The issuing sheet: the car, the figure to bill, the items and the totals in white groups. */
  .issue-sheet .fi-car{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.25}
  .issue-sheet .fi-car b{min-width:0;font-weight:600}
  .issue-sheet .fi-meta{margin:6px 0 0;font-size:14px;color:var(--muted)}
  .issue-sheet .fi-meta b{color:var(--ink)}
  .issue-sheet .f-hero{padding:14px 0 12px}
  .issue-sheet .lst+.fi-totals{margin-top:12px}
  .fi-kv{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;font-size:16px}
  .fi-kv+.fi-kv{border-top:1px solid var(--line2)}
  .fi-kv span:last-child{font:700 16px var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
  .main:has(.issue-sheet) .form-band h1,.main:has(.issue-sheet) .form-band .band-lede{display:none}
  .main:has(.issue-sheet) .fp-cancel{display:none}
  .main:has(.issue-sheet) .fp-bar .actions{flex-wrap:wrap}.main:has(.issue-sheet) .fp-bar .fp-what{flex:1 1 100%;order:-1;font-size:13.5px}
}
/* performance (the Performance page, /performance: insights/performance-page.ts; one column on a phone, sections side by side from 1000 px) */
.pf{--b2c:#475569;--b2b:#1e3a8a;--slate:#64748b;--mist:#93a3bd;display:flex;flex-direction:column;gap:18px;margin-top:14px}
.pf-switch{max-width:420px}
.pf-section{min-width:0}
.pf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 10px;flex-wrap:wrap}
.pf-head h2{margin:0}.pf-head small,.pf-head a{font-size:13px;color:var(--muted)}.pf-head a{color:var(--link)}
.pf-group{margin:10px 2px -6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-two{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.pf-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:14px 16px;box-shadow:var(--shadow);min-width:0}
.pf-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pf-insurer{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--ins);border-radius:var(--radius-l);padding:14px 16px;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;min-width:0}
.pf-insurer:hover{border-color:var(--ins)}
.pf-ihead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pf-ihead .go{color:var(--ins);font-weight:700;font-size:13px}
.pf-insurer small{color:var(--muted)}
.pf-ibig b{font:700 24px/1.2 var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:6px 0 0}
.pf-facts div{min-width:0}.pf-facts dt{font-size:12.5px;color:var(--muted)}.pf-facts dd{margin:0;font:650 16px/1.3 var(--f-num);font-variant-numeric:tabular-nums}
.pf-facts .neg,.pf-table .neg,.pf-stack .neg{color:var(--red)}
.pf-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink2);margin-bottom:10px}
.pf-legend i,.pf-name i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:baseline}
.pf-stack{display:flex;align-items:stretch;gap:6px;height:220px}
.pf-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pf-col b{font:600 11px/1 var(--f-num);color:var(--ink2);white-space:nowrap}
.pf-col small{font-size:11px;color:var(--muted)}.pf-col em{font:normal 600 10.5px/1 var(--f-num);color:var(--muted)}
.pf-seg{flex:1 1 auto;width:100%;max-width:34px;display:flex;flex-direction:column-reverse;justify-content:flex-start;min-height:0}
.pf-seg>span{display:block;width:100%}
.pf-seg.pair{flex-direction:row;align-items:flex-end;gap:2px;max-width:30px}.pf-seg.pair>span{flex:1 1 0;min-height:1px}
.pf-weeks{height:140px}
.pf-bar{margin:0 0 12px}.pf-bar:last-child{margin-bottom:0}
.pf-bar-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.pf-wait{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none}
.pf-wait>*{min-width:0}.pf-wait>span:not(.plate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pf-wait b{font-variant-numeric:tabular-nums}
.pf-bar-head .pf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-bar-head b{font-variant-numeric:tabular-nums;white-space:nowrap}.pf-bar-head small{color:var(--muted);font-weight:500}
.pf-track{height:8px;border-radius:99px;background:#e6ebf3;overflow:hidden}.pf-track>span{display:block;height:100%;border-radius:99px}
.pf-table{overflow-x:auto}.pf-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.pf-table th,.pf-table td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-table thead th{font-size:12px;color:var(--muted);font-weight:600}.pf-table th:first-child,.pf-table td:first-child{text-align:left}.pf-table tbody th{font-weight:650}
.pf-split{display:flex;height:14px;border-radius:99px;overflow:hidden;margin-bottom:10px}.pf-split>span{display:block;height:100%}
@media(min-width:1000px){.pf-two{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-two>.half:only-child{grid-column:1/-1}}
@media(max-width:700px){.pf-stack{gap:3px}.pf-col b{font-size:9.5px}}
@media(max-width:700px){
  .pf-table{overflow:visible}.pf-table table,.pf-table tbody,.pf-table tr{display:block}.pf-table thead{display:none}
  .pf-table tr{padding:10px 0;border-bottom:1px solid var(--line2)}.pf-table tr:last-child{border-bottom:0}
  .pf-table tbody th{display:block;padding:0 0 4px;border:0;font-size:15px;white-space:normal}
  .pf-table td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;text-align:right}.pf-table td::before{content:attr(data-l);color:var(--muted);text-align:left}
  .pf-weeks .pf-col:nth-child(even) small{visibility:hidden}
}
@media(min-width:701px) and (max-width:1100px){.sidebar nav a[href="/performance"]{font-size:10.5px;letter-spacing:-.02em}}
@media(max-width:1000px){.pf-head a{display:inline-flex;align-items:center;min-height:44px}}
/* phoneqa (2026-10-11): the phone as the approved prototype shows it, found by opening every page as each role (audit/phoneqa/README.md). */
@media(min-width:701px){.on-phone{display:none!important}}
@media(max-width:700px){
  .off-phone{display:none!important}
  /* A list's group: its heading above a white card of rows, as the prototype's .gh and .group (no tinted bar, no empty strip, one border). */
  .tab-menu:has(>nav.off-phone){display:none}
  body .person-band .band-actions>:is(a,form).foot-hide{display:none}
  body .person-band .menu-list>.foot-dup{display:flex}
  /* A panel's heading sits in its white card, plain (the tinted bar and its gap were the old look); a list's panel is the group above. */
  /* A foot's "⋯" opens above its button, from its left edge, in the page's own ink (the band's white text was drawn on the white list). */
  body .record-band.person-band .band-actions .menu-list{left:0;right:auto;color:var(--ink)}
  body .record-band .band-row .band-actions .menu-list>a:not(.button):not(.badge):not(.danger){color:var(--ink)}
  body .person-band .band-actions>.menu.ph-receive{flex:1 1 0;order:0;position:relative}
  body .person-band .band-actions>.menu.ph-receive>summary{width:100%;min-height:52px;padding:0 6px;border-radius:14px;background:var(--amber);color:var(--amber-on);font-size:15px;font-weight:650;display:flex;align-items:center;justify-content:center;list-style:none}
  body .record-band.person-band .menu.ph-receive .menu-list{left:0;right:0;min-width:0}
}
@media(max-width:700px),(pointer:coarse){body .menu-list>form>button,body .record-band .band-actions .menu-list>form>button{min-height:44px}}
.menu-list>.foot-dup{display:none}
.wf-d.foot-dup{display:none}
details.top-receive>summary::before{content:none}
/* Home's one health line wraps: a long list of failing checks never makes the page wider than the phone. */
.health-line-only .badge{white-space:normal}
/* The Undo in the toast after Start work / Work done (workshop/job.ts): a text button at the toast's end. */
[data-flash] form{display:inline;margin:0 0 0 14px}.toast-undo{background:none;border:0;padding:4px 8px;min-height:44px;font:inherit;font-weight:700;color:inherit;text-decoration:underline;cursor:pointer}
/* The navy side menu runs the whole height of a long page (2026-10-11): the fixed menu is as tall as the screen, so the page's own background carries the navy under it.
   Only a page with the menu: the sign-in page and a document's print page have none. */
@media(min-width:701px){html body:has(.sidebar){background:linear-gradient(to right,var(--nav) 0,var(--nav) 220px,var(--bg) 220px)}}
@media(min-width:701px) and (max-width:1100px){html body:has(.sidebar){background:linear-gradient(to right,var(--nav) 0,var(--nav) 88px,var(--bg) 88px)}}
/* phone5 (2026-10-11): the section pages the prototype has no screen for (Purchases, Inventory, Bank, People, Accounting, Settings ...) in the approved phone patterns. Phone only; 701 px and up is untouched. */
@media(max-width:700px){
  .page-band .band-lede{display:none}
  /* The tab's one amber action sits in a foot above the bottom bar, "⋯" holds the rest (as a person's page does). */
  .main:has(.foot-band){padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .foot-band .band-actions{position:fixed;left:0;right:0;bottom:calc(var(--bar-h,63px) + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:10px 16px;background:var(--surface);border-top:1px solid var(--line);width:auto}
  #app:has(.topbar.has-back,.job-page,.fp) .foot-band .band-actions{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body .page-band.foot-band{height:0;min-height:0;margin:0;padding:0;overflow:visible;background:none;border:0;box-shadow:none}
  .foot-band .band-head{display:block;min-height:0;padding:0}
  .foot-band h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body .foot-band .band-actions>.menu{order:-1;flex:none}
  body .record-band.foot-band .band-actions .menu>summary{display:grid;place-items:center;width:52px;min-height:52px;padding:0;border:0;border-radius:14px;background:var(--seg-bg)!important;color:var(--ink);box-shadow:none;font-size:20px}
  body .record-band.foot-band .band-actions>a.button{flex:1 1 0;min-height:52px;display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;background:var(--amber);color:var(--amber-on);min-width:0;padding:0 6px;font-size:15px;line-height:1.2;font-weight:650;white-space:normal;text-align:center;box-shadow:none}
  .foot-band .menu-list{top:auto;bottom:calc(100% + 8px);left:0;right:auto;color:var(--ink)}
  body .foot-band .band-actions .menu-list>a:not(.button):not(.badge):not(.danger){color:var(--ink);min-height:44px;display:flex;align-items:center}
  /* A record's 2-3 tabs are the segmented control (the Section menu is for sections with more). */
  body nav.tabs.seg{display:flex;flex-wrap:nowrap;overflow:visible;gap:2px;padding:3px;margin:0 0 16px;border-radius:12px;background:var(--seg-bg);box-shadow:none}
  body nav.tabs.seg>a{flex:1 1 0;justify-content:center;min-width:0;min-height:44px;padding:0 6px;border:0;border-radius:10px;color:var(--ink2);font-size:14px;font-weight:600;text-align:center}
  body nav.tabs.seg>a.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,24,39,.12)}
  /* A table of the section pages is one white group of rows: the row's first cell is its title, the other cells are label and value pairs (the prototype's group; no card per row). */
  /* The page's own title is in the top bar: a section band with no foot has nothing left to show. The descriptive lines wait on the desktop. */
  body .page-band:is(.no-foot,:not(.foot-band):not(:has(.band-actions,.tiles))){height:0;min-height:0;margin:0;padding:0;overflow:visible;background:none;border:0;box-shadow:none}
  .page-band:is(.no-foot,:not(:has(.band-actions,.tiles))) h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .main:has(.section-tabs)>p.muted:not(.keep),.main:has(.section-tabs) .toolbar>p.muted{display:none}
  .lr-fig.nil{display:none}
  .month-field>select{flex:1 1 0;min-width:0}
  .month-field>select:first-child{flex-grow:1.6}
  /* The payroll draft's and the attendance Save bar stay above the bottom bar. The payroll draft's Save is a second bar there only while a
     row is being changed (an Adjust open, a box in use); otherwise it waits at the list's end, so the list has one bar, the bottom one. */
  :is(#payroll-draft,#attendance-form) .fp-bar{bottom:calc(var(--bar-h,63px) + env(safe-area-inset-bottom,0px))}
  #payroll-draft:not(:focus-within,:has(details[open])) .fp-bar{position:static}
  #payroll-draft .fp-bar .fp-what{display:none}
  #payroll-draft .fp-bar .actions{justify-content:stretch}
  .section-foot>a.button.primary{display:flex;justify-content:center;align-items:center;min-height:52px;padding:0 6px;border:0;border-radius:14px;box-shadow:none;font-size:15px;margin-top:14px}
  /* A record's page (a bill, a supplier, an item ...): the band's actions are the foot, "⋯" and the one amber action, as a person's page has. */
  .main:has(.foot-record){padding-bottom:104px}
  body .record-band.foot-record .band-actions{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);width:auto;max-width:none}
  body .record-band.foot-record .band-actions>.menu{order:-1;flex:none}
  body .record-band.foot-record .band-actions .menu>summary{display:grid;place-items:center;width:52px;min-height:52px;padding:0;border:0;border-radius:14px;background:var(--seg-bg)!important;color:var(--ink);box-shadow:none;font-size:20px}
  body .record-band.foot-record .band-actions>form{flex:1 1 0;display:flex;min-width:0;margin:0}
  body .record-band.foot-record .band-actions>:is(a.button,button),body .record-band.foot-record .band-actions>form>button{flex:1 1 0;min-height:52px;display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;background:var(--seg-bg);color:var(--ink);min-width:0;padding:0 6px;font-size:15px;line-height:1.2;font-weight:600;white-space:normal;text-align:center;box-shadow:none}
  body .record-band.foot-record .band-actions>:is(a.button,button).primary,body .record-band.foot-record .band-actions>form>button.primary{background:var(--amber);color:var(--amber-on)}
  body .record-band.foot-record .band-actions>:is(a,form).foot-hide{display:none}
  body .record-band.foot-record .menu-list>.foot-dup{display:flex}
  body .record-band.foot-record .band-actions .menu-list{top:auto;bottom:calc(100% + 8px);left:0;right:auto;color:var(--ink)}
  body .record-band.foot-record .band-actions .menu-list>a:not(.button):not(.badge):not(.danger){color:var(--ink)}
  .foot-band .band-actions>form{flex:1 1 0;display:flex;margin:0}
  body .record-band.foot-band .band-actions>form>button{flex:1;min-height:52px;border:0;border-radius:14px;background:var(--amber)!important;color:var(--amber-on)!important;font-size:15px;font-weight:650}
}
/* A short form on a phone: its foot bar sits at the bottom of the screen, not under the last field. */
@media(max-width:700px){
  #app:has(.topbar.has-back,.job-page,.fp) .main:has(>.fp){display:flex;flex-direction:column;min-height:calc(100dvh - var(--bar));padding-bottom:0}
  #app:has(.fp) .main>.fp{flex:1;display:flex;flex-direction:column}
  #app:has(.fp) .main>.fp>.fp-bar{margin-top:auto;margin-bottom:0}
}
/* The Ready to Invoice side panel is narrow: the label takes what the count leaves. */
/* A tick box in a table cell is just the box, not a field. */
td>label.check{padding:0;border:0;background:none}
/* The green GP badge in a job card's band (owner, 2026-10-08), on the web and on the phone. */
.record-band .gp-badge{background:#17703c;border-color:#17703c;color:#fff}
/* The photos chosen in a multiple upload, small, each with Remove (app.js drawThumbs). */
.up-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.up-thumbs>span{display:flex;flex-direction:column;align-items:center;gap:4px}
.up-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
@media(max-width:700px){.up-thumbs button{min-height:44px}}
.test-copy{background:var(--amber-soft);color:var(--amber-ink);text-align:center;font-size:13px;font-weight:600;padding:4px 16px}
/* CB2 · What the one list (ui.ts list(), look.css "The one list") keeps from the money lists: From and To in the filter row, the payer's dot, and the
   selection bar at the foot once a row is ticked (app.js); on a phone the bar sits above the bottom bar. */
/* From and To beside the search (Xero's search has them), applied as a date changes (app.js bindApply); a phone keeps the chips and the search. */
.ml-dates{display:flex;align-items:center;gap:8px;margin:0}.ml-dates>label{display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap}.ml-dates .date-field{width:160px}
.sel-bar{display:none}
.sel-bar.on{position:sticky;bottom:12px;z-index:9;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:16px 0 0;padding:10px 12px 10px 18px;border-radius:14px;background:var(--navy);color:#fff;box-shadow:0 10px 30px -10px rgba(17,24,39,.5)}
.sel-what{margin:0;font-size:15px}.sel-what b{font:700 18px var(--f-num);font-variant-numeric:tabular-nums}
.sel-bar .sel-clear{color:#bfdbfe}
.sel-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.sel-bar .sel-acts :is(a.button,button):not(.primary){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.sel-bar .primary{background:var(--amber);border-color:var(--amber);color:#fff;font-weight:650}
.sel-bar .primary:disabled{opacity:.55;cursor:not-allowed}
.sel-warn{flex-basis:100%;margin:0;color:#fecaca;font-size:14px;font-weight:600}.sel-warn:empty{display:none}
/* While the bar shows, the band's amber is quiet: the screen keeps one amber. */
body.sel-open .page-band .band-actions .button.primary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
/* A plate in a narrow cell breaks its emirate between words, never inside one ("ABU DHABI"). */
td .plate .em.long{overflow-wrap:normal}
@media(max-width:700px){
  .ml-dates{display:none}
  .sel-bar.on{position:fixed;left:0;right:0;bottom:calc(var(--bar-h,63px) + env(safe-area-inset-bottom,0px));margin:0;border-radius:16px 16px 0 0;padding:12px 16px}
  .sel-acts{flex-basis:100%;margin:0}.sel-acts .primary{flex:1}
  .sel-acts :is(a.button,button):not(.primary){display:none}
  body.sel-open .main{padding-bottom:180px}
}
/* end CB2 */
/* CB2 · Issue credit note's live total under its lines; a bill's totals as plain rows under its items (no box in a box). */
.credit-total{margin:10px 0 0;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}.credit-total:empty{display:none}
/* CB2 · Identifiers never break (web review A12, A17): a claim number, a tick with its invoice number, an IBAN; on an A4 invoice the Pay to
   accounts take two columns when three would cut an IBAN. A section tile's figure stays with its AED (phone review B16). */
.nw{white-space:nowrap}.nw>label.check{display:inline-grid;vertical-align:middle;margin-right:4px}
.pay-iban{white-space:nowrap}.pay-to-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* Phone screens 1 (phone review 2026-10-13, B3 B4 B12): one bar on a list, the bottom one. A section page's amber action and its "⋯" are in the top
   bar beside the account (web/layout.ts moves them there; the amber action is a + that opens a new record, platform/ui.ts phoneFoot), the section's name in the bar opens its
   tabs, and what a tap opens (⋯, Receive's two kinds, the tabs) is a bottom sheet over a dim ground; a tap on the ground (the opener's own ::before
   or ::after) closes it. Phone only. */
.topbar-sections{display:none}
@media(max-width:700px){
  .foot-band .band-actions:not(:has(>.wf-p)){display:none}
  .top-actions>.wf-p{margin:0 8px 0 0}
  .top-actions>details.menu.wf-p{order:-2}
  .top-actions>a.wf-p{order:-1}
  .top-actions>details.menu.wf-p>summary{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--band-chip);color:#fff;font-size:20px;box-shadow:none}
  .top-actions>a.button.primary.wf-p{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--amber);color:var(--amber-on);font-size:0;box-shadow:none}
  .top-actions>a.button.primary.wf-p::before{content:"+";font:500 30px/1 var(--f-ui);margin-top:-2px}
  .topbar:not(.has-back):has(.top-actions>.wf-p) .topbar-title{font-size:26px}
  /* The top bar's + (Receive, for a role without the bottom bar) is centred in its square (base.css's fold rules made it a row with padding). */
  body .topbar details.top-receive>summary{display:grid;place-items:center;padding:0}
  /* The section's name opens its tabs (four or more; fewer stay the segmented control in the page). */
  .topbar-sections{display:block;flex:1;min-width:0}
  .topbar-sections>summary{list-style:none;cursor:pointer}
  .topbar-sections>summary::-webkit-details-marker{display:none}
  details.topbar-sections>summary::before{content:none}
  .topbar-sections>summary>span{display:block}
  .topbar-sections>summary>small{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:0;color:var(--band-sub)}
  #app:has(.topbar-sections) .main :is(nav.section-tabs,.tab-menu:has(>nav.section-tabs)){display:none}
  .sections-sheet{display:none}
  .sections-sheet h2{margin:0 4px 6px;font-size:18px;font-weight:700;color:var(--ink)}
  .sections-sheet>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 10px;border-top:1px solid var(--line2);font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
  .sections-sheet>a:is(.active,[aria-current]){box-shadow:inset 3px 0 0 var(--amber);background:var(--navy-soft)}
  .sections-sheet .n{padding:1px 8px;border-radius:999px;background:var(--seg-bg);font-size:13px;font-weight:600;color:var(--ink2)}
  /* The sheets and their dim ground. */
  details.topbar-sections[open]>summary::before,body details.menu[open]:not(:is(.lst,.form-sections) *)>summary::after,body details:is(.tab-receive,.top-receive)[open]>summary::after{content:"";display:block;position:fixed;inset:0;z-index:60;width:auto;height:auto;margin:0;border:0;border-radius:0;transform:none;background:rgba(15,26,43,.5);cursor:default}
  details.topbar-sections[open]>.sections-sheet,body details.menu[open]:not(:is(.lst,.form-sections) *)>.menu-list,body details:is(.tab-receive,.top-receive)[open]>.tab-receive-list{position:fixed!important;inset:auto 0 0 0!important;z-index:61;transform:none!important;display:grid;gap:0;width:auto;min-width:0;max-width:none;max-height:80dvh;overflow-y:auto;overscroll-behavior:contain;margin:0;
    padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px));border:0;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -8px 24px rgba(11,31,59,.2);color:var(--ink);font-size:16px;text-align:left}
  body details.menu[open]:not(:is(.lst,.form-sections) *)>.menu-list::before,body details:is(.tab-receive,.top-receive)[open]>.tab-receive-list::before{content:"";justify-self:center;width:36px;height:5px;margin:0 0 8px;border-radius:3px;background:#c4cddc}
  body details.menu[open]:not(:is(.lst,.form-sections) *)>.menu-list>:is(a,button),body details.menu[open]:not(:is(.lst,.form-sections) *)>.menu-list>form>button{min-height:52px;padding:0 10px;border-radius:0;font-size:16px;font-weight:600;white-space:normal}
  body details.menu[open]:not(:is(.lst,.form-sections) *)>.menu-list>*+*{border-top:1px solid var(--line2)}
  body details:is(.tab-receive,.top-receive)[open]>.tab-receive-list>a{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 10px;border-radius:0;background:none;color:var(--ink);font-size:17px;font-weight:600}
  body details:is(.tab-receive,.top-receive)[open]>.tab-receive-list>a+a{border-top:1px solid var(--line2)}
  body details:is(.tab-receive,.top-receive)[open]>.tab-receive-list>a>svg{flex:none;width:40px;height:40px;padding:8px;border-radius:50%;background:var(--amber-soft);color:var(--amber-ink)}
  /* A foot or a bar that holds an open sheet comes above the bottom bar, so its sheet does. */
  body .band-actions:has(>details.menu[open]){z-index:61}
  body:has(details.topbar-sections[open],details.menu[open]:not(:is(.lst,.form-sections) *),details:is(.tab-receive,.top-receive)[open]){overflow:hidden}
}
/* CB1: Reconcile (money/reconcile-view.ts, concept B1): the bank's line on the left, its best suggestion on the right with OK, Other matches and
   Create inside the row; one card per line on a phone. The next line to do has an amber ring. */
.rc-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;color:var(--band-sub);font-size:13px}
.rc-progress progress{flex:1 1 220px;max-width:560px;height:8px;-webkit-appearance:none;appearance:none;border:0;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.rc-progress progress::-webkit-progress-bar{background:rgba(255,255,255,.16);border-radius:99px}
.rc-progress progress::-webkit-progress-value{background:#4ade80;border-radius:99px}
.rc-progress progress::-moz-progress-bar{background:#4ade80;border-radius:99px}
.rc-heads,.rc-row{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.3fr)}
.rc-heads{color:var(--muted);font-size:12.5px;font-weight:600;padding:0 4px 6px}
.rc-row{align-items:start;margin-bottom:10px}
.rc-line,.rc-match{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:14px 16px;min-width:0}
.rc-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
.rc-line>b{overflow-wrap:anywhere}
.rc-line>.money{grid-row:1/3;grid-column:2;font-size:18px;font-weight:700;white-space:nowrap}
.rc-line>small,.rc-what>small{color:var(--muted)}
.rc-in{color:var(--green)}
.rc-next .rc-line{box-shadow:0 0 0 2px #f59e0b,var(--shadow)}
.rc-arrow{align-self:center;text-align:center;color:#94a3b8}
.rc-match{border-left:4px solid var(--green)}
.rc-match.rc-none{border-left-color:var(--line-strong)}
.rc-match.rc-review{border-left-color:var(--red)}
.rc-top{display:flex;gap:12px;align-items:flex-start}
.rc-top>form{margin:0}
.rc-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rc-what>b{overflow-wrap:anywhere}
.rc-kind{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rc-why{color:var(--green);font-size:13px;font-weight:600;margin-top:4px}
.rc-amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
button.rc-ok{background:var(--green);border-color:var(--green);color:#fff;font-weight:650;min-width:64px}
.rc-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px;border-top:1px solid var(--line2);padding-top:4px}
.rc-links>details[open]{flex-basis:100%}
.rc-fold>summary{color:var(--link);font-weight:600;cursor:pointer;min-height:36px;display:flex;align-items:center;list-style:none}
.rc-fold>summary::-webkit-details-marker{display:none}
.rc-panel{background:var(--bg);border-radius:10px;padding:10px 12px;margin-top:4px}
.rc-panel>form>.actions{margin-top:8px}
.rc-cand{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}
.rc-cand:first-child{border-top:0}
.rc-cand>form{margin:0}
.rc-cand small{display:block;color:var(--muted)}
.rc-differs{color:var(--red)}
.rc-alt{margin:8px 0 0;font-size:13.5px}
.rc-rule{margin:8px 0 0}
.rc-agree{color:var(--green)}
@media(max-width:700px){
  .rc-heads,.rc-arrow{display:none}
  .rc-row{grid-template-columns:minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  .rc-row>.rc-line,.rc-row>.rc-match{border:0;border-radius:0;box-shadow:none}
  .rc-row>.rc-match{border-top:1px solid var(--line2)}
  .rc-next{box-shadow:0 0 0 2px #f59e0b,var(--shadow)}
  .rc-next .rc-line{box-shadow:none}
  button.rc-ok,.rc-fold>summary,.rc-cand button{min-height:44px}
}
/* ---- CB3 (lane financephone; concept B3, FUX X1, X5, X6): money forms and Finance's money home.
   Account rows: each account money is paid from or into, with what it has and what it will have after this money, red below zero. */
fieldset.acct-rows{border:0;margin:0;padding:0;min-width:0}
fieldset.acct-rows>legend{font-weight:600;margin-bottom:6px;padding:0}
.acct-rows .acct-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-top-width:0;font-weight:400;cursor:pointer;min-height:56px}
.acct-rows legend+.acct-row,.acct-rows .acct-row:first-of-type{border-top-width:1px;border-radius:var(--radius-l) var(--radius-l) 0 0}
.acct-rows .acct-row:last-of-type{border-radius:0 0 var(--radius-l) var(--radius-l)}
.acct-rows .acct-row:has(input:checked){background:var(--navy-soft)}
.acct-rows .acct-row input{width:20px;height:20px;margin:0;accent-color:var(--navy)}
.acct-row .l{display:flex;flex-direction:column;min-width:0}
.acct-row .l b{font-weight:650;overflow-wrap:anywhere}
.acct-row .l small,.acct-row .r{color:var(--muted);font-size:13px}
.acct-row .r{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.acct-row .r b{color:var(--ink);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-row .r b.neg{color:var(--red)}
.acct-rows.is-zero .acct-row .r{visibility:hidden}
.banner.below-zero{font-weight:600;margin:10px 0 0}
/* The amber button names the amount, with the account's balance after it on a second line. */
button.money-btn small{display:block;font-size:12px;font-weight:600;opacity:.92;margin-top:1px}
.receive-line{font-weight:600;margin:10px 0 0}
.row-find{display:block;margin:0 0 8px}
.row-find input{width:100%;max-width:420px}
/* Pay supplier: the suppliers with bills due this week as chips that wrap (the chosen one navy). */
button.money-btn{flex-direction:column;justify-content:center;white-space:normal;line-height:1.25}
button.money-btn small{color:inherit}
/* Finance's Home: on a phone the money home (insights/desk.ts `moneyHome`), on a wide screen each account at the head of the desk's queues. */
.desk-account .queue-amount.neg{color:var(--red)}
.desk-detail .mini+.mini h5{margin-top:14px}
/* Below Zero: the one more question before a payment takes a bank account below zero (app.js CB3); a sheet from the bottom on a phone. */
dialog.below-ask{border:0;border-radius:var(--radius-l);padding:20px;max-width:440px;width:calc(100% - 32px);box-shadow:var(--shadow-pop);display:grid;gap:10px}
dialog.below-ask::backdrop{background:rgba(17,24,39,.45)}
dialog.below-ask h2{margin:0;font-size:20px}
dialog.below-ask p{margin:0 0 6px;font-size:15px;line-height:1.5}
dialog.below-ask button{min-height:48px;width:100%;font-size:16px}
dialog.below-ask button.danger{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:700px){dialog.below-ask{margin:auto 0 0;max-width:none;width:100%;border-radius:20px 20px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom))}}
/* On a phone a money form's foot is its one big button (concept B3's sheet): the amount and the balance after it say what saving does. */
@media(max-width:700px){
  form:has([data-money-button]) .fp-bar .fp-what{display:none}
}
/* Finance's phone (concept B3): the + sheet's rows carry a line under their name, and Search is the top bar's icon beside the initials (the
   bottom bar has Bank in its place). */
@media(max-width:700px){
  body details.tab-receive[open]>.money-list>a>span{display:grid;gap:2px;min-width:0}
  body details.tab-receive[open]>.money-list>a small{font-size:13px;font-weight:400;color:var(--muted)}
  #app[data-shell=finance] .topbar .top-actions>.global-search-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
  #app[data-shell=finance] .topbar .top-actions>.global-search-trigger span{display:none}
}
/* A phone's section name stays one line beside ⋯, +, the search and the initials: a smaller size on a small phone (360 px) and in Finance's
   bar (it holds the search too), then an ellipsis; the whole name is in its title. */
@media(max-width:700px){
  body .topbar:not(.has-back) :is(span.topbar-title,.topbar-title>span){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app[data-shell=finance] .topbar:not(.has-back) .topbar-title{font-size:26px}
}
@media(max-width:380px){body .topbar:not(.has-back) .topbar-title,.topbar:not(.has-back):has(.top-actions>.wf-p) .topbar-title{font-size:22px}}
.file-name:empty{display:none}
/* A statement line's candidates (Find & Match) on a phone: the tick, the date and the amount on one line, the words with their reference
   under them (uxr-finance A1.3; they were three labelled rows per transaction). */
/* A destructive item in a band's ⋯ (Void, Reverse; ui.ts quickLink danger) is red on the menu's white, never the band's white. */
body .record-band .band-row .band-actions .menu-list>a.danger{color:var(--red)}
/* Health › Speed on a phone: a page or command keeps its name on one line (its time wraps instead). */
#speed .wf-phone td:first-child{white-space:nowrap}
@media(max-width:700px){body .record-band:is(.foot-record,.foot-band,.person-band) .band-actions>:is(a.button,button).primary{font-weight:650}}
/* The parts lane UI-BUILDERS-2 added to ui.ts (the rest keep the rules their markup had): a positive figure (`tone(x, 'pos')`) and an
   insurer's colour dot as a band's lead (`colourDot`). */
.pos{color:var(--green)}
.ins-dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--ins)}