/* Na Ursynowie — system wizualny
   Granat linii M1 jako jedyny mocny kolor, betonowe szarości w tle,
   zieleń Lasu Kabackiego na statusy „otwarte", rdzawy na wydarzenia. */

:root{
  --paper:#F1F4F7;--surface:#FFFFFF;--surface-2:#E7ECF1;
  --line:#D2D9E1;--line-soft:#E2E7ED;
  --ink:#0F1620;--ink-2:#38424F;--muted:#5E6975;
  --m1:#12358C;--m1-soft:#DEE5F5;--m1-ink:#FFFFFF;
  --las:#1C7048;--las-soft:#D8EBE1;
  --sygnal:#B34C18;--sygnal-soft:#F6E4D8;
  --bar:#0F1620;--bar-ink:#C8D2DE;
  --f-disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-ui:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",Consolas,monospace;
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D1218;--surface:#151B23;--surface-2:#1D242E;
    --line:#2C3541;--line-soft:#222A34;
    --ink:#E5EAF1;--ink-2:#B6C1CE;--muted:#8996A5;
    --m1:#7099F0;--m1-soft:#1A2540;--m1-ink:#0B111A;
    --las:#5BB98C;--las-soft:#12281E;
    --sygnal:#DE8B54;--sygnal-soft:#2A1D14;
    --bar:#070B10;--bar-ink:#9FADBD;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1218;--surface:#151B23;--surface-2:#1D242E;
  --line:#2C3541;--line-soft:#222A34;
  --ink:#E5EAF1;--ink-2:#B6C1CE;--muted:#8996A5;
  --m1:#7099F0;--m1-soft:#1A2540;--m1-ink:#0B111A;
  --las:#5BB98C;--las-soft:#12281E;
  --sygnal:#DE8B54;--sygnal-soft:#2A1D14;
  --bar:#070B10;--bar-ink:#9FADBD;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
/* Focus musi być widoczny na wszystkim, co da się osiągnąć klawiaturą —
   także na summary, które rozwija sprawy urzędowe i pytania w FAQ. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--m1);outline-offset:2px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--surface);padding:10px 16px;}

/* ---------- nagłówek ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);}
.hrow{display:flex;align-items:center;gap:26px;padding:16px 0;}
.logo{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.025em;
  display:flex;align-items:center;gap:9px;white-space:nowrap;}
.logo .mark{width:22px;height:22px;background:var(--m1);border-radius:50%;display:grid;
  place-items:center;color:var(--m1-ink);font-size:11px;font-weight:700;font-family:var(--f-mono);}
.nav-main{display:flex;gap:20px;font-size:14.5px;font-weight:500;color:var(--ink-2);
  margin-left:auto;list-style:none;padding:0;}
.nav-main a:hover{color:var(--m1);}
.btn{font-family:var(--f-ui);font-weight:600;font-size:14px;padding:9px 16px;border:0;
  background:var(--m1);color:var(--m1-ink);border-radius:2px;cursor:pointer;
  white-space:nowrap;display:inline-block;}
.btn:hover{filter:brightness(1.1);}
.btn.ghost{background:transparent;color:var(--m1);border:1px solid var(--m1);}
@media(max-width:900px){.nav-main{display:none;}.hrow .btn{margin-left:auto;}}

/* ---------- pasek stanu ---------- */
.status{background:var(--bar);color:var(--bar-ink);font-family:var(--f-mono);font-size:12.5px;
  min-height:41px;display:flex;align-items:center;}
.status .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;width:100%;padding-block:10px;}
.status i{font-style:normal;display:inline-flex;align-items:center;gap:8px;padding:2px 0;}
.status b{color:#fff;font-weight:500;}
:root[data-theme="dark"] .status b{color:#E8EEF6;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .status b{color:#E8EEF6;}}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted);}
.dot.ok{background:var(--las);}
.dot.warn{background:var(--sygnal);}
.status .placeholder{opacity:.45;}

/* ---------- hero ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:62px 0 54px;}
.hero h1{font-family:var(--f-disp);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(2rem,5vw,3.15rem);margin:0 0 8px;text-wrap:balance;}
.hero .sub{color:var(--muted);font-size:16.5px;margin:0 0 26px;}
.searchbox{display:flex;border:2px solid var(--ink);border-radius:2px;background:var(--surface);
  max-width:720px;overflow:hidden;}
.searchbox input{flex:1;border:0;background:transparent;color:var(--ink);font-family:var(--f-ui);
  font-size:17px;padding:15px 18px;min-width:0;}
.searchbox input::placeholder{color:var(--muted);}
.searchbox button{border:0;background:var(--ink);color:var(--paper);font-family:var(--f-ui);
  font-weight:600;font-size:15px;padding:0 24px;cursor:pointer;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:760px;}
.chip{font-size:13.5px;padding:6px 12px;border:1px solid var(--line);border-radius:100px;
  background:var(--paper);color:var(--ink-2);}
.chip:hover{border-color:var(--m1);color:var(--m1);}
.metrics{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:30px;
  font-family:var(--f-mono);font-size:12.5px;color:var(--muted);}
.metrics b{color:var(--ink);font-weight:500;}

/* ---------- sekcje ---------- */
.sec{padding:52px 0;}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  border-top:2px solid var(--ink);padding-top:13px;margin-bottom:26px;}
.shead h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.6rem);
  letter-spacing:-.02em;margin:0;line-height:1.15;}
