/* pkg/ui/appbar frame.css: the one document frame every page shares (ask,
   journey log, host shells, cmsportal): the self-hosted Inter faces behind
   --ui-font and the reserved root scrollbar gutter. Served first in CSS() and
   as the portal theme's ui-frame.css; the font files live at FontPrefix on
   every host (FontHandler), so every frame loads the same URLs once.
   Each face is full Latin + Latin Extended (sk cs de pl hu fr ...), named
   inter-<weight>.<uihtmx.AssetVersion of its bytes>.woff2 so a new cut is a
   new immutable URL; 800 is a real face (--ui-fw-heavy), never synthesized.
   swap + a metric-matched local fallback ("Inter Fallback": Arial scaled to
   Inter's advance and line metrics) keeps the swap from moving the layout. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/cdn/nhc-ui/fonts/inter-400.8575ae82782393fc.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/cdn/nhc-ui/fonts/inter-500.2090fb92de9f6362.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/cdn/nhc-ui/fonts/inter-600.721ef839b7af3eea.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/cdn/nhc-ui/fonts/inter-700.6bb8af20f3aa4f3b.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/cdn/nhc-ui/fonts/inter-800.2cad7d8591175268.woff2") format("woff2"); }
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%;
}
/* a short page and a long one keep the same column x (no 7 px jump when the
   root scrollbar comes and goes) */
html { scrollbar-gutter: stable; }

/* Neutral UI tokens (--ui-*): the one :root shared by pkg/ui bricks and the
   pages that adopt them. Values are copied from
   pkg/portalask/assets/ask-tokens.css (--pa-*); a theme overrides a value
   here, never per component. --ui-accent is the single primary colour. */
:root {
  /* surfaces */
  --ui-bg: #f7f8fb;
  --ui-surface: #ffffff;
  --ui-soft: #f1f4f8;
  --ui-tint: rgba(7, 20, 38, 0.07);
  --ui-tint-strong: rgba(7, 20, 38, 0.13);
  --ui-overlay: rgba(7, 20, 38, 0.45);
  /* lines */
  --ui-line: #dfe5ee;
  --ui-line-soft: rgba(223, 229, 238, 0.86);
  --ui-line-strong: #cfd6e2;
  --ui-track: #d7dee9;
  /* text */
  --ui-ink: #071426;
  --ui-ink-2: #253247;
  --ui-muted: #667085;
  --ui-muted-2: #8b95a5;
  --ui-on-dark: #ffffff;
  /* brand and the single primary action colour */
  --ui-brand: #071426;
  --ui-accent: #ef1725;
  --ui-accent-2: #c90f1a;
  --ui-accent-soft: rgba(239, 23, 37, 0.28);
  --ui-accent-line: rgba(239, 23, 37, 0.35);
  /* status */
  --ui-ok: #1e7a3c;
  --ui-ok-bg: #e8f5ec;
  --ui-warn: #8a4b00;
  --ui-warn-bg: #fff4e0;
  --ui-warn-line: #f2c879;
  --ui-info: #1d4f91;
  --ui-info-bg: #eef4fc;
  --ui-info-line: #b9cfee;
  --ui-danger: #b3261e;
  --ui-danger-bg: #fdecee;
  --ui-danger-line: #f1b3b0;
  /* focus */
  --ui-focus-ring: rgba(239, 23, 37, 0.28);
  --ui-focus: 3px solid var(--ui-focus-ring);
  --ui-focus-offset: 2px;
  /* type: 6 sizes, 4 weights, one caps treatment */
  --ui-fs-xs: 11px;
  --ui-fs-sm: 12px;
  --ui-fs-md: 13px;
  --ui-fs-base: 14px;
  --ui-fs-lg: 16px;
  --ui-fs-xl: 18px;
  --ui-fw-regular: 400;
  --ui-fw-medium: 600;
  --ui-fw-bold: 700;
  --ui-fw-heavy: 800;
  --ui-caps-tracking: 0.04em;
  /* radius */
  --ui-radius-xs: 6px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 12px;
  --ui-radius: 12px; /* the one card/field radius */
  --ui-radius-sheet: 16px;
  --ui-radius-pill: 999px;
  /* elevation */
  --ui-shadow-1: 0 10px 28px rgba(7, 20, 38, 0.05);
  --ui-shadow-2: 0 8px 18px rgba(7, 20, 38, 0.09);
  --ui-shadow-3: 0 16px 42px rgba(7, 20, 38, 0.09);
  --ui-shadow: 0 24px 64px rgba(7, 20, 38, 0.11);
  --ui-shadow-overlay: 0 24px 60px rgba(7, 20, 38, 0.28);
  /* spacing */
  --ui-sp-1: 2px;
  --ui-sp-2: 4px;
  --ui-sp-3: 6px;
  --ui-sp-4: 8px;
  --ui-sp-5: 10px;
  --ui-sp-6: 12px;
  --ui-sp-7: 16px;
  --ui-sp-8: 24px;
  /* controls */
  --ui-control-sm: 32px;
  --ui-control: 40px;
  --ui-control-lg: 50px;
  --ui-hit: 44px;
  /* layout (app bar brick) */
  --ui-gutter: 16px;
  --ui-content: 1200px;
  /* map pages from 1440 px (journey log .jl--map): a wider page column and
     one left column (list / ride info) width beside the map pane */
  --ui-content-map: clamp(1200px, 82vw, 1760px);
  --ui-map-side: 400px;
  --ui-bar: 56px;
  --ui-tabbar: 64px;
  --ui-logo-h: 28px;
  /* the one type scale, padding and control height (page.css): bricks and
     pages read these instead of own font stacks, heading sizes and heights */
  --ui-font: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-h1: 1.75rem;
  --ui-h2: 1.25rem;
  --ui-h3: 1rem;
  --ui-h-weight: var(--ui-fw-bold);
  --ui-small: .8125rem;
  --ui-pad: var(--ui-sp-7);
  --ui-gap: var(--ui-sp-6);
  --ui-ctl-h: var(--ui-hit);
  /* the one page top: every frame's column starts --ui-page-top below the
     bar, and a sub-page's back row sits inside that band, so a title never
     moves between a page and its sub-pages (frame.css, appbar.css .ui-backrow) */
  --ui-page-top: var(--ui-hit);
  /* space fixed bottom overlays (cookie consent) keep free: the phone tab
     bar's height where one is shown (appbar.css), else 0 */
  --ui-bottom-inset: 0px;
}

/* pkg/ui/appbar: the one app bar, the page-header back row, the phone tab
   bar and the one page column. Reads tokens.css only; no script. One bar
   variant on every page: brand + account on top at every width, a sub-page's
   back link in the .ui-backrow below the bar (same markup at every width);
   the sections in the bar from 960 px, in the bottom tab bar below it. */
/* The one content column of every app-bar page (search, journey log, host
   shells): --ui-content wide with --ui-gutter sides, so navigation never
   changes the column. A nested .ui-page adds nothing. */
.ui-page { box-sizing: border-box; width: 100%; max-width: var(--ui-content); margin-inline: auto; padding-inline: var(--ui-gutter); }
.ui-page .ui-page { max-width: none; padding-inline: 0; }
.ui-appbar, .ui-appbar *, .ui-backrow, .ui-tabbar, .ui-tabbar *, .ui-more, .ui-more * { box-sizing: border-box; }
/* the bars carry the one --ui-font stack themselves: a host body font (a
   portal theme's own stack) never changes the item widths between pages */
.ui-appbar, .ui-tabbar, .ui-more { font-family: var(--ui-font); }
.ui-appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--ui-sp-6);
  min-height: calc(var(--ui-bar) + env(safe-area-inset-top, 0px));
  /* bar content lines up with the .ui-page column */
  padding: env(safe-area-inset-top, 0px) max(var(--ui-gutter), env(safe-area-inset-right, 0px), (100% - var(--ui-content)) / 2 + var(--ui-gutter)) 0 max(var(--ui-gutter), env(safe-area-inset-left, 0px), (100% - var(--ui-content)) / 2 + var(--ui-gutter));
  background: var(--ui-surface); border-bottom: 1px solid var(--ui-line);
  color: var(--ui-ink); font-size: var(--ui-fs-base);
}
/* the bar is sticky, so the root keeps its height as scroll padding:
   anchors, focus moves and scrollIntoView (the ask result jump) land just
   below the bar instead of under it */
html:has(.ui-appbar) { scroll-padding-top: calc(var(--ui-bar) + env(safe-area-inset-top, 0px)); }
.ui-appbar a { color: inherit; text-decoration: none; }
.ui-appbar a:focus-visible, .ui-backrow a:focus-visible, .ui-tabbar a:focus-visible,
.ui-tabbar button:focus-visible, .ui-appbar__more-btn:focus-visible, .ui-more a:focus-visible {
  outline: var(--ui-focus); outline-offset: var(--ui-focus-offset);
}
.ui-appbar__brand {
  display: inline-flex; align-items: center; gap: var(--ui-sp-3); flex: none;
  min-height: var(--ui-hit); min-width: var(--ui-hit);
}
/* mark slot: an empty rounded square about the wordmark's cap height (a
   small logo goes here later), then the site name as given */
.ui-appbar__mark { flex: none; width: calc(var(--ui-fs-xl) * 0.75); height: calc(var(--ui-fs-xl) * 0.75); border: 2px solid var(--ui-accent); border-radius: 25%; }
.ui-appbar__wordmark {
  display: block; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ui-brand); font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-heavy);
  line-height: var(--ui-logo-h); letter-spacing: 0.06em;
}
.ui-appbar__wordmark-accent { color: var(--ui-accent); }
.ui-appbar__brand-copy { display: grid; min-width: 0; }
.ui-appbar__tagline { display: block; color: var(--ui-brand); font-size: var(--ui-fs-xs); line-height: 1.2; letter-spacing: .04em; white-space: nowrap; }
.ui-appbar__back {
  display: inline-flex; align-items: center; min-width: 0;
  min-height: var(--ui-hit); max-width: 100%;
  font-weight: var(--ui-fw-bold); color: var(--ui-ink-2); text-decoration: none;
}
.ui-appbar__back::before {
  content: ""; flex: none; width: 9px; height: 9px; margin: 0 8px 0 4px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.ui-appbar__back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-appbar__nav { display: none; gap: var(--ui-sp-2); margin-left: var(--ui-sp-8); }
.ui-appbar__item {
  display: inline-flex; align-items: center; gap: var(--ui-sp-3); min-height: var(--ui-hit);
  padding: 0 14px; border-radius: var(--ui-radius-pill);
  font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); white-space: nowrap;
}
.ui-appbar__item:hover { background: var(--ui-soft); }
.ui-appbar__item[aria-current] { background: var(--ui-soft); color: var(--ui-ink); font-weight: var(--ui-fw-heavy); }
/* every item reserves its current (heavy) label width: a hidden copy of the
   label at --ui-fw-heavy in a zero-height second grid row sets the column,
   so the bolder current item never moves the items after it on any page.
   Hidden generated content (empty alt text) is not read out. */
.ui-appbar__label { display: inline-grid; justify-items: center; }
.ui-appbar__label::after {
  content: attr(data-label); content: attr(data-label) / "";
  height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none;
  font-weight: var(--ui-fw-heavy);
}
.ui-appbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--ui-sp-4); }
.ui-appbar__account { display: flex; align-items: center; min-height: var(--ui-hit); min-width: var(--ui-hit); justify-content: center; }
/* the one account control of every page (the host fills the account slot):
   an .ui-account__fab sign-in link, or a <details class="ui-account__menu">
   whose <summary class="ui-account__fab"> opens .ui-account__panel */
.ui-account__menu { position: relative; }
.ui-appbar .ui-account__fab {
  width: var(--ui-hit); height: var(--ui-hit); display: grid; place-items: center;
  border-radius: 50%; background: var(--ui-brand); color: var(--ui-on-dark);
  cursor: pointer; list-style: none; text-decoration: none;
}
.ui-account__fab::-webkit-details-marker, .ui-account__fab::marker { display: none; content: ""; }
.ui-account__menu[open] > .ui-account__fab { background: var(--ui-accent); }
.ui-account__fab:focus-visible { outline: var(--ui-focus); outline-offset: var(--ui-focus-offset); }
.ui-account__icon { width: 22px; height: 22px; }
.ui-account__panel {
  position: absolute; right: 0; top: calc(100% + var(--ui-sp-4)); z-index: 50;
  width: max-content; min-width: 200px; max-width: calc(100vw - 2 * var(--ui-gutter));
  display: grid; gap: var(--ui-sp-3); padding: var(--ui-gap);
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  background: var(--ui-surface); box-shadow: var(--ui-shadow); color: var(--ui-ink);
}
/* the one close rule of every bar menu (account, language, More): while a
   menu is open its summary lays a transparent sheet over the viewport, under
   the panel, so a click anywhere outside lands on the summary and closes the
   menu (a summary click toggles its <details>). No script. */
.ui-account__menu[open] > summary::before, .ui-appbar__lang[open] > summary::before, .ui-appbar__more[open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: 45; cursor: default;
}
/* the language switcher (Options.Languages): a <details> whose summary
   shows the current code and opens the list of language names */
.ui-appbar__lang, .ui-appbar__more { position: relative; }
.ui-appbar__lang-btn {
  min-height: var(--ui-hit); min-width: var(--ui-hit); display: grid; place-items: center;
  padding: 0 var(--ui-sp-2); border-radius: var(--ui-radius-pill); cursor: pointer; list-style: none;
  color: var(--ui-ink); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-bold);
}
.ui-appbar__lang-btn::-webkit-details-marker, .ui-appbar__lang-btn::marker,
.ui-appbar__more-btn::-webkit-details-marker, .ui-appbar__more-btn::marker { display: none; content: ""; }
.ui-appbar__lang-btn:focus-visible { outline: var(--ui-focus); outline-offset: var(--ui-focus-offset); }
.ui-appbar__lang[open] > .ui-appbar__lang-btn, .ui-appbar__more[open] > .ui-appbar__more-btn { background: var(--ui-soft); }
/* desktop More: a bar section (.ui-appbar__item) opening the shared menu
   panel of the language switcher, left-aligned under the button */
.ui-appbar__more-btn { cursor: pointer; list-style: none; }
.ui-appbar__more-panel { right: auto; left: 0; min-width: 200px; }
.ui-appbar__more-panel a { gap: var(--ui-sp-3); }
.ui-appbar__menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--ui-sp-4)); z-index: 50;
  margin: 0; padding: var(--ui-sp-2); list-style: none; min-width: 160px;
  max-width: calc(100vw - 2 * var(--ui-gutter));
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.ui-appbar__menu-panel a {
  display: flex; align-items: center; min-height: var(--ui-hit); padding: 0 var(--ui-sp-3);
  border-radius: var(--ui-radius-sm); color: var(--ui-ink); text-decoration: none;
}
.ui-appbar__menu-panel a:hover { background: var(--ui-soft); }
.ui-appbar__menu-panel a[aria-current] { color: var(--ui-brand); font-weight: var(--ui-fw-bold); }
.ui-account__name { font-weight: var(--ui-fw-bold); color: var(--ui-brand); overflow-wrap: anywhere; }
.ui-account__head { display: grid; gap: 2px; padding-bottom: var(--ui-sp-3); border-bottom: 1px solid var(--ui-line); }
.ui-account__email { font-size: var(--ui-fs-sm); color: var(--ui-muted, var(--ui-ink)); overflow-wrap: anywhere; }
/* menu destinations (Môj profil, Moje cesty): full-width hit-size rows */
.ui-account__item {
  display: flex; align-items: center; min-height: var(--ui-hit); padding: 0 var(--ui-sp-3);
  border-radius: var(--ui-radius-sm); color: var(--ui-ink); text-decoration: none;
}
.ui-account__item:hover { background: var(--ui-soft); }
.ui-account__item:focus-visible { outline: var(--ui-focus); outline-offset: var(--ui-focus-offset); }
.ui-account__panel form { display: grid; }
/* the account profile page body (publicaccount ProfilePath); erasure stays a
   small muted link at the very bottom, never a button */
