/* Klientská zóna — vzhled podle designu Hulk (docs/zadani-zona-vzhled.md, klikací model odsouhlasený 15. 10. 2026):
   tmavá hlína, medová zlatá jen na odkazy a aktivní věci; jedna nízká hlavička, na telefonu záložky v liště dole. */
@font-face{font-family:"Hulk Rukopis"; src:url(hulk-rukopis.ttf?v=1) format("truetype"); font-display:swap}
:root{
  --bg:#1c1612; --panel:#2a221c; --ink:#f0e6d8; --strong:#fff5e6; --muted:#9a8a78; --line:#3d342c; --soft:#231b16; --hover:#33291f;
  --accent:#c89b3c; --accent-ink:#dfb558; --accent-soft:rgba(200,155,60,.14); --on-accent:#1c1612;
  --blue:#dfb558; --blue-soft:#33291f; --green:#a9c68a; --green-soft:rgba(122,154,90,.16); --warn:#e5967a; --warn-soft:rgba(229,150,122,.14);
  --tab:#c89b3c;
  --display:Enriqueta,Georgia,serif; --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --brand:"Hulk Rukopis",Enriqueta,Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5; margin:0}
a{color:var(--accent-ink); text-underline-offset:2px}
a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit; color:inherit}
button,summary{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.spacer{flex:1}
.roste{flex:1; min-width:180px}
.inline{display:inline}

/* hlavička: logo · zakázka ▾ · záložky · Nápověda · účet */
.hlava{position:sticky; top:0; z-index:50; background:linear-gradient(to bottom,#221a14,#1c1612); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.hlava.nahled{box-shadow:inset 0 -2px 0 var(--accent)}
.hlava-in{max-width:none; margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch; gap:0 18px; min-height:60px;
  padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
.hlava-in>.znacka,.hlava-in>.drop,.hlava-in>.vpravo,.hlava-in>.zak-nazev{align-self:center}
.znacka{display:grid; justify-items:stretch; gap:3px; padding:7px 0; text-decoration:none}
.znacka img{width:0; min-width:100%; height:auto; display:block}   /* logo přesně tak široké jako nápis pod ním */
.znacka span{font-family:var(--brand); font-size:10.5px; letter-spacing:.6px; color:#fff; opacity:.8; line-height:1; white-space:nowrap}
.drop{position:relative}
.drop>summary{list-style:none}
.drop>summary::-webkit-details-marker{display:none}
.drop-btn{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--strong); font-weight:600; font-size:14.5px; max-width:280px}
.drop-btn .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drop-btn .s{color:var(--muted); font-size:10px}
.drop[open]>.drop-btn,.drop-btn:hover{border-color:var(--accent)}
.drop-menu{position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:270px; max-width:calc(100vw - 24px); background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.5); padding:6px; display:flex; flex-direction:column}
.drop-menu.vpravo{left:auto; right:0}
.drop-menu.nahoru{top:auto; bottom:calc(100% + 8px)}
.drop-menu form{margin:0}
.drop-info{display:flex; flex-direction:column; padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; font-size:13px; color:var(--muted)}
.drop-info b{color:var(--strong); font-size:14.5px}
.mi{background:none; border:0; width:100%; text-align:left; color:var(--ink); padding:8px 10px; border-radius:8px; display:flex; gap:10px; align-items:center; font-size:14px; text-decoration:none}
.mi:hover{background:var(--hover); color:var(--ink)}
.mi svg{color:var(--accent-ink); flex:0 0 auto}
.mi.zlata,.mi[aria-current="page"]{color:var(--accent-ink)}
.sep{height:1px; background:var(--line); margin:4px 0}
.sk{font-size:11.5px; color:var(--muted); padding:6px 10px 2px; text-transform:uppercase; letter-spacing:.06em}
.zalozky{display:flex; gap:20px; align-items:stretch; flex:1 1 0; min-width:0; overflow-x:auto; scrollbar-width:none}   /* základ 0 = záložky se zúží, hlavička se nezalomí */
.zalozky::-webkit-scrollbar{display:none}
.zalozky a{display:inline-flex; gap:7px; align-items:center; color:var(--muted); font-size:14.5px; font-weight:600; text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; padding:0 2px}
.zalozky a:hover{color:var(--ink)}
.zalozky a[aria-current="page"]{color:var(--strong); border-bottom-color:var(--accent)}
.pocet{min-width:19px; height:19px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.tecka{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; box-shadow:0 0 0 3px rgba(200,155,60,.2)}
.vpravo{display:flex; gap:14px; align-items:center; margin-left:auto}
.napoveda-odkaz{display:inline-flex; gap:6px; align-items:center; color:var(--accent-ink); font-size:14px; font-weight:500; text-decoration:none}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--hover); border:1px solid var(--line); color:var(--accent-ink); display:grid; place-items:center; font-weight:600; font-size:13px}
.ucet-menu[open]>.avatar,.avatar:hover{border-color:var(--accent)}
/* veřejná ukázka (app.php verejna_identita): proužek pod hlavičkou, místo účtu „Přihlásit se“ */
.ukazka-pruh{background:var(--accent-soft); border-bottom:1px solid rgba(200,155,60,.5); color:var(--accent-ink); font-size:13.5px; line-height:1.4;
  padding:8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); text-align:center}
.ukazka-pruh b{color:var(--strong)}
.ukazka-zpet{display:inline-block; margin:2px 0 2px 10px; padding:3px 12px; border:1px solid var(--accent); border-radius:999px; background:var(--panel);
  color:var(--strong); font-weight:600; text-decoration:none; white-space:nowrap}
.ukazka-zpet:hover{background:var(--accent); color:var(--panel)}
/* ukázka: tlačítka vypadají jako u klienta, klik jen ukáže hlášku (zona.js) */
.ukazka-toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; max-width:calc(100vw - 32px);
  background:var(--panel); color:var(--strong); border:1px solid var(--accent); border-radius:12px; padding:11px 16px; font-size:14.5px; font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.45); opacity:0; transition:opacity .2s; pointer-events:none}