.shead .lab{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.shead p{margin:5px 0 0;font-size:14.5px;color:var(--muted);max-width:52ch;}
.more{font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--m1);white-space:nowrap;}

/* ---------- kafle kategorii ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.cat{background:var(--surface);padding:20px 18px 18px;display:flex;flex-direction:column;
  gap:5px;min-height:112px;}
.cat:hover{background:var(--m1-soft);}
.cat .n{font-family:var(--f-disp);font-weight:600;font-size:16.5px;letter-spacing:-.01em;}
.cat .c{font-family:var(--f-mono);font-size:12px;color:var(--muted);}
.cat .ex{font-size:12.5px;color:var(--muted);margin-top:auto;line-height:1.4;}

/* ---------- urzędy ---------- */
.urzedy{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.urzad{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--m1);
  padding:20px;display:flex;flex-direction:column;gap:9px;}
.urzad h3{font-family:var(--f-disp);font-weight:600;font-size:16px;margin:0;letter-spacing:-.01em;}
.urzad .addr{font-size:13.5px;color:var(--muted);}
.urzad dl{margin:0;font-family:var(--f-mono);font-size:12.5px;display:grid;
  grid-template-columns:auto 1fr;gap:4px 12px;color:var(--ink-2);}
.urzad dt{color:var(--muted);}
.urzad dd{margin:0;}
.pill{align-self:flex-start;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;
  padding:3px 8px;border-radius:2px;text-transform:uppercase;background:var(--surface-2);color:var(--muted);}
.pill.open{background:var(--las-soft);color:var(--las);}
.urzad .lnk{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;color:var(--m1);}

/* ---------- linia metra ---------- */
.metro{background:var(--surface);border:1px solid var(--line);padding:38px 30px 30px;}
.line{position:relative;display:flex;justify-content:space-between;gap:10px;}
.line::before{content:"";position:absolute;left:7px;right:7px;top:7px;height:4px;
  background:var(--m1);border-radius:2px;}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  flex:1;text-align:center;min-width:0;}
.stop .pt{width:15px;height:15px;border-radius:50%;background:var(--surface);
  border:4px solid var(--m1);position:relative;z-index:1;}
.stop .nm{font-family:var(--f-disp);font-weight:600;font-size:14.5px;letter-spacing:-.01em;}
.stop .ct{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);}
.stop:hover .nm{color:var(--m1);}
.offline{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:20px;
  border-top:1px solid var(--line-soft);}
.offline .lb{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);width:100%;margin-bottom:2px;}
@media(max-width:760px){
  .line{flex-direction:column;gap:22px;}
  .line::before{left:7px;top:7px;bottom:7px;right:auto;width:4px;height:auto;}
  .stop{flex-direction:row;align-items:center;gap:16px;text-align:left;}
}

/* ---------- wydarzenia ---------- */
.ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.evc{background:var(--surface);border:1px solid var(--line);padding:18px 20px;
  display:flex;flex-direction:column;gap:8px;}
.evc .d{font-family:var(--f-mono);font-size:12px;color:var(--sygnal);letter-spacing:.04em;}
.evc h3{font-family:var(--f-disp);font-weight:600;font-size:16.5px;margin:0;letter-spacing:-.015em;}
.evc .pl{font-size:13.5px;color:var(--muted);}

/* ---------- ostatnio zaktualizowane ---------- */
.feed{background:var(--surface);border:1px solid var(--line);}
.frow{display:grid;grid-template-columns:1fr auto;gap:12px 20px;padding:15px 20px;
  border-bottom:1px solid var(--line-soft);align-items:center;}
