/* 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 * { 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 { 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);
}
.ui-appbar a { color: inherit; text-decoration: none; }
.ui-appbar a:focus-visible, .ui-backrow a:focus-visible, .ui-tabbar 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 language switcher (Options.Languages): a <details> whose summary
   shows the current code and opens the list of language names */
.ui-appbar__lang { 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 { 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 { background: var(--ui-soft); }
.ui-appbar__lang-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__lang-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__lang-panel a:hover { background: var(--ui-soft); }
.ui-appbar__lang-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__panel form { display: grid; }

.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);
}
.ui-tabbar__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] { color: var(--ui-ink); }
.ui-tabbar__item[aria-current] .ui-tabbar__icon { stroke-width: 2.6; }
.ui-tabbar__item--live, .ui-tabbar__item--live[aria-current] { color: var(--ui-ok); }

@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 { 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); /* one column: options end at the field track */
  --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 {
  width: calc(100% - var(--pa-search-action) - var(--pa-search-gap));
  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;
  width: calc(100% - var(--pa-search-action) - var(--pa-search-gap));
  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-items > .pa-item {
  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-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-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: 8px;
  min-width: 0;
  max-width: min(320px, 36vw);
}

.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: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
  }
  .pa-transfer {
    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;
}

/* 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);
}

/* 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 to two lines instead of an ellipsis. */
.pa-part__facility-text {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  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;
}

/* 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);
}

.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): 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 { transform: scale(var(--map-k, 1)); transform-origin: 0 0; }
.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; }
.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; } }

/* 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;
}
.pa-map__leg {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--pa-line);
}
.pa-map__train {
  font-weight: 600;
}
.pa-map__route {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pa-map__km {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pa-map__reason {
  color: var(--pa-muted);
  white-space: normal;
}
.pa-map__leg--total {
  border-bottom: 0;
  font-weight: 600;
}
@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);
}

/* Typed station inputs (From/To/Via). The
   fields after "Odkiaľ" stay hidden until JS marks a pick (is-from, is-to);
   without JS or when degraded only the q row remains. 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--to,
.pa-station--via,
.pa-vias {
  display: none;
}

.pa-stations.is-from .pa-station--to,
.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;
}

.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);
}

/* 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); }