/* ===========================================================================
   bottomnav.css — the bottom bar on phones and small tablets (bottomnav.js),
   in twenty-six looks, the room the rest of the app leaves for it, and the
   Preferences picker that chooses between the looks.

   One set of markup for every look:

     nav.bottomnav[data-nav-style][data-fab][data-labels][data-active]
       .bn-bar                      the row: a five-column grid
         .bn-shape                  the surface (glass, a band, two islands, a notched bar…)
         .bn-ind                    the indicator: one column wide, slid by --bn-i
         .bn-item × 5               Home · Binders · the action (.bn-fab) · Shelves · the fifth place
           .bn-ico > svg            the icon: an outline (.s) over the same shape filled (.f)
             .bn-sheen              (the action only) the orb looks' shimmer and gloss
           .bn-label

   A look is a `[data-nav-style]` block of measurements (on the bar, and on
   <html> so the page can leave room) and a `.bottomnav[data-nav-style]` block
   that dresses it. The pictures in Preferences are the same markup with
   `.is-preview`: no safe areas, nothing to press.

   Why Center Action is the default: it is the bar of the ERP app, so the two
   feel like one family; its opaque bar reads the same over anything behind it
   (a binder's spread, a shelf, a photo), where glass takes on the colours of
   the page; and its raised gradient button makes the action (add cards, new
   binder) the obvious thing to press, in the one saturated colour the chrome
   allows itself. (The Glass pill, the app's own glass, was the default before.)

   Motion (motion.js writes <html data-motion>): only transform and opacity
   move. Springs — the indicator sliding, the bubble rising, the × turning, the
   button's pulse — only at Full; at Reduced things fade or simply change; at
   Off nothing moves (design.css already stops every transition there).
   =========================================================================== */

/* ================================================================ metrics */
/* Every look sets what it differs in; the used values (--bn-h and friends)
   are what the layout reads, so short screens can take them down in one place. */
:root, .bottomnav {
  --bn-bar: 62px;       /* the bar's own height, above any safe area */
  --bn-float: 0px;      /* air under a floating bar */
  --bn-side: 0px;       /* air either side of a floating bar */
  --bn-rise: 0px;       /* how far anything stands up out of the bar (a raised button, the bubble) */
  --bn-lift: 0px;       /* how far the centre button is lifted */
  --bn-fab: 56px;       /* the centre button, in the looks that have one of its own */
  --bn-docked: 1;       /* 1: the bar runs to the bottom edge; 0: it floats, with air all round it */
  --bn-max: 640px;      /* a floating bar's widest, or a docked bar's row, on a tablet */
  --bn-pad: 0px;        /* the bar's own padding, sideways */

  --bn-h: var(--bn-bar);
  --bn-gap: var(--bn-float);
  --bn-up: var(--bn-rise);
  --bn-lift-u: var(--bn-lift);
  --bn-fab-u: var(--bn-fab);

  /* The bottom of the screen. On an iPhone the home indicator's strip is 34px,
     but the indicator itself is a thin line about 8px up: most of the strip
     is room for the swipe. So a docked bar keeps only the top of it under its
     icons (--bn-under), sitting lower; a floating bar rests just above the
     indicator (--bn-air), never less than its own air; and --bn-foot is
     whichever of the two the look uses — everything under the bar's row. */
  --bn-inset: env(safe-area-inset-bottom, 0px);
  --bn-under: max(0px, var(--bn-inset) - 16px);
  --bn-air: max(var(--bn-gap), var(--bn-inset) - 12px);
  --bn-foot: calc(var(--bn-under) * var(--bn-docked) + var(--bn-air) * (1 - var(--bn-docked)));
}

[data-nav-style="center-action"] { --bn-bar: 64px; --bn-rise: 28px; --bn-lift: 24px; --bn-fab: 60px; }
[data-nav-style="classic-tabs"]  { --bn-bar: 60px; }
/* The bubble's middle sits on the bar's top edge; the places run the full width (the notch is placed by column). */
[data-nav-style="magic-bubble"]  { --bn-bar: 68px; --bn-rise: 26px; --bn-pad: 24px; --bn-max: 980px; }
[data-nav-style="floating-dock"] { --bn-bar: 64px; --bn-float: 12px; --bn-side: 16px; --bn-docked: 0; --bn-max: 520px; --bn-pad: 4px; }
[data-nav-style="glass-capsule"] { --bn-bar: 62px; --bn-float: 12px; --bn-side: 16px; --bn-docked: 0; --bn-max: 520px; --bn-pad: 4px; }
/* The orb stands 10px out of the dock, its collar 15px. */
[data-nav-style="center-orb"]    { --bn-bar: 64px; --bn-float: 12px; --bn-side: 20px; --bn-rise: 15px; --bn-lift: 8px; --bn-fab: 68px; --bn-docked: 0; --bn-max: 520px; --bn-pad: 4px; }
@media (max-width: 359.98px) { [data-nav-style="center-orb"] { --bn-side: 12px; } }
[data-nav-style="pill"]        { --bn-bar: 62px; --bn-float: 10px; --bn-side: 14px; --bn-rise: 12px; --bn-lift: 15px; --bn-fab: 52px; --bn-docked: 0; --bn-max: 460px; --bn-pad: 6px; }
[data-nav-style="classic"]     { --bn-bar: 62px; }
[data-nav-style="dock"]        { --bn-bar: 72px; }
[data-nav-style="raised"]      { --bn-bar: 62px; --bn-rise: 24px; --bn-lift: 24px; --bn-fab: 58px; }
/* The button's centre sits on the bar's top edge, in the notch. */
[data-nav-style="notch"]       { --bn-bar: 64px; --bn-rise: 28px; --bn-lift: calc(var(--bn-h) / 2); --bn-fab: 56px; }
[data-nav-style="diamond"]     { --bn-bar: 62px; --bn-rise: 22px; --bn-lift: 20px; --bn-fab: 46px; }
[data-nav-style="squircle"]    { --bn-bar: 62px; --bn-float: 10px; --bn-side: 16px; --bn-rise: 6px; --bn-lift: 8px; --bn-fab: 56px; --bn-docked: 0; --bn-max: 420px; --bn-pad: 8px; }
[data-nav-style="slide"]       { --bn-bar: 70px; }
[data-nav-style="expand"]      { --bn-bar: 60px; --bn-float: 10px; --bn-side: 12px; --bn-docked: 0; --bn-max: 460px; --bn-pad: 6px; }
[data-nav-style="dot"]         { --bn-bar: 58px; }
[data-nav-style="spotlight"]   { --bn-bar: 62px; }
[data-nav-style="bubble"]      { --bn-bar: 60px; --bn-rise: 18px; }
[data-nav-style="soft"]        { --bn-bar: 68px; --bn-rise: 16px; --bn-lift: 18px; --bn-fab: 56px; }
[data-nav-style="gradient"]    { --bn-bar: 62px; --bn-float: 10px; --bn-side: 14px; --bn-rise: 14px; --bn-lift: 18px; --bn-fab: 54px; --bn-docked: 0; --bn-max: 460px; --bn-pad: 6px; }
[data-nav-style="islands"]     { --bn-bar: 60px; --bn-float: 10px; --bn-side: 12px; --bn-rise: 4px; --bn-lift: 4px; --bn-fab: 58px; --bn-docked: 0; --bn-max: 480px; }
[data-nav-style="segmented"]   { --bn-bar: 58px; --bn-float: 10px; --bn-side: 14px; --bn-docked: 0; --bn-max: 460px; --bn-pad: 4px; }
[data-nav-style="wireframe"]   { --bn-bar: 60px; --bn-float: 10px; --bn-side: 14px; --bn-docked: 0; --bn-max: 460px; --bn-pad: 4px; }
[data-nav-style="minimal"]     { --bn-bar: 54px; --bn-rise: 10px; }
[data-nav-style="translucent"] { --bn-bar: 52px; }
[data-nav-style="sport"]       { --bn-bar: 62px; --bn-rise: 16px; --bn-lift: 17px; --bn-fab: 46px; }

/* A phone on its side has little height to spare: every look comes down to a
   slim bar, its centre button kept inside it. */
@media (max-width: 980px) and (max-height: 500px) {
  :root, .bottomnav:not(.is-preview) {
    --bn-h: min(var(--bn-bar), 52px);
    --bn-gap: min(var(--bn-float), 6px);
    --bn-up: 0px;
    --bn-lift-u: 0px;
    --bn-fab-u: min(var(--bn-fab), 42px);
  }
}

/* ============================================================ the room left
   Only where the bar shows: signed in, not a shared link, at the compact width.
   --bottomnav-h is everything it covers, safe area and raised button included,
   so what sits above it never ends up under it. */
@media (max-width: 980px) {
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) {
    --bottomnav-h: calc(var(--bn-h) + var(--bn-up) + var(--bn-foot));
  }
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) > .bottomnav { display: block; }

  /* The top bar keeps the brand and its buttons; its links are down here now.
     In a binder it keeps the binder's name, as the page's title (with its
     group and the unsaved-changes dot, which nothing else shows on a phone). */
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) #topnav > .nav-item:not(.nav-binder),
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) #topnav > .nav-binder:not([aria-current="page"]) { display: none; }
  /* With the links gone there is room for the name again, where no binder's is showing. */
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) .topbar:not(:has(.nav-binder[aria-current="page"])) .brand span { display: inline; }

  /* The views scroll inside themselves, under the bar (it is glass in most
     looks), to an end that stops above it. */
  body.has-bottomnav .view-home,
  body.has-bottomnav .view-library,
  body.has-bottomnav .view-sets { padding-bottom: var(--bottomnav-h, 0px); scroll-padding-bottom: var(--bottomnav-h, 0px); }

  /* ---- the binder: the bar stands in for the sheet's dock. The stage stops
     above the bar; the sheet stays out of sight until the action (or a tab key,
     or `/`) brings it up, then rises from behind the bar with its tabs along
     its top, where they can still be dragged to size it or put it away. */
  body.has-bottomnav .shell > .stage { padding-bottom: var(--bottomnav-h, 0px); }
  body.has-bottomnav .shell > .sidebar {
    flex-direction: column;
    height: var(--bottomnav-h, 0px);
    padding-bottom: var(--bottomnav-h, 0px);
    visibility: hidden;
    border-top: none; box-shadow: none;
    transition: height var(--t-3) var(--ease-out), border-radius var(--t-3) var(--ease-out), visibility 0s linear var(--t-3);
  }
  body.has-bottomnav .shell.sheet-open > .sidebar {
    visibility: visible;
    height: var(--sheet-h, min(calc(70dvh + 40px), calc(100dvh - 52px - 100px)));
    border-top: 1px solid var(--line);
    box-shadow: 0 -16px 48px rgba(0, 0, 0, .5);
    transition: height var(--t-3) var(--ease-out), border-radius var(--t-3) var(--ease-out), visibility 0s;
  }
  body.has-bottomnav .shell > .sidebar.is-dragging { transition: none; }
  body.has-bottomnav .shell > .sidebar > .sheet-handle { order: -2; }
  body.has-bottomnav .shell > .sidebar > .tabs { order: -1; }
  /* The binder's commands (More) are the bar's Actions, a panel of their own
     (app.js openActions): not a tab of the Cards panel, and with no tabs over them. */
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) .tabs .tab-more { display: none; }
  body.has-bottomnav .shell.sheet-actions > .sidebar > .tabs { display: none; }
  body.has-bottomnav .shell.sheet-open > .sidebar .tabs { border-top: none; border-bottom: 1px solid var(--line); }

  /* Toasts come up above the bar, not under it. */
  body.has-bottomnav:not(.is-signin, .is-landing, .is-shared) .toast-stack {
    bottom: calc(var(--bottomnav-h, 0px) + 12px);
  }
}
@media (max-width: 980px) and (max-height: 500px) {
  /* On its side the sheet may take nearly all of the height the top bar leaves (as far as a drag may: app.js wireSheetDrag). */
  body.has-bottomnav .shell.sheet-open > .sidebar { height: var(--sheet-h, calc(100dvh - 52px - 60px)); }
}
:root[data-motion="off"] body.has-bottomnav .shell > .sidebar,
:root[data-motion="reduced"] body.has-bottomnav .shell > .sidebar { transition: visibility 0s; }

