/* Montro-AI look (design system "Montro-AI", Wise-style): sage page, white rounded cards,
   one lime action colour, heavy display figures. Colours, sizes and fonts come from css/tokens.css. */

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:16px/24px var(--font-sans);font-feature-settings:"calt";-webkit-text-size-adjust:100%}
:lang(hi) body,:lang(gu) body,:lang(pa) body,:lang(ur) body{line-height:1.6}
button,input,select{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--body)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}
[dir="rtl"] .ico-dir{transform:scaleX(-1)}

/* Icons drawn with a mask so they take the text colour (status is never colour alone). */
.msg::before,td .rowerr::before{content:"";flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
:root{
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19zM12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 100 18 9 9 0 000-18zM12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E");
}

/* a lighter shade behind boxes and side pages (Abdul 2026-10-22: "the back ground page give less darker shade"); High contrast keeps its own */
:root,[data-theme="light"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="violet"]{--scrim:rgba(14,15,12,.3)}
[data-theme="night"]{--scrim:rgba(0,0,0,.5)}
/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--card)}
/* every page fills the whole window, like the old app (v964 / v1008; Abdul 2026-10-22: "make all pages fill whole screen just like in old app") */
.top-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);max-width:none;margin:0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--space-sm);min-height:var(--tap-min);flex:none}
/* a little room between the Montro-AI logo and the store's name (Abdul 2026-10-27; phones keep it tight) */
.top-row > .brand{margin-right:20px}
@media (max-width:700px){.top-row > .brand{margin-right:4px}}
/* The Montro-AI logo in the header, in place of the old Montro-AI (2026-10-27): the montro-ai.net tile (js/app.js
   MONTRO_TILE_SVG) and "Montro-AI / Software" in a white box, about as tall as the header row (it does not make the row
   taller). FIXED colours (the brand's green, gold and white): they do not follow the colour theme. Smaller on a narrow
   screen; on a phone only the tile. */
@font-face{font-family:"Bricolage Grotesque MS";src:url("../fonts/BricolageGrotesque-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
.mtx-box{display:inline-flex;align-items:center;gap:12px;flex:none;height:64px;margin:-8px 0;padding:0 16px 0 6px;background:#ffffff;border:1px solid #e3e7e1;border-radius:12px;box-sizing:border-box}
.mtx-mark{display:inline-flex;flex:none;width:52px;height:52px}
.mtx-mark svg{display:block;width:100%;height:100%}
/* Fuel cost box: net cost per gallon up / down since the delivery before (2026-10-29); arrow + word, colour only helps */
.fu-chg{background:var(--warning-pale);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);margin:0 0 var(--space-md)}
.fu-chg p{margin:0 0 6px}
.fu-chg ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.fu-chg-d{font-weight:700}
.fm-read{color:var(--positive-deep);font-weight:600}
.rq-replies{list-style:none;margin:var(--space-xs) 0;padding:0 0 0 var(--space-sm);border-left:3px solid var(--line-strong);display:grid;gap:var(--space-xs)}
.rq-reply-body{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fu-chg-up .fu-chg-d{color:var(--negative-darkest)}
.fu-chg-down .fu-chg-d{color:var(--positive-deep)}
/* "Montro-AI is working for you" (2026-10-29): a small bar at the top while the AI works; the brand's own colours */
.ai-working{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:7px 18px 7px 7px;background:#ffffff;color:#1a5c45;border:1px solid #cfe3d8;border-radius:999px;box-shadow:0 6px 24px rgba(16,40,30,.18);font:700 15px/1.25 Inter,system-ui,sans-serif;animation:aiIn .2s ease-out}
.ai-working .mtx-mark{width:30px;height:30px}
.ai-dots{display:inline-flex;gap:4px;margin-left:2px}
.ai-dots i{width:6px;height:6px;border-radius:50%;background:#1a5c45;animation:aiDot 1.2s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.15s}
.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes aiIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.ai-working,.ai-dots i{animation:none}.ai-dots i{opacity:.7}}
/* the new logo for review, at the right end of the top bar (2026-10-28); computers only */
.mtx-review{display:inline-flex;flex:none;gap:10px;align-items:center;margin:-6px 0 -6px var(--space-sm);padding:3px 10px;background:#ffffff;border:1px solid #e3e7e1;border-radius:12px}
.mtx-rv{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.mtx-rv .mtx-mark{width:42px;height:42px}
.mtx-rv b{font:700 11px/1 Inter,system-ui,sans-serif;color:#55625b}
@media (max-width:900px){.mtx-review{display:none}}
.mtx-label{display:flex;flex-direction:column;justify-content:center;gap:4px;white-space:nowrap}
.mtx-label b{font-family:"Bricolage Grotesque MS","Bricolage Grotesque",var(--font-display),sans-serif;font-weight:800;font-size:24px;line-height:1;letter-spacing:-.02em;color:#1a5c45;font-style:normal}
.mtx-label b .mtx-ai{color:#b97f0c}
.mtx-label i{font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.04em;color:#55625b;font-style:normal}
@media (max-width:999px){
  .mtx-box{height:54px;margin:-3px 0;gap:10px;padding-right:12px}
  .mtx-mark{width:44px;height:44px}
  .mtx-label b{font-size:20px}
  .mtx-label i{font-size:11px}
}
@media (max-width:700px){
  .mtx-box{height:auto;margin:0;padding:0;border:0;background:none}
  .mtx-label{display:none}
  .mtx-mark{width:40px;height:40px}
}
/* the key pad and the phone clock page: the same tile, big */
.kphead .mtx-mark{width:56px;height:56px}
/* the store's name right after Montro-AI · Test site; the tools go to the right */
.top-row > .storepick{flex:0 1 auto;min-width:0}
.tag{font-size:12px;line-height:16px;font-weight:600;color:var(--ink);background:var(--well);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-md);white-space:nowrap}
.top-tools{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-left:auto}
.top select{min-height:var(--tap-min);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card);padding:0 40px 0 var(--space-lg);max-width:220px;font-weight:600;font-size:14px;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868685' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.top select:hover{background-color:var(--well)}
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-sm);overflow-x:auto;padding:var(--space-xs) var(--space-xl) var(--space-lg);max-width:none;margin:0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);padding:0 var(--space-lg) 0 var(--space-sm);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer}
.tabs button:hover{background:var(--well)}
.tabs button[aria-selected="true"]{background:var(--inverse);border-color:var(--inverse);color:var(--on-inverse);font-weight:700}
/* Night: the dark pill would blend in, so the chosen tab takes the lime pill instead */
[data-theme="night"] .tabs button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .tabs button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}}

main{max-width:none;margin:0;padding:var(--space-xl) var(--space-xl) 120px}
.card{background:var(--card);color:var(--ink);border-radius:var(--radius-xl);padding:var(--space-xl);margin-bottom:var(--space-xl)}
h1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-0.96px;margin:0 0 var(--space-sm)}
h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.48px;margin:0 0 var(--space-md)}
h3{font-size:20px;line-height:28px;font-weight:600;margin:0 0 var(--space-sm)}
h1 .muted{font-weight:400;letter-spacing:0}
p{margin:0 0 var(--space-md)}
details summary{cursor:pointer;font-weight:600;min-height:var(--tap-min);display:flex;align-items:center}

/* ---------- Forms ---------- */
label{display:block;font-weight:600;margin:var(--space-lg) 0 var(--space-sm)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[inputmode],select.field{
  width:100%;min-height:var(--tap-min);padding:var(--space-md) var(--space-lg);border:1px solid var(--ink);border-radius:var(--radius-md);background:var(--card);color:var(--ink)}
select.field{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868685' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
input::placeholder{color:var(--mute)}
input:disabled,select:disabled{background:var(--well);border-color:var(--line);color:var(--body)}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.toast :focus-visible,.tabs button[aria-selected="true"]:focus-visible{outline-color:var(--focus-inverse)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-lg)}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.row{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center;margin-top:var(--space-lg)}

/* A button under the mouse gets a little darker than its fill, never the colour of the lines (the High contrast look has black
   lines: those buttons went black with black words; Abdul 2026-10-25 "Many buttons go dark when mouse point is on them") */
:root{--hover-fill:color-mix(in srgb, var(--well) 86%, var(--ink))}
/* ---------- Buttons: lime pill = the one main action ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:var(--tap-min);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-xl);
  border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);font-weight:600;line-height:24px;cursor:pointer;transition:background-color .12s ease,transform .08s ease}
.btn:hover{background:var(--primary-active);border-color:var(--primary-active)}
.btn:active{transform:scale(.98)}
.btn.quiet{background:var(--well);border-color:var(--well);color:var(--ink)}
.btn.quiet:hover{background:var(--hover-fill);border-color:var(--hover-fill)}
.btn.ghost{background:var(--card);border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--well)}
.btn.small{min-height:var(--tap-min);padding:var(--space-sm) var(--space-lg);font-size:14px;line-height:20px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.icon{padding:0;width:var(--tap-min);border-radius:var(--radius-pill)}
.card .btn.quiet{background:var(--well)}

/* ---------- Messages: icon + words, never colour alone ---------- */
.msg{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:var(--well);color:var(--ink);margin-top:var(--space-md);font-weight:500}
.msg::before{--i:var(--i-info);margin-top:2px}
.msg:not(.ok):not(.bad):not(.warn)::before{display:none}
.msg.ok{background:var(--primary-pale);color:var(--positive-deep)}
.msg.ok::before{--i:var(--i-check)}
.msg.bad{background:var(--negative-pale);color:var(--negative-deep)}
.msg.bad::before{--i:var(--i-alert)}
.msg.warn{background:var(--warning-pale);color:var(--warning-content)}
.msg.warn::before{--i:var(--i-info)}

/* ---------- Date and week bar ---------- */
.datebar{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-top:var(--space-lg)}
.datebar input[type=date]{width:auto;min-width:180px;border-radius:var(--radius-pill);font-weight:600}
.datebar .btn.small{width:var(--tap-min);padding:0;border-radius:var(--radius-pill);background:var(--card);border-color:var(--line-strong);color:var(--ink)}
.datebar .btn.small:hover:not(:disabled){background:var(--well)}
.datebar .daytag{font-weight:700;display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-md);border-radius:var(--radius-pill);background:var(--primary-pale);color:var(--ink-deep)}
/* Daily entry: a smaller heading, Print at the far right of its line (Abdul 2026-10-22: "this block it occupying to much space") */
.dayhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm) var(--space-md);flex-wrap:wrap;margin:0 0 var(--space-xs)}
.dayhead h1{font-size:24px;line-height:30px;letter-spacing:-0.5px;margin:0}
.dayhead h1 .chip{vertical-align:3px}
.dayhead #dayPrint{margin-left:auto}
.dayrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm) var(--space-md);flex-wrap:wrap;margin-top:var(--space-sm)}
.row.dayways{margin-top:var(--space-md)}
/* read by screen readers only */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
/* Month picker as in the old app (‹ [calendar Oct 2026] ›; the button opens the year and its 12 months) */
.calhead-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm) var(--space-md);flex-wrap:wrap}
.monthbar{display:inline-flex;align-items:center;gap:var(--space-sm)}
.monthbar .btn.small{width:var(--tap-min);padding:0;border-radius:var(--radius-pill);background:var(--card);border-color:var(--line-strong);color:var(--ink)}
.monthbar .btn.small:hover:not(:disabled){background:var(--well)}
.mp-btn{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap-min);padding:0 20px;border-radius:var(--radius-pill);background:var(--card);border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:16px}
.mp-btn:hover{background:var(--well)}
.mp-btn[aria-expanded="true"]{background:var(--primary-pale)}
.mp-btn .ico{width:18px;height:18px}
.calshow{display:flex;align-items:center;gap:var(--space-sm);margin-left:auto}

.calshow label{margin:0;white-space:nowrap}
.calshow select{width:auto;min-width:200px}
.mp-pop{position:absolute;z-index:95;width:264px;padding:var(--space-sm);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal)}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.mp-year{font-size:18px}
.mp-nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius-pill);background:var(--well);color:var(--ink);cursor:pointer}
.mp-nav:hover:not(:disabled){background:var(--hover-fill)}
.mp-nav:disabled,.mp-m:disabled{opacity:.38;cursor:not-allowed}
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mp-m{min-height:44px;border:0;border-radius:12px;background:var(--well);color:var(--ink);font-weight:600;font-size:15px;cursor:pointer}
.mp-m:hover:not(:disabled){background:var(--primary-pale)}
.mp-m.now{box-shadow:inset 0 0 0 2px var(--primary)}
.mp-m.on{background:var(--primary);color:var(--on-primary);font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* the day calendar of every date box (2026-10-25): the Month picker's look, a week to a row. A press anywhere on the box opens it. */
.mp-pop.dp-pop{position:fixed;z-index:120;width:min(344px,calc(100vw - 16px))}
.dp-pop .mp-year{flex:1;text-align:center;font-size:18px}
.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dp-wd{text-align:center;font-size:13px;font-weight:600;line-height:20px;color:var(--body);padding-bottom:2px}
.mp-m.dp-day{min-height:42px;padding:0;background:transparent;font-variant-numeric:tabular-nums}
.mp-m.dp-day:hover:not(:disabled){background:var(--primary-pale)}
.mp-m.dp-day.on{background:var(--primary)}
.mp-m.dp-day:disabled{opacity:.32}
input[type="date"]:not(:disabled):not([readonly]){cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer}
/* the same box with dates too: Month | Dates, then From / To */
.mp-tabs{display:flex;gap:4px;padding:4px;margin-bottom:var(--space-sm);background:var(--well);border-radius:var(--radius-pill)}
.mp-tab{flex:1;min-height:40px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer}
.mp-tab[aria-pressed="true"]{background:var(--card);font-weight:800;text-decoration:underline;text-underline-offset:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mp-dates label{margin:0 0 var(--space-xs);font-size:14px}
.mp-dates .f{margin:0 0 var(--space-sm)}
.mp-dates input{width:100%;box-sizing:border-box}
.mp-dates .btn{width:100%;justify-content:center}
@media (max-width:700px){.calshow{margin-left:0;flex:1 1 100%}.calshow select{flex:1 1 auto;min-width:0}}
.dayrow .datebar{margin-top:0}
.dayrow #dayPhoto{margin-left:auto}
.datebar .daytag:empty{display:none}
.weekbar .daytag{flex:1 1 180px;justify-content:center;background:var(--well);color:var(--ink);min-height:var(--tap-min)}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--radius-lg)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:var(--space-md);border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:14px;line-height:20px;color:var(--ink);font-weight:600;background:var(--well);border-bottom:0;white-space:nowrap}
thead th:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
thead th:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}
tbody tr:hover td{background:color-mix(in srgb,var(--well) 55%,transparent)}
tfoot td{font-weight:700;border-top:1px solid var(--ink);border-bottom:0;background:var(--well)}
td input.closing{width:104px;min-height:var(--tap-min);text-align:right;padding:var(--space-sm) var(--space-md);font-family:var(--font-display);font-weight:800;font-size:18px}
td .rowerr{display:flex;gap:var(--space-xs);align-items:center;color:var(--negative-darkest);font-size:14px;font-weight:600;margin-top:var(--space-xs);width:100%}
td .rowerr::before{--i:var(--i-alert);width:18px;height:18px}
tr.err td{background:var(--negative-pale)}
tr.err:hover td{background:var(--negative-pale)}
td.sign,.rline .sign{font-size:14px;color:var(--body);white-space:nowrap}
.wdiff,#wDiff{font-weight:600;white-space:nowrap}

/* Count and weekly tables on phones: cards instead of a wide table */
@media (max-width:700px){
  table.count thead,table.cards thead{display:none}
  table.count,table.count tbody,table.count tr,table.count td,
  table.cards,table.cards tbody,table.cards tr,table.cards td,table.cards tfoot{display:block;width:100%}
  table.count tr,table.cards tr{border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--card)}
  table.count td,table.cards td{border:0;padding:var(--space-xs) 0;text-align:left;background:none!important}
  table.count td[data-l]::before,table.cards td[data-l]::before{content:attr(data-l) ": ";color:var(--body);font-size:14px}
  table.count td.c-close{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}
  table.count tr.err{border-color:var(--negative-darkest);background:var(--negative-pale)}
  table.cards td:empty{display:none}
  table.cards td:has(input){display:flex;flex-direction:column;align-items:stretch;gap:var(--space-xs)}
  table.cards td input{max-width:none!important;width:100%;box-sizing:border-box}
  table.count tfoot tr{border:0;background:none}
  table.cards tfoot tr{background:var(--well);border-color:var(--well)}
}

/* ---------- Totals: big figures in the display face ---------- */
.totals{display:flex;gap:var(--space-lg);flex-wrap:wrap}
.tot{flex:1 1 180px;background:var(--well);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);font-size:14px;font-weight:600}
.tot b{display:block;font-family:var(--font-display);font-weight:800;font-size:32px;line-height:38px;letter-spacing:-0.5px;margin-top:var(--space-xs);font-variant-numeric:tabular-nums}
.tot:last-child{background:var(--inverse);color:var(--on-inverse-soft)}
.tot:last-child b{color:var(--on-inverse)}
/* the Lottery Calendar's blocks all look like the Daily entry Calendar's plain blocks (no dark last one) */
.lc-totals .tot:last-child{background:var(--well);color:inherit}
.lc-totals .tot:last-child b{color:inherit}

/* ---------- Pack lists ---------- */
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;gap:var(--space-md);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--space-md) 0;border-bottom:1px solid var(--line)}
.plist li:last-child{border-bottom:0}
/* A lottery check marked done: quieter, still readable (the Done chip says it in words). */
.plist li.chk-done > span:first-child{color:var(--mute)}
.plist li > span:first-child{flex:1 1 280px}
.chip{display:inline-flex;align-items:center;font-size:13px;line-height:18px;font-weight:600;background:var(--well);color:var(--ink);border-radius:var(--radius-pill);padding:var(--space-xxs) var(--space-md);margin-left:var(--space-sm);vertical-align:2px;letter-spacing:0}
h2 .chip{font-size:14px;vertical-align:4px}

/* ---------- Terminal report lines ---------- */
.rline{display:grid;grid-template-columns:1fr 104px 170px;gap:var(--space-md);align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid var(--line)}
.rline .sign{text-align:center}
.rline input{text-align:right;font-variant-numeric:tabular-nums}
.rline label small{display:block;font-weight:500;font-size:13px;color:var(--body)}
@media (max-width:480px){.rline{grid-template-columns:1fr 88px;}.rline input{grid-column:1/-1}}
.rnote{grid-column:1/-1;font-size:14px;line-height:20px;color:var(--body);margin-top:2px}
.balance{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-top:var(--space-lg);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);background:var(--inverse);color:var(--on-inverse-soft);font-weight:600}
.balance .num{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:38px;color:var(--on-inverse)}

/* ---------- In-app box (no browser pop-ups) ---------- */
.overlay{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:var(--space-lg)}
@media (min-width:600px){.overlay{align-items:center}}
.box{background:var(--card);color:var(--ink);border-radius:var(--radius-xl);padding:var(--space-xl);max-width:480px;width:100%;box-shadow:var(--shadow-modal)}
.overlay>.box{max-height:calc(100dvh - 2 * var(--space-lg));overflow-y:auto}
/* Forms in a box lie across: the box is wide and the fields sit side by side on one line, wrapping only where there is no room
   (Abdul 2026-10-25: "can you change them in a horizontal form so all fields line up in one line", "all forms like this should
   be horizontal"). Three ways forms are written: fields in a .sform, fields straight in the box (.f), and a .grid2. */
