/* kit v1.1.0, copied from metaproject/ui/kit */
/* app-bar.css: the one top bar every app gets (landing page, finance, fitness, packmate).

   <header class="kit-bar">
     <div class="kit-bar__row">
       <h1 class="kit-bar__title">App</h1>
       <div class="kit-bar__actions"> 2-3 compact controls </div>
     </div>
     <div class="kit-bar__acc"> optional accessory row: a control used while scrolling </div>
   </header>

   Why it looks like this:
   - Opaque page color, sticky, 44pt row under the safe area. A see-through bar shows a seam under
     the iOS clock, and iOS 26+ home-screen apps blur the top of any page without a real sticky bar.
   - An 8px fade below instead of a hairline: content dissolves as it scrolls under. The gap below
     the bar equals the fade, so nothing is faded at rest.
   - The background runs edge to edge while the content lines up with the page column: the padding
     is max(gutter, (100% - column) / 2 + gutter). Left and right insets are read separately
     (the iPhone Duo's are asymmetric).
   - Never flex-wrap the row: the title ellipsizes before the actions move.
   - Every control in the row is --kit-control-h tall (base.css): pills, selectors, segmented
     controls and icon buttons. Two neighbors of different heights read as a misalignment even
     when both are centered. A control that wants to look smaller keeps the height and changes
     its fill, not its box. */

.kit-bar {
  --kit-col: 100vw;         /* the page column width; apps with a max-width column set it */
  position: sticky; top: 0; z-index: var(--kit-z-bar);
  background: var(--kit-bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(env(safe-area-inset-left, 0px) + var(--kit-gutter), calc((100% - var(--kit-col)) / 2 + var(--kit-gutter)));
  padding-right: max(env(safe-area-inset-right, 0px) + var(--kit-gutter), calc((100% - var(--kit-col)) / 2 + var(--kit-gutter)));
  margin-bottom: var(--kit-fade);
}
.kit-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--kit-fade);
  background: linear-gradient(var(--kit-bg), transparent); pointer-events: none;
}
.kit-bar__row {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  min-height: var(--kit-bar-row);
}
.kit-bar__title {
  margin: 0; min-width: 0; flex: 0 1 auto;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kit-bar__actions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
/* Accessory row: same block, so the fade sits under both rows, not between them. */
.kit-bar__acc { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; min-width: 0; }

/* Compact controls for the bar: --kit-control-h tall, full-size hit area (base.css .kit-hit). */
.kit-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 4 auto; min-width: 0;
  box-sizing: border-box; height: var(--kit-control-h); padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--kit-line); background: var(--kit-surface); color: var(--kit-ink);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.kit-pill > span { overflow: hidden; text-overflow: ellipsis; }
.kit-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--kit-control-h); height: var(--kit-control-h); border-radius: var(--kit-control-radius); border: 0; padding: 0;
  background: none; color: var(--kit-ink); cursor: pointer;
}
.kit-icon-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .kit-pill:hover, .kit-icon-btn:hover { background: var(--kit-surface-2); } }

/* Sticky rows under the bar (tabs, filter bars) stick below it, never under it. app-bar.js
   measures the bar into --kit-bar-h and the whole stack into --kit-stack-h. */
.kit-sticky { position: sticky; top: var(--kit-bar-h, 0px); z-index: calc(var(--kit-z-bar) - 1); background: var(--kit-bg); }
/* Anchored sections clear the whole pinned stack when jumped to. */
.kit-anchor { scroll-margin-top: calc(var(--kit-stack-h, 0px) + 8px); }

/* App-shell layouts (a fixed-height page with inner scrollers): clip, not hidden. `hidden` makes
   html/body/#root scroll containers of their own, the bar pins to that box instead of the
   viewport, and iOS treats the page as having no top bar. dvh sits inside @supports so a
   minifier can't merge it with the fallback and drop it (packmate). */
.kit-shell, .kit-shell body { height: 100%; overflow: clip; }
@supports (height: 100dvh) { .kit-shell, .kit-shell body { height: 100dvh; } }