.ui-account__profile { display: grid; gap: var(--ui-gap); max-width: 40rem; }
.ui-account__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-sp-2); margin: 0; }
.ui-account__facts dt { font-size: var(--ui-fs-sm); color: var(--ui-muted, var(--ui-ink)); }
.ui-account__facts dd { margin: 0 0 var(--ui-sp-3); font-weight: var(--ui-fw-bold); overflow-wrap: anywhere; }
.ui-account__links { display: grid; gap: var(--ui-sp-3); }
.ui-account__links form { display: grid; }
@media (min-width: 600px) { .ui-account__links { display: flex; flex-wrap: wrap; } }
.ui-account__erase { margin: var(--ui-sp-4) 0 0; font-size: var(--ui-fs-sm); }
.ui-account__erase a { color: var(--ui-muted, var(--ui-ink)); opacity: 0.75; }

.ui-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: calc(var(--ui-tabbar) + env(safe-area-inset-bottom, 0px));
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--ui-surface); border-top: 1px solid var(--ui-line);
}
/* the bar's surface continues below its box to the physical screen edge:
   when a browser lays its fixed viewport out shorter than the visible screen
   (iOS WebKit 26 while a toolbar collapses on scroll, in Safari and Chrome on
   iPhone/iPad, WebKit bug 297779), bottom: 0 lands above the edge and the
   page would show through underneath; this keeps that strip the bar, with no
   browser detection. A fixed box adds no scrollable overflow, so the
   extension stays off screen wherever bottom: 0 already meets the edge. */
.ui-tabbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh;
  background: inherit;
}
/* a More sheet item is a tab too: icon over label, the same size and tints */
.ui-tabbar__item, .ui-more__item {
  display: grid; justify-items: center; align-content: center; gap: 3px;
  min-height: var(--ui-hit); min-width: var(--ui-hit); padding: var(--ui-sp-2);
  color: var(--ui-muted); text-decoration: none;
  font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-bold);
}
.ui-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tabbar__icon {
  flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ui-appbar__item .ui-tabbar__icon { width: 18px; height: 18px; }
.ui-tabbar__item[aria-current], .ui-more__item[aria-current] { color: var(--ui-ink); }
.ui-tabbar__item[aria-current] .ui-tabbar__icon, .ui-more__item[aria-current] .ui-tabbar__icon { stroke-width: 2.6; }
.ui-tabbar__item--live, .ui-tabbar__item--live[aria-current] { color: var(--ui-ok); }
/* the More tab: a <button popovertarget> drawn like the link tabs */
.ui-tabbar__more { margin: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
/* the phone More sheet: a native popover="auto" (top layer, no script)
   that is the tab bar growing a second row of tabs. It sits on the bar on
   the bar's surface, so bar and row read as one panel; it is revealed from
   its bottom edge with its row sliding up out of the bar (clip-path +
   transform), and closes the same way back down (overlay/display
   allow-discrete keep it painted while leaving). The columns match the
   bar's tab width on a phone (auto-fill 72px). Its backdrop stops above the
   tab bar, so the tabs stay tappable and the More tab, marked while open,
   closes it again; backdrop tap and Esc light-dismiss it. With reduced
   motion it just appears. */
.ui-more {
  position: fixed; inset: auto 0 calc(var(--ui-tabbar) + env(safe-area-inset-bottom, 0px)) 0;
  width: auto; max-width: none; height: auto; margin: 0;
  max-height: calc(100dvh - var(--ui-tabbar) - env(safe-area-inset-bottom, 0px) - var(--ui-bar));
  overflow: auto; overscroll-behavior: contain;
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  border: 0; border-top: 1px solid var(--ui-line); border-radius: 0;
  background: var(--ui-surface); color: var(--ui-ink); box-shadow: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.22s ease, overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
.ui-more:popover-open { clip-path: inset(0); }
@starting-style { .ui-more:popover-open { clip-path: inset(100% 0 0 0); } }
.ui-tabbar:has(+ .ui-more:popover-open) { border-top-color: transparent; }
.ui-tabbar:has(+ .ui-more:popover-open) .ui-tabbar__more { color: var(--ui-ink); }
.ui-tabbar:has(+ .ui-more:popover-open) .ui-tabbar__more .ui-tabbar__icon { stroke-width: 2.6; }
.ui-more::backdrop {
  inset: 0 0 calc(var(--ui-tabbar) + env(safe-area-inset-bottom, 0px)) 0;
  background: transparent;
  transition: background-color 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}
.ui-more:popover-open::backdrop { background: var(--ui-overlay); }
@starting-style { .ui-more:popover-open::backdrop { background: transparent; } }
.ui-more__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  margin: 0; padding: 0; list-style: none;
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
.ui-more:popover-open .ui-more__list { transform: none; }
@starting-style { .ui-more:popover-open .ui-more__list { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .ui-more, .ui-more::backdrop, .ui-more__list { transition: none; } }
.ui-more__item { min-height: var(--ui-tabbar); }
.ui-more__label {
  max-width: 100%; text-align: center; line-height: 1.2; overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

@media (max-width: 959.98px) {
  body:has(.ui-tabbar) {
    --ui-bottom-inset: calc(var(--ui-tabbar) + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--ui-bottom-inset);
  }
}

@media (min-width: 960px) {
  .ui-appbar__nav { display: flex; }
  .ui-tabbar, .ui-more { display: none; }
}

/* pkg/ui/appbar page.css: the shared base of every app-bar page: one font,
   one heading scale, one radius, one control height (tokens.css). Element
   rules sit in :where() (zero specificity) so any page class still wins; the
   .ui-* classes are the shared bricks (button, field, card, chip). */
:where(body:has(.ui-appbar), .ui-page) { font-family: var(--ui-font); }
/* form controls do not inherit the font by default (Arial on map buttons) */
:where(body:has(.ui-appbar) button, body:has(.ui-appbar) input, body:has(.ui-appbar) select, body:has(.ui-appbar) textarea) { font-family: inherit; }
:where(.ui-page h1, .ui-h1) { font-size: var(--ui-h1); font-weight: var(--ui-h-weight); line-height: 1.2; }
:where(.ui-page h2, .ui-h2) { font-size: var(--ui-h2); font-weight: var(--ui-h-weight); line-height: 1.25; }
:where(.ui-page h3, .ui-h3) { font-size: var(--ui-h3); font-weight: var(--ui-h-weight); line-height: 1.3; }
:where(.ui-small) { font-size: var(--ui-small); }

/* button: pill at the control height; --primary is the accent action,
   --secondary the outlined quiet one next to it, --danger the destructive
   action (a delete, the confirm dialog's OK). States: hidden, disabled,
   aria-busy and htmx in flight. */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-sp-3);
  min-height: var(--ui-ctl-h); padding: 0 var(--ui-pad);
  border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-pill);
  background: var(--ui-surface); color: var(--ui-brand);
  font: inherit; font-weight: var(--ui-fw-medium); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ui-btn:hover { background: var(--ui-tint); }
.ui-btn--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-dark); }
.ui-btn--primary:hover { background: var(--ui-accent-2); border-color: var(--ui-accent-2); }
.ui-btn--secondary { background: transparent; border-color: var(--ui-line-strong); color: var(--ui-brand); }
.ui-btn--secondary:hover { background: var(--ui-tint); }
.ui-btn--danger { background: var(--ui-danger); border-color: var(--ui-danger); color: var(--ui-on-dark); }
.ui-btn--danger:hover { background: var(--ui-danger); border-color: var(--ui-danger-line); box-shadow: inset 0 0 0 99px var(--ui-tint-strong); }
/* quiet: text-only tertiary; small: compact row action. */
.ui-btn--quiet { background: transparent; border-color: transparent; padding: 0 var(--ui-gap); }
.ui-btn--small { padding: 0 var(--ui-gap); font-size: var(--ui-small); }
.ui-btn[hidden] { display: none; }
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ui-btn[aria-busy="true"], .ui-btn.htmx-request, .htmx-request .ui-btn[type="submit"] { opacity: 0.6; }

/* field: text input / select at the control height */
.ui-field {
  box-sizing: border-box; width: 100%; min-height: var(--ui-ctl-h); padding: 0 var(--ui-gap);
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-ink); font: inherit;
}

/* card: one radius, one padding */
.ui-card {
  box-sizing: border-box; padding: var(--ui-pad);
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface);
}

/* chip: the one chip/badge. Static chips are small tinted labels (tones
   --ok --warn --info --accent); link/button chips are filter pills at the
   control height. */
.ui-chip {
  display: inline-flex; align-items: center; gap: var(--ui-sp-3); max-width: 100%;
  padding: var(--ui-sp-1) var(--ui-sp-5); border: 1px solid transparent; border-radius: var(--ui-radius-pill);
  background: var(--ui-soft); color: var(--ui-ink-2);
  font-size: var(--ui-small); font-weight: var(--ui-fw-medium); line-height: 1.4;
  white-space: nowrap; text-decoration: none;
}
.ui-chip--ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-chip--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-chip--info { background: var(--ui-info-bg); color: var(--ui-info); }
.ui-chip--accent { background: var(--ui-accent); color: var(--ui-on-dark); }
a.ui-chip, button.ui-chip {
  flex: none; min-height: var(--ui-ctl-h); padding: 0 var(--ui-gap);
  border-color: var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); font-family: inherit; cursor: pointer;
}
a.ui-chip:hover, button.ui-chip:hover { background: var(--ui-tint); }
.ui-btn:focus-visible, .ui-field:focus-visible, .ui-chip:focus-visible {
  outline: var(--ui-focus); outline-offset: var(--ui-focus-offset);
}

/* back link of a sub-page: drawn inside the page-top band of the column
   (zero flow height), so the title below sits at the same top as on a page
   without one; the bar keeps its brand */
.ui-backrow { position: relative; z-index: 1; height: 0; overflow: visible; }
.ui-backrow .ui-appbar__back { color: var(--ui-ink-2); text-decoration: none; }

/* Portal ask design tokens: the one :root for ask.css and RunPopupStyles().
   Every ask sheet reads these without hex fallbacks. */
:root {
  /* surfaces */
  --pa-bg: #f7f8fb;
  --pa-surface: #ffffff;
  --pa-soft: #f1f4f8;
  --pa-tint: rgba(7, 20, 38, 0.07);
  --pa-tint-strong: rgba(7, 20, 38, 0.13);
  --pa-overlay: rgba(7, 20, 38, 0.45);
  /* lines */
  --pa-line: #dfe5ee;
  --pa-line-soft: rgba(223, 229, 238, 0.86);
  --pa-line-strong: #cfd6e2;
  --pa-track: #d7dee9;
  /* text */
  --pa-ink: #071426;
  --pa-ink-2: #253247;
  --pa-muted: #667085;
  --pa-muted-2: #8b95a5;
  --pa-on-dark: #ffffff;
  /* brand: read from the shared --ui-* sheet (pkg/ui/appbar tokens.css),
     which the site theme overrides (Config.Theme); red is the accent
     (clocks, primary action, eyebrows). */
  --pa-navy: var(--ui-brand);
  --pa-red: var(--ui-accent);
  --pa-red-2: var(--ui-accent-2);
  --pa-red-soft: var(--ui-accent-soft);
  --pa-red-line: var(--ui-accent-line);
  /* status */
  --pa-warn: #8a4b00;
  --pa-warn-bg: #fff4e0;
  --pa-warn-line: #f2c879;
  --pa-info: #1d4f91;
  --pa-info-bg: #eef4fc;
  --pa-info-line: #b9cfee;
  --pa-stop-bg: #fdecee;
  /* real problems (delay, cancellation, disruption): always colour + icon */
  --pa-danger: #b3261e;
  --pa-danger-bg: #fdecee;
  --pa-danger-line: #f1b3b0;
  /* focus */
  --pa-focus-ring: var(--ui-focus-ring);
  --pa-focus: 3px solid var(--pa-focus-ring);
  --pa-focus-offset: 2px;
  /* type: 6 sizes, 4 weights, one caps treatment */
  --pa-fs-xs: 11px;
  --pa-fs-sm: 12px;
  --pa-fs-md: 13px;
  --pa-fs-base: 14px;
  --pa-fs-lg: 16px;
  --pa-fs-xl: 18px;
  --pa-fw-regular: 400;
  --pa-fw-medium: 600;
  --pa-fw-bold: 700;
  --pa-fw-heavy: 800;
  --pa-caps-tracking: 0.04em;
  --pa-eyebrow: var(--pa-red-2);
  /* radius */
  --pa-radius-xs: 6px;
  --pa-radius-sm: 10px;
  --pa-radius-md: var(--ui-radius);
  --pa-radius: var(--ui-radius);
  --pa-radius-sheet: 16px;
  --pa-radius-pill: 999px;
  /* elevation */
  --pa-shadow-1: 0 10px 28px rgba(7, 20, 38, 0.05);
  --pa-shadow-2: 0 8px 18px rgba(7, 20, 38, 0.09);
  --pa-shadow-3: 0 16px 42px rgba(7, 20, 38, 0.09);
  --pa-shadow: 0 24px 64px rgba(7, 20, 38, 0.11);
  --pa-shadow-overlay: 0 24px 60px rgba(7, 20, 38, 0.28);
  /* spacing */
  --pa-sp-1: 2px;
  --pa-sp-2: 4px;
  --pa-sp-3: 6px;
  --pa-sp-4: 8px;
  --pa-sp-5: 10px;
  --pa-sp-6: 12px;
  --pa-sp-7: 16px;
  --pa-sp-8: 24px;
  /* controls: one control height (--ui-ctl-h, pkg/ui tokens); -sm is only
     the 32px arrow discs with a 44px hit area */
  --pa-control-sm: 32px;
  --pa-control: var(--ui-ctl-h);
  --pa-control-lg: var(--ui-ctl-h);
  --pa-hit: var(--ui-ctl-h);
}

/* The typed ask input (front page q/From/To/Via) and the single station
   field (StationField, station_field.tmpl) other pages reuse. The single
   field keeps this look inside host forms whose generic "input" rules would
   otherwise restyle it; its suggest list is the ask-inputs.css .pa-suggest. */
.pa-search__input,
.pa-stations--single .pa-search__input {
  appearance: none;
  width: 100%;
  height: var(--pa-control-lg);
  min-width: 0;
  border: 1px solid var(--pa-line-strong);
  border-radius: var(--pa-radius-pill);
  padding: 0 20px;
  color: var(--pa-ink);
  background: var(--pa-surface);
  font: inherit;
  font-size: var(--pa-fs-lg);
  line-height: var(--pa-control-lg);
  outline: none;
  box-shadow: var(--pa-shadow-3);
}

.pa-search__input:focus {
  border-color: var(--pa-red);
  box-shadow: 0 0 0 4px rgba(239, 23, 37, 0.13), 0 18px 48px var(--pa-tint-strong);
}

.pa-search__input::placeholder {
  color: var(--pa-muted-2);
}

.pa-stations--single {
  gap: 4px;
}

.pa-station__title {
  color: var(--pa-muted);
  font-size: var(--pa-fs-base);
}

.pa-stations--single .pa-search__input.pa-station__input {
  padding-left: 20px;
  padding-right: 48px;
}

.pa-stations--single .pa-search__input.pa-station__input:not(:focus) {
  box-shadow: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--pa-bg); color: var(--pa-ink); }
body.pa-body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--ui-font);
  letter-spacing: 0;
  background: var(--pa-bg);
}

.pa-shell {
  /* width: the shared .ui-page column (pkg/ui/appbar) */
  padding-block: var(--ui-page-top) 30px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 22px;
}
.pa-shell:not([data-portal-has-front]) { min-height: 100vh; }

.pa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pa-ask-surface {
  align-self: start;
  display: grid;
  gap: 18px;
}

.pa-search {
  --pa-search-action: var(--pa-control-lg);
  --pa-search-gap: 10px;
  display: grid;
  gap: 12px;
}

.pa-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pa-search-action);
  gap: var(--pa-search-gap);
  align-items: stretch;
}

.pa-search__button {
  width: var(--pa-control-lg);
  height: var(--pa-control-lg);
  border: 1px solid var(--pa-red-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-red);
  color: var(--pa-on-dark);
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(239, 23, 37, 0.22);
  overflow: hidden;
  position: relative;
}