.overlay>.box:has(.sform,.grid2,>.f){max-width:min(1400px,100%)}
.box:has(>.f){display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:var(--space-md)}
.box:has(>.f)>*{flex:1 1 100%;min-width:0}
.box:has(>.f)>.f{flex:1 1 130px}
.box:has(>.f)>.f.wide{flex:2 1 200px}
.box .sform .f{flex:1 1 130px}
.box .sform .f.wide{flex:2 1 200px}
.box .sform .f:has(>select),.box:has(>.f)>.f:has(>select){flex-basis:170px}   /* a list's names are not cut short */
.box:has(>.f)>.f label,.box .sform .f label{margin:var(--space-sm) 0 var(--space-xs);font-size:14px;line-height:20px}
.box .grid2{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 var(--space-md)}
.box.box-wide{max-width:min(1040px,100%)}   /* a list in a box (Purchases > + Add / change vendors) */
.lbox h2 .chip{vertical-align:middle}
.box.display-box{max-width:1240px}
/* the Display box uses the width so all of it shows at once: the 5 layouts in a row, Language + Text size beside Color theme */
.box.display-box{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
.display-box h2{margin-bottom:0}
.display-box h3{margin:var(--space-md) 0 var(--space-sm)}
.display-box .muted{margin-bottom:var(--space-sm)}
.display-box .row{margin-top:var(--space-sm)}
.display-box .uiopts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.display-box .uiopt{align-items:flex-start;font-size:14px;line-height:20px}
.display-box .uiopt b{font-size:15px}
.dcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--space-xl)}
.dcols .dopts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
@media (min-width:701px) and (max-width:1100px){.display-box .uiopts{grid-template-columns:repeat(5,minmax(0,1fr))}.display-box .uiopt{flex-direction:column;gap:var(--space-sm)}.dcols .dopts{grid-template-columns:repeat(2,minmax(0,1fr))}.dcols > div:last-child .dopts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.dcols{grid-template-columns:minmax(0,1fr)}}
.box h2{font-size:20px;line-height:28px}

/* ---------- Undo bar: dark, lime Undo, shrinking 10-second line ---------- */
.toast{position:fixed;left:50%;bottom:var(--space-lg);transform:translateX(-50%);background:var(--inverse);color:var(--on-inverse-soft);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-md) var(--space-md) var(--space-xl);display:flex;gap:var(--space-md);align-items:center;z-index:60;max-width:calc(100% - 32px);min-width:min(420px,calc(100% - 32px));box-shadow:var(--shadow-toast);overflow:hidden;font-weight:600}
.toast span{flex:1}
/* An in-app box is open: the toast moves to the top so it never covers the box buttons. */
body:has(.overlay) .toast{top:var(--space-lg)!important;bottom:auto!important}
.toast button{flex:none;display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--primary);color:var(--on-primary);border:0;border-radius:var(--radius-pill);min-height:var(--tap-min);padding:0 var(--space-xl);font-weight:700;cursor:pointer}
.toast button:hover{background:var(--primary-active)}
.toast.undo::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--on-inverse);transform-origin:left;animation:undo-time 10s linear forwards}
@keyframes undo-time{to{transform:scaleX(0)}}

/* Sticky save bar for long lists */
.savebar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:var(--space-md) 0;display:flex;gap:var(--space-md);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--space-md)}
.savebar .btn{min-width:160px}

/* ---------- Phones ---------- */
@media (max-width:700px){
  .top-row{padding:var(--space-sm) var(--space-lg);gap:var(--space-sm)}

  .top-tools{order:3;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-tools select{max-width:none;width:100%;padding-left:var(--space-md);padding-right:32px;background-position:right 10px center;text-overflow:ellipsis}
  .tabs{flex-wrap:nowrap;padding:var(--space-xs) var(--space-lg) var(--space-md)}
  main{padding:var(--space-lg) var(--space-lg) 120px}
  .card{padding:var(--space-lg) var(--space-lg);margin-bottom:var(--space-lg);border-radius:var(--radius-xl)}
  h1{font-size:26px;line-height:32px;letter-spacing:-0.6px}
  h2{font-size:20px;line-height:28px}
  .tot b,.balance .num{font-size:28px;line-height:34px}
  .savebar .btn{flex:1 1 100%}
}

/* ---------- Getting started checklist (new accounts) ---------- */
.setup-head{display:flex;gap:var(--space-lg);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.setup-head h2{margin-bottom:var(--space-xs)}
.setup-head p{margin:0}
.setup-count{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:28px;white-space:nowrap}
.setup-bar{height:8px;border-radius:var(--radius-pill);background:var(--well);overflow:hidden;margin-top:var(--space-lg)}
.setup-bar span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--ink);transition:width .3s ease}
.steps{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}
.step{display:flex;gap:var(--space-lg);align-items:center;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:var(--well);border:1px solid transparent}
.step.next{background:var(--card);border-color:var(--ink)}
.step.done{background:var(--primary-pale)}
.step-mark{flex:none;width:36px;height:36px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink);font-family:var(--font-display);font-weight:800}
.step.next .step-mark{background:var(--primary);color:var(--on-primary)}
.step.done .step-mark{background:var(--card);color:var(--positive-deep)}
.step-body{flex:1 1 220px;min-width:0}
.step-body b{font-weight:700}
.step-body p{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--body)}
.step.done .step-body p{color:var(--ink)}
.step-act{flex:none}
.step .chip{background:var(--card)}
.step .btn.quiet{background:var(--card);border-color:var(--card)}
.step .btn.quiet:hover{background:var(--hover-fill);border-color:var(--hover-fill)}
.step-done{display:inline-flex;align-items:center;gap:var(--space-xs);font-weight:700;font-size:14px;color:var(--positive-deep)}
@media (max-width:700px){
  .step{flex-wrap:wrap;align-items:flex-start;gap:var(--space-md)}
  .step-act{width:100%;padding-left:48px}
  .step-act .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.setup-bar span{transition:none}}

/* ---------- Phone bottom tab bar (Today, Count, Packs, Report, More) ---------- */
.bottomnav{display:none}
.morelist{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-sm)}
.moreitem{display:flex;align-items:center;gap:var(--space-md);width:100%;min-height:56px;padding:0 var(--space-lg);border:0;border-radius:var(--radius-lg);background:var(--well);color:var(--ink);font-weight:600;text-align:left;cursor:pointer}
.moreitem span{flex:1}
.moreitem:hover{background:var(--hover-fill)}
.moreitem[aria-current="page"]{background:var(--primary);color:var(--on-primary)}
/* Phones: CSS straight away (no wait for the script) */
@media (max-width:700px){
  body.has-nav{--navh:calc(72px + env(safe-area-inset-bottom,0px))}
  .has-nav #displayBtn,.has-nav #helpBtn,.has-nav .tilesbar,.has-nav .sidenav{display:none}
  .has-nav .tabs,.has-nav #langPick,.has-nav #themePick,.has-nav .userpill{display:none}
  .has-nav .top-row{flex-wrap:nowrap}
  .has-nav .top-tools{order:0;width:auto;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
  .has-nav .top-row > #storePick{max-width:200px}
  .has-nav .brand{margin-right:0;flex:none}
  .has-nav main{padding-bottom:calc(var(--navh) + 48px)}
  .has-nav .savebar{bottom:var(--navh)}
  .has-nav .toast{bottom:calc(var(--navh) + 12px)}
  .bottomnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-xxs);position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
  .bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border:0;border-radius:var(--radius-lg);background:transparent;color:var(--ink);font-size:13px;line-height:16px;font-weight:500;cursor:pointer;padding:0 2px}
  .bottomnav button .ico{width:44px;height:28px;padding:3px 10px;border-radius:var(--radius-pill);box-sizing:border-box}
  .bottomnav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bottomnav button[aria-current="page"]{font-weight:700}
  .bottomnav button[aria-current="page"] .ico{background:var(--primary);color:var(--on-primary)}
  .bottomnav button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
}
/* Bottom bar: on phones (700px or less) and in the Bottom bar layout on any screen (JS sets body.navb). */
  body.navb.has-nav{--navh:calc(72px + env(safe-area-inset-bottom,0px))}
  .navb.has-nav .tabs,.navb.has-nav #langPick,.navb.has-nav #themePick,.navb.has-nav .userpill{display:none}
  .navb.has-nav .top-row{flex-wrap:nowrap}
  .navb.has-nav .top-tools{order:0;width:auto;flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
  .navb.has-nav .top-row > #storePick{max-width:200px}
  .navb.has-nav .brand{margin-right:0;flex:none}
  .navb.has-nav main{padding-bottom:calc(var(--navh) + 48px)}
  .navb.has-nav .savebar{bottom:var(--navh)}
  .navb.has-nav .toast{bottom:calc(var(--navh) + 12px)}
  .navb .bottomnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-xxs);position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
  .navb .bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border:0;border-radius:var(--radius-lg);background:transparent;color:var(--ink);font-size:13px;line-height:16px;font-weight:500;cursor:pointer;padding:0 2px}
  .navb .bottomnav button .ico{width:44px;height:28px;padding:3px 10px;border-radius:var(--radius-pill);box-sizing:border-box}
  .navb .bottomnav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navb .bottomnav button[aria-current="page"]{font-weight:700}
  .navb .bottomnav button[aria-current="page"] .ico{background:var(--primary);color:var(--on-primary)}
  .navb .bottomnav button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.navb .bottomnav{padding-left:max(var(--space-sm),calc((100% - 760px) / 2));padding-right:max(var(--space-sm),calc((100% - 760px) / 2))}
@media (max-width:360px){.has-nav .tag{display:none}}
/* a phone: no room for everything on one line, so the star stands for Montro-AI and the store's name comes right after it (Abdul 2026-10-22) */
@media (max-width:700px){.has-nav .top-row > #storePick{flex:1 1 auto;min-width:0;max-width:none}}
@media (max-width:560px){.has-nav .tag{display:none}}

@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none;transform:none}.toast.undo::after{animation:none;display:none}}

@media print{
  .top,.no-print,.savebar,.toast{display:none!important}
  body{background:#fff;color:#000}
  .card{border:0;padding:0;background:#fff}
  main{padding:0}
  th,tfoot td{background:none}
}
.print-only{display:none}
@media print{.print-only{display:block}}

/* ---------- Lottery v3 parts (Today page, ledger, file import) ---------- */
.warntext{color:var(--negative-darkest);font-weight:600}
/* Today alerts: tinted cards (word + icon in the title carry the meaning, the tint only helps) */
.card.alert{background:var(--warning-pale);color:var(--ink)}
.card.alert.bad{background:var(--negative-pale)}
.card.alert.ok{background:var(--primary-pale)}
.card.alert h3{display:flex;gap:var(--space-sm);align-items:center}
.card.alert .plist li{border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent)}
.statusgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-lg)}
.status{background:var(--well);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl)}
.status b{display:block;font-size:18px;line-height:26px;font-weight:700;margin-bottom:var(--space-xs)}
.status .btn.quiet{background:var(--card);border-color:var(--card)}
.status .btn.quiet:hover{background:var(--hover-fill);border-color:var(--hover-fill)}
/* Two-choice switch: pills, the chosen one dark with lime words */
.seg{display:inline-flex;gap:var(--space-xs);padding:var(--space-xs);border-radius:var(--radius-pill);background:var(--well);flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:0 var(--space-xl);min-height:var(--tap-min);border-radius:var(--radius-pill);cursor:pointer;font-weight:600;font-size:14px;color:var(--ink)}
.seg button:hover{background:var(--hover-fill)}
.seg button[aria-pressed="true"]{background:var(--inverse);color:var(--on-inverse);font-weight:700}
[data-theme="night"] .seg button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .seg button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}}
.ledger td,.ledger th{white-space:nowrap}
.ledger tr.wk td{background:var(--well)}
.ledger tr.fwd td{font-style:italic}
.neg{color:var(--negative-darkest);font-weight:600}
input[type=file]{max-width:100%;width:100%;font-size:15px;min-height:var(--tap-min);padding:var(--space-sm);border:1px dashed var(--line-strong);border-radius:var(--radius-md);background:var(--card)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;min-height:40px;padding:0 var(--space-lg);margin-right:var(--space-md);border:0;border-radius:var(--radius-pill);background:var(--well);color:var(--ink);cursor:pointer}
select{max-width:100%}
.plist li > span{min-width:0;overflow-wrap:anywhere}
@media (min-width:701px){
  .ledger th:first-child,.ledger td:first-child{position:sticky;left:0;background:var(--card);z-index:1}
  .ledger th:last-child,.ledger td:last-child{position:sticky;right:0;background:var(--card);z-index:1;box-shadow:-6px 0 6px -6px rgba(0,0,0,.25)}
  .ledger thead th:first-child,.ledger thead th:last-child{background:var(--well)}
  .ledger tr.wk td:first-child,.ledger tr.wk td:last-child{background:var(--well)}
}

/* Older colour names kept so any screen not yet moved over still gets the new look. Use the token names above for new work. */
:root{--bg:var(--page);--muted:var(--body);--soft:var(--well);--brand:var(--primary);--brand-ink:var(--on-primary);
  --ok:var(--positive-deep);--ok-bg:var(--primary-pale);--bad:var(--negative-darkest);--bad-bg:var(--negative-pale);--warn:var(--warning-content);--warn-bg:var(--warning-pale);
  --radius:var(--radius-md);--tap:var(--tap-min)}

/* ---------- Store App v1: Daily entry, side pages, Calendar, Store setup ---------- */
.chip.ok{background:var(--primary-pale);color:var(--positive-deep)}
h1 .chip{font-size:14px;vertical-align:6px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}
.dgrid > .card{margin-bottom:0}
@media (max-width:900px){.dgrid{grid-template-columns:1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}}
.dline{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-md);align-items:center;min-height:56px;padding:var(--space-xs) 0;border-bottom:1px solid var(--line)}
.dl-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.dl-name small{display:block;font-weight:500;font-size:13px;line-height:18px;color:var(--body)}
.dl-amt{font-weight:700;font-size:18px}
.dl-edit,.dl-q{width:var(--tap-min);padding:0!important;border-radius:var(--radius-pill)!important}
.dl-lock{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);color:var(--body)}
.dline.off .dl-name,.dline.off .dl-amt{color:var(--mute)}
.dline.off .dl-amt{font-weight:500}
.dl-q{font-weight:800}
.dl-note{grid-column:1/-1;font-size:14px;line-height:20px;color:var(--ink);background:var(--well);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-xs)}
.dtotal{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-top:var(--space-lg);padding:var(--space-md) var(--space-lg);background:var(--well);border-radius:var(--radius-lg);font-weight:600}
.dtotal b{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:32px}
.balance small{color:var(--on-inverse-soft);font-size:13px}
#totSO{white-space:nowrap}
/* side page: slides in from the right edge; full screen on phones */
.overlay.drawer-ov{justify-content:flex-end;align-items:stretch;padding:0}
.drawer{background:var(--card);color:var(--ink);width:min(800px,52vw);min-width:440px;height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-modal);border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
.drawer.full{width:100%;border-radius:0}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:22px;line-height:28px}
.drawer-body{flex:1 1 auto;overflow:auto;padding:var(--space-lg) var(--space-xl)}
.drawer.full .drawer-body{max-width:1100px;width:100%;margin:0 auto}
.drawer-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;padding:var(--space-md) var(--space-xl) calc(var(--space-md) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.drawer-foot .btn{min-width:140px}
.dsum{font-weight:700}
@media (max-width:700px){.drawer{width:100%;min-width:0;border-radius:0}.drawer-head,.drawer-body,.drawer-foot{padding-left:var(--space-lg);padding-right:var(--space-lg)}}
.etable input.amt{width:150px;max-width:100%;text-align:right;font-variant-numeric:tabular-nums}
.etable td{vertical-align:middle}
.etable td .chip{margin-left:0;margin-top:4px}
.etable td .btn{margin-top:var(--space-xs)}
@media (max-width:560px){.etable input.amt{width:110px}.etable th,.etable td{padding:var(--space-sm) var(--space-xs)}}
input.bad{border-color:var(--negative-darkest);background:var(--negative-pale)}
.erow{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:flex-end;padding:var(--space-md) 60px var(--space-md) var(--space-lg);border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}
.erow-n{position:absolute;top:var(--space-sm);left:var(--space-sm);font-size:12px;font-weight:700;color:var(--body)}
.erow label,.sform label{margin:0 0 var(--space-xs);font-size:14px;line-height:20px}
.erow .f,.sform .f{flex:1 1 130px;min-width:0}
.erow .f.wide,.sform .f.wide{flex:2 1 200px}
.erow .f.money input{text-align:right;font-variant-numeric:tabular-nums}
.erow .calc{flex:1 1 100%;font-size:14px;font-weight:600;color:var(--body)}
.erow .calc:empty{display:none}
.erow .rm{position:absolute;top:var(--space-xs);right:var(--space-xs);width:40px;min-height:40px;padding:0;border-radius:var(--radius-pill);border-color:var(--line-strong)}
/* Calendar */
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-xs)}
.calhead{font-size:13px;font-weight:600;text-align:center;color:var(--body);padding:var(--space-xs) 0}
.calcell{min-height:92px;border:0;border-radius:var(--radius-md);background:var(--well);color:var(--ink);padding:var(--space-sm);font:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.calcell:hover:not([disabled]){background:var(--hover-fill)}
.calcell[disabled]{cursor:default;opacity:.5}
.calcell.empty{background:transparent}
.calcell.saved{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong)}
.calcell.ready{box-shadow:inset 0 0 0 2px var(--ink)}
.calcell .dn{font-weight:700}
.calcell small{font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.calcard{display:none}}
/* Store setup */
.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-sm)}
.part{display:flex;gap:var(--space-md);align-items:center;min-height:var(--tap-min);margin:0;padding:var(--space-sm) var(--space-md);background:var(--well);border-radius:var(--radius-md);font-weight:600;cursor:pointer}
.part input{width:22px;height:22px;flex:none;accent-color:var(--inverse)}
details.slist{border-bottom:1px solid var(--line);padding:var(--space-xs) 0}
details.slist:last-child{border-bottom:0}
details.slist > summary{font-size:17px}
.sform{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:flex-end;margin:var(--space-md) 0 var(--space-sm);padding:var(--space-md);background:var(--well);border-radius:var(--radius-lg)}
.sform .f.btnf{flex:0 0 auto}
.box .sform{background:none;padding:0}
main > .savebar{padding:var(--space-md) var(--space-xl);border:0;border-radius:var(--radius-xl);box-shadow:var(--shadow-toast);margin-top:0;margin-bottom:var(--space-xl)}
.balance{flex-wrap:wrap}
@media (max-width:700px){
  #totSO{font-size:26px;line-height:32px}
  main > .savebar{padding:var(--space-sm) var(--space-md)}
  #dayBar{font-size:13px;line-height:18px}
  .dl-amt{font-size:16px}
}

