/* ═══════════════════════════════════════════════════════════════════
   Trasa komunikacją i taksówką (front/js/dojazd-karta.js) — panel miejsca
   (places.html, karta „Jak dojechać”) i strona /transit. Tokeny motywu.
   ═══════════════════════════════════════════════════════════════════ */

.pc-dj-head { display: grid; gap: 0.45rem; }
.pc-dj-head h3 { margin: 0; }
.pc-dj-skady { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pc-dj-skad {
    min-height: 30px; padding: 0 0.7rem; border: 1px solid var(--hub-hairline); border-radius: 999px;
    background: var(--hub-elev); color: var(--hub-ink-muted); font: inherit; font-size: 0.76rem; font-weight: 650; cursor: pointer;
}
.pc-dj-skad.is-on { border-color: transparent; background: rgb(var(--hub-accent-rgb) / 0.16); color: var(--hub-accent-on-tint); }
.pc-dj-skad:focus-visible, .pc-dj-mapa:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }
.pc-dj-opcja { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.6rem; margin-top: 0.65rem; padding: 0.65rem 0.7rem; border: 1px solid var(--hub-hairline); border-radius: 12px; }
.pc-dj-opcja > div { display: grid; gap: 0.15rem; min-width: 0; }
.pc-dj-opcja strong { font-size: 0.88rem; color: var(--hub-ink); }
.pc-dj-opcja > div > span { font-size: 0.82rem; color: var(--hub-ink); font-variant-numeric: tabular-nums; }
.pc-dj-opcja small { font-size: 0.72rem; line-height: 1.4; color: var(--hub-ink-muted); }
.pc-dj-opcja.is-brak > div > span { color: var(--hub-ink-muted); }
.pc-dj-ik { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgb(var(--hub-accent-rgb) / 0.14); color: var(--hub-accent-on-tint); }
.pc-dj-ik svg { width: 18px; height: 18px; }
.pc-dj-kroki { display: grid; gap: 0.35rem; margin: 0.45rem 0 0.2rem; padding: 0; list-style: none; }
.pc-dj-krok { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0.45rem; align-items: start; font-size: 0.8rem; line-height: 1.35; color: var(--hub-ink); }
.pc-dj-krok .pc-dj-ik { width: 24px; height: 24px; border-radius: 7px; background: rgb(var(--hub-ink-rgb) / 0.06); color: var(--hub-ink-muted); }
.pc-dj-krok .pc-dj-ik svg { width: 15px; height: 15px; }
.pc-dj-krok > span:last-child { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
.pc-dj-linia {
    justify-self: start; display: inline-block; min-width: 1.8rem; margin-right: 0.25rem; padding: 0.05rem 0.4rem; border-radius: 6px;
    background: var(--pc-dj-k, var(--hub-accent)); color: var(--pc-dj-t, var(--hub-on-accent)); font-size: 0.74rem; font-weight: 800; text-align: center;
}
.pc-dj-mapa {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; min-height: 32px; padding: 0 0.75rem;
    border: 1px solid var(--hub-hairline); border-radius: 999px; background: var(--hub-elev); color: var(--hub-ink);
    font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.pc-dj-mapa svg { width: 15px; height: 15px; }
.pc-dj-mapa:hover { border-color: rgb(var(--hub-accent-rgb) / 0.55); }
.pc-dj-wiecej { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--hub-accent-strong); text-decoration: none; }
.pc-dj-wiecej:hover { text-decoration: underline; }

/* Przystanki w pobliżu miejsca (/api/komunikacja/obok) — klik otwiera przystanek na /transit. */
.pc-dj-obok { margin-top: 0.75rem; }
.pc-dj-obok h4 { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hub-ink-muted); }
.pc-dj-obok ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.pc-dj-obok a {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.4rem 0.45rem;
    border-radius: 12px; color: var(--hub-ink); text-decoration: none;
}
.pc-dj-obok a:hover { background: rgb(var(--hub-ink-rgb) / 0.05); }
.pc-dj-obok-tresc { display: grid; gap: 0.2rem; min-width: 0; }
.pc-dj-obok-tresc strong { font-size: 0.84rem; line-height: 1.3; overflow-wrap: anywhere; }
.pc-dj-obok-linie { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.pc-dj-obok-linie .pc-dj-linia { margin: 0; }
.pc-dj-linia.is-wiecej { background: rgb(var(--hub-ink-rgb) / 0.1); color: var(--hub-ink); }
.pc-dj-obok small { font-size: 0.76rem; color: var(--hub-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Pasek trybów Hubionis Maps (front/js/maps-tryby.js) — /maps i /transit ── */
.hub-tryby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; margin: 0 0 0.6rem;
    border-radius: 14px; background: rgb(var(--hub-ink-rgb) / 0.06); }
.hub-tryb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 50px; padding: 0.35rem 0.2rem;
    border-radius: 10px; color: var(--hub-ink-muted); font-size: 0.74rem; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; }
.hub-tryb svg { width: 20px; height: 20px; flex: none; }
.hub-tryb span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-tryb:hover { color: var(--hub-ink); background: rgb(var(--hub-accent-rgb) / 0.08); }
.hub-tryb.is-on { background: var(--hub-elev); color: var(--hub-accent-strong); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.hub-tryb:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 1px; }