/* ───────────────────────────────────────────────────────────────
   Réunion & Mauritius — przewodnik offline
   Design: bazalt + laguna. Mobile first, 4 kolory baz, serif w nagłówkach.
   ─────────────────────────────────────────────────────────────── */

:root{
  color-scheme: light dark;

  /* kolory baz — niezależne od motywu */
  --b1:#0D9488;  --b1-soft:#0d948822;
  --b2:#2F8F4E;  --b2-soft:#2f8f4e22;
  --b3:#D9541E;  --b3-soft:#d9541e22;
  --b4:#2970D6;  --b4-soft:#2970d622;
  --b0:#8A9896;  --b0-soft:#8a989622;

  --warn:#C77A08;
  --danger:#D8403F;
  --ok:#2F8F4E;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --pad:16px;
  --maxw:620px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,"Times New Roman",serif;

  --ease:cubic-bezier(.22,.61,.36,1);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --topbar-h:52px;
  --tabbar-h:58px;
}

/* ── motyw jasny (domyślny) ── */
:root{
  --bg:#FAF7F1;
  --bg-2:#F2ECE1;
  --surface:#FFFFFF;
  --surface-2:#F7F3EB;
  --ink:#141F1D;
  --ink-2:#4E605D;
  --ink-3:#85938F;
  --line:#E6DDCF;
  --line-2:#D8CDBA;
  --accent:#0B7E79;
  --accent-soft:#0b7e7916;
  --shadow:0 1px 2px rgba(20,31,29,.05), 0 8px 24px -12px rgba(20,31,29,.18);
  --shadow-lg:0 2px 6px rgba(20,31,29,.06), 0 28px 60px -24px rgba(20,31,29,.30);
  --scrim:linear-gradient(to top,rgba(8,16,15,.88) 0%,rgba(8,16,15,.55) 38%,rgba(8,16,15,.08) 72%,transparent 100%);
}

/* ── motyw ciemny ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08100F;
    --bg-2:#0C1817;
    --surface:#111F1E;
    --surface-2:#17292A;
    --ink:#E9F2F0;
    --ink-2:#A3B8B5;
    --ink-3:#748986;
    --line:#203534;
    --line-2:#2C4645;
    --accent:#2FD4C4;
    --accent-soft:#2fd4c41f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 30px 64px -26px rgba(0,0,0,.85);
    --scrim:linear-gradient(to top,rgba(3,9,9,.92) 0%,rgba(3,9,9,.6) 38%,rgba(3,9,9,.1) 72%,transparent 100%);
    --b1:#2DD4BF; --b2:#53C26E; --b3:#F4753C; --b4:#5B9BF0; --b0:#93A3A1;
    --b1-soft:#2dd4bf1f; --b2-soft:#53c26e1f; --b3-soft:#f4753c1f; --b4-soft:#5b9bf01f; --b0-soft:#93a3a11f;
    --warn:#E7A93A; --danger:#F06A68; --ok:#53C26E;
  }
}
:root[data-theme="dark"]{
  --bg:#08100F;
  --bg-2:#0C1817;
  --surface:#111F1E;
  --surface-2:#17292A;
  --ink:#E9F2F0;
  --ink-2:#A3B8B5;
  --ink-3:#748986;
  --line:#203534;
  --line-2:#2C4645;
  --accent:#2FD4C4;
  --accent-soft:#2fd4c41f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 30px 64px -26px rgba(0,0,0,.85);
  --scrim:linear-gradient(to top,rgba(3,9,9,.92) 0%,rgba(3,9,9,.6) 38%,rgba(3,9,9,.1) 72%,transparent 100%);
  --b1:#2DD4BF; --b2:#53C26E; --b3:#F4753C; --b4:#5B9BF0; --b0:#93A3A1;
  --b1-soft:#2dd4bf1f; --b2-soft:#53c26e1f; --b3-soft:#f4753c1f; --b4-soft:#5b9bf01f; --b0-soft:#93a3a11f;
  --warn:#E7A93A; --danger:#F06A68; --ok:#53C26E;
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
/* hosting, który opakowuje stronę, bywa że sam dokłada bezpieczne marginesy na :root —
   my obsługujemy je sami w #topbar i #tabbar, więc zerujemy, żeby się nie zdublowały */
