/* Tmavý svet webu VAGMA (tokeny z :root vo web/build.py), jeden červený akcent, ovládacie prvky aspoň 44 px. Bez inline štýlov (CSP). */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(/fonts/montserrat-regular.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(/fonts/montserrat-medium.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(/fonts/montserrat-semibold.woff2) format('woff2')}
:root{
  --bg:#0E0F11;--surface:#17181B;--surface2:#1F2125;--line:#2A2C31;--line2:#3A3D43;
  --ink:#F2F3F5;--muted:#A9ADB5;--soft:#868B94;--accent:#E4202A;--accent-hover:#C41A23;--sel:#1E1416;--sel-line:#5A2226;--sel-ink:#FF8A90;
  --ok:#43B581;--ok-bg:#16281F;--ok-line:#2C5A44;--warn:#E3A33B;--warn-bg:#241D11;--warn-line:#5C4A24;--warn-ink:#F3C979;--err:#FF6B72;--err-bg:#2A1416;--err-line:#6E2C31;
  --f:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Lepiaca lišta s tlačidlom nesmie zakryť pole, na ktoré ide fokus. */
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:120px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f)}
/* Booking shell (nie admin ani prihlásenie): auto z loga ako jemná čiara za hlavičkou, orezaná okrajom. Farbu a priehľadnosť nesie SVG. */
body.book{background-image:url(/app/logo-car.svg);background-repeat:no-repeat;background-position:left -36px top 118px;background-size:110% auto}
@media (min-width:720px){body.book{background-position:center top 96px;background-size:860px auto}}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:3px}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
h1{margin:4px 0 8px;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h2{margin:0;font-size:17px;line-height:1.3;font-weight:600}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* kostra */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.top .logo{display:inline-flex;align-items:center;min-height:44px}
.top .logo img{display:block;width:120px;height:auto}
.top .tel{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.top .tel:hover{text-decoration:underline}
.main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:24px 16px 40px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 16px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--soft);font-size:13px}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
@media (min-width:720px){.foot{justify-content:center;gap:0 32px}}

/* texty */
.lead{margin:0 0 20px;color:var(--muted);font-size:15px}
.meta{margin:0;color:var(--muted);font-size:14px}
.steps{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--soft);font-size:13px;font-weight:500}
.steps .bars{display:flex;gap:6px;width:120px}
.steps i{flex:1;height:3px;border-radius:3px;background:var(--line)}
.steps i.on{background:var(--accent)}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 4px;color:var(--muted);font-size:14px;text-decoration:none}
.back::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.back:hover{color:var(--ink)}
.legal{margin:0;color:var(--soft);font-size:13px}
.legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}

/* tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 20px;border:0;border-radius:14px;background:var(--accent);color:#fff;font-size:16px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-hover)}
.btn[disabled]{background:var(--surface2);color:var(--soft);cursor:progress}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted)}
.btn.sm{width:auto;min-height:44px;border-radius:12px;font-size:14px}
.link,.more{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:var(--ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.more{margin-top:10px;font-size:15px}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:16px}
.pager .next{margin-left:auto}
.acts{display:grid;gap:10px;margin:16px 0}
.cta{position:sticky;bottom:0;z-index:2;display:grid;gap:8px;margin:24px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.cta .meta{text-align:center;font-size:13px}

/* krok 1: služby */
.svcs{display:grid;gap:24px;min-width:0}
/* Skupina služieb: nadpis a karta s riadkami, všetko viditeľné. */
.rep{display:grid;gap:12px;margin:16px 0 0;padding:20px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--surface)}
.rep h2{font-size:20px;line-height:1.25}
.rep p{margin:0;color:var(--muted);font-size:15px}
.onsite{margin-top:32px}
.onsite>.lead{margin:2px 0 16px}
.grp h3{margin:0 0 2px;font-size:17px;font-weight:600;line-height:1.35}
.from{display:flex;align-items:center;gap:6px;margin:2px 0 0;color:var(--warn-ink);font-size:13px;font-weight:500}
.from .ic{flex:none;width:14px;height:14px}
.grp-c{margin-top:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.grp.add h3{font-size:15px;color:var(--muted)}
.svc+.svc{border-top:1px solid var(--line)}
.svc:has(.svc-main input:checked){background:var(--sel)}
.svc-main{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 14px;align-items:center;min-height:56px;padding:10px 16px;cursor:pointer}
.svc-main input{width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.svc-main:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-3px}
.svc-main:has(input:focus-visible) input{outline:none}
.svc-text{display:grid;gap:0}
.svc-text b{font-weight:600;line-height:1.35}
.svc .meta{font-size:13px}
.svc .price{max-width:11em;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.var{padding:0 16px 14px 52px}
/* Výber variantu len pri zaškrtnutej službe; prehliadač bez :has ukáže všetky. */
.svc:not(:has(.svc-main input:checked)) .var{display:none}
.var legend{margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:block}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.typ legend{margin:0 0 8px;padding:0;color:var(--muted);font-size:14px;font-weight:600}
.typ legend span{font-weight:400}
/* Poptávka: šest běžných potřeb, kontakt a volitelné podrobnosti. Stejné tokeny jako web a dílna. */
.request-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:20px 0 4px}.request-choices legend{grid-column:1/-1}
.request-choice{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--surface);cursor:pointer}
.request-choice input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.request-choice span{display:grid;gap:4px;min-width:0}
.request-choice b{font-size:15px;line-height:1.35;font-weight:600}
.request-choice small{color:var(--muted);font-size:12px;line-height:1.5}
.offer{margin:0 0 20px;padding:16px;border:1px solid var(--sel-line);border-radius:14px;background:var(--sel)}
.offer-k{margin:0 0 6px;color:var(--sel-ink);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.offer-h{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.35}
.offer-s{margin:0 0 6px;font-size:15px}
.offer ul{margin:0 0 10px;padding-left:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:15px}
.offer li::marker{color:var(--accent)}
.request-choice:has(input:checked){border-color:var(--accent);background:var(--sel)}
.request-choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.request-choice:hover{border-color:var(--muted)}
.request-call{display:flex;justify-content:center;width:100%;margin:20px 0 8px}
.request-choices legend{margin-bottom:12px;font-size:15px;font-weight:600}.request-choices legend span{color:var(--muted);font-weight:400}
.callback>.hint{margin:0;color:var(--muted);font-size:14px}
.request-details>summary{font-size:14px}
.request-details>summary span{color:var(--muted);font-weight:400}
.request-details .fld{margin-top:16px}
.callback .cta{position:static}
.callback input,.callback textarea{caret-color:var(--ink)}
.request-done{margin:24px 0}
.request-tick{width:64px;height:64px;margin:0 auto 20px;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cd.agenda{background:var(--surface)}
.cd.agenda em{color:var(--muted);font-variant-numeric:tabular-nums}
.cd.agenda.has-bookings em{color:var(--ink);font-weight:600}
@media (max-width:360px){.request-choices{gap:8px}.request-choice{padding:14px 10px;gap:8px}.request-choice b{font-size:14px}.request-summary{align-items:flex-start;flex-direction:column;gap:0}}
@media (max-width:420px){.var{padding-left:16px}}

/* krok 2: termín */
/* Čas je tlačidlo (Tab, Enter, Space): ťuknutie ho odošle. Vybraný čas po návrate nesie aria-current. */
.near{display:flex;align-items:center;width:100%;min-height:52px;margin:0 0 12px;padding:12px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--surface2);font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.near:hover,.slot:hover{border-color:var(--muted)}
.lock{display:flex;align-items:center;gap:12px;min-height:56px;margin:0 0 8px;padding:12px 16px;border:1px dashed var(--line2);border-radius:14px;color:var(--soft);font-size:14px}
.ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.days{display:grid;gap:8px}
.day{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.day[open]{border-color:var(--line2)}
.day summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;list-style:none;cursor:pointer}
.day summary::-webkit-details-marker{display:none}
.day summary b{font-weight:600}
.day summary span{margin-left:auto;color:var(--ok);font-size:13px;font-weight:600;white-space:nowrap}
.day summary::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 3px 4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.day[open] summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.day.full{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 16px;background:none;color:var(--soft)}
.day.full b{font-weight:600}
.day.full span{font-size:13px;font-weight:600}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px 12px}
.slot{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0;border:1px solid var(--line2);border-radius:12px;background:none;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.slot[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (min-width:560px){.slots{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* oznámenia a chyby */
.note{margin:0 0 16px;padding:14px 16px;border-radius:14px;background:var(--surface2);color:var(--muted);font-size:15px}
.note p{margin:0}
.note p+p,.note p+.btn{margin-top:10px}
.note a{color:var(--ink)}
.note .acts{margin:14px 0 0}
a.note.wait{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line2)}
a.note.wait:hover{border-color:var(--accent)}
.note.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.errors{margin:0 0 16px;padding:14px 16px;border:1px solid var(--accent);border-radius:14px;background:var(--sel)}
.errors:focus-visible{outline-offset:3px}
.errors h2{margin:0 0 4px;font-size:16px}
.errors p{margin:0}
/* Odrážka je vlastná a drží sa prvého riadku: pri zalomenej hláške by ju zoznam vedľa inline-block odkazu posadil k poslednému. */
.errors ul{margin:0;padding:0;list-style:none}
.errors li{position:relative;padding-left:16px}
.errors li::before{content:"•";position:absolute;left:2px;top:10px;line-height:1.55}
.errors a{display:inline-block;padding:10px 0;color:var(--ink)}
.done h1{margin-bottom:12px}

/* krok 3: údaje */
.f{display:grid;gap:16px}
.fld{display:grid;gap:6px;min-width:0}
.fld label{color:var(--muted);font-size:14px;font-weight:600}
.fld label span{font-weight:400}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);font-size:16px}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--soft)}
.fld .hint{margin:0;color:var(--soft);font-size:13px}
.fld .msg{margin:0;color:var(--err);font-size:13px;font-weight:500}
.fld.err input,.fld.err textarea{border-color:var(--accent)}
.sum{display:grid;gap:4px;margin:0 0 20px;padding:14px 16px;border:1px solid var(--line);border-radius:14px}
.sum b{font-weight:600}
.sum span{color:var(--muted);font-size:14px}