/* Short / Over as a status (Daily entry, Calendar): red short, gold over, green even, with an icon and the word */
.balance.sobal.so-short,.tot.sotot.so-short{background:var(--negative-pale);color:var(--negative-darkest)}
.balance.sobal.so-over,.tot.sotot.so-over{background:var(--warning-pale);color:var(--warning-content)}
.balance.sobal.so-even,.tot.sotot.so-even{background:var(--primary-pale);color:var(--positive-deep)}
.balance.sobal .num,.tot.sotot.so-short b,.tot.sotot.so-over b,.tot.sotot.so-even b{color:inherit}
#totSO::before,#calSO::before{content:"";display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-3px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.so-short #totSO,.so-over #totSO,.so-short #calSO,.so-over #calSO{--i:var(--i-alert)}
.so-even #totSO,.so-even #calSO{--i:var(--i-check)}
.balance.sobal small{color:inherit}

/* Customized Way (Daily entry): drag the dots to change the order inside a column; forms open as centred windows */
.dline.cw{grid-template-columns:auto minmax(0,1fr) auto auto}
/* the register's number beside a line (Store settings > Merchandise says Yes; db/124, 2026-10-25): its own column next to the
   Daily entry's amount, the difference in words with an icon under it; on a phone it goes under the line */
.withreg .dline{grid-template-columns:minmax(0,1fr) auto 184px auto}
.withreg .dline.cw{grid-template-columns:auto minmax(0,1fr) auto 184px auto}
.dl-reg{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-left:var(--space-md);border-left:2px solid var(--line);min-height:40px;justify-content:center}
.dl-reg:empty{border-left-color:transparent}
.dl-reg small{font-size:12px;line-height:16px;color:var(--body)}
.dl-reg b{font-size:16px;font-weight:700}
.dl-reg .dl-regd{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.dl-reg .dl-regd.same{color:var(--positive-deep)}
.dl-reg .dl-regd.differs{color:var(--negative-darkest)}
.dl-reg .dl-regd .ico{width:14px;height:14px}
.dl-subreg{font-size:13px}
.day-regnote{display:flex;align-items:flex-start;gap:var(--space-xs);margin:var(--space-sm) 0 0}
.day-regnote .ico{flex:0 0 auto;margin-top:3px}
@media (max-width:700px){
  .withreg .dline{grid-template-columns:minmax(0,1fr) auto auto}
  .withreg .dline.cw{grid-template-columns:auto minmax(0,1fr) auto auto}
  .withreg .dl-reg{grid-column:1/-1;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-sm);border-left:0;padding-left:0;min-height:0}
  .withreg .dl-reg:empty{display:none}
}
.dl-grip{display:inline-flex;align-items:center;justify-content:center;width:36px;min-height:var(--tap-min);padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--body);cursor:grab;touch-action:none}
.dl-grip:hover{background:var(--well);color:var(--ink)}
.dl-grip:active{cursor:grabbing}
.dl-grip-sp{width:36px}
svg.ico path[d^="M9 6h.01"]{stroke-width:3.6}
.dunit.dragging{opacity:.65;background:var(--well);border-radius:var(--radius-md)}
.dlist.nodrop{outline:2px dashed var(--negative-darkest);outline-offset:4px;border-radius:var(--radius-md)}
input.dl-in{width:170px;grid-column:span 2;justify-self:end;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:560px){input.dl-in{width:120px}}
.overlay.drawer-ov.center{justify-content:center;align-items:center;padding:var(--space-lg)}
.drawer.center{height:auto;max-height:calc(100vh - 32px);width:min(720px,100%);min-width:0;border-radius:var(--radius-xl)}
.drawer.center.full{width:min(1100px,100%)}
@media (max-width:700px){.overlay.drawer-ov.center{padding:0}.drawer.center,.drawer.center.full{width:100%;height:100%;max-height:none;border-radius:0}}

