/* ─────────────────────────────────────────────────────────────
   „Odloty” — skin dla Travel Planner (kierunek A: hala odlotów)
   Wczytywany PO głównym <style> w index.html. Nie zmienia struktury
   HTML ani logiki Alpine — nadpisuje tokeny i wygląd komponentów.

   Zasada kierunku: DZIEŃ to biała hala terminalu, a każda powierzchnia
   niosąca DANE (nagłówek sekcji, zakładki dni, hero planu, belka) jest
   czarną tablicą. NOC to tablica wszędzie — granat zniknął z aplikacji.

   Dlatego --accent znaczy tu „kolor, który wybija się na AKTUALNYM tle”:
   w dzień granat (10,7 na bieli), w nocy żółć (9,6 na #141414). Żółć na
   bieli daje 1,9 i nie wolno jej dawać jako koloru tekstu w dzień —
   pojawia się wyłącznie NA czarnych tablicach i na odcinku biletu,
   zawsze z ciemnym tekstem na sobie.
   ───────────────────────────────────────────────────────────── */

:root{
  --navy:#12406a;          /* ramka biletu i akcent dnia */
  --cream:#f6f1e8;
  /* Noc = tablica. Kontrasty na #141414: tekst #ece9e2 = 13,9;
     --text-dim #a5a29a = 7,4; --text-muted #8d8a80 = 5,3 (ta sama wartość
     co zmierzona przy belce); żółć #f2c14e = 9,6; zieleń #5fd38d = 8,9. */
  --bg:#0f0f0f;
  --surface:#141414;
  --surface2:#1c1c1c;
  --border:#2c2c2c;
  --text:#ece9e2;
  --text-dim:#a5a29a;
  --text-muted:#8d8a80;
  --cal-dow:#a5a29a;
  --accent:var(--bd-yellow);
  --accent2:var(--bd-yellow);
  --primary:var(--bd-yellow);
  --primary-dim:rgba(242,193,78,.14);
  --success:var(--bd-green);
  --success-dim:rgba(95,211,141,.14);
  --warn-dim:rgba(242,193,78,.14);
  --danger:#ff6b6b;
  --on-accent:#141414;     /* ciemny atrament na żółci — 10,2 */
  --sh-col:rgba(0,0,0,.6);
  --tab-bar:#0b0b0b;
  --tab-strip:#1c1c1c;
  --tab-line:#2c2c2c;
  --tab-text:#8d8a80;      /* 5,3 na #0b0b0b */
}