/* ============================================================ safe areas
   index.html asks for viewport-fit=cover, so a docked bar (and the sheet)
   can run down to the very bottom edge, over the home indicator's strip, and
   a floating one can rest just above the indicator, the page showing under
   and round it (--bn-foot, in the metrics). The price is that the page also
   runs under a notch or the rounded corners of a phone on its side, so the
   page keeps to the safe area left and right, and everything fixed to an edge
   makes its own room. (The top inset is 0 in a browser tab, where the
   browser's own bar is above the page.) */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.toast-stack { right: calc(16px + env(safe-area-inset-right, 0px)); }
@supports (padding: max(0px)) {
  .modal-root {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
  .popover.is-sheet {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 980px) {
  /* The binder's sheet and the filters drawer are fixed to the screen's edges. */
  .shell > .sidebar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .filter-dock { padding-left: env(safe-area-inset-left, 0px); }
}

/* ================================================================ the bar */
.bottomnav {
  --bn-safe-l: env(safe-area-inset-left, 0px);
  --bn-safe-r: env(safe-area-inset-right, 0px);
  /* colours: every look starts from these, most only change a few */
  --bn-bg: var(--bg-2);
  --bn-ink: var(--ink-3);
  --bn-on: var(--accent-text);
  --bn-fill: .24;                   /* how solid the current icon's fill is */
  --bn-fab-bg: var(--accent-fill);
  --bn-fab-ink: var(--accent-ink);

  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  height: calc(var(--bn-h) + var(--bn-up) + var(--bn-foot));
  pointer-events: none;
  font-family: var(--font);
  -webkit-user-select: none; user-select: none;
}

.bn-bar {
  position: absolute;
  left: calc(var(--bn-side) + var(--bn-safe-l) * (1 - var(--bn-docked)));
  right: calc(var(--bn-side) + var(--bn-safe-r) * (1 - var(--bn-docked)));
  bottom: calc(var(--bn-air) * (1 - var(--bn-docked)));
  height: calc(var(--bn-h) + var(--bn-under) * var(--bn-docked));
  max-width: calc(var(--bn-max) + 100% * var(--bn-docked));
  margin: 0 auto;
  /* Docked on a tablet, the five places keep together in the middle. */
  padding: 0 calc(var(--bn-pad) + max(0px, (100% - var(--bn-max)) / 2) * var(--bn-docked) + var(--bn-safe-r) * var(--bn-docked))
    calc(var(--bn-under) * var(--bn-docked))
    calc(var(--bn-pad) + max(0px, (100% - var(--bn-max)) / 2) * var(--bn-docked) + var(--bn-safe-l) * var(--bn-docked));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: var(--bn-h);
  isolation: isolate;
  pointer-events: auto;
}

/* The surface. Plain by default; each look dresses it. */
.bn-shape {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--bn-bg);
}

/* The indicator: one column wide, in the first column, moved along by --bn-i. */
.bn-ind {
  grid-row: 1; grid-column: 1;
  position: relative; z-index: 0;
  pointer-events: none;
  transform: translateX(calc(var(--bn-i, 0) * 100%));
}
.bn-ind::before, .bn-ind::after { content: none; position: absolute; }
.bottomnav[data-active="none"] .bn-ind { opacity: 0; }
.bottomnav.is-ready .bn-ind { transition: transform 460ms var(--ease-spring), opacity var(--t-2) var(--ease-out); }

/* The places. */
.bn-item {
  grid-row: 1;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; height: var(--bn-h); margin: 0; padding: 0 2px;
  color: var(--bn-ink); background: none; border: 0; border-radius: 14px;
  font: inherit; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--t-2) var(--ease-out);
}
.bn-item[data-slot="home"] { grid-column: 1; }
.bn-item[data-slot="library"] { grid-column: 2; }
.bn-item[data-slot="action"] { grid-column: 3; }
/* the page's two (bottomnav.js paintContext) */
.bn-item[data-slot="ctx1"] { grid-column: 4; }
.bn-item[data-slot="ctx2"] { grid-column: 5; }
.bn-item[aria-current="page"] { color: var(--bn-on); }
/* one of them with its sheet up: an ×, in the colour of the current place */
.bn-item.is-open:not(.bn-fab) { color: var(--bn-on); }
.bn-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.bn-ico {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  transition: scale var(--t-1) var(--ease-out), translate 420ms var(--ease-spring);
}
.bn-ico > svg { grid-area: 1 / 1; width: 24px; height: 24px; overflow: visible; }
.bn-ico .s { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bn-ico .f { fill: currentColor; stroke: none; opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.bn-ico .d { fill: currentColor; }
.bn-item[aria-current="page"] .bn-ico .f { opacity: var(--bn-fill); }

.bn-label {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; line-height: 1.15; letter-spacing: .01em;
}
.bn-item[aria-current="page"] .bn-label { font-weight: 700; }

/* A look without labels still names every place, to a screen reader. */
.bottomnav[data-labels="none"] .bn-label,
.bottomnav[data-labels="active"] .bn-item:not([aria-current="page"]) .bn-label,
.bottomnav[data-fab="big"] .bn-fab .bn-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* A press, felt: the icon gives a little under the thumb. */
:root:not([data-motion="off"]) .bn-item:active .bn-ico { scale: .88; }

/* ---- the binder, in its cover's colour */
.bn-cover {
  display: block; width: 17px; height: 21px;
  border-radius: 3px 4.5px 4.5px 3px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0 3px, rgba(255, 255, 255, .14) 3px 4px, transparent 4px),
    linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 55%),
    var(--cover, #2f6f4f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 1px 3px rgba(0, 0, 0, .35);
  transition: box-shadow var(--t-2) var(--ease-out);
}
/* A shelf's chip: its cabinet in the frame's colour, two shelves across it. */
.bn-cover.is-shelf {
  width: 18px; border-radius: 3px;
  background:
    linear-gradient(transparent 6px, rgba(0, 0, 0, .42) 6px 7.5px, transparent 7.5px 13px, rgba(0, 0, 0, .42) 13px 14.5px, transparent 14.5px),
    linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 55%),
    var(--cover, #5b3a24);
}
.bn-item[aria-current="page"] .bn-cover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 2px color-mix(in srgb, var(--bn-on) 70%, transparent);
}

/* ---- the middle button: Menu
   Inline, it sits in the row as a small accent chip; big (data-fab="big"), it
   is a button of its own, lifted out of the bar. Its icon is the menu's tiles
   with the mark's spark (bottomnav.js MENU_GLYPHS), crossfaded to an × while
   the menu is up. */
.bn-fab .bn-ico {
  width: 42px; height: 30px; border-radius: 11px;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}
.bn-fab .bn-ico > svg { width: 22px; height: 22px; transition: opacity var(--t-2) var(--ease-out), scale var(--t-2) var(--ease-out), rotate var(--t-3) var(--ease-spring); }
.bn-fab .bn-ico .s { stroke-width: 2.1; }
.bn-fab .bn-act, .bn-fab .bn-close { opacity: 0; scale: .55; }
.bn-fab .bn-close { rotate: -90deg; }
.bn-fab.is-open .bn-act { rotate: 90deg; }
.bn-fab:not(.is-open) .bn-act.is-menu,
.bn-fab.is-open .bn-close { opacity: 1; scale: 1; rotate: 0deg; }
/* The spark: solid, and at Full motion a twinkle every few seconds — a quarter
   turn and a swell, the small one just after the big one. */
.bn-ico .sp { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
:root[data-motion="full"] .bottomnav.is-ready .bn-fab .bn-act .sp { animation: bn-twinkle 5.6s var(--ease-out) infinite; }
:root[data-motion="full"] .bottomnav.is-ready .bn-fab .bn-act .sp.is-small { animation-delay: .28s; }
@keyframes bn-twinkle {
  0%, 80%, 100% { scale: 1; rotate: 0deg; opacity: 1; }
  87% { scale: 1.32; rotate: 45deg; opacity: 1; }
  93% { scale: .88; rotate: 90deg; opacity: .8; }
}
.bn-fab .bn-label { color: var(--bn-ink); }
.bn-sheen { display: none; }

.bottomnav[data-fab="big"] .bn-fab .bn-ico {
  width: var(--bn-fab-u); height: var(--bn-fab-u); border-radius: 50%;
  color: var(--bn-fab-ink);
  background: var(--bn-fab-bg);
  translate: 0 calc(-1 * var(--bn-lift-u));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
    0 8px 22px color-mix(in srgb, var(--accent) 36%, transparent),
    0 2px 6px rgba(0, 0, 0, .3);
}
.bottomnav[data-fab="big"] .bn-fab .bn-ico > svg { width: 26px; height: 26px; }
.bottomnav[data-fab="big"] .bn-fab .bn-ico .s { stroke-width: 2.3; }
.bottomnav[data-fab="big"] .bn-fab:focus-visible { outline: none; }
.bottomnav[data-fab="big"] .bn-fab:focus-visible .bn-ico { outline: 2px solid var(--accent); outline-offset: 3px; }
:root:not([data-motion="off"]) .bottomnav[data-fab="big"] .bn-fab:active .bn-ico { scale: .92; }

/* The pulse when the action changes with the place (bottomnav.js bump):
   a spring and a ring at Full, the new icon fading in at Reduced. */
.bn-fab .bn-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--accent);
}
:root[data-motion="full"] .bn-fab .bn-ico.is-bump { animation: bn-bump 560ms var(--ease-spring); }
:root[data-motion="full"] .bn-fab .bn-ico.is-bump::after { animation: bn-ring 620ms var(--ease-out); }
:root[data-motion="reduced"] .bn-fab .bn-ico.is-bump > svg { animation: bn-fade 140ms var(--ease-out); }
@keyframes bn-bump { 0% { scale: .82; } 55% { scale: 1.08; } 100% { scale: 1; } }
@keyframes bn-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@keyframes bn-fade { from { opacity: 0; } }