.frow:last-child{border-bottom:0;}
.frow:hover{background:var(--surface-2);}
.frow .nm{font-weight:600;font-size:15px;}
.frow .mt{font-size:13px;color:var(--muted);}
.frow .tg{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap;}
.st-open{color:var(--las);font-weight:500;}
.st-closed{color:var(--muted);}

/* ---------- claim ---------- */
.claim{background:var(--m1);color:var(--m1-ink);padding:38px 34px;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;}
.claim h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.3rem,3vw,1.8rem);
  margin:0 0 10px;letter-spacing:-.02em;color:var(--m1-ink);text-wrap:balance;}
.claim p{margin:0;max-width:58ch;font-size:15px;opacity:.9;}
.claim .btn{background:var(--m1-ink);color:var(--m1);font-size:15px;padding:13px 22px;}
@media(max-width:720px){.claim{grid-template-columns:1fr;}}

/* ---------- o dzielnicy ---------- */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;}
.about p{margin:0 0 14px;color:var(--ink-2);max-width:62ch;}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:26px;}}

/* ---------- stopka ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line);margin-top:52px;padding:44px 0 34px;}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;}
.fcol h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:400;}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--ink-2);}
.fcol a:hover{color:var(--m1);}
.fbot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--muted);}

/* ---------- treść ogólna ---------- */
.entry{padding:40px 0 20px;}
.entry h1{font-family:var(--f-disp);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.8rem,4.4vw,2.6rem);margin:0 0 18px;}
.entry-body{max-width:68ch;}
.entry-body p{margin:0 0 16px;}

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

/* ---------- okruszki i nagłówek podstrony ---------- */
.crumbs{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding:18px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;}
.crumbs a:hover{color:var(--m1);}
.phead{padding:14px 0 30px;border-bottom:1px solid var(--line);}
.phead h1{font-family:var(--f-disp);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.8rem,4.4vw,2.7rem);margin:8px 0 12px;text-wrap:balance;}
.phead .kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--m1);}
.pmeta{display:flex;flex-wrap:wrap;gap:6px 24px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);}
.pmeta b{color:var(--ink);font-weight:500;}
.pmeta span:empty{display:none;}
.intro{margin:20px 0 0;max-width:66ch;color:var(--ink-2);}
.intro p{margin:0 0 13px;}
.intro p:last-child{margin:0;}

/* ---------- filtry ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 0;
  border-bottom:1px solid var(--line);}
.fbtn{font-size:13.5px;font-weight:500;padding:8px 14px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);border-radius:2px;cursor:pointer;font-family:var(--f-ui);}
.fbtn:hover{border-color:var(--m1);color:var(--m1);}
.fbtn.on{background:var(--las-soft);border-color:var(--las);color:var(--las);font-weight:600;}
.fbtn .car{color:var(--muted);font-size:11px;margin-left:5px;}
.fbtn.on .car{color:var(--las);}
.fnote{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);padding:10px 0 0;}
.linkbtn{background:none;border:0;color:var(--m1);font:inherit;cursor:pointer;padding:0;text-decoration:underline;}

/* ---------- lista wyników ---------- */
.listing{border:1px solid var(--line);background:var(--surface);margin-top:20px;}
.item{display:grid;grid-template-columns:1fr 210px;gap:12px 24px;padding:18px 20px;
  border-bottom:1px solid var(--line-soft);align-items:start;}
.item:last-child{border-bottom:0;}
.item:hover{background:var(--surface-2);}
.item[hidden]{display:none;}
.item .nm{font-family:var(--f-disp);font-weight:600;font-size:17px;letter-spacing:-.015em;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.item .ad{font-size:14px;color:var(--muted);margin-top:3px;}
.item .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.tg{font-size:12px;padding:3px 9px;border:1px solid var(--line);border-radius:100px;color:var(--muted);}
.item .side{font-family:var(--f-mono);font-size:12.5px;display:grid;gap:5px;justify-items:end;text-align:right;}
.item .side .ph{color:var(--m1);font-weight:500;font-size:13.5px;}
.item .side .lock{color:var(--muted);font-size:11.5px;line-height:1.4;}
@media(max-width:700px){.item{grid-template-columns:1fr;}.item .side{justify-items:start;text-align:left;}}

.badge{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;white-space:nowrap;font-weight:500;}
.b-ver{background:var(--las-soft);color:var(--las);}
.b-basic{background:transparent;color:var(--muted);border:1px solid var(--line);}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);background:var(--surface);}
.faq details{border-bottom:1px solid var(--line-soft);}
.faq details:last-child{border-bottom:0;}
.faq summary{padding:15px 20px;cursor:pointer;font-weight:600;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--m1);font-size:18px;flex:none;}
.faq details[open] summary::after{content:"\2013";}
.faq .ans{padding:0 20px 16px;color:var(--ink-2);font-size:14.5px;max-width:72ch;}