/* kontrola */
.rev{padding:14px 0 16px;border-top:1px solid var(--line)}
.rev-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.items{display:grid;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.items li{display:flex;justify-content:space-between;gap:16px}
.items b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.when{margin:0 0 4px;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
dl{display:grid;gap:8px;margin:0}
dl div{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);gap:12px}
dt{color:var(--muted);font-size:14px}
dd{margin:0;overflow-wrap:break-word;white-space:pre-line}
form.note{display:grid;gap:10px;justify-items:start}
form.note.pause{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px 10px 16px}
form.note.pause p{font-size:14px;font-weight:600}

/* správa termínu: lístok s termínom, odkazy do kalendára a mapy */
.tick{display:grid;place-items:center;width:52px;height:52px;margin:0 0 14px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.tick.wait{background:var(--warn-bg);color:var(--warn-ink)}
.tick svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ticket{margin:16px 0;border:1px solid var(--line2);border-radius:16px;overflow:hidden}
.ticket.off .t1{text-decoration:line-through}
.t1{padding:16px;background:var(--surface)}
.t1 span{display:block;color:var(--muted);font-size:14px}
.t1 b{display:block;font-size:28px;line-height:1.15;font-weight:600;font-variant-numeric:tabular-nums}
.t2{display:grid;gap:14px;padding:16px;border-top:1px dashed var(--line2);font-size:15px}
/* Dlhá cena (napr. „1 290 Kč + poplatek stanice“) sa zalomí pod názov, nestlačí ho do úzkeho stĺpca. */
.ticket .items{margin:0}
.ticket .items li{flex-wrap:wrap;gap:0 16px}
.ticket .items li span{flex:1 1 14ch}
.ticket .items li b{margin-left:auto}
.links{margin:0 0 16px;padding:0;list-style:none;overflow:hidden;border:1px solid var(--line);border-radius:14px}
.links li+li{border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 16px;font-weight:600;text-decoration:none}
.links a::after{content:"";flex:none;width:7px;height:7px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg)}
.links a:hover{background:var(--surface)}
.links.set a{gap:12px;padding:10px 16px}
.links .lt{display:grid;gap:2px}
.links .lt span{color:var(--muted);font-size:14px;font-weight:400}
.links .lt .miss{color:var(--warn);font-weight:600}
/* `overflow:hidden` by orezal vonkajší obrys fokusu, preto ide dovnútra. */
.links a:focus-visible{outline-offset:-3px}

/* admin: hlavička, spodná lišta, karta STOP, agenda dňa, detail a presun termínu */
.ah{margin:0 0 12px}
.ah .d{display:block;color:var(--muted);font-size:13px}
.ah h1{margin:2px 0 0}
.lbl{margin:16px 0 6px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em}
.stop{display:grid;gap:12px;margin:0 0 4px;padding:14px;border:1px solid var(--ok-line);border-radius:14px;background:var(--surface)}
.stop .st{display:flex;align-items:flex-start;gap:10px}
.stop .led{flex:none;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--ok)}
.stop h2{font-size:15px}
.stop p{margin:2px 0 0;color:var(--muted);font-size:13px}
.stop p a{display:inline-block;margin:-14px 0;padding:14px 0;color:var(--ink)}
.stop .btn{width:100%}
.stop.paused{border-color:var(--warn-line);background:var(--warn-bg)}
.stop.paused .led{background:var(--warn)}
.stop.paused h2{color:var(--warn-ink)}
.tl{display:grid;gap:6px}
.bk{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;min-height:56px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none}
.bk:hover{border-color:var(--line2)}
.bk.off{background:none;color:var(--soft)}
.bk.jr{grid-template-columns:minmax(0,1fr)}
.tm{font-weight:600;font-variant-numeric:tabular-nums}
.tm small{display:block;color:var(--soft);font-size:12px;font-weight:500}
.bk-b{display:grid;gap:2px;min-width:0}
.bk-b b{font-weight:600;overflow-wrap:anywhere}
.car{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pill{display:inline-block;padding:3px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-size:11px;font-weight:600}
.pill.ok{border-color:var(--ok-line);color:var(--ok)}
.pill.wait{border-color:var(--warn-line);color:var(--warn)}
.st-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px}
.note.ok{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ink)}
.rows{gap:0;margin:0 0 4px}
.rows div{grid-template-columns:minmax(96px,34%) minmax(0,1fr);padding:8px 0;border-bottom:1px solid var(--line)}
.rows dd{font-weight:600;text-align:right}
/* Súhrny zákazky a mesiaca: riadky bez 34 % stĺpca (label 1fr, hodnota auto), výsledok v pásme a Kč/h so stavom voči sadzbe. Farba = význam, vždy aj s textom. */
.rows.sr div{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
.rows.sr dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.rows.sr.dim dt{font-size:13px}
.rows.sr.dim dd{font-size:14px;font-weight:500}
.rows.sr div:has(+ .tot){border-bottom:0}
.rows.sr .tot{margin-top:6px;padding-top:12px;border-top:2px solid var(--muted);border-bottom:0}
.rows.sr .tot dt{color:var(--ink);font-size:15px;font-weight:600}
.rows.sr .tot dd{font-size:26px;line-height:1.2;font-weight:600}
.res{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 4px;padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--surface2)}
.res-l{display:grid;gap:2px;min-width:0}
.res-l b{font-size:15px;font-weight:600}
.res-l span{color:var(--muted);font-size:13px}
.res-v{flex:none;font-size:26px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.res.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.res.ok .res-v,.res.ok .res-l span{color:var(--ok)}
.res.err{border-color:var(--err-line);background:var(--err-bg)}
.res.err .res-v,.res.err .res-l span{color:var(--err)}
.ph{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ph-l{display:grid;gap:2px;min-width:0}
.ph-l b{color:var(--muted);font-size:14px;font-weight:500}
.ph-l span{color:var(--muted);font-size:13px}
.ph-v{font-size:20px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp{grid-column:1/-1;justify-self:start;padding:4px 10px;border:1px solid var(--line2);border-radius:12px;background:var(--surface2);color:var(--ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cmp.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.cmp.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)}
.acts.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.acts.two form,.acts.two div,.acts.two .cancel{margin:0}
.acts.two .btn{padding:0 10px}
@media (max-width:359px){.acts.two{grid-template-columns:minmax(0,1fr)}}
.acts .full{grid-column:1/-1}
.acts .btn,.cancel .btn,.confirm .btn{width:100%}
.acts .btn[disabled]{cursor:not-allowed}
.btn.ghost[disabled]{border-color:var(--line);color:var(--soft)}
.cancel[open]{grid-column:1/-1}
.cancel summary{list-style:none;cursor:pointer}
.cancel summary::-webkit-details-marker{display:none}
.confirm{display:grid;gap:12px;margin:12px 0 0;padding:14px;border:1px solid var(--accent);border-radius:14px;background:var(--sel);font-size:14px}
.confirm p{margin:0}
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:6px 0;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--accent)}
.check small{display:block;color:var(--soft);font-size:13px}
.tabs{position:sticky;bottom:0;z-index:2;border-top:1px solid var(--line);background:var(--bg);padding-bottom:env(safe-area-inset-bottom)}
.tabs ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:640px;margin:0 auto;padding:0;list-style:none}
.tabs a{display:grid;justify-items:center;align-content:center;gap:3px;min-height:56px;padding:8px 0;color:var(--soft);font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}
.tabs a:hover,.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a:focus-visible{outline-offset:-3px}
.tabs .ic{width:22px;height:22px}
.tabs a{position:relative}
.bdg{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.tabs .plus a{padding:4px 0 8px}
.tabs .pl{display:grid;place-items:center;width:40px;height:40px;margin-top:-14px;border-radius:12px;background:var(--accent);color:#fff}

/* admin: kalendár mesiaca, deň a hromadné otvorenie */
.ah.nav{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mnav{display:flex;flex:none;gap:6px}
.ib{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line2);border-radius:12px;color:var(--ink);text-decoration:none}
.ib:hover{border-color:var(--muted)}
.ib .ic{width:18px;height:18px}
.cal{width:calc(100% + 8px);margin:0 -4px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.cal th{padding:0 0 2px;color:var(--soft);font-size:11px;font-weight:600;letter-spacing:.04em}
.cal td{padding:0}
/* Pri 360 px dá sedem stĺpcov s medzerou 4 px bunku 43 px, s medzerou 2 px 45 px. Pod 340 px sa 44 px nedosiahnu (WCAG 2.5.8 žiada 24 px). */
@media (max-width:400px){.cal{width:calc(100% + 4px);margin:0 -2px;border-spacing:2px}}
.cd{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;min-height:54px;padding:6px 0 12px;border:1px solid transparent;border-radius:10px;color:var(--muted);text-decoration:none}
.cd:hover{border-color:var(--line2)}
.cd b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.cd em{font-size:11px;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.cd.open,.cd.full{color:var(--ink)}
.cd.open{border-color:var(--line2);background:var(--surface)}
.cd.full{border-color:var(--sel-line);background:var(--sel)}
.cd.full em{color:var(--sel-ink)}
.cd.hol{border-style:dashed;border-color:var(--line2)}
.cd.past,.cd.past em{color:var(--soft)}
.cd.past{border-color:transparent;background:none}
.cd[aria-current="date"] b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cd.has::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--warn)}
/* Pruh naplnenia je natívny <meter>: CSP nepustí inline štýl so šírkou pruhu. */
.fill{position:absolute;right:7px;bottom:6px;left:7px;width:auto;height:3px;border:0;border-radius:3px;background:var(--line2);-webkit-appearance:none;appearance:none}
.fill::-webkit-meter-bar{height:3px;border:0;border-radius:3px;background:var(--line2)}
.fill::-webkit-meter-optimum-value{border-radius:3px;background:var(--ink)}
.fill::-moz-meter-bar{border-radius:3px;background:var(--ink)}
.cd.full .fill::-webkit-meter-optimum-value{background:var(--accent)}
.cd.full .fill::-moz-meter-bar{background:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;color:var(--muted);font-size:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-block;width:14px;height:14px;border:1px solid transparent;border-radius:4px}
.lg.open{border-color:var(--line2);background:var(--surface)}
.lg.full{border-color:var(--sel-line);background:var(--sel)}
.lg.shut{border-color:var(--line2)}
.lg.hol{border:1px dashed var(--line2)}
.lg.has{width:8px;height:8px;margin:0 3px;border-radius:50%;background:var(--warn)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grp legend{margin:0 0 6px;color:var(--muted);font-size:14px;font-weight:600}
.grp legend span{font-weight:400}
.grp .hint{margin:6px 0 0;color:var(--soft);font-size:13px}
.chips.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.chips.wk .chip span{display:flex;justify-content:center;padding:0;border-radius:12px}
/* Služby dňa: zbalený blok vo formulári dňa; štítok `vypnuto` v záhlaví ukáže počet aj zbalený. */
.dsv{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.dsv summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;list-style:none;cursor:pointer;font-size:15px;font-weight:600}
.dsv summary::-webkit-details-marker{display:none}
.dsv summary::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 3px auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.dsv[open] summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.dsv fieldset{padding:0 16px 10px}
.dsv form.f fieldset{padding:0}
.dsv.bulk{margin-top:20px}

/* admin: Zapsat, poptávky, nastavenia a prehľad podľa zdrojov */
.f>.errors{margin:0}
/* Pole dvojice sa smie zúžiť na stĺpec: dátumové pole má vlastnú šírku, ktorá je v karte služby pri 390 px väčšia než stĺpec. */
.two>.fld{grid-template-columns:minmax(0,1fr)}
.f>.lbl{margin:12px 0 -6px}
.pq{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--warn-line);border-radius:14px;background:var(--surface)}
.pq b{font-weight:600;overflow-wrap:anywhere}
.pq p{margin:2px 0;font-size:14px;white-space:pre-line;overflow-wrap:anywhere}
.pq .meta{font-size:13px;overflow-wrap:anywhere}
.pq .acts{margin:8px 0 0}
.old{margin-top:20px}
.old summary{padding:12px 0;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer}
.old .pq{border-color:var(--line)}
.svc-set{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.svc-set summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px;list-style:none;cursor:pointer}
.svc-set summary::-webkit-details-marker{display:none}
.svc-set summary::after{content:"";flex:none;width:7px;height:7px;margin:0 2px 3px auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.svc-set[open] summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.svc-set .sn{display:grid;gap:2px;min-width:0;font-size:15px;font-weight:600;line-height:1.35}
.svc-set .sn .meta{font-size:13px;font-weight:400}
#push .fld{margin-top:14px}
.svc-b{display:grid;gap:12px;padding:0 16px 14px}
.svc-set .fld input{background:var(--bg)}
.ov{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ov th,.ov td{padding:12px 6px;border-bottom:1px solid var(--line);font-size:15px;text-align:right}
.ov thead th{color:var(--soft);font-size:11px;font-weight:600;letter-spacing:.04em;vertical-align:bottom}
.ov th:first-child{min-width:68px;text-align:left;overflow-wrap:anywhere}
@media (max-width:359px){.ov th,.ov td{padding:12px 3px;font-size:14px}.ov thead th{font-size:10px;letter-spacing:0}}
.ov tbody th,.ov tfoot th{font-weight:600}
.ov tfoot th,.ov tfoot td{border-top:2px solid var(--line2);border-bottom:0;font-weight:600}
.ov+.meta{margin-top:12px}

/* admin: zakázka (hlavička, karty, práce) */
.rows a.tel{display:inline-flex;align-items:center;min-height:44px}
/* Číslo zákazníka pod jeho menom (telefón je odkaz na mene) a odkaz na kartu auta v riadku stavu. */
.adm .rows dd .car{display:block}
.adm .st-line a.tel{display:inline-flex;align-items:center;min-height:44px}
.adm .f>.hint{margin:0;color:var(--soft);font-size:13px}
.jtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:20px 0 16px;padding:4px;border:1px solid var(--line);border-radius:14px}
.jtabs a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.jtabs a[aria-current="page"]{background:var(--surface2);color:var(--ink)}
.wl{display:grid;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.wi{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.wi.off{background:none;color:var(--soft)}
.wi-t{display:grid;gap:2px;min-width:0}
.wi-t b{font-weight:600;overflow-wrap:anywhere}
.wi form{margin:0}
.wi .btn{width:100%}
.dsv form.f{padding:0 16px 16px}
.dsv form.f+form.f{padding-top:0}
.wl+.meta,.rows+.meta{margin:12px 0 16px}
/* Časovač: lišta (Dnes, Dílna, zakázka), čas a tlačidlo v riadku práce, úseky v „Časy“ */
.runbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--ok-line);border-radius:14px;background:var(--surface)}
.runbar.idle{display:block;padding:0;border:0}
.runbar.idle .btn{overflow-wrap:anywhere}
.rb-t{display:grid;gap:2px;min-width:0}
.rb-t b{font-weight:600;color:var(--ok)}
.rb-t .car{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.rb-time{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.runbar form{grid-column:1/-1;margin:0}
.runbar .btn{width:100%}
.note form.f{margin-top:12px}
.wi-r{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wi-r .wt{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.run-st{color:var(--ok);font-weight:700}
.wi .btn.run{width:auto;min-width:132px;min-height:56px}
.dsv-b{display:grid;gap:10px;padding:0 16px 16px}
.dsv-b .lbl{margin:8px 0 0}
.sgs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sg{display:grid;gap:6px;font-size:14px}
.sg .dsv{background:var(--surface2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* admin shell (`body.adm`): menší nadpis a okraj, hustejšie poznámky; booking a prihlásenie ostávajú ako boli */
.adm h1{font-size:24px}
.adm .main{padding-top:16px}
.adm .note{margin-bottom:12px;padding:12px 14px;font-size:14px}
/* Hľadanie auta: pole a tlačidlo v jednom riadku. */
.adm .f.srch{margin-top:16px;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}
.adm .f.srch .btn{min-height:48px}
/* Riadok práce: „Časy“ a „Upravit“ vedľa seba, otvorený blok na celú šírku. */
.adm .wi .acts.two{margin:0}
.adm .acts.two>.dsv[open],.adm .acts.two>.dsv:only-child{grid-column:1/-1}

/* Nápoveda „?“: mriežka `1fr 44px`: nadpis (alebo legenda) vľavo, `summary` vpravo, text pod nimi na celú šírku. `details` je `display:contents`, takže jeho `summary` a text sú priamo bunky mriežky; zalomený nadpis tak rastie do výšky a nič nezakrýva. Cieľ 44×44 px, viditeľný krúžok 24 px. Bez JS. */
.adm .lh{display:grid;grid-template-columns:minmax(0,1fr) 44px;margin:16px 0 6px}
.adm .lh>.lbl,.adm .lh>.legend{grid-column:1;grid-row:1;display:flex;align-items:center;min-height:44px;margin:0}
.adm .lh>.legend{flex-wrap:wrap}
.adm .lh>.hlp{display:contents}
.hlp>summary{grid-column:2;grid-row:1;display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer}
.adm .lh .hlp::details-content{grid-column:1/-1;grid-row:2}
.adm .lh .hlp-b{grid-column:1/-1;grid-row:2}
.hlp>summary::-webkit-details-marker{display:none}
.hlp .q{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line2);border-radius:50%;color:var(--muted);font-size:13px;font-weight:600;line-height:1}
.hlp[open] .q{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.hlp>summary:focus-visible{outline-offset:-6px;border-radius:50%}
.hlp-b{margin:0 0 4px;padding:8px 0 8px 12px;border-left:2px solid var(--line2);color:var(--muted);font-size:14px;line-height:1.5}
.hlp-b p{margin:0}
.adm .f>.lh{margin:8px 0 -8px}
.adm .lh.lg-row{margin:8px 0 4px}

/* Návod: ťahák s číslom a text, karty krokov; banner na Dílne */
.adm .cheat{display:grid;gap:0;margin:0 0 4px;padding:0;list-style:none;border:1px solid var(--line);border-radius:14px}
.adm .cheat li{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;font-size:15px}
.adm .cheat li+li{border-top:1px solid var(--line)}
.adm .cheat .pill,.adm .wi-t h3 .pill{flex:none;min-width:24px;text-align:center}
.adm .wi-t h3{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:600}
.adm .note.intro .acts{margin:10px 0 0}

/* Fotky zakázky: dve tlačidlá (štítok s vstupom súboru), mriežka náhľadov 3 v rade, veľká fotka. Bez JS má každé tlačidlo pod sebou „Nahrát“, JS ho skryje (`hidden`). */
.fup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 8px}
.fup form{display:grid;gap:8px;margin:0;align-content:start}
.fup label.btn{position:relative}
.fup label.btn:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
#foto-stav{min-height:1.5em;margin:0 0 12px}
.fg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;padding:0;list-style:none}
.fg li{display:grid;gap:4px;min-width:0}
.fg a{display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--surface2)}
.fg a:focus-visible{outline-offset:-3px}
.fg img{display:block;width:100%;height:100%;object-fit:cover}
.fn{overflow:hidden;color:var(--muted);font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.fp{display:block;width:100%;max-width:100%;height:auto;margin:8px 0 16px;border-radius:14px;background:var(--surface2)}
.fp~.cancel{margin-top:12px}

/* Nový tok zákazky (návrh brand/protokoly/v2/aplikacia): lišta krokov, Přijmout pri termíne, karty dokumentov, riadky ponuky, súčet, nákres auta. */
.stp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 0 12px;padding:0;list-style:none}
.stp li{display:grid;gap:5px;color:var(--soft);font-size:11px;font-weight:500;overflow-wrap:anywhere}
.stp li::before{content:"";height:4px;border-radius:2px;background:var(--line)}
.stp .done::before{background:var(--sel-line)}
.stp .now{color:var(--ink);font-weight:600}
.stp .now::before{background:var(--accent)}
.pill.sel{border-color:var(--sel-line);color:var(--sel-ink)}
.bkx{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.go{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--sel-line);border-radius:14px;background:var(--sel);color:var(--sel-ink);font-size:14px;font-weight:600;text-decoration:none}
.go:hover{border-color:var(--accent)}
.doc{display:grid;gap:10px;margin:0 0 12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.doc form{margin:0}
.doc-h{display:grid;gap:2px}
.doc-h b{font-weight:600;overflow-wrap:anywhere}
.doc-h span,.doc .meta{color:var(--muted);font-size:13px}
.sends{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.sends .sent{color:var(--ok)}
.sends .failed{color:var(--err)}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 4px;padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--surface)}
.tot span{display:grid;gap:2px;font-weight:600}
.tot small{color:var(--muted);font-size:12px;font-weight:400}
.tot b{flex:none;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lns{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ln{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ln b,.ln label b{display:block;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.ln small{display:block;color:var(--muted);font-size:12px}
.ln em{font-style:normal;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ln input{width:104px;min-height:44px;padding:8px 10px;border:1px solid var(--line2);border-radius:12px;background:var(--surface2);font-size:16px;text-align:right}
.ln.err input{border-color:var(--accent)}
a.sum.lnk{color:inherit;text-decoration:none;margin:12px 0}
a.sum.lnk:hover{border-color:var(--line2)}
.sk{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
.fg.pick label{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--surface2);cursor:pointer}
.fg.pick input{position:absolute;top:8px;left:8px;width:22px;height:22px;margin:0;accent-color:var(--accent)}
.fg.pick label:has(input:checked){outline:2px solid var(--accent);outline-offset:-2px}
.fg.pick img{display:block;width:100%;height:100%;object-fit:cover}
.chk-r{display:grid;gap:6px}
.chk-r legend{margin-bottom:6px;color:var(--ink);font-size:14px;font-weight:600}
.chk-r .chip span{min-height:40px;padding:0 12px;font-size:13px}
.grp legend.lbl span{font-weight:400}
.bkx .go{align-self:center}
.adm .lh>.check,.adm .lh>.meta{grid-column:1;grid-row:1;align-self:center;margin:0}

/* súhlas s pripomienkami pod e-mailom (Adam 3. 11.) */
.consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;font-size:15px;line-height:1.45}.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}.consent small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* nákres pri príjme: ťuknutím pridať značku (Adam 3. 11.) */
.skw{display:grid;gap:10px}
.skw .chips.mk{justify-content:center;margin:0;padding:0;border:0}
.skw .hint.mk{margin:0;text-align:center}
.sk.tap{cursor:crosshair;touch-action:manipulation;border:1px dashed var(--line2);border-radius:14px}
.nmx>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:14px;font-weight:600}

/* podpis zákazníka prstom (Adam 3. 11.): biele pole ako papier aj v tmavom režime */
.sigw{display:grid;gap:8px}
canvas.sig{display:block;width:100%;max-width:600px;aspect-ratio:3/1;height:auto;margin:0 auto;background:#fff;border:1px solid var(--line2);border-radius:14px;touch-action:none;cursor:crosshair}
.sigact{display:flex;align-items:center;gap:12px}
.sigact .btn{width:auto;flex:none}
.sigact p{margin:0}