/* vatprosto.pl : concept « Lokal » (plan d'une petite entreprise ; chaque objet porte son état KSeF).
   Polices : Baloo 2 (400 et 800), déclarées dans gabarits/base.html avec leur empreinte. */
:root{--tlo:#E6EDF2;--ink:#1D2A33;--ink2:#3D4C57;--ksef:#0B6B4D;--zm:#B23A22;--bez:#4F5D68;--bia:#fff;--lien:#0F5A86;--cien:0 2px 0 rgba(29,42,51,.14),0 10px 28px rgba(29,42,51,.10)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--ink);font:400 18px/1.45 'Baloo 2',system-ui,sans-serif;overflow-wrap:break-word}
a{color:var(--lien);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid #B23A22;outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.pomin{position:absolute;left:8px;top:-60px;z-index:20;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:800}
.pomin:focus{top:0}
.g{width:20px;height:20px;flex:none;vertical-align:-4px;color:var(--c,currentColor)}
.s-ksef{--c:var(--ksef)}.s-zmiana{--c:var(--zm)}.s-bez{--c:var(--bez)}
h1,h2,h3{font-weight:800}

/* ---------- pages intérieures ---------- */
.gora{max-width:760px;margin:0 auto;padding:18px 18px 0;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;justify-content:space-between}
.gora .marka{margin:0}
.marka{margin:0 0 6px;font-weight:800;font-size:18px}
.marka a{color:var(--ink);text-decoration:none}
.logo{width:22px;height:22px;vertical-align:-5px;margin-right:6px;flex:none}
.marka span{font-weight:400;color:var(--ink2)}
.plan-link{font-weight:800}
.strona{max-width:760px;margin:10px auto 0;padding:0 14px}
.nag{padding:8px 4px 16px}
.nag h1{margin:0;font-size:38px;line-height:1.08;letter-spacing:-.01em}
.lead{margin:10px 0 0;font-size:20px;line-height:1.4;color:var(--ink2)}
.tekst{background:var(--bia);border-radius:18px;padding:22px 22px 18px;box-shadow:var(--cien)}
.tekst>:first-child{margin-top:0}
.tekst h2{margin:26px 0 6px;font-size:27px;line-height:1.15}
.tekst h3{margin:20px 0 4px;font-size:21px;line-height:1.2}
.tekst p,.tekst ul,.tekst ol{margin:8px 0}
.tekst li{margin:4px 0}
.tekst ul,.tekst ol{padding-left:24px}
.tekst table{width:100%;border-collapse:collapse;margin:12px 0;font-size:17px}
.tekst th,.tekst td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid #C9D3DA;overflow-wrap:anywhere}
.tekst th{background:#EEF2F5;font-weight:800}
.tekst blockquote{margin:12px 0;padding:8px 16px;background:#EEF2F5;border-radius:12px}
.tekst code{background:#EEF2F5;border-radius:6px;padding:1px 6px;font-size:16px;overflow-wrap:anywhere}
.tekst sup a{text-decoration:none}
.tekst .footnote{font-size:16px;color:var(--ink2)}
.inne{max-width:760px;margin:22px auto 0;padding:0 18px}
.inne h2{margin:0 0 8px;font-size:22px}
.inne ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.inne li a{display:inline-flex;align-items:center;min-height:44px;padding:4px 16px;border-radius:22px;background:#fff;box-shadow:0 1px 0 rgba(29,42,51,.28);color:var(--ink);font-weight:800;text-decoration:none}
.inne li a:hover{background:#F2F6F9}
.inne p{margin:12px 0 0}
.wroc{font-weight:800}

/* ---------- accueil : le plan est l'interface ---------- */
.plan{max-width:860px;margin:0 auto;display:flex;flex-direction:column}
.glowa{padding:20px 18px 6px}
.glowa h1{margin:0;font-size:38px;line-height:1;letter-spacing:-.01em}
.odp{margin:12px 0 0;font-size:19px;line-height:1.4}
.odp strong{font-weight:800}
.odp .g{color:var(--zm)}
.scena-ram{padding:0 8px;width:100%}
.scena{position:relative;width:100%;aspect-ratio:1027/885;container-type:inline-size}
.rys{display:block;width:100%;height:auto}
.rys .obj{cursor:pointer}
.halo path{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-width:calc(var(--w) * 1px)}
.halo.s-ksef path{fill:#0B6B4D;fill-opacity:.38;stroke:#0B6B4D;stroke-opacity:.38}
.halo.s-zmiana path{fill:url(#polowa);stroke:url(#polowa)}
.halo.s-bez path{stroke:#4F5D68;stroke-opacity:.55;stroke-width:3px}
.znacznik{fill:none;stroke:#1D2A33;stroke-width:4px;vector-effect:non-scaling-stroke;transition:cx .25s,cy .25s;pointer-events:none}
.linie line{stroke:#1D2A33;stroke-width:1.5px;stroke-opacity:.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.linie circle{fill:#1D2A33}
.linie-d,.tab-hak{display:none}

/* points chauds de 44 px (téléphone et tablette) : le glyphe d'état, le nom est lu par les lecteurs d'écran */
.etyk{position:absolute;left:var(--mx);top:var(--my);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--bia);color:var(--ink);
  font:800 17px/1.15 'Baloo 2',system-ui,sans-serif;box-shadow:0 1px 0 rgba(29,42,51,.28),0 4px 12px rgba(29,42,51,.16);cursor:pointer;white-space:nowrap}
.etyk .g{width:26px;height:26px;vertical-align:0}
.etyk .nazwa{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.etyk:hover{background:#F2F6F9}
.etyk[aria-pressed=true]{background:var(--ink);color:#fff}
.etyk[aria-pressed=true] .g{color:#fff}

/* tabliczka : texte en HTML (jamais dans le dessin), au moins 16 px */
.tabliczka{position:absolute;left:3%;bottom:2%;padding:6px 12px;background:var(--bia);border:1.5px solid #2B3A44;border-radius:10px;text-align:center;line-height:1.1}
.tabliczka p{margin:0}
.tabliczka .t1{font-size:16px;font-weight:800}
.tabliczka .t2{font-size:19px;font-weight:800}
.tabliczka .t3{font-size:16px;font-weight:800;color:var(--zm)}

.legenda{margin:6px 0 0;padding:0 8px;list-style:none;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:17px;line-height:1.3}
.legenda li{display:flex;gap:6px;align-items:center;min-height:30px}
.legenda .g{color:var(--c)}

.dymek{padding:12px 10px 0}
.dym{background:var(--bia);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--cien)}
.dym[data-ukryty]{display:none}
.dym h2{display:flex;gap:10px;align-items:flex-start;margin:0 0 6px;font-size:25px;line-height:1.15}
.dym h2 .st{display:flex;padding-top:3px}
.dym h3{margin:14px 0 2px;font-size:19px;line-height:1.2}
.dym p{margin:4px 0}
.kiedy{font-weight:800;color:var(--ink)}
.kiedy::after{content:':'}
.po.bez{color:var(--ink2)}
.zr{list-style:none;margin:6px 0 0;padding:0;font-size:16px;line-height:1.35;color:var(--ink2)}
.zr li{margin:3px 0}
.lu{color:var(--ink2)}
.przew{margin-top:12px!important;font-weight:800}
.licz{margin:4px 0 6px}
.przyklad{font-weight:800;color:var(--zm);margin:0 0 2px!important}
.licz label{display:block;font-weight:800;font-size:17px;line-height:1.25}
.licz input#kw{width:100%;height:52px;margin:6px 0 8px;padding:0 14px;border:2px solid #4F5D68;border-radius:10px;
  font:800 26px/1 'Baloo 2',system-ui,sans-serif;color:var(--ink);background:#fff}
.pole-zazn{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;min-height:44px;padding-top:4px}
.pole-zazn input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.wynik{margin:8px 0 0!important;padding:10px 14px;border-radius:12px;background:#E9F4EF}
.wynik.k{background:#FBEAE6}
.wynik strong{font-weight:800}
.uwaga{font-size:16px;color:var(--ink2)}

.miejsca{max-width:860px;margin:0 auto;padding:18px 14px 6px}
.miejsca h2{font-size:24px;margin:0 0 8px}
.chipy{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px 4px 12px;border:0;border-radius:22px;background:#fff;
  color:var(--ink);font:800 17px/1.15 'Baloo 2',system-ui,sans-serif;box-shadow:0 1px 0 rgba(29,42,51,.28);cursor:pointer;text-align:left}
.chip:hover{background:#F2F6F9}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}.chip[aria-pressed=true] .g{color:#fff}
.odkiedy{max-width:860px;margin:18px auto 0;padding:22px 22px 18px;background:var(--bia);border-radius:18px;box-shadow:var(--cien);width:calc(100% - 20px)}

.stopka{max-width:860px;margin:26px auto 0;padding:22px 18px 40px;font-size:17px;color:var(--ink2)}
.stopka::before{content:'';display:block;height:32px;margin:0 -18px 20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='64' viewBox='0 0 112 64'%3E%3Cpath d='M0 0h112v64H0z' fill='%23D9E4DD'/%3E%3Cpath d='M56 0l56 32-56 32L0 32z' fill='%23D1DED6'/%3E%3C/svg%3E") repeat-x left top;border-radius:0}
.stopka h2{margin:0 0 6px;font-size:19px;color:var(--ink)}
.stopka section,.stopka nav{margin:0 0 16px}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li{margin:4px 0}
.stopka p{margin:4px 0}
.stopka .niez{font-weight:800;color:var(--ink)}
.stopka .st-strony ul{display:flex;flex-wrap:wrap;gap:4px 18px}
.stopka .prawne{margin-top:10px}

/* sans JavaScript : tous les lieux sont lisibles à la suite */
html:not(.js) .dym[data-ukryty]{display:block}
html:not(.js) .dym{margin-bottom:12px}
html:not(.js) .miejsca,html:not(.js) .etyk,html:not(.js) .linie,html:not(.js) .znacznik{display:none}
body.po2027 .dym .dzis{display:none}
body.po2027 .po .kiedy::after{content:' (obowiązuje):'}

/* assez de place pour le plan (700 px et plus, quelle que soit la page) : étiquettes nommées, tracés vers les objets, tabliczka sur la porte */
@container (min-width:700px){
  .linie-m{display:none}.linie-d,.tab-hak{display:inline}
  .etyk{left:var(--x);top:var(--y);transform:var(--t);width:auto;height:auto;min-height:44px;padding:4px 16px 4px 12px;border-radius:22px;gap:8px;justify-content:flex-start}
  .etyk .g{width:20px;height:20px}
  .etyk .nazwa{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .etyk[data-bok=l]{--t:translate(0,-50%)}
  .etyk[data-bok=r]{--t:translate(-100%,-50%)}
  .etyk[data-bok=g]{--t:translate(-50%,-100%)}
  .etyk[data-bok=d]{--t:translate(-50%,0)}
  .tabliczka{left:73.69%;top:32.8%;bottom:auto;width:22.98%;min-width:184px;padding:6px 8px}
  .tabliczka .t1{font-size:max(16px,2.14cqw)}
  .tabliczka .t2{font-size:max(17px,2.5cqw)}
  .tabliczka .t3{font-size:max(16px,1.95cqw)}
}
/* grand écran : le panneau à gauche, le plan à droite (il reste en place quand on lit un long panneau) */
@media (min-width:1240px){
  .plan{max-width:1440px;display:grid;grid-template-columns:500px minmax(0,1fr);align-items:start}
  .glowa{grid-column:1;grid-row:1;padding:36px 8px 0 40px}
  .glowa h1{font-size:46px}
  .odp{font-size:20px;max-width:470px}
  .scena-ram{grid-column:2;grid-row:1 / span 2;position:sticky;top:6px;padding:0 12px 0 0;max-width:952px}
  .dymek{grid-column:1;grid-row:2;padding:18px 10px 0 40px}
  .dym{padding:20px 24px 18px}
  .legenda{padding:0 0 0 4px}
  .stopka{max-width:1100px;padding:24px 48px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:0 40px}
  .stopka .st-strony{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}