/* DB26 redesign (2. 10.) — the Claude Design handover "design_handoff_db26_mobile", phone first and
   responsive up to iPad and Mac browsers. Tokens and components of the new UI; app.css and shell.css
   still style what the design did not touch (the handover wizard, the PDF viewer, legacy dialogs). */

/* ---------- tokens (light; dark below — `data-theme` on <html> wins over the system) ---------- */
:root{
  --bg:#F6F7F4;--card:#FFFFFF;--card2:#E8EAE6;
  --acc:#1E3FB8;--accInk:#FFFFFF;--accSoft:#DCE3F8;
  --okSoft:#DCEFDF;--warnSoft:#FBEBD0;--critSoft:#F9DAD7;
  --note:#FFFBEA;--now:#D9ECDC;--pub:#F7E6E4;--fest:#FBE3F1;
  --solid:#1A1D1C;--solidInk:#FFFFFF;--scrim:rgba(10,12,11,.42);--glass:rgba(246,247,244,.94);
  --phP:#6B7280;--phS:#1E3FB8;--phF:#2B7A3B;--phD:#B86E00;
  /* vehicles in the grid: osobní green · dodávka yellow · nákladní orange · unknown grey */
  --vPb:#CDEBD3;--vPi:#1B5A2B;--vVb:#FFE680;--vVi:#5A4800;--vTb:#FFC48A;--vTi:#6B3300;--vUb:#E8EAE6;--vUi:#66706B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141615;--card:#1D201F;--card2:#262A28;--line:#3A403D;
    --acc:#8AA2FF;--accInk:#0E1633;--accSoft:#26305A;
    --okSoft:#1E3A25;--warnSoft:#3F2E12;--critSoft:#48201D;
    --note:#2E2A1E;--now:#1E3A25;--pub:#2A1C1B;--fest:#351D2B;
    --solid:#E6E8E3;--solidInk:#141615;--scrim:rgba(0,0,0,.6);--glass:rgba(29,32,31,.92);
    --phP:#9AA3AD;--phS:#8AA2FF;--phF:#6CBF7A;--phD:#E0A040;
    --vPb:#1F4A2B;--vPi:#A6E8B6;--vVb:#4A4010;--vVi:#F5DE6E;--vTb:#5A3112;--vTi:#FFB878;--vUb:#262A28;--vUi:#8F978F;
  }
}
:root[data-theme="dark"]{
  --bg:#141615;--card:#1D201F;--card2:#262A28;--line:#3A403D;
  --acc:#8AA2FF;--accInk:#0E1633;--accSoft:#26305A;
  --okSoft:#1E3A25;--warnSoft:#3F2E12;--critSoft:#48201D;
  --note:#2E2A1E;--now:#1E3A25;--pub:#2A1C1B;--fest:#351D2B;
  --solid:#E6E8E3;--solidInk:#141615;--scrim:rgba(0,0,0,.6);--glass:rgba(29,32,31,.92);
  --phP:#9AA3AD;--phS:#8AA2FF;--phF:#6CBF7A;--phD:#E0A040;
  --vPb:#1F4A2B;--vPi:#A6E8B6;--vVb:#4A4010;--vVi:#F5DE6E;--vTb:#5A3112;--vTi:#FFB878;--vUb:#262A28;--vUi:#8F978F;
}

/* ---------- icons: Material Symbols Rounded (fonts.css) ---------- */
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:22px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none;-webkit-user-select:none;flex:none}
.ms.f{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* ---------- the frame: views fill the screen above the tab bar; nothing but a view scrolls ---------- */
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.4 var(--body);overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;
  min-height:0}/* not app.css's 100vh: in iOS Safari that is the LARGE viewport, and the tab bar slid under Safari's floating toolbar */
#app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
#main{flex:1;min-height:0;position:relative;overflow:hidden;padding:0;max-width:none;margin:0}
.view{position:absolute;inset:0;display:flex;flex-direction:column;min-width:0}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pad{padding:12px 12px 28px}
.stack14{display:flex;flex-direction:column;gap:14px}
.col{width:100%;max-width:760px;margin:0 auto}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the offline / new-version bars sit in the flow above the app (api.js prepends them to body): the views shrink, nothing is covered */
#offline,#update{position:relative;top:auto;flex:none;padding-top:calc(8px + env(safe-area-inset-top))}
body>#offline:not([hidden])~#app,body>#update~#app{padding-top:0}
#offline:not([hidden])~#update,#update~#offline{padding-top:8px}
body>a[download],body>input{position:fixed;left:-9999px}/* handover.js's temporary nodes take no room */

/* ---------- tab bar (phones): a floating glass pill over the view (UAT, 3. 10.) · rail (wide) ----------
   The views run to the screen's bottom edge under it; --tbh is the room it takes there (a spacer ends every list, the map's
   buttons and the toast sit above it). Glass: the view shows through, blurred; a hairline rim, no solid fill. */
:root{--tbh:0px;--tbg:rgba(255,255,255,.62);--tbr:rgba(26,29,28,.12);--tbi:rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tbg:rgba(30,33,32,.72);--tbr:rgba(255,255,255,.14);--tbi:rgba(255,255,255,.06)}}
:root[data-theme="dark"]{--tbg:rgba(30,33,32,.72);--tbr:rgba(255,255,255,.14);--tbi:rgba(255,255,255,.06)}
@media (max-width:767px){:root{--tbb:max(10px,calc(env(safe-area-inset-bottom) - 12px));--tbh:calc(62px + var(--tbb))}}
.tabbar{position:absolute;z-index:20;left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));bottom:var(--tbb,10px);
  height:62px;display:flex;padding:5px;border:1px solid var(--tbr);border-radius:31px;background:var(--tbg);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--tbi),0 10px 30px rgba(20,24,22,.16),0 1px 3px rgba(20,24,22,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tabbar{background:var(--card)}}
.tabbar .tb{flex:1;min-width:0;height:100%;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);padding:0;color:color-mix(in srgb,var(--ink) 72%,transparent)}/* darker than --muted: the glass may sit on a white floor plan */
.tabbar .tbp{position:relative;width:100%;height:100%;border-radius:26px;display:grid;place-items:center;transition:background .15s}
.tabbar .tb .ms{font-size:26px;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.tabbar .tb[aria-selected="true"]{color:var(--acc)}
.tabbar .tb[aria-selected="true"] .tbp{background:var(--accSoft)}
.tabbar .tb[aria-selected="true"] .ms{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.tabbar .badge{position:absolute;top:2px;right:calc(50% - 26px);min-width:19px;height:19px;padding:0 5px;border-radius:10px;border:2px solid var(--card);
  background:var(--acc);color:#fff;font:700 10.5px/15px var(--display);text-align:center}
.tabbar .badge.crit{background:var(--crit)}
.tabbar .tbl{display:none;font:600 10px/1 var(--body)}
@media (max-width:767px){
  #main .scroll::after{content:'';display:block;flex:none;height:calc(var(--tbh) + 8px)}/* the last row scrolls clear of the bar */
}
@media (min-width:768px){
  #app{flex-direction:row;padding-left:env(safe-area-inset-left)}
  .tabbar{position:relative;left:auto;right:auto;bottom:auto;height:auto;border-radius:0;box-shadow:none;background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;
    flex:none;order:-1;flex-direction:column;justify-content:flex-start;gap:6px;width:84px;border:0;border-right:1px solid var(--line2);
    padding:12px 4px calc(12px + env(safe-area-inset-bottom))}
  .tabbar .tb{flex:none;height:62px;color:var(--muted)}
  .tabbar .tb[aria-selected="true"]{color:var(--acc)}
  .tabbar .tbp{width:58px;height:34px;border-radius:17px}
  .tabbar .badge{top:-3px;right:4px}
  .tabbar .tbl{display:block;font-size:11px}
}

/* ---------- toast: 14 px above the tab bar ---------- */
.toast{position:fixed;left:50%;right:auto;top:auto;bottom:calc(var(--tbh) + 14px);transform:translate(-50%,8px);opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;background:var(--solid);color:var(--solidInk);padding:9px 16px;border-radius:999px;
  font:500 13px/1.3 var(--body);max-width:88%;width:max-content;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:95}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:768px){.toast{left:calc(50% + 42px);bottom:24px}}

/* ---------- a confirmation (ask): over everything, the camera and the toast included ---------- */
.ask{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left))}
.ask-s{position:absolute;inset:0;background:var(--scrim)}
.ask-p{position:relative;width:min(380px,100%);display:flex;flex-direction:column;gap:6px;padding:18px 16px 14px;background:var(--card);color:var(--ink);border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);animation:askin .16s ease-out}
@keyframes askin{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.ask-t{font:700 17px/1.3 var(--display);overflow-wrap:anywhere}
.ask-l{font:500 15px/1.35 var(--body);color:var(--ink);overflow-wrap:anywhere}
.ask-f{display:flex;gap:8px;margin-top:12px}
.ask-b{flex:1;min-width:0;height:48px;padding:0 10px;border:0;border-radius:12px;background:var(--card2);color:var(--ink);font:600 15px/1 var(--body)}
.ask-b.pri{background:var(--acc);color:var(--accInk)}
.ask-b.crit{background:var(--crit);color:#fff}
@media (prefers-reduced-motion:reduce){.ask-p{animation:none}}

/* ---------- shared bits ---------- */
.sl{font:600 11px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 4px}
.box14{background:var(--card);border:1px solid var(--line2);border-radius:14px}
.segc{display:flex;gap:2px;padding:3px;background:var(--card2);border-radius:13px}
.segc button{flex:1;min-width:0;height:34px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 13px/1 var(--body);
  white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px}
.segc button[aria-pressed="true"]{background:var(--solid);color:var(--solidInk)}
.segc.glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line2);box-shadow:0 2px 10px rgba(20,24,22,.08)}
.b44{height:44px;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--body);padding:0 14px}
.bsolid{border:0;background:var(--solid);color:var(--solidInk)}
.bacc{border:0;background:var(--acc);color:var(--accInk)}
.dot{display:inline-block;flex:none;border-radius:50%}
.vch{display:inline-block;border-radius:5px;font-weight:600}
.v-p{background:var(--vPb);color:var(--vPi)}.v-v{background:var(--vVb);color:var(--vVi)}.v-t{background:var(--vTb);color:var(--vTi)}.v-u{background:var(--vUb);color:var(--vUi)}
.empty2{padding:28px 0;text-align:center;color:var(--muted)}