/* Reduced: no travel. The indicator and the bubble simply move; icons fade. */
:root[data-motion="reduced"] .bottomnav.is-ready .bn-ind { transition: opacity var(--t-2) var(--ease-out); }
:root[data-motion="reduced"] .bn-ico { transition: scale var(--t-1) var(--ease-out); }
:root[data-motion="reduced"] .bn-fab .bn-ico > svg { transition: opacity var(--t-2) var(--ease-out); }
/* Nothing moves before the bar is placed (bottomnav.js adds .is-ready a frame later). */
.bottomnav:not(.is-ready) *, .bottomnav:not(.is-ready) *::before, .bottomnav:not(.is-ready) *::after { transition: none !important; }

/* ================================================================ the looks */

/* ---- 1 · Glass pill (the default): the app's own glass, floating, with a
   highlight that slides to the current place and a raised accent button. */
.bottomnav[data-nav-style="pill"] .bn-shape {
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-2) 64%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: var(--glass-edge), var(--shadow-2);
}
.bottomnav[data-nav-style="pill"] .bn-ind::before {
  content: ""; inset: 7px 3px; border-radius: 22px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
}
.bottomnav[data-nav-style="pill"] {
  --bn-fab-bg: linear-gradient(150deg, color-mix(in srgb, var(--accent-fill) 72%, #fff), var(--accent-fill) 52%,
    color-mix(in srgb, var(--accent-fill) 70%, var(--accent-2)));
}
.bottomnav[data-nav-style="pill"] .bn-fab .bn-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px color-mix(in srgb, var(--bg-2) 55%, transparent),
    0 10px 26px color-mix(in srgb, var(--accent) 44%, transparent);
}

/* ---- 2 · Classic: solid, a hairline along the top, current icons filled. */
.bottomnav[data-nav-style="classic"] { --bn-fill: .34; }
.bottomnav[data-nav-style="classic"] .bn-shape {
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
}
/* (its Menu: the accent button, as a pill — after Floating Dock, below, so it wins) */

/* ---- 3 · Tile dock: a frosted tray with rounded shoulders; each place is a
   tile, the current one lit in the accent. */
.bottomnav[data-nav-style="dock"] .bn-shape {
  border-radius: 22px 22px 0 0;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: var(--glass-edge), 0 -10px 30px rgba(0, 0, 0, .28);
}
.bottomnav[data-nav-style="dock"] .bn-item { gap: 4px; }
.bottomnav[data-nav-style="dock"] .bn-ico {
  width: 40px; height: 38px; border-radius: 12px;
  background: var(--bg-3);
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 0 0 1px var(--line-soft);
}
.bottomnav[data-nav-style="dock"] .bn-ico::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--accent-fill); opacity: 0;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: opacity var(--t-2) var(--ease-out);
}
.bottomnav[data-nav-style="dock"] .bn-ico { isolation: isolate; }
.bottomnav[data-nav-style="dock"] .bn-item[aria-current="page"] .bn-ico { color: var(--accent-ink); }
.bottomnav[data-nav-style="dock"] .bn-item[aria-current="page"] .bn-ico::before { opacity: 1; }
.bottomnav[data-nav-style="dock"] .bn-item[aria-current="page"] { color: var(--ink); }
.bottomnav[data-nav-style="dock"] .bn-ico > svg { width: 22px; height: 22px; }
.bottomnav[data-nav-style="dock"] .bn-label { font-size: 10px; }
.bottomnav[data-nav-style="dock"] .bn-fab .bn-ico {
  width: 40px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-3));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
:root[data-motion="full"] .bottomnav.is-ready[data-nav-style="dock"] .bn-item[aria-current="page"] .bn-ico { animation: bn-pop 420ms var(--ease-spring); }
@keyframes bn-pop { 0% { scale: .86; } 60% { scale: 1.07; } 100% { scale: 1; } }

/* ---- 4 · Raised: a round button lifted out of a solid bar on a collar of
   the bar's own colour, so the bar seems to swell up around it. */
.bottomnav[data-nav-style="raised"] .bn-shape {
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .22);
}
.bottomnav[data-nav-style="raised"] .bn-fab .bn-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 6px var(--bn-bg),
    0 -6px 16px -4px rgba(0, 0, 0, .28), 0 12px 26px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---- 5 · Notch: the bar's top edge curves away around the button, which
   floats in the hollow. The curve is a real one: an SVG mask, shoulders and
   all, in the middle of a mask of plain bar either side. */
.bottomnav[data-nav-style="notch"] {
  --bn-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M0 0H18.77A8 8 0 0 1 26.62 6.48A34 34 0 0 0 93.38 6.48A8 8 0 0 1 101.23 0H120V64H0Z'/%3E%3C/svg%3E");
}
.bottomnav[data-nav-style="notch"] .bn-shape {
  background: none;
  filter: drop-shadow(0 -1px 0 var(--line)) drop-shadow(0 -8px 14px rgba(0, 0, 0, .22));
}
.bottomnav[data-nav-style="notch"] .bn-shape::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bn-bg);
  -webkit-mask:
    var(--bn-notch) 50% 0 / 120px 64px no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - 59px) 100% no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - 59px) 100% no-repeat,
    linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 63px) no-repeat;
  mask:
    var(--bn-notch) 50% 0 / 120px 64px no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - 59px) 100% no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - 59px) 100% no-repeat,
    linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 63px) no-repeat;
}
.bottomnav[data-nav-style="notch"] { --bn-fill: .3; }
@media (max-width: 980px) and (max-height: 500px) {
  .bottomnav[data-nav-style="notch"]:not(.is-preview) .bn-shape::before { -webkit-mask: none; mask: none; }
}

/* ---- 6 · Diamond: a faceted button, turned on its point, over a flat bar
   edged with a line of light; a small diamond marks the current place. */
.bottomnav[data-nav-style="diamond"] .bn-shape {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent) 50%, transparent) 0 0 / 100% 1px no-repeat,
    var(--bn-bg);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .2), inset 0 1px 0 var(--line);
}
.bottomnav[data-nav-style="diamond"] .bn-fab .bn-ico {
  border-radius: 12px; rotate: 45deg;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-fill) 70%, #fff), var(--accent-fill) 45%,
    color-mix(in srgb, var(--accent-fill) 55%, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bottomnav[data-nav-style="diamond"] .bn-fab .bn-ico > svg { rotate: -45deg; }
.bottomnav[data-nav-style="diamond"] .bn-ind::before {
  content: ""; left: 50%; top: 4px; width: 6px; height: 6px; margin-left: -3px;
  rotate: 45deg; border-radius: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}

/* ---- 7 · Squircle glow: a dark island in either theme, icons only, and a
   squircle button that glows in the accent. */
.bottomnav[data-nav-style="squircle"] {
  --bn-ink: rgba(226, 231, 242, .52);
  --bn-on: #fff;
  --bn-fill: .18;
  --bn-fab-bg: linear-gradient(155deg, color-mix(in srgb, var(--accent-fill) 70%, #fff), var(--accent-fill) 50%,
    color-mix(in srgb, var(--accent-fill) 65%, var(--accent-2)));
}
.bottomnav[data-nav-style="squircle"] .bn-shape {
  border-radius: 26px;
  background: rgba(11, 12, 17, .94);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .3);
}
.bottomnav[data-nav-style="squircle"] .bn-fab .bn-ico {
  border-radius: 38%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .12),
    0 8px 24px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 34%, transparent);
}
.bottomnav[data-nav-style="squircle"] .bn-ind::before {
  content: ""; left: 50%; bottom: 10px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.bottomnav[data-nav-style="squircle"] .bn-item[aria-current="page"] .bn-ico { translate: 0 -3px; }

/* ---- 8 · Sliding pill: a soft pill glides behind the current icon; labels
   underneath. The bar is tinted with the accent. */
.bottomnav[data-nav-style="slide"] {
  --bn-bg: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  --bn-on: var(--ink);
  --bn-fill: .9;
}
.bottomnav[data-nav-style="slide"] .bn-shape { border-top: 1px solid var(--line-soft); box-shadow: 0 -6px 18px rgba(0, 0, 0, .16); }
.bottomnav[data-nav-style="slide"] .bn-item { gap: 6px; }
.bottomnav[data-nav-style="slide"] .bn-ind::before {
  content: ""; left: 50%; top: 50%; width: 58px; height: 32px; margin: -26px 0 0 -29px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.bottomnav[data-nav-style="slide"] .bn-item[aria-current="page"] .bn-ico { color: var(--accent-text); }
.bottomnav[data-nav-style="slide"] .bn-item[aria-current="page"] .bn-ico .f { opacity: .28; }
.bottomnav[data-nav-style="slide"] .bn-fab .bn-ico {
  width: 46px; height: 32px; border-radius: 16px;
  color: var(--accent-ink); background: var(--accent-fill); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ---- 9 · Expanding: icons only, until one is current and opens out into a
   pill with its name. The row reflows, and the icons slide there (FLIP). */
.bottomnav[data-nav-style="expand"] .bn-bar { display: flex; gap: 2px; }
.bottomnav[data-nav-style="expand"] .bn-item { flex: 1 1 0; flex-direction: row; gap: 7px; padding: 0 6px; }
.bottomnav[data-nav-style="expand"] .bn-item[aria-current="page"] { flex-grow: 2.5; }
.bottomnav[data-nav-style="expand"] .bn-item::before {
  content: ""; position: absolute; inset: 8px 0; z-index: -1; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  opacity: 0; transform: scaleX(.55);
  transition: opacity var(--t-2) var(--ease-out), transform 420ms var(--ease-spring);
}
.bottomnav[data-nav-style="expand"] .bn-item[aria-current="page"]::before { opacity: 1; transform: none; }
.bottomnav[data-nav-style="expand"] .bn-item[aria-current="page"] .bn-label { font-size: 12.5px; animation: bn-label-in 320ms var(--ease-out); }
@keyframes bn-label-in { from { opacity: 0; transform: translateX(-6px); } }
:root:not([data-motion="full"]) .bottomnav[data-nav-style="expand"] .bn-item::before { transform: none; }
:root[data-motion="off"] .bottomnav[data-nav-style="expand"] .bn-label { animation: none; }
.bottomnav[data-nav-style="expand"] .bn-ind { display: none; }
.bottomnav[data-nav-style="expand"] .bn-shape {
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-3) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: var(--glass-edge), var(--shadow-2);
}
.bottomnav[data-nav-style="expand"] .bn-fab .bn-ico {
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--accent-ink); background: var(--accent-fill); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 36%, transparent);
}