/* Calendar: printer button on each saved day; the printed daily report */
.calwrap{position:relative;display:flex;min-width:0}
.calwrap .calcell{flex:1 1 auto;width:100%}
.calprint{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--well);color:var(--ink);cursor:pointer}
.calprint:hover{background:var(--hover-fill)}
.calprint .ico{width:18px;height:18px}
/* The Print view (Abdul 2026-10-22): a Print button first shows the paper; Print on it sends only the paper to the printer */
.overlay.pview{z-index:90;align-items:center;justify-content:center;padding:var(--space-lg)}
.pv-box{display:flex;flex-direction:column;width:100%;max-width:1000px;height:calc(100dvh - 2 * var(--space-lg));background:var(--card);color:var(--ink);border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);overflow:hidden}
.pv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--line)}
.pv-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-head strong{display:inline-flex;align-items:center;gap:8px;font-size:20px;line-height:26px}
.pv-head strong .ico{width:22px;height:22px}
.pv-note{color:var(--muted);font-size:14px;line-height:20px}
.pv-acts{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pv-acts .btn{min-height:48px}
.pv-scroll{flex:1 1 auto;overflow:auto;background:var(--well);padding:var(--space-lg)}
/* the sheet: letter-size paper, black on white whatever the colour theme */
.pv-sheet{color-scheme:light;--card:#fff;--ink:#000;--body:#222;--muted:#444;--mute:#555;--soft:#f2f2f2;--well:#f2f2f2;--page:#fff;--line:#bbb;--line-strong:#888;--primary-pale:#f2f2f2;--primary-neutral:#ccc;
  background:#fff;color:#000;max-width:816px;min-height:100%;margin:0 auto;padding:48px 56px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.08);font-size:12px;line-height:16px}
.pv-copy .card{border:0;padding:0;margin:0 0 12px;background:#fff;box-shadow:none}
.pv-copy .tablewrap{overflow:visible}
.pv-copy button,.pv-copy a{pointer-events:none}
@media (max-width:700px){
  .overlay.pview{padding:0}
  .pv-box{height:100dvh;border-radius:0}
  .pv-bar{padding:var(--space-sm) var(--space-md)}
  .pv-scroll{padding:var(--space-sm)}
  .pv-sheet{padding:20px 16px}
}
@media print{
  body.printing-day > *:not(#printView){display:none!important}
  body.printing-day #printView{position:static;display:block;padding:0;background:none}
  #printView .pv-box{display:block;height:auto;max-width:none;border-radius:0;box-shadow:none;overflow:visible;background:#fff}
  #printView .pv-bar{display:none}
  #printView .pv-scroll{overflow:visible;padding:0;background:none}
  #printView .pv-sheet{max-width:none;min-height:0;margin:0;padding:0;border-radius:0;box-shadow:none}
}
  #printArea h1{font-size:20px;line-height:24px;margin:2px 0}
  #printArea h2{font-size:14px;line-height:18px;margin:10px 0 4px;border-bottom:1.5px solid #000;padding-bottom:2px}
  #printArea .phead{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #000;padding-bottom:6px}
  #printArea .pbrand{font-weight:800;font-size:13px}
  #printArea .pstatus{text-align:right;font-size:11px}
  #printArea .pcols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  #printArea .ptable{width:100%;border-collapse:collapse;font-size:12px}
  #printArea .ptable td{padding:2px 0;border-bottom:0;background:none}
  #printArea .ptable tr.pl td{border-top:1px solid #bbb;padding-top:4px}
  #printArea .ptable tr.pd td{padding-left:12px;font-size:11px}
  #printArea .ptable td.num{text-align:right;white-space:nowrap}
  #printArea .pmuted{color:#444;font-weight:400}
  #printArea .ptot{display:flex;justify-content:space-between;font-weight:700;border-top:1.5px solid #000;margin-top:4px;padding-top:4px}
  #printArea .pso{display:flex;justify-content:space-between;align-items:center;border:2px solid #000;padding:6px 10px;margin:12px 0;font-size:15px}
  #printArea .pso small{font-size:10px;font-weight:400}
  #printArea .pfoot{margin-top:12px;font-size:10px;color:#444}

/* Calendar month boxes: average a day in fine print beside the month number */
.totrow{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--space-sm);margin-top:var(--space-xs)}
.totrow b{display:inline;margin-top:0}
.totavg{font-size:13px;line-height:18px;font-weight:600;opacity:.8;white-space:nowrap}
/* ---------- Read from photo (AI) ---------- */
.photo-bar{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-md)}
.photo-bar .muted{flex:1 1 220px;font-size:14px;line-height:20px}
.photo-picks{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
.photo-picks .btn{flex:1 1 180px;min-height:var(--tap-large)}
.photo-pick{position:relative;overflow:hidden;cursor:pointer}
.photo-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.photo-pick:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.photo-pick.busy{opacity:.45;pointer-events:none}
/* Drag and drop a file (js/app.js dzMark; Abdul 2026-10-28). A computer with a mouse: the picker's area has a dashed frame and
   "Drag and drop the file here, or:" above its buttons. A phone or tablet: the buttons only, as before. While a file is dragged
   over the window every drop area lights up (a thick frame, a pale fill) and says "Drop it here"; the one under the pointer gets a
   solid frame (never colour alone: the frame and the words change too). */
.dz-hint{display:none;align-items:center;gap:var(--space-sm);flex:1 1 100%;margin:0;color:var(--body);font-size:15px;line-height:22px;font-weight:600}
.dz-now{display:none}
.dz-msg{flex:1 1 100%;margin-top:0}
.dz-wrap{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center}
@media (hover:hover) and (pointer:fine){
  .dz:not(.dz-mini){border:2px dashed var(--line-strong);border-radius:var(--radius-lg);padding:var(--space-md)}
  .dz-hint{display:flex}
  .dz.row{flex-wrap:wrap}
}
body.dz-drag .dz-live{outline:3px dashed var(--ink);outline-offset:3px;background:var(--primary-pale);border-color:transparent}
body.dz-drag .dz-live .dz-hint{display:flex;color:var(--ink)}
body.dz-drag .dz-live .dz-idle{display:none}
body.dz-drag .dz-live .dz-now{display:inline}
body.dz-drag .dz-over{outline-style:solid;outline-width:4px}
body.dz-drag .dz-live *{pointer-events:none}
.chip.photo{gap:4px;background:var(--primary-pale);color:var(--positive-deep)}
.chip.photo .ico{width:16px;height:16px;vertical-align:0}
.chip.photo.check{background:var(--warning-pale);color:var(--warning-content)}
.chip.photo.check::before{content:"";width:16px;height:16px;margin-right:2px;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.photo-note > div{display:flex;flex-direction:column;gap:var(--space-xs);align-items:flex-start}
.photo-note p{margin:0}
.photo-note .btn{margin-top:var(--space-sm)}
.rline label .chip{vertical-align:1px}
td.c-close .chip.photo{margin-left:var(--space-sm)}

/* Lottery: its pages in a second row under the Lottery tab (also on phones, under the top bar) */
.subtabs{display:flex;gap:var(--space-xs);overflow-x:auto;scrollbar-width:none;max-width:none;margin:0;padding:0 var(--space-xl) var(--space-md)}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);padding:0 var(--space-lg) 0 var(--space-sm);border:0;border-radius:var(--radius-pill);background:var(--well);color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer}
.subtabs button:hover{background:var(--hover-fill)}
.subtabs button[aria-selected="true"]{background:var(--primary);color:var(--on-primary);font-weight:700}
@media (max-width:700px){.subtabs{padding:0 var(--space-lg) var(--space-sm)}}

/* Calendar: the day just saved is marked for a moment (thick outline + soft glow; the ✓ and words carry the meaning) */
@keyframes savedflash{0%{box-shadow:0 0 0 0 var(--primary)}30%{box-shadow:0 0 0 8px var(--primary)}100%{box-shadow:inset 0 0 0 2px var(--ink)}}
.calcell.flash{animation:savedflash 1.6s ease-out 2;box-shadow:inset 0 0 0 2px var(--ink)}
#calTable tr.flash td{background:var(--primary-pale)}
@media (prefers-reduced-motion:reduce){.calcell.flash{animation:none}}

/* ---------- Scan to count ---------- */
.scan-box{margin-bottom:var(--space-lg)}
.scan-box label{display:flex;align-items:center;gap:var(--space-sm);margin-top:0}
.scan-box input{min-height:var(--tap-large);font-size:20px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.scan-box .muted{font-size:14px;line-height:20px;margin:var(--space-sm) 0 0}
.chip.photo.scanned{background:var(--primary-pale);color:var(--positive-deep)}
@keyframes rowflash{from{background:var(--primary-pale)}to{background:transparent}}
tr.flash td{animation:rowflash 1.4s ease-out}
@media (prefers-reduced-motion:reduce){tr.flash td{animation:none;background:var(--primary-pale)}}
.scan-box #camScan{margin-top:var(--space-sm)}
/* Camera scanner: full screen, dark so the picture stands out */
.camscan{position:fixed;inset:0;z-index:70;background:#0e0f0c;color:#fff;display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);overflow:auto}
.camscan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.camscan-top h2{color:#fff;margin:0}
.camscan-view{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:#000;flex:0 0 auto}
.camscan-view video{display:block;width:100%;max-height:58vh;object-fit:cover}
.camscan-frame{position:absolute;left:8%;right:8%;top:27.5%;bottom:27.5%;border:3px solid var(--primary);border-radius:var(--radius-lg);box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.camscan .msg{margin:0}
.camscan-hint{color:#d9dcd6;font-size:15px;line-height:22px;margin:0}

/* ---------- Locked lines (reconciled with the bank / invoice paid) ---------- */
.erow.locked{background:var(--well);border-style:dashed;padding-right:var(--space-lg)}
.erow.locked input,.erow.locked select{opacity:.85;cursor:not-allowed}
.lockwhy{flex:1 1 100%;display:flex;align-items:center;gap:var(--space-xs);font-size:14px;font-weight:600;color:var(--body)}
.lockwhy .ico{width:16px;height:16px}

/* ---------- Bank ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bk-bar>div{display:flex;flex-direction:column}
.bk-bar .btnf{justify-content:flex-end}
/* the fuel delivery box: Cancel, then Save, on the right (2026-10-26) */
.row.fd-btns{justify-content:flex-end}
/* Lottery > Packs, + Receive a pack box (2026-10-26): the delivery list with + New delivery beside it; its small form under it */
.pk-delrow{margin:0;flex-wrap:nowrap;align-items:center}
.pk-delrow select{flex:1 1 auto;min-width:0}
.pk-delrow .btn{flex:none;white-space:nowrap}
.pk-delform{margin-top:var(--space-xs);padding:var(--space-md);border-radius:var(--radius);background:var(--well)}
.pk-delform label{margin-top:0}
.pk-none{margin:0}
/* Activate a pack (2026-10-26): the day, a short Bin box beside it, a short next-ticket box under them with its hint */
.box .sform.act-form .f.act-date{flex:0 1 290px}
.box .sform.act-form .f.act-bin{flex:0 1 170px}
.box .sform.act-form .f.act-bin label{white-space:nowrap}
.box .sform.act-form .f.act-next{flex:1 1 100%}
.box .sform.act-form .f.act-next input{max-width:170px}
#actNextHint{font-size:14px;margin:var(--space-xs) 0 0}
/* + Receive packs (2026-10-26): the three ways in (Type, Scan, Photo of the delivery slip), then the list and Confirm */
.pk-how{margin:var(--space-md) 0 var(--space-xs);font-weight:700}
.pk-modes button{display:inline-flex;align-items:center;gap:6px}
.pk-mode .sform{margin-bottom:var(--space-xs)}
.box .sform.pk-typeform .f{flex:0 1 180px}
.pk-hint{font-size:14px;margin:0 0 var(--space-sm)}
.pk-listhead{margin:var(--space-md) 0 var(--space-sm)}
#pkList input.pk-in{min-height:40px;padding:4px 8px;font-size:15px;width:100%;min-width:70px}
#pkList td[data-l] input.pk-in[data-pf="name"]{min-width:140px}
#pkPendNote{margin:0 0 var(--space-sm)}
/* Received packs by date: the day's line (its packs and their value) */
#pkSafeTable tr.pk-day td{background:var(--well);padding-top:10px;padding-bottom:10px}
/* Weekly Settlement (2026-10-26): a short week bar; the ? beside the title; the line names note beside Save */
.weekbar.wk-short{max-width:460px}
.pu-head h1 .dl-q{vertical-align:middle;margin-left:var(--space-xs)}
.wk-names{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
/* Daily Count (2026-10-26): a short scan box with its camera beside it; a counted row tinted with a check mark */
.cnt-scanhead{display:flex;align-items:center;gap:var(--space-sm)}
.cnt-scanhead label{margin:0}
.cnt-scanrow{margin:var(--space-xs) 0 0;flex-wrap:wrap;align-items:center}
.cnt-scanrow #scanIn{flex:0 1 380px;min-width:0;width:auto}
.cnt-scanrow #camScan{margin-top:0}
.cnt-mark{display:none;font-weight:800;color:var(--positive-deep);margin-right:6px}
table.count tr.cnt-done td{background:color-mix(in srgb,var(--positive-deep) 10%,var(--card))}
table.count tr.cnt-done .cnt-mark{display:inline}
@media (max-width:700px){table.count tr.cnt-done{background:color-mix(in srgb,var(--positive-deep) 10%,var(--card));border-color:color-mix(in srgb,var(--positive-deep) 40%,var(--line))}}
#bankTable tr.brow td{background:var(--well);font-weight:600}
#bankTable td.acts .btn,#stmtTable .btn{white-space:nowrap}
.bk-end{margin-top:var(--space-md)}
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-lg);align-items:start;margin-top:var(--space-md)}
/* Fuel > Jobber (2026-10-26): Pay the Jobber on top, across the page: the draft notice beside the form on one line */
.jb-owed .pu-head{align-items:baseline}
.jb-owed .owed-row{gap:var(--space-md)}
.jb-pay-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:var(--space-lg);align-items:start}
.jb-pay-grid .sform{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md)}
.jb-pay-grid .sform .f{flex:1 1 160px;margin:0}
.jb-sums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-xl);margin-top:var(--space-md)}
@media (max-width:520px){.jb-sums{grid-template-columns:1fr}}
.jb-sums .rp-row.strong{border-top:1px solid var(--line);margin-top:var(--space-xs);padding-top:var(--space-sm)}
.jb-sums p,.jb-sums>.rp-diff{grid-column:1/-1}
.jb-sums>.rp-diff{justify-content:flex-start;gap:var(--space-lg);font-size:17px}
#jbTable th.jb-tick,#jbTable td.jb-tick{text-align:center;width:64px}
@media (max-width:900px){.jb-pay-grid{grid-template-columns:1fr}}
.recpanel{position:sticky;top:var(--space-md);padding:var(--space-lg);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card)}
.rp-row{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-xs) 0;font-variant-numeric:tabular-nums}
.rp-row.strong{border-top:1px solid var(--line);margin-top:var(--space-xs);padding-top:var(--space-sm)}
.rp-diff b{text-align:right}
.rp-diff.ok b{color:var(--positive-deep)}
.rp-diff.off b{color:var(--negative-darkest)}
.tick input{width:24px;height:24px;margin:0;cursor:pointer}
.tick{display:inline-flex;align-items:center;min-height:var(--tap-min);cursor:pointer}
#recTable tr.later td{color:var(--body)}
.ptable{width:100%;border-collapse:collapse;margin:8px 0 16px}
.ptable td,.ptable th{border-bottom:1px solid #ccc;padding:4px 6px;text-align:left}
.ptable .num{text-align:right}
@media (max-width:900px){.rec-grid{grid-template-columns:1fr}.recpanel{position:static;order:-1}}
@media (max-width:700px){
  #recTable td:first-child{display:flex}
  #recTable td:first-child::before{content:none}
}
#printArea table.cards{width:100%;border-collapse:collapse;font-size:11px}
#printArea table.cards thead{display:table-header-group}
#printArea table.cards th,#printArea table.cards td{border-bottom:1px solid #999;padding:3px 5px;text-align:left}
#printArea table.cards .num{text-align:right}
#bankTable td.acts .row{flex-wrap:nowrap}
#stmtTable td:last-child .row{flex-direction:column;align-items:stretch;gap:var(--space-xs)}
@media (max-width:700px){#bankTable td.acts .row,#stmtTable td:last-child .row{flex-direction:row;flex-wrap:wrap}}
@media (max-width:700px){table.cards td[data-l=""]::before{content:none}}
#stmtTable th{white-space:normal;vertical-align:bottom}
#stmtTable th,#stmtTable td{padding-left:8px;padding-right:8px}

/* ---------- Credit invoices ---------- */
.owed-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-md);font-size:18px}
.owed-row b{font-size:28px;font-variant-numeric:tabular-nums}
.ivendor h2{display:flex;justify-content:space-between;gap:var(--space-md)}
.ivtot{font-size:18px;font-variant-numeric:tabular-nums}
.ivtable td.acts .row,#ivPaid td.acts .row{flex-wrap:nowrap}
.ivfacts{display:grid;grid-template-columns:auto 1fr;gap:var(--space-xs) var(--space-md);margin:0 0 var(--space-md)}
.ivfacts dt{color:var(--body)}
.ivfacts dd{margin:0}
.erow.pays{background:var(--well)}
#ivPick td:first-child{width:48px}

/* ---------- Fuel ---------- */
.box.wide{max-width:1000px}
.tiles.fu-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md)}
.fu-tiles .tile{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);border:1px solid var(--line);border-radius:var(--radius-lg)}
.fu-tiles .tile b{font-size:22px;font-variant-numeric:tabular-nums}
.fu-grid input.amt{width:100%;min-width:80px;max-width:120px;text-align:right}
.fu-total{display:flex;justify-content:space-between;gap:var(--space-md);font-size:18px;padding:var(--space-md) 0;border-top:1px solid var(--line)}
.fu-total b{font-variant-numeric:tabular-nums}
#tkTable input{max-width:110px}
#tkTable input.tk-no{max-width:70px}
#fuTable td.acts .row,#jbDrafts .row{flex-wrap:wrap}
@media (max-width:700px){.fu-grid input.amt,#tkTable input{max-width:none}}
/* ---------- Merchandise: items and vendor invoices ---------- */
.box.tall{max-height:calc(100dvh - 32px);overflow:auto}
.chip.okc{gap:4px;background:var(--primary-pale);color:var(--positive-deep)}
.chip.okc .ico{width:14px;height:14px;vertical-align:0}
.chip.warnc{background:var(--warning-pale);color:var(--warning-content)}
.chip.warnc::before{content:"";width:14px;height:14px;margin-right:4px;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left;min-height:32px}
.mi-search{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center;margin-top:var(--space-md)}
.mi-search input{flex:1 1 280px;min-width:0}
#miTable tr.off td{color:var(--body)}
.mi-coderow{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-sm)}
.mi-coderow input[data-c="code"],.mi-coderow input[data-v="item_no"]{flex:1 1 200px;min-width:0}
.mi-coderow select{flex:1 1 180px;min-width:0}
.mi-singles{display:inline-flex;gap:var(--space-xs);align-items:center;margin:0;font-size:14px}
.mi-singles input{width:90px}
.mi-own{font-size:14px}
.mi-calc{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;font-weight:600;padding-bottom:var(--space-sm)}
.mi-calc .muted{font-weight:400}
.mi-active{display:flex;width:max-content;max-width:100%;margin-top:var(--space-md);gap:var(--space-sm)}
.mi-costs li{padding:var(--space-sm) 0}
.mv-adds{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
.mv-head{margin-top:var(--space-md)}
.mv-lines input{min-height:var(--tap-min);padding:var(--space-xs) var(--space-sm)}
.mv-lines td{padding:var(--space-sm) 6px}
.mv-lines input.mv-desc{width:100%;min-width:180px;margin-top:6px}
.mv-lines input.mv-code{display:block;width:142px}
.mv-lines input.mv-code + input.mv-code{margin-top:6px}
.mv-lines input.mv-uom{width:56px;text-transform:uppercase}
.mv-lines input.mv-sm{width:64px;text-align:right}
.mv-lines input.mv-amt,#mvPrices input.mv-amt{width:88px;text-align:right;font-variant-numeric:tabular-nums}
.mv-lines td.mv-item{min-width:220px}
.mv-lines td.mv-item .chip{margin-left:0}
.mv-lines input.mv-code{width:132px}
/* price, profit, margin and total retail on each line, and the sums under the lines (Abdul 2026-10-28) */
.mv-cnote{font-size:13px;line-height:18px;margin-top:4px;max-width:150px;white-space:normal}
.mv-cnote .chip{margin:2px 0 0;white-space:nowrap}
td.mv-r{white-space:nowrap;font-variant-numeric:tabular-nums}
.mv-neg{color:var(--warning-content)}
/* a vendor file's line is locked: text, not boxes; only Price / item is a box (Abdul 2026-10-28) */
.mv-locked .mv-txt{display:inline-block;min-height:var(--tap-min);line-height:var(--tap-min);font-variant-numeric:tabular-nums}
.mv-locked td{vertical-align:top}
.mv-locked .mv-lsub{font-size:14px;line-height:20px;margin-top:4px}
.mv-locked td.mv-r{line-height:var(--tap-min)}
.mv-locknote{margin:0 0 var(--space-sm);font-size:14px;line-height:20px}
td.mv-p{white-space:nowrap}
td.mv-p .mv-pnote{white-space:normal;max-width:170px;margin-left:auto}
.mv-sums{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-sm) var(--space-xl);margin-top:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:var(--well)}
.mv-sum{display:flex;flex-direction:column;align-items:flex-end;min-width:110px}
.mv-sum span{font-size:13px;line-height:18px;color:var(--body);font-weight:600}
.mv-sum b{font-size:20px;line-height:28px;font-variant-numeric:tabular-nums}
.mv-sumnote{text-align:right;margin:6px 0 0;font-size:14px}
.mv-lines td.mv-n{vertical-align:top;padding-top:var(--space-md)}
.mv-lines td.mv-n > span{display:block;font-variant-numeric:tabular-nums;color:var(--body)}
.mv-del{font-size:13px;font-weight:600;min-height:28px;margin-top:4px}
.mv-case{font-size:13px;margin-top:2px}
.pk-res{max-height:50vh;overflow:auto;margin-top:var(--space-md)}
@media (max-width:700px){
  .mv-lines td.mv-n{display:flex!important;justify-content:space-between;align-items:center;padding-top:0}
  .mv-lines td.mv-n > span{font-weight:700;color:var(--ink)}
  .mv-lines td.mv-n > span::before{content:"#"}
  .mv-lines input.mv-code,.mv-lines input.mv-uom,.mv-lines input.mv-sm,.mv-lines input.mv-amt{width:100%}
  .mv-lines td.mv-cpi{text-align:left}
  .mv-lines tr{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--space-sm)}
  .mv-lines td{grid-column:span 6;min-width:0!important}
  .mv-lines td:nth-child(4),.mv-lines td:nth-child(5),.mv-lines td:nth-child(6){grid-column:span 2}
  .mv-lines td:nth-child(7),.mv-lines td:nth-child(8){grid-column:span 3}
  .mv-lines td.mv-cpi .chip,#mvPrices .chip,#mvPrices td.num,#miTable td.num{white-space:normal}
}
/* ---------- Delivery check-in ---------- */
.ck-head{font-size:18px;margin:var(--space-xs) 0 var(--space-md)}
.ck-mode{max-width:360px;margin-bottom:var(--space-xs)}
.ck-mode-text{margin:0 0 var(--space-xs)}
.ck-scan label{font-weight:600}
.ck-scanrow{display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:center;margin-top:var(--space-xs)}
.ck-scanrow input{flex:1 1 220px;min-width:0;font-size:20px;font-variant-numeric:tabular-nums}
.ck-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.ck-top h2{margin:0}
.ck-line{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;padding:var(--space-md) 0;border-bottom:1px solid var(--line);border-radius:var(--radius-md)}
.ck-line:last-child{border-bottom:0}
.ck-line.got .ck-in{border-color:var(--positive-deep);font-weight:800}
.ck-line.flash{animation:ckflash 1.2s ease-out}
@keyframes ckflash{0%{background:var(--primary-pale)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.ck-line.flash{animation:none;background:var(--primary-pale)}}
.ck-name{display:flex;flex-direction:column;gap:2px;flex:1 1 240px;min-width:0}
.ck-name .muted{font-size:14px}
.ck-count{display:flex;align-items:center;gap:var(--space-sm)}
.ck-pm{width:56px;min-height:56px;padding:0;font-size:28px;font-weight:700;border-radius:var(--radius-lg)}
.ck-count input.ck-in{width:96px;flex:0 0 96px;min-height:56px;text-align:center;font-size:22px;font-variant-numeric:tabular-nums}
.ck-xq{min-width:48px;text-align:center;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.ck-saved{color:var(--body);font-size:14px}
.ck-saved.bad{color:var(--negative-deep);font-weight:600}
.ck-res li > span:first-child{line-height:1.5}
.ck-note{width:100%;box-sizing:border-box;font-family:inherit;padding:var(--space-sm)}
.ck-print{white-space:pre-wrap;font-family:inherit;font-size:15px}
@media (max-width:700px){.ck-count{width:100%;justify-content:flex-end}}
.mv-steps{margin:var(--space-sm) 0 var(--space-md);padding-left:22px;display:flex;flex-direction:column;gap:6px}
.mv-script{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;white-space:pre;overflow:auto;margin-top:var(--space-sm)}
#mvMailTable td .muted{font-size:14px}
.part.locked{cursor:default}
.part-lock{display:inline-flex;align-items:center;margin-left:auto}
.part-lock .ico{width:16px;height:16px}

/* ---------- Accounts and Money services ---------- */
.ie-name td{color:var(--body)}
.ie-cat td{background:var(--well)}
.ms-setline .ms-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm)}
.ms-cap{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--body);min-width:150px}
.ms-days{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.dchip{min-height:var(--tap-min);min-width:56px;padding:0 var(--space-md);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font-weight:600;cursor:pointer}
.dchip[aria-pressed="true"]{background:var(--inverse);color:var(--on-inverse);border-color:var(--inverse)}
.sform input.restval{background:var(--well);color:var(--ink)}
.lockval{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:var(--tap-min);padding:0 var(--space-md);border-radius:var(--radius-md);background:var(--well);font-weight:600}
.lockval .ico{width:16px;height:16px}
.ms-month{min-width:160px;text-align:center}

/* ---------- Report Center (js/reports.js) ---------- */
:root,[data-theme="light"],[data-theme="contrast"]{--viz-1:#2a78d6;--viz-2:#eb6834}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--viz-1:#3987e5;--viz-2:#d95926}}
[data-theme="night"]{--viz-1:#3987e5;--viz-2:#d95926}
.rc-small{font-size:14px;line-height:20px}
.rc-ask{background:var(--well);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);margin:var(--space-lg) 0 var(--space-xl)}
.rc-ask label{margin-top:0}
.rc-ask textarea{width:100%;min-height:72px;padding:var(--space-md) var(--space-lg);border:1px solid var(--ink);border-radius:var(--radius-md);background:var(--card);color:var(--ink);font:inherit;resize:vertical}
.rc-ask .msg{margin-top:var(--space-md)}
.rc-starts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}
.rc-start{display:flex;flex-direction:column;gap:4px;text-align:left;min-height:88px;padding:var(--space-lg);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.rc-start:hover{background:var(--well)}
.rc-start span{font-size:14px;line-height:20px;color:var(--body)}
.rc-desc{font-size:18px;line-height:26px;margin-bottom:var(--space-xs)}
.rc-ai{margin:var(--space-md) 0}
.rc-q{border:0;border-top:1px solid var(--line);margin:0;padding:var(--space-lg) 0}
.rc-q legend{font-weight:700;font-size:18px;line-height:26px;padding:0;display:flex;align-items:center;gap:var(--space-sm)}
.rc-q .muted{margin:4px 0 var(--space-sm)}
.rc-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--well);font-size:14px}
.rc-grp{margin-top:var(--space-sm)}
.rc-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xs)}
.rc-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);padding:0 var(--space-lg);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.rc-chip:hover{background:var(--well)}
.rc-chip[aria-pressed="true"]{background:var(--inverse);border-color:var(--inverse);color:var(--on-inverse)}
[data-theme="night"] .rc-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .rc-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}}
.rc-chip:disabled{opacity:.45;cursor:not-allowed}
.rc-sub{font-weight:600;margin:var(--space-md) 0 0}
.rc-limit-form{margin-top:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--well);border-radius:var(--radius-lg)}
.rc-cards{margin:var(--space-lg) 0}
.rc-card .rc-big{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-0.5px;margin:2px 0}
.rc-cmp{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:14px;line-height:20px}
.rc-cmp .ico{width:18px;height:18px;margin-top:1px}
.rc-limit{margin:0 0 var(--space-lg)}
tr.rc-hit td{background:var(--warning-pale)}
.rc-notes{margin:var(--space-lg) 0 0;padding-left:20px;font-size:14px;line-height:20px}
.rc-notes li{margin-bottom:4px}
.rc-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg);margin:var(--space-lg) 0}
.rc-chart{position:relative;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg)}
.rc-chart figcaption{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);align-items:center;margin-bottom:var(--space-sm)}
.rc-legend{display:inline-flex;gap:var(--space-md);font-size:13px;color:var(--body)}
.rc-legend span{display:inline-flex;align-items:center;gap:6px}
.rc-key{display:inline-block;width:12px;height:12px;border-radius:3px}
.rc-key.s1{background:var(--viz-1)}.rc-key.s2{background:var(--viz-2)}
.rc-svg{width:100%;height:auto;display:block;overflow:visible}
.rc-grid{stroke:var(--line);stroke-width:1}
.rc-axis{fill:var(--body);font-size:11px;font-variant-numeric:tabular-nums}
.rc-rule{stroke:var(--negative);stroke-width:1.5;stroke-dasharray:5 4}
.rc-bar.s1{fill:var(--viz-1)}.rc-bar.s2{fill:var(--viz-2)}
.rc-bar.hit{stroke:var(--ink);stroke-width:2}
.rc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rc-line.s1{stroke:var(--viz-1)}.rc-line.s2{stroke:var(--viz-2)}
.rc-dot{stroke:var(--card);stroke-width:2}.rc-dot.s1{fill:var(--viz-1)}.rc-dot.s2{fill:var(--viz-2)}
.rc-hitarea{fill:transparent;cursor:default;outline:none}
.rc-hitarea:hover,.rc-hitarea:focus{fill:var(--ink);fill-opacity:.05}
.rc-tip{position:absolute;left:var(--space-lg);right:var(--space-lg);top:var(--space-sm);z-index:2;background:var(--inverse);color:var(--on-inverse-soft);border-radius:var(--radius-md);padding:6px 10px;font-size:13px;line-height:18px;pointer-events:none}
.rc-hbars{display:flex;flex-direction:column;gap:6px}
.rc-hrow{display:grid;grid-template-columns:minmax(80px,32%) 1fr auto;gap:var(--space-sm);align-items:center;font-size:14px;line-height:20px;border-radius:6px;padding:2px 4px}
.rc-hrow:hover,.rc-hrow:focus{background:var(--well);outline:none}
.rc-hrow.hit .rc-hlabel::after{content:" ⚑"}
.rc-hlabel{overflow-wrap:anywhere}
.rc-htrack{height:16px;display:block}
.rc-hbar{display:block;height:16px;background:var(--viz-1);border-radius:0 4px 4px 0}
.rc-hbar.neg{background:var(--viz-2)}
.rc-hval{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
@media (max-width:560px){.rc-hrow{grid-template-columns:1fr auto}.rc-htrack{grid-column:1 / -1;order:3}.rc-card .rc-big{font-size:24px;line-height:32px}}
@media print{.rc-ask,.rc-starts,.rc-tip{display:none!important}.rc-chart{break-inside:avoid}}
/* Store details: the store's account number in the top right corner */
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.card-head h1,.card-head h2{margin:0}
.card-head>h1+*,.card-head>h2+*{margin-left:auto}
.card>.card-head{margin-bottom:var(--space-md)}
/* Show / Hide button in the top right corner of a box */
.boxtog{display:inline-flex;align-items:center;gap:6px;flex:none}
.boxtog .ico{width:18px;height:18px}
.card.collapsed>:not(.card-head){display:none}
.card.collapsed>.card-head{margin-bottom:0}
/* Today (2026-10-28): the parts of a box go in their places as they come in; Jump back in stays when its box is folded;
   Things to check holds the notes (each note is its own coloured box, so the holder has no box of its own) */
.td-slot{display:contents}
.card.collapsed>.jumpback{display:flex;margin:var(--space-md) 0 0}
.card.td-notes{background:none;padding:0;border-radius:0}
.card.td-notes>.card-head{padding:0 var(--space-xs)}
.card.td-notes>.card-head h2{font-size:20px;line-height:28px}
.card.td-notes.collapsed{background:var(--card);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-xl)}
.td-wait p{margin:var(--space-sm) 0 0}
.chip.acct{font-size:15px;padding:6px 14px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* + next to a list's count in Store setup */
.addq{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:var(--space-sm);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);vertical-align:middle;cursor:pointer}
.addq:hover{background:var(--well)}
.addq .ico{width:20px;height:20px}

/* ---------- Bring in items (js/itemimport.js) ---------- */
.imp-top{margin-top:0}
.imp-file{margin:0 0 var(--space-sm)}
.imp-help{margin-top:var(--space-md)}
.imp-steps{margin:var(--space-sm) 0;padding-left:24px}
.imp-steps li{margin:4px 0}
.imp-q{min-width:0}
.imp-q select,.imp-q input{min-width:0;max-width:100%}
.imp-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--space-md) var(--space-lg)}
.imp-col,.imp-sub{min-width:0;display:block}
.imp-col span,.imp-sub span{display:block;font-weight:600;margin-bottom:4px}
.imp-sample{font-size:14px;margin-top:var(--space-md)}
.imp-sample td,.imp-sample th{white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.imp-deps{display:grid;gap:var(--space-md)}
.imp-dep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-sm) var(--space-lg);align-items:center;padding:var(--space-md) 0;border-bottom:1px solid var(--line)}
.imp-dep:last-child{border-bottom:0}
.imp-dep .imp-sub,.imp-dep > p{grid-column:2}
.imp-dname{overflow-wrap:anywhere}
.imp-rate{max-width:160px}
.imp-sum li{margin:4px 0}
.imp-miss{margin:var(--space-sm) 0 0;padding-left:20px}
.imp-bar{height:14px;border-radius:var(--radius-pill);background:var(--well);overflow:hidden;margin:var(--space-md) 0}
.imp-bar span{display:block;height:100%;background:var(--primary);transition:width .2s ease}
.imp-last{margin:var(--space-md) 0 0;display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}
.mi-pos{margin:0;min-height:var(--tap-min);display:flex;align-items:center;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .imp-dep{grid-template-columns:1fr}
  .imp-dep .imp-sub,.imp-dep > p{grid-column:1}
}