:root{padding-top:0!important; padding-bottom:0!important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b));
}
body.sheet-open{overflow:hidden;}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.012em; line-height:1.18;}
p{margin:0 0 .72em;}
p:last-child{margin-bottom:0;}
a{color:inherit;}
button{font:inherit; color:inherit;}
svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
img{display:block; max-width:100%;}
::selection{background:var(--accent-soft);}

/* ── belka górna ── */
#topbar{
  position:sticky; top:0; z-index:40;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding:var(--safe-t) 8px 0;
  display:flex; align-items:center; gap:4px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
#topbar.scrolled{border-bottom-color:var(--line);}
#topbar-title{flex:1; min-width:0; padding:0 4px; display:flex; flex-direction:column; justify-content:center;}
#topbar-title strong{
  font:600 16.5px/1.2 var(--serif); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#topbar-title span{
  font-size:11.5px; color:var(--ink-3); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.icon-btn{
  flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%;
  background:transparent; display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:active{background:var(--surface-2);}
#theme .i-moon{display:none;}
:root[data-theme="dark"] #theme .i-sun{display:none;}
:root[data-theme="dark"] #theme .i-moon{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #theme .i-sun{display:none;}
  :root:not([data-theme="light"]) #theme .i-moon{display:block;}
}

/* ── pasek zakładek ── */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-top:1px solid var(--line);
}
#tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-decoration:none; color:var(--ink-3); font-size:10.5px; font-weight:500;
  letter-spacing:.01em; -webkit-tap-highlight-color:transparent;
  position:relative; transition:color .18s;
}
#tabbar a svg{width:23px; height:23px; stroke-width:1.7;}
#tabbar a[aria-current="page"]{color:var(--accent);}
#tabbar a[aria-current="page"]::before{
  content:""; position:absolute; top:0; width:26px; height:2.5px; border-radius:0 0 3px 3px;
  background:var(--accent);
}

/* ── układ widoku ── */
#view{display:block; outline:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.stack{display:flex; flex-direction:column; gap:14px;}
.pb{padding-bottom:28px;}

.eyebrow{
  font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.sec-title{
  display:flex; align-items:baseline; gap:8px; margin:22px 0 10px;
}
.sec-title h2{font-size:20px;}
.sec-title .n{font-size:12px; color:var(--ink-3); margin-left:auto; font-variant-numeric:tabular-nums;}
.lede{color:var(--ink-2); font-size:14.5px; line-height:1.55;}
.muted{color:var(--ink-3);}
.tnum{font-variant-numeric:tabular-nums;}

/* ── karty ── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-pad{padding:15px;}
.tap{cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease);}
.tap:active{transform:scale(.985);}

/* ── hero ze zdjęciem ── */
.hero{position:relative; isolation:isolate; background:var(--bg-2);}
.hero > img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  z-index:-2;
}
.hero::after{content:""; position:absolute; inset:0; background:var(--scrim); z-index:-1;}
.hero-body{padding:16px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end;}
.hero-body h1,.hero-body h2{color:#fff; text-shadow:0 1px 20px rgba(0,0,0,.4);}
.hero-body .eyebrow{color:rgba(255,255,255,.8);}
.hero-tall{min-height:310px;}
.hero-mid{min-height:208px;}
.hero-short{min-height:150px;}

/* ── chipy / plakietki ── */
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3.5px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.chip svg{width:13px; height:13px; stroke-width:2.1;}
.chip-solid{border-color:transparent; color:#fff;}
.chip-warn{background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 28%,transparent);}
.chip-danger{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 28%,transparent);}
.chip-ok{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 28%,transparent);}
.chip-accent{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.chip-glass{background:rgba(255,255,255,.17); color:#fff; border-color:rgba(255,255,255,.26); backdrop-filter:blur(6px);}

.dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block;}

/* kropka „dla dziecka” */
.kid{display:inline-flex; align-items:center; gap:5px;}
.kid i{width:8px; height:8px; border-radius:50%; display:block;}
.kid-g i{background:var(--ok);} .kid-y i{background:var(--warn);} .kid-r i{background:var(--danger);}

/* skala trekkingowa */
.rdg{
  display:inline-flex; align-items:center; padding:2.5px 7px; border-radius:6px;
  font:700 10.5px/1.25 var(--sans); letter-spacing:.02em;
}
.rdg-0{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok);}
.rdg-1{background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn);}
.rdg-2{background:color-mix(in srgb,var(--b3) 16%,transparent); color:var(--b3);}
.rdg-3{background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger);}