.pa-search__button[aria-busy="true"] {
  background: var(--pa-red-2);
  cursor: progress;
}

.pa-search__button[aria-busy="true"]::before {
  animation: pa-search-busy-sweep 1.05s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,0.72), rgba(255,255,255,0));
  border-radius: inherit;
  content: "";
  inset: -2px;
  opacity: 0.72;
  position: absolute;
}

.pa-search__button:hover { background: var(--pa-red-2); }
.pa-search__button:focus-visible { outline: var(--pa-focus); outline-offset: 3px; }

.pa-search__icon {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}

.pa-search__icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  right: -7px;
  bottom: -4px;
  border-radius: 2px;
}

.pa-search__button[aria-busy="true"] .pa-search__icon {
  animation: pa-search-busy-spin 0.72s linear infinite;
  border-right-color: transparent;
}

.pa-search__button[aria-busy="true"] .pa-search__icon::after {
  opacity: 0;
}

@keyframes pa-search-busy-sweep {
  to { transform: rotate(360deg); }
}

@keyframes pa-search-busy-spin {
  to { transform: rotate(360deg); }
}

.pa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-sp-4);
  margin-top: 0;
}

.pa-route-mode {
  min-width: 0;
  margin: -2px 0 0;
  padding: 3px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.pa-route-mode--overnight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pa-route-mode__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pa-route-mode__option {
  min-width: 0;
  display: grid;
}

.pa-route-mode__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pa-route-mode__label {
  min-height: 30px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: var(--pa-radius-pill);
  color: var(--pa-ink-2);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-bold);
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.pa-route-mode__input:checked + .pa-route-mode__label {
  background: var(--pa-surface);
  color: var(--pa-navy);
  box-shadow: var(--pa-shadow-2);
}

.pa-route-mode__input:focus-visible + .pa-route-mode__label {
  outline: var(--pa-focus);
  outline-offset: 2px;
}

.pa-transfer {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: -2px;
  padding: 0 6px;
}

.pa-transfer[hidden] {
  display: none;
}

.pa-transfer__label,
.pa-transfer__value {
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-bold);
  white-space: nowrap;
}

.pa-transfer__track {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 9px;
  align-items: center;
}

.pa-transfer__input {
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.pa-transfer__input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--pa-radius-pill);
  background: linear-gradient(90deg, var(--pa-red), var(--pa-red)) 0/var(--pa-transfer-fill, 0%) 100% no-repeat, var(--pa-track);
}

.pa-transfer__input::-moz-range-track {
  height: 3px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-track);
}

.pa-transfer__input::-moz-range-progress {
  height: 3px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-red);
}

.pa-transfer__input::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pa-surface);
  background: var(--pa-red);
  margin-top: -5.5px;
  box-shadow: var(--pa-shadow-2);
}

.pa-transfer__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pa-surface);
  background: var(--pa-red);
  box-shadow: var(--pa-shadow-2);
}

.pa-transfer__input:focus-visible {
  outline: var(--pa-focus);
  outline-offset: 3px;
  border-radius: var(--pa-radius-pill);
}

@media (pointer: coarse) {
  .pa-transfer__input {
    min-height: 44px;
  }

  .pa-transfer__input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -8.5px;
  }

  .pa-transfer__input::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

.pa-result {
  scroll-margin-top: 12px;
}

.pa-result-slot {
  min-height: 1px;
  display: grid;
  gap: 12px;
}

.pa-result {
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: 14px;
  box-shadow: var(--pa-shadow);
}

.pa-result__header,
.pa-block__header {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.pa-search__title, .pa-result__title, .pa-block__title {
  margin: 0;
  font-size: var(--ui-h2);
  line-height: 1.25;
  font-weight: var(--ui-h-weight);
  color: var(--pa-navy);
}

.pa-block__title { font-size: var(--ui-h3); }
.pa-search__title { margin-bottom: 12px; }

.pa-result__subtitle,
.pa-result__summary,
.pa-block__subtitle,
.pa-item__subtitle,
.pa-item__meta {
  margin: 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
  line-height: 1.35;
}

.pa-block {
  border-top: 1px solid var(--pa-line);
  padding-top: 12px;
  margin-top: 12px;
}

.pa-actions--top {
  margin: 0 0 12px;
}

.pa-actions--bottom {
  margin-top: 12px;
}

.pa-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.pa-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.pa-item {
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-md);
  background: var(--pa-surface);
  padding: 12px;
}

.pa-item__main { display: grid; gap: 6px; }

/* Day chip ("zajtra") before the title: the neutral .pa-chip tone. */
.pa-item__day {
  flex: none;
}

.pa-item__day + .pa-item__title {
  margin-right: auto;
}

.pa-item__day ~ .pa-item__train {
  flex: none;
  white-space: nowrap;
}
.pa-item__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pa-item__title {
  font-size: var(--pa-fs-lg);
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--pa-navy);
}

.pa-lines {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--pa-ink-2);
  display: grid;
  gap: 5px;
  font-size: var(--pa-fs-md);
}

.pa-lines li {
  overflow-wrap: anywhere;
}

.pa-block[data-variant="route"] .pa-items {
  gap: 12px;
}

.pa-block[data-variant="route"] .pa-item {
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-md);
  background: var(--pa-surface);
  padding: 12px;
  box-shadow: var(--pa-shadow-1);
}

.pa-block[data-variant="route"] .pa-item + .pa-item {
  margin-top: 2px;
}

.pa-block[data-variant="route"] .pa-item__main {
  gap: 6px;
}

.pa-block[data-variant="route"] .pa-item__title {
  font-size: var(--pa-fs-xl);
  font-variant-numeric: tabular-nums;
}

.pa-block[data-variant="route"] .pa-item__meta {
  color: var(--pa-navy);
  font-weight: var(--pa-fw-medium);
}

.pa-block[data-variant="route"] .pa-lines {
  margin-top: 4px;
  border-left: 2px solid var(--pa-line);
  padding-left: 12px;
  gap: 6px;
  color: var(--pa-ink-2);
  font-size: var(--pa-fs-sm);
}

.pa-parts {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pa-part {
  min-width: 0;
  display: grid;
  gap: 7px;
  position: relative;
}

.pa-part__card {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-soft);
  padding: 10px;
  position: relative;
}

.pa-part__details {
  min-width: 0;
  display: grid;
  gap: 0;
}

.pa-part__details > summary {
  list-style: none;
}

.pa-part__details > summary::-webkit-details-marker {
  display: none;
}

.pa-part__details > .pa-part__card {
  cursor: pointer;
}

.pa-part__details > .pa-part__card:focus-visible {
  outline: var(--pa-focus);
  outline-offset: 2px;
}

