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