/* Loud Nearby - pasek u góry podstron (/koncerty/, /sv/ /da/ /no/, regulamin,
   polityka prywatności, 404), ten sam co na mapie (mapa/mapa.css): kanały YT/FB,
   logo na środku, PL/EN/DE z suwakiem i iskrami, Mrock/Świt z zasłoną, pod nim
   „Lista koncertów”. Reguły paska są skopiowane ze strona.css: zmiana paska na
   stronie głównej = ta sama zmiana tutaj i w mapa.css. Działanie: pasek.js.
   Tu są też kolory obu motywów (jak w strona.css), więc strona dokłada tylko
   swoje reguły. */

:root {
  --bg: #F2F0EA;
  --surface: #FFFFFF;
  --surface-2: #E9E6DE;
  --text: #18161A;
  --text-dim: #5C5650;
  --accent: #C81E3A;
  --accent-ink: #FFFFFF;
  --accent2: #2B5D6B;
  --border: #D8D5CD;
  --amber: #A85A17;
  --fresh: #167C48;
  --metal: #8A2BE2;
  --punk: #C46A1C;
  --goth: #6B6BD6;
  --display: "Grenze Gotisch", Georgia, serif;
  --body: "Libre Franklin", system-ui, sans-serif;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --hv: .22s cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131214; --surface: #1C1B1E; --surface-2: #242327;
    --text: #EDE9E3; --text-dim: #A29CA0;
    --accent: #E4415C; --accent-ink: #1A0A0D; --accent2: #5FADC0;
    --border: #322F33; --amber: #E4A05F; --fresh: #5FD18C;
    --metal: #C99CF2; --punk: #E4A05F; --goth: #A9A9F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131214; --surface: #1C1B1E; --surface-2: #242327;
  --text: #EDE9E3; --text-dim: #A29CA0;
  --accent: #E4415C; --accent-ink: #1A0A0D; --accent2: #5FADC0;
  --border: #322F33; --amber: #E4A05F; --fresh: #5FD18C;
  --metal: #C99CF2; --punk: #E4A05F; --goth: #A9A9F0;
  color-scheme: dark;
}

/* Miejsce na pasek przewijania zawsze zarezerwowane: krótka strona (404) i długa
   lista mają wtedy pasek i ikony w tym samym miejscu, co strona główna. */
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
:focus:not(:focus-visible) { outline: none; }
a, button { -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Pasek ---------- */
.head {
  line-height: 1.5; font-family: var(--body);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.top {
  position: relative;
  display: flex; align-items: center; gap: .9rem;
  max-width: 1080px; margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top, 0px)) var(--gr) 8px var(--gl);
}
/* Bez menu (zostaje na stronie głównej); jego linki 44 px wyznaczają tam wysokość
   paska, więc kanały trzymają tę wysokość i pasek ma te same 60 px. */
.head .social { min-height: 44px; align-items: center; }
.theme {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .65rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: var(--body);
}
.theme { position: relative; isolation: isolate; overflow: hidden; min-height: 40px; color: var(--text); border: 1px solid var(--text-dim); border-radius: 999px; padding: 0 1rem; gap: .45rem; }
/* Komputer: przycisk w kolorze bieżącego motywu (Mrock czarny, Świt biały). Najechanie wsuwa
   zasłonę w kolorze drugiego motywu na 1/4 przycisku, kliknięcie zasuwa ją do końca. */