/* ---------- Layouts (UI types): Display box, Menu on the side, Tiles ---------- */
#displayBtn,#helpBtn{display:inline-flex;align-items:center;gap:6px}
#displayBtn .ico,#helpBtn .ico{width:18px;height:18px}
#helpBtn[aria-current="page"]{background:var(--inverse);color:var(--on-inverse);border-color:var(--inverse)}
.navb.has-nav #displayBtn{display:none}
/* Bottom bar layout on a computer (1000px and wider): Display and your photo + Sign out in the top bar, as in Menu on top
   (Abdul 2026-10-23); Display and Help show only their icons below 1200px so the bar stays on one line. A phone keeps them under More. */
@media (min-width:1000px){
  .navb.has-nav .userpill,.navb.has-nav #displayBtn{display:inline-flex}
  .navb.has-nav .top-row{gap:var(--space-sm)}
}
@media (min-width:1000px) and (max-width:1199px){
  .navb.has-nav #displayBtn > span,.navb.has-nav #helpBtn > span:not([class]){display:none}
  .navb.has-nav #displayBtn,.navb.has-nav #helpBtn{gap:4px}
}
.uiopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-sm);margin-bottom:var(--space-md)}
.uiopt{display:flex;gap:var(--space-md);align-items:center;text-align:left;min-height:72px;padding:var(--space-md);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.uiopt:hover{background:var(--well)}
.uiopt[aria-checked="true"]{border:3px solid var(--ink);padding:calc(var(--space-md) - 2px)}
.uiopt[aria-checked="true"] b::after{content:" \2713"}
.uipic{flex:none;position:relative;width:56px;height:42px;border:2px solid var(--ink);border-radius:6px;background:var(--well)}
.uipic i{position:absolute;background:var(--ink);border-radius:2px}
.uipic-top i:nth-child(1){left:4px;right:4px;top:4px;height:5px}.uipic-top i:nth-child(2),.uipic-top i:nth-child(3){display:none}
.uipic-side i:nth-child(1){left:4px;top:4px;bottom:4px;width:10px}.uipic-side i:nth-child(2),.uipic-side i:nth-child(3){display:none}
.uipic-bottom i:nth-child(1){left:4px;right:4px;bottom:4px;height:6px}.uipic-bottom i:nth-child(2),.uipic-bottom i:nth-child(3){display:none}
.uipic-tiles i{width:13px;height:11px;top:7px}.uipic-tiles i:nth-child(1){left:5px}.uipic-tiles i:nth-child(2){left:20px}.uipic-tiles i:nth-child(3){left:35px}
/* Menu on the side (wide screens only; narrower windows keep the tabs on top, phones the bottom bar) */
.sidenav{display:none}
@media (min-width:901px){
  body[data-ui="side"]:not(.navb) .top .tabs,body[data-ui="side"]:not(.navb) .top .subtabs{display:none}
  body[data-ui="side"]:not(.navb) .shellwrap{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start}
  body[data-ui="side"]:not(.navb) .sidenav{display:block;position:sticky;top:var(--toph,80px);max-height:calc(100vh - var(--toph,80px));overflow-y:auto;padding:var(--space-lg) var(--space-sm) var(--space-lg) var(--space-lg)}
  body[data-ui="side"]:not(.navb) main{max-width:none;margin:0;width:100%}
  body[data-ui="side"]:not(.navb) .top-row{max-width:none;padding-left:var(--space-xl)}
}
.sidenav nav{display:flex;flex-direction:column;gap:2px}
.sideitem{display:flex;align-items:center;gap:var(--space-sm);min-height:var(--tap-min);padding:0 var(--space-md);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:15px;text-align:left;cursor:pointer}
.sideitem .ico{width:20px;height:20px;flex:none}
.sideitem:hover{background:var(--well)}
.sideitem[aria-current="page"]{background:var(--inverse);color:var(--on-inverse)}
.sidesub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 28px;padding-left:var(--space-sm);border-left:2px solid var(--line)}
.sidepage{min-height:40px;padding:0 var(--space-md);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.sidepage:hover{background:var(--well)}
.sidepage[aria-current="page"]{background:var(--primary);color:var(--on-primary);font-weight:700}
/* Tiles */
.tilesbar{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;max-width:none;margin:0;padding:var(--space-xs) var(--space-xl) var(--space-md)}
.tilesbar .btn{display:inline-flex;align-items:center;gap:6px}
.tilesbar .ico{width:18px;height:18px}
body[data-ui="tiles"]:not(.navb) .top .tabs{display:none}
.navb .tilesbar{display:none}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-sm);margin-bottom:var(--space-xl)}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--space-sm);min-height:96px;padding:var(--space-md);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:16px;text-align:left;cursor:pointer}
.tile .ico{width:28px;height:28px}
.tile:hover{background:var(--well)}
.tile[aria-current="page"]{border:3px solid var(--ink)}
/* Display box: color theme and text size choices */
.dopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-sm);margin-bottom:var(--space-md)}
.dopt{display:flex;align-items:center;gap:var(--space-sm);min-height:56px;padding:0 var(--space-md);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.dopt:hover{background:var(--well)}
.dopt[aria-checked="true"]{border:3px solid var(--ink);padding:0 calc(var(--space-md) - 2px)}
.dopt[aria-checked="true"]::after{content:"\2713";margin-left:auto}
.dopt .aa{font-weight:700;min-width:36px}
.swatch{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink)}
.look-auto .swatch{background:linear-gradient(135deg,#fff 50%,#111 50%)}
.look-light .swatch{background:#fff}
.look-night .swatch{background:#111}
.look-contrast .swatch{background:linear-gradient(135deg,#000 50%,#ff0 50%)}
.box h3{margin:var(--space-lg) 0 var(--space-sm)}
#dLang{margin-bottom:var(--space-sm)}
/* Bring in items: where the items come from, new tax types (db/026) */
.imp-from{max-width:420px}
.imp-have{margin:0 0 var(--space-sm)}
.imp-nt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto;gap:var(--space-sm) var(--space-md);align-items:end;padding:var(--space-sm) 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){.imp-nt{grid-template-columns:1fr}}
/* More color themes from Store Pro (Abdul, 2026-10-19): Ocean, Sunset, Violet. Midnight was left out: too close to Night.
   Light pages with a stronger main color (white text on it, 4.5:1 or more). */
[data-theme="ocean"]{color-scheme:light;--page:#e6eef8;--well:#e6eef8;--line:#cfdff1;--primary:#1565c0;--primary-active:#1976d2;--primary-neutral:#bcd5f3;--primary-pale:#dfebfa;--on-primary:#ffffff;--inverse:#12233a;--on-inverse:#9cc8ff;--ink-deep:#0d4a8c;--focus-inverse:#9cc8ff}
[data-theme="sunset"]{color-scheme:light;--page:#f6ebdf;--well:#f6ebdf;--line:#ecd7b8;--primary:#b54a14;--primary-active:#c1521b;--primary-neutral:#f3c9a6;--primary-pale:#fbe4cd;--on-primary:#ffffff;--inverse:#2c1d10;--on-inverse:#ffb37a;--ink-deep:#973f14;--focus-inverse:#ffb37a}
[data-theme="violet"]{color-scheme:light;--page:#efe8f8;--well:#efe8f8;--line:#ded0ef;--primary:#7c3aed;--primary-active:#8b5cf6;--primary-neutral:#cdb8f5;--primary-pale:#ede4fb;--on-primary:#ffffff;--inverse:#241b33;--on-inverse:#c4a8ff;--ink-deep:#5b21b6;--focus-inverse:#c4a8ff}
.look-ocean .swatch{background:#1565c0}
.look-sunset .swatch{background:#b54a14}
.look-violet .swatch{background:#7c3aed}
/* Easy Way (Daily entry): every part's boxes open on the page, Collection on the left, Accounted For on the right */
.easygrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start;margin-bottom:var(--space-xl)}
.easygrid .ecol{min-width:0}
.ecol-h{margin:0 0 var(--space-md)}
.esec{margin-bottom:var(--space-lg)}
.esec .card-head h2,.esec>h2{font-size:20px}
.esec-foot{display:flex;justify-content:flex-end;margin-top:var(--space-sm)}
.esec-foot .dsum:empty{display:none}
.esec .etable{width:100%}
[data-earea="below"]{margin-bottom:var(--space-xl)}
@media (max-width:1100px){.easygrid{grid-template-columns:1fr;gap:var(--space-lg)}}
.esec-body{min-width:0;overflow-x:auto}
.esec .etable input.amt{width:110px}
@media (max-width:560px){.esec .etable input.amt{width:96px}.esec .erow{padding-right:52px}}
/* Easy Way: dots to move blocks (on their own side) and departments / fuel grades */
.ehead{display:flex;align-items:center;gap:var(--space-xs);min-width:0}
.esec .etable td .rgrip{vertical-align:middle;margin-right:var(--space-xs);width:32px}
.esec .etable tr.dragging,.esec.dragging{opacity:.7;outline:2px dashed var(--line-strong);outline-offset:2px}
[data-sortlist].nodrop{outline:2px dashed var(--negative-darkest);outline-offset:4px;border-radius:var(--radius-md)}
.esec .rname{display:flex;align-items:center;gap:var(--space-xs)}
.esec .rname .rgrip{margin-right:0;flex:0 0 auto}
/* Store logos and people's photos (2026-10-19) */
.slogo,.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;background:var(--well);color:var(--body);border:1px solid var(--line)}
.slogo{border-radius:8px}
.avatar{border-radius:50%}
.slogo img,.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.slogo img{object-fit:contain;background:var(--card)}
.slogo .ico,.avatar .ico{width:60%;height:60%}
.slogo.xs,.avatar.xs{width:22px;height:22px}
.slogo.sm,.avatar.sm{width:28px;height:28px}
.slogo.md,.avatar.md{width:44px;height:44px}
.slogo.lg,.avatar.lg{width:128px;height:128px}
.slogo.lg{border-radius:20px}
.btn .avatar.xs{margin-right:var(--space-xs)}
.photoprev{display:flex;justify-content:center;margin:var(--space-md) 0}
/* the store picker: a button with the store's logo; the list opens under it */
.storepick{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:var(--tap-min);max-width:260px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card);padding:0 var(--space-md) 0 6px;font-weight:600;font-size:14px;cursor:pointer}
.storepick .sp-name,.spopt .sp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.storepick .ico{width:18px;height:18px;flex:none;color:var(--body)}
.storepick:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.spop{position:fixed;z-index:60;max-width:calc(100vw - 16px);max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);padding:6px}
.spopt{display:flex;align-items:center;gap:var(--space-sm);width:100%;min-height:var(--tap-min);padding:6px var(--space-md) 6px 6px;border:0;border-radius:var(--radius-md);background:transparent;text-align:left;font-weight:600;cursor:pointer}
.spopt:hover,.spopt:focus-visible{background:var(--well);outline:none}
.spopt[aria-selected="true"]{background:var(--well)}
.spopt .ico{width:18px;height:18px;margin-left:auto;flex:none}
/* Sign out with the person's photo */
.userpill{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:2px;background:var(--card)}
.userpill #signOut{border:0;min-height:40px}
.mebtn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;min-width:40px;min-height:40px}
.mebtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mebtn:hover .avatar{border-color:var(--ink)}
/* Account: the logo before each store name, the photo before each person */
.pwho{display:flex;align-items:center;gap:var(--space-md)}
.pwho > span:last-child{min-width:0}
.slogo-btn{position:relative;display:inline-flex;padding:0;border:0;background:transparent;border-radius:10px;cursor:pointer;flex:none}
.slogo-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.slogo-btn:hover .slogo{border-color:var(--ink)}
.slogo-badge{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.slogo-badge .ico{width:12px;height:12px}
@media (max-width:700px){.top-row > .storepick{flex:1 1 auto;max-width:none}}
.has-nav .top-row > .storepick{max-width:240px}
/* Bring in past data (js/pastimport.js, db/030): the files, the month check, a day brought in */
.msg.info{background:var(--primary-pale);color:var(--ink)}
.msg.info:not(.ok):not(.bad):not(.warn)::before{display:block;--i:var(--i-info)}
.pd-files li{align-items:flex-start}
.pd-ferr{display:inline-flex;margin-top:var(--space-xs);padding:var(--space-xs) var(--space-sm)}
.pd-months .chip{margin-left:0;white-space:normal;line-height:16px;padding-top:4px;padding-bottom:4px}
.chip.warn{background:var(--warning-pale);color:var(--warning-content)}
.chip.bad{background:var(--negative-pale);color:var(--negative-deep)}

/* Help > Ask for help: one big button per choice; the picked one is filled and shows a tick (never colour alone) */
.choices{display:grid;gap:var(--space-sm);margin-top:var(--space-sm);max-width:520px}
.choices button{display:flex;align-items:center;gap:var(--space-md);min-height:var(--tap-min);padding:var(--space-md) var(--space-lg);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);font:inherit;font-weight:600;text-align:start;cursor:pointer}
.choices button:hover{background:var(--well)}
.choices .choice-mark{flex:none;width:24px;height:24px;border-radius:var(--radius-pill);border:2px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center}
.choices .choice-mark .ico{width:16px;height:16px;visibility:hidden}
.choices button[aria-pressed="true"]{background:var(--inverse);border-color:var(--inverse);color:var(--on-inverse);font-weight:700}
.choices button[aria-pressed="true"] .choice-mark{border-color:currentColor}
.choices button[aria-pressed="true"] .choice-mark .ico{visibility:visible}
/* Access for each person: a line under their name; the picker opens full screen, close together (Abdul, 2026-10-19) */
.plist li .accbox{flex:1 1 100%;margin-left:60px;min-width:0}
.accsum{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;color:var(--body)}
.accsum [data-a="sum"]{flex:1 1 260px;min-width:0}
.overlay.accov{padding:0;align-items:stretch}
.accfull{display:flex;flex-direction:column;width:100%;height:100%;background:var(--page)}
.accfull-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-xl);border-bottom:1px solid var(--line);background:var(--card)}
.accfull-head h2{margin:0;font-size:20px;display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.accfull-body{flex:1 1 auto;overflow:auto;padding:var(--space-md) var(--space-xl)}
.accfull-body > p{margin:0 0 var(--space-md)}
.accfull-foot{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-sm) var(--space-xl);border-top:1px solid var(--line);background:var(--card)}
.accfull-foot .msg{flex:1 1 100%;margin:0}
.accgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-sm);align-items:start}
.accgroup{display:flex;flex-direction:column;padding:6px var(--space-md);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card)}
.accgroup .tick{min-height:40px;margin:0;padding-top:0;padding-bottom:0;gap:var(--space-sm);line-height:1.25;font-weight:500}
.accgroup .tick input{width:22px;height:22px;flex:none}
.accgroup .accgh{border-bottom:1px solid var(--line);margin-bottom:2px}
.accgroup .tick:not(.accgh){padding-left:var(--space-md)}
.accgroup .tick.off{color:var(--mute);cursor:not-allowed}
.accgroup .tick small{font-size:12px;margin-left:2px}
body.noscroll{overflow:hidden}
@media (max-width:700px){.plist li .accbox{margin-left:0}.accfull-head,.accfull-body,.accfull-foot{padding-left:var(--space-lg);padding-right:var(--space-lg)}.accfull-foot .btn{flex:1 1 auto}}
.accgroup .accgh:has(+ input.hidden){border-bottom:0;margin-bottom:0}
/* The access picker uses switches instead of tick marks (Abdul, 2026-10-19). On: coloured, knob right with a check;
   off: grey, knob left; part of a tab on: a dash in the middle; not for this level: faded. */
.accsw .accgroup{padding:4px var(--space-md)}
.accsw .accgroup .tick,.accsw .accgroup .tick:not(.accgh){flex-direction:row-reverse;justify-content:space-between;padding-left:0;gap:var(--space-md)}
.accsw .accgroup .tick > span{flex:1 1 auto;min-width:0}
.accsw .accgroup .tick.off small{display:block;margin:0}
.accsw .tick input[type=checkbox]{appearance:none;-webkit-appearance:none;width:46px;height:26px;flex:none;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;transition:background .15s;margin:0}
.accsw .tick input[type=checkbox]::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.accsw .tick input[type=checkbox]:checked{background:var(--primary)}
.accsw .tick input[type=checkbox]:checked::before{left:23px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163300' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.accsw .tick input[type=checkbox]:indeterminate{background:var(--primary-neutral)}
.accsw .tick input[type=checkbox]:indeterminate::before{left:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163300' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat}
.accsw .tick input[type=checkbox]:disabled{opacity:.4;cursor:not-allowed}
.accsw .tick input[type=checkbox]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.accsw .tick input[type=checkbox],.accsw .tick input[type=checkbox]::before{transition:none}}
/* Row editors (Daily entry): the Add form on one line, the lines added in a list below with Edit and Delete (Abdul, 2026-10-19) */
.eform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-sm) var(--space-md);padding:var(--space-md);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--well)}
.eform.editing{outline:3px solid var(--primary);outline-offset:1px}
.eform .f{flex:1 1 0;min-width:110px}
.eform .f.wide{flex:1.6 1 0;min-width:150px}
.eform label{margin:0 0 var(--space-xs);font-size:14px;line-height:20px}
.eform .f.money input{text-align:right;font-variant-numeric:tabular-nums}
.eform-btns{display:flex;gap:var(--space-sm);flex:none}
.eform-btns .btn{min-width:110px}
.eform .calc{flex:1 1 100%;font-size:14px;font-weight:600;color:var(--body)}
.eform .calc:empty{display:none}
.eform-wrap{margin-bottom:var(--space-md)}
.eform-wrap .msg{margin-top:var(--space-sm)}
.elist .tablewrap{margin:0}
.elist-t td,.elist-t th{padding:var(--space-sm) var(--space-md)}
.elist-t tr.editing td{background:var(--primary-pale)}
.elist-act{white-space:nowrap;text-align:right}
.elist-act .btn + .btn{margin-left:var(--space-xs)}
.elist-none{margin:var(--space-sm) 0}
@media (max-width:700px){.eform .f,.eform .f.wide{flex:1 1 100%}.eform-btns{flex:1 1 100%}.eform-btns .btn{flex:1 1 auto}.elist-act{text-align:left}}
/* Easy Way: the forms sit in half the page, so the boxes squeeze to keep one line */
.esec .eform{gap:var(--space-xs) var(--space-sm);padding:var(--space-sm)}
.esec .eform .f{min-width:64px}
.esec .eform .f.wide{min-width:104px}
.esec .eform label{font-size:13px}
.esec .eform-btns .btn{min-width:0;padding-left:var(--space-md);padding-right:var(--space-md)}
.esec .elist-t td,.esec .elist-t th{padding:var(--space-xs) var(--space-sm);font-size:14px}
.esec .elist-t th:first-child,.esec .elist-t td:first-child{display:none}
.esec .elist-act .btn{min-height:36px;padding:0 10px;font-size:13px}
.esec .elist-act .btn + .btn{margin-left:2px}
/* Account boxes wide; the access picker under the person, one line per part (Abdul, 2026-10-19) */
.acct-card{max-width:none}
.accpanel{margin-top:var(--space-sm);padding:var(--space-md) var(--space-lg);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--well)}
.accpanel > p{margin:0 0 var(--space-sm)}
.accpanel .row{margin-top:var(--space-md)}
.accrows{display:flex;flex-direction:column}
.accrow{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--space-lg);padding:2px var(--space-md);border-bottom:1px solid var(--line)}
.accrow:last-child{border-bottom:0}
.accrow .accgh{flex:0 0 200px;margin:0;min-height:44px;gap:var(--space-sm);border-right:1px solid var(--line)}
.accpages{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-xl);flex:1 1 300px;min-width:0}
.accrow .tick{min-height:44px;margin:0;gap:var(--space-sm);font-weight:500}
.accrow .tick.off{color:var(--mute);cursor:not-allowed}
.accrow .tick small{font-size:12px}
@media (max-width:700px){.accrow .accgh{flex:1 1 100%;border-right:0}.accpages{flex-basis:100%;padding-left:var(--space-md)}.accpanel{padding:var(--space-sm)}}
.accrow .accgh{flex-basis:170px}
.accpages{gap:0 var(--space-lg)}
@media (min-width:701px){.plist li .accbox .accpanel{margin-left:-60px}}
.accrow .accgh{flex-basis:190px}.accrow .accgh b{white-space:nowrap}
.lesson{border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);margin:var(--space-md) 0}
.lesson summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:17px}
.lesson-steps{padding-left:22px;margin:var(--space-sm) 0}
.lesson-steps li{margin:6px 0}
.answerbox textarea{width:100%}
/* Name and cell phone of each person; the same access at all their stores (shared list item 17) */
.pcontact{display:block;margin-top:2px;font-size:13px}
.plist li .pnpanel{flex:1 1 100%;margin-left:60px;min-width:0}
.pnpanel .grid2{margin:0}
.accall{display:flex;align-items:center;margin-top:var(--space-sm);min-height:44px;gap:var(--space-md);font-weight:600}
@media (max-width:700px){.plist li .pnpanel{margin-left:0}}
/* ---------- Back / Forward and Recent pages (as in the old app) ---------- */
.navtools{display:inline-flex;align-items:center;gap:2px;flex:none}
.navtools .navbtn{width:var(--tap-min);min-width:var(--tap-min);padding:0;justify-content:center;border-radius:var(--radius-pill);border-color:var(--line-strong)}
.navtools .navbtn:hover:not(:disabled){background:var(--well)}
.navtools .navbtn .ico{width:20px;height:20px;margin:0}
.navtools .navbtn:disabled{opacity:.38;cursor:not-allowed}
.rpop{position:fixed;z-index:60;max-width:calc(100vw - 16px);max-height:min(78vh,640px);overflow:auto;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);padding:8px}
.rpopt{display:flex;align-items:center;gap:var(--space-md);width:100%;min-height:56px;padding:6px var(--space-md) 6px 6px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink);text-align:left;font:inherit;font-weight:600;cursor:pointer}
.rpopt:hover,.rpopt:focus-visible{background:var(--well);outline:none}
.rp-head{padding:6px 10px 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--body)}
.rpopt .ico{margin-left:0;width:20px;height:20px}
.rp-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:var(--radius-pill);background:var(--well);font-size:13px;font-weight:700}
.rp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rp-txt b,.rp-txt .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-txt .muted{font-size:13px;font-weight:500}
.rp-empty{margin:4px 10px 10px;max-width:360px}
.jumpback{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin:0 0 var(--space-lg)}
.jumpback .btn{display:inline-flex;align-items:center;gap:6px}
.jumpback .ico{width:18px;height:18px}
@media (max-width:700px){
  .has-nav .navtools .navbtn{width:40px;min-width:40px}
}
.navb.has-nav .navtools .navbtn{width:40px;min-width:40px}
/* ---------- Bank Reconciliation: Add Settlement / Add Other Entry and the bar to go back (as in the old app) ---------- */
.tripbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);margin:0 0 var(--space-lg);padding:var(--space-md) var(--space-lg);border:2px solid var(--primary);border-radius:var(--radius-lg);background:var(--primary-pale)}
.tripbar .btn{display:inline-flex;align-items:center;gap:6px}
.tripbar .ico{width:18px;height:18px;margin:0}
.tripbar p{margin:0;flex:1 1 260px;color:var(--ink)}
.tripopts{display:flex;flex-direction:column;gap:6px;margin:var(--space-md) 0}
.tripopts .tripopt{border:1px solid var(--line-strong)}
.tripopts .rp-txt b,.tripopts .rp-txt .muted{white-space:normal}
/* Drag the tabs into your own order (old app v337) */
.tdrag{opacity:.65;outline:2px dashed var(--primary);outline-offset:2px}
/* the six dots on every tab (old app v337; Abdul 2026-10-22): grab here to move the tab (mouse: anywhere on the tab works too; a finger: only the dots) */
.tgrip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:28px;margin-right:-2px;color:inherit;opacity:.45;cursor:grab;touch-action:none;border-radius:6px}
.tgrip svg{display:block;width:14px;height:14px;fill:currentColor}
button:hover > .tgrip{opacity:.8}
.tgrip:active{cursor:grabbing}
.tabs button .ico,.subtabs button .ico{width:18px;height:18px;flex:none;margin:0}
.sideitem .tgrip{margin-left:-6px}
.sidepage{display:flex;align-items:center;gap:6px}
.sidepage .ico{width:16px;height:16px;flex:none}
.sidepage .tgrip{margin-left:-6px;height:24px}
.tile{position:relative}
.tile .tgrip{position:absolute;top:8px;right:8px}
@media print{.tgrip{display:none}}
/* the two buttons next to Display say what they do (Abdul 2026-10-22: "Keep both, make them clear"); a tablet keeps the icons only */
.navtools .navbtn.navlab{width:auto;min-width:var(--tap-min);padding:0 14px 0 12px;gap:6px}
.navtools .navbtn.navlab .ico{margin:0}
.navtxt{font-weight:600;font-size:14px;white-space:nowrap}
@media (max-width:1360px){.navtools .navbtn.navlab{width:var(--tap-min);padding:0;justify-content:center}.navtxt{display:none}}
/* ---------- The top bar's buttons look different from the tabs (Abdul 2026-10-22) ----------
   Tabs stay outlined pills. The top bar's tools are soft, filled, rounded squares with no outline; Back / Forward / Recent /
   Go to a page / Ask sit together in one toolbar. */
