@boost33/ui 0.4.1 → 0.5.1

package/dist/nav-height-budget.d.ts

@@ -21,6 +21,10 @@ export interface NavSectionShape {
  * taller than 17px -- `Segoe UI` is the known candidate, unmeasured -- gets a
  * model that under-counts, and can correct it here rather than forking the
  * check. Measure a rendered row's `offsetHeight`, do not estimate it.
+ *
+ * The NAV_*_PX constants named below are this module's own and are not published
+ * (B33-483); they are the defaults, not something a caller reads. Omitting a
+ * field here takes the default, which is why there is nothing to import.
  */
 export interface NavRowCosts {
     /** What one nav row costs. Defaults to NAV_ITEM_PX, the expanded row in Inter. */

package/dist/nav-height-budget.js

@@ -1,16 +1,16 @@
-const P = 185, X = 86, c = 271, H = 33, L = 30, V = 16, T = 8, S = r(900);
-function C(_, t = {}) {
+const P = 185, S = 86, H = 33, X = 30, T = 16, V = 8, N = c(900);
+function i(_, t = {}) {
   if (_.length === 0) return 0;
-  const E = t.itemPx ?? 33, e = t.sectionHeaderPx ?? 30, A = _.reduce(
-    (o, n) => o + (n.hasHeader ? e : 0) + n.itemCount * E,
+  const e = t.itemPx ?? 33, E = t.sectionHeaderPx ?? 30, o = _.reduce(
+    (A, n) => A + (n.hasHeader ? E : 0) + n.itemCount * e,
     0
-  ), N = 16 * (_.length - 1);
-  return A + N + 8;
+  ), r = 16 * (_.length - 1);
+  return o + r + 8;
 }
-function r(_, t = 86) {
+function c(_, t = 86) {
   return _ - 185 - t;
 }
-function i(_, t = S) {
+function a(_, t = N) {
   return {
     usedPx: _,
     budgetPx: t,
@@ -18,21 +18,20 @@ function i(_, t = S) {
     overBy: Math.max(0, _ - t)
   };
 }
-function a(_) {
+function C(_) {
   return _.scrollHeight;
 }
 export {
-  T as NAV_FOCUS_GUTTER_PX,
-  S as NAV_HEIGHT_BUDGET_PX,
+  V as NAV_FOCUS_GUTTER_PX,
+  N as NAV_HEIGHT_BUDGET_PX,
   H as NAV_ITEM_PX,
-  V as NAV_SECTION_GAP_PX,
-  L as NAV_SECTION_HEADER_PX,
-  X as NAV_SHELL_CONSUMER_SLOTS_PX,
-  c as NAV_SHELL_FIXED_PX,
+  T as NAV_SECTION_GAP_PX,
+  X as NAV_SECTION_HEADER_PX,
+  S as NAV_SHELL_CONSUMER_SLOTS_PX,
   P as NAV_SHELL_PACKAGE_FIXED_PX,
-  i as checkNavHeightBudget,
-  a as measureNavHeight,
-  r as navBudgetForViewport,
-  C as navContentHeight
+  a as checkNavHeightBudget,
+  C as measureNavHeight,
+  c as navBudgetForViewport,
+  i as navContentHeight
 };
 //# sourceMappingURL=nav-height-budget.js.map

package/dist/nav-height-budget.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-height-budget.js","sources":["../src/nav-height-budget.ts"],"sourcesContent":["// A sidebar's nav has to fit above the wallet chip and footer without\n// scrolling. Boost Outbound's admin role has already blown past that once, so\n// this is a real check, not a hypothetical.\n//\n// Sidebar calls checkNavHeightBudget and measureNavHeight itself now, and warns\n// outside a production build when a nav does not fit the column it was given\n// (B33-500, ADR-0005). These stay exported for the other half of the job:\n// checking a nav's shape from its data, before it is ever rendered.\n//\n// ===========================================================================\n// WHAT THIS IS A MODEL OF (B33-762)\n// ===========================================================================\n//\n// Every number below was read off a real render. That much was settled in\n// B33-752. What B33-762 found is that the module never said *which* render --\n// which shell's furniture it measured, which nav state its row costs describe,\n// or whose font metrics those costs came from. Three silent assumptions, and a\n// consumer importing the constants could not see any of them.\n//\n// So they are named here, each with the measurement behind it and each with the\n// direction its error runs. A budget that is wrong and documented is\n// recoverable. A budget that is right and undocumented is what produced this\n// ticket.\n//\n// All three measurements were taken on the built specimen in Chromium at\n// 1440x900, deviceScaleFactor 2, reduced motion -- the screenshot harness's own\n// conditions -- and re-taken on 23 Sep 2026 for this pass.\n//\n// ---------------------------------------------------------------------------\n// Assumption 1: the column is the stress specimen's, and part of it is not ours\n// ---------------------------------------------------------------------------\n//\n// NAV_SHELL_FIXED_PX is not one number this package can be correct about. Most\n// of the column is the package's own furniture, but the switcher, the wallet\n// chip and the footer are *slots* -- the consumer's markup, whose height the\n// package neither sets nor knows. Measured across the two routes that render\n// the whole shell:\n//\n//                                   stress (820px)   Wallet (900px)\n//   wordmark block                        56               56\n//   switcher wrapper padding              16               16\n//   .foot padding-block-start + gap       32               32\n//   nav's negative gutter margin          -8               -8\n//   WalletChip, expanded                  89               89\n//   -- package subtotal                  185              185\n//   switcher slot contents                42               42\n//   footer slot contents                  44               32\n//   -- consumer subtotal                  86               74\n//   == fixed furniture                   271              259\n//\n// The package half is identical on both routes, which is the point: 185px is a\n// number this package owns and can defend. The 12px of difference is entirely\n// the footer slot -- the stress route's avatar row is 8+28+8, the Wallet\n// route's link row is 12+16+4.\n//\n// The default therefore stays pinned to the stress route's 271, unchanged from\n// B33-752. Re-pinning it to the Wallet, as this ticket was originally filed to\n// do, would move a published constant 12px toward the false-\"fits\" direction on\n// the strength of one consumer's footer -- and a consumer with a taller footer\n// than either route would then be handed a budget that over-counts their\n// column, which is exactly the B33-752 defect returning by another door.\n//\n// A consumer whose slots differ passes their own measured total as the second\n// argument to navBudgetForViewport. That is the honest interface: the package\n// states what it owns, and the caller states what they own.\n//\n// ---------------------------------------------------------------------------\n// Assumption 2: the row costs describe the expanded nav, not the rail\n// ---------------------------------------------------------------------------\n//\n// NAV_ITEM_PX and NAV_SECTION_HEADER_PX are expanded-nav costs, and the rail is\n// deliberately out of this model's scope. On the rail the label goes out of\n// flow (position: absolute, clipped), so the 16px icon is the tallest in-flow\n// child and a row measures 8+16+8 = 32px, not 33; and AppShell passes\n// `label={collapsed ? undefined : section.label}`, so NavSection renders no\n// header element at all and a headed section costs 0, not 30.\n//\n// Modelling that would mean a NAV_RAIL_ITEM_PX and a `collapsed` flag on\n// NavSectionShape -- a public API change to a module four products import, to\n// describe a state that cannot overflow. The measurement says it cannot. Same\n// specimen, same 13-item shape, same 820px stage:\n//\n//                          expanded        rail\n//   nav scrollHeight          575          472\n//   column left for the nav   549          587\n//   verdict                 scrolls        fits, 115px spare\n//\n// The rail is shorter on both sides at once: its rows lose the label's line\n// box, and its furniture shrinks too (the wallet chip collapses 89 -> 75, the\n// switcher 42 -> 34, the footer 44 -> 28). So checking a rail nav against the\n// expanded model over-counts its content by 103px and under-counts its column\n// by 38px -- 141px of slack, both errors in the safe direction. The expanded\n// model is a conservative bound on the rail, and scripts/nav-height-budget-\n// check.mts now drives the rail stage and asserts exactly that, so the claim\n// fails CI if it ever stops being true.\n//\n// The runtime half was never affected: Sidebar measures the real DOM, so its\n// dev warning is correct in either state.\n//\n// ---------------------------------------------------------------------------\n// Assumption 3: the row costs are Inter's line boxes, and the package ships no\n// font\n// ---------------------------------------------------------------------------\n//\n// Neither NavItem's row and label nor NavSection's header sets a line-height;\n// the computed value is `normal`, so half of each row cost is token-derived\n// padding and the rest is whatever line box the consumer's font draws. This\n// package ships no font -- there is no @font-face anywhere in src/, `files` is\n// [\"dist\"], and a guard test forbids src/ from reaching the specimen's font\n// file. The faces are the consumer's; the tokens carry only a fallback stack.\n//\n// Swapping --font-sans on the built specimen, same stage, same 13-item shape:\n//\n//   family                    row   header   nav scrollHeight\n//   Inter (the tokens' head)   33      30          575\n//   system-ui                  33      29          572\n//   Helvetica                  32      29          559\n//   Arial                      32      28          556\n//   Georgia                    32      28          556\n//\n// Every face reachable on macOS renders shorter than Inter, so the model\n// over-counts -- the safe direction. The constants therefore stay as they are\n// and this dependency is recorded rather than removed.\n//\n// Removing it would mean setting an explicit line-height from the --leading-*\n// tokens, the way PageHeader already does (its title state measures a flat\n// 156px across every face). That is the better model, and it is not done here\n// on purpose: --leading-tight at --text-2xs gives a 29px section header against\n// today's 30, which moves the sidebar-*, navsection-* and appshell-* renders by\n// a pixel. A baseline change is a human approving a design change (CLAUDE.md),\n// and the pixel-ratio diff would wave a 1px header through in silence anyway\n// (B33-548, B33-772). It wants its own ticket with a human at the fidelity gate.\n//\n// >>> THE MEASUREMENT THIS MODEL IS STILL MISSING <<<\n//\n// 'Segoe UI' sits in the fallback stack and is reported to carry a ~1.33 normal\n// line-height factor, which at 14px would give a ~19px line box and a 35px row\n// -- an UNDER-count, the one direction B33-752 exists to forbid. It is NOT\n// recorded above because it could not be measured: this pass ran on macOS,\n// where Segoe UI is not installed. Requesting it resolves to the fallback --\n// canvas measureText at 14px gives 'Segoe UI' 241.097px for the same string as\n// a deliberately nonsense family name, against 249.737px for Helvetica and\n// 268.837px for Inter -- so the 32/29 a naive swap reports is Helvetica wearing\n// Segoe UI's name, not Segoe UI.\n//\n// A human on Windows has to take it, and nothing here should be tuned to a\n// guessed number in the meantime. Until then the honest statement of this\n// module's scope is: these costs hold for a --font-sans whose `normal` line box\n// at 14px is 17px or less, which is every face measured. A Windows consumer is\n// outside that and is protected only by Sidebar's runtime warning, which\n// measures the real DOM and is right whatever the font does.\n//\n// The browser check cannot close this either -- the specimen bundles Inter, so\n// it can only ever confirm Inter's numbers.\n//\n// ===========================================================================\n//\n// NOTE for a human: boostledger/src/ui/shell/nav.ts carries the same constants\n// and the same navHeight arithmetic, inherited from the architecture doc's\n// §4.1, and has the same under-count/over-count. It is in another repo and\n// another GitHub org, so it is not corrected here; it wants the same fix\n// (B33-752).\n\n// The part of the fixed furniture this package draws itself, and is therefore\n// the only part it can be correct about: the wordmark block (56), the switcher\n// wrapper's padding (16), `.foot`'s padding-block-start and gap (32) and the\n// expanded WalletChip (89), less the 8px the nav takes back as negative margin\n// for its focus gutter. Measured identical on both shell routes -- see\n// \"Assumption 1\" above. The nav's own scroll gutter is NOT part of this: it\n// sits inside the nav's client box, so it lives in the budget (and in\n// navContentHeight), not in the furniture -- counting it here as well would\n// double it.\nexport const NAV_SHELL_PACKAGE_FIXED_PX = 185\n\n// The slots the consumer fills, as the stress specimen fills them: a 42px\n// switcher button and a 44px account footer. This is an ALLOWANCE, not a\n// package fact -- the Wallet route's own slots total 74px, and a consumer with\n// a taller footer than either exceeds it. A consumer who knows their own slot\n// heights passes the total to navBudgetForViewport instead of taking this.\nexport const NAV_SHELL_CONSUMER_SLOTS_PX = 86\n\n// The sidebar's fixed furniture above and below the nav, as the stress\n// specimen renders it: the package's own 185 plus that route's 86 of slots.\n// Equal to the column height less the nav's own client box (820 - 549), which\n// is how B33-752 measured it and why the value is unchanged from it.\nexport const NAV_SHELL_FIXED_PX = NAV_SHELL_PACKAGE_FIXED_PX + NAV_SHELL_CONSUMER_SLOTS_PX\n\n// The per-row costs of the EXPANDED nav, each the padding the CSS sets plus the\n// line box the text draws into. A nav item is --spacing-2 top and bottom (16px)\n// around a 14px label's 17px line box; a section header is the same 16px around\n// an 11px label's 14px line box. Measured in the specimen render, not derived\n// from Paper (see NavItem.module.css `.row` and NavSection.module.css\n// `.header`).\n//\n// Two things these numbers do not cover, both argued in full above. They are\n// the rail's costs only by accident -- a rail row is 32px and a rail section\n// header is nothing at all (assumption 2) -- and their line-box half belongs to\n// the consumer's font, not to this package (assumption 3). Both errors run in\n// the over-counting direction for every face that could be measured; the\n// Windows case is unmeasured and is the one candidate for the other direction.\nexport const NAV_ITEM_PX = 33\nexport const NAV_SECTION_HEADER_PX = 30\n\n// The gap the nav sets between its sections (--spacing-4, AppShell.module.css\n// `.nav`), counted once between each adjacent pair.\nexport const NAV_SECTION_GAP_PX = 16\n\n// The nav's own scroll gutter: --spacing-1 of padding top and bottom, the 4px\n// each way that keeps NavItem's focus ring off the scrollport edge (ADR-0005).\n// It is part of the nav's box, so it counts toward the height the nav takes.\nexport const NAV_FOCUS_GUTTER_PX = 8\n\n// The nav budget at the reference 900px viewport: what the column leaves once\n// the fixed furniture is taken. Derived from NAV_SHELL_FIXED_PX so the two\n// cannot disagree; used as the default budget and named in the dev warning.\nexport const NAV_HEIGHT_BUDGET_PX = navBudgetForViewport(900)\n\n/** One section of a nav, described by its shape rather than its rendered rows. */\nexport interface NavSectionShape {\n  /** Whether the section carries a header label (its NAV_SECTION_HEADER_PX cost). */\n  hasHeader: boolean\n  /** How many nav items the section holds (NAV_ITEM_PX each). */\n  itemCount: number\n}\n\n/**\n * The per-row costs to charge, for a consumer who has measured their own.\n *\n * The defaults are Inter's, and are right for every face this package could\n * measure. A consumer rendering in a font whose `normal` line box at 14px is\n * taller than 17px -- `Segoe UI` is the known candidate, unmeasured -- gets a\n * model that under-counts, and can correct it here rather than forking the\n * check. Measure a rendered row's `offsetHeight`, do not estimate it.\n */\nexport interface NavRowCosts {\n  /** What one nav row costs. Defaults to NAV_ITEM_PX, the expanded row in Inter. */\n  itemPx?: number\n  /** What one section header costs. Defaults to NAV_SECTION_HEADER_PX. */\n  sectionHeaderPx?: number\n}\n\n/**\n * The vertical space an EXPANDED nav takes, summed from its sections' shapes --\n * the rows and headers, the gaps the nav sets between sections, and the nav's\n * own scroll gutter. This is the whole box the nav occupies (its rendered\n * scrollHeight), so the budget can be checked from the nav's data alone, before\n * it is rendered into a sidebar that might not fit it -- Boost Outbound's admin\n * role has overflowed this once already.\n *\n * The rail is out of scope and needs no separate model: a collapsed nav is\n * shorter than the same nav expanded, in a column that is taller, so this is a\n * conservative bound on it (B33-762, and the check that pins it).\n *\n * Pass `costs` only if you have measured a rendered row in your own font; the\n * defaults are the package's, measured in Inter.\n */\nexport function navContentHeight(sections: NavSectionShape[], costs: NavRowCosts = {}): number {\n  if (sections.length === 0) return 0\n  const itemPx = costs.itemPx ?? NAV_ITEM_PX\n  const sectionHeaderPx = costs.sectionHeaderPx ?? NAV_SECTION_HEADER_PX\n  const rows = sections.reduce(\n    (used, section) => used + (section.hasHeader ? sectionHeaderPx : 0) + section.itemCount * itemPx,\n    0,\n  )\n  const gaps = NAV_SECTION_GAP_PX * (sections.length - 1)\n  return rows + gaps + NAV_FOCUS_GUTTER_PX\n}\n\n/**\n * The nav's budget at a given viewport: what is left once the fixed shell parts\n * are taken.\n *\n * `consumerSlotsPx` is the total height of the three slots this package does\n * not own -- the switcher, the wallet chip's neighbours and the sidebar footer\n * as the consumer renders them. It defaults to the stress specimen's 86px\n * allowance, which is what NAV_SHELL_FIXED_PX assumes. A consumer whose footer\n * or switcher is taller than that MUST pass their own measured total, or this\n * will over-count their column and can report a fit that scrolls.\n */\nexport function navBudgetForViewport(\n  viewportPx: number,\n  consumerSlotsPx: number = NAV_SHELL_CONSUMER_SLOTS_PX,\n): number {\n  return viewportPx - NAV_SHELL_PACKAGE_FIXED_PX - consumerSlotsPx\n}\n\nexport interface NavHeightBudget {\n  usedPx: number\n  budgetPx: number\n  fits: boolean\n  overBy: number\n}\n\nexport function checkNavHeightBudget(usedPx: number, budgetPx: number = NAV_HEIGHT_BUDGET_PX): NavHeightBudget {\n  return {\n    usedPx,\n    budgetPx,\n    fits: usedPx <= budgetPx,\n    overBy: Math.max(0, usedPx - budgetPx),\n  }\n}\n\nexport function measureNavHeight(nav: HTMLElement): number {\n  return nav.scrollHeight\n}\n"],"names":["NAV_SHELL_PACKAGE_FIXED_PX","NAV_SHELL_CONSUMER_SLOTS_PX","NAV_SHELL_FIXED_PX","NAV_ITEM_PX","NAV_SECTION_HEADER_PX","NAV_SECTION_GAP_PX","NAV_FOCUS_GUTTER_PX","NAV_HEIGHT_BUDGET_PX","navBudgetForViewport","navContentHeight","sections","costs","itemPx","sectionHeaderPx","rows","used","section","gaps","viewportPx","consumerSlotsPx","checkNavHeightBudget","usedPx","budgetPx","measureNavHeight","nav"],"mappings":"AA4KO,MAAMA,IAA6B,KAO7BC,IAA8B,IAM9BC,IAAqB,KAerBC,IAAc,IACdC,IAAwB,IAIxBC,IAAqB,IAKrBC,IAAsB,GAKtBC,IAAuBC,EAAqB,GAAG;AAyCrD,SAASC,EAAiBC,GAA6BC,IAAqB,IAAY;AAC7F,MAAID,EAAS,WAAW,EAAG,QAAO;AAClC,QAAME,IAASD,EAAM,UAAU,IACzBE,IAAkBF,EAAM,mBAAmB,IAC3CG,IAAOJ,EAAS;AAAA,IACpB,CAACK,GAAMC,MAAYD,KAAQC,EAAQ,YAAYH,IAAkB,KAAKG,EAAQ,YAAYJ;AAAA,IAC1F;AAAA,EAAA,GAEIK,IAAO,MAAsBP,EAAS,SAAS;AACrD,SAAOI,IAAOG,IAAO;AACvB;AAaO,SAAST,EACdU,GACAC,IAA0B,IAClB;AACR,SAAOD,IAAa,MAA6BC;AACnD;AASO,SAASC,EAAqBC,GAAgBC,IAAmBf,GAAuC;AAC7G,SAAO;AAAA,IACL,QAAAc;AAAA,IACA,UAAAC;AAAA,IACA,MAAMD,KAAUC;AAAA,IAChB,QAAQ,KAAK,IAAI,GAAGD,IAASC,CAAQ;AAAA,EAAA;AAEzC;AAEO,SAASC,EAAiBC,GAA0B;AACzD,SAAOA,EAAI;AACb;"}
+{"version":3,"file":"nav-height-budget.js","sources":["../src/nav-height-budget.ts"],"sourcesContent":["// A sidebar's nav has to fit above the wallet chip and footer without\n// scrolling. Boost Outbound's admin role has already blown past that once, so\n// this is a real check, not a hypothetical.\n//\n// Sidebar calls checkNavHeightBudget and measureNavHeight itself now, and warns\n// outside a production build when a nav does not fit the column it was given\n// (B33-500, ADR-0005). These stay exported for the other half of the job:\n// checking a nav's shape from its data, before it is ever rendered.\n//\n// WHAT OF THIS IS PUBLISHED (B33-483)\n//\n// src/index.ts re-exports three functions -- navContentHeight,\n// navBudgetForViewport, checkNavHeightBudget -- and three types:\n// NavHeightBudget, NavRowCosts, NavSectionShape. Everything else below is\n// module-internal: the eight NAV_*_PX constants and measureNavHeight are\n// exported from this file for the tests, for NavHeightBudgetWarning and for\n// scripts/nav-height-budget-check.mts, and they do not reach a consumer.\n//\n// That is deliberate and it is what the rest of this header argues for. Every\n// number here is provisional in a documented way -- four of them changed value\n// in a release with no note (B33-763), and the row costs' font dependency is\n// still unmeasured for Windows (the \">>> THE MEASUREMENT THIS MODEL IS STILL\n// MISSING <<<\" block below, B33-1009). Published, they become values a 1.0\n// cannot move without a major bump. Internal, they stay free to move with the\n// measurement that finally pins them. Do not re-add them to the barrel to save\n// a caller a line: the functions apply them as defaults and NavRowCosts takes\n// the override, so no caller needs to read one.\n//\n// ===========================================================================\n// WHAT THIS IS A MODEL OF (B33-762)\n// ===========================================================================\n//\n// Every number below was read off a real render. That much was settled in\n// B33-752. What B33-762 found is that the module never said *which* render --\n// which shell's furniture it measured, which nav state its row costs describe,\n// or whose font metrics those costs came from. Three silent assumptions, and a\n// consumer importing the constants could not see any of them.\n//\n// So they are named here, each with the measurement behind it and each with the\n// direction its error runs. A budget that is wrong and documented is\n// recoverable. A budget that is right and undocumented is what produced this\n// ticket.\n//\n// All three measurements were taken on the built specimen in Chromium at\n// 1440x900, deviceScaleFactor 2, reduced motion -- the screenshot harness's own\n// conditions -- and re-taken on 23 Sep 2026 for this pass.\n//\n// ---------------------------------------------------------------------------\n// Assumption 1: the column is the stress specimen's, and part of it is not ours\n// ---------------------------------------------------------------------------\n//\n// NAV_SHELL_FIXED_PX is not one number this package can be correct about. Most\n// of the column is the package's own furniture, but the switcher, the wallet\n// chip and the footer are *slots* -- the consumer's markup, whose height the\n// package neither sets nor knows. Measured across the two routes that render\n// the whole shell:\n//\n//                                   stress (820px)   Wallet (900px)\n//   wordmark block                        56               56\n//   switcher wrapper padding              16               16\n//   .foot padding-block-start + gap       32               32\n//   nav's negative gutter margin          -8               -8\n//   WalletChip, expanded                  89               89\n//   -- package subtotal                  185              185\n//   switcher slot contents                42               42\n//   footer slot contents                  44               32\n//   -- consumer subtotal                  86               74\n//   == fixed furniture                   271              259\n//\n// The package half is identical on both routes, which is the point: 185px is a\n// number this package owns and can defend. The 12px of difference is entirely\n// the footer slot -- the stress route's avatar row is 8+28+8, the Wallet\n// route's link row is 12+16+4.\n//\n// The default therefore stays pinned to the stress route's 271, unchanged from\n// B33-752. Re-pinning it to the Wallet, as this ticket was originally filed to\n// do, would move a published constant 12px toward the false-\"fits\" direction on\n// the strength of one consumer's footer -- and a consumer with a taller footer\n// than either route would then be handed a budget that over-counts their\n// column, which is exactly the B33-752 defect returning by another door.\n//\n// A consumer whose slots differ passes their own measured total as the second\n// argument to navBudgetForViewport. That is the honest interface: the package\n// states what it owns, and the caller states what they own.\n//\n// ---------------------------------------------------------------------------\n// Assumption 2: the row costs describe the expanded nav, not the rail\n// ---------------------------------------------------------------------------\n//\n// NAV_ITEM_PX and NAV_SECTION_HEADER_PX are expanded-nav costs, and the rail is\n// deliberately out of this model's scope. On the rail the label goes out of\n// flow (position: absolute, clipped), so the 16px icon is the tallest in-flow\n// child and a row measures 8+16+8 = 32px, not 33; and AppShell passes\n// `label={collapsed ? undefined : section.label}`, so NavSection renders no\n// header element at all and a headed section costs 0, not 30.\n//\n// Modelling that would mean a NAV_RAIL_ITEM_PX and a `collapsed` flag on\n// NavSectionShape -- a public API change to a module four products import, to\n// describe a state that cannot overflow. The measurement says it cannot. Same\n// specimen, same 13-item shape, same 820px stage:\n//\n//                          expanded        rail\n//   nav scrollHeight          575          472\n//   column left for the nav   549          587\n//   verdict                 scrolls        fits, 115px spare\n//\n// The rail is shorter on both sides at once: its rows lose the label's line\n// box, and its furniture shrinks too (the wallet chip collapses 89 -> 75, the\n// switcher 42 -> 34, the footer 44 -> 28). So checking a rail nav against the\n// expanded model over-counts its content by 103px and under-counts its column\n// by 38px -- 141px of slack, both errors in the safe direction. The expanded\n// model is a conservative bound on the rail, and scripts/nav-height-budget-\n// check.mts now drives the rail stage and asserts exactly that, so the claim\n// fails CI if it ever stops being true.\n//\n// The runtime half was never affected: Sidebar measures the real DOM, so its\n// dev warning is correct in either state.\n//\n// ---------------------------------------------------------------------------\n// Assumption 3: the row costs are Inter's line boxes, and the package ships no\n// font\n// ---------------------------------------------------------------------------\n//\n// Neither NavItem's row and label nor NavSection's header sets a line-height;\n// the computed value is `normal`, so half of each row cost is token-derived\n// padding and the rest is whatever line box the consumer's font draws. This\n// package ships no font -- there is no @font-face anywhere in src/, `files` is\n// [\"dist\"], and a guard test forbids src/ from reaching the specimen's font\n// file. The faces are the consumer's; the tokens carry only a fallback stack.\n//\n// Swapping --font-sans on the built specimen, same stage, same 13-item shape:\n//\n//   family                    row   header   nav scrollHeight\n//   Inter (the tokens' head)   33      30          575\n//   system-ui                  33      29          572\n//   Helvetica                  32      29          559\n//   Arial                      32      28          556\n//   Georgia                    32      28          556\n//\n// Every face reachable on macOS renders shorter than Inter, so the model\n// over-counts -- the safe direction. The constants therefore stay as they are\n// and this dependency is recorded rather than removed.\n//\n// Removing it would mean setting an explicit line-height from the --leading-*\n// tokens, the way PageHeader already does (its title state measures a flat\n// 156px across every face). That is the better model, and it is not done here\n// on purpose: --leading-tight at --text-2xs gives a 29px section header against\n// today's 30, which moves the sidebar-*, navsection-* and appshell-* renders by\n// a pixel. A baseline change is a human approving a design change (CLAUDE.md),\n// and the pixel-ratio diff would wave a 1px header through in silence anyway\n// (B33-548, B33-772). It wants its own ticket with a human at the fidelity gate.\n//\n// >>> THE MEASUREMENT THIS MODEL IS STILL MISSING <<<\n//\n// 'Segoe UI' sits in the fallback stack and is reported to carry a ~1.33 normal\n// line-height factor, which at 14px would give a ~19px line box and a 35px row\n// -- an UNDER-count, the one direction B33-752 exists to forbid. It is NOT\n// recorded above because it could not be measured: this pass ran on macOS,\n// where Segoe UI is not installed. Requesting it resolves to the fallback --\n// canvas measureText at 14px gives 'Segoe UI' 241.097px for the same string as\n// a deliberately nonsense family name, against 249.737px for Helvetica and\n// 268.837px for Inter -- so the 32/29 a naive swap reports is Helvetica wearing\n// Segoe UI's name, not Segoe UI.\n//\n// A human on Windows has to take it, and nothing here should be tuned to a\n// guessed number in the meantime. Until then the honest statement of this\n// module's scope is: these costs hold for a --font-sans whose `normal` line box\n// at 14px is 17px or less, which is every face measured. A Windows consumer is\n// outside that and is protected only by Sidebar's runtime warning, which\n// measures the real DOM and is right whatever the font does.\n//\n// The browser check cannot close this either -- the specimen bundles Inter, so\n// it can only ever confirm Inter's numbers.\n//\n// ===========================================================================\n//\n// NOTE for a human: boostledger/src/ui/shell/nav.ts carries the same constants\n// and the same navHeight arithmetic, inherited from the architecture doc's\n// §4.1, and has the same under-count/over-count. It is in another repo and\n// another GitHub org, so it is not corrected here; it wants the same fix\n// (B33-752).\n\n// The part of the fixed furniture this package draws itself, and is therefore\n// the only part it can be correct about: the wordmark block (56), the switcher\n// wrapper's padding (16), `.foot`'s padding-block-start and gap (32) and the\n// expanded WalletChip (89), less the 8px the nav takes back as negative margin\n// for its focus gutter. Measured identical on both shell routes -- see\n// \"Assumption 1\" above. The nav's own scroll gutter is NOT part of this: it\n// sits inside the nav's client box, so it lives in the budget (and in\n// navContentHeight), not in the furniture -- counting it here as well would\n// double it.\nexport const NAV_SHELL_PACKAGE_FIXED_PX = 185\n\n// The slots the consumer fills, as the stress specimen fills them: a 42px\n// switcher button and a 44px account footer. This is an ALLOWANCE, not a\n// package fact -- the Wallet route's own slots total 74px, and a consumer with\n// a taller footer than either exceeds it. A consumer who knows their own slot\n// heights passes the total to navBudgetForViewport instead of taking this.\nexport const NAV_SHELL_CONSUMER_SLOTS_PX = 86\n\n// The sidebar's fixed furniture above and below the nav, as the stress\n// specimen renders it: the package's own 185 plus that route's 86 of slots.\n// Equal to the column height less the nav's own client box (820 - 549), which\n// is how B33-752 measured it and why the value is unchanged from it.\nexport const NAV_SHELL_FIXED_PX = NAV_SHELL_PACKAGE_FIXED_PX + NAV_SHELL_CONSUMER_SLOTS_PX\n\n// The per-row costs of the EXPANDED nav, each the padding the CSS sets plus the\n// line box the text draws into. A nav item is --spacing-2 top and bottom (16px)\n// around a 14px label's 17px line box; a section header is the same 16px around\n// an 11px label's 14px line box. Measured in the specimen render, not derived\n// from Paper (see NavItem.module.css `.row` and NavSection.module.css\n// `.header`).\n//\n// Two things these numbers do not cover, both argued in full above. They are\n// the rail's costs only by accident -- a rail row is 32px and a rail section\n// header is nothing at all (assumption 2) -- and their line-box half belongs to\n// the consumer's font, not to this package (assumption 3). Both errors run in\n// the over-counting direction for every face that could be measured; the\n// Windows case is unmeasured and is the one candidate for the other direction.\nexport const NAV_ITEM_PX = 33\nexport const NAV_SECTION_HEADER_PX = 30\n\n// The gap the nav sets between its sections (--spacing-4, AppShell.module.css\n// `.nav`), counted once between each adjacent pair.\nexport const NAV_SECTION_GAP_PX = 16\n\n// The nav's own scroll gutter: --spacing-1 of padding top and bottom, the 4px\n// each way that keeps NavItem's focus ring off the scrollport edge (ADR-0005).\n// It is part of the nav's box, so it counts toward the height the nav takes.\nexport const NAV_FOCUS_GUTTER_PX = 8\n\n// The nav budget at the reference 900px viewport: what the column leaves once\n// the fixed furniture is taken. Derived from NAV_SHELL_FIXED_PX so the two\n// cannot disagree; used as the default budget and named in the dev warning.\nexport const NAV_HEIGHT_BUDGET_PX = navBudgetForViewport(900)\n\n/** One section of a nav, described by its shape rather than its rendered rows. */\nexport interface NavSectionShape {\n  /** Whether the section carries a header label (its NAV_SECTION_HEADER_PX cost). */\n  hasHeader: boolean\n  /** How many nav items the section holds (NAV_ITEM_PX each). */\n  itemCount: number\n}\n\n/**\n * The per-row costs to charge, for a consumer who has measured their own.\n *\n * The defaults are Inter's, and are right for every face this package could\n * measure. A consumer rendering in a font whose `normal` line box at 14px is\n * taller than 17px -- `Segoe UI` is the known candidate, unmeasured -- gets a\n * model that under-counts, and can correct it here rather than forking the\n * check. Measure a rendered row's `offsetHeight`, do not estimate it.\n *\n * The NAV_*_PX constants named below are this module's own and are not published\n * (B33-483); they are the defaults, not something a caller reads. Omitting a\n * field here takes the default, which is why there is nothing to import.\n */\nexport interface NavRowCosts {\n  /** What one nav row costs. Defaults to NAV_ITEM_PX, the expanded row in Inter. */\n  itemPx?: number\n  /** What one section header costs. Defaults to NAV_SECTION_HEADER_PX. */\n  sectionHeaderPx?: number\n}\n\n/**\n * The vertical space an EXPANDED nav takes, summed from its sections' shapes --\n * the rows and headers, the gaps the nav sets between sections, and the nav's\n * own scroll gutter. This is the whole box the nav occupies (its rendered\n * scrollHeight), so the budget can be checked from the nav's data alone, before\n * it is rendered into a sidebar that might not fit it -- Boost Outbound's admin\n * role has overflowed this once already.\n *\n * The rail is out of scope and needs no separate model: a collapsed nav is\n * shorter than the same nav expanded, in a column that is taller, so this is a\n * conservative bound on it (B33-762, and the check that pins it).\n *\n * Pass `costs` only if you have measured a rendered row in your own font; the\n * defaults are the package's, measured in Inter.\n */\nexport function navContentHeight(sections: NavSectionShape[], costs: NavRowCosts = {}): number {\n  if (sections.length === 0) return 0\n  const itemPx = costs.itemPx ?? NAV_ITEM_PX\n  const sectionHeaderPx = costs.sectionHeaderPx ?? NAV_SECTION_HEADER_PX\n  const rows = sections.reduce(\n    (used, section) => used + (section.hasHeader ? sectionHeaderPx : 0) + section.itemCount * itemPx,\n    0,\n  )\n  const gaps = NAV_SECTION_GAP_PX * (sections.length - 1)\n  return rows + gaps + NAV_FOCUS_GUTTER_PX\n}\n\n/**\n * The nav's budget at a given viewport: what is left once the fixed shell parts\n * are taken.\n *\n * `consumerSlotsPx` is the total height of the three slots this package does\n * not own -- the switcher, the wallet chip's neighbours and the sidebar footer\n * as the consumer renders them. It defaults to the stress specimen's 86px\n * allowance, which is what NAV_SHELL_FIXED_PX assumes. A consumer whose footer\n * or switcher is taller than that MUST pass their own measured total, or this\n * will over-count their column and can report a fit that scrolls.\n */\nexport function navBudgetForViewport(\n  viewportPx: number,\n  consumerSlotsPx: number = NAV_SHELL_CONSUMER_SLOTS_PX,\n): number {\n  return viewportPx - NAV_SHELL_PACKAGE_FIXED_PX - consumerSlotsPx\n}\n\nexport interface NavHeightBudget {\n  usedPx: number\n  budgetPx: number\n  fits: boolean\n  overBy: number\n}\n\nexport function checkNavHeightBudget(usedPx: number, budgetPx: number = NAV_HEIGHT_BUDGET_PX): NavHeightBudget {\n  return {\n    usedPx,\n    budgetPx,\n    fits: usedPx <= budgetPx,\n    overBy: Math.max(0, usedPx - budgetPx),\n  }\n}\n\nexport function measureNavHeight(nav: HTMLElement): number {\n  return nav.scrollHeight\n}\n"],"names":["NAV_SHELL_PACKAGE_FIXED_PX","NAV_SHELL_CONSUMER_SLOTS_PX","NAV_ITEM_PX","NAV_SECTION_HEADER_PX","NAV_SECTION_GAP_PX","NAV_FOCUS_GUTTER_PX","NAV_HEIGHT_BUDGET_PX","navBudgetForViewport","navContentHeight","sections","costs","itemPx","sectionHeaderPx","rows","used","section","gaps","viewportPx","consumerSlotsPx","checkNavHeightBudget","usedPx","budgetPx","measureNavHeight","nav"],"mappings":"AA+LO,MAAMA,IAA6B,KAO7BC,IAA8B,IAqB9BC,IAAc,IACdC,IAAwB,IAIxBC,IAAqB,IAKrBC,IAAsB,GAKtBC,IAAuBC,EAAqB,GAAG;AA6CrD,SAASC,EAAiBC,GAA6BC,IAAqB,IAAY;AAC7F,MAAID,EAAS,WAAW,EAAG,QAAO;AAClC,QAAME,IAASD,EAAM,UAAU,IACzBE,IAAkBF,EAAM,mBAAmB,IAC3CG,IAAOJ,EAAS;AAAA,IACpB,CAACK,GAAMC,MAAYD,KAAQC,EAAQ,YAAYH,IAAkB,KAAKG,EAAQ,YAAYJ;AAAA,IAC1F;AAAA,EAAA,GAEIK,IAAO,MAAsBP,EAAS,SAAS;AACrD,SAAOI,IAAOG,IAAO;AACvB;AAaO,SAAST,EACdU,GACAC,IAA0B,IAClB;AACR,SAAOD,IAAa,MAA6BC;AACnD;AASO,SAASC,EAAqBC,GAAgBC,IAAmBf,GAAuC;AAC7G,SAAO;AAAA,IACL,QAAAc;AAAA,IACA,UAAAC;AAAA,IACA,MAAMD,KAAUC;AAAA,IAChB,QAAQ,KAAK,IAAI,GAAGD,IAASC,CAAQ;AAAA,EAAA;AAEzC;AAEO,SAASC,EAAiBC,GAA0B;AACzD,SAAOA,EAAI;AACb;"}

package/dist/style.css

@@ -1 +1 @@
-.btn-primary,.btn-quiet,.btn-danger{cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}.btn-primary{border:none;background:var(--color-primary);color:var(--color-primary-foreground)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-quiet{background:transparent;color:var(--color-foreground-secondary)}.btn-quiet:hover:not(:disabled){background:var(--color-surface-muted)}.btn-danger{border:1px solid var(--color-danger);background:var(--color-danger);color:var(--color-neutral-0)}.btn-danger:hover:not(:disabled){border-color:color-mix(in srgb,var(--color-danger) 85%,var(--color-neutral-950));background:color-mix(in srgb,var(--color-danger) 85%,var(--color-neutral-950))}.btn-primary:disabled,.btn-quiet:disabled,.btn-danger:disabled{opacity:.55;cursor:not-allowed}.spinner{box-sizing:border-box;width:var(--spacing-4_5);height:var(--spacing-4_5);border:2px solid var(--color-neutral-0);border-right-color:transparent;border-radius:var(--radius-full);animation:boost33-spin var(--dur-spin) linear infinite}.spinner--sm{width:var(--spacing-3_5);height:var(--spacing-3_5)}.spinner--primary{border-color:var(--color-primary);border-right-color:transparent}@keyframes boost33-spin{to{transform:rotate(360deg)}}.sk{display:block;border-radius:var(--radius-md);background:var(--color-surface-muted);animation:boost33-pulse var(--dur-pulse) ease-in-out infinite}.sk-group{animation:boost33-appear var(--dur-base) var(--ease-out) var(--dur-fast) both}.reveal{animation:boost33-appear var(--dur-base) var(--ease-out) both}@keyframes boost33-pulse{50%{opacity:.55}}@keyframes boost33-appear{0%{opacity:0}}@media(prefers-reduced-motion:no-preference){.btn-primary:active:not(:disabled),.btn-quiet:active:not(:disabled),.btn-danger:active:not(:disabled){transform:scale(.98)}}@media(prefers-reduced-motion:reduce){.sk,.sk-group,.reveal,.spinner{animation:none}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}._sidebar_17kel_7{display:flex;flex-direction:column;box-sizing:border-box;width:var(--container-sidebar);height:100%;padding-inline:var(--spacing-3);border-right:1px solid var(--color-border);background:var(--color-background);font-family:var(--font-sans)}._sidebar_17kel_7[data-collapsed=true]{width:var(--container-sidebar-rail)}._sidebar_17kel_7>nav{flex-shrink:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:calc(-1 * var(--spacing-1));padding:var(--spacing-1);scroll-padding:var(--spacing-1)}@media(prefers-reduced-motion:reduce){._sidebar_17kel_7>nav{scroll-behavior:auto}}._section_3sxsg_5{display:flex;flex-direction:column}._header_3sxsg_13{margin:0;padding:var(--spacing-2) var(--spacing-2_5);color:var(--color-foreground-muted);font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase}._wordmark_1k88r_4{display:flex;align-items:center;gap:var(--spacing-2_5);font-family:var(--font-display)}._mark_1k88r_17{display:inline-flex;flex:0 0 var(--spacing-6);align-items:center;justify-content:center;width:var(--spacing-6);height:var(--spacing-6)}._mark_1k88r_17 svg{width:100%;height:100%}._name_1k88r_35{color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}._wordmark_1k88r_4[data-collapsed=true] ._name_1k88r_35{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._wordmark_1k88r_4[data-collapsed=true]{justify-content:center}._tile_5vhrh_12{fill:var(--color-neutral-950)}._ring_5vhrh_16{fill:var(--color-primary)}._mark_5vhrh_24{display:block}._mark_1jt5g_6{display:block}._ground_1jt5g_17{rx:var(--radius-product-tile)}._row_w21mf_4{display:flex;align-items:center;width:100%;gap:var(--spacing-2_5);padding:var(--spacing-2) var(--spacing-2_5);border:none;border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}._row_w21mf_4:hover{background:var(--color-surface-muted)}._row_w21mf_4[data-active=true]{background:var(--color-surface)}._row_w21mf_4:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._icon_w21mf_41{display:inline-flex;flex:0 0 var(--spacing-4);align-items:center;justify-content:center;width:var(--spacing-4);height:var(--spacing-4);color:var(--color-foreground-secondary)}._icon_w21mf_41 svg{width:100%;height:100%}._row_w21mf_4[data-active=true] ._icon_w21mf_41{color:var(--color-foreground)}._row_w21mf_4[data-collapsed=true]{justify-content:center}._label_w21mf_66{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--color-foreground-secondary);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._row_w21mf_4[data-active=true] ._label_w21mf_66{color:var(--color-foreground);font-weight:var(--font-weight-semibold)}._row_w21mf_4[data-collapsed=true] ._label_w21mf_66{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._trailingSlot_w21mf_92{display:flex;flex:0 0 var(--spacing-5_5);align-items:center;justify-content:center;width:var(--spacing-5_5);font-family:var(--font-sans);font-size:var(--text-nav-label)}._row_w21mf_4[data-collapsed=true] ._trailingSlot_w21mf_92{display:none}._count_w21mf_106{color:var(--color-foreground-muted)}._countUrgent_w21mf_110{color:var(--color-primary)}@media(prefers-reduced-motion:reduce){._row_w21mf_4{transition:none}}._chip_1th8y_37{--chip-lift: 0px;position:relative;box-sizing:border-box;width:100%;padding:calc(var(--spacing-3) + var(--chip-lift));border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:transparent;font-family:var(--font-sans)}._chip_1th8y_37:not([data-unknown]):hover,._chip_1th8y_37:not([data-unknown]):focus-within,._chip_1th8y_37[data-threshold]{--chip-lift: var(--spacing-0_5);box-shadow:var(--shadow-overlay)}._chip_1th8y_37:not([data-threshold]):not([data-unknown]):hover,._chip_1th8y_37:not([data-threshold]):not([data-unknown]):focus-within{background:var(--color-surface)}._chip_1th8y_37:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._header_1th8y_74{display:flex;align-items:center;gap:var(--spacing-2)}._chip_1th8y_37:not([data-threshold]):not([data-unknown]) ._header_1th8y_74{padding-right:var(--spacing-topup-reserve)}._name_1th8y_83{min-width:0;overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-xs);font-weight:var(--font-weight-medium);line-height:var(--leading-tight);text-overflow:ellipsis;white-space:nowrap}._pill_1th8y_162{padding:var(--spacing-0_5) var(--spacing-2);border-radius:var(--radius-full);background:var(--color-warning-subtle);color:var(--color-warning);font-size:var(--text-2xs);font-weight:var(--font-weight-semibold)}._figure_1th8y_171{display:flex;align-items:baseline;gap:var(--spacing-1_5);margin-top:calc(var(--spacing-2_5) + var(--chip-lift))}._amount_1th8y_186{color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-none)}._unit_1th8y_195{color:var(--color-foreground-muted);font-size:var(--text-xs)}._retry_1th8y_200{width:var(--spacing-3);height:var(--spacing-3);color:var(--color-foreground-muted)}._bar_1th8y_209{display:flex;overflow:hidden;width:100%;height:calc(var(--spacing-1_25) + var(--chip-lift));margin-top:calc(var(--spacing-2_5) + var(--chip-lift));border-radius:var(--radius-full)}._bar_1th8y_209[data-tone=rest]{background:var(--color-surface-muted)}._bar_1th8y_209[data-tone=threshold]{background:var(--color-warning-subtle)}._bar_1th8y_209[data-tone=unknown]{background:var(--color-surface-muted)}._segmentGranted_1th8y_230,._segmentPurchased_1th8y_231{height:100%;transition:width var(--dur-fast) var(--ease-out)}._segmentGranted_1th8y_230{background:var(--color-grant)}._segmentPurchased_1th8y_231{background:var(--color-purchased)}._details_1th8y_251{display:none}._chip_1th8y_37:hover ._details_1th8y_251,._chip_1th8y_37:focus-within ._details_1th8y_251{display:block}._split_1th8y_260{display:flex;flex-direction:column;gap:var(--spacing-1);margin:var(--spacing-2_5) 0 0}._splitRow_1th8y_267{display:flex;align-items:center;justify-content:space-between}._splitLabel_1th8y_273{display:flex;align-items:center;gap:var(--spacing-1_5);color:var(--color-foreground);font-size:var(--text-xs)}._splitAmount_1th8y_281{margin:0;color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums}._dotGranted_1th8y_289,._dotPurchased_1th8y_290{width:var(--spacing-1_5);height:var(--spacing-1_5);border-radius:var(--radius-full)}._dotGranted_1th8y_289{background:var(--color-grant)}._dotPurchased_1th8y_290{background:var(--color-purchased)}._footer_1th8y_304{margin:var(--spacing-3) 0 0;padding-top:var(--spacing-1);border-top:1px solid var(--color-border);color:var(--color-foreground-muted);font-size:var(--text-2xs)}._burnNote_1th8y_312{margin:var(--spacing-2_5) 0 0;color:var(--color-foreground-secondary);font-size:var(--text-2xs);line-height:var(--leading-snug)}._topUp_1th8y_87{position:absolute;top:calc(var(--spacing-3) + var(--chip-lift));right:calc(var(--spacing-3) + var(--chip-lift));padding:0;border:none;background:transparent;color:var(--color-primary);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);opacity:0;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out)}._chip_1th8y_37:hover ._topUp_1th8y_87,._chip_1th8y_37:focus-within ._topUp_1th8y_87,._topUp_1th8y_87:focus-visible{opacity:1}._topUp_1th8y_87:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._topUp_1th8y_87[data-grown=true]{position:static;width:100%;margin-top:var(--spacing-2_5);padding:var(--spacing-2);border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-primary-foreground);font-size:var(--text-sm);opacity:1}._topUp_1th8y_87[data-grown=true]:hover{background:var(--color-primary-hover)}._rail_1th8y_378{--chip-lift: 0px;position:relative;display:flex;box-sizing:border-box;width:100%;flex-direction:column;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2);font-family:var(--font-sans)}._railIcon_1th8y_392{width:var(--spacing-6);height:var(--spacing-6);color:var(--color-foreground-secondary)}._railFigure_1th8y_398{color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}._rail_1th8y_378 ._bar_1th8y_209{height:var(--spacing-0_5);margin-top:0}._srOnly_1th8y_411{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}@media(prefers-reduced-motion:reduce){._segmentGranted_1th8y_230,._segmentPurchased_1th8y_231,._topUp_1th8y_87{transition:none}}._bar_194bx_7{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);box-sizing:border-box;height:var(--spacing-12);padding:0 var(--spacing-8);border-bottom:1px solid var(--color-border);background:var(--color-surface);font-family:var(--font-sans)}._breadcrumb_194bx_20{display:flex;min-width:0;align-items:center;gap:var(--spacing-2);overflow:hidden;color:var(--color-foreground);font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap}._actions_194bx_33{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}@supports (animation-timeline: --a) and (timeline-scope: --a){@container style(--boost33-shell-timeline: on){._bar_194bx_7{position:relative;z-index:1;animation:_scrolled_194bx_1 linear both;animation-timeline:--boost33-shell-scroll;animation-range:0 var(--spacing-10)}}}@keyframes _scrolled_194bx_1{to{box-shadow:var(--shadow-scrolled)}}._header_i17td_42{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8);padding:var(--spacing-4_5) var(--spacing-8) var(--spacing-4);background:var(--color-surface);font-family:var(--font-sans)}._headings_i17td_52{display:flex;min-width:0;flex-direction:column;gap:var(--spacing-1)}._title_i17td_33{margin:0;color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}._subtitle_i17td_74{margin:0;color:var(--color-foreground-secondary);font-size:var(--text-base);font-weight:var(--font-weight-regular);line-height:var(--leading-snug)}._actions_i17td_82{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}._shell_1iynb_10{display:flex;height:100%;background:var(--color-surface);font-family:var(--font-sans)}._wordmark_1iynb_20{padding:var(--spacing-3) var(--spacing-2_5) var(--spacing-5)}._switcher_1iynb_26{padding-bottom:var(--spacing-4)}._foot_1iynb_33{display:flex;flex-direction:column;gap:var(--spacing-4);margin-block-start:auto;padding-block-start:var(--spacing-4)}._nav_1iynb_45{display:flex;flex-direction:column;gap:var(--spacing-4)}._main_1iynb_54{display:flex;min-width:0;flex:1;flex-direction:column}._content_1iynb_65{flex:1;min-height:0;overflow-y:auto;background:var(--color-surface)}@supports (animation-timeline: --a) and (timeline-scope: --a){._main_1iynb_54{timeline-scope:--boost33-shell-scroll;--boost33-shell-timeline: on}._content_1iynb_65{scroll-timeline:--boost33-shell-scroll block}}:root{--color-neutral-0: #FFFFFF;--color-neutral-50: #F7F7F8;--color-neutral-100: #EFEFF1;--color-neutral-200: #E5E5EA;--color-neutral-300: #D9D9D9;--color-neutral-400: #C1C1C2;--color-neutral-500: #8E8E93;--color-neutral-600: #6B6B6B;--color-neutral-700: #525252;--color-neutral-800: #3A3A3C;--color-neutral-900: #292929;--color-neutral-950: #1D1D1B;--color-neutral-1000: #000000;--color-orange-50: #FDF3EE;--color-orange-100: #FBE2D5;--color-orange-200: #F7C3A8;--color-orange-300: #F0A173;--color-orange-400: #EB7147;--color-orange-500: #E9521E;--color-orange-600: #C2410C;--color-orange-700: #9A3412;--color-sand-100: #FBF3E4;--color-sand-300: #F3D6AC;--color-sand-600: #8A6510;--color-green-100: #DDF0E4;--color-green-600: #157F3D;--color-crimson-100: #F7DEE1;--color-crimson-600: #A3182B;--color-blue-100: #DEE6FA;--color-blue-600: #2A5BD7;--color-background: var(--color-neutral-50);--color-surface: var(--color-neutral-0);--color-surface-muted: var(--color-neutral-100);--color-border: var(--color-neutral-200);--color-border-strong: var(--color-neutral-300);--color-foreground: var(--color-neutral-950);--color-foreground-secondary: var(--color-neutral-700);--color-foreground-muted: var(--color-neutral-600);--color-foreground-disabled: var(--color-neutral-400);--color-primary: var(--color-orange-500);--color-primary-hover: var(--color-orange-600);--color-primary-foreground: var(--color-neutral-0);--color-primary-subtle: var(--color-orange-50);--color-primary-border: var(--color-orange-200);--color-success: var(--color-green-600);--color-success-subtle: var(--color-green-100);--color-warning: var(--color-sand-600);--color-warning-subtle: var(--color-sand-300);--color-danger: var(--color-crimson-600);--color-danger-subtle: var(--color-crimson-100);--color-info: var(--color-blue-600);--color-info-subtle: var(--color-blue-100);--color-grant: var(--color-sand-600);--color-purchased: var(--color-neutral-950);--shadow-overlay-color: rgb(29 29 27 / 20%);--font-display: var(--boost33-font-display, Outfit), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-sans: var(--boost33-font-sans, Inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: var(--boost33-font-mono, "Geist Mono"), ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--text-3xs: 9px;--text-2xs: 11px;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--text-5xl: 46px;--text-6xl: 60px;--text-7xl: 78px;--text-nav-label: 14px;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tighter: -.03em;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .04em;--tracking-wider: .09em;--tracking-caps: .05em;--leading-none: 100%;--leading-tight: 120%;--leading-snug: 135%;--leading-normal: 150%;--leading-relaxed: 170%;--breakpoint-mobile: 390px;--breakpoint-desktop: 1440px;--container-sidebar: 264px;--container-sidebar-rail: 56px;--container-content: 1440px;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-4_5: 18px;--spacing-5: 20px;--spacing-6: 24px;--spacing-7: 28px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--spacing-16: 64px;--spacing-20: 80px;--spacing-2_5: 10px;--spacing-5_5: 22px;--spacing-1_5: 6px;--spacing-1_25: 5px;--spacing-0_5: 2px;--spacing-2_25: 9px;--spacing-topup-reserve: 68px;--radius-none: 0px;--radius-xs: 2px;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--radius-2xl: 12px;--radius-full: 9999px;--radius-product-tile: 25%}:root{--dur-instant: 80ms;--dur-fast: .15s;--dur-base: .22s;--dur-slow: .32s;--dur-bold: .7s;--dur-hero: .9s;--dur-spin: .7s;--dur-pulse: 1.6s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--lift-sm: -1px;--lift-md: -2px;--rise: 8px;--stagger: 40ms;--duration-fast: var(--dur-fast);--easing-standard: var(--ease-out)}:root{--shadow-overlay: 0px 16px 40px -10px var(--shadow-overlay-color);--shadow-lift: 0px 10px 24px -14px color-mix(in srgb, var(--color-neutral-950) 28%, transparent);--shadow-scrolled: 0px 6px 16px -12px color-mix(in srgb, var(--color-neutral-950) 35%, transparent)}._root_24c25_8{position:relative;font-family:var(--font-sans)}._trigger_24c25_17{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2_25) var(--spacing-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);cursor:pointer}._trigger_24c25_17[aria-expanded=true]{background:var(--color-surface-muted)}._trigger_24c25_17:focus-visible,._railTrigger_24c25_46:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._triggerName_24c25_56{overflow:hidden;flex:1;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-semibold);text-align:left;text-overflow:ellipsis;white-space:nowrap}._chevron_24c25_67{width:var(--spacing-3);height:var(--spacing-3);flex-shrink:0;color:var(--color-foreground-muted);transition:transform var(--dur-fast) var(--ease-out)}._trigger_24c25_17[aria-expanded=true] ._chevron_24c25_67{transform:rotate(180deg)}._railTrigger_24c25_46{display:flex;box-sizing:border-box;width:100%;min-height:var(--spacing-6);align-items:flex-start;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer}._panel_24c25_109{position:absolute;z-index:1;top:100%;left:0;width:var(--container-sidebar);box-sizing:border-box;margin-top:var(--spacing-0_5);padding:var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-overlay)}._hubRow_24c25_135,._productRow_24c25_136,._accountRow_24c25_137{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2_5);padding:var(--spacing-2);border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-foreground);font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}._hubRow_24c25_135:hover,._productRow_24c25_136:hover,._accountRow_24c25_137:hover{background:var(--color-surface-muted)}._hubRow_24c25_135:focus-visible,._productRow_24c25_136:focus-visible,._accountRow_24c25_137:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}._products_24c25_144{display:flex;flex-direction:column;gap:var(--spacing-0_5);margin:0;padding:0;list-style:none}._productRow_24c25_136[data-current=true]{background:var(--color-surface-muted)}._productRow_24c25_136[data-entitled=false] ._rowName_24c25_193{color:var(--color-foreground-muted)}._accountRow_24c25_137{padding-inline:var(--spacing-3)}._accountRow_24c25_137 ._rowName_24c25_193{font-size:var(--text-sm)}._accountRow_24c25_137 ._rowSub_24c25_213{font-size:var(--text-2xs)}._rowText_24c25_217{display:flex;min-width:0;flex-direction:column}._hubRow_24c25_135 ._rowText_24c25_217{gap:var(--spacing-0_5)}._rowName_24c25_193{overflow:hidden;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._productRow_24c25_136 ._rowName_24c25_193{flex:1}._rowSub_24c25_213{overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap}._hubMark_24c25_260{width:var(--spacing-5);height:var(--spacing-5);flex-shrink:0;color:var(--color-foreground)}._tag_24c25_276{flex-shrink:0;margin-left:auto;padding:var(--spacing-0_5) var(--spacing-1_5);border-radius:var(--radius-full);background:var(--color-surface-muted);color:var(--color-foreground-muted);font-size:var(--text-2xs);font-weight:var(--font-weight-medium)}._check_24c25_287{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground)}._avatar_24c25_300{display:grid;width:var(--spacing-6);height:var(--spacing-6);flex-shrink:0;border-radius:var(--radius-lg);background:var(--color-surface-muted);color:var(--color-foreground-secondary);font-size:var(--text-3xs);font-weight:var(--font-weight-semibold);place-items:center}._chevronRight_24c25_313{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground-muted)}._divider_24c25_334{margin:var(--spacing-2_25) 0 var(--spacing-2);border:none;border-top:1px solid var(--color-border)}._products_24c25_144+._divider_24c25_334{margin:var(--spacing-1_5) 0 var(--spacing-1)}@media(prefers-reduced-motion:reduce){._chevron_24c25_67{transition:none}}
+.btn-primary,.btn-quiet,.btn-danger{cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}.btn-primary{border:none;background:var(--color-primary);color:var(--color-primary-foreground)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-quiet{background:transparent;color:var(--color-foreground-secondary)}.btn-quiet:hover:not(:disabled){background:var(--color-surface-muted)}.btn-danger{border:1px solid var(--color-danger);background:var(--color-danger);color:var(--color-neutral-0)}.btn-danger:hover:not(:disabled){border-color:color-mix(in srgb,var(--color-danger) 85%,var(--color-neutral-950));background:color-mix(in srgb,var(--color-danger) 85%,var(--color-neutral-950))}.btn-primary:disabled,.btn-quiet:disabled,.btn-danger:disabled{opacity:.55;cursor:not-allowed}.spinner{box-sizing:border-box;width:var(--spacing-4_5);height:var(--spacing-4_5);border:2px solid var(--color-neutral-0);border-right-color:transparent;border-radius:var(--radius-full);animation:boost33-spin var(--dur-spin) linear infinite}.spinner--sm{width:var(--spacing-3_5);height:var(--spacing-3_5)}.spinner--primary{border-color:var(--color-primary);border-right-color:transparent}@keyframes boost33-spin{to{transform:rotate(360deg)}}.sk{display:block;border-radius:var(--radius-md);background:var(--color-surface-muted);animation:boost33-pulse var(--dur-pulse) ease-in-out infinite}.sk-group{animation:boost33-appear var(--dur-base) var(--ease-out) var(--dur-fast) both}.reveal{animation:boost33-appear var(--dur-base) var(--ease-out) both}@keyframes boost33-pulse{50%{opacity:.55}}@keyframes boost33-appear{0%{opacity:0}}@media(prefers-reduced-motion:no-preference){.btn-primary:active:not(:disabled),.btn-quiet:active:not(:disabled),.btn-danger:active:not(:disabled){transform:scale(.98)}}@media(prefers-reduced-motion:reduce){.sk,.sk-group,.reveal,.spinner{animation:none}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}._sidebar_17kel_7{display:flex;flex-direction:column;box-sizing:border-box;width:var(--container-sidebar);height:100%;padding-inline:var(--spacing-3);border-right:1px solid var(--color-border);background:var(--color-background);font-family:var(--font-sans)}._sidebar_17kel_7[data-collapsed=true]{width:var(--container-sidebar-rail)}._sidebar_17kel_7>nav{flex-shrink:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:calc(-1 * var(--spacing-1));padding:var(--spacing-1);scroll-padding:var(--spacing-1)}@media(prefers-reduced-motion:reduce){._sidebar_17kel_7>nav{scroll-behavior:auto}}._section_3sxsg_5{display:flex;flex-direction:column}._header_3sxsg_13{margin:0;padding:var(--spacing-2) var(--spacing-2_5);color:var(--color-foreground-muted);font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase}._wordmark_1k88r_4{display:flex;align-items:center;gap:var(--spacing-2_5);font-family:var(--font-display)}._mark_1k88r_17{display:inline-flex;flex:0 0 var(--spacing-6);align-items:center;justify-content:center;width:var(--spacing-6);height:var(--spacing-6)}._mark_1k88r_17 svg{width:100%;height:100%}._name_1k88r_35{color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}._wordmark_1k88r_4[data-collapsed=true] ._name_1k88r_35{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._wordmark_1k88r_4[data-collapsed=true]{justify-content:center}._tile_5vhrh_12{fill:var(--color-neutral-950)}._ring_5vhrh_16{fill:var(--color-primary)}._mark_5vhrh_24{display:block}._mark_1jt5g_6{display:block}._ground_1jt5g_17{rx:var(--radius-product-tile)}._row_w21mf_4{display:flex;align-items:center;width:100%;gap:var(--spacing-2_5);padding:var(--spacing-2) var(--spacing-2_5);border:none;border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}._row_w21mf_4:hover{background:var(--color-surface-muted)}._row_w21mf_4[data-active=true]{background:var(--color-surface)}._row_w21mf_4:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._icon_w21mf_41{display:inline-flex;flex:0 0 var(--spacing-4);align-items:center;justify-content:center;width:var(--spacing-4);height:var(--spacing-4);color:var(--color-foreground-secondary)}._icon_w21mf_41 svg{width:100%;height:100%}._row_w21mf_4[data-active=true] ._icon_w21mf_41{color:var(--color-foreground)}._row_w21mf_4[data-collapsed=true]{justify-content:center}._label_w21mf_66{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--color-foreground-secondary);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._row_w21mf_4[data-active=true] ._label_w21mf_66{color:var(--color-foreground);font-weight:var(--font-weight-semibold)}._row_w21mf_4[data-collapsed=true] ._label_w21mf_66{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._trailingSlot_w21mf_92{display:flex;flex:0 0 var(--spacing-5_5);align-items:center;justify-content:center;width:var(--spacing-5_5);font-family:var(--font-sans);font-size:var(--text-nav-label)}._row_w21mf_4[data-collapsed=true] ._trailingSlot_w21mf_92{display:none}._count_w21mf_106{color:var(--color-foreground-muted)}._countUrgent_w21mf_110{color:var(--color-primary)}@media(prefers-reduced-motion:reduce){._row_w21mf_4{transition:none}}._chip_xxga2_37{--chip-lift: 0px;position:relative;box-sizing:border-box;width:100%;padding:calc(var(--spacing-3) + var(--chip-lift));border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:transparent;font-family:var(--font-sans)}._chip_xxga2_37:not([data-unknown]):hover,._chip_xxga2_37:not([data-unknown]):focus-within,._chip_xxga2_37[data-threshold]{--chip-lift: var(--spacing-0_5);box-shadow:var(--shadow-overlay)}._chip_xxga2_37:not([data-threshold]):not([data-unknown]):hover,._chip_xxga2_37:not([data-threshold]):not([data-unknown]):focus-within{background:var(--color-surface)}._chip_xxga2_37:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._header_xxga2_74{display:flex;align-items:center;gap:var(--spacing-2)}._chip_xxga2_37:not([data-threshold]):not([data-unknown]) ._header_xxga2_74{padding-right:var(--spacing-topup-reserve)}._name_xxga2_83{min-width:0;overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-xs);font-weight:var(--font-weight-medium);line-height:var(--leading-tight);text-overflow:ellipsis;white-space:nowrap}._pill_xxga2_162{padding:var(--spacing-0_5) var(--spacing-2);border-radius:var(--radius-full);background:var(--color-warning-subtle);color:var(--color-warning);font-size:var(--text-2xs);font-weight:var(--font-weight-semibold)}._figure_xxga2_171{display:flex;align-items:baseline;gap:var(--spacing-1_5);margin-top:calc(var(--spacing-2_5) + var(--chip-lift))}._amount_xxga2_186{color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-none)}._unit_xxga2_195{color:var(--color-foreground-muted);font-size:var(--text-xs)}._retry_xxga2_200{width:var(--spacing-3);height:var(--spacing-3);color:var(--color-foreground-muted)}._bar_xxga2_209{display:flex;overflow:hidden;width:100%;height:calc(var(--spacing-1_25) + var(--chip-lift));margin-top:calc(var(--spacing-2_5) + var(--chip-lift));border-radius:var(--radius-full)}._bar_xxga2_209[data-tone=rest]{background:var(--color-surface-muted)}._bar_xxga2_209[data-tone=threshold]{background:var(--color-warning-subtle)}._bar_xxga2_209[data-tone=unknown]{background:var(--color-surface-muted)}._segmentGranted_xxga2_230,._segmentPurchased_xxga2_231{height:100%;transition:width var(--dur-fast) var(--ease-out)}._segmentGranted_xxga2_230{background:var(--color-grant)}._segmentPurchased_xxga2_231{background:var(--color-purchased)}._details_xxga2_275{display:none}._chip_xxga2_37:hover ._details_xxga2_275,._chip_xxga2_37:focus-within ._details_xxga2_275{display:block}._split_xxga2_284{display:flex;flex-direction:column;gap:var(--spacing-1);margin:var(--spacing-2_5) 0 0}._splitRow_xxga2_291{display:flex;align-items:center;justify-content:space-between}._splitLabel_xxga2_297{display:flex;align-items:center;gap:var(--spacing-1_5);color:var(--color-foreground);font-size:var(--text-xs)}._splitAmount_xxga2_305{margin:0;color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums}._dotGranted_xxga2_313,._dotPurchased_xxga2_314{width:var(--spacing-1_5);height:var(--spacing-1_5);border-radius:var(--radius-full)}._dotGranted_xxga2_313{background:var(--color-grant)}._dotPurchased_xxga2_314{background:var(--color-purchased)}._footer_xxga2_328{margin:var(--spacing-3) 0 0;padding-top:var(--spacing-1);border-top:1px solid var(--color-border);color:var(--color-foreground-muted);font-size:var(--text-2xs)}._burnNote_xxga2_336{margin:var(--spacing-2_5) 0 0;color:var(--color-foreground-secondary);font-size:var(--text-2xs);line-height:var(--leading-snug)}._topUp_xxga2_87{position:absolute;top:calc(var(--spacing-3) + var(--chip-lift));right:calc(var(--spacing-3) + var(--chip-lift));padding:0;border:none;background:transparent;color:var(--color-primary);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);opacity:0;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out)}._chip_xxga2_37:hover ._topUp_xxga2_87,._chip_xxga2_37:focus-within ._topUp_xxga2_87,._topUp_xxga2_87:focus-visible{opacity:1}._topUp_xxga2_87:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._topUp_xxga2_87[data-grown=true]{position:static;width:100%;margin-top:var(--spacing-2_5);padding:var(--spacing-2);border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-primary-foreground);font-size:var(--text-sm);opacity:1}._topUp_xxga2_87[data-grown=true]:hover{background:var(--color-primary-hover)}._rail_xxga2_402{--chip-lift: 0px;position:relative;display:flex;box-sizing:border-box;width:100%;flex-direction:column;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2);font-family:var(--font-sans)}._railIcon_xxga2_416{width:var(--spacing-6);height:var(--spacing-6);color:var(--color-foreground-secondary)}._railFigure_xxga2_422{color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}._rail_xxga2_402 ._bar_xxga2_209{height:var(--spacing-0_5);margin-top:0}._srOnly_xxga2_435{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}@media(prefers-reduced-motion:reduce){._segmentGranted_xxga2_230,._segmentPurchased_xxga2_231,._topUp_xxga2_87{transition:none}}._bar_194bx_7{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);box-sizing:border-box;height:var(--spacing-12);padding:0 var(--spacing-8);border-bottom:1px solid var(--color-border);background:var(--color-surface);font-family:var(--font-sans)}._breadcrumb_194bx_20{display:flex;min-width:0;align-items:center;gap:var(--spacing-2);overflow:hidden;color:var(--color-foreground);font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap}._actions_194bx_33{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}@supports (animation-timeline: --a) and (timeline-scope: --a){@container style(--boost33-shell-timeline: on){._bar_194bx_7{position:relative;z-index:1;animation:_scrolled_194bx_1 linear both;animation-timeline:--boost33-shell-scroll;animation-range:0 var(--spacing-10)}}}@keyframes _scrolled_194bx_1{to{box-shadow:var(--shadow-scrolled)}}._header_i17td_42{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8);padding:var(--spacing-4_5) var(--spacing-8) var(--spacing-4);background:var(--color-surface);font-family:var(--font-sans)}._headings_i17td_52{display:flex;min-width:0;flex-direction:column;gap:var(--spacing-1)}._title_i17td_33{margin:0;color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}._subtitle_i17td_74{margin:0;color:var(--color-foreground-secondary);font-size:var(--text-base);font-weight:var(--font-weight-regular);line-height:var(--leading-snug)}._actions_i17td_82{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}._shell_10chf_10{display:flex;height:100%;background:var(--color-surface);font-family:var(--font-sans)}._wordmark_10chf_20{padding:var(--spacing-3) var(--spacing-2_5) var(--spacing-5)}._switcher_10chf_26{padding-bottom:var(--spacing-4)}._foot_10chf_33{display:flex;flex-direction:column;gap:var(--spacing-4);margin-block-start:auto;padding-block-start:var(--spacing-4)}._nav_10chf_45{display:flex;flex-direction:column;gap:var(--spacing-4)}._main_10chf_54{display:flex;min-width:0;flex:1;flex-direction:column}._content_10chf_75{flex:1;min-height:0;overflow-y:auto;background:var(--color-surface)}@supports (animation-timeline: --a) and (timeline-scope: --a){._main_10chf_54{timeline-scope:--boost33-shell-scroll;--boost33-shell-timeline: on}._content_10chf_75{scroll-timeline:--boost33-shell-scroll block}}:root{--shadow-overlay: 0px 16px 40px -10px var(--shadow-overlay-color);--shadow-lift: 0px 10px 24px -14px color-mix(in srgb, var(--color-neutral-950) 28%, transparent);--shadow-scrolled: 0px 6px 16px -12px color-mix(in srgb, var(--color-neutral-950) 35%, transparent)}._root_15f7d_8{position:relative;font-family:var(--font-sans)}._trigger_15f7d_17{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2_25) var(--spacing-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);cursor:pointer}._trigger_15f7d_17[aria-expanded=true]{background:var(--color-surface-muted)}._trigger_15f7d_17:focus-visible,._railTrigger_15f7d_46:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._triggerName_15f7d_56{overflow:hidden;flex:1;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-semibold);text-align:left;text-overflow:ellipsis;white-space:nowrap}._chevron_15f7d_67{width:var(--spacing-3);height:var(--spacing-3);flex-shrink:0;color:var(--color-foreground-muted);transition:transform var(--dur-fast) var(--ease-out)}._trigger_15f7d_17[aria-expanded=true] ._chevron_15f7d_67{transform:rotate(180deg)}._railTrigger_15f7d_46{display:flex;box-sizing:border-box;width:100%;min-height:var(--spacing-6);align-items:flex-start;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer}._panel_15f7d_109{position:absolute;z-index:1;top:100%;left:0;width:var(--container-sidebar);box-sizing:border-box;margin-top:var(--spacing-0_5);padding:var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-overlay)}._hubRow_15f7d_135,._productRow_15f7d_136,._accountRow_15f7d_137{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2_5);padding:var(--spacing-2);border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-foreground);font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}._hubRow_15f7d_135:hover,._productRow_15f7d_136:hover,._accountRow_15f7d_137:hover{background:var(--color-surface-muted)}._hubRow_15f7d_135:focus-visible,._productRow_15f7d_136:focus-visible,._accountRow_15f7d_137:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}._products_15f7d_144{display:flex;flex-direction:column;gap:var(--spacing-0_5);margin:0;padding:0;list-style:none}._productRow_15f7d_136[data-current=true]{background:var(--color-surface-muted)}._productRow_15f7d_136[data-entitled=false] ._rowName_15f7d_193{color:var(--color-foreground-muted)}._accountRow_15f7d_137{padding-inline:var(--spacing-3)}._accountRow_15f7d_137 ._rowName_15f7d_193{font-size:var(--text-sm)}._accountRow_15f7d_137 ._rowSub_15f7d_213{font-size:var(--text-2xs)}._accountRow_15f7d_137[data-actionable=false]{cursor:default}._accountRow_15f7d_137[data-actionable=false]:hover{background:transparent}._rowText_15f7d_238{display:flex;min-width:0;flex-direction:column}._hubRow_15f7d_135 ._rowText_15f7d_238{gap:var(--spacing-0_5)}._rowName_15f7d_193{overflow:hidden;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._productRow_15f7d_136 ._rowName_15f7d_193{flex:1}._rowSub_15f7d_213{overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap}._hubMark_15f7d_281{width:var(--spacing-5);height:var(--spacing-5);flex-shrink:0;color:var(--color-foreground)}._tag_15f7d_297{flex-shrink:0;margin-left:auto;padding:var(--spacing-0_5) var(--spacing-1_5);border-radius:var(--radius-full);background:var(--color-surface-muted);color:var(--color-foreground-muted);font-size:var(--text-2xs);font-weight:var(--font-weight-medium)}._check_15f7d_308{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground)}._avatar_15f7d_321{display:grid;width:var(--spacing-6);height:var(--spacing-6);flex-shrink:0;border-radius:var(--radius-lg);background:var(--color-surface-muted);color:var(--color-foreground-secondary);font-size:var(--text-3xs);font-weight:var(--font-weight-semibold);place-items:center}._chevronRight_15f7d_334{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground-muted)}._divider_15f7d_355{margin:var(--spacing-2_25) 0 var(--spacing-2);border:none;border-top:1px solid var(--color-border)}._products_15f7d_144+._divider_15f7d_355{margin:var(--spacing-1_5) 0 var(--spacing-1)}@media(prefers-reduced-motion:reduce){._chevron_15f7d_67{transition:none}}._root_g1823_11{--dots-size: var(--spacing-8);--dots-speed: var(--dur-dots);--dots-ease: var(--ease-in-out-quint);--dots-gap: calc(var(--dots-size) * .14);--dots-dot: calc((var(--dots-size) - var(--dots-gap) * 2) / 3);display:inline-flex;align-items:center;justify-content:center}._grid_g1823_25{display:grid;gap:var(--dots-gap);grid-template-columns:repeat(3,var(--dots-dot))}._dot_g1823_31{width:var(--dots-dot);height:var(--dots-dot);border-radius:var(--radius-full);background:currentColor;opacity:1;animation:_dots-pulse_g1823_1 var(--dots-speed) var(--dots-ease) infinite backwards;animation-delay:calc(var(--dots-step, 0) * var(--dots-speed) / 4)}._dot_g1823_31:nth-child(1){--dots-step: 0}._dot_g1823_31:nth-child(2),._dot_g1823_31:nth-child(4){--dots-step: 1}._dot_g1823_31:nth-child(3),._dot_g1823_31:nth-child(5),._dot_g1823_31:nth-child(7){--dots-step: 2}._dot_g1823_31:nth-child(6),._dot_g1823_31:nth-child(8){--dots-step: 3}._dot_g1823_31:nth-child(9){--dots-step: 4}@keyframes _dots-pulse_g1823_1{0%,to{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){._dot_g1823_31{animation:none}}:root{--color-neutral-0: #FFFFFF;--color-neutral-50: #F7F7F8;--color-neutral-100: #EFEFF1;--color-neutral-200: #E5E5EA;--color-neutral-300: #D9D9D9;--color-neutral-400: #C1C1C2;--color-neutral-500: #8E8E93;--color-neutral-600: #6B6B6B;--color-neutral-700: #525252;--color-neutral-800: #3A3A3C;--color-neutral-900: #292929;--color-neutral-950: #1D1D1B;--color-neutral-1000: #000000;--color-orange-50: #FDF3EE;--color-orange-100: #FBE2D5;--color-orange-200: #F7C3A8;--color-orange-300: #F0A173;--color-orange-400: #EB7147;--color-orange-500: #E9521E;--color-orange-600: #C2410C;--color-orange-700: #9A3412;--color-sand-100: #FBF3E4;--color-sand-300: #F3D6AC;--color-sand-600: #8A6510;--color-green-100: #DDF0E4;--color-green-600: #157F3D;--color-crimson-100: #F7DEE1;--color-crimson-600: #A3182B;--color-blue-100: #DEE6FA;--color-blue-600: #2A5BD7;--color-background: var(--color-neutral-50);--color-surface: var(--color-neutral-0);--color-surface-muted: var(--color-neutral-100);--color-border: var(--color-neutral-200);--color-border-strong: var(--color-neutral-300);--color-foreground: var(--color-neutral-950);--color-foreground-secondary: var(--color-neutral-700);--color-foreground-muted: var(--color-neutral-600);--color-foreground-disabled: var(--color-neutral-400);--color-primary: var(--color-orange-500);--color-primary-hover: var(--color-orange-600);--color-primary-foreground: var(--color-neutral-0);--color-primary-subtle: var(--color-orange-50);--color-primary-border: var(--color-orange-200);--color-success: var(--color-green-600);--color-success-subtle: var(--color-green-100);--color-warning: var(--color-sand-600);--color-warning-subtle: var(--color-sand-300);--color-danger: var(--color-crimson-600);--color-danger-subtle: var(--color-crimson-100);--color-info: var(--color-blue-600);--color-info-subtle: var(--color-blue-100);--color-grant: var(--color-sand-600);--color-purchased: var(--color-neutral-950);--shadow-overlay-color: rgb(29 29 27 / 20%);--font-display: var(--boost33-font-display, Outfit), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-sans: var(--boost33-font-sans, Inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: var(--boost33-font-mono, "Geist Mono"), ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--text-3xs: 9px;--text-2xs: 11px;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--text-5xl: 46px;--text-6xl: 60px;--text-7xl: 78px;--text-nav-label: 14px;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tighter: -.03em;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .04em;--tracking-wider: .09em;--tracking-caps: .05em;--leading-none: 100%;--leading-tight: 120%;--leading-snug: 135%;--leading-normal: 150%;--leading-relaxed: 170%;--breakpoint-mobile: 390px;--breakpoint-desktop: 1440px;--container-sidebar: 264px;--container-sidebar-rail: 56px;--container-command-palette: 560px;--container-content: 1440px;--container-account-menu: 312px;--container-notification-panel: 360px;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-4_5: 18px;--spacing-5: 20px;--spacing-6: 24px;--spacing-7: 28px;--spacing-8: 32px;--spacing-10: 40px;--spacing-11: 44px;--spacing-12: 48px;--spacing-16: 64px;--spacing-20: 80px;--spacing-2_5: 10px;--spacing-5_5: 22px;--spacing-1_5: 6px;--spacing-1_25: 5px;--spacing-0_5: 2px;--spacing-2_25: 9px;--spacing-3_5: 14px;--spacing-0_25: 1px;--spacing-topup-reserve: 68px;--spacing-wallet-segment-min: 3px;--spacing-9_5: 38px;--radius-none: 0px;--radius-xs: 2px;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--radius-2xl: 12px;--radius-full: 9999px;--radius-product-tile: 25%}:root{--dur-instant: 80ms;--dur-fast: .15s;--dur-base: .22s;--dur-slow: .32s;--dur-bold: .7s;--dur-hero: .9s;--dur-spin: .7s;--dur-pulse: 1.6s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--lift-sm: -1px;--lift-md: -2px;--rise: 8px;--stagger: 40ms;--duration-fast: var(--dur-fast);--easing-standard: var(--ease-out);--dur-dots: 1s;--ease-in-out-quint: cubic-bezier(.83, 0, .17, 1)}._root_1pg11_6{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--spacing-4);overflow:hidden;background-color:var(--color-neutral-1000);color:var(--color-neutral-0);--launch-accent: var(--launch-accent-input, var(--color-neutral-0));isolation:isolate}._glow_1pg11_9{position:absolute;top:50%;left:50%;z-index:0;width:298.333%;height:238.222%;transform:translate(-50%);border-radius:50%;background-image:radial-gradient(circle farthest-corner at 50% 50% in oklab,var(--color-orange-500) 0%,var(--color-orange-600) 28%,var(--color-orange-700) 48%,oklab(from var(--color-orange-700) l a b / 0%) 72%);filter:blur(5.5vmax)}._backdrop_1pg11_103{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}._content_1pg11_16{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-5);inline-size:min(280px,100%)}._dots_1pg11_139{--dots-size: var(--spacing-6);color:var(--launch-accent);mix-blend-mode:soft-light;opacity:1}._bar_1pg11_178{position:relative;inline-size:100%;block-size:var(--spacing-1);overflow:hidden;border-radius:var(--radius-full)}._track_1pg11_186{position:absolute;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--launch-accent) 35%,transparent);mix-blend-mode:soft-light;opacity:.75}._fill_1pg11_194{position:absolute;inset-block:0;inset-inline-start:0;inline-size:calc(var(--launch-progress, 0) * 1%);border-radius:inherit;background:var(--color-neutral-0);transition:inline-size var(--dur-fast) var(--ease-out)}._bar_1pg11_178[data-indeterminate=true] ._fill_1pg11_194{inline-size:33.333%;animation:_launch-indeterminate_1pg11_1 calc(var(--dur-dots) * 1.5) var(--ease-out) infinite}@keyframes _launch-indeterminate_1pg11_1{0%{inset-inline-start:-33.333%}to{inset-inline-start:100%}}._caption_1pg11_220{margin:0;opacity:.8;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:var(--leading-normal);text-align:center}@media(prefers-reduced-motion:reduce){._fill_1pg11_194{transition:none}._bar_1pg11_178[data-indeterminate=true] ._fill_1pg11_194{inset-inline-start:33.333%;animation:none}}@media(prefers-contrast){._root_1pg11_6{--launch-accent: var(--color-neutral-0)}._glow_1pg11_9,._backdrop_1pg11_103{display:none}._dots_1pg11_139,._track_1pg11_186{mix-blend-mode:normal;opacity:1}}

package/dist/theme.css

@@ -17,13 +17,38 @@
  * `text-sm` mean this package's values in that app, and keep meaning them
  * across a version bump.
  *
- * This is the SAME token set as tokens.css, from the same dump, written by
- * the same generator run and the same code path -- only the prelude differs
- * (`@theme static` here, `:root` there). Tailwind emits an @theme block onto
- * `:root` inside `@layer theme`, so a consumer importing both files declares
- * every name twice; that is harmless for exactly as long as the two agree,
- * and tests/theme-drift.test.ts is what keeps them agreeing. Hand-editing
- * this file is how that stops being true.
+ * This is tokens.css's SYSTEM tokens, from the same dump, written by the same
+ * generator run and the same code path -- the prelude differs (`@theme static`
+ * here, `:root` there) and so does the token list. Tailwind emits an @theme
+ * block onto `:root` inside `@layer theme`, so a consumer importing both files
+ * declares every name here twice; that is harmless for exactly as long as the
+ * two agree, and tests/theme-drift.test.ts is what keeps them agreeing.
+ * Hand-editing this file is how that stops being true.
+ *
+ * WHAT IS DELIBERATELY ABSENT, and it is not an omission (ADR-0013, B33-1274).
+ * `static` mints a utility class for every name below, and a class name is a
+ * published API -- an unknown Tailwind class does not error, it silently stops
+ * matching, so withdrawing one later renders a consumer's element unstyled.
+ * Seven of the dump's tokens are measurements of ONE COMPONENT each, hand-added
+ * only because a literal in a component is forbidden, and every one of them is
+ * a number a fidelity gate is expected to move. They are marked
+ * `"scope": "component-private"` in data/paper-tokens.json and emitted to
+ * tokens.css alone:
+ *
+ *   --color-grant, --color-purchased        WalletChip's two bar segments
+ *   --text-3xs                             AppSwitcher's avatar initials
+ *   --text-nav-label                       the nav item label size
+ *   --spacing-topup-reserve                WalletChip's Top up strip
+ *   --spacing-wallet-segment-min           WalletChip's smallest honest mark
+ *   --radius-product-tile                  ProductMark's tile corner
+ *
+ * They still reach this app on `:root` through style.css, unchanged and at the
+ * same values, so `var(--spacing-topup-reserve)` reads them exactly as before.
+ * What no longer exists is `bg-grant`, `bg-purchased`, `text-3xs`,
+ * `text-nav-label`, `p-topup-reserve` (and its spacing siblings),
+ * `w-wallet-segment-min` and `rounded-product-tile`. Reaching a
+ * component-private measurement through `var()` is a deliberate escape hatch;
+ * binding a class name to one was an accident.
  *
  * `static` rather than plain `@theme` on purpose: plain `@theme` emits only
  * the variables a generated utility happens to reference, so a token nothing
@@ -97,8 +122,6 @@
   --color-danger-subtle: var(--color-crimson-100);
   --color-info: var(--color-blue-600);
   --color-info-subtle: var(--color-blue-100);
-  --color-grant: var(--color-sand-600); /* Grant tokens — they expire. */
-  --color-purchased: var(--color-neutral-950); /* Purchased tokens — they never expire. Ink, because it is permanent. */
   --shadow-overlay-color: rgb(29 29 27 / 20%); /* The one colour every shadow in the system is drawn in: --color-neutral-950, the brand black, at 20%. Added by hand on B33-530 rather than by recapture -- Paper carries it, this dump predates it -- and the value is the Wallet's, copied from its own elevation.css. The offsets it is composed into are not a Paper token type; see elevation-tokens.css. */
 
   /* fontFamily */
@@ -107,7 +130,6 @@
   --font-mono: var(--boost33-font-mono, 'Geist Mono'), ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Every token amount. Tabular, so money aligns in columns. */
 
   /* fontSize */
-  --text-3xs: 9px; /* The AppSwitcher account avatar's initials, and nothing else today. Not a Paper token: added by hand the way --text-nav-label was, from the approved appswitcher-open baseline, where "AC" inks 12.5px in the 24px avatar tile -- Inter's advance for that pair is 12.2px at 9px/600 and 16.3px at 12px/600, which is what this package drew before B33-910. A step below --text-2xs and below anything a person is asked to read: the initials are aria-hidden decoration on a row whose name is beside them, so the contrast and size floors that govern body copy do not apply. Do not reach for it for text. */
   --text-2xs: 11px;
   --text-xs: 12px;
   --text-sm: 13px;
@@ -121,7 +143,6 @@
   --text-5xl: 46px;
   --text-6xl: 60px;
   --text-7xl: 78px; /* The balance figure. One per screen. */
-  --text-nav-label: 14px; /* Nav item label size, settled in the fidelity baseline. Sits between --text-sm (13px) and --text-base (15px) without sharing either slot -- reused by other nav-adjacent labels, not just NavItem. */
 
   /* fontWeight */
   --font-weight-light: 300;
@@ -152,7 +173,10 @@
   /* container */
   --container-sidebar: 264px; /* Shell sidebar. Matches BoostScore so the products feel like one system. */
   --container-sidebar-rail: 56px; /* Shell sidebar collapsed to the rail. Added when Sidebar needed it; 56px is the settled rail width the WalletChip and NavItem rail specimens were already shot at (see CONTEXT.md, 'Rail'). */
+  --container-command-palette: 560px; /* CommandPalette's panel width. Not a Paper *token* -- it is the width of the Palette frame on the 'CommandPalette - search' artboard (page 004 Components), added by hand the way --container-sidebar-rail, --spacing-topup-reserve and --spacing-wallet-segment-min were, and named for the surface it sizes rather than for a place on a scale. It belongs in --container-* rather than --spacing-* for the same reason --container-sidebar does: it is one surface's own width, and 560px is not a step on the x4 scale and never will be. Nothing else derives from it -- the palette is the modal variant of the anchored overlay (ADR-0009), centred over the page rather than anchored to a trigger, so no sibling measurement constrains it. PROVISIONAL, and deliberately recorded as such: CommandPalette has not passed its fidelity gate, and CLAUDE.md is explicit that before the gate nothing is authoritative and Paper is only a starting drawing. This is the drawing's number, not an approved measurement, and the person at the gate may move it. See B33-495. */
   --container-content: 1440px;
+  --container-account-menu: 312px; /* The AccountMenu popover panel's width, read off the AccountMenu drawings on Paper's 004 Components page and its origin on 103 Identity, which agree to the pixel. Not a Paper token and NOT a settled measurement, which is the part worth reading twice: the Wallet has never rendered an account menu, nothing in the spec records a popover width, and CLAUDE.md is explicit that before that component's fidelity gate no drawing is authoritative. This token exists because the first non-negotiable forbids a literal in a component, not because 312px is final -- the person at the gate may change it, and this sentence is what stops the next reader treating the value as approved. Off every scale here on purpose: it is one panel's width, the way --container-sidebar is one column's, and nothing else in the package reads it. */
+  --container-notification-panel: 360px; /* The NotificationCenter popover's width (B33-494). Not a Paper token: it is the width of the "NotificationCenter — popover" artboard's panel frame on page 004, read off the node rather than off a screenshot, and added by hand the way --container-sidebar-rail was. A container token and not a spacing step because it sizes a surface, which is what the namespace is for -- the AppSwitcher panel is --container-sidebar for the same reason, and the two differ because the switcher hangs off the 264px sidebar while this hangs off the top bar and is sized by its own content. NOTHING HAS APPROVED THIS VALUE YET: the Wallet never rendered this component, so there is no captured referent, and the number is settled by the person who approves the component at its fidelity gate and writes the measurement into the spec (CLAUDE.md, "The three components the Wallet never rendered"). It is a token rather than a literal so that when the gate moves it, it moves in one place. */
 
   /* spacing */
   --spacing-1: 4px;
@@ -162,9 +186,10 @@
   --spacing-4_5: 18px; /* PageHeader's top padding. Off the x4 scale on purpose, same reasoning as --spacing-2_5: the Boost Outbound screens set the page header 18px from the top and 16px from the bottom, so it is not a symmetric --spacing-4 block -- the extra 2px at the top optically centres a cap-height that sits low in its line box. */
   --spacing-5: 20px;
   --spacing-6: 24px;
-  --spacing-7: 28px; /* On the x4 scale but absent from the captured dump. Added when PageHeader wanted a 28px top padding; the compact header (B33-768) moved to --spacing-4_5 and nothing in this package uses 28px now. Kept rather than dropped because tokens.css ships in style.css and a consumer may be holding it. */
+  --spacing-7: 28px; /* On the x4 scale but absent from the captured dump. Added when PageHeader wanted a 28px top padding; the compact header (B33-768) moved to --spacing-4_5, which left nothing in this package using it until B33-494 sized the NotificationCenter empty state's bell glyph at 28px. It was kept through that gap rather than dropped because tokens.css ships in style.css and a consumer may be holding it. */
   --spacing-8: 32px;
   --spacing-10: 40px;
+  --spacing-11: 44px; /* The NotificationCenter empty state's bottom padding (B33-494). On the x4 scale and absent from the captured dump, the same shape of gap --spacing-7 filled. The empty panel sets its bell-and-copy block 40px (--spacing-10) from the header and 44px from the foot, which is not a symmetric block: the drawing hangs the group slightly high so it reads as centred against a panel whose header has visual weight the bottom edge does not. Read off the "NotificationCenter — popover" artboard's empty frame on page 004, and unapproved like every other measurement in that component until a human captures its designed baseline (CLAUDE.md). */
   --spacing-12: 48px;
   --spacing-16: 64px;
   --spacing-20: 80px;
@@ -174,7 +199,9 @@
   --spacing-1_25: 5px; /* WalletChip's resting balance bar height, measured off the approved fidelity baselines in B33-527 (walletchip-resting and walletchip-unknown both render it at exactly 5px; the lifted states add --spacing-0_5). Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
   --spacing-0_5: 2px; /* WalletChip's rail bar height -- the split turned thin at 56px, settled in the fidelity baseline. Also the amount the chip opens up by when it lifts (B33-527) and the balance pill's vertical padding. Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
   --spacing-2_25: 9px; /* The AppSwitcher trigger's block padding, settled in the spec's 9 September recapture ("9px block / 8px inline padding"). Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
-  --spacing-topup-reserve: 68px; /* WalletChip's top-up reserve: the width of the strip the Top up button floats over in the chip header, kept clear of the wallet name. Not a Paper token and not a step on the x4 scale -- added by hand the way --spacing-2_5 and --radius-product-tile were, and named for what it reserves rather than for where it sits on a scale, because the number is a measurement of one button. Derived in B33-913 from the real rendering at the fidelity baselines' 240px chip width. `.topUp` is absolutely positioned, so it reserves no width of its own; at --text-xs / --font-weight-semibold in Inter it measures 39.6px for the English "Top up" and 59.9px for the French "Recharger" the first two consumers ship. 68px is the wider of those rounded up to 60px, plus the header's own --spacing-2 of clearance, so a truncated name's ellipsis stops short of the button instead of touching it. Deliberately no larger: the chip's header content box is 210px, so this still leaves 142px for the name and keeps "Portefeuille electronique" (140.3px) whole, and every px added here truncates an ordinary translated name earlier. A consumer whose top-up label is a phrase rather than a word ("Crediter le compte", 107px) overruns it again -- the only fix that holds for any label is the button in normal flow, which restructures an approved view and needs a human. See B33-913. */
+  --spacing-3_5: 14px; /* 14px, and two components measured it independently -- which is the strongest evidence a hand-added step is real rather than one drawing's accident. NotificationCenter (B33-494): the panel header's top padding, 14px from the top edge against 10px (--spacing-2_5) from the tab rule beneath it, the same shape of asymmetry --spacing-4_5 makes in PageHeader. AccountMenu (B33-493): the person block's block padding, the 38px avatar (--spacing-9_5) in 14px above and below making the 66px block the drawing measures. On the x4 scale (3.5 x 4) but absent from the captured Paper dump, the way --spacing-7 is. Read off UNAPPROVED drawings in both cases: neither component has been through its fidelity gate, so this value is provisional and the gate may move it. */
+  --spacing-0_25: 1px; /* The NotificationCenter's smallest step (B33-494): the unread-count pill's block padding, and the 1px the source mark drops to sit on the first line of the title beside it rather than on the line box's top. Off the x4 scale on purpose, same reasoning as --spacing-2_5, and a step below --spacing-0_5 (2px), which was the smallest until this. One px is a nudge rather than a space -- do not reach for it where a real gap is meant, and note that it is the width a hairline is already drawn at as a `1px` literal in every border rule here, which this token deliberately does not replace. */
+  --spacing-9_5: 38px; /* The AccountMenu person block's avatar: the circle carrying the signed-in person, and deliberately the largest avatar in the package -- the switcher's org tile is 24px and the account menu's own org tile 22px, because those two mark an organisation and this one is a portrait. On the x4 scale (9.5 x 4) and absent from the dump. Read off an UNAPPROVED drawing -- see --container-account-menu. */
 
   /* radius */
   --radius-none: 0px;
@@ -185,6 +212,5 @@
   --radius-xl: 8px;
   --radius-2xl: 12px;
   --radius-full: 9999px;
-  --radius-product-tile: 25%; /* The corner on the ProductMark tile -- the rounded square the four product glyphs sit on. Not a Paper token: the marks are copied from boostledger's icons.tsx, whose tile is a 40-unit `rect` with `rx=10`, i.e. a quarter of the side. Added by hand (the way --spacing-2_5 was) so this package's no-ad-hoc-radius rule is met with a token rather than a literal. Kept as a proportion, not a px value, on purpose: unlike every other radius here it is applied to a `rect` inside a `viewBox=0 0 40 40` and must scale with the mark -- 25% resolves to rx=10 on that grid at every size, which is what lets one drawing render correctly from Paper's 96px down to 20px. A fixed px radius cannot do that. */
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boost33/ui",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "The app shell every Boost33 product renders inside.",
   "license": "UNLICENSED",
   "type": "module",
@@ -41,6 +41,7 @@
     "sidebar-overflow-check": "npm run specimen:build && npx tsx scripts/sidebar-overflow-check.mts",
     "wallet-name-overflow-check": "npm run specimen:build && npx tsx scripts/wallet-name-overflow-check.mts",
     "nav-height-budget-check": "npm run specimen:build && npx tsx scripts/nav-height-budget-check.mts",
+    "launch-contrast-check": "npm run specimen:build && npx tsx scripts/launch-contrast-check.mts",
     "token-order-check": "npx tsx scripts/token-order-check.mts",
     "afk": "npx tsx .sandcastle/main.mts",
     "hooks:install": "git config core.hooksPath .githooks",