/* ---------- the sheet: bottom sheet on phones, a centred dialog on wide screens ---------- */
#sheet{position:fixed;inset:0;z-index:60;display:none}
#sheet.open{display:block}
#sheet .sh-scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;transition:opacity .2s}/* the whole screen: the host follows the visible viewport, the dim also covers what an iPad's keyboard bar floats over (iPad pass, 3. 10.) */
#sheet.in .sh-scrim{opacity:1}
#sheet .sh-p{position:absolute;left:0;right:0;bottom:0;max-height:84%;outline:0;display:flex;flex-direction:column;background:var(--bg);border-radius:20px 20px 0 0;
  padding:8px 12px calc(12px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#sheet.oncard .sh-p{background:var(--card)}/* not .card: app.css styles that class */
#sheet.in .sh-p{transform:none}
.sh-handle{width:38px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px;flex:none}
.sh-h{flex:none;display:flex;align-items:baseline;gap:8px;padding:0 4px 10px;min-width:0}
.sh-h .t{font:700 17px/1.2 var(--display)}
.sh-h .s{font:500 14px/1 var(--body);color:var(--muted)}
.sh-b{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
.sh-f{flex:none;display:flex;gap:8px;padding-top:10px}
#sheet{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100dvh)}/* the visible part of the screen: Safari's bars and the keyboard never cover a sheet */
@media (max-width:767px){html.kb #sheet .sh-p{padding-bottom:12px}}
@media (min-width:768px){
  #sheet .sh-p{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,calc(100% - 32px));max-height:min(82%,760px);border-radius:20px;
    transform:translate(-50%,-46%);opacity:0;transition:transform .22s,opacity .22s;padding:14px 14px 14px}
  #sheet.in .sh-p{transform:translate(-50%,-50%);opacity:1}
  .sh-handle{display:none}
}

/* ---------- the detail: a page sliding in from the right; a side panel on wide screens ---------- */
#drawer{position:fixed;inset:0;left:0;width:auto;z-index:50;background:var(--bg);transform:translateX(104%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:-10px 0 30px rgba(0,0,0,.08);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
#drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){#drawer,#sheet .sh-p{transition:none}}
@media (max-width:767px){#drawer{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100dvh)}}
@media (min-width:768px){#drawer{left:auto;width:min(500px,100%);border-left:1px solid var(--line2)}}
/* wide screens (a Mac, iPad landscape): the open detail docks beside the view instead of covering it — the list, the grid and the
   map stay whole next to it (master–detail); narrower ones keep it over the view, which would be too thin beside it (Mac pass, 3. 10.) */
@media (min-width:1100px){#main{transition:margin-right .3s cubic-bezier(.2,.8,.2,1)}body:has(#drawer.open) #main{margin-right:500px}}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){#main{transition:none}}

/* ---------- Harmonogram: assign banner, day strip, grid, chips ---------- */
.assign{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--acc);color:var(--accInk)}
.assign .as-top{display:flex;align-items:center;gap:10px}
.assign .as-t{flex:1;min-width:0;display:flex;flex-direction:column}
.assign .as-t b{font:700 14px/1.2 var(--body)}
.assign .as-t span{font:500 12px/1.3 var(--body);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assign :focus-visible{outline-color:var(--accInk)}
.assign .as-x{flex:none;border:0;background:rgba(255,255,255,.2);color:inherit;border-radius:10px;height:36px;padding:0 12px;font:600 13px/1 var(--body)}
.vpick{display:flex;gap:6px}
.vpick button{flex:1;min-width:0;height:34px;border:2px solid transparent;border-radius:10px;font:700 13px/1 var(--body);padding:0 4px}
.vpick button.on{border-color:var(--ink)}
.sh-b .vpick button{height:40px;font-size:13.5px}
.daystrip{flex:none;display:flex;gap:4px;overflow-x:auto;padding:8px 10px;border-bottom:1px solid var(--line2);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.daystrip::-webkit-scrollbar{display:none}
.dchip{flex:none;width:47px;padding:6px 0;border:1.5px solid transparent;border-radius:12px;background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px}
.dchip .dw{font:600 10.5px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.dchip .dn{font:700 19px/1.1 var(--display)}
.dchip .dp{width:16px;height:3px;border-radius:2px;background:var(--phP)}
.dchip.ph-stavba .dp{background:var(--phS)}.dchip.ph-festival .dp{background:var(--phF)}.dchip.ph-deinstalace .dp{background:var(--phD)}
.dchip.today{border-color:var(--acc)}
.dchip.on{background:var(--solid);color:var(--solidInk);border-color:transparent}
.grid-scroll{flex:1;min-height:0;position:relative;scroll-padding-top:32px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.g-row{display:grid;grid-template-columns:42px repeat(4,minmax(0,1fr)) minmax(0,1.1fr);min-height:36px;border-bottom:1px solid var(--line2)}
.g-head{position:sticky;top:0;z-index:2;min-height:0;background:var(--bg);border-bottom:1px solid var(--line);font:600 10.5px/1 var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.g-head .gh{padding:9px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-head .gnh{padding:9px 2px 9px 6px;text-align:left;color:var(--acc)}
.g-row.now{background:var(--now)}
.gt{padding:11px 0 0 7px;font:400 11.5px/1 var(--mono);color:var(--muted)}
.g-row.now .gt{font-weight:700;color:var(--ok)}
.gc{border:0;border-left:1px solid var(--line2);border-radius:0;background:transparent;padding:3px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:2px;min-width:0;color:var(--ink);font:inherit;text-align:left}
.gc.pub{background:var(--pub)}
.gc.fest{background:var(--fest)}/* the festival's opening hours, 10–21, every column */
.gc.over{box-shadow:inset 0 0 0 2px var(--crit)}
.gc.dropon{outline:2px solid var(--acc);outline-offset:-2px}
.gc:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.gz{color:var(--line);font-size:14px;line-height:1;text-align:center}
.gch{position:relative;display:block;padding:4px;border-radius:5px;font:600 11px/1.1 var(--body);letter-spacing:-.01em;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gch[data-bk]{cursor:grab}
.gch.t{font-style:italic}
.gch.pen::after{content:'✎';position:absolute;right:2px;top:1px;font:400 8.5px/1 var(--body);opacity:.8}
.gch.pen{padding-right:9px}
.gch .gout{margin-right:2px}
.gch.dragsrc{opacity:.3}
.gghost{position:fixed;left:0;top:0;z-index:90;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.28);transform-origin:50% 50%;will-change:transform}
.gm{font:700 10px/1 var(--body);color:var(--muted);text-align:center}
.gc.gnc{padding:4px 4px 4px 6px}
.gnt{font:500 10.5px/1.25 var(--body);color:var(--acc);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.g-end{height:calc(var(--tbh) + 24px)}/* phones: the last half hour scrolls clear of the floating tab bar */
.g-row.flash{animation:gflash 1.8s ease-out}
@keyframes gflash{0%,45%{background:var(--accSoft)}100%{background:transparent}}

.nodb{position:absolute;left:12px;right:12px;top:8px;z-index:30}

/* ---------- slot sheet ---------- */
.slotb{display:flex;flex-direction:column;gap:6px}
.sh-b>*,.slotb>*,.cands>*{min-width:0}/* a long name ellipsizes instead of widening the sheet */
.bk{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:6px 6px 6px 12px}
.brow{display:flex;align-items:center;gap:8px}
.bname{flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;color:var(--ink);font:inherit}
.bname .n{font:600 14.5px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bname .k{font:500 11.5px/1.3 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbtn{flex:none;height:34px;padding:0 10px;border:0;border-radius:9px;font:700 12.5px/1 var(--body)}
.vbtn:disabled{opacity:1;cursor:default}
.xbtn{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--crit);display:grid;place-items:center;padding:0}
.xbtn .ms{font-size:19px}
.bnote{align-self:stretch;border:0;background:none;padding:5px 0 1px;text-align:left;font:400 12.5px/1.3 var(--body);color:var(--muted);min-height:26px;white-space:normal}
.bnote.add{color:var(--acc);font-weight:500}
.bnote:disabled{cursor:default}
.sq.bq{height:38px;margin:4px 0 2px;font-size:16px}
.sl-gap{padding:12px 4px 2px}
.sq{width:100%;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--card);color:var(--ink);outline:0;font:400 16px/1 var(--body);margin-top:2px;-webkit-appearance:none;appearance:none}
.sq:focus{border-color:var(--acc)}
.cands{display:flex;flex-direction:column;gap:6px}
.cand{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;text-align:left;color:var(--ink);font:inherit}
.cand .n{flex:1;min-width:0;font:500 14px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand .k{flex:none;font:500 11.5px/1 var(--mono);color:var(--muted)}
.cand.txt{border-style:dashed;color:var(--acc)}
.cand.txt .ms{font-size:20px}
.quiet{font:400 14px/1.3 var(--body);color:var(--muted);padding:0 4px 4px}
/* the slot sheet (UAT, 3. 10.): the bookings, (+) under them, the new booking below; four matches tall, then it scrolls */
.slcard{display:flex;flex-direction:column;gap:6px}
.slfree{padding:8px 4px 2px}
.sladd{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;height:46px;margin-top:4px;border:1.5px dashed var(--line);border-radius:12px;
  background:transparent;color:var(--acc);font:600 15px/1 var(--body)}
.sladd .ms{font-size:24px}
.slnew{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2)}
.slnh{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.slnh .sl{padding:0 4px}
.slx{position:relative;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--card2);color:var(--muted);display:grid;place-items:center}
.slx::after{content:'';position:absolute;inset:-6px}
.slx .ms{font-size:18px}
.slc{max-height:calc(4 * 46px + 3 * 6px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.slc .cand{flex:none;height:46px;min-height:46px;padding-top:0;padding-bottom:0}
.slc[hidden],.slmore[hidden]{display:none}
.slmore{display:flex;flex-direction:column;gap:6px}
.slmore:empty{display:none}
.slmore>span{font:500 12px/1.2 var(--body);color:var(--muted);padding:0 4px}
.slnone{padding:12px 4px}
@media (max-width:767px){html.kb #sheet .sh-p{max-height:calc(100% - env(safe-area-inset-top) - 8px)}}/* the keyboard is up: the sheet may take what is left */

/* ---------- status sheet ---------- */
.sh-h .tk{font:600 14px/1 var(--mono);color:var(--acc)}
.stlist{display:flex;flex-direction:column;gap:2px}
.strow{width:100%;height:48px;display:flex;align-items:center;gap:12px;padding:0 10px;border:0;border-radius:12px;background:transparent;text-align:left;color:var(--ink)}
.strow .dot{width:16px;height:16px;background:var(--st)}
.strow .l{flex:1;font:600 15px/1 var(--body)}
.strow .ms{color:var(--acc)}
.strow.on{background:color-mix(in srgb,var(--st) 16%,transparent)}

/* ---------- Layout (Task 10) ---------- */
/* the map fills the view and stays white in dark (no filter); the floor switch, + − ⤢ and the peek float over it */
.v-plan{background:#FFFFFF;overflow:hidden}
.lx-vp{position:absolute;inset:0;overflow:hidden;background:#FFFFFF;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.lx-vp.drag{cursor:grabbing}
.lx-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.lx-stage img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;user-select:none;filter:none}
.lx-stage img.ld{visibility:hidden}
/* a marker: an 18 px disc, a 10 px hit pad (≈ 38 px), the same size on screen at any zoom (--mks = 1 / scale) */
.lx-mk{position:absolute;z-index:1;display:flex;padding:10px;border:0;border-radius:50%;background:none;transform:translate(-50%,-50%) scale(var(--mks,1));cursor:pointer}
.lx-mk .lx-d{display:block;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--card)}
.lx-mk.on{z-index:5}
.lx-mk.on .lx-d{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--c)}
.lx-vp{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}/* a long press is a note, not the image menu */
.lx-nx{position:absolute;z-index:2;width:30px;height:30px;padding:0;border:0;background:none;transform:translate(-50%,-50%) scale(var(--mks,1));cursor:pointer;--c:#1E6BFF;pointer-events:none}
.lx-nx .lx-x{pointer-events:auto}/* only the ✕ itself answers: a disc it overlaps keeps the rest of its pad */
.lx-nx.t{--c:#E11D2E}.lx-nx.d{--c:#008D25}
.lx-x{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
.lx-x::before,.lx-x::after{content:'';position:absolute;left:50%;top:50%;width:24px;height:6px;margin:-3px 0 0 -12px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1.5px var(--card)}
.lx-x::before{transform:rotate(45deg)}.lx-x::after{transform:rotate(-45deg)}
.lx-nx.flash{animation:nxflash 1.4s ease-out 2}
@keyframes nxflash{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 2px var(--c))}}
.lx-pick{position:absolute;z-index:5;left:8px;right:calc(8px + env(safe-area-inset-right));top:56px;margin:0 auto;max-width:560px;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;
  border-radius:14px;background:var(--solid);color:var(--solidInk);font:600 14px/1.2 var(--body);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.lx-pick span{flex:1;min-width:0}
.lx-pick .as-x{height:34px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.18);color:inherit;font:600 13px/1 var(--body)}
.v-plan.picking .lx-vp{cursor:crosshair}
.v-plan .lx-floors{position:absolute;z-index:3;top:8px;left:8px;right:calc(8px + env(safe-area-inset-right));margin:0 auto}
.lx-zoom{position:absolute;z-index:3;right:calc(10px + env(safe-area-inset-right));bottom:calc(var(--tbh) + 12px);display:flex;flex-direction:column;gap:6px;transition:bottom .2s}
.lx-zoom button{width:44px;height:44px;padding:0;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(20,24,22,.1);display:grid;place-items:center}
.lx-zoom button:last-child .ms{font-size:21px}
/* the peek card (a marker tap) */
.lx-peek{position:absolute;z-index:4;left:8px;right:calc(8px + env(safe-area-inset-right));bottom:calc(var(--tbh) + 8px);display:flex;flex-direction:column;gap:10px;padding:12px;
  background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:16px;box-shadow:0 8px 28px rgba(20,24,22,.16)}
.lx-peek[hidden]{display:none}
.lx-pk-h{display:flex;align-items:flex-start;gap:10px}
.lx-pk-t{flex:1;min-width:0}
.lx-pk-n{font:700 17px/1.2 var(--display);overflow-wrap:anywhere}
.lx-pk-k{margin-top:3px;font:600 12px/1.3 var(--mono);color:var(--acc)}
.lx-pk-k span{font:500 12px/1.3 var(--body);color:var(--muted)}
.lx-pk-x{position:relative;flex:none;width:32px;height:32px;margin:-4px -4px 0 0;padding:0;border:0;border-radius:50%;background:var(--card2);color:var(--muted);display:grid;place-items:center}
.lx-pk-x::after{content:'';position:absolute;inset:-6px}/* a 44 px target */
.lx-pk-x .ms{font-size:18px}
.lx-pk-pick button{height:44px}/* a touch target (the 34 px seg is only for the floor switch) */
.lx-pk-pick button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lx-pk-r{display:flex;gap:8px}
.lx-st{flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;border:0;border-radius:12px;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--ink);text-align:left}
.lx-sd{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.lx-sl{flex:1;min-width:0;font:600 14px/1.1 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-st .ms{font-size:20px;color:var(--muted)}
.lx-det{flex:none;height:44px;display:flex;align-items:center;gap:4px;padding:0 10px 0 14px;border:0;border-radius:12px;background:var(--solid);color:var(--solidInk);font:600 14px/1 var(--body)}
.lx-det .ms{font-size:20px}
.lx-pk-nx{margin-top:-2px;font:500 12.5px/1.3 var(--body);color:var(--muted)}
@media (max-width:767px){.lx-zoom.up{bottom:calc(var(--tbh) + max(172px,var(--pkh,0px)))}}/* clear of the card (above the tab bar) */
@media (min-width:768px){
  .v-plan .lx-floors{max-width:560px}
  .lx-peek{right:auto;width:min(400px,calc(100% - 16px));bottom:calc(8px + env(safe-area-inset-bottom))}/* bottom left, clear of + − ⤢ and of the side-panel detail */
  .lx-zoom{bottom:calc(12px + env(safe-area-inset-bottom))}/* no tab bar under the map: clear of the home indicator */
}
/* end Layout */

/* ---------- Vystavující (Task 12) ---------- */
/* the fixed top: search 42 · floor switch · the KPI pill; the column stays readable (and centred) on wide screens */
.vx-top{flex:none;border-bottom:1px solid var(--line2);overflow:hidden;scrollbar-gutter:stable both-edges}/* the list scroller's gutter (below): a classic scrollbar narrows both alike */
.vx-tin{display:flex;flex-direction:column;gap:8px;padding:8px}/* padded inside the column, like .vx-lw: search and list share their edges at every width */
.vx-search{display:flex;align-items:center;gap:8px;height:42px;margin:0 4px;padding:0 0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:text}
.vx-search:focus-within{border-color:var(--acc)}
.vx-search>.ms{font-size:20px;color:var(--muted)}
.vx-q{flex:1;min-width:0;height:100%;margin:0;padding:0 12px 0 0;border:0;border-radius:0;outline:0;background:transparent;color:var(--ink);font:400 16px/1.2 var(--body);-webkit-appearance:none;appearance:none}
.vx-q:focus-visible{outline:0}
.vx-q::placeholder{color:#8F978F;opacity:1}
.vx-q::-webkit-search-decoration,.vx-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.vx-search.has .vx-q{padding-right:0}
.vx-clr{display:none;position:relative;flex:none;width:42px;height:40px;margin:0;padding:0;border:0;background:none;color:var(--muted);place-items:center}
.vx-clr::before{content:'';position:absolute;inset:-2px 0}/* a 44 px target in the 42 px field */
.vx-clr .ms{font-size:18px}
.vx-search.has .vx-clr{display:grid}
.vx-fl{display:flex;padding:2px 4px 0}
.vx-pill{position:relative;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px 0 12px;border:0;border-radius:999px;background:var(--accSoft);color:var(--acc);font:600 13px/1 var(--body)}
.vx-pill::before{content:'';position:absolute;inset:-6px -2px}
.vx-pill .ms{font-size:18px}
/* the list: one card, 1 px separators; a row is 57 px — dot 11 · code 54 · name / "Stav · next" · chevron */
.v-ex>.scroll{scrollbar-gutter:stable both-edges}/* a desktop scrollbar does not pull the list off the search's axis — nor narrow it alone (.vx-top) */
.vx-lw{padding:10px 12px 20px}
.vx-list{background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.vx-row{width:100%;min-height:44px;display:flex;align-items:center;gap:10px;margin:0;padding:10px 10px 10px 12px;border:0;border-bottom:1px solid var(--line2);border-radius:0;
  background:transparent;color:var(--ink);font:inherit;text-align:left}
.vx-row:last-child{border-bottom:0}
.vx-row:active{background:var(--card2)}
@media (hover:hover){.vx-row:hover{background:color-mix(in srgb,var(--card2) 55%,transparent)}}
.vx-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:0}
.vx-row.on,.vx-row.on:hover{background:var(--accSoft)}/* the open detail's row (master–detail on wide screens) */
.vx-dot{flex:none;width:11px;height:11px;border-radius:50%}
.vx-kod{flex:none;width:54px;font:600 12px/1 var(--mono);color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vx-n{font:600 15px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-s{font:400 12.5px/1.25 var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-chev{font-size:20px;color:var(--line)}
.vx-count{padding:12px 0 0;text-align:center;font:400 12.5px/1.3 var(--body);color:var(--muted)}
.vx-none{display:flex;flex-direction:column;align-items:center;gap:14px}
.vx-all{height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--accSoft);color:var(--acc);font:600 14px/1 var(--body)}
@media (min-width:768px){.vx-tin{padding:12px 12px 10px}.vx-lw{padding:12px 16px 28px}}
/* Firmy | Kontakty and the selector beside it (UAT, 3. 10.); the contacts list, compact; a crew member's sheet */
.vx-bar{display:flex;gap:8px;margin:0 4px;min-width:0}
.vx-mode{flex:none}
.vx-mode button{width:44px;flex:none;padding:0}
.vx-mode .ms{font-size:21px}
.vx-sel{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vx-sel::-webkit-scrollbar{display:none}
.vx-sel button{flex:1 0 auto;padding:0 8px}
.kx-row{min-height:0;padding:7px 10px 7px 14px;gap:8px}
.kx-row .vx-n{font-size:14.5px}
.kx-row .vx-s{font-size:12px}
.kx-kod{flex:none;font:600 11.5px/1 var(--mono);color:var(--acc)}
.kc{display:flex;flex-direction:column;gap:12px}
.kc-acts{display:flex;gap:8px}
.kc-acts:empty{display:none}
.kc-b{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;background:var(--acc);color:var(--accInk);text-decoration:none;font:600 15px/1 var(--body)}
.kc-b+.kc-b{background:var(--accSoft);color:var(--acc)}
.kc-b .ms{font-size:22px}
.kc-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
#sheet.oncard .kc-card{background:var(--bg)}
.kc-r{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2);font:500 14.5px/1.35 var(--body)}
.kc-r:last-child{border-bottom:0}
.kc-l{color:var(--muted);font-size:13px}
.kc-v{overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
/* end Vystavující */

/* ---------- detail (Task 13) ---------- */
/* the page: hidden when closed (no focus inside, no shadow peeking in); on phones pinned to the visible viewport like the sheet */
#drawer{visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;padding-right:env(safe-area-inset-right)}
#drawer.open{visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
@media (max-width:767px){#drawer{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100dvh)}}
@media (min-width:768px){#drawer{box-shadow:-12px 0 32px rgba(20,24,22,.12)}}
/* Home-screen web app (UAT, 3. 10.): iOS 26 gives a web app a viewport a status bar shorter than the screen (812 of
   874 pt on an iPhone 17 Pro) and paints nothing below it — the tab bar sat on a 62 pt band — unless the document is as
   tall as the screen; then the viewport, inset:0, 100dvh and the visual viewport are the whole screen. 100vh is the
   screen there; in a Safari tab it reaches under the toolbar (948844d), so only the web app gets it. */
@media (display-mode:standalone){body{height:100vh}}
@media (prefers-reduced-motion:reduce){#drawer,#drawer.open{transition:none}}
#drawer:focus,#drawer:focus-visible{outline:none}
/* no scrim beside the detail (the view stays live on wide screens); a dialog over the detail dims it too */
body:has(#drawer.open):not(:has(#modal.open)) #scrim{display:none}
body:has(#drawer.open):has(#modal.open) #scrim{z-index:55}
.dx-top{flex:none;display:flex;align-items:center;padding:4px 6px}
.dx-back{height:44px;border:0;background:none;display:flex;align-items:center;padding:0 10px 0 2px;color:var(--acc);font:500 16px/1 var(--body)}
.dx-back .ms{font-size:30px}
.dx-b{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 16px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.dx-b>*{flex:none;min-width:0}
html.kb .dx-b{padding-bottom:32px}/* the keyboard covers the home indicator */
.dx-head{display:flex;flex-direction:column;gap:10px}
.dx-name{margin:0;font:800 27px/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.dx-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.dx-id,.dx-st{min-width:0;height:64px;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;border-radius:14px;text-align:left;font:inherit}
.dx-id{border:1px solid var(--line2);background:var(--card);color:var(--ink)}
.dx-idt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dx-kod{font:600 15px/1 var(--mono);color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-zona{font:500 12.5px/1.1 var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-ib{flex:none;width:40px;height:40px;border-radius:11px;background:var(--accSoft);color:var(--acc);display:grid;place-items:center}
.dx-st{border:0}
div.dx-st{padding-right:12px}
.dx-stl{flex:1;min-width:0;font:700 15px/1.15 var(--body);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.dx-stl.hy{-webkit-hyphens:auto;hyphens:auto}/* "Nekontaktováno" breaks instead of being cut; "Návoz naplánován" breaks at the space, not "napláno-ván" */
.dx-st .dx-ib{background:rgba(255,255,255,.28);color:inherit}
.dx-ro{display:flex;align-items:center;gap:6px;padding:0 4px;font:500 12.5px/1.3 var(--body);color:var(--muted)}
.dx-ro .ms{font-size:17px}
.dx-sec{display:flex;flex-direction:column;gap:6px;min-width:0}
.dx-sec.dx-ph,.dx-phs{gap:8px}
.dx-phs{display:flex;flex-direction:column}
.dx-card{border:1px solid var(--line2);border-radius:14px;background:var(--card);overflow:hidden}
.dx-mu{font:400 14px/1.3 var(--body);color:var(--muted)}
.dx-sec>.dx-mu,.dx-phs>.dx-mu,.dx-hw>.dx-mu{padding:0 4px}
.dx-pad{padding:12px 14px}
/* Aktuální poznámka */
.dx-note{width:100%;border:1px solid var(--line2);border-radius:14px;background:var(--note);color:var(--ink);padding:12px 14px;text-align:left;display:flex;gap:10px;align-items:flex-start;font:inherit}
.dx-nt{flex:1;min-width:0;font:400 15px/1.45 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.dx-nt.mu{color:var(--muted)}
.dx-note .ms{font-size:19px;color:var(--muted)}
.dx-ned{border:1.5px solid var(--acc);border-radius:14px;background:var(--card);padding:10px;display:flex;flex-direction:column;gap:8px}
.dx-ta{display:block;width:100%;border:0;outline:0;resize:none;padding:0;background:transparent;color:var(--ink);font:400 16px/1.45 var(--body);max-height:45vh;overflow-y:auto}
.dx-nbt{display:flex;gap:8px;justify-content:flex-end}
.dx-nb{position:relative;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:600 14px/1 var(--body)}
.dx-nb::after{content:'';position:absolute;inset:-3px 0}/* a 44 px target */
.dx-nb.pri{padding:0 16px;border:0;background:var(--acc);color:var(--accInk)}
/* Harmonogram: návoz · události a úkoly · odvoz */
.dx-blk{padding:10px 14px}
.dx-blk+.dx-blk{border-top:1px solid var(--line2)}
.dx-bh{display:flex;align-items:center;gap:6px;margin-bottom:6px;font:600 12px/1 var(--body);text-transform:uppercase}
.dx-bh .ms{font-size:17px}
.dx-blk.nav .dx-bh{color:var(--acc)}.dx-blk.mid .dx-bh{color:var(--warn)}.dx-blk.odv .dx-bh{color:var(--muted)}
.dx-blk.odv .dx-bh .ms{transform:scaleX(-1)}
.dx-bk,.dx-mi{width:100%;min-height:44px;border:0;background:none;padding:5px 0;display:grid;column-gap:6px;row-gap:2px;align-items:center;text-align:left;color:var(--ink);font:500 14px/1.2 var(--body)}
.dx-bk{grid-template-columns:88px 48px minmax(0,1fr)}
.dx-bk b{font-weight:600}
.dx-tm{font-family:var(--mono);font-size:13px}
.dx-wh{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted)}
.dx-wh>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-vch{flex:none;padding:3px 6px;font:600 11.5px/1 var(--body)}
.dx-bn{grid-column:2/-1;font:400 12.5px/1.3 var(--body);color:var(--muted);overflow-wrap:anywhere}
.dx-mi{grid-template-columns:88px minmax(0,1fr);line-height:1.3}
.dx-mw{font-weight:600}
.dx-mw.over{color:var(--crit)}
.dx-mt{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere;white-space:pre-line}
.dx-tag{font:700 10px/1 var(--body);text-transform:uppercase;letter-spacing:.05em;padding:2px 5px;border-radius:4px;margin-right:6px;vertical-align:1px}
.dx-tag.u{color:var(--warn);background:var(--warnSoft)}.dx-tag.e{color:var(--ok);background:var(--okSoft)}
.dx-blk .dx-mu{padding:3px 0}
.dx-add{display:flex;align-items:center;gap:4px;min-height:44px;margin:-6px 0 -10px;border:0;background:none;padding:0;color:var(--acc);font:600 14px/1 var(--body)}
.dx-add .ms{font-size:18px}
/* Kontakt a firma */
.dx-ct{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2)}
.dx-ctx{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border:0;background:none;padding:0;text-align:left;color:var(--ink);font:inherit}
.dx-cn{max-width:100%;display:flex;align-items:center;gap:6px;font:600 15px/1.25 var(--body)}
.dx-cn>span{min-width:0;overflow-wrap:anywhere}
.dx-cn.mu{color:var(--muted)}.dx-cn.add{color:var(--acc)}
.dx-cn .ms{font-size:16px;color:var(--muted)}
.dx-cs{max-width:100%;font:400 13px/1.35 var(--body);color:var(--muted)}
.dx-cm{word-break:break-all}
.dx-rb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;text-decoration:none}
.dx-rb.ok{background:var(--okSoft);color:var(--ok)}.dx-rb.acc{background:var(--accSoft);color:var(--acc)}
.dx-firm{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.dx-orn{display:flex;align-items:center;gap:8px}
.dx-orn>span:first-child{flex:1;min-width:0;font:600 14.5px/1.3 var(--body);overflow-wrap:anywhere}
.dx-ares{flex:none;font:700 10px/1 var(--body);letter-spacing:.06em;color:var(--ok);background:var(--okSoft);padding:4px 6px;border-radius:5px;white-space:nowrap}
.dx-fs{font:400 13.5px/1.35 var(--body)}
.dx-fi{font:500 13px/1.3 var(--mono);color:var(--muted)}
.dx-afind{height:44px;border:1px dashed var(--acc);border-radius:10px;background:var(--accSoft);color:var(--acc);font:600 14px/1 var(--body);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
.dx-firm>*+.dx-afind,.dx-firm>*+.dx-abusy{margin-top:6px}
.dx-abusy{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;font:500 14px/1 var(--body);color:var(--muted)}
.dx-aver{align-self:flex-start;min-height:44px;margin:-4px 0 -12px;border:0;background:none;padding:0;display:flex;align-items:center;gap:6px;color:var(--acc);font:600 14px/1 var(--body)}
.dx-afind .ms,.dx-abusy .ms,.dx-aver .ms{font-size:19px}
.dx-apick{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;text-align:left;color:var(--ink);font:inherit}
.dx-apick .n{font:600 14.5px/1.25 var(--body)}
.dx-apick .s{font:400 13px/1.3 var(--body);color:var(--muted)}
.dx-apick .k{font:500 12px/1.2 var(--mono);color:var(--muted)}
.dx-apw{padding:0 4px 2px;overflow-wrap:anywhere}
.dx-form{display:flex;flex-direction:column;gap:12px;padding:2px 0 4px}
.dx-f{display:flex;flex-direction:column;gap:5px}
.dx-fl{font:600 12.5px/1 var(--body);color:var(--muted);padding:0 4px}
.dx-fb{flex:1}
/* Prezentace */
.dx-file{display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 14px;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none;min-width:0}
.dx-file:last-child{border-bottom:0}
.dx-fic{font-size:22px;color:var(--muted)}.dx-fic.pdf{color:var(--crit)}
.dx-fn{flex:1;min-width:0;font:500 14px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-fsz{flex:none;font:400 12px/1 var(--body);color:var(--muted)}
/* Fotky: 3-column squares, Vyfotit + the protocol, the signed protocol's card */
.dx-pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dx-pt{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;cursor:zoom-in;
  background:repeating-linear-gradient(45deg,var(--card2) 0 6px,var(--line2) 6px 12px)}
.dx-pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dx-ptag{position:absolute;left:5px;bottom:5px;padding:3px 5px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font:600 10px/1 var(--body)}
.dx-acts{display:flex;gap:8px}
.dx-shoot{flex:1;min-width:0;height:52px;border:0;border-radius:14px;background:var(--solid);color:var(--solidInk);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px;font:600 16px/1 var(--body)}
.dx-shoot .ms{font-size:24px}
.dx-shoot:disabled{opacity:.75;cursor:progress}
/* photos on their way up (UAT, 3. 10.): the local picture dimmed, a spinner / no network / an error with Znovu, × takes it back */
.dx-pq{text-transform:none;letter-spacing:0;font-weight:500}
.dx-lt{cursor:default}
.dx-lt img{opacity:.55}
.dx-ls{position:absolute;left:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.dx-ls .ms{font-size:17px}
.dx-lt.err .dx-ls{background:var(--crit)}
.dx-lx{position:absolute;top:4px;right:4px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.dx-lx .ms{font-size:18px}
.dx-lr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:30px;padding:0 12px;border:0;border-radius:15px;background:#fff;color:#111;font:600 12.5px/1 var(--body)}
.pq-spin{display:block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:pqspin .8s linear infinite}
@keyframes pqspin{to{transform:rotate(360deg)}}
.btn.danger{color:var(--crit)}

/* ---------- the camera (UAT, 3. 10.): full screen, a shot per tap, the strip of shots going up ---------- */
body:has(.cam) .toast{z-index:130;bottom:calc(env(safe-area-inset-bottom) + 184px)}/* the camera's messages above it, clear of the strip and the shutter */
.cam{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:#000;color:#fff;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.cam-top{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px}
.cam-x{flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.cam-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cam-t b{font:600 15px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-st{font:500 12.5px/1.2 var(--body);color:rgba(255,255,255,.75)}
.cam-v{position:relative;flex:1;min-height:0;overflow:hidden}
.cam-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}/* as it will be saved: nothing cropped */
.cam-fl{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam.fl .cam-fl{animation:camfl .22s ease-out}
@keyframes camfl{from{opacity:.7}to{opacity:0}}
.cam-msg{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font:500 15px/1.4 var(--body)}
.cam-msg[hidden]{display:none}
.cam-msg p{margin:0}
.cam-alt{height:46px;padding:0 18px;border:0;border-radius:23px;background:#fff;color:#111;display:flex;align-items:center;gap:8px;font:600 15px/1 var(--body)}
.cam-tray{flex:none;display:flex;gap:6px;height:76px;padding:10px 12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cam-tray::-webkit-scrollbar{display:none}
.cam-th{position:relative;flex:none;width:56px;height:56px;border-radius:9px;overflow:hidden;background:#222}
.cam-th canvas,.cam-th img{display:block;width:100%;height:100%;object-fit:cover}
.cam-th.ok canvas{opacity:1}
.cam-th:not(.ok) canvas{opacity:.7}
.cam-th.sunk .cam-s{display:none}/* the note form's shots: no upload yet */
.cam-s{position:absolute;left:4px;bottom:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center}
.cam-s .ms{font-size:14px}
.cam-s .pq-spin{width:11px;height:11px}
.cam-th.ok .cam-s{background:#2B7A3B}
.cam-th.err .cam-s{background:#C62828}
.cam-rm{position:absolute;top:0;right:0;width:26px;height:26px;padding:0;border:0;border-radius:0 0 0 9px;background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center}
.cam-rm .ms{font-size:16px}
.cam-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:4px 16px 14px}
.cam-gal{justify-self:start;height:44px;padding:0 12px;border:0;border-radius:22px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;gap:6px;font:600 14px/1 var(--body)}
.cam-gal .ms{font-size:22px}
.cam-sh{width:76px;height:76px;padding:0;border:4px solid #fff;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #000;transition:transform .08s}
.cam-sh:active{transform:scale(.92)}
.cam-ok{justify-self:end;height:44px;padding:0 18px;border:0;border-radius:22px;background:#fff;color:#111;font:600 15px/1 var(--body)}
@media (orientation:landscape) and (max-height:500px){.cam-tray{height:64px;padding:4px 12px}.cam-th{width:48px;height:48px}.cam-sh{width:64px;height:64px}.cam-top{padding:4px 12px}}
.dx-shut{flex:1;min-width:0;min-height:52px;display:flex;align-items:center;gap:8px;padding:0 4px;font:500 13.5px/1.3 var(--body);color:var(--muted)}
.dx-shut .ms{flex:none;font-size:19px;color:var(--ok)}
.dx-proto{flex:none;max-width:52%;height:52px;border:1px solid var(--line2);border-radius:14px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font:600 14.5px/1.15 var(--body);text-align:left}
.dx-proto .ms{font-size:22px;color:var(--acc)}
.dx-hw:empty{display:none}
.dx-hwc{padding:10px 14px 12px;display:flex;flex-direction:column;gap:3px}
.dx-hwt{font:600 14px/1.3 var(--body);margin-bottom:2px}
.dx-hwl{display:flex;align-items:flex-start;gap:6px;font:400 13.5px/1.35 var(--body);min-width:0}
.dx-hwl>span:last-child{min-width:0;overflow-wrap:anywhere}
.dx-hwl .ms{font-size:16px;margin-top:1px;color:var(--ok)}
.dx-hwl.mu{color:var(--muted)}.dx-hwl.mu .ms{color:var(--muted)}
.dx-hwa{display:flex;gap:8px;margin-top:8px}
.dx-hwb{flex:1;height:44px;border:1px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;font:600 14px/1 var(--body)}
.dx-hwb .ms{font-size:20px}
/* end detail */

/* ---------- Info (Task 14) ---------- */
.v-info .ix{display:flex;flex-direction:column;gap:14px}
.ix-sec{display:flex;flex-direction:column;gap:6px;min-width:0}
.ix-card{overflow:hidden}/* on .box14 */
/* the user card: 40 px initials, name, role, Odhlásit (36 px to the eye, 44 px to the finger) */
.ix-me{padding:12px 14px;display:flex;align-items:center;gap:12px}
.ix-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--solid);color:var(--solidInk);display:grid;place-items:center;font:700 16px/1 var(--display)}
.ix-who{flex:1;min-width:0}
.ix-nm{font:700 15px/1.2 var(--body);overflow-wrap:anywhere}
.ix-role{font:400 12.5px/1.3 var(--body);color:var(--muted)}
.ix-out{position:relative;flex:none;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:600 13px/1 var(--body);display:flex;align-items:center;gap:6px}
.ix-out .ms{font-size:18px}
.ix-out::after{content:'';position:absolute;inset:-4px}
.ix-out:disabled{opacity:.5}
/* Vzhled: the shared segmented control, 38 px buttons (44 px to the finger, over the track's padding); "Podle systému" may wrap on a phone */
.ix-theme button{position:relative;height:38px;font-size:13.5px;line-height:1.05;white-space:normal;text-align:center}
.ix-theme button::after{content:'';position:absolute;inset:-3px -1px}.ix-theme button:first-child::after{left:-3px}.ix-theme button:last-child::after{right:-3px}
.ix-theme .ms{font-size:18px}
/* the connection line + countdown */
.ix-conn{display:flex;flex-direction:column;gap:4px;padding:0 4px}
.ix-cl{display:flex;align-items:center;gap:8px;font:500 13px/1.3 var(--body);color:var(--ok)}
.ix-cl .dot{width:8px;height:8px;background:currentColor}
.ix-cl .ms{font-size:16px}
.ix-cl.warn{color:var(--warn)}.ix-cl.crit{color:var(--crit)}.ix-cl.acc{color:var(--acc)}.ix-cl.wait{color:var(--muted)}
.ix-cd{font:500 13px/1.3 var(--body);color:var(--muted);padding-left:16px}
.ix-conn.ico .ix-cd{padding-left:24px}
/* Harmonogram PDF / Stáhnout */
.ix-two{display:flex;gap:8px}
.ix-btn{flex:1;min-width:0;height:46px;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--body)}
.ix-btn .ms{font-size:20px}
.ix-pdf{color:var(--crit)}
/* Připravenost */
.ix-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ix-kpi{min-width:0;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--ink);padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:2px}
.ix-kpi .ix-v{font:700 26px/1.05 var(--display);font-variant-numeric:tabular-nums}
.ix-kpi .ix-l{font:400 12.5px/1.25 var(--body);color:var(--muted)}
.ix-kpi.crit .ix-v{color:var(--crit)}.ix-kpi.warn .ix-v{color:var(--warn)}.ix-kpi.ok .ix-v{color:var(--ok)}
@media (min-width:768px){.ix-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Barvy: status discs, vehicle chips (the grid's colours), the over-capacity frame */
.ix-bar{padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.ix-leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.ix-leg>span{display:flex;align-items:center;gap:8px;font:500 13px/1.2 var(--body);min-width:0}
.ix-leg .dot{width:12px;height:12px}
@media (min-width:768px){.ix-leg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ix-veh{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:500 12.5px/1.2 var(--body);color:var(--muted)}
.ix-chip{padding:3px 7px}/* on .vch */
.ix-chip.over{box-shadow:inset 0 0 0 2px var(--crit);color:var(--crit)}
/* list cards: instructions, programme, rules, contacts */
.ix-row{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;color:var(--ink);text-align:left;font:600 14px/1.2 var(--body)}
.ix-row .ms{font-size:20px}
.ix-rl{flex:1;min-width:0}
.ix-chev{color:var(--muted)}
.ix-q{padding:12px 14px;font:400 13px/1.3 var(--body);color:var(--muted)}
.ix-prog{display:grid;grid-template-columns:92px 46px minmax(0,1fr);gap:6px;padding:9px 14px;border-bottom:1px solid var(--line2);font:500 13px/1.3 var(--body)}
.ix-prog b{font-weight:600}
.ix-prog .ix-h{font-family:var(--mono);font-size:12px;color:var(--muted)}
.ix-rules{padding:6px 14px}
.ix-rule{padding:7px 0;border-bottom:1px solid var(--line2);font:400 13px/1.4 var(--body)}
.ix-pp{display:flex;align-items:center;padding:0 4px 0 14px;border-bottom:1px solid var(--line2)}
.ix-pt{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 0;color:var(--ink);text-decoration:none}
.ix-pn{font:600 14px/1.2 var(--body)}
.ix-pr{font:400 12.5px/1.3 var(--body);color:var(--muted)}
.ix-pi{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;text-decoration:none}
.ix-pi .ms{font-size:20px}
.ix-pi.call{color:var(--ok)}.ix-pi.mail{color:var(--acc)}
.ix-row:last-child,.ix-prog:last-child,.ix-rule:last-child,.ix-pp:last-child{border-bottom:0}
.v-info a{-webkit-tap-highlight-color:transparent}
.ix-row:focus-visible,.ix-pt:focus-visible{outline-offset:-2px}/* inside the card's clip */
@media (hover:hover){.ix-btn:hover,.ix-kpi:hover,.ix-row:hover,.ix-pi:hover,.ix-out:hover{background:var(--card2)}}
/* end Info */

/* ---------- Aktivita + compose (Task 15) ---------- */
/* the header: Úkoly · Poznámky and the "+" (42 px) over the list; both in the readable column on wide screens */
.ax-head{flex:none;padding:8px 0;border-bottom:1px solid var(--line2);overflow:hidden;scrollbar-gutter:stable both-edges}/* the list's gutters too: a desktop scrollbar keeps both on one centre and one width */
.ax-hrow{display:flex;gap:8px;align-items:center;padding:0 12px}
.ax-seg{flex:1;gap:0;border-radius:12px}
.ax-seg button{height:36px;border-radius:9px;font-size:14px}
.ax-n{font:700 11px/1 var(--display);padding:3px 7px;border-radius:999px;background:color-mix(in srgb,currentColor 15%,transparent)}
.ax-n.crit{background:var(--critSoft);color:var(--crit)}
.ax-add{flex:none;width:42px;height:42px;border:0;border-radius:12px;background:var(--acc);color:var(--accInk);display:grid;place-items:center;padding:0}
.ax-add .ms{font-size:24px}
.ax-list{padding:4px 12px 24px}
.v-feed .scroll{scrollbar-gutter:stable both-edges}/* a desktop scrollbar does not pull the list off the header's centre */
.ax-g{font:700 11px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 4px 7px}
.ax-g.crit{color:var(--crit)}
.ax-items{display:flex;flex-direction:column;gap:6px}
.ax-items>*{min-width:0}
/* cards: a task (the round check, the text, the deadline pill, whom) · a note (whom, when, tags, the text) */
.ax-card{background:var(--card);border:1px solid var(--line2);border-radius:14px;min-width:0}
.ax-card.ed{cursor:pointer}
.ax-task{display:flex;gap:12px;align-items:flex-start;padding:11px 12px}
.ax-chk{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:transparent;color:transparent;display:grid;place-items:center;padding:0}
.ax-chk::after{content:'';position:absolute;inset:-9px}/* a 44 px target */
.ax-chk .ms{font-size:18px}
.ax-chk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.ax-chk:disabled{cursor:default;opacity:.5}/* the Viewer ticks nothing */
@media (hover:hover){.ax-chk:not(:disabled):not(.on):hover{border-color:var(--ok);color:var(--line)}}
.ax-b{flex:1;min-width:0}
.ax-t{display:block;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;color:var(--ink);font:500 15px/1.35 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.ax-t[role=button]{outline-offset:3px;border-radius:4px}
.ax-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;min-width:0}
.ax-due{flex:none;font:600 11.5px/1 var(--body);padding:4px 8px;border-radius:999px;background:var(--accSoft);color:var(--acc);white-space:nowrap}
.ax-due.over{background:var(--critSoft);color:var(--crit)}
.ax-due.today{background:var(--warnSoft);color:var(--warn)}
.ax-who{position:relative;display:inline-flex;align-items:baseline;gap:5px;min-width:0;max-width:100%;margin:0;padding:0;border:0;background:none;text-align:left;font:500 12.5px/1.2 var(--body);color:var(--muted)}
button.ax-who::after{content:'';position:absolute;inset:-5px -4px -11px}/* into the card's padding, never over the text above (a tap there edits) */
.ax-note button.ax-who::after{inset:-9px -4px -4px}
.ax-k{flex:none;font:600 11.5px/1.2 var(--mono);color:var(--acc)}
.ax-wn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-task.done{align-items:center;padding:10px 12px}
.ax-task.done .ax-t{font-size:14px;line-height:1.3;color:var(--muted);text-decoration:line-through}
.ax-more{width:100%;margin-top:14px;height:44px;border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--muted);font:600 13px/1 var(--body);display:flex;align-items:center;justify-content:center;gap:2px}
.ax-more .ms{font-size:20px;transition:transform .2s}
.ax-more[aria-expanded="true"] .ms{transform:rotate(180deg)}
.ax-donel{margin-top:8px}
.ax-notes{margin-top:10px}
.ax-note{padding:10px 12px}
.ax-nh{display:flex;align-items:center;gap:6px;margin-bottom:4px;min-width:0}
.ax-note .ax-who{flex:1;font:600 13px/1.2 var(--body);color:var(--ink)}
.ax-note .ax-k{font-size:12px}
.ax-when{flex:none;font:400 11.5px/1 var(--body);color:var(--muted);white-space:nowrap}
.ax-note .ax-t{font:400 14.5px/1.4 var(--body)}
.ax-note.sys{background:transparent}
.ax-note.sys .ax-t{font-size:13.5px;color:var(--muted)}
.ax-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:2px 0 6px}
.ax-m .ax-tag,.ax-tags .ax-tag{position:relative;display:inline-flex;align-items:center;gap:4px;font:600 11.5px/1 var(--body);padding:4px 7px;border:0;border-radius:6px;background:var(--card2);color:var(--muted);white-space:nowrap}
.ax-tag .ms{font-size:15px}
.ax-tag.ev{background:var(--accSoft);color:var(--acc)}
button.ax-tag::after{content:'';position:absolute;inset:-4px -2px -11px}
.ax-tags button.ax-tag::after{inset:-4px -2px -5px}
.ax-tag.warn{background:var(--warnSoft);color:var(--warn)}
.ax-od{font:500 12px/1.2 var(--body);color:var(--muted)}
/* compose: chips · whom · the text · two switches (44×26) with their fields; Zrušit / Uložit in the sheet's foot */
.ax-c{display:flex;flex-direction:column;gap:10px;padding:0 2px 2px}
.ax-c [hidden]{display:none!important}
.ax-c ::placeholder{color:var(--muted);opacity:.8}
.ax-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.ax-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:5px 8px;border-radius:6px;background:var(--accSoft);color:var(--acc);font:600 12px/1 var(--body)}
.ax-chip .ax-k{font:600 12px/1 var(--mono);color:inherit}
.ax-chip .ax-cn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-cx{position:relative;flex:none;width:18px;height:18px;margin:-3px -4px -3px 0;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;padding:0}
.ax-cx::after{content:'';position:absolute;inset:-13px -6px -12px -20px}/* 44 wide, ending at the body's edge: a long name must not scroll the sheet sideways */
.ax-cx .ms{font-size:16px}
.ax-qw{position:relative}
.ax-qi{position:absolute;left:11px;top:22px;transform:translateY(-50%);color:var(--muted);font-size:20px;pointer-events:none}
.ax-q.sq{height:44px;margin:0;padding:0 42px 0 38px;background:transparent}
.ax-qx{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:none;color:var(--muted);display:grid;place-items:center;padding:0}
.ax-qx .ms{font-size:20px}
.ax-pick{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:236px;overflow-y:auto;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(20,24,22,.16)}
.ax-pk{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:none;text-align:left;color:var(--ink);font:500 14px/1.2 var(--body)}
.ax-pk:hover,.ax-pk:focus-visible{background:var(--card2)}
.ax-pk .ax-pn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-pfree{padding:10px;font:400 13px/1.35 var(--body);color:var(--muted)}
.ax-pfree b{color:var(--ink);font-weight:600}
.ax-ta{display:block;width:100%;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;outline:0;resize:none;background:transparent;color:var(--ink);font:400 16px/1.45 var(--body);-webkit-appearance:none;appearance:none}
.ax-ta:focus,.ax-q.sq:focus,.ax-c .dt:focus{border-color:var(--acc)}
.ax-sw{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ax-sw input{position:absolute;left:0;top:50%;width:44px;height:26px;margin:-13px 0 0;opacity:0;pointer-events:none}
.ax-tr{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--line);transition:background .15s}
.ax-tr::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.ax-sw input:checked+.ax-tr{background:var(--acc)}
.ax-sw input:checked+.ax-tr::after{left:20px}
.ax-sw input:focus-visible+.ax-tr{outline:2px solid var(--acc);outline-offset:2px}
.ax-swl{display:flex;flex-direction:column;gap:2px;min-width:0}
.ax-swl b{font:600 15px/1.2 var(--body)}
.ax-swl span{font:400 12.5px/1.3 var(--body);color:var(--muted)}
.ax-f{display:flex;flex-direction:column;gap:8px;padding:0 0 4px}
.ax-fl{font:400 12.5px/1.3 var(--body);color:var(--muted)}
.ax-fl b{font-weight:600;color:var(--ink)}
/* UAT 3. 10. (3): one row — 📷 · 🗺 · 👥 and Poznámka | Úkol | Událost; Jindy; a quick note on the plan */
.ax-row{display:flex;align-items:center;gap:6px;min-width:0}
.ax-ib{position:relative;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);display:grid;place-items:center}
.ax-ib .ms{font-size:21px}
.ax-ib.on{background:var(--accSoft);border-color:var(--acc);color:var(--acc)}
.ax-ib.on .ms{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.ax-type{flex:1;min-width:0}
.ax-type button{padding:0 2px;font-size:12.5px}
.ax-dq button .ms{font-size:16px;margin-right:4px;vertical-align:-3px}
.ax-vic{flex:none;height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--acc);font:600 14px/1 var(--body)}
.ax-mc .ms{font-size:15px}
.ax-who2{margin-top:8px}
.ax-wseg{flex:1}
.ax-wseg button{height:30px;font-size:12.5px}
.ax-wseg .ms{font-size:16px}
.ax-tag.pub{background:var(--accSoft)!important;color:var(--acc)!important}
.ax-tag.mis{cursor:pointer}
.ax-tag .ms{font-size:14px}
/* UAT 4. 10.: a note read — its kind, the text, the rows (→ where they lead), a piece of the plan, the photos; Upravit in the foot */
.nv{display:flex;flex-direction:column;gap:12px;padding:0 2px 2px}
.nv-hd.ax-tags{margin:0}
.nv-kind{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:7px;font:700 11.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--accSoft);color:var(--acc)}
.nv-kind .ms{font-size:16px}
.nv-kind.t{background:var(--critSoft);color:var(--crit)}.nv-kind.d{background:var(--okSoft);color:var(--ok)}/* the plan's ✕: a note blue, a task red, done green */
.nv-t{font:400 17px/1.45 var(--body);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.nv-rows{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.nv-r{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin:0;padding:8px 10px 8px 12px;border:0;border-top:1px solid var(--line2);background:none;color:var(--ink);text-align:left;font:500 14.5px/1.3 var(--body)}
.nv-r:first-child{border-top:0}
button.nv-r{cursor:pointer}
button.nv-r:active{background:var(--card2)}
@media (hover:hover){button.nv-r:hover{background:color-mix(in srgb,var(--card2) 55%,transparent)}}
.nv-ri{flex:none;font-size:20px;color:var(--muted)}
.nv-rl{flex:none;width:72px;font:500 13px/1.2 var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-rl .ax-k{font-size:13px}
.nv-rv{flex:1;min-width:0;overflow-wrap:anywhere}
.nv-rv .ax-due{font-size:13px}
.nv-rc{flex:none;font-size:22px;color:var(--muted)}
.nv-map{position:relative;display:block;flex:none;width:100%;height:150px;margin:0;padding:0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#fff;cursor:pointer}
.nv-map img{position:absolute;left:0;top:0;max-width:none;pointer-events:none;-webkit-user-drag:none;user-select:none}
.nv-map .lx-nx{z-index:1}
.nv-mapl{position:absolute;z-index:2;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px 0 9px;border-radius:10px;background:var(--solid);color:var(--solidInk);font:600 13px/1 var(--body);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.nv-mapl .ms{font-size:17px}
.nv-sl{font:700 11px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:4px 4px -4px}
.nv-pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}/* three on a phone, more when wide */
.nv-pt{position:relative;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--card2);cursor:zoom-in}
.nv-pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nv-pg>.dx-pt{aspect-ratio:1}
.sh-f .ax-fb .ms{font-size:20px}
/* the Zpět pill (UAT 4. 10.): back to the note left for its spot, its time or an exhibitor; above the tab bar, the toasts above it */
#backpill{position:fixed;z-index:55;left:50%;bottom:calc(var(--tbh) + 14px);transform:translateX(-50%);display:flex;align-items:stretch;max-width:calc(100% - 32px);border-radius:999px;
  background:var(--solid);color:var(--solidInk);box-shadow:0 8px 24px rgba(0,0,0,.25);animation:bkpin .22s ease-out}
@keyframes bkpin{from{opacity:0;transform:translate(-50%,10px)}}
body:has(#sheet.open) #backpill,body:has(#drawer.open) #backpill,body:has(.cam) #backpill,body:has(.v-plan.picking) #backpill{display:none}/* a spot pick: its banner has Zrušit */
@media (max-width:767px){body:has(.lx-peek:not([hidden])) #backpill{bottom:calc(var(--tbh) + max(184px,var(--pkh,0px) + 12px))}}/* clear of the plan's card */
body:has(#backpill) .toast{bottom:calc(var(--tbh) + 74px)}
.bkp-go{display:flex;align-items:center;gap:2px;min-width:0;height:46px;margin:0;padding:0 8px 0 8px;border:0;background:none;color:inherit;font:600 15px/1 var(--body)}
.bkp-go span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkp-go .ms{font-size:26px}
.bkp-x{flex:none;width:42px;height:46px;margin:0;padding:0 4px 0 0;border:0;border-left:1px solid color-mix(in srgb,currentColor 22%,transparent);background:none;color:inherit;opacity:.75;display:grid;place-items:center}
.bkp-x .ms{font-size:20px}
/* the photo viewer (UAT 4. 10.): black, the photo contained; the counter, the caption and ✕ on top; ‹ › with a mouse */
.lb{position:fixed;inset:0;z-index:110;background:#000;color:#fff;animation:lbin .16s ease-out;touch-action:none;-webkit-user-select:none;user-select:none}
@keyframes lbin{from{opacity:0}}
.lb-st{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.lb-st.z{cursor:grab}
.lb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;transition:transform .22s ease-out,opacity .22s;-webkit-user-drag:none;pointer-events:none}
.lb-img.drag{transition:none}
.lb-top{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px) 18px calc(env(safe-area-inset-left) + 16px);
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));pointer-events:none}
.lb-top>*{pointer-events:auto}
.lb-n{flex:none;font:600 14px/1 var(--body);font-variant-numeric:tabular-nums}
.lb-tt{flex:1;min-width:0;font:500 14px/1.25 var(--body);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-x,.lb-nav{flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.lb-x .ms,.lb-nav .ms{font-size:28px}
.lb-nav{position:absolute;z-index:2;top:50%;margin-top:-22px}
.lb-pv{left:calc(env(safe-area-inset-left) + 12px)}.lb-nx{right:calc(env(safe-area-inset-right) + 12px)}
.lb-nav:disabled{opacity:0;pointer-events:none}
@media (hover:none){.lb-nav{display:none}}/* a finger swipes */
@media (hover:hover){.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.28)}}
/* UAT 3. 10.: + beside the linked exhibitors; the form's photos; a card's exhibitors and photos */
.ax-cadd{position:relative;flex:none;width:30px;height:26px;padding:0;border:1.5px dashed var(--acc);border-radius:6px;background:transparent;color:var(--acc);display:grid;place-items:center}
.ax-cadd::after{content:'';position:absolute;inset:-9px -7px}
.ax-cadd .ms{font-size:18px}
.ax-ph{display:flex;flex-wrap:wrap;gap:6px}
.ax-pt{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;background:var(--card2)}
.ax-pt img{display:block;width:100%;height:100%;object-fit:cover}
.ax-px{position:absolute;top:2px;right:2px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.ax-px::after{content:'';position:absolute;inset:-6px}
.ax-px .ms{font-size:15px}
.ax-pa{width:64px;height:64px;padding:0;border:1.5px dashed var(--line);border-radius:9px;background:transparent;color:var(--acc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11.5px/1 var(--body)}
.ax-pa .ms{font-size:22px}
.ax-whos{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0;flex:1}
.ax-note .ax-whos .ax-who{flex:none}
.ax-fot{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ax-ft{position:relative;width:64px;height:64px;padding:0;border:0;border-radius:9px;overflow:hidden;background:var(--card2);cursor:zoom-in}
.ax-ft img{display:block;width:100%;height:100%;object-fit:cover}
.ax-fot>.dx-pt{width:64px;height:64px;aspect-ratio:auto}
.ax-fot .dx-lx{width:24px;height:24px;top:2px;right:2px}
.ax-fot .dx-ls{width:22px;height:22px;left:4px;bottom:4px}
.ax-fot .dx-lr{height:24px;padding:0 8px;font-size:11px}
.ax-dq{display:flex;gap:6px;flex-wrap:wrap}
.ax-dq button{position:relative;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:600 13px/1 var(--body)}
.ax-dq button::after{content:'';position:absolute;inset:-5px 0}
.ax-dq button[aria-pressed="true"]{background:var(--solid);border-color:var(--solid);color:var(--solidInk)}
.ax-c .dtwrap{position:relative;max-width:240px}
.ax-c .dt{display:block;width:100%;height:44px;margin:0;padding:0 44px 0 12px;border:1px solid var(--line);border-radius:12px;outline:0;background:transparent;color:var(--ink);font:500 16px/1 var(--mono);letter-spacing:.02em;-webkit-appearance:none;appearance:none}
.ax-c .dtico{right:0;top:0;width:44px;height:44px;transform:none;display:grid;place-items:center;color:var(--acc);font-size:0}
.ax-c .dtico::before{content:'calendar_month';font:normal 21px/1 'Material Symbols Rounded';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.ax-c .dtnat{width:44px;height:44px}
.ax-fb{height:46px;padding:0 12px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font:600 15px/1 var(--body)}
.ax-cancel{flex:1;border:1px solid var(--line);background:transparent;color:var(--ink)}
.ax-save{flex:2;border:0;background:var(--acc);color:var(--accInk)}
.ax-save:disabled{opacity:.6;cursor:default}
.ax-del{flex:none;width:46px;padding:0;border:1px solid var(--line);background:transparent;color:var(--crit)}
/* end Aktivita */