.top-row .btn.ghost.small{background:var(--well);border-color:transparent;border-radius:14px;min-height:44px}
.top-row .btn.ghost.small:hover{background:var(--hover-fill)}
.top-row .navtools{background:var(--well);border-radius:16px;padding:3px;gap:3px}
.top-row .navtools .navbtn{background:transparent;border-color:transparent;border-radius:12px;min-height:40px;width:40px;min-width:40px}
.top-row .navtools .navbtn.navlab{width:auto}
.top-row .navtools .navbtn:hover:not(:disabled){background:var(--card)}
.top-row .userpill{background:var(--well);border-color:transparent;border-radius:16px}
.top-row .userpill #signOut{background:transparent}
.top-row .storepick{background:var(--well);border-color:transparent;border-radius:14px}
.top-row .storepick:hover{background:var(--hover-fill)}
@media (max-width:1360px){.top-row .navtools .navbtn.navlab{width:40px}}
/* All others: the tabs that do not fit on one line (Abdul 2026-10-22) */
.tabs.fit{flex-wrap:nowrap}
.tabs button[hidden]{display:none}
.tabs .tabsmore{gap:6px;padding:0 var(--space-md) 0 var(--space-lg)}
.tabs .tabsmore .ico{width:18px;height:18px;flex:none;margin:0}
.tmore-pop{min-width:240px}
.tmore-pop .spopt .ico{margin-left:0;width:20px;height:20px}
/* ---------- Page tabs: a tinted tray right under the tabs, named after its area, a little smaller (Abdul 2026-10-22) ---------- */
.subtabs{width:fit-content;max-width:calc(100% - 2 * var(--space-xl));margin:0 var(--space-xl) var(--space-md);padding:5px;gap:4px;align-items:center;background:var(--primary-pale);border-radius:18px;box-shadow:inset 0 0 0 1px var(--primary-neutral)}
.subtabs::before{content:attr(aria-label) " \203A";flex:none;padding:0 10px 0 12px;font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap}
.subtabs button{min-height:40px;font-size:13px;padding:0 var(--space-md) 0 6px;background:transparent}
.subtabs button:not([aria-selected="true"]):hover{background:var(--card)}
.subtabs button .ico{width:16px;height:16px}
.subtabs button .tgrip{height:24px}
@media (max-width:700px){.subtabs{max-width:calc(100% - 2 * var(--space-lg));margin:0 var(--space-lg) var(--space-sm)}.subtabs::before{display:none}}
/* the two boxes look different: a badge before the title; Ask also has a coloured top edge */
.boxhead{display:flex;align-items:center;gap:12px}
.boxbadge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--well);color:var(--ink)}
.boxbadge .ico{width:22px;height:22px;margin:0}
.boxbadge.ai{background:var(--primary);color:var(--on-primary)}
.box.askbox{border-top:6px solid var(--primary)}
body.tdragging,body.tdragging *{cursor:grabbing !important;user-select:none}
/* ‹ › beside a single date box (old app); not a Tab stop */
.dstep{display:flex;align-items:center;gap:4px;width:100%;min-width:0}
.dstep > input[type=date]{flex:1 1 auto;min-width:0;width:auto}
.dstep-btn{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);cursor:pointer}
.dstep-btn:hover:not(:disabled){background:var(--well)}
.dstep-btn:disabled{opacity:.35;cursor:not-allowed}
.dstep-btn .ico{width:18px;height:18px}
@media print{.dstep-btn{display:none}}
.dstep > input[type=date]{min-width:150px}
.f:has(> .dstep),div:has(> label + .dstep){min-width:230px}
.dstep:has(input:disabled) .dstep-btn,.dstep:has(input[readonly]) .dstep-btn{display:none}
/* Quick Find (the old app's fifth layout) */
body[data-ui="find"]:not(.navb) .top .tabs{display:none}
.uipic-find i:nth-child(1){left:6px;right:6px;top:6px;height:7px;border-radius:4px}.uipic-find i:nth-child(2){left:6px;right:18px;top:17px;height:3px}.uipic-find i:nth-child(3){left:6px;right:24px;top:24px;height:3px}
.findbox{display:grid;grid-template-columns:1fr auto;gap:var(--space-sm) var(--space-md);align-items:center}
.findbox label{grid-column:1/-1;margin:0}
.findbox input[type=search]{font-size:18px;min-height:52px;border-radius:var(--radius-pill);padding:0 var(--space-lg);border:2px solid var(--ink);background:var(--card);color:var(--ink);width:100%}
/* the pages under their tab: one box per tab, in the tabs' order (Abdul 2026-10-28: "arrange these tab wise") */
.findlist{grid-column:1/-1;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md);align-items:start}
.findlist.folded{display:none}
.findlist li.hidden,.findgrp.hidden{display:none}
.findgrp{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);padding:var(--space-sm)}
.findgh{display:flex;align-items:center;gap:var(--space-sm);margin:0 0 4px;padding:4px var(--space-sm) 8px;border-bottom:1px solid var(--line);font-size:17px;line-height:24px;font-weight:800}
.findgh .ico{width:22px;height:22px;flex:none}
.findpages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.findgrp .findopt{min-height:44px;border:0;border-radius:var(--radius-md);padding:4px var(--space-sm)}
.findgrp .findopt b{font-weight:600}
.findopt{display:flex;align-items:center;gap:var(--space-sm);width:100%;min-height:52px;padding:6px var(--space-md);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.findopt:hover,.findopt:focus-visible{background:var(--well)}
.findopt .ico{width:22px;height:22px;flex:none}
.findopt span{display:flex;flex-direction:column;min-width:0}
.findopt small{color:var(--mute);font-size:13px}
.findgh .tgrip,.findopt .tgrip{display:inline-flex;flex-direction:row;margin-left:-6px}
.findgh[tabindex]{cursor:grab;border-radius:var(--radius-md)}
.findgh[tabindex]:hover > .tgrip{opacity:.8}
.findgrp.tdrag{opacity:.65}
.findbox #findNone{grid-column:1/-1;margin:0}
/* where you are: Area › Page (old app's page trail) */
@media (max-width:700px){.findbox{grid-template-columns:1fr}.findfold{justify-self:start}}
/* Merchandise Sales folds open to show each department (old app v393) */
.dl-fold{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:6px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;vertical-align:middle}
.dl-fold .ico{width:16px;height:16px;transition:transform .15s}
.dl-fold[aria-expanded="true"] .ico{transform:rotate(90deg)}
.dl-sub{padding:2px 0 var(--space-sm) 40px;border-bottom:1px solid var(--line)}
.dl-subrow{display:flex;justify-content:space-between;gap:var(--space-md);padding:3px 0;font-size:14px;color:var(--body)}
@media (prefers-reduced-motion:reduce){.dl-fold .ico{transition:none}}
/* ---------- Accounts > Loans (old app Loan Account) ---------- */
.lfigs{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-xl);margin:var(--space-sm) 0 var(--space-md)}
.lfig{display:flex;flex-direction:column;gap:2px;min-width:120px}
.lfig .muted{font-size:13px}
.lfig b{font-size:18px}
.lfig b.big{font-size:20px}
.lfig b.late{color:var(--negative-deep)}
.loancard .card-head .chip{margin-left:auto}
/* Accounts > Loans as one ledger (2026-10-27): each loan one line above the payments */
.loanlist{margin-top:var(--space-sm)}
.loanlist .ln-who{flex:1 1 420px;min-width:0}
.loanlist .lfigs{margin:var(--space-xs) 0 0;gap:var(--space-xs) var(--space-lg)}
.loanlist .lfig{min-width:0}
.loanlist .lfig b{font-size:16px}
.loanlist .lfig b.big{font-size:17px}
/* Accounts > Transfers: who owes whom under the ledger */
.tf-words{margin-top:var(--space-lg)}
.tf-words h2{font-size:17px;margin:0 0 var(--space-xs)}
.tf-words .plist li{padding:var(--space-sm) 0}
.ptable tr.sched td{font-style:italic}
/* AI Entry: what was read, checked before it goes in */
.aitable select.field{min-width:160px}
/* PIN sign-in on a shared store computer (js/pin.js; 2026-10-20): big names and a big number pad */
.pinwrap{max-width:640px;margin:0 auto}
.pinask{font-weight:700;font-size:18px}
.pinpeople{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.pinperson{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);min-height:120px;padding:var(--space-lg);border:1px solid var(--line-strong);border-radius:var(--radius-xl);background:var(--card);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;text-align:center}
.pinperson:hover,.pinperson:focus-visible{border-color:var(--ink)}
.pinperson .pn{overflow-wrap:anywhere}
.pinwho{display:flex;align-items:center;gap:var(--space-md);font-size:20px;margin-bottom:var(--space-md)}
.pinin{max-width:240px;font-size:32px;letter-spacing:.5em;text-align:center}
.pinpad{touch-action:manipulation;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);max-width:320px;margin-top:var(--space-md)}
.pinpad button{min-height:64px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);font-size:24px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pinpad button[data-k="clear"]{font-size:16px}
.pinpad button:disabled{opacity:.5;cursor:default}

