*{box-sizing:border-box}html{color-scheme:light}body{margin:0}[hidden]{display:none!important}img{max-width:100%}
/* Layout: sticky top bar, single-column workspace, tables for the lot's daily work. Palette: wet-asphalt neutrals, one pressure-washer blue accent. */
:root{--bg:#eef1f4;--card:#fff;--fg:#14202b;--muted:#5d6b78;--line:#dbe1e7;--accent:#0b6bcb;--accent-fg:#fff;--ok:#12803f;--warn:#b25e00;--field:#f4f6f8;--err:#c62828;
--display:'Barlow Condensed','Arial Narrow',sans-serif;--body:'Barlow',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e151c;--card:#16202a;--fg:#e6ecf1;--muted:#93a2b0;--line:#26343f;--accent:#4aa3ff;--accent-fg:#06121f;--ok:#43c077;--warn:#f0a030;--field:#0f1820;--err:#ff7b7b;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e151c;--card:#16202a;--fg:#e6ecf1;--muted:#93a2b0;--line:#26343f;--accent:#4aa3ff;--accent-fg:#06121f;--ok:#43c077;--warn:#f0a030;--field:#0f1820;--err:#ff7b7b;color-scheme:dark}
body{background:var(--bg);color:var(--fg);font:15px/1.45 var(--body);padding-block:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
*{box-sizing:border-box}
.wrap{max-width:1080px;margin:0 auto;padding-block:16px 40px}
header{display:flex;gap:12px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:10px 14px}
.brand{font:700 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.brand small{display:block;font:500 12px var(--body);letter-spacing:.08em;color:var(--muted);margin-top:4px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav button{background:none;color:var(--fg);border:0;padding:8px 12px;border-radius:6px;font:500 15px var(--body);cursor:pointer}
nav button[aria-current=true]{background:var(--accent);color:var(--accent-fg)}
nav button:hover:not([aria-current=true]){background:var(--line)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note{font-size:13px;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:8px 12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;min-width:0}
h2{font:700 22px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;margin:0 0 12px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
form{display:grid;gap:10px}label{display:grid;gap:4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
input,select{font:15px var(--body);padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--fg);min-width:0}
button.pri,button.sec{font:500 15px var(--body);padding:9px 14px;border-radius:6px;cursor:pointer;border:1px solid var(--accent)}
button.pri{background:var(--accent);color:var(--accent-fg)}button.sec{background:transparent;color:var(--accent)}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:500 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.n,th.n{text-align:end;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:500;border:1px solid var(--line)}
.pill.in_progress{color:var(--warn);border-color:var(--warn)}.pill.completed{color:var(--ok);border-color:var(--ok)}
.row{display:flex;gap:6px;flex-wrap:wrap}.muted{color:var(--muted)}.err{color:var(--err);margin:0;min-height:1em}
.stat{font:700 44px/1 var(--display);margin-top:6px;font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:8px}
.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px;font-size:11px;color:var(--muted)}
.bars i{display:block;width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}

.flow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:820px){.flow{grid-template-columns:minmax(0,1fr)}}
.steps{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;padding:0;list-style:none}
.steps li{font:600 13px var(--display);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.steps li.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.steps li.done{color:var(--ok);border-color:var(--ok)}
.plate{display:flex;gap:8px;flex-wrap:wrap}
.plate input{flex:1;min-width:180px;font:700 34px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:14px;border:2px solid var(--fg);border-radius:8px;background:var(--field)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:2px;text-align:start;padding:12px;border:1.5px solid var(--line);border-radius:8px;background:var(--field);color:var(--fg);cursor:pointer;font:500 15px/1.2 var(--body);min-height:84px}
.tile b{font:700 22px/1 var(--display);letter-spacing:.02em;margin-top:auto;font-variant-numeric:tabular-nums}.tile span{font-size:12px;color:var(--muted)}
.tile[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}.tile[aria-pressed=true] span{color:inherit;opacity:.85}
.vehicle{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:var(--field);border:1px solid var(--line);margin:12px 0}
.assign{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:0 0 14px}.assign>label{min-width:200px}.assign .lbl{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.methods button[disabled]{opacity:.45}
.badge{font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:var(--ok);color:var(--accent-fg)}.badge.new{background:var(--warn)}
.q{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.q li{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px}
.q .top{display:flex;justify-content:space-between;gap:8px;font-weight:500}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--warn)}
.methods{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.methods button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg)}
.total{font:700 52px/1 var(--display);font-variant-numeric:tabular-nums;margin:4px 0 12px}
.toast{font-size:13px;padding:8px 12px;border-radius:6px;background:var(--field);border:1px solid var(--line);margin-top:10px}
.msg{white-space:pre-wrap;font:13px/1.5 var(--body);padding:10px;border-radius:8px;background:var(--field);border:1px solid var(--line);margin-top:8px}
button:disabled{opacity:.45;cursor:not-allowed}
.tk{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* Looks: chosen from the selector in the header and remembered in this browser. Declared last so they override the base tokens. */
:root[data-look="aqua"]{--bg:#e6f6f8;--card:#fff;--fg:#0f2a33;--muted:#5a7a85;--line:#cfe8ec;--accent:#0891b2;--accent-fg:#fff;--field:#f1fafb;--ok:#0f8a4b;--warn:#b25e00;--err:#c62828;color-scheme:light}
:root[data-look="aqua"] .card{border-radius:16px;box-shadow:0 6px 18px rgba(8,145,178,.10);border-color:transparent}
:root[data-look="aqua"] .tile,:root[data-look="aqua"] .vehicle,:root[data-look="aqua"] button.pri,:root[data-look="aqua"] button.sec,:root[data-look="aqua"] input,:root[data-look="aqua"] select{border-radius:10px}
:root[data-look="aqua"] .brand{color:var(--accent)}:root[data-look="aqua"] nav button[aria-current=true]{border-radius:99px}
:root[data-look="dark"]{--bg:#080d12;--card:#111a23;--fg:#e8f1f7;--muted:#8aa0b0;--line:#22313e;--accent:#38bdf8;--accent-fg:#04131d;--field:#0b141c;--ok:#43c077;--warn:#f0a030;--err:#ff7b7b;color-scheme:dark}
:root[data-look="dark"] .card{border-radius:6px}:root[data-look="dark"] .brand{color:var(--accent)}
:root[data-look="bold"]{--bg:#fff;--card:#fff;--fg:#111;--muted:#444;--line:#111;--accent:#e8480c;--accent-fg:#fff;--field:#f4f4f4;--ok:#0b6b30;--warn:#8a4500;--err:#b00020;color-scheme:light}
:root[data-look="bold"] body{font-size:18px}:root[data-look="bold"] .card{border:2px solid #111;border-radius:10px}
:root[data-look="bold"] .tile{min-height:112px;border:2px solid #111;font-size:18px}:root[data-look="bold"] .tile b{font-size:28px}
:root[data-look="bold"] button.pri,:root[data-look="bold"] button.sec{padding:14px 20px;font-size:18px;border-width:2px;font-weight:600}
:root[data-look="bold"] input,:root[data-look="bold"] select{padding:14px;border:2px solid #111;font-size:18px}
:root[data-look="bold"] h2{font-size:28px}:root[data-look="bold"] nav button{font-size:18px;padding:12px 14px}:root[data-look="bold"] .tile[aria-pressed=true]{border-color:#111}
:root[data-look="green"]{--bg:#f1f6f1;--card:#fff;--fg:#14281a;--muted:#5f7766;--line:#dbe7dc;--accent:#15803d;--accent-fg:#fff;--field:#f6faf6;--ok:#15803d;--warn:#a45a00;--err:#c62828;color-scheme:light}
:root[data-look="green"] .card{border-radius:12px}:root[data-look="green"] .brand{color:var(--accent)}
.sw{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:var(--line);border:1px solid var(--muted);position:relative;cursor:pointer;padding:0;transition:background .15s}.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);border:1px solid var(--muted);transition:transform .15s}.sw:checked{background:var(--accent);border-color:var(--accent)}.sw:checked::after{transform:translateX(18px);border-color:var(--accent)}@media(prefers-reduced-motion:reduce){.sw,.sw::after{transition:none}}.off td{opacity:.55}.off td:last-child,.off td:nth-last-child(2){opacity:1}
.ic{display:inline-flex;width:28px;height:28px;color:var(--accent);flex:none}.ic svg{width:100%;height:100%}.tile .ic{width:52px;height:52px;margin-bottom:6px;color:var(--accent)}.tile[aria-pressed=true] .ic{color:inherit}
.tile{position:relative}.tile .no{position:absolute;top:8px;inset-inline-end:8px;font:700 15px/1 var(--display);font-style:normal;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;background:var(--fg);color:var(--bg);padding:0 7px}.tile[aria-pressed=true] .no{background:var(--accent-fg);color:var(--accent)}.chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.chart>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px;border:1.5px solid var(--fg);border-radius:10px}.chart .big{font:700 40px/1 var(--display)}.chart .ic{width:44px;height:44px}
[data-dd]{cursor:pointer}tr[data-dd]:hover td,.card[data-dd]:hover{background:var(--field)}[data-dd]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.crumb{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted);margin-bottom:10px}.crumb button{background:none;border:0;color:var(--accent);padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.lookpick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.lookpick select{padding:5px 8px;font-size:13px}
.hint{font-size:13px;color:var(--muted)}

a.sec{display:inline-block;text-decoration:none;font:500 15px var(--body);padding:9px 14px;border-radius:6px;border:1px solid var(--accent);color:var(--accent)}
body.print-chart .wrap>header,body.print-chart .crumb{display:none}
@media print{body.print-chart .wrap>header,body.print-chart nav{display:none!important}body.print-chart *{visibility:visible}body.print-chart .receipt-area{display:grid}body.print-chart button{display:none}}
.ok{color:var(--ok)}.warn{color:var(--warn)}h3.sub{font:600 15px var(--body);margin:0}input[readonly]{color:var(--muted)}
/* Dashboard */
.dhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line);border-radius:22px;padding:3px;background:var(--card)}
.seg button{border:0;background:none;color:var(--muted);padding:7px 14px;border-radius:99px;font:inherit;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg)}
.kpi{margin-bottom:0}.kpi .card .stat{font-size:38px}.stat.neg{color:var(--err)}
.big{font:600 22px/1.2 var(--display);margin:6px 0 4px;font-variant-numeric:tabular-nums}
.dgrid{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-size:11px;fill:var(--muted);font-family:var(--body)}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .bar{fill:var(--accent)}.chart .hit{fill:transparent}
.chart g:hover .hit,.chart g:focus-visible .hit{fill:var(--field)}
.chart g[data-dd]:focus-visible{outline:none}.chart g[data-dd]:focus-visible .bar{stroke:var(--fg);stroke-width:1.5}
.hb{display:grid;gap:4px}
.hb>div{display:grid;grid-template-columns:minmax(70px,34%) 1fr auto;gap:10px;align-items:center;padding:5px 4px;border-radius:6px;font-size:14px}
.hb>div>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb i{display:block;height:10px;background:var(--field);border-radius:99px;overflow:hidden}
.hb b{display:block;height:100%;background:var(--accent);border-radius:99px}
.hb .n{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb>div[data-dd]:hover{background:var(--field)}
.foot{margin:28px 0 12px;text-align:center;font-size:12px;color:var(--muted)}.foot b{font:700 13px var(--display);letter-spacing:.06em;text-transform:uppercase}
@media print{.foot{display:none}}
/* Plate scanner */
.scan{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.scan-card{background:var(--card);color:var(--fg);border-radius:14px;padding:14px;width:min(560px,100%);max-height:100%;overflow:auto;display:grid;gap:10px}
.scan-view{position:relative;background:#000;border-radius:10px;overflow:hidden}
.scan-view video,.scan-view .scan-pic{display:block;width:100%;height:auto}
.scan-view .scan-pic{max-height:55vh;object-fit:contain}
.scan-box{position:absolute;border:3px solid #fff;border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
.scan-msg{margin:0;color:var(--muted)}
.scan-result input{font:700 28px var(--display);letter-spacing:.12em;text-transform:uppercase}
.scan-photo{display:inline-flex;align-items:center;cursor:pointer;text-transform:none;letter-spacing:0;font:500 15px var(--body);padding:9px 14px;border-radius:6px;border:1px solid var(--accent);color:var(--accent)}
#scan{display:inline-flex;align-items:center;gap:6px}#scan svg{width:18px;height:18px}
.vpics{display:grid;gap:8px;margin:4px 0 14px}
.vpics-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,96px));gap:8px}
.vpics-list li{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--field);border:1px solid var(--line)}
.vpics-list img{display:block;width:100%;height:100%;object-fit:cover}
.vpics-list a{display:block;width:100%;height:100%}
.vpics-list.big{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-width:620px}
.vpics-x{position:absolute;top:4px;inset-inline-end:4px;width:28px;height:28px;padding:0;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font:700 18px/28px var(--body);cursor:pointer}
.scan-row{align-items:stretch}.scan-row>*{flex:0 1 auto}
.vpics-add{gap:6px;padding:9px 14px}.vpics-add svg{width:18px;height:18px;flex:none}
:root[data-look="bold"] .vpics-add{padding:14px 20px;font-size:18px;border-width:2px;font-weight:600}
:root[data-look="aqua"] .vpics-add{border-radius:10px}
.jphoto{margin-top:14px}.jphoto img{display:block;max-width:min(100%,520px);border-radius:8px;border:1px solid var(--line);background:var(--field);min-height:60px}
#ptab a{color:var(--accent);text-decoration:none}#ptab a:hover{text-decoration:underline}#ptab tr[data-cl]:hover td{background:var(--field)}
.warnnote{color:var(--fg);border:1px solid var(--warn);border-inline-start-width:4px;font-size:14px}
.pill.ended{color:var(--err);border-color:var(--err)}
/* Offline: the sync banner under the header, and the install button in the footer. */
.syncnote{color:var(--fg);border:1px solid var(--accent);border-inline-start-width:4px;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.syncnote.bad{border-color:var(--err);display:block}.syncnote ul{margin:6px 0;padding-inline-start:20px}.syncnote button{padding:5px 10px;font-size:14px}
.foot #inst{margin-inline-start:8px;padding:4px 10px;font-size:12px}
.insteps ol{margin:0;padding-inline-start:22px;display:grid;gap:10px;line-height:1.5}
@media print{.syncnote{display:none!important}}
/* Who is signed in, beside the menu. */
.who{display:flex;gap:8px;align-items:center}.who:empty{display:none}
/* Phone menu: tabs at the bottom with a big round Counter button in the middle, the rest under More.
   Only on the staff screens that have tabs; computers and tablets keep the menu at the top. */
nav .ti,nav .fab,nav .more{display:none}
@media(max-width:700px){
  body:has(#nav [data-t]){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  #nav:has([data-t]){position:fixed;left:0;right:0;bottom:0;z-index:40;flex-wrap:nowrap;align-items:flex-end;gap:0;background:var(--card);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 14px rgba(0,0,0,.08)}
  #nav :is(.tab,.more){flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;border-radius:10px}
  #nav :is(.tab,.more) span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #nav .tab.x{display:none}
  #nav .more{display:flex}
  #nav .ti{display:block;width:22px;height:22px}
  #nav [aria-current=true]{background:none;color:var(--accent);font-weight:700}
  #nav :is(.tab,.more)[aria-current=true] .ti{background:var(--accent);color:var(--accent-fg);border-radius:99px;width:44px;padding:2px 11px;box-sizing:border-box;height:26px}
  #nav .tab[data-t="counter"]{display:none}
  #nav .tab.r,#nav .more{order:2}
  #nav .fab{order:1;display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:2px;margin:-30px 6px 0;padding:0;border:0;background:none;color:var(--accent);font:700 12px var(--body);cursor:pointer}
  #nav .fab .ti{width:66px;height:66px;padding:15px;border-radius:50%;background:var(--accent);color:var(--accent-fg);border:4px solid var(--card);box-shadow:0 4px 12px rgba(0,0,0,.2)}
  #nav .fab[aria-current=true] .ti{background:var(--fg);color:var(--card)}
  /* Equal room on both sides of the Counter button (78px wide with its margins), so it stays in the middle of the screen
     whether there are 2 buttons on the left and 1 on the right (staff) or 2 and 3 (with More). */
  #nav:has(.fab) :is(.tab,.more){flex:0 0 calc((100% - 78px) / 2 / var(--l,2))}
  #nav:has(.fab) :is(.tab.r,.more){flex-basis:calc((100% - 78px) / 2 / var(--r,2))}
}
.morelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.morelist .tile{min-height:70px;flex-direction:row;align-items:center;gap:10px}.morelist .ti{display:block;width:24px;height:24px;flex:none}
@media print{#nav,.who{display:none!important}}
/* Keeps the plate form inside a phone's width (it was 15px too wide, which made the page slide sideways). */
#pf{grid-template-columns:minmax(0,1fr)}
/* Service picture picker */
.ipick{position:relative;flex:none}.ipick summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:8px;background:var(--field)}
.ipick summary::-webkit-details-marker{display:none}.ipick[open] summary{border-color:var(--accent)}
.ipgrid{position:absolute;z-index:30;top:50px;inset-inline-start:0;display:grid;grid-template-columns:repeat(6,48px);gap:6px;padding:10px;background:var(--card);border:1.5px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:400px;overflow:auto}
.ipgrid button{width:48px;height:48px;padding:6px;border:1.5px solid transparent;border-radius:8px;background:var(--field);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ipgrid button:hover,.ipgrid button:focus-visible{border-color:var(--line)}.ipgrid button[aria-selected=true]{border-color:var(--accent)}.ipgrid .ic{width:32px;height:32px}
@media (max-width:520px){.ipgrid{grid-template-columns:repeat(5,44px);position:fixed;left:50%;right:auto;top:auto;bottom:90px;transform:translateX(-50%);width:max-content;max-height:min(400px,calc(100vh - 180px))}.ipgrid button{width:44px;height:44px}}
/* Voids */
.vb{display:inline-block;min-width:18px;padding:0 5px;margin-inline-start:5px;border-radius:99px;background:var(--err);color:#fff;font:700 11px/18px var(--body);text-align:center}
.vb[hidden]{display:none}
@media (max-width:700px){#nav :is(.tab,.more){position:relative}#nav .vb{position:absolute;top:0;inset-inline-end:calc(50% - 26px);margin:0}}
.morelist .vb{margin-inline-start:auto}
button.danger{color:var(--err);border-color:var(--err)}
button.sm{padding:4px 10px;font-size:13px;min-height:0}
tr.voided td:not(:last-child){opacity:.55;text-decoration:line-through}
.voidnote{margin:12px 0 0;padding:10px 12px;border:1px solid var(--err);border-radius:10px;color:var(--fg)}
.voidnote.ask{border-color:var(--warn)}
.voidcall{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-color:var(--warn)}
[data-vj]{color:var(--accent)}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vreq,.aud{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px}
.aud{padding:10px 12px;gap:4px}
.vtop{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* Daily cash close-out */
.cltab{width:100%;max-width:520px;border-collapse:collapse}.cltab td{padding:4px 0;border:0;white-space:normal;vertical-align:top;overflow-wrap:anywhere}.cltab td.n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal;padding-inline-start:12px}
/* Close-out form: the label text sits at the bottom of a two-line slot, so the three boxes line up even when one label wraps
   (long translations, narrow columns); the hint under a box keeps normal case. */
/* In Arabic and Urdu the amount column sits on the left; amounts keep their right edges lined up so the decimals line up. */
[dir=rtl] .cltab td.n{text-align:right;width:8em}
@media(min-width:600px){#clf>label{grid-template-rows:minmax(3.2em,auto) auto auto;align-items:end;align-content:start}#clf>label[style]{grid-template-rows:auto auto}}
#clf label .hint{text-transform:none;letter-spacing:0;align-self:start}
/* Last 30 days on a phone: the four number columns fit without sideways scrolling; who closed it shows when the day is opened. */
@media(max-width:600px){.clhist th,.clhist td{padding-inline:5px}.clhist .clby{display:none}}
.clres .stat{font-size:34px;margin:4px 0 10px}.big.neg{color:var(--err)}.clcall{border-color:var(--line)}
.clnc{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.clnc .cltab{margin-top:4px}
/* Receipts (the receipt itself and its print rules are in receipt.js, shared with the receipt link page) */
.rcflow{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.rcflow select{width:100%}
.rc-card{width:min(760px,100%)}
@media(max-width:820px){.rcflow{grid-template-columns:minmax(0,1fr)}.rcflow .receipt{margin:0 auto;width:100%}}
/* Right-to-left languages (Arabic). The layout above uses start/end where it matters; these cover the rest.
   Arabic letters join up, so letter spacing is turned off; Latin text and digits keep the Barlow fonts. */
[dir=rtl]{--display:'Barlow Condensed','Noto Kufi Arabic','Arial Narrow',sans-serif;--body:'Barlow','Noto Kufi Arabic',system-ui,sans-serif}
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] .sw::after{left:auto;right:2px}[dir=rtl] .sw:checked::after{transform:translateX(-18px)}
[dir=rtl] .langpick select,[dir=rtl] .lookpick select{padding-block:3px}
/* Plates, phone numbers, amounts and times stay left-to-right inside Arabic text. */
[dir=rtl] input[type=tel],[dir=rtl] input[type=number],[dir=rtl] input[type=email],[dir=rtl] input[name=tenant],[dir=rtl] input[type=date],[dir=rtl] input.lk,[dir=rtl] input[type=url]{direction:ltr;text-align:end}
/* Urdu, Hindi and Bangla (staff screens). Each uses a Noto font for its script; the browser downloads it only when that
   language is on, and the service worker keeps it for offline use. Phones fall back to their own fonts for the script.
   Urdu uses Naskh rather than Nastaliq: Nastaliq needs much taller lines than the compact counter buttons and tiles allow.
   Devanagari and Bengali letters join along a top line, so letter spacing is turned off, as for Arabic. */
html:lang(ur){--display:'Barlow Condensed','Noto Naskh Arabic','Noto Kufi Arabic',Tahoma,sans-serif;--body:'Barlow','Noto Naskh Arabic','Noto Kufi Arabic',Tahoma,system-ui,sans-serif}
html:lang(hi){--display:'Barlow Condensed','Noto Sans Devanagari','Nirmala UI',Mangal,sans-serif;--body:'Barlow','Noto Sans Devanagari','Nirmala UI',Mangal,system-ui,sans-serif}
html:lang(bn){--display:'Barlow Condensed','Noto Sans Bengali','Nirmala UI',Vrinda,sans-serif;--body:'Barlow','Noto Sans Bengali','Nirmala UI',Vrinda,system-ui,sans-serif}
html:lang(hi) *,html:lang(bn) *{letter-spacing:0!important}
/* These scripts have marks above and below the letters; the tightest headings get a little more room so none are cut. */
html:lang(ur) h2,html:lang(hi) h2,html:lang(bn) h2,html:lang(ur) .brand,html:lang(hi) .brand,html:lang(bn) .brand{line-height:1.35}
html:lang(ur) body{line-height:1.6}
/* Body type pictures: big buttons at the Counter, a small picture next to the name in lists and reports */
.btpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px}
.btpick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 6px;min-height:84px;line-height:1.2;text-align:center}
.btpick .ic{width:52px;height:52px}.btpick button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg)}.btpick button[aria-pressed=true] .ic{color:inherit}
.btl{display:inline-flex;gap:6px;align-items:center;vertical-align:middle}.btl .ic{width:26px;height:26px}
.badge .btl .ic,.muted .btl .ic{color:inherit}.badge .btl .ic{width:20px;height:20px}
.bth{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px}.bth .ic{width:30px;height:30px}
.ipgrid.named{grid-template-columns:repeat(4,80px)}.ipgrid.named button{width:80px;height:auto;flex-direction:column;gap:2px;padding:6px 4px}
.ipgrid.named small{font-size:11px;line-height:1.15;color:var(--fg);text-align:center}.ipgrid.named .ic{width:40px;height:40px}
@media (max-width:520px){.btpick{grid-template-columns:repeat(3,1fr)}.btpick button{min-height:78px}.btpick .ic{width:46px;height:46px}.ipgrid.named{grid-template-columns:repeat(4,72px)}.ipgrid.named button{width:72px;height:auto}}
@media (max-width:520px){.scan-row>*{flex:1 1 0;justify-content:center;text-align:center}}