.ukazka-toast.videt{opacity:1}
.hlava .prihlasit{white-space:nowrap}
.nahled-chip{display:inline-flex; align-items:center; gap:8px; padding:3px 4px 3px 10px; border-radius:999px; background:var(--accent-soft); border:1px solid rgba(200,155,60,.5); color:var(--accent-ink); font-size:13px; white-space:nowrap}
.nahled-chip a:not(.btn1){color:var(--accent-ink)}
.dolni{display:none}
@media (max-width:760px){
  .hlava-in{gap:0 12px; min-height:56px}
  .hlava .zalozky,.jen-pc{display:none}
  .drop-btn{max-width:44vw}
  .dolni{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; background:#221a14; border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .dolni>a,.dolni>details>summary{flex:1; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; padding:6px 2px; text-decoration:none; position:relative}
  .dolni>details{flex:1; display:flex}
  .dolni>details>summary{width:100%}
  .dolni>a[aria-current="page"],.dolni summary.akt{color:var(--accent-ink)}
  .dolni .pocet{position:absolute; top:0; left:calc(50% + 4px); min-width:17px; height:17px; font-size:10.5px; padding:0 5px}
  .dolni .tecka{position:absolute; top:5px; left:calc(50% + 9px)}
  .dolni .drop-menu .pocet,.dolni .drop-menu .pill{position:static; margin-left:auto}
  .zona{padding-bottom:96px; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}   /* telefon jako dřív */
}
/* záložky se do hlavičky nevejdou (telefon na šířku, úzké okno; zona.js přidá html.lista-dole) → lišta dole jako na telefonu */
html.lista-dole .hlava .zalozky,html.lista-dole .jen-pc{display:none}
html.lista-dole .dolni{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; background:#221a14; border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
html.lista-dole .dolni>a,html.lista-dole .dolni>details>summary{flex:1; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; padding:6px 2px; text-decoration:none; position:relative}
html.lista-dole .dolni>details{flex:1; display:flex}
html.lista-dole .dolni>details>summary{width:100%}
html.lista-dole .dolni>a[aria-current="page"],html.lista-dole .dolni summary.akt{color:var(--accent-ink)}
html.lista-dole .dolni .pocet{position:absolute; top:0; left:calc(50% + 4px); min-width:17px; height:17px; font-size:10.5px; padding:0 5px}
html.lista-dole .dolni .tecka{position:absolute; top:5px; left:calc(50% + 9px)}
html.lista-dole .dolni .drop-menu .pocet,html.lista-dole .dolni .drop-menu .pill{position:static; margin-left:auto}
html.lista-dole .zona{padding-bottom:96px}

.zona{max-width:none; margin:0 auto; padding:14px 24px 64px; padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); display:grid; grid-template-columns:minmax(0, 1fr); gap:14px}   /* na plnou šířku okna (Aleš 19. 10. 2026, dřív 1280 px); minmax: široká tabulka se posouvá ve své kartě, stránka drží šířku telefonu */
.lnk{border:0; background:none; padding:0; color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; font-size:inherit}
.lnk.varovani{color:var(--warn)}
.drob{font-size:13px; color:var(--muted); margin:0}
h1.nad{font-family:var(--display); font-weight:600; font-size:clamp(22px,4vw,28px); line-height:1.15; margin:0; color:var(--strong); text-wrap:balance}
h1.nad span{color:var(--accent)}
.podnadpis{margin-top:-6px}
h2.pod{font-family:var(--display); font-weight:600; font-size:20px; margin:0; color:var(--strong)}
.karta{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
details.karta > summary{font-weight:600}
details.karta[open] > summary{margin-bottom:12px}
.btn1,.btn2{display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:7px 13px; font-size:14px; line-height:1.3; text-decoration:none}
.btn1{background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); font-weight:600}
.btn1:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent)}
.btn1.zelene{background:#7a9a5a; border-color:#7a9a5a; color:#10170c}
.btn1.zelene:hover{background:#8db06a; border-color:#8db06a}
.btn2{background:var(--panel); border:1px solid var(--line); color:var(--ink)}
.btn2:hover{border-color:var(--accent); color:var(--ink)}
.sm{padding:5px 10px; font-size:13px}
.nahled-chip .btn1.sm{padding:3px 10px; border-radius:999px}
summary.btn2{list-style:none}
summary.btn2::-webkit-details-marker{display:none}
.radek{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sloupec{display:grid; gap:10px}
.pill{display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap}
.p-hot{background:var(--accent-soft); color:var(--accent-ink); border:1px solid rgba(200,155,60,.45)} .p-cool{background:var(--hover); color:var(--muted); border:1px solid var(--line)} .p-ok{background:var(--green-soft); color:var(--green)} .p-late{background:var(--warn-soft); color:var(--warn)} .p-term{color:var(--muted); border:1px solid var(--line)}
.pozn{font-size:13px; color:var(--muted); margin:0}
.chyba{font-size:13px; color:var(--warn); margin:0}
.hlaska{margin:0; padding:9px 14px; border-radius:10px; background:var(--green-soft); color:var(--green); font-weight:600}
.hlaska.chyba{background:var(--warn-soft); color:var(--warn); font-size:15px}
.paticka{font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin:12px 0 0}

/* tým: seznam klientů */
.dlazdice{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.zak{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:grid; gap:6px; color:var(--ink); text-decoration:none}
.zak:hover{border-color:var(--accent); background:var(--hover)}
.zak b{font-family:var(--display); font-size:20px; font-weight:600; color:var(--strong)}
.prog{display:block; height:6px; border-radius:6px; background:var(--soft); overflow:hidden}
.prog i{display:block; height:100%; background:var(--green)}
.stavy{display:flex; flex-wrap:wrap; gap:8px}
.stavy a{border-radius:999px; padding:5px 12px; font-size:14px; font-weight:600; text-decoration:none}
.stavy .s1{background:var(--accent-soft); color:var(--accent-ink)}
.stavy .s2{background:var(--warn-soft); color:var(--warn)}

/* dohody */
.lista{position:sticky; top:var(--hlava-v,60px); z-index:5; background:var(--bg); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:6px 0 10px; border-bottom:1px solid var(--line)}
.lista .stav{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:14.5px}
.lista .stav b{font-family:var(--display); font-size:20px; color:var(--accent-ink)}
.lista .prog{width:120px}
.sloupce{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,1fr); gap:18px; align-items:start}
@media (max-width:820px){ .sloupce{grid-template-columns:1fr} }
.cast{font-family:var(--display); font-weight:600; font-size:18px; color:var(--strong); margin:4px 0 6px}
.mistnost{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:12px 0 6px}
.doh{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:grid; gap:9px; margin-bottom:10px; scroll-margin-top:140px}
.doh.namne{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
.doh .hl{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap}
.doh .cislo{font-family:var(--display); font-weight:700; color:var(--muted); font-size:14px; line-height:1.55}
.doh .q{font-weight:600; font-size:16px; flex:1; min-width:160px; text-wrap:balance}
.popis{margin:0; color:var(--muted); font-size:14px; overflow-wrap:anywhere}
.odkazy{display:flex; gap:14px; flex-wrap:wrap; font-size:13px}
.moznosti{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px}
.moz{border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--bg); display:flex; gap:8px; align-items:flex-start}
.moz span{display:grid; gap:1px}
.moz small{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}
label.moz{cursor:pointer}
label.moz input{margin-top:4px; accent-color:var(--accent)}
label.moz:has(input:checked){border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); box-shadow:0 0 0 1px var(--accent)}
label.moz:has(input:checked) small{color:var(--accent-ink)}
.volby{display:grid; gap:8px}
.navrh{border:1px dashed var(--green); border-radius:10px; padding:8px 10px; background:var(--green-soft); color:var(--green); display:grid; gap:6px}
.navrh small{font-size:12px; opacity:.9}
.souhlas{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.odp{display:grid; gap:8px; border-left:2px solid var(--soft); padding-left:10px}
.odp p{margin:0; font-size:14px; overflow-wrap:anywhere}
.odp .kdo{color:var(--muted); font-size:12.5px}
.prilohy{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.dl{width:84px; height:58px; border-radius:6px; border:1px solid var(--line); display:grid; place-items:center; font-size:11px; line-height:1.2; color:var(--muted); text-align:center; padding:3px; background:var(--panel); position:relative; overflow:hidden; overflow-wrap:anywhere; text-decoration:none}
.dl.soubor{font-weight:600}
.dl img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.prilbod{display:block}
.doh a,.odp a,.navrh a,.hot a{overflow-wrap:anywhere}
.navrh a{color:inherit}
.psat{display:flex; gap:6px; align-items:flex-end}
.psat textarea{flex:1; min-height:38px; resize:vertical}
.vybrane{font-size:12.5px; color:var(--muted)}
.vybrane:empty{display:none}
textarea,input[type=email],input[type=password],input[type=date],input:not([type]),input[type=text],select{border:1px solid var(--line); background:var(--soft); border-radius:8px; padding:7px 10px; width:100%; min-width:0}
input[type=email],input:not([type]),textarea,select{font-size:16px}  /* iPhone nezvětšuje stránku při psaní */
.ikb{width:38px; height:38px; border:1px solid var(--line); background:var(--soft); border-radius:8px; display:grid; place-items:center; flex:none; cursor:pointer}
.alesbar{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; border-top:1px dashed var(--line); padding-top:8px}
.alesbar details[open]{flex-basis:100%; display:grid; gap:10px}
.alesbar details[open] > summary{justify-self:start}
.hot{display:grid; gap:2px; padding:9px 0; border-bottom:1px solid var(--line); scroll-margin-top:140px}
.hot .t{font-weight:600; overflow-wrap:anywhere}
.hot .m{font-size:12.5px; color:var(--muted)}
.hot .c{font-variant-numeric:tabular-nums}
.hot.stara .t,.hot.stara .c{text-decoration:line-through; color:var(--muted)}
.hot .zn{font-size:12px; color:var(--green)}
.hot details{font-size:13.5px}
.hot details[open]{display:grid; gap:8px; padding:6px 0}
.hot summary{color:var(--blue); font-size:13px}
.nova > summary{color:var(--blue)}
#nova{scroll-margin-top:140px}
.form{display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px 12px; align-items:center}
.form > label{font-size:14px; color:var(--muted)}
.form > span{font-size:14px; color:var(--muted)}
@media (max-width:560px){ .form{grid-template-columns:1fr} .form > label,.form > span{margin-bottom:-4px} .form > span:empty{display:none} }
.mozed{display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:6px}
.chk{display:inline-flex; gap:6px; align-items:center; font-size:14px; color:var(--ink)}
.gate{max-width:380px; margin:18px auto; display:grid; gap:12px; text-align:center; justify-items:center}
.gate h1{font-family:var(--display); font-weight:600; font-size:26px; margin:0; color:var(--strong)}
.gate form{width:100%}
.gate .btn1{justify-content:center}
.gate .btn2{justify-content:center}
.gate form label{display:grid; gap:4px; text-align:left; font-size:13px; color:var(--muted)}
.gate input[readonly]{opacity:.75}
.gate-pod{font-family:var(--display); font-weight:600; font-size:16px; margin:12px 0 0; color:var(--strong)}

/* model */
.model{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); height:min(72vh,720px)}
.model iframe{border:0; width:100%; height:100%; display:block}
/* stránka modelu v zóně: bez rámečku, výška podle obsahu (zona.js), vypadá jako část stránky */
iframe.vlozena{display:block; width:100%; height:80vh; border:0; background:transparent; margin-top:-2px}
iframe.vlozena.cele-okno{position:fixed; inset:0; width:100%; height:100%!important; margin:0; z-index:200; background:#100c0a}
html.bez-posunu,html.bez-posunu body{overflow:hidden}

/* snímky rozpočtu a vyúčtování (snimky.php) — tabulka jako v sešitu, vedle historie */
.snimky{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; align-items:start}
@media (max-width:900px){ .snimky{grid-template-columns:1fr} }
.snimek-hlavni{display:grid; gap:12px; min-width:0}
.snhl{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:flex-end}
.snhl .suma{display:grid; gap:0}
.snhl .suma b{font-family:var(--display); font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums}
.rozdil{font-size:13.5px; font-weight:600; color:var(--accent-ink)}
.sn-pozn{margin:0; font-size:15px}
.hlaska.info{background:var(--blue-soft); color:var(--blue); font-weight:500}
.zadost{border:1px dashed var(--green); background:var(--green-soft); color:var(--green); border-radius:10px; padding:10px 12px; display:grid; gap:6px; justify-items:start}
details.zmeny > summary{font-weight:600; color:var(--blue)}
details.zmeny[open] > summary{margin-bottom:8px}
table.snimek{border-collapse:collapse; width:100%; min-width:640px; font-size:13.5px; font-variant-numeric:tabular-nums; table-layout:fixed;
  background:#fff; color:#1d211f}
table.snimek td{padding:3px 6px; vertical-align:top; overflow-wrap:anywhere}
table.snimek tr.mezera td{height:10px; padding:0}
.historie{display:grid; gap:0}
.histr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; padding:9px 6px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none}
.histr:hover{background:var(--soft)}
.histr.vyb{background:var(--accent-soft); color:var(--accent-ink)}
.histr .d{font-weight:600}
.histr .k{text-align:right; font-variant-numeric:tabular-nums}
.histr .pz{grid-column:1 / -1; font-size:13px; color:var(--muted)}
.histr.vyb .pz{color:inherit}

/* zápis dohod a tabulky */
.posun{overflow-x:auto}
table.t{border-collapse:collapse; width:100%; min-width:520px; font-size:14px; font-variant-numeric:tabular-nums}
table.t th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
table.t td{padding:7px 8px; border-bottom:1px solid var(--soft); vertical-align:top}
table.t td.kc{text-align:right; white-space:nowrap}
table.t tr.stara td{text-decoration:line-through; color:var(--muted)}
table.t tr.stara td .pozn{text-decoration:none}
table.t tr.celkem td{font-weight:700; border-top:2px solid var(--ink); border-bottom:0}
.zapis{display:grid; gap:10px}
@media screen and (max-width:560px){   /* na telefonu řádek zápisu jako kartička, bez posouvání do strany */
  .zapis table.t{min-width:0}
  .zapis table.t thead{display:none}
  .zapis table.t tr{display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px; padding:9px 0; border-bottom:1px solid var(--soft)}
  .zapis table.t td{border:0; padding:0}
  .zapis table.t tr:not(.celkem) td:nth-child(2)::before{content:"#"}
  .zapis table.t td:nth-child(3){grid-column:1 / -1; grid-row:2; font-weight:600}
  .zapis table.t td:nth-child(4){grid-column:3; grid-row:1}
  .zapis table.t td:nth-child(5){grid-column:1 / -1; grid-row:3; font-size:13px; color:var(--muted)}
  .zapis table.t tr.celkem{display:flex; justify-content:space-between; border-top:2px solid var(--ink); border-bottom:0}
  .zapis table.t tr.celkem td{border:0}
  .zapis table.t tr.celkem td:empty{display:none}
}

@media print{
  :root{--bg:#fff; --panel:#fff; --ink:#000; --strong:#000; --muted:#444; --line:#bbb; --soft:#ddd; --accent-ink:#000; color-scheme:light}
  body{font-size:11pt}
  .hlava,.dolni,.stavy,.paticka,.tisk-ne,.hlaska,.podnadpis,.historie,details.zmeny,.zadost{display:none !important}
  .snimky{grid-template-columns:1fr}
  .zona{padding:0; max-width:none}
  .karta{border:0; padding:0}
  table.t{min-width:0}
  .posun{overflow:visible}
  h1.nad{font-size:20pt}
}

/* místo v modelu (rozhodnutí 4, 44, 45) */
.vyber-mista{margin-bottom:8px}
.hot .odkazy{margin-top:4px}
.btn1:disabled{opacity:.45; cursor:default}

/* fotky ze stavby k bodu (rozhodnutí 43) */
.mrizka-fotek{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:10px}
.mrizka-fotek .den{grid-column:1/-1; margin:10px 0 0; font-size:14px; color:var(--muted)}
.fotka-vyber{position:relative; display:block; border:2px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--panel)}
.fotka-vyber img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.fotka-vyber .bez{display:flex; aspect-ratio:4/3; align-items:center; justify-content:center; color:var(--muted); font-size:13px}
.fotka-vyber input{position:absolute; top:8px; left:8px; width:20px; height:20px}
.fotka-vyber .popis{display:block; padding:6px 8px; font-size:12px; color:var(--muted); line-height:1.3}
.fotka-vyber:has(input:checked){border-color:var(--accent)}
.fotky-stavby .lista input.roste{flex:1; min-width:200px}

/* nápověda (napoveda.php) */
.napoveda{display:flex; flex-direction:column; gap:14px; max-width:860px}
.napoveda-cast{display:flex; flex-direction:column; gap:8px}
.napoveda-cast h2.cast{margin-top:10px}
.napoveda details.karta > summary{cursor:pointer}
.napoveda-text p, .napoveda-text ul{margin:0 0 8px}
.napoveda-text p:last-child, .napoveda-text ul:last-child{margin-bottom:0}
.napoveda-text ul{padding-left:20px}

/* etapa 3 (docs/zadani-zona-vzhled.md §2.3, 2.8–2.10): nové od minula, uvítání, Dohody na telefonu, dlaždice klientů */
.nove{display:inline-flex; align-items:center; gap:6px; padding:1px 8px; border-radius:999px; background:var(--accent-soft); border:1px solid rgba(200,155,60,.5); color:var(--accent-ink); font-size:12px; font-weight:600; white-space:nowrap}
.nove .tecka{width:7px; height:7px}
/* tým: viděl klient? (bod 18, 17. 10. 2026) */
.videno{display:inline-block; font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap}
.videno.ne{color:var(--warn)}
.cervene{color:var(--warn)}
.prehled{margin-top:18px}
.prehled td a{color:var(--ink)}
.uvitani{display:flex; flex-direction:column; gap:10px; background:var(--accent-soft); border:1px solid rgba(200,155,60,.45); border-radius:10px; padding:14px 16px}
.uvitani h2{font-family:var(--display); font-weight:600; font-size:19px; margin:0; color:var(--strong)}
.uvitani ol{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px}
.uvitani li{display:flex; gap:8px; align-items:baseline; font-size:14.5px}
.uvitani li b{font-family:var(--display); color:var(--accent-ink); font-size:17px}
.uvitani .radek{justify-content:flex-end}   /* Rozumím a Nápověda vpravo (Aleš 15. 10. 2026) */
.zak-nazev{font-weight:600; font-size:15px; color:var(--strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.zak-r{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:13.5px; margin-top:4px}
.zak-r span:nth-child(odd){color:var(--muted)}
.doh-prep{display:none}
@media (max-width:820px){
  .doh-prep{display:inline-flex; align-self:start; border:1px solid var(--line); border-radius:10px; padding:3px; background:var(--panel); gap:3px}
  .doh-prep button{border:0; background:transparent; color:var(--ink); padding:7px 12px; border-radius:7px; font-size:14px}
  .doh-prep button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
  .sloupce[data-ukaz="k"] > #dohodnuto, .sloupce[data-ukaz="d"] > section:first-child{display:none}
}

/* etapa 4 — Rozpočet jako přehled (rozpocet.php, docs/zadani-zona-vzhled.md §2.4) */
.sn-lista{gap:8px 14px}
.btn2.staticky{cursor:default}
.drop-menu .mi .pozn{margin-left:12px}
.cisla{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.kpi{display:flex; flex-direction:column; gap:2px; padding:12px 14px; text-decoration:none; color:var(--ink)}
.kpi > span{color:var(--muted); font-size:13px}
.kpi > b{font-family:var(--mono); font-weight:500; font-size:21px; color:var(--strong); font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted); font-size:12.5px}
.kpi.hl{background:var(--accent-soft); border-color:var(--accent)}
.kpi.hl > span{color:var(--accent-ink)}
a.kpi.nej{background:var(--warn-soft); border-color:rgba(229,150,122,.45)}
a.kpi.nej > span{color:var(--warn)}
a.kpi.nej:hover{border-color:var(--warn)}
.milniky{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
@media (min-width:1180px){ .milniky.po4{grid-template-columns:repeat(4,1fr)} }
.milnik{display:flex; flex-direction:column; gap:8px}
.milnik h3{font-family:var(--display); font-weight:600; font-size:17px; color:var(--strong); margin:0}
.milnik .castka{font-family:var(--mono); font-weight:500; color:var(--strong)}
.platby{display:flex; flex-wrap:wrap; gap:8px; font-size:13px}
.platby > span{flex:1 1 180px; padding:6px 10px; border-radius:6px; background:var(--soft); border:1px solid var(--line); color:var(--muted)}
.platby > span b{color:var(--ink); font-weight:600}
.nw{white-space:nowrap}
.platby > span.p-ok{border-color:rgba(122,154,90,.45)}
.platby > span.p-hot,.platby > span.p-late{border-color:currentColor}
.pozn-odkaz{font-size:13px; align-self:flex-start}
.nadsek{font-family:var(--display); font-weight:600; font-size:17px; color:var(--strong); margin:6px 0 0}
.tab-roz{padding:0}
table.t.roz th,table.t.nej th{text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500}
table.t.roz td.kc,table.t.nej td.kc{font-family:var(--mono); font-size:13px}
table.t.roz th.kc{text-align:right}
table.t.roz .sip{width:30px; padding-right:0}
table.t.roz tr.fr td{font-weight:600; border-top:1px solid var(--line)}   /* fáze (ne .sk — to je nadpis v menu) */
table.t.roz tr.kr td{color:var(--muted); font-size:13.5px}
table.t.roz tr.kr td b{font-weight:500}
html.js table.t.roz tbody.skup:not(.otevreno) tr.kr{display:none}
.rozbal{background:none; border:0; color:var(--accent-ink); font-size:13px; padding:0 4px}
table.t.roz tr.rozbalovaci{cursor:pointer}
table.t.roz tr.rozbalovaci:hover td{background:var(--hover)}
table.t tr.zmenene td{background:rgba(200,155,60,.07)}
.zm-up{color:var(--warn); white-space:nowrap}
.zm-down{color:var(--green); white-space:nowrap}
.zm-nove{color:var(--accent-ink); font-family:var(--body); font-size:12px}
table.t tfoot tr.celkem td{font-weight:700; border-top:1px solid var(--accent); color:var(--strong)}
.nejasne{display:flex; flex-direction:column; gap:10px; scroll-margin-top:calc(var(--hlava-v,60px) + 12px)}
.nejasne .nadsek{margin:0}
#nej-h{scroll-margin-top:calc(var(--hlava-v,60px) + 12px)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{background:var(--soft); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:4px 12px; font-size:13px}
.chip[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
details.cely > summary{font-weight:600; color:var(--accent-ink)}
details.cely[open] > summary{margin-bottom:10px}
/* Fotky ze stavby (etapa 6, fotky.php): týdny, dlaždice, oko pro tým, velká fotka přes celé okno (zona.js) */
.fotky-tym{margin:10px 0 0; font-size:13px}
.tyden{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.tyden-hl{display:flex; gap:6px 12px; align-items:baseline; flex-wrap:wrap}
.tyden-hl .nadsek{margin:0}
.tyden-hl .pozn{font-size:13px}
.fotky{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px}
.foto{display:flex; flex-direction:column; gap:5px; position:relative; min-width:0}
.foto-b{display:block; aspect-ratio:4/3; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel)}
.foto-b:hover{border-color:var(--accent)}
.foto-b img{display:block; width:100%; height:100%; object-fit:cover}
.fotky.viz{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px}   /* vizualizace (model.php): větší, 16:10 */
.fotky.viz .foto-b{aspect-ratio:16/10}
.fotky.viz .foto-pop{font-size:14px; color:var(--ink)}
.fotky.viz .viz-smaz{margin:0; align-self:flex-start}   /* smazat vyfocený obrázek (📷 vyfotit; autor nebo tým) */
.viz-chk{position:absolute; top:6px; left:6px; margin:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:rgba(28,22,18,.8); border:1px solid var(--line); border-radius:6px; cursor:pointer}   /* výběr ke stažení */
.viz-chk input{width:17px; height:17px; margin:0; cursor:pointer; accent-color:var(--accent)}
.viz-vse{display:inline-flex; gap:6px; align-items:center; font-size:14px; cursor:pointer}
.viz-vse input{width:16px; height:16px; margin:0; accent-color:var(--accent)}
.foto-b .bez{display:flex; height:100%; align-items:center; justify-content:center; color:var(--muted)}
.foto.skryta .foto-b{opacity:.35}
.foto-pop{font-size:13px; line-height:1.35; overflow-wrap:anywhere}
.foto-oko-f{position:absolute; top:6px; right:6px; margin:0}
.foto-oko{display:inline-flex; gap:4px; align-items:center; background:rgba(28,22,18,.85); border:1px solid var(--line); border-radius:999px; padding:3px 7px; color:var(--ink); font-size:12px; cursor:pointer}
.foto-oko[aria-pressed="true"]{color:var(--warn); border-color:var(--warn)}
.foto-oko span:empty{display:none}
body.fo-otevreno{overflow:hidden}
.fo-okno{position:fixed; inset:0; z-index:100; background:#100c0a; display:flex; flex-direction:column; padding:10px 16px 16px; gap:10px}
.fo-okno[hidden]{display:none}
.fo-lista{display:flex; align-items:flex-start; gap:8px; max-width:1200px; width:100%; margin:0 auto}
.fo-text{flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px}   /* dlouhý popis se zalomí sám, tlačítka zůstanou vpravo na řádku */
.fo-popis{color:var(--strong)}
.fo-den{color:var(--muted); font-size:13px}
.fo-velka{position:relative; flex:1; min-height:0; max-width:1200px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center}
.fo-velka img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px}
.fo-stav{color:var(--muted)}
.fo-sip{position:absolute; top:50%; transform:translateY(-50%); font-size:30px; line-height:1; padding:8px 14px; background:rgba(28,22,18,.7); color:var(--ink); border:1px solid var(--line); border-radius:8px; cursor:pointer}
.fo-sip:disabled{opacity:.25; cursor:default}
.fo-sip.vlevo{left:4px} .fo-sip.vpravo{right:4px}
@media (max-width:640px){ .fotky{grid-template-columns:repeat(2, 1fr); gap:8px} .fo-okno{padding:8px} .fo-sip{font-size:24px; padding:6px 10px} }

/* Dokumenty (etapa 7, dokumenty.php): tři skupiny ve sloupcích, řádek = ikona, název a popis, vpravo soubor nebo štítek */
.dok-novy{margin-top:12px}
.dok-novy > summary{list-style:none; cursor:pointer; width:max-content}
.dok-novy > summary::-webkit-details-marker{display:none}
.dok-novy[open] > .karta{margin-top:10px; max-width:640px}
.dok-sl{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:14px; align-items:start; margin-top:14px}
.dok-sk .nadsek{margin:0 0 2px}
.dok{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line)}
.dok-sk > .nadsek + .dok{border-top:0}
.dok > svg{color:var(--muted); flex:0 0 auto}
.dok .n{flex:1; min-width:0; display:flex; flex-direction:column}
.dok .n b{font-weight:600; color:var(--strong)}
.dok .n .pozn{font-size:13px}
.dok .v{display:flex; gap:10px; align-items:center; font-size:13px}
.dok-upr{font-size:13px}
.dok-upr > summary{cursor:pointer; color:var(--muted)}
.dok-upr[open]{flex-basis:100%}
.dok:has(.dok-upr[open]) .v{flex-wrap:wrap; flex-basis:100%}
.dok-upr[open] > form{margin-top:8px}
.dok-form label{display:grid; gap:4px; font-size:13px; color:var(--muted)}
.dok-smazat{margin-top:8px}
.dok-prazdno{margin:6px 0 0; font-size:13px}
.stitek{display:inline-block; padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px; white-space:nowrap}
@media (max-width:420px){ .dok-sl{grid-template-columns:1fr} }
/* telefon: méně důležité sloupce tabulek pryč (m-ne), co je jen pro telefon (m-jen, např. stav milníku pod názvem) */
.m-jen{display:none}
@media (max-width:640px){ .m-ne{display:none} .m-jen{display:inline} table.t.roz,table.t.nej,table.t.faktury{min-width:0} table.t.roz td,table.t.roz th{padding-left:6px; padding-right:6px} table.t.nej .pill,table.t.faktury .pill{white-space:normal} }
@media print{ .sn-lista,.chips,.rozbal,details.cely{display:none !important} html.js table.t.roz tbody.skup tr.kr{display:table-row} }

/* etapa 5 — Vyúčtování (vyuctovani.php): další platba s QR */
.mono{font-family:var(--mono)}
.dalsi{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; background:var(--panel); border:1px solid var(--accent); border-radius:10px; padding:14px 16px; scroll-margin-top:calc(var(--hlava-v,60px) + 12px)}
.dalsi .udaje{flex:999 1 320px; display:grid; grid-template-columns:auto 1fr; gap:5px 16px; font-size:14px; align-items:baseline}
.dalsi .udaje > span:nth-child(odd){color:var(--muted)}
.dalsi .udaje .nadsek{margin:0 0 2px}
.dalsi .castka{font-family:var(--mono); font-weight:500; font-size:19px; color:var(--strong)}
.qr-obal{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px}
.qr-obal svg{display:block; border-radius:8px; background:#fff}
#faktury{scroll-margin-top:calc(var(--hlava-v,60px) + 12px)}

/* PDF černobíle (tisk.php): bílý papír A4, černé logo, černý text */
body.tisk{--bg:#e9e6e1; --panel:#fff; --ink:#111; --strong:#111; --muted:#555; --line:#bbb; --soft:#eee; --accent:#111; --accent-ink:#111; color-scheme:light;
  background:var(--bg); color:#111}
.tisk-lista{max-width:820px; margin:14px auto 10px; padding:0 16px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.tisk-lista .btn1{background:#111; border-color:#111; color:#fff}
.papir{max-width:794px; margin:0 auto 40px; background:#fff; color:#111; padding:44px 52px 36px; box-shadow:0 12px 40px rgba(0,0,0,.2);
  font-size:12.5px; line-height:1.45; display:flex; flex-direction:column; gap:12px; min-height:1000px}
.papir .p-hl{display:flex; align-items:flex-end; gap:16px; border-bottom:1.5px solid #111; padding-bottom:10px}
.papir .p-hl img{height:46px; width:auto}
.papir h1{font-family:var(--display); font-weight:600; font-size:22px; margin:0; color:#111}
.papir h2{font-family:var(--display); font-weight:600; font-size:15px; margin:8px 0 0; color:#111}
.papir .p-mu{color:#555; margin:0}
.papir .p-vpravo{text-align:right}
.papir table{width:100%; border-collapse:collapse; font-size:12px}
.papir th{text-align:left; font-weight:600; border-bottom:1px solid #111; padding:5px 6px; font-size:11.5px; color:#111; text-transform:none; letter-spacing:0}
.papir td{border-bottom:.5px solid #bbb; padding:4px 6px; vertical-align:top}
.papir .r,.papir th.r{text-align:right}
.papir .kc{font-family:var(--mono); font-size:11.5px; white-space:nowrap}
.papir tr.f td{font-weight:600}
.papir tr.k td:first-child{padding-left:18px}
.papir tr.s td{font-weight:700; border-top:1.5px solid #111; border-bottom:0}
.papir table.p-cisla{width:auto; min-width:60%}
.papir .zapis h2.pod,.papir .tisk-ne{display:none}
.papir .zapis table.t{min-width:0}
.papir .zapis .karta{border:0; padding:0; background:none}
.papir .p-pata{margin-top:auto; border-top:.5px solid #999; padding-top:8px; display:flex; justify-content:space-between; color:#555; font-size:11px}
@media (max-width:640px){ .papir{padding:24px 18px; min-height:0} .papir .p-hl{flex-wrap:wrap} }
@media print{
  @page{size:A4; margin:12mm}
  body.tisk{background:#fff}
  .papir{box-shadow:none; padding:0; margin:0; max-width:none; min-height:0}
  .tisk-lista{display:none !important}
}

/* 📷 vyfotit na pozadí (zona.js zonaFoto): štítek s průběhem a jiná část zóny v rámečku přes model, který pod ním dopočítá */
.foto-stitek{position:fixed; right:16px; bottom:16px; z-index:300; display:flex; align-items:center; gap:8px; max-width:calc(100% - 32px);
  background:var(--panel); color:var(--ink); border:1px solid var(--accent); border-radius:10px; padding:8px 10px 8px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.45); font-size:14px}
.foto-stitek[hidden]{display:none}
.foto-prekryv{position:fixed; inset:0; z-index:250; background:var(--bg)}
.foto-prekryv iframe{display:block; width:100%; height:100%; border:0}