/* ---------- Lottery > Calendar, day report, safe value, game list, This week (js/lotmore.js) ---------- */
.lc-tiles{margin-bottom:var(--space-lg)}
.lcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-xs)}
.lcal .wd{font-size:13px;font-weight:600;color:var(--body);text-align:center;padding:var(--space-xs) 0}
/* the day boxes look like the Daily entry Calendar's (Abdul 2026-10-22: "make lottery calendar just like daily entry calendar") */
.lcal .cell{position:relative;min-height:92px;border:0;border-radius:var(--radius-md);background:var(--well);color:var(--ink);padding:var(--space-sm);display:flex;flex-direction:column;min-width:0}
.lcal .cell.blank{background:transparent}
.lcal .cell.later{opacity:.5}
.lcal .dn{font-weight:700}
.lcal .cday{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;flex:1;cursor:pointer;border-radius:var(--radius-sm);padding:0;min-height:var(--tap-min);min-width:0}
.lcal .cday:focus-visible{outline:3px solid var(--focus,#1a73e8);outline-offset:1px}
.lcal .cell.has{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong)}
.lcal .cell.has:hover{background:var(--well)}
.lcal .cell.has b{font-variant-numeric:tabular-nums;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcal .cell .short{display:none}
.lcal .tk{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcal .cedit{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:0;padding:0;margin:0;border:0;border-radius:var(--radius-pill);background:var(--well);color:var(--ink)}
.lcal .cedit:hover{background:var(--hover-fill)}
.lcal .cedit .ico{width:18px;height:18px}
.lcal .cell.next{box-shadow:inset 0 0 0 2px var(--ink)}
.lcal .rc{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.lcal .rc .ico{width:16px;height:16px}
@media (max-width:700px){
  .lcal{gap:2px}
  .lcal .cell{min-height:64px;padding:2px}
  .lcal .cell .full,.lcal .tk{display:none}
  .lcal .cell .short{display:block;font-size:12px}
  .lcal .rc{font-size:11px;flex-direction:column;align-items:flex-start}
}
.lcbars{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:grid;gap:var(--space-xs)}
.lcbars li{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr auto;gap:var(--space-md);align-items:center}
.lcbars .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcbars .lbar{height:14px;background:var(--well);border-radius:var(--radius-pill);overflow:hidden}
.lcbars .lbar span{display:block;height:100%;background:var(--ink);border-radius:var(--radius-pill)}
.lcbars b{font-variant-numeric:tabular-nums}
@media (max-width:700px){.lcbars li{grid-template-columns:1fr auto}.lcbars .lbar{grid-column:1/-1;grid-row:2}}
.thsort{all:unset;cursor:pointer;font:inherit;font-weight:600;border-radius:var(--radius-sm);padding:2px 0}
.thsort:focus-visible{outline:3px solid var(--focus,#1a73e8);outline-offset:2px}
.safe-sum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-md);margin:0 0 var(--space-md)}
.safe-sum b{font-variant-numeric:tabular-nums}
.wkon .rline{grid-template-columns:1fr 104px 170px 150px}
.rline .wk{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;line-height:16px}
.rline .wk b{font-size:15px;font-variant-numeric:tabular-nums}
.balance .wkbal{flex-basis:100%;text-align:right}
@media (max-width:700px){.wkon .rline{grid-template-columns:1fr 88px}.wkon .rline input{grid-column:1/-1}.rline .wk{grid-column:1/-1;flex-direction:row;justify-content:space-between}}
/* Fuel money (db/055): cost per gallon blocks on Deliveries; freight typed per grade */
/* the fuel cost box: Last invoice cost, Average cost (?), Current pump price, Profit (Abdul 2026-10-25) */
[data-box="fuel-cost"] .tablewrap{overflow:visible}  /* a small table (cards on phones): the ? explanation is not cut off */
.fu-th-q{display:inline-flex;align-items:center;gap:var(--space-xs);justify-content:flex-end}
.fu-cost-t td.num b{font-variant-numeric:tabular-nums}
.fu-why-phone{display:none;margin:0 0 var(--space-sm);font-weight:600}
@media (max-width:700px){.fu-why-phone{display:flex;align-items:center;gap:var(--space-xs)}}
/* a little ? whose explanation pops up on the mouse, a tap or the keyboard (no browser pop-up) */
.qtip{position:relative;display:inline-flex;vertical-align:middle}
.qtip-b{position:relative;width:22px;height:22px;min-width:22px;padding:0;border-radius:50%;border:1.5px solid var(--body);background:var(--card);color:var(--ink);font:800 13px/1 inherit;cursor:help;display:inline-flex;align-items:center;justify-content:center}
.qtip-b::after{content:"";position:absolute;inset:-11px}
.qtip-b:hover,.qtip-b:focus-visible,.qtip.open .qtip-b{background:var(--ink);color:var(--card);border-color:var(--ink)}
.qtip-t{position:absolute;top:calc(100% + 8px);right:-8px;z-index:30;display:none;width:max-content;max-width:min(320px,80vw);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:var(--ink);color:var(--card);font-size:14px;font-weight:400;line-height:1.45;text-align:left;white-space:normal;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.qtip:hover .qtip-t,.qtip-b:focus-visible+.qtip-t,.qtip.open .qtip-t{display:block}
.fu-why-phone{position:relative}
.fu-why-phone .qtip{position:static}
.fu-why-phone .qtip-t{right:auto;left:0;top:calc(100% + 4px);max-width:100%}
.fu-fr::placeholder{color:var(--body);opacity:.7}
/* fuel papers (js/fuelpaper.js, db/056): the papers part of the delivery box and the Pay the Jobber panel; boxes the papers filled get a thick left edge and a pale fill (the message above says what was filled) */
.fu-papers{margin:var(--space-md) 0;padding:var(--space-md);border:1px solid var(--line);border-radius:var(--radius-md)}
.fu-papers h3{margin:0 0 var(--space-xs)}
.fu-papers .photo-picks{margin-top:var(--space-sm)}
input.filled,select.filled{background:var(--primary-pale);box-shadow:inset 5px 0 0 var(--primary)}
.fp-img{display:block;max-width:100%;max-height:70vh;margin:var(--space-md) auto 0;border-radius:var(--radius-md);border:1px solid var(--line)}
.fp-pdf{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.fp-chip{margin-left:var(--space-xs)}
.fm-pick{display:flex;flex-direction:column;gap:var(--space-sm);margin:var(--space-md) 0}
.fm-pick .btn{justify-content:flex-start;text-align:left;min-height:var(--tap-large)}
.fm-skipped summary{cursor:pointer;font-weight:600;padding:var(--space-sm) 0}
.td-strip{margin:var(--space-md) 0}
#tdStrip b.so-short{color:var(--negative-deep)} #tdStrip b.so-over{color:var(--positive-deep)}
.rc-alert + .rc-alert{border-top:1px solid var(--line);margin-top:var(--space-md);padding-top:var(--space-md)}
.nowrap{white-space:nowrap}
/* Merchandise > Purchases and Register prices, Reports > Inventory (js/merchmore.js, shared list item 19) */
.bk-bar input[type=month]{width:100%;min-height:var(--tap-min);padding:var(--space-md) var(--space-lg);border:1px solid var(--ink);border-radius:var(--radius-md);background:var(--card);color:var(--ink);font:inherit}
/* Purchases, compact as in the old app (Abdul 2026-10-25): a one-line form on top, the list's tools on its title line */
.pu-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm) var(--space-lg);margin-bottom:var(--space-md)}
.pu-head h1,.pu-head h2{margin:0}
/* the vendor invoice page: Save invoice and Cancel on the right (Abdul 2026-10-28: "move to right side") */
.mv-acts{justify-content:flex-end}
/* the invoice lines' View: one short line each, no boxes (Abdul 2026-10-28: "quickly look at this page like a line item") */
.mv-look td{vertical-align:top}
.mv-look .mv-lsub{font-size:13px;line-height:18px;margin-top:2px}
.mv-look .chip{vertical-align:1px}
.pu-store{font-size:16px;font-weight:600}
.pu-cash{margin:0}
.pu-headr{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);justify-content:flex-end}
.pu-invbtns{margin:0;gap:var(--space-sm)}
.pu-qrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-sm) var(--space-md)}
.pu-qrow label{margin:0 0 var(--space-xs);font-size:14px;line-height:20px}
.pu-qrow .f{margin:0}
.pq-vendor{flex:1 1 190px;min-width:170px}
.pq-kind{flex:0 1 170px;min-width:150px}
.pq-no,.pq-amt{flex:0 1 130px;min-width:110px}
.pq-bank{flex:1 1 170px;min-width:150px}
.pu-qrow select,.pu-qrow input{width:100%;box-sizing:border-box}
.pu-qrow .pq-date input{width:auto}
.pu-qbtns{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pu-tools{margin:0;gap:var(--space-sm)}
/* Fuel > Deliveries, Paid deliveries: a supplier (or all) beside the month (2026-10-26) */
.pu-tools select.fp-sup{width:auto;min-width:200px;max-width:100%;min-height:var(--tap-min)}
/* All, More filters and the filter tags look like the calendar button: white, a dark outline, no colour (Abdul 2026-10-25) */
.pu-tools #puAll,.pu-fchips .btn.quiet.pu-fchip{min-height:var(--tap-min);padding:0 20px;border-radius:var(--radius-pill);background:var(--card);border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:16px}
.pu-tools #puAll:hover,.pu-fchips .btn.quiet.pu-fchip:hover{background:var(--well)}
select.field.pu-more{width:auto;min-width:190px;min-height:var(--tap-min);border-radius:var(--radius-pill);background-color:var(--card);border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:16px;padding-left:20px;cursor:pointer}
select.field.pu-more:hover{background-color:var(--well)}
.pu-fchips{margin:0 0 var(--space-md);gap:var(--space-xs)}
.pu-fchip{display:inline-flex;align-items:center;gap:6px}
.pu-fchip .pu-x{font-size:18px;line-height:1;font-weight:800}
.pu-table th,.pu-table td{padding:var(--space-xs) var(--space-md)}
.pu-table td{white-space:nowrap}
.pu-table tbody td:nth-child(2){white-space:normal}
.pu-badges .chip{white-space:nowrap}
.pu-table [data-pday]{border-color:transparent;background:none;padding:0 var(--space-xs);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pu-table [data-pday]:hover{background:var(--well)}
.pu-table input.pu-ret{min-height:40px;height:40px;padding-top:0;padding-bottom:0}
.pu-table tfoot td{white-space:nowrap}
.pu-note{margin:var(--space-sm) 0 0}
.iv-owe{font-size:16px;font-weight:600;margin-left:var(--space-sm)}
.iv-owe b{color:var(--ink)}
.btn.pu-sup{opacity:.45;cursor:help}   /* a cash purchase: Change greyed out, why under the mouse */
.btn.pu-sup:hover{background:var(--card)}
/* Locked (on a bank statement, paid, before the lock day): greyed out, why and how to unlock in the bubble (js/app.js lockBtn) */
.btn.lk-sup{gap:4px}
.btn.lk-sup .ico{width:14px;height:14px}
/* Admin > Stores > Lock entries (db/131) */
.lk-state{font-weight:600;display:flex;align-items:center;gap:var(--space-xs)}
.lk-state .ico{width:18px;height:18px}
.lk-row{align-items:flex-end;flex-wrap:wrap}
.lk-row .f{margin:0}
.why-tip{position:fixed;z-index:60;max-width:min(320px,90vw);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:var(--ink);color:var(--card);font-size:14px;line-height:1.45;box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none}
#puCount{font-variant-numeric:tabular-nums}
@media (max-width:700px){.pu-qrow>.f{flex:1 1 100%;min-width:0}.pu-qrow>.pq-no,.pu-qrow>.pq-amt{flex:1 1 40%}.pu-qrow .pq-date input{width:100%}.pu-tools{width:100%}.pu-table td{white-space:normal}}
input.pu-ret{max-width:140px;text-align:right;font-variant-numeric:tabular-nums}
tr.pu-pay td{color:var(--body)}
.rp-fuel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin:var(--space-md) 0}
.rp-fuel .f{display:flex;flex-direction:column;gap:var(--space-xs)}
.rp-fuel input{font-size:20px;font-variant-numeric:tabular-nums}
/* Gas price change at the bottom of Back Office: the list for the register under the gas prices (2026-10-25) */
#rpFuelCard+h3{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--line)}
.rp-change{font-variant-numeric:tabular-nums}
@media (max-width:700px){input.pu-ret{max-width:none;text-align:left}}
/* Bank > Reconcile: the statement read from photos (js/bankread.js, db/057) */
.br-read{display:block;margin:var(--space-md) 0;padding:var(--space-md) var(--space-lg);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--well);color:var(--ink)}
.br-read h3{font-size:17px}
.br-list{margin:0;padding-left:20px}
.br-list li{margin:2px 0}
.br-list li.warn{font-weight:600}
.br-list li.warn::before{content:"⚠ "}
.br-read .tablewrap{background:var(--card);border-radius:var(--radius-md)}
img.br-photo{display:block;max-width:100%;height:auto;margin:var(--space-md) 0;border:1px solid var(--line);border-radius:var(--radius-md)}
/* Accounts > Transfers: the Quick look in the Daily entry's transfer form (db/060) */
.tfg-box:empty{display:none}
.tfglance{margin:var(--space-md) 0;padding:var(--space-md) var(--space-lg);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--well);color:var(--ink)}
.tfg-h{font-weight:700;margin-bottom:var(--space-sm)}
.tfglance .tablewrap{background:var(--card);border-radius:var(--radius-md)}
/* Say or type a page (js/voicecmd.js) */
.vcmic{min-height:var(--tap-min)}
.vcmic.on{outline:3px solid var(--line-strong);outline-offset:2px}
.vcmic.on .ico{animation:vcpulse 1.2s ease-in-out infinite}
@keyframes vcpulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.vcmic.on .ico{animation:none}}
.vclist{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:grid;gap:var(--space-xs,6px)}
@media (max-width:700px){.has-nav #navCmd,.has-nav #navType{display:none}}   /* phones: Speak and Type are in the Home box (no room in the top bar) */
.vcheard{font-size:20px;font-weight:700;margin:0 0 var(--space-md);color:var(--ink)}

/* store handover (js/handover.js) */
.ho-code { font: 700 28px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 2px; margin: 8px 0; word-break: break-all; }
.ho-in { text-transform: uppercase; letter-spacing: 1px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ho-store { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 4px 16px; margin: 12px 0; }

/* Register closes (js/regcloses.js, db/094) */
.rc-switches{margin:var(--space-lg) 0}
.rc-sw{display:flex;align-items:center;gap:var(--space-md);min-height:var(--tap-min);font-weight:600;cursor:pointer}
.rc-sw input{width:24px;height:24px;flex:none}
.rc-note{margin:0 0 var(--space-md) 36px}
.rc-lbl{font-weight:600;margin-right:var(--space-sm)}
.rc-list{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:var(--space-sm)}
.rc-list li{display:flex;gap:var(--space-sm);align-items:flex-start}
.rc-day h2 .chip{vertical-align:2px}
.rc-more{margin:12px 0;border:1px solid var(--line,#d3ddd6);border-radius:12px;padding:4px 12px}
.rc-more>summary{cursor:pointer;font-weight:700;padding:10px 0;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc-sub{margin:14px 0 4px;font-size:16px}
.rc-from{font-size:14px}
#rcMatch select{min-height:44px;max-width:100%}
.rc-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);font-weight:600;margin:var(--space-sm) 0}

/* Field Log (js/fieldlog.js) */
.fl-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-sm)}
.fl-forms .btn{justify-content:flex-start;min-height:var(--tap-large);text-align:left}
.fl-q{font-weight:700;margin:var(--space-md) 0 var(--space-xs)}
.fl-kinds,.fl-filter{flex-wrap:wrap}
.fl-form-box textarea{width:100%;min-height:72px;font:inherit}
.fl-photo{display:flex;gap:var(--space-md);align-items:flex-end;flex-wrap:wrap;margin:var(--space-md) 0}
.fl-photo img{max-width:200px;max-height:200px;border-radius:var(--radius-lg);border:1px solid var(--line)}
.fl-list .fl-entry{flex:1 1 260px;min-width:0}
.fl-list .fl-entry .chip{margin-left:0}
.fl-note{margin:var(--space-xs) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fl-who{margin:var(--space-xs) 0 0;font-size:14px}
.fl-acts{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.fl-big{display:block;max-width:100%;max-height:70vh;margin:var(--space-md) auto;border-radius:var(--radius-lg)}

/* Head Office: groups, prices for many stores; the owner's OK (js/headoffice.js, js/approvals.js) */
.hq-scope{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center;margin:var(--space-md) 0}
.hq-scope-l{font-weight:700}
.hq-pick{display:flex;gap:var(--space-sm);align-items:center;min-height:var(--tap-min);font-weight:600}
.hq-pick input{width:22px;height:22px}
.hq-picks{display:grid;gap:var(--space-xs);margin-bottom:var(--space-sm)}
.hq-grid input{width:100%;max-width:120px;text-align:right;font-variant-numeric:tabular-nums}
.hq-grid small{display:block}
.hq-grid tr.hq-all td{background:var(--well)}
.hq-picked{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin:var(--space-md) 0}
.apr-sw{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.apr-sw button[aria-pressed="true"]{background:var(--inverse);color:var(--on-inverse)}
.apr-owner li > span:first-child{flex:1 1 280px}
/* Quick looks in the Daily entry (js/glance.js, db/069): a fold under each form, open at first */
.qlook{margin:var(--space-md) 0;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--well);color:var(--ink)}
.qlook>summary{cursor:pointer;padding:var(--space-sm) var(--space-lg);font-weight:700;min-height:44px;display:flex;align-items:center;gap:var(--space-sm);list-style:none}
.qlook .ql-body{padding:0 var(--space-lg) var(--space-md)}
.qlook .tablewrap{background:var(--card);border-radius:var(--radius-md)}
.qlook .ql-line{display:flex;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-sm)}
.qlook>summary::-webkit-details-marker{display:none}
.qlook>summary::before{content:"▸";display:inline-block;transition:transform .15s}
.qlook[open]>summary::before{transform:rotate(90deg)}
/* the words boxes: Fill the day from photos or words (db/069) and Describe the packs (db/064) */
#aiWords,#lpWords{display:block;width:100%;min-height:84px;margin:var(--space-xs) 0 var(--space-md);padding:var(--space-md) var(--space-lg);border:1px solid var(--ink);border-radius:var(--radius-md);background:var(--card);color:var(--ink);font:inherit;resize:vertical}
/* Back Office (js/backoffice.js, db/067) */
.bo-sub{font-size:13px;line-height:18px;font-weight:500}
.br-acts{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:flex-end}
#brTable td.num b{font-variant-numeric:tabular-nums}
@media (max-width:700px){.br-acts{justify-content:flex-start}.br-acts .btn{flex:1 1 auto}}
/* Vendors on credit, part payments (js/invoices.js, db/071) */
.iv-vpicks{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
input.ivpaynow{width:100%;max-width:110px;text-align:right;font-variant-numeric:tabular-nums}
#ivLgTable tr.ivlg-start td{background:var(--well)}
/* ATM ledger (db/065): the date stays on one line */
#alTable td.al-d{text-align:left}
/* Ask about your numbers (js/ask.js) */
#askText{width:100%;min-height:72px;padding:var(--space-md) var(--space-lg);border:1px solid var(--ink);border-radius:var(--radius-md);background:var(--card);color:var(--ink);font:inherit;resize:vertical}
.ask-answer:empty{display:none}
.ask-answer{margin-top:var(--space-md)}
.ask-answer .rc-cards{margin-top:8px}
.ask-sub{margin:10px 0 0}
.ask-warn{margin-top:8px}
.ask-warn p{margin:0}
.ask-warn p+p{margin-top:4px}
.ask-top{margin:4px 0 0;padding-left:22px}
.ask-top li{padding:2px 0}
.ask-top li span{margin-right:12px}

/* Account > Connect, Add-ons, Photos & files check (js/connect.js, db/081) */
.cn-devs{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}
.cn-devs>p{flex-basis:100%}
.cn-dev{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min)}
/* the device picked: the app's blue with white words (Abdul 2026-10-25: "clicked button go black"; the words were not readable) */
.btn.cn-dev[aria-pressed="true"],.btn.quiet.cn-dev[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:700}
.btn.cn-dev[aria-pressed="true"] .ico,.btn.quiet.cn-dev[aria-pressed="true"] .ico{color:var(--on-primary)}
.cn-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);margin-top:var(--space-md)}
.cn-status>span{flex:1 1 220px}
.cn-status.ok{background:var(--primary-pale);color:var(--positive-deep)}
.cn-status.warn{background:var(--warning-pale);color:var(--warning-content)}
.cn-steps{list-style:none;margin:0;padding:0}
.cn-step{display:flex;gap:var(--space-md);padding:var(--space-md) 0;border-top:1px solid var(--line)}
.cn-step:first-child{border-top:0}
.cn-step h3{margin:2px 0 4px;font-size:17px}
.cn-step p{margin:4px 0}
.cn-step ul{margin:4px 0;padding-left:20px}
.cn-num{flex:0 0 32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--well);color:var(--ink)}
.cn-step.done .cn-num{background:var(--positive);color:var(--on-primary)}
.cn-step.done h3::after{content:" ✓";color:var(--positive-deep)}
.cn-step.soon{color:var(--mute)}
.chip.soon{background:transparent;border:1px dashed var(--line-strong);color:var(--mute);margin-left:0}
.cn-tip{background:var(--warning-pale)}
.ao-head{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.ao-head h2{margin:0}
.ao ul{margin:var(--space-sm) 0;padding-left:20px}
.ao-soon{color:var(--mute)}
.fc-rows{list-style:none;margin:var(--space-md) 0;padding:0}
.fc-row{display:flex;gap:var(--space-md);padding:var(--space-sm) 0;border-top:1px solid var(--line)}
.fc-row:first-child{border-top:0}
.fc-ico{flex:0 0 26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--well)}
.fc-row.ok .fc-ico{background:var(--primary-pale);color:var(--positive-deep)}
.fc-row.bad .fc-ico{background:var(--negative-pale);color:var(--negative-deep)}
.fc-img{max-width:100%;max-height:240px;border-radius:var(--radius-md);margin-top:var(--space-sm)}

/* proof of a fuel payment (db/083): the count stays on one line */
[data-fpproof] { white-space: nowrap; }

