@withpotter/components 0.13.0-next.101

package/dist/shell/shell.css

@@ -0,0 +1,2907 @@
+/*
+ * Shell — ported from potter-console (src/styles/shell.css + tokens.css).
+ * Scoped under .pv-shell so the console's semantic class names (.sidebar,
+ * .navlink, .topbar…) can be used near-verbatim without colliding with the
+ * dashboard's Tailwind layer. Console design tokens are bridged onto the
+ * dashboard's own CSS variables here, so the port inherits light/dark theming
+ * for free instead of hard-coding colors.
+ */
+.pv-shell {
+  --ink: var(--text-primary);
+  --ink-2: var(--text-secondary);
+  --ink-3: var(--text-tertiary);
+  --ink-4: var(--text-muted);
+  --line: var(--border-subtle);
+  --line-2: var(--border-default);
+  --bg: var(--bg-base);
+  --bg-2: var(--bg-subtle);
+  --surface-2: var(
+    --bg-muted
+  ); /* sidebar surface — dashboard's inset-panel token */
+  --hover: var(--interactive-hover);
+  --active: var(--interactive-active);
+  --gray-alpha-150: var(--bg-muted);
+  --gray-alpha-200: var(--interactive-active);
+  --gray-alpha-300: var(--border-strong);
+  /* --sidebar-w / --sidebar-collapsed are defined at :root (globals.css) so the
+     content offset in dashboard/layout.tsx reads the same value. Inherited here. */
+}
+/* Dark: give the floating sidebar the same tone as the topbar (--bg-glass ≈
+   --bg-base) rather than the recessed page wash — it reads richer. */
+.dark .pv-shell {
+  --surface-2: var(--bg-base);
+}
+
+/* ============================ Sidebar ============================ */
+/* Kept as a fixed rail (the dashboard layout offsets main by its width)
+   rather than the console's CSS grid, to limit blast radius. */
+.pv-shell.sidebar {
+  position: fixed;
+  inset-block: 0;
+  left: 0;
+  z-index: 50;
+  width: var(--sidebar-w);
+  display: flex;
+  flex-direction: column;
+  /* Match the dashboard ground (.dash-ground) exactly so the rail blends into
+     the page. Through `--app-ground`, which is the token both surfaces now
+     share — the comment used to name the two values and both were already out
+     of date, which is what a shared token stops. */
+  background: var(--app-ground);
+  padding: 10px 12px;
+  overflow: hidden;
+  transition: width 0.18s cubic-bezier(0, 0, 0.2, 1);
+}
+.dark .pv-shell.sidebar {
+  background: var(--bg-subtle);
+}
+.pv-shell.sidebar.collapsed {
+  width: var(--sidebar-collapsed);
+  /* An edge ONLY when collapsed.
+     Expanded, blending into the page ground is deliberate (see above) and it
+     works, because the column of labels draws an implied edge for you. Collapse
+     it and the text is gone, so 68px of icons float on an identically coloured
+     background with nothing containing them — measured: rail and app shell were
+     both rgb(16,16,18) with border-right 0. That is the whole reason the rail
+     only ever looked wrong collapsed. */
+  border-right: 1px solid var(--border-subtle);
+}
+
+/* Product (business) switcher */
+.pv-shell .pswitch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 12px;
+  padding: 6px 8px;
+  /* 42 with one line, 50 with two.
+     The second line was the plan — "Free plan" — and it went; what took its
+     place is what the business IS, which is a fact about the workspace rather
+     than a billing status (John, 2026-08-23). But a category is optional and
+     most workspaces have none stored, so the card cannot assume two lines the
+     way it could when the plan was always there: a fixed 50px with nothing in
+     the second slot leaves the name floating above a gap. `.has-sub` is set
+     by the caller, which is the only thing that knows whether there is a
+     second line to draw. */
+  height: 42px;
+  border-radius: 10px;
+  border: 1px solid var(--line-2);
+  background: var(--bg);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 0 1px rgba(0, 0, 0, 0.35);
+  transition: background 0.12s;
+  width: 100%;
+}
+.pv-shell .pswitch:hover {
+  background: var(--hover);
+}
+.pv-shell .pswitch .wmark {
+  /* The generated-mark initial is absolutely positioned inside this, so it has
+     to anchor here — without it the letter escaped and rendered loose in the
+     middle of the sidebar. */
+  position: relative;
+  overflow: hidden;
+  width: 26px;
+  height: 26px;
+  border-radius: 10px;
+  background: var(--accent-secondary);
+  color: var(--brand-fg, #2563eb);
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  flex: none;
+}
+.pv-shell .pswitch .wmark img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  display: block;
+}
+/* The business you're in, and — when there is one — what kind it is. */
+.pv-shell .pswitch.has-sub {
+  height: 50px;
+}
+.pv-shell .pswitch .pl {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.pv-shell .pswitch .pl b,
+.pv-shell .pswitch .pl > span {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pv-shell .pswitch .pl b {
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--ink);
+}
+.pv-shell .pswitch .pl > span {
+  margin-top: 1px;
+  line-height: 1.35;
+  font-size: 11.5px;
+  color: var(--ink-3);
+}
+.pv-shell .pswitch .sw {
+  flex: none;
+  color: var(--ink-3);
+}
+
+/* The same switcher as the last line of the rail: no card, no second line, a
+   chevron where the card has its up-down pair. It shares a row with the help
+   and Customize buttons, so it gives up the card's width and margins. */
+.pv-shell .pswitch.pswitch-foot {
+  /* Sized to its content, not stretched: the name keeps its chevron beside it
+     and the icon buttons are pushed to the row's end by their own auto margin. */
+  flex: 0 1 auto;
+  min-width: 0;
+  width: auto;
+  margin: 0;
+  height: 40px;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.pv-shell .pswitch.pswitch-foot:hover,
+.pv-shell .pswitch.pswitch-foot.open {
+  background: var(--hover);
+}
+.pv-shell .side-foot-switch {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.pv-shell.sidebar.collapsed .side-foot-switch {
+  width: 100%;
+}
+.pv-shell.sidebar.collapsed .side-foot-switch .side-foot-icons {
+  display: none;
+}
+.pv-shell .pswitch.pswitch-foot .pl {
+  flex: 0 1 auto;
+}
+.pv-shell .side-foot-icons {
+  /* At the left: the account moved to the workspace menu, so nothing shares
+     this line and the icons start where the rows above start. */
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+}
+
+/* Nav */
+.pv-shell .nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  /* Pills align with the switcher and account at 12px from each rail edge. The
+     nav sits 4px wider than the pills on each side (negative margin + matching
+     padding) purely to give the hover-pill breathing room. The scrollbar is
+     hidden (below) so it reserves 0 space on every OS/browser — otherwise
+     always-show / classic scrollbars ate 8px on the right only, producing the
+     12px-left / ~20px-right split. The rail scrolls by wheel/trackpad. */
+  padding: 4px 4px 8px;
+  margin: 0 -4px;
+  scrollbar-width: none; /* Firefox: hide, reserve nothing */
+}
+.pv-shell .nav:hover {
+  scrollbar-color: var(--border-strong) transparent;
+}
+/* Push transition when drilling between the main nav and settings rail.
+   Keyed remount replays this; enter-only so nothing collapses. */
+.pv-shell .nav-swap {
+  animation: nav-swap-in 0.2s var(--motion-ease-swift);
+}
+.pv-shell .nav-swap.from-right {
+  --nav-swap-x: 16px;
+}
+.pv-shell .nav-swap.from-left {
+  --nav-swap-x: -16px;
+}
+@keyframes nav-swap-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--nav-swap-x, 16px));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .nav-swap {
+    animation: none;
+  }
+}
+.pv-shell .nav::-webkit-scrollbar {
+  display: none; /* Chrome/Safari: hide, reserve nothing — keeps pills at 12px */
+}
+.pv-shell .navgroup {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.pv-shell .navheading {
+  font-size: 11.8px;
+  font-weight: 500;
+  color: var(--ink-3);
+  margin: 0 0 4px 8px;
+  white-space: nowrap;
+}
+/* The heading is a button when its section can fold. It keeps the heading's
+   exact type and colour — a section title that suddenly looked like a control
+   would pull the eye away from the nav items, which are the thing being
+   chosen. The chevron is the only affordance, and it only appears on hover or
+   focus so a resting sidebar stays quiet. */
+.pv-shell .navheading-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 8px);
+  padding: 0;
+  background: none;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  /* `font-family` only — NOT the `font` shorthand, and no `color`.
+     Both rules land at the same specificity and this one comes later, so
+     `font: inherit` reset the 12px/500 that `.navheading` had just set and
+     `color: inherit` replaced --ink-3 with the body text colour. The heading
+     rendered white and full size: a section title louder than the nav items
+     under it, which are the thing being chosen. A button only needs its
+     font-family unset; everything else it should take from .navheading. */
+  font-family: inherit;
+  /* A button's UA line-height is `normal`; the <p> this replaced inherited the
+     shell's. Without this the heading sits a hair higher than it used to. */
+  line-height: inherit;
+}
+.pv-shell .navheading-chevron {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  opacity: 0;
+  transition:
+    opacity var(--motion-fast) var(--motion-ease-out),
+    transform var(--motion-fast) var(--motion-ease-out);
+}
+.pv-shell .navheading-toggle:hover .navheading-chevron,
+.pv-shell .navheading-toggle:focus-visible .navheading-chevron {
+  opacity: 1;
+}
+/* A closed section always shows its chevron — otherwise the only sign that
+   rows are hidden is their absence, which reads as the nav having lost them. */
+.pv-shell .navheading-chevron.closed {
+  opacity: 1;
+  transform: rotate(-90deg);
+}
+/* The gear that opens the sidebar editor, left of the chevron. Absolute so it
+   adds nothing to the heading's layout; revealed with the chevron. */
+.pv-shell .navsection {
+  position: relative;
+}
+.pv-shell .navheading-gear {
+  position: absolute;
+  top: -1px;
+  right: 22px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  color: var(--ink-3);
+  opacity: 0;
+  transition:
+    opacity var(--motion-fast) var(--motion-ease-out),
+    background 0.12s,
+    color 0.12s;
+}
+.pv-shell .navheading-gear svg {
+  width: 12px;
+  height: 12px;
+}
+.pv-shell .navsection:hover .navheading-gear,
+.pv-shell .navheading-gear:focus-visible {
+  opacity: 1;
+}
+.pv-shell .navheading-gear:hover {
+  background: var(--interactive-hover);
+  color: var(--ink-1);
+}
+.pv-shell .navheading-gear:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-shell .navsection-plain {
+  margin-top: 0;
+}
+
+/* ---- The rail, edited in place ------------------------------------------
+   Edit mode draws the same rows with the rail's own classes, so none of this
+   restyles a row: it adds a bar, a grip that takes the icon's place on hover,
+   a name that is a field, an eye, and a dim for a hidden row. */
+.pv-shell .nav-edit-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px;
+  min-height: 26px;
+}
+.pv-shell .nav-edit-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-default);
+  background: var(--bg-muted);
+  color: var(--ink-1);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.pv-shell .nav-edit-pill:hover {
+  background: var(--interactive-hover);
+}
+.pv-shell .nav-edit-pill:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-shell .nav-edit-pill svg {
+  width: 12px;
+  height: 12px;
+}
+.pv-shell .nav-edit-status {
+  margin-left: auto;
+  font-size: 11.8px;
+  color: var(--ink-3);
+}
+.pv-shell .nav-edit-link {
+  cursor: default;
+  padding-left: 19px;
+}
+.pv-shell .nav-edit.is-hidden .nav-edit-link {
+  opacity: 0.45;
+}
+.pv-shell .nav-edit.is-dragging {
+  position: relative;
+  z-index: 10;
+  background: var(--bg-base);
+  border-radius: 10px;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
+}
+.pv-shell .nav-edit-name {
+  flex: 1;
+  min-width: 0;
+  height: 24px;
+  margin-left: -6px;
+  padding: 0 6px;
+  font-size: inherit;
+  color: inherit;
+}
+.pv-shell .nav-edit-heading {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+.pv-shell .nav-edit-done {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  margin-left: auto;
+  border-radius: 6px;
+  color: var(--ink-1);
+  cursor: pointer;
+}
+.pv-shell .nav-edit-done svg {
+  width: 13px;
+  height: 13px;
+}
+.pv-shell .nav-edit-done:hover {
+  background: var(--interactive-hover);
+}
+.pv-shell .nav-edit-done:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-shell .nav-edit-heading .nav-edit-name {
+  height: 20px;
+  margin-left: -6px;
+  font-size: 11.8px;
+  color: var(--ink-3);
+}
+.pv-shell .nav-edit-grip {
+  position: absolute;
+  left: 3px;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin: auto 0;
+  border-radius: 5px;
+  color: var(--ink-3);
+  opacity: 0.55;
+  cursor: grab;
+  touch-action: none;
+}
+.pv-shell .nav-edit-grip:active {
+  cursor: grabbing;
+}
+.pv-shell .nav-edit-grip svg {
+  width: 12px;
+  height: 12px;
+}
+.pv-shell .nav-edit-grip:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+/* A heading has to belong to the group it introduces, so the gap above it is
+   several times the gap below. At 8px above and 3px below the label sat almost
+   equidistant between the section it closed and the one it opened, which reads
+   as one long list rather than as groups. 20/4 makes the break unambiguous. */
+.pv-shell .navsection {
+  margin-top: 20px;
+}
+/* Settings drill-in: the "← business" back row at the top of the settings nav. */
+.pv-shell .nav-back {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 28px;
+  padding: 0 9px;
+  margin-bottom: 6px;
+  border-radius: 10px;
+  color: var(--ink-3);
+  font-size: 13px;
+  font-weight: 500;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+.pv-shell .nav-back:hover {
+  background: var(--hover);
+  color: var(--ink);
+}
+.pv-shell .nav-back .lbl {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The arrow standing in for the workspace mark on the settings back row. It
+   keeps the mark's geometry so the card's rhythm is unchanged, but drops the
+   accent fill: this slot is an affordance now, not an identity. */
+.pv-shell .pswitch .wmark-back {
+  background: var(--bg-muted);
+  color: var(--ink-3);
+}
+.pv-shell .pswitch:hover .wmark-back {
+  color: var(--ink);
+}
+
+/* The arrow standing in for the workspace mark on the settings back row. It
+   keeps the mark's geometry so the card's rhythm is identical to the switcher's,
+   and drops the tint: this slot is an action here, not an identity. */
+.pv-shell .wmark-back {
+  background: var(--bg-muted);
+  color: var(--ink-3);
+}
+.pv-shell .pswitch:hover .wmark-back {
+  color: var(--ink);
+}
+
+/* The back row carrying the workspace identity.
+
+   It wears the switcher's surface, because in settings it IS the top identity
+   anchor: the switcher is hidden there, and without a panel behind it the
+   workspace name floated loose at the top of the rail with nothing holding it.
+   The divider is a separate element (see .side-rail-rule) — it briefly lived on
+   this row, which made the hover fill a pill with two square bottom corners
+   bleeding into a hairline. */
+.pv-shell .nav-back-biz {
+  height: 46px;
+  gap: 8px;
+  margin: 6px 0 0;
+  padding: 6px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--line-2);
+  background: var(--bg);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.04),
+    0 0 1px rgba(0, 0, 0, 0.35);
+}
+.pv-shell .side-rail-rule {
+  height: 1px;
+  margin: 8px 9px 10px;
+  background: var(--border-subtle, rgba(0, 0, 0, 0.06));
+}
+.pv-shell .side-biz-mark {
+  display: grid;
+  place-items: center;
+  height: 26px;
+  width: 26px;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--bg-muted);
+  color: var(--text-secondary);
+}
+.pv-shell .side-biz-mark img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.pv-shell .side-biz-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink);
+}
+.pv-shell.sidebar.collapsed .side-biz-name {
+  display: none;
+}
+.pv-shell .navitem {
+  position: relative;
+}
+.pv-shell .navlink {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  /* 28px, with the 2px group gap making the rail's pitch 30. The pill inside
+     is unchanged at 24px — only the air around it moved — because the pill is
+     what carries the row, not the space around it. Was 30/32. */
+  height: 30px;
+  padding: 0 9px;
+  border-radius: 10px;
+  color: var(--ink-2);
+  font-size: 13.3px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.12s;
+  cursor: pointer;
+  width: 100%;
+}
+/* A count of work waiting on this row.
+   *
+   * `margin-left: auto` rather than a spacer, so the row keeps working when
+   * there is no badge — which is the ordinary case and must not be the one
+   * that needs a workaround.
+   *
+   * Deliberately not a coloured dot or a red pill: this counts work, not
+   * alarm, and the number IS the signal. `tabular-nums` so a row does not
+   * shift by a pixel when 9 becomes 10. */
+/* NEW — a row that has only just appeared.
+   Quieter than a count on purpose: a count is work waiting and this is only
+   news. It reads as a word rather than a pill so it cannot be mistaken for a
+   number, and it takes the same right-edge slot the count does so a rail with
+   one of each still has one column of trailing marks. */
+.pv-shell .navnew {
+  margin-left: auto;
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--accent-secondary);
+  color: var(--accent-secondary-ink);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* The badge answers the hover, not just the row.
+ *
+ * Hovering a row washed the whole row and the badge came along as cargo — the
+ * one element on it that is actually counting something reacted no differently
+ * from the label beside it. It has its own small answer now.
+ *
+ * IT SHAKES, AND IT IS THE AUTH PAGE'S SHAKE. John, 2026-09-03, twice: first
+ * *"it shakes, not zooms in or out, it shakes left and right na"*, then *"the
+ * notification thingy shake should be like the avatar shake on the auth"*.
+ *
+ * So it is `AVATAR_VARIANTS` from `login-motion.ts`, to the degree: rotate
+ * 0 → -9 → 7 → -5 → 3 → 0 over 550ms on `quart`. Copied rather than re-felt,
+ * for the reason the workspace mark's shake gives — two shakes that almost
+ * match are worse than one shake, and this is the third place in the product
+ * making the same gesture.
+ *
+ * WHAT WENT: a `scale(1.12)` pop with a rotation on top. A pop is wrong twice
+ * over on a count — it makes the number BIGGER, which reads as the number
+ * having changed, and `forwards` held the larger size for as long as the
+ * pointer stayed, so a row merely passed over kept a permanently inflated
+ * figure.
+ *
+ * Nothing about it is red, for the reason the note below gives: this counts
+ * work waiting, not breakage. A shake that loops is a warning; one that
+ * settles is a tap on the shoulder.
+ */
+@keyframes navbadge-shake {
+  0% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(-9deg);
+  }
+  40% {
+    transform: rotate(7deg);
+  }
+  60% {
+    transform: rotate(-5deg);
+  }
+  80% {
+    transform: rotate(3deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@media (hover: hover) {
+  /* Once on arrival, and it ends where it started — there is no resting state
+     to transition back from, which is the other half of dropping the pop. */
+  .pv-shell .navlink:hover .navbadge {
+    animation: navbadge-shake 550ms var(--motion-ease-quart);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .navlink .navbadge,
+  .pv-shell .navlink:hover .navbadge {
+    transition: none;
+    transform: none;
+    animation: none;
+  }
+}
+:root[data-reduce-motion='on'] .pv-shell .navlink:hover .navbadge {
+  transform: none;
+  animation: none;
+}
+
+.pv-shell .navbadge {
+  margin-left: auto;
+  /* A fixed square, not a pill that grows with the number.
+     *
+     * `.squircle` is a MASK stretched to the element's box, so a badge that
+     * widened for a second digit would stretch the corners with it and stop
+     * being the same shape as every other squircle in the app. Fixed 18px
+     * keeps the curve true; the count is capped in the renderer so it always
+     * fits. */
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  /* Accent, not grey and not red. This counts WORK, so it has to be findable
+     at a glance — a neutral pill reads as decoration and gets skipped, which
+     defeats the point of counting. Red would claim something is broken, and
+     nothing here is: the carts are ordinary, they are just waiting on a
+     person. */
+  background: var(--accent-primary);
+  color: var(--text-inverse);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  line-height: 18px;
+}
+
+/* Motion highlight sits behind the label/icon so the spring pill slides
+   under the content rather than over it. */
+.pv-shell .navlink > * {
+  position: relative;
+  z-index: 1;
+}
+/* Active = a raised "selected" pill (card surface + hairline ring), clearly
+   distinct from the faint hover wash so the two never read the same. */
+.pv-shell .nav-hl {
+  position: absolute;
+  /* Inset top and bottom so the pill reads as sitting ON the row rather than
+     BEING the row. At the row's full height it met its neighbours edge to
+     edge, which made a stack of rows look like a table with one cell filled
+     in. 2px on a 30px row keeps the pill at the 26px it has always been —
+     tightening the rail must not shrink the thing you are looking at.
+     The row is 30px and the pill fills it (the pill was 24 inside a 28px row,
+     then grew to 29 past its edges; the row itself grew instead). */
+  inset: 0;
+  z-index: 0;
+  border-radius: 9px;
+  background: var(--bg-base);
+  box-shadow:
+    0 1px 2px rgba(16, 16, 20, 0.06),
+    0 0 0 1px var(--border-subtle);
+}
+.pv-shell .navlink .ic {
+  width: 20px;
+  height: 20px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  color: var(--ink-3);
+  transition:
+    color 0.12s,
+    transform 0.12s var(--motion-ease-out);
+}
+.pv-shell .navlink .ic svg {
+  width: 13px;
+  height: 13px;
+  transition: stroke-width 0.14s var(--motion-ease-out);
+}
+/* Hover THICKENS the glyph. It does not move it.
+   A nav row is the most hovered surface in the app — fifty, a hundred times a
+   day — and that is the frequency at which motion stops being delight and
+   starts being a tic. The glyph used to pop 1.12, which is lovely on the first
+   view and a twitch by the fortieth. Weight is a state, not an animation: it
+   cannot stutter, it cannot be interrupted mid-flight, and it does not get
+   tiring, because nothing travelled.
+   It is one rule for all 41 shell glyphs only because the icon system is
+   uniform on purpose — every one is drawn 24x24 at stroke 2, and CSS beats the
+   presentation attribute. Lucide's fallbacks are drawn to the same spec, so a
+   custom glyph and a Lucide glyph thicken identically. */
+@media (hover: hover) and (pointer: fine) {
+  .pv-shell .navlink:hover .ic svg {
+    stroke-width: 2.5;
+  }
+}
+/* Press lands on the GLYPH, not the row.
+   Every pressable thing should answer the press, but a full-width row scaling
+   reads as the sidebar flexing rather than the row being pressed — which is
+   why the row itself only ever gets a wash. The icon is small enough to squash
+   without dragging its neighbours, so the answer happens where the pointer is.
+   120ms: press feedback has to land inside the click. */
+.pv-shell .navlink:active .ic {
+  transform: scale(0.92);
+}
+/* Reduced motion keeps the weight and drops the squash. Thickening is a change
+   of state with nothing in transit, which is exactly what this setting asks to
+   be left alone. */
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .navlink .ic {
+    transition: color 0.12s;
+  }
+  .pv-shell .navlink:active .ic {
+    transform: none;
+  }
+}
+.pv-shell .navlink .lbl {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+/* Hover = a ghosted wash only (no text/icon brightening), so it stays clearly
+   weaker than the raised, full-ink active pill.
+   It is drawn as a pseudo-element with `.nav-hl`'s exact geometry rather than
+   as a background on the row, because the two have to be the SAME SHAPE. As a
+   row background it was the full 32px box at the row's own left edge, while
+   the pill is 26px reaching back to the sidebar edge — so on a sub-row, hover
+   and selected were different sizes in a different place, and hovering the row
+   next to the selected one showed you both at once. */
+.pv-shell .navlink::after {
+  content: '';
+  position: absolute;
+  /* 2px, so the pill stays 24px tall inside the 28px row it used to sit in at
+     3px inside 30px. The chip is the constant; the row's air is what moved. */
+  inset: 0;
+  z-index: 0;
+  border-radius: 9px;
+  background: transparent;
+  transition: background 0.12s;
+  pointer-events: none;
+}
+/* Sub-rows reach back past their indent, exactly as their pill does. */
+.pv-shell .navsub .navlink::after {
+  left: -29px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .pv-shell .navlink:hover:not(.active)::after {
+    background: var(--hover);
+  }
+}
+/* Press = the same wash, but it is the ONLY instant acknowledgement a touch
+   device gets: there is no hover on a phone, so a tap used to land on a row
+   that looked exactly as it had a moment earlier. Not gated behind the hover
+   query for that reason. No scale: a full-width row shrinking reads as the
+   sidebar flexing rather than the row being pressed. */
+.pv-shell .navlink:active:not(.active)::after {
+  background: var(--hover);
+}
+
+/* The row you pressed, while its page loads.
+   Deliberately weaker than `.nav-hl`: it is a promise, not an arrival, and if
+   it were identical the row would appear to settle and then settle again when
+   the route lands. Same geometry so nothing shifts between the two. */
+.pv-shell .nav-hl-pending {
+  background: var(--hover);
+  box-shadow: none;
+  animation: nav-pending-in 100ms var(--motion-ease-out) both;
+}
+/* Fades in rather than snapping: on an already-warm route the pending state
+   can last a single frame, and a hard flash on every fast navigation is worse
+   than no feedback at all. 100ms is short enough to still read as instant. */
+@keyframes nav-pending-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* The label follows the pill, so the row reads as "going here" from the press
+   rather than only from the paint. */
+.pv-shell .navlink:has(.nav-hl-pending) {
+  color: var(--ink);
+}
+.pv-shell .navlink:has(.nav-hl-pending) .ic {
+  color: var(--ink);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .nav-hl-pending {
+    animation: none;
+  }
+}
+.pv-shell .navlink.active {
+  color: var(--ink);
+  font-weight: 600;
+}
+.pv-shell .navlink.active .ic {
+  color: var(--ink);
+}
+
+/* Disclosure children — revealed inline under a hub, no chevron. */
+.pv-shell .navsub {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* The group's box starts level with the parent row's centre line, so the
+     connector has somewhere to start from. `overflow: hidden` clips the trunk
+     to this box, and the box used to begin 8px BELOW the parent row — so the
+     line started in mid-air and read as severed rather than as a branch. The
+     negative margin and matching padding cancel out, so nothing moves; only
+     the clipping edge does. It starts at the parent row's lower edge rather
+     than its centre: attached enough to read as a branch, without a long
+     vertical run down the rail. */
+  /* The clipping edge is where the line STARTS, so it decides how far up into
+     the parent row the run reaches. At -10px it reached 466, and the parent's
+     glyph ends at 467 — the line ran into the icon and came out of the bottom
+     of it rather than from under the row. -5px starts it 4px clear of the
+     glyph and still inside the row, so it reads as hanging off the parent
+     without touching it. The padding absorbs the change, so the children do
+     not move: -10 + 12 and -5 + 7 both land them in the same place. */
+  margin-top: -5px;
+  padding-top: 7px;
+  /* Children carry no icon, so the indent alone has to place them. 29px puts a
+     child's label at 38px from the row edge — exactly where the parent's label
+     sits above it (9px padding + 20px icon + 9px gap). The two levels read as
+     one column of text with a rail beside it, not two ragged columns. */
+  padding-left: 29px;
+  position: relative;
+  /* Clips the bright run to the group it belongs to — without it the elbow's
+     -400px reach escapes upward and draws a stray line beside every row above
+     the hub.
+     The bleed moves that clipping edge 5px off the rows' right edge, where it
+     was slicing the active pill's 1px ring and drop shadow clean off. The
+     margin and padding cancel, so nothing moves; only the edge does. Same
+     trick as the vertical one above, for the same reason. */
+  overflow: hidden;
+  margin-right: -5px;
+  padding-right: 5px;
+}
+/* One rail, spanning the whole group.
+   It answers "how far does this hub reach" — where the group starts and where
+   it stops — and nothing else. It used to be an elbow drawn only to the active
+   child, which made one line do two jobs: extent AND position. Position is the
+   highlighted row's job and it does it better; the line was just a second, less
+   legible answer to a question already answered. So the rail brackets the group
+   and stays out of it.
+   Placed at 19px: the centre of the parent's 20px icon well, so it hangs off
+   the parent's own glyph rather than floating in the indent. */
+.pv-shell .navsub:not(:has(.navlink.active))::before {
+  content: '';
+  position: absolute;
+  left: 19px;
+  top: 7px;
+  bottom: 0;
+  width: 1px;
+  background: var(--border-default);
+  pointer-events: none;
+}
+.pv-shell .navsub > li {
+  position: relative;
+}
+/* The elbow: the rail running down from the hub and turning in at your row.
+   It is drawn ON the rail, at the same 19px, not beside it — the old elbow
+   carried its own vertical arm because it WAS the only line, and keeping that
+   arm alongside a rail would have put two verticals 9px apart and read as the
+   line growing a twin rather than turning.
+   When a row IS active this replaces the faint rail rather than joining it: a
+   line continuing past the turn is drawing the part of the group you have
+   already gone past, and the run only means anything as the path from the hub
+   to where you are. The faint full-height version above is for a group with
+   nothing active in it, where extent is all there is to say. */
+.pv-shell .navsub {
+  --tree-line: color-mix(in srgb, var(--ink-3) 55%, transparent);
+}
+.pv-shell .navsub > li:has(.navlink.active)::before {
+  content: '';
+  position: absolute;
+  /* Above the frame, which now reaches back past the rail. Without it the pill
+     paints over the run and the group loses its line on the one row that
+     matters. */
+  z-index: 1;
+  /* 19px absolute — the rail's own x, and the centre of the parent's icon. */
+  left: -10px;
+  /* From the parent, ALL the way down. It ran only 20px at first, which left
+     the rail muted from the hub and then abruptly bright for the last row —
+     the eye read the change of value as a change of meaning and went looking
+     for what happened there. Nothing happens there. The bright run traces the
+     path from the hub to where you are, so it has to start at the hub. The
+     oversized negative top reaches it whatever the child's index; the group's
+     `overflow: hidden` trims it. */
+  top: -400px;
+  /* Down to the row's centre line: 400 + half of the 28px row. */
+  height: 414px;
+  /* Ends at 40px absolute, which is where the head's tip is. The two are one
+     mark and have to meet: at 10px the arm stopped at the row's edge while the
+     head sat 4px inside it, leaving the head floating off its own body. */
+  width: 9px;
+  border-left: 1px solid var(--tree-line);
+  border-bottom: 1px solid var(--tree-line);
+  border-bottom-left-radius: 7px;
+  pointer-events: none;
+}
+/* The head, terminating the arm at 40px absolute.
+   Inside the frame, which now reaches back to the sidebar edge, but 10px clear
+   of the label at 50 — at `4px` it sat almost against the first letter, which
+   read as an arrow pointing AT the word rather than at the row.
+   It needs the z-index to be visible at all: `.nav-hl` is a real element and
+   this is a pseudo, so without one the pill wins the paint order and the head
+   vanishes on exactly the row it exists to mark. 1 puts it level with the
+   row's own label, which sits above the pill for the same reason. */
+.pv-shell .navsub > li:has(.navlink.active) .navlink::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  left: -4px;
+  top: 50%;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--tree-line);
+  border-right: 1px solid var(--tree-line);
+  transform: translateY(-50%) rotate(45deg);
+  pointer-events: none;
+}
+/* Children sit one step back from their parent: a shade quieter and a shade
+   lighter, on top of the indent and the smaller type they already had.
+   Weight is doing most of the work here, not colour. Muting them further would
+   have taken them to `--ink-4`, which is the disabled tone — and they are not
+   the reason people were clicking the wrong row anyway. That was the parent
+   giving no answer to a press, which `.nav-hl-pending` above now fixes. This
+   is only so the two levels read as levels. */
+.pv-shell .navsub .navlink {
+  height: 28px;
+  font-size: 12.3px;
+  font-weight: 450;
+  color: var(--ink-3);
+}
+.pv-shell .navsub .navlink.active {
+  font-weight: 550;
+}
+/* The group's own highlight — one per open hub, moved between its rows.
+   It hangs off the group rather than the row so that it can slide, so it is
+   positioned against `.navsub` directly: `left: 0` is the sidebar's own row
+   edge, and `right: 5px` cancels the clip bleed to land back on 224. That
+   alignment is the point — the row's CONTENT stays indented, because the
+   indent is what says "child", but the frame is the shared shape of "you are
+   here", and a narrower version of it read as a different kind of selection
+   rather than the same one a level down.
+   `top: 3px` plus the row's own offsetTop, matching the 3px inset every other
+   highlight uses. The tree line crosses it and is drawn above it, which is why
+   the arrowhead can sit inside the frame at all. */
+.pv-shell .navsub-hl {
+  inset: 2px 5px auto 0;
+  height: 26px;
+}
+/* The pending wash still rides its own row, so it needs the same reach back to
+   the edge that the group's pill gets for free. */
+.pv-shell .navsub .navlink .nav-hl {
+  left: -29px;
+}
+
+/* A hub row: a container, not a destination.
+   The chevron is always visible, never hover-revealed. It is now the only
+   thing distinguishing a row that opens from a row that goes somewhere, and a
+   signal you have to hover to find cannot carry that. Hidden until hover, it
+   also meant the two kinds of row looked identical at rest — which is the
+   ambiguity this row shape exists to remove. */
+.pv-shell .navhub {
+  padding-right: 6px;
+}
+/* THE CHEVRON ARRIVES ON HOVER — Square's move, John's call (2026-09-03):
+   *"I like how Square is designed, where the side navs don't show the dropdown
+   until you hover on it."*
+
+   The reason it works there is that a chevron on every hub is a column of
+   arrows down the rail, and that column is the loudest repeated shape in a
+   surface whose job is to be read for its WORDS. Hidden, the rail is a list of
+   places; hovered, the row admits it has more inside. Nothing is lost, because
+   the whole row toggles — the chevron was never the target, only the sign, and
+   this file already says so where the row is a button rather than a link.
+
+   THREE STATES KEEP IT, and each is a case where the sign is load-bearing:
+
+     open          you have opened it, and the arrow is the only thing on
+                   screen that says the list below belongs to this row rather
+                   than being more nav.
+     focus-within  a keyboard has no pointer, so hover would hide the
+                   affordance from the one person who cannot discover it by
+                   waving at the screen.
+     touch         `hover: none` has no hover at all. Coarse pointers get it
+                   permanently rather than never.
+
+   Opacity rather than `display`, so nothing reflows as the pointer crosses the
+   rail — a row that changes width on hover is a row that jumps. */
+.pv-shell .navhub .chev {
+  flex: none;
+  color: var(--ink-4);
+  opacity: 0;
+  transition:
+    transform 0.2s var(--motion-ease-out),
+    opacity var(--motion-fast) var(--motion-ease-out);
+}
+.pv-shell .navhub:hover .chev,
+.pv-shell .navhub:focus-visible .chev,
+.pv-shell .navitem:focus-within .chev,
+.pv-shell .navhub.open .chev {
+  opacity: 1;
+}
+@media (hover: none) {
+  .pv-shell .navhub .chev {
+    opacity: 1;
+  }
+}
+/* THE COUNT TAKES THE ARROW'S SLOT — John, 2026-09-03: *"the notification,
+   why is it not in the same place as the arrow dropdown, so it replaces the
+   arrow so everything is aligned"*.
+
+   It was rendered BEFORE the chevron, and the chevron still occupied its width
+   at opacity 0, so a count on a hub sat 14px left of where every other row's
+   right edge is. Two things at the right edge of a rail that are not aligned
+   read as a mistake even when neither is wrong on its own.
+
+   So a hub with work to report shows the COUNT and not the arrow. Nothing is
+   lost: the whole row toggles, the arrow was only ever the sign, and the sign
+   a merchant needs on that row is the number. Open the hub and the count moves
+   down to the child that owns it — see `hubTotal` — which frees the slot and
+   the arrow comes back, rotated, to say the list below belongs to this row.
+
+   `:has()` rather than a prop, because this is a fact about what the row is
+   currently rendering and the renderer already decides that correctly. */
+.pv-shell .navhub:has(.navbadge) .chev {
+  display: none;
+}
+.pv-shell .navhub.open .chev {
+  transform: rotate(180deg);
+}
+
+/* Ask Box — pinned action above the nav */
+.pv-shell .ask-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 10px;
+  margin-bottom: 6px;
+  border-radius: 10px;
+  border: 1px solid var(--line-2);
+  background: var(--bg);
+  color: var(--ink-2);
+  font-size: 13.5px;
+  font-weight: 500;
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+.pv-shell .ask-pill:hover {
+  background: var(--hover);
+  color: var(--ink);
+  border-color: var(--gray-alpha-300);
+}
+.pv-shell .ask-pill .ic {
+  color: var(--brand-500, #2563eb);
+  display: grid;
+  place-items: center;
+}
+
+/* Collapsed rail */
+.pv-shell.sidebar.collapsed .wordmark,
+.pv-shell.sidebar.collapsed .pswitch .pl,
+.pv-shell.sidebar.collapsed .pswitch .sw,
+.pv-shell.sidebar.collapsed .navlink .lbl,
+.pv-shell.sidebar.collapsed .ask-pill .lbl,
+.pv-shell.sidebar.collapsed .navhub .chev,
+.pv-shell.sidebar.collapsed .navsub {
+  display: none;
+}
+/* A group heading becomes a RULE rather than disappearing. Hiding it left the
+   spacing behind, so the rail showed a 52px gap with nothing in it — rhythm
+   with no reason, which reads as something that failed to load rather than as
+   structure. Same information, one pixel tall. */
+.pv-shell.sidebar.collapsed .navheading {
+  height: 1px;
+  margin: 10px 10px 12px;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
+  background: var(--border-subtle);
+  border-radius: 1px;
+  overflow: hidden;
+}
+.pv-shell.sidebar.collapsed .navlink,
+.pv-shell.sidebar.collapsed .ask-pill {
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+  /* Square targets. 44x32 put a 13px icon in a wide, short box; with no rail
+     behind it, that extra width read as the icon drifting rather than as
+     padding. */
+  width: 40px;
+  height: 40px;
+  margin-inline: auto;
+}
+.pv-shell.sidebar.collapsed .pswitch {
+  justify-content: center;
+  padding: 6px;
+  /* No plan line to make room for on the rail. */
+  height: 40px;
+}
+
+/* ============================ Topbar ============================ */
+.pv-shell.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  height: 56px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg-glass, var(--bg));
+  backdrop-filter: saturate(1.4) blur(8px);
+}
+.pv-shell .topbar-left {
+  justify-self: start;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.pv-shell .topbar-collapse {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  color: var(--ink-3);
+  flex: none;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+.pv-shell .topbar-collapse:hover {
+  background: var(--hover);
+  color: var(--ink);
+}
+.pv-shell .crumb {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.pv-shell .tb-search {
+  justify-self: center;
+  width: 340px;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 8px 0 11px;
+  border-radius: 10px;
+  border: 1px solid var(--line-2);
+  background: var(--bg);
+  color: var(--ink-3);
+  font-size: 13px;
+  transition: border-color 0.12s;
+}
+.pv-shell .tb-search:hover {
+  border-color: var(--gray-alpha-300);
+}
+.pv-shell .tb-search .ph {
+  flex: 1;
+  text-align: left;
+}
+.pv-shell .tb-search .k {
+  display: flex;
+  gap: 4px;
+}
+.pv-shell .tb-search kbd {
+  font-family: inherit;
+  font-size: 11px;
+  border: 1px solid var(--line-2);
+  border-radius: 10px;
+  min-width: 20px;
+  height: 18px;
+  display: grid;
+  place-items: center;
+  background: var(--surface-2);
+  color: var(--ink-2);
+}
+.pv-shell .top-right {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+/* Topbar buttons rest with no chrome (transparent border + bg); the border
+   and wash only appear on hover, so idle icons aren't boxed in. */
+.pv-shell .tbtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 11px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink);
+  transition:
+    background 0.12s,
+    border-color 0.12s;
+  white-space: nowrap;
+}
+.pv-shell .tbtn:hover {
+  background: var(--hover);
+  border-color: var(--line-2);
+}
+.pv-shell .tbtn .ic {
+  color: var(--brand-500, #2563eb);
+  display: grid;
+  place-items: center;
+}
+.pv-shell .iconbtn {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  color: var(--ink-2);
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+  position: relative;
+}
+.pv-shell .iconbtn:hover {
+  background: var(--hover);
+  border-color: var(--line-2);
+  color: var(--ink);
+}
+.pv-shell .iconbtn .dot {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--brand-500, #2563eb);
+  border: 1.5px solid var(--bg);
+}
+.pv-shell .top-av {
+  position: relative;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  border-radius: 999px;
+}
+.pv-shell .top-av .in {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--accent-secondary);
+  color: var(--brand-500, #2563eb);
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 700;
+}
+.pv-shell .tb-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ink);
+}
+/* The collapse toggle belongs to the sidebar, which only exists at lg+.
+   Below lg, show the wordmark instead. */
+.pv-shell .tb-logo {
+  display: none;
+}
+@media (max-width: 1023px) {
+  .pv-shell .topbar-collapse {
+    display: none;
+  }
+  .pv-shell .tb-logo {
+    display: flex;
+  }
+}
+@media (max-width: 640px) {
+  .pv-shell .tb-search {
+    width: auto;
+  }
+  .pv-shell .tb-search .ph {
+    display: none;
+  }
+  .pv-shell .crumb {
+    display: none;
+  }
+}
+
+/* ==================== Business switcher dropdown ====================
+   Portaled to <body> (outside .pv-shell), so these use the dashboard's
+   own tokens directly rather than the bridged console vars. */
+/* The menu skin, shared by the switcher (which positions itself) and the
+   account popover (which Radix positions). Kept separate from the positioning
+   so the account menu can borrow the look without inheriting `position: fixed`
+   — overriding that back to `static` silently broke Radix's placement. */
+.pv-psw-menu,
+.pv-menu-surface {
+  padding: 5px;
+  background: var(--bg-base);
+  border-radius: 10px;
+  box-shadow:
+    0 12px 40px rgba(16, 16, 30, 0.16),
+    0 0 0 1px var(--border-subtle);
+  animation: pv-menupop 0.14s cubic-bezier(0, 0, 0.2, 1);
+  /* Workspace count is unbounded, so the menu scrolls rather than running
+     off the bottom of a short laptop screen. */
+  max-height: calc(100vh - 90px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+/* A dim behind the switcher, no blur. It sits just under the menu and takes
+   the click that dismisses it, so the page behind is not pressed through. */
+.pv-psw-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 94;
+  background: rgb(0 0 0 / 0.28);
+}
+.pv-psw-menu {
+  position: fixed;
+  z-index: 95;
+  /* The arrival is `springs.gentle` in `product-switcher`, through motion.
+     The shared `pv-menupop` keyframe above still drives `.pv-menu-surface`;
+     leaving it on here would be a 140ms curve fighting a spring for the same
+     transform, which is the "two things animating one property" bug this
+     stylesheet already documents for box-shadow. */
+  animation: none;
+}
+/* The menu takes focus on open so that no ROW does — the arrow handler walks
+   in from the container. A ring around the whole popover is the cost of that
+   and it is not worth paying: an outline on a surface says nothing, where an
+   outline on a row would have said "selected". The rows keep their own
+   `:focus-visible`, which is the ring that means something here. */
+.pv-psw-menu:focus,
+.pv-psw-menu:focus-visible {
+  outline: none;
+}
+@keyframes pv-menupop {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* HOW MANY WORKSPACES THERE ARE, on the row that manages all of them (John,
+   2026-09-03). It rode a "Workspaces" section heading, and the heading is gone
+   with the rule above it — so the number sits on the thing it counts, pushed
+   to the row's right margin. Tabular so it does not twitch as the number
+   changes, and quiet: it is a fact about the row, not a thing to press. */
+.pv-psw-count {
+  margin-left: auto;
+  /* In a frame rather than floating at the end of the label — a bare number
+     after a word reads as part of the word. The muted fill gives it an edge to
+     sit against, which is what makes it a count rather than a suffix. */
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--bg-muted);
+  text-align: center;
+  font-size: 10.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-tertiary);
+}
+/* It shakes when you point at the row.
+   John, 2026-08-23: *"users should be able to hover on the 5 and it shakes
+   like the iPhone delete shaking, or like when you click edit workspace on the
+   manage how it shakes."* Same keyframe as that one — `pactWobble` in
+   globals.css, which the workspaces grid uses for manage mode — rather than a
+   second shake that almost matches it.
+
+   ON THE ROW, not on the number. It used to be `.pv-psw-count:hover`, which
+   was right while the count sat on a heading with nothing else to hover. On a
+   row it is an 18px target inside a 264px one, and a keyframe restarts from
+   zero — so the shake would fire, die and re-fire as the pointer crossed a
+   digit. A plain `:hover` rule either way, so it re-triggers every time the
+   pointer arrives, the way the breadcrumb icon does. */
+.pv-psw-row:hover .pv-psw-count {
+  animation: pactWobble 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-psw-row:hover .pv-psw-count {
+    animation: none;
+  }
+}
+
+/* YOU, at the foot of the switcher menu, and it OPENS ACCOUNT SETTINGS —
+   John, 2026-09-03. Same geometry as .pv-psw-item, because it is the same
+   kind of thing: a group led by the identity it is about, pressable, with the
+   act that follows from it beneath. It shipped as a static heading with an
+   "Account settings" row under it, which was the menu explaining its own most
+   conventional control to itself. */
+.pv-psw-me {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px;
+  border-radius: 10px;
+  min-width: 0;
+  text-align: left;
+  transition: background 0.1s;
+  cursor: pointer;
+}
+.pv-psw-me:hover {
+  background: var(--interactive-hover);
+}
+.pv-psw-me:focus-visible {
+  outline: none;
+  background: var(--interactive-hover);
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-psw-me-face {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  object-fit: cover;
+  /* Identity, so a squircle — the standing law in globals.css. */
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23000' d='M100 0C33.3 0 0 33.3 0 100s33.3 100 100 100 100-33.3 100-100S166.7 0 100 0Z'/%3E%3C/svg%3E")
+    center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23000' d='M100 0C33.3 0 0 33.3 0 100s33.3 100 100 100 100-33.3 100-100S166.7 0 100 0Z'/%3E%3C/svg%3E")
+    center / 100% 100% no-repeat;
+}
+.pv-psw-me-txt {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 1px;
+}
+.pv-psw-me-txt b {
+  font-size: 13px;
+  font-weight: 550;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pv-psw-me-txt span {
+  font-size: 11.5px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Single-line action row — settings, members, billing, account, log out.
+   Distinct from .pv-psw-item, which is a two-line workspace with an avatar. */
+.pv-psw-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 7px 8px;
+  border-radius: 8px;
+  text-align: left;
+  font-size: 13px;
+  color: var(--text-secondary);
+  transition: background 0.1s;
+  cursor: pointer;
+}
+.pv-psw-row:hover {
+  background: var(--interactive-hover);
+  color: var(--text-primary);
+}
+/* Arrow keys walk this menu, so the focused row has to be visible. */
+.pv-psw-row:focus-visible,
+.pv-psw-item:focus-visible {
+  outline: none;
+  background: var(--interactive-hover);
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-psw-row.pv-psw-row-danger:hover,
+.pv-psw-row.pv-psw-row-danger:focus-visible {
+  background: color-mix(in srgb, var(--error) 12%, transparent);
+  color: var(--error);
+}
+.pv-psw-row.pv-psw-row-danger:hover svg,
+.pv-psw-row.pv-psw-row-danger:focus-visible svg {
+  color: var(--error);
+}
+.pv-psw-row svg {
+  color: var(--text-tertiary);
+  flex: none;
+}
+/* THE MARK SHAKES WHEN YOU POINT AT A WORKSPACE YOU COULD GO TO.
+   John, 2026-09-03: *"the avatar area has to shake just like how the account
+   avatar shakes on the auth page"*.
+
+   The SAME gesture, not a similar one: `AVATAR_VARIANTS` in `login-motion.ts`
+   rotates 0 → -9 → 7 → -5 → 3 → 0 over 550ms on `quart`, and those numbers are
+   copied here rather than re-felt. Two shakes that almost match are worse than
+   one shake, and this is the same act in both places — pointing at an identity
+   you are about to become.
+
+   CSS rather than a motion variant, because the auth card is one element and
+   this is a list: making every row a `motion.button` to animate a child would
+   put a Framer subscription on each of them for a hover. A plain `:hover`
+   keyframe also re-triggers every time the pointer arrives, which is what the
+   count beside "Manage all workspaces" already does.
+
+   NOT ON THE ROW YOU ARE ALREADY IN. It carries a tick, pressing it is a
+   deliberate no-op, and a mark that shakes at somewhere you cannot go is the
+   animation promising a thing the row refuses. */
+@keyframes pswMarkShake {
+  0% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(-9deg);
+  }
+  40% {
+    transform: rotate(7deg);
+  }
+  60% {
+    transform: rotate(-5deg);
+  }
+  80% {
+    transform: rotate(3deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+.pv-psw-item:not(.current):hover .pv-psw-ic {
+  animation: pswMarkShake 0.55s var(--motion-ease-quart) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-psw-item:not(.current):hover .pv-psw-ic {
+    animation: none;
+  }
+}
+
+/* What's new timeline. The line is centred on the 15px icon slot (8px row
+   padding + 7.5px) and runs from the first dot to the last icon. Slots paint
+   the menu's own background so the line is hidden behind them. */
+.pv-psw-tl {
+  position: relative;
+}
+.pv-psw-tl::before {
+  content: '';
+  position: absolute;
+  left: 15px;
+  top: 16px;
+  bottom: 16px;
+  width: 1px;
+  background: var(--border-default);
+}
+.pv-psw-tl-slot {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 15px;
+  height: 15px;
+  background: var(--bg-base);
+}
+.pv-psw-tl-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--text-tertiary);
+}
+.pv-psw-heading {
+  padding: 6px 8px 2px;
+  font-size: 11.5px;
+  color: var(--text-tertiary);
+}
+.pv-psw-sep {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 5px -5px;
+}
+
+/* The team menu. Unscoped, like every other menu here: Radix portals its
+   content to the body, so a `.pv-shell` prefix would never match it — which is
+   also why the faces inside it restate their own size instead of inheriting
+   the sidebar's. */
+.pv-team-menu {
+  min-width: 248px;
+  max-width: 304px;
+}
+.pv-team-person {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 8px;
+}
+.pv-team-who {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+.pv-team-name,
+.pv-team-sub {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pv-team-name {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+.pv-team-sub {
+  font-size: 11.5px;
+  color: var(--text-muted);
+}
+/* The one line in this menu allowed to carry colour: an invite nobody opened
+   is the only thing here that is asking for something. */
+.pv-team-sub.needs {
+  color: var(--warning);
+}
+.pv-team-here {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--success);
+  flex: none;
+}
+.pv-psw-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px;
+  border-radius: 10px;
+  text-align: left;
+  color: var(--text-secondary);
+  transition: background 0.1s;
+  cursor: pointer;
+}
+.pv-psw-item:hover {
+  background: var(--interactive-hover);
+}
+/* Current must not share a token with hover. When it did, hovering any row
+   made that row look selected and the real one look ordinary — the state was
+   only legible when the pointer was elsewhere. `--bg-muted` is a resting
+   colour hover never produces, so that constraint holds.
+   Deliberately NOT the brand tint: brand-on-a-list-row reads as a link or an
+   alert rather than "you are here", and colour on this surface is reserved for
+   things that carry meaning. */
+.pv-psw-item.current {
+  background: var(--bg-muted);
+}
+.pv-psw-item.current .pv-psw-txt b {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+.pv-psw-check {
+  flex: none;
+  /* Neutral, matching the row tint: the check's JOB is to mark the current
+     row, and it does that by being present, not by being blue. */
+  color: var(--text-secondary);
+}
+/* The faces sit at the END of the people row — it is an ordinary
+   `.pv-psw-row`, so its glyph and its label land on the same two columns as
+   every other row in the menu, and the pictures are what the row carries
+   rather than what it is indented by. */
+.pv-psw-faces {
+  display: flex;
+  align-items: center;
+  flex: none;
+  margin-left: auto;
+  /* Clears the 2px of ground each face pads itself with, so the last one ends
+     flush with the row's own padding. */
+  margin-right: -2px;
+}
+.pv-psw-face {
+  width: 22px;
+  height: 22px;
+  object-fit: cover;
+  flex: none;
+  /* Identity, so a squircle — the standing law in globals.css. The 2px of
+     padding filled with the menu's own ground is the notch each face cuts out
+     of the one behind it; a mask clips a border into the shape, so the notch
+     cannot be one. */
+  padding: 2px;
+  background: var(--bg-elevated, var(--bg-base));
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23000' d='M100 0C33.3 0 0 33.3 0 100s33.3 100 100 100 100-33.3 100-100S166.7 0 100 0Z'/%3E%3C/svg%3E")
+    center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23000' d='M100 0C33.3 0 0 33.3 0 100s33.3 100 100 100 100-33.3 100-100S166.7 0 100 0Z'/%3E%3C/svg%3E")
+    center / 100% 100% no-repeat;
+}
+.pv-psw-face + .pv-psw-face,
+.pv-psw-face + .pv-psw-face-more {
+  margin-left: -9px;
+}
+/* The ones who did not fit. Same box and same notch as a face, so the stack
+   ends on a disc rather than on a label hanging off it. */
+.pv-psw-face-more {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--bg-muted);
+  color: var(--text-tertiary);
+  font-size: 9px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.pv-psw-ic {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  background: var(--accent-secondary);
+  color: var(--brand-500, #2563eb);
+  font-size: 12px;
+  font-weight: 700;
+}
+.pv-psw-ic img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  display: block;
+}
+/* Uploaded logos are often circular PNGs with transparent corners, so they read
+   as a circle sitting among squircles. Filling the mark gives it the
+   container's silhouette whatever alpha the asset carries — and the fill has to
+   CONTRAST with the surface behind it, or the corners stay invisible and the
+   circle survives. In dark that means --bg-muted (lighter than the card), not
+   --bg-subtle (darker). */
+.pv-psw-ic,
+.pv-shell .pswitch .wmark,
+.pv-shell .side-biz-mark {
+  background: var(--bg-muted);
+}
+.dark .pv-psw-ic,
+.dark .pv-shell .pswitch .wmark,
+.dark .pv-shell .side-biz-mark {
+  background: var(--bg-muted);
+}
+/* Contain, not cover: a logo is artwork with its own margins, and cropping it
+   to fill a square is how wordmarks lose their first and last letter. */
+.pv-psw-ic img,
+.pv-shell .pswitch .wmark img,
+.pv-shell .side-biz-mark img {
+  object-fit: contain;
+}
+.pv-psw-ic.add {
+  background: transparent;
+  border: 1.5px dashed var(--border-strong);
+  color: var(--text-muted);
+}
+.pv-psw-txt {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+.pv-psw-txt b {
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pv-psw-txt span {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 1px;
+  line-height: 1.3;
+}
+.pv-psw-txt span.cap {
+  text-transform: capitalize;
+}
+
+/* ============================ Hub tabs ============================
+   A tab strip under the header showing the current hub's sibling pages. */
+.pv-shell.hubtabs-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  height: 46px;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg-glass, var(--bg));
+  backdrop-filter: saturate(1.4) blur(8px);
+  position: sticky;
+  top: 56px;
+  z-index: 25;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.pv-shell.hubtabs-wrap::-webkit-scrollbar {
+  display: none;
+}
+.pv-shell .hubtabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 100%;
+}
+.pv-shell .hubtab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 13px;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--ink-3);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.14s ease;
+}
+.pv-shell .hubtab:hover {
+  color: var(--ink-2);
+}
+.pv-shell .hubtab.on {
+  color: var(--ink);
+}
+.pv-shell .hubtab::after {
+  content: '';
+  position: absolute;
+  left: 13px;
+  right: 13px;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--brand-500, #2563eb);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.pv-shell .hubtab.on::after {
+  transform: scaleX(1);
+}
+
+/* Section divider between core nav and the growth/build hubs. */
+.pv-shell .navsep {
+  height: 1px;
+  background: var(--line);
+  margin: 9px 8px 6px;
+}
+
+/* ---------------------------------------------------------------------------
+   SIDEBAR FOOTER — who's in this business, plus the two app-level switches.
+
+   Sits after .nav, which is flex:1, so it lands at the bottom on its own. The
+   space above it is deliberately empty: that gap is the nav's breathing room,
+   and stretching something to meet the footer would fill it with furniture.
+
+   Every row here mirrors .navlink's geometry exactly — 28px tall, 9px side
+   padding, a 20px icon slot, 9px gap — so the footer sits on the same optical
+   column as the nav above it. When the nav's pitch moves, this moves with it;
+   a footer that kept the old height would step out of the rail's rhythm at
+   exactly the place the eye is most likely to notice, the bottom edge. Anything that invents its own padding here reads
+   as a different rail bolted to the bottom of this one.
+   --------------------------------------------------------------------------- */
+.pv-shell .side-foot {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid var(--line);
+}
+/* Take payment. First in the foot, directly under the divider, so it reads as
+   pinned to the bottom block rather than as one more nav row. Full width
+   expanded; collapsed it is the glyph alone, centred on the nav's icon column.
+   No horizontal padding of its own — the rail already supplies the optical
+   column that .navlink and .side-plan sit in. */
+.pv-shell .side-foot-take {
+  display: grid;
+  justify-items: center;
+  padding: 2px 0 8px;
+}
+
+/* The plan nudge. The one thing in this rail that is a CARD rather than a row,
+   because it is the one thing that is not navigation — every other item here
+   goes somewhere, and this makes a case. It aligns to the same optical column
+   as .navlink (9px side padding) so it reads as part of this rail rather than
+   as an advert dropped into it, and it is the only element in the footer with
+   its own ground. */
+.pv-shell .side-plan {
+  margin: 2px 0 6px;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg-subtle, transparent);
+}
+.pv-shell .side-plan-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 6px;
+}
+.pv-shell .side-plan-title {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--text-primary);
+}
+.pv-shell .side-plan-x {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  margin: -2px -2px 0 0;
+  border-radius: 5px;
+  color: var(--text-muted);
+  transition:
+    color 120ms ease,
+    background-color 120ms ease;
+}
+.pv-shell .side-plan-x:hover {
+  background: var(--interactive-hover);
+  color: var(--text-primary);
+}
+.pv-shell .side-plan-body {
+  margin-top: 3px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-tertiary);
+}
+/* Full width and quiet. A brand-filled button here would be the loudest thing
+   in the sidebar, louder than the page the merchant is actually working on.
+   Take payment above is the one exception, and it earns it by being an act the
+   merchant performs rather than a case this card is making. */
+.pv-shell .side-plan-cta {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--bg-base);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: border-color 120ms ease;
+}
+.pv-shell .side-plan-cta:hover {
+  border-color: var(--border-strong);
+}
+.pv-shell.sidebar.collapsed .side-foot {
+  align-items: center;
+} /* ---------------------------------------------------------------------------
+   SWITCHER: FILTER, MARKS, ACCOUNT MENU
+   --------------------------------------------------------------------------- */
+
+.pv-psw-empty {
+  padding: 10px 9px 12px;
+  font-size: 12.5px;
+  color: var(--text-tertiary);
+}
+
+/* The generated gradient carries recognition; the initial confirms it. */
+.pv-psw-ic {
+  position: relative;
+  overflow: hidden;
+}
+.pv-psw-initial {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.wmark .pv-psw-initial {
+  font-size: 13px;
+}
+
+/* Every row in the sidebar's foot — same geometry as .navlink above it, so
+   the whole rail sits on one optical column: 28px tall, 9px side padding, a
+   20px icon well, 9px gap. The account row shared this rule until it moved
+   into the workspace switcher (2026-09-03); nothing in the foot is allowed a
+   second opinion about what a footer row measures. */
+.pv-shell .side-foot-link {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  height: 28px;
+  padding: 0 9px;
+  border-radius: 10px;
+  font-size: 12.8px;
+  font-weight: 500;
+  color: var(--ink-2);
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+/* `[data-state='open']` covers BOTH footer triggers, not just the account.
+   "Finish setting up" is a popover trigger like the account row, and it was
+   the one row in the rail that lit up for nothing while its panel was open —
+   you could not tell which row you had opened, or that you had opened one. A
+   row holding a panel open is selected in exactly the way a row on its own
+   page is. */
+.pv-shell .side-foot-link:hover,
+.pv-shell .side-foot-link[data-state='open'] {
+  background: var(--interactive-hover);
+  color: var(--ink-1);
+}
+/* ---------------------------------------------------------------------------
+   THE DECK — two cards, the lower one peeking out from under the upper.
+
+   Ported off lovable.dev/dashboard on John's call (2026-09-03) with the
+   numbers read out of their live DOM rather than eyeballed: a frame whose
+   HEIGHT animates, and two cards on `origin-top` each animating its own
+   transform, 200ms ease-out on both.
+
+     rest    frame 64px   card1 translateY(0) scale(1)   card2 translateY(10px) scale(.95)
+     hover   frame 120px  card1 unchanged                card2 translateY(64px) scale(1)
+
+   The 10px of card 2 showing at 95% is what makes it read as a card BEHIND
+   rather than a coloured strip: you can see there is more of it.
+   --------------------------------------------------------------------------- */
+.pv-shell .side-deck {
+  /* Negative margin then padding, Lovable's trick: the hover target extends
+     past the cards so the pointer does not fall through the 8px gap between
+     them and collapse the deck under its own hover. */
+  margin: 2px -8px 6px;
+  padding: 0 8px;
+}
+.pv-shell .side-deck-frame {
+  position: relative;
+  height: 64px;
+  transition: height var(--motion-normal) var(--ease-settle);
+}
+.pv-shell .side-deck[data-open] .side-deck-frame {
+  height: 120px;
+}
+.pv-shell .side-deck-top,
+.pv-shell .side-deck-under {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  transform-origin: top;
+  transition: transform var(--motion-normal) var(--ease-settle);
+}
+.pv-shell .side-deck-top {
+  z-index: 2;
+}
+.pv-shell .side-deck-under {
+  z-index: 1;
+  transform: translateY(10px) scale(0.95);
+}
+.pv-shell .side-deck[data-open] .side-deck-under {
+  transform: translateY(64px) scale(1);
+}
+
+/* The card itself. 56px, the two-line block on the left and a round badge on
+   the right — the same geometry both cards use, so the deck reads as a stack
+   of one kind of thing. */
+.pv-shell .side-deck-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  height: 56px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg-base);
+  transition: border-color var(--motion-fast) var(--ease-settle);
+}
+.pv-shell .side-deck-txt {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  /* Takes the room the badge leaves, now that the badge leads and the meter
+     under the words has to span the card rather than the words. */
+  flex: 1;
+}
+.pv-shell .side-deck-txt b {
+  font-size: 13px;
+  font-weight: 550;
+  line-height: 1.25;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pv-shell .side-deck-txt span {
+  font-size: 11.5px;
+  line-height: 1.3;
+  color: var(--text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The meter on the credits card. Two elements: a recessed track and a filled
+   span whose width IS the reading, so nothing here needs a number to be
+   legible at a glance. 3px, because it sits under two lines of type in a 56px
+   card and anything thicker becomes the loudest thing in the rail. */
+.pv-shell .side-deck-bar {
+  display: block;
+  height: 3px;
+  margin-top: 5px;
+  border-radius: 999px;
+  background: var(--bg-muted);
+  overflow: hidden;
+}
+.pv-shell .side-deck-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--accent-primary);
+  transition: width var(--motion-slow) var(--ease-settle);
+}
+.pv-shell .side-deck-badge {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: var(--bg-muted);
+  color: var(--text-secondary);
+}
+
+/* THE TRAVELLING RING on the top card. A 1px inset layer carrying a wide
+   gradient, masked so only the border shows, held at opacity 0 and with its
+   animation PAUSED until the deck is pointed at. Paused rather than absent
+   because a rail is on screen all day and the motion doctrine's rule for
+   things seen tens of times a day is to reduce motion, not tune it. */
+.pv-shell .side-deck-ring {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  /* The ask bar's own light, at the same stops. `--glow-2/3/4/core` are
+     declared on `.ask-glow-ring` in globals.css and are the house's one
+     sanctioned gradient palette — a second set of hues in the same rail would
+     be a second idea of what Box's light looks like. */
+  background: linear-gradient(
+    90deg,
+    #a6cdff,
+    #4787f7,
+    #2648ef,
+    #4787f7,
+    #a6cdff
+  );
+  background-size: 300% 100%;
+  opacity: 0;
+  transition: opacity var(--motion-normal) var(--ease-settle);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: side-deck-travel 8s ease-in-out infinite alternate;
+  animation-play-state: paused;
+  pointer-events: none;
+}
+.pv-shell .side-deck[data-open] .side-deck-ring {
+  opacity: 1;
+  animation-play-state: running;
+}
+.pv-shell .side-deck[data-open] .side-deck-top .side-deck-card {
+  border-color: transparent;
+}
+@keyframes side-deck-travel {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+
+/* THE BLOOM under the lower card — light escaping from behind it, which is
+   what tells you the card is lifted off the rail rather than drawn on it. It
+   sits BEHIND the card (z-index 0 against the card's own ground) and drops 2px
+   further on hover, so the light stretches as the card travels. */
+.pv-shell .side-deck-under {
+  isolation: isolate;
+}
+.pv-shell .side-deck-bloom {
+  position: absolute;
+  inset-inline: 8px;
+  bottom: 6px;
+  z-index: 0;
+  height: 12px;
+  border-radius: 0 0 10px 10px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, #75a5f9 80%, transparent),
+    color-mix(in srgb, #2648ef 80%, transparent),
+    color-mix(in srgb, #4787f7 80%, transparent)
+  );
+  filter: blur(12px);
+  transform: translateY(0);
+  transition: transform var(--motion-normal) var(--ease-settle);
+  pointer-events: none;
+}
+.pv-shell .side-deck[data-open] .side-deck-bloom {
+  transform: translateY(2px);
+}
+.pv-shell .side-deck-under .side-deck-card {
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .side-deck-ring {
+    animation: none;
+  }
+}
+
+/* ONE DISMISS, AND IT IS IN THE FIELD. `DialogContent` draws its own X at the
+   panel's top-right for every dialog in the app; the search panel puts one
+   inside the search bar instead (John, 2026-09-03), and two X's 40px apart is
+   a merchant working out which one closes what. Hidden rather than made
+   optional in `DialogContent`, because every other dialog wants the corner one
+   and this is the single exception. */
+.pv-search-panel > button[class*='absolute'] {
+  display: none;
+}
+
+/* THE SEARCH FIELD, WHILE A SCOPE IS PINNED IN IT.
+   `surface-interactive` sets `border-color` itself, so this cannot be a
+   utility on the element — two utilities on one property are decided by the
+   order they happen to sit in the stylesheet, which is not a decision anybody
+   made. Not scoped to `.pv-shell`: the panel is portaled to the body. */
+.pv-search-field[data-scoped] {
+  border-color: var(--accent-primary);
+}
+
+/* The keyboard hint on the Search row, and on the search panel's footer.
+   Quiet enough that it reads as a footnote to the label rather than a second
+   label: a shortcut is for the person who already knows the row is there.
+
+   NOT SCOPED TO `.pv-shell`. The panel is portaled to the body, so a prefixed
+   rule would match in the rail and silently do nothing in the modal — which
+   is the one place the hints are actually teaching something. The
+   `margin-left: auto` that pushes it to the rail row's right margin is scoped
+   instead, because the footer lays its own out. */
+.side-foot-kbd {
+  flex: none;
+  padding: 1px 5px;
+  border-radius: 6px;
+  background: var(--bg-muted);
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 10.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+}
+.pv-shell .side-foot-link .side-foot-kbd {
+  margin-left: auto;
+}
+.pv-shell .side-foot-link.active {
+  color: var(--ink-1);
+  background: var(--interactive-hover);
+}
+
+/* The team row's faces, in the RAIL rather than in the switcher menu.
+   `.pv-psw-face` cuts its notch by filling 2px of padding with the ground it
+   sits on, so the ground has to be named again here: the menu's is
+   `--bg-elevated`, the rail's is the dashboard ground it blends into. Get this
+   wrong and the notch is a pale ring round every face instead of a gap. */
+.pv-shell .side-foot-link .pv-psw-face {
+  background: var(--app-ground);
+}
+.dark .pv-shell .side-foot-link .pv-psw-face {
+  background: var(--bg-subtle);
+}
+/* Collapsed, the label goes and the glyph takes the icon column, exactly as
+   the nav rows above it do. */
+.pv-shell.sidebar.collapsed .side-foot-link {
+  justify-content: center;
+  padding: 0;
+}
+.pv-shell.sidebar.collapsed .side-foot-link .lbl {
+  display: none;
+}
+.pv-shell .side-foot-link .lbl {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+/* Portaled to <body>, but the main content area makes its own stacking
+   context, so without a z-index the menu paints behind the page it opens
+   over. Matches the switcher menu's layer. */
+.pv-menu-surface {
+  z-index: 95;
+}
+.pv-menu-surface.pv-psw-account {
+  min-width: 232px;
+}
+
+/* The inbox and the theme flip ride the Workspace settings row — John,
+   2026-09-03: *"the notification icon and the dark mode and light mode thingy
+   let it be beside workspace settings"*.
+
+   They had a line of their own after the account left for the switcher, which
+   spent a whole 28px row of the rail on two glyphs that are not destinations.
+   Sharing a line with a row that IS one costs nothing: the link keeps the
+   label column and its own hover, the switches sit on the right margin and
+   keep theirs, so three targets read as three targets.
+
+   Collapsed, the rail is one glyph wide and a row cannot hold three, so the
+   line breaks into a column — the same thing it did when the account was
+   here. */
+.pv-shell .side-foot-ws {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.pv-shell .side-foot-ws .side-foot-link {
+  flex: 1;
+  min-width: 0;
+}
+.pv-shell.sidebar.collapsed .side-foot-ws {
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+}
+.pv-shell.sidebar.collapsed .side-foot-me {
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+}
+
+/* =============================================================================
+   THE ARRIVAL — the nav assembling for a business created moments ago.
+
+   The merchant watched these exact rows fill in under their answer during
+   setup, read from the same registry (lib/intents/intent-nav). Landing them one
+   after another turns that promise into its delivery: the last thing they saw
+   before pressing Continue is the first thing that happens after it.
+
+   Driven by a class on the shell container rather than from inside the sidebar,
+   so the nav needs no knowledge of onboarding — and so this never has to touch
+   sidebar.tsx, which is a 1300-line component several people edit at once.
+
+   `backwards` fill: the rows hold their pre-animation state through the delay
+   instead of flashing in at full opacity and then starting.
+   ============================================================================= */
+@keyframes navitem-arrive {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.pb-arriving .pv-shell .navitem {
+  animation: navitem-arrive 320ms var(--motion-ease-settle) backwards;
+}
+/* Staggered down the rail. Capped at ten: past that the tail is arriving long
+   after anyone is still watching, and the welcome is waiting on it. */
+.pb-arriving .pv-shell .navitem:nth-child(1) {
+  animation-delay: 40ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(2) {
+  animation-delay: 100ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(3) {
+  animation-delay: 160ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(4) {
+  animation-delay: 220ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(5) {
+  animation-delay: 280ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(6) {
+  animation-delay: 340ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(7) {
+  animation-delay: 400ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(8) {
+  animation-delay: 460ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(9) {
+  animation-delay: 520ms;
+}
+.pb-arriving .pv-shell .navitem:nth-child(n + 10) {
+  animation-delay: 560ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pb-arriving .pv-shell .navitem {
+    animation: none;
+  }
+}
+
+/* The head of the rail: the business's mark and name (the switcher) at the
+   left, Search at the right (Linear's arrangement). */
+.pv-shell .side-head {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 6px 0 6px;
+}
+.pv-shell .side-head {
+  position: relative;
+}
+.pv-shell .side-head-expand {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: 10px;
+  color: var(--text-primary);
+  background: var(--bg-base);
+  opacity: 0;
+  transition: opacity var(--motion-fast) var(--motion-ease-out);
+}
+.pv-shell .side-head-expand:hover,
+.pv-shell .side-head-expand:focus-visible {
+  opacity: 1;
+}
+.pv-shell .side-head-expand:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-shell .side-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.pv-shell .side-head-icon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  /* A frame with a fill, so Search reads as a control and not a loose glyph —
+     kept faint, so it sits back from the business name beside it. */
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 45%, transparent);
+  background: color-mix(in srgb, var(--bg-muted) 45%, transparent);
+  color: var(--text-secondary);
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+.pv-shell .side-head-icon:hover,
+.pv-shell .side-head-icon[aria-expanded='true'] {
+  background: var(--interactive-hover);
+  color: var(--text-primary);
+}
+.pv-shell .side-head-icon:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring);
+}
+.pv-shell .pswitch.pswitch-head {
+  /* Hugs its content, with the chevron beside the name, and no frame: Search
+     and Ask share the row now, at the right. */
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0 auto 0 0;
+  height: 36px;
+  padding: 4px 6px;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.pv-shell .pswitch.pswitch-head:hover,
+.pv-shell .pswitch.pswitch-head.open {
+  background: var(--hover);
+}
+.pv-shell .pswitch.pswitch-head {
+  gap: 6px;
+}
+.pv-shell .pswitch.pswitch-head .pl {
+  flex: 0 1 auto;
+}
+.pv-shell .pswitch.pswitch-head .sw {
+  margin-left: 2px;
+}
+.pv-shell .pswitch.pswitch-head .pl b {
+  font-size: 14.8px;
+}
+/* Smaller than the card's 26px mark, so the name leads: 22px, an even size
+   that centres in the 28px Search frame's row. */
+.pv-shell .pswitch.pswitch-head .wmark {
+  width: 22px;
+  height: 22px;
+  border-radius: 8px;
+  font-size: 10px;
+}
+
+/* Collapsed: the head stacks into one column. */
+.pv-shell.sidebar.collapsed .side-head {
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Setup progress under the business row: a sentence, a percentage, a thin bar. */
+.pv-shell .side-setup {
+  width: 100%;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin: 2px 0 6px;
+  padding: 8px 10px 9px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--bg-muted) 40%, transparent);
+  transition: background 0.12s;
+}
+.pv-shell .side-setup:hover {
+  background: var(--hover);
+}
+.pv-shell .side-setup-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12.5px;
+  color: var(--ink-2);
+}
+.pv-shell .side-setup-row b {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+.pv-shell .side-setup-track {
+  display: block;
+  height: 5px;
+  border-radius: 999px;
+  background: var(--border-default);
+  overflow: hidden;
+}
+.pv-shell .side-setup-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--accent-primary);
+  transition: width 0.4s var(--motion-ease-out, ease-out);
+}
+
+/* The foot, with the setup progress above its divider. The wrapper is what is
+   pinned to the bottom of the rail, so the bar stays against the divider. */
+.pv-shell .side-foot-wrap {
+  position: relative;
+  margin-top: auto;
+}
+.pv-shell .side-foot-wrap > .side-foot {
+  margin-top: 0;
+}
+/* The setup bar is frosted glass floating over the bottom of the nav, so rows
+   that scroll beneath it show through, blurred. It takes no room of its own;
+   the nav is given the space below (see the :has rule) so the last row can
+   still scroll clear of it. */
+.pv-shell .side-foot-wrap > .side-setup {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 100%;
+  z-index: 3;
+  margin: 0 0 8px;
+  border-color: color-mix(in srgb, var(--border-default) 70%, transparent);
+  background: color-mix(in srgb, var(--bg-muted) 55%, transparent);
+  -webkit-backdrop-filter: blur(14px) saturate(1.3);
+  backdrop-filter: blur(14px) saturate(1.3);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
+}
+.pv-shell .side-foot-wrap > .side-setup:hover {
+  background: color-mix(in srgb, var(--hover) 70%, transparent);
+}
+.pv-shell.sidebar:has(.side-setup) .nav {
+  padding-bottom: 66px;
+}
+
+/* ---- The loader while the sidebar waits on a new business type ------------
+   One line where the new rows will land, set in the rail's own type (Inter,
+   13.3px, 500, the label colour) with a blue braille spinner in the icon's
+   place. It scrambles through block characters before it settles; the final
+   words are laid out invisibly under it so the line never changes width. */
+.pv-shell .nav-pending {
+  overflow: hidden;
+}
+.pv-shell .nav-pending-ascii {
+  padding: 0 9px;
+  font-size: 13.3px;
+  font-weight: 500;
+  line-height: 1;
+  /* A touch dimmer than a real label, so it reads as waiting. */
+  color: color-mix(in srgb, var(--ink-2) 34%, transparent);
+  font-variant-ligatures: none;
+}
+.pv-shell .nav-pending-line {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 30px;
+  white-space: pre;
+  overflow: hidden;
+}
+.pv-shell .nav-pending-spin {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  flex: none;
+  color: var(--brand-500, var(--ink-2));
+}
+.pv-shell .nav-pending-words {
+  position: relative;
+  display: inline-grid;
+}
+.pv-shell .nav-pending-words > span {
+  grid-area: 1 / 1;
+}
+.pv-shell .nav-pending-words > .nav-pending-fixed {
+  visibility: hidden;
+}
+
+/* A slow, wide beam of light passes along the words and the glow beneath them
+   swells and settles, like something large hovering over the line. The words
+   themselves stay muted; only the beam is bright. */
+.pv-shell .nav-pending-words > span:not(.nav-pending-fixed) {
+  color: transparent;
+  background-image: linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--ink-2) 34%, transparent) 0%,
+    color-mix(in srgb, var(--ink-2) 34%, transparent) 38%,
+    color-mix(in srgb, var(--brand-500, #3b5bff) 55%, var(--text-primary)) 50%,
+    color-mix(in srgb, var(--ink-2) 34%, transparent) 62%,
+    color-mix(in srgb, var(--ink-2) 34%, transparent) 100%
+  );
+  background-size: 320% 100%;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation:
+    nav-pending-beam 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite,
+    nav-pending-boom 1.4s ease-in-out infinite;
+}
+@keyframes nav-pending-beam {
+  0% {
+    background-position: 130% 0;
+  }
+  100% {
+    background-position: -30% 0;
+  }
+}
+@keyframes nav-pending-boom {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 0 transparent);
+  }
+  50% {
+    filter: drop-shadow(
+      0 0 7px color-mix(in srgb, var(--brand-500, #3b5bff) 55%, transparent)
+    );
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .nav-pending-words > span:not(.nav-pending-fixed) {
+    animation: none;
+    color: color-mix(in srgb, var(--ink-2) 34%, transparent);
+    background-image: none;
+  }
+}
+
+/* The plan on the business you are in, only where the host names one. */
+.pv-psw-plan {
+  flex: none;
+  margin-left: auto;
+  padding: 1px 8px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
+  background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
+  color: var(--text-primary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+/* Two cards stacked at the foot, opening on hover or focus. Numbers are
+   Lovable's: 56px cards, 8px apart, a 0.2s ease-out. */
+.pv-shell .side-stack {
+  position: relative;
+  margin: 0 -8px;
+  padding: 8px;
+}
+.pv-shell .side-stack-in {
+  position: relative;
+  height: 56px;
+  transition: height 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+.pv-shell .side-stack-in:has(.side-stack-back) {
+  height: 64px;
+}
+.pv-shell .side-stack:hover .side-stack-in:has(.side-stack-back),
+.pv-shell .side-stack:focus-within .side-stack-in:has(.side-stack-back) {
+  height: 120px;
+}
+.pv-shell .side-stack .side-stack-card {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 56px;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 12px 0 14px;
+  border-radius: 12px;
+  border: 1px solid var(--border-default);
+  background: var(--bg-elevated, var(--bg-muted));
+  transform-origin: bottom;
+  transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), background 0.12s;
+}
+.pv-shell .side-stack .side-stack-front {
+  z-index: 2;
+  text-align: left;
+}
+.pv-shell .side-stack-in:has(.side-stack-back) .side-stack-front {
+  transform: translateY(-8px);
+}
+.pv-shell .side-stack .side-stack-back {
+  z-index: 1;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 7px;
+  transform: translateY(-1px) scale(0.95);
+}
+.pv-shell .side-stack:hover .side-stack-front,
+.pv-shell .side-stack:focus-within .side-stack-front {
+  transform: translateY(-64px);
+}
+.pv-shell .side-stack:hover .side-stack-back,
+.pv-shell .side-stack:focus-within .side-stack-back {
+  transform: none;
+}
+.pv-shell .side-stack-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.pv-shell .side-stack-text b {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--text-primary);
+}
+.pv-shell .side-stack-text span {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-tertiary);
+}
+.pv-shell .side-stack-glyph {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
+  color: var(--accent-primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pv-shell .side-stack-in,
+  .pv-shell .side-stack .side-stack-card {
+    transition: none;
+  }
+}