/* GENERATED from design/topBar/topBar.css by design/syncDesign.mjs --write. Do not edit here: edit design/ and run --write. */
/* THE TOP BAR: the one stylesheet for the top of every Varun page (spec: design/topBar.md; behaviour: design/topBar/topBar.mjs). Edit it here, run `node design/syncDesign.mjs --write`, deploy each app. An app
   loads its generated copy (topBar.css) and writes NO rule for any part of it (the design check fails if it does).

   WHAT THE TOP BAR IS. At the point where a page's first card used to start there is ONE row, `.top-row`, --top-row-height (40px) high, in the page's flow, so the cards below start in the right place. On
   it, drawn by the component: the account icon at the row's left end, the bell at its right end, and between them, where a page has views, the page pill. They do not scroll with the page: the component pins
   them to the screen (`pinTopRow`) at the place the row has at rest, as the bottom bar stays at the bottom. Behind each icon is a CAP of the pill's glass that comes in from its wall of the screen.

   WHERE THE NUMBERS COME FROM (one place, here): --top-lead (24px on a phone, 0 on a desktop: the page itself starts 48px down there), --top-row-height 40, --top-gap 16, --top-row-gap = --card-gap 9.
   THE ICONS ARE THE CONSTITUTION ICON'S KIND: line icons, 22px, stroke 1.3, ink colour, no circle, no fill, no border; drawn by the component, never by an app. */
:root { --top-row-height: 40px; --top-lead: 24px; --top-gap: 16px; --top-row-gap: var(--card-gap, 9px); }
@media (min-width: 700px) { :root { --top-lead: 0px; } }
/* WHERE A PAGE'S FIRST ROW STARTS, for any page that owns its top and so has no `.top-row` (Wad's transaction ledger): the same place the top row stands on every other page (owner: "the header row of the
   subpage should start where the profile and notification icons are on the main pages"). A page reads --top-start and puts its first row's TOP edge there; it never types its own number. */
:root { --top-start: calc(env(safe-area-inset-top, 0px) + var(--top-lead)); }
@media (min-width: 700px) { :root { --top-start: var(--frost-clear); } }          /* a desktop page already starts --frost-clear (48px) from the top (design/frost.css) */

/* THE ROW. Its margin is the whole distance to the first card (--top-row-gap, the same as between two cards) minus whatever gap the page column already puts between its children
   (--top-row-parent-gap, measured by the component from the parent's own row gap), and --top-lead above it. */
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--card-gap, 9px); width: 100%; height: var(--top-row-height); grid-column: 1 / -1;
  margin: var(--top-lead) 0 calc(var(--top-row-gap) - var(--top-row-parent-gap, 0px)); }
body.top-owned .top-row { display: none; }          /* the ledger shows no icon row, but the shared frost stays: the page passes under it like any page (design/mainPages.md) */

/* THE ICONS. */
/* THE CALENDAR (opt-in: `calendar` in mountTopBar; owner, for the Nutrition page's endless date navigation): a third icon of the same kind, standing RIGHT of the account icon, shown only on a
   page that asks for it (`setCalendar`). While it shows, the left cap and the page pill make room for it (`--top-left-icons`: 2). */
.top-row .top-notify, .top-row .top-calendar, .top-row .top-labels {
  flex: 0 0 auto; width: var(--top-row-height); height: var(--top-row-height); padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.top-row .top-notify svg, .top-row .top-calendar svg, .top-row .top-labels svg { display: block; width: 22px; height: 22px; }
.top-row .top-calendar { position: relative; }
.top-row .top-notify[hidden], .top-row .top-calendar[hidden], .top-row .top-labels[hidden] { display: none; }
.top-calendar-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.top-row .top-notify[aria-pressed="true"] svg, .top-row .top-labels[aria-pressed="true"] svg { fill: currentColor; fill-opacity: .18; }          /* the notifications page is open (DadWad swaps pages): the bell is filled; tap again to go back */
.top-row .top-notify:active, .top-row .top-calendar:active, .top-row .top-labels:active { opacity: .5; }
.top-row .top-notify:focus-visible, .top-row .top-calendar:focus-visible, .top-row .top-labels:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 50%; }
.top-row-pinned > .top-notify, .top-row-pinned > .top-labels, .top-row-pinned > .top-calendar { position: fixed; z-index: 20; top: var(--top-row-top, 0); left: calc(var(--top-row-left, 0px) + var(--top-row-height) * var(--top-slot, 0)); }          /* every icon stands at the LEFT in its own 40px slot, the bell in slot 0 (set by mountTopBar's arrange) */

