/* Garacast design system v2 (2026-10-17), loaded after gos.css on every screen. It changes how things look, never what
   they do: soft surfaces instead of outlined boxes, readable labels, touch targets of 48 px and more, filled fields,
   selection shown by a gold tint, generous space. For people who are not technical: one idea per surface. */
:root{--bg:#0a0a0b;--bg2:#141416;--bg3:#1b1b1e;--surf:linear-gradient(180deg,rgba(244,239,226,.055),rgba(244,239,226,.02));--r:20px;--r-s:14px;--line:rgba(244,239,226,.09);--mute:#a59f90}
html{-webkit-text-size-adjust:100%}
body{font-size:17px;line-height:1.55}
.k{font-size:12px;letter-spacing:.24em}
.hint{font-size:15px;line-height:1.55}

/* ---- the frame of every screen: brand left, the way home right, room to breathe */
.wz{padding-top:calc(env(safe-area-inset-top) + clamp(22px,4vw,48px))}
.wz-top{margin-bottom:clamp(30px,5vw,56px);gap:16px}
.wz-brand{font-size:22px;letter-spacing:.22em}
.back,.otx-home{font-size:12px;letter-spacing:.2em;padding:15px 16px;margin-right:-16px;border-radius:999px;color:var(--mute);text-decoration:none;transition:background .25s,color .25s}
.back:hover,.otx-home:hover{background:rgba(244,239,226,.06);color:var(--ink)}
.wz h1{font-size:clamp(34px,5.4vw,64px);line-height:1.05}
.wz .lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6}

