/* BAXUS design system · geometry. Type and color have separate sources.
   Prefer .ui-control / .ui-input / .ui-panel / .ui-toolbar for new components.
   Legacy selectors share these roles so pages cannot drift independently. */
:root {
  --radius-surface: 14px;
  --radius-badge: 4px;
  --radius-control: var(--radius-surface);
  --radius-card: var(--radius-surface);
  --radius-inset: var(--radius-surface);
  --radius-dialog: var(--radius-surface);
  --radius-round: 999px;
  --control-height: 44px;
  --control-height-prominent: 48px;
  --quick-filter-height: 32px;
  --quick-filter-padding: 10px;
  --control-padding: 16px;
  --control-gap: 8px;
  --toolbar-gap: 12px;
  --panel-padding: 24px;
  --page-gutter: 32px;
  --section-gap: 32px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}
@media(max-width:800px) { :root { --page-gutter:16px; } }
/* Controls can grow for wrapped labels; their baseline is the same 44px. */
.ui-control,
:is(.site,.vm-app-host,.mn-app,.geometry-guide,.classic-payment-dialog,.offer-dialog,.offer-modal,.wallet-privy-dialog,.payment-provider-step) :is(.btn,.bc-action,.btn-redeem,.of-btn,.hist-view,.trade-view,.catalog-button,.cr-primary,.cr-secondary,.payment-provider-button,.valuation-entry-tabs button,.credit-presets button,.redeem-actions>[type=button],.vm-next,.vm-sell,.vm-keep,.vm-modal-close) {
  box-sizing: border-box!important;
  min-height: var(--control-height)!important;
  height: auto!important;
  border-radius: var(--radius-control)!important;
  padding: 10px var(--control-padding)!important;
  gap: var(--control-gap)!important;
}
/* Dense bottle cards keep their compact padding and image-first proportions. */
.site .bc-card .bc-action, .geometry-guide .bc-card .bc-action { padding:8px!important; border-radius:var(--radius-control)!important; min-height:var(--control-height)!important; }
:is(.site,.vm-app-host) :is(.classic-pay,.vm-start), body .classic-payment-dialog :is(.classic-pay,.cr-primary), .ui-control.is-prominent, :is(.site,.vm-app-host,.geometry-guide) .ui-control.is-prominent {
  box-sizing:border-box!important; min-height:var(--control-height-prominent)!important;
  height:auto!important; padding:12px var(--control-padding)!important; border-radius:var(--radius-control)!important;
}
/* Search, filter, sort, and date controls line up in one toolbar. */
:is(body,.site,.vm-app-host) :is(.search-field,.catalog-query,.header-search,.market-tools .field,.vm-inventory-tools>label,.hist-search,.vault-search,.spirit-search,.faq-search,.mn-search-row form,.search-filter,.search-select,.btn-filters,.market-tools .sort,.bottle-toolbar .sort,.vm-inventory-tools select,.hist-select,.oa-controls select,.hist-date-wrap) {
  box-sizing:border-box!important;
  height:var(--control-height)!important; min-height:var(--control-height)!important;
  border-radius:var(--radius-control)!important;
  padding:0 var(--control-padding)!important; gap:var(--control-gap)!important;
}
:is(body,.site,.vm-app-host) :is(select.search-select,.vm-inventory-tools select,.hist-select-wrap .hist-select,.oa-controls select) { padding-right:40px!important; }
/* Submit targets sit within their parent search field; never add a second shell. */
:is(.search-field,.catalog-query,.header-search,.mn-search-row form)>button[type=submit] {
  height:var(--control-height)!important; min-height:var(--control-height)!important;
  width:var(--control-height)!important; padding:0!important; border-radius:var(--radius-control)!important;
}
.ui-input, .site :is(.acct-input,.profile-referral input,.cu-field input:not([type=file]),.cu-field select,.redeem-fields input:not([type=checkbox]),.redeem-fields select,.valuation-field input,.valuation-field select,.trade-tools input,.trade-tools select,.promo input),
.classic-card input, .payment-provider-step .payment-provider-field input {
  box-sizing:border-box!important; height:var(--control-height)!important; min-height:var(--control-height)!important;
  border-radius:var(--radius-control)!important; padding:0 var(--control-padding)!important;
}
.site .promo input[type=text] { padding-right:48px!important; }
/* Inner fields inherit the wrapper's hit area and must not acquire a second border. */
:is(.hist-date-wrap,.hist-search,.vault-search,.search-field,.header-search,.catalog-query,.credit-amount-field,.offer-amount) input {
  border-radius:0!important; min-height:0!important; padding:0!important;
}
:is(.site,.classic-payment-dialog) :is(.credit-amount-field,.offer-amount) { border-radius:var(--radius-control)!important; }
.site :is(.cu-field textarea,.valuation-field textarea) { border-radius:var(--radius-control)!important; padding:12px var(--control-padding)!important; }
/* Segmented controls keep the standard control size and corner radius. */
:is(.site,.vm-app-host) :is(.filter-chip,.collection-scope button,.ship-direction-tabs a,.ship-direction-tabs button,.asset-view-toggle button,.cv-periods button,.offers-tabs button,.of-tabs button) {
  box-sizing:border-box!important; min-height:var(--control-height)!important; height:auto!important;
  padding:8px 12px!important; gap:var(--control-gap)!important; border-radius:var(--radius-control)!important;
}
/* Quick category filters are a compact secondary row. Touch targets stay 44px. */
:is(.site,.vm-app-host) .chip-cat {
  box-sizing:border-box!important; min-height:var(--quick-filter-height)!important; height:auto!important;
  padding:6px var(--quick-filter-padding)!important; border-radius:var(--radius-control)!important;
}
body.app-screen .site .chip-cat { min-height:var(--control-height)!important; }
@media (pointer:coarse) {
  :is(.site,.vm-app-host) .chip-cat { min-height:var(--control-height)!important; }
}
:is(.site,.vm-app-host) :is(.collection-scope,.ship-direction-tabs,.asset-view-toggle) { gap:4px!important; border-radius:var(--radius-card)!important; }
/* Inset controls use the same radius as their segmented track. */
.site .asset-view-toggle button { border-radius:var(--radius-control)!important; }
/* Round controls are intentional: profile, wishlist, carousel arrows, and close. */
.ui-icon-control, :is(.site,.vm-app-host) :is(.market-shelf-arrow,.bc-save,.classic-close,.modal-close,.drawer-close,.activity-drawer-close) {
  box-sizing:border-box!important; width:var(--control-height)!important; height:var(--control-height)!important;
  min-width:var(--control-height)!important; min-height:var(--control-height)!important;
  border-radius:var(--radius-round)!important; padding:10px!important;
}
.site .promo button { width:var(--control-height)!important; height:var(--control-height)!important; min-height:var(--control-height)!important; padding:0!important; right:0!important; border-radius:var(--radius-round)!important; }
/* Payment logos remain 64px identity tiles, with the shared control corner. */
.payment-logo { border-radius:var(--radius-control)!important; }
.payment-account { border-radius:var(--radius-card)!important; }
/* Every non-circular component shares the same radius; padding stays compact. */
.ui-panel, :is(.site,.vm-app-host) :is(.hist-card,.acct-card,.personal-card,.profile-referral,.wallet-details,.wallet-funding,.points-total,.reward,.of-card,.ship-hero,.cv-card,.pay-card,.intake-panel,.trade-table-wrap,.classic-summary-card,.app-promo) {
  border-radius:var(--radius-card)!important;
}
.ui-panel, :is(.site,.vm-app-host) :is(.hist-card,.acct-card,.personal-card,.profile-referral,.wallet-details,.reward) { padding:var(--panel-padding)!important; }
.site .ship-hero { padding:16px 24px!important; gap:24px!important; }
.site :is(.cv-card,.cv-mix) { padding:var(--panel-padding)!important; }
.bc-card:not([data-card-layout=row]) { border-radius:var(--radius-card)!important; }
.bc-card .bc-panel { border-radius:var(--radius-inset)!important; }
/* Row cards keep the same corners as grid cards. Screen-attached edges stay flush. */
.is-rows>.bc-card, .bc-card[data-card-layout=row] { border-radius:var(--radius-surface)!important; }
.ui-dialog, :is(.classic-payment-dialog,.offer-dialog,.offer-modal,.wallet-privy-dialog,.redeem-dialog,.cv-upgrade,.app-control-sheet) { border-radius:var(--radius-dialog)!important; }
:is(.shipping-detail-drawer,.activity-detail-drawer,.intake-drawer,.vm-activity-drawer) { border-radius:var(--radius-dialog) 0 0 var(--radius-dialog)!important; }
/* Shared spacing rhythm: icons 8, toolbar controls 12, title/content 16, sections 32. */
.ui-toolbar, :is(.site,.vm-app-host) :is(.hist-tools,.market-tools,.bottle-toolbar,.vm-inventory-tools,.oa-controls,.trade-tools) { gap:var(--toolbar-gap)!important; }