.pa-part__details[open] > .pa-part__card {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.pa-part__extra {
  position: absolute;
  top: 7px;
  right: 8px;
  min-width: 0;
  z-index: 2;
}

.pa-part__carrier {
  min-width: 0;
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Wait before a leg: a neutral .pa-chip, warn when long (components). */
.pa-part__transfer {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pa-part__ride {
  min-width: 0;
  display: grid;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.pa-part__stop {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px max-content minmax(84px, max-content) minmax(0, 1fr);
  grid-template-areas: "marker label clock name";
  align-items: baseline;
  gap: 7px;
  padding: 3px 0;
  position: relative;
}

.pa-part__stop--from {
  padding-right: 112px;
}

.pa-part__stop--to {
  padding-right: 72px;
}

.pa-part__stop--via {
  grid-template-columns: 18px minmax(88px, max-content) minmax(0, 1fr);
  grid-template-areas: "marker times name";
  padding-right: 0;
}

.pa-part__stop + .pa-part__stop {
  border-top: 1px solid var(--pa-line-soft);
  padding-top: 6px;
  margin-top: 3px;
}

.pa-part__stop:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: -10px;
  width: 2px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-red-soft);
}

.pa-part__stop-marker {
  grid-area: marker;
  width: 10px;
  height: 10px;
  border: 2px solid var(--pa-red);
  border-radius: 50%;
  background: var(--pa-surface);
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 1;
}

.pa-part__stop--to .pa-part__stop-marker {
  background: var(--pa-red);
}

.pa-part__stop--via .pa-part__stop-marker {
  width: 8px;
  height: 8px;
  border-color: var(--pa-red-line);
}

.pa-part__stop-time {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.pa-part__stop-time--compact .pa-part__clock {
  color: var(--pa-navy);
}

.pa-part__via-times {
  grid-area: times;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 9px;
  align-self: baseline;
}

.pa-part__stop-label {
  grid-area: label;
  white-space: nowrap;
}

.pa-part__name {
  grid-area: name;
  min-width: 0;
  color: var(--pa-ink);
  font-size: var(--pa-fs-base);
  font-weight: var(--pa-fw-bold);
  overflow-wrap: anywhere;
}

.pa-part__clock {
  grid-area: clock;
  color: var(--pa-red-2);
  font-size: var(--pa-fs-base);
  font-weight: var(--pa-fw-heavy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pa-rows {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.pa-rows--compact {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.pa-row {
  min-width: 0;
  border-left: 2px solid var(--pa-red);
  padding-left: 8px;
}

.pa-row dt {
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  margin: 0 0 2px;
}

.pa-row dd {
  margin: 0;
  color: var(--pa-ink);
  font-size: var(--pa-fs-base);
  font-weight: var(--pa-fw-medium);
  overflow-wrap: anywhere;
}

.pa-block[data-variant="departures"] .pa-items,
.pa-block[data-variant="arrivals"] .pa-items {
  gap: 0;
}

.pa-block[data-variant="departures"] .pa-item,
.pa-block[data-variant="arrivals"] .pa-item {
  border: 0;
  border-bottom: 1px solid var(--pa-line);
  border-radius: 0;
  background: transparent;
  padding: 11px 0;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__main,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(76px, max-content);
  column-gap: 14px;
  row-gap: 2px;
  align-items: baseline;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__line,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__line {
  display: contents;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__title,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__title {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--pa-fs-lg);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  color: var(--pa-red-2);
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__subtitle,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__subtitle {
  grid-column: 2;
  grid-row: 1;
  color: var(--pa-ink);
  font-size: var(--pa-fs-lg);
  font-weight: var(--pa-fw-bold);
  min-width: 0;
  overflow-wrap: anywhere;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__train,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__train {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 8px;
  min-width: 0;
  max-width: 45vw; /* never cut: wraps past 45vw (ask-components.css) */
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__inline-meta,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__inline-meta {
  min-width: 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-medium);
  overflow-wrap: anywhere;
  text-align: right;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__meta,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__meta {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  text-align: right;
  font-size: var(--pa-fs-sm);
}

.pa-item--date_separator {
  border-bottom: 0;
  padding: 14px 0 6px;
}

.pa-item--date_separator .pa-item__main {
  display: block;
}

.pa-item--date_separator .pa-item__title {
  display: block;
}

@media (max-width: 640px) {
  .pa-shell {
    gap: 16px;
  }
  .pa-search {
    --pa-search-gap: 8px;
  }
  .pa-search__input {
    padding: 0 16px;
  }
  .pa-result,
  .pa-item {
    padding: 10px;
  }
  .pa-part {
    gap: 7px;
  }
  .pa-part__card {
    gap: 6px;
    padding: 10px;
  }
  .pa-part__ride {
    padding: 0;
  }
  .pa-part__stop {
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas:
      "marker label"
      "marker clock"
      "marker name";
    align-items: start;
    column-gap: 7px;
    row-gap: 1px;
    padding: 4px 0;
  }
  .pa-part__stop--via {
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas:
      "marker times"
      "marker name";
  }
  .pa-part__stop--from,
  .pa-part__stop--to {
    padding-right: 0;
  }
  .pa-part__stop-marker {
    align-self: start;
    margin-top: 5px;
  }
  .pa-part__stop:not(:last-child)::after {
    left: 7px;
    top: 19px;
    bottom: -12px;
  }
  .pa-part__stop-label {
    line-height: 1.1;
  }
  .pa-part__clock {
    font-size: var(--pa-fs-lg);
    line-height: 1.2;
  }
  .pa-part__name {
    font-size: var(--pa-fs-base);
    line-height: 1.25;
  }
  .pa-part__extra {
    top: 7px;
    right: 8px;
  }
  .pa-part__carrier {
    position: static;
    justify-self: end;
    max-width: 100%;
    margin-top: 2px;
  }
  .pa-part__via-times {
    gap: 1px 8px;
  }
  /* The short transfer label stays beside its slider; the sleep label needs its own row. */
  .pa-transfer--sleep {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  /* "Bez spánku" on its own row; the two sleep options side by side. */
  .pa-route-mode--overnight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--pa-radius-sheet);
  }
  .pa-route-mode--overnight > .pa-route-mode__option:first-of-type {
    grid-column: 1 / -1;
  }
  .pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__main,
  .pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__main {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 10px;
  }
  .pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__train,
  .pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__train {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    justify-content: flex-start;
    max-width: 100%;
  }
  .pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__meta,
  .pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__meta {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }
}

/* Shared ask components (UX2): one look per component, loaded right after
   ask.css so feature sheets can add placement only. New markup uses the
   .pa-btn / .pa-chip / .pa-eyebrow classes; existing selectors join the
   shared rules until their owners switch the markup. */

/* One secondary button: .pa-btn for new markup; the existing paging,
   record and departure-time buttons share it by selector. */
.pa-btn,
.pa-action,
.pa-item__record-button,
.pa-when__button {
  min-height: var(--pa-control);
  padding: 0 var(--pa-sp-7);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-ink);
  font: inherit;
  font-size: var(--pa-fs-md);
  font-weight: var(--pa-fw-bold);
  line-height: 1.2;
  cursor: pointer;
}

.pa-btn:hover,
.pa-action:hover,
.pa-item__record-button:hover,
.pa-when__button:hover {
  border-color: var(--pa-navy);
}

.pa-btn:focus-visible,
.pa-action:focus-visible,
.pa-item__record-button:focus-visible,
.pa-when__button:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}

/* One train badge (S9): solid navy by default; --outline on boards; --run
   is the button that opens the run, red-2 on hover with a 44px hit area.
   The leg and run-dialog badges share it by selector. */
.pa-badge,
.pa-part__badge,
.pa-run__badge {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--pa-radius-pill);
  padding: 3px 9px;
  background: var(--pa-navy);
  color: var(--pa-on-dark);
  font-family: inherit;
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-heavy);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pa-run__badge {
  margin-left: var(--pa-sp-2);
}

.pa-run__badge:empty {
  display: none;
}

.pa-badge--outline,
.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-badge,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-badge {
  border: 1px solid var(--pa-line);
  background: transparent;
  color: var(--pa-ink);
}

.pa-badge--run,
.pa-part__badge--run {
  position: relative;
  cursor: pointer;
}

.pa-badge--run::before,
.pa-part__badge--run::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.pa-badge--run:hover,
.pa-part__badge--run:hover {
  background: var(--pa-red-2);
  color: var(--pa-on-dark);
}

.pa-badge--run:focus-visible,
.pa-part__badge--run:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}

/* One eyebrow: every small uppercase label is red-2 caps (owner 10-18):
   stop labels, date separators, menu headings and hero tags. */
.pa-eyebrow,
.pa-part__stop-label,
.pa-item--date_separator .pa-item__title,
.pa-menu__heading,
.pa-menu__lead {
  color: var(--pa-eyebrow);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-heavy);
  letter-spacing: var(--pa-caps-tracking);
  text-transform: uppercase;
}

/* One price: base size, bold, tabular, ink. */
.pa-price,
.pa-menu__price {
  color: var(--pa-ink);
  font-size: var(--pa-fs-base);
  font-weight: var(--pa-fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* One segmented switch (route mode look): soft track, the selected
   segment a raised surface. */
.pa-segmented,
.pa-menu__currencies {
  display: inline-flex;
  gap: var(--pa-sp-1);
  border-radius: var(--pa-radius-pill);
  padding: 3px;
  background: var(--pa-soft);
}

.pa-segmented > button,
.pa-menu__currency {
  min-width: 48px;
  min-height: var(--pa-control-sm);
  border: 0;
  border-radius: var(--pa-radius-pill);
  padding: 0 var(--pa-sp-5);
  background: transparent;
  color: var(--pa-muted);
  font: inherit;
  font-size: var(--pa-fs-md);
  font-weight: var(--pa-fw-bold);
  cursor: pointer;
}

.pa-segmented > button[aria-pressed="true"],
.pa-menu__currency[aria-pressed="true"] {
  background: var(--pa-surface);
  color: var(--pa-ink);
  box-shadow: var(--pa-shadow-2);
}

.pa-segmented > button:focus-visible,
.pa-menu__currency:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}

/* One chip (S4): small state and info labels, neutral by default; tones
   take bg/line/ink from the status tokens. Owner 10-18: a normal transfer
   is neutral, a long wait is warn. Flags, the day chip, the transfer, the
   country code and the menu chips share it by selector. */
.pa-chip,
.pa-flag,
.pa-part__transfer,
.pa-suggest__cc,
.pa-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-sp-3);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  padding: 2px var(--pa-sp-4);
  background: var(--pa-surface);
  color: var(--pa-ink);
  font-family: inherit;
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.pa-chip--warn,
.pa-flag,
.pa-part__transfer--long {
  border-color: var(--pa-warn-line);
  background: var(--pa-warn-bg);
  color: var(--pa-warn);
}

.pa-chip--info {
  border-color: var(--pa-info-line);
  background: var(--pa-info-bg);
  color: var(--pa-info);
}

.pa-chip--danger {
  border-color: var(--pa-danger-line);
  background: var(--pa-danger-bg);
  color: var(--pa-danger);
}

.pa-chip--neutral,
.pa-flag.pa-item__day {
  border-color: var(--pa-line);
  background: var(--pa-surface);
  color: var(--pa-ink);
}

.pa-chip--solid,
.pa-suggest__cc {
  border-color: var(--pa-navy);
  background: var(--pa-navy);
  color: var(--pa-on-dark);
}

.pa-chip--brand {
  border-color: var(--pa-red-2);
  background: var(--pa-red-2);
  color: var(--pa-on-dark);
}

/* Action chip: a chip that is a button (menu nav and filter chips);
   pressed = solid navy. */
.pa-chip--action,
.pa-menu__chip {
  min-height: var(--pa-control-sm);
  padding: 0 var(--pa-sp-6);
  font-size: var(--pa-fs-md);
  cursor: pointer;
}

.pa-chip--action[aria-pressed="true"],
.pa-menu__chip[aria-pressed="true"] {
  border-color: var(--pa-navy);
  background: var(--pa-navy);
  color: var(--pa-on-dark);
}

.pa-chip--action:focus-visible,
.pa-menu__chip:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}

@media (hover: hover) {
  .pa-chip--action:hover,
  .pa-menu__chip:hover {
    border-color: var(--pa-navy);
  }
}

/* One alert (S8): a real problem (delay, cancellation, disruption, failed
   answer) is --pa-danger plus a "!" disc, never colour alone. Clocks stay
   brand red. */
.pa-alert,
.pa-run__est--late,
.pa-item--not_running .pa-item__meta {
  color: var(--pa-danger);
  font-weight: var(--pa-fw-bold);
}

.pa-alert::before,
.pa-run__est--late::before,
.pa-item--not_running .pa-item__meta::before,
.pa-notice--operational::before,
.pa-result--error .pa-result__title::before,
.pa-result--invalid .pa-result__title::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: var(--pa-sp-2);
  border-radius: 50%;
  background: var(--pa-danger);
  color: var(--pa-on-dark);
  font-size: var(--pa-fs-xs);
  font-weight: var(--pa-fw-heavy);
  line-height: 1;
  vertical-align: text-bottom;
}

/* Commercial train name (TrainNameChip) right after a number badge: its own
   pill, never the badge look: dark ink on white with a red outline (owner
   2026-11-07: red text on the soft red fill read poorly). Never cut (owner
   2026-11-08): no ellipsis or width clip at any width; the badge group
   wraps first (the chip drops below its badge), then a long name wraps
   inside its pill. Desktop journey legs keep the top-right overlay inside
   the 290px the boarding stop reserves for it.
   Phones: a named leg's badge row leaves its top-right overlay and becomes
   the card's first row, so the departure label, clock and name never sit
   under it. */
.pa-train-name { display: inline-block; flex: 0 1 auto; align-self: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; vertical-align: middle; border: 1px solid var(--pa-red); border-radius: var(--pa-radius-pill); padding: 2px 8px; background: var(--pa-surface); color: var(--pa-ink); font-size: var(--pa-fs-sm); font-weight: var(--pa-fw-bold); line-height: 1.2; }
.pa-item__train, .pa-part__extra { flex-wrap: wrap; row-gap: 4px; }
.pa-part__extra { max-width: calc(100% - 16px); justify-content: flex-end; }
@media (width > 640px) { .pa-part__card:has(.pa-train-name):not(:has(.pa-part__delay)) .pa-part__stop--from { padding-right: 290px; } .pa-part__card:has(.pa-train-name):not(:has(.pa-part__delay)) .pa-part__extra { max-width: 282px; } }
@media (max-width: 640px) { .pa-part__card:has(.pa-train-name) .pa-part__extra { position: static; justify-self: end; max-width: 100%; } }
/* A delay chip takes the badge row for itself: over the boarding station it would hide the name. */
.pa-part__card:has(.pa-part__delay) .pa-part__extra { position: static; justify-self: end; max-width: 100%; }
.pa-part__delay { flex: none; }

/* Service state bricks: not-running items, operator notices, result
   states. Loaded after ask-components.css (assets.go), which owns the
   flag chip (.pa-chip) and the alert disc (.pa-alert). */
/* Not-running items stay listed, struck through. */
.pa-item--not_running .pa-item__title,
.pa-item--not_running .pa-item__subtitle,
.pa-item--not_running .pa-badge {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.72;
}

.pa-flags {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pa-notices {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.pa-notice {
  border-left: 3px solid var(--pa-line);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-soft);
  color: var(--pa-ink);
  padding: 6px 8px;
  font-size: var(--pa-fs-md);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* A disruption is a real problem: danger tone plus the alert disc. */
.pa-notice--operational {
  border-left-color: var(--pa-danger);
  background: var(--pa-danger-bg);
}

.pa-notice--informative {
  border-left-color: var(--pa-info-line);
  background: var(--pa-info-bg);
}

.pa-notice__title { font-weight: var(--pa-fw-bold); }
.pa-notice__mark { color: var(--pa-muted); font-size: var(--pa-fs-sm); }

.pa-notice__source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  vertical-align: middle;
  color: var(--pa-info);
  border-radius: var(--pa-radius-xs);
}

.pa-notice__source:focus-visible {
  outline: var(--pa-focus);
  outline-offset: 1px;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) :is(.pa-flags, .pa-lines, .pa-notices),
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) :is(.pa-flags, .pa-lines, .pa-notices) {
  grid-column: 1 / -1;
}

/* Result states (S5): the header of an empty or failed answer reads as a
   notice (no_results info; error/invalid danger with the alert disc), the
   progress card is a quiet soft panel, coverage gaps are warn (owner rule:
   tell users about data gaps). */
.pa-result--no_results .pa-result__header,
.pa-result--error .pa-result__header,
.pa-result--invalid .pa-result__header {
  border-left: 3px solid var(--pa-info-line);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-info-bg);
  padding: var(--pa-sp-5) var(--pa-sp-6);
}

.pa-result--error,
.pa-result--invalid {
  border-color: var(--pa-danger-line);
}

.pa-result--error .pa-result__header,
.pa-result--invalid .pa-result__header {
  border-left-color: var(--pa-danger);
  background: var(--pa-danger-bg);
}

.pa-result--progress {
  background: var(--pa-soft);
  box-shadow: none;
  color: var(--pa-muted);
}

.pa-notices--coverage .pa-notice {
  border-left-color: var(--pa-warn-line);
  background: var(--pa-warn-bg);
  color: var(--pa-warn);
}

/* Leg controls: inline intermediate stops and leg shift (the run dialog is
   ask-run.css). */

/* Intermediate stops sit between the departure and arrival rows of the one
   ride and appear only while the leg is expanded. */
.pa-part__ride > .pa-part__stop--via {
  display: none;
}

.pa-part__details[open] .pa-part__ride > .pa-part__stop--via {
  display: grid;
}

/* Through coaches (Part.Through): the coupled train is a secondary outline
   badge beside the leg badge; the coach run before boarding and after
   alighting is muted (marker, rail, clock and name), headed by the one red
   eyebrow, while the departure and arrival rows keep their highlight. */
.pa-part__through {
  font-weight: var(--pa-fw-bold);
}

.pa-part__stop--coach-label .pa-part__stop-label {
  grid-column: 2 / -1;
  grid-row: 1;
}

.pa-part__stop--coach .pa-part__clock,
.pa-part__stop--coach .pa-part__stop-time--compact .pa-part__clock,
.pa-part__stop--coach .pa-part__name {
  color: var(--pa-muted);
  font-weight: var(--pa-fw-bold);
}

.pa-part__stop--coach .pa-part__stop-marker {
  border-color: var(--pa-line);
}

.pa-part__stop--coach::after,
.pa-part__stop--coach-label::after {
  background: var(--pa-line);
}

/* A time zone change between two stops (zone_change.go): one muted line in
   the name columns, on the ride's rail. */
.pa-part__stop--zone .pa-part__zone {
  grid-column: 2 / -1;
  grid-row: 1;
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-bold);
}

/* The operator line is its own card row under the ride at every width, so a
   long operator list wraps at its spaces (" / ") and never overlaps the
   arrival row. */
.pa-part__card > .pa-part__carrier {
  position: static;
  justify-self: end;
  max-width: 100%;
  overflow-wrap: break-word;
}

.pa-part__ride > .pa-part__stop--to {
  padding-right: 0;
}

/* Desktop/tablet: every stop row shares the ride's one column template
   (subgrid), so single times and arrival-departure ranges sit in the
   endpoint clock column and every station name starts at the same x as the
   departure and arrival names. Mobile keeps the stacked rows of ask.css. */
@media (width > 640px) {
  .pa-part__ride {
    grid-template-columns: 18px max-content minmax(84px, max-content) minmax(0, 1fr);
    column-gap: 7px;
  }

  .pa-part__ride > .pa-part__stop {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .pa-part__ride > .pa-part__stop--via {
    grid-template-areas: "marker . times name";
  }

  .pa-part__card:has(.pa-part__through) .pa-part__stop--from {
    padding-right: 240px;
  }
}

/* On-board facility chips (part_card, FacilityChips): an in-flow row under
   the ride; every chip is a button with icons and a visible text. A menu
   chip (navy outline) opens the leg menu, the others the info tip. */
.pa-part__extra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pa-part__facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.pa-part__card:has(.pa-part__facilities) .pa-part__carrier {
  position: static;
  justify-self: end;
  max-width: 100%;
}

.pa-part__facility {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  max-width: 100%;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  padding: 3px 10px 3px 8px;
  background: var(--pa-surface);
  color: var(--pa-navy);
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--pa-fw-bold);
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* A facility without content (sleeper, couchette) is a plain label: no
   border, no pointer, its name in the native title. */
.pa-part__facility--plain {
  border-color: transparent;
  padding-left: 2px;
  background: transparent;
  color: var(--pa-ink-2);
  cursor: default;
}

/* The connection map chip ends the card header line (item.tmpl): top of
   the card, at its right edge; it never shrinks under a long title. */
.pa-item__line > .pa-part__facility--map {
  flex: none;
  margin-left: auto;
}

/* Menu and map chips: a raised disc (surface, line border, shadow-2). */
.pa-part__facility--menu,
.pa-part__facility--map {
  border-color: var(--pa-line);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-2);
}

.pa-part__facility-icons {
  display: inline-flex;
  gap: 3px;
}

/* A long label (a menu name) wraps over as many lines as it needs; never
   clamped or ellipsized (owner 2026-11-08). */
.pa-part__facility-text {
  min-width: 0;
  overflow-wrap: break-word;
  text-align: left;
}

.pa-part__facility:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}

@media (hover: hover) {
  .pa-part__facility:not(.pa-part__facility--plain):hover {
    background: var(--pa-soft);
  }
}

@media (pointer: coarse) {
  .pa-part__facility::after {
    content: "";
    position: absolute;
    inset: -8px 0;
  }
}

.pa-part[data-portal-ask-shift-leg] {
  touch-action: pan-y;
}

.pa-part__shift {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: -2px;
}

/* The card record action shares the last leg's arrow row, left of the
   arrows; a longer swapped footer (sign-in hint) wraps beside them. */
.pa-part__shift > .pa-item__record {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0 2px 0 0;
}

/* Leg row controls (UX2 S10): the record button is the shared .pa-btn at
   the one control height (as on Moje cesty); the ‹ › arrows are 32px discs
   with a 44px hit area from ::before. */
.pa-part__shift-button {
  position: relative;
  flex: none;
  height: var(--pa-control-sm);
  min-height: var(--pa-control-sm);
  display: inline-grid;
  place-items: center;
  line-height: 1;
  vertical-align: middle;
}

.pa-part__shift-button::before {
  content: "";
  position: absolute;
  inset: calc((var(--pa-control-sm) - var(--pa-hit)) / 2) -2px;
}

.pa-part__shift-button {
  width: var(--pa-control-sm);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  padding: 0;
  background: var(--pa-surface);
  color: var(--pa-ink);
  font: inherit;
  font-weight: var(--pa-fw-bold);
  cursor: pointer;
}

.pa-part__shift-button > span {
  font-size: 22px;
}

.pa-part__shift .pa-item__record-button {
  flex: none;
  padding: 0 var(--pa-sp-6);
  white-space: nowrap;
}

.pa-part__shift-button:hover {
  border-color: var(--pa-navy);
}

.pa-part__shift-button:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}