/* ---- 10 · Dot: quiet icons on a solid bar, and one glowing dot that follows you. */
.bottomnav[data-nav-style="dot"] { --bn-on: var(--ink); --bn-fill: .14; }
.bottomnav[data-nav-style="dot"] .bn-shape { border-top: 1px solid var(--line-soft); }
.bottomnav[data-nav-style="dot"] .bn-ind::before {
  content: ""; left: 50%; bottom: 9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 80%, transparent);
}
.bottomnav[data-nav-style="dot"] .bn-item[aria-current="page"] .bn-ico { translate: 0 -3px; }
.bottomnav[data-nav-style="dot"] .bn-fab .bn-ico {
  width: 38px; height: 38px; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 1.6px var(--accent);
}

/* ---- 11 · Spotlight: a line along the top edge, and the light it casts down
   onto the current place. */
.bottomnav[data-nav-style="spotlight"] .bn-shape { border-top: 1px solid var(--line); }
.bottomnav[data-nav-style="spotlight"] .bn-ind::before {
  content: ""; left: 50%; top: 0; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 3px 3px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.bottomnav[data-nav-style="spotlight"] .bn-ind::after {
  content: ""; left: 8%; right: 8%; top: 0; bottom: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 85%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.bottomnav[data-nav-style="spotlight"] .bn-item[aria-current="page"] { color: var(--ink); }
.bottomnav[data-nav-style="spotlight"] .bn-item[aria-current="page"] .bn-ico { color: var(--accent-text); }

/* ---- 12 · Bubble: the current icon rises out of the bar into a bubble of
   the accent, on a collar of the bar's colour; its name shows beneath. */
.bottomnav[data-nav-style="bubble"] .bn-shape { border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); }
.bottomnav[data-nav-style="bubble"] .bn-ind::before {
  content: ""; left: 50%; top: -16px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: 0 0 0 5px var(--bn-bg), 0 -8px 16px -2px rgba(0, 0, 0, .22), 0 8px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bottomnav[data-nav-style="bubble"] .bn-item[aria-current="page"] { color: var(--ink); }
.bottomnav[data-nav-style="bubble"] .bn-item[aria-current="page"] .bn-ico { translate: 0 -23px; color: var(--accent-ink); }
.bottomnav[data-nav-style="bubble"] .bn-item[aria-current="page"] .bn-ico .f { opacity: .3; }
.bottomnav[data-nav-style="bubble"] .bn-label { position: absolute; bottom: 7px; left: 2px; right: 2px; text-align: center; }
.bottomnav[data-nav-style="bubble"] .bn-item[aria-current="page"] .bn-label { animation: bn-fade var(--t-3) var(--ease-out); }
:root[data-motion="off"] .bottomnav[data-nav-style="bubble"] .bn-label { animation: none; }
.bottomnav[data-nav-style="bubble"] .bn-fab .bn-ico { width: 40px; height: 40px; border-radius: 50%; }

/* ---- 13 · Soft: neumorphic — the bar and its button moulded from the one
   surface; the current place pressed in. */
.bottomnav[data-nav-style="soft"] {
  --soft-dark: rgba(0, 0, 0, .55);
  --soft-light: rgba(255, 255, 255, .055);
  --bn-bg: var(--bg);
  --bn-fab-bg: linear-gradient(145deg, color-mix(in srgb, var(--bg) 86%, #fff), var(--bg) 70%);
  --bn-fab-ink: var(--accent-text);
}
:root[data-theme="light"] .bottomnav[data-nav-style="soft"] {
  --soft-dark: rgba(92, 84, 70, .22);
  --soft-light: rgba(255, 255, 255, .95);
}
.bottomnav[data-nav-style="soft"] .bn-shape {
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 24px var(--soft-dark), inset 0 1px 0 var(--soft-light);
}
.bottomnav[data-nav-style="soft"] .bn-ico { width: 44px; height: 36px; border-radius: 14px; isolation: isolate; }
.bottomnav[data-nav-style="soft"] .bn-ico::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: inset 3px 3px 7px var(--soft-dark), inset -3px -3px 7px var(--soft-light);
  opacity: 0; transition: opacity var(--t-2) var(--ease-out);
}
.bottomnav[data-nav-style="soft"] .bn-item[aria-current="page"] .bn-ico::before { opacity: 1; }
.bottomnav[data-nav-style="soft"] .bn-fab .bn-ico {
  box-shadow: 6px 6px 14px var(--soft-dark), -5px -5px 12px var(--soft-light), inset 0 1px 0 var(--soft-light);
}
.bottomnav[data-nav-style="soft"] .bn-fab .bn-ico::before { content: none; }
.bottomnav[data-nav-style="soft"] .bn-fab .bn-ico .s { stroke-width: 2.6; }

/* ---- 14 · Gradient: a floating band in the accent, running into violet;
   the button is the page's own colour, lifted out of it. */
.bottomnav[data-nav-style="gradient"] {
  --bn-ink: color-mix(in srgb, var(--accent-ink) 68%, transparent);
  --bn-on: var(--accent-ink);
  --bn-fill: .3;
  --bn-fab-bg: var(--bg-2);
  --bn-fab-ink: var(--accent-text);
}
.bottomnav[data-nav-style="gradient"] .bn-shape {
  border-radius: 24px;
  background: linear-gradient(115deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 45%, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px color-mix(in srgb, var(--accent) 34%, transparent), 0 2px 8px rgba(0, 0, 0, .25);
}
.bottomnav[data-nav-style="gradient"] .bn-ind::before {
  content: ""; inset: 8px 5px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
}
.bottomnav[data-nav-style="gradient"] .bn-fab .bn-ico {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ink) 22%, transparent), 0 10px 22px rgba(0, 0, 0, .3);
}
.bottomnav[data-nav-style="gradient"] .bn-item:focus-visible { outline-color: var(--accent-ink); }

/* ---- 15 · Islands: two floating glass islands, the places two and two, and
   a big round button in the water between them. */
.bottomnav[data-nav-style="islands"] .bn-shape { background: none; }
.bottomnav[data-nav-style="islands"] .bn-shape::before,
.bottomnav[data-nav-style="islands"] .bn-shape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: calc(40% - 7px);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-2) 66%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: var(--glass-edge), var(--shadow-2);
}
.bottomnav[data-nav-style="islands"] .bn-shape::before { left: 0; }
.bottomnav[data-nav-style="islands"] .bn-shape::after { right: 0; }
.bottomnav[data-nav-style="islands"] .bn-ind::before {
  content: ""; inset: 7px 9px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bottomnav[data-nav-style="islands"] .bn-fab .bn-ico {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-fill) 70%, #fff), var(--accent-fill) 50%,
    color-mix(in srgb, var(--accent-fill) 70%, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 28px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 8px rgba(0, 0, 0, .3);
}

/* ---- 16 · Segmented: a recessed track, and a raised thumb that slides to
   the current place. */
.bottomnav[data-nav-style="segmented"] { --bn-on: var(--ink); }
.bottomnav[data-nav-style="segmented"] .bn-shape {
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-3) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .3), var(--shadow-2);
}
.bottomnav[data-nav-style="segmented"] .bn-ind::before {
  content: ""; inset: 4px 2px; border-radius: 15px;
  background: var(--bg-2);
  box-shadow: inset 0 1px 0 var(--hairline), 0 0 0 1px var(--line), 0 3px 10px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] .bottomnav[data-nav-style="segmented"] .bn-ind::before { box-shadow: 0 0 0 1px var(--line), 0 3px 8px rgba(20, 24, 32, .12); }
.bottomnav[data-nav-style="segmented"] .bn-item[aria-current="page"] .bn-ico { color: var(--accent-text); }
.bottomnav[data-nav-style="segmented"] .bn-fab .bn-ico { width: 36px; height: 26px; border-radius: 9px; }

/* ---- 17 · Wireframe: hairline outlines, corner ticks and blueprint type;
   an outlined frame moves to the current place. */
.bottomnav[data-nav-style="wireframe"] { --bn-on: var(--accent-text); --bn-fill: 0; }
.bottomnav[data-nav-style="wireframe"] .bn-shape {
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
}
.bottomnav[data-nav-style="wireframe"] .bn-shape::before,
.bottomnav[data-nav-style="wireframe"] .bn-shape::after {
  content: ""; position: absolute; width: 9px; height: 9px; border: 0 solid var(--accent);
}
.bottomnav[data-nav-style="wireframe"] .bn-shape::before { top: -4px; left: -4px; border-width: 1.5px 0 0 1.5px; }
.bottomnav[data-nav-style="wireframe"] .bn-shape::after { right: -4px; bottom: -4px; border-width: 0 1.5px 1.5px 0; }
.bottomnav[data-nav-style="wireframe"] .bn-ico .s { stroke-width: 1.3; }
.bottomnav[data-nav-style="wireframe"] .bn-label {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.bottomnav[data-nav-style="wireframe"] .bn-ind::before {
  content: ""; inset: 6px 3px; border-radius: 9px;
  border: 1px solid var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
}
.bottomnav[data-nav-style="wireframe"] .bn-fab .bn-ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 1px var(--accent);
}
.bottomnav[data-nav-style="wireframe"] .bn-fab .bn-ico .s { stroke-width: 1.5; }

/* ---- 18 · Minimal: no bar at all — icons over a fade of the page's own
   colour; the current one darker and a size up. */