.site :is(.component-heading,.points-rewards-heading,.market-section-head) { margin-bottom:16px!important; }
.ui-stack { display:grid; gap:var(--space-4); }
.ui-sections { display:grid; gap:var(--section-gap); }
.ui-control:focus-visible,.ui-input:focus-visible,.ui-icon-control:focus-visible { outline:2px solid var(--palette-kelly,#0d8962); outline-offset:2px; }
@media(max-width:700px) {
  :root { --panel-padding:16px; }
  :is(.shipping-detail-drawer,.activity-detail-drawer,.intake-drawer,.vm-activity-drawer) { border-radius:var(--radius-dialog) var(--radius-dialog) 0 0!important; }
  .site .ship-hero { padding:16px!important; gap:16px!important; }
}
/* App collection retains its unboxed valuation chart. */
body.app-screen .collection-scope button { border-radius:var(--radius-surface)!important; }
body.app-screen .cv-card { border-radius:0!important; padding:0!important; }
body.app-screen :is(.shipping-detail-drawer,.activity-detail-drawer,.intake-drawer,.app-control-sheet) { border-radius:var(--radius-dialog) var(--radius-dialog) 0 0!important; }
/* Modal content sits outside .site in the shared payment portal. */
.classic-payment-dialog .classic-summary-card { border-radius:var(--radius-card)!important; }
body .classic-payment-dialog[open] :is(.classic-pay,.cr-primary) { min-height:var(--control-height-prominent)!important; padding:12px var(--control-padding)!important; }
.classic-payment-dialog .classic-close { padding:10px!important; border-radius:var(--radius-round)!important; }
/* Let the mobile sort label truncate inside its column, rather than overlap Filters. */
body.app-screen #overview .bottle-toolbar { gap:var(--toolbar-gap)!important; }
body.app-screen .hist-tools { gap:var(--toolbar-gap)!important; }
body.app-screen .bottle-toolbar .list-meta { width:100%!important; min-width:0!important; max-width:100%!important; }
body.app-screen .bottle-toolbar .sort { width:100%!important; min-width:0!important; max-width:100%!important; overflow:hidden; }
body.app-screen .bottle-toolbar .sort span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.app-screen .bottle-toolbar .sort :is(img,svg) { flex-shrink:0; }
.site .valuation-back { box-sizing:border-box; min-height:var(--control-height)!important; border-radius:var(--radius-control)!important; padding:10px var(--control-padding)!important; }
.site .valuation-text-button { min-height:var(--control-height)!important; }

/* Shared overlays and sidebar highlights may be mounted outside the page wrapper. */
:is(.profile-account-drawer,#points-breakdown) { border-start-start-radius:var(--radius-surface); border-end-start-radius:var(--radius-surface); }

/* Status labels are compact rectangles; interactive filters keep control geometry. */
body :is(.hist-type,.cr-badge,.trade-status,.shipment-insurance,.shipment-gift-tag,.bc-badge,.vm-inventory-rarity,.vm-tier,.vm-result-rarity,.badge,.tag){border-radius:var(--radius-badge,4px)!important}