.pa-item[aria-busy="true"] .pa-parts {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.pa-item[aria-busy="true"] .pa-part__shift-button {
  pointer-events: none;
}

.pa-item[data-portal-ask-shift-legs] {
  overflow-x: clip;
  touch-action: pan-y pinch-zoom;
}

/* Swipe motion: drag follows the finger, settle slides out or back. */
.pa-item[data-portal-ask-shift-legs] .pa-swipe--drag {
  transition: none;
  will-change: transform;
}

.pa-item[data-portal-ask-shift-legs] .pa-swipe--settle {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.pa-item[data-portal-ask-shift-legs] .pa-swipe--out {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pa-item[data-portal-ask-shift-legs] .pa-swipe--settle {
    transition: none;
  }
}

/* A shift limit (no earlier/later ride) is a muted note; a failure adds the
   shared .pa-alert (danger colour plus "!" disc). */
.pa-part__note {
  margin: 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-bold);
  text-align: right;
}

/* Platform chip (platform_chip.go PlatformChip): a small pill after a leg
   stop name, inside .pa-part__name so the stop grid keeps its areas. Its
   parts are nowrap spans in a wrapping flex row, so a narrow cell moves the
   planned marker or the struck old code to a second line instead of cutting
   or overlapping text. Planned = muted with the "plán." marker, live = ink,
   changed = the system warning chip tokens (no own colours). */
.pa-platform {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  max-width: 100%;
  margin-left: 2px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  padding: 0 6px;
  color: var(--pa-muted);
  font-size: var(--pa-fs-xs);
  font-weight: var(--pa-fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  vertical-align: middle;
}

.pa-platform > * {
  white-space: nowrap;
}

.pa-platform__state {
  font-weight: var(--pa-fw-regular);
  font-style: italic;
}

.pa-platform--live {
  color: var(--pa-ink);
}

.pa-platform--changed {
  border-color: var(--pa-warn-line);
  background: var(--pa-warn-bg);
  color: var(--pa-warn);
}

.pa-platform--changed .pa-platform__code {
  font-weight: var(--pa-fw-bold);
}

.pa-platform__old {
  opacity: 0.8;
}

/* Board rows: the chip sits in the train cell (.pa-item__train, an
   inline-flex row with an 8px gap) right after the badge group, side by side
   with the time, destination and train items (owner 2026-11-13: inside the
   72/58 px time column it wrapped onto two or three lines and pushed the
   neighbouring cells down). The cell's flex wrap moves it onto its own line
   only when the row has no room left; its parts wrap only when even that
   line is narrower than the chip. */
.pa-item__train > .pa-platform {
  margin-left: 0;
}

/* Board row facility chips (itemView.FacilityChips): one wrapping row under
   the destination and train columns. */
.pa-item__facilities {
  margin-top: 4px;
}

.pa-block[data-variant="departures"] .pa-item:not(.pa-item--date_separator) .pa-item__facilities,
.pa-block[data-variant="arrivals"] .pa-item:not(.pa-item--date_separator) .pa-item__facilities {
  grid-column: 2 / -1;
}

/* Train-run dialog (RunPopup, run_popup.go): the whole ride of one train,
   opened by any [data-portal-ask-run] button. Appended to ask.css after
   ask-legs.css and served by RunPopupStyles() to pages outside the ask page
   (journey log); the token fallbacks equal the ask.css defaults so the dialog
   looks the same where ask.css is not loaded. */

.pa-run {
  overscroll-behavior: contain;
  width: min(440px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  border: 0;
  border-radius: var(--pa-radius);
  padding: 0;
  background: var(--pa-surface);
  color: var(--pa-ink);
  box-shadow: var(--pa-shadow-overlay);
}

.pa-run[open] {
  display: flex;
  flex-direction: column;
}

.pa-run::backdrop {
  background: var(--pa-overlay);
}

.pa-run__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--pa-line);
  /* the close button keeps the body's 16px side inset, never the edge */
  padding: var(--pa-sp-6) var(--pa-sp-7);
}

.pa-run__header form {
  margin: 0;
}

.pa-run__title {
  margin: 0;
  color: var(--pa-navy);
  font-size: var(--pa-fs-lg);
  line-height: 1.25;
}

/* Icon button: the secondary button look (ask.css .pa-btn), repeated here
   because RunPopupStyles() serves this sheet without ask.css. */
.pa-run__close {
  width: var(--pa-control);
  height: var(--pa-control);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-ink);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pa-run__close:hover { border-color: var(--pa-navy); }
.pa-run__close:focus-visible { outline: var(--pa-focus); outline-offset: var(--pa-focus-offset); }

.pa-run__body {
  --pa-run-fade-top: 0px;
  --pa-run-fade-bottom: 0px;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pa-run-fade-top), #000 calc(100% - var(--pa-run-fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pa-run-fade-top), #000 calc(100% - var(--pa-run-fade-bottom)), transparent 100%);
}

/* runFade (ask-legs.txt) marks where the list continues; 16 px = runFadeSize. */
.pa-run__body--more-above {
  --pa-run-fade-top: 16px;
}

.pa-run__body--more-below {
  --pa-run-fade-bottom: 16px;
}

/* While the run dialog is open the page is pinned (lockPageScroll). */
html.pa-run-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.pa-run__body[aria-busy="true"] {
  background: linear-gradient(90deg, transparent, var(--pa-tint), transparent) 0 0 / 200% 100%;
}

.pa-run__stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 16px max-content minmax(0, 1fr);
}

/* Rows share the list's columns (subgrid) so every station name starts at
   the same x, also after a "08:01-08:04" range. */
.pa-run__stop {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  position: relative;
  border-top: 1px solid var(--pa-line-soft);
}

.pa-run__stop:first-child {
  border-top: 0;
}

.pa-run__marker {
  width: 8px;
  height: 8px;
  border: 2px solid var(--pa-red);
  border-radius: 50%;
  background: var(--pa-surface);
  justify-self: center;
  align-self: center;
}

.pa-run__clock {
  color: var(--pa-red-2);
  font-size: var(--pa-fs-base);
  font-weight: var(--pa-fw-heavy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Live estimate after the plan clock (data-portal-ask-run-delay). */
.pa-run__est {
  color: var(--pa-navy);
}

.pa-run__name {
  min-width: 0;
  font-size: var(--pa-fs-base);
  font-weight: var(--pa-fw-bold);
  overflow-wrap: anywhere;
}

.pa-run__stop--outside {
  color: var(--pa-muted);
}

.pa-run__stop--outside .pa-run__clock,
.pa-run__stop--outside .pa-run__name {
  color: var(--pa-muted);
  font-weight: 500;
}

.pa-run__stop--outside .pa-run__marker {
  border-color: var(--pa-line);
}

/* A time zone change between two run stops (zone_change.go). */
.pa-run__zone {
  grid-column: 2 / -1;
  padding: 4px 0;
  border-top: 1px solid var(--pa-line-soft);
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-bold);
}

.pa-run__stop--part .pa-run__marker {
  background: var(--pa-red);
}

.pa-run__note {
  margin: 12px 0 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-base);
}

@media (max-width: 640px) {
  .pa-run {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    margin: auto 0 0;
    border-radius: var(--pa-radius-sheet) var(--pa-radius-sheet) 0 0;
  }
}

/* Through coaches (PartRun.Through): the coupled train badge above the
   stops; its calls outside the ride are the muted --outside rows. */
.pa-run__through {
  margin: 0 0 var(--pa-sp-2);
}

/* Leg menu popup parts (part_menu.tmpl): rows, prices, currency switch,
   bar and chips; sizes and panes in ask-menu-layout.css, cards, badges and
   tips in ask-menu-cards.css. Appended to ask.css right after ask-run.css.
   Calm reading list (owner 10-18): item name navy semibold, a muted
   description, prices right-aligned and tabular, thin dividers, no boxes. */
.pa-menu__section + .pa-menu__section {
  margin-top: var(--pa-sp-8);
}
/* MenuClass: one heading per fare class block (PartMenuSection.Class). */
.pa-menu__class {
  margin: var(--pa-sp-8) 0 0;
  padding-bottom: var(--pa-sp-2);
  border-bottom: 1px solid var(--pa-line);
  font-size: var(--pa-fs-lg);
  font-weight: var(--pa-fw-bold);
}
.pa-menu__class:first-child {
  margin-top: 0;
}
/* Headings use the shared eyebrow (ask-components.css). */
.pa-menu__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: var(--pa-sp-7) 0 var(--pa-sp-2);
}
/* MenuNoAllergens, once per section: a quiet note, not a caps label. */
.pa-menu__heading-note {
  color: var(--pa-muted-2);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-regular);
  letter-spacing: 0;
  text-transform: none;
}
/* A choice group's shared offer badge: the row badge, not a caps label. */
.pa-menu__heading .pa-menu__offer {
  align-self: center;
  letter-spacing: 0;
  text-transform: none;
}
.pa-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Name | price rows; at 320 px long names wrap, the price keeps its width. */
.pa-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--pa-sp-7);
  align-items: baseline;
  border-bottom: 1px solid var(--pa-line-soft);
  padding: var(--pa-sp-6) 0;
}
.pa-menu__item:last-child {
  border-bottom: 0;
}
.pa-menu__name {
  overflow-wrap: anywhere;
  color: var(--pa-navy);
  font-size: 15px;
  font-weight: var(--pa-fw-medium);
  line-height: 1.3;
}
.pa-menu__item .pa-menu__price {
  font-size: 15px;
}
/* Under the name: description (own line), size, allergen numbers, the
   offer badge; all muted and small. */
.pa-menu__sub {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 3px;
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
  line-height: 1.4;
}
.pa-menu__desc {
  flex: 1 0 100%;
  color: var(--pa-muted);
  font-weight: var(--pa-fw-regular);
}
.pa-menu__size {
  white-space: nowrap;
  color: var(--pa-muted);
}
.pa-menu__source {
  margin: var(--pa-sp-7) 0 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
}
.pa-menu__source a {
  color: var(--pa-navy);
  font-weight: var(--pa-fw-bold);
}
.pa-menu__source svg {
  margin-left: 3px;
  vertical-align: -1px;
}
/* Prices per currency (PartMenuPrice): one amount per currency, only the
   chosen one shown; a variant label ("0,5 l") precedes its amount. */
.pa-menu__amount {
  display: block;
  text-align: right;
}
.pa-menu__amount[hidden] {
  display: none;
}
.pa-menu__variant {
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-regular);
}
/* A card price (PartMenuPrice.Variant card): its own muted line "s kartou
   4,10 €" under the main amount, never a second unexplained column. */
.pa-menu__amount--secondary {
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-medium);
}
/* A timed price outside the ride window (priceOutside): dimmed and
   titled Labels.MenuOutsideRide. */
.pa-menu__amount--outside {
  color: var(--pa-muted-2);
  font-weight: var(--pa-fw-medium);
}
/* Currency switch: the shared segmented look (ask-components.css),
   pushed to the end of the bar. */
.pa-menu__currencies {
  margin-left: auto;
}
/* Bar: menu name, search, currency switch. */
.pa-menu__title {
  margin: 0;
  flex: 1 1 160px;
  min-width: 0;
  color: var(--pa-navy);
  font-size: var(--pa-fs-lg);
  font-weight: var(--pa-fw-heavy);
}
.pa-menu__search {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--pa-control);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-sm);
  padding: 6px 12px;
  background: var(--pa-bg);
  color: var(--pa-ink);
  font: inherit;
  font-size: var(--pa-fs-lg);
}
.pa-menu__search:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
  background: var(--pa-surface);
}
/* Chips: jump to a section, the promo filter (the action .pa-chip in
   ask-components.css); the count is muted. */
