/* Pływające menu: pigułka przyklejona u góry, poniżej 980 px linki w rozwijanej liście */
.pill-nav{position:fixed;z-index:40;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top,0px));width:min(1000px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px 7px 7px 16px;border-radius:999px;background:color-mix(in srgb,var(--night-2) 72%,transparent);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);color:var(--on-night);
  box-shadow:0 8px 30px -10px color-mix(in srgb,var(--night) 70%,transparent)}
.pill-nav :focus-visible{outline-color:var(--blue-bright)}
/* logo GreJa Table (symbol #logo-greja-table): 28 px, 24 px poniżej 600 px */
.logo{display:inline-flex;align-items:center;color:var(--on-night);text-decoration:none;padding-block:3px}
.logo-svg{display:block;height:28px;width:auto;aspect-ratio:1257/264}
.pill-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.pill-nav ul a{display:block;padding:8px 13px;border-radius:999px;text-decoration:none;color:var(--on-night-2);font-size:14.5px}
.pill-nav ul a:hover{color:var(--on-night);background:color-mix(in srgb,var(--on-night) 8%,transparent)}
.pill-nav .right{display:flex;align-items:center;gap:6px}
.menu-btn{display:none;background:none;border:0;padding:8px;border-radius:999px;cursor:pointer;color:var(--on-night)}

/* nad jasną sceną pigułka jasna i szklana (klasa on-light z nav.js, T-032), nad granatową jak wyżej */
.pill-nav,.pill-nav .logo,.pill-nav ul a,.menu-btn{transition:background-color .4s ease,color .4s ease,box-shadow .4s ease}
.pill-nav.on-light{background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--ink);box-shadow:0 8px 30px -14px color-mix(in srgb,var(--night) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent)}
.pill-nav.on-light .logo,.pill-nav.on-light .menu-btn{color:var(--ink)}
.pill-nav.on-light :focus-visible{outline-color:var(--blue)}
@media (min-width:981px){
  .pill-nav.on-light ul a{color:var(--ink-2)}
  .pill-nav.on-light ul a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .pill-nav,.pill-nav .logo,.pill-nav ul a,.menu-btn{transition:none}
}

@media (max-width:980px){
  /* pełne tło: rozmycie nie działa wewnątrz paska, który sam ma backdrop-filter */
  .pill-nav ul{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:0;background:var(--night-2);border:1px solid var(--night-line);border-radius:22px;padding:10px;box-shadow:0 20px 40px -16px color-mix(in srgb,var(--night) 80%,transparent)}
  .pill-nav ul.open{display:flex}
  .pill-nav ul a{padding:13px 14px;font-size:17px;color:var(--on-night)}
  .menu-btn{display:block}
}
@media (max-width:600px){
  .pill-nav{padding-left:12px;gap:8px}
  .logo-svg{height:24px}
  .pill-nav .btn-sm{padding:8px 13px;font-size:14px}
}