/* ── Paleta dzienna: biała hala ── */
html.day-theme{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f4f5f6;
  --border:rgba(16,18,20,.16);
  --text:#101214;          /* 18,6 na bieli */
  --text-dim:#4a4d53;      /* 8,7 */
  --text-muted:#6c6f76;    /* 5,4 */
  --cal-dow:#5a5d64;       /* 6,9 — drobny tekst kalendarza i sugestii */
  --accent:var(--navy);    /* 10,7 na bieli */
  --accent2:#8a6212;       /* ostrzeżenia: 5,4 na bieli (żółć dałaby 1,9) */
  --primary:var(--navy);
  --primary-dim:rgba(18,64,106,.09);
  --success:#2e6b4f;
  --success-dim:rgba(46,107,79,.1);
  --warn-dim:rgba(224,165,46,.16);
  --danger:#c62828;
  --on-accent:var(--cream);
  --sh-col:rgba(16,18,20,.12);
  /* Zakładki dni = bramki na czarnej tablicy, w obu motywach. */
  --tab-bar:#0f0f0f;
  --tab-strip:#f4f5f6;
  --tab-line:rgba(16,18,20,.16);
  --tab-text:#8d8a80;      /* 5,3 na czerni tablicy */
}
html.day-theme body::before{opacity:.02;}
html.day-theme .fi,html.day-theme .fs,html.day-theme .ft{background:#f4f5f6;}
html.day-theme .b-muted{background:rgba(16,18,20,.05);color:var(--text-dim);}
html.day-theme .b-muted:hover:not(:disabled){background:rgba(16,18,20,.09);}
html.day-theme .badge.b-muted{background:rgba(16,18,20,.05);}
html.day-theme .b-amber{background:rgba(224,165,46,.16);border-color:rgba(224,165,46,.45);color:#8a6212;}
html.day-theme .b-star{background:rgba(224,165,46,.15);border-color:rgba(224,165,46,.45);color:#8a6212;}

/* ── Belka: tablica odlotów (runda 2 belki, kierunek „Odloty”) ──
   Czarna tablica klapkowa w OBU motywach — ta sama zasada co dawny granat: kolory
   zakodowane na sztywno, bo tokeny motywu dałyby w dzień ciemny tekst na czerni.
   Jedna siatka na dwa układy (desktop: dwa wiersze; ≤ 1020 px: marka + PANEL | pas);
   .hd-strip2 ma w desktopie display:contents, więc CTA i bramki są komórkami siatki.
   Kontrast tekstu ≤ 12 px: szary #8d8a80 na #141414 = 5,3; żółty #f2c14e na #1c1c1c = 10,2;
   zielony #5fd38d na #0b0b0b = 10,4 — nie rozjaśniać szarego „dla elegancji”. */
:root{
  --bd-black:#0f0f0f;--bd-row:#141414;--bd-flap:#1c1c1c;--bd-yellow:#f2c14e;
  --bd-green:#5fd38d;--bd-gray:#8d8a80;--bd-cream:#f2ead6;
  --ff-board:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --ff-board-m:'Space Mono',Menlo,monospace;
}
header.board{
  color:var(--bd-yellow);border-bottom:1px solid #000;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
             linear-gradient(to bottom,var(--bd-black) 0 100px,#262626 100px 101px,var(--bd-row) 101px);
}
header.board::before,header.board::after{display:none;}
.board .hd{
  display:grid;align-items:center;gap:0 16px;
  grid-template-columns:auto minmax(0,1fr) auto auto auto auto;
  grid-template-rows:100px 76px;
  /* Bramki zajmują kolumny 2–4: przy szerokim znaku „PLAN TRAVEL” (kolumna 1 ≈ 390 px) dwie
     kolumny dawały im ~170 px, a trzy bramki (flex-shrink:0) wchodziły pod przełącznik PL/EN. */
  grid-template-areas:"brand . status cta trip trip" "route gates gates gates lang panel";
  height:auto;min-height:0;max-width:1000px;margin:0 auto;padding:0 24px;
}
.board :focus-visible{outline:2px solid var(--bd-yellow);outline-offset:2px;}
/* PL / EN — stan wybrany z <html lang> (static/i18n.js), bez Alpine, jak segment motywu.
   Kolory zakodowane: belka jest ciemna w obu motywach. */
.hd-lang{grid-area:lang;justify-self:end;display:inline-flex;border:1px solid #3a3a3a;border-radius:3px;overflow:hidden;}
.hd-lang button{min-width:42px;height:36px;padding:0 10px;border:0;background:transparent;color:var(--bd-gray);
  font-family:var(--ff-board-m);font-size:12px;font-weight:700;letter-spacing:.12em;cursor:pointer;}
.hd-lang button:hover{background:#262626;color:var(--bd-yellow);}
html[lang="pl"] .hd-lang [data-lang-set="pl"],html[lang="en"] .hd-lang [data-lang-set="en"],
html[lang="pl"] .hd-panel .theme-opt[data-lang-set="pl"],html[lang="en"] .hd-panel .theme-opt[data-lang-set="en"]{background:var(--bd-yellow);color:var(--bd-black);}

/* marka: logo wprost na tle belki (bez klapki) + litery-klapki.
   Klapka istniała, bo granat znaku ginie na czerni — zamiast niej przemalowujemy
   granatowe ścieżki na kremowe. `fill` w SVG to atrybut prezentacyjny, więc każda
   reguła CSS go nadpisuje; pomarańcz `#e97723` zostaje, czyta się na czerni. */
.board .hd-brand{grid-area:brand;gap:18px;padding:0;}
.board .hd-logo-wrap{position:relative;width:60px;height:60px;border-radius:4px;background:transparent;box-shadow:none;padding:0;}
.board .hd-logo-svg{transform:scale(1.15);}
/* Wariant jasny: granaty → krem (znak), biele → czerń tablicy (detale jako wycięcia).
   Bez odwrócenia bieli detale zlałyby się z kremowym znakiem i logo spłaszczyłoby się. */
.board .hd-logo-svg [fill="#1c2a6c"],
.board .hd-logo-svg [fill="#2c2b49"],
.board .hd-logo-svg [fill="#4f547f"]{fill:var(--bd-cream);}
.board .hd-logo-svg [fill="#fefefe"],
.board .hd-logo-svg [fill="#FFFFFE"]{fill:var(--bd-black);}
.flap::after,.gate::after,.prow::after,.board .hd-cta:not(.hd-cta-trip)::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5);pointer-events:none;
}
.hd-flaps{display:flex;align-items:center;gap:3px;}
.flap{position:relative;display:flex;align-items:center;justify-content:center;width:27px;height:44px;border-radius:3px;background:var(--bd-flap);color:var(--bd-yellow);font-family:var(--ff-board);font-size:36px;line-height:1;box-shadow:inset 0 -2px 0 rgba(0,0,0,.55);animation:bd-flip .6s both;}
.flap.gap{width:10px;background:transparent;box-shadow:none;}
.flap.gap::after{display:none;}
.flap:nth-child(2){animation-delay:.05s}.flap:nth-child(3){animation-delay:.1s}.flap:nth-child(4){animation-delay:.15s}
.flap:nth-child(6){animation-delay:.25s}.flap:nth-child(7){animation-delay:.3s}.flap:nth-child(8){animation-delay:.35s}
.flap:nth-child(9){animation-delay:.4s}.flap:nth-child(10){animation-delay:.45s}.flap:nth-child(11){animation-delay:.5s}
/* Dwie identyczne animacje pod różnymi nazwami: przełączenie nazwy (flip-a ↔ flip-b) restartuje ją. */
@keyframes bd-flip{0%{transform:perspective(300px) rotateX(0)}45%{transform:perspective(300px) rotateX(-88deg)}55%{transform:perspective(300px) rotateX(88deg)}100%{transform:perspective(300px) rotateX(0)}}
@keyframes bd-flip2{0%{transform:perspective(300px) rotateX(0)}45%{transform:perspective(300px) rotateX(-88deg)}55%{transform:perspective(300px) rotateX(88deg)}100%{transform:perspective(300px) rotateX(0)}}
.flip-a{animation:bd-flip .5s ease-in-out;}
.flip-b{animation:bd-flip2 .5s ease-in-out;}

.bd-lbl{font-family:var(--ff-board-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bd-gray);line-height:1;white-space:nowrap;}
.hd-status{grid-area:status;display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.boarding{display:flex;align-items:center;gap:8px;font-family:var(--ff-board-m);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bd-green);line-height:1;white-space:nowrap;}
.boarding i{display:block;width:9px;height:9px;background:currentColor;animation:bd-blink 1.1s infinite;}
.boarding.demo{color:var(--bd-yellow);}
.boarding.demo i{animation:none;}
@keyframes bd-blink{0%,55%{opacity:1}56%,100%{opacity:.2}}

/* akcje główne */
.hd-strip2{display:contents;}
.hd-sep,.cta-short{display:none;}
.board .hd-cta{position:relative;margin:0;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px;border:none;border-radius:3px;background:var(--bd-yellow);color:var(--bd-black);font-family:var(--ff-board);font-size:25px;font-weight:400;letter-spacing:.05em;line-height:1;white-space:nowrap;}
.board .hd-cta:hover,.board .hd-cta.active{background:#f7cf6a;transform:none;}
.board .hd-cta.hd-cta-trip{margin:0;background:transparent;color:var(--bd-yellow);border:1.5px solid var(--bd-yellow);}
.board .hd-cta.hd-cta-trip:hover,.board .hd-cta.hd-cta-trip.active{background:var(--bd-flap);}
.board .hd-strip2>.hd-cta:not(.hd-cta-trip){grid-area:cta;}
.board .hd-strip2>.hd-cta-trip{grid-area:trip;}
.board .hd-strip2>.hd-cta-trip{justify-self:end;}

/* Dymek podpowiedzi pod CTA belki. Cztery decyzje, każda wymuszona przez kod obok:
   — ::before, NIE ::after: reguła wyżej trzyma na ::after szew klapki dla
     `.board .hd-cta:not(.hd-cta-trip)` i ma TĘ SAMĄ specyficzność (0,3,1). Dymek na
     ::after zabrałby jej `content`, ale odziedziczyłby `height:1px` i `right:0`,
     bo ich nie deklaruje — pudełko wysokie na piksel z tekstem na wierzchu, i to
     TYLKO na CITY BREAK, bo TRIP jest spod szwu wyłączony przez :not();
   — min-width:1021px, nie samo hover: niżej w tym pliku .hd-strip2 dostaje
     overflow-x:auto, a gdy jedna oś jest `auto`, druga przestaje być `visible` —
     dymek byłby ucięty. Desktop zwężony do 900 px wciąż ma hover:hover, więc samo
     @media (hover:hover) tego nie łapie;
   — right:0 na OBU przyciskach: przy wyłączonym TRIP (x-show="tripEnabled") kolumna
     „trip" zwija się do zera i CITY BREAK staje przy prawej krawędzi kontenera —
     dymek kotwiczony z lewej wyszedłby poza ekran;
   — kolory zakodowane, nie z tokenów: belka jest ciemna w OBU motywach
     (CLAUDE.md, „Kontrolki belki"). Font --ff-b, bo Bebas Neue to wąskie wersaliki. */
@media (min-width:1021px) and (hover:hover){
  .board .hd-cta[data-tip]::before{
    content:attr(data-tip);position:absolute;top:calc(100% + 10px);right:0;left:auto;z-index:130;
    width:max-content;max-width:min(320px,calc(100vw - 32px));
    padding:10px 12px;border:1px solid #2b2b2b;border-radius:4px;
    background:var(--bd-black);color:var(--bd-cream);
    font-family:var(--ff-b);font-size:.78rem;font-weight:400;letter-spacing:normal;
    line-height:1.45;text-transform:none;white-space:normal;text-align:left;
    box-shadow:0 14px 30px rgba(0,0,0,.45);pointer-events:none;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .board .hd-cta[data-tip]:hover::before,
  .board .hd-cta[data-tip]:focus-visible::before{opacity:1;visibility:visible;transform:none;}
}
.cta-ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.hd-cta-trip .cta-ico{width:20px;height:20px;stroke-width:1.9;}

/* rozkład aktywnej podróży */
.hd-route{grid-area:route;min-width:0;}
.bd-cols{display:flex;align-items:flex-end;gap:16px;}
.bd-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
.bd-val{display:flex;align-items:center;gap:6px;font-family:var(--ff-board);font-size:22px;line-height:1;letter-spacing:.04em;color:var(--bd-yellow);white-space:nowrap;}
.bd-pair{display:flex;align-items:center;gap:6px;}
.bd-arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* Desktop mieści się w 952 px treści (max-width 1000 − padding). Znak + trzy bramki + PL/EN + PANEL
   to ~1010 px przy pełnych rozmiarach, więc litery-klapki i bramki są odrobinę mniejsze — inaczej
   ostatnia bramka („PRZEWODNIK”) wchodziła pod przełącznik języka (zgłoszone 29.09.2026). */
@media(min-width:1021px){
  .board .hd{column-gap:10px;}
  .board .hd .flap{width:24px;height:40px;font-size:32px;}
  .board .hd .flap.gap{width:9px;}
  .board .hd .gate{padding:0 11px;font-size:20px;}
}

/* bramki nawigacji — aktywna przewraca się przy zmianie widoku */
.hd-gates{grid-area:gates;display:flex;align-items:center;gap:6px;min-width:0;}
.gate{position:relative;flex-shrink:0;display:inline-flex;align-items:center;height:42px;padding:0 14px;border:none;border-radius:3px;background:var(--bd-flap);color:var(--bd-yellow);font-family:var(--ff-board);font-size:22px;letter-spacing:.05em;line-height:1;white-space:nowrap;cursor:pointer;}
.gate:hover{background:#262626;}
.gate:disabled{opacity:.55;cursor:wait;}
.gate.on{background:var(--bd-yellow);color:var(--bd-black);animation:bd-flip .45s ease-in-out;}

.hd-panel-btn{grid-area:panel;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 16px;border:1.5px solid #3a3a3a;border-radius:3px;background:var(--bd-black);color:var(--bd-yellow);font-family:var(--ff-board);font-size:24px;letter-spacing:.06em;line-height:1;cursor:pointer;}
.hd-panel-btn:hover{border-color:#5a5a5a;}
.hd-panel-btn.on{border-color:var(--bd-yellow);}
.hd-panel-btn .chev{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;}
.hd-panel-btn.on .chev{transform:rotate(180deg);}
.hd-panel-btn.m{display:none;}

/* PANEL — lista klapek pod belką */
.hd-panel{position:absolute;top:calc(100% + 8px);right:max(24px,calc(50% - 476px));z-index:120;width:440px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 200px);overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--bd-black);border:1px solid #2b2b2b;border-radius:4px;box-shadow:0 28px 60px rgba(0,0,0,.45);color:var(--bd-yellow);}
.hp-board{display:none;}
.hp-head{display:flex;justify-content:space-between;padding:2px 14px 6px;}
.prow{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 14px;border:none;border-radius:3px;background:var(--bd-flap);color:var(--bd-yellow);font:inherit;text-align:left;text-decoration:none;cursor:pointer;}
.prow:hover{background:#242424;}
.prow.sel{box-shadow:inset 0 0 0 1.5px var(--bd-yellow);}
.pi{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pl{font-family:var(--ff-board);font-size:26px;letter-spacing:.05em;text-transform:uppercase;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st{position:relative;z-index:1;font-family:var(--ff-board-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bd-gray);white-space:nowrap;}
.st.val{min-width:64px;padding:7px 8px;text-align:center;background:#0b0b0b;color:var(--bd-green);border-radius:2px;font-weight:700;}
.st.out{color:var(--bd-yellow);font-weight:700;}
.hd-panel .prow.snd-btn{width:100%;height:auto;min-height:52px;display:grid;border:none;border-radius:3px;background:var(--bd-flap);color:var(--bd-yellow);overflow:visible;}
.hd-panel .prow.snd-btn:hover{background:#242424;color:var(--bd-yellow);border:none;}
.hd-panel .sndg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;}
.hd-panel .prow-theme{cursor:default;}
.hd-panel .prow-theme:hover{background:var(--bd-flap);}
.hd-panel .prow-theme::after{display:none;}
.hd-panel .theme-seg{border:1px solid #3a3a3a;border-radius:3px;}
.hd-panel .theme-opt{width:auto;height:36px;padding:0 12px;background:transparent;color:var(--bd-gray);font-family:var(--ff-board-m);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.hd-panel .theme-opt:hover{background:#262626;color:var(--bd-yellow);}
html.day-theme .hd-panel .theme-opt[data-theme-set="day"],
html:not(.day-theme) .hd-panel .theme-opt[data-theme-set="night"]{background:var(--bd-yellow);color:var(--bd-black);}

/* telefon i tablet: rząd 1 marka + PANEL, rząd 2 przewijany pas z CTA i bramkami */
@media(max-width:1020px){
  header.board{background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
                          linear-gradient(to bottom,var(--bd-black) 0 64px,#262626 64px 65px,var(--bd-row) 65px);}
  .board .hd{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:64px 61px;grid-template-areas:"brand . pm" "strip strip strip";gap:0 10px;padding:0 12px;}
  /* Na wąskiej belce nie ma miejsca obok liter-klapek (nachodziło na „L”) — PL / EN
     zostaje w PANELU, jeden dotyk dalej. */
  .hd-lang{display:none;}
  .hd-status,.hd-route,.hd-panel-btn.d{display:none;}
  .hd-panel-btn.m{display:inline-flex;grid-area:pm;width:44px;height:44px;padding:0;}
  .board .hd-brand{gap:10px;}
  .board .hd-logo-wrap{width:44px;height:44px;border-radius:3px;}
  .hd-flaps{gap:2px;}
  .flap{width:20px;height:32px;font-size:25px;border-radius:2px;}
  .flap.gap{width:6px;}
  .hd-strip2{grid-area:strip;display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;}
  .hd-strip2::-webkit-scrollbar{display:none;}
  .hd-strip2::after{content:"";flex:0 0 6px;}
  /* order:0 — bazowy blok mobilny w index.html daje .hd-cta order:3, co w pasie flex przerzucało CTA za bramki */
  .board .hd-cta{order:0;flex-shrink:0;height:44px;padding:0 13px;gap:6px;font-size:21px;}
  .cta-long{display:none;}
  .cta-short{display:inline;}
  .hd-sep{display:block;flex-shrink:0;width:1px;height:28px;background:#2c2c2c;}
  .hd-gates{flex-shrink:0;}
  .gate{height:44px;padding:0 12px;font-size:21px;}
  .hd-panel{top:calc(100% + 6px);left:10px;right:10px;width:auto;max-width:none;max-height:calc(100dvh - 140px);padding:12px;}
  .hp-board{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;padding:4px 12px 12px;margin-bottom:4px;border-bottom:1px solid #262626;}
  .pl{font-size:24px;}
  .hd-panel .theme-opt{height:44px;min-width:56px;}
}
@media(max-width:360px){
  .board .hd-logo-wrap{width:40px;height:40px;}
  .flap{width:17px;height:28px;font-size:22px;}
}

/* ── Typografia tablicy: Bebas na nazwy, Space Mono na mikroetykiety ──
   Waga 700 wyłącznie na Space Mono — Bebas nie ma osi wagi i 700 dałoby
   syntetyzowany faux-bold. Wszystko, co ≤ 12 px, jest uppercase z trackingiem. */
.sec-label h2,.ph-name,.gh-name,.vc-name,.tl-name,.day-theme-t,.card-hd,
.modal-title,.sk-stat b{
  font-family:var(--ff-board);font-style:normal;font-weight:400;letter-spacing:.03em;line-height:1.05;
}
.sec-meta,.lbl,.ph-meta,.gh-meta,.badge,.tl-t,.day-num,.g-lbl,.vc-lbl,
.day-cost,.tl-note,.sk-no,.ev-impact{
  font-family:var(--ff-board-m);letter-spacing:.12em;text-transform:uppercase;
}

/* ── Nagłówki sekcji: czarna tablica ── */
.sec-label{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),var(--bd-black);
  border:none;border-radius:3px;padding:10px 14px;gap:12px;align-items:center;
}
.sec-label::before,.sec-label::after{display:none;}
.sec-label h2{font-size:1.7rem;color:var(--bd-cream);}
.sec-label .sec-meta,.sec-meta{font-size:.66rem;letter-spacing:.16em;color:var(--bd-gray);}
@media(max-width:560px){
  .sec-label{padding:9px 12px;}
  .sec-label h2{font-size:1.25rem;}
  .sec-meta{white-space:normal;}
}

/* ── Bilety: trzy wzory (Vintage / Niebo / Złoty) żyją w static/tickets.css ──
   Ładowany PO tym pliku, palety niezależne od motywu. Tu nic o .ticket/.tk-* —
   dawny blok (żółty odcinek, `.tk-stub *{color}`) przykrywałby wzory. */

/* ── Hero planu i przewodnika: tablica odlotów ──
   Płaska czerń ze scanlinem, BEZ szwu dwóch pasów jak w belce: tam szew jest
   zsynchronizowany z wysokością wiersza siatki, a hero ma wysokość zależną od
   długości streszczenia — linia lądowała w połowie akapitu (sprawdzone). */
.plan-hero,.guide-hero{
  border:none;border-left:none;border-radius:3px;position:relative;overflow:hidden;color:var(--bd-cream);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),var(--bd-black);
}
.plan-hero::before,.guide-hero::before{display:none;}
.plan-hero>*,.guide-hero>*{position:relative;}
.ph-meta,.gh-meta{font-size:.66rem;letter-spacing:.16em;color:var(--bd-gray);}
.ph-name,.gh-name{font-size:2.5rem;color:var(--bd-cream);}
.ph-title{color:var(--bd-yellow);}   /* żółć NA czerni hero — jedyne miejsce, gdzie jest czytelna */
.ph-sum{color:rgba(246,241,232,.8);}
.plan-hero .b-white,.guide-hero .b-white{background:var(--bd-yellow);color:#141414;border:none;}
.plan-hero .b-white:hover,.guide-hero .b-white:hover{background:#f7cf6a;}
.plan-hero .b-ghost,.guide-hero .b-ghost{background:transparent;border:1px solid #3a3a3a;color:var(--bd-cream);}
.plan-hero .b-ghost:hover:not(:disabled),.guide-hero .b-ghost:hover:not(:disabled){background:#262626;border-color:#5a5a5a;}
/* Przyciski akcji w hero: Bebas jak reszta tablicy (.b-accent, .hd-cta, .gate).
   Baza `.btn` wciąż niesie Archivo z waga 700 — Bebas nie ma osi wagi, więc bez
   `font-weight:400` wyszedłby faux-bold. `.b-sm` (Usuń) dostaje mniejszy stopień,
   bo selektor z `.plan-hero` przebija jego font-size. */
.plan-hero .btn,.guide-hero .btn{font-family:var(--ff-board);font-weight:400;font-size:1.1rem;letter-spacing:.05em;line-height:1.1;}
.plan-hero .btn.b-sm,.guide-hero .btn.b-sm{font-size:.95rem;}

/* ── Zakładki dni: bramki na tablicy ──
   Ten sam mechanizm co .gate w belce: nieaktywna to klapka #1c1c1c z szarym
   napisem, aktywna przewraca się na żółto. Klapkowa linia ::after na 50%. */
.day-tabs-wrap{background:var(--tab-bar);border-radius:3px 3px 0 0;border-color:#2c2c2c;}
.day-tab{
  font-family:var(--ff-board);font-size:1.15rem;letter-spacing:.05em;font-weight:400;
  background:var(--bd-flap);color:var(--bd-gray);border:none;border-radius:3px 3px 0 0;position:relative;
}
.day-tab::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5);pointer-events:none;}
.day-tab:hover{background:#262626;color:var(--bd-cream);}
.day-tab.active{background:var(--bd-yellow);color:#141414;border-top-color:transparent;}
.day-tab.active .dt-num,.day-tab.active .dt-theme{color:#141414;font-weight:400;}
.dt-num{font-family:var(--ff-board-m);font-size:.6rem;letter-spacing:.16em;color:var(--tab-text);}
.dt-theme{font-family:var(--ff-board-m);font-style:normal;font-size:.8rem;letter-spacing:.04em;color:var(--bd-gray);}
.day-arrow{background:var(--bd-flap);color:var(--bd-gray);border:none;border-radius:3px;}
.day-arrow:hover:not(:disabled){background:#262626;color:var(--bd-cream);}
.day-strip{background:var(--tab-strip);border-color:var(--tab-line);font-family:var(--ff-board-m);font-size:.7rem;letter-spacing:.08em;}

/* ── Dni i oś czasu ── */
.day-card{border-radius:0;}
.day-hd{background:var(--surface2);}
.day-num{font-size:.6rem;letter-spacing:.18em;color:var(--accent);}
.day-theme-t{font-size:1.15rem;letter-spacing:.03em;}
.day-cost{font-size:.68rem;border-radius:0;}
.tl-name{font-size:1.2rem;letter-spacing:.03em;}
.tl-t{font-size:.72rem;letter-spacing:.1em;color:var(--accent);}
.tl-local{color:var(--success);}
.tl-transit{border-radius:0;}
.tl-note{font-size:.66rem;letter-spacing:.1em;}
/* Numerki punktów: pełne kółko = atrakcja, zielone = posiłek, OBRYS = przerwa.
   W nocy --primary równa się żółci (tablica ma jeden akcent), więc przerwa i
   atrakcja byłyby nie do odróżnienia kolorem — stąd rozróżnienie kształtem.
   Biała obwódka z bazy działa na jasnej karcie; na czerni daje halo, więc ciemnieje. */
.tl-no{border-color:rgba(0,0,0,.3);}
.tl-no.n-break{background:var(--surface2);color:var(--accent);border-color:var(--accent);}
html.day-theme .tl-no{border-color:rgba(255,255,255,.5);}
html.day-theme .tl-no.n-break{background:#fff;color:var(--navy);border-color:var(--navy);}
.badge{border-radius:2px;font-size:.62rem;letter-spacing:.1em;}

/* ── Przewodnik ── */
.card-hd{font-size:1.15rem;letter-spacing:.03em;}
.g-lbl{letter-spacing:.16em;font-size:.64rem;}
.g-anec{border-left-color:var(--accent);border-radius:0;}
.g-anec-lbl{color:var(--accent2);font-family:var(--ff-board-m);letter-spacing:.16em;}
.g-anec-txt{font-family:var(--ff-b);font-style:italic;font-size:1rem;color:var(--text-dim);}

/* ── Karty wariantów, kafle, formularz ── */
.vc,.card,.tip,.map-wrap,.form-box,.empty{border-radius:0;}
.vc-name{font-size:1.5rem;}
.vc-lbl{letter-spacing:.14em;color:var(--accent2);}
.form-box{border-left:4px solid var(--accent);}
.lbl{font-size:.64rem;letter-spacing:.16em;}
.b-accent{font-family:var(--ff-board);font-size:1.1rem;letter-spacing:.05em;font-weight:400;}

/* ── Kreska pod nagłówkiem globusa ──
   Nazwa `.wel-rule` została po ekranie powitania (usunięty 2026-09-23 — globus jest
   powitaniem); dziś używa jej wyłącznie `.gl-txt` na scenie globusa. */
.wel-rule{width:112px;height:1px;margin:14px auto;background:linear-gradient(90deg,transparent,var(--bd-yellow),transparent);}

/* ── Dopięcia pod strukturę belki ── */
.hd-brandtext{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.hd-title{display:block;}
.hd-brand{align-items:center;gap:14px;}

/* ── Booking.com: barwy marki zamiast szarego `.b-muted` ──
   Przycisk przestaje chodzić za motywem — logo Booking ma jeden granat (#003580)
   o każdej porze, a biel na nim daje ~12:1, więc kontrast trzyma w obu paletach.
   Reguły dzienne `.b-muted` (index.html i wyżej w tym pliku) trzeba przykryć jawnie. */
.lg-booking,
html.day-theme .lg-booking{background:#003580;color:#fff;border:1px solid #003580;}
.lg-booking:hover:not(:disabled),
html.day-theme .lg-booking:hover:not(:disabled){background:#00224f;border-color:#00224f;color:#fff;}

/* ── Globus wejściowy („Iluminator") ───────────────────────────────────────────
   Kulę rysuje styl `streets-v12` (zielone lądy, błękitna woda, podpisy państw), a kosmos
   i białą poświatę atmosfery ustawia `setFog` w `initGlobe` — patrz app.js. Ten arkusz
   odpowiada tylko za ramę sceny, napis, przycisk i pinezki; NIE dokładaj tu własnego tła
   pod mapą, bo zakryłoby to, co rysuje canvas. Wysokość 560 px (400 px na telefonie) jest
   związana z `zoom: 1.3` — razem trzymają całą kulę w kadrze przy czytelnych podpisach.
   Scena jest ciemna w OBU motywach, tak jak belka `header.board` — nie ma dla kogo
   trzymać drugiej palety, bo kosmos w dzień to nadal kosmos.
   Atrybucja Mapboxa zostaje włączona (wymóg licencji) i dostaje z-index NAD .gl-hit,
   inaczej przycisk sceny przechwyciłby kliknięcie w link. */
.gl{
  position:relative;overflow:hidden;height:560px;margin:0 0 28px;
  background:#0e2438;border:1px solid #1d3a5c;   /* granat kosmosu — widoczny, zanim mapa domaluje */
}
/* `.gl .gl-map`, nie samo `.gl-map`: arkusz Mapboxa ma `.mapboxgl-map{position:relative}` o tej
   samej specyficzności, a kontener mapy nosi obie klasy — przy złej kolejności arkuszy scena
   traciła wysokość i kula znikała. Wyższa specyficzność trzyma układ niezależnie od kolejności. */
.gl .gl-map{position:absolute;inset:0;z-index:1;}
/* Przyciemnienie POD napisem, nie tło sceny: kula jest jasna (zielone lądy, biała
   poświata), więc kremowy tekst bez tego ginie. Gradient schodzi do zera, żeby nie
   wyglądał jak doklejony pas, i trzyma barwę `space-color` z setFog. */
.gl-txt{
  position:absolute;left:0;right:0;top:0;z-index:2;text-align:center;
  padding:38px 24px 56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,36,56,.82) 0%,rgba(14,36,56,.55) 55%,rgba(14,36,56,0) 100%);
}
.gl-h{
  margin:0;font-family:var(--ff-board);font-weight:400;font-size:2.5rem;line-height:1.05;
  letter-spacing:.05em;color:var(--bd-cream);text-shadow:0 2px 20px rgba(0,0,0,.75);
}
html.day-theme .gl-h{color:var(--bd-cream);}
.gl-txt .wel-rule{margin:14px auto 0;}

/* Przycisk sceny: cały panel jest celem kliknięcia, ale widoczna jest tylko etykieta
   u dołu — stąd przezroczyste tło na <button> i obramowanie na <span> w środku. */
.gl-hit{
  position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 28px;background:none;border:none;cursor:pointer;
}
.gl-hit span{
  font-family:var(--ff-board-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bd-cream);background:rgba(8,27,51,.72);border:1px solid var(--bd-yellow);
  padding:9px 18px;transition:background var(--tr),color var(--tr);
}
.gl-hit:hover span{background:var(--bd-yellow);color:#0b1f38;}
.gl-hit:focus-visible{outline:2px solid var(--bd-yellow);outline-offset:-4px;}
.gl .mapboxgl-ctrl-bottom-right,.gl .mapboxgl-ctrl-bottom-left{z-index:4;}

/* Pinezki: pełna = własna podróż, obrys = zaproszenie przy koncie bez planów.
   Znacznik Mapboxa dostaje <i>, więc reset display/box-sizing jest tu konieczny. */
.gl-pin{
  display:block;box-sizing:border-box;width:11px;height:11px;border-radius:50%;
  background:var(--bd-yellow);border:1.5px solid #0b1f38;
  box-shadow:0 0 0 3px rgba(242,193,78,.22),0 0 12px rgba(242,193,78,.55);
}
.gl-pin-inv{background:transparent;border:1.5px solid var(--bd-yellow);box-shadow:0 0 10px rgba(242,193,78,.3);}

@media(max-width:720px){
  .gl{height:400px;}
  .gl-txt{top:22px;}
  .gl-h{font-size:1.6rem;}
  .gl-hit{padding-bottom:18px;}
}

/* ── Plakat globusa (stan 'ask' — brak zgody na mapy Mapbox) ─────────────────────
   Ta sama rama co scena z mapą (.gl: wysokość, granat kosmosu), ale bez canvasa:
   obraz Ziemi z NASA (static/globe-poster.webp, przezroczyste tło) i DWA RÓWNORZĘDNE
   przyciski. Równorzędne dosłownie: ta sama klasa, rozmiar i kontrast — odmowa zgody
   nie może być mniejsza ani bledsza niż zgoda. Tekst na dole ma własne przyciemnienie
   (kula jest jasna), jak `.gl-txt` u góry. */
.gl-ask{background:radial-gradient(ellipse at 50% 55%,#12324f 0%,#0e2438 55%,#0a1a2a 100%);}
.gl-poster{
  position:absolute;left:50%;top:50%;z-index:1;width:auto;height:74%;aspect-ratio:1;
  transform:translate(-50%,-44%);pointer-events:none;user-select:none;
}
.gl-ask-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;padding:48px 20px 16px;
  background:linear-gradient(0deg,rgba(10,26,42,.94) 0%,rgba(10,26,42,.78) 55%,rgba(10,26,42,0) 100%);
}
.gl-ask-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.gl-ask-btns .gl-ask-btn{flex:0 1 230px;}   /* ta sama szerokość obu — żaden nie „wygrywa” rozmiarem */
.gl-ask-btn{
  font-family:var(--ff-board-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bd-cream);background:rgba(8,27,51,.8);border:1px solid var(--bd-yellow);
  padding:10px 18px;min-height:44px;cursor:pointer;transition:background var(--tr),color var(--tr);
}
.gl-ask-btn:hover{background:var(--bd-yellow);color:#0b1f38;}
.gl-ask-btn:focus-visible{outline:2px solid var(--bd-yellow);outline-offset:2px;}
.gl-ask-note{max-width:620px;margin:10px auto 0;font-size:.74rem;line-height:1.45;color:#cfd8e3;}
.gl-ask-note a{color:var(--bd-yellow);}
.gl-credit{margin:6px 0 0;font-family:var(--ff-board-m);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#7f93a8;}
@media(max-width:720px){
  /* Na telefonie dwa przyciski stają jeden pod drugim i pasek rośnie — scena dostaje
     więcej wysokości niż wariant z mapą (400 px), żeby kula nie chowała się pod paskiem. */
  .gl-ask{height:520px;}
  .gl-poster{height:44%;transform:translate(-50%,-78%);}
  .gl-ask-bar{padding-top:28px;}
  .gl-ask-note{font-size:.68rem;}
}

/* ── Mapa planu / szkicu bez zgody: obrazek statyczny + włącznik ─────────────────
   Obrazek to Static Images API (zwykły <img>, nic nie zapisuje w przeglądarce), więc
   stoi bez zgody; interaktywna mapa dopiero po „Pokaż mapę interaktywną”. */
.map-ask img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover;}
.map-ask-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border-top:1px solid var(--border);}
.map-ask-note{font-size:.78rem;line-height:1.45;color:var(--text-dim);flex:1 1 280px;}
.map-ask-note a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}

/* Przełącznik map w stopce: przycisk wyglądający jak link (to akcja, nie nawigacja). */
.foot-btn{background:none;border:none;padding:0;font:inherit;color:var(--text);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.foot-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.legal-note{margin-top:10px;}
.legal-note a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}

/* ── Lot: rakieta → moduł dowodzenia ──────────────────────────────────────────
   Pozycje i tor liczy `_startFlight()` w app.js (WAAPI), tu są tylko kształty.
   `pointer-events:none` na obu elementach jest KONIECZNE — pod spodem leży
   `.gl-hit`, które musi dostać każde kliknięcie w panel. */

/* Faza 1-2: rozgrzany punkt ze smugą. Ciemny pierścień w `box-shadow` PRZED łuną,
   bo sama biel ginie na chmurach i piaskach — sprawdzone na żywo, punkt znikał. */
.gl-boost{
  position:absolute;z-index:2;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  pointer-events:none;background:#fff;
  box-shadow:0 0 0 1px rgba(60,20,0,.55),0 0 8px 3px rgba(255,190,90,1),0 0 22px 9px rgba(255,120,30,.55);
}
.gl-boost-trail{
  position:absolute;left:50%;top:60%;width:3px;height:44px;border-radius:2px;
  transform-origin:50% 0;margin-left:-1.5px;
  background:linear-gradient(180deg,rgba(255,225,170,.95),rgba(255,150,60,.45) 45%,rgba(255,150,60,0));
}

/* Faza 3: moduł dowodzenia na środku kadru. Domyślnie ukryty — `_startFlight()`
   dokłada `.is-on` dopiero, gdy rakieta dolatuje, więc przed przemianą nic nie miga.
   Grafika: `static/csm.png` (320 × 154, alfa). Źródło 1774 × 887 / 1,5 MB leży
   w gitignorowanym `design/csm-source.png` — gdyby trzeba było przeskalować inaczej,
   NIE powiększaj tego pliku, tylko wróć do źródła. */
.gl-csm{
  position:absolute;left:50%;top:50%;z-index:2;width:37px;height:17.8px;
  margin:-8.9px 0 0 -18.5px;pointer-events:none;
  opacity:0;transform:scale(.6);
}
.gl-csm img{display:block;width:100%;height:100%;}
.gl-csm.is-on{
  opacity:1;transform:scale(1);
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,1.3,.4,1);
  animation:gl-csm-bob 9s ease-in-out .5s infinite;
}
/* Płomień przy WYLOCIE DYSZY. Pozycja nie jest zgadywana: środek ciężkości alfy
   w lewych 6% szerokości pliku wypada na 49,2% jego wysokości — stąd `top`.
   Trójkąt z wierzchołkiem w lewo, podstawą przyklejoną do dyszy. Delikatny:
   ma sugerować ciąg, nie drugi start. */
.gl-flame{
  position:absolute;left:0;top:49.2%;width:10.5px;height:4.9px;margin:-2.45px 0 0 -9.1px;
  background:linear-gradient(270deg,rgba(255,232,185,.95),rgba(255,150,50,.7) 45%,rgba(255,110,30,0));
  clip-path:polygon(100% 0,100% 100%,0 50%);
  transform-origin:100% 50%;
  animation:gl-flame .5s ease-in-out infinite alternate;
}
@keyframes gl-flame{
  from{transform:scaleX(.5) scaleY(.75);opacity:.6;}
  to{transform:scaleX(1.1) scaleY(1.05);opacity:1;}
}
@keyframes gl-csm-bob{
  0%,100%{transform:scale(1) translateY(-3px) rotate(-1.5deg);}
  50%{transform:scale(1) translateY(3px) rotate(1.5deg);}
}

/* Telefon: moduł mniejszy o 30% dwa razy (53 → 37 → 25,9 px). Kula ma tu 400 px zamiast 560,
   więc statek w rozmiarze desktopowym zajmował za dużo tarczy.
   Ten blok MUSI stać po regułach `.gl-csm` / `.gl-flame` wyżej — media query nie
   podbija specyficzności, więc o wyniku decyduje kolejność w pliku. Dopisany do
   istniejącego `@media(max-width:720px)` przy `.gl` (linia ~497) nie zadziałałby,
   bo tamten blok leży PRZED definicjami modułu.
   Płomień skalowany w tej samej proporcji — pozycjonowany w px, więc bez tego
   urósłby względem dyszy. `top:49.2%` zostaje, bo procent skaluje się sam. */
@media(max-width:720px){
  .gl-csm{width:25.9px;height:12.5px;margin:-6.25px 0 0 -12.95px;}
  .gl-flame{width:7.35px;height:3.4px;margin:-1.7px 0 0 -6.4px;}
}

/* ── Sekcja opisowa i FAQ pod aplikacją ───────────────────────────────────────
   Stoi POZA `<main class="wrap">`, więc musi sama trzymać szerokość i wcięcia —
   nie dziedziczy ich po `.wrap`. Dlaczego poza `<main>`: patrz komentarz przy
   `.seo` w index.html (bramka `onGround()` ukryłaby ją przed crawlerem).
   Nagłówki reużywają `.sec-label` — czarnej tablicy z reszty skinu — żeby sekcja
   wyglądała jak część aplikacji, a nie doklejona stopka marketingowa. */
.seo{max-width:1000px;margin:0 auto;padding:8px 24px 40px;}
/* `.sec-label h2` ma w bazie `white-space:nowrap` (index.html) — nagłówki aplikacji są
   krótkie („Twoje podróże", „Nowy TRIP"), więc to nigdy nie przeszkadzało. Zdania
   z tej sekcji są długie i przy 375 px rozpychały dokument do 509 px, dając poziomy
   scroll CAŁEJ strony. Zmierzone, nie przewidziane. */
.seo .sec-label h2{white-space:normal;line-height:1.1;}
.seo p{color:var(--text-dim);line-height:1.65;margin:0 0 14px;}
.seo h3{
  font-family:var(--ff-board);font-weight:400;font-size:1.25rem;letter-spacing:.04em;
  color:var(--text);margin:22px 0 8px;
}
.seo-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;}
.seo-cols h3{margin-top:14px;}
.seo-list{margin:0 0 6px;padding-left:20px;color:var(--text-dim);line-height:1.8;}
.seo-faq{margin:6px 0 0;}
.seo-faq dt{
  font-family:var(--ff-board-m);font-size:.82rem;letter-spacing:.04em;
  color:var(--text);margin:16px 0 5px;
}
.seo-faq dd{margin:0;color:var(--text-dim);line-height:1.65;}
.seo-more{margin-top:26px;}
.seo-more a{color:var(--accent);font-family:var(--ff-board-m);font-size:.8rem;letter-spacing:.08em;}
/* Komunikat dla wyłączonego JS — jedyna rzecz, którą taki użytkownik zobaczy nad appką. */
.nojs{
  max-width:1000px;margin:0 auto;padding:14px 24px;
  color:var(--text-dim);line-height:1.6;border-bottom:1px solid var(--border);
}
@media(max-width:720px){
  .seo-cols{grid-template-columns:1fr;gap:0;}
  .seo{padding-bottom:28px;}
  .seo .sec-label h2{font-size:1.1rem;}
}

/* ── Linki partnerskie: przycisk + znacznik „Reklama” ─────────────────────────────
   Znacznik stoi TUŻ przy linku (rekomendacje UOKiK: oznaczenie przy samym przekazie),
   jest linkiem do zasad w regulaminie i pojawia się wyłącznie przy linku, który niesie
   identyfikator partnera (`isAd(...)` z /api/config.aff). Kolory z tokenów: ta sama
   para tekst/tło co drobne etykiety, więc kontrast trzyma w obu motywach. */
.aff-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;}
/* Etykiety linków są długie („Wybierz kampera — odbiór: Oslo, 01.10–03.10 (PaulCamper)”),
   a `.btn` ma nowrap — na 390 px strona przewijała się w bok. Tu tekst się łamie. */
.aff-row .btn{white-space:normal;text-align:left;max-width:100%;min-width:0;height:auto;line-height:1.35;}
.ad-tag{
  display:inline-block;font-family:var(--ff-board-m);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;padding:4px 6px;border:1px solid var(--border);
  border-radius:3px;color:var(--text-dim);background:var(--surface2);text-decoration:none;
}
.ad-tag:hover{color:var(--text);border-color:var(--text-dim);}
.ad-tag:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.day-aff{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 14px 0;}
.insp-ad{margin:-6px 0 12px;}

/* PANEL: „Konto i plany · Usuń” krwistą czerwienią — operacja nieodwracalna, ma się odróżniać od
   żółtych pozycji. Panel jest czarny w obu motywach, więc kolory zakodowane (jak cała belka):
   #e5202e na #1c1c1c = 3,75 (hover #242424: 3,38) — napis 24–26 px to „duży tekst”, próg AA 3:1;
   drobne „Usuń” (12 px) jaśniejsze #ff5252 = 5,34 / 4,86 (próg 4,5). */
.hd-panel .prow-danger .pl,.hd-panel .prow-danger .pi{color:#e5202e;}
.hd-panel .prow-danger .st.out{color:#ff5252;}

/* ── „Zaproponuj trasę” w kroku ① kreatora tripu: osobny panel pomysłu na trasę ──
   Tło z odcieniem akcentu (`--primary-dim`: granat w dzień, żółć w nocy) i kreska akcentu
   z lewej odróżniają propozycję od pól, które wypełnia się samemu. Przyciski na jasnym
   `--surface`, bo szare `.b-muted` zlewało się z tłem panelu; dzienna reguła `.b-muted`
   ma wyższą specyficzność, więc powtórzona jawnie pod `html.day-theme`. */
.rv-box,.place-box{background:var(--primary-dim);border-left:3px solid var(--accent);padding:12px 14px;}
.rv-box .b-muted,.rv-box .cty-add,html.day-theme .rv-box .b-muted,
.place-box .b-muted,html.day-theme .place-box .b-muted{background:var(--surface);color:var(--text);border:1px solid var(--border);}
.rv-box .b-muted:hover:not(:disabled),html.day-theme .rv-box .b-muted:hover:not(:disabled),
.place-box .b-muted:hover:not(:disabled),html.day-theme .place-box .b-muted:hover:not(:disabled){background:var(--surface2);}
/* City break: ramka „skąd i dokąd” (ten sam panel co „Zaproponuj trasę”); pola na jasnym tle. */
.place-box .fi,html.day-theme .place-box .fi{background:var(--surface);}
.rv-box .lbl-opt{color:var(--text-dim);}
.rv-box .rv,.rv-box .cty-chip{background:var(--surface);}

/* ── Przewodnik ze źródłami (widok `guide`) ──
   Układ redakcyjny: spis jak tablica odlotów (numer bramki + nazwa + plakietki), karty w jednej
   kolumnie do czytania (≤ 68 znaków), przypisy w akcencie, źródła zwijane pod kartą. Kolory
   wyłącznie z tokenów — działa w obu motywach. */
.g-wrap .g-text,.g-wrap .g-fact,.g-wrap .g-anec-txt{font-size:1rem;line-height:1.65;max-width:68ch;}
.g-wrap .g-text{margin:0 0 10px;}
.g-prog{margin-top:12px;max-width:420px;}
.g-prog .spin-sub{color:var(--bd-cream);opacity:.85;}
.g-banner{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:14px 16px;
  border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--surface);}
.g-banner > div{flex:1 1 260px;display:flex;flex-direction:column;gap:2px;font-size:.92rem;line-height:1.5;}
.g-banner .ic{margin-top:2px;color:var(--accent);}
.g-toc{display:flex;flex-direction:column;margin:0 0 22px;border:1px solid var(--border);background:var(--surface);}
.g-toc-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 14px;
  cursor:pointer;border-bottom:1px solid var(--border);}
.g-toc-row:last-child{border-bottom:none;}
.g-toc-row:hover{background:var(--surface2);}
.g-toc-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.g-gate{font-family:var(--ff-board-m);font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--text-dim);flex:none;min-width:2.2ch;}
.g-toc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.g-toc-tags{display:flex;gap:4px;flex:none;}
.g-tag-u{background:var(--accent);color:var(--on-accent);}
.g-card{margin:0 0 18px;padding:18px 20px 16px;border:1px solid var(--border);background:var(--surface);scroll-margin-top:170px;}
.g-card-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;}
.g-card-name{margin:0;font-family:var(--ff-board);font-weight:400;font-size:1.7rem;letter-spacing:.03em;line-height:1.1;}
.g-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;font-size:.85rem;color:var(--text-dim);}
.g-meta > span{display:inline-flex;align-items:center;gap:6px;}
.g-sec{margin:0 0 14px;}
.g-wrap .g-lbl{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:.7rem;}
.g-fn{margin-left:2px;font-size:.7em;vertical-align:super;line-height:0;color:var(--accent);text-decoration:none;font-weight:700;}
.g-fn + .g-fn::before{content:",";color:var(--text-dim);}
.g-fn:hover{text-decoration:underline;}
.g-wrap .g-anec{margin:0 0 14px;}
.g-anec-lbl{display:flex;align-items:center;gap:7px;}
.g-pending{color:var(--text-dim);font-style:italic;margin:4px 0;}
.g-nosrc{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;}
.g-short-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.85rem;color:var(--text-dim);margin:0;}
.g-src{margin-top:10px;border-top:1px solid var(--border);padding-top:8px;font-size:.85rem;}
.g-src summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--text-dim);min-height:32px;}
.g-src summary:focus-visible{outline:2px solid var(--accent);}
.g-src ol{margin:8px 0 4px;padding-left:22px;}
.g-src li{margin:4px 0;}
.g-src a,.g-official{color:var(--text);display:inline-flex;align-items:center;gap:5px;}
.g-src-meta{display:block;color:var(--text-dim);font-size:.78rem;}
.g-official{margin-top:6px;}
.g-city{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.g-city-sec{padding:16px 20px;border:1px solid var(--border);background:var(--surface);}
@media (max-width:600px){
  .g-card{padding:14px 14px 12px;}
  .g-card-name{font-size:1.45rem;}
  .g-toc-tags .badge:not(.g-tag-u){display:none;}
}
@media (prefers-reduced-motion:reduce){ .g-toc-row{transition:none;} }

/* Przewodnik: opis z sieci (niezweryfikowany) i sekcja „Praktycznie” z Wikivoyage */
.g-note{margin-top:10px;padding:10px 12px;border-left:3px solid var(--border);background:var(--surface2);}
.g-note .badge{margin-left:6px;}
.g-note-src{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:.82rem;}
.g-note-src a,.g-prac-src a{color:var(--text);display:inline-flex;align-items:center;gap:4px;}
.g-prac{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);}
.g-prac dl{margin:0;display:grid;gap:4px;}
.g-prac dl > div{display:grid;grid-template-columns:5.5rem 1fr;gap:8px;font-size:.92rem;}
.g-prac dt{color:var(--text-dim);}
.g-prac dd{margin:0;}
.g-prac-src{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:.78rem;color:var(--text-dim);}