.pa-menu__chip {
  flex: none;
}
.pa-menu__chip--sub {
  font-weight: var(--pa-fw-regular);
}
.pa-menu__count {
  color: inherit;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  font-weight: var(--pa-fw-medium);
}
.pa-menu__nomatch,
.pa-menu__disclaimer {
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
}
.pa-menu__typical {
  margin: 0;
  padding: var(--pa-sp-4) 16px;
}
@media (pointer: coarse) {
  .pa-menu__chip,
  .pa-menu__currency,
  .pa-menu__search {
    min-height: var(--pa-hit);
  }
}
/* Foot: allergen legend and footnotes as plain numbered lines. */
.pa-menu__legend,
.pa-menu__notes {
  list-style: none;
  display: grid;
  gap: 4px 16px;
  margin: 0 0 var(--pa-sp-4);
  padding: 0;
  color: var(--pa-ink-2);
  font-size: var(--pa-fs-md);
}
.pa-menu__legend {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.pa-menu__legend-n,
.pa-menu__note-mark {
  display: inline-block;
  min-width: 18px;
  color: var(--pa-navy);
  font-weight: var(--pa-fw-bold);
  font-variant-numeric: tabular-nums;
}
.pa-menu__note-context {
  font-weight: var(--pa-fw-medium);
}

/* Leg menu layout (part_menu.tmpl in the run dialog, .pa-run--menu). The
   dialog size and body rules sit on .pa-run--wide, the one size modifier
   the leg menu and the connection map popup (ask-map.css) share.
   Phone (<=640px): full screen, bar and chip row stay on top, tips are
   bottom sheets (.pa-tip--sheet), Odporúčame is a swipe strip, Ponuky one
   card per row. Tablet (641-1023px): min(820px, 94vw) x 90vh, chip row on
   top, Odporúčame up to 3 in a row, Ponuky two columns. Small desktop
   (1024-1199px): 94vw with a 180px nav column. Desktop (>=1200px):
   min(1320px, 94vw) x 90vh. From 1024px one reading column beside the nav:
   Odporúčame, Ponuky, the sections, then the foot; never a side column.
   Also the offer list inside the tip (.pa-tip__offers). Appended to ask.css
   after ask-menu.css. */
.pa-run.pa-run--wide .pa-run__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Bar and chips stay put; only the content scrolls. */
.pa-menu:not(.pa-menu--empty) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pa-menu__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pa-bg);
}
.pa-run--menu .pa-menu--empty {
  padding: 8px 16px 16px;
}
.pa-menu [hidden] {
  display: none !important;
}
.pa-menu__bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  border-bottom: 1px solid var(--pa-line);
  padding: 10px 16px;
  background: var(--pa-surface);
}
.pa-menu__nav {
  flex: none;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pa-line);
  padding: 8px 16px;
  background: var(--pa-surface);
}
.pa-menu__nav::-webkit-scrollbar {
  display: none;
}
.pa-menu__hero,
.pa-menu__combos,
.pa-menu__main,
.pa-menu__foot {
  padding: 4px 16px 12px;
}
/* The item list reads as one white sheet on the page background. */
.pa-menu__main {
  margin: 8px 0 0;
  border-top: 1px solid var(--pa-line);
  border-bottom: 1px solid var(--pa-line);
  background: var(--pa-surface);
}
.pa-menu__foot {
  padding-bottom: 20px;
}
/* Odporúčame: at most 3 summary cards, a swipe strip on phones. */
.pa-menu__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px 4px;
  scroll-padding: 0 16px;
}
.pa-menu__strip::-webkit-scrollbar {
  display: none;
}
.pa-menu__strip > * {
  scroll-snap-align: start;
}
.pa-menu__strip:has(> :only-child) {
  grid-auto-columns: 100%;
}
.pa-menu__card--hero {
  gap: 6px;
  padding: 12px 14px;
}
/* Ponuky: one tidy card per offer. */
.pa-menu__cards {
  display: grid;
  gap: 10px;
}
/* Offer list in the badge's tip: each offer a goto row, price right. */
.pa-tip__body {
  margin-top: 2px;
}
.pa-tip__offers {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pa-tip__offers li + li {
  border-top: 1px solid var(--pa-line-soft);
}
.pa-tip__offer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  border: 0;
  padding: 7px 0;
  background: none;
  color: var(--pa-navy);
  font: inherit;
  text-align: left;
}
button.pa-tip__offer {
  cursor: pointer;
}
button.pa-tip__offer .pa-tip__offer-name {
  text-decoration: underline;
  text-decoration-color: var(--pa-line-strong);
  text-underline-offset: 3px;
}
.pa-tip__offer-name {
  font-weight: var(--pa-fw-medium);
}
.pa-tip__offer .pa-menu__price {
  color: var(--pa-red-2);
}
button.pa-tip__offer:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
}
@media (hover: hover) {
  button.pa-tip__offer:hover .pa-tip__offer-name {
    text-decoration-color: currentColor;
  }
}
@media (max-width: 640px) {
  .pa-run.pa-run--wide {
    /* 100% of the viewport without a classic scrollbar; 100vw would slide
       the right edge (close button) under it */
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .pa-menu__main {
    padding-bottom: 4px;
  }
  /* Phone bar: name and currency switch share the first row, the search
     takes the full second row. */
  .pa-menu__title {
    flex: 1 1 0;
  }
  .pa-menu__search {
    order: 1;
    flex: 1 1 100%;
  }
}
@media (min-width: 641px) {
  .pa-run.pa-run--wide {
    width: min(820px, 94vw);
    max-width: 94vw;
    height: 90vh;
    max-height: 90vh;
  }
  .pa-menu__strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .pa-menu__cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .pa-menu__main {
    margin: 8px 16px 0;
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
  }
}
@media (min-width: 1024px) {
  .pa-run.pa-run--wide {
    width: 94vw;
  }
  .pa-menu:not(.pa-menu--empty) {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "bar bar" "nav content";
  }
  .pa-menu__bar {
    grid-area: bar;
  }
  .pa-menu__nav {
    grid-area: nav;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--pa-line);
    padding: 12px;
  }
  /* The side column is narrow: a long section name wraps, never clips. */
  .pa-menu__nav .pa-menu__chip {
    justify-content: space-between;
    width: 100%;
    border-radius: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
  }
  .pa-menu__content {
    grid-area: content;
  }
  .pa-menu__hero,
  .pa-menu__combos,
  .pa-menu__foot {
    padding: 8px 24px 16px;
  }
  .pa-menu__main {
    margin: 8px 24px 0;
    padding: 4px 20px 12px;
  }
}
@media (min-width: 1200px) {
  .pa-run.pa-run--wide {
    width: min(1320px, 94vw);
  }
  .pa-menu:not(.pa-menu--empty) {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

/* Shared route map (pkg/ui/geomap, docs/architecture/GEOMAP.md). Theme via
   --ui-fg, --ui-muted, --ui-bg, --ui-line and --ui-accent (fallbacks: the
   product shell's --color-* tokens). */
.geomap__svg { display: block; width: 100%; height: auto; max-height: 70vh; background: var(--ui-bg, var(--color-surface, #ffffff)); border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 10px; }
.geomap__border { fill: none; stroke: var(--ui-muted, var(--color-text-muted, #5b6575)); stroke-width: 1; stroke-opacity: 0.5; stroke-linejoin: round; }
.geomap__leg { fill: none; stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-width: 3; stroke-opacity: 0.7; stroke-linejoin: round; stroke-linecap: round; }
.geomap__leg--gap { stroke: var(--ui-muted, var(--color-text-muted, #5b6575)); stroke-dasharray: 6 6; }
.geomap__leg--sel { stroke: #d9480f; stroke-width: 5; stroke-opacity: 1; }
.geomap__dot { fill: var(--ui-bg, var(--color-surface, #ffffff)); stroke: var(--ui-fg, var(--color-text, #1d2430)); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Station labels in SVG user units (the viewBox scales them; a static map
   without the script): larger on phones, a halo in the page background
   keeps them readable over legs. */
.geomap__label { font-size: 32px; fill: var(--ui-fg, var(--color-text, #1d2430)); paint-order: stroke; stroke: var(--ui-bg, var(--color-surface, #ffffff)); stroke-width: 6px; stroke-linejoin: round; }
@media (min-width: 600px) { .geomap__label { font-size: 22px; } }
/* Zoom and pan (geomap.js): the script sets the viewBox, --map-k =
   1/zoom (dots and labels scale about their stop and keep their screen
   size) and geomap--z<level>; a label shows from its data-z level up. */
.geomap__frame { position: relative; }
.geomap--live { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.geomap__dot, .geomap__label, .geomap__hit, .geomap__pin { transform: scale(var(--map-k, 1)); transform-origin: 0 0; }
/* Marker pins (Options.Markers): accent fill, a page-background ring;
   --k<Kind> modifiers are caller-chosen categories, --sel the selected pin. */
.geomap__pin { fill: var(--ui-accent, var(--color-primary, #0b5cad)); stroke: var(--ui-bg, var(--color-surface, #ffffff)); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.geomap__pin--k2 { fill: #2b8a3e; } .geomap__pin--k3 { fill: #862e9c; } .geomap__pin--k4 { fill: #c2410c; } .geomap__pin--k5 { fill: #0c8599; } .geomap__pin--k6 { fill: #5c4033; }
.geomap__pin--sel { fill: #d9480f; stroke: var(--ui-fg, var(--color-text, #1d2430)); stroke-width: 3; }
a:focus-visible > .geomap__pin, .geomap__pin:focus-visible { stroke: var(--ui-fg, var(--color-text, #1d2430)); stroke-width: 4; outline: none; }
.geomap__hit { fill: transparent; pointer-events: all; outline: none; }
.geomap__hit:focus-visible { stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-width: 3px; vector-effect: non-scaling-stroke; }
/* a focused or hovered station shows its name at every zoom level */
.geomap__hit:is(:focus, :hover) + .geomap__label { display: inline; visibility: visible; }
/* Live maps (geomap.js): a label keeps the server's 32-unit geometry and
   --map-l scales it to 12 CSS px at every zoom and width (halo 2.25 px);
   the label pass hides one that overlaps a label placed before it. */
.geomap--live .geomap__label { font-size: 32px; transform: scale(var(--map-l, var(--map-k, 1))); }
.geomap__label--off { visibility: hidden; }
.geomap__label:not([data-z="1"]) { display: none; }
.geomap--z2 [data-z="2"], .geomap--z4 :is([data-z="2"], [data-z="4"]),
.geomap--z8 :is([data-z="2"], [data-z="4"], [data-z="8"]), .geomap--z16 .geomap__label { display: inline; }
/* Border source credit (CC BY): one small muted line. */
.geomap__credit { margin: 4px 0 0; font-size: .7rem; line-height: 1.3; color: var(--ui-muted, var(--color-text-muted, #5b6575)); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.geomap__credit a { color: inherit; text-decoration: underline; }
/* Map icon: the explicit secondary link to a map, a 44 px hit area. */
.geomap-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ui-accent, var(--color-primary, #0b5cad)); vertical-align: middle; }
.geomap-icon:hover, .geomap-icon:focus-visible { color: var(--ui-fg, var(--color-text, #1d2430)); }
/* Phones: a readable minimum map height. */
@media (max-width: 480px) { .geomap__svg { min-height: 200px; } }
/* Multi-line maps (Options.Lines, geomap_lines.js): Okabe-Ito tones without
   yellow (colour-blind safe) t1..t7, --coach dashed for a through coach,
   a wide transparent hit line (44 px on touch), the tapped line --on, and
   the station and line sheet (below). */
.geomap__line .geomap__leg { stroke-width: 3.5; stroke-opacity: 0.9; }
.geomap__leg--t1, .geomap__swatch--t1 { stroke: #0072b2; --tone: #0072b2; }
.geomap__leg--t2, .geomap__swatch--t2 { stroke: #d55e00; --tone: #d55e00; }
.geomap__leg--t3, .geomap__swatch--t3 { stroke: #009e73; --tone: #009e73; }
.geomap__leg--t4, .geomap__swatch--t4 { stroke: #cc79a7; --tone: #cc79a7; }
.geomap__leg--t5, .geomap__swatch--t5 { stroke: #e69f00; --tone: #e69f00; }
.geomap__leg--t6, .geomap__swatch--t6 { stroke: #56b4e9; --tone: #56b4e9; }
.geomap__leg--t7, .geomap__swatch--t7 { stroke: var(--ui-fg, var(--color-text, #1d2430)); --tone: var(--ui-fg, var(--color-text, #1d2430)); }
.geomap__leg--coach { stroke-dasharray: 7 5; stroke-linecap: butt; }
/* Options.Network without the bands script: tone 0, one thin translucent
   colour (non-scaling stroke). */
.geomap__line .geomap__leg--t0 { stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-width: 2.5; stroke-opacity: 0.35; }
/* Network bands (geomap_bands.js): a calm light base, soft borders, the
   base net hidden under touching strands in tones n1..n12 (luminance
   0.17-0.24: at least 3:1 on a light and on a dark map background); the
   script sets stroke-width and the gap dasharray in user units. A marked
   route lies over a casing in the map background, the rest dimmed. */
.geomap__svg--net { background: color-mix(in srgb, var(--ui-bg, var(--color-surface, #ffffff)) 90%, #d8d2c2); }
.geomap__svg--net .geomap__border { stroke-opacity: 0.28; }
.geomap__net--banded { visibility: hidden; }
.geomap__band { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.geomap__band--case { stroke: var(--ui-bg, var(--color-surface, #ffffff)); }
.geomap__bandsel[hidden] { display: none; }
.geomap__bands .geomap__band--gap { stroke-opacity: 0.45; }
.geomap__svg--dim .geomap__bands { opacity: 0.3; }
.geomap__band--n1, .geomap__swatch--tn1 { stroke: #d7263d; --tone: #d7263d; }
.geomap__band--n2, .geomap__swatch--tn2 { stroke: #1f77d0; --tone: #1f77d0; }
.geomap__band--n3, .geomap__swatch--tn3 { stroke: #2a9d3f; --tone: #2a9d3f; }
.geomap__band--n4, .geomap__swatch--tn4 { stroke: #9d53bc; --tone: #9d53bc; }
.geomap__band--n5, .geomap__swatch--tn5 { stroke: #c57300; --tone: #c57300; }
.geomap__band--n6, .geomap__swatch--tn6 { stroke: #009696; --tone: #009696; }
.geomap__band--n7, .geomap__swatch--tn7 { stroke: #d6336c; --tone: #d6336c; }
.geomap__band--n8, .geomap__swatch--tn8 { stroke: #5c6bc0; --tone: #5c6bc0; }
.geomap__band--n9, .geomap__swatch--tn9 { stroke: #63941d; --tone: #63941d; }
.geomap__band--n10, .geomap__swatch--tn10 { stroke: #b5651d; --tone: #b5651d; }
.geomap__band--n11, .geomap__swatch--tn11 { stroke: #0091c0; --tone: #0091c0; }
.geomap__band--n12, .geomap__swatch--tn12 { stroke: #a18400; --tone: #a18400; }
.geomap__line--on .geomap__leg--t0 { stroke: #d9480f; stroke-width: 4; stroke-opacity: 1; }
.geomap__line--on .geomap__leg { stroke-width: 6; stroke-opacity: 1; }
.geomap__hitline { fill: none; stroke: transparent; stroke-width: 20px; pointer-events: stroke; cursor: pointer; outline: none; }
@media (pointer: coarse) { .geomap__hitline { stroke-width: 44px; } }
.geomap__hitline:focus-visible, a:focus-visible > .geomap__hitline { stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-opacity: 0.25; }
/* Station and line sheet (geomap_panel.js): a nonmodal bottom sheet above
   the shared phone tab bar (--ui-bottom-inset, pkg/ui/appbar), no scrim.
   The script sets its height (full) and moves it by transform only
   (peek/half/full, drag); padding-bottom carries the safe area the script
   adds to peek. Tablets: capped at 640 px and centred. Pointer:fine or
   >= 900 px: a left side panel, no grabber. */
.geomap__panel { position: fixed; left: 0; right: 0; bottom: var(--ui-bottom-inset, 0px); z-index: 30; display: flex; flex-direction: column; box-sizing: border-box; max-width: 640px; margin: 0 auto; padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ui-bg, var(--color-surface, #ffffff)); color: var(--ui-fg, var(--color-text, #1d2430)); border-top: 1px solid var(--ui-line, var(--color-border, #d9dee6)); box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); border-radius: 14px 14px 0 0; will-change: transform; overscroll-behavior: contain; }
.geomap__panel--anim { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .geomap__panel--anim { transition: none; } }
.geomap__panel[hidden] { display: none; }
/* Phones: a train run at full covers the whole screen (no map sliver), above
   the shared app and tab bars (z-index 40, pkg/ui/appbar). */
.geomap__panel.geomap__panel--cover { bottom: 0; z-index: 45; max-width: none; padding-top: env(safe-area-inset-top, 0px); border-top: 0; border-radius: 0; box-shadow: none; }
.geomap__panel--cover .geomap__close { top: calc(8px + env(safe-area-inset-top, 0px)); }
.geomap__grab { flex: none; align-self: center; width: 72px; height: 28px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.geomap__grab::before { content: ""; display: block; width: 36px; height: 4px; margin: 12px auto; border-radius: 2px; background: var(--ui-muted, var(--color-text-muted, #5b6575)); opacity: .55; }
/* Close: the platform round 44 px icon button (portalask .pa-run__close). */
.geomap__close { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 50%; background: var(--ui-bg, var(--color-surface, #ffffff)); color: inherit; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.geomap__close:hover { border-color: var(--ui-accent, var(--color-primary, #0b5cad)); }
.geomap__close:focus { outline: none; }
.geomap__close:focus-visible { outline: 3px solid var(--ui-accent, var(--color-primary, #0b5cad)); outline-offset: 2px; }
.geomap__phead { flex: none; padding-right: 52px; touch-action: none; -webkit-user-select: none; user-select: none; }
.geomap__pbody { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* Inline train run (geomap_panel_routes.js): a sticky tab bar, one pill per
   direction (at most two per row, wrapping, at every width), above the run panes;
   loading and error notes are muted. */
.geomap__ptabs { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 4px 0 8px; background: var(--ui-bg, var(--color-surface, #ffffff)); }
.geomap__ptab { flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 22px; background: none; color: inherit; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; }
.geomap__ptab[aria-selected="true"] { background: var(--ui-accent, var(--color-primary, #0b5cad)); border-color: transparent; color: #ffffff; }
.geomap__ptab:focus-visible, .geomap__prun:focus-visible { outline: 3px solid var(--ui-accent, var(--color-primary, #0b5cad)); outline-offset: -3px; }
.geomap__pnote { margin: 8px 0; color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__ptitle { margin: 0; font-size: 1.1rem; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.geomap__psub { margin: 2px 0 10px; font-size: .9rem; color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__ptext { display: flex; flex-direction: column; min-width: 0; }
.geomap__pends { font-size: .9rem; color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__pnum { display: flex; align-items: center; gap: 6px; min-width: 0; }
.geomap__pnum > b { flex: none; }
.geomap__pname { display: inline-block; vertical-align: middle; flex: 0 1 auto; min-width: 0; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 999px; background: rgba(11, 92, 173, .08); font-size: .8rem; font-weight: 600; line-height: 1.4; }
.geomap__psub .geomap__pname { max-width: 60%; }
.geomap__pmore, .geomap__pback { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ui-accent, var(--color-primary, #0b5cad)); font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 900px), (pointer: fine) {
  .geomap__panel { left: 16px; right: auto; bottom: calc(16px + var(--ui-bottom-inset, 0px)); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 112px); margin: 0; padding: 12px 16px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); will-change: auto; }
  .geomap__grab { display: none; }
}
@media (prefers-color-scheme: dark) {
  .geomap__panel { background: var(--ui-sheet-dark, #1c2027); color: #e6e8eb; border-color: #3a404a; box-shadow: 0 -4px 18px rgba(0, 0, 0, .5); }
  .geomap__grab::before { background: #a7afba; }
  .geomap__psub, .geomap__pends, .geomap__prows dt, .geomap__pnote { color: #a7afba; }
  .geomap__ptabs { background: var(--ui-sheet-dark, #1c2027); }
  .geomap__ptab, .geomap__close { border-color: #3a404a; }
  .geomap__close { background: var(--ui-sheet-dark, #1c2027); }
  .geomap__pname { border-color: #3a404a; background: rgba(138, 184, 255, .12); }
  .geomap__plink, .geomap__pmore, .geomap__pback { color: #8ab8ff; }
}
.geomap__swatch { flex: none; display: inline-block; width: 22px; height: 0; border-top: 4px solid var(--tone, var(--ui-accent, var(--color-primary, #0b5cad))); }
.geomap__swatch--coach { border-top-style: dashed; }
.geomap__prows { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; }
.geomap__prows dt { color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__prows dd { margin: 0; }
.geomap__plink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ui-accent, var(--color-primary, #0b5cad)); }
.geomap__plist { list-style: none; margin: 0; padding: 0; }
.geomap__pick { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.geomap__pgroup { margin: 10px 0 2px; font-weight: 600; }
/* Gesture layer (geomap.js begin/slide/end; keep this block last and
   separate): during a drag, pinch or wheel burst the svg is one composited
   layer moved by an inline transform and clip-path (the clip holds the
   visible box in place); overflow shows the map beyond the old view and a
   wide shadow in the map background fills what lies past its edge. */
.geomap--moving { will-change: transform; transform-origin: 0 0; overflow: visible; box-shadow: 0 0 0 100vmax var(--ui-bg, var(--color-surface, #ffffff)); }
/* Canvas network maps (route_canvas, assets/geomap_net*.js): the host keeps
   the map's aspect (inline aspect-ratio), the WebGL/2D layer (__cv) and the
   station overlay (__ov) fill it and follow a gesture by transform; round
   zoom buttons top right; __sr is the route button list for keyboard and
   screen readers, shown while focused. */
.geomap__canvas { position: relative; width: 100%; max-height: 70vh; overflow: hidden; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; background: var(--ui-bg, var(--color-surface, #ffffff)); border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 10px; }
.geomap__canvas--static { touch-action: auto; cursor: auto; }
.geomap__canvas > .geomap__svg { border: 0; max-height: none; }
.geomap__cv, .geomap__ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; }
.geomap__zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.geomap__zbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); background: var(--ui-bg, var(--color-surface, #ffffff)); color: var(--ui-fg, var(--color-text, #1d2430)); font: 20px/1 system-ui, sans-serif; cursor: pointer; }
.geomap__canvas--static .geomap__zoom { display: none; }
.geomap__sr { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; list-style: none; }
.geomap__sr:focus-within { width: auto; height: auto; max-width: calc(100% - 64px); max-height: 40%; overflow: auto; clip-path: none; padding: 4px; background: var(--ui-bg, var(--color-surface, #ffffff)); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

/* Map-beside-list split (pkg/ui/geomap, docs/architecture/GEOMAP.md): on
   phones the optional page head (.ui-split__head: title, actions, stats)
   comes first, then the map (.ui-split--hero) or no map (.ui-split--aside),
   then the list. From 960 px the head and the list share the left column
   (~a third) and the map takes the rest from the page top. The map is static
   while the list scrolls (owner 2026-10-23): its sticky top is the position
   it starts at (--ui-top app bar + --ui-page-top frame top), so it never
   slides before sticking, and it ends 12 px above the window bottom, inside
   the shared .ui-page column (pkg/ui/appbar). Nothing in flow may sit above
   the split on a map page (a frame flash floats instead, journeylog.css).
   CSS only, no script layout. */
.ui-split--aside > .ui-split__map { display: none; }
@media (min-width: 960px) {
  .ui-split {
    display: grid; grid-template-columns: minmax(380px, 34%) minmax(0, 1fr); grid-template-rows: auto 1fr;
    gap: 0 24px; align-items: start;
  }
  .ui-split__head { grid-column: 1; grid-row: 1; min-width: 0; }
  .ui-split__main { grid-column: 1; grid-row: 2; min-width: 0; }
  .ui-split > .ui-split__map {
    display: block; grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--ui-top, 0px) + var(--ui-page-top, 0px));
    height: calc(100dvh - var(--ui-top, 0px) - var(--ui-page-top, 0px) - 12px); min-height: 420px;
  }
}

/* Connection map popup (connection_map.tmpl in the run dialog, sized by the
   shared .pa-run--wide modifier of ask-menu-layout.css): the shared geomap
   fills the pane, the leg list with track km sits below it and, from
   1024px, in a 300px column beside it. Appended to ask.css after
   ask-menu-layout.css and the shared geomap sheet (pkg/ui/geomap CSS). */
.pa-map {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding: 8px 16px 16px;
}
.pa-map__pane {
  flex: 1 1 auto;
  min-height: 0;
  /* the nowrap geomap credit line must not widen the pane past the dialog */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pa-map .geomap__svg {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}
.pa-map__legs {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.25;
}
/* One leg is at most two lines at every width (owner 2026-11-13): times
   left and track km right on the first, the train and its stations on the
   second; long names ellipsize (full text in the route title), never wrap
   to a third line. */
.pa-map__leg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "lead km" "route route";
  align-items: baseline;
  gap: 2px 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pa-line);
}
.pa-map__time,
.pa-map__label {
  grid-area: lead;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pa-map__km {
  grid-area: km;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pa-map__reason {
  color: var(--pa-muted);
}
.pa-map__route {
  grid-area: route;
  display: flex;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.pa-map__train,
.pa-map__stop {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-map__train {
  flex-shrink: 0;
  max-width: 45%;
  font-weight: 600;
}
.pa-map__leg--total {
  grid-template-areas: "lead km";
  border-bottom: 0;
  font-weight: 600;
}
/* Phones and tablets (legs below the map): the map pane keeps at least
   max(260px, 45svh) and grows into free height; legs that do not fit
   scroll the dialog body below it instead of squeezing the map into a
   strip (owner 2026-11-13). svh, not dvh: no resize while the browser
   bars slide. */
@media (max-width: 1023px) {
  .pa-map {
    flex: 1 0 auto;
  }
  .pa-map__pane {
    flex: 1 0 max(260px, 45vh);
    flex-basis: max(260px, 45svh);
  }
}
@media (min-width: 1024px) {
  .pa-map {
    flex-direction: row;
  }
  .pa-map__legs {
    flex: 0 0 300px;
    overflow-y: auto;
  }
}

/* Leg menu cards, the offer badge, allergen numbers, marks and the
   tip popover (part_menu.tmpl, ask-menu.txt). Calm (owner 10-18): white
   cards with a thin line, brand red only on prices and small labels, no
   dark pills. Appended to ask.css after ask-menu-layout.css. */
.pa-menu__card {
  display: grid;
  align-content: start;
  gap: var(--pa-sp-4);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: 14px 16px;
  background: var(--pa-surface);
}
.pa-menu__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pa-sp-6);
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  color: var(--pa-navy);
  font: inherit;
  text-align: left;
}
button.pa-menu__card-head {
  cursor: pointer;
}
button.pa-menu__card-head:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
  border-radius: var(--pa-radius-xs);
}
button.pa-menu__card-head[aria-pressed="true"] .pa-menu__card-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pa-menu__card-title {
  font-size: 15px;
  font-weight: var(--pa-fw-bold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* The price leads: brand red, a step larger than row prices. */
.pa-menu__card-head .pa-menu__price {
  color: var(--pa-red-2);
  font-size: var(--pa-fs-lg);
  font-weight: var(--pa-fw-heavy);
}
/* One small secondary line: variant prices (Happy Hours, card) and the
   saving, separated by middle dots. */
.pa-menu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: -4px 0 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
  line-height: 1.4;
}
.pa-menu__meta > * + *::before {
  content: "·";
  margin-right: 6px;
  color: var(--pa-muted-2);
}
.pa-menu__price--inline,
.pa-menu__price--inline .pa-menu__amount {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: var(--pa-fw-medium);
}
.pa-menu__price--inline > .pa-menu__amount:not([hidden]) ~ .pa-menu__amount:not([hidden])::before {
  content: " · ";
}
.pa-menu__price--inline .pa-menu__variant {
  font-size: inherit;
}
.pa-menu__save {
  color: var(--pa-ink-2);
  font-weight: var(--pa-fw-medium);
}
/* Components: compact "Label — A · B" rows. */
.pa-menu__parts {
  list-style: none;
  display: grid;
  gap: 3px;
  margin: 0;
  border-top: 1px solid var(--pa-line-soft);
  padding: var(--pa-sp-4) 0 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
  line-height: 1.4;
}
.pa-menu__part-label {
  color: var(--pa-ink-2);
  font-weight: var(--pa-fw-medium);
}
.pa-menu__part-dash,
.pa-menu__part-sep {
  color: var(--pa-muted-2);
}
.pa-menu__card-desc,
.pa-menu__rule {
  margin: 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
  line-height: 1.4;
}
.pa-menu__rule {
  font-size: var(--pa-fs-sm);
}
/* Hero ("Odporúčame", pickHero): a leading card names why it leads in the
   eyebrow style; the window line carries the brand-red clock. */
.pa-menu__lead {
  margin: 0;
}
.pa-menu__when {
  display: flex;
  align-items: center;
  gap: var(--pa-sp-3);
  margin: 0;
  color: var(--pa-ink-2);
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-medium);
  font-variant-numeric: tabular-nums;
}
.pa-menu__when svg {
  flex: none;
  color: var(--pa-red-2);
}
/* "Aj ako výhodné menu": one small outlined label in brand red. */
.pa-menu__offer {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--pa-red-line);
  border-radius: var(--pa-radius-pill);
  padding: 0 9px;
  background: transparent;
  color: var(--pa-red-2);
  font: inherit;
  font-size: var(--pa-fs-sm);
  font-weight: var(--pa-fw-medium);
  white-space: nowrap;
  cursor: pointer;
}
.pa-menu__offer template {
  display: none;
}
/* "Akcia": the same outlined label on a promo item outside the promo
   section; a plain label, not a button. */
.pa-menu__offer--promo {
  cursor: default;
}
/* Allergen numbers: plain muted numbers with a dashed underline; traces in
   brackets, italic. */
.pa-menu__allergens {
  border: 0;
  padding: 0;
  background: none;
  color: var(--pa-muted);
  font: inherit;
  font-size: var(--pa-fs-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: underline dashed var(--pa-muted-2);
  text-underline-offset: 3px;
  cursor: help;
}
.pa-menu__al--trace {
  color: var(--pa-muted-2);
  font-style: italic;
}
.pa-menu__allergen-free,
.pa-menu__choice,
.pa-menu__note {
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
}
/* An option group included in the price ("Teplý nápoj: espresso · čaj"). */
.pa-menu__choice-label {
  font-weight: var(--pa-fw-bold);
}
/* Marks in names and descriptions (diet, star, allergen badge): small
   soft labels, never dark pills. */
.pa-menu__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  padding: 0 6px;
  background: var(--pa-bg);
  color: var(--pa-ink-2);
  font: inherit;
  font-size: var(--pa-fs-xs);
  font-weight: var(--pa-fw-bold);
  line-height: 1;
  white-space: nowrap;
  vertical-align: 1px;
}
.pa-menu__badge--offer {
  border-color: var(--pa-red-line);
  background: transparent;
  color: var(--pa-red-2);
}
.pa-menu__badge--allergen,
.pa-menu__badge--none,
.pa-menu__badge--free {
  border: 0;
  padding: 0;
  background: none;
  color: var(--pa-muted);
  font-weight: var(--pa-fw-medium);
  text-decoration: underline dashed var(--pa-muted-2);
  text-underline-offset: 3px;
}
button.pa-menu__badge,
.pa-menu__offer,
.pa-menu__allergens {
  -webkit-tap-highlight-color: transparent;
}
button.pa-menu__badge {
  cursor: pointer;
}
button.pa-menu__badge:focus-visible,
.pa-menu__offer:focus-visible,
.pa-menu__allergens:focus-visible {
  outline: var(--pa-focus);
  outline-offset: var(--pa-focus-offset);
  border-radius: var(--pa-radius-xs);
}
@media (hover: hover) {
  .pa-menu__offer:hover {
    border-color: var(--pa-red-2);
  }
  .pa-menu__allergens:hover {
    color: var(--pa-ink);
  }
}
@media (pointer: coarse) {
  button.pa-menu__badge::after,
  .pa-menu__offer::after,
  .pa-menu__allergens::after {
    content: "";
    position: absolute;
    inset: -11px -4px;
  }
  .pa-menu__offer,
  .pa-menu__allergens {
    position: relative;
  }
}
/* Tip popover: next to its button, a bottom sheet on phones. */
.pa-tip {
  position: fixed;
  z-index: 50;
  max-width: min(320px, calc(100vw - 16px));
  margin: 0;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: 12px 14px;
  background: var(--pa-surface);
  color: var(--pa-ink);
  box-shadow: var(--pa-shadow-3);
  font-size: var(--pa-fs-base);
  line-height: 1.45;
}
.pa-tip--sheet {
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  border-radius: var(--pa-radius-sheet) var(--pa-radius-sheet) 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--pa-shadow-overlay);
}
.pa-tip__title {
  display: block;
  margin-bottom: 4px;
  color: var(--pa-navy);
  font-weight: var(--pa-fw-bold);
}
.pa-tip__text {
  margin: 0;
  color: var(--pa-ink-2);
}
.pa-tip__note {
  margin: 8px 0 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
}

/* Leg consist chip and "Zloženie vlaku" popup (part_consist.tmpl, shown in
   the leg dialog). The chip is a raised facility chip that opens a dialog;
   each train portion is one sideways strip of car tiles in running order. */
.pa-part__facility--consist { box-shadow: var(--pa-shadow-2); }
.pa-consist { display: grid; gap: var(--pa-sp-3); min-width: 0; }
.pa-consist__meta { margin: 0; color: var(--pa-muted); font-size: var(--pa-fs-sm); }
.pa-consist__group { display: grid; gap: var(--pa-sp-2); min-width: 0; }
.pa-consist__heading { margin: 0; color: var(--pa-navy); font-size: var(--pa-fs-sm); font-weight: 700; }
.pa-consist__cars { display: flex; gap: var(--pa-sp-2); margin: 0; padding: 0 0 var(--pa-sp-2); list-style: none; overflow-x: auto; min-width: 0; max-width: 100%; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pa-consist__car { flex: 0 0 6.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--pa-sp-1); padding: var(--pa-sp-2); border: 1px solid var(--pa-line); border-radius: var(--pa-radius-sm); background: var(--pa-surface); font-size: var(--pa-fs-xs); scroll-snap-align: start; }
.pa-consist__car--closed { opacity: .55; border-style: dashed; }
.pa-consist__car--no-passage { border-right-width: 3px; }
.pa-consist__sector { padding: 0 var(--pa-sp-1); border-radius: var(--pa-radius-sm); background: var(--pa-navy); color: var(--pa-surface); font-weight: 700; }
.pa-consist__no { color: var(--pa-navy); font-size: var(--pa-fs-sm); }
.pa-consist__class, .pa-consist__mark { color: var(--pa-muted); }
.pa-consist__kind { display: inline-flex; align-items: center; gap: var(--pa-sp-1); }
.pa-consist__amenities { display: flex; flex-wrap: wrap; gap: var(--pa-sp-1); }
.pa-consist__amenity { display: inline-flex; color: var(--pa-navy); }
.pa-consist__source, .pa-consist__attribution { margin: 0; color: var(--pa-muted); font-size: var(--pa-fs-xs); }
.pa-consist__source a { display: inline-flex; align-items: center; gap: var(--pa-sp-1); }

/* Typed station inputs (From/To/Via). From and To are always shown, Via waits
   for a picked To (is-to); without JS or when degraded only the q row remains,
   because the To input has no name and needs the stations script. The
   departure row and its drum popover live in ask-inputs-when.css. */
.pa-stations {
  position: relative;
  display: grid;
  gap: 8px;
}

.pa-station__field {
  position: relative;
  min-width: 0;
}

.pa-station__label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
  font-weight: var(--pa-fw-bold);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.pa-search__input.pa-station__input {
  padding-left: 76px;
  padding-right: 48px;
}

.pa-search__input.pa-search__input--position {
  padding-right: 48px;
}

/* Clear button inside the field: a 44 px tap target at the right edge, shown
   only while the field holds text (To/Via carry placeholder=" " for that). */
.pa-station__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pa-station__clear,
.pa-position {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--pa-radius-pill);
  background: transparent;
  color: var(--pa-muted);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pa-station__clear:hover,
.pa-position:hover {
  color: var(--pa-navy);
}

.pa-station__clear:focus-visible,
.pa-position:focus-visible {
  outline: var(--pa-focus);
  outline-offset: -4px;
}

.pa-station__input:placeholder-shown ~ .pa-station__clear,
.pa-stations.is-degraded .pa-station__clear {
  display: none;
}

/* The "Moja poloha" toggle's own look lives in ask-position.css. */

.pa-station--via,
.pa-vias {
  display: none;
}

@media (scripting: none) {
  .pa-station--to {
    display: none;
  }
}

.pa-stations.is-to .pa-station--via,
.pa-stations.is-to .pa-vias {
  display: block;
}

.pa-stations .pa-vias:empty,
.pa-stations.is-via-full .pa-station--via,
.pa-stations.is-degraded .pa-station--to,
.pa-stations.is-degraded .pa-station--via,
.pa-stations.is-degraded .pa-vias,
.pa-stations.is-degraded .pa-station__label {
  display: none;
}

.pa-stations.is-degraded .pa-search__input.pa-station__input {
  padding-left: 20px;
  padding-right: 20px;
}

.pa-station--to .pa-search__input,
.pa-station--via .pa-search__input {
  height: var(--pa-control-lg);
  line-height: var(--pa-control-lg);
  box-shadow: none;
}

.pa-station__spacer {
  display: block;
}

/* Direction swap in the action column under the search glass: a thin outline
   and a muted icon, so the red search pill stays the one strong action. */
.pa-station__swap {
  width: 100%;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: transparent;
  color: var(--pa-muted);
  cursor: pointer;
}

.pa-station__swap:hover {
  color: var(--pa-navy);
}

.pa-station__swap:focus-visible {
  outline: var(--pa-focus);
}

.pa-vias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 6px;
}

.pa-via {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  font-size: var(--pa-fs-base);
}

.pa-via__remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-soft);
  color: var(--pa-ink);
  font: inherit;
  font-size: var(--pa-fs-lg);
  line-height: 1;
  cursor: pointer;
}

.pa-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(360px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-suggest[hidden] {
  display: none;
}

.pa-suggest__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--pa-radius-sm);
  cursor: pointer;
}

.pa-suggest__row:hover,
.pa-suggest__row.is-active {
  background: var(--pa-soft);
}

.pa-suggest__name {
  min-width: 0;
  font-weight: var(--pa-fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-suggest__cc {
  flex: none;
  padding: 1px var(--pa-sp-3);
  border-radius: var(--pa-radius-xs);
  font-size: var(--pa-fs-xs);
  letter-spacing: var(--pa-caps-tracking);
}

.pa-suggest__meta {
  min-width: 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pa-station__label { left: 16px; }
  .pa-search__input.pa-station__input { padding-left: 74px; }
  .pa-station--to .pa-search__input,
  .pa-station--via .pa-search__input { height: 46px; line-height: 46px; }
}

/* One on/off option (heritage toggle): the pill fills the row. */
.pa-route-mode--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Selected-option check: every option label reserves a fixed slot before its
   text (empty when off), so the text never moves; :checked draws the tick.
   Decorative (a pseudo-element); state stays in the native input. */
.pa-route-mode__label::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 0.38em;
  height: 0.72em;
  margin: -0.16em 0.6em 0 0.2em;
  border: solid transparent;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
.pa-route-mode__input:checked + .pa-route-mode__label::before {
  border-color: currentColor;
}

/* "Moja poloha" toggle (ask-position.txt). Off: the crosshair with a
   diagonal strike in the empty From field's clear-button slot, so typing or a
   pick swaps it for the × without moving anything. Pending: pulsing, no
   strike. On: accent colour, no strike, and it stays visible beside the ×
   (the × moves one slot left) so a second tap can turn it off. */
.pa-search__input:not(:placeholder-shown) ~ .pa-position {
  display: none;
}

.pa-station__field.is-position-on .pa-position {
  display: grid;
}

.pa-station__field.is-position-on .pa-station__clear {
  right: 48px;
}

.pa-station__field.is-position-on .pa-search__input {
  padding-right: 92px;
}

.pa-position__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.pa-position__dot {
  fill: currentColor;
  stroke: none;
}

.pa-position.is-ready .pa-position__slash,
.pa-position.is-pending .pa-position__slash {
  display: none;
}

.pa-position.is-ready,
.pa-position.is-pending {
  color: var(--pa-red);
}

.pa-position.is-pending {
  cursor: progress;
}

.pa-position.is-pending .pa-position__icon {
  animation: pa-position-locating 0.8s ease-in-out infinite alternate;
}

@keyframes pa-position-locating {
  to { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-position.is-pending .pa-position__icon {
    animation: none;
    opacity: 0.55;
  }
}

/* One status line under the station inputs: why locating stopped. */
.pa-position-status {
  margin: 0;
  padding: 0 20px;
  color: var(--pa-muted);
  font-size: var(--pa-fs-sm);
}

.pa-position-status[hidden] {
  display: none;
}

/* nhc datetime field (pkg/ui/datetimefield): a labelled value button and
   its drum popover. Look comes from --dtf-* tokens that default to the
   shared --ui-* tokens; a host maps its own brand tokens onto --dtf-* on
   its root class. Fixed head and drum heights: no jump on open. */

.nhc-dtf {
  --dtf-ink: var(--ui-ink, #071426);
  --dtf-muted: var(--ui-muted, #667085);
  --dtf-line: var(--ui-line, #dfe5ee);
  --dtf-surface: var(--ui-surface, #ffffff);
  --dtf-soft: var(--ui-soft, #f1f4f8);
  --dtf-accent: var(--ui-accent, #c8102e);
  --dtf-danger: var(--ui-danger, #b42318);
  --dtf-accent-2: var(--ui-accent-2, var(--dtf-accent));
  --dtf-accent-line: var(--ui-accent-line, var(--dtf-accent));
  --dtf-on-accent: var(--ui-on-dark, #ffffff);
  --dtf-shadow: var(--ui-shadow, 0 24px 64px rgba(7, 20, 38, 0.11));
  --dtf-radius: var(--ui-radius, 14px);
  --dtf-radius-sm: var(--ui-radius-sm, 10px);
  --dtf-radius-pill: var(--ui-radius-pill, 999px);
  --dtf-fs-md: var(--ui-fs-md, 13px);
  --dtf-fs-base: var(--ui-fs-base, 14px);
  --dtf-fs-lg: var(--ui-fs-lg, 16px);
  --dtf-fw-bold: var(--ui-fw-bold, 700);
  --dtf-fw-medium: var(--ui-fw-medium, 600);
  --dtf-item: 36px;
  --dtf-head: 20px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}

/* Stacked: label above a full-width button, like a native form field. */
.nhc-dtf--stack {
  display: grid;
  gap: 4px;
  padding: 0;
}

.nhc-dtf__label {
  color: var(--dtf-muted);
  font-size: var(--dtf-fs-md);
  font-weight: var(--dtf-fw-bold);
}

/* A stacked label reads like the host's native form labels (regular
   weight); a host maps its label size onto --dtf-label-fs. */
.nhc-dtf--stack .nhc-dtf__label {
  font-size: var(--dtf-label-fs, var(--dtf-fs-md));
  font-weight: var(--dtf-label-fw, normal);
}

.nhc-dtf__label:empty {
  display: none;
}

.nhc-dtf__button {
  font-size: var(--dtf-fs-base);
  font-variant-numeric: tabular-nums;
}

/* The default value button, for hosts that bring no button class. */
.nhc-dtf__button--default {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--dtf-line);
  border-radius: var(--dtf-radius-sm);
  background: var(--dtf-surface);
  color: var(--dtf-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.nhc-dtf__button--default:focus-visible {
  outline: 2px solid var(--dtf-accent-line);
  outline-offset: 1px;
}

.nhc-dtf__button:disabled {
  opacity: 0.6;
  cursor: default;
}

.nhc-dtf__button[aria-invalid="true"] {
  border-color: var(--dtf-danger);
}

.nhc-dtf__button[aria-expanded="true"] {
  border-color: var(--dtf-accent);
}

/* The popover never sits in its container's flow: it opens in the top
   layer (popover="manual"; position: fixed where the API is missing), so
   it never grows a dialog's or page's scroll area. The script places it
   under the field, flips it above when it does not fit and clamps it to
   the viewport (--dtf-anchor-w = the field width). */
.nhc-dtf__pop {
  position: fixed;
  z-index: 30;
  inset: auto;
  top: 8px;
  left: 8px;
  margin: 0;
  width: min(max(var(--dtf-anchor-w, 280px), 280px), 360px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid var(--dtf-line);
  border-radius: var(--dtf-radius);
  background: var(--dtf-surface);
  color: var(--dtf-ink);
  box-shadow: var(--dtf-shadow);
  box-sizing: border-box;
}

.nhc-dtf__pop[hidden] {
  display: none;
}

/* Two parts, date | time, each headed and split by one thin full-height
   line; the time part reads HH:MM. One part fills the row alone. */
.nhc-dtf__drums {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 2.4fr);
}

.nhc-dtf__drums--single {
  grid-template-columns: minmax(0, 1fr);
}

.nhc-dtf__part {
  display: grid;
  grid-template-rows: var(--dtf-head) auto;
  row-gap: 6px;
  min-width: 0;
}

.nhc-dtf__drums:not(.nhc-dtf__drums--single) .nhc-dtf__part--date {
  padding-right: 8px;
}

.nhc-dtf__drums:not(.nhc-dtf__drums--single) .nhc-dtf__part--time {
  padding-left: 8px;
  border-left: 1px solid var(--dtf-line);
}

.nhc-dtf__head {
  height: var(--dtf-head);
  line-height: var(--dtf-head);
  text-align: center;
  color: var(--dtf-muted);
  font-size: var(--ui-small, .8125rem);
  font-weight: var(--dtf-fw-bold);
  overflow: hidden;
  white-space: nowrap;
}

.nhc-dtf__wheels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 4px;
}

.nhc-dtf__part--time .nhc-dtf__wheels {
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
}

.nhc-dtf__colon {
  position: relative;
  align-self: center;
  height: var(--dtf-item);
  line-height: var(--dtf-item);
  padding: 0 2px;
  color: var(--dtf-ink);
  font-size: var(--dtf-fs-lg);
  font-weight: var(--dtf-fw-bold);
  pointer-events: none;
}

.nhc-dtf__wheels::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--dtf-item) * 2);
  height: var(--dtf-item);
  border-radius: var(--dtf-radius-sm);
  background: var(--dtf-soft);
  pointer-events: none;
}

.nhc-dtf__drum {
  position: relative;
  height: calc(var(--dtf-item) * 5);
  padding: calc(var(--dtf-item) * 2) 0;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  outline: none;
  border-radius: var(--dtf-radius-sm);
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
}

.nhc-dtf__drum::-webkit-scrollbar {
  display: none;
}

.nhc-dtf__drum:focus-visible {
  box-shadow: inset 0 0 0 2px var(--dtf-accent-line);
}

.nhc-dtf__item {
  height: var(--dtf-item);
  line-height: var(--dtf-item);
  text-align: center;
  scroll-snap-align: center;
  font-size: var(--dtf-fs-lg);
  font-variant-numeric: tabular-nums;
  color: var(--dtf-muted);
  cursor: pointer;
  user-select: none;
}

.nhc-dtf__item[aria-selected="true"] {
  color: var(--dtf-ink);
  font-weight: var(--dtf-fw-bold);
}

.nhc-dtf__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.nhc-dtf__chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--dtf-line);
  border-radius: var(--dtf-radius-pill);
  background: var(--dtf-soft);
  color: var(--dtf-ink);
  font: inherit;
  font-size: var(--dtf-fs-base);
  cursor: pointer;
}

.nhc-dtf__chip:hover,
.nhc-dtf__chip:focus-visible {
  border-color: var(--dtf-accent-line);
}

.nhc-dtf__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.nhc-dtf__action,
.nhc-dtf__done {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--dtf-line);
  border-radius: var(--dtf-radius-pill);
  background: var(--dtf-surface);
  color: var(--dtf-ink);
  font: inherit;
  font-weight: var(--dtf-fw-medium);
  cursor: pointer;
}

.nhc-dtf__done {
  margin-left: auto;
  border-color: var(--dtf-accent-2);
  background: var(--dtf-accent);
  color: var(--dtf-on-accent);
}

@media (max-width: 640px) {
  .nhc-dtf__drums { --dtf-item: 40px; }
}

/* Departure row ("Odchod"): the shared date/time drum picker
   (pkg/ui/datetimefield, served in front of this file) in the one search
   column under the station inputs. The portal maps its brand tokens onto
   the picker's --dtf-* tokens; its button keeps the ask secondary-button
   look (.pa-when__button in ask-components.css). */

.pa-when.nhc-dtf {
  --dtf-ink: var(--pa-ink);
  --dtf-muted: var(--pa-muted);
  --dtf-line: var(--pa-line);
  --dtf-surface: var(--pa-surface);
  --dtf-soft: var(--pa-soft);
  --dtf-accent: var(--pa-red);
  --dtf-accent-2: var(--pa-red-2);
  --dtf-accent-line: var(--pa-red-line);
  --dtf-on-accent: var(--pa-on-dark);
  --dtf-shadow: var(--pa-shadow);
  --dtf-radius: var(--pa-radius);
  --dtf-radius-sm: var(--pa-radius-sm);
  --dtf-radius-pill: var(--pa-radius-pill);
  --dtf-fs-md: var(--pa-fs-md);
  --dtf-fs-base: var(--pa-fs-base);
  --dtf-fs-lg: var(--pa-fs-lg);
  --dtf-fw-bold: var(--pa-fw-bold);
  --dtf-fw-medium: var(--pa-fw-medium);
}

/* Departures board train-kind switch (board_filter.go, ask-board-filter.txt):
   the shared pa-route-mode segmented control at full width with 44px
   targets; the block's data-portal-ask-board-kind hides the other rows and
   the date separators, so rows merged later follow the same choice.
   Only the options that narrow the board show (board_filter.go); one column
   per shown option, equal when they fit, widened to the longest word
   ("Vysokorýchlostné") when not, so no label breaks inside a word at 320px.
   Each label is the check slot and name on one line, the count under the
   name, so every option has the same shape at any width. */
.pa-route-mode--board {
  width: 100%;
  margin: 0 0 12px;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min-content, 1fr);
  border-radius: var(--pa-radius-sheet);
}

.pa-route-mode--board[hidden],
.pa-route-mode--board > .pa-route-mode__option[hidden] {
  display: none;
}

.pa-route-mode--board .pa-route-mode__label {
  min-height: 44px;
  padding: 4px 6px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  row-gap: 1px;
}

.pa-board-filter__name {
  white-space: nowrap;
}

.pa-board-filter__count {
  grid-column: 2;
  color: var(--pa-muted);
  font-size: var(--pa-fs-xs);
  font-weight: var(--pa-fw-regular);
  font-variant-numeric: tabular-nums;
}

.pa-block[data-portal-ask-board-kind] .pa-items > .pa-item--date_separator,
.pa-block[data-portal-ask-board-kind="nocne"] .pa-items > .pa-item:not([data-portal-ask-train~="nocne"]),
.pa-block[data-portal-ask-board-kind="rychle"] .pa-items > .pa-item:not([data-portal-ask-train~="rychle"]) {
  display: none;
}

.pa-board-filter__empty {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--pa-ink-2);
}

.pa-board-filter__empty[hidden] {
  display: none;
}

.pa-board-filter__empty .pa-action {
  min-height: 44px;
}

/* Journey log: the page host's account slot and the card record action.
   The account control itself is the shared app bar's (pkg/ui/appbar
   appbar.css .ui-account__*), the same on every page. */
.pa-account {
  justify-self: end;
  font-size: var(--pa-fs-base);
}

.pa-item__record {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 40px;
  margin-top: 8px;
}

.pa-item__record-button.htmx-request {
  opacity: 0.6;
  pointer-events: none;
}

/* Record target banner (Config.RecordContext): host HTML above the form,
   stays visible while the results scroll; wraps at 375 px. */
.pa-record-ctx {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 14px;
  border: 1px solid var(--pa-info-line, var(--pa-line));
  border-radius: var(--pa-radius);
  background: var(--pa-info-bg, var(--pa-surface));
  color: var(--pa-navy);
  overflow-wrap: anywhere;
}

.pa-record-ctx a {
  color: inherit;
  font-weight: var(--pa-fw-medium);
}

/* Under the shared app bar (pkg/ui/appbar) the page sits closer to the bar;
   the bar wordmark is the one brand on every page. */
.ui-appbar ~ .pa-shell { padding-top: clamp(16px, 4vh, 48px); }

/* Journey-log record footer and trip picker: the journeylog fragments
   (record_pick / recorded / trip_picker) swapped into the card's
   [data-portal-ask-record], and the same picker on the journeylog pages.
   One owner: ask.css serves it on the search page and journeylog.css
   appends JourneyRecordStyles(). Fields are 44 px high with a 16 px font
   (no iOS focus zoom); the name field shows only for "+ Nový výlet". */
.pa-record-ctx__text { font-weight: 600; }
.jl-recorded { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; }
.jl-recorded:has(> .jl-trip-pick) { align-items: flex-end; }
.jl-recorded > .jl-trip-pick, .jl-inline > .jl-trip-pick { flex: 1 1 200px; min-width: 0; }
.jl-recorded__ok { font-weight: 600; color: var(--ui-ok); }
.jl-recorded__trip { flex-basis: 100%; min-width: 0; }
.jl-recorded__trip > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
/* In the leg arrow row the swapped footer takes its own full line below
   the arrows, so the arrows keep their place. */
.pa-part__shift:has(> .jl-recorded) { flex-wrap: wrap; }
.pa-part__shift > .jl-recorded { order: 1; flex: 1 1 100%; margin: 4px 0 0; }
.jl-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.jl-trip-pick { display: grid; gap: 8px; }
.jl-trip-pick label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--ui-muted); }
.jl-trip-pick select, .jl-trip-pick input {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--ui-ctl-h); padding: 8px var(--ui-gap);
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface);
  color: var(--ui-ink); font: inherit; font-size: 16px;
}
.jl-trip-pick select:focus-visible, .jl-trip-pick input:focus-visible { outline: var(--ui-focus); outline-offset: 2px; }
.jl-trip-pick__name { display: none !important; }
.jl-trip-pick:has(option[value="new"]:checked) .jl-trip-pick__name { display: grid !important; }