/* ── notki: ostrzeżenie / tip / telefon ── */
.note{
  display:flex; gap:9px; padding:11px 12px; border-radius:var(--r);
  font-size:13.5px; line-height:1.5; background:var(--surface-2);
  border:1px solid var(--line);
}
.note > svg{flex:0 0 auto; width:17px; height:17px; margin-top:2px;}
.note-warn{background:color-mix(in srgb,var(--warn) 9%,var(--surface)); border-color:color-mix(in srgb,var(--warn) 26%,transparent);}
.note-warn > svg{color:var(--warn);}
.note-no{background:color-mix(in srgb,var(--danger) 9%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 26%,transparent);}
.note-no > svg{color:var(--danger);}
.note-tip > svg{color:var(--accent);}
.note-pin{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 24%,transparent);}
.note-pin > svg{color:var(--accent);}
.note-call > svg{color:var(--b4);}
.note b{font-weight:650;}

/* ── przyciski ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 15px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); font-size:14px; font-weight:600; cursor:pointer;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--ease);
}
.btn:active{transform:scale(.975);}
.btn svg{width:17px; height:17px;}
.btn-primary{background:var(--accent); color:#fff; border-color:transparent;}
.btn-ghost{background:transparent;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}
.btn-row > .btn{flex:1 1 auto;}
.btn-block{width:100%;}

/* ── pasek bazy ── */
.basebar{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  text-decoration:none;
}
.basebar .badge{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; color:#fff; font:700 14px/1 var(--sans);
}
.basebar .t{flex:1; min-width:0;}
.basebar .t b{display:block; font-size:13.5px; font-weight:650; letter-spacing:-.005em;}
.basebar .t span{display:block; font-size:11.5px; color:var(--ink-3);}
.basebar > svg{width:17px; height:17px; color:var(--ink-3);}

/* ── dzień: kafelek na liście ── */
.dayrow{
  display:flex; gap:12px; padding:12px 13px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  border-left:3px solid var(--bc,var(--b0));
  text-decoration:none;
}
.dayrow .d{flex:0 0 42px; text-align:center;}
.dayrow .d b{display:block; font:600 18px/1 var(--serif); font-variant-numeric:tabular-nums;}
.dayrow .d span{display:block; font-size:10px; color:var(--ink-3); margin-top:3px; letter-spacing:.03em;}
.dayrow .m{flex:1; min-width:0;}
.dayrow .m b{display:block; font-size:14.5px; font-weight:650; letter-spacing:-.005em; margin-bottom:2px;}
.dayrow .m p{font-size:12.5px; color:var(--ink-3); line-height:1.4; margin:0;}
.dayrow .m .chips{margin-top:7px;}
.dayrow.is-today{box-shadow:0 0 0 2px var(--accent); border-color:transparent;}

/* ── osie czasu / bloki dnia ── */
.blocks{display:flex; flex-direction:column;}
.block{display:flex; gap:12px; padding:0;}
.block .rail{flex:0 0 18px; display:flex; flex-direction:column; align-items:center; padding-top:5px;}
.block .rail i{width:9px; height:9px; border-radius:50%; background:var(--bc,var(--accent)); flex:0 0 auto;}
.block .rail u{flex:1; width:1.5px; background:var(--line-2); margin:5px 0 0; border:0; text-decoration:none;}
.block:last-child .rail u{display:none;}
.block .bd{flex:1; min-width:0; padding-bottom:16px;}
.block .bh{display:flex; align-items:baseline; gap:8px; margin-bottom:7px;}
.block .bh b{font:600 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);}
.block .bh span{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}