/* ---------- odnośniki poziome ---------- */
.rowlinks{display:flex;flex-wrap:wrap;gap:8px;}
.rl{font-size:13.5px;padding:7px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);}
.rl:hover{border-color:var(--m1);color:var(--m1);}
.rl b{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);font-weight:400;margin-left:6px;}

/* ---------- paginacja i stan pusty ---------- */
.paged{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;font-family:var(--f-mono);font-size:13px;}
.paged .page-numbers{padding:8px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);}
.paged .page-numbers.current{background:var(--m1);border-color:var(--m1);color:var(--m1-ink);font-weight:500;}
.paged a:hover{border-color:var(--m1);color:var(--m1);}
.empty{border:1px dashed var(--line);padding:26px 22px;text-align:center;color:var(--muted);margin-top:20px;}
.empty p{margin:0 0 14px;font-size:14.5px;}

/* ---------- wizytówka ---------- */
.prof{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;padding:34px 0 0;}
@media(max-width:900px){.prof{grid-template-columns:1fr;gap:26px;}}
.kv{border:1px solid var(--line);background:var(--surface);margin:0;}
.kv > div{display:grid;grid-template-columns:132px 1fr;gap:10px 18px;padding:13px 18px;
  border-bottom:1px solid var(--line-soft);font-size:14.5px;}
.kv > div:last-child{border-bottom:0;}
.kv .k{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);margin:0;}
.kv .v{color:var(--ink);margin:0;}
.kv .v a{color:var(--m1);}
.kv .v small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
@media(max-width:520px){.kv > div{grid-template-columns:1fr;gap:2px;}}

.callout{border:1px solid var(--m1);border-left-width:4px;background:var(--m1-soft);
  padding:22px 24px;margin-top:24px;}
.callout h3{font-family:var(--f-disp);font-weight:700;font-size:18px;margin:0 0 8px;letter-spacing:-.015em;}
.callout p{margin:0 0 16px;font-size:14.5px;color:var(--ink-2);max-width:62ch;}
.btn.big{font-size:15px;padding:13px 22px;}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:22px;}
@media(max-width:640px){.compare{grid-template-columns:1fr;}}
.cc{background:var(--surface);padding:20px;}
.cc h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 12px;font-weight:500;}
.cc.now h4{color:var(--muted);}
.cc.after h4{color:var(--las);}
.cc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;}
.cc li{display:grid;grid-template-columns:16px 1fr;gap:10px;color:var(--ink-2);}
.cc li::before{font-family:var(--f-mono);font-size:13px;}
.cc.now li::before{content:"\00B7";color:var(--muted);}
.cc.after li::before{content:"+";color:var(--las);font-weight:500;}

/* ---------- mapa schematyczna ---------- */
.maptile{border:1px solid var(--line);background:var(--surface);position:relative;
  overflow:hidden;margin:0;}
.maptile svg{display:block;width:100%;height:auto;}
.mapover{position:absolute;inset:0 0 40px;display:grid;place-items:center;}
.mapcap{font-family:var(--f-mono);font-size:11px;color:var(--muted);padding:11px 14px;
  border-top:1px solid var(--line-soft);line-height:1.4;}

/* ---------- w pobliżu ---------- */
.near{display:grid;grid-template-columns:1fr;gap:12px;}
.nearc{border:1px solid var(--line);background:var(--surface);padding:14px 16px;display:grid;gap:4px;}
.nearc:hover{border-color:var(--m1);}
.nearc .nm{font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:-.01em;}
.nearc .ad{font-size:13px;color:var(--muted);}
.nearc .dist{font-family:var(--f-mono);font-size:11.5px;color:var(--m1);}

/* ---------- blok RODO ---------- */
.rodo{border-top:1px solid var(--line);padding-top:20px;margin-top:26px;
  font-size:13.5px;color:var(--muted);}
.rodo a{color:var(--m1);font-weight:500;}
.rodo p{margin:0 0 10px;}
.rodo strong{color:var(--ink);}

/* ---------- opinie ---------- */
.opinie{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:var(--surface);}
.opinie li{padding:16px 20px;border-bottom:1px solid var(--line-soft);}
.opinie li:last-child{border-bottom:0;}
.comment-form{margin-top:22px;}
.comment-form label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:4px;}
.comment-form input[type="text"],.comment-form input[type="email"],
.comment-form input[type="url"],.comment-form textarea{
  width:100%;max-width:560px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-family:var(--f-ui);font-size:15px;padding:10px 12px;border-radius:2px;}