.bottomnav[data-nav-style="minimal"] { --bn-on: var(--ink); --bn-fill: 0; }
.bottomnav[data-nav-style="minimal"] .bn-shape {
  top: calc(-1 * var(--bn-up));
  background: linear-gradient(0deg, var(--bg) 55%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.bottomnav[data-nav-style="minimal"] .bn-item[aria-current="page"] .bn-ico { scale: 1.12; }
.bottomnav[data-nav-style="minimal"] .bn-item[aria-current="page"] .bn-ico .s { stroke-width: 2.1; }
:root:not([data-motion="off"]) .bottomnav[data-nav-style="minimal"] .bn-item[aria-current="page"]:active .bn-ico { scale: 1; }
.bottomnav[data-nav-style="minimal"] .bn-fab .bn-ico {
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--accent-ink); background: var(--accent-fill); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ---- 19 · Translucent: thin, see-through and native-feeling — a heavy blur,
   a hairline, small labels, the current icon solid. */
.bottomnav[data-nav-style="translucent"] { --bn-fill: 1; }
.bottomnav[data-nav-style="translucent"] .bn-shape {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.bottomnav[data-nav-style="translucent"] .bn-item { gap: 1px; }
.bottomnav[data-nav-style="translucent"] .bn-ico > svg { width: 25px; height: 25px; }
.bottomnav[data-nav-style="translucent"] .bn-label { font-size: 10px; font-weight: 550; }
.bottomnav[data-nav-style="translucent"] .bn-item[aria-current="page"] .bn-label { font-weight: 650; }
.bottomnav[data-nav-style="translucent"] .bn-fab .bn-ico {
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--accent-ink); background: var(--accent-fill); box-shadow: none;
}
.bottomnav[data-nav-style="translucent"] .bn-fab .bn-ico > svg { width: 18px; height: 18px; }
.bottomnav[data-nav-style="translucent"] .bn-fab .bn-ico .s { stroke-width: 2.6; }

/* ---- 20 · Sport: a black bar in either theme with an accent stripe, bold
   slanted labels, a slanted block behind the current place and a slanted
   button with a hard shadow. */
.bottomnav[data-nav-style="sport"] {
  --bn-bg: #0c0d12;
  --bn-ink: rgba(255, 255, 255, .56);
  --bn-on: var(--accent-ink);
  --bn-fill: .3;
}
.bottomnav[data-nav-style="sport"] .bn-shape {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 10px),
    var(--bn-bg);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .3);
}
.bottomnav[data-nav-style="sport"] .bn-label {
  font-size: 9.5px; font-weight: 850; font-style: italic; letter-spacing: .07em; text-transform: uppercase;
}
.bottomnav[data-nav-style="sport"] .bn-ind::before {
  content: ""; inset: 9px 7px 8px; border-radius: 4px;
  background: var(--accent-fill); transform: skewX(-14deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}
.bottomnav[data-nav-style="sport"] .bn-fab .bn-ico {
  width: calc(var(--bn-fab-u) + 18px); border-radius: 7px;
  transform: skewX(-14deg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.bottomnav[data-nav-style="sport"] .bn-fab .bn-ico > svg { transform: skewX(14deg); }
.bottomnav[data-nav-style="sport"] .bn-fab .bn-ico::after { border-radius: 7px; }
.bottomnav[data-nav-style="sport"] .bn-item:focus-visible { outline-color: #fff; }

/* ======================================================= 21–26 · the ERP six
   The bottom bar of the ERP app, in six looks: Center Action (the default),
   Classic Tabs, Magic Bubble, Floating Dock, Glass Capsule and Center Orb.
   They share one vocabulary, set here: an opaque surface (docked, with shadows
   cast upward, or floating, with layered ones), 11px labels that turn bold and
   take the accent when current, an icon that bounces once as it becomes
   current (is-picked, bottomnav.js), indicators that glide without
   overshooting, and an action that is not a place: a tinted chip in the row,
   or a gradient orb with a gloss and a slow shimmer (.bn-sheen) that pops and
   sends out a ripple as the binder's sheet opens. */
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"], [data-nav-style="center-orb"]) {
  --bn-ink: color-mix(in srgb, var(--ink-2) 50%, var(--ink-3));
  --bn-on: var(--accent-text);
  --bn-fill: .28;
  /* the surfaces: a docked bar a step lighter than the page, a floating one a step more */
  --erp-dock: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)), var(--bg-2);
  --erp-float: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--bg-2);
  /* the accent lit and shaded, for the orbs and the bubble */
  --erp-hi: color-mix(in srgb, var(--accent-fill) 62%, #fff);
  --erp-lo: color-mix(in srgb, var(--accent-fill) 70%, #000);
}
:root[data-theme="light"] .bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"], [data-nav-style="center-orb"]) {
  --bn-ink: var(--ink-3);
  --erp-dock: var(--bg-2);
  --erp-float: var(--bg-2);
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"], [data-nav-style="center-orb"]) .bn-label {
  font-size: 11px; line-height: 14px; letter-spacing: .1px;
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"], [data-nav-style="center-orb"]) .bn-item {
  transition: color 150ms cubic-bezier(.2, 0, 0, 1);
}
/* A press gives a little less than elsewhere: these cells are wide. */
:root:not([data-motion="off"]) .bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"], [data-nav-style="center-orb"]) .bn-item:active .bn-ico { scale: .94; }

/* Becoming current: the icon dips and bounces back, once. */
:root[data-motion="full"] .bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"],
  [data-nav-style="glass-capsule"], [data-nav-style="center-orb"]) .bn-item.is-picked .bn-ico {
  animation: bn-erp-bounce 360ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes bn-erp-bounce { 0%, 100% { scale: 1; } 30% { scale: .85; } 65% { scale: 1.12; } }

/* The indicators glide to the new place and stop, without a wobble. */
:root[data-motion="full"] .bottomnav.is-ready:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"],
  [data-nav-style="floating-dock"], [data-nav-style="center-orb"]) .bn-ind {
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), opacity var(--t-2) var(--ease-out);
}

/* The Menu in the row (Classic Tabs, Magic Bubble, Floating Dock, Glass
   Capsule, and Classic): not a place, so not drawn like one — a small button
   of the accent, lit from above, a soft gloss over it and a glow of its own
   colour under it, round the glyph drawn solid in white (the mark's tiles and
   spark). Each look gives it a shape of its own, further down: a squircle, a
   pill, a little orb, an app tile, a bead of glass. While the menu is up it
   keeps its colour, its glyph turned to an ×, with a halo round it. */
.bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) {
  --bn-act-sw: .6;
  --bn-mn-hi: color-mix(in srgb, var(--accent-fill) 60%, #fff);
  --bn-mn-lo: color-mix(in srgb, var(--accent-fill) 68%, #000);
  --bn-mn-glow: color-mix(in srgb, var(--accent) 60%, transparent);
}
:root[data-theme="light"] .bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) {
  --bn-mn-glow: color-mix(in srgb, var(--accent) 42%, transparent);
}
.bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) .bn-fab .bn-ico {
  isolation: isolate;
  width: 44px; height: 30px; border-radius: 11px;
  color: var(--accent-ink);
  background: linear-gradient(150deg, var(--bn-mn-hi), var(--accent-fill) 55%, var(--bn-mn-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 2px 4px -1px var(--bn-mn-glow), 0 6px 16px -5px var(--bn-mn-glow);
  transition: scale var(--t-1) var(--ease-out), translate 420ms var(--ease-spring), box-shadow var(--t-2) var(--ease-out);
}
.bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) .bn-fab .bn-ico > svg { position: relative; width: 21px; height: 21px; }
/* the glyph solid, and the gloss over the button's upper half (.bn-sheen, under the glyph) */
.bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) .bn-fab .bn-act .s { fill: currentColor; }
.bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) .bn-fab .bn-sheen {
  display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110% 80% at 30% 0%, rgba(255, 255, 255, .3), transparent 62%);
}
.bottomnav:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"], [data-nav-style="floating-dock"],
  [data-nav-style="glass-capsule"], [data-nav-style="classic"]) .bn-fab.is-open .bn-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 6px 18px -4px var(--bn-mn-glow);
}
/* Opening, at Full motion, it pops, as the orbs do. */
:root[data-motion="full"] .bottomnav.is-ready:is([data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"], [data-nav-style="classic"]) .bn-fab.is-open .bn-ico {
  animation: bn-erp-pop 320ms cubic-bezier(.2, 0, 0, 1);
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"], [data-nav-style="magic-bubble"],
  [data-nav-style="floating-dock"], [data-nav-style="glass-capsule"]) .bn-fab.is-open .bn-label { color: var(--bn-on); font-weight: 700; }

/* The docked bars: a surface a step up from the page, shadows cast upward
   (in the dark, a lit top edge and a deep shade, since a plain shadow vanishes). */
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"]) .bn-shape {
  background: var(--erp-dock);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 -1px 0 rgba(0, 0, 0, .4), 0 -8px 24px -4px rgba(0, 0, 0, .48);
}
:root[data-theme="light"] .bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"]) .bn-shape {
  box-shadow: 0 -1px 0 rgba(145, 158, 171, .16), 0 -4px 12px -2px rgba(145, 158, 171, .12), 0 -12px 32px -8px rgba(145, 158, 171, .16);
}

/* The top indicator of Center Action and Classic Tabs: a short bar hanging
   from the top edge over the current place, and a wash of light beneath it. */
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"]) .bn-ind::before {
  content: ""; left: 50%; top: 0; width: 24px; height: 3px; margin-left: -12px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-text);
  box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--accent) 26%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--accent) 32%, transparent);
}
:root[data-theme="light"] .bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"]) .bn-ind::before {
  box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--accent) 38%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--accent) 48%, transparent);
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="classic-tabs"]) .bn-ind::after {
  content: ""; left: 50%; top: 3px; width: 64px; height: 32px; margin-left: -32px;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}

