/* The real product's look (owner, 2026-10-09: "renk kullanımı iyi değil … 1990'lardan kalma gibi … bilgilerin önemini anlamakta
   zorlanıyorum"). Loaded after base.css and app.css, it keeps the prototype's markup and changes how it reads:
   - calm: a tinted page, white cards, thin lines; the dark navy is the menu, the top bar and each page's band (see the last block, `The web in navy`);
   - colour means something: amber is the one action to take, green done, amber waiting, red late or owed; everything else is grey;
   - hierarchy: the page's figure is the biggest thing on it, a name is bold, what explains it is grey and smaller;
   - the system's own font (San Francisco, Segoe UI, Roboto): crisp on every device and nothing to download. */
:root{
  --bg:#eef2f8;--surface:#fff;--tint:#e4ebf6;--field:#fff;--soft:#e8edf5;
  --ink:#111827;--ink2:#374151;--muted:#5d6675;--box-edge:#8a929e;--line:#dbe2ee;--line2:#e7ecf4;--line-strong:#c9d2e0;
  --navy:#14213d;--navy2:#22345a;--navy-soft:#e2eafc;--link:#1d4ed8;
  --amber:#b45309;--amber-soft:#fef3c7;--amber-ink:#92400e;--amber-on:#fff;
  --green:#15803d;--green-soft:#dcfce7;--red:#b91c1c;--red-soft:#fee2e2;
  --grey:#6b7280;--grey-soft:#f3f4f6;--grey-ink:#4b5563;
  --brand:var(--link);--accent:var(--amber);
  --nav:#14213d;--nav-line:#22314f;--nav-ink:#cfdcf5;--nav-muted:#93a3bf;
  /* The navy identity (owner, 2026-10-11, Look 1 of notes/phone-prototype.html): navy bands and bar, a cool tinted ground, tinted figure tiles,
     amber the one action now, green done, red late or owed. Every text pair is AA (4.5:1). */
  --band:#14213d;--band-sub:#b8c4d8;--band-chip:rgba(255,255,255,.14);--tile:#e1e9f6;--seg-bg:#dde4ef;--chip-on:#14213d;--stage-wip:#dde6f6;--stage-wip-ink:#1e3a8a;
  --a-work:#1d4ed8;--a-work-soft:#e2eafc;--a-sales:#6d28d9;--a-sales-soft:#ede6fb;--a-people:#0f766e;--a-people-soft:#ddf1ed;
  --a-bank:#0e7490;--a-bank-soft:#ddf0f4;--a-buy:#475569;--a-buy-soft:#e6eaf0;--a-acc:#334155;--a-acc-soft:#e4e8ef;--a-home:#14213d;--a-home-soft:#e3e8f1;
  --radius-s:6px;--radius:8px;--radius-l:12px;--control:38px;
  /* The form column (notes/design-system.md, The page standard 4): a form of one unnamed section, and the name column of a named section. */
  --form-col:760px;--form-label:200px;
  --shadow:0 1px 2px rgba(17,24,39,.04);--shadow-pop:0 16px 40px rgba(17,24,39,.16);
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Geeza Pro","Noto Sans Arabic",sans-serif;
  --f-num:var(--f-ui);
  font-family:var(--f-ui);font-size:14px;color:var(--ink);background:var(--bg);
}
body{background:var(--bg)}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
h2{font-size:16px;font-weight:650;letter-spacing:-.01em}
h3{font-size:15px;font-weight:650}
.num,.money,td.n,td.r,.kv strong{font-variant-numeric:tabular-nums}
/* Links read as links by colour, not by an underline on every one. */
a{color:var(--link)}
:is(p,td,dd,li,.kv) a:not(.button):not(.badge){text-decoration:none}
:is(p,td,dd,li,.kv) a:not(.button):not(.badge):hover{text-decoration:underline}
/* Buttons: one amber action per screen; the rest quiet. */
button,a.button,summary.button{min-height:var(--control);padding:7px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
button:hover,a.button:hover,summary.button:hover{background:var(--soft);border-color:#c4c8cf}
button.primary,a.button.primary,.next-box :is(button.primary,a.button.primary),.record-band .band-actions :is(button,a.button).primary,.fp-bar .primary{background:var(--amber);border-color:var(--amber);color:#fff;font-weight:650}
button.primary:hover,a.button.primary:hover,.next-box :is(button.primary,a.button.primary):hover,.record-band .band-actions :is(button,a.button).primary:hover,.fp-bar .primary:hover{background:#92400e;border-color:#92400e}
button.text,a.button.text{border-color:transparent;background:transparent;box-shadow:none;color:var(--link)}
:focus-visible{outline:2px solid #d97706;outline-offset:2px}
/* Fields: white boxes with a clear edge. */
/* A box's edge is 3:1 against the page (WCAG 1.4.11): a person must see where to type. A button carries its words, so its edge stays light. */
input,select,textarea{background-color:#fff;border:1px solid var(--box-edge);border-radius:var(--radius);min-height:40px;padding:8px 11px}
/* A plain select keeps the prototype's chevron (base.css), with room for it. */
select{padding-right:30px}
input:focus,select:focus,textarea:focus{border-color:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.2);outline:none}
label{color:var(--ink2);font-weight:600;font-size:13px}
/* The menu is navy, a shade darker than the page bands (the last block). */
.sidebar{background:var(--nav)}
.sidebar nav a{color:var(--nav-ink);font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 3px 0 0 #f59e0b}
/* The page band. A band that is only a title (a page's, a form's) sits on the page; a band that holds a record's facts (`.facts`: figures, people,
   a facts line, a plate, the stepper) is the navy band of base.css, white words on it (the navy identity). */
@media(max-width:700px){
.record-band:not(.facts){background:transparent;color:var(--ink);border-radius:0;padding:4px 0 6px;margin-bottom:16px;gap:10px}
.record-band:not(.facts) h1{color:var(--ink);font-size:28px;letter-spacing:-.02em}
.record-band:not(.facts) .back-link{color:var(--muted);font-weight:500;font-size:13.5px}
.record-band:not(.facts) .band-lede,.record-band:not(.facts) .band-meta{color:var(--muted)}
.record-band:not(.facts) .band-meta>span{display:inline-block}
.record-band:not(.facts) .band-row b{color:var(--ink)}
.record-band:not(.facts) :is(.band-lede,.band-meta,.band-row) a:not(.button):not(.badge):not(.back-link){color:var(--link);text-decoration:none}
.record-band:not(.facts) .band-actions :is(button,a.button,summary.button){background:#fff;border-color:var(--line-strong);color:var(--ink)}
.record-band:not(.facts) .band-actions :is(button,a.button,summary.button):hover{background:var(--soft)}
/* A ⋯ menu's items are actions, not links: ink like the menu's buttons, the soft background under the pointer (base.css); a danger item stays red. */
.record-band:not(.facts) .band-row .menu-list>a:not(.button):not(.badge):not(.danger){color:var(--ink)}
}
/* One record band (notes/design-system.md, Record band): a band that holds a record's facts carries `.facts` (platform/ui.ts recordBand) and is navy; on a
   phone its actions take the row under the title, one gap below it. A ⋯ menu's item may be a form of one button (Use credit). */
.menu-list>form{display:grid}
.menu-list>form>button,.record-band .band-actions .menu-list>form>button{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:6px;background:none;box-shadow:none;color:var(--ink);text-align:left;font-weight:500;white-space:nowrap}
.menu-list>form>button:hover{background:var(--soft)}
@media(max-width:700px),(pointer:coarse){.menu-list>form>button{min-height:44px}}
/* Cards and lists. */
.panel,.tabs{border-color:var(--line);box-shadow:var(--shadow)}
.panel{border-radius:var(--radius-l);padding:16px 18px}
.quiet-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l)}
/* A quiet list of lines (the job's work done in GaragePlug): the line in ink, its note small and on one line at the right. */
.quiet-panel .r>strong{font-weight:500}.quiet-panel .r>small{flex:none;white-space:nowrap}
/* A VIN is read character by character: where it does not fit beside its name it moves whole to the next line, never broken mid-word. */
/* A phone's row: 12 px between the name block and the figure beside it, so a long line under the name never touches the figure. */
/* A tablet's list (600-859 px wide; ux-web A6, uxr-web A2): the computer's one line a record on narrower tracks (ui.ts `--lr-t`): the lead (a plate),
   the meta and one figure each in their column beside the title; the age under the status in one column, the action under the amount in another.
   Several figures (a payer's age bands, `.figs-under`) take a second line across the row, each under its heading, so a long figure has room. */
/* On touch a linked figure's 44 px target reaches 16 px past its line: the figures under the title keep that apart from it. */
/* A status is a soft word, not a filled block; red, amber and green only where they mean something. */
.badge{padding:3px 9px;font:600 12px/1.25 var(--f-ui);box-shadow:none;background:var(--grey-soft);color:var(--grey-ink)}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.amber{background:var(--amber-soft);color:var(--amber-ink)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.navy{background:var(--navy-soft);color:#334155}
.badge.grey{background:var(--grey-soft);color:var(--grey-ink)}
/* Tabs: a line under the words, no box around them. */
.tabs{background:transparent;box-shadow:inset 0 -1px 0 var(--line);border-radius:0;padding:0;margin-bottom:16px}
.tabs a{min-height:42px;padding:6px 12px;font-weight:550;border-bottom-width:2px}
.tabs a:hover{background:transparent;color:var(--ink)}
.tabs a.active{border-bottom-color:#f59e0b;font-weight:650}
/* Filter chips: outline pills; the chosen one is dark. */
.filters a{border-radius:999px;background:#fff;border:1px solid var(--line-strong);color:var(--ink2);font-weight:550;box-shadow:none}
.filters a.active{background:var(--ink);border-color:var(--ink);color:#fff}
/* Tables: quiet headings in sentence case; figures line up. */
th{background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line)}
td{border-bottom-color:var(--line2);font-size:14px}
tr:hover>td{background:#fafafa}
/* A label and its value. */
.kv{border-bottom-color:var(--line2);font-size:14px}
.kv>:first-child{color:var(--muted)}
.home .panel .kv strong{font:650 15px var(--f-num)}
/* Tiles of figures: the label above, the figure big. */
/* The next step: amber only around the one thing to do now. */
.next-box{background:#fffbeb;border-color:#fcd34d}
/* Management's Home: what waits for you and the money first, the month's figures across, then the workshop's queues side by side. */
.home{gap:16px}
.home .inbox-card{border:1px solid var(--line);border-left:3px solid #f59e0b;border-radius:var(--radius-l);box-shadow:var(--shadow);padding:16px 18px}
@media(min-width:1100px){
  .home{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;grid-template-areas:"inbox inbox money" "fin fin money" "perf perf perf" "lpo next people"}
  .home>*>.panel,.home>*>.inbox-card{height:100%}
}
/* What the dark band wrote in white now reads on white. */
@media(max-width:700px){
.record-band:not(.facts) .payer-tag.is-business,.record-band:not(.facts) .payer-tag.is-customer{color:var(--ink2);border-color:var(--line-strong)}
.record-band:not(.facts) .payer-tag.is-insurance{box-shadow:none}
.record-band:not(.facts) .payer-claim{color:var(--ink2)}
.record-band:not(.facts) .band-initials{background:var(--soft);color:var(--ink2)}
}
/* The band's people line: its links already stand 44 px tall (inline-flex), so the phone's padding that lifts inline links to 44 px only
   spaces the lines apart; the rows sit close and centred. */
@media(max-width:700px){
.record-band:not(.facts) .band-row{align-items:center;row-gap:4px}
}
@media(max-width:700px),(pointer:coarse){.record-band .band-row a:not(.button):not(.badge){padding-block:0!important}}
@media(max-width:700px){
  .record-band h1{font-size:21px}
  .record-band:not(.facts) h1{font-size:22px}
  .record-band.facts{padding:14px 14px 16px;border-radius:14px}
  /* A job card on a phone: the plate with its status on the first line, the car's name whole on the next, the buttons under it; the name
     no longer wraps into three lines beside the plate. */
}
@media(max-width:700px){
.record-band:not(.facts) .badge.navy{background:var(--navy-soft);color:#334155}
}
/* ---------- Forms (owner, 2026-10-09: "formları 1990'lar gibi yapıyoruz"; 2026-10-10: one form page) ----------
   One field family (platform/ui.ts field, selectField, choiceField, the date and phone fields): a label of 13 px / 600 over its box, a hint
   of 12.5 px under it, one width per kind of box (an amount, a count and a date 240 px, a short code 160, a choice 480, words the whole
   row), "(optional)" on a form page's fields that are not required. One form page (sheetPage): the sections in one white card, each
   section's name in a narrow column on the left where the form has room (a desktop) and above its fields where it has not (a phone, or
   beside a bill's totals); one foot bar. A hand-built form (h3 + .grid) reads the same until it moves onto the form page. */
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
:is(label,fieldset) .hint,.grid .hint,.form-section :is(.hint,small.hint){font-size:12.5px;font-weight:400;color:var(--muted);margin-top:0;line-height:1.45}
.form-section label{font-size:13px}
/* A caption over a box a module builds itself (ui.ts caption outside a label): the field family's caption. */
:not(label)>.cap{font-size:13px;font-weight:600;color:var(--ink2)}
fieldset.choice>legend,.form-section fieldset.choice>legend{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink2)}
.form-section :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.picker-input){min-height:max(40px,var(--control));font-size:14px}
/* A phone or a touch screen: 16 px boxes, or iPhone's Safari zooms the page on every tap into a smaller one. */
@media(max-width:700px),(pointer:coarse){.form-section :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.picker-input){font-size:16px}}
.optional{display:none;font-weight:400;color:var(--muted)}
.form-page:has([required]) label>.cap>.optional{display:inline}
.form-page:has([required]) :is(td,details) label>.cap>.optional{display:none}
.grid{gap:20px 24px}
.grid input:is([inputmode=decimal],[inputmode=numeric]),.grid :is(.num-field,.date-field,.money-box){max-width:240px}
.grid input[inputmode=decimal]{text-align:right;font-variant-numeric:tabular-nums}
.grid .short-field>input{max-width:160px}
.grid select,.grid>label:has(>.picker),.grid input[type=email]{max-width:480px}
.grid input[type=tel]{max-width:280px}
input[type=file]{max-width:100%;min-width:0}
label.check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--radius);background:#fff;font-weight:500;color:var(--ink);line-height:1.4}
label.check+label.check{margin-top:8px}
label.check input{margin-top:2px}
form h3,form>h2{font-size:15px;font-weight:650;color:var(--ink);margin:4px 0 14px;letter-spacing:0}
form h3~h3,form>h2~h2{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
/* The form page's sections. */
.form-page .form-sections{display:block;container-type:inline-size;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:0 20px}
.form-page .form-sections.single{padding:18px 20px 20px}
.form-page .form-section{background:none;border-radius:0;box-shadow:none;overflow:visible;padding:18px 0 20px}
.form-page .form-section+.form-section{border-top:1px solid var(--line)}
.form-page .form-section>header{background:none;border:0;padding:0 0 14px;gap:10px;align-items:center}
.form-page .form-section>header h2{font:650 15px/1.3 var(--f-ui);color:var(--ink)}
.form-page .form-section>header>.num{width:22px;height:22px;border-radius:6px;background:var(--navy-soft);color:var(--ink2);font:650 12px/1 var(--f-ui)}
.form-page .form-section-body{padding:0;gap:14px}
/* Every section is named in the label column, a section holding a table of lines (a bill's items, an invoice's) too (lane polish-a), once
   the card leaves the table its room beside the label (1100 px); on a narrower card that section's name stays above the table. */
@container (min-width:860px){
  .form-page .form-section:not(:has(.lines)){display:grid;grid-template-columns:var(--form-label) minmax(0,1fr);column-gap:40px;align-items:start}
  .form-page .form-section:not(:has(.lines))>header{padding:1px 0 0;align-items:flex-start}
}
@container (min-width:1100px){
  .form-page .form-section:has(.lines){display:grid;grid-template-columns:var(--form-label) minmax(0,1fr);column-gap:40px;align-items:start}
  .form-page .form-section:has(.lines)>header{padding:1px 0 0;align-items:flex-start}
}
/* The two-column form (ui.ts sheetPage `columns`; Receive, the owner's layout of 2026-10-11): each numbered section a white card, the two
   columns from 900 px, below it one column in the sections' order; a section lays its fields in two columns once it is 520 px wide. */
.form-columns{display:flex;flex-direction:column;gap:12px}
.form-column{display:contents}
.form-columns .form-section-body>.grid{grid-template-columns:minmax(0,1fr);align-items:start}
.form-page .form-columns .form-section{container-type:inline-size;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:18px 20px 20px}
.form-columns .form-section>header{flex-wrap:wrap;gap:8px 10px}
.form-columns .form-section>header h2{flex:none}
.form-sum{flex:1;min-width:0;color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
@container (min-width:520px){.form-columns .form-section-body>.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(min-width:900px){.form-columns{display:grid;grid-template-columns:1fr 1fr;align-items:start}.form-column{display:grid;gap:12px;align-content:start;min-width:0}}
@media(max-width:700px){.form-page .form-columns .form-section{padding:16px}}
/* The one foot bar of a form, sticky at the foot of the screen while the form is in view: what saving does at the left, then a quiet Cancel,
   a secondary if there is one and the one amber button at the right; the form's one error line above them. A hand-built form's
   .actions at the foot of its panel is the same bar until it moves onto the form page. The page keeps room for the bar, so a field the
   browser scrolls to (the first wrong one, the one typed in) is never under it. */
.fp-bar,.panel>form:has(input:not([type=hidden]),select,textarea)>.actions:last-child,.panel>form>.grid+.actions{position:sticky;bottom:0;z-index:8;background:#fff;color:var(--ink2);border:1px solid var(--line);box-shadow:0 -6px 16px -8px rgba(17,24,39,.18);backdrop-filter:none}
.fp-bar{display:grid;gap:8px;margin:16px 0 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-radius:var(--radius-l)}
.panel>form:has(input:not([type=hidden]),select,textarea)>.actions:last-child,.panel>form>.grid+.actions{margin:24px -18px -16px;padding:12px 18px;border-width:1px 0 0;border-radius:0 0 var(--radius-l) var(--radius-l)}
/* A form with more after it in its panel (a supplier's Compare and its result): the bar is a band in the panel, not its foot, so nothing slides under it. */
.panel>form:not(:last-child)>.actions{position:static;margin-bottom:16px;border-bottom:1px solid var(--line);border-radius:0}
/* The sign-in page is one short form with its hint under it: its button is part of the page, not a bar that slides over the hint. */
main.portal-sign-in .panel>form:has(input)>.actions:last-child{position:static;margin:0;padding:0;border:0;box-shadow:none;background:none}
html:has(.fp-bar){scroll-padding-bottom:132px}
.fp-bar .actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;margin:0}
.fp-bar .fp-what{flex:1;min-width:0;margin:0;color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.fp-bar .fp-what b{color:var(--ink)}
.fp-bar .fp-what:empty{visibility:hidden}
.fp-bar .primary{flex:none;width:auto;min-height:44px;padding:0 22px;font-size:15px;font-weight:650;color:#fff}
.fp-bar .primary.danger{background:var(--red);border-color:var(--red)}
.fp-bar .error{margin:0;max-height:24vh;overflow:auto}
.fp-bar .error:not(:empty){background:var(--red-soft);color:var(--red);border:0;border-radius:var(--radius);padding:8px 12px;font-weight:600}
.fp-cancel,.actions>a:not(.button){display:inline-flex;align-items:center;min-height:var(--control);padding:0 12px;color:var(--ink2);font-weight:600;text-decoration:none}
@media(max-width:700px){
  .fp-bar{margin:16px -16px -14px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-radius:0}
  .fp-bar .actions{flex-wrap:wrap;gap:8px}
  .fp-bar .fp-what{flex:1 1 100%}
  .fp-bar .fp-what:empty{display:none}
  .fp-bar .primary{flex:1 1 auto;min-height:52px;padding:0 6px;border:0;border-radius:14px;box-shadow:none}
  .fp-bar .actions>:is(button,a.button):not(.primary):not(.text){min-height:52px;border-radius:14px;font-size:15px}
  .form-page .form-sections{padding:0 16px}.form-page .form-sections.single{padding:16px}
  /* The back link above the title, as on a desktop (base.css put them on one line). */
  .record-band.form-band{display:grid;gap:6px;padding:4px 0 6px}
}
/* A phone field (platform/ui.ts phoneField): the country code as a short select before the number. */
.phone-row>select{flex:0 0 128px;min-width:0}
/* A refused save's message at the top of a hand-built form (public/app.js `formMessage`), when it is about no one field; a form page puts it in its bar. */
.form-error{margin:0 0 14px;padding:10px 14px;border-radius:var(--radius);background:var(--red-soft);color:var(--red);font-weight:500}
/* A long badge (a receipt's Voided line) and a banner wrap inside a phone's width. */
.badge{max-width:100%}
p.badge,.banner{white-space:normal;overflow-wrap:anywhere}
@media(min-width:1000px){
  /* A long hand-built form: each section's name on the left, its fields on the right. */
  form:has(>:is(h2,h3)+.grid){display:grid;grid-template-columns:var(--form-label) minmax(0,var(--form-col));column-gap:48px;align-items:start}
  form:has(>:is(h2,h3)+.grid)>*{grid-column:2}
  form:has(>:is(h2,h3)+.grid)>:is(h2,h3){grid-column:1;margin:0;padding-top:2px}
  form:has(>:is(h2,h3)+.grid)>:is(h2,h3)~:is(h2,h3),form:has(>:is(h2,h3)+.grid)>:is(h2,h3)~:is(h2,h3)+*{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
  form:has(>:is(h2,h3)+.grid)>.actions{grid-column:1/-1}
}
/* On touch every control a finger hits is at least 44 px (notes/design-system.md, Phone and tablet). */
@media(pointer:coarse){
  :root{--control:44px}
  button,a.button,summary.button,input,select,textarea,.tabs a,.filters a,.filters>button,.actions>a:not(.button){min-height:44px}
}
/* A narrow row with a plate, a status and an age: the status takes the line under the plate, so nothing covers anything. */
/* Amounts (platform/ui.ts `field`, money): "AED" before the box, the figure right-aligned and grouped while the box is not being typed in. */
.money-box{display:flex;align-items:stretch;max-width:240px;min-width:0}
.money-box>.cur{display:flex;align-items:center;padding:0 10px;border:1px solid var(--box-edge);border-right:0;border-radius:var(--radius) 0 0 var(--radius);background:var(--soft);color:var(--muted);font-size:13px;font-weight:600}
.money-box>.num-field{flex:1;min-width:0}
.money-box>.cur+.num-field>input{border-top-left-radius:0;border-bottom-left-radius:0}
.money-box input,.lines-table .lc-money input{width:100%;text-align:right;font-variant-numeric:tabular-nums}
.num-field>.num-view{justify-content:flex-end;padding:0 12px;font-variant-numeric:tabular-nums}
label>.money-box{font-weight:400}
/* The picker over a long list (public/app.js `pickers`): the box looks like any other box. */
label>.picker,td>.picker{display:block;position:relative;min-width:0}
.picker>.picker-input{box-sizing:border-box;width:100%;max-width:none;padding-right:30px}
.picker::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.picker-list{font-weight:400}
.picker-option{min-height:40px}
.picker-option[aria-selected="true"]{background:var(--amber-soft)}
@media(pointer:coarse){.picker-option{min-height:44px}}
/* Lines (platform/ui.ts `linesTable`): one header, boxes without their own labels, Remove at the row's end, the totals under the figures. */
.lines{display:grid;gap:10px;min-width:0}
.lines-table{width:100%;border-collapse:separate;border-spacing:0}
.lines-table th{text-align:left;padding:0 6px 6px;font-size:12.5px;white-space:nowrap}
.lines-table thead th:first-child,.lines-table tbody td:first-child{padding-left:0}
.lines-table td{white-space:normal;padding:4px 6px;border:0;vertical-align:top;background:transparent}
.lines-table tr:hover>td{background:transparent}
.lines-table :is(input,select){width:100%;max-width:none}
.lines-table .lc-money,.lines-table .lc-out{width:150px;text-align:right}
.lines-table .lc-qty{width:76px}
.lines-table .lc-qty input{text-align:right}
.lines-table .lc-select{width:215px}
.lines-table .wide{width:auto;min-width:220px}
.lines-table .line-x{width:44px;padding-right:0;text-align:right}
.lines-table .line-remove{min-height:40px;width:40px;padding:0;font-size:22px;font-weight:400;line-height:1;color:var(--muted)}
.lines-table .line-remove:hover{color:var(--red);background:var(--red-soft)}
.line-out{display:flex;align-items:center;justify-content:flex-end;min-height:var(--control);padding:0 12px 0 0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.line-more>td{padding:2px 0 14px}
.line-more .grid{padding:12px 14px;border-radius:var(--radius);background:var(--tint);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.line-more .grid>.span2{grid-column:1/-1}
.line-more[hidden],.line-extra[hidden]{display:none!important}
.lines-table tbody+tbody>tr:first-child>td{border-top:1px solid var(--line2);padding-top:8px}
.lines-table tfoot th{background:transparent;text-align:right;padding:10px 6px 2px;color:var(--muted);font-weight:600;font-size:13px;border:0}
.lines-table tfoot td{padding:10px 18px 2px 6px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums;border:0}
.lines-table tfoot tr:first-child>*{border-top:1px solid var(--line)}
.lines-table tfoot tr:last-child output[data-total="gross"]{font-size:16px}
.lines-diff{margin:0;text-align:right;font-weight:600}
.lines-diff.ok{color:var(--green)}.lines-diff.bad{color:var(--red)}
.lines-diff:empty{display:none}
.lines-add{margin:0}
.lines-add[hidden]{display:none}
@media(max-width:760px){
  /* A phone: each line is a card, each box with its column's name over it. */
  .lines-table,.lines-table tbody,.lines-table tfoot{display:block}
  .lines-table thead{display:none}
  .lines-table tbody{position:relative;padding:12px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius-l);background:#fff}
  .lines-table tbody>tr:not(.line-more){display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-right:40px}
  .lines-table tbody+tbody>tr:first-child>td{border-top:0;padding-top:0}
  .lines-table tbody td{display:grid;gap:4px;padding:0;width:auto!important;min-width:0}
  .lines-table tbody td[data-label]::before{content:attr(data-label);font-size:12.5px;font-weight:600;color:var(--ink2);text-align:left}
  .lines-table tbody td.wide,.lines-table tbody td.lc-text,.lines-table tbody td.lc-select{grid-column:1/-1}
  .lines-table tbody td.line-x{position:absolute;top:4px;right:4px}
  .lines-table .line-more{display:block}.line-more>td{display:block;padding:10px 0 0}
  .line-more .grid{padding:10px;grid-template-columns:1fr}
  .line-out{justify-content:flex-start;padding:0}
  .lines-diff{text-align:left}
  .lines-table tfoot tr{display:flex;justify-content:space-between;align-items:baseline}
  .lines-table tfoot :is(th,td){display:block;padding:6px 0;border:0}
  .lines-table tfoot .lc-money{width:auto}
  .lines-table tfoot td:empty{display:none}
  .lines-table tfoot td[data-label]::before{content:attr(data-label) "  ";color:var(--muted);font-weight:600;font-size:12.5px}
  .lines-table tfoot tr:first-child>*{border-top:0}
}
.grid input[type=month]{max-width:240px}
/* Inside a job card's block: no box in a box (notes/design-system.md, Detail checklist 5). The quotation's items are rows of the block, the
   folds that add an item or a discount are quiet links with their chevron, and the totals are a short column at the right whose last line,
   the total with VAT, leads (product-definition: a retail price leads with the total including VAT). */
/* The job card's Activity reads as the Documents block above it: the same header, no empty room around one line. */
/* Brought over from GaragePlug is where a record came from, not a status: a quiet outlined mark, never green. */
.gp-badge,.board-row .gp-badge{background:none;color:#17703c;border:1px solid #17703c}
/* A report's total line: a long "Total of …" label wraps beside its amount on a phone instead of widening the page. */
@media(max-width:700px){.totals .grand>span{white-space:normal}}
/* A link inside a list row reads as a link by its colour, like every other link (the row itself opens the record). */
/* A document's totals: the labels grey, the figures in ink, the total with VAT the biggest line (it was as grey as the lines above it). */
.totals div>span:last-child{color:var(--ink)}
.totals .grand>span:first-child{color:var(--ink);font-weight:600;font-size:14px}
.totals .grand>span:last-child{font-size:18px;font-weight:700}
/* A narrow row whose only mark is its status and that has no amount (Finance's queues): the status sits at the right of the title, not on
   a line of its own above it. */
/* A table's rows as cards on a phone: a thin edge like every card (the prototype's blue edge was decoration); a late row keeps its red edge. */
/* A tablet's bar (701-1100 px) keeps one row: the search is its icon (its name is its label), so the company and the person fit beside it. */
@media(min-width:701px) and (max-width:1100px){
  .top-actions>.global-search-trigger{min-width:var(--control);width:var(--control);padding:0;justify-content:center}
  .top-actions>.global-search-trigger span{display:none}
}
/* Tabs wrap to a second line on a wide screen instead of scrolling sideways (base.css scrolls them); a tablet's section tabs are one row (below). */
@media(min-width:701px){.tabs{flex-wrap:wrap;overflow-x:visible}}
/* A fold opened from a job card's block: its opener stands as tall as any control. */
/* A line's quantity box stays wide enough to read and tap when the lines table shrinks on a tablet. */
.lines-table td.lc-qty>input:not([type=hidden]){min-width:56px}
/* Shared requests from lane formspeople (2026-10-09). A number in a table cell is a short box sized to its figure (the attendance hours
   took 280 px); a form or fold inside a cell wraps its words; a calendar button in a row's action stays its own size. */
td :is(form,details){white-space:normal}
/* A narrow row's action (base.css stretches every button of it to the full width): only the action itself stretches; a ⋯ menu and a
   calendar button keep their size, and a row whose only action is its ⋯ menu keeps it at the top right, as on a desktop. */
/* The attendance grid on a phone, used every day: one compact card a person, the name and job title on one line, the day's four pills and
   the overtime box on the row under it (it was about 240 px a person). */
@media(max-width:700px){
  :is(.attendance-kind,.attendance-part) .segmented{flex-wrap:nowrap;gap:4px}
  :is(.attendance-kind,.attendance-part) .seg{flex:1 1 auto;min-width:0}
  :is(.attendance-kind,.attendance-part) .seg>span{width:100%;padding:4px 6px;font-size:13px;white-space:nowrap}
}
/* An Absent day's part (lane halfday, 2026-10-09: Full day, Half day, Quarter day): its pills show only while Absent is chosen, beside the
   day's pills on a desktop and under them on a phone. */
td:has(>.attendance-kind input[value="Absent"]:not(:checked)) .attendance-part{display:none}
.attendance-part{margin-top:6px}
.attendance-part .segmented{flex-wrap:nowrap;gap:4px}
.attendance-part .seg>span{min-height:32px;padding:4px 10px;font-size:13px;white-space:nowrap}
.attendance-part .seg>input:checked+span{background:var(--red-soft);border-color:var(--red);color:var(--red);font-weight:600}
@media(pointer:coarse){.attendance-part .seg>span{min-height:44px}}
@media(min-width:701px){td>.attendance-kind:has(+.attendance-part),td>.attendance-part{display:inline-block;vertical-align:middle;margin:0 12px 0 0}}
/* A link inside a row's line under the title (a count's number, a supplier's bill) is a link in a sentence: it keeps its size and does not
   spill past the line's edge, which the touch rule's wider hit area did (app.css). The row itself is the large target. */
/* A date box is always wide enough for dd/mm/yyyy, whatever the row it sits in (the Activity log's filter cut it to "dd/mm/yyy"). */
.date-field>input.date-text:not([type=hidden]){min-width:7.6em}
/* Management's Waiting for you: a white card with the amber edge (look.css above), not an amber block; each item's word is a quiet
   secondary button like every other, and only the first, the most urgent, is the amber action. */
.home .inbox-card:not(.is-empty){background:#fff;border:1px solid var(--line);border-left:3px solid #f59e0b;border-radius:var(--radius-l);padding:16px 18px}
.home .inbox-card:not(.is-empty) .item{border-top-color:var(--line2)}
.home .inbox-card:not(.is-empty) .go{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink);box-shadow:var(--shadow);font-weight:600}
.home .inbox-card:not(.is-empty) .item:first-of-type .go{background:var(--amber);border-color:var(--amber);color:#fff}
.home .inbox-card .count-pill{background:var(--amber-soft);color:var(--amber-ink)}
/* A health check accepted at go-live, its figure unchanged (platform/health.ts `isAccepted`): last and uncounted, in calm grey words, never
   the amber action; Home's health panel gives it a grey badge. */
.home .inbox-card .item.is-accepted strong{font-weight:500;color:var(--ink2)}
.home .inbox-card .item.is-accepted .go{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);font-weight:500}
/* A list inside a panel is the panel's rows, not a second box inside it (Detail checklist 5: Search's groups). */
/* A link in a list's group heading (Parts waiting for a bill: the job card) is a full touch target; the heading does not grow around it. */
@media(max-width:760px){.lines-table tbody td.lc-out:has(>output:empty){display:none}}
.lines-table output{white-space:nowrap}
/* A select in a line holding a short choice (the VAT rate, 5%) is as wide as its words, not the column's 215 px (sales5). */
.lines-table .lc-select select{width:auto;min-width:96px;max-width:100%}
/* A More filters fold's pill row takes the fold's whole width, so the pills wrap as one row (sales5, Documents). */
/* A row's plate never shrinks under its own width (settings6: it covered the job number beside a wide status). */
/* Finance's Home on a phone: the queues with work in them (an empty queue waits on a desktop, where the list has room), then the chosen
   queue's list with the selected job's detail under it, then the queue's figure (UX review 2026-10-11, 22: the work first). */
@media(max-width:700px){
  .desk-queue.is-zero:not(.on){display:none}
  .desk-layout{display:flex;flex-direction:column;align-items:stretch}.desk-layout>*{width:auto;max-width:none;min-width:0}
  .desk-layout>.desk-queues{order:0}.desk-layout>.desk-work{order:1}
}
/* The bar's search on a desktop shows its whole hint (it was cut to "… invoic…" at 360 px). */
@media(min-width:1101px){.top-actions>.global-search-trigger{max-width:none;min-width:0}.top-actions>.global-search-trigger span{overflow:visible;text-overflow:clip}}
/* A phone's list row draws only the figures it has (people7: the slots kept for a desktop's columns pushed Paid under Earned). */
/* A phone's figures under their small names: each name on the first line, whatever the figure ("—" or an amount), so the names never zig-zag (ux-web A3). */
/* On a wider list each row's figures share one baseline, a linked figure (its 44 px touch area) and a "—" alike. */
/* A choice inside a line's extra fields is as wide as a picker (Job card part ran 1,100 px across a bill). */
.line-more :is(select,.picker){max-width:480px}
/* workshop5 (2026-10-09). The job card's next step on a phone: the same white foot bar as every form (the menu is the one dark surface),
   clear of the phone's home bar. */
/* The board's stage chips on a phone: tighter pills, so the five fit on two rows; they wrap and never scroll sideways (Phone and tablet 5). */
/* A board column is as wide as a card list needs: one payer's column is not a 1,100 px list. */
@media(min-width:701px){.board-col{max-width:440px}}
/* A printed job card's section headings. */
.print-document .print-section{margin:20px 0 8px;font-size:15px}
/* A page that is one form in one panel (Pay supplier's and Receive money's first step, a supplier's details) is a readable column, not a
   1,170 px strip with its one box at the left and its button at the far right. */
@media(min-width:1000px){.main>.panel:has(>form:only-child):not(:has(table,.lines)){max-width:880px}}
/* Label and value rows: the labels as wide as the longest one, the values right after them (a 42% column left "Paid to" 500 px from its
   supplier on a desktop). */
@media(min-width:701px){.record-facts{grid-template-columns:minmax(120px,240px) minmax(0,1fr);column-gap:32px}}
/* A fold's chevron turns at once: its turn animated on every page load for a fold drawn open, and a screenshot or a slow phone caught it
   half way (a garbled hook beside Spend money). */
details>summary::before{transition:none!important}
/* A row's figures under their small labels (Aged receivables): a long label ("Cheques not cleared") takes two lines inside its own column
   instead of running into the next, and every figure sits on the row's bottom line. */
.lr-fig{justify-content:flex-end}
.lr-fig small{white-space:normal;text-align:right;line-height:1.2;overflow-wrap:normal}
/* Label and value rows keep one unbroken hairline per row: the room between label and value is the label's own padding. */
@media(min-width:701px){.record-facts{column-gap:0}.record-facts dt{padding-right:32px}}
/* A Details panel reads as the record's other panels: its heading the panels' size and case, and on a wide screen each value right after its
   label instead of 1,100 px away at the far edge. A quotation's totals keep their right-hand column. */
.quiet-panel>:is(h2,h3){margin:0 0 10px;font:650 16px/1.3 var(--f-ui);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
/* Heading levels (lane a11y): the prototype's styles bound to h3 and h4 also hold for the levels the real product writes. */
.quiet-panel h2{text-transform:none}
.desk-queues h3{font:600 11.5px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 10px 6px}
@media(max-width:1000px){.desk-queues h3{display:none}}
.board-col h2{position:sticky;top:0;z-index:1;margin:0;padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:15px;border-radius:7px 7px 0 0;background:var(--ins);color:#fff}
.board-col h2 b{flex:1;min-width:0}
.board-col h2>span{color:#fff;font-weight:700}
/* The board's stage strips are h3 inside a column (lane a11y): the stage strip, not the column's coloured head. */
.board-col h3.board-stage{position:sticky;top:41px;z-index:1;padding:6px 12px;font-size:13px;color:var(--ink);background:var(--stage-bg);border-radius:0}
/* Finance's Home: the row whose job is open beside the list (home8). */
/* A job card fact's own action (Edit beside the claim number) is a full touch target. */
/* mgmtphone (390 px). A row with no amount gives its title the whole line; a filter row's date takes its own line, its calendar beside it;
   a result panel that is only its header has no empty band under it; a card's first cell is not held at 160 px. */
@media(max-width:700px){.toolbar>label:has(>.date-field){flex:1 1 100%}.toolbar>label>.date-field{display:flex}.toolbar>label>.date-field>input{flex:1}}
.panel:has(>.panel-header:only-child){padding-bottom:0}.panel>.panel-header:only-child{margin-bottom:0}
/* Section page (platform/ui.ts sectionPage; notes/design-system.md, Section page): the tab bar sits in the same place on every tab, the tab's
   figures under it, one filter row, the list, the foot. A list's header row names its columns once; a row never repeats the name. */
.tabs a .n{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:#e3e7ee;color:var(--ink2);font:600 12px/18px var(--f-num);vertical-align:1px}
.tabs a.active .n{background:var(--amber-soft);color:var(--ink)}
.section-filters{margin:0 0 16px}
.section-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.section-foot>:only-child{margin-left:auto}
/* A figure's heading wraps at its spaces when its column is narrow (Aged Receivables at 1024, FX3), never over the next one. */
.page-band>.band-row{min-height:42px}
@media(pointer:coarse),(max-width:700px){.section-foot a:not(.button){display:inline-flex;align-items:center;min-height:44px}}
@media(min-width:701px) and (max-width:900px){.lines-table .lc-select{width:165px}.lines-table .wide{min-width:130px}}
/* Forms finish (lane forms-finish, 2026-10-10). */
/* A choice (pills) that can be left unanswered says "(optional)" in its legend, like a field's caption. */
.form-page:has([required]) fieldset>legend>.optional{display:inline;font-weight:400;color:var(--muted)}
/* A small heading inside a form section (reception's Registration and Vehicle). */
.sub-heading{margin:16px 0 0;font-size:13px;font-weight:700}
/* Three or more tabs are the Section menu on a phone (public/app.js `tabMenus`, design-system.md Phone and tablet 5): never a sideways scroll or a second row. */
.tab-menu-btn{display:none}
@media(max-width:700px){
  .tab-menu{margin-bottom:12px}
  .tab-menu-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;text-align:left;background:#fff}
  .tab-menu-label{font-size:12px;font-weight:400;color:var(--muted)}
  .tab-menu-btn strong{flex:1;min-width:0;font-size:14px;font-weight:650;overflow-wrap:anywhere}
  .tab-menu-chev{font-size:16px;line-height:1;transition:transform .15s}
  .tab-menu[data-expanded="true"] .tab-menu-chev{transform:rotate(180deg)}
  .tab-menu>nav.tabs{display:none;margin:0}
  .tab-menu[data-expanded="true"]>nav.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:6px 0 0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;overflow:visible}
  .tab-menu>nav.tabs a{display:flex;align-items:center;min-height:44px;padding:8px 10px;white-space:normal;overflow-wrap:anywhere;border:0;border-left:3px solid transparent;border-radius:var(--radius-s)}
  .tab-menu>nav.tabs a.active{border-left-color:var(--amber);background:var(--navy-soft)}
}
/* A back link keeps a space between its arrow and its label (the link is a flex row, which drops the space in the markup). */
.back-link{gap:.35em}
/* The final settlement statement: the signature lines stand clear of the figures above them. */
.signatures{margin-top:24px}
/* A quick action on a record page (platform/ui.ts quickForm): hidden until the band's "⋯" (or a row's link) points at it, then a panel in the field
   family with the form page's bar, which stands in the panel instead of sticking to the screen. */
.quick-form{display:none;scroll-margin-top:72px;margin:0 0 16px}
.quick-form:target,.quick-form.is-open{display:block}
.quick-form .fp-bar{position:static;margin:16px 0 0;padding:12px 0 0;background:none;border-width:1px 0 0;border-radius:0;box-shadow:none}
.quick-form .fp-bar .fp-what:empty{display:none}
/* What this car was charged before, offered on the item page: pills above the form. */
/* A kept document's form opens under its line. */
.gp-use>.quick-form,.doc-list li>.quick-form{flex:1 1 100%;margin:8px 0 0;padding:0;border:0;box-shadow:none;background:none}
.doc-list li:has(>.quick-form:target){flex-wrap:wrap}.doc-list li>.quick-form h2{font-size:14px}
/* A picker option with a first line (data-head): the car's plate and name bold, the owner, phone and VIN grey under it. */
.picker-main:has(>small){display:grid;gap:2px}.picker-main>b{font-weight:650;color:var(--ink)}.picker-main>small{color:var(--muted);font-size:12.5px}
/* The "Saved." and "issued" confirmation is a toast over the page, so nothing moves when it comes and goes (Detail checklist 9). */
[data-flash]{position:fixed;z-index:60;bottom:16px;right:16px;max-width:min(420px,calc(100vw - 32px));margin:0;box-shadow:var(--shadow-pop);transition:opacity .3s}
@media(max-width:700px){[data-flash]{left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:none}}
/* The phone's bar (web/layout.ts `phoneBar`): a page below another shows "‹ Parent" at the bar's left and not the link in the page; a page
   whose heading says what the bar says drops the heading, so the same words are not said twice. The title takes a second line before it is cut; the back
   label stays on one line and ends in an ellipsis (its whole text is in the link's title), so the bar keeps its 56 px. */
@media(max-width:700px){
  .topbar-title{white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .topbar-back{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:44px;padding:0 8px;font-size:17px;font-weight:650;color:#fff;text-decoration:none}
  .topbar-back>span{font-size:26px;line-height:1;margin-top:-3px}
  .topbar-back>bdi{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;line-height:1.4}
  .record-band>p:is(.back.in-bar,.section-back){display:none}
  .band-head:has(>h1.title-dup:only-child){display:none}
  h1.title-dup{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Finance's Home: a row with an age and an amount (no lead, status or menu) keeps the age on the title's baseline, at the right of the title,
   and the amounts share one right edge; the detail's figures too (they stacked the age above the amount and left-aligned the figures). */
.desk-detail .kv{grid-template-columns:minmax(0,1fr) auto}
.desk-detail .kv>:last-child{justify-self:end;text-align:right;font-variant-numeric:tabular-nums}
/* The payroll draft: every figure and box sits on the employee's name line (baseline of the first line, not the middle of a two-line cell), the
   overtime hours and amount stay on one line, and on a phone a card's captions (Pay total included) are 12 px, not 10.5. */
/* A statement's tables (the lines, the totals, the aged line) sit one step (16 px) apart, not touching. */
.statement-document>.muted{margin:12px 0 0}
/* A record band's actions that do not fit beside the title at tablet width (a customer's five) drop under it, wrapping, as on a phone. */
/* The bar's back link is the phone's; a tablet and a desktop keep the link in the page. */
@media(min-width:701px){.topbar-back{display:none}.record-band>p.back.in-bar{display:block}}
/* Printed documents (print polish, 2026-10-10; design-system.md Print): one block for everything a document needs on paper. The shared part
   (screen and paper) styles the pieces a document adds; the print part is A4 only. */
@media screen,print{
  .void-mark{display:none}
  /* The company's logo at the top left of every document, about 40 px high (owner, 2026-10-13). */
  .document-header{flex-direction:column;gap:8px}
  .document-header .document-logo{height:40px;width:auto;max-width:240px;max-height:none}
  .certificate-signatures{margin-top:36px;break-inside:avoid}
  .sign-purpose{margin:0 0 28px}
  .sign-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;align-items:end}
  .sign-grid p{margin:0;font-size:12.5px;color:var(--muted)}
  .sign-space{display:block;height:24mm;border-bottom:1px solid var(--ink);margin-bottom:4px}
  @media print{
    .no-print{display:none!important}
    /* Page x of y and (`pageRef`) the document's name on every page of a document; every printed page has them. */
    @page{@bottom-right{content:"Page " counter(page) " of " counter(pages);font:8.5pt Inter,sans-serif;color:#555}@bottom-left{font:8.5pt Inter,sans-serif;color:#555}}
    /* The same two columns as on screen: the phone rules must not fire at 186 mm. */
    .print-document .invoice-parties{grid-template-columns:1fr 1fr}
    /* Long documents: the description keeps its width, the figures fit their content; the totals and the footer stay together. */
    .item-table th:first-child{width:46%}
    .item-table td:not(:first-child),.item-table th:not(:first-child){white-space:nowrap}
    .totals{break-after:avoid}
    /* The totals never sit alone on a page: the last row of the table above them goes with them. */
    .document-footer{break-before:avoid}
    /* A statement and a payslip are on the page, not in a card: no frame. */
    :root .statement-document{border:0!important;box-shadow:none!important;border-radius:0!important;background:none!important}
    /* A voided receipt reads as void on any copy: across the page, and its amount struck through. */
    .void-mark{display:block;position:fixed;left:0;right:0;top:34%;text-align:center;font-size:150pt;font-weight:800;letter-spacing:.08em;color:rgba(0,0,0,.12);-webkit-text-stroke:2px rgba(0,0,0,.35);transform:rotate(-28deg);pointer-events:none}
  }
}
/* ux2-management */
.workshop-strip{display:flex;gap:24px;align-items:baseline}
.workshop-strip b{font:700 20px var(--f-num);color:var(--ink);margin-right:2px}
.home .inbox-card .item .go,.home .inbox-card:not(.is-empty) .item:first-of-type .go,.home .panel-header a{display:inline-flex;align-items:center;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--link);font:600 13px/1.2 inherit;font-family:inherit}
.home .inbox-card .item.is-accepted .go{color:var(--muted);font-weight:500}
@media(min-width:1100px){
  .home{grid-template-areas:"inbox inbox inbox" "fin money lpo" "perf perf perf" "next people people"}
}
/* ux2-advisor */
/* H2: the one next step of a job card for this role (Waiting for Finance) is an amber-edged line, not a hint. */
/* H1: the band's own facts stay; the car's (VIN, service due, sticker) sit behind one fold. */
@media(max-width:700px){
  /* P2: a customer is three lines: name · phone, plate · car, job · state; no empty row. */
  /* UX 21: a figure is shown with its label only where there is one, the amount owed first; an empty cell is not. */
}
@media(max-width:700px){
  .today-band{padding:0!important;min-height:56px;display:flex;align-items:center}
  .today-band .band-head{display:none}
  .today-band .workshop-strip{flex:1;gap:0;margin:0}
  .today-band .workshop-strip a{flex:1;display:flex;align-items:baseline;justify-content:center;gap:6px;min-height:56px;padding:0 8px;margin:0}
  .home .inbox-card .item .go,.home .panel-header a{min-height:44px}
  .page-band .band-head:has(>.band-actions>:only-child){flex-wrap:nowrap}
  .page-band .band-head>.band-actions:has(>:only-child){width:auto;margin-left:auto;flex:none}
  .page-band .band-head>.band-actions:has(>:only-child)>:is(a.button,button){flex:none}
}
.home .home-a-fin{align-self:stretch}
/* Users on a phone: one row of 64 px (name and who, access, Try as); how a person signs in and when are on their own page. */
.home .inbox-card .item{min-height:44px}
/* ux2-finance */
/* One filter row (Section page rule 3): a chooser and chips sit on one line. */
/* Pay selected and Receive selected appear when a row is ticked. */
#bills-pay button{display:none}
body:has(input[form="bills-pay"]:checked) #bills-pay button{display:inline-flex}
/* A tick in a table's first column sits centred on its row. */
td>input[type=checkbox]:only-child{display:block;margin:0 auto 0 0}
td:has(>input[type=checkbox]:only-child){vertical-align:middle}
.desk-detail .record-facts dd{text-align:right;font-variant-numeric:tabular-nums}
/* Payroll draft rows: 56 px, the sub line 2 px under the name, the boxes centred on the row. */
/* On touch the name's 44 px target reaches over the sub line instead of pushing it 14 px down (uxr-web A6). */
/* A row's note (dataTable `notes`: a payroll line's WPS warning) on a full-width line under its row; on a phone at the foot of the row's card. */
/* The flattened card lists (app.css: a line between rows) draw no line between a row and its note. */
/* A statement's tables sit in the document card without borders of their own. */
/* The advisor's tab bar has four tabs on Job Cards (the page holds the Receive buttons). */
/* Card action links ("Open →", "Check →", "Open the queue →") get a 44 px hit area on touch, the text unchanged. */
@media(pointer:coarse),(max-width:820px){.inbox-card a.item{min-height:44px}.home .panel-header>a,.home .inbox-card .item .go{min-height:44px;display:inline-flex;align-items:center}}
/* polish (UX walk 2 leftovers, 2026-10-10) */
/* A customer row on a phone: the plate and the open job keep their 44 px hit area without 16 px of padding around it (three lines, no blank one). */
/* The claim number on the job card's navy band reads like the band's other facts (uxr-web A5: it kept the light page's grey, 2.7:1). */
/* A phone's customer row is one link: the car and the open job are plain words, no 44 px targets of their own (uxr-phone B7). */
/* ux-fix (2026-10-10, ux-fix2). Tiles: a figure never runs past its tile; on a phone every tile has one layout, its name above its figure, whatever the name's length. */
/* A row's ⋯ slot: an action without a menu keeps the menu's place, so every row's action ends at the same edge. */
/* A card with a tick box (Invoices, Bills): the tick sits beside the number on the first row with the due text at the right; the plate and the pill
   take the row under it, the amount at the right. */
/* The top bar's search on a desktop: a box with the results under it; below 1101px the icon opens the search page (look.css, UX review 3). */
.top-search{display:none}
@media(min-width:1101px){
  .top-actions>.global-search-trigger{display:none}
  .top-search{position:relative;display:flex;align-items:center;gap:8px;width:min(460px,36vw);height:44px;padding:0 10px;border-radius:var(--radius);background:#24344c;color:#cdd5e0}
  .top-search input{flex:1;min-width:0;height:36px;padding:0;border:0;background:transparent;color:#fff;font:inherit;box-shadow:none}
  .top-search input::placeholder{color:#aab4c3}
  .top-search-results{position:absolute;top:calc(100% + 6px);right:0;width:min(560px,60vw);max-height:70vh;overflow:auto;padding:4px 12px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop);z-index:70}
  .top-search-results .panel{margin:8px 0 0;padding:0;border:0;box-shadow:none}
  .top-search-results[hidden]{display:none}
  /* The search page draws no second box once the top bar's box holds the query (web review A18; layout.ts gives it value="q"). */
  body:has(.top-search input[value]) .search-find{display:none}
}
/* A section that folds (platform/ui.ts fold): the one details chevron (base.css) is its marker. */
.fold-panel>summary{cursor:pointer;list-style:none}.fold-panel>summary::-webkit-details-marker{display:none}.fold-panel>summary h2{display:inline;margin:0}.fold-panel[open]>summary{margin-bottom:8px}
.next-box+.panel,.next-box+.quiet-panel{margin-top:16px}
/* UX 26: the tick-rows hint of Sales and Purchases is one line, left, the same inside the list (it was right-aligned on Sales). */
#bills-pay{display:flex;justify-content:flex-start;align-items:center;gap:12px;margin:0 0 8px;padding:0}
#bills-pay>.muted{margin:0;text-align:left}
/* A long chip (a price-history suggestion) wraps inside the screen instead of running past it. */
.filters>a{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* A status pill is never wider than its column: a long one (Over 14 days: was due 01/09/2026) wraps inside the cell instead of running over the next column. */
/* A row's meta text wraps on a wide screen too, never cut with an ellipsis (a bank line's long note read "Cash for the fin…"). */
/* Payroll as cards on a tablet: the table's fixed 56 px cell height (above) must not apply, or the small line under a name spills onto the next row's label. */
/* ============================================================================================================================================
   The navy identity and the phone shell (owner, 2026-10-11; notes/phone-prototype.html, Look 1). The tokens are at the top of this file.
   Web (701 px and up): the top bar is a navy band like the side menu. Phone (up to 700 px): a large navy title with the person's initials on a
   tab's root page (the account opens as a sheet), a navy bar with "‹ Parent" on a page below another, one bottom bar per role (web/layout.ts
   `tabBar`), bottom sheets for a quick action and for More. Components for the screens built on it: `.sheet`, `.segmented`, `.tiles` with `.ar-*`
   tints, the sticky `.fp-bar`, `.lrows` groups.
   ============================================================================================================================================ */
.tab-bar,.sheet,.sheet-grab,.sheet-close,.phone-only,.ws-ini{display:none}
.sheet-head{display:contents}
/* Tinted figure tiles: a cool tint, no box; an area gives its own tint (`.ar-work`, `.ar-sales`, `.ar-people`, `.ar-bank`, `.ar-buy`, `.ar-acc`, `.ar-home`). */
.ar-work{--x:var(--a-work);--x-soft:var(--a-work-soft)}.ar-sales{--x:var(--a-sales);--x-soft:var(--a-sales-soft)}.ar-people{--x:var(--a-people);--x-soft:var(--a-people-soft)}
.ar-bank{--x:var(--a-bank);--x-soft:var(--a-bank-soft)}.ar-buy{--x:var(--a-buy);--x-soft:var(--a-buy-soft)}.ar-acc{--x:var(--a-acc);--x-soft:var(--a-acc-soft)}.ar-home{--x:var(--a-home);--x-soft:var(--a-home-soft)}
/* The segmented control (platform/ui.ts `segmented`): at most one per screen, 44 px, the chosen one white. */
.segmented{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--seg-bg)}
.segmented>:is(a,button){flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:none;box-shadow:none;color:var(--ink2);font-weight:600;text-decoration:none;text-align:center}
.segmented>.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,24,39,.12)}
.segmented small{color:var(--muted);font-weight:500}
/* ---- web: the top bar is a navy band ---- */
@media(min-width:701px){
  .topbar{background:var(--band);border-bottom:0;color:#fff}
  .topbar-company{color:var(--band-sub)}.topbar-company strong{color:#fff}
  .topbar :is(a.button,button,.workspace-menu>summary){background:var(--band-chip);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
  .topbar :is(a.button,button,.workspace-menu>summary):hover,.topbar .workspace-menu[open]>summary{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.32)}
  .top-actions>a.help-button,.global-search-trigger{color:#fff}
  .top-search{background:var(--band-chip)}
  .workspace-options{color:var(--ink)}
  .workspace-options .button{background:#fff;border-color:var(--line-strong);color:var(--ink)}
  .workspace-options>p small{display:block;font-size:12px;color:var(--muted)}
  .topbar .top-receive>summary{background:var(--amber);color:#fff}
}
/* ---- phone ---- */
@media(max-width:700px){
  :root{--bar:52px}
  .topbar.has-back~.main .lst thead th{top:var(--bar)}
  [id]{scroll-margin-top:calc(var(--bar) + 12px)}
  body{background:var(--bg)}
  .sidebar,.topbar .module-menu,.topbar .top-actions>:is(.global-search-trigger,.help-button,.other-company){display:none!important}
  /* A tab's root page: the large title on a navy band. A page below another: the navy bar with "‹ Parent". */
  .topbar{background:var(--band);color:#fff}
  .topbar:not(.has-back){position:static;height:auto;min-height:0;align-items:flex-start;padding:max(12px,env(safe-area-inset-top,0px)) 16px 14px}
  .topbar:not(.has-back) .topbar-title{padding:0;font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.01em;display:block;overflow:visible;-webkit-line-clamp:unset}
  .topbar.has-back{height:var(--bar)}
  .topbar-back{color:var(--band-sub)}
  .topbar-back>bdi{color:#fff}
  .top-actions{align-self:flex-start}
  .topbar.has-back .top-actions{display:none}
  .topbar .workspace-menu>summary{width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--band-chip);color:#fff;font:700 14px/1 var(--f-ui);justify-content:center}
  .ws-ini{display:inline;letter-spacing:.02em}.ws-name{display:none}
  /* The root band runs into its first figure band. */
  .main{padding:14px 16px 32px}
  .main:has(>.record-band.facts:first-child){padding-top:0}
  .main>.record-band.facts:first-child{margin:0 -16px 16px;border-radius:0 0 24px 24px;padding:2px 20px 22px}
  #app[data-shell] .main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* The bottom bar, five slots; the page below another and a form page hide it (their own foot bar owns the thumb). */
  .tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--band);padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #2a3b5e}
  .tab-bar>a,.tab-bar>.tab-receive>summary{display:grid;justify-items:center;align-content:start;gap:2px;min-height:48px;padding:5px 0 0;border:0;border-radius:0;background:none;box-shadow:none;color:#a4b3cf;font:600 10.5px/1.2 var(--f-ui);text-decoration:none;list-style:none;cursor:pointer}
  .tab-bar>a.on{color:#fff}.tab-bar>a.on svg{stroke-width:2.1}
  .tab-bar>.tab-receive{position:relative}
  .tab-bar>.tab-receive>summary::-webkit-details-marker{display:none}
  .tab-bar>.tab-receive>summary::before,.tab-bar>.tab-receive>summary::after{content:none;display:none}
  .tab-bar .plus{width:46px;height:46px;margin-top:-20px;border-radius:50%;background:#fff;color:var(--band);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.28)}
  .tab-bar .plus+span{margin-top:-2px}
  .tab-bar :is(a,summary):focus-visible{outline-color:#fff}
  #app:has(.topbar.has-back,.job-page,.fp) .tab-bar{display:none}
  #app:has(.topbar.has-back,.job-page,.fp) .main{padding-bottom:32px}
  /* A pushed page with a record's foot bar keeps the bar's room under its content (the last link was under the bar: lane same-3). */
  #app:has(.topbar.has-back) .main:has(.foot-record){padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .tab-receive-list{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);display:grid;gap:6px;width:max-content;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(11,31,59,.28)}
  .tab-receive-list>a{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--amber);color:#fff;font-weight:700;text-decoration:none}
  /* A bottom sheet: the More sheet, a quick action (platform/ui.ts quickForm) and the account. Its dim ground is the sheet's own shadow; a tap
     outside, Close and the phone's back close it (public/app.js). */
  :is(.sheet:target,.quick-form:target,.workspace-menu[open]>.workspace-options){position:fixed;inset:auto 0 0 0;z-index:60;display:block;width:auto;max-width:none;max-height:86dvh;margin:0;overflow-y:auto;overscroll-behavior:contain;
    padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));background:#fff;border:0;border-radius:18px 18px 0 0;box-shadow:0 0 0 100vmax rgba(15,26,43,.5);color:var(--ink)}
  body:has(.sheet:target,.quick-form:target,.workspace-menu[open]){overflow:hidden}
  .sheet-grab{display:block;width:36px;height:5px;margin:0 auto 10px;border-radius:3px;background:#c4cddc}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
  .sheet-head h2{margin:0;font-size:18px;font-weight:700}
  .sheet-close{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:16px;font-weight:600;color:var(--link);text-decoration:none}
  .quick-form:target .fp-bar{position:static}
  .quick-form:target>.sheet-head{margin-top:0}
  .menu-group h3{margin:14px 4px 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .menu-group ul{margin:0;padding:0;list-style:none;background:#fff}
  .menu-group li+li{border-top:1px solid var(--line2)}
  .menu-group a{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 4px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
  .menu-group a svg{flex:none;width:22px;height:22px;color:var(--link)}
  .sheet .menu-group:last-child{margin-bottom:0}
  /* The account sheet: who, then the list. */
  .workspace-options{gap:0}
  .workspace-options>p{display:grid;gap:2px;padding:6px 4px 10px;margin:0 0 4px;border-bottom:1px solid var(--line2);font-size:13px;color:var(--muted)}
  .workspace-options>p strong{font-size:18px;font-weight:700;color:var(--ink)}
  .workspace-options :is(a.button,button),.workspace-options form{display:flex;width:100%}
  .workspace-options :is(a.button,button){justify-content:flex-start;min-height:52px;padding:0 4px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:none;box-shadow:none;color:var(--ink);font-size:16px;font-weight:600}
  .workspace-options form:last-child>button{color:var(--red);border-bottom:0}
  .phone-only{display:flex}
}
/* ---------- The web in navy (lane webnavy, owner 2026-10-11: Look 1 for the phone AND the web) ----------
   From 701 px up (a phone, 700 px and under, keeps its own bands above): the top bar and every page's band are one navy surface that runs from
   the top of the screen; the tabs sit in it, and the page's first figures are tinted tiles that start inside the band and run out of it.
   A band bleeds to the screen's edges by its own shadow, so the page column keeps its width. */
@media screen and (min-width:701px){
  :root{--ground:#eef2f8;--panel-head:#f3f6fb;--row-hover:#f4f7fc;--edge-nav:#d5deec;--bleed:0 0 0 100vmax var(--band)}
  .sidebar{background:#0f1a31}
  .topbar{border-bottom:0;background:var(--band)}
  .main{padding-top:0}
  .main:not(:has(.record-band)){padding-top:20px}
  .main>.banner{margin-top:16px}
  .record-band{position:relative;background:var(--band);color:#fff;border-radius:0;margin:0 0 24px;padding:20px 0 26px;box-shadow:var(--bleed);clip-path:inset(0 -100vmax);gap:10px}
  .record-band h1{color:#fff;font-size:28px;letter-spacing:-.02em}
  .record-band .back-link{color:var(--band-sub);font-weight:500;font-size:13.5px}
  .record-band .back-link:hover{color:#fff}
  .record-band .band-lede,.record-band .band-meta{color:var(--band-sub);font-size:14.5px}
  .record-band .band-row b{color:#fff}
  .record-band :is(.band-lede,.band-meta,.band-row) a:not(.button):not(.badge):not(.back-link){color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:2px}
  .record-band .band-actions :is(button,a.button,summary.button){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:none}
  .record-band .band-actions :is(button,a.button,summary.button):hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
  .record-band .band-actions :is(button,a.button).primary{background:var(--amber);border-color:#d97706;color:#fff}
  .record-band .band-actions :is(button,a.button).primary:hover{background:#92400e;border-color:#d97706}
  .record-band .menu-list{color:var(--ink)}
  .record-band .band-row .menu-list>a:not(.button):not(.badge):not(.danger){color:var(--ink);text-decoration:none}
  .record-band .badge{box-shadow:none}
  .record-band .band-initials{background:var(--band-chip);color:#fff}
  .record-band .payer-tag.is-business,.record-band .payer-tag.is-customer{color:#fff;border-color:rgba(255,255,255,.4)}
  .record-band .payer-claim{color:var(--band-sub)}
  .record-band:has(+ :is(.tab-menu,nav.tabs)){margin-bottom:0;padding-bottom:4px;clip-path:inset(0 -100vmax -2px)}
  .record-band:has(.tiles){padding-bottom:22px}
  .record-band:has(.tiles):has(+ :is(.tab-menu,nav.tabs)){padding-bottom:18px}
  /* Tabs: part of the band, white words, an amber line under the page you are on (a record's two or three tabs too: web review A23). */
  :is(.tab-menu>nav.tabs,.record-band+nav.tabs){background:var(--band);border-radius:0;box-shadow:var(--bleed);clip-path:inset(0 -100vmax);margin:0 0 24px;padding:6px 0 0;position:relative;overflow:visible}
  :is(.tab-menu>nav.tabs,.record-band+nav.tabs) a{color:var(--band-sub);border-bottom:3px solid transparent;min-height:44px;padding:8px 14px;font-weight:550}
  :is(.tab-menu>nav.tabs,.record-band+nav.tabs) a:hover{background:transparent;color:#fff}
  :is(.tab-menu>nav.tabs,.record-band+nav.tabs) a.active{color:#fff;border-bottom-color:#f59e0b;font-weight:650}
  :is(.tab-menu>nav.tabs,.record-band+nav.tabs) a .n{background:rgba(255,255,255,.16);color:#fff}
  .tab-menu:has(+ .tiles.section)>nav.tabs,.record-band+nav.tabs:has(+ .tiles.section){padding-bottom:34px;margin-bottom:0}
  .workshop-strip{gap:12px}
  .record-band .band-meta.workshop-strip a:not(.button):not(.badge):not(.back-link){text-decoration:none}
  .record-band .workshop-strip a{display:inline-flex;align-items:baseline;gap:6px;margin:0!important;padding:8px 16px!important;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:14px}
  .record-band .workshop-strip a:hover{background:rgba(255,255,255,.2)}
  .record-band .workshop-strip b{color:#fff;font-size:20px}
  }
/* The web's surfaces (lane webnavy): white cards on the tinted ground with a navy-tinted edge and a soft lift; list headings, groups and the row under the pointer
   in the pale navy tints; the chosen chip navy; one amber action in a band (a second `primary` reads as a secondary). */
@media screen and (min-width:701px){
  .panel,.quiet-panel,.form-sections,.form-page .form-sections,.form-page .form-columns .form-section,.pf-panel,.lst{border-color:var(--edge-nav);box-shadow:0 1px 2px rgba(20,33,61,.05),0 8px 20px -14px rgba(20,33,61,.25)}
  thead th{background:var(--panel-head)}
  tr:hover>td{background:var(--row-hover)}
  .filters a.active{background:var(--chip-on);border-color:var(--chip-on)}
  .filters a:not(.active):hover{background:var(--tile);border-color:var(--line-strong)}
  .panel>h2,.panel-header h2,.quiet-panel>h2,.pf-head h2,section:not(.panel,.quiet-panel,.board-col)>h2{color:var(--navy)}
  .record-band .band-actions :is(button,a.button).primary:not(.wf-p)~:is(button,a.button).primary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
  .record-band .band-actions :is(button,a.button).primary:not(.wf-p)~:is(button,a.button).primary:hover{background:rgba(255,255,255,.2)}
  /* Today's and Finance's first card run out of the band like a record's figures do. */
  .record-band:is(.today-band,:has(~ .desk-layout),:has(~ .off-phone .desk-layout)){padding-bottom:46px;margin-bottom:0}
  .today-band+.home,.desk-layout{position:relative;z-index:2;margin-top:-28px}
  body .jc-rows>li>a.m:not(.button):not(.badge){display:grid;align-content:center;min-height:44px}
}
/* A page printed from the screen (a report) keeps its title on white. */
@media print{.record-band{background:none;color:#000;border-radius:0;padding:0 0 8px;box-shadow:none}.record-band :is(h1,.band-lede,.band-meta,.back-link,.band-row b){color:#000}}
/* webfix (lane webfix, 2026-10-11, the web review audit/webqa): the desktop rules below are all inside min-width:701px; the phone is not touched. */
/* The calendar's chooser is anchored by its hidden input: it sits over the calendar button, so the browser opens the picker under that button. */
/* A wide screen and the phone each show their own markup where they differ (the phone is designed apart): .wf-phone is the phone's, .wf-desk the wide screen's. */
.wf-phone{display:contents}.wf-desk{display:none}
.month-native{display:none}.month-field{display:flex;gap:8px;align-items:center;min-width:0}
@media screen and (max-width:700px){.wf-d{display:none!important}}
@media screen and (min-width:701px){
  .wf-p{display:none!important}
  .wf-phone{display:none}.wf-desk{display:contents}
  .date-field>.date-native{left:auto;right:0;top:0;bottom:auto;width:40px;height:100%}
  button[hidden]{display:none!important}
  /* Menus inside a band escape its clip and sit above the tiles that run out of it: the band's full-width navy is drawn by a pseudo-element
     behind it (it was a spread shadow inside a clip-path, which cut the menus off). One layer up, so the record's tabs right under a short
     band (a new bank account's) do not cover its ⋯ menu's last items. */
  .record-band{box-shadow:none;clip-path:none;z-index:1}
  .record-band::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vmax;right:-100vmax;background:var(--band);pointer-events:none}
  .record-band:has(+ :is(.tab-menu,nav.tabs)){clip-path:none}
  html,#app{overflow-x:clip}
  .sidebar{z-index:25}
  .record-band:has(details[open]){z-index:20}
}
@media screen and (min-width:701px){
  /* Job Cards board: the payers side by side, sharing the width down to 236 px each; past that the board scrolls sideways inside its own
     area (never the page), with its own height so the column heads and stage bands stay sticky; a fade at the edge with more behind it says
     it scrolls (owner, 2026-10-15: every payer must be reachable; the columns that flowed down, ux-web A1, put the insurers under a long B2C
     column out of sight). A header keeps one line (the whole name in its title); a car's name wraps. */
  .board-col{flex:1 0 236px}
  .job-board{background:linear-gradient(to right,var(--ground,#eef2f8),rgba(238,242,248,0)) 0 0/40px 100% no-repeat local,linear-gradient(to left,var(--ground,#eef2f8),rgba(238,242,248,0)) 100% 0/40px 100% no-repeat local,linear-gradient(to right,rgba(20,33,61,.22),rgba(20,33,61,0)) 0 0/12px 100% no-repeat scroll,linear-gradient(to left,rgba(20,33,61,.22),rgba(20,33,61,0)) 100% 0/12px 100% no-repeat scroll}
  .board-col h2 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .board-row .br-car{display:block}
  .board-row .br-name,.board-row .br-year{display:inline;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .board-row .br-name{margin-right:.3em}
  /* Lines: the quantity heading sits over its box, and the boxes' columns line up with their headings. */
  .lines-table th.lc-qty{text-align:right;padding-right:12px}
}
@media screen and (min-width:1101px){
  /* One section header on every tab: the tabs stay in one row (they scroll when there are too many for the width; a tablet wraps them instead, nothing is hidden behind a scroll). */
  .tab-menu>nav.tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .tab-menu>nav.tabs::-webkit-scrollbar{display:none}
}
@media screen and (min-width:701px){
  /* The band is as deep on a tab without figures as on one with them. */
  :is(.tab-menu>nav.tabs,.record-band+nav.tabs) a{flex:none;white-space:nowrap;padding-inline:12px}
  .tab-menu:not(:has(+ .tiles.section))>nav.tabs{padding-bottom:20px;margin-bottom:24px}
}
@media screen and (min-width:701px) and (max-width:1100px){
  /* The rail keeps the company's mark (its name is in the bar) and the person's role. */
  .topbar .workspace-role{display:inline}
}
@media screen and (min-width:701px){
  /* The app's own month field: a month and a year in the same boxes as every select. */
  .month-field>select:first-child{min-width:9.5em}
  .month-field>select:last-child{min-width:6em}
  /* Payroll: the draft's one amber Save draft in the foot bar. */
  .fp-bar .actions .primary{white-space:nowrap}
}
@media screen and (min-width:701px){
  /* A table in a card has no edge, tint or lift of its own: the card is the edge. A list's tick is a bare tick, not a box in the row. */
}
@media screen and (min-width:701px){
  /* Management Home: cards flow by their content; none is stretched to its neighbour's height, and the 1024 layout has no empty column. */
  .home{align-items:start}
  .home>*>.panel,.home>*>.inbox-card{height:auto}
}
@media screen and (min-width:701px) and (max-width:1099px){
  .home{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"inbox inbox" "fin money" "lpo next" "perf perf" "people people"}
}
@media screen and (min-width:701px){
  /* A card under a form page's bar keeps its distance; Refund deposit stands in the row's action column, inside the card's padding. */
  form.fp+.panel,form.fp+section.panel{margin-top:16px}
  /* Payroll's Save draft, amber like every foot bar's one action. */
}
@media screen and (min-width:701px){
  /* A document's totals stand apart from the items table; a fold whose action is destructive (Void bill) reads in red. */
  details.inline-form:has(button.danger)>summary{color:var(--red)}
}
@media screen and (min-width:701px){
  /* Registration: the emirate, the plate code and the number on one row. A placeholder is plainly grey, never a typed value. */
  .grid:has(>label input[name=plate_code]){grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
  input::placeholder{color:#8b95a5}
}
@media screen and (min-width:701px){
  /* Settings → Company and every form grid: one baseline per row, the TRN as wide as its neighbour, captions one height. */
  .form-section .grid{align-items:start}
  .form-section .grid>label>.cap,.form-section .grid>label.phone-field>.cap{display:block;line-height:18px;min-height:18px}
  .form-section .grid input[name=trn]{max-width:none}
  .form-section :is(input,select,textarea){margin-block:0}
}
@media screen and (min-width:701px){
  .nw{white-space:nowrap}
  /* A status pill never breaks into two lines; the settings foot bar that only holds its button is just the button. */
  .badge{white-space:nowrap}
  .fp-bar:has(.actions>button:only-child):not(:has(.fp-what:not(:empty),.cancel,.error:not(:empty))){background:transparent;border:0;box-shadow:none;pointer-events:none}
  .fp-bar:has(.actions>button:only-child):not(:has(.fp-what:not(:empty),.cancel,.error:not(:empty))) button{pointer-events:auto;box-shadow:0 6px 16px -6px rgba(10,20,45,.45)}
}
@media screen and (min-width:701px){
  /* People: a count of documents to fix is amber on each row (the chip above carries the one count); red is for what is late. */
}
@media screen and (min-width:701px){
  .desk-queues .health-line-only{margin:10px 0 0;padding:10px 12px 0;border-top:1px solid var(--line2);font-size:13px}
}
@media screen and (min-width:701px){
  /* A form page's last field is never left under its sticky bar. */
  form.form-page{padding-bottom:24px}
}
@media screen and (min-width:701px) and (max-width:1100px){
  /* A tablet: tighter tabs, and the Customers columns leave the status pill its room. */
  .main :is(.tab-menu>nav.tabs,.record-band+nav.tabs) a{padding-inline:9px}
  /* Tabs that do not fit stay one row that scrolls (uxr-web B8: Accounting's eight); app.js brings the chosen one into view. */
  .main :is(.tab-menu>nav.tabs,.record-band+nav.tabs){flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
}
/* A loss in Performance's band is red, also when it shrank. */
/* A bar's name on Performance wraps rather than ending in dots at 360 px (phone review A14). */
.pf-wait{min-height:44px}
.pf-bar-head .pf-name{white-space:normal;overflow-wrap:anywhere}
/* Health's "Open →" of a check is a row a finger hits (phone review A17). */
/* ACC (lane acc, 2026-10-13): the accounting tables (Trial Balance, P&L, Balance Sheet, Chart, Journals) as dense as Xero's reports:
   rows about 36 px and one-line headings (report-views.ts `dense`); a report's Balanced chip sits in line with its date fields. */
.acc-chip{display:inline-flex;align-items:center;min-height:var(--control)}
/* The job card (web review package 4). A part's actions are small buttons on its line with their quick form under them, and the parts not
   needed fold under their count (A14); on a tablet the meta stays one wrapping line, its items spaced instead of dotted (A24); a file's
   picture that cannot be drawn shows the picture icon, any other file its kind's icon (B5). */
.jc-rows .act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.jc-rows .act>.quick-form{order:1;flex:1 1 100%;margin:4px 0 0}
@media(pointer:coarse),(max-width:700px){.jc-rows .act>a.button{display:inline-flex;align-items:center;min-height:44px}}
.jc-fold{border-top:1px solid var(--line2)}
.jc-fold>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--muted);font-weight:600}
:is(.dc-pic,.jt-pic).icon{position:relative;overflow:hidden}
:is(.dc-pic,.jt-pic)>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Drawn only when the picture fails (a broken image shows its pseudo-element): the picture icon over the broken-image glyph. */
:is(.dc-pic,.jt-pic)>img::before{content:"";position:absolute;inset:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 38'%3E%3Crect x='2' y='7' width='26' height='24' rx='3' fill='%23f3f4f6' stroke='%239ca3af'/%3E%3Ccircle cx='10' cy='14' r='2.5' fill='%239ca3af'/%3E%3Cpath d='M4 28l8-9 5 5 4-4 6 8z' fill='%239ca3af'/%3E%3C/svg%3E") center/30px 38px no-repeat}
.dc-pic>img::before{background-size:22px 28px}
/* One filter row (design-system.md Section page 3; ux-web A20), the same whatever a tab passes into `sectionPage`'s filters: the state chips
   first, then More filters, then a date ("As at" beside its box), a search at the right end; one line where they fit. More filters, once open,
   takes the whole row under them. */
@media screen and (min-width:701px){
  :is(.section-filters){display:flex;flex-flow:row wrap;align-items:center;gap:8px 12px}
  :is(.section-filters)>*{margin:0;order:3}
  .section-filters>.filters{order:1;flex:0 1 auto}
  :is(.section-filters)>.account-filters{order:2}
  :is(.section-filters)>:is(form:has(input[type=search])){order:4;margin-left:auto}
  .section-filters>form.toolbar>label:has(>.date-field){display:inline-flex;flex-direction:row;align-items:center;gap:8px}
}
/* A tile's figure stays on one line with its currency (design-system.md Phone and tablet 7; ux-web A4): the tile is a container, and a figure
   too long for it shrinks to fit (ui.ts `tileFigure` gives its length as --n; about 0.64 em a character), never below 13 px. */
/* Home's health line: the badge wraps inside its card, and "Open Health →" keeps its arrow (ux-web A5). */
.health-line-only .badge{white-space:normal;max-width:100%}
/* A choice's grey track hugs its options instead of running the field's whole width (ux-web A21); a phone keeps it full width for the thumb. */
@media screen and (min-width:701px){fieldset.choice>.segmented{justify-self:start;max-width:100%}}
/* Management's Today on a computer and a tablet (ux-web A22): what waits for you across the top, then the cards flow down columns at least
   300 px wide by their own height (no card stretched, no hole under a short one); every card one label and value layout, the label on the
   left taking the room, the figure at the right; colour only where it means something. */
@media screen and (min-width:701px){
  .home{display:block;columns:3 300px;column-gap:16px}
  .home>*{break-inside:avoid;margin:0 0 16px}
  .home>.home-a-inbox{column-span:all}
  .home .panel .kv,.home .panel a.kv{grid-template-columns:minmax(0,1fr) auto}
  .home .panel .kv>:nth-child(2){justify-self:end;text-align:right}
  .home .panel .kv .up{color:inherit}
}
@media screen and (min-width:701px) and (pointer:coarse){.home .panel a.kv{grid-template-columns:minmax(0,1fr) auto auto}}
/* The board's By payer · By stage switch sits at the right of the stage chips (web review B4). */
/* A list's extra choices beside its chips, where one row has room for them; narrower, the search finds the same (people/views.ts). */
@media screen and (min-width:701px){.board-view .segmented{margin:0}}
@media screen and (min-width:701px){.job-board.by-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.job-board.by-stage>.board-col{margin:0}.board-view .segmented a{white-space:nowrap}}
/* A form page of one section (Edit job card, Add part, Record LPO) is as wide as its fields need, not the whole screen (web review B8); a form
   with a table of lines, a list (Attendance, the payroll draft) or a side summary keeps the width. */
@media screen and (min-width:1000px){form.form-page:not(:has(.form-section~.form-section,.lines,>.lst)),form.form-page:has(.form-columns){max-width:var(--form-col)}}
/* PW (lane pw, 2026-10-13; second phone review, package P3): on a phone a job part's ⋯ (Not needed) sits at the right of its line, not on a line
   of its own; Claim & LPO is one line per fact, the name at the left (B2); a car's facts give the VIN room to stay on one line at 360 px (A16). */
@media screen and (max-width:700px){
  .jc-rows>li:has(>.act>details.menu){grid-template-areas:"m x" "c c"}
  .jc-rows>li:has(>.act>details.menu)>.act{margin-top:0}
  .jc-facts{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px}
  .jc-fact{grid-column:1/-1;grid-template-columns:subgrid}
  .jc-fact .k{grid-column:auto;font-size:13.5px}
}
/* FH · A figure never cuts (phone review A2), where the tile figure rule above does not reach, on a phone: the hero steps down below 420 px,
   and a key figure in AED steps down with its tile (AED 2,281,969.50 of receivables ran past Performance's tile at 360 px). */
/* ONE LOOK: figure tiles (ui.ts `tiles`; notes/design-system.md, The page standard: one base and its variations). The base: a pale navy tile
   in the page's flow, its label small, the figure big on one line (shrinking to the tile's width, `--n`, rather than breaking), "AED" small
   before it, a note under it. Tones: red, green and amber colour the figure; `ar-*` tints the tile by the part of the product it opens
   (Home, Performance); `st-*` by a job's stage. `wide` takes two columns. Variations by where the row sits: `section` (under the band's tab bar,
   starting inside the band, lifted off it) and `band` (glass inside a record's navy band). */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 16px}
.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1001px){.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;border:1px solid transparent;border-radius:var(--radius-l);background:var(--tile);color:var(--ink);text-decoration:none;container-type:inline-size}
.tile.wide{grid-column:span 2}
a.tile:hover{border-color:var(--line-strong);text-decoration:none}
.tile>span{color:#465167;font-size:13px;font-weight:500}
.tile>b{color:var(--ink);font:700 26px/1.15 var(--f-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal}
.tile>b>.fig{font:inherit;color:inherit;font-size:max(13px,min(1em,calc(100cqi / (var(--n) * .64))));white-space:nowrap}
.tile>b>.fig small:not(.cur){display:block;white-space:normal;font:600 12.5px/1.3 var(--f-ui);letter-spacing:0}
.tile.words>b{font-size:18px;white-space:normal}.tile.words>b>.fig{font-size:inherit;white-space:normal}
small.cur{font-size:max(12px,.46em);font-weight:600;letter-spacing:0;opacity:.75}
.tile>small{color:#465167;font-size:13px}
.tile .warn,.tile .neg{color:var(--red);font-weight:600}
.tile.red>b{color:var(--red)}.tile.green>b{color:var(--green)}.tile.amber>b{color:var(--amber)}
.tile[class*="ar-"]{background:var(--x-soft)}.tile[class*="ar-"]>span{color:var(--x)}
.tile.st-1{background:#e6eaf0}.tile.st-2{background:var(--stage-wip)}.tile.st-3{background:var(--green-soft)}
.tiles.section>.tile{border-color:rgba(20,33,61,.08);box-shadow:0 8px 20px -8px rgba(10,20,45,.35)}
.tiles.band{margin:6px 0 0}
.tiles.band>.tile{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff}
.tiles.band>.tile>b,.tiles.band>.tile small a{color:#fff}
.tiles.band>.tile>span,.tiles.band>.tile>small,.tiles.band small.cur{color:var(--band-sub)}
.tiles.band>a.tile:hover{background:rgba(255,255,255,.18)}
.tiles.band>.tile.red>b,.tiles.band .neg{color:#ffb4a9}.tiles.band>.tile.green>b{color:#86e0a8}.tiles.band>.tile.amber>b{color:#fbd38d}
.tiles.band>:only-child{max-width:380px}
@media screen and (min-width:701px){.tiles.section{position:relative;z-index:1;margin:-28px 0 20px}}
@media(max-width:700px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tiles>.tile:last-child:nth-child(odd),.tile.wide{grid-column:1/-1}
  .tile{padding:12px 14px}
  .tile>b{font-size:20px}
  .tiles.band>:only-child{max-width:none}
}
/* The one list (platform/ui.ts `list`, `filterRow`; notes/design-system.md, The page standard 2; lane one-list, 2026-10-15). Every list of the
   product is drawn by these rules and no other: the card, the header row, a row, a cell's two lines, the empty dash, a status pill, a row's
   action, the foot band, the note line, the pager and Download. A variation (data-variant: plain, money, pick, report) only adds a slot: the
   tick column and the selection bar (pick), the totals in the foot band (money, pick, report), a group's row and a subtotal (report). Last
   in the last file, so a page never restyles a list; a list never needs a rule of its own. */
/* The filter row: chips first, then the choice or From and To, the search at the right end; one line, wrapping only when it does not fit. */
.flt{display:flex;flex:1 1 auto;min-width:0;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.flt>*{margin:0}
/* A section's own chips (Accounting's report choice) lead the same line. */
.section-filters:has(>.flt){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.section-filters>:is(.flt,.filters){margin:0}
@media(max-width:700px){.section-filters:has(>.flt){display:block}.section-filters>.filters{margin:0 0 10px}}
@media(pointer:coarse){.flt select{min-height:44px}.lst-note a{display:inline-flex;align-items:center;min-height:44px}}
.flt .filters{margin:0;flex-wrap:wrap}
.flt form{display:flex;align-items:center;gap:8px;margin:0}
.flt form>label,.flt .ml-dates>label{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0;white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted)}
.flt form>label>select{width:auto;font-size:14px;font-weight:400;color:var(--ink)}
.flt .date-field{width:128px;gap:0}
.flt .date-field>input.date-text:not([type=hidden]){width:100%;min-width:0;padding:0 28px 0 9px;font-size:13.5px}
.flt .date-field>.date-pick{position:absolute;right:1px;top:1px;bottom:1px;width:30px;min-width:30px;min-height:0;height:auto;border:0;background:none;box-shadow:none}
@media(pointer:coarse){.flt .date-field{width:156px}.flt .date-field>input.date-text:not([type=hidden]){padding-right:46px}.flt .date-field>.date-pick{top:0;bottom:0;right:0;width:44px;min-width:44px}.lst-dl{display:inline-flex;align-items:center;min-height:44px}}
.flt .flt-search{margin-left:auto}
.flt .flt-search label{display:block;margin:0}
.flt .flt-search input{width:240px;max-width:100%;min-height:38px;padding:0 12px 0 34px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px center;font-size:14px}
/* The card. */
.lst{margin:0;background:var(--surface);border:1px solid var(--edge-nav,var(--line));border-radius:var(--radius-l);box-shadow:var(--shadow)}
/* Inside a record's section (a panel, itself the one white card) the list is that card's content: no card of its own. */
.panel .lst{border:0;border-radius:0;box-shadow:none;background:none}
.panel .lst :is(thead th,tfoot td){border-radius:0!important}
@media print{.lst{box-shadow:none}.lst thead th{position:static}.lst-dl,.lst-pager{display:none}}
.lst>table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;white-space:normal;text-align:left}
/* The header row: tinted, small and grey, one line; sorting headings are links of the same look. */
.lst thead th{position:sticky;top:0;z-index:2;height:40px;padding:0 12px;background:var(--soft);border:0;border-bottom:1px solid var(--line);color:var(--muted);font:600 12.5px/1.3 var(--f-ui);letter-spacing:0;text-transform:none;text-align:left;white-space:nowrap;vertical-align:middle}
.lst thead th:first-child{border-top-left-radius:var(--radius-l)}
.lst thead th:last-child{border-top-right-radius:var(--radius-l)}
.lst thead th a{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:none}
.lst thead th a:hover,.lst thead th[aria-sort] a{color:var(--ink)}
/* A row: one height for a one-line row, the same padding in every cell. */
.lst tbody td{height:48px;padding:8px 12px;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--ink2);font:400 14px/1.4 var(--f-ui);vertical-align:middle;overflow-wrap:break-word;white-space:normal;text-align:left}
.lst tbody tr:last-child>td{border-bottom:0}
.lst tbody tr{position:relative}
.lst tbody tr:hover>td{background:var(--row-hover,#f5f8fc)}
.lst tbody tr:is(:has(>td.ck input:checked),.is-selected)>td{background:var(--amber-soft)}
.lst tbody tr.is-selected>td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
/* The first cell is the row's title; its link opens the record and covers the row. */
.lst tbody td.ph-title:first-child,.lst tbody td.ck+td{color:var(--ink);font-weight:650}
/* A title that is a link of its own (an account's code, a person's name) reads as the title, not as a blue link. */
.lst tbody td:is(.ph-title:first-child,.ck+td) a:not(.button,.badge){color:inherit;font-weight:inherit}
.lst .lst-open{color:var(--ink);text-decoration:none}
.lst .lst-open::after{content:"";position:absolute;inset:0}
.lst .lst-open:hover{text-decoration:underline}
.lst tbody td :is(a,button,input:not([type=radio]),select,label,details,summary,form){position:relative;z-index:1}
.lst tbody td .lst-open{position:static}
/* A cell's second line: muted and smaller. */
.lst td small{display:block;margin-top:2px;color:var(--muted);font-size:13px;font-weight:400;line-height:1.35}
/* A link holding both lines stacks them: on a touch screen it is a 44 px flex box (base.css), which would set the second line beside the first. */
.lst tbody td>a:not(.button):not(.badge):has(>small){flex-direction:column;justify-content:center;align-items:flex-start}
/* Figures: right-aligned, tabular, on one line. */
.lst :is(th,td).num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal}
.lst td.num small{white-space:normal}
/* An amount typed in a row (a credit note's credit, a count) is as wide as an amount, at the right of its cell like the figures. */
.lst td>input:is([inputmode=decimal],[inputmode=numeric]){display:block;max-width:160px;margin-left:auto;text-align:right}
.lst .money{white-space:nowrap;font-variant-numeric:tabular-nums}
/* The empty cell. */
.lst .nil{color:var(--muted)}
/* A status pill. */
.lst .badge{white-space:nowrap}
.lst :is(.plate,.nw){white-space:nowrap}
.lst td .late{color:var(--red);font-weight:600}
/* A row's action: one quiet button at the right; a ⋯ menu beside it. */
.lst td.act{text-align:right;white-space:nowrap;width:1%}
.lst td.act>*{vertical-align:middle}
.lst td.act :is(a.button,button,summary.button){min-height:30px;padding:4px 12px;font-size:13.5px}
.lst td.act>*+*{margin-left:6px}
/* A row's action that asks first (ui.ts rowForm): the same quiet button; its small form opens under it, over the rows below. */
.row-form{position:relative;display:inline-block}
.row-form>summary{list-style:none}
.row-form>summary::-webkit-details-marker{display:none}
/* A summary drawn as a button (a row action, Adjust) is a button: no fold arrow. */
details>summary.button::before{content:none}
.row-form>.row-form-box{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(300px,calc(100vw - 32px));padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-pop,0 8px 24px rgba(17,24,39,.16));text-align:left;white-space:normal}
.row-form>.row-form-box form{display:grid;gap:10px;margin:0}
.row-form>.row-form-box button{justify-self:end}
@media screen and (max-width:700px){.row-form>.row-form-box{left:0;right:auto}}
/* The tick column (variation pick). */
.lst .ck{width:48px;padding:0 0 0 8px}
.lst tbody td.ck{height:48px}
.lst label.check{display:grid;place-items:center;min-height:40px;min-width:40px;padding:0;margin:0;border:0;background:none;box-shadow:none}
.lst label.check input{width:20px;height:20px;margin:0;accent-color:var(--navy)}
.lst thead label.check{min-height:32px}
/* A warning under its row. */
.lst tr.lst-rownote>td{height:auto;padding:0 12px 10px;color:var(--amber-ink);font-size:13px}
.lst tr:has(+tr.lst-rownote)>td{border-bottom:0}
/* A report's group and subtotal (variation report). */
.lst tr.lst-group>th{height:36px;padding:6px 12px;background:var(--tint);border-bottom:1px solid var(--line2);color:var(--ink);font:650 13px/1.3 var(--f-ui);text-align:left}
.lst tr.lst-group>td{background:var(--tint);border-bottom:1px solid var(--line2);font-weight:650}
.lst tr.subtotal>td{font-weight:650;color:var(--ink);border-top:1px solid var(--line)}
/* The foot band: the count of the view, and its totals under their columns. */
.lst tfoot td{height:44px;padding:8px 12px;background:var(--soft);border:0;border-top:1px solid var(--line);color:var(--ink);font:650 14px/1.4 var(--f-ui);white-space:nowrap}
.lst tfoot td:first-child{border-bottom-left-radius:var(--radius-l)}
.lst tfoot td:last-child{border-bottom-right-radius:var(--radius-l)}
.lst tfoot b{font-weight:650}
/* The foot under the card: the note line at the left, the pager, Download at the right end. */
.lst-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 0}
.lst-note{flex:1 1 320px;margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.lst-note>p{margin:0}
.lst-pager{display:flex;align-items:center;gap:8px;margin-left:auto}
.lst-pager>span{margin-right:4px;color:var(--muted);font-variant-numeric:tabular-nums}
.lst-dl{margin-left:auto;font-weight:600;white-space:nowrap}
.lst-pager+.lst-dl{margin-left:0}
.lst-sort{display:none}
.lst tr[hidden]{display:none!important}
/* A tablet leaves out the columns marked wide; a printed list keeps them. */
@media screen and (max-width:1100px){.lst .wide{display:none}}
@media(max-width:1100px) and (pointer:coarse){.lst thead :is(th a,label.check){min-height:44px;min-width:44px}.lst td.act :is(a.button,button,summary.button){min-height:44px}}
/* A phone: each row two lines, as the money lists had them: the title (the first column and any column marked title, joined by a dot) and the
   figure at its right; then the muted line (the titles' second lines and the other columns, joined by dots) and the state at its right; a
   row's action or field under them; a tick at the left of both lines. The header row is hidden; the foot band is one line, the count and the total. */
@media screen and (max-width:700px){
  .flt{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:10px}
  /* The phone's filter chips: one look whatever their number, the one row of pills that scrolls sideways (lane polish-a). */
  :is(.flt,.section-filters)>.filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 2px;scrollbar-width:none}
  :is(.flt,.section-filters)>.filters::-webkit-scrollbar{display:none}
  :is(.flt,.section-filters)>.filters>a{flex:none;white-space:nowrap;max-width:none}
  .flt .ml-dates{display:none}
  .flt .flt-search{margin:0}
  .flt .flt-search label{flex:1 1 auto}
  .flt .flt-search input{width:100%;min-height:44px;font-size:16px}
  .lst-sort{display:block;margin:0 0 10px}
  .lst-sort select{width:auto;min-height:44px;font-size:15px}
  .lst>table,.lst tbody,.lst tfoot{display:block;width:100%}
  .lst thead{display:none}
  .lst tbody tr,.lst tfoot tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:3px;padding:12px 14px;border-bottom:1px solid var(--line2);color:var(--muted);font-size:13.5px;line-height:1.4}
  .lst tbody tr:has(>td.ck){padding-left:52px}
  .lst tbody tr:last-child{border-bottom:0}
  .lst tbody tr::after{content:"";order:3;flex:0 0 100%;height:0}
  .lst tbody td{display:block;height:auto;padding:0;border:0;background:none!important;min-width:0;text-align:left;font-size:inherit;color:inherit;overflow-wrap:break-word}
  .lst tbody td.is-nil,.lst tbody td.ph-none,.lst td.wide{display:none}
  .lst tbody td.ck{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:auto;padding:0;z-index:2}
  .lst tbody td.ph-title{display:contents;color:var(--ink);font-weight:650;font-size:15px}
  .lst tbody tr td.ph-title>a.lst-open:not(.button){display:contents}
  .lst tbody td.ph-title :is(*:not(small,small *)){order:1}
  .lst tbody td.ph-title+td.ph-title::before{content:"·";order:1;color:var(--ink);font-weight:650;font-size:15px}
  .lst tbody td.ph-title small{order:4;display:block;margin:0;font-weight:400}
  .lst tbody td.ph-fig{order:2;margin-left:auto;color:var(--ink);font-weight:650;font-size:15px;white-space:nowrap}
  .lst tbody td.ph-fig small{display:none}
  .lst tbody td.ph-line{order:4}
  .lst tbody td.ph-line small{display:inline;margin-left:4px;font-size:inherit}
  .lst tbody td.ph-line~td.ph-line::before,.lst tbody tr:has(td.ph-title small) td.ph-line::before,.lst tbody td.ph-title small~small::before,.lst tbody td.ph-title:has(small)~td.ph-title small::before{content:"· "}
  .lst tbody td.ph-line.num[data-label]::before{content:attr(data-label) " "}
  .lst tbody td.ph-line~td.ph-line.num[data-label]::before,.lst tbody tr:has(td.ph-title small) td.ph-line.num[data-label]::before{content:"· " attr(data-label) " "}
  .lst tbody td.ph-line small::before{content:"· "}
  /* A cell holding a fold (payroll's Adjust) is the row's action: on its own line, with no dot. */
  .lst tbody td.ph-line:has(>details){flex:0 0 100%}
  .lst tbody td.ph-line:has(>details)::before{content:none!important}
  /* A part that starts a wrapped line keeps no dot (app.js marks it). */
  .lst tbody :is(td,small).at-start::before{content:none!important}
  .lst tbody td.ph-line.num[data-label].at-start::before{content:attr(data-label) " "!important}
  /* A link in the muted line (an aged bucket) keeps its 44 px target but not the line's height. */
  .lst tbody td.ph-line>a:not(.button){padding-block:0;margin-block:-12px}
  .lst tbody td.ph-state{order:5;margin-left:auto}
  .lst tbody td.ph-act{order:6;flex:0 0 100%;margin-top:8px;text-align:left;width:auto}
  /* A row's ⋯ is the same ⋯ as every other (it took the row's 13.5 px). */
  .lst tbody td .menu>summary.dots{font-size:18px}
  .lst tbody td.ph-field{order:7;flex:0 0 100%;margin-top:8px;color:var(--ink)}
  .lst tbody td.ph-field[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--ink);font-size:12px;font-weight:600}
  .lst tbody td.ph-field :is(input:not([type=checkbox]):not([type=radio]),select,.picker){width:100%;max-width:none}
  .lst tbody td.act :is(a.button,button,summary.button){min-height:44px}
  .lst tr.lst-group{padding:8px 14px;background:var(--tint)}
  .lst tr.lst-group>th{height:auto;padding:0;background:none;border:0;color:var(--ink)}
  .lst tbody tr.lst-group::after{display:none}
  .lst tr.lst-group>td{display:none}
  .lst tr.lst-rownote{padding-top:0}
  .lst tr:has(+tr.lst-rownote){border-bottom:0}
  .lst tr.lst-rownote>td{padding:0}
  .lst tfoot tr{border:0;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 var(--radius-l) var(--radius-l);color:var(--ink)}
  .lst tfoot td{display:block;height:auto;padding:0;background:none;border:0}
  .lst tfoot td:empty,.lst tfoot td:not(:first-child,.ph-fig){display:none}
  .lst tfoot td.ph-fig{margin-left:auto}
  .lst tfoot td:first-child{flex:1}
  .lst-foot{justify-content:space-between}
}

/* A claim number beside its payer pill never breaks (CB2 · identifiers never break). */
.payer-claim{white-space:nowrap}
/* ONE LOOK: status pills (ui.ts badge): one shape, its tone the only difference; a pill that wraps (a long state in a narrow cell) keeps its corners. */
.badge{border-radius:14px}

/* ONE LOOK: buttons. Tones: primary (amber, the one action), secondary (white, edged; glass in the navy band), quiet (a link's look), danger
   (red), the ⋯ menu (square). Sizes by place: the page's and the band's 38 px (44 on touch); `small` 30 px, a section's own action; a form's
   foot bar 44 px; a phone's foot (a form's bar, a record's, a list's, the job card's) 52 px, radius 14, 15 px, the primary 650. On touch
   every button is at least 44 px, a small one too. */
@media(pointer:coarse){:is(button,a.button,summary.button).small{min-height:44px}}

/* ONE LOOK: headings. A section's heading (over or at the top of its one card: a panel, a list, Performance's blocks) 16 px / 650, navy on a
   wide screen, 10 px above what it heads; a heading inside a card (`sub`, a report's Income) 15 px / 650; a kicker over a group of sections
   (Performance's MONEY) 12 px / 650 capitals, muted; a form section's 15 px with its number. */
/* A heading over a group of cards (Finance setup's Go live, Lock date) is a section's heading. */
main section:not(.panel,.quiet-panel)>h2{margin:0 0 10px}
/* A section's heading with a count or a link at its right (`panel`'s `meta` and `aside`). */
.panel-header h2 .muted{font-weight:500}
.panel-header .actions>a:not(.button){padding:0;color:var(--link);font-size:13.5px;font-weight:600}
@media(max-width:700px){.panel-header{flex-wrap:wrap}.panel-header .actions{flex:1 1 100%;justify-content:space-between}}
.home .panel:has(>.panel-header:only-child){padding-bottom:16px}
@media(max-width:1100px),(pointer:coarse){.panel-header .actions>a:not(.button){display:inline-flex;align-items:center;min-height:44px}}
/* ONE LOOK: the phone's home (ui.ts `hero` and `linkList`; Today, a group of Waiting for You, Finance's Home). The hero is the home band on a
   phone: navy, the day, one big figure (it steps down below 420 px so it never cuts; phone review A2) and its line; a link when it opens the
   workshop (phone review B9). A link list is a heading with its count over ONE white card of rows, each a tap with a status pill for its count. */
@media(max-width:700px){
  .main:has(.hero){padding-top:0}
  .hero{margin:0 -16px 16px;padding:0 20px 22px;border-radius:0 0 24px 24px;background:var(--band);color:#fff}
  .hero p{margin:0}
  .hero-go{display:block;color:inherit;text-decoration:none}
  .hero-day{color:var(--band-sub);font-size:15px}
  .hero-label{margin-top:14px!important;color:var(--band-sub);font-size:16px;font-weight:500}
  .hero-figure{font:700 min(44px,10.5vw)/1.1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
  .hero-figure.neg{color:#fecaca}
  .hero-note{margin-top:6px!important;color:var(--band-sub);font-size:14.5px}
  .hero .cur{color:var(--band-sub)}
  .link-head{margin:22px 2px 8px;font-size:21px;font-weight:700}
  .link-head .n{margin-left:4px;color:var(--muted);font-weight:600}
  .link-list{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
  .link-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px 12px 16px;color:inherit;text-decoration:none;border-top:1px solid var(--line2)}
  .link-row:first-child{border-top:0}
  .link-row:active{background:var(--soft)}
  .link-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--x-soft);color:var(--x)}
  .link-text{flex:1;min-width:0;display:grid;gap:2px}
  .link-text strong{font-size:16.5px;font-weight:650;line-height:1.25;overflow-wrap:anywhere}
  .link-text small{color:var(--muted);font-size:14px;line-height:1.3;overflow-wrap:anywhere}
  .link-row>.badge{flex:none;min-width:30px;justify-content:center}
  .link-chev{flex:none;color:var(--muted);font-size:24px;line-height:1}
  .link-go{flex:none;color:var(--navy);font-weight:650;font-size:14px}
  .link-row.is-quiet strong{font-weight:500;color:var(--ink2)}
  .link-none{margin:0;padding:18px 16px;color:var(--muted)}
}
/* ONE LOOK: a record's stages in its band (ui.ts `stageTrack`, recordBand `steps`; the job card): a bar per stage, green when passed, amber on
   the present one, its name and day under it, then the next step with its dot (amber while it is someone's to do). On a phone the bars alone,
   white up to the present one, and one line: the present stage and its day, the days at its right. */
.stage-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.stage-track>div{font-size:12px;color:var(--band-sub)}
.stage-track>div::before{content:"";display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin-bottom:7px}
.stage-track>.done::before{background:#86e0a8}
.stage-track>.now::before{background:#f59e0b}
.stage-track>.now{color:#fff;font-weight:600}
.stage-track small{display:block;font-weight:400;color:var(--band-sub)}
.stage-next{display:flex;align-items:flex-start;gap:8px;margin:4px 0 0;color:#e6ecf7;font-size:13.5px}
.stage-next>i{flex:none;margin-top:6px;width:8px;height:8px;border-radius:50%;background:#f59e0b}
.stage-next.is-wait>i{background:#8ea0bd}
.stage-line{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:13.5px;color:var(--band-sub)}
.stage-line b{color:#fff;font-weight:600}
@media(max-width:700px){
  .stage-track{margin-top:6px}
  .stage-track>div{font-size:0;line-height:0}
  .stage-track>div::before{height:4px;margin-bottom:0;background:rgba(255,255,255,.25)}
  .stage-track>:is(.done,.now)::before{background:#fff}
  .stage-track small{display:none}
  /* A car's long name on its own line under the plate and the marks (recordBand `titleBelow`). */
  .record-band.title-below .band-head>h1{order:3;flex:1 1 100%}
  .record-band.title-below .band-head>.badge{order:2;margin-left:auto}
  /* A waiting state in words in the record's foot, above ⋯ (BandActions `phone`). */
  body .record-band.foot-record .band-actions:has(>p){flex-wrap:wrap}
  body .record-band.foot-record .band-actions>p{order:-2;flex:1 1 100%;margin:0;font-size:13.5px;line-height:1.35;color:var(--ink2)}
}
/* A band whose page starts with section tiles leaves them room to start inside it. */
@media screen and (min-width:701px){.record-band:is(:has(+ .tiles.section),:has(+ * > .tiles.section:first-child)){padding-bottom:54px;margin-bottom:0}}