/* ==========================================================================
   DREAM TEAM · design systém
   Mobile first. Palce místo myši. Barvy jdou z administrace přes proměnné.
   ========================================================================== */

:root{
  /* přepisuje se inline z Nastavení */
  --brand:#0E7C6B;
  --accent:#E8823A;
  --bg:#F7F5F1;
  --ink:#17282A;

  --brand-soft:color-mix(in srgb, var(--brand) 12%, white);
  --brand-line:color-mix(in srgb, var(--brand) 22%, white);
  --accent-soft:color-mix(in srgb, var(--accent) 14%, white);
  --card:#FFFFFF;
  --muted:#6B7B7D;
  --line:#E4E7E6;
  --ok:#1E9E6A;
  --warn:#D9822B;
  --bad:#D14343;

  --r-sm:10px; --r:16px; --r-lg:22px;
  --shadow:0 1px 2px rgba(23,40,42,.04), 0 6px 20px rgba(23,40,42,.06);
  --shadow-lg:0 8px 34px rgba(23,40,42,.13);
  --tap:48px;                       /* minimální cíl pro palec */
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 12px);
  overscroll-behavior-y:contain;
}
@media (min-width:900px){ body{padding-bottom:24px} }

img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.2; letter-spacing:-.02em}
h1{font-size:1.5rem; font-weight:700}
h2{font-size:1.15rem; font-weight:600}
h3{font-size:1rem; font-weight:600}
p{margin:0 0 .8em}
small,.small{font-size:.8rem}
.muted{color:var(--muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none !important}
@media (max-width:640px){ .desktop-only{display:none !important} }
@media (min-width:641px){ .mobile-only{display:none !important} }

/* ------------------------------------------------------------- layout */
.wrap{max-width:1080px; margin:0 auto; padding:0 14px}
.stack{display:flex; flex-direction:column; gap:12px}
.row{display:flex; gap:10px; align-items:center}
.row.wrap-{flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:10px}
.grow{flex:1; min-width:0}
.grid{display:grid; gap:12px; grid-template-columns:1fr}
/* Položky gridu mají ve výchozím stavu min-width:auto, takže je široký
   obsah (vodorovný pruh počasí) roztáhne přes okraj obrazovky.
   Tohle je ta správná pojistka proti přetékání na mobilu. */
.grid > *{min-width:0}
.card,.item,.slot{min-width:0}
.card > *{max-width:100%}
@media (min-width:640px){ .grid.g2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .grid.g3{grid-template-columns:repeat(3,1fr)} }
.sep{height:1px; background:var(--line); margin:14px 0; border:0}

/* -------------------------------------------------------------- appbar */
.appbar{
  position:sticky; top:0; z-index:40;
  background:var(--brand); color:#fff;
  padding:10px 14px calc(10px + env(safe-area-inset-top,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.appbar a{color:#fff}
.appbar .title{font-weight:600; font-size:1.05rem; letter-spacing:-.01em; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.appbar .logo{width:34px; height:34px; flex:0 0 34px; border-radius:10px}
.appbar .iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.14); font-size:1.1rem; text-decoration:none}
.appbar .iconbtn:hover{background:rgba(255,255,255,.24); text-decoration:none}

/* --------------------------------------------------------- spodní nav */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.bottomnav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); font-size:.66rem; font-weight:500; text-decoration:none; letter-spacing:.01em;
}
.bottomnav a .ic{font-size:1.32rem; line-height:1}
.bottomnav a.on{color:var(--brand)}
.bottomnav a.on .ic{transform:translateY(-1px)}
@media (min-width:900px){ .bottomnav{display:none} }

/* horní nav na desktopu */
.topnav{display:none; gap:4px}
@media (min-width:900px){
  .topnav{display:flex}
  .topnav a{padding:7px 13px; border-radius:999px; font-size:.9rem; font-weight:500;
    color:rgba(255,255,255,.82); text-decoration:none}
  .topnav a.on,.topnav a:hover{background:rgba(255,255,255,.18); color:#fff; text-decoration:none}
}

/* --------------------------------------------------------------- karty */
.card{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:14px; border:1px solid rgba(23,40,42,.04);
}
.card.tight{padding:11px}
.card.flat{box-shadow:none; border:1px solid var(--line)}
.card h2,.card h3{margin-bottom:.35em}
.card-link{display:block; color:inherit}
.card-link:hover{text-decoration:none; box-shadow:var(--shadow-lg); transform:translateY(-1px)}
.card-link{transition:box-shadow .18s, transform .18s}

.section-title{
  display:flex; align-items:center; gap:8px; margin:20px 2px 10px;
  font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
}
.section-title::after{content:""; flex:1; height:1px; background:var(--line)}

/* ------------------------------------------------------------- tlačítka */
.btn{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--tap); padding:0 18px; border-radius:14px;
  background:var(--brand); color:#fff; font:inherit; font-weight:600; font-size:.95rem;
  text-decoration:none; transition:filter .15s, transform .08s;
}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.sec{background:var(--brand-soft); color:var(--brand)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn.acc{background:var(--accent)}
.btn.danger{background:#FBEAEA; color:var(--bad)}
.btn.sm{min-height:38px; padding:0 13px; font-size:.85rem; border-radius:11px}
.btn.xs{min-height:32px; padding:0 10px; font-size:.78rem; border-radius:9px; font-weight:500}
.btn.block{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}

/* velké akční dlaždice na úvodu */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.tile{
  background:var(--card); border-radius:var(--r); padding:14px 12px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:4px; color:inherit; min-height:88px; justify-content:center;
}
.tile:hover{text-decoration:none; box-shadow:var(--shadow-lg)}
.tile .ic{font-size:1.5rem; line-height:1}
.tile .lb{font-weight:600; font-size:.93rem}
.tile .sub{font-size:.75rem; color:var(--muted)}

/* FAB */
.fab{
  position:fixed; right:16px; bottom:calc(var(--nav-h) + var(--safe-b) + 16px); z-index:45;
  width:58px; height:58px; border-radius:20px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:1.7rem; box-shadow:0 6px 20px rgba(232,130,58,.4);
  border:0; cursor:pointer; text-decoration:none;
}
.fab:hover{text-decoration:none; filter:brightness(1.06)}
@media (min-width:900px){ .fab{bottom:24px} }

/* --------------------------------------------------------------- štítky */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand); font-size:.76rem; font-weight:600; white-space:nowrap;
}
.chip.gray{background:#EEF1F0; color:var(--muted)}
.chip.acc{background:var(--accent-soft); color:#A85B1E}
.chip.ok{background:#E4F5EC; color:#137A4E}
.chip.bad{background:#FBEAEA; color:var(--bad)}
.chip.lg{padding:6px 13px; font-size:.85rem}
.chips{display:flex; flex-wrap:wrap; gap:6px}

.badge{position:absolute; top:10px; left:10px; z-index:2}

/* --------------------------------------------------------------- avatar */
.av{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:600; font-size:.82rem;
  background:var(--brand); object-fit:cover; letter-spacing:-.02em;
}
.av.sm{width:28px;height:28px;flex-basis:28px;font-size:.68rem}
.av.lg{width:56px;height:56px;flex-basis:56px;font-size:1.1rem}
.av.xl{width:82px;height:82px;flex-basis:82px;font-size:1.6rem}
.avstack{display:flex}
.avstack .av{margin-left:-9px; box-shadow:0 0 0 2.5px var(--card)}
.avstack .av:first-child{margin-left:0}

/* -------------------------------------------------------------- formuláře */
label{display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin:0 0 5px 2px}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=url],
input[type=date],input[type=time],input[type=password],input[type=search],select,textarea{
  width:100%; min-height:var(--tap); padding:11px 13px; font:inherit; font-size:16px; /* 16px = iOS nezoomuje */
  border:1.5px solid var(--line); border-radius:13px; background:#fff; color:var(--ink);
  -webkit-appearance:none; appearance:none;
  /* Pole s datem a časem mají vlastní vnitřní minimální šířku, kterou by
     jinak protlačila ven z mřížky – na úzkém telefonu pak stránka přetéká. */
  min-width:0; max-width:100%; box-sizing:border-box;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7B7D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
textarea{min-height:96px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--brand);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent)}
input[type=color]{padding:3px; height:46px; min-height:46px; cursor:pointer}
.field{margin-bottom:12px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field-row > *{min-width:0}
/* na nejužších telefonech radši pod sebe, ať se datum vejde celé */
@media (max-width:400px){
  .field-row{grid-template-columns:1fr}
  .field-row.keep2{grid-template-columns:1fr 1fr}
}
.help{font-size:.75rem; color:var(--muted); margin:5px 2px 0}

/* přepínač ano/ne/možná – velké palcové cíle */
.seg{display:grid; grid-auto-flow:column; gap:0; background:#EEF1F0; border-radius:14px; padding:3px}
.seg label{margin:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{
  display:grid; place-items:center; min-height:42px; border-radius:11px; cursor:pointer;
  font-size:.87rem; font-weight:600; color:var(--muted); padding:0 8px; transition:.15s;
}
.seg input:checked + span{background:#fff; color:var(--brand); box-shadow:var(--shadow)}
.seg.acc input:checked + span{color:var(--accent)}

/* checkbox jako řádek na odškrtávání */
.check{
  display:flex; align-items:center; gap:12px; padding:11px 12px; min-height:var(--tap);
  background:var(--card); border-radius:13px; cursor:pointer; border:1px solid transparent;
}
.check input{width:24px; height:24px; flex:0 0 24px; accent-color:var(--brand); margin:0}
.check.done{opacity:.5}
.check.done .lb{text-decoration:line-through}
.check .lb{flex:1; font-size:.95rem}

/* výběr vybavení – pilulky */
.pills{display:flex; flex-wrap:wrap; gap:7px}
.pills input{position:absolute; opacity:0; pointer-events:none}
.pills label{margin:0}
.pills span{
  display:inline-flex; align-items:center; gap:5px; padding:8px 13px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; font-size:.83rem; font-weight:500;
  color:var(--ink); cursor:pointer; user-select:none; min-height:38px;
}
.pills input:checked + span{background:var(--brand-soft); border-color:var(--brand); color:var(--brand); font-weight:600}

/* --------------------------------------------------------------- tabulky */
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; padding:0 8px 7px; border-bottom:1px solid var(--line)}
.tbl td{padding:11px 8px; border-bottom:1px solid #F0F2F1; vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl .tot td{font-weight:700; border-top:2px solid var(--line); border-bottom:0}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -14px; padding:0 14px}

/* ------------------------------------------------------------ seznamy */
.list{display:flex; flex-direction:column; gap:8px}
.item{
  display:flex; align-items:center; gap:12px; padding:12px; background:var(--card);
  border-radius:14px; box-shadow:var(--shadow); color:inherit; min-height:var(--tap);
}
.item:hover{text-decoration:none}
a.item:hover{box-shadow:var(--shadow-lg)}
.item .ic{font-size:1.35rem; flex:0 0 auto; width:26px; text-align:center}
.item .t{font-weight:600; font-size:.94rem; line-height:1.3}
.item .s{font-size:.78rem; color:var(--muted); line-height:1.35}
.item .r{margin-left:auto; text-align:right; flex:0 0 auto}

/* prázdný stav */
.empty{text-align:center; padding:34px 18px; color:var(--muted)}
.empty .ic{font-size:2.6rem; opacity:.4; margin-bottom:8px}
.empty p{margin:0 0 14px}

/* -------------------------------------------------------------- fotky */
/* Poměr 16:9 dělal na širokém monitoru z karty půlku obrazovky. Fotka je
   jen kulisa pod nadpisem, tak jí dáme strop a plošší poměr. */
.hero{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#DDE3E1;
  aspect-ratio:16/9; max-height:260px}
@media (min-width:760px){ .hero{aspect-ratio:21/8; max-height:230px} }
.hero img{width:100%; height:100%; object-fit:cover}
.hero .ov{
  position:absolute; inset:auto 0 0 0; padding:34px 16px 14px; color:#fff;
  background:linear-gradient(to top, rgba(10,20,22,.82), transparent);
}
.hero .ov h1{color:#fff; margin:0; font-size:1.35rem; text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hero .ov .sub{font-size:.85rem; opacity:.9}

.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:5px}
.gal img{aspect-ratio:1; object-fit:cover; border-radius:9px; cursor:pointer}
.gal.big{grid-template-columns:repeat(2,1fr)}
.gal.big img:first-child{grid-column:span 2; aspect-ratio:16/10}
.photopick{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
@media(min-width:640px){ .photopick{grid-template-columns:repeat(5,1fr)} }
.photopick label{margin:0; position:relative; cursor:pointer}
.photopick input{position:absolute; top:6px; left:6px; z-index:2; width:22px; height:22px; accent-color:var(--brand)}
.photopick img{aspect-ratio:1; object-fit:cover; border-radius:9px; border:3px solid transparent}
.photopick input:checked ~ img{border-color:var(--brand)}
.photopick input:not(:checked) ~ img{opacity:.45}

/* --------------------------------------------------------------- mapa */
#map,.map{height:56vh; min-height:320px; border-radius:var(--r); z-index:1}
.map.sm{height:200px; min-height:0}
.leaflet-container{font:inherit; border-radius:var(--r)}
.leaflet-popup-content{margin:12px 14px; font-size:.86rem; line-height:1.45}
.leaflet-popup-content b{font-size:.95rem}
.mappin{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg); box-shadow:0 2px 7px rgba(0,0,0,.3); border:2px solid #fff;
}
.mappin span{transform:rotate(45deg); font-size:.85rem; line-height:1}

/* ----------------------------------------------------------- vyúčtování */
.balance{font-variant-numeric:tabular-nums; font-weight:700}
.balance.pos{color:var(--bad)}     /* dluží */
.balance.neg{color:var(--ok)}      /* má dostat */
.qrcard{
  display:flex; gap:14px; align-items:center; padding:14px; background:#fff;
  border-radius:var(--r); box-shadow:var(--shadow); break-inside:avoid;
}
.qrcard canvas,.qrcard img{width:118px; height:118px; flex:0 0 118px; border-radius:8px}
.qrcard .amt{font-size:1.45rem; font-weight:700; color:var(--brand); line-height:1.1;
  font-variant-numeric:tabular-nums; margin:4px 0}

/* ------------------------------------------------------------ program */
.day{position:relative; padding-left:0}
.day-head{
  display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--brand-soft);
  border-radius:13px; margin-bottom:9px; position:sticky; top:56px; z-index:5;
}
.day-head .dow{font-weight:700; font-size:.95rem; color:var(--brand)}
.day-head .wx{margin-left:auto; font-size:.82rem; color:var(--muted); white-space:nowrap}
.slot{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; background:#fff;
  border-radius:13px; box-shadow:var(--shadow); margin-bottom:8px}
.slot .time{font-variant-numeric:tabular-nums; font-weight:700; font-size:.82rem; color:var(--brand);
  flex:0 0 46px; padding-top:2px}
.slot.idea{background:#FBFAF8; box-shadow:none; border:1.5px dashed var(--line)}
.wetline{display:flex; gap:6px; align-items:center; margin-top:6px; padding:6px 9px;
  background:#EAF2FA; border-radius:9px; font-size:.78rem; color:#2A5B8C}

/* -------------------------------------------------------------- hlasování */
.bar{height:9px; border-radius:99px; background:#EEF1F0; overflow:hidden; margin-top:6px}
.bar i{display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .4s}

/* ----------------------------------------------------------------- misc */
.flash{
  padding:12px 15px; border-radius:13px; margin:12px 0; font-size:.9rem; font-weight:500;
  background:#E4F5EC; color:#0F6B44; border:1px solid #BCE5CF;
}
.flash.err{background:#FBEAEA; color:#9B2C2C; border-color:#F1C7C7}
.flash.info{background:#EAF2FA; color:#2A5B8C; border-color:#C7DCF1}

details.acc{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
details.acc > summary{
  padding:14px; cursor:pointer; font-weight:600; list-style:none; display:flex; align-items:center; gap:9px;
  min-height:var(--tap);
}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::after{content:"›"; margin-left:auto; font-size:1.35rem; color:var(--muted);
  transform:rotate(90deg); transition:.2s}
details.acc[open] > summary::after{transform:rotate(-90deg)}
details.acc .body{padding:0 14px 14px}

.copy{cursor:pointer; user-select:all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#F2F4F3; padding:3px 8px; border-radius:7px; font-size:.9rem}

.tabs{display:flex; gap:6px; overflow-x:auto; padding:4px 14px; margin:0 -14px 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  padding:9px 15px; border-radius:999px; background:#fff; color:var(--muted); font-size:.86rem;
  font-weight:600; white-space:nowrap; box-shadow:var(--shadow); text-decoration:none;
}
.tabs a.on{background:var(--brand); color:#fff}
.tabs a:hover{text-decoration:none}

.countdown{font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent)}

/* přihlášení */
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:280px; margin:0 auto}
.pinpad button{
  min-height:62px; font-size:1.4rem; font-weight:600; border-radius:16px; border:0;
  background:#fff; color:var(--ink); box-shadow:var(--shadow); cursor:pointer;
}
.pinpad button:active{transform:scale(.96); background:var(--brand-soft)}
.pindots{display:flex; gap:12px; justify-content:center; margin:18px 0}
.pindots i{width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--line)}
.pindots i.on{background:var(--brand); border-color:var(--brand)}
.facegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(min-width:600px){ .facegrid{grid-template-columns:repeat(4,1fr)} }
.facegrid a{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px;
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow); color:inherit; font-size:.85rem; font-weight:600}
.facegrid a:hover{text-decoration:none; box-shadow:var(--shadow-lg)}

/* tisk – vyúčtování na papír nebo do PDF přes prohlížeč */
@media print{
  .appbar,.bottomnav,.fab,.tabs,.noprint{display:none !important}
  body{background:#fff; padding:0}
  .card,.qrcard{box-shadow:none; border:1px solid #ddd; break-inside:avoid}
  .wrap{max-width:none}
  a[href]::after{content:""}
}

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

/* ---------- přepínač dnů v programu ---------- */
.daypick{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.daypick::-webkit-scrollbar{display:none}
.daypick a{flex:0 0 auto;min-width:54px;padding:8px 6px;border-radius:14px;background:#fff;
  border:1px solid var(--line);text-align:center;text-decoration:none;color:var(--ink);
  position:relative;transition:.15s}
.daypick a .dw{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.daypick a .dd{display:block;font-weight:700;font-size:1.05rem;line-height:1.15}
.daypick a .dx{display:block;font-size:.82rem;line-height:1}
.daypick a .dn{position:absolute;top:4px;right:5px;background:var(--accent);color:#fff;
  font-size:.6rem;font-weight:700;min-width:14px;height:14px;border-radius:7px;
  display:grid;place-items:center;padding:0 3px}
.daypick a.today{border-color:var(--accent)}
.daypick a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.daypick a.on .dw{color:rgba(255,255,255,.8)}

/* ---------- výběr navigační aplikace ---------- */
.navpick{position:relative;display:inline-block}
.navmenu{position:absolute;z-index:60;bottom:calc(100% + 6px);left:0;min-width:172px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px;
  box-shadow:0 12px 30px rgba(0,0,0,.16)}
.navmenu[hidden]{display:none}
.navmenu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;
  text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500}
.navmenu a:active{background:var(--brand-soft)}
.navmenu a span{font-size:1.05rem;width:20px;text-align:center}

.chip.xs{font-size:.62rem;padding:1px 6px}

/* ---------- důležité údaje na přehledu ---------- */
.keygrid{display:grid;gap:8px}
.keyitem{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 10px;background:var(--bg);border-radius:10px}
.keyitem .kl{font-size:.82rem;color:var(--muted);flex:0 0 auto}
.keyitem .kv{font-weight:600;text-align:right;word-break:break-word}

/* ---------- výběr tipů na okolí při importu ---------- */
.poichip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:.82rem;cursor:pointer;
  transition:.14s;user-select:none}
.poichip input[type=checkbox]{width:15px;height:15px;margin:0;flex:0 0 auto}
.poichip b{font-weight:600;color:var(--muted)}
.poichip:has(input:checked){background:var(--brand-soft);border-color:var(--brand)}
.poichip:has(input:checked) b{color:var(--brand)}

.chip.tip{cursor:pointer;border:1px solid var(--line);background:#fff;font:inherit;
  font-size:.78rem;padding:5px 10px}
.chip.tip:active{background:var(--brand-soft);border-color:var(--brand)}
.chip.tip b{font-weight:600;color:var(--muted);margin-left:3px}

/* ---------- galerie fotek ---------- */
.gal{position:fixed;inset:0;z-index:900;background:rgba(10,14,15,.94);
  display:grid;grid-template-columns:56px 1fr 56px;align-items:center;
  animation:galIn .16s ease}
@keyframes galIn{from{opacity:0}to{opacity:1}}
.gal img{grid-column:2;max-width:100%;max-height:88vh;margin:0 auto;display:block;
  border-radius:8px;object-fit:contain;touch-action:pan-y}
.gal button{background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;transition:.15s}
.gal .gprev,.gal .gnext{grid-row:1;width:44px;height:44px;font-size:1.9rem;line-height:1;
  justify-self:center;padding-bottom:4px}
.gal .gprev{grid-column:1}
.gal .gnext{grid-column:3}
.gal button:active{background:rgba(255,255,255,.28)}
.gal .gclose{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;
  width:40px;height:40px;font-size:1.1rem;z-index:2}
.gal .gcount{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:.85rem}
@media (max-width:520px){
  .gal{grid-template-columns:40px 1fr 40px}
  .gal .gprev,.gal .gnext{width:38px;height:38px;font-size:1.6rem}
}

/* menší náhledy v detailu chalupy, ať je to galerie */
.thumbs{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.thumbs a{display:block;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--bg)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- vyúčtování ve stylu tištěného přehledu ---------- */
.famcard .rozpad{width:100%;border-collapse:collapse;margin-top:10px;font-size:.88rem}
.famcard .rozpad td{padding:5px 0;border-bottom:1px dotted var(--line)}
.famcard .rozpad td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.famcard .rozpad tr.zaplatil td{color:var(--ok)}
.famcard .rozpad tr.soucet td{border-bottom:0;border-top:2px solid var(--ink);
  padding-top:7px;font-weight:700;font-size:.96rem}
.famcard .platba{display:flex;gap:12px;align-items:center;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line)}
.famcard .platba .pinfo{flex:1;min-width:0}
.famcard .platba .qr{width:104px;height:104px;flex:0 0 auto;background:#fff;border-radius:8px}
.famcard .platba .qr img,.famcard .platba .qr canvas{width:100%;height:100%;display:block}
.famcard .prijem{margin-top:10px;padding:9px 11px;background:var(--brand-soft);
  border-radius:10px;font-size:.87rem}

@media print{
  header,.bottomnav,.tabs,.btn,form,details,.flash{display:none !important}
  body{background:#fff}
  .famcard{break-inside:avoid;border:1px solid #ddd !important;box-shadow:none !important;
    margin-bottom:10px !important}
  .famcard .platba .qr{width:96px;height:96px}
}

/* ---------- pruh počasí, ať nepřeteče ---------- */
.wxstrip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wxstrip::-webkit-scrollbar{display:none}
.wxstrip .wxday{flex:0 0 auto;min-width:62px;padding:8px 7px;border-radius:12px;
  background:var(--bg);text-align:center}
.wxstrip .wxday .d{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.wxstrip .wxday .i{font-size:1.15rem;line-height:1.35}
.wxstrip .wxday .t{font-weight:700;font-size:.9rem}
.wxstrip .wxday .p{font-size:.68rem;color:var(--brand)}
.wxstrip .wxday.rain{background:#EAF2FB}

/* ---------- rychlé filtry vybavení ---------- */
.amfilter{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.amchip{position:relative;display:inline-flex}
.amchip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.amchip span{display:inline-block;padding:5px 10px;border-radius:999px;font-size:.78rem;
  border:1px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap;
  transition:.14s;pointer-events:none}
.amchip.on span{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* ---------- kdo je přihlášený (desktop) ---------- */
.userbox{display:none;align-items:center;gap:6px}
.userbox .ubtn{display:flex;align-items:center;gap:8px;border:0;font:inherit;cursor:pointer;padding:5px 10px;border-radius:12px;
  text-decoration:none;color:#fff;background:rgba(255,255,255,.13);transition:.15s;
  font-size:.85rem;line-height:1.25}
.userbox .ubtn:hover{background:rgba(255,255,255,.24)}
.userbox .uname{display:flex;flex-direction:column}
.userbox .uname span{font-size:.72rem;opacity:.8;font-weight:400}
.userbox .ubtn.out{font-weight:600}
@media (min-width:820px){
  .userbox{display:flex}
  .mobile-only{display:none !important}
}
@media (max-width:819px){ .desktop-only{display:none !important} }

/* ---------- pojistka proti vodorovnému přetékání ----------
 * Pozor na dvě věci, na které jsem si tu naběhl:
 *  1. Nesahat na .wrap – ta drží obsah na 1080 px, jinak se stránka
 *     na velkém monitoru roztáhne přes celou šířku a všechno je obří.
 *  2. Nepoužívat overflow-x:hidden na html/body. Vytvoří scroll kontejner
 *     a přestane fungovat position:sticky, tedy lepicí hlavička i záložky.
 *     clip dělá totéž, ale scroll kontejner nezakládá.
 * Skutečnou příčinu přetékání řeší min-width:0 u položek gridu výš.
 */
body{overflow-x:clip}
/* dlouhé odkazy a názvy nesmí rozbít layout */
.item .t,.item .s,.keyitem .kv,.chip{overflow-wrap:anywhere}
table{max-width:100%}
pre,code{overflow-wrap:anywhere;white-space:pre-wrap}

/* ---------- ceny na kartě chalupy ---------- */
.ceny{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:.82rem}
.ceny span{white-space:nowrap;color:var(--brand)}
.ceny b{font-weight:700}
.ceny i{font-style:normal;color:var(--muted);font-weight:400}

/* ---------- kalendář obsazenosti při výběru termínu ----------
 * Zelená = pro nás volné, červená = obsazené nebo neověřené.
 * Přechodové dny jsou půl na půl, protože se v nich hosté střídají:
 * my odjíždíme ráno, další přijíždějí odpoledne.
 */
.cal{--vol:#D9F0E4;--vol2:#1E7A4C;--obs:#FBE0DE;--obs2:#B3261E}
.cal-legend{display:flex;flex-wrap:wrap;gap:5px 12px;margin-bottom:10px;font-size:.74rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend i{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}

.cal-months{display:grid;gap:14px 18px;grid-template-columns:1fr;justify-content:center}

.cal-title{font-weight:700;font-size:.84rem;margin-bottom:5px;text-transform:capitalize}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow span{text-align:center;font-size:.62rem;color:var(--muted);padding-bottom:1px}
.cal-grid .d-pad{aspect-ratio:1}

/* Buňky mají poměr 1:1, takže by se v širokém sloupci nafoukly do obřích
   čtverců. Měsíc proto dostane strop – sedm políček po ~38 px plus mezery. */
.cal-month{max-width:var(--mesic-max,290px);width:100%}

.cal .d{aspect-ratio:1;min-height:26px;border:1px solid rgba(0,0,0,.06);border-radius:6px;
  font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;padding:0;
  display:grid;place-items:center;position:relative;transition:.12s;color:var(--ink)}
.cal .d:active{transform:scale(.94)}

.cal .d-free   {background:var(--vol);color:var(--vol2)}
.cal .d-taken  {background:var(--obs);color:var(--obs2)}
.cal .d-unknown{background:var(--obs);color:var(--obs2);
  background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(0,0,0,.05) 3px 6px)}
/* den odjezdu předchozích: ráno ještě obsazeno, odpoledne můžeme přijet */
.cal .d-in {background:linear-gradient(135deg,var(--obs) 0 50%,var(--vol) 50% 100%)}
/* den příjezdu dalších: dopoledne můžeme být, odpoledne přijedou */
.cal .d-out{background:linear-gradient(135deg,var(--vol) 0 50%,var(--obs) 50% 100%)}

.cal .d-past{opacity:.3;cursor:default}
.cal .d.sel{outline:2.5px solid var(--brand);outline-offset:-2px;z-index:2}
.cal .d.sel-from::after,.cal .d.sel-to::after{content:'';position:absolute;left:3px;right:3px;bottom:2px;
  height:2.5px;border-radius:2px;background:var(--brand)}
.cal .d.inrange{box-shadow:inset 0 0 0 2px rgba(14,124,107,.35)}

.cal-info{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:8px 11px;background:var(--bg);border-radius:10px;font-size:.82rem}
.cal-info.bad{background:#FBE0DE;color:var(--obs2)}
.cal-info.ok{background:var(--brand-soft);color:var(--brand)}

/* ---------- listování měsíců v kalendáři ---------- */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal-range{font-weight:700;font-size:.92rem;text-transform:capitalize;text-align:center;flex:1}
.cal-arrow{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);background:#fff;
  border-radius:11px;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--brand);
  display:grid;place-items:center;padding-bottom:3px;transition:.14s}
.cal-arrow:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand)}
.cal-arrow:disabled{opacity:.3;cursor:default}
.cal-month[hidden]{display:none}

/* Počet sloupců řídí javascript podle šířky a nastavení kalendáře.
   Strop drží měsíce v rozumné velikosti i na širokém monitoru – bez něj
   se buňky (mají poměr 1:1) nafouknou do obřích čtverců. */
.cal{--mesic-max:290px;margin-top:12px}
/* kalendář navazuje na kartu nad sebou – bez odsazení splývaly */
.card + .cal{margin-top:12px}
.cal-months{grid-template-columns:repeat(var(--sloupcu,1), minmax(0, var(--mesic-max,290px)))}

/* Na telefonu je vidět jeden měsíc, tak ať využije celou šířku
   a dny jsou větší – líp se do nich trefuje prstem. */
@media (max-width:559px){
  .cal{--mesic-max:100%}
  .cal .d{font-size:.82rem;border-radius:8px}
  .cal-dow span{font-size:.68rem}
}

/* jen ke koukání – dny nereagují na myš */
.cal-ro .d{cursor:default}
.cal-ro .d:active{transform:none}

/* ---------- lišta s uložením u spodního okraje ----------
 * Drží se vespod, aby šlo uložit odkudkoli z dlouhého formuláře.
 * Právě proto musí být nízká – na mobilu ukrajuje z obrazovky pořád.
 */
.savebar{position:sticky;bottom:calc(var(--nav-h) + 8px);z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:7px 9px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.10)}
.savebar .btn{min-height:42px;padding:9px 16px}
.savebar .check.tiny{margin:0;padding:0;background:none;border:0;flex:0 0 auto;
  display:flex;align-items:center;gap:7px;min-height:0}
.savebar .check.tiny input{width:20px;height:20px;margin:0;flex:0 0 auto}
.savebar .check.tiny .lb{font-size:.82rem;font-weight:500;line-height:1.2}
@media (max-width:420px){
  .savebar{padding:6px 8px;gap:8px}
  .savebar .check.tiny .lb{font-size:.78rem}
  .savebar .btn{padding:9px 12px;font-size:.9rem}
}

/* ---------- řádek koupelny v editaci chalupy ---------- */
.bathrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.bathrow:last-child{border-bottom:0}
/* Koupelna svázaná s ložnicí – nedá se odebrat samostatně,
   proto je vizuálně přišpendlená k pokoji. */
.bathrow.bound{background:var(--brand-soft);border-radius:11px;
  padding:8px 10px;margin-bottom:6px;border-bottom:0}
.bathtag{font-size:.76rem;font-weight:600;color:var(--brand);
  white-space:nowrap;flex:0 0 auto}

/* ---------- přepínač filtru (aktuální / minulé / vše) ----------
 * Pozor: třída .seg už existuje výš pro přepínač z přepínacích tlačítek
 * (radio). Tenhle je z odkazů, proto vlastní název – jinak by si vzájemně
 * přepsaly rozvržení a rozbily se přepínače na sedmi stránkách.
 */
.filterbar{display:flex;gap:3px;padding:3px;background:#EEF1F0;border-radius:13px;
  margin-bottom:14px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line)}
.filterbar::-webkit-scrollbar{display:none}
.fbtn{flex:1 1 0;min-width:max-content;padding:9px 14px;border-radius:10px;
  text-decoration:none;color:var(--muted);font-size:.87rem;font-weight:600;
  white-space:nowrap;transition:.15s;display:flex;align-items:center;
  justify-content:center;gap:8px;line-height:1}
.fbtn:hover{color:var(--ink);background:rgba(255,255,255,.55)}
.fbtn.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.10)}

/* Číslo je vlastní bublina s vlastním pozadím – bez toho splývalo
   s popiskem a četlo se jako součást názvu ("Aktuální2"). */
.fnum{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 6px;
  font-size:.7rem;font-weight:700;border-radius:99px;
  background:rgba(23,40,42,.09);color:var(--muted)}
.fbtn.on .fnum{background:var(--brand);color:#fff}

/* náhled v kompaktním řádku archivu */

/* ---------- kontrolní součet koupelen při importu ---------- */
.bathcount{font-size:.79rem;color:var(--muted);padding:6px 10px;border-radius:9px;
  background:var(--bg);margin-bottom:9px}
.bathcount.ok{background:var(--brand-soft);color:var(--brand)}
.bathcount.bad{background:#FBE0DE;color:#B3261E}

/* ---------- zásobník chalup: tři na řádek na širokém displeji ----------
 * Dlaždice se tím zmenší, tak ubereme i uvnitř – jinak by se text mačkal
 * a fotka by byla jediné, co je vidět.
 */
/* tři sloupce řeší už pravidlo výš (od 900 px), tady jen mezikrok */
@media (min-width:640px) and (max-width:899px){
  .grid.g3{grid-template-columns:repeat(2,1fr)}
}

/* Rozměry drží třídy, ne inline styly – ty by se přebít nedaly. */
.cardphoto{position:relative;aspect-ratio:16/10;background:#DDE3E1}
.cardbody{padding:11px 12px 13px}
.cardname{font-weight:600;font-size:.95rem;line-height:1.25}

/* širší poměr = nižší dlaždice; 3/2 je naopak vyšší než 16/10 */
.grid.compact .cardphoto{aspect-ratio:16/9}
/* Menší dlaždice neznamená menší okraje – text u kraje splývá s rámem
   a špatně se čte. Necháváme stejné odsazení jako u velkých, jen menší
   písmo a rozestupy uvnitř. */
.grid.compact .cardbody{padding:11px 12px 13px}
.grid.compact .cardname{font-size:.88rem;margin-bottom:1px}
.grid.compact .cardbody > .small{margin:2px 0 7px}
.grid.compact .chip{font-size:.67rem;padding:2px 6px}
.grid.compact .chips{gap:3px}
.grid.compact .ceny{font-size:.74rem;gap:2px 8px;margin-top:5px}
.grid.compact .small{font-size:.73rem}

/* ---------- mazání chalupy přímo z dlaždice ---------- */
.cardwrap{position:relative}
.cardwrap .carddel{position:absolute;top:7px;right:7px;margin:0;z-index:3;opacity:0;transition:.15s}
.cardwrap:hover .carddel,.cardwrap:focus-within .carddel{opacity:1}
.cardwrap .carddel .btn{background:rgba(255,255,255,.94);color:var(--bad);
  border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.14);
  width:28px;height:28px;padding:0;display:grid;place-items:center;font-size:.8rem}
.cardwrap .carddel .btn:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
/* na dotykových displejích není hover – tam je vidět vždycky */
@media (hover:none){ .cardwrap .carddel{opacity:.88} }

/* ---------- kdo spí kde: avatar + křestní jméno ---------- */
.whorow{display:flex;flex-wrap:wrap;gap:6px}
.whochip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;
  background:var(--bg);border-radius:999px;font-size:.82rem;font-weight:600}
.whochip .av{width:24px;height:24px;font-size:.62rem;flex:0 0 auto}
.whochip .btn{width:20px;height:20px;padding:0;min-height:0;font-size:.65rem;
  display:grid;place-items:center;opacity:.5}
.whochip:hover .btn{opacity:1;color:var(--bad)}
.famblok + .famblok{border-top:1px dashed var(--line);padding-top:3px}

/* ---------- co beru: štítky rodin ---------- */
.chip.xs{font-size:.67rem;padding:1px 7px}
.invrow .invwho{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:2px}
.invrow .invdel{opacity:.35;transition:.15s}
.invrow:hover .invdel,.invrow:focus-within .invdel{opacity:1;color:var(--bad)}
@media (hover:none){ .invrow .invdel{opacity:.7} }

/* ---------- náhled v řádkovém archivu ---------- */
.rowthumb{width:64px;height:48px;flex:0 0 auto;border-radius:9px;object-fit:cover;
  background:var(--bg)}
@media (max-width:480px){ .rowthumb{width:52px;height:40px} }

/* položka, která se právě přestěhovala do jiné sekce */
.invrow.prisel{animation:prisel .7s ease}
@keyframes prisel{
  0%{background:var(--brand-soft);transform:translateX(-6px)}
  100%{background:var(--card);transform:none}
}
.invsekce[hidden]{display:none}

/* ---------- úhrada ze společných záloh ---------- */
.check.zezaloh{background:var(--brand-soft)}
.check.zezaloh input:disabled + .lb{opacity:.5}
[data-platce][hidden]{display:none}

/* ---------- Wi-Fi v rychlém info: název i heslo ---------- */
.wifi{font-size:.86rem;text-align:right;line-height:1.3}
.wifi .ssid{color:var(--muted)}
.wifi .copy{font-weight:600}

/* ---------- detail chalupy: kontakt v drobnějším rámečku ---------- */
.card.kontakt{padding:10px 12px;background:var(--bg);box-shadow:none;
  border:1px solid var(--line)}
.card.kontakt .row{margin-top:6px;flex-wrap:wrap;gap:6px}
.card.kontakt .btn{font-size:.8rem}

/* ---------- kdo jak hlasoval ---------- */
.hlasy{margin-top:7px}
.hlasy > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:3px;flex-wrap:wrap;padding:3px 0}
.hlasy > summary::-webkit-details-marker{display:none}
.hlasy .rozbal{margin-left:4px;text-decoration:underline;text-underline-offset:2px}
.hlasy[open] .rozbal::after{content:' ▾'}
.hlasy:not([open]) .rozbal::after{content:' ▸'}

/* barevný prstenec kolem avatara podle hlasu */
.hlas{display:inline-flex;border-radius:99px;padding:1.5px}
.hlas .av{width:22px;height:22px;font-size:.58rem}
.hlas.pro{background:var(--ok,#1E7A4C)}
.hlas.proti{background:var(--bad)}
.hlas.nevim{background:#C3CBC9}

.hlasrozpad{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.hlasradek{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85rem}
.hlasradek .av{width:24px;height:24px;font-size:.6rem;flex:0 0 auto}
.hlasradek .s{display:block;font-size:.78rem;color:var(--muted)}
.hlasradek .znamka{flex:0 0 auto;font-size:1rem}
.hlasradek.cekame{flex-wrap:wrap;gap:4px;border-top:1px dashed var(--line);
  margin-top:4px;padding-top:7px}
.hlasradek.cekame .av{width:20px;height:20px;opacity:.55}

/* znak hlasu v malém prstenci u avatara */
.hlas{position:relative}
.hlas .znak{position:absolute;right:-3px;bottom:-3px;font-size:.6rem;line-height:1;
  background:#fff;border-radius:99px;padding:1px}
.hlasradek .znamka{display:flex;align-items:center;gap:3px}

/* ---------- řádek uvnitř karty ----------
 * Běžný .item je samostatná kartička s pozadím a stínem. Uvnitř jiné karty
 * to nedává smysl – dvě vrstvy stejné barvy přes sebe. Necháme jen dělicí
 * linku a vodorovné odsazení, aby text nelepil na okraj.
 */
.item.plain{background:none;box-shadow:none;border-radius:0;min-height:0;
  padding:9px 4px;border-top:1px solid var(--line)}
.item.plain:first-of-type{border-top:0}