/* The two orbs: the accent in a gradient, a gloss over the top, and a shimmer
   — soft light and shade drifting round inside it, at Full motion. */
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-fab .bn-ico {
  isolation: isolate;
  color: var(--accent-ink);
  transition: scale 300ms var(--ease-spring), translate 300ms var(--ease-spring);
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-fab .bn-ico > svg { position: relative; }
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-sheen {
  display: block; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-sheen::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg,
    color-mix(in srgb, color-mix(in srgb, var(--accent-fill) 30%, #fff) 56%, transparent) 70deg, transparent 150deg,
    color-mix(in srgb, color-mix(in srgb, var(--accent-fill) 55%, #000) 48%, transparent) 240deg, transparent 330deg);
  transform: rotate(-20deg);
}
.bottomnav:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-sheen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .28), transparent 62%);
}
:root[data-motion="full"] .bottomnav.is-ready:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-sheen::before {
  animation: bn-erp-drift 9s linear infinite;
}
.navpick-mini .bn-sheen::before { animation: none !important; }
@keyframes bn-erp-drift { from { transform: rotate(-20deg); } to { transform: rotate(340deg); } }
/* The sheet opening: the orb pops, and one ring goes out from it. */
:root[data-motion="full"] .bottomnav.is-ready:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-fab.is-open .bn-ico {
  animation: bn-erp-pop 320ms cubic-bezier(.2, 0, 0, 1);
}
:root[data-motion="full"] .bottomnav.is-ready:is([data-nav-style="center-action"], [data-nav-style="center-orb"]) .bn-fab.is-open .bn-ico::after {
  animation: bn-erp-ripple 500ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes bn-erp-pop { 0%, 100% { scale: 1; } 40% { scale: 1.12; } }
@keyframes bn-erp-ripple { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }

/* ---- 21 · Center Action (the default): a docked bar with rounded top
   corners; the action a round gradient button standing up out of it, seated
   in a collar of the bar's own surface that runs into the bar's top edge
   through two curved shoulders. Every label, the action's included, starts at
   the same height in the bar. */
.bottomnav[data-nav-style="center-action"] .bn-shape { border-radius: 20px 20px 0 0; }
/* (The icon box is 28px round a 24px icon: 9px down puts the icon 11px down, and every label at 38px.) */
.bottomnav[data-nav-style="center-action"] .bn-item { justify-content: flex-start; gap: 1px; padding-top: 9px; }
.bottomnav[data-nav-style="center-action"] .bn-fab { gap: 2px; padding-top: 0; }
.bottomnav[data-nav-style="center-action"] .bn-fab .bn-ico {
  translate: none; margin-top: calc(-1 * var(--bn-lift-u));
  background: linear-gradient(135deg, var(--erp-hi), var(--accent-fill) 50%, var(--erp-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 0 rgba(0, 0, 0, .2),
    0 2px 4px -1px color-mix(in srgb, var(--accent) 54%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--accent) 68%, transparent);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-action"] .bn-fab .bn-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -2px 0 rgba(0, 0, 0, .12),
    0 2px 4px -1px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--accent) 56%, transparent);
}
:root:not([data-motion="off"]) .bottomnav[data-nav-style="center-action"] .bn-fab:active .bn-ico {
  scale: .9; translate: 0 2px; transition-duration: 90ms; transition-timing-function: var(--ease-out);
}
/* Its name shows under it, like every other place's — and may take a few
   pixels either side of its column, since "New binder" is a long one. */
.bottomnav[data-nav-style="center-action"] .bn-fab .bn-label {
  position: static; width: auto; height: auto; margin: 0; clip-path: none;
  max-width: calc(100% + 12px);
}
/* The collar: a disc of the bar's surface round the button (::after), over its
   shadow (::before), which is cut off at the bar's top edge so it never falls
   on the bar itself. */
.bottomnav[data-nav-style="center-action"] .bn-fab::before,
.bottomnav[data-nav-style="center-action"] .bn-fab::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: calc(-1 * var(--bn-lift-u) - 4px);
  width: calc(var(--bn-fab-u) + 8px); height: calc(var(--bn-fab-u) + 8px); margin-left: calc(var(--bn-fab-u) / -2 - 4px);
  border-radius: 50%;
}
.bottomnav[data-nav-style="center-action"] .bn-fab::before {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .4), 0 -8px 24px -4px rgba(0, 0, 0, .48);
  clip-path: inset(-40px -60px calc(100% - var(--bn-lift-u) - 4px) -60px);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-action"] .bn-fab::before {
  box-shadow: 0 -1px 0 rgba(145, 158, 171, .16), 0 -4px 12px -2px rgba(145, 158, 171, .14);
}
.bottomnav[data-nav-style="center-action"] .bn-fab::after {
  background: var(--erp-dock);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-action"] .bn-fab::after { box-shadow: none; }
/* The shoulders: where the collar meets the bar's top edge, a sliver of
   surface outside an 8px circle touching both, so the one curves into the
   other. Worked out for the button's 24px lift and 4px collar: the right one
   here, the left its mirror. */
.bottomnav[data-nav-style="center-action"] .bn-shape::before,
.bottomnav[data-nav-style="center-action"] .bn-shape::after {
  content: ""; position: absolute; top: -5.33px; width: 8.54px; height: 5.33px;
  background: var(--erp-dock);
  -webkit-mask: radial-gradient(circle 8px at 8.54px -2.67px, transparent 7.5px, #000 8px);
  mask: radial-gradient(circle 8px at 8.54px -2.67px, transparent 7.5px, #000 8px);
}
.bottomnav[data-nav-style="center-action"] .bn-shape::after { left: calc(50% + 31.06px); }
.bottomnav[data-nav-style="center-action"] .bn-shape::before { right: calc(50% + 31.06px); transform: scaleX(-1); }

/* ---- 22 · Classic Tabs: a docked bar of even tabs, the top indicator sliding
   between them, the Menu a gradient squircle (the shared shape, above). */
.bottomnav[data-nav-style="classic-tabs"] .bn-item { gap: 4px; }

/* ---- 23 · Magic Bubble: a docked bar with rounded top corners; the current
   icon lifts into a bubble of the accent that sits half out of the bar, in a
   notch the bar curves round. The notch is really cut out of the bar (a mask
   the width of many bars, the notch and its two 9px shoulders in the middle,
   slid along with the bubble), so whatever is behind the bar shows through
   it. The places run the full width on a tablet, so the notch always knows
   where the columns are. */
.bottomnav[data-nav-style="magic-bubble"] {
  --erp-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 200'%3E%3Cpath d='M0 0H1160A9 9 0 0 1 1168.78 7.02A32 32 0 0 0 1231.22 7.02A9 9 0 0 1 1240 0H2400V200H0Z'/%3E%3C/svg%3E");
}
.bottomnav[data-nav-style="magic-bubble"] .bn-shape {
  background: none;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .4)) drop-shadow(0 -6px 12px rgba(0, 0, 0, .34));
}
:root[data-theme="light"] .bottomnav[data-nav-style="magic-bubble"] .bn-shape {
  filter: drop-shadow(0 -1px 0 rgba(145, 158, 171, .22)) drop-shadow(0 -6px 14px rgba(145, 158, 171, .22));
}
.bottomnav[data-nav-style="magic-bubble"] .bn-shape::before {
  /* The notch's middle on the current column: (i + .5) fifths of the row, past
     the row's padding — written so the mask's percentage (of the bar less the
     mask) and its lengths add up to that. */
  --erp-x: calc((var(--bn-i, 0) + .5) * 20% + var(--bn-pad) * (4 - 2 * var(--bn-i, 0)) / 5 - 1200px + (var(--bn-i, 0) + .5) * 480px);
  content: ""; position: absolute; inset: 0;
  border-radius: 24px 24px 0 0;
  background: var(--erp-dock);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-mask: var(--erp-notch) var(--erp-x) 0 / 2400px 200px no-repeat;
  mask: var(--erp-notch) var(--erp-x) 0 / 2400px 200px no-repeat;
}
:root[data-theme="light"] .bottomnav[data-nav-style="magic-bubble"] .bn-shape::before { box-shadow: none; }
.bottomnav[data-nav-style="magic-bubble"][data-active="none"] .bn-shape::before { -webkit-mask: none; mask: none; }
:root[data-motion="full"] .bottomnav.is-ready[data-nav-style="magic-bubble"] .bn-ind {
  transition: transform 460ms cubic-bezier(.3, 1.25, .5, 1), opacity var(--t-2) var(--ease-out);
}
:root[data-motion="full"] .bottomnav.is-ready[data-nav-style="magic-bubble"] .bn-shape::before {
  transition: -webkit-mask-position 460ms cubic-bezier(.3, 1.25, .5, 1), mask-position 460ms cubic-bezier(.3, 1.25, .5, 1);
}
.bottomnav[data-nav-style="magic-bubble"] .bn-ind::before {
  content: ""; left: 50%; top: -26px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, .32), transparent 56%),
    linear-gradient(to bottom, transparent 52%, rgba(0, 0, 0, .14)),
    var(--accent-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(255, 255, 255, .06),
    0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
:root[data-theme="light"] .bottomnav[data-nav-style="magic-bubble"] .bn-ind::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 2px 4px color-mix(in srgb, var(--accent) 32%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--accent) 48%, transparent);
}
/* Moving, the bubble squashes and hops. */
:root[data-motion="full"] .bottomnav[data-nav-style="magic-bubble"] .bn-bar.is-hop .bn-ind::before {
  animation: bn-erp-bubble 360ms ease-in-out;
}
@keyframes bn-erp-bubble { 0%, 100% { translate: 0 0; scale: 1; } 40% { translate: 0 6px; scale: .86; } }
.bottomnav[data-nav-style="magic-bubble"] .bn-item { gap: 4px; }
/* The current icon rises into the bubble (its middle is on the bar's top edge). */
.bottomnav[data-nav-style="magic-bubble"] .bn-item[aria-current="page"] .bn-ico { translate: 0 -25px; color: var(--accent-ink); }
.bottomnav[data-nav-style="magic-bubble"] .bn-item[aria-current="page"] .bn-ico .f { opacity: .3; }
/* The other names step back a little, so the current one under the bubble stands out. */
.bottomnav[data-nav-style="magic-bubble"] .bn-label { scale: .91; transform-origin: 50% 0; transition: scale 250ms cubic-bezier(.2, 0, 0, 1); }
.bottomnav[data-nav-style="magic-bubble"] .bn-item[aria-current="page"] .bn-label { scale: 1; }
/* The Menu: a little orb, lit like the bubble. While the menu is up it is the
   current item and rises into the bubble, so it lets go of its own. */
.bottomnav[data-nav-style="magic-bubble"] .bn-fab .bn-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, .3), transparent 56%),
    linear-gradient(to bottom, transparent 52%, rgba(0, 0, 0, .14)),
    var(--accent-fill);
}
.bottomnav[data-nav-style="magic-bubble"] .bn-fab .bn-sheen { display: none; }
.bottomnav[data-nav-style="magic-bubble"] .bn-fab .bn-ico > svg { width: 19px; height: 19px; }
.bottomnav[data-nav-style="magic-bubble"] .bn-fab[aria-current="page"] .bn-ico { background: transparent; box-shadow: none; animation: none; }

/* ---- 24 · Floating Dock: an opaque rounded dock lifted off the edge, the
   most shadow of any: a hairline ring and contact, key and ambient shadows
   (in the dark, a bright ring and a lit top). A tinted chip slides behind the
   current place; the dock breathes once as it moves, and the icon hops. */
.bottomnav[data-nav-style="floating-dock"] .bn-shape {
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)), var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .08),
    0 8px 16px rgba(0, 0, 0, .4), 0 24px 48px -8px rgba(0, 0, 0, .64);
}
:root[data-theme="light"] .bottomnav[data-nav-style="floating-dock"] .bn-shape {
  background: linear-gradient(180deg, transparent 56%, rgba(145, 158, 171, .06)), var(--bg-2);
  box-shadow: 0 0 0 1px rgba(145, 158, 171, .12), 0 2px 4px rgba(145, 158, 171, .12),
    0 8px 16px -2px rgba(145, 158, 171, .16), 0 24px 48px -8px rgba(145, 158, 171, .28);
}
.bottomnav[data-nav-style="floating-dock"] .bn-item { gap: 2px; }
.bottomnav[data-nav-style="floating-dock"] .bn-ico { height: 32px; }
.bottomnav[data-nav-style="floating-dock"] .bn-ind::before {
  content: ""; left: max(4px, calc(50% - 52px)); right: max(4px, calc(50% - 52px)); top: calc(50% - 26px); height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
    0 6px 14px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
:root[data-theme="light"] .bottomnav[data-nav-style="floating-dock"] .bn-ind::before {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--accent) 32%, transparent);
}
:root[data-motion="full"] .bottomnav[data-nav-style="floating-dock"] .bn-item.is-picked .bn-ico { animation: bn-erp-hop 360ms cubic-bezier(.2, 0, 0, 1); }
:root[data-motion="full"] .bottomnav[data-nav-style="floating-dock"] .bn-bar.is-hop { animation: bn-erp-breath 250ms cubic-bezier(.2, 0, 0, 1); transform-origin: 50% 100%; }
@keyframes bn-erp-hop { 0%, 100% { translate: 0 0; rotate: 0deg; } 40% { translate: 0 -4px; rotate: -8deg; } }
@keyframes bn-erp-breath { 0%, 100% { scale: 1; } 50% { scale: .985; } }
/* The Menu: an app tile, as in a dock. */
.bottomnav[data-nav-style="floating-dock"] .bn-fab .bn-ico { width: 34px; height: 34px; border-radius: 11px; }
.bottomnav[data-nav-style="floating-dock"] .bn-fab .bn-ico > svg { width: 19px; height: 19px; }