/* THE CAPS: each icon sits on a cap of the pill's own glass, as high as the page pill, running from its wall of the screen to 6px past the icon's box: square at the wall, fully
   rounded inside. More see-through than the bottom pill: a wash of .05 (the bottom pill .15) and an 8px blur (the bottom 16px), so the cards passing under them show. No shadow. The rim is the
   bottom pill's own (design/bottomBar/structure.css). */
.top-row-pinned > .top-cap { position: fixed; z-index: 19; top: var(--top-row-top, 0); height: var(--top-row-height); padding: 0; pointer-events: none;
  background: var(--lg-fill); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); box-shadow: var(--lg-spec); }          /* no float shadow (owner: it tells the top from the bottom pill and keeps the first card clean) */          /* liquid glass, the bottom pill's material (design/liquidGlass.md; owner) */
.top-row-bare > .top-cap-left { display: none; }          /* no icon on the page, no cap */
.top-row-pinned > .top-cap-left { left: -8px; width: calc(8px + var(--top-row-left, 0px) + var(--top-row-height) * var(--top-left-icons, 0) + 6px); border-radius: 0 99px 99px 0; }

/* THE PAGE PILL (mountPagePill): the bar's own pill (the glass, rim, labels and sliding highlight of design/bottomBar/structure.css) as in-page navigation, scaled to the row: 40px high, 34px tabs.
   It stays on screen while the page scrolls under it, fixed between the icons: --top-gap (16px) from each icon's box, which puts the glyph 25px from the pill, as the Constitution book is from the bottom
   pill (12px of gap plus 13px of its 48px box). On a phone the pill FILLS the room between the icons, its tabs sharing it; on a desktop it is as long as its tabs need, centred, never wider than the
   room (many views scroll inside it, the chosen one scrolled into view). The container is click-through; only the pill takes taps. Same see-through glass as the caps, and no shadow, so the first card
   can start a plain card-gap below it. It belongs to one page and is hidden on every other. */
.page-pill { --pill-h: 40px; --tab-h: 34px; display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; }
.page-pill[hidden], .page-pill.page-pill-empty { display: none; }
.page-pill .pill-nav-slot { flex: 0 1 auto; width: auto; max-width: 100%; }
.page-pill.page-pill-fixed { position: fixed; top: var(--top-row-top, 0); z-index: 20; height: var(--pill-h); pointer-events: none;
  left: calc(var(--top-row-left, 0px) + var(--top-row-height) * var(--top-left-icons, 0) + var(--top-pill-gap, 0px)); right: var(--top-row-right, 0px); }          /* from past the last icon to the row's right end: the pill takes ALL the room */
.page-pill.page-pill-fixed .pill-nav-slot { pointer-events: auto; width: 100%; max-width: none; }
@media (min-width: 700px) { .page-pill.page-pill-fixed .pill-nav-slot { width: auto; max-width: 100%; } }
.page-pill .pill-indicator { box-shadow: var(--lg-lens-spec); }          /* the selected date's capsule casts no shadow either: nothing at the top drops a shadow onto the cards under it */
.page-pill .pill-nav { box-shadow: var(--lg-spec); background: var(--lg-fill); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); }          /* liquid glass, as the bottom pill's (design/liquidGlass.md) */
.page-pill .pill-tabs button { padding: 0 14px; }
.page-pill button:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.page-pill button:active:not(:disabled) { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .page-pill *, .page-pill *::after { transition: none !important; } }

/* IN A SUBPAGE (owner; topBar.mjs `setSubpage` / `followBar`): the page pill is away, and so is every icon but the one that opened the subpage, which is the close cross in the leftmost slot. */
.top-row.top-row-sub .page-pill { display: none !important; }