.theme { --th-bg: #0A090B; --th-fg: #EDE9E3; --cu-bg: #FFFFFF; --cu-fg: #131214; background: var(--th-bg); color: var(--th-fg); }
:root[data-theme="light"] .theme { --th-bg: #FFFFFF; --th-fg: #18161A; --cu-bg: #131214; --cu-fg: #FFFFFF; }
.curtain {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0 1rem;
  background: var(--cu-bg); color: var(--cu-fg); pointer-events: none;
  clip-path: inset(0 0 0 100%); transition: clip-path .32s cubic-bezier(.3, .7, .2, 1);
}
:root[data-theme="light"] .curtain { clip-path: inset(0 100% 0 0); }
@media (hover: hover) and (pointer: fine) {
  .theme:not(.cool):hover .curtain { clip-path: inset(0 0 0 75%); }
  :root[data-theme="light"] .theme:not(.cool):hover .curtain { clip-path: inset(0 75% 0 0); }
}
.theme.wipe .curtain, :root[data-theme="light"] .theme.wipe .curtain { clip-path: inset(0 0 0 0); transition-duration: .42s; }
.theme.snap .curtain { transition: none; }
:root.no-tr *:not(#theme, #theme *) { transition: none !important; }
.theme svg { display: none; width: 20px; height: 20px; overflow: visible; }
/* Telefon: księżyc zamienia się w słońce */
.ic-tm .tm-core { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.ic-tm .tm-bite { transform-box: fill-box; transform-origin: center; }
.ic-tm .tm-rays { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; transform-box: view-box; transform-origin: 12px 12px; }
.ic-tm .tm-core, .ic-tm .tm-bite, .ic-tm .tm-rays { transition: transform .5s cubic-bezier(.4, 1.5, .5, 1), opacity .3s ease; }
.ic-tm .tm-rays { transform: rotate(-70deg) scale(.4); opacity: 0; }
:root[data-theme="light"] .ic-tm .tm-core { transform: scale(.55); }
:root[data-theme="light"] .ic-tm .tm-bite { transform: translate(9px, -9px) scale(.6); }
:root[data-theme="light"] .ic-tm .tm-rays { transform: none; opacity: 1; }
.theme:not(.armed) .ic-tm * { transition: none; }
.theme-light { display: none; }
:root[data-theme="light"] .theme-dark { display: none; }
:root[data-theme="light"] .theme-light { display: inline; }

/* Kanały Loud Nearby po lewej */
.social { display: flex; gap: 6px; margin-right: auto; }
.soc {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--text) 30%, transparent); color: var(--text-dim);
  box-shadow: 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent), 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent);
  transition: color var(--hv), border-color var(--hv), background-color var(--hv), box-shadow var(--hv);
}
.soc svg { width: 18px; height: 18px; }
.soc:focus-visible { color: var(--accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .soc:hover {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
    box-shadow: 0 0 9px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 22px color-mix(in oklab, var(--accent) 30%, transparent);
  }
}
/* Język: jedna pigułka z suwakiem pod wybranym językiem */
.lang { position: relative; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid color-mix(in oklab, var(--text) 30%, transparent); border-radius: 999px; }
.lang-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 34px; border-radius: 999px;
  background: var(--text); pointer-events: none; will-change: transform;
  transition: transform .34s cubic-bezier(.45, 1.45, .5, 1), width .34s ease;
}
.lang button, .lang a, .lang span[aria-current] {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 .55rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--text-dim); font: 700 .72rem var(--body); letter-spacing: .08em; text-decoration: none; white-space: nowrap;
}
.lang button:hover, .lang a:hover { color: var(--text); }
.lang button { position: relative; z-index: 1; transition: color .2s ease .08s; }
.lang button[aria-pressed="true"] { color: var(--bg); }
/* Strony skandynawskie: linki do innych wersji zamiast przełącznika */
.lang span[aria-current] { background: var(--text); color: var(--bg); cursor: default; }
/* Stałe szerokości napisów: wszystkie wersje w jednym miejscu, widać jedną */
.tx { display: inline-grid; justify-items: center; }
.tx > span { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
.tx > span.on { visibility: visible; }

/* Logo jak na stronie głównej: „L[pinezka]ud Nearby” z linią żaru pod grotem.
   Na komputerze dokładnie na środku paska; na telefonie w wolnym miejscu między
   kanałami a językiem. Kliknięcie zawsze prowadzi na stronę główną. */
.brand {
  display: inline-flex; flex-direction: column; align-items: stretch; flex: none;
  color: var(--text); text-decoration: none; line-height: .86;
  font: 800 2.15rem/.86 var(--display);
}
.brand .word { display: inline-flex; align-items: baseline; white-space: nowrap; }
.brand .pin { display: inline-block; height: .689em; aspect-ratio: 345 / 438; margin: 0 .01em 0 .02em; position: relative; top: .169em; }
.brand .pin svg { display: block; width: 100%; height: 100%; }
.brand .h-near { color: var(--accent); }
@property --heat { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
.brand .flame {
  display: block; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0, #FFFFFF var(--heat), transparent calc(var(--heat) + 45%));
  animation: heat 4s ease-in-out infinite alternate;
}
@keyframes heat { to { --heat: 55%; } }
.brand:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
@media (min-width: 761px) {
  .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 760px) {
  .brand { margin: 0 auto; font-size: clamp(1.15rem, 5.4vw, 1.75rem); }
  .social { margin-right: 0; }
}

/* Telefon: pasek w jednej linii; motyw jako ikona słońca/księżyca */
@media (max-width: 560px) {
  .top { gap: 6px; }
  .social { gap: 5px; }
  .soc { width: 36px; height: 36px; }
  .soc svg { width: 17px; height: 17px; }
  .lang button, .lang a, .lang span[aria-current] { min-width: 30px; height: 32px; padding: 0 .3rem; }
  .theme { width: 40px; height: 40px; padding: 0; justify-content: center; flex: none; }
  .theme .theme-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme .ic-tm { display: block; }
  .theme .curtain { display: none; }
  .theme { background: none; color: var(--text); }
}
@media (max-width: 380px) {
  .top { gap: 4px; }
  .social { gap: 4px; }
  .lang { padding: 2px; }
  .lang button, .lang a, .lang span[aria-current] { min-width: 28px; padding: 0 .2rem; }
}
@media (prefers-reduced-motion: reduce) { .lang-thumb, .curtain { transition: none !important; } .brand .flame { animation: none; } }

/* Pod paskiem: powrót do listy koncertów */
.sub {
  display: flex; align-items: center; gap: .75rem;
  max-width: 1080px; margin: 0 auto; padding: 0 var(--gr) 10px var(--gl);
}
.back {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 .9rem 0 .55rem;
  border: 1px solid color-mix(in oklab, var(--text) 30%, transparent); border-radius: 999px;
  font: 700 .82rem var(--body); color: var(--text); text-decoration: none; white-space: nowrap;
  transition: color var(--hv), border-color var(--hv), background-color var(--hv);
}
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.back:hover, .back:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
@media (max-width: 560px) { .back { padding: 0 .75rem 0 .45rem; font-size: .78rem; } }

/* Iskry przy zmianie języka (pasek.js, ta sama funkcja co strona.js) */
.sparks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 35; }