.items{display:flex; flex-direction:column; gap:7px;}
.item{
  display:flex; gap:9px; align-items:flex-start; padding:10px 11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  text-decoration:none; font-size:13.5px; line-height:1.48;
}
.item.plain{background:transparent; border-color:transparent; padding:2px 0;}
.item .ph{flex:0 0 46px; height:46px; border-radius:8px; overflow:hidden; background:var(--bg-2);}
.item .ph img{width:100%; height:100%; object-fit:cover;}
.item .tx{flex:1; min-width:0;}
.item .tx b{font-weight:650;}
.item .tx .sub{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px;}
.item > .go{flex:0 0 auto; width:15px; height:15px; color:var(--ink-3); margin-top:3px;}

/* ── siatka miejsc ── */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
@media (min-width:520px){ .pgrid{grid-template-columns:1fr 1fr 1fr;} }
.ptile{
  position:relative; border-radius:var(--r); overflow:hidden; text-decoration:none;
  background:var(--bg-2); aspect-ratio:1/1.08; display:flex; flex-direction:column;
  justify-content:flex-end; border:1px solid var(--line);
}
.ptile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ptile::after{content:""; position:absolute; inset:0; background:var(--scrim);}
.ptile .pb2{position:relative; padding:10px; color:#fff;}
.ptile .pb2 b{display:block; font:600 13px/1.25 var(--sans); text-shadow:0 1px 12px rgba(0,0,0,.5);}
.ptile .pb2 span{display:block; font-size:10.5px; opacity:.88; margin-top:2px;}
.ptile .tag{
  position:absolute; top:8px; left:8px; z-index:2;
  padding:3px 7px; border-radius:999px; font:700 9.5px/1.3 var(--sans);
  letter-spacing:.04em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
}
.ptile .done{
  position:absolute; top:8px; right:8px; z-index:2; width:21px; height:21px;
  border-radius:50%; background:var(--ok); display:grid; place-items:center;
}
.ptile .done svg{width:13px; height:13px; color:#fff; stroke-width:2.6;}

/* lista pozioma */
.rail-h{
  display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2px var(--pad) 6px; margin:0 calc(-1 * var(--pad));
  scrollbar-width:none;
}
.rail-h::-webkit-scrollbar{display:none;}
.rail-h > *{flex:0 0 150px; scroll-snap-align:start;}

/* ── wiersz listy (miejsca) ── */
.prow{
  display:flex; gap:11px; padding:9px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none;
}
.prow .ph{flex:0 0 58px; height:58px; border-radius:10px; overflow:hidden; background:var(--bg-2); position:relative;}
.prow .ph img{width:100%; height:100%; object-fit:cover;}
.prow .tx{flex:1; min-width:0;}
.prow .tx b{display:block; font-size:14px; font-weight:650; letter-spacing:-.005em;}
.prow .tx .sub{font-size:11.5px; color:var(--ink-3); margin-top:2px; display:block;}
.prow .tx .chips{margin-top:6px;}

/* ── filtry ── */
.filters{
  display:flex; gap:7px; overflow-x:auto; padding:10px var(--pad);
  margin:0 calc(-1 * var(--pad)); scrollbar-width:none;
  position:sticky; top:calc(var(--topbar-h) + var(--safe-t)); z-index:30;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.filters::-webkit-scrollbar{display:none;}
.fchip{
  flex:0 0 auto; padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.fchip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:transparent;}

.search{
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.search svg{width:17px; height:17px; color:var(--ink-3); flex:0 0 auto;}
.search input{
  flex:1; border:0; background:transparent; padding:12px 0; font:inherit; font-size:15px;
  color:var(--ink); outline:none; min-width:0;
}

/* ── mapa ── */
body.on-map{overflow:hidden; overscroll-behavior:none;}
#mapwrap{
  position:relative; overflow:hidden;
  height:calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--tabbar-h) - var(--safe-b));
  min-height:420px;
}
#map{position:absolute; inset:0; background:var(--bg-2);}
.gm-style-cc, .gm-style a[href*="maps.google"]{opacity:.55;}
.mapmsg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:150px 24px 230px; background:var(--bg-2); color:var(--ink-2); font-size:13.5px; line-height:1.55;
}
.mapmsg > svg{width:30px; height:30px; color:var(--ink-3); margin-bottom:12px;}
.mapmsg .search, .mapmsg .btn{width:100%; max-width:330px;}
.mapmsg p{max-width:340px;}