/* ---- surfaces: no outline, a quiet fill, a soft radius */
.card,.lane,.plan,.person,.role,.tap,.tile,.opt,.day,.slot,.chip,.sum,.asked,.payhow,.pop,.sheet-in,.lcard{box-shadow:none;border-radius:var(--r)}
.card{background:var(--surf),var(--bg2);padding:clamp(22px,2.4vw,32px)}
.cols{gap:18px}
.cols .card h3{font-size:clamp(22px,2.1vw,30px);margin:10px 0 20px}
.lane{background:var(--surf),var(--bg2);padding:20px 18px 18px;min-height:190px}
.lane.aim{box-shadow:0 0 0 2px var(--acc);background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(212,175,55,.03)),var(--bg2)}
.lane-h b{font-size:23px}
.wcard,.pcard{background:var(--bg3);box-shadow:none;border-radius:var(--r-s);padding:16px 16px 14px;margin-top:10px;transition:transform .3s var(--ease),background .3s}
.wcard:hover{background:#202024}
.wcard b,.pcard b{font-size:19px}
.wcard span,.pcard span{font-size:14px}
.wcard.held{box-shadow:0 0 0 2px var(--acc);transform:scale(1.02)}
.wcard.live{background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.03) 70%),var(--bg3)}
.person{background:var(--surf),var(--bg2);min-height:168px;padding:28px 24px 24px}
.person:hover,.person:active{box-shadow:none;background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(244,239,226,.02)),var(--bg2)}
.person.in{box-shadow:0 0 0 2px rgba(125,255,166,.5)}
.tap{background:var(--surf),var(--bg2);min-height:108px;padding:20px 20px 16px}
.tap:active{box-shadow:0 0 0 2px var(--acc)}
.tap small{font-size:11.5px}
.plan{background:var(--surf),var(--bg2);padding:30px 26px}
.plan.on{box-shadow:0 0 0 2px var(--acc)}
.role{background:var(--surf),var(--bg2);padding:28px 60px 28px 24px}
.role:active{box-shadow:0 0 0 2px var(--acc)}
.tile,.opt,.day,.slot,.chip{background:var(--surf),var(--bg2)}
.tile:active,.tile.on,.opt:active,.opt.on,.day.on,.slot:active,.slot.on,.chip:active{box-shadow:0 0 0 2px var(--acc)}
.sum{background:var(--surf),var(--bg2);padding:8px 22px}
.asked{background:var(--surf),var(--bg2)}
.asked.urgent{box-shadow:0 0 0 2px #ff9c8a}
.payhow{background:var(--bg3);box-shadow:0 0 0 1px rgba(212,175,55,.5)}
.pop{background:var(--bg2);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.pop.ok{box-shadow:0 0 0 2px #7dffa6,0 40px 120px rgba(0,0,0,.6)}
.sheet-in{border-radius:26px 26px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.toast{border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.5);background:#202024}
.lcard{box-shadow:0 0 0 1px rgba(212,175,55,.35)}

/* ---- buttons and controls: big, round, obvious */
.btn{border-radius:12px;padding:17px 26px;font-size:13px}
a.btn{text-decoration:none}   /* a link drawn as a button carries no line under its words (the installer's last screen, 2026-10-19) */
.btn.o{box-shadow:none;background:rgba(244,239,226,.07)}
.btn.o:hover{background:rgba(244,239,226,.12)}
.gold,.ghost{border-radius:14px}
.ghost{box-shadow:none;background:rgba(244,239,226,.07)}
.stepper{grid-template-columns:1fr 52px 56px 52px;padding:12px 0;font-size:17px}
.stepper button,.rate button{border-radius:50%;box-shadow:none;background:rgba(244,239,226,.08)}
.stepper button{width:48px;height:48px;justify-self:center}
.stepper button:hover,.rate button:hover{background:var(--acc);color:#0a0a0b}
.rate{grid-template-columns:44px auto 44px;gap:8px}.rate button{width:44px;height:44px;font-size:20px}
.stepper .tog,.svc .tog{box-shadow:none;background:rgba(244,239,226,.12)}
.svc .tog.on,.stepper .tog.on{background:color-mix(in srgb,var(--acc) 30%,transparent)}
.pin{font-size:12px;letter-spacing:.12em;text-decoration:none;padding:14px 16px;min-height:44px;border-radius:999px;background:rgba(244,239,226,.07);color:var(--ink)}
.pin:hover{background:rgba(244,239,226,.13)}
.pin.shown{background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);font-size:18px}
.pill{box-shadow:none;background:rgba(244,239,226,.07);padding:11px 16px;font-size:14px}
.pill.on{box-shadow:none;background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc)}
.tools button{box-shadow:none;background:rgba(244,239,226,.07);border-radius:999px;padding:12px 18px}
.seg{box-shadow:none;background:rgba(244,239,226,.06);border-radius:14px;padding:4px}
.seg button{border-radius:11px}.seg button.on{background:var(--ink);color:var(--bg)}

/* ---- fields: a filled well with a gold line under it, never a hairline alone */
.f{gap:24px}
.f label,.field{font-size:12px;letter-spacing:.2em}
.f input,.f select,.field input,.team input,.team select,.addp input,.addp select,.keyin,.pcard input{background:rgba(244,239,226,.05);border:0;border-bottom:2px solid rgba(244,239,226,.18);border-radius:12px 12px 0 0;padding:14px 14px 12px;font-size:18px;color:var(--ink);outline:0;transition:border-color .25s,background .25s}
.f input:focus,.field input:focus,.team input:focus,.addp input:focus,.keyin:focus,.pcard input:focus{border-color:var(--acc);background:rgba(244,239,226,.08)}
.pcard input{width:110px;padding:10px 12px}

/* ---- lists and tables: one line, one thing, room between */
.rowp{padding:16px 0;font-size:16px;align-items:center}
.linkrow{padding:16px 0}
.linkrow b{font-size:17px}
.tablep{font-size:16px}.tablep th{font-size:11.5px}.tablep td{padding:14px 8px}
.svc{padding:14px 0;font-size:16px}
.jobstep{min-height:60px;font-size:18px}
.empty{font-size:16px}
.big6{letter-spacing:.16em}

/* ---- the office screens: lanes and columns breathe on a computer, stack on a phone */
.lanes{gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pcols{gap:18px}
.taps{gap:14px}
@media(max-width:700px){.card{padding:22px 18px}.lane{min-height:0}.wz h1{font-size:clamp(32px,9vw,44px)}}

/* ---- "Mon garage": one section at a time, behind a bar of tabs */
.mg-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:6px -4px 18px;padding:4px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.mg-tabs::-webkit-scrollbar{display:none}
.mg-tab{flex:none;padding:13px 20px;border-radius:999px;background:rgba(244,239,226,.06);color:var(--mute);font-size:15px;transition:background .25s,color .25s}
.mg-tab:hover{color:var(--ink)}
.mg-tab.on{background:var(--ink);color:var(--bg)}
.mg-why{color:var(--mute);font-size:16px;margin:0 0 18px}
.mg-one{grid-template-columns:1fr}
.mg-one > .card{max-width:980px}
/* the team: one block per person (2026-10-18). The face and the name, the hourly rate beside them on one line, then
   the three things the owner does with a person, together on the line below. Before, the row broke into three lines. */
/* each person is a wash of its own, never a rule under each row (the design law; 2026-10-20) */
.team-rows{display:flex;flex-direction:column;gap:8px}
.team-rows .rowp{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who rate" "acts acts";align-items:center;gap:14px 12px;padding:16px 16px;border-radius:16px;background:rgba(244,239,226,.03);border-top:0}
.team-rows .rowp > b{grid-area:who;min-width:0;font-size:18px;font-weight:500}
.team-rows .rowp > .rate{grid-area:rate;display:inline-grid;align-items:center;white-space:nowrap}
.team-rows .rowp > .rate > span{text-align:center;font-variant-numeric:tabular-nums;font-size:15px}
.team-rows .rowp > .acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:8px}
.team-rows .acts .pin{letter-spacing:.05em;padding:14px 14px}
.team-rows .acts .pin.role{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}   /* the person's role is a state: a wash of the garage's colour */
@media(max-width:420px){.team-rows .rowp{grid-template-areas:"who who" "rate rate" "acts acts"}.team-rows .rowp > .rate{justify-self:start}}
/* "Mon garage", hours and details (2026-10-18): one row per day, the day and its switch, the two times */
.mg-sub{margin:28px 0 8px}
.mg-shop{margin-bottom:6px}
.mg-hours{display:grid}
.mg-hour{display:grid;grid-template-columns:minmax(0,1fr) 116px 116px 60px;gap:10px;align-items:center;padding:8px 10px;margin-top:6px;border-radius:12px;background:rgba(244,239,226,.03)}   /* each day on a wash, never a rule (2026-10-21) */
@media(max-width:520px){.mg-hour{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px;grid-template-areas:"day day day" "open close tog"}.mg-hour > span{grid-area:day}}
.mg-hour > span{font-size:16px}
.mg-hour input{min-height:46px;background:rgba(244,239,226,.05);border:0;border-bottom:2px solid rgba(244,239,226,.18);border-radius:10px 10px 0 0;padding:10px 8px;font:inherit;font-size:16px;color:var(--ink);outline:0}
.mg-hour input:focus{border-color:var(--acc)}
.mg-hour input:disabled{opacity:.3}
.mg-hour .tog{justify-self:end;width:56px;height:32px;border-radius:16px;position:relative;background:rgba(244,239,226,.12)}
.mg-hour .tog::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--mute);transition:transform .3s var(--ease),background .3s}
.mg-hour .tog.on{background:color-mix(in srgb,var(--acc) 30%,transparent)}.mg-hour .tog.on::after{transform:translateX(24px);background:var(--acc)}
.mg-tax{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:480px){.mg-hour{grid-template-columns:1fr 1fr;grid-template-areas:"day tog" "o c";row-gap:8px}.mg-hour > span{grid-area:day}.mg-hour .tog{grid-area:tog}.mg-hour input:first-of-type{grid-area:o}.mg-hour input:last-of-type{grid-area:c}}
/* the customer's file of a visit (2026-10-18): the garage's messages and his own, the photos, the inspection, the invoice */
.sheet-in.file{max-height:88vh;overflow-y:auto;border-radius:26px 26px 0 0}
.file h2{font:400 26px/1.15 var(--display);margin:8px 0 6px;overflow-wrap:anywhere}
.file h3{font:400 20px/1.2 var(--display);margin:26px 0 10px}
.file .sub{color:var(--mute);font-size:15px;margin:0}
.file .thread{display:flex;flex-direction:column;gap:8px}
.file .msg{max-width:88%;padding:11px 14px;border-radius:16px 16px 16px 4px;background:rgba(244,239,226,.07)}
.file .msg.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--acc) 18%,transparent)}
.file .msg small{display:block;font-size:12px;color:var(--mute);margin-bottom:3px}
.file .msg p{margin:0;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.file .msgin{width:100%;margin-top:12px;background:rgba(244,239,226,.05);border:0;border-bottom:2px solid rgba(244,239,226,.18);border-radius:12px 12px 0 0;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);resize:vertical;outline:0}
.file .msgin:focus{border-color:var(--acc)}
.file .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.file .photos figure{margin:0}.file .photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:#1b1b1e}
.file .photos figcaption{font-size:12.5px;color:var(--mute);margin-top:4px}
.file .dvi{display:grid}
.file .dvr{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:15.5px}
.file .dvr b{font-weight:400}
.file .dvr i{width:12px;height:12px;border-radius:50%;background:#9fe3b4}.file .dvr.yellow i{background:#f2c46a}.file .dvr.red i{background:#ff9c8a}
.file .dvr span{font-size:13px;color:#9fe3b4}.file .dvr.yellow span{color:#f2c46a}.file .dvr.red span{color:#ff9c8a}
.file .bill > div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.file .bill > div b{font-weight:400;font-variant-numeric:tabular-nums}
.file .bill .tot span,.file .bill .tot b{font-size:17px;color:var(--ink)}
.file .bill .k{margin-top:12px;color:#f2c46a}.file .bill .k.ok{color:#9fe3b4}
.rowc.tap{cursor:pointer}
.filebtn{margin-top:10px}
/* the customer's pages: the glow at the top never repeats lower down (a seam showed where it started again) */
.capp{background:radial-gradient(120% 60% at 50% -10%,rgba(212,175,55,.10),transparent 60%) no-repeat,var(--bg);background-size:100% 100vh,auto}

/* ---- the work board: the day at a glance, then a lane per person; each vehicle with its colour and its progress */
.wb-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 22px;max-width:820px}
.wb-sum div{background:var(--surf),var(--bg2);border-radius:18px;padding:18px 20px}
.wb-sum b{display:block;font:300 clamp(34px,4vw,48px)/1 var(--body);font-variant-numeric:tabular-nums}
.wb-sum span{display:block;margin-top:8px;font-size:14px;color:var(--mute)}
.wb-lead.now{color:var(--acc)}
.lane-h{gap:12px;margin-bottom:14px;align-items:center}
.wb-face{width:42px;height:42px;flex:none;border-radius:50%;background:#26262a center/cover no-repeat;display:grid;place-items:center;font:400 15px/1 var(--display);color:var(--acc)}
.wb-who{flex:1;min-width:0}.wb-who b{display:block;font:400 22px/1.15 var(--display)}
.wb-st{display:inline-block;margin-top:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.wb-st.in{color:#9fe3b4}
.wb-n{font:300 22px/1 var(--body);color:var(--mute);font-variant-numeric:tabular-nums}
.lane.todo{background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(244,239,226,.02)),var(--bg2)}
.wb-top{display:flex;align-items:center;gap:10px}
.wb-top b{flex:1;min-width:0}
.wb-sw{width:16px;height:16px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(244,239,226,.35),inset 0 -3px 5px rgba(0,0,0,.35)}
.wb-sw.none{background:transparent;box-shadow:inset 0 0 0 1px rgba(244,239,226,.25)}
.wcard > span{margin:6px 0 0 26px}
.wb-urgent{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff9c8a;background:rgba(255,156,138,.13);padding:5px 9px;border-radius:999px;white-space:nowrap}
.wb-prog{height:4px;border-radius:2px;background:rgba(244,239,226,.1);margin:12px 0 0 26px;overflow:hidden}.wb-prog i{display:block;height:100%;background:var(--acc);border-radius:2px;transition:width .6s var(--ease)}
.wb-foot{display:flex;align-items:center;gap:10px;margin:12px 0 0 26px;flex-wrap:wrap}
.wb-foot small{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.wcard em.wb-stage{margin:0;font-size:11px;letter-spacing:.14em;padding:6px 10px;border-radius:999px;background:rgba(244,239,226,.08);color:var(--ink)}
.wcard em.wb-stage.in{background:rgba(110,160,230,.16);color:#a9c8f2}.wcard em.wb-stage.work{background:rgba(212,175,55,.2);color:var(--acc)}.wcard em.wb-stage.check{background:rgba(190,140,240,.16);color:#d3b4f5}.wcard em.wb-stage.ready{background:rgba(159,227,180,.16);color:#9fe3b4}.wcard em.wb-stage.wait{background:rgba(244,239,226,.08);color:var(--mute)}
@media(max-width:600px){.wb-sum{gap:8px}.wb-sum div{padding:14px}.wb-sum span{font-size:12.5px}}

.card .v{word-break:normal;overflow-wrap:anywhere}
/* an address to read and type (2026-10-18): smaller than a code, broken only after "/" or "?" (the page puts the breaks) */
.card .v.addr{font-size:clamp(17px,1.6vw,22px);line-height:1.35;overflow-wrap:normal;word-break:normal}
/* the mark wears the garage's colour on every page, as the installer promises; without a garage it stays gold (2026-10-18) */
.wz-brand b{color:var(--acc)}

/* ---- the parts, before any part was asked: how it works, in three steps */
.pc-empty{max-width:980px}.pc-empty h3{font:400 clamp(22px,2.2vw,28px)/1.25 var(--display);margin:10px 0 20px}
.pc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pc-steps div{background:var(--bg3);border-radius:16px;padding:18px}.pc-steps b{display:block;font:400 19px/1.2 var(--display);margin-bottom:6px}.pc-steps span{font-size:14.5px;color:var(--mute)}
@media(max-width:700px){.pc-steps{grid-template-columns:1fr}}

/* ---- the customer app: a short word floats above the tab bar, never on it */
.capp .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
.tabbar{border-top:0;background:rgba(14,14,16,.9)}
.tabbar button{font-size:10.5px}
.app-top .me{box-shadow:none;background:rgba(244,239,226,.08)}
.rowc .ico{box-shadow:none;background:rgba(244,239,226,.07)}

.wcard .wb-top b{display:inline;flex:1}

/* ---- the reception (rebuilt 2026-10-18): the day's vehicles by where they are, each with its one next step */
.rc-new{margin:4px 0 0;border-radius:14px}
.rc-days{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.rc-days .pill{min-height:44px;display:inline-flex;align-items:center;font-size:15px;padding:11px 18px;color:var(--ink);background:rgba(244,239,226,.07)}
.rc-days .pill.on{background:var(--ink);color:var(--bg)}
.rc-pick{position:relative;overflow:hidden;cursor:pointer}
.rc-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.rc-watch{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px;margin:0 0 30px}
.rc-watch .k{grid-column:1/-1;margin:0}
.rc-w{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px 16px;border-radius:16px;background:rgba(242,196,106,.1);color:var(--ink);min-height:60px}
.rc-w b{font-weight:500;font-size:16px}.rc-w span{font-size:14px;color:#f2c46a}
.rc-w.in{background:rgba(159,227,180,.1)}.rc-w.in span{color:#9fe3b4}
.rc-w.bad{background:rgba(255,156,138,.12)}.rc-w.bad span{color:#ff9c8a}
.rc-group{margin:0 0 34px}
.rc-gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.rc-gh h2,.rc-gh h3{font:400 clamp(24px,2.4vw,30px)/1.2 var(--display);margin:0}
.rc-gh small{font:300 22px/1 var(--body);color:var(--mute);font-variant-numeric:tabular-nums}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.rc{display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px;border-radius:var(--r);background:var(--surf),var(--bg2);transition:box-shadow .3s}
.rc.work{background:linear-gradient(180deg,rgba(212,175,55,.13),rgba(212,175,55,.02) 70%),var(--bg2)}
.rc.ready{background:linear-gradient(180deg,rgba(159,227,180,.11),rgba(159,227,180,.02) 70%),var(--bg2)}
.rc.flash{box-shadow:0 0 0 2px var(--acc)}
.rc-group.quiet .rc{opacity:.7}
.rc-top{display:flex;align-items:center;gap:12px}
.rc-time{flex:none;font:300 19px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--mute)}
.rc-name{flex:1;min-width:0;font:400 22px/1.2 var(--display);overflow-wrap:anywhere}
.rc-tech{flex:none;min-height:44px;padding:11px 16px;border-radius:999px;background:rgba(212,175,55,.14);color:var(--acc);font-size:14px}
.rc-tech.none{background:rgba(242,196,106,.12);color:#f2c46a}
.rc-tech:disabled{opacity:.55}
.rc-veh{display:flex;align-items:center;gap:10px;font-size:16px}
.rc-veh i{width:14px;height:14px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(244,239,226,.35),inset 0 -3px 5px rgba(0,0,0,.35)}
.rc-veh i.none{box-shadow:inset 0 0 0 1px rgba(244,239,226,.25)}
.rc-what{font-size:14.5px;color:var(--mute);margin:0}
.rc-st{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.rc-st small{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.rc-stage{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(244,239,226,.08);color:var(--ink)}
.rc-stage.in{background:rgba(110,160,230,.16);color:#a9c8f2}.rc-stage.work{background:rgba(212,175,55,.2);color:var(--acc)}.rc-stage.check{background:rgba(190,140,240,.16);color:#d3b4f5}.rc-stage.ready{background:rgba(159,227,180,.16);color:#9fe3b4}.rc-stage.wait,.rc-stage.done{color:var(--mute)}.rc-stage.off{background:rgba(255,156,138,.12);color:#ff9c8a}
.rc-prog{margin:4px 0 0}
.rc-inv{font-size:14px;color:var(--mute);margin:0}
.rc-acts{display:flex;gap:10px;margin-top:8px}
.rc-acts .rc-go{flex:1;width:auto;min-height:56px;border-radius:14px;font-size:13px;letter-spacing:.12em;padding:0 14px;text-align:center}
.rc-acts .rc-go.pay{background:#9fe3b4}
.rc-acts .rc-more{flex:none;width:auto;min-height:56px;padding:0 20px;border-radius:14px}
.rc-empty{max-width:760px}.rc-empty h3{font:400 clamp(22px,2.2vw,28px)/1.25 var(--display);margin:0 0 8px}
.rc-sheet{max-height:88vh;overflow-y:auto;border-radius:26px 26px 0 0}
.rc-sheet h3{font:400 24px/1.25 var(--display);margin:6px 0 18px;overflow-wrap:anywhere}
.rc-sheet .f{margin-bottom:14px}
.rc-sheet .f label{display:flex;flex-direction:column;gap:8px}
.rc-sheet .f input,.rc-sheet .f select{width:100%}
.rc-sheet .gold{margin-top:16px}
.rc-k{margin:6px 0 0}
.rc-slots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin:10px 0 4px}
.rc-slots .hint{grid-column:1/-1;margin:4px 0}
.rc-slots .chip,.rc-ways .chip{min-height:52px;text-align:center;border-radius:14px}
.rc-slots .chip.on{box-shadow:0 0 0 2px var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.rc-list{display:grid;gap:8px;margin-top:6px}
.rc-list button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:15px 16px;border-radius:14px;background:rgba(244,239,226,.06);color:var(--ink);min-height:60px;width:100%}
.rc-list button b{font-weight:500;font-size:17px}.rc-list button small{font-size:13.5px;color:var(--mute)}
.rc-list button.on{box-shadow:0 0 0 2px var(--acc)}
.rc-list button.danger b{color:#ff9c8a}
.rc-close{margin-top:12px}
.rc-points{display:grid;gap:2px}
.rc-dvi{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.rc-dvi b{font-weight:500}
.rc-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rc-seg button{min-height:46px;border-radius:12px;background:rgba(244,239,226,.06);font-size:14px;color:var(--mute)}
.rc-seg button.green.on{background:rgba(159,227,180,.2);color:#9fe3b4}.rc-seg button.yellow.on{background:rgba(242,196,106,.2);color:#f2c46a}.rc-seg button.red.on{background:rgba(255,156,138,.2);color:#ff9c8a}
.rc-text{width:100%;background:rgba(244,239,226,.05);border:0;border-bottom:2px solid rgba(244,239,226,.18);border-radius:12px 12px 0 0;padding:14px;font:inherit;font-size:17px;color:var(--ink);resize:vertical;outline:0}
.rc-text:focus{border-color:var(--acc)}
.rc-thread{display:flex;flex-direction:column;gap:8px;max-height:42vh;overflow-y:auto;margin:2px 0 14px}
.rc-msg{max-width:88%;align-self:flex-end;padding:11px 14px;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--acc) 16%,transparent)}
.rc-msg.them{align-self:flex-start;border-radius:16px 16px 16px 4px;background:rgba(244,239,226,.08)}
.rc-msg small{display:block;font-size:12px;color:var(--mute);margin-bottom:3px}
.rc-msg p{margin:0;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.rc-danger{background:#ff9c8a}
.rc-bill .rowp,.rc-log .rowp{grid-template-columns:auto 1fr auto;align-items:center}
.rc-total span,.rc-total b{font-size:18px;color:var(--ink)}
.rc-sum{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));max-width:980px}
.rc-sum b{font-size:clamp(26px,3.2vw,38px)}
.rc-cash{max-width:980px;margin-top:18px}
.rc-cash .rowp{grid-template-columns:1fr auto auto;align-items:center}
.rc-cash h3{font:400 clamp(20px,2vw,26px)/1.25 var(--display);margin:6px 0 10px}
.rc-bars{display:flex;align-items:flex-end;gap:6px;height:130px;margin:18px 0 8px}
.rc-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.rc-bar i{display:block;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--acc),rgba(212,175,55,.35));min-height:2px}
.rc-bar span{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.rc-search{max-width:520px;margin:6px 0 4px}
.rc-search input{width:100%}
.rc-clients{display:flex;flex-direction:column}
.rc-client{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;text-align:left;padding:16px 4px;border-top:1px solid var(--line);color:var(--ink);min-height:64px;width:100%}
.rc-client b{display:block;font-weight:500;font-size:17px}.rc-client span{display:block;font-size:14px;color:var(--mute);overflow-wrap:anywhere}
.rc-cv{text-align:right}
@media(max-width:600px){.rc{padding:18px 16px 16px}.rc-name{font-size:20px}.rc-acts .rc-more{padding:0 16px}.rc-days .pill{padding:11px 14px}}
@media print{.rc-days,.mg-tabs,.rc-new,.rc-cash:not(.print),.rc-sum{display:none !important}}

/* ---- the plan of the garage (2026-10-20): the hall seen from above, the entrance door at the bottom where the waiting-room
   screen's camera stands, the lane up the middle, the places on both sides numbered from the door. A bay is a wash of the
   garage's colour with its light on the floor, the same light the screen draws under it. Filled shapes only. */
.plan-tools{max-width:640px}
.plan-hall{display:grid;grid-template-columns:minmax(0,1fr) clamp(40px,13%,92px) minmax(0,1fr);column-gap:10px;max-width:640px;padding:16px 14px 0;border-radius:24px;background:radial-gradient(70% 38% at 50% 100%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 72%),linear-gradient(180deg,#151517,#0d0d0f);user-select:none;-webkit-user-select:none}
.plan-col{display:flex;flex-direction:column-reverse;gap:10px}
.plan-lane{position:relative;overflow:hidden;border-radius:12px;background:rgba(244,239,226,.025)}
.plan-fov{position:absolute;left:0;bottom:0;display:block;width:100%;height:70%}
.plan-fov .fov-near{stop-color:var(--acc);stop-opacity:.5}.plan-fov .fov-far{stop-color:var(--acc);stop-opacity:0}
.plan-cam{position:absolute;left:50%;bottom:8px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 70%,transparent)}
.plan-spot{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:76px;padding:12px 14px;border-radius:14px;box-shadow:none;background:rgba(244,239,226,.035);color:var(--mute);text-align:left;cursor:pointer;transition:background .25s var(--ease)}
.plan-spot:hover,.plan-spot:focus-visible{background:rgba(244,239,226,.075);outline:none}
.plan-spot .n{font:300 22px/1 var(--body);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.plan-spot .w{font:500 14px/1.25 var(--body);color:var(--ink);overflow-wrap:anywhere}
.plan-spot.on{background:radial-gradient(95% 75% at 50% 112%,color-mix(in srgb,var(--acc) 58%,transparent),transparent 72%),color-mix(in srgb,var(--acc) 13%,#151517)}
.plan-spot.on .n{color:var(--acc)}
.plan-spot.on:hover,.plan-spot.on:focus-visible{background:radial-gradient(95% 75% at 50% 112%,color-mix(in srgb,var(--acc) 70%,transparent),transparent 72%),color-mix(in srgb,var(--acc) 18%,#151517)}
.plan-door{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 16px}
.plan-door svg{display:block;width:clamp(124px,38%,200px);height:auto}
.plan-door .frame{fill:rgba(244,239,226,.05)}.plan-door .panel{fill:rgba(244,239,226,.12)}.plan-door .win{fill:color-mix(in srgb,var(--acc) 48%,transparent)}
.plan-door span{font-size:13px;letter-spacing:.06em;color:var(--mute)}
.plan-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;max-width:640px;margin-top:16px}
.plan-foot .hint{margin:0;max-width:34em}
@media(max-width:600px){.plan-hall{padding:12px 10px 0;column-gap:8px}.plan-col{gap:8px}.plan-spot{min-height:68px;padding:10px 11px}.plan-spot .n{font-size:19px}.plan-spot .w{font-size:13px}}

/* ---- the office time clock (2026-10-20): each person a wash, the state a light (present, on a break, a departure not
   punched); the pop-up without a rim (the design law) */
.person{box-shadow:none;background:rgba(244,239,226,.04);border-radius:18px}
.person:hover,.person:active{box-shadow:none;background:rgba(244,239,226,.08)}
.person.in{box-shadow:none;background:color-mix(in srgb,#7dffa6 8%,var(--bg2))}
.person.break{background:color-mix(in srgb,#ffd27d 9%,var(--bg2))}
.person.break .dot{background:#ffd27d;box-shadow:0 0 0 6px rgba(255,210,125,.14)}
.person.break span{color:var(--ink)}
.person.stale{background:color-mix(in srgb,#ff8a7d 9%,var(--bg2))}
.person.stale .dot{background:#ff8a7d;box-shadow:0 0 0 6px rgba(255,138,125,.14)}
.person.stale span{color:#ffb4ab}
.pop{box-shadow:0 40px 120px rgba(0,0,0,.6);border-radius:24px}
.pop.ok{box-shadow:0 40px 120px rgba(0,0,0,.6);background:color-mix(in srgb,#7dffa6 7%,var(--bg2))}
.pop .choice{justify-content:center;gap:14px;margin:8px 0 6px}
.pop .choice .btn{min-width:200px;justify-content:center;font-size:15px;padding:22px 28px}

/* ---- hours and pay (2026-10-20): one period at a time; what is left to correct first, in a warm wash; each person a wash
   that opens on their days; never a line between rows (the design law); the controls stay off the printed page */
.pay .pay-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 10px}
.pay .pay-period{max-width:100%;background:rgba(244,239,226,.06);color:var(--ink);border:0;border-radius:12px;padding:12px 14px;font:400 16px/1.2 var(--body);color-scheme:dark}
.pay-state{font-size:15px;color:var(--mute);margin:0 0 12px}.pay-state.ok{color:#9be3b4}
.pay-msg{font-size:15px;color:var(--acc);margin:0 0 12px}
.pay-todo{background:color-mix(in srgb,#ff8a7d 8%,transparent);border-radius:16px;padding:14px 16px;margin:0 0 16px}
.pay-todo h4{font:500 15px/1.3 var(--body);color:#ffb4ab;margin:0 0 6px}
.pay-todo-line{padding:10px 0}.pay-todo-line p{margin:0 0 8px;font-size:15px}
.pay-acts{display:flex;flex-wrap:wrap;gap:8px}
.pay-fix{margin-top:10px}.pay-fix-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pay-fix-row select,.pay-fix-row input{background:rgba(244,239,226,.06);color:var(--ink);border:0;border-radius:10px;padding:11px 12px;font:400 15px/1.2 var(--body);color-scheme:dark}
.pay-fix-row input:not([type]){flex:1 1 220px;min-width:180px}
.pay-fix-row .btn{padding:13px 20px}
.pay-people{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.pay-person{background:rgba(244,239,226,.035);border-radius:16px}
.pay-person.on{background:rgba(244,239,226,.06)}
.pay-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;width:100%;padding:14px 16px;text-align:left;background:none;box-shadow:none;color:var(--ink);cursor:pointer;border-radius:16px}
.pay-who b{display:block;font:500 17px/1.25 var(--body)}.pay-who span{font-size:13px;color:var(--mute)}
.pay-nums{display:flex;flex-wrap:wrap;gap:6px 20px}.pay-nums div{text-align:right;min-width:72px}
.pay-nums b{display:block;font:400 17px/1.2 var(--body);font-variant-numeric:tabular-nums}.pay-nums small{font-size:11.5px;color:var(--mute)}
.pay-detail{padding:2px 16px 16px}
.pay-day{padding:10px 0}.pay-day > b{display:block;font-weight:500;font-size:15px}.pay-day > span{display:block;font-size:14px;color:var(--mute);margin:2px 0 6px}
.pay-events{display:flex;flex-wrap:wrap;gap:6px}
.pay-ev{display:inline-flex;align-items:center;gap:8px;font-size:13px;background:rgba(244,239,226,.05);border-radius:999px;padding:6px 6px 6px 12px}
.pay-ev.fixed{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--ink)}
.pay-x{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(244,239,226,.07);box-shadow:none;color:var(--mute)}
.pay-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin:4px 0 14px}
.pay-sum div{background:rgba(244,239,226,.04);border-radius:14px;padding:12px 14px}.pay-sum b{display:block;font:400 20px/1.2 var(--body);font-variant-numeric:tabular-nums}.pay-sum span{font-size:12.5px;color:var(--mute)}
.pay-adj{background:rgba(244,239,226,.04);border-radius:16px;padding:12px 16px;margin:0 0 14px}.pay-adj h4{font:500 15px/1.3 var(--body);margin:0 0 6px}.pay-adj p{font-size:14px;margin:4px 0}
.pay-nav{flex-wrap:wrap;gap:10px;margin-top:6px}
.pay-settings{margin-top:22px;background:rgba(244,239,226,.03);border-radius:16px;padding:12px 16px}
.pay-settings summary{cursor:pointer;font:400 17px/1.3 var(--display);padding:4px 0}
.pay-settings .f{margin-top:10px}
@media print{.pay-settings,.pay-nav,.pay-fix,.pay-x,.pay-acts,.pay .pay-head select{display:none !important}.pay-person{break-inside:avoid}}
.pay-todo .pill{background:rgba(244,239,226,.14);color:var(--ink);padding:11px 16px}   /* the fix reads as a button on the warm wash */
.pay-todo .pill:hover{background:rgba(244,239,226,.2)}
.pay-detail .pay-edit{margin:4px 0 6px}
.pay-copy{background:rgba(244,239,226,.04);border-radius:16px;padding:14px 16px;margin:12px 0}.pay-copy h4{font:500 14px/1.3 var(--body);margin:0 0 8px;overflow-wrap:anywhere}
.pay-copy textarea{width:100%;background:rgba(0,0,0,.25);color:var(--ink);border:0;border-radius:10px;padding:10px 12px;font:400 12px/1.45 ui-monospace,Menlo,monospace;margin-bottom:10px}

/* ---- the till of the day (2026-10-20): what is expected by way of payment, the count at closing, its differences */
.rc-till .rc-expect{margin:6px 0 14px}
.rc-count{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 14px;margin:6px 0 8px}
.rc-diffs{margin:4px 0 8px}
.rc-why{width:100%;max-width:520px;background:rgba(244,239,226,.06);color:var(--ink);border:0;border-radius:10px;padding:12px 14px;font:400 15px/1.3 var(--body);margin:0 0 12px}
.rc-msg{color:var(--acc);font-size:15px;margin:0 0 10px}
.rc-closes{margin-top:14px}.rc-closes .hint{margin:2px 0}
.rc-refund b:last-child{color:#ffb4ab}
.rc-cash .rc-paid{grid-template-columns:minmax(0,1fr) auto auto auto}
.rc-paid .pin{margin-left:10px}

/* the installer (2026-10-20): the contract's details asked once, a recap of what the contract will say, a field for robots only */
.wz .plan.on{box-shadow:none;background:color-mix(in srgb,var(--acc) 16%,transparent)}
.wz .plan.off{opacity:.45;cursor:not-allowed}.wz .plan.off:hover{transform:none}.wz .plan li.soon{color:var(--acc)}
.wz .plan li{border-top:0;padding:4px 0}                                   /* a plan's points: no rule under each one */
.wz .dots{gap:8px;align-items:center}.wz .dots i{width:8px;height:8px;border-radius:50%}   /* the steps as dots: seven fit on a phone */
.sw button.on{box-shadow:none}.sw button.on::after{content:"";display:block;width:12px;height:12px;margin:auto;border-radius:50%;background:rgba(10,10,11,.82)}   /* the colour chosen: a dot, never a ring */
.wz .done .card .btn{margin-top:14px;text-decoration:none}
.wz .f small.hint{letter-spacing:0;text-transform:none;font-size:13px;color:var(--mute)}
.wz .f label.check{flex-direction:row;align-items:center;gap:10px;letter-spacing:0;text-transform:none;font-size:15px;color:var(--ink)}
.wz .f label.check input{width:20px;height:20px;accent-color:var(--acc)}
.wz .recap{width:100%;max-width:760px;border-collapse:separate;border-spacing:0 6px;margin-top:8px}
.wz .recap th,.wz .recap td{padding:12px 16px;background:rgba(244,239,226,.05);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.wz .recap th{width:30%;border-radius:12px 0 0 12px;font-weight:500;color:var(--mute);font-size:13px;letter-spacing:.08em}.wz .recap td{border-radius:0 12px 12px 0}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.ac-contract .nav{margin-top:12px}.ac-contract .f{margin:12px 0}

/* on the home screen (2026-10-20): a sheet at the bottom, washes only */
.a2{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:9999;max-width:520px;margin:0 auto;padding:20px 20px 16px;border-radius:22px;background:rgba(24,24,27,.96);color:#F4EFE2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.55);transform:translateY(140%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.a2.on{transform:none}.a2-top{display:flex;align-items:center;gap:14px}.a2-icon{width:52px;height:52px;border-radius:12px;flex:none}
.a2 h2{margin:0;font-family:inherit;font-size:18px;font-weight:600;line-height:1.25;letter-spacing:0;text-transform:none}
.a2-lead{margin:12px 0 0;font-size:15px;line-height:1.5;color:rgba(244,239,226,.75)}.a2-steps{margin:12px 0 0;padding-left:22px;font-size:15px;line-height:1.75}
.a2-share{width:20px;height:20px;vertical-align:-4px;color:#4da3ff}.a2-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.a2-later,.a2-go{border:0;border-radius:12px;padding:12px 18px;font-family:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none}
.a2-later{background:rgba(244,239,226,.08);color:inherit}.a2-go{background:var(--acc,#D4AF37);color:#0A0A0B}
/* the parts room v2 (2026-10-21): the parts to order gathered by supplier, the orders, this garage's own prices; each
   group, line and supplier on a wash, never a rule (the design law) */
.pr-group{background:rgba(244,239,226,.03);border-radius:var(--r-s);padding:14px 14px 8px;margin-top:12px}
.pr-gh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.pr-gh > b,.pr-gh > div > b{font-size:18px;font-weight:500}
.pr-gh > span,.pr-gh > div > span{display:block;font-size:14px;color:var(--mute);flex-basis:100%}
.pr-gh > div{min-width:0}
.pr-gh .gold{margin:0}
.pr-group .pcard{background:var(--bg3)}
.pr-offers{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pr-offers .pill{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;text-align:left}
.pr-offers .pill small{font-size:13px;opacity:.85;font-variant-numeric:tabular-nums}
.pr-note{display:block;margin-top:8px;color:var(--mute)}
.pr-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(244,239,226,.035);margin-top:8px}
.pr-line b{display:block;font-size:16px;font-weight:500}.pr-line span{display:block;font-size:13.5px;color:var(--mute)}
.pr-line small{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}
.pr-line.done{opacity:.55}
.pr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 6px}
.pr-acts .gold{margin:0}
a.pill{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
.pr-spend,.pr-sups{margin-top:26px;max-width:980px}
.pr-spend h3{font:400 clamp(22px,2.2vw,28px)/1.25 var(--display);margin:8px 0 6px}
.pr-sup{background:rgba(244,239,226,.03);border-radius:16px;padding:14px 16px;margin-top:10px}
.pr-prices{margin-top:8px}.pr-prices .addp{margin-top:12px}
.pr-gh .gold,.pr-acts .gold{width:auto;min-height:48px;padding:0 20px}
/* the parts room's choices and actions read as touchable: their own wash (an older rule takes it off every button pill) */
.pr-group button.pill,.pr-sup button.pill,.pr-acts button.pill,.pr-offers button.pill{background:rgba(244,239,226,.08);color:var(--ink)}
.pr-group button.pill.on,.pr-sup button.pill.on,.pr-offers button.pill.on{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc)}
.pr-line .pr-meta > span,.pr-meta > span{display:inline;white-space:nowrap}   /* the pieces of a line run on, each whole */
.pr-nb{white-space:nowrap}
/* the bill (2026-10-21): each line on its own wash, never a rule under it (the design law); the total on a warmer one */
.rc-bill .rowp{border-top:0;background:rgba(244,239,226,.035);border-radius:12px;padding:12px 14px;margin-top:6px}
.rc-bill .rowp.rc-total{background:color-mix(in srgb,var(--acc) 14%,transparent)}
/* loyalty and promotions in Mon garage (2026-10-21): the rule as a sentence of fields, its words read back, each promotion
   on a wash, never a rule (the design law) */
.mg-loy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.mg-loy label,.mg-promo-new label{display:grid;gap:6px;font-size:13px;color:var(--mute)}
.mg-loy select,.mg-promo-new select{min-height:46px;background:rgba(244,239,226,.05);border:0;border-radius:12px 12px 0 0;border-bottom:2px solid rgba(244,239,226,.18);color:var(--ink);padding:10px 12px;font:inherit}
.mg-loy-on{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(244,239,226,.03)}
.mg-loy-on .tog{width:56px;height:32px;border-radius:16px;position:relative;background:rgba(244,239,226,.12)}
.mg-loy-on .tog::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:var(--mute);transition:transform .3s var(--ease),background .3s}
.mg-loy-on .tog.on{background:color-mix(in srgb,var(--acc) 30%,transparent)}.mg-loy-on .tog.on::after{transform:translateX(24px);background:var(--acc)}
.mg-loy-say{margin:14px 0 4px;color:var(--ink)}
.mg-promos{display:grid;gap:8px;margin:6px 0 14px}
.mg-promo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(244,239,226,.035)}
.mg-promo b{display:block;font-size:16px;font-weight:500}.mg-promo span{display:block;font-size:13.5px;color:var(--mute)}
.mg-promo-new{display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr 1fr 1fr;gap:12px;align-items:end}
.mg-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}.mg-check input{width:auto}
@media(max-width:760px){.mg-loy{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-promo-new{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-promo-new label:first-child{grid-column:1/-1}}
/* the customer's perks (2026-10-21): the loyalty as dots, the rewarded one a lighter gold; each promotion on a wash */
.perks{margin-top:22px;padding:18px 18px 14px;border-radius:var(--r);background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(244,239,226,.03))}
.perks h3{font:400 clamp(19px,4.6vw,22px)/1.3 var(--display);margin:8px 0 12px}
.perks-dots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.perks-dots i{width:14px;height:14px;border-radius:50%;background:rgba(244,239,226,.12)}
.perks-dots i.on{background:var(--acc)}.perks-dots i.gift{background:color-mix(in srgb,var(--acc) 40%,transparent)}
.perks-promo{padding:12px 14px;border-radius:12px;background:rgba(244,239,226,.04);margin-top:8px}
.perks-promo b{display:block;font-size:16px;font-weight:500}.perks-promo span{display:block;font-size:14px;color:var(--mute)}
.opt.has-promo span{color:var(--acc)}
/* the loyalty tab's fields keep to their own column; the dates get room; the first-visit box reads as a sentence (2026-10-21) */
.mg-loy{grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,.8fr)}
.mg-loy input,.mg-loy select,.mg-promo-new input,.mg-promo-new select{width:100%;min-width:0;box-sizing:border-box}
.mg-promo-new{grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1.4fr)}
.mg-promo-new label.mg-check{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.mg-promo-new label.mg-check input{width:20px;height:20px;flex:none}
@media(max-width:760px){.mg-loy{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-promo-new{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the promotion form in two rows: its words and its service, then the discount and the dates (2026-10-21) */
.mg-promo-new{grid-template-columns:repeat(4,minmax(0,1fr))}
.mg-promo-new > label:nth-child(1),.mg-promo-new > label:nth-child(2){grid-column:span 2}
.mg-promo-new label.mg-check{flex-direction:row;justify-content:flex-start;accent-color:var(--acc)}
@media(max-width:760px){.mg-promo-new{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-promo-new > label:nth-child(1),.mg-promo-new > label:nth-child(2){grid-column:1/-1}}
@media(max-width:520px){.mg-loy{grid-template-columns:minmax(0,1fr)}}   /* on a phone each loyalty field on its own line, whole (2026-10-21) */

/* ---- the booking (2026-10-21): one page that writes the request as a sentence. Three lines on washes, the open one warmer;
   a choice is shown by a gold wash or a glow, never a ring; nothing outlined, no rule between rows */
.wiz-top .grow{flex:1}
.bk2 .bk-garage{margin:-6px 0 2px;padding:8px 0}
.bk-lines{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.bk-line{border-radius:var(--r);background:var(--surf),var(--bg2);transition:background .35s var(--ease)}
.bk-line.open{background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(244,239,226,.02)),var(--bg2)}
.bk-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;min-height:72px;text-align:left;padding:14px 18px;color:inherit}
.bk-head small{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.bk-head b{display:block;font:400 clamp(19px,5.2vw,23px)/1.25 var(--display);margin-top:4px}
.bk-head b.ph{color:var(--mute)}.bk-line.open .bk-head b.ph{color:var(--ink)}
.bk-head em{font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.bk-panel{padding:0 12px 16px}
.bk-sub{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:18px 6px 10px}
.bk-panel>.bk-sub:first-child{margin-top:4px}
.bk-hint{font-size:15px;color:var(--mute);margin:4px 6px 12px;line-height:1.5}
.bk-back{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:12px 6px;display:inline-block}
.bk-panel>.bk-back:first-child{padding-top:0}
.empty{border-top:0}   /* an empty list says so in words; no rule above it (the design law, 2026-10-21) */
.bk2 .opt{background:rgba(244,239,226,.045)}
.bk2 .opt:active,.bk2 .opt.on,.bk2 .tile:active,.bk2 .tile.on,.bk2 .day.on,.bk2 .slot:active,.bk2 .slot.on{box-shadow:none;background:color-mix(in srgb,var(--acc) 20%,var(--bg2))}
.bk2 .opt.more b{font:500 17px/1.2 var(--body)}
.bk2 .tile{background:rgba(244,239,226,.045)}
.bk2 .tile.wide{width:100%;min-height:104px;margin-top:12px}
.bk-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk-kinds button{min-height:88px;border-radius:var(--r-s);background:rgba(244,239,226,.05);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px;text-align:left;font-size:15px;line-height:1.2;color:inherit}
.bk-kinds svg{width:24px;height:24px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bk-kinds button.on,.bk-kinds button:active{background:color-mix(in srgb,var(--acc) 20%,var(--bg2))}
.bk-ask{margin-top:18px}
.bk-ask>p{font-size:16px;margin:0 6px 10px}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chips button{min-height:44px;padding:10px 16px;border-radius:999px;background:rgba(244,239,226,.06);font-size:15px;color:inherit}
.bk-chips button.on{background:color-mix(in srgb,var(--acc) 28%,var(--bg2))}
.bk2 .carmap{margin:4px auto 10px}
.bk-safe{margin:6px 6px 4px;padding:12px 14px;border-radius:14px;background:rgba(255,140,110,.11);color:#ffc9bb;font-size:15px;line-height:1.5}
.bk-safe a{color:inherit;text-decoration:underline;white-space:nowrap}
.bk-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-quick button{min-height:72px;border-radius:var(--r-s);background:rgba(244,239,226,.06);text-align:left;padding:12px 14px;color:inherit}
.bk-quick button small{display:block;font-size:13px;color:var(--mute)}.bk-quick button small::first-letter{text-transform:uppercase}
.bk-quick button b{display:block;font:400 22px/1.15 var(--body);font-variant-numeric:tabular-nums;margin-top:4px;white-space:nowrap}
.bk-quick button.on,.bk-quick button:active{background:color-mix(in srgb,var(--acc) 22%,var(--bg2))}
.bk-find{display:block;width:100%;margin:2px 0 12px;padding:13px 16px;border:0;border-radius:14px;background:rgba(244,239,226,.06);color:var(--ink);font:inherit;font-size:16px;outline:0;-webkit-appearance:none;appearance:none}   /* 16 px: a phone never zooms on it */
.bk-find:focus{background:rgba(244,239,226,.09)}.bk-find::placeholder{color:var(--mute)}
.bk2 .tiles.three .tile.mini{justify-content:flex-start;padding-top:13px}   /* the makes: emblems and names line up across a row, a name on two lines (Mercedes-Benz) runs down */
.bk-years{display:flex;gap:8px;overflow-x:auto;padding:2px 12px 8px;margin:0 -12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.bk-years::-webkit-scrollbar{display:none}
.bk-years button{flex:none;min-width:68px;min-height:48px;border-radius:12px;background:rgba(244,239,226,.06);font:400 17px/1 var(--body);font-variant-numeric:tabular-nums;color:inherit}
.bk-years button.on{background:color-mix(in srgb,var(--acc) 26%,var(--bg2))}
.bk2 .swc.on span{color:var(--acc)}
.bk2 .swc:active i,.bk2 .swc.on i{box-shadow:inset 0 -10px 18px rgba(0,0,0,.35),inset 0 8px 14px rgba(255,255,255,.16),0 0 20px color-mix(in srgb,var(--acc) 60%,transparent)}
.bk2 .days{margin:0 -12px;padding:2px 12px 12px}
.bk2 .day{background:rgba(244,239,226,.05)}.bk2 .slot{background:rgba(244,239,226,.06)}
.bk2 .hear{box-shadow:none;background:color-mix(in srgb,var(--acc) 16%,transparent)}
.bk-end{margin-top:22px}
.bk-voice-open{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:100%;text-align:left;padding:16px 18px;border-radius:var(--r);background:rgba(244,239,226,.04);color:inherit}
.bk-voice-open svg{width:26px;height:26px;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round}
.bk-voice-open b{display:block;font-size:16px;font-weight:500}.bk-voice-open span{display:block;font-size:14px;color:var(--mute);margin-top:2px;line-height:1.45}
.bk-voice{border-radius:var(--r);background:rgba(244,239,226,.03)}
.bk-voice .rec{margin:0;padding:22px 0 8px}
.bk2 .rec button.mic{box-shadow:none;background:color-mix(in srgb,var(--acc) 14%,var(--bg2))}
.bk2 .rec button.mic::after{box-shadow:0 0 26px color-mix(in srgb,var(--acc) 45%,transparent)}
.bk-voice-after{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 14px 14px}
.bk-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:20px 6px 4px;font-size:15px;color:var(--mute)}
.bk-total b{color:var(--ink);font-weight:500;font-size:17px;white-space:nowrap}
.bk-promo{margin:2px 6px 0;font-size:14px;color:var(--acc)}
.bk2 .bk-end .gold{margin-top:16px}
.bk2 .okmark{box-shadow:none;background:color-mix(in srgb,var(--acc) 16%,transparent)}
.bk-recap{text-align:center;color:var(--mute);font-size:15px;margin:-6px 0 26px}
.bk-hint.bk-center{text-align:center;margin-top:16px}
.bk-acts{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:24px}
.bk-sheet{padding:0;margin-top:6px}
@media (max-width:380px){.bk-kinds{grid-template-columns:1fr 1fr}}