/* ================================================================ plansza podrozy (A4, druk i obraz)
   Kartka zawsze jasna i niezalezna od motywu aplikacji: papier, atrament, cienkie linie, cyfry tabelaryczne. */
#sheetMapBox { position: fixed; left: -12000px; top: 0; width: 860px; height: 600px; pointer-events: none; }

#sheetOverlay { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: #e7e9ee; color: #0f172a; }
#sheetOverlay.on { display: flex; }
body.sheet-open { overflow: hidden; }
.sheet-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 16px; background: #fff; border-bottom: 1px solid #d8dce4;
  box-shadow: 0 1px 8px rgba(15, 23, 42, .06); font: 500 13px Inter, system-ui, sans-serif; }
.sheet-bar > b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; margin-right: 4px; }
.sheet-opts { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.sheet-opts label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f1f3f7; cursor: pointer; user-select: none; color: #334155; }
.sheet-opts input { accent-color: #2563eb; margin: 0; }
.sheet-state { color: #64748b; font-size: 12px; min-width: 0; }
.btn-sheet { height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid #d0d5de; background: #fff; color: #0f172a; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }
.btn-sheet:hover { background: #f4f6f9; }
.btn-sheet.primary { background: #0f172a; border-color: #0f172a; color: #fff; }
.btn-sheet.primary:hover { background: #1e293b; }
.btn-sheet.ghost { border-color: transparent; background: none; width: 34px; padding: 0; font-size: 16px; }
.sheet-stage { flex: 1; overflow: auto; padding: 24px 16px 60px; display: flex; flex-direction: column; align-items: center; gap: 22px; --z: 1; }
.sheet-stage .sheet-page { zoom: var(--z); }
.sheet-stage.capture .sheet-page { zoom: 1; }
.sheet-wait { margin: 80px auto; color: #475569; font: 600 14px Inter, system-ui, sans-serif; }

/* ---- kartka */
.sheet-page { --ink: #0f172a; --ink2: #334155; --mute: #64748b; --rule: #e2e6ec; --soft: #f5f7fa; --accent: #2563eb;
  width: 210mm; height: 297mm; flex: none; position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 10mm 12mm 7mm; box-sizing: border-box; background: #fff; color: var(--ink); box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 30px rgba(15, 23, 42, .10);
  font: 400 8.8pt/1.38 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet-page * { box-sizing: border-box; }
.sp-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4mm; }
/* kroki planu jeden pod drugim bez odstepu - os laczy wszystkie punkty */
.sp-body > .sh-flow + .sh-flow { margin-top: -4mm; }
.sp-foot { display: flex; gap: 10px; align-items: baseline; padding-top: 3mm; margin-top: 3mm; border-top: 1px solid var(--rule); font-size: 7pt; color: var(--mute); }
.sp-foot span:first-child { font-weight: 600; color: var(--ink2); }
.sp-attr { flex: 1; text-align: center; }
.sp-n { font-weight: 700; color: var(--ink2); }
.sheet-page a { color: var(--accent); text-decoration: none; font-weight: 600; }
.sheet-page h2, .sh-h2 { margin: 0 0 2.4mm; font: 800 7.4pt/1.2 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.sh-h2 { padding-top: 1mm; }
.sh-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* naglowek */
.sh-top { display: flex; flex-direction: column; gap: 4mm; }
.sh-head { display: flex; flex-direction: column; gap: 1.2mm; padding-bottom: 3mm; border-bottom: 1.5px solid var(--ink); }
.sh-brand { display: flex; align-items: center; gap: 2mm; margin-bottom: 1.5mm; font-size: 9pt; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.sh-brand img { width: 6.5mm; height: 6.5mm; border-radius: 1.6mm; display: block; }
.sh-brand em { font-style: normal; font-size: 6.8pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-left: auto; padding: .8mm 2.4mm; border-radius: 99px; background: #eff4ff; }
.sh-head h1 { margin: 0; font: 800 17pt/1.15 Inter, system-ui, sans-serif; letter-spacing: -.025em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
.sh-arrow { color: var(--accent); font-weight: 600; }
.sh-date { margin: 0; color: var(--ink2); font-size: 9pt; font-weight: 500; }
.sh-date::first-letter { text-transform: uppercase; }

.sh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 2mm; }
.sh-fact { background: var(--soft); border-radius: 2.4mm; padding: 2mm 2.6mm 2.2mm; display: flex; flex-direction: column; gap: .5mm; min-width: 0; }
.sh-fact.main { background: var(--ink); color: #fff; }
.sh-fact.main span, .sh-fact.main small { color: #cbd5e1; }
.sh-fact span { display: flex; align-items: center; gap: 1.2mm; font-size: 6.2pt; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.sh-fact span .sh-ico { width: 1.25em; height: 1.25em; stroke-width: 2.2; }
.sh-fact b { font-size: 12pt; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.sh-fact small { font-size: 6.8pt; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-chips { display: inline-flex; align-items: center; gap: .8mm; }
.sh-chips i { font-style: normal; color: var(--mute); }
.sh-chips .sh-chip { font-size: 6.6pt; padding: .2mm 1.2mm .2mm 1mm; }

/* mapa */
.sh-map { margin: 0; border-radius: 3mm; overflow: hidden; border: 1px solid var(--rule); background: var(--soft); }
.sh-map img { display: block; width: 100%; height: auto; }
.sh-legend { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin-top: 2mm; font-size: 7.4pt; color: var(--ink2); }
.sh-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sh-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
.lg-ride { background: linear-gradient(90deg, #2563eb 0 33%, #e11d48 33% 66%, #f59e0b 66%); }
.lg-walk { background: radial-gradient(circle, #1e293b 1.3px, transparent 1.6px) 0 50% / 5px 4px repeat-x; }
.lg-bike { background: #16a34a; }
.lg-drive { background: repeating-linear-gradient(90deg, #64748b 0 5px, transparent 5px 8px); }
.sh-legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(15, 23, 42, .2); }
.lg-dot.s { background: #16a34a; } .lg-dot.e { background: #dc2626; }

/* os podrozy */
.sh-bar { position: relative; height: 6mm; border-radius: 2mm; background: var(--soft); overflow: hidden; }
.sh-bar i { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.sh-bar i.k-ride { background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.sh-bar i.k-walk { background: radial-gradient(circle, #475569 1.2px, transparent 1.5px) 0 50% / 5px 5px repeat-x; }
.sh-bar i.k-drive { background: repeating-linear-gradient(90deg, #94a3b8 0 5px, transparent 5px 8px) 0 50% / auto 3px no-repeat; }
.sh-bar i.k-wait { background: repeating-linear-gradient(135deg, transparent 0 3px, #dfe3ea 3px 5px); }
.sh-bar i span { font-size: 7.4pt; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; padding: 0 4px; }
.sh-bar i span.ink { color: #111827; }
.sh-axwrap { position: relative; }
.sh-tick { position: absolute; font-size: 7pt; font-weight: 700; color: var(--ink2); white-space: nowrap; line-height: 3.4mm; }
.sh-tag { position: absolute; line-height: 1; white-space: nowrap; }
.sh-tag .sh-chip { font-size: 6.8pt; padding: .2mm 1.3mm .2mm 1mm; }
/* kreska od osi do opisu odsunietego od niej (krotkie odcinki, godziny blisko siebie) */
.sh-lead { position: absolute; width: 0; border-right: .25mm solid #94a3b8; transform: translateX(-50%); }
.sh-lead.short { height: .9mm; }

/* tabele */
.sh-table { width: 100%; border-collapse: collapse; font-size: 8.6pt; }
.sh-table th { text-align: left; font-size: 6.6pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 0 2mm 1.6mm; border-bottom: 1px solid var(--ink); }
.sh-table td { padding: 1.8mm 2mm; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sh-table tr.soft td { color: var(--mute); font-size: 7.8pt; }
.sh-table .num { text-align: right; white-space: nowrap; }
.sh-table tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 800; font-size: 10pt; padding-top: 2.2mm; }
.sh-table .soft { color: var(--mute); }
.sh-small { margin: 1.6mm 0 0; font-size: 7pt; color: var(--mute); }

.sh-chip { display: inline-flex; align-items: center; gap: 3px; padding: .5mm 1.8mm .5mm 1.4mm; border-radius: 1.4mm; background: var(--c); color: #fff; font-weight: 800; font-size: 8.4pt; line-height: 1.35; white-space: nowrap; }
.sh-chip.ink { color: #111827; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); }
.sh-chip .sh-ico { width: 1.05em; height: 1.05em; stroke-width: 2.4; }

/* plan krok po kroku: kolumny godzina | os | tresc */
.sh-flow { display: block; }
.sh-step { display: grid; grid-template-columns: 15mm 7mm 1fr; column-gap: 2mm; align-items: stretch; }
.sh-step time { font-weight: 800; font-size: 9pt; padding-top: 0; line-height: 3.4mm; text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.sh-step time small { font-size: 9pt; font-weight: 800; color: var(--ink); }
.sh-step .ax { position: relative; display: flex; flex-direction: column; align-items: center; }
.ax .pt { width: 3.2mm; height: 3.2mm; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .7mm var(--c, var(--ink)); flex: none; position: relative; z-index: 1; }
.ax .pt.s { background: #16a34a; box-shadow: 0 0 0 .6mm #fff, 0 0 0 .9mm #16a34a; }
.ax .pt.e { background: #dc2626; box-shadow: 0 0 0 .6mm #fff, 0 0 0 .9mm #dc2626; }
.ax .ln { flex: 1; width: 1.1mm; background: var(--c); min-height: 2mm; margin: -.4mm 0; }
.ax .ln.top { flex: none; height: 1.4mm; min-height: 0; }
.ax .ln.dash { width: .9mm; background: radial-gradient(circle, #64748b .35mm, transparent .45mm) 50% 0 / .9mm 1.6mm repeat-y; }
.sh-step.end time, .sh-step.end > div { padding-top: 1.4mm; }
.sh-step.ride time { padding-bottom: 0; }
.sh-step > div { min-width: 0; padding-bottom: 2mm; }
.sh-step.start > div b, .sh-step.end > div b { font-size: 10pt; font-weight: 800; display: block; }
.sh-step.start > div small, .sh-step.end > div small { color: var(--mute); font-size: 7.8pt; }
.sh-walk { display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 8.2pt; padding: .4mm 0 0; }
.sh-wait { font-size: 7.8pt; color: var(--mute); padding-top: .2mm; }
.sh-wait.tight { color: #b45309; font-weight: 700; }
.sh-ride { border: 1px solid var(--rule); border-radius: 3mm; padding: 2.2mm 3mm 2.4mm; background: #fff; margin-bottom: 2mm;
  box-shadow: 0 .4mm 0 color-mix(in srgb, var(--c) 30%, transparent); }
.sh-step.ride > div { padding-bottom: 0; }
.sh-ride-top { display: flex; align-items: center; gap: 2.4mm; flex-wrap: wrap; }
.sh-ride-top .sh-chip { font-size: 9pt; padding: .8mm 2.2mm .8mm 1.8mm; }
.sh-dir { color: var(--ink2); font-weight: 600; }
.sh-dur { margin-left: auto; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.sh-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4mm; margin-top: 1.8mm; }
.sh-ends > div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 2mm; padding: 1.5mm 2.2mm; border-radius: 2mm; background: var(--soft); }
.sh-ends span { grid-column: 1 / -1; font-size: 6.4pt; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.sh-ends b { font-size: 9pt; font-weight: 800; line-height: 1.25; }
.sh-ends em { font-style: normal; font-weight: 800; font-size: 9pt; align-self: end; }
.sh-halts { margin-top: 1.8mm; }
.sh-halts li small { color: var(--mute); font-size: 6.6pt; }
.sh-plat { display: inline-block; margin-left: 1mm; padding: 0 1.2mm; border-radius: 1mm; background: #e0e7ff; color: #3730a3; font-size: 6.6pt; font-weight: 700; vertical-align: .1em; white-space: nowrap; }
.sh-cap { display: block; font-size: 6.6pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.2mm; }
.sh-halts ol { list-style: none; margin: 0; padding: 0; columns: var(--cols, 1); column-gap: 5mm; font-size: 7.2pt; color: var(--ink2); }
.sh-halts li { break-inside: avoid; display: flex; gap: 2mm; padding: .25mm 0; }
.sh-halts li em { font-style: normal; font-weight: 700; color: var(--ink); min-width: 9mm; }
.sh-meta { display: flex; gap: 4mm; align-items: center; margin-top: 2.2mm; font-size: 8pt; }
.sh-fare { font-weight: 700; color: #15803d; }
.sh-dis { margin: 2mm 0 0; padding: 1.6mm 2.4mm; border-radius: 2mm; background: #fff7ed; color: #9a3412; font-size: 7.6pt; border: 1px solid #fed7aa; }

/* przesiadki z bliska */
.sh-spot { break-inside: avoid; border: 1px solid var(--rule); border-radius: 3mm; padding: 2.4mm; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto 1fr; gap: 2.4mm 4mm; }
.sh-spot-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 3mm; }
.sh-spot-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-spot-head b { font-size: 11pt; font-weight: 800; }
.sh-spot-head small { color: var(--ink2); font-size: 8pt; }
.sh-badge { width: 8mm; height: 8mm; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 10pt; flex: none; }
.sh-badge.access { background: #16a34a; font-size: 8pt; } .sh-badge.egress { background: #dc2626; font-size: 7pt; }
.sh-gap { font-weight: 800; font-size: 12pt; padding: 1mm 2.6mm; border-radius: 2mm; background: var(--soft); white-space: nowrap; }
.sh-gap.tight { background: #fff7ed; color: #b45309; }
.sh-spot .sh-map.small { grid-column: 1; }
.sh-spot:not(:has(.sh-spot-times)) .sh-map.small { grid-column: 1 / -1; }
.sh-spot-times { margin: 0; display: flex; flex-direction: column; gap: 2.4mm; align-self: center; }
.sh-spot-times div { display: flex; flex-direction: column; gap: .8mm; }
.sh-spot-times dt { font-size: 6.6pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sh-spot-times dd { margin: 0; display: flex; align-items: center; gap: 2mm; font-weight: 800; font-size: 11pt; }
.sh-spot-times div:last-child dd { font-weight: 500; font-size: 8pt; color: var(--ink2); }

.sh-notes ul { margin: 0; padding: 0 0 0 4.4mm; display: flex; flex-direction: column; gap: 1.2mm; font-size: 8.2pt; color: var(--ink2); }
.sh-url { font-size: 6.6pt; color: var(--mute); word-break: break-all; }

/* przycisk w wynikach */
.pill-btn .sh-ico { margin-right: 4px; }

/* ---- druk: tylko kartki, bez paska i tla; kazda kartka na osobnej stronie A4 */
@page { size: A4; margin: 0; }
@media print {
  body.printing-sheet > *:not(#sheetOverlay) { display: none !important; }
  body.printing-sheet #sheetOverlay { position: static; display: block; background: none; }
  body.printing-sheet .sheet-bar { display: none; }
  body.printing-sheet .sheet-stage { display: block; padding: 0; overflow: visible; }
  body.printing-sheet .sheet-page { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; }
  body.printing-sheet .sheet-page:last-child { break-after: auto; }
}
@media (max-width: 720px) {
  .sheet-bar { padding: 8px 10px; }
  .sheet-bar > b { display: none; }
  .sheet-opts { order: 5; flex-basis: 100%; }
}

/* obraz: jedna dluga strona o szerokosci A4, wysokosc wedlug tresci */
.sheet-page.long { height: auto; }
.sheet-page.long .sp-body { overflow: visible; }
/* kafelki: dluzsze wartosci (cena "od–do", kilka linii) zawijaja sie zamiast ucinac */
.sh-fact.wide b { font-size: 10pt; white-space: normal; }
.sh-fact small:has(.sh-chips) { white-space: normal; overflow: visible; }
.sh-chips { flex-wrap: wrap; row-gap: .6mm; }
.sh-ends .sh-plat { grid-column: auto; text-transform: none; letter-spacing: 0; font-size: 6.6pt; color: #3730a3; }