.comment-form .submit{font-family:var(--f-ui);font-weight:600;font-size:14px;padding:10px 18px;
  border:0;background:var(--m1);color:var(--m1-ink);border-radius:2px;cursor:pointer;}

/* ---------- karta instytucji ---------- */
.hours{border:1px solid var(--line);background:var(--surface);}
.hours .hrw{display:grid;grid-template-columns:1fr auto;gap:16px;padding:11px 18px;
  border-bottom:1px solid var(--line-soft);font-size:14.5px;}
.hours .hrw:last-child{border-bottom:0;}
.hours .hrw.dzis{background:var(--m1-soft);font-weight:600;}
.hours .d{color:var(--ink-2);}
.hours .hrw.dzis .d{color:var(--ink);}
.hours .t{font-family:var(--f-mono);font-size:13.5px;color:var(--ink);}
.hours .t.closed{color:var(--muted);}
.hours .js-dzis:not(:empty){font-family:var(--f-mono);font-size:11px;color:var(--m1);
  margin-left:8px;font-weight:500;letter-spacing:.04em;}

.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.ht{border:1px solid var(--line);border-top:3px solid var(--m1);background:var(--surface);
  padding:20px;display:flex;flex-direction:column;gap:10px;}
.ht h3{font-family:var(--f-disp);font-weight:600;font-size:16.5px;margin:0;letter-spacing:-.015em;}
.ht ul{margin:0;padding-left:1.05em;font-size:14px;color:var(--ink-2);display:grid;gap:5px;}
.ht .meta{font-family:var(--f-mono);font-size:12px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--line-soft);}
.ht .meta:empty{display:none;}
.ht .lnk{font-size:13.5px;font-weight:600;color:var(--m1);}

.note-warn{border-left:3px solid var(--sygnal);background:var(--sygnal-soft);
  padding:13px 18px;font-size:13.5px;color:var(--ink-2);margin:20px 0 0;max-width:66ch;}

/* ---------- strona osiedla ---------- */
.here{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.hc{background:var(--surface);padding:16px 16px 14px;display:grid;gap:3px;}
.hc:hover{background:var(--m1-soft);}
.hc .n{font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:-.01em;}
.hc .c{font-family:var(--f-mono);font-size:12px;color:var(--muted);}
.stop.act .pt{background:var(--m1);box-shadow:0 0 0 4px var(--m1-soft);}
.stop.act .nm{color:var(--m1);}
.facts{font-family:var(--f-mono);font-size:13px;display:grid;align-content:start;
  border:1px solid var(--line);background:var(--surface);}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;
  border-bottom:1px solid var(--line-soft);}
.facts div:last-child{border-bottom:0;}
.facts span:first-child{color:var(--muted);}

