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

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

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

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

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

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

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

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

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

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

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

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