/* Classic's Menu (2, above): the accent button as a pill. */
.bottomnav[data-nav-style="classic"] .bn-fab .bn-ico { width: 48px; height: 30px; border-radius: 15px; }

/* ---- 25 · Glass Capsule: a floating frosted capsule; a brighter glass lens
   slides under the current place, stretching as it goes and settling with a
   little give. The page fades out under it, so its icons stay legible over
   anything. */
.bottomnav[data-nav-style="glass-capsule"] .bn-shape {
  border-radius: 31px;
  background: color-mix(in srgb, var(--bg-2) 64%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .24), 0 0 0 1px rgba(0, 0, 0, .32),
    0 8px 20px -6px rgba(0, 0, 0, .48), 0 20px 44px -16px rgba(0, 0, 0, .72);
}
:root[data-theme="light"] .bottomnav[data-nav-style="glass-capsule"] .bn-shape {
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(145, 158, 171, .12), 0 1px 2px rgba(0, 0, 0, .06),
    0 4px 10px -2px rgba(145, 158, 171, .2), 0 20px 44px -12px rgba(145, 158, 171, .48);
}
/* The sheen across the upper half: what makes it read as glass. */
.bottomnav[data-nav-style="glass-capsule"] .bn-shape::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 56%);
}
:root[data-theme="light"] .bottomnav[data-nav-style="glass-capsule"] .bn-shape::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .48), transparent 52%);
}
.bottomnav:not(.is-preview)[data-nav-style="glass-capsule"]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  height: calc(104px + var(--bn-inset));
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 64%, transparent) 45%, transparent);
}
.bottomnav[data-nav-style="glass-capsule"] .bn-ind::before {
  content: ""; top: 4px; bottom: 4px; left: max(0px, calc(50% - 64px)); right: max(0px, calc(50% - 64px));
  border-radius: 27px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .4),
    0 6px 16px -6px color-mix(in srgb, var(--accent) 48%, transparent);
}
:root[data-theme="light"] .bottomnav[data-nav-style="glass-capsule"] .bn-ind::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .4)), rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .12),
    0 6px 14px -6px color-mix(in srgb, var(--accent) 40%, transparent);
}
:root[data-motion="full"] .bottomnav.is-ready[data-nav-style="glass-capsule"] .bn-ind {
  transition: transform 420ms cubic-bezier(.3, 1.2, .5, 1), opacity var(--t-2) var(--ease-out);
}
:root[data-motion="full"] .bottomnav[data-nav-style="glass-capsule"] .bn-bar.is-hop .bn-ind::before {
  animation: bn-erp-stretch 380ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes bn-erp-stretch { 0%, 100% { scale: 1 1; } 35% { scale: 1.14 .9; } }
.bottomnav[data-nav-style="glass-capsule"] .bn-item { gap: 2px; }
.bottomnav[data-nav-style="glass-capsule"] .bn-ico { height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .bottomnav[data-nav-style="glass-capsule"] .bn-item:not([aria-current="page"]):hover { color: var(--ink); }
}
/* The Menu: a bead of tinted glass — the accent let through, a bright rim,
   and the light caught in its top corner. */
.bottomnav[data-nav-style="glass-capsule"] .bn-fab .bn-ico {
  width: 46px; height: 28px; border-radius: 14px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--bn-mn-hi) 86%, transparent),
    color-mix(in srgb, var(--accent-fill) 78%, transparent) 55%, color-mix(in srgb, var(--bn-mn-lo) 86%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 .5px rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 6px 16px -6px var(--bn-mn-glow);
}
:root[data-theme="light"] .bottomnav[data-nav-style="glass-capsule"] .bn-fab .bn-ico {
  background: linear-gradient(150deg, color-mix(in srgb, var(--bn-mn-hi) 94%, transparent),
    color-mix(in srgb, var(--accent-fill) 90%, transparent) 55%, color-mix(in srgb, var(--bn-mn-lo) 94%, transparent));
}
.bottomnav[data-nav-style="glass-capsule"] .bn-fab .bn-sheen {
  background: radial-gradient(70% 90% at 26% 0%, rgba(255, 255, 255, .46), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 50%);
}
.bottomnav[data-nav-style="glass-capsule"] .bn-fab.is-open .bn-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 .5px rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px -5px var(--bn-mn-glow);
}

/* ---- 26 · Center Orb: a floating capsule dock whose outline is broken by a
   big glossy orb, the action: the dock swells into a collar round it, and the
   small bar under the current place passes behind it. */
.bottomnav[data-nav-style="center-orb"] .bn-shape {
  border-radius: 32px;
  background: var(--erp-float);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .06),
    0 12px 32px -4px rgba(0, 0, 0, .56), 0 24px 48px -12px rgba(0, 0, 0, .64);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-orb"] .bn-shape {
  box-shadow: 0 0 0 1px rgba(145, 158, 171, .08), 0 1px 2px rgba(0, 0, 0, .06),
    0 8px 24px -4px rgba(145, 158, 171, .24), 0 24px 48px -12px rgba(145, 158, 171, .32);
}
.bottomnav[data-nav-style="center-orb"] .bn-item:not(.bn-fab) { gap: 2px; padding-bottom: 4px; }
.bottomnav[data-nav-style="center-orb"] .bn-ind::before {
  content: ""; left: 50%; bottom: 6px; width: 16px; height: 3px; margin-left: -8px; border-radius: 3px;
  background: var(--accent-text);
  box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--accent) 26%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--accent) 32%, transparent);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-orb"] .bn-ind::before {
  box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--accent) 38%, transparent), 0 6px 16px -2px color-mix(in srgb, var(--accent) 48%, transparent);
}
/* The collar, in two layers so no shadow ever falls on the dock: its outline
   and upward shade, cut off at the dock's top edge (::before), under the
   collar itself in plain dock colour (::after), which hides the dock's edge
   and the indicator going by. */
.bottomnav[data-nav-style="center-orb"] .bn-fab::before,
.bottomnav[data-nav-style="center-orb"] .bn-fab::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -15px; width: 78px; height: 78px; margin-left: -39px; border-radius: 29px;
  background: var(--erp-float);
}
.bottomnav[data-nav-style="center-orb"] .bn-fab::before {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 -8px 16px -6px rgba(0, 0, 0, .56);
  clip-path: inset(-30px -30px calc(100% - 15px) -30px);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-orb"] .bn-fab::before {
  box-shadow: 0 0 0 1px rgba(145, 158, 171, .08), 0 -2px 6px -1px rgba(145, 158, 171, .16), 0 -8px 16px -6px rgba(145, 158, 171, .24);
}
.bottomnav[data-nav-style="center-orb"] .bn-fab::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
:root[data-theme="light"] .bottomnav[data-nav-style="center-orb"] .bn-fab::after { box-shadow: none; }
.bottomnav[data-nav-style="center-orb"] .bn-fab .bn-ico {
  border-radius: 24px;
  background: linear-gradient(145deg, var(--erp-hi), var(--accent-fill) 45%, var(--erp-lo));
  box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--accent) 56%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 32%, transparent);
}
:root[data-theme="light"] .bottomnav[data-nav-style="center-orb"] .bn-fab .bn-ico {
  box-shadow: 0 10px 20px -4px color-mix(in srgb, var(--accent) 50%, transparent), 0 20px 40px -8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bottomnav[data-nav-style="center-orb"] .bn-sheen::after {
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .45), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56), inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 -4px 8px -2px color-mix(in srgb, var(--erp-lo) 40%, transparent);
}
.bottomnav[data-nav-style="center-orb"] .bn-fab .bn-ico > svg {
  width: 28px; height: 28px;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--erp-lo) 32%, transparent));
}
:root:not([data-motion="off"]) .bottomnav[data-nav-style="center-orb"] .bn-fab:active .bn-ico {
  scale: .88; transition-duration: 90ms; transition-timing-function: var(--ease-out);
}

/* ============================================================ the picker
   Preferences → Bottom bar: a larger picture of the chosen look, walking
   through its places, over a grid of every look drawn small. Every picture is
   the real markup and the real styles (bottomnav.js navPreview). */