/* ---------- pogoda ---------- */
.pogoda-teraz{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.pk{background:var(--surface);padding:18px 20px;display:grid;gap:5px;}
.pk-l{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.pk-v{font-family:var(--f-disp);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;
  color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums;}
.pk-v.dobra{color:var(--las);}
.pk-v.srednia{color:var(--sygnal);}
.pk-v.zla{color:var(--sygnal);}
.pk-v.maly{font-size:1.05rem;font-weight:600;}
.prognoza{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.pd{background:var(--surface);padding:16px 14px;display:grid;gap:4px;text-align:center;}
.pd-d{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.pd-t{font-family:var(--f-disp);font-weight:700;font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.pd-t small{font-weight:400;color:var(--muted);font-size:.8em;}
.pd-o{font-size:12px;color:var(--muted);line-height:1.3;}

/* ---------- formularze zgłoszeń ---------- */
.nu-form{border:1px solid var(--line);background:var(--surface);padding:24px 26px;
  max-width:560px;display:grid;gap:6px;margin:24px 0 0;}
.nu-form label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;}
.nu-form input,.nu-form select,.nu-form textarea{border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:15px;
  padding:11px 13px;border-radius:2px;width:100%;}
.nu-form input::placeholder,.nu-form textarea::placeholder{color:var(--muted);}
.nu-form textarea{resize:vertical;min-height:96px;}
.nu-form button{margin-top:18px;justify-self:start;}
.nu-form-wpis{margin:0 0 6px;font-size:14.5px;color:var(--ink-2);}
.nu-form-hint{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45;}
.nu-form-hint a{color:var(--m1);}
.nu-form-komunikat{margin:16px 0 0;padding:13px 16px;font-size:14.5px;border-radius:2px;}
.nu-form-komunikat.ok{background:var(--las-soft);color:var(--las);border-left:3px solid var(--las);}
.nu-form-komunikat.blad{background:var(--sygnal-soft);color:var(--sygnal);border-left:3px solid var(--sygnal);}
.nu-sukces{border-left:3px solid var(--las);background:var(--las-soft);padding:16px 20px;
  margin:0 0 24px;font-size:15px;color:var(--las);}

/* ---------- kalendarz wydarzeń ---------- */
.evt{font-family:var(--f-disp);font-weight:600;font-size:16.5px;margin:0;letter-spacing:-.015em;}
.evc:hover{border-color:var(--sygnal);}

/* ---------- indeks kategorii ---------- */
.katblok{padding:34px 0;}
.katblok .shead h2 a:hover{color:var(--m1);}
.katblok + .katblok{padding-top:0;}

/* ---------- formularz zgłoszenia firmy ---------- */
/* Ten formularz jest dłuższy niż przejęcie wizytówki, więc dostaje szerszy
   kontener i dwie kolumny tam, gdzie pola naturalnie chodzą parami. */
.formbox{max-width:660px;}
.formbox .nu-form{max-width:none;}
.nu-form .para{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.nu-form .para .waski{max-width:140px;}
.nu-form .para label{margin-top:10px;}
@media (max-width:600px){.nu-form .para{grid-template-columns:1fr;}
  .nu-form .para .waski{max-width:none;}}
.nu-form .wym{color:var(--sygnal);text-transform:none;letter-spacing:0;
  font-size:11px;margin-left:6px;}
.nu-form .rozdziel{border:0;border-top:1px solid var(--line);margin:22px 0 4px;width:100%;}
.nu-form optgroup{font-family:var(--f-ui);font-weight:600;}

.kroki{margin:0;padding:0 0 0 22px;display:grid;gap:12px;max-width:70ch;}
.kroki li{font-size:15.5px;line-height:1.55;color:var(--ink-2);}
.kroki li strong{color:var(--ink);}

/* ---------- zgłoszenie treści niezgodnej z prawem ---------- */
/* Checkbox musi wyłamać się z reguły width:100% dla inputów w formularzu,
   inaczej rozciąga się na całą szerokość i przestaje wyglądać jak checkbox. */
.nu-form .zgoda{display:grid;grid-template-columns:auto 1fr;gap:10px;
  align-items:start;margin:18px 0 0;text-transform:none;letter-spacing:0;
  font-family:var(--f-ui);font-size:14px;color:var(--ink-2);line-height:1.5;}
.nu-form .zgoda input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;}
.uwaga-blok{border-left:3px solid var(--m1);background:var(--surface);
  padding:16px 20px;font-size:15px;color:var(--ink-2);}
.uwaga-blok p{margin:0 0 8px;}
.uwaga-blok ul{margin:0;padding-left:20px;display:grid;gap:6px;}
.uwaga-blok a{color:var(--m1);}

/* ---------- sprawy urzędowe ---------- */
.nietu{display:grid;gap:2px;border:1px solid var(--line);background:var(--surface);}
.nt{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:12px 18px;
  border-bottom:1px solid var(--line);align-items:baseline;}
.nt:last-child{border-bottom:0;}
.nt .co{font-family:var(--f-disp);font-weight:600;font-size:15px;color:var(--sygnal);}
.nt .gdzie{font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.nt .gdzie a{color:var(--m1);}
@media (max-width:640px){.nt{grid-template-columns:1fr;gap:4px;}}

.sprawy{display:grid;gap:10px;}
.sprawa{border:1px solid var(--line);background:var(--surface);}
.sprawa summary{cursor:pointer;padding:14px 18px;display:flex;flex-wrap:wrap;
  gap:10px;align-items:center;list-style:none;}
.sprawa summary::-webkit-details-marker{display:none;}
.sprawa summary::before{content:"+";font-family:var(--f-mono);color:var(--muted);
  font-size:15px;width:14px;}
.sprawa[open] summary::before{content:"–";}
.sprawa[open] summary{border-bottom:1px solid var(--line);}
.sprawa .nazwa{font-family:var(--f-disp);font-weight:600;font-size:16px;
  letter-spacing:-.015em;flex:1;min-width:220px;}
.sprawa .tag{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 8px;border:1px solid var(--line);color:var(--muted);}
.sprawa .tag.ok{border-color:var(--las);color:var(--las);}
.szczegoly{display:grid;grid-template-columns:150px 1fr;gap:8px 18px;
  margin:0;padding:16px 18px;font-size:15px;}
.szczegoly dt{font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding-top:2px;}
.szczegoly dd{margin:0;color:var(--ink-2);line-height:1.55;}
.szczegoly a{color:var(--m1);}
@media (max-width:640px){.szczegoly{grid-template-columns:1fr;gap:2px 0;}
  .szczegoly dd{margin-bottom:8px;}}
.uwaga-proc{margin:0;padding:0 18px 14px;font-size:14px;color:var(--ink-2);
  line-height:1.55;}
.zrodlo{margin:0;padding:0 18px 14px;font-family:var(--f-mono);font-size:11.5px;
  color:var(--muted);}
.zrodlo a{color:var(--m1);}
.zrodlo.brak{color:var(--sygnal);}

.wydzialy{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.wydz{border:1px solid var(--line);background:var(--surface);padding:18px 20px;}
.wydz.bez{opacity:.72;}
.wydz h3{font-family:var(--f-disp);font-weight:600;font-size:16.5px;margin:0 0 3px;
  letter-spacing:-.015em;}
.wydz .inst{margin:0 0 8px;font-size:13px;color:var(--muted);}
.wydz .co{margin:0 0 10px;font-size:14px;color:var(--ink-2);line-height:1.5;}
.wydz dl{display:grid;grid-template-columns:88px 1fr;gap:5px 12px;margin:0;font-size:14.5px;}
.wydz dt{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding-top:2px;}
.wydz dd{margin:0;color:var(--ink-2);}
.wydz dd a{color:var(--m1);}
.wydz .uwaga-proc,.wydz .zrodlo{padding:10px 0 0;}

/* ---------- wyjątek w godzinach ---------- */
/* Wyjątek jest ważniejszy niż zwykły status, więc dostaje kolor sygnałowy
   i stoi przed nim — inaczej ginie obok „otwarte do 18:00". */
.pill.wyj{background:var(--sygnal-soft);color:var(--sygnal);
  border:1px solid var(--sygnal);font-weight:600;}
.nu-wyj td input[type=date]{width:132px;}
.nu-wyj td input[type=time]{width:96px;}

/* ---------- ostrzeżenia meteorologiczne ---------- */
/* Kolory odpowiadają stopniom IMGW: żółty, pomarańczowy, czerwony. Nie są
   ozdobą — ludzie znają tę skalę z prognozy i rozpoznają ją bez czytania. */
.ostrzezenia{display:grid;gap:10px;margin:0 0 22px;}
.ostrz{border-left:4px solid;padding:14px 18px;background:var(--surface);}
.ostrz.zolty{border-color:#e8b93a;}
.ostrz.pomaranczowy{border-color:#f5934a;}
.ostrz.czerwony{border-color:#f5776a;}
.ostrz-t{margin:0 0 3px;font-family:var(--f-disp);font-weight:700;font-size:16.5px;
  letter-spacing:-.015em;}
.ostrz.zolty .ostrz-t{color:#e8b93a;}
.ostrz.pomaranczowy .ostrz-t{color:#f5934a;}
.ostrz.czerwony .ostrz-t{color:#f5776a;}
.ostrz-k{margin:0 0 8px;font-family:var(--f-mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.ostrz-o{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--ink-2);}
.ostrz-z{margin:0;font-family:var(--f-mono);font-size:11px;color:var(--muted);}

/* ---------- indeks A–Z ---------- */
.litery{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 26px;
  padding:14px 16px;border:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:5;}
.litery a{font-family:var(--f-mono);font-size:13px;font-weight:500;
  min-width:30px;text-align:center;padding:5px 7px;color:var(--ink-2);
  border:1px solid transparent;}
.litery a:hover{border-color:var(--line);color:var(--m1);}
.sec.az{padding:0 0 22px;scroll-margin-top:70px;}
.az-litera{font-family:var(--f-disp);font-size:26px;font-weight:700;
  margin:0 0 10px;padding:0 0 6px;border-bottom:2px solid var(--ink);
  letter-spacing:-.02em;}
.az-lista{list-style:none;margin:0;padding:0;columns:3;column-gap:32px;}
@media (max-width:900px){.az-lista{columns:2;}}
@media (max-width:560px){.az-lista{columns:1;}}
.az-lista li{break-inside:avoid;padding:3px 0;font-size:15.5px;line-height:1.5;}
.az-lista a{color:var(--ink);}
.az-lista a:hover{color:var(--m1);}
.az-do,.az-typ{font-size:12.5px;color:var(--muted);margin-left:5px;}
.az-typ{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;}

/* ---------- utrudnienia w komunikacji ---------- */
.komunikaty{display:grid;gap:2px;border:1px solid var(--line);}
.kom{display:grid;gap:4px;padding:14px 18px;background:var(--surface);
  border-bottom:1px solid var(--line);}
.kom:last-child{border-bottom:0;}
.kom:hover{background:var(--paper);}
.kom-t{font-family:var(--f-disp);font-weight:600;font-size:16px;
  letter-spacing:-.015em;color:var(--ink);}
.kom:hover .kom-t{color:var(--m1);}
.kom-o{font-size:14.5px;line-height:1.5;color:var(--ink-2);}
.kom-zrodlo{margin:10px 0 0;font-family:var(--f-mono);font-size:11.5px;
  color:var(--muted);}
.zrodla{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.zr{display:grid;gap:3px;padding:16px 18px;border:1px solid var(--line);
  background:var(--surface);}
.zr:hover{border-color:var(--m1);}
.zr .n{font-family:var(--f-disp);font-weight:600;font-size:15.5px;color:var(--ink);}
.zr .o{font-size:13.5px;color:var(--muted);line-height:1.45;}

/* ---------- firmy współpracujące ---------- */
.polecane{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.pol{border:1px solid var(--line);background:var(--surface);padding:18px 20px;}
.pol h2{font-family:var(--f-disp);font-weight:600;font-size:17px;margin:0 0 6px;
  letter-spacing:-.015em;}
.pol h2 a{color:var(--ink);}
.pol h2 a:hover{color:var(--m1);}
.pol-o{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--ink-2);}
.pol-g{margin:0;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);}

/* ---------- przełącznik trybu jasny/ciemny ---------- */

/* Tekst tylko dla czytników ekranu. Nie używamy display:none ani
   visibility:hidden, bo te ukrywają treść również przed czytnikiem. */
.tylko-czytnik{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* Bez JavaScriptu przycisk nie ma jak zadziałać, więc go nie pokazujemy.
   Klasę ma-js dokłada skrypt w nagłówku dokumentu. */
.motyw{display:none;}
.ma-js .motyw{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-ui);font-size:13.5px;font-weight:500;line-height:1;
  padding:8px 12px;border:1px solid var(--line);border-radius:2px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap;}
.motyw:hover{color:var(--m1);border-color:var(--m1);}
.motyw-ikona{display:inline-flex;}
/* Widoczne słowo zaczyna się wielką literą, ale wyłącznie wizualnie:
   text-transform nie zmienia nazwy dostępnej, więc czytnik ekranu czyta
   poprawne zdanie „Włącz tryb ciemny", a nie wersalik w środku zdania. */
.motyw-t{text-transform:capitalize;}
/* Ukryty początek etykiety zostaje bez zmian, inaczej nazwa dostępna
   brzmiałaby „Włącz Tryb Ciemny" z wersalikami w środku zdania. */
.motyw-t .tylko-czytnik{text-transform:none;}

/* Widoczna jest zawsze etykieta trybu, który przycisk WŁĄCZY, nie tego,
   który jest teraz. Ikona idzie za nią. Warunek jest ten sam, co przy
   palecie, w tych samych trzech stanach: brak wyboru, systemowy tryb ciemny
   i wybór zapisany w atrybucie data-theme. */
.motyw .t-jasny{display:none;}
.motyw .t-ciemny{display:inline;}
.motyw .i-slonce{display:none;}
.motyw .i-ksiezyc{display:inline;}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .motyw .t-jasny{display:inline;}
  :root:not([data-theme="light"]) .motyw .t-ciemny{display:none;}
  :root:not([data-theme="light"]) .motyw .i-slonce{display:inline;}
  :root:not([data-theme="light"]) .motyw .i-ksiezyc{display:none;}
}
:root[data-theme="dark"] .motyw .t-jasny{display:inline;}
:root[data-theme="dark"] .motyw .t-ciemny{display:none;}
:root[data-theme="dark"] .motyw .i-slonce{display:inline;}
:root[data-theme="dark"] .motyw .i-ksiezyc{display:none;}

/* Na wąskim ekranie zostaje sama ikona. Nazwa dostępna nie znika,
   bo siedzi w ukrytym fragmencie etykiety, a nie w widocznym słowie. */
@media(max-width:900px){
  .ma-js .motyw{padding:8px 10px;}
  .motyw .motyw-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
}