/* v0.9 Work rework — styles added piece by piece (skeleton ESQUELETO_REWORK_WORK rev 46; decisions W1–W15 in
   WORK_REWORK_DECISIONS_EN.md). Loaded after style.css and sidebar-rail.css; scoped to Work (.w1 / the Work tabs).
   Piece 2 — the space of the board. Tests: test/work-board-space.test.mjs, test/work-board-space-browser.spec.mjs. */

/* 08-oct (Mathew): an action tab (+ New job) looks like every other tab — grey, amber when you are on it. */

/* the big "+ New customer" of Customers */
.w1 .w1-btn.w1-big { padding:10px 18px; font-size:13.5px; }

/* Board — computer and tablet: the columns sit on ONE row that fills the window; each column scrolls on its own and the
   page never does; Delivered history stays at the foot. Phones keep one stage at a time (style.css). */
@media (min-width:641px) {
  #view.content:has(#jobBoard) { max-width:none; height:calc(100dvh / var(--z, 1)); box-sizing:border-box; display:flex; flex-direction:column; padding-bottom:16px; }
  #view.content:has(#jobBoard) > * { flex:none; }
  #view.content:has(#jobBoard) > .w1 { flex:1; min-height:0; display:flex; flex-direction:column; }
  #view.content:has(#jobBoard) > .w1 > * { flex:none; }
  #view.content:has(#jobBoard) #jobBoard { flex:1; min-height:0; display:flex; flex-direction:column; }
  .w1 #jobBoard .w1-board.w1-row { flex:1; min-height:0; display:flex !important; flex-wrap:nowrap !important; gap:10px; align-items:stretch;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
  .w1 .w1-row > .w1-col { flex:1 1 0 !important; min-width:180px !important; min-height:0 !important; position:relative; }
  /* an empty column takes about half the width so the busy ones get it */
  .w1 .w1-row > .w1-col:not(:has(.w1-c)) { flex-grow:.45 !important; min-width:96px !important; }
  /* 06-oct (4a): an empty Delivered · this week keeps room for its title on one line */
  .w1 .w1-row > .w1-col.w1-dl:not(:has(.w1-c)) { min-width:150px !important; }
  /* titles keep the same height, so the first cards line up across columns */
  .w1 .w1-row > .w1-col > h4 { min-height:2.7em; align-items:flex-start; }
  .w1 .w1-row > .w1-col > .w1-cards { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding-bottom:6px;
    scrollbar-width:thin; scrollbar-color:transparent transparent; }
  .w1 .w1-row > .w1-col:hover > .w1-cards { scrollbar-color:#b9c0c8 transparent; }
  .w1 .w1-row > .w1-col > .w1-cards::-webkit-scrollbar { width:4px; }
  .w1 .w1-row > .w1-col > .w1-cards::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
  .w1 .w1-row > .w1-col:hover > .w1-cards::-webkit-scrollbar-thumb { background:#b9c0c8; }
  .w1 .w1-row .w1-more-n { position:absolute; left:8px; right:8px; bottom:8px; padding:18px 0 6px; text-align:center; font:800 11.5px Inter;
    color:var(--w1-ink); background:linear-gradient(to bottom, rgba(233,236,240,0), #e9ecf0 55%); border-radius:0 0 10px 10px; pointer-events:none; }
  .w1 .w1-row .w1-more-n[hidden] { display:none; }
  /* the thin "+" strip — off until each shop has its own columns */
  .w1 .w1-row > .w1-addcol { flex:0 0 18px; border:1.5px dashed #c3cbd4; border-radius:12px; display:grid; justify-items:center; align-content:start;
    padding-top:10px; color:var(--w1-muted-soft); font-weight:800; opacity:.6; cursor:not-allowed; }
  /* Delivered history open: the board keeps its height and the page grows below */
  /* 07-oct fix: :has(#jobBoard) outweighs :has(.w1-dh-open), so the open history must name both or the page stays one
     window tall, overflows the shell and the sticky sidebar scrolls away with it */
  #view.content:has(#jobBoard):has(.w1-dh-open) { height:auto; min-height:calc(100dvh / var(--z, 1)); }
  #view.content:has(#jobBoard):has(.w1-dh-open) #jobBoard .w1-board.w1-row { flex:none; height:var(--w1-board-h, calc(calc(100dvh / var(--z, 1)) - 260px)); }
}
/* the floating dock (bell, calendar, help) never covers the board on a computer */
@media (min-width:901px) { #view.content:has(#jobBoard) { padding-right:78px; } }

/* Delivered history — the bar at the foot of the board, opening downward */
.w1 .w1-dh { margin-top:12px; background:#fff; border:1px solid var(--w1-line); border-radius:14px; box-shadow:var(--w1-shadow, 0 1px 2px rgba(25,29,35,.06)); }
.w1 .w1-dh.w1-over { outline:2px dashed var(--w1-amber); outline-offset:-2px; background:#fff8e6; }
.w1 .w1-dh-h { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; }
.w1 .w1-dh-h b { font:600 15px Oswald, sans-serif; color:var(--w1-ink); }
.w1 .w1-dh-n { color:var(--w1-muted); font-size:12.5px; font-weight:600; }
.w1 .w1-dh-chev { margin-left:auto; display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--w1-line); border-radius:9px; color:var(--w1-ink); }
.w1 .w1-dh-tools { display:flex; gap:8px; align-items:center; padding:0 16px 10px; flex-wrap:wrap; }
.w1 .w1-dh-q { flex:0 1 280px; }
.w1 .w1-dh-list { border-top:1px solid var(--w1-line); }
.w1 .w1-dh-row { display:grid; grid-template-columns:1.1fr 1.2fr 1.5fr .7fr 1.1fr; gap:10px; padding:9px 16px; border-top:1px solid var(--w1-line-soft);
  font-size:12.5px; align-items:center; cursor:pointer; }
.w1 .w1-dh-row:hover { background:var(--w1-amber-bg, #fffaf0); }
.w1 .w1-dh-row > span:last-child { text-align:right; }
.w1 .w1-dh-row.w1-dh-th { cursor:default; border-top:0; font:700 10.5px Inter; letter-spacing:.05em; text-transform:uppercase; color:var(--w1-muted-soft); }
.w1 .w1-dh-row.w1-dh-th:hover { background:none; }
.w1 .w1-dh-wk { padding:8px 16px 4px; font:700 11px Inter; color:var(--w1-muted); background:#f7f8fa; border-top:1px solid var(--w1-line); }
.w1 .w1-dh-more { padding:10px 16px; text-align:center; font-weight:700; font-size:12.5px; border-top:1px solid var(--w1-line); cursor:pointer; }
@media (max-width:640px) {
  .w1 .w1-dh-row { grid-template-columns:1fr; gap:2px; }
  .w1 .w1-dh-row > span:last-child { text-align:left; }
  .w1 .w1-dh-row.w1-dh-th { display:none; }
}

/* Piece 3 — cards: one shape and order; they grow with their own width; colour = state on the border.
   Tests: test/work-card-anatomy.test.mjs, test/work-card-anatomy-browser.spec.mjs. */
.w1 .w1-c { container-type:inline-size; position:relative; cursor:pointer; }
/* 07-oct fix: the dragged copy keeps position:fixed (the line above made it relative, so it drew far below the pointer) */
.w1 .w1-c.w1-ghost { position:fixed; }
.w1 .w1-c .w1-x1, .w1 .w1-c .w1-x2 { display:none; }
.w1 .w1-c .w1-x1 { margin-top:3px; font-size:11.5px; color:var(--w1-muted); }
.w1 .w1-c .w1-x2 { margin-top:5px; padding:5px 8px; border-radius:8px; background:#f7f8fa; font-size:12px; color:var(--w1-ink); }
/* 06-oct (4a): with Ready and Delivered both on the board a 1440px laptop card is ~187px (content ~167px); the technician
   line still shows there, as in the skeleton. */
@container (min-width:160px) { .w1 .w1-c .w1-x1 { display:block; } }
@container (min-width:245px) { .w1 .w1-c .w1-x2 { display:block; } }
.w1 .w1-c .w1-ft { display:flex; align-items:center; gap:4px 5px; flex-wrap:wrap; margin-top:6px; }
.w1 .w1-c .w1-ft .w1-tg { margin:0; }
.w1 .w1-live { display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:11px; font-weight:700; color:var(--w1-green, #2f7d51); white-space:nowrap; }
.w1 .w1-live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--w1-green, #2f7d51); box-shadow:0 0 0 3px rgba(47,125,81,.18); }
/* computer (07-oct, Mathew): on hover or keyboard focus the card grows downward (the cards below slide down with it) and
   shows the move buttons under its content — a small ‹ back and the dark "Next column ›"; hidden and taking no room
   otherwise. Touch keeps today's buttons. */
@media (hover:hover) and (pointer:fine) {
  .w1 .w1-c .w1-mv { display:flex; gap:6px; margin:0; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .18s cubic-bezier(.2,.8,.2,1), margin-top .18s cubic-bezier(.2,.8,.2,1), opacity .12s ease; }
  .w1 .w1-c:hover .w1-mv, .w1 .w1-c:focus-within .w1-mv { max-height:44px; margin-top:10px; opacity:1; }
  .w1 .w1-c .w1-mv .w1-b, .w1 .w1-c .w1-mv .w1-n { flex:1 1 0; min-width:0; height:34px; min-height:0; padding:0 8px; font-size:12px; font-weight:700;
    border-radius:8px; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:clip; cursor:pointer; }
  .w1 .w1-c .w1-mv .w1-b { flex:0 0 40px; font-size:16px; background:#fff; color:var(--w1-ink); border:1px solid var(--w1-line); }
  .w1 .w1-c .w1-mv .w1-b:hover { background:#f2f4f7; }
  .w1 .w1-c .w1-mv .w1-n:hover { filter:brightness(1.25); }
  .w1 .w1-c.w1-ghost .w1-mv { max-height:0; margin:0; opacity:0; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce) { .w1 .w1-c .w1-mv { transition:none; } }

/* Piece 4a — Ready (green) and Delivered (grey) are the last two columns; titles are renamed in place; ⋯ opens a small menu.
   Tests: test/work-columns-fixed.test.mjs, test/work-columns-fixed-browser.spec.mjs. */
.w1 .w1-col.w1-rd { background:#dcefe2; box-shadow:inset 0 0 0 1.5px #b7dcc3; }
.w1 .w1-col.w1-rd > h4 { color:var(--w1-green, #2f7d51); }
.w1 .w1-col.w1-dl { background:#e2e7ec; box-shadow:inset 0 0 0 1.5px #c9d0d8; }
.w1 .w1-col > h4 { position:relative; }
.w1 .w1-col > h4 .w1-hr { display:inline-flex; align-items:center; gap:4px; }
.w1 .w1-ttl { cursor:text; border-bottom:1.5px dashed transparent; transition:border-color .15s ease; }
.w1 .w1-ttl:hover, .w1 .w1-ttl:focus-visible { border-bottom-color:var(--w1-muted-soft); color:var(--w1-ink); outline:none; }
.w1 .w1-ttl:hover::after { content:" ✎"; letter-spacing:0; }
.w1 .w1-ttl-in { width:100%; max-width:170px; font:700 11px Inter; letter-spacing:.04em; text-transform:none; padding:3px 6px;
  border:1.5px solid var(--w1-amber); border-radius:7px; background:#fff; color:var(--w1-ink); }
.w1 .w1-cmenu-btn { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; cursor:pointer; color:var(--w1-muted); letter-spacing:0; }
.w1 .w1-cmenu-btn:hover { background:#fff; color:var(--w1-ink); }
.w1 .w1-cmenu { position:absolute; top:100%; right:0; z-index:6; min-width:170px; margin-top:4px; background:#fff; border:1px solid var(--w1-line);
  border-radius:12px; box-shadow:0 14px 34px -12px rgba(23,26,31,.35); overflow:hidden; text-transform:none; letter-spacing:0; font:600 12.5px Inter; color:var(--w1-ink); }
.w1 .w1-cmenu > div { padding:8px 12px; border-top:1px solid var(--w1-line-soft); cursor:pointer; }
.w1 .w1-cmenu > div:first-child { border-top:0; }
.w1 .w1-cmenu > div:hover { background:var(--w1-amber-bg, #fffaf0); }
.w1 .w1-cmenu > div.w1-off { color:#9aa3ad; cursor:default; }
.w1 .w1-cmenu > div.w1-off:hover { background:none; }

/* ---- v0.9 piece 5 (W8, skeleton rev 46 §D) — New job page: one search, then the car, then the work; the card it will make
   on the right. Phone: one column, no preview, Save across the width.
   Tests: test/new-job-page.test.mjs, test/new-job-page-browser.spec.mjs. */
.nj-page { max-width:1080px; }
.nj { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.nj-card-main { background:#fff; border:1px solid var(--w1-line); border-radius:14px; padding:16px 18px; box-shadow:var(--w1-shadow); min-width:0; }
.nj-h { font:600 22px Oswald,sans-serif; margin:0 0 4px; }
.nj-q { font:600 15px Oswald,sans-serif; margin:16px 0 8px; display:flex; align-items:center; gap:8px; }
.nj-q i { width:22px; height:22px; border-radius:50%; background:var(--w1-steel-900); color:#fff; font:700 11px/22px Inter,sans-serif; text-align:center; font-style:normal; flex:none; }
.nj-q.nj-dim { opacity:.45; }
.nj-x { margin-left:auto; border:0; background:none; font:700 12.5px Inter,sans-serif; color:#8a5c00; cursor:pointer; padding:2px 4px; }
.nj-sfloat { position:relative; }
.nj-sbox, .nj-f input, .nj-f select { width:100%; border:1px solid var(--w1-line); border-radius:10px; padding:10px 12px; font:14px Inter,sans-serif; color:var(--w1-ink); background:#fff; }
.nj-sbox:focus, .nj-f input:focus, .nj-f select:focus { outline:2px solid var(--w1-amber); outline-offset:-1px; border-color:var(--w1-amber); }
.nj-sug { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5; background:#fff; border:1px solid var(--w1-line); border-radius:10px; overflow:hidden; box-shadow:0 14px 34px -12px rgba(23,26,31,.35); }
.nj-sug > div { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--w1-line-soft); font-size:13.5px; cursor:pointer; }
.nj-sug > div:first-child { border-top:0; }
.nj-sug > div:hover, .nj-sug > div:focus, .nj-sug > div.nj-hl { background:var(--w1-amber-bg); outline:none; }
.nj-sug small { color:var(--w1-muted); white-space:nowrap; }
.nj-sug .nj-new { font-weight:700; color:#8a5c00; }
.nj-sel { display:flex; align-items:center; gap:10px; border:1px solid var(--w1-amber-line); background:var(--w1-amber-bg); border-radius:10px; padding:10px 12px; font-size:13.5px; }
.nj-sel > span { min-width:0; overflow-wrap:anywhere; }
.nj-vcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.nj-vc { border:1px solid var(--w1-line); border-radius:12px; padding:10px 12px; font-size:12.5px; background:#fff; cursor:pointer; min-height:62px; }
.nj-vc b { display:block; font:600 15px Oswald,sans-serif; }
.nj-vc small { color:var(--w1-muted); font-size:12px; line-height:1.4; display:block; }
.nj-vc.nj-on { border:2px solid var(--w1-amber); background:var(--w1-amber-bg); padding:9px 11px; }
.nj-vc.nj-add { border-style:dashed; display:grid; place-items:center; font-weight:700; color:var(--w1-muted); }
.nj-vc.nj-add.nj-on { border-style:solid; color:var(--w1-ink); }
.nj-vc:hover { border-color:var(--w1-amber-line); }
.nj-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; margin-top:10px; }
.nj-form.nj-c2 { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0; }
.nj-f { display:block; min-width:0; }
.nj-f > span { display:block; font-size:10.5px; font-weight:700; color:var(--w1-muted-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.nj-f.nj-w2 { grid-column:span 2; }
.nj-f.nj-w3 { grid-column:1/-1; }
.nj-dupe { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--w1-amber-bg); border:1px solid var(--w1-amber-line); font-size:13px; }
.nj-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.nj-acts .w1-btn { height:40px; padding:0 18px; font-size:13.5px; cursor:pointer; }
.nj-acts .w1-btn[disabled] { opacity:.6; cursor:progress; }
.nj-prev { position:sticky; top:12px; }
.nj-cap { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--w1-muted-soft); margin:4px 0 8px; }
.nj-prev .nj-card { box-shadow:var(--w1-shadow); }
.nj-prev .nj-card.nj-faded { opacity:.5; }
.nj-lands { font-size:12.5px; color:var(--w1-muted); margin:8px 0 0; }
.w1 .w1-c.w1-lit { box-shadow:0 0 0 3px var(--w1-amber), var(--w1-shadow); animation:w1Lit 1.4s ease-in-out 3; }
@keyframes w1Lit { 50% { box-shadow:0 0 0 6px rgba(240,165,0,.35), var(--w1-shadow); } }
@media (prefers-reduced-motion:reduce) { .w1 .w1-c.w1-lit { animation:none; } }
@media (max-width:760px) {
  .nj { grid-template-columns:1fr; }
  .nj-prev, .nj-cancel { display:none; }
  .nj-form, .nj-form.nj-c2 { grid-template-columns:1fr; }
  .nj-f.nj-w2 { grid-column:auto; }
  .nj-vcards { grid-template-columns:1fr 1fr; }
  .nj-acts .w1-btn.w1-p { width:100%; height:46px; }
  .nj-page { padding-bottom:20px; }   /* Save stays clear of the clock bar at the bottom */
}

/* ---- v0.9 piece 6 (W6, W11, skeleton rev 46 §E, E1, E2) — the customer page opened on a car: the person in one line,
   three cards under the name, the cars, Now | History. Tests: test/car-page.test.mjs, test/car-page-browser.spec.mjs. */
.cp2 { max-width:1200px; }
.cp2 .k { font:700 10.5px Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-muted-soft); }
.cp2-top { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.cp2-who { min-width:0; }
.cp2-who h1 { font:600 30px/1.05 Oswald,sans-serif; margin:0; }
.cp2-who p { margin:3px 0 0; color:var(--w1-muted); font-size:13px; overflow-wrap:anywhere; }
.cp2-acts { margin-left:auto; display:flex; gap:8px; align-items:center; }
.cp2-acts a.w1-btn, .cp2-back { text-decoration:none; color:var(--w1-ink); display:inline-flex; align-items:center; height:36px; cursor:pointer; }
.cp2-mwrap { position:relative; }
.cp2-mwrap > .w1-btn { height:36px; cursor:pointer; }
.cp2-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:8; min-width:200px; background:#fff; border:1px solid var(--w1-line); border-radius:12px; box-shadow:0 14px 34px -12px rgba(23,26,31,.35); padding:4px; }
.cp2-menu > div { padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.cp2-menu > div:hover, .cp2-menu > div:focus { background:var(--w1-line-soft); outline:none; }
.cp2-strip { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:10px; margin:0 0 14px; }
.cp2-strip.cp2-n1 { grid-template-columns:minmax(0,420px); }
.cp2-strip > div { background:#fff; border:1px solid var(--w1-line); border-radius:14px; padding:12px 14px; box-shadow:var(--w1-shadow); display:flex; flex-direction:column; gap:4px; min-width:0; }
.cp2-strip b.big { font:600 26px/1 Oswald,sans-serif; }
.cp2-strip b.big.red { color:var(--w1-red); }
.cp2-strip p { margin:0; font-size:12.5px; color:var(--w1-muted); }
.cp2-strip p.cp2-q { color:var(--w1-ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cp2-strip .w1-btn { align-self:flex-start; margin-top:auto; cursor:pointer; }
.cp2-strip > div.cp2-owe { border-left:3px solid var(--w1-red); }
.cp2-strip > div.cp2-owe0 { border-left:3px solid var(--w1-green); }
.cp2-cars { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.cp2-car { background:#fff; border:1px solid var(--w1-line); border-radius:12px; padding:9px 13px; font-size:12.5px; min-width:200px; cursor:pointer; }
.cp2-car b { display:block; font:600 15px Oswald,sans-serif; }
.cp2-car small { color:var(--w1-muted); font-size:12px; }
.cp2-car .cp2-in { display:inline; font:inherit; font-weight:700; color:var(--w1-green); }
.cp2-car.on { border:2px solid var(--w1-amber); background:var(--w1-amber-bg); padding:8px 12px; }
.cp2-car.add { border-style:dashed; display:grid; place-items:center; font-weight:700; color:var(--w1-muted); min-width:120px; }
.cp2-tabs { display:flex; gap:22px; border-bottom:1px solid var(--w1-line); margin:0 0 14px; align-items:center; }
.cp2-tabs button { border:0; background:none; padding:9px 0; font:700 14px Inter,sans-serif; color:var(--w1-muted-soft); cursor:pointer; }
.cp2-tabs button.on { color:var(--w1-ink); box-shadow:inset 0 -3px 0 var(--w1-amber); }
.cp2-tabs small { font-weight:500; color:var(--w1-muted-soft); }
.cp2-tabs .cp2-share { margin-left:auto; align-self:center; height:34px; padding:0 14px; border:1px solid var(--line,#e2e5ea); border-radius:10px; background:#fff; color:#15171c; font-weight:700; font-size:13px; cursor:pointer; }
.cp2-tabs .cp2-share:hover { background:#f3f4f6; }
.cp2-now { max-width:min(1040px,82%); }
.cp2-card { background:#fff; border:1px solid var(--w1-line); border-radius:14px; padding:14px 18px; box-shadow:var(--w1-shadow); }
.cp2-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.cp2-head h3 { font:600 20px Oswald,sans-serif; margin:0; }
.cp2-head > .w1-btn, .cp2-hacts { margin-left:auto; }
.cp2-hacts { display:flex; gap:6px; }
.cp2-hacts .w1-btn, .cp2-head > .w1-btn { cursor:pointer; }
.cp2-edit { background:var(--w1-steel-900) !important; color:#fff; border-color:var(--w1-steel-900) !important; }
.cp2-stage { font-size:11px; font-weight:700; border-radius:999px; padding:2px 10px; }
.cp2-prog { background:var(--w1-green-bg); color:var(--w1-green); }
.cp2-ready { background:var(--w1-green); color:#fff; }
.cp2-done { background:#e2e7ec; color:var(--w1-muted); }
.cp2-wait { background:var(--w1-amber-bg); color:#8a5c00; border:1px solid var(--w1-amber-line); }
.cp2-miss { background:var(--w1-amber); color:var(--w1-amber-ink); }
.cp2-line { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:10px; padding:9px 0; border-top:1px solid var(--w1-line-soft); font-size:13px; align-items:start; }
.cp2-head + .cp2-line { border-top:0; }
.cp2-line > span:first-child { font-weight:700; color:var(--w1-muted-soft); font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.cp2-line .la { display:flex; gap:8px; align-items:center; justify-content:flex-end; white-space:nowrap; }
.cp2-line .la .w1-btn { cursor:pointer; }
.cp2-all { display:inline-flex; align-items:center; height:30px; padding:0 12px; margin-left:6px; border:1px solid var(--w1-line,#e2e5ea); border-radius:10px; background:#fff; font-weight:700; font-size:12.5px; color:#15171c; cursor:pointer; text-decoration:none; white-space:nowrap; vertical-align:middle; }
.cp2-all:hover { background:#f3f4f6; }   /* 09-oct sanity pass: no text links — real buttons */
.cp2-mut { color:var(--w1-muted); }
.cp2-mk { display:inline-block; font-size:10.5px; font-weight:700; border-radius:6px; padding:1px 6px; background:var(--w1-amber-bg); border:1px solid var(--w1-amber-line); color:#8a5c00; }
.cp2-foot { display:flex; justify-content:flex-end; border-top:1px solid var(--w1-line-soft); padding-top:9px; margin-top:2px; }
.cp2-tsum { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; max-width:min(1040px,82%); }
.cp2-tsum div { background:#fff; border:1px solid var(--w1-line); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--w1-muted); }
.cp2-tsum b { display:block; font:600 19px Oswald,sans-serif; color:var(--w1-ink); }
.cp2-hfl { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; max-width:min(1040px,82%); }
.cp2-seg { display:flex; background:#fff; border:1px solid var(--w1-line); border-radius:10px; padding:3px; }
.cp2-seg button { border:0; background:none; padding:6px 12px; border-radius:8px; font:700 12.5px Inter,sans-serif; cursor:pointer; color:var(--w1-ink); }
.cp2-seg button.on { background:var(--w1-steel-900); color:#fff; }
.cp2-chip { background:#fff; border:1px solid var(--w1-line); border-radius:10px; padding:8px 11px; font:600 12.5px Inter,sans-serif; }
.cp2-only { border:1px solid var(--w1-amber-line); background:var(--w1-amber-bg); border-radius:10px; padding:7px 11px; font:700 12.5px Inter,sans-serif; color:#8a5c00; cursor:pointer; }
.cp2-tl { position:relative; padding-left:18px; max-width:min(1040px,82%); }
.cp2-tl:before { content:""; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--w1-line); }
.cp2-tj { position:relative; border:1px solid var(--w1-line); border-radius:12px; margin-bottom:10px; background:#fff; }
.cp2-tj:before { content:""; position:absolute; left:-17px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--w1-grey); border:2px solid #fff; }
.cp2-tj.cur { border:2px solid var(--w1-amber); }
.cp2-tj.cur:before { background:var(--w1-amber); }
.cp2-tj > header { display:flex; gap:10px; align-items:center; padding:10px 13px; border-bottom:1px solid var(--w1-line-soft); flex-wrap:wrap; }
.cp2-tj.fold > header { border-bottom:0; }
.cp2-tj > header b { font:600 16px Oswald,sans-serif; }
.cp2-tj > header small { color:var(--w1-muted); font-size:12px; }
.cp2-tj > header .r { margin-left:auto; display:flex; gap:10px; align-items:center; font-size:12px; }
.cp2-tj > header .r .w1-btn { cursor:pointer; }
.cp2-tb { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; padding:9px 13px; border-top:1px solid var(--w1-line-soft); font-size:12.5px; }
.cp2-tj > header + .cp2-tb { border-top:0; }
.cp2-tb .w { font-weight:700; }
.cp2-tb .w small { display:block; font-weight:500; color:var(--w1-muted); }
.cp2-ev { display:flex; gap:8px; align-items:flex-start; margin:3px 0; }
.cp2-ev i { font-style:normal; font-size:10px; font-weight:700; border-radius:6px; padding:1px 6px; background:var(--w1-line-soft); color:var(--w1-muted); flex:none; margin-top:1px; }
@media (max-width:900px) {
  .cp2-now, .cp2-tsum, .cp2-hfl, .cp2-tl { max-width:none; }
  .cp2-strip { grid-template-columns:repeat(3,minmax(240px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }
  .cp2-strip > div { scroll-snap-align:start; }
}
@media (max-width:640px) {
  .cp2-top { flex-wrap:wrap; }
  .cp2-acts { margin-left:0; width:100%; }
  .cp2-who h1 { font-size:26px; }
  .cp2-strip { grid-template-columns:repeat(3,82%); }
  .cp2-car { min-width:0; flex:1 1 45%; }
  .cp2-line { grid-template-columns:1fr; gap:4px; }
  .cp2-line .la { justify-content:stretch; flex-wrap:wrap; }
  .cp2-line .la .w1-btn { flex:1; justify-content:center; height:40px; }
  .cp2-tsum { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp2-tb { grid-template-columns:1fr; gap:4px; }
  .cp2-hfl { overflow-x:auto; flex-wrap:nowrap; }
}

/* ---- v0.9 piece 6b (W11, skeleton E3 + Edit job) — the customer page's panels in the right-hand drawer: one form style
   (groups with a heading, big fields, Cancel left / main action right). */
.cp2-panel { display:flex; flex-direction:column; gap:4px; }
.cp2-psub { font-size:13px; color:var(--muted, #48505a); margin:0 0 6px; }
.cp2-fs { border-top:1px solid var(--line, #e3e7ec); padding-top:12px; margin-bottom:6px; }
.cp2-panel > .cp2-fs:first-child, .cp2-psub + .cp2-fs { border-top:0; padding-top:0; }
.cp2-fst { font:700 11px Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.cp2-f { display:block; margin-bottom:12px; }
.cp2-f > span { display:block; font-size:11px; font-weight:700; color:var(--muted, #6c7682); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.cp2-f input, .cp2-f select, .cp2-fs textarea { width:100%; min-height:42px; padding:10px 12px; font:14px Inter,sans-serif; border:1px solid var(--line, #e3e7ec); border-radius:10px; background:#fff; box-sizing:border-box; }
.cp2-fs textarea { min-height:110px; resize:vertical; }
.cp2-fr3 { display:grid; grid-template-columns:.8fr 1fr 1.2fr; gap:10px; }
.cp2-pacts { display:flex; justify-content:space-between; gap:8px; margin-top:8px; }
.cp2-nt { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line, #eef1f4); font-size:14px; }
.cp2-nt i { flex:none; width:32px; height:32px; border-radius:50%; background:#e7ebf0; font:700 11px/32px Inter,sans-serif; text-align:center; font-style:normal; color:#48505a; }
.cp2-nt small { display:block; font-size:11.5px; color:#6c7682; margin-bottom:2px; }
.cp2-kp { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.cp2-kp div { background:#f7f8fa; border-radius:10px; padding:10px 12px; }
.cp2-kp small { display:block; font-size:10.5px; font-weight:700; color:#6c7682; text-transform:uppercase; }
.cp2-kp b { font:600 22px Oswald,sans-serif; }
.cp2-kp .ow b { color:#c0453a; }
.cp2-it { display:grid; grid-template-columns:.8fr 1.5fr .8fr .8fr auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid #eef1f4; font-size:13px; }
.cp2-it.h { font-size:10.5px; font-weight:700; color:#6c7682; text-transform:uppercase; padding-top:0; }
.cp2-it small { display:block; color:#6c7682; font-size:11.5px; }
.cp2-it .num { text-align:right; }
.cp2-it .num.red { color:#c0453a; font-weight:700; }
.cp2-it.p { grid-template-columns:.8fr 2fr .8fr; }
@media (min-width:901px) { .drawer:has(.cp2-panel.wide) { width:min(560px, 100vw); } }
@media (max-width:640px) { .cp2-fr3 { grid-template-columns:1fr 1fr; } .cp2-fr3 > :last-child { grid-column:1/-1; } .cp2-it { grid-template-columns:1fr 1fr; } .cp2-it.h { display:none; } }

/* ---- v0.9 piece 7 (skeleton rev 46 §C2) — Customers: one filter row, a table whose titles sort it, status dots
   (NORMAS_DISENO §13). Tests: test/customers-list.test.mjs, test/customers-list-browser.spec.mjs. */
.w1 .w1-crow { margin:0 0 10px; display:flex !important; justify-content:flex-start; }
.w1 .w1-crow > .w1-flt { flex:none !important; width:auto !important; }
.w1 .w1-cl { background:#fff; border:1px solid var(--w1-line); border-radius:14px; overflow:hidden; box-shadow:var(--w1-shadow); }
.w1 .w1-ctr { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,.9fr) .7fr .7fr; gap:10px; align-items:center; padding:10px 16px; border-top:1px solid var(--w1-line-soft); font-size:13px; cursor:pointer; }
.w1 .w1-ctr.w1-nomoney { grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,.9fr) .7fr; }
.w1 .w1-ctr:first-child { border-top:0; }
.w1 .w1-ctr:not(.w1-h):hover { background:#f8f9fb; }
.w1 .w1-ctr b { font-size:13.5px; }
.w1 .w1-ctr small { display:block; color:var(--w1-muted); font-size:12px; }
.w1 .w1-ctr .num { text-align:right; }
.w1 .w1-ctr .w1-owe { color:var(--w1-red); font-weight:700; }
.w1 .w1-ctr.w1-h { cursor:default; background:#fafbfc; }
.w1 .w1-srt { font-size:10.5px; font-weight:700; color:var(--w1-muted-soft); text-transform:uppercase; letter-spacing:.05em; cursor:pointer; user-select:none; }
.w1 .w1-srt:hover, .w1 .w1-srt.w1-on { color:var(--w1-ink); }
.w1 .w1-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; background:#c3cbd4; }
.w1 .w1-dot.pr { background:#8cc9a2; }
.w1 .w1-dot.rdy { background:#2f7d51; }
.w1 .w1-dot.dlv { background:#c3cbd4; }
.w1 .w1-dot.wt { background:#f3d38a; }
.w1 .w1-dot.ms { background:#f0a500; }
@media (max-width:640px) {
  .w1 .w1-ctr, .w1 .w1-ctr.w1-nomoney { grid-template-columns:minmax(0,1fr) auto; }
  .w1 .w1-ctr > span:nth-child(2), .w1 .w1-ctr > span:last-child { display:none; }
  .w1 .w1-ctr > span:nth-child(3) { grid-column:1 / -1; order:3; font-size:12.5px; }
  .w1 .w1-crow { overflow-x:auto; flex-wrap:nowrap; }
}

/* ---- v0.9 piece 8 (skeleton rev 46 §C3) — Invoices: Ready to invoice first, four facts, one filter row, a sortable
   table; Record payment in the right-hand panel. Tests: test/invoices-desk.test.mjs, test/invoices-desk-browser.spec.mjs. */
.w1 .w1-rti { background:#fff; border:2px solid var(--w1-amber); border-radius:14px; padding:12px 16px; margin-bottom:14px; box-shadow:var(--w1-shadow); }
.w1 .w1-rti h5 { font:600 18px Oswald,sans-serif; margin:0 0 6px; }
.w1 .w1-rrow { display:grid; grid-template-columns:minmax(0,1.6fr) .9fr .7fr .8fr auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--w1-line-soft); font-size:13px; }
.w1 .w1-rrow:first-of-type { border-top:0; }
.w1 .w1-rrow small { display:block; color:var(--w1-muted); font-size:12px; }
.w1 .w1-rrow .num { text-align:right; }
.w1 .w1-rrow .w1-btn { cursor:pointer; height:38px; display:inline-flex; align-items:center; }
.w1 .w1-mk { display:inline-block; font-size:11px; font-weight:700; border-radius:6px; padding:2px 7px; background:var(--w1-line-soft); border:1px solid var(--w1-line); color:var(--w1-muted); }
.w1 .w1-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.w1 .w1-facts > div { background:#fff; border:1px solid var(--w1-line); border-radius:12px; padding:10px 14px; }
.w1 .w1-facts span { display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--w1-muted-soft); }
.w1 .w1-facts b { font:600 22px Oswald,sans-serif; }
.w1 .w1-facts .w1-owe { color:var(--w1-red); }
.w1 .w1-crow select.w1-chip { height:34px; }
.w1 .w1-itr { display:grid; grid-template-columns:.75fr 1.2fr 1.4fr .7fr .8fr 160px; gap:10px; align-items:center; padding:10px 16px; border-top:1px solid var(--w1-line-soft); font-size:13px; cursor:pointer; }
.w1 .w1-itr:first-child { border-top:0; }
.w1 .w1-itr.w1-h { cursor:default; background:#fafbfc; }
.w1 .w1-itr:not(.w1-h):hover { background:#f8f9fb; }
.w1 .w1-itr small { display:block; color:var(--w1-muted); font-size:11.5px; font-weight:500; }
.w1 .w1-itr .num { text-align:right; }
.w1 .w1-itr .w1-owe { color:var(--w1-red); }
.w1 .w1-itr .w1-paid { color:var(--w1-green); }
.w1 .w1-ia { text-align:right; }
.w1 .w1-ia .w1-btn { cursor:pointer; display:inline-flex; align-items:center; height:36px; }
.w1 .w1-ia .w1-off { opacity:.55; cursor:not-allowed; }
.w1 .w1-empty-row { padding:16px; color:var(--w1-muted); font-size:13px; }
.w1-opts { display:flex; flex-wrap:wrap; gap:8px; }
.w1-opt { border:1px solid var(--line, #e3e7ec); border-radius:10px; padding:10px 14px; font:700 13px Inter,sans-serif; background:#fff; cursor:pointer; }
.w1-opt.w1-on { border:2px solid var(--w1-amber, #f0a500); background:#fffaf0; padding:9px 13px; }
.cp2-fr2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:760px) {
  .w1 .w1-rrow { grid-template-columns:minmax(0,1fr) auto; }
  .w1 .w1-rrow > span:nth-child(2), .w1 .w1-rrow > span:nth-child(4) { display:none; }
  .w1 .w1-rrow > .w1-btn { grid-column:1 / -1; justify-content:center; }
  .w1 .w1-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .w1 .w1-itr { grid-template-columns:minmax(0,1fr) auto; }
  .w1 .w1-itr > span:nth-child(3), .w1 .w1-itr > span:nth-child(4) { display:none; }
  .w1 .w1-itr > .w1-ia { grid-column:1 / -1; }
}

/* ---- v0.9 piece 11 (skeleton rev 46 §H, NORMAS_DISENO §13) — Today's Job Board card in the status colours; a car opens
   the customer page on that car; cars with parts pending listed under it. Tests: test/today-board-colours.test.mjs. */
.to-board .to-stage.to-st-wt { background:#fbf1d6; }
.to-board .to-stage.to-st-pr { background:#e4f2e9; }
.to-board .to-stage.to-st-ms { background:#fffaf0; box-shadow:inset 0 0 0 2px #f0a500; }
.to-board .to-stage.to-st-rdy { background:#dcefe2; box-shadow:inset 0 0 0 2px #2f7d51; }
.to-row.to-car { cursor:pointer; border-radius:8px; align-items:center; padding-left:8px; padding-right:8px; margin:0 -8px; transition:background .16s; }
.to-row.to-car:hover { background:#eceff3; }
.to-row.to-car:hover .to-gi { transform:translateX(3px); background:var(--amber,#f0a500); color:#fff; }
.to-row.to-car .to-open { font-weight:700; color:#8a5c00; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.to-board .to-parts { margin-top:8px; border-top:1px solid var(--line, #e3e7ec); padding-top:6px; }

/* 07-oct (v0.9 piece 4b): the shop's own columns — a live "+" for Owner/Manager and the Board layout picker
   (What kind of shop?): one tile per template with its columns as chips; Ready and Delivered shown fixed. */
.w1 .w1-row > .w1-addcol.w1-addcol-on { opacity:1; cursor:pointer; color:var(--w1-ink); border-color:var(--w1-line); transition:border-color .15s ease, background .15s ease; }
.w1 .w1-row > .w1-addcol.w1-addcol-on:hover { border-color:var(--w1-amber); background:var(--w1-amber-bg, #fffaf0); }
.w1 .w1-layout { margin-bottom:12px; padding:14px 16px; }
.w1 .w1-layout .w1-hd { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.w1 .w1-layout .w1-hd h5 { margin:0; font:600 16px Oswald, sans-serif; color:var(--w1-ink); }
.w1 .w1-layout .w1-hd small { font:500 12px Inter, sans-serif; color:var(--w1-muted); margin-left:8px; }
.w1 .w1-layout .w1-hd .w1-btn { margin-left:auto; }
.w1 .w1-lay-note { margin:0 0 10px; padding:8px 10px; border-radius:8px; background:var(--w1-amber-bg, #fffaf0); color:var(--w1-amber-ink, #8a5c00); font-size:12.5px; }
.w1 .w1-lays { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.w1 .w1-lay { display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid var(--w1-line); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.w1 .w1-lay:hover, .w1 .w1-lay:focus-visible { border-color:var(--w1-amber); box-shadow:0 2px 8px rgba(25,29,35,.08); outline:none; }
.w1 .w1-lay b { font:600 14px Oswald, sans-serif; color:var(--w1-ink); }
.w1 .w1-lay-cols { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.w1 .w1-lay-cols i { font-style:normal; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; background:var(--w1-line-soft); color:var(--w1-ink); }
.w1 .w1-lay-cols i.w1-lay-fx { background:transparent; border:1px dashed var(--w1-line); color:var(--w1-muted); }
@media (prefers-reduced-motion: reduce) { .w1 .w1-lay, .w1 .w1-row > .w1-addcol.w1-addcol-on { transition:none; } }

/* 07-oct (Mathew): Board | Customers read as two views — larger, each with its icon; the search gives them room.
   The bar is the same in both views. */
.w1 .w1-bar > .w1-seg.w1-views { flex:none; }
.w1 .w1-bar > .w1-seg.w1-views span { gap:8px; min-width:132px; justify-content:center; font-size:14px; padding:0 18px; color:var(--w1-ink); transition:background .15s ease, color .15s ease; }
.w1 .w1-bar > .w1-seg.w1-views span:not(.w1-on):hover { background:#f2f4f7; }
.w1 .w1-bar > .w1-seg.w1-views span.w1-on { background:var(--osz-sel-bg); color:var(--osz-sel-ink); box-shadow:inset 0 0 0 1px var(--osz-sel-edge); }
.w1 .w1-bar > .w1-seg.w1-views svg { flex:none; }
@media (min-width:901px) { .w1 .w1-bar.w1-fixed > .w1-sbox { flex:1 1 auto; } .w1 .w1-bar > .w1-seg.w1-views span { min-width:150px; } }
/* Customers: the filters are one segmented strip (like History on the car page), + New customer at its right end */
.w1 .w1-crowbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.w1 .w1-crowbar > .w1-btn.w1-big { margin-left:auto; height:40px; min-height:0; padding:0 18px; display:inline-flex; align-items:center; box-sizing:border-box; }
.w1 .w1-crow.w1-segrow { height:40px; box-sizing:border-box; align-items:stretch; display:inline-flex; flex:0 1 auto; flex-wrap:nowrap; gap:0; padding:3px; background:#fff; border:1px solid var(--w1-line); border-radius:10px; overflow-x:auto; }
.w1 .w1-crow.w1-segrow > .w1-flt { border:0; border-radius:8px; background:none; box-shadow:none; padding:7px 14px; font:700 12.5px Inter, sans-serif; white-space:nowrap; animation:none; transform:none; }
.w1 .w1-crow.w1-segrow > .w1-flt:hover { background:#f2f4f7; transform:none; box-shadow:none; }
.w1 .w1-crow.w1-segrow > .w1-flt.w1-on {background:var(--osz-sel-bg);color:var(--osz-sel-ink);box-shadow:inset 0 0 0 1px var(--osz-sel-edge)}
@media (max-width:640px) { .w1 .w1-crowbar > .w1-btn.w1-big { flex:1 1 100%; } .w1 .w1-crow.w1-segrow { flex:1 1 100%; } }

/* 07-oct (v0.9 §6 C): Ready to invoice — Time & charges next to Create invoice; the car page's Estimate line states. */
.w1 .w1-rrow .w1-racts { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.cp2-est { font-weight:600; }
.cp2-est-sent { color:var(--w1-amber-ink, #8a5c00); }
.cp2-est-approved { color:var(--w1-green, #2f7d51); }
.cp2-est-declined { color:var(--w1-red, #b42318); }
.cp2-est-draft { color:var(--w1-muted); }

/* 07-oct (Mathew): Customers — Waitlist, ⋯ (archived customers, archived vehicles, import) and + New customer together at the
   right of the filter strip; nothing but list filters in the strip. */
.w1 .w1-crowbar > .w1-cacts { margin-left:auto; display:flex; gap:8px; align-items:center; }
.w1 .w1-crowbar .w1-cacts > .w1-btn, .w1 .w1-cmore > .w1-btn { height:40px; min-height:0; padding:0 16px; display:inline-flex; align-items:center; box-sizing:border-box; }
.w1 .w1-crowbar > .w1-btn.w1-big { margin-left:0; }
.w1 .w1-cwait.w1-on, .w1 .w1-cmore-btn.w1-on { background:var(--w1-steel-900); color:#fff; border-color:var(--w1-steel-900); }
.w1 .w1-cmore { position:relative; }
.w1 .w1-cmore-btn { width:44px; justify-content:center; padding:0 !important; font-size:18px; }
.w1 .w1-cmore-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:220px; }
@media (max-width:640px) { .w1 .w1-crowbar > .w1-cacts { flex:1 1 100%; } .w1 .w1-crowbar > .w1-cacts > .w1-btn.w1-p { flex:1; justify-content:center; } }

/* 07-oct (Mathew): "+" before Ready — a thin strip that opens to "+ Add column" under the pointer; the end-of-week note. */
.w1 .w1-row > .w1-addcol.w1-addcol-on { flex:0 0 14px; min-width:14px; padding-top:12px; overflow:hidden; white-space:nowrap; opacity:.55; border-style:dashed;
  transition:flex-basis .2s cubic-bezier(.2,.8,.2,1), min-width .2s cubic-bezier(.2,.8,.2,1), opacity .15s ease, background .15s ease, border-color .15s ease; }
.w1 .w1-row > .w1-addcol.w1-addcol-on b { font-size:15px; }
.w1 .w1-row > .w1-addcol.w1-addcol-on span { font:700 12.5px Inter, sans-serif; opacity:0; max-height:0; transition:opacity .12s ease; }
.w1 .w1-row > .w1-addcol.w1-addcol-on:hover, .w1 .w1-row > .w1-addcol.w1-addcol-on:focus-visible { flex-basis:120px; min-width:120px; opacity:1; outline:none; }
.w1 .w1-row > .w1-addcol.w1-addcol-on:hover span, .w1 .w1-row > .w1-addcol.w1-addcol-on:focus-visible span { opacity:1; max-height:none; transition-delay:.08s; }
.w1 .w1-weekend { margin:-2px 2px 8px; padding:6px 9px; border-radius:8px; background:#fff; border:1px dashed #c9ced4; font:600 11.5px Inter, sans-serif; color:var(--w1-muted); }

/* 07-oct (Mathew): Delivered history — its own scroll box (the page never grows without end), sticky column titles that
   sort, each week a block with a clear title and its count. */
.w1 .w1-dh-open .w1-dh-list { max-height:min(calc(62vh / var(--z, 1)), 640px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.w1 .w1-dh-row.w1-dh-th { position:sticky; top:0; z-index:2; background:#fff; box-shadow:0 1px 0 var(--w1-line); }
.w1 .w1-dh-srt { cursor:pointer; user-select:none; }
.w1 .w1-dh-srt:hover, .w1 .w1-dh-srt.w1-on { color:var(--w1-ink); }
.w1 .w1-dh-row.w1-dh-th > .w1-dh-srt:last-child { text-align:right; }
.w1 .w1-dh-week { margin:10px 12px; border:1px solid var(--w1-line); border-radius:12px; overflow:hidden; background:#fff; }
.w1 .w1-dh-week .w1-dh-wk { display:flex; align-items:baseline; gap:6px; padding:10px 14px; border-top:0; background:#f7f8fa; font:500 12px Inter, sans-serif; color:var(--w1-muted); }
.w1 .w1-dh-week .w1-dh-wk b { font:600 14px Oswald, sans-serif; color:var(--w1-ink); }
.w1 .w1-dh-week .w1-dh-wk small { margin-left:auto; font:700 11.5px Inter, sans-serif; color:var(--w1-ink); background:#fff; border:1px solid var(--w1-line); border-radius:999px; padding:2px 9px; }
.w1 .w1-dh-week .w1-dh-row { padding:9px 14px; }

/* 07-oct (Mathew): the demo's invitation to play with the board — one quiet line above it, closable. */
.w1 .w1-demohint { display:flex; align-items:flex-start; gap:10px; margin:0 0 10px; padding:10px 12px; border-radius:12px; background:var(--w1-amber-bg, #fff7e0); border:1px solid #f1d38c; }
.w1 .w1-demohint p { margin:0; font:500 12.5px/1.45 Inter, sans-serif; color:var(--w1-ink); }
.w1 .w1-demohint-ic { color:var(--w1-amber, #f0a500); font-size:14px; line-height:1.3; }
.w1 .w1-demohint-x { margin-left:auto; cursor:pointer; font-size:18px; line-height:1; color:var(--w1-muted); padding:0 4px; }
.w1 .w1-demohint-x:hover { color:var(--w1-ink); }

/* 07-oct (v0.9 §6 C, Mathew): the inside of the panels that came out of the old Job info drawer — same style as Edit job and
   the car page's panels (NORMAS_DISENO): white blocks with a thin line, small uppercase labels, numbers in the app's font,
   neutral buttons; amber only for the main action of a block, red only for what undoes or removes. Technicians' full view
   (.job-panel-all) keeps its look until their screens are reworked. */
#drawerBody .job-panel:not(.job-panel-all) { display:flex; flex-direction:column; gap:12px; }
#drawerBody .job-panel:not(.job-panel-all) .sub-card, #drawerBody .job-panel:not(.job-panel-all) .job-billing-box,
#drawerBody .job-panel:not(.job-panel-all) .job-identity-card > .sub-card { background:#fff; border:1px solid var(--w1-line, #e3e6ea); border-radius:12px; box-shadow:none; margin:0; overflow:hidden; }
#drawerBody .job-panel:not(.job-panel-all) .sub-card > .h { padding:12px 16px; font:700 10.5px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-muted, #5d6672); border-bottom:1px solid var(--w1-line-soft, #eef0f3); background:#fff; }
#drawerBody .job-panel:not(.job-panel-all) .sub-card > .h svg { width:13px; height:13px; opacity:.7; }
#drawerBody .job-panel:not(.job-panel-all) .sub-card > .b { padding:14px 16px; }
#drawerBody .job-panel:not(.job-panel-all) .mono, #drawerBody .job-panel:not(.job-panel-all) [class*="mono"] { font-family:Inter, system-ui, sans-serif !important; font-variant-numeric:tabular-nums; letter-spacing:0; }
#drawerBody .job-panel:not(.job-panel-all) .line { padding:9px 0; border-bottom:1px solid var(--w1-line-soft, #eef0f3); font-size:13.5px; }
#drawerBody .job-panel:not(.job-panel-all) .line:last-child { border-bottom:0; }
#drawerBody .job-panel:not(.job-panel-all) .t-mut { color:var(--w1-muted, #5d6672); }
/* buttons: neutral by default */
#drawerBody .job-panel:not(.job-panel-all) .btn { background:#fff; color:var(--w1-ink, #1f242b); border:1px solid var(--w1-line, #d9dde3); border-radius:9px; box-shadow:none;
  min-height:36px; padding:0 14px; font:700 13px Inter, sans-serif; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .15s ease, border-color .15s ease; }
#drawerBody .job-panel:not(.job-panel-all) .btn:hover { background:#f2f4f7; }
#drawerBody .job-panel:not(.job-panel-all) .btn.sm { min-height:32px; padding:0 12px; font-size:12.5px; }
/* the main action of a block: amber */
#drawerBody .job-panel:not(.job-panel-all) .btn.primary, #drawerBody .job-panel:not(.job-panel-all) .btn.green { background:var(--amber, #f0a500); border-color:var(--amber, #f0a500); color:#1f242b; }
#drawerBody .job-panel:not(.job-panel-all) .btn.primary:hover, #drawerBody .job-panel:not(.job-panel-all) .btn.green:hover { filter:brightness(.96); }
#drawerBody .job-panel:not(.job-panel-all) .btn[disabled] { opacity:.45; filter:none; }
/* what undoes or removes: red on white */
#drawerBody .job-panel:not(.job-panel-all) .btn.danger, #drawerBody .job-panel:not(.job-panel-all) .btn.red { background:#fff; color:var(--w1-red, #b42318); border-color:#f1c4bf; }
#drawerBody .job-panel:not(.job-panel-all) .btn.danger:hover, #drawerBody .job-panel:not(.job-panel-all) .btn.red:hover { background:#fdf1f0; }
/* the other coloured ones become neutral: preview, history, email */
#drawerBody .job-panel:not(.job-panel-all) .btn.orange, #drawerBody .job-panel:not(.job-panel-all) .btn.dark,
#drawerBody .job-panel:not(.job-panel-all) .job-invoice-history.green { background:#fff; color:var(--w1-ink, #1f242b); border-color:var(--w1-line, #d9dde3); }
/* Estimate: Approve is the main action, Decline red on white */
#drawerBody .job-panel-estimate .job-estimate-actions, #drawerBody .job-panel-estimate .sub-card .b > div:has(> .btn) { display:flex; flex-wrap:wrap; gap:8px; }
/* Invoice: the toolbar wraps evenly; the balance reads big in the app's font */
#drawerBody .job-panel-billing .job-billing-buttons { display:flex; flex-wrap:wrap; gap:8px; }
#drawerBody .job-panel-billing .job-billing-buttons .btn { flex:1 1 140px; }
#drawerBody .job-panel-billing .job-billing-state { font:700 15px Inter, sans-serif; }
/* Time & charges: entries as quiet rows */
#drawerBody .job-panel-charges .job-punch-entry { border:1px solid var(--w1-line-soft, #eef0f3); border-radius:10px; box-shadow:none; background:#fafbfc; }

/* 07-oct (v0.9 §6 C): the old drawer's blocks inside the car page — Photos & inspection under the job, the time entries in
   History (Time), and the job's own settings in Edit job. Same quiet look as the rest of the page. */
.cp2 .cp2-photos { margin-top:12px; padding:0; overflow:hidden; }
.cp2 .cp2-photos .sub-card { border:0; box-shadow:none; margin:0; background:#fff; }
.cp2 .cp2-photos .sub-card > .h { padding:12px 18px; font:700 10.5px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-muted); border-bottom:1px solid var(--w1-line-soft); }
.cp2 .cp2-photos .sub-card > .b { padding:14px 18px; }
.cp2 .cp2-photos .btn { background:#fff; color:var(--w1-ink); border:1px solid var(--w1-line); border-radius:9px; box-shadow:none; font:700 13px Inter, sans-serif; min-height:36px; }
.cp2 .cp2-ledger { margin:6px 0 4px; padding:10px 14px; border-top:1px dashed var(--w1-line); }
.cp2 .cp2-ledger .btn { background:#fff; color:var(--w1-ink); border:1px solid var(--w1-line); border-radius:9px; box-shadow:none; font:700 12.5px Inter, sans-serif; min-height:32px; }
.cp2 .cp2-ledger .btn.primary { background:var(--amber, #f0a500); border-color:var(--amber, #f0a500); color:#1f242b; }
.cp2 .cp2-ledger .job-punch-entry { border:1px solid var(--w1-line-soft); border-radius:10px; background:#fafbfc; box-shadow:none; }
.cp2 .cp2-ledger [class*="mono"], .cp2 .cp2-photos [class*="mono"] { font-family:Inter, system-ui, sans-serif !important; font-variant-numeric:tabular-nums; }
.cp2-panel .cp2-facts { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.cp2-panel .cp2-facts .btn { flex:1 1 140px; }
.cp2-panel .cp2-danger { color:var(--w1-red, #b42318) !important; border-color:#f1c4bf !important; background:#fff !important; }
.cp2-panel .cp2-color { padding:4px 0; }
.cp2-panel .cp2-color input[type="color"] { width:44px !important; height:32px !important; min-height:0 !important; padding:2px !important; border:1px solid var(--w1-line) !important; border-radius:8px !important; background:#fff !important; cursor:pointer; }
.cp2-panel .cp2-facts .btn { background:#fff !important; border:1px solid var(--w1-line) !important; color:var(--w1-ink); border-radius:9px; min-height:38px; font:700 13px Inter, sans-serif; }

/* 07-oct (v0.9 §6 C): the former customer record's blocks on the customer page — flags under the name, files with the notes,
   pricing plan / parts history / parts bank in Invoices & payments, archiving in the ⋯ (red, as what removes). */
.cp2 .cp2-flags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cp2 .cp2-flag { font:700 11px Inter, sans-serif; padding:3px 9px; border-radius:999px; background:var(--w1-amber-bg, #fff7e0); color:var(--w1-amber-ink, #8a5c00); border:1px solid #f1d38c; }
.cp2 .cp2-flag.r { background:#fdf1f0; color:var(--w1-red, #b42318); border-color:#f1c4bf; }
.cp2-menu .cp2-danger-i { color:var(--w1-red, #b42318); }
.cp2-more { padding-top:0; }
.cp2-more .cp2-search { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--w1-line); border-radius:10px; font:500 13px Inter, sans-serif; margin:0 0 10px; background:#fff; }
.cp2-more .sub-card, #drawerBody .sub-card:has(#customerFiles_) { background:#fff; border:1px solid var(--w1-line); border-radius:12px; box-shadow:none; margin:0; }
.cp2-more .sub-card > .h { padding:12px 14px; font:700 10.5px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-muted); border-bottom:1px solid var(--w1-line-soft); }
.cp2-more .btn, #drawerBody .sub-card .btn.dark { background:#fff; color:var(--w1-ink); border:1px solid var(--w1-line); border-radius:9px; box-shadow:none; font:700 12.5px Inter, sans-serif; }
.cp2-more [class*="mono"] { font-family:Inter, system-ui, sans-serif !important; font-variant-numeric:tabular-nums; }
.cp2-more #custPartsList { overflow-x:auto; border:1px solid var(--w1-line); border-radius:12px; background:#fff; }
.cp2-more #custPartsList table { min-width:620px; font-size:12.5px; }
.cp2-more #custPartsList th { font:700 10.5px Inter, sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--w1-muted); white-space:nowrap; }
.cp2-more #custPartsList td { white-space:nowrap; }
#drawerBody .cp2-panel + .sub-card { background:#fff; border:1px solid var(--w1-line); border-radius:12px; box-shadow:none; margin-top:12px; }
#drawerBody .cp2-panel + .sub-card > .h { font:700 10.5px Inter, sans-serif !important; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-muted); padding:12px 14px; }
#drawerBody .cp2-panel + .sub-card > .h span { text-transform:none; letter-spacing:0; font:500 11.5px Inter, sans-serif !important; }
#drawerBody .cp2-panel + .sub-card .btn { background:#fff; color:var(--w1-ink); border:1px solid var(--w1-line); border-radius:9px; font:700 12.5px Inter, sans-serif; text-transform:none; letter-spacing:0; }
/* 08-oct: an empty stage on Today is neutral — no colour for zero. */
.to-board .to-stage.z { background:#f7f8fa; box-shadow:none; border-color:var(--line, #e3e7ec); color:var(--muted, #48505a); }
.to-board .to-stage.z b { color:var(--muted, #48505a); }
/* 08-oct (Mathew, after the 07-oct meeting): Work — a settings wheel per column, "+ Add column" always visible at the
   end, Waitlist beside Board | Customers, Delivered history reacting as a whole bar. */
.w1 .w1-cgear{width:30px;height:30px;border-radius:9px;color:var(--w1-ink);background:#fff;border:1px solid var(--w1-line);transition:background .15s,transform .2s,border-color .15s}
.w1 .w1-cgear:hover,.w1 .w1-cgear:focus-visible{background:#eceff3;border-color:#c3cbd4;outline:none}.w1 .w1-cgear:hover svg{transform:rotate(45deg)}.w1 .w1-cgear svg{transition:transform .3s}
.w1 .w1-dh-h{border-radius:12px;transition:background .15s,transform .12s}
.w1 .w1-dh-h:hover,.w1 .w1-dh-h:focus-visible{background:#eceff3;outline:none}
.w1 .w1-dh-h:active{transform:scale(.995)}
.w1 .w1-segn{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--w1-amber);color:#fff;font:700 11.5px Inter,sans-serif}
.w1 .w1-bar > .w1-seg.w1-views span{min-width:124px}
@media (min-width:901px){.w1 .w1-bar > .w1-seg.w1-views span{min-width:128px}}
/* 08-oct (Mathew, after the 07-oct meeting): New job asks first — Existing customer / New customer — as two big
   buttons; the work is a big box (several lines). */
.nj-who { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:4px; }
.nj-wb { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:96px; padding:16px 18px; border:1.5px solid var(--w1-line); border-radius:14px; background:#fff; font:inherit; color:var(--w1-ink); text-align:left; cursor:pointer; transition:border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.nj-wb b { font:600 20px Oswald,sans-serif; }
.nj-wb small { color:var(--w1-muted); font-size:13px; }
.nj-wb:hover, .nj-wb:focus-visible { border-color:var(--w1-amber); background:var(--w1-amber-bg,#fffaf0); transform:translateY(-2px); box-shadow:0 12px 24px -16px rgba(25,29,35,.5); outline:none; }
.nj-wb:active { transform:scale(.99); }
.nj-f textarea, .cp2-f textarea, #cpEjTitle { width:100%; min-height:104px; resize:vertical; border:1px solid var(--w1-line); border-radius:10px; padding:10px 12px; font:14px/1.45 Inter,sans-serif; color:var(--w1-ink); background:#fff; }
.nj-f textarea:focus, #cpEjTitle:focus { outline:2px solid var(--w1-amber); outline-offset:-1px; border-color:var(--w1-amber); }
@media (max-width:640px) { .nj-who { grid-template-columns:1fr; } }
/* 08-oct (Mathew, later): one-line column header — title with … (full name on hover), count, small wheel — so many or
   narrow columns never break it. "+ Add column" back before Ready (where the new column lands): thin, plain, + visible. */
.w1 .w1-col > h4{display:flex;align-items:center;gap:6px;white-space:nowrap;min-height:0}
.w1 .w1-row > .w1-col > h4{min-height:0;align-items:center}
.w1 .w1-col > h4 .w1-ttl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w1 .w1-col > h4 .w1-ttl:hover::after{content:none}
.w1 .w1-col > h4 .w1-hr{flex:none}
.w1 .w1-cgear{width:24px;height:24px;border-radius:7px;border:0;background:transparent;color:var(--w1-muted)}
.w1 .w1-cgear svg{width:15px;height:15px}
.w1 .w1-cgear:hover,.w1 .w1-cgear:focus-visible{background:#fff;color:var(--w1-ink)}
.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid{flex:0 0 22px;min-width:22px;opacity:1;padding:10px 0 0;justify-items:center;border:1.5px dashed #c3cbd4;border-radius:10px;background:none;color:var(--w1-muted);overflow:hidden;white-space:nowrap;transition:flex-basis .18s ease,min-width .18s ease,border-color .15s,background .15s}
.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid b{opacity:1;font:700 16px Inter,sans-serif;color:var(--w1-ink)}
.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid span{display:none}
.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid:hover,.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid:focus-visible{flex-basis:96px;min-width:96px;border-color:#9aa3ad;background:#fff;outline:none}
.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid:hover span,.w1 .w1-row > .w1-addcol.w1-addcol-on.w1-addcol-mid:focus-visible span{display:block;font:700 12px Inter,sans-serif}
@media (min-width:901px){.w1 .w1-row > .w1-col:not(:has(.w1-c)){min-width:128px !important}}   /* 08-oct: room for the title's start, count and wheel */
/* 08-oct (Mathew): "Back" is a real button that is easy to see (Joe doesn't like a small "‹ Back" text). */
.nj-q .nj-back { margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 16px; border:1.5px solid var(--w1-line); border-radius:10px; background:#fff; font:700 13px Inter,sans-serif; color:var(--w1-ink); cursor:pointer; transition:background .15s,border-color .15s,transform .12s; }
.nj-q .nj-back:hover, .nj-q .nj-back:focus-visible { background:#eceff3; border-color:#c3cbd4; outline:none; }
.nj-q .nj-back:active { transform:scale(.97); }
/* 08-oct (Mathew, later): New job uses the width — a wider form, a bigger card preview; Back is bigger. */
.nj-page{max-width:1320px}
.nj{grid-template-columns:minmax(0,1fr) 380px;gap:20px}
.nj-card-main{padding:20px 24px}
.nj-prev .nj-card{padding:14px 16px;font-size:14px}
.nj-prev .nj-card b{font-size:16px}
.nj-q .nj-back{min-height:42px;padding:9px 22px;font:700 14px Inter,sans-serif;border-radius:11px}
@media (max-width:1100px){.nj{grid-template-columns:minmax(0,1fr) 300px}}
/* 08-oct (Mathew): "Change" and "+ New customer" are real buttons too (no text links on New job). */
.nj-sel .nj-back{min-height:38px;padding:7px 18px;border:1.5px solid var(--w1-line);border-radius:10px;background:#fff;font:700 13.5px Inter,sans-serif;color:var(--w1-ink);cursor:pointer}
.nj-sel .nj-back:hover{background:#eceff3}
.nj-sug .nj-new{display:flex;align-items:center;justify-content:center;margin:8px;min-height:44px;padding:10px 16px;border:1.5px solid var(--w1-line);border-radius:11px;background:#fff;font:700 14px Inter,sans-serif;color:var(--w1-ink);cursor:pointer;transition:background .15s,border-color .15s}
.nj-sug .nj-new:hover,.nj-sug .nj-new.nj-hl{background:var(--w1-amber-bg,#fffaf0);border-color:var(--w1-amber)}
/* 08-oct night (Mathew): Invoices — All · Owed · Paid strip, then a greyer chip search filling the row, then the month. */
.w1 .w1-ivbar { flex-wrap:nowrap; }
.w1 .w1-ivbar > .w1-toks { flex:1 1 auto; min-width:240px; height:40px; box-sizing:border-box; padding:0 10px; background:#f2f4f7; border-color:#e3e7ec; flex-wrap:nowrap; overflow-x:auto; gap:6px; }
.w1 .w1-ivbar > .w1-toks:focus-within { background:#fff; border-color:var(--w1-amber); }
.w1 .w1-ivbar > select.w1-chip { height:40px; border-radius:10px; flex:none; }
.w1 .w1-tok { flex:none; display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 10px; border-radius:999px; background:#fff; border:1px solid var(--w1-line); font:700 12px Inter, sans-serif; color:var(--w1-ink); white-space:nowrap; }
.w1 .w1-tok button { border:0; background:none; width:20px; height:20px; border-radius:50%; font:700 14px/1 Inter, sans-serif; color:var(--w1-muted); cursor:pointer; }
.w1 .w1-tok button:hover { background:#e9ecf0; color:var(--w1-ink); }
.w1 .w1-ivbar > .w1-toks input { min-width:140px; }
@media (max-width:900px) { .w1 .w1-ivbar { flex-wrap:wrap; } .w1 .w1-ivbar > .w1-toks { flex:1 1 100%; order:2; } }
/* 08-oct night (Mathew): Delivered is done work — a narrow column (about an empty one) showing only its count;
   hovering it (or tabbing into it) opens it to full width to look. */
@media (min-width:641px) {
  .w1 .w1-row > .w1-col.w1-dl { flex:0 0 120px !important; min-width:120px !important; transition:flex-basis .2s ease, min-width .2s ease, margin-left .2s ease; }
  .w1 .w1-row > .w1-col.w1-dl > h4 { white-space:normal; line-height:1.25; }
  .w1 .w1-row > .w1-col.w1-dl > h4 > span:first-child { overflow:visible; text-overflow:clip; white-space:normal; }
  .w1 .w1-row > .w1-col.w1-dl:not(:hover):not(:focus-within) > :not(h4) { display:none; }
  .w1 .w1-row > .w1-col.w1-dl:not(:hover):not(:focus-within)::after { content:"Hover to see"; margin:6px 4px; font:600 11px Inter, sans-serif; color:var(--w1-muted-soft); }
  .w1 .w1-row > .w1-col.w1-dl .w1-more-n { display:none; }
  /* opens leftwards over Ready: the other columns never move */
  .w1 .w1-row > .w1-col.w1-dl:hover, .w1 .w1-row > .w1-col.w1-dl:focus-within { flex:0 0 300px !important; min-width:300px !important; margin-left:-180px; z-index:6; box-shadow:-12px 0 28px -14px rgba(25,29,35,.35); }
}
.w1 .w1-tools.w1-ivtools { justify-content:flex-end; margin:0 0 12px; }
.w1 .w1-tools.w1-ivtools > * { flex:none !important; height:40px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 18px; font-size:13.5px; }
/* 08-oct night (Mathew, Luis liked the pastels, not the borders): Today › Job Board tiles keep their pastel and lose every border. */
.to-board .to-stage, .to-board .to-stage.to-st-ms, .to-board .to-stage.to-st-rdy { border-color:transparent; box-shadow:none; }
.to-board .to-stage.to-st-ms { background:#fbe6bf; }
/* Suggestions under the invoice search (customers, cars, invoice #); hidden when the search is not in use. */
.w1 .w1-ivbar > .w1-toks { position:relative; overflow:visible; }
.w1 .w1-sug { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; display:flex; flex-direction:column; padding:6px; background:#fff; border:1px solid var(--w1-line); border-radius:12px; box-shadow:0 16px 40px -18px rgba(25,29,35,.35); max-height:320px; overflow-y:auto; }
.w1 .w1-toks:not(:focus-within) .w1-sug { display:none; }
.w1 .w1-sug-h { padding:6px 10px 2px; font:700 10.5px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-muted-soft); }
.w1 .w1-sug button { text-align:left; border:0; background:none; padding:8px 10px; border-radius:8px; font:600 13.5px Inter, sans-serif; color:var(--w1-ink); cursor:pointer; }
.w1 .w1-sug button:hover, .w1 .w1-sug button:focus-visible { background:#f2f4f7; }
.w1 .w1-ivbar { position:relative; z-index:25; }
/* 08-oct night (Mathew): "+ Add column" at the LEFT; columns dragged by their title. */
.w1 .w1-row > .w1-addcol { order:-1; }
.w1 .w1-col > h4[data-colgrab] { cursor:grab; }
.w1 .w1-col > h4[data-colgrab]:active { cursor:grabbing; }
.w1 .w1-col.w1-colover { outline:2px dashed var(--w1-amber); outline-offset:-2px; }
/* 12-oct (Mathew): a notch on top of a movable column; while it is dragged the whole column travels with the pointer and its place stays as a dashed slot */
.w1 .w1-col:has(> h4[data-colgrab]) { position:relative; }
.w1 .w1-cnotch { position:absolute; top:-10px; left:50%; width:34px; height:4px; margin-left:-17px; border-radius:2px; background:#c9cfd6; transition:background .15s ease, width .15s ease; }
.w1 .w1-col > h4[data-colgrab]:hover .w1-cnotch { background:var(--w1-amber); width:44px; margin-left:-22px; }
.w1 .w1-col > h4[data-colgrab] { cursor:grab; touch-action:none; user-select:none; }
body.w1-dragging, body.w1-dragging * { cursor:grabbing !important; }
.w1 .w1-col.w1-colslot { background:transparent !important; outline:2px dashed #b9c1ca; outline-offset:-2px; box-shadow:none !important; }
.w1 .w1-col.w1-colslot > * { visibility:hidden; }
.w1 .w1-col.w1-colghost { position:fixed !important; z-index:1000; margin:0; overflow:hidden; opacity:1; pointer-events:none; transform:rotate(1.2deg) scale(1.02); box-shadow:0 22px 48px -14px rgba(25,29,35,.5); }
.w1 .w1-col.w1-colghost.w1-drop { transform:none; box-shadow:0 6px 14px -8px rgba(25,29,35,.3); }
@media (min-width:641px) {
  /* an empty Delivered stays as narrow as a full one (the older "empty column keeps its title on one line" rule made it 150 px) */
  .w1 .w1-row > .w1-col.w1-dl:not(:has(.w1-c)) { flex:0 0 120px !important; min-width:120px !important; }
  .w1 .w1-row > .w1-col.w1-dl:not(:has(.w1-c)):hover, .w1 .w1-row > .w1-col.w1-dl:not(:has(.w1-c)):focus-within { flex:0 0 300px !important; min-width:300px !important; }
}
/* 09-oct (meeting 08-oct): the card just saved carries a "New" tag while it is lit */
.w1 .w1-c .w1-new{float:right;margin:0 0 4px 6px;font:800 10px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#3a2c05;background:var(--w1-amber);border-radius:999px;padding:2px 8px}
/* 09-oct: Work › Waitlist (OsEzyWaitlistPage) — the list first, rows like People/Invoices, the New job form, the calendar */
.wl .wl-bar { display:flex; gap:10px; align-items:center; margin:0 0 12px; flex-wrap:wrap; }
.wl .wl-search { flex:1 1 280px; height:40px; box-sizing:border-box; padding:0 12px; background:#f2f4f7; border-color:#e3e7ec; }
.wl .wl-search:focus-within { background:#fff; border-color:var(--w1-amber); }
.wl .wl-add { height:40px; padding:0 18px; display:inline-flex; align-items:center; font-size:13.5px; margin-left:auto; }
.wl .wl-sec { background:#fff; border:1px solid var(--w1-line); border-radius:12px; margin:0 0 12px; overflow:hidden; }
.wl .wl-sec h5 { margin:0; padding:10px 14px; font:700 11px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--w1-ink); display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--w1-line); }
.wl .wl-sec h5 span { font-weight:600; color:var(--w1-muted-soft); text-transform:none; letter-spacing:0; }
.wl .wl-sec h5 b { margin-left:auto; background:#eef1f4; border-radius:999px; padding:1px 8px; }
.wl .wl-row { display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(130px,1fr) minmax(160px,1.6fr) 120px 72px auto; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid #eef1f4; border-left:4px solid transparent; font-size:13px; }
.wl .wl-row:first-of-type { border-top:0; }
.wl .wl-row.wl-high { border-left-color:var(--w1-red); }
.wl .wl-row[role="button"] { cursor:pointer; } .wl .wl-row[role="button"]:hover { background:#f6f7f9; }
.wl .wl-who b { display:block; } .wl .wl-who small, .wl .wl-when small { display:block; color:var(--w1-muted-soft); font-size:11.5px; }
.wl .wl-cars { display:flex; gap:4px; flex-wrap:wrap; } .wl .wl-car { background:#f2f4f7; border-radius:6px; padding:2px 7px; font-size:12px; } .wl .wl-nocar { color:var(--w1-muted-soft); font-style:italic; }
.wl .wl-want { color:var(--w1-muted); } .wl .wl-when b { font-weight:700; } .wl .wl-late { color:var(--w1-red) !important; }
.wl .wl-pr { display:inline-block; font:700 11px Inter, sans-serif; border-radius:999px; padding:3px 9px; }
.wl .wl-high { } .wl .wl-pr.wl-high { background:#fbeceb; color:var(--w1-red); } .wl .wl-pr.wl-normal { background:#fff6e0; color:#8a5c00; } .wl .wl-pr.wl-low { background:#eef1f4; color:var(--w1-muted); }
.wl .wl-acts { display:flex; gap:6px; justify-content:flex-end; } .wl .wl-acts .w1-btn { height:34px; padding:0 12px; display:inline-flex; align-items:center; font-size:12.5px; }
.wl .wl-empty { background:#fff; border:1px dashed #d3d8de; border-radius:12px; padding:22px; color:var(--w1-muted); text-align:center; }
.wl .wl-sub { margin:-4px 0 6px; color:var(--w1-muted); font-size:13px; } .wl .wl-opt { font:500 12px Inter, sans-serif; color:var(--w1-muted-soft); }
.wl .wl-back { margin-left:auto; height:40px; padding:0 18px; font-size:14px; }
.wl .wl-chk { display:flex; align-items:center; gap:8px; height:42px; font:600 13px Inter, sans-serif; color:var(--w1-ink); text-transform:none; letter-spacing:0; }
.wl .wl-chk input { width:18px; height:18px; accent-color:var(--w1-amber); }
.wl .wl-cal { background:#fff; border:1px solid var(--w1-line); border-radius:12px; padding:12px; }
.wl .wl-cal > b { display:block; font:600 15px Oswald, sans-serif; margin-bottom:8px; }
.wl .wl-cal-g { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; font-size:12px; }
.wl .wl-cal-g i { font-style:normal; font-weight:700; color:var(--w1-muted-soft); font-size:10.5px; }
.wl .wl-cal-g span { padding:6px 0; border-radius:8px; position:relative; }
.wl .wl-cal-g .wl-busy::after { content:""; position:absolute; left:30%; right:30%; bottom:2px; height:2px; border-radius:2px; background:var(--w1-amber); }
.wl .wl-cal-g .wl-today { font-weight:800; box-shadow:inset 0 0 0 1px #c7cfd9; }
.wl .wl-cal-g .wl-pick { background:var(--w1-amber); color:#3a2c05; font-weight:800; }
@media (max-width:900px) { .wl .wl-row { grid-template-columns:1fr auto; } .wl .wl-cars, .wl .wl-want { grid-column:1 / -1; } .wl .wl-acts { grid-column:1 / -1; justify-content:flex-start; } }
/* 09-oct (Luis, meeting 08-oct): Shop Numbers boxes side by side are the same size — each row stretches to its tallest box. */
.sn-now, .sn-two { align-items:stretch !important; }
.sn-now > .sn-card, .sn-two > .sn-card { height:100%; box-sizing:border-box; }
.sn-groups { align-items:stretch !important; }
.sn-gcol > .sn-card:last-child { flex:1 1 auto; }
/* 09-oct (Luis): overdue money at the top of Today › Money, red, the whole bar goes to Invoices */
.to-money .to-alert { display:flex; align-items:center; gap:8px; width:100%; margin:0 0 10px; padding:9px 12px; border:0; border-radius:10px; background:#fbeceb; color:#8f2f26; font:600 13px Inter, sans-serif; cursor:pointer; text-align:left; }
.to-money .to-alert i { width:9px; height:9px; border-radius:50%; background:#c0453a; flex:none; animation:toBeat 1.2s ease-in-out infinite; }
.to-money .to-alert span { margin-left:auto; font-weight:700; }
.to-money .to-alert:hover { background:#f6dedb; }
@keyframes toBeat { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@media (prefers-reduced-motion:reduce) { .to-money .to-alert i { animation:none; } }
/* 09-oct: deposits (OsEzyDepositLedger) — the meter, the pop-up, the customer page box, the Account list, big buttons */
.dl-meter { min-width:0; }
.dl-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .dl-top b { font:600 15px Inter, sans-serif; }
.dl-state { font:700 11.5px Inter, sans-serif; border-radius:999px; padding:2px 9px; }
.dl-ok .dl-state { background:#e4f0e7; color:#2f7d51; } .dl-att .dl-state { background:#fff6e0; color:#8a5c00; } .dl-risk .dl-state { background:#fbeceb; color:#c0453a; }
.dl-bar { position:relative; display:block; height:10px; border-radius:6px; background:#eef1f4; margin:7px 0 4px; overflow:hidden; }
.dl-bar i { position:absolute; top:0; bottom:0; left:0; border-radius:6px; } .dl-used { background:#2f7d51; } .dl-att .dl-used { background:#f0a500; } .dl-over { background:#c0453a; }
.dl-leg { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:#6c7682; }
.dl-tag { display:inline-block; font:700 11px Inter, sans-serif; border-radius:6px; padding:2px 7px; } .dl-tag.dl-ok { background:#e4f0e7; color:#2f7d51; } .dl-tag.dl-att { background:#fff6e0; color:#8a5c00; } .dl-tag.dl-risk { background:#fbeceb; color:#c0453a; }
.dl-modal { position:fixed; inset:0; z-index:200; background:rgba(23,26,31,.45); display:grid; place-items:center; padding:16px; }
.dl-mpanel { width:min(560px,100%); background:#fff; border-radius:16px; box-shadow:0 30px 80px -30px rgba(0,0,0,.5); padding:18px 20px; }
.dl-mhead { display:flex; align-items:center; justify-content:space-between; } .dl-mhead h3 { margin:0; font:600 20px Oswald, sans-serif; }
.dl-mx { width:36px; height:36px; border-radius:50%; border:1px solid #e3e7ec; background:#fff; font-size:20px; cursor:pointer; }
.dl-msub { margin:4px 0 12px; color:#48505a; font-size:13px; }
.dl-mgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:10px 12px; } .dl-mgrid .dl-wide { grid-column:1 / -1; }
.dl-mgrid input { width:100%; box-sizing:border-box; height:42px; border:1px solid #e3e7ec; border-radius:10px; padding:0 12px; font:14px Inter, sans-serif; }
.dl-macts { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } .dl-macts .w1-btn { height:42px; padding:0 18px; }
.cp2-depbox .big.cp2-dep, .cp2-favour { color:#2f7d51; } .cp2-ref { color:#b86e00 !important; }
.cp2-depbox { display:flex; flex-direction:column; gap:4px; }
.cp2-depbox.cp2-dep-ok { box-shadow:inset 4px 0 0 #2f7d51; } .cp2-depbox.cp2-dep-att { box-shadow:inset 4px 0 0 #f0a500; } .cp2-depbox.cp2-dep-risk { box-shadow:inset 4px 0 0 #c0453a; } .cp2-depbox.cp2-dep-ref { box-shadow:inset 4px 0 0 #b86e00; }
.cp2-depacts { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.cp2-bigacts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:12px; }
.cp2-bigacts .w1-btn { height:50px; font-size:14px; justify-content:center; display:inline-flex; align-items:center; }
.cp2-acct { padding:0; overflow:hidden; } .cp2-arow { display:grid; grid-template-columns:90px minmax(0,1fr) minmax(0,1.4fr) 120px 150px; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid #eef1f4; font-size:13px; }
.cp2-arow.cp2-ah { border-top:0; font:700 10.5px Inter, sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#6c7682; background:#fafbfc; } .cp2-arow .n { text-align:right; font-variant-numeric:tabular-nums; }
.cp2-arow.cp2-quiet { color:#6c7682; font-size:12px; padding-top:4px; } .cp2-pill { display:inline-block; font:700 11px Inter, sans-serif; border-radius:999px; padding:2px 8px; }
.cp2-pill.cp2-g { background:#e4f0e7; color:#2f7d51; } .cp2-pill.cp2-n { background:#eef1f4; color:#48505a; } .cp2-pill.cp2-a { background:#fff6e0; color:#8a5c00; }
@media (max-width:760px) { .cp2-arow { grid-template-columns:70px 1fr 100px; } .cp2-arow > :nth-child(3), .cp2-arow > :nth-child(5) { display:none; } }
.cp2-strip.cp2-n4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .cp2-strip .cp2-depacts .w1-btn { margin-top:0; }
.dl-modal.w1 { max-width:none; margin:0; } .dl-meter > .dl-state { display:inline-block; margin-top:2px; }
.w1 .w1-c .w1-dep { margin-top:6px; }
.doc-totals .line.deposit { color:#2f7d51; } .doc-totals .line.refund { color:#b86e00; border-top:0; }
.w1 .w1-facts.w1-f6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.w1 .w1-facts .w1-fdep b { color:#2f7d51; } .w1 .w1-facts .w1-fref b { color:#b86e00; } .w1 .w1-facts small { display:block; font-size:11px; color:var(--w1-muted-soft); }
.w1 .w1-depused { display:block; color:#2f7d51; font-weight:700; } .w1 .w1-refdue { display:block; color:#b86e00; font-weight:700; }
@media (max-width:1100px) { .w1 .w1-facts.w1-f6 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.to-money .to-alert.to-refund { background:#fff3e0; color:#8a5200; } .to-money .to-alert.to-refund i { background:#b86e00; }
.to-money .to-dep { margin:10px 0 0; font-size:12.5px; color:var(--muted, #48505a); } .to-money .to-dep b { color:#2f7d51; }

/* 09-oct sanity pass: deposit / refund notes in the invoice table win over the grey small text */
small.w1-depused, .w1 small.w1-depused { display:block; color:#2f7d51 !important; font-weight:700; }
small.w1-refdue, .w1 small.w1-refdue { display:block; color:#b86e00 !important; font-weight:700; }
.to-sc > b + .to-mut { margin-left:6px; }

/* 09-oct sanity pass: New job step 4 (deposit) — compact like the car cards, clear selected state, no squeezed method strip */
.nj-q .nj-opt { margin-left:8px; font:500 12px Inter,sans-serif; color:var(--w1-muted); }
.nj-dep .nj-wb { min-height:0; padding:12px 14px; border-radius:12px; }
.nj-dep .nj-wb b { font:700 15px Inter,sans-serif; }
.nj-dep .nj-wb small { font-size:12.5px; }
.nj-dep .nj-wb.nj-on { border:2px solid var(--w1-amber); background:var(--w1-amber-bg,#fffaf0); padding:11px 13px; }
.nj-dep .nj-wb:hover { transform:none; box-shadow:none; }
.nj-form.nj-depf { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
.nj-form.nj-depf > :last-child { grid-column:1 / -1; }
@media (max-width:640px) { .nj-form.nj-depf { grid-template-columns:1fr; } }

.wl .wl-bar .wl-grow { flex:1 1 auto; }   /* 09-oct: search moved to the Work bar */

/* 09-oct (Mathew): Waitlist sort + Add sit on the title line */
.cu-sec-body:has(.wl .wl-bar) { position:relative; }
.cu-sec-body .wl .wl-bar { position:absolute; top:18px; right:20px; margin:0; }
.cu-sec-body:has(.wl .wl-bar) .cu-sec-head { padding-right:420px; min-height:52px; }
@media (max-width:900px) { .cu-sec-body .wl .wl-bar { position:static; margin:8px 0; } .cu-sec-body:has(.wl .wl-bar) .cu-sec-head { padding-right:0; } }
/* 09-oct: with the Deposit box there are four boxes — on tablets and phones they still slide in one row (not squeezed) */
@media (max-width:900px) { .cp2-strip.cp2-n4 { grid-template-columns:repeat(4,minmax(240px,1fr)); } }
@media (max-width:640px) { .cp2-strip.cp2-n4 { grid-template-columns:repeat(4,82%); } }

/* 09-oct (Mathew): the Waitlist is one table — filters on top, sortable titles (replaces the group cards) */
.wl .wl-tbl{background:#fff;border:1px solid var(--w1-line);border-radius:12px;overflow:hidden}
.wl .wl-row.wl-head{background:#f7f8fa;border-top:0;font:700 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--w1-muted);padding-top:9px;padding-bottom:9px}
.wl .wl-th{cursor:pointer;user-select:none;border-radius:6px}.wl .wl-th:hover{color:var(--w1-ink)}.wl .wl-th.wl-on{color:var(--w1-ink)}
.wl .wl-tbl .wl-row:not(.wl-head){animation:oszEnter .2s ease both}
@media (max-width:900px){.wl .wl-row.wl-head{display:none}}
.wl .wl-tbl .wl-row{grid-template-columns:minmax(150px,1.1fr) minmax(120px,.9fr) minmax(160px,1.5fr) 150px 80px 268px}
.wl .wl-tbl .wl-acts{justify-content:flex-end}
@media (max-width:900px){.wl .wl-tbl .wl-row{grid-template-columns:1fr auto}}
.w1-cl .w1-more{display:flex;margin:12px auto;justify-content:center}   /* 09-oct: Show 25 more */
.w1 .w1-cl .w1-more{height:40px;min-width:240px;padding:0 18px;border:1px solid var(--w1-line);border-radius:10px;background:#fff;color:var(--w1-ink);font:700 13.5px Inter,sans-serif}
.w1 .w1-cl .w1-more:hover{background:#f3f4f6}