.navpick { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.navpick-hero {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: 12px 18px;
}
.navpick-screen {
  position: relative; overflow: hidden;
  height: 158px; border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), var(--shadow-1);
  container-type: inline-size;
}
.navpick-about { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.navpick-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.navpick-blurb { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* The page behind a picture: a scrap of the shelf, so glass and floating read as such. */
.bn-screen {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--bg);
}
.bn-screen::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 14px; bottom: 0;
  background:
    linear-gradient(var(--bg-3), var(--bg-3)) 0 0 / 30% 64px no-repeat,
    linear-gradient(var(--bg-3), var(--bg-3)) 50% 0 / 30% 64px no-repeat,
    linear-gradient(var(--bg-3), var(--bg-3)) 100% 0 / 30% 64px no-repeat,
    linear-gradient(color-mix(in srgb, #3b82f6 40%, var(--bg-3)), color-mix(in srgb, #a855f7 40%, var(--bg-3))) 0 76px / 30% 64px no-repeat,
    linear-gradient(color-mix(in srgb, #f59e0b 40%, var(--bg-3)), color-mix(in srgb, #ef4444 40%, var(--bg-3))) 50% 76px / 30% 64px no-repeat,
    linear-gradient(color-mix(in srgb, #10b981 40%, var(--bg-3)), color-mix(in srgb, #0ea5e9 40%, var(--bg-3))) 100% 76px / 30% 64px no-repeat;
  border-radius: 8px;
  opacity: .9;
}

.bottomnav.is-preview { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; --bn-inset: 0px; --bn-safe-l: 0px; --bn-safe-r: 0px; }
/* The small ones are pictures: no blur to pay for twenty-six times over. */
.navpick-mini .bn-shape,
.navpick-mini .bn-shape::before,
.navpick-mini .bn-shape::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

.navpick-grid {
  --mini-w: 128px; --mini-scale: calc(128 / 344);   /* bottomnav.js's picker sets both to fill a tile */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.navpick-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 7px 6px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  box-shadow: var(--glass-edge);
  cursor: pointer;
  transition: border-color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.navpick-opt:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); transform: translateY(-1px); }
.navpick-opt.is-on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  box-shadow: var(--glow-accent);
}
.navpick-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.navpick-name-sm { font-size: 12px; font-weight: 650; color: var(--ink); line-height: 1.2; text-align: center; }
.navpick-opt.is-on .navpick-name-sm { color: var(--accent-text); }
.navpick-big { font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }

/* Each small picture is the full-size bar on a 344px-wide screen, scaled down to fit a tile. */
.navpick-mini {
  position: relative; overflow: hidden; flex: none;
  width: var(--mini-w); height: calc(118px * var(--mini-scale)); border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.navpick-mini-stage {
  position: absolute; left: 0; bottom: 0; width: 344px; height: 118px;
  transform: scale(var(--mini-scale)); transform-origin: 0 100%;
  pointer-events: none;
}

@media (max-width: 640px) {
  .navpick-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .navpick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --mini-w: 116px; --mini-scale: calc(116 / 344); }
}

/* ---- the slim bar of a phone on its side (see metrics): the looks that
   stood tall, or rose out of the bar, keep inside it. */
@media (max-width: 980px) and (max-height: 500px) {
  .bottomnav:not(.is-preview)[data-nav-style="dock"] .bn-item:not(.bn-fab) .bn-ico,
  .bottomnav:not(.is-preview)[data-nav-style="dock"] .bn-fab .bn-ico,
  .bottomnav:not(.is-preview)[data-nav-style="soft"] .bn-item:not(.bn-fab) .bn-ico { height: 28px; border-radius: 10px; }
  .bottomnav:not(.is-preview)[data-nav-style="bubble"] .bn-ind::before {
    top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .bottomnav:not(.is-preview)[data-nav-style="bubble"] .bn-item[aria-current="page"] .bn-ico { translate: none; }
  .bottomnav:not(.is-preview)[data-nav-style="bubble"] .bn-item[aria-current="page"] .bn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%);
  }
  .bottomnav:not(.is-preview)[data-nav-style="sport"] .bn-ind::before { inset: 4px 7px; }
  /* Center Action and Center Orb: the button inside the bar, no collar; Center Action's names centred again. */
  .bottomnav:not(.is-preview)[data-nav-style="center-action"] .bn-item { justify-content: center; padding-top: 0; }
  .bottomnav:not(.is-preview)[data-nav-style="center-action"] .bn-fab .bn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%);
  }
  .bottomnav:not(.is-preview)[data-nav-style="center-action"] .bn-fab::before,
  .bottomnav:not(.is-preview)[data-nav-style="center-action"] .bn-fab::after,
  .bottomnav:not(.is-preview)[data-nav-style="center-action"] .bn-shape::before,
  .bottomnav:not(.is-preview)[data-nav-style="center-action"] .bn-shape::after,
  .bottomnav:not(.is-preview)[data-nav-style="center-orb"] .bn-fab::before,
  .bottomnav:not(.is-preview)[data-nav-style="center-orb"] .bn-fab::after { content: none; }
  .bottomnav:not(.is-preview)[data-nav-style="center-orb"] .bn-fab .bn-ico { border-radius: 15px; }
  /* Magic Bubble: no notch; the bubble sits in the bar round the current icon, whose name steps aside. */
  .bottomnav:not(.is-preview)[data-nav-style="magic-bubble"] .bn-shape::before { -webkit-mask: none; mask: none; }
  .bottomnav:not(.is-preview)[data-nav-style="magic-bubble"] .bn-ind::before { top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .bottomnav:not(.is-preview)[data-nav-style="magic-bubble"] .bn-item[aria-current="page"] .bn-ico { translate: none; }
  .bottomnav:not(.is-preview)[data-nav-style="magic-bubble"] .bn-item[aria-current="page"] .bn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%);
  }
  .bottomnav:not(.is-preview)[data-nav-style="floating-dock"] .bn-ind::before { top: 4px; bottom: 4px; height: auto; }
}

@media print {
  .bottomnav { display: none !important; }
}

/* The action's drawings are finer than a plus, so they keep their own weight
   whatever a look does to the bar's strokes (after every look's rules, so it wins). */
.bottomnav .bn-fab .bn-ico .bn-act .s { stroke-width: var(--bn-act-sw, 1.8); }
.bottomnav[data-fab="big"] { --bn-act-sw: 1.9; }
.bottomnav[data-nav-style="wireframe"] { --bn-act-sw: 1.35; }
.bottomnav[data-nav-style="soft"], .bottomnav[data-nav-style="translucent"], .bottomnav[data-nav-style="sport"] { --bn-act-sw: 2.1; }

/* ================================================================= the menu
   bottomnav.js openMenu: who you are, Continue (the last binder or shelf, in
   its colour), this page's actions, every place as a tile with an icon on a
   colour of its own, and Alerts · Help · Preferences · Sign Out. A sheet from the bottom
   on a phone (popover.js); under the Menu button elsewhere. */
.popover.bn-menu-pop { width: min(400px, calc(100vw - 16px)); padding: 14px; }
.popover.bn-menu-pop.is-sheet {
  width: 100%; max-height: 88dvh; overflow-y: auto;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  /* a glow from the top of the sheet, in the accent */
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-2) 94%, transparent);
}
.bnm { display: flex; flex-direction: column; gap: 14px; }
.bnm-svg { display: grid; place-items: center; }
.bnm-svg svg, .bnm-chip svg { width: 22px; height: 22px; overflow: visible; }
.bnm .s { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bnm .f { fill: currentColor; opacity: 0; }
.bnm .d { fill: currentColor; }
.bnm-chev { flex: none; margin-left: auto; font-size: 22px; line-height: 1; opacity: .55; }
.bnm button, .bnm a { -webkit-tap-highlight-color: transparent; }
.bnm :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* who you are */
.bnm-head { display: flex; align-items: center; gap: 10px; }
.bnm-who {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 4px 2px; border: 0; border-radius: 16px; background: none;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
div.bnm-who { cursor: default; }
.bnm-avatar {
  position: relative; flex: none; display: grid; place-items: center; overflow: hidden;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 19px; font-weight: 800; color: #fff;
  background: conic-gradient(from 210deg, var(--accent), #8b5cf6, #e8508f, var(--accent));
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.bnm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bnm-who-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bnm-name { font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnm-sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the sheet's close button sits in the top corner: the head keeps clear of it */
.popover.bn-menu-pop.is-sheet .bnm-head { padding-right: 34px; }

/* Continue, and this page's actions */
.bnm-now { display: flex; flex-direction: column; gap: 8px; }
.bnm-continue {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px 12px 14px;
  border-radius: 18px; color: #fff; text-decoration: none;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(120deg, color-mix(in srgb, var(--cover, #2f6f4f) 70%, #05070b), var(--cover, #2f6f4f));
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--cover, #2f6f4f) 90%, #000), inset 0 1px 0 rgba(255,255,255,.18);
}
.bnm-cover {
  flex: none; width: 34px; height: 44px; border-radius: 4px 7px 7px 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35) 0 5px, rgba(255,255,255,.18) 5px 6px, transparent 6px),
    linear-gradient(160deg, rgba(255,255,255,.3), transparent 55%),
    var(--cover, #2f6f4f);
  box-shadow: 0 6px 12px -4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.22);
}
.bnm-continue.is-shelf .bnm-cover {
  width: 44px; height: 38px; border-radius: 6px;
  background:
    linear-gradient(transparent 11px, rgba(0,0,0,.42) 11px 13px, transparent 13px 24px, rgba(0,0,0,.42) 24px 26px, transparent 26px),
    linear-gradient(160deg, rgba(255,255,255,.3), transparent 55%),
    var(--cover, #5b3a24);
}
.bnm-continue-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bnm-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.bnm-continue-t b { font-size: 16px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnm-act {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px;
  border-radius: 16px; cursor: pointer; font: inherit; text-align: left; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.bnm-act > .bnm-svg {
  flex: none; width: 36px; height: 36px; border-radius: 11px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent));
}
.bnm-act-t { display: flex; flex-direction: column; min-width: 0; }
.bnm-act-t b { font-size: 14.5px; font-weight: 700; }
.bnm-act-t span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* every place */
.bnm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; padding: 4px 0 2px; }
@media (max-width: 340px) { .bnm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bnm-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0;
  padding: 2px 0; border-radius: 14px; color: var(--ink-2); text-decoration: none;
}
/* Each place as an app icon: a gradient from its colour to its second (--hue2),
   a gloss over its top half and a light in its corner, a glow of its colour
   under it, and the glyph white, bold and half filled, with a shadow of its own. */
.bnm-chip {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 17px; color: #fff;
  background: linear-gradient(155deg, color-mix(in srgb, var(--hue) 88%, #fff) 0%, var(--hue) 42%, var(--hue2, var(--hue)) 100%);
  box-shadow:
    0 12px 22px -12px color-mix(in srgb, var(--hue2, var(--hue)) 95%, transparent),
    0 2px 5px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 7px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform var(--t-1) var(--ease-out), box-shadow var(--t-2) var(--ease-out);
}
.bnm-chip::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 52% 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}
.bnm-chip::after {
  content: ""; position: absolute; z-index: -1; left: -18%; top: -26%; width: 78%; height: 70%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .38), transparent);
}
.bnm-chip svg { width: 27px; height: 27px; filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .3)); }
.bnm-chip .s { stroke-width: 2; }
.bnm-chip .f { opacity: .4; }
.bnm-tile:active .bnm-chip { transform: scale(.92); }
@media (hover: hover) { .bnm-tile:hover .bnm-chip { transform: translateY(-2px); } .bnm-tile:hover { color: var(--ink); } }
.bnm-tile-t { max-width: 100%; font-size: 11.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the place you are on: a ring round its icon, its name in its colour */
.bnm-tile[aria-current="page"] { color: var(--ink); }
.bnm-tile[aria-current="page"] .bnm-tile-t { color: color-mix(in srgb, var(--hue) 75%, var(--ink)); font-weight: 750; }
.bnm-tile[aria-current="page"] .bnm-chip {
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--hue), 0 12px 24px -8px color-mix(in srgb, var(--hue) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.bnm-tile[aria-current="page"] .bnm-chip .f { opacity: .6; }

/* Alerts · Help · Preferences · Sign Out */
.bnm-quicks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft, var(--line)); }
.bnm-quick {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px;
  border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line-soft, var(--line));
}
@media (hover: hover) { .bnm-quick:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } }
.bnm-quick:active { transform: scale(.97); }
.bnm-quick-ico { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.bnm-quick-t { font-size: 12px; font-weight: 650; white-space: nowrap; }
/* Sign Out: the row's last, in red */
.bnm-quick.is-out {
  color: var(--danger, #e5484d);
  background: color-mix(in srgb, var(--danger, #e5484d) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--danger, #e5484d) 26%, transparent);
}
@media (hover: hover) { .bnm-quick.is-out:hover { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 50%, transparent); } }
.bnm-count {
  position: absolute; top: -6px; right: -10px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--danger, #e5484d); box-shadow: 0 0 0 2px var(--bg);
}

/* At Full motion the sheet's parts rise in, the tiles one after another. */
@keyframes bnm-rise { from { opacity: 0; transform: translateY(10px) scale(.96); } }
:root[data-motion="full"] .bnm-head,
:root[data-motion="full"] .bnm-now,
:root[data-motion="full"] .bnm-quicks { animation: bnm-rise 380ms var(--ease-out) both; }
:root[data-motion="full"] .bnm-now { animation-delay: 40ms; }
:root[data-motion="full"] .bnm-tile { animation: bnm-rise 420ms var(--ease-spring, var(--ease-out)) both; animation-delay: calc(70ms + var(--i, 0) * 22ms); }
:root[data-motion="full"] .bnm-quicks { animation-delay: 220ms; }