/* People: time clock (db/084) */
.tc-now { font-size: 18px; margin: 8px 0; }
.tc-btns .tc-big { min-height: 56px; min-width: 160px; font-size: 18px; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
label.check input { width: 22px; height: 22px; }
.tc-break { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.tc-break label { min-width: 80px; }
#tcTile .tc-now { font-size: 15px; }

/* iPad / touch: no double-tap zoom or text selection on the big buttons; bigger number pad and name tiles (Abdul 2026-10-21) */
.pinperson,.pinpad button,.ktile,.kiosk .btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
@media (pointer:coarse){
  .pinpad{max-width:420px;gap:var(--space-md)}
  .pinpad button{min-height:84px;font-size:32px}
  .pinpad button[data-k="clear"]{font-size:20px}
  .pinperson{min-height:150px;font-size:20px}
}
/* the Clock screen after a PIN sign-in on a store computer */
.kiosk{max-width:720px;margin:0 auto}
.kiosk .khead{display:flex;align-items:center;gap:var(--space-md)}
.kiosk h1{margin:0}
.kiosk .know{font-size:22px;margin:var(--space-md) 0}
.ktiles{display:flex;flex-direction:column;gap:var(--space-md);margin:var(--space-md) 0}
.ktile{min-height:110px;border:0;border-radius:var(--radius-xl);font-size:34px;font-weight:700;color:#fff;cursor:pointer}
.ktile:active{transform:scale(.98)}
.ktile:disabled{opacity:.5}
.ktile.kin{background:#0f6b4c}.ktile.kbrk{background:#8a6508}.ktile.kout{background:#a83232}
.kdone{font-size:28px;font-weight:700;margin:0}
.krow{display:flex;gap:var(--space-md);flex-wrap:wrap}
.krow .btn{min-height:64px;min-width:160px;font-size:20px}

/* the PIN clock on a store computer (db/085): pad on the left, the three big buttons on the right */
.pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);align-items:start}
.pkdots{display:flex;gap:var(--space-sm);margin:var(--space-sm) 0}
.pkdots span{width:58px;height:64px;border:2px solid var(--line-strong);border-radius:var(--radius-lg);display:grid;place-items:center;font-size:28px;background:var(--card)}
.pkdots span.on{border-color:var(--ink)}
.pkright{display:flex;flex-direction:column;gap:var(--space-md)}
.pkright .ktile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:0 var(--space-xl);text-align:left}
.pkright .ktile small{font-size:15px;font-weight:600;opacity:.9}
.pkmsg{margin:var(--space-md) 0;min-height:56px;padding:var(--space-md);border-radius:var(--radius-lg);background:var(--well);font-size:18px;font-weight:600;display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.pkmsg.ok{background:var(--primary-pale);color:var(--positive-deep)}
.pkmsg.bad{background:var(--negative-pale);color:var(--negative-deep)}
.pkmsg .btn{min-height:48px}
@media (max-width:760px){.pk{grid-template-columns:1fr}}
.pinwrap:has(.pk){max-width:920px}

/* ---------- The old app's Tiles and Bottom bar layouts (Abdul 2026-10-23: "In tile menu and bottom menu follow same lay out of old app") ----------
   The page bar under the top bar (Tiles, Quick Find, the Bottom bar and every phone): Home ▾ (Tiles; Quick Find: Home), the area · its
   open page ▾ (shows / hides the area's pages), the 4 squares (the area's pages box), Back / Forward / Recent, then (Tiles, Quick Find)
   the row of the area's pages. The Bottom bar: Home + the open area's pages. The top bar's own Back / Forward / Recent hide there. */
.pbar{display:none}
body[data-ui="tiles"].has-nav .pbar,body[data-ui="find"].has-nav .pbar,body.navb.has-nav .pbar{display:flex}
/* Back / Forward / Recent pages stay in the top bar in every layout (Abdul 2026-10-23); on a phone the top bar has no room, so they sit in the page bar */
@media (min-width:701px){.pbar .pb-trio{display:none}}
body[data-ui="tiles"].has-nav .top .subtabs,body[data-ui="find"].has-nav .top .subtabs,body.navb.has-nav .top .subtabs{display:none}
@media (max-width:700px){.has-nav .top-row .navtools{display:none}}
.pbar{flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-xl) var(--space-md);position:relative}
.pbar > button,.pbar .pb-mode,.pbar .pb-trio .navbtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;border-radius:14px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.pbar .ico{width:20px;height:20px;flex:none;margin:0}
.pbar .pb-home{padding:2px 10px 2px 12px}
.pb-stack{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.pb-stack > span:last-child{font-size:12px;font-weight:800;line-height:1}
.pbar .pb-chev{width:18px;height:18px;transition:transform .15s ease}
.pbar [aria-expanded="true"] .pb-chev{transform:rotate(180deg)}
.pbar [aria-expanded="true"].pb-home,.pbar [aria-expanded="true"].pb-sq{box-shadow:0 0 0 3px var(--primary-neutral);border-color:var(--primary)}
.pbar .pb-area{padding:0 14px;border:2px solid var(--primary);background:var(--primary-pale);font-size:17px;font-weight:800}
.pbar .pb-area b{font-weight:800}
.pbar .pb-mode{cursor:default}
.pb-cur{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--body)}
.pbar .pb-sq{justify-content:center;width:48px;padding:0}
.pb-trio{display:inline-flex;gap:var(--space-sm)}
.pbar .pb-trio .navbtn{justify-content:center;width:48px;min-width:48px;padding:0}
.pbar .pb-trio .navbtn:disabled{opacity:.38;cursor:not-allowed}
.pb-tray{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.pb-tray[hidden]{display:none}
.pb-tray button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px 0 9px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pb-tray button .ico{width:18px;height:18px}
.pb-tray button[aria-current="page"]{background:var(--primary);border-color:transparent;color:var(--on-primary)}
.pbar > button:hover,.pb-tray button:hover:not([aria-current="page"]),.pbar .pb-trio .navbtn:hover:not(:disabled){background:var(--well)}
.pbar .pb-area:hover{background:var(--primary-neutral)}
.navb .pbar .pb-home,.navb .pbar .pb-tray{display:none}
@media (max-width:700px){.pbar{padding:var(--space-xs) var(--space-md) var(--space-sm);gap:6px}.pbar .pb-area{font-size:15px;padding:0 10px}.pb-cur{font-size:14px}}

/* the Home mark: nine little stars; the pages mark: four squares */
.hstars{display:inline-grid;grid-template-columns:repeat(3,8px);grid-auto-rows:8px;gap:0;width:24px;height:24px;place-content:center}
.hstars i{display:block;width:8px;height:8px;background:var(--positive-deep);clip-path:polygon(50% 4%,62.8% 36.3%,96% 39.1%,70.7% 61.9%,78.4% 96%,50% 77.7%,21.6% 96%,29.3% 61.9%,4% 39.1%,37.2% 36.3%)}
.hstars i.r{background:var(--negative-deep)}
.sq4{display:inline-grid;grid-template-columns:repeat(2,8px);grid-auto-rows:8px;gap:5px}
.sq4 i{display:block;width:8px;height:8px;border-radius:2px;background:var(--primary)}
/* the Bottom bar: Home (stays at the left) + the open area's pages (slide sideways when there are many) */
.navb .bottomnav{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.navb .bottomnav::-webkit-scrollbar{display:none}
.navb .bottomnav button{flex:1 0 0;min-width:92px;min-height:62px;padding:4px 2px;color:var(--ink)}
.navb .bottomnav button[hidden]{display:none}
.navb .bottomnav [data-nav="home"]{flex:0 0 92px;position:sticky;left:0;z-index:2;background:var(--card)}
.navb .bottomnav [data-nav="home"][aria-expanded="true"]{background:var(--primary-pale)}
.navb .bottomnav button .hstars{width:26px;height:26px}
.navb .bottomnav .bn-page span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center;line-height:1.15;font-size:12.5px;overflow-wrap:break-word}
.navb .bottomnav button[aria-current="page"]{background:var(--primary-pale)}
@media (max-width:700px){.has-nav .bottomnav{display:flex}}
/* the Home box (and an area's pages box) */
.apop{position:fixed;z-index:85;width:min(600px,calc(100vw - 24px));max-height:72vh;overflow:auto;padding:12px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow-modal)}
.apop.at-bottom{left:12px;bottom:calc(var(--navh,86px) + 10px);max-height:min(72vh,calc(100dvh - var(--navh,86px) - 28px))}
.ap-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.ap-title{display:inline-flex;align-items:center;gap:10px;font-size:17px;padding:0 4px}
.ap-back,.ap-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 8px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.ap-back{padding:0 14px;color:var(--body);font-weight:700}
.ap-back:hover,.ap-open:hover{background:var(--well)}
.ap-back .ico{width:18px;height:18px}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ap-tile{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:16px;background:var(--primary-pale);color:var(--ink);font:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer}
.ap-tile > .ap-lbl{flex:1;min-width:0}
.ap-tile:hover{background:var(--primary-neutral)}
.ap-tile[aria-current="page"]{outline:3px solid var(--primary);outline-offset:-3px}
.ap-chip{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;background:var(--primary);color:var(--on-primary)}
.ap-chip .ico{width:22px;height:22px;margin:0}
.ap-more{width:16px;height:16px;opacity:.6}
.ap-tools{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* phones: the page bar on one line (the open page is marked on the Bottom bar), long area names fit in their tiles */
@media (max-width:480px){
  .pbar .pb-cur{display:none}
  .pbar > button,.pbar .pb-mode,.pbar .pb-trio .navbtn{min-height:44px}
  .pbar .pb-sq,.pbar .pb-trio .navbtn{width:44px;min-width:44px}
  .pb-trio{gap:6px}
  .ap-tile{font-size:15px;gap:8px;padding:8px}
  .ap-chip{width:34px;height:34px}
  .ap-more{display:none}
}
/* the six dots on the Home box tiles and the Bottom bar pages (drag them into your own order, as in the old app) */
.ap-tile,.navb .bottomnav .bn-page{position:relative}
.ap-tile .tgrip{position:absolute;top:4px;right:6px}
.navb .bottomnav .bn-page .tgrip{position:absolute;top:4px;right:4px}
/* Store settings > Special actions (Abdul 2026-10-23): each button with its explanation beside it (under it on a phone) */
.spact{display:flex;align-items:center;gap:var(--space-md) var(--space-lg);flex-wrap:wrap;padding:var(--space-md) 0;border-top:1px solid var(--line)}
.spact:first-child{border-top:0;padding-top:var(--space-xs)}
.spact .btn{flex:none;min-width:230px;justify-content:center}
.spact p{flex:1 1 320px;margin:0}
.spact + .hoinfo{margin:-4px 0 var(--space-md)}
@media (max-width:560px){.spact .btn{width:100%;min-width:0}}
/* Admin > Stores: every store's details shown (Abdul 2026-10-23); what is not typed yet says "Not added yet" */
.stbody{display:block}
.stinfo{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:6px;font-size:15px}
.stinfo .si{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stinfo .si-l{color:var(--body)}
.stinfo .si-v{color:var(--ink);font-weight:600}
.stinfo .si-none{color:var(--body);font-weight:400;font-style:italic}
.stbody .hoinfo:not(.hidden){display:block;margin-top:6px}
@media (max-width:560px){.stinfo{flex-direction:column;gap:2px}.stinfo .si{white-space:normal}}
#acStoreList .pwho{align-items:flex-start}
/* Head Office > Admin: the buttons for every store's Stores, Users and access, Subscription and payment (Abdul 2026-10-23) */
.hqseg{margin:0 0 var(--space-lg)}
.hqseg button{display:inline-flex;align-items:center;gap:8px}
.hqseg .ico{width:18px;height:18px;margin:0}
.hqu{padding:var(--space-md) 0;border-top:1px solid var(--line)}
.hqu:first-of-type{border-top:0}
.hqu-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.hqu .plist{margin:var(--space-sm) 0 0 60px}
@media (max-width:560px){.hqu .plist{margin-left:0}.hqseg{display:flex}.hqseg button{flex:1 1 auto;justify-content:center;padding:0 var(--space-md)}}

/* Employees (db/102): which computers */
.emcomps{border:0;margin:var(--space-md) 0 0;padding:0}
.emcomps legend{font-weight:600;padding:0;margin-bottom:var(--space-xs)}
.emcomps .tick{min-height:44px}

.pk .pkcancel{width:100%;min-height:64px;font-size:20px;margin-top:var(--space-sm)}

/* Added to the home screen as an app (iPad / store computer): no pull-to-refresh pulling the keypad page, no double-tap zoom */
html,body{overscroll-behavior-y:none}
.pinpad button,.ktile,.pkcancel{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.kpsteps{margin:var(--space-sm) 0;padding-left:var(--space-lg)}
.kpsteps li{margin:var(--space-xs) 0}

/* the key pad: Montro-AI logo and the store's name over the pad */
.kphead{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm)}
.kphead .kpstore{display:block;font-size:28px;line-height:34px;font-weight:700}
.kphead .muted{display:block}

/* My timesheet on the key pad (Abdul 2026-10-24) */
.ktile.ksheet{background:#27506e}
.pinwrap:has(.shpanel),.pinwrap:has(.shbox){max-width:920px}
.shbox{text-align:center;padding:var(--space-xl) 0}
.shask{font-size:30px;font-weight:700;margin:0 0 var(--space-xl)}
.shbtns{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}
.shbtns .shbig{flex:1 1 220px;min-height:72px;font-size:22px;font-weight:700}
.shbox .shbtns{justify-content:center}
.shnav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-md)}
.shnav .btn{min-height:56px;font-size:18px}
.shrange{font-size:20px}
.shsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-bottom:var(--space-md)}
.shsum>div{background:var(--well);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column;gap:2px}
.shsum span{font-size:15px;color:var(--ink-soft,inherit)}
.shsum b{font-size:26px}
.shtable{font-size:18px}
.shh{margin:var(--space-lg) 0 var(--space-sm)}
.shreps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.shform label{display:block;margin-top:var(--space-md);font-weight:600}
.shform input,.shform textarea{width:100%;font-size:20px;min-height:56px}
.shform .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.shclose2{width:100%;min-height:56px;margin-top:var(--space-sm)}
.ktile,.shbig{touch-action:manipulation}
@media (max-width:760px){.shsum b{font-size:20px}.shform .row2{grid-template-columns:1fr}}
.pinwrap:has(.kphead){position:relative}
.kpx{position:absolute;top:14px;right:14px;width:56px;height:56px;min-width:56px;border-radius:50%;border:2px solid var(--line-strong);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kpx svg{width:26px;height:26px}
.kpx:active{transform:scale(.94)}

/* Phone clock-in (db/104) */
.pkphone{margin:var(--space-md) 0;padding:var(--space-md);border:2px solid var(--line-strong);border-radius:var(--radius-lg);display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.pkphone .pkcode{font-size:34px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.pkqr{width:168px;height:168px;image-rendering:pixelated;background:#fff;border-radius:var(--radius-md);flex:0 0 auto}
.pkphone.pkbig{justify-content:center;text-align:center}.pkphone.pkbig .pkqr{width:min(70vw,360px);height:min(70vw,360px)}.pkphone.pkbig .pkcode{font-size:44px}
.shpay{margin:var(--space-md) 0;padding:var(--space-md);border:2px solid var(--line-strong);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.shpay>span{font-size:16px}.shpay>b{font-size:34px;font-variant-numeric:tabular-nums}.shpay>small{flex:1 1 100%;font-size:16px}
.shpay-paid{border-style:solid;border-width:3px}.shpay-estimate{border-style:dashed}
.pkphone small{flex:1 1 220px;font-size:15px}
.phclock .pkright{margin-top:var(--space-md)}
.phcode{width:100%;font-size:40px;letter-spacing:.2em;text-align:center;min-height:76px;font-variant-numeric:tabular-nums}
.phclock .ktile,.phclock .pkright .ktile{min-height:100px}
.emphone{display:grid;gap:var(--space-sm)}
.emphone input{width:100%;font-size:16px}

/* Key pad a little smaller so the message under Cancel always fits on an iPad / small screen (Abdul 2026-10-24) */
.pk .pinpad{max-width:340px;gap:var(--space-sm)}
.pk .pinpad button{min-height:clamp(50px,8.5vh,72px);font-size:26px}
.pk .pinpad button[data-k="clear"]{font-size:17px}
.pk .pkdots span{width:50px;height:54px;font-size:24px}
.pk .pkright{gap:var(--space-sm)}
.pk .ktile{min-height:clamp(62px,11vh,92px);font-size:28px}
.pk .pkright .ktile small{font-size:14px}
.pk .pkcancel{min-height:52px;font-size:18px;margin-top:0}
.pk .pkmsg{min-height:48px;margin:var(--space-sm) 0;font-size:17px}
.pk .pinask{margin:0}

/* On credit beside a vendor in Store settings (2026-10-25) */
.plist .vcred{margin:0 var(--space-sm) 0 0;white-space:nowrap}

/* the message sits at the top, in the middle (Abdul 2026-10-25) */
.pkmsg{justify-content:center;text-align:center}
.pk .pkmsg{margin:0 0 var(--space-md)}

/* Back Office: the Items part and the Fuel part look different (Abdul 2026-10-26): a band with an icon and the word, a bar down the left side, a tint.
   Items use the theme's main colour, Fuel the warning colour; the icon and the word say which, so colour is never the only sign. */
.bo-part{margin-bottom:var(--space-xl);padding-left:var(--space-md);border-left:8px solid var(--primary)}
.bo-part.bo-fuel{border-left:8px double var(--warning-content)}
.bo-zone{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);background:var(--primary-pale);color:var(--ink)}
.bo-fuel .bo-zone{background:var(--warning-pale)}
.bo-zone svg{flex:none;width:32px;height:32px}
.bo-zone b{display:block;font-size:22px;line-height:28px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bo-zone .muted{display:block}
.bo-part .card{margin-bottom:var(--space-lg)}
.plist li.rp-itemrow{border-left:6px solid var(--primary);padding-left:var(--space-md)}
.plist li.rp-fuelrow{border-left:6px double var(--warning-content);padding-left:var(--space-md);background:var(--warning-pale)}
.ptpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-sm)}
.ptpick .tick{display:flex;align-items:center;gap:var(--space-sm);min-height:var(--tap-min)}
/* how a money service company settles, the second line of its New line and Edit box (Store settings > Money services) */
.sform .st-break{flex:0 0 100%;height:0}
.sform .st-settle{flex:1 1 420px;min-width:0}
.sform .st-settle .ms-line:last-of-type{margin-bottom:0}
.sform .st-settle .st-hint{margin:var(--space-xs) 0 0}
.sform .st-settle .seg{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-strong)}   /* seen on the well */
/* Money services > Settlement (2026-10-26: Activity and Settlement on one page): how it settles in one line, the week of
   the Settlements list (the days button opens From / To), + Create settlement, and the ledger's settlement lines */
.ms-settles{margin:var(--space-sm) 0 0;align-items:center;gap:var(--space-xs) var(--space-md)}
.datebar.ms-week{margin-top:0;flex-wrap:nowrap}
.datebar .btn.small.ms-wlabel{width:auto;flex:1 1 auto;min-width:0;padding:4px var(--space-md);gap:6px;font-weight:700;background:var(--well);border-color:transparent;white-space:normal;text-align:center;line-height:1.25}
.ms-wlabel .ico{width:16px;height:16px}
#msSetCard .pu-tools{flex-wrap:wrap}
table.cards tr.ms-ledset td{background:color-mix(in srgb,var(--well) 55%,var(--card))}
#msLedTable tr.fwd td{font-style:italic}
@media (max-width:700px){.datebar.ms-week{width:100%}#msSetCard .pu-tools #msCreate{width:100%}}
/* Accounts pages as one ledger (2026-10-26): the type and the month or dates on top on the right */
.pu-tools select.ac-type{width:auto;min-width:200px;max-width:100%;min-height:var(--tap-min)}
.ac-tools{flex-wrap:wrap;justify-content:flex-end}
table.cards tr.fwd td{font-style:italic}
@media (max-width:700px){.pu-tools select.ac-type{flex:1 1 100%}}
/* Reconcile laid out as the Jobber page (2026-10-26): the sums in one column beside the statement's photos; the tick at the end of each line */
#recTable th.rc-tick,#recTable td.rc-tick{text-align:center;width:64px}
#rcPapers .photo-picks .btn{width:auto}
/* Reconcile: the ticked Credits and Debits in two columns, then the opening, the closing worked out, the statement and the difference */
.rc-sums{margin-top:var(--space-md)}
.rp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-bottom:var(--space-sm)}
.rp-col{display:flex;flex-direction:column;gap:2px;padding:var(--space-md);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card)}
.rp-head{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--body)}
.rp-big{font-size:22px;font-variant-numeric:tabular-nums}
.rc-sums>.rp-diff{justify-content:space-between}
@media (max-width:520px){.rp-cols{grid-template-columns:1fr}}

.rp-parts{display:grid;gap:var(--space-md)}
.rp-part-h{margin:0 0 var(--space-xs);font-size:14px;font-weight:700;color:var(--muted)}