.map-top{position:absolute; left:0; right:0; top:0; z-index:5; padding:8px 0 0; pointer-events:none;}
.mchips{
  display:flex; gap:6px; overflow-x:auto; padding:0 12px 6px; scrollbar-width:none; pointer-events:auto;
}
.mchips::-webkit-scrollbar{display:none;}
.mchip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; border:0; cursor:pointer;
  background:color-mix(in srgb, var(--surface) 94%, transparent); color:var(--ink);
  font-size:13px; font-weight:650; box-shadow:0 1px 3px rgba(0,0,0,.18), 0 4px 14px -6px rgba(0,0,0,.3);
  -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.mchip i{width:9px; height:9px; border-radius:50%; display:block;}
.mchip[aria-pressed="true"]{background:var(--ink); color:var(--bg);}
.mchip-sm{padding:6px 11px; font-size:12px; font-weight:600;}
.mday{
  pointer-events:auto; margin:0 12px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border-radius:var(--r); padding:6px 6px 6px 10px; box-shadow:var(--shadow-lg);
  font-size:13px;
}
.mday .badge{flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; font:700 12.5px/1 var(--sans);}
.mday span:nth-child(2){flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.map-fabs{position:absolute; right:12px; top:104px; z-index:5; display:flex; flex-direction:column; gap:8px;}
.fab{
  width:42px; height:42px; border-radius:12px; border:0; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18), 0 6px 16px -6px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
}
.fab svg{width:20px; height:20px;}
.fab:active{transform:scale(.95);}

.mcards{
  position:absolute; left:0; right:0; bottom:10px; z-index:5;
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 12px 6px; scrollbar-width:none; overscroll-behavior-x:contain;
}
.mcards::-webkit-scrollbar{display:none;}
.mcard{
  flex:0 0 min(82%, 340px); scroll-snap-align:center; display:flex; gap:10px; padding:9px;
  background:var(--surface); border-radius:var(--r); border:2px solid transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.14), 0 14px 30px -14px rgba(0,0,0,.45); cursor:pointer;
}
.mcard.on{border-color:var(--accent);}
.mcard.is-closed{opacity:.75;}
.mcard-empty{justify-content:center; align-items:center; color:var(--ink-3); font-size:13px; min-height:80px; cursor:default;}
.mcard .ph{position:relative; flex:0 0 74px; height:96px; border-radius:10px; overflow:hidden; background:var(--bg-2); display:grid; place-items:center;}
.mcard .ph img{width:100%; height:100%; object-fit:cover;}
.mcard .ph-ic svg{width:24px; height:24px; color:var(--ink-3);}
.mnum{position:absolute; left:5px; top:5px; width:22px; height:22px; border-radius:50%; color:#fff; font:700 11.5px/22px var(--sans); text-align:center; border:2px solid #fff;}
.mcard .tx{flex:1; min-width:0; display:flex; flex-direction:column;}
.mcard .tx b{font-size:14px; font-weight:650; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mcard .sub{font-size:11.5px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mcard .sub .far{color:var(--accent); font-weight:650;}
.mcard .chips{margin-top:5px; flex-wrap:nowrap; overflow:hidden;}
.mact{display:flex; gap:6px; margin-top:auto; padding-top:7px;}
.btn-sm{padding:6px 10px; font-size:12.5px; border-radius:10px; white-space:nowrap;}
.btn-sm svg{width:14px; height:14px;}

/* ── szlak ── */
.trail{margin-top:8px;}
.trail .sec-title .rdg{margin-left:auto;}
.tstats{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.tstats .tst-time{grid-column:1 / -1;}
.tstats .tst-time b{font:600 14px/1.35 var(--sans);}
.tstats > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 10px 9px;}
.tstats b{display:block; font:600 16px/1.2 var(--serif);}
.tstats span{display:block; font-size:11px; color:var(--ink-3); margin-top:3px; line-height:1.3;}
.tprof{display:block; width:100%; height:96px;}
.tprof-l{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); margin-top:2px; font-variant-numeric:tabular-nums;}
.tpark{margin-top:10px;}
.tpark-h{display:flex; gap:10px; align-items:center; margin-bottom:11px;}
.tpark-h > svg{width:30px; height:30px; color:#1F5FBF; flex:0 0 auto;}
.tpark-h b{display:block; font-size:14px; font-weight:650; margin-top:3px;}
.tsteps{margin:14px 0 0; padding:0; list-style:none; counter-reset:st;}
.tsteps li{
  position:relative; padding:0 0 12px 36px; font-size:14px; line-height:1.55; counter-increment:st;
}
.tsteps li::before{
  content:counter(st); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font:700 12px/24px var(--sans); text-align:center;
}
.tsteps li:not(:last-child)::after{
  content:""; position:absolute; left:11.5px; top:28px; bottom:2px; width:1.5px; background:var(--line-2);
}

/* ── pogoda ── */
.wx-h{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.wx-h svg{width:19px; height:19px; color:var(--accent);}
.wx-h b{font-size:14px; font-weight:650;}
.wx-h .muted{margin-left:auto; font-size:11.5px;}
.wx-days{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;}
.wx-d{border-radius:var(--r-sm); padding:8px 7px; background:var(--surface-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px; min-width:0;}
.wx-d span{font-size:10.5px; color:var(--ink-3); line-height:1.3;}
.wx-d .wx-day{font-weight:650; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em;}
.wx-d b{font-size:13.5px;}
.wx-ok b{color:var(--ok);} .wx-mid b{color:var(--warn);} .wx-bad b{color:var(--danger);}

/* ── różne ── */
.chip-xs{padding:1.5px 7px; font-size:10.5px; vertical-align:1px;}
.prow.is-closed, .ptile.is-closed{opacity:.6;}
.ptile .tag-no{background:color-mix(in srgb,var(--danger) 80%,transparent);}
.item .sub.hrs{display:flex; align-items:center; gap:4px; color:var(--ink-2);}
.item .sub.hrs svg{width:12px; height:12px;}
.hrs-week{font-weight:500; font-size:12.5px; color:var(--ink-2);}

/* ── arkusz dolny ── */
.sheet{position:fixed; inset:0; z-index:90;}
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(4,10,10,.55);
  backdrop-filter:blur(2px); opacity:0; transition:opacity .26s var(--ease);
}
.sheet.on .sheet-backdrop{opacity:1;}
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:93dvh;
  background:var(--bg); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-lg); overflow:hidden;
  transform:translateY(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column;
}
.sheet.on .sheet-panel{transform:translateY(0);}
@media (min-width:640px){
  .sheet-panel{
    max-width:var(--maxw); margin:0 auto; bottom:0;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
}
.sheet-close{
  position:absolute; top:10px; right:10px; z-index:5;
  background:rgba(0,0,0,.42); color:#fff; backdrop-filter:blur(8px);
}
.sheet-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(22px + var(--safe-b));}
.sheet-grab{
  width:38px; height:4px; border-radius:99px; background:var(--line-2);
  margin:8px auto 0;
}

/* galeria w arkuszu */
.gal{display:flex; gap:4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
.gal::-webkit-scrollbar{display:none;}
.gal img{flex:0 0 100%; scroll-snap-align:center; height:250px; object-fit:cover;}
.gal.one img{flex:0 0 100%;}
.galdots{display:flex; gap:5px; justify-content:center; padding:8px 0 0;}
.galdots i{width:5px; height:5px; border-radius:50%; background:var(--line-2);}
.galdots i.on{background:var(--ink-2);}

/* ── tabela / dane ── */
.dl{display:flex; flex-direction:column; gap:0; font-size:13.5px;}
.dl > div{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line);}
.dl > div:last-child{border-bottom:0;}
.dl dt{flex:0 0 108px; color:var(--ink-3); font-size:12.5px;}
.dl dd{flex:1; margin:0; font-weight:550;}

/* ── akordeon ── */
.acc{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden;}
.acc + .acc{margin-top:8px;}
.acc > summary{
  padding:13px 14px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:650; -webkit-tap-highlight-color:transparent;
}
.acc > summary::-webkit-details-marker{display:none;}
.acc > summary .caret{margin-left:auto; width:16px; height:16px; color:var(--ink-3); transition:transform .22s var(--ease);}
.acc[open] > summary .caret{transform:rotate(90deg);}
.acc > summary .ic{width:18px; height:18px; color:var(--accent); flex:0 0 auto;}
.acc-body{padding:0 14px 14px; font-size:14px; line-height:1.58; color:var(--ink-2);}
.acc-body > * + *{margin-top:9px;}
.acc-body b,.acc-body strong{color:var(--ink); font-weight:650;}
.acc-body ul{margin:0; padding-left:19px;}
.acc-body li + li{margin-top:5px;}

.artbadge{
  display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.artbadge svg{width:23px; height:23px;}

/* ── lista info ── */
.infogrid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.infotile{
  display:flex; flex-direction:column; gap:8px; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; min-height:104px;
}
.infotile svg{width:21px; height:21px; color:var(--accent);}
.infotile b{font-size:13.5px; font-weight:650; letter-spacing:-.005em; line-height:1.3;}
.infotile span{font-size:11.5px; color:var(--ink-3); line-height:1.4; margin-top:auto;}

/* ── checklista ── */
.check{display:flex; gap:11px; padding:11px 12px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); cursor:pointer;}
.check input{appearance:none; margin:0; flex:0 0 auto; width:21px; height:21px; border-radius:7px;
  border:1.8px solid var(--line-2); background:var(--surface-2); display:grid; place-items:center; cursor:pointer;}
.check input:checked{background:var(--ok); border-color:var(--ok);}
.check input:checked::after{content:""; width:11px; height:6px; border-left:2.2px solid #fff; border-bottom:2.2px solid #fff; transform:rotate(-45deg) translateY(-1px);}
.check .tx{flex:1; min-width:0; font-size:13.5px; line-height:1.45;}
.check .tx b{font-weight:650;}
.check .tx span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px;}
.check input:checked ~ .tx{opacity:.45; text-decoration:line-through; text-decoration-thickness:1px;}

.progress{height:5px; border-radius:99px; background:var(--line); overflow:hidden;}
.progress i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s var(--ease);}

/* ── doradca ── */
.qrow{display:flex; flex-direction:column; gap:8px;}
.qopts{display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:7px;}
.qopt{
  padding:12px 8px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface);
  font-size:12.5px; font-weight:600; cursor:pointer; text-align:center; line-height:1.3;
  -webkit-tap-highlight-color:transparent;
}
.qopt[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:transparent;}
.qopt small{display:block; font-size:16px; margin-bottom:3px;}

/* ── countdown ── */
.cd{display:flex; gap:9px;}
.cd > div{
  flex:1; text-align:center; padding:11px 4px; border-radius:var(--r);
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
}
.cd b{display:block; font:600 23px/1 var(--serif); color:#fff; font-variant-numeric:tabular-nums;}
.cd span{display:block; font-size:10px; color:rgba(255,255,255,.8); margin-top:4px; letter-spacing:.05em; text-transform:uppercase;}

/* ── toast ── */
#toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  transform:translate(-50%,14px); z-index:95;
  background:var(--ink); color:var(--bg); padding:9px 15px; border-radius:999px;
  font-size:13px; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s var(--ease); max-width:84vw; text-align:center;
}
#toast.on{opacity:1; transform:translate(-50%,0);}

/* ── splash ── */
#splash{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:grid; place-items:center; transition:opacity .35s;
}
#splash.off{opacity:0; pointer-events:none;}
.splash-mark{
  width:46px; height:46px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── offline ── */
.offline-bar{
  background:var(--warn); color:#fff; font-size:12px; font-weight:600;
  text-align:center; padding:5px; letter-spacing:.01em;
}

/* ── mozaika zdjęć bazy ── */
.mosaic{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:3px; height:170px;}
.mosaic img{width:100%; height:100%; object-fit:cover;}
.mosaic img:first-child{grid-row:1/3;}

/* ── pomocnicze ── */
.sep{height:1px; background:var(--line); margin:4px 0;}
.center{text-align:center;}
.nowrap{white-space:nowrap;}
.empty{padding:40px 20px; text-align:center; color:var(--ink-3); font-size:14px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important;}
}