@seatlayer/js 0.51.0 → 0.52.0

package/dist/index.js

@@ -2114,6 +2114,13 @@ var BuyerAssetObjectUrls = class {
   }
 };
 
+// src/SeatPicker.ts
+import {
+  createMinimapTransform,
+  minimapPointToWorld,
+  minimapViewportPlan
+} from "@seatlayer/core/picker/minimapGeometry";
+
 // src/offerAvailability.ts
 var SALE_STATES = [
   "on-sale",
@@ -2252,6 +2259,12 @@ function tfStatic(key, fallback) {
   const v = t2(key);
   return v === key ? fallback : v;
 }
+var chartsLoadedThisPage = /* @__PURE__ */ new Set();
+function markChartLoaded(eventKey) {
+  const seen = chartsLoadedThisPage.has(eventKey);
+  chartsLoadedThisPage.add(eventKey);
+  return seen;
+}
 function pointInPolygon(x, y, poly) {
   let inside = false;
   for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
@@ -2354,9 +2367,13 @@ var CSS = (
      the WIDGET's meanings, not an org's brand: premium gold, environment
      warning, danger, success. Hosts can still override them with CSS. */
   --sl-premium:#e8c15a;--sl-premium-deep:#c9a24b;--sl-premium-ink:#1c1608;
-  --sl-warn:#d8a425;--sl-danger:#e5484d;--sl-success:#22a06b}
+  --sl-premium-text:color-mix(in srgb,var(--sl-premium-deep) 48%,var(--sl-text));
+  --sl-warn:#d8a425;--sl-warn-text:color-mix(in srgb,var(--sl-warn) 48%,var(--sl-text));
+  --sl-danger:#e5484d;--sl-success:#22a06b}
 .sl-picker *{box-sizing:border-box;margin:0;padding:0}
-.sl-picker button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+/* Keep the reset intentionally specificity-free. Standalone map and panel
+   controls must be able to establish their own token surfaces in either theme. */
+.sl-picker :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 
 /* header */
 .sl-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--sl-line);flex:none}
@@ -2552,11 +2569,11 @@ var CSS = (
 .sl-offer{display:none;margin:12px 14px 2px;padding:12px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));
   border-radius:12px;background:color-mix(in srgb,var(--sl-accent) 8%,var(--sl-surface));color:var(--sl-text)}
 .sl-offer.has{display:block}.sl-offer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
-.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent)}
+.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent-text)}
 .sl-offer-name{display:block;margin-top:2px;font-size:13px;font-weight:800;line-height:1.3}.sl-offer-line{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--sl-muted)}
 .sl-offer-info{position:relative;flex:none}.sl-offer-info>summary{list-style:none;width:25px;height:25px;border:1px solid var(--sl-line);border-radius:999px;
   display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:850;color:var(--sl-text);background:var(--sl-surface)}
-.sl-offer-info>summary::-webkit-details-marker{display:none}.sl-offer-info[open]>summary{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-offer-info>summary::-webkit-details-marker{display:none}.sl-offer-info[open]>summary{border-color:var(--sl-accent);color:var(--sl-accent-text)}
 .sl-offer-detail{margin-top:10px;padding-top:9px;border-top:1px solid var(--sl-line);font-size:10.5px;line-height:1.45;color:var(--sl-muted)}
 .sl-sec{padding:14px 14px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
 .sl-prices-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
@@ -2574,8 +2591,8 @@ var CSS = (
   padding:0 6px;margin:0 -6px;border-radius:8px;cursor:pointer;transition:background .15s}
 .sl-price-row:hover,.sl-price-row:focus-visible{background:color-mix(in srgb,var(--sl-line) 40%,transparent)}
 .sl-price-row.sl-active{background:color-mix(in srgb,var(--sl-accent) 9%,transparent)}
-.sl-price-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent);font-size:10px;font-weight:750}
-.sl-price-row.sl-active .sl-price-label{color:var(--sl-accent)}
+.sl-price-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent-text);font-size:10px;font-weight:750}
+.sl-price-row.sl-active .sl-price-label{color:var(--sl-accent-text)}
 .sl-dot{width:9px;height:9px;border-radius:50%;flex:none}
 .sl-price-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
 .sl-price-left{font-size:11px;color:var(--sl-muted);font-variant-numeric:tabular-nums}
@@ -2610,7 +2627,7 @@ var CSS = (
   box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent)}
 .sl-ticket-state{width:17px;height:17px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
   background:var(--sl-accent);color:var(--sl-accent-ink)}
-.sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent)}
+.sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent-text)}
 .sl-ticket-state svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
 .sl-chip-main{min-width:0;padding:8px 10px 8px 11px;display:flex;flex-direction:column;justify-content:center;gap:5px}
 .sl-chip-id{display:flex;gap:12px;min-width:0}
@@ -2653,7 +2670,7 @@ var CSS = (
 .sl-ga-qty span{min-width:16px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
 
 /* footer */
-.sl-foot{position:relative;z-index:2;padding:12px 16px 14px;border-top:1px solid var(--sl-line);flex:none;
+.sl-foot{position:relative;z-index:2;padding:10px 16px 8px;border-top:1px solid var(--sl-line);flex:none;
   background:var(--sl-bg);box-shadow:0 -10px 24px -22px rgba(0,0,0,.72)}
 .sl-hold-note{display:none;align-items:center;gap:7px;margin-bottom:8px;padding:7px 8px;border-radius:var(--sl-r-sm);
   border:1px solid var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
@@ -2667,14 +2684,13 @@ var CSS = (
 .sl-hold-note>span{flex:1;min-width:0}
 .sl-hold-change{flex:none;min-height:30px;padding:5px 8px;border-radius:8px;border:1px solid var(--sl-line);
   color:var(--sl-text);font-size:10.5px;font-weight:750;white-space:nowrap}
-.sl-hold-change:hover,.sl-hold-change:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-hold-change:hover,.sl-hold-change:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent-text)}
 .sl-hold-change:disabled{opacity:.58;cursor:wait}
 .sl-total{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px}
 .sl-total b{font-size:17px;font-variant-numeric:tabular-nums}
 .sl-value-pop{animation:slValuePop .32s cubic-bezier(.2,.8,.2,1)}
-/* Primary checkout CTA. Scoped under .sl-picker so it OUTWEIGHS the
-   '.sl-picker button' reset (0,1,1) \u2014 an unscoped '.sl-cta' (0,1,0) loses to it
-   and the button renders as plain text with no accent fill. */
+/* Primary checkout CTA. The extra root scope documents that this is widget
+   chrome and keeps the contract resilient when embedded beside host styles. */
 .sl-picker .sl-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
   padding:12px 16px;border-radius:var(--sl-r-sm);font-weight:800;font-size:14px;line-height:1.1;
   background:var(--sl-accent);color:var(--sl-accent-ink);
@@ -2685,8 +2701,8 @@ var CSS = (
 .sl-cta-spin,.sl-ba-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
   animation:slspin .7s linear infinite;flex:none}
 /* Disabled ("Select seats"): quieter, but still a full-width button shape. */
-.sl-picker .sl-cta:disabled{background:var(--sl-surface);color:var(--sl-muted);opacity:1;
-  cursor:not-allowed;filter:none;transform:none}
+.sl-picker .sl-cta:disabled{background:color-mix(in srgb,var(--sl-bg) 35%,var(--sl-surface));color:var(--sl-muted);
+  box-shadow:inset 0 0 0 1px var(--sl-line);opacity:1;cursor:not-allowed;filter:none;transform:none}
 
 /* Chrome anchor regions (Feature 6) \u2014 every interactive map overlay is APPENDED
    INTO one of these positioned flex containers and flows/stacks within it, so no
@@ -2716,7 +2732,7 @@ var CSS = (
    in the same region, so no displacement hack is needed. */
 .sl-testbadge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:7px;pointer-events:none;
   font-size:10px;font-weight:850;letter-spacing:.13em;line-height:1.2;text-transform:uppercase;white-space:nowrap;
-  color:var(--sl-warn);background:color-mix(in srgb,var(--sl-warn) 13%,var(--sl-surface));
+  color:var(--sl-warn-text);background:color-mix(in srgb,var(--sl-warn) 13%,var(--sl-surface));
   border:1px dashed color-mix(in srgb,var(--sl-warn) 55%,transparent)}
 
 /* zoom column (flows within the bottom-right region) */
@@ -2783,7 +2799,7 @@ var CSS = (
 .sl-extend-btn{flex:none;padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;
   background:var(--sl-accent);color:var(--sl-accent-ink);transition:filter .15s,opacity .15s}
 .sl-extend-btn:hover{filter:brightness(1.08)}
-.sl-extend-btn:disabled{opacity:.5;cursor:not-allowed}
+.sl-extend-btn:disabled{opacity:.62;cursor:not-allowed}
 
 /* booked confirmation overlay (covers the widget once the held seats are sold) */
 .sl-booked{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;
@@ -2810,7 +2826,7 @@ var CSS = (
   justify-content:center;text-align:center;gap:8px;padding:24px;
   background:color-mix(in srgb,var(--sl-bg) 82%,transparent);backdrop-filter:blur(4px)}
 .sl-soldout.on{display:flex}
-.sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent);font-weight:800}
+.sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent-text);font-weight:800}
 .sl-soldout-title{font-size:32px;font-weight:800;color:var(--sl-text);line-height:1.05}
 .sl-soldout-copy{max-width:360px;font-size:13px;color:var(--sl-muted);line-height:1.5}
 
@@ -2826,9 +2842,9 @@ var CSS = (
 /* "Powered by SeatLayer" attribution badge (side-panel foot) \u2014 the canonical
    Layered Rows mark + wordmark. Hidden when the host opts out or the org's paid
    theme sets hideBadge. */
-.sl-powered{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
-  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sl-text);opacity:.72;
-  text-decoration:none;padding:6px 10px;border-radius:999px;width:fit-content;margin-inline:auto;
+.sl-powered{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:2px;
+  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--sl-text);opacity:.72;
+  text-decoration:none;padding:2px 8px;border-radius:999px;width:fit-content;margin-inline:auto;
   transition:opacity .15s ease,background-color .15s ease}
 .sl-powered:hover{opacity:1;background:color-mix(in srgb,var(--sl-text) 8%,transparent)}
 .sl-powered:focus-visible{opacity:1;outline:2px solid var(--sl-accent);outline-offset:2px}
@@ -2866,10 +2882,22 @@ var CSS = (
 .sl-confirm-field:first-child .sl-confirm-value{font-size:13.5px;line-height:1.25;white-space:normal;
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .sl-confirm-cat{display:flex;align-items:center;gap:8px;padding:10px 12px;background:color-mix(in srgb,var(--sl-cat) 76%,var(--sl-surface))}
-.sl-confirm-cat .sl-dot{border:2px solid rgba(255,255,255,.78);width:11px;height:11px}
-.sl-confirm-cat-name{font-size:13.5px;font-weight:800;color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.sl-confirm-price{font-size:17px;font-weight:850;color:#fff;font-variant-numeric:tabular-nums}
+.sl-confirm-cat .sl-dot{border:2px solid color-mix(in srgb,var(--sl-cat-ink) 78%,transparent);width:11px;height:11px}
+.sl-confirm-cat-name{font-size:13.5px;font-weight:800;color:var(--sl-cat-ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-confirm-price{font-size:17px;font-weight:850;color:var(--sl-cat-ink);font-variant-numeric:tabular-nums}
 .sl-confirm-body{padding:11px 12px 12px}
+.sl-confirm-tiers{display:grid;gap:6px;margin:0 0 9px;padding:0;border:0}
+.sl-confirm-tiers legend{margin:0 0 6px;padding:0;color:var(--sl-muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
+.sl-confirm-tier{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--sl-line);
+  border-radius:9px;color:var(--sl-text);background:color-mix(in srgb,var(--sl-bg) 72%,var(--sl-surface));text-align:left}
+.sl-confirm-tier:hover{border-color:color-mix(in srgb,var(--sl-accent) 58%,var(--sl-line))}
+.sl-confirm-tier[aria-pressed="true"]{border-color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 13%,var(--sl-surface));
+  box-shadow:inset 3px 0 0 var(--sl-accent)}
+.sl-confirm-tier-copy{min-width:0;flex:1;display:grid;gap:2px}
+.sl-confirm-tier-name{min-width:0;font-size:12.5px;font-weight:800}
+.sl-confirm-tier-note,.sl-tier-note{color:var(--sl-muted);font-size:10.5px;line-height:1.3}
+.sl-confirm-tier[aria-pressed="true"] .sl-confirm-tier-note{color:var(--sl-text)}
+.sl-confirm-tier-price{font-size:13px;font-weight:850;font-variant-numeric:tabular-nums}
 .sl-confirm-row{display:flex;gap:8px;margin-top:10px}
 .sl-confirm-row button{flex:1;min-height:44px;padding:9px 12px;border-radius:9px;font-weight:800;font-size:13px}
 .sl-confirm-add{background:var(--sl-accent)!important;color:var(--sl-accent-ink)!important;display:flex;align-items:center;justify-content:center;gap:7px}
@@ -2887,6 +2915,7 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-confirm-cat-name{font-size:12.5px}
 .sl-picker[data-layout="narrow"] .sl-confirm-price{font-size:15px}
 .sl-picker[data-layout="narrow"] .sl-confirm-body{padding:9px 10px 10px}
+.sl-picker[data-layout="narrow"] .sl-confirm-tier{min-height:38px;padding:7px 9px}
 .sl-picker[data-layout="narrow"] .sl-confirm-thumbwrap{height:62px;margin-bottom:6px}
 .sl-picker[data-layout="narrow"] .sl-confirm-3d{margin-top:7px;padding:6px}
 .sl-picker[data-layout="narrow"] .sl-confirm-row{margin-top:8px}
@@ -2910,7 +2939,7 @@ var CSS = (
 .sl-table-stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border:1px solid var(--sl-line);
   border-radius:12px;overflow:hidden;background:var(--sl-bg)}
 .sl-table-stepper button{height:48px;font-size:24px;font-weight:700;background:color-mix(in srgb,var(--sl-line) 34%,transparent)!important}
-.sl-table-stepper button:disabled{opacity:.38;cursor:not-allowed}
+.sl-table-stepper button:disabled{opacity:.58;cursor:not-allowed}
 .sl-table-stepper output{text-align:center;font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}
 .sl-table-range{margin-top:7px;color:var(--sl-muted);font-size:11px;text-align:center}
 .sl-table-actions{display:flex;gap:9px;margin-top:17px}.sl-table-actions button{flex:1;min-height:46px;border-radius:10px;font-weight:800}
@@ -2952,14 +2981,14 @@ var CSS = (
 .sl-ba::after{content:'\u2726';position:absolute;right:10px;top:3px;color:color-mix(in srgb,var(--sl-accent) 20%,transparent);font-size:42px;line-height:1}
 .sl-ba-title,.sl-ba-copy,.sl-ba select,.sl-ba-qty,.sl-ba-go{position:relative;z-index:1}
 .sl-ba-title{grid-column:1/-1;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:850}
-.sl-ba-title .spark{color:var(--sl-accent);font-size:16px}
+.sl-ba-title .spark{color:var(--sl-accent-text);font-size:16px}
 .sl-ba-copy{grid-column:1/-1;margin:-4px 0 2px 23px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
 .sl-ba-copy .narrow{display:none}
 /* "\u2605 Best seats" premium quick-pick \u2014 gold accent echoing the \u2605 Premium pill on
    the confirm popover; deliberately distinct from the accent-toned qty/go. */
 .sl-ba-premium{position:relative;z-index:1;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;
   padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;
-  color:var(--sl-premium-deep);background:color-mix(in srgb,var(--sl-premium) 10%,var(--sl-surface));
+  color:var(--sl-premium-text);background:color-mix(in srgb,var(--sl-premium) 10%,var(--sl-surface));
   border:1px solid color-mix(in srgb,var(--sl-premium) 34%,var(--sl-line));transition:filter .15s,background .15s,color .15s}
 .sl-ba-premium .star{font-size:12px;line-height:1;color:var(--sl-premium)}
 .sl-ba-premium:hover{filter:brightness(1.05)}
@@ -3012,7 +3041,7 @@ var CSS = (
    back out of a reopened card. */
 .sl-ba-reopen{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;margin-top:2px;
   border:1px dashed color-mix(in srgb,var(--sl-accent) 40%,var(--sl-line));border-radius:999px;
-  color:var(--sl-accent);font-size:11.5px;font-weight:750;transition:border-color .15s,background .15s}
+  color:var(--sl-accent-text);font-size:11.5px;font-weight:750;transition:border-color .15s,background .15s}
 .sl-ba-reopen:hover,.sl-ba-reopen:focus-visible{background:color-mix(in srgb,var(--sl-accent) 8%,transparent)}
 .sl-ba-back{grid-column:1/-1;justify-self:start;min-height:30px;padding:3px 0;color:var(--sl-muted);
   font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px;transition:color .15s}
@@ -3134,7 +3163,7 @@ var CSS = (
   border:1px solid rgba(150,165,205,.35);backdrop-filter:blur(6px);cursor:pointer}
 .sl-view3d-nav button:hover,.sl-view3d-nav button:focus-visible{color:#eef1f8;border-color:rgba(190,205,240,.6)}
 .sl-view3d-nav button[aria-pressed="true"]{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
-.sl-view3d-nav button:disabled{opacity:.45;cursor:not-allowed}
+.sl-view3d-nav button:disabled{opacity:.6;cursor:not-allowed}
 .sl-view3d-nav-toggle{display:none!important}
 .sl-view3d-nav select{min-height:38px;max-width:100%;padding:7px 34px 7px 12px;
   border-radius:999px;font:700 11.5px/1 inherit;color:#eef1f8;background:rgba(12,18,32,.86);
@@ -3182,7 +3211,7 @@ var CSS = (
 .sl-confirm-confidence strong,.sl-confirm-confidence small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sl-confirm-confidence strong{font-size:11px}.sl-confirm-confidence small{margin-top:2px;color:var(--sl-muted);font-size:9.5px}
 .sl-confirm-confidence em{display:none;font-style:normal}
-.sl-confirm-confidence>b{flex:none;font-size:11px;color:var(--sl-accent)}
+.sl-confirm-confidence>b{flex:none;font-size:11px;color:var(--sl-accent-text)}
 .sl-confirm-confidence:hover,.sl-confirm-confidence:focus-visible{border-color:var(--sl-accent)}
 /* The production 3D decision dock is deliberately denser than the 2D popup:
    the venue remains the main content and the two inspection actions share one
@@ -3264,7 +3293,7 @@ var CSS = (
 .sl-view3d-compare-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
 .sl-view3d-compare-actions button{min-height:44px;border-radius:9px;border:1px solid var(--sl-line);font-size:12px;font-weight:800}
 .sl-view3d-compare-actions .select{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
-.sl-view3d-compare-actions button:disabled{opacity:.5;cursor:not-allowed}
+.sl-view3d-compare-actions button:disabled{opacity:.62;cursor:not-allowed}
 .sl-view3d-passport-shell{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
 .sl-view3d-passport-scrim{position:absolute;inset:0;background:rgba(3,6,12,.8);backdrop-filter:blur(6px)}
 .sl-view3d-passport{position:relative;width:min(540px,100%);max-height:min(700px,calc(100% - 20px));overflow:auto;
@@ -3305,14 +3334,17 @@ var CSS = (
 .sl-confirm-3d:hover,.sl-confirm-3d:focus-visible{border-color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 20%,transparent)}
 .sl-confirm-3d svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
-/* multi-floor switcher (flows within the left-rail region) */
-.sl-floors{display:none;flex-direction:column;gap:6px;max-width:100%}
+/* One compact multi-floor selector (flows within the left-rail region). */
+.sl-floors{display:none;align-items:center;gap:6px;max-width:min(260px,100%);padding:5px;border-radius:999px;
+  background:color-mix(in srgb,var(--sl-surface) 92%,transparent);border:1px solid var(--sl-line);
+  box-shadow:var(--sl-shadow);backdrop-filter:blur(8px)}
 .sl-floors.on{display:flex}
-.sl-floors button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;background:var(--sl-surface);
-  border:1px solid var(--sl-line);color:var(--sl-muted);white-space:nowrap;max-width:100%;overflow:hidden;
-  text-overflow:ellipsis;transition:color .15s,border-color .15s}
-.sl-floors button:hover{color:var(--sl-text)}
-.sl-floors button.on{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
+.sl-floors select{min-width:0;max-width:210px;min-height:34px;padding:6px 30px 6px 10px;border:0;border-radius:999px;
+  font:700 12px/1 inherit;color:var(--sl-text);background:var(--sl-surface);cursor:pointer}
+.sl-floors select:focus-visible,.sl-floor-info:focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}
+.sl-floor-info{display:inline-grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:999px;
+  border:1px solid var(--sl-line);color:var(--sl-muted);background:transparent;font:800 13px/1 inherit;cursor:help}
+.sl-floor-info:hover{color:var(--sl-text);border-color:var(--sl-accent)}
 
 /* tapped-section summary card \u2014 docks INSIDE the top-center anchor region on
    wide (flows below the rung pills, never over them, never floating over the
@@ -3347,8 +3379,14 @@ var CSS = (
 .sl-seccard-mix-dot{width:8px;height:8px;border-radius:50%;flex:none}
 .sl-seccard-mix-price{font-weight:700;color:var(--sl-text)}
 .sl-seccard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
-.sl-seccard-overview{font-size:12px;font-weight:800;color:var(--sl-accent)}
+.sl-seccard-overview{font-size:12px;font-weight:800;color:var(--sl-accent-text)}
 .sl-seccard-hint{font-size:10.5px;color:var(--sl-muted)}
+.sl-seccard-nav{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
+.sl-seccard-nav button{width:28px;height:28px;border:1px solid var(--sl-line);border-radius:999px;color:var(--sl-text);
+  background:color-mix(in srgb,var(--sl-surface) 88%,var(--sl-bg));font-size:14px;font-weight:850;line-height:1}
+.sl-seccard-nav button:hover,.sl-seccard-nav button:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent-text)}
+.sl-seccard.mini .sl-seccard-nav,.sl-seccard.strip .sl-seccard-nav{margin-left:2px}
+.sl-seccard.mini .sl-seccard-nav button,.sl-seccard.strip .sl-seccard-nav button{width:24px;height:24px;font-size:12px}
 
 /* view-from-seat button on the confirm popover */
 /* Eager sightline preview inside the confirm card */
@@ -3401,10 +3439,29 @@ var CSS = (
   white-space:nowrap;pointer-events:none;max-width:90%;overflow:hidden;text-overflow:ellipsis}
 
 /* F3 minimap \u2014 venue overview + live viewport rect (flows in the bottom-left region) */
-.sl-minimap{border:1px solid var(--sl-line);border-radius:9px;
-  overflow:hidden;background:var(--sl-surface);box-shadow:0 12px 34px -14px rgba(0,0,0,.55);line-height:0;cursor:pointer}
+.sl-minimap{border:1px solid var(--sl-line);border-radius:9px;overflow:hidden;background:var(--sl-surface);
+  box-shadow:0 12px 34px -14px rgba(0,0,0,.55);line-height:0;touch-action:none}
+.sl-minimap-bar{min-height:24px;padding:3px 5px 3px 8px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--sl-line);
+  color:var(--sl-muted);font-size:9px;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
+.sl-minimap-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-minimap-key{display:inline-flex;align-items:center;gap:3px;flex:none}
+.sl-minimap-key i{width:6px;height:6px;border-radius:999px;background:var(--sl-success)}
+.sl-minimap-key i.selected{background:var(--sl-accent)}
+.sl-minimap-key i.inactive{background:var(--sl-muted);opacity:.45}
+.sl-minimap-key i.focused{background:transparent;border:1.5px solid var(--sl-accent);width:7px;height:7px}
+.sl-minimap-close{display:none;width:24px;height:24px;border-radius:6px;color:var(--sl-muted);font-size:15px;line-height:1}
 .sl-minimap canvas{display:block}
+.sl-minimap canvas:focus-visible{outline:2px solid var(--sl-accent);outline-offset:-3px}
+.sl-minimap canvas.sl-dragging{cursor:grabbing}
+.sl-minimap-toggle{display:none;width:42px;height:42px;border:1px solid var(--sl-line);border-radius:10px;background:var(--sl-surface);
+  color:var(--sl-text);box-shadow:0 10px 28px -14px rgba(0,0,0,.65);align-items:center;justify-content:center}
+.sl-minimap-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
 .sl-picker[data-layout="narrow"] .sl-minimap{display:none}
+.sl-picker[data-layout="narrow"] .sl-minimap-toggle{display:flex}
+.sl-picker[data-layout="narrow"][data-minimap-open="true"] .sl-minimap{display:block}
+.sl-picker[data-layout="narrow"][data-minimap-open="true"] .sl-minimap-toggle{display:none}
+.sl-picker[data-layout="narrow"] .sl-minimap canvas{width:min(168px,42vw)!important;height:auto!important}
+.sl-picker[data-layout="narrow"] .sl-minimap-close{display:grid;place-items:center}
 
 /* F4 legend reflection: rows + counts for out-of-band categories read muted */
 /* Out-of-band rows are exactly the rows a buyer reads while deciding whether
@@ -3482,17 +3539,88 @@ function formatWhen(startsAt, timezone, locale) {
   }
   return at.toLocaleString(locale, options);
 }
-function resolveTokens(chart, host) {
+function parseThemeColor(value) {
+  if (!value) return null;
+  const color = value.trim().toLowerCase();
+  if (color === "white") return { r: 255, g: 255, b: 255 };
+  if (color === "black") return { r: 0, g: 0, b: 0 };
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color)?.[1];
+  if (hex) {
+    const expanded = hex.length <= 4 ? [...hex].map((digit) => `${digit}${digit}`).join("") : hex;
+    return {
+      r: Number.parseInt(expanded.slice(0, 2), 16),
+      g: Number.parseInt(expanded.slice(2, 4), 16),
+      b: Number.parseInt(expanded.slice(4, 6), 16)
+    };
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i.exec(color);
+  if (!rgb) return null;
+  return {
+    r: Math.max(0, Math.min(255, Number(rgb[1]))),
+    g: Math.max(0, Math.min(255, Number(rgb[2]))),
+    b: Math.max(0, Math.min(255, Number(rgb[3])))
+  };
+}
+function relativeLuminance(color) {
+  const channel = (value) => {
+    const normalized = value / 255;
+    return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}
+function themeContrast(foreground, background) {
+  const fg = parseThemeColor(foreground);
+  const bg = parseThemeColor(background);
+  if (!fg || !bg) return null;
+  const lighter = Math.max(relativeLuminance(fg), relativeLuminance(bg));
+  const darker = Math.min(relativeLuminance(fg), relativeLuminance(bg));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function highestContrastInk(background, dark = "#172033", light = "#eef1f8") {
+  return (themeContrast(dark, background) ?? 0) >= (themeContrast(light, background) ?? 0) ? dark : light;
+}
+function rgbHex(color) {
+  const channel = (value) => Math.round(value).toString(16).padStart(2, "0");
+  return `#${channel(color.r)}${channel(color.g)}${channel(color.b)}`;
+}
+function mixThemeColors(first, second, firstWeight) {
+  const a = parseThemeColor(first);
+  const b = parseThemeColor(second);
+  if (!a || !b) return null;
+  const weight = Math.max(0, Math.min(1, firstWeight));
+  return rgbHex({
+    r: a.r * weight + b.r * (1 - weight),
+    g: a.g * weight + b.g * (1 - weight),
+    b: a.b * weight + b.b * (1 - weight)
+  });
+}
+function readableAccentText(accent, text, background, surface) {
+  if ((themeContrast(accent, background) ?? 4.5) >= 4.5 && (themeContrast(accent, surface) ?? 4.5) >= 4.5) return accent;
+  if (!parseThemeColor(accent) || !parseThemeColor(text)) return text;
+  for (let textWeight = 0.15; textWeight <= 1; textWeight += 0.05) {
+    const candidate = mixThemeColors(accent, text, 1 - textWeight);
+    if (candidate && (themeContrast(candidate, background) ?? 0) >= 4.5 && (themeContrast(candidate, surface) ?? 0) >= 4.5) return candidate;
+  }
+  return text;
+}
+function resolvePickerTokens(chart, host) {
+  const background = host?.background ?? chart?.background ?? "#0f1522";
+  const isLight = parseThemeColor(background) ? highestContrastInk(background) === "#172033" : false;
+  const surface = host?.surface ?? (isLight ? "#ffffff" : "#1a2234");
   const accent = host?.accent ?? chart?.accent ?? "#f4b740";
-  const accentInk = host?.accentInk ?? chart?.accentInk ?? "#1a1200";
+  const chartAccentInk = chart?.accentInk;
+  const accentInk = host?.accentInk ?? (chartAccentInk && (themeContrast(chartAccentInk, accent) ?? 4.5) >= 4.5 ? chartAccentInk : highestContrastInk(accent, "#1a1200", "#ffffff"));
+  const chartText = chart?.textColor;
+  const text = host?.text ?? (chartText && (themeContrast(chartText, background) ?? 4.5) >= 4.5 && (themeContrast(chartText, surface) ?? 4.5) >= 4.5 ? chartText : highestContrastInk(background));
   return {
     "--sl-accent": accent,
     "--sl-accent-ink": accentInk,
-    "--sl-bg": host?.background ?? chart?.background ?? "#0f1522",
-    "--sl-surface": host?.surface ?? "#1a2234",
-    "--sl-text": host?.text ?? chart?.textColor ?? "#eef1f8",
-    "--sl-muted": host?.muted ?? "#8b93a7",
-    "--sl-line": host?.line ?? "rgba(139,147,167,.22)",
+    "--sl-accent-text": readableAccentText(accent, text, background, surface),
+    "--sl-bg": background,
+    "--sl-surface": surface,
+    "--sl-text": text,
+    "--sl-muted": host?.muted ?? (isLight ? "#667085" : "#a5aec2"),
+    "--sl-line": host?.line ?? (isLight ? "rgba(23,32,51,.16)" : "rgba(165,174,194,.24)"),
     "--sl-font": host?.fontFamily ?? chart?.fontFamily ?? "-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif",
     "--sl-radius": `${host?.radius ?? 14}px`
   };
@@ -3624,7 +3752,13 @@ var SeatPicker = class _SeatPicker {
     // F3 minimap
     this.miniCanvas = null;
     this.miniBase = null;
+    this.miniWrap = null;
+    this.miniToggle = null;
+    this.miniLabel = null;
     this.miniTf = null;
+    this.miniDrag = null;
+    this.miniSuppressClick = false;
+    this.pickerLayoutSize = { width: 0, height: 0 };
     // F4 price-band filter — active band's category keys (null = all prices)
     this.priceBandKeys = null;
     this.focusedCatKey = null;
@@ -3725,6 +3859,7 @@ var SeatPicker = class _SeatPicker {
       mapTheme: options.theme?.map ?? null,
       onSelectionChange: () => {
         this.syncTray();
+        this.refreshMinimap();
         if (this.committedSelection().length) this.collapseSectionCard();
         this.syncSelectionTo3d();
       },
@@ -3784,6 +3919,12 @@ var SeatPicker = class _SeatPicker {
       },
       // Tapped-section glide-in → surface (or clear) the section-summary card.
       onSectionFocus: (summary) => this.showSectionCard(summary),
+      onDeckTap: () => {
+        this.showSectionCard(null);
+        this.syncFloors();
+        this.syncRung();
+        this.refreshMinimap();
+      },
       onFocusSeat: (seat) => this.announceSeat(seat),
       onSeatHover: (d) => this.updateTooltip(d),
       onHint: (m) => {
@@ -4001,7 +4142,7 @@ var SeatPicker = class _SeatPicker {
       window.removeEventListener("keydown", this.fsEscHandler);
       this.fsEscHandler = null;
     }
-    requestAnimationFrame(() => this.controller.zoomToFit());
+    requestAnimationFrame(() => this.controller.refitCurrentView());
   }
   setFsFallback(on) {
     if (this.fsFallback === on) return;
@@ -4017,7 +4158,7 @@ var SeatPicker = class _SeatPicker {
       window.removeEventListener("keydown", this.fsEscHandler);
       this.fsEscHandler = null;
     }
-    requestAnimationFrame(() => this.controller.zoomToFit());
+    requestAnimationFrame(() => this.controller.refitCurrentView());
   }
   /**
    * Close the picker. In modal mode (SeatPicker.open()) this dismisses the
@@ -4157,11 +4298,17 @@ var SeatPicker = class _SeatPicker {
   }
   async render() {
     if (this.rendered) return this;
+    const renderStartedAt = performance.now();
+    const renderProfile = {};
+    const duration = (startedAt) => Math.round((performance.now() - startedAt) * 100) / 100;
     this.rendered = true;
     ensureStyle();
+    const localeStartedAt = performance.now();
     await loadLocale2(this.opts.locale);
+    renderProfile.loadLocale = duration(localeStartedAt);
     if (this.opts.messages) setStringOverrides2(this.opts.messages);
     if (this.checkoutMode === "hosted") this.paymentOptions = this.pubApi.paymentOptions(this.opts.event);
+    const shellStartedAt = performance.now();
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
@@ -4185,7 +4332,7 @@ var SeatPicker = class _SeatPicker {
         this.syncTray();
       }
     });
-    Object.entries(resolveTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
+    Object.entries(resolvePickerTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     root.innerHTML = `
       <div class="sl-head">
         <div class="sl-logo" data-ref="logo"></div>
@@ -4264,14 +4411,20 @@ var SeatPicker = class _SeatPicker {
     const applyLayout = () => {
       const w = root.clientWidth;
       if (w <= 0) return;
+      const h = root.clientHeight;
+      const sizeChanged = w !== this.pickerLayoutSize.width || h !== this.pickerLayoutSize.height;
+      this.pickerLayoutSize = { width: w, height: h };
       this.reportFramedHeight();
       const next = w < 640 ? "narrow" : "wide";
-      const density = root.clientHeight < 560 ? "compact" : "comfortable";
-      if (root.dataset.layout === next && root.dataset.density === density) return;
-      root.dataset.layout = next;
-      root.dataset.density = density;
-      if (next === "narrow" && !root.dataset.sheet) root.dataset.sheet = "peek";
-      this.dockLayoutChrome();
+      const density = h < 560 ? "compact" : "comfortable";
+      const layoutChanged = root.dataset.layout !== next || root.dataset.density !== density;
+      if (layoutChanged) {
+        root.dataset.layout = next;
+        root.dataset.density = density;
+        if (next === "narrow" && !root.dataset.sheet) root.dataset.sheet = "peek";
+        this.dockLayoutChrome();
+      }
+      if (sizeChanged && this.miniBase) this.refreshMinimap();
     };
     this.ro = new ResizeObserver(applyLayout);
     this.ro.observe(root);
@@ -4284,7 +4437,7 @@ var SeatPicker = class _SeatPicker {
     this.fsChangeHandler = () => {
       if (!document.fullscreenElement) this.setFsFallback(false);
       this.syncFullscreenButtons();
-      requestAnimationFrame(() => this.controller.zoomToFit());
+      requestAnimationFrame(() => this.controller.refitCurrentView());
     };
     document.addEventListener("fullscreenchange", this.fsChangeHandler);
     const head = this.els.sheetHead;
@@ -4386,7 +4539,10 @@ var SeatPicker = class _SeatPicker {
     const canvasHost = document.createElement("div");
     canvasHost.style.cssText = "position:absolute;inset:0";
     this.mapHost.appendChild(canvasHost);
+    renderProfile.mountBuyerShell = duration(shellStartedAt);
+    const chartStartedAt = performance.now();
     const info = await this.controller.render(canvasHost);
+    renderProfile.loadChartAndStatuses = duration(chartStartedAt);
     if (this.destroyed) return this;
     if (!info) {
       this.els.boot.innerHTML = `<div class="sl-boot-title">${this.tf("picker.mapDidNotLoad", "The seat map didn\u2019t load")}</div><div>${this.tf("picker.checkConnection", "Check your connection and try again.")}</div><button type="button" class="sl-boot-retry">${this.tf("picker.accessRetry", "Try again")}</button>`;
@@ -4398,7 +4554,9 @@ var SeatPicker = class _SeatPicker {
       });
       return this;
     }
+    Object.assign(renderProfile, info.performanceProfile);
     this.els.boot.remove();
+    const controlsStartedAt = performance.now();
     this.startRealtime();
     this.salesClosed = !!info.salesClosed || !!this.opts.readOnly;
     root.dataset.eventMode = info.mode === "test" ? "test" : "live";
@@ -4414,7 +4572,7 @@ var SeatPicker = class _SeatPicker {
       this.regions["top-left"].appendChild(badge);
     }
     const chartTheme = this.controller.doc?.theme;
-    Object.entries(resolveTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
+    Object.entries(resolvePickerTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     this.currency = info.currency ?? this.opts.currency ?? "USD";
     this.eventTimezone = info.timezone ?? null;
     const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl ?? info.posterUrl ?? null;
@@ -4522,12 +4680,34 @@ var SeatPicker = class _SeatPicker {
     this.buildPanelToggle();
     if (this.opts.panelCollapsed) this.setPanelCollapsed(true);
     this.dockLayoutChrome();
+    renderProfile.buildBuyerControls = duration(controlsStartedAt);
+    const holdStartedAt = performance.now();
     await this.restoreRememberedHold();
+    renderProfile.restoreHold = duration(holdStartedAt);
     if (this.destroyed) return this;
     if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
     this.resumeHostedOrder();
+    const doc = this.controller.doc;
+    this.emitAnalytics("chart_rendered", {
+      renderingTimeMillis: duration(renderStartedAt),
+      performanceProfile: renderProfile,
+      seatCount: this.allSeats().length,
+      objectCount: doc?.objects.length ?? 0,
+      sectionCount: doc?.objects.filter((object) => object.type === "section").length ?? 0,
+      view: this.buyerView,
+      // Dimensions a host needs to read the timings above as anything other
+      // than one undifferentiated number: WHICH chart, HOW big, WHICH data
+      // path, and whether the browser had already warmed for this chart.
+      // The event key is the chart's identity here — an event owns exactly one
+      // chart — and the name is the same string already drawn in the header.
+      eventKey: this.opts.event,
+      chartName: doc?.name,
+      floorCount: this.controller.getFloors().length,
+      transport: this.opts.transport ? "custom" : "pubapi",
+      load: markChartLoaded(this.opts.event) ? "repeat" : "cold"
+    });
     return this;
   }
   /**
@@ -4589,7 +4769,8 @@ var SeatPicker = class _SeatPicker {
     const collapsed = this.sideCollapsed;
     btn.setAttribute("aria-expanded", String(!collapsed));
     btn.setAttribute("aria-label", collapsed ? this.tf("picker.showTicketPanel", "Show the ticket panel") : this.tf("picker.hideTicketPanel", "Hide the ticket panel"));
-    btn.innerHTML = collapsed ? `<svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg><span>${this.tf("picker.tickets", "Tickets")}</span>` : `<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg><span>${this.tf("picker.hidePanel", "Hide panel")}</span>`;
+    btn.title = collapsed ? this.tf("picker.showTicketPanel", "Show the ticket panel") : this.tf("picker.hideTicketPanel", "Hide the ticket panel");
+    btn.innerHTML = collapsed ? `<svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg><span>${this.tf("picker.tickets", "Tickets")}</span>` : `<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>`;
   }
   /**
    * Collapse or reopen the wide-layout ticket panel in place (host-drivable —
@@ -4602,7 +4783,7 @@ var SeatPicker = class _SeatPicker {
     if (this.destroyed) return;
     this.sideCollapsed = collapsed;
     this.applyPanelCollapsed();
-    this.scheduleMotion(() => this.controller.zoomToFit(), 340);
+    this.scheduleMotion(() => this.controller.refitCurrentView(), 340);
   }
   /** Idempotent DOM apply, also run on every layout flip (inert must lift on narrow). */
   applyPanelCollapsed() {
@@ -4997,10 +5178,77 @@ var SeatPicker = class _SeatPicker {
   buildMinimap() {
     const vp = this.controller.getViewport();
     if (!vp || !this.els.map) return;
-    const b = vp.bounds;
-    if (!(b.width > 0 && b.height > 0)) return;
-    const MAXW = 158;
-    const MAXH = 118;
+    const host = this.regions["bottom-left"] ?? this.els.map;
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "sl-minimap-toggle";
+    toggle.setAttribute("aria-label", this.tf("picker.openVenueMap", "Open venue overview map"));
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6l5-2 8 3 5-2v13l-5 2-8-3-5 2zM8 4v13M16 7v13"/></svg>';
+    host.appendChild(toggle);
+    this.miniToggle = toggle;
+    const wrap = document.createElement("div");
+    wrap.className = "sl-minimap";
+    wrap.setAttribute("role", "group");
+    const bar = document.createElement("div");
+    bar.className = "sl-minimap-bar";
+    const label = document.createElement("span");
+    label.className = "sl-minimap-label";
+    const key = document.createElement("span");
+    key.className = "sl-minimap-key";
+    key.setAttribute("aria-label", this.tf("picker.minimapStateKey", "Focused, selected, available, and inactive sections"));
+    key.innerHTML = '<i class="focused" title="Focused"></i><i class="selected" title="Selected"></i><i title="Available"></i><i class="inactive" title="Inactive"></i>';
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "sl-minimap-close";
+    close.setAttribute("aria-label", this.tf("picker.closeVenueMap", "Close venue overview map"));
+    close.textContent = "\xD7";
+    bar.append(label, key, close);
+    const canvas = document.createElement("canvas");
+    canvas.tabIndex = 0;
+    canvas.setAttribute("role", "application");
+    canvas.setAttribute("aria-label", this.tf("picker.venueMapInstructions", "Venue overview map. Drag the viewport, click a section, or use arrow keys to pan."));
+    wrap.append(bar, canvas);
+    host.appendChild(wrap);
+    this.miniWrap = wrap;
+    this.miniLabel = label;
+    this.miniCanvas = canvas;
+    const base = document.createElement("canvas");
+    this.miniBase = base;
+    toggle.addEventListener("click", () => this.setMinimapOpen(true));
+    close.addEventListener("click", () => this.setMinimapOpen(false));
+    canvas.addEventListener("click", (event) => {
+      if (this.miniSuppressClick) {
+        this.miniSuppressClick = false;
+        return;
+      }
+      this.minimapJump(event);
+    });
+    canvas.addEventListener("pointerdown", (event) => this.minimapPointerDown(event));
+    canvas.addEventListener("pointermove", (event) => this.minimapPointerMove(event));
+    canvas.addEventListener("pointerup", (event) => this.minimapPointerUp(event));
+    canvas.addEventListener("pointercancel", (event) => this.minimapPointerUp(event));
+    canvas.addEventListener("keydown", (event) => this.minimapKeydown(event));
+    this.layoutMinimap();
+    this.syncMinimapLabel();
+    this.drawMinimapStatic();
+    this.drawMinimapRect();
+  }
+  setMinimapOpen(open) {
+    this.root?.setAttribute("data-minimap-open", String(open));
+    this.miniToggle?.setAttribute("aria-expanded", String(open));
+    if (open) this.miniCanvas?.focus();
+    else this.miniToggle?.focus();
+  }
+  /** Re-fit the thumbnail whenever the active floor or complete overview
+   * changes bounds. This is presentation-only; the source chart is untouched. */
+  layoutMinimap() {
+    const canvas = this.miniCanvas;
+    const base = this.miniBase;
+    const b = this.controller.getViewport()?.bounds;
+    if (!canvas || !base || !b || !(b.width > 0 && b.height > 0)) return;
+    const MAXW = 196;
+    const MAXH = 146;
     const PAD = 6;
     const aspect = b.width / Math.max(1, b.height);
     let w = MAXW;
@@ -5012,32 +5260,40 @@ var SeatPicker = class _SeatPicker {
     w = Math.max(64, w);
     h = Math.max(48, h);
     const dpr = Math.min(2, window.devicePixelRatio || 1);
-    const wrap = document.createElement("div");
-    wrap.className = "sl-minimap";
-    wrap.setAttribute("aria-hidden", "true");
-    const canvas = document.createElement("canvas");
     canvas.width = Math.round(w * dpr);
     canvas.height = Math.round(h * dpr);
     canvas.style.width = `${w}px`;
     canvas.style.height = `${h}px`;
-    wrap.appendChild(canvas);
-    (this.regions["bottom-left"] ?? this.els.map).appendChild(wrap);
-    this.miniCanvas = canvas;
-    const scale = Math.min((w - PAD * 2) / Math.max(1, b.width), (h - PAD * 2) / Math.max(1, b.height)) * dpr;
-    const offX = (w * dpr - b.width * scale) / 2 - b.x * scale;
-    const offY = (h * dpr - b.height * scale) / 2 - b.y * scale;
-    this.miniTf = { scale, offX, offY, dpr };
-    const base = document.createElement("canvas");
     base.width = canvas.width;
     base.height = canvas.height;
-    this.miniBase = base;
-    wrap.addEventListener("click", (e) => this.minimapJump(e));
-    this.drawMinimapStatic();
-    this.drawMinimapRect();
+    this.miniTf = createMinimapTransform(b, canvas.width, canvas.height, dpr, PAD);
+  }
+  syncMinimapLabel() {
+    if (!this.miniLabel || !this.miniWrap) return;
+    const floors = this.controller.getFloors();
+    const floor = this.controller.isFloorOverview() ? this.tf("picker.allFloors", "All floors") : floors.find((candidate) => candidate.id === this.controller.getActiveFloorId())?.name ?? this.tf("picker.venueOverview", "Venue overview");
+    const sections = this.controller.getMinimapSnapshot().sections;
+    const focused = sections.find((section) => section.active);
+    const focusedLabel = focused?.label ?? this.lastSection?.label;
+    const label = focusedLabel ? `${floor} \xB7 ${focusedLabel}` : floor;
+    this.miniLabel.textContent = label;
+    const selected = sections.filter((section) => section.state === "selected").length;
+    const available = sections.filter((section) => section.state === "available").length;
+    const inactive = sections.filter((section) => section.state === "inactive").length;
+    this.miniWrap.setAttribute(
+      "aria-label",
+      sections.length ? `${label}. ${selected} selected, ${available} available, ${inactive} inactive sections.` : label
+    );
+    this.miniCanvas?.setAttribute(
+      "aria-label",
+      sections.length ? `${label}. ${selected} selected, ${available} available, ${inactive} inactive sections. ${this.tf("picker.venueMapInstructions", "The outlined region is the visible map area. Drag it, click a section, or use arrow keys to pan.")}` : `${label}. ${this.tf("picker.venueMapInstructions", "The outlined region is the visible map area. Drag it, click elsewhere, or use arrow keys to pan.")}`
+    );
   }
   /** Repaint the static overview + rect (floor switch, live open/close). */
   refreshMinimap() {
     if (!this.miniBase) return;
+    this.layoutMinimap();
+    this.syncMinimapLabel();
     this.drawMinimapStatic();
     this.drawMinimapRect();
   }
@@ -5045,8 +5301,7 @@ var SeatPicker = class _SeatPicker {
   drawMinimapStatic() {
     const base = this.miniBase;
     const tf = this.miniTf;
-    const doc = this.controller.doc;
-    if (!base || !tf || !doc) return;
+    if (!base || !tf) return;
     const ctx = base.getContext("2d");
     if (!ctx) return;
     ctx.clearRect(0, 0, base.width, base.height);
@@ -5055,34 +5310,42 @@ var SeatPicker = class _SeatPicker {
     const line = this.cssVar("--sl-line") || "rgba(139,147,167,.5)";
     const muted = this.cssVar("--sl-muted") || "#8b93a7";
     const accent = this.cssVar("--sl-accent") || "#6e7bff";
-    const zoneColor = new Map((doc.zones ?? []).map((z) => [z.id, z.color]));
-    let drewSection = false;
-    for (const o of this.activeFloorObjects()) {
-      if (o.type !== "section" || !o.outline || o.outline.length < 3) continue;
-      drewSection = true;
-      const closed = this.controller.isSectionClosed(o.id);
-      const fill = closed ? muted : o.color ?? (o.zone && zoneColor.get(o.zone)) ?? accent;
+    const available = this.cssVar("--sl-success") || "#22a06b";
+    const snapshot = this.controller.getMinimapSnapshot();
+    for (const section of snapshot.sections) {
+      if (section.outline.length < 3) continue;
       ctx.beginPath();
-      o.outline.forEach((p, i) => i === 0 ? ctx.moveTo(fx(p.x), fy(p.y)) : ctx.lineTo(fx(p.x), fy(p.y)));
+      section.outline.forEach((point, index) => index === 0 ? ctx.moveTo(fx(point.x), fy(point.y)) : ctx.lineTo(fx(point.x), fy(point.y)));
       ctx.closePath();
-      ctx.globalAlpha = closed ? 0.26 : 0.42;
-      ctx.fillStyle = fill;
+      ctx.globalAlpha = section.state === "inactive" ? 0.18 : section.state === "selected" ? 0.72 : 0.34;
+      ctx.fillStyle = section.state === "inactive" ? muted : section.state === "selected" ? accent : available;
       ctx.fill();
-      ctx.globalAlpha = 0.85;
+      ctx.globalAlpha = 0.82;
       ctx.lineWidth = Math.max(1, tf.dpr);
       ctx.strokeStyle = line;
       ctx.stroke();
+      if (section.active) {
+        ctx.globalAlpha = 1;
+        ctx.lineJoin = "round";
+        ctx.lineWidth = Math.max(4, tf.dpr * 3.5);
+        ctx.strokeStyle = this.cssVar("--sl-surface") || "#fff";
+        ctx.stroke();
+        ctx.lineWidth = Math.max(2, tf.dpr * 1.75);
+        ctx.strokeStyle = accent;
+        ctx.stroke();
+      }
     }
     ctx.globalAlpha = 1;
-    if (!drewSection) {
+    if (!snapshot.sections.length) {
       const r = Math.max(1, tf.dpr);
-      for (const seat of expandChart(doc)) {
-        const cat = doc.categories.find((c) => c.key === seat.categoryKey);
-        ctx.fillStyle = cat?.color ?? accent;
+      for (const seat of snapshot.seats) {
+        ctx.globalAlpha = seat.state === "inactive" ? 0.22 : 0.78;
+        ctx.fillStyle = seat.state === "inactive" ? muted : seat.state === "selected" ? accent : available;
         ctx.beginPath();
         ctx.arc(fx(seat.x), fy(seat.y), r, 0, Math.PI * 2);
         ctx.fill();
       }
+      ctx.globalAlpha = 1;
     }
   }
   /** Blit the base overview, then stroke the current viewport rectangle on top. */
@@ -5097,41 +5360,106 @@ var SeatPicker = class _SeatPicker {
     ctx.drawImage(base, 0, 0);
     const vp = this.controller.getViewport();
     if (!vp) return;
-    const v = vp.visible;
-    const x = v.x * tf.scale + tf.offX;
-    const y = v.y * tf.scale + tf.offY;
-    const w = v.width * tf.scale;
-    const h = v.height * tf.scale;
-    const accent = this.cssVar("--sl-accent") || "#f4b740";
+    const plan = minimapViewportPlan(vp.visible, tf, canvas.width, canvas.height, Math.max(2, tf.dpr * 2));
+    const ink = this.cssVar("--sl-text") || "#12151c";
+    const surface = this.cssVar("--sl-surface") || "#fff";
     ctx.save();
-    ctx.globalAlpha = 0.14;
-    ctx.fillStyle = accent;
-    ctx.fillRect(x, y, w, h);
+    ctx.globalAlpha = 0.1;
+    ctx.fillStyle = ink;
+    ctx.fillRect(plan.raw.x, plan.raw.y, plan.raw.width, plan.raw.height);
+    ctx.globalAlpha = 0.9;
+    ctx.lineJoin = "round";
+    ctx.lineWidth = Math.max(4, tf.dpr * 3.25);
+    ctx.strokeStyle = surface;
+    ctx.strokeRect(plan.raw.x, plan.raw.y, plan.raw.width, plan.raw.height);
     ctx.globalAlpha = 1;
-    ctx.lineWidth = Math.max(1.5, tf.dpr * 1.5);
-    ctx.strokeStyle = accent;
-    ctx.strokeRect(x, y, w, h);
+    ctx.lineWidth = Math.max(2, tf.dpr * 1.75);
+    ctx.strokeStyle = ink;
+    ctx.strokeRect(plan.raw.x, plan.raw.y, plan.raw.width, plan.raw.height);
+    if (plan.clipped && Object.values(plan.clippedEdges).some(Boolean)) {
+      ctx.setLineDash([Math.max(3, tf.dpr * 3), Math.max(2, tf.dpr * 2)]);
+      ctx.strokeRect(plan.clipped.x, plan.clipped.y, plan.clipped.width, plan.clipped.height);
+    }
     ctx.restore();
   }
-  /** Minimap click → focus the section under the point (or overview on a miss). */
-  minimapJump(e) {
+  minimapWorldPoint(event) {
     const canvas = this.miniCanvas;
     const tf = this.miniTf;
-    if (!canvas || !tf) return;
-    const r = canvas.getBoundingClientRect();
-    const px = (e.clientX - r.left) * (canvas.width / r.width);
-    const py = (e.clientY - r.top) * (canvas.height / r.height);
-    const wx = (px - tf.offX) / tf.scale;
-    const wy = (py - tf.offY) / tf.scale;
-    for (const o of this.activeFloorObjects()) {
-      if (o.type !== "section" || !o.outline || o.outline.length < 3) continue;
-      if (this.controller.isSectionClosed(o.id)) continue;
-      if (pointInPolygon(wx, wy, o.outline)) {
-        this.controller.focusSection(o.id);
+    if (!canvas || !tf) return null;
+    const rect = canvas.getBoundingClientRect();
+    const px = (event.clientX - rect.left) * (canvas.width / Math.max(1, rect.width));
+    const py = (event.clientY - rect.top) * (canvas.height / Math.max(1, rect.height));
+    return { ...minimapPointToWorld({ x: px, y: py }, tf), px, py };
+  }
+  minimapPointerDown(event) {
+    const point = this.minimapWorldPoint(event);
+    const visible = this.controller.getViewport()?.visible;
+    if (!point || !visible) return;
+    const inside = point.x >= visible.x && point.x <= visible.x + visible.width && point.y >= visible.y && point.y <= visible.y + visible.height;
+    if (!inside) return;
+    this.miniDrag = {
+      pointerId: event.pointerId,
+      offsetX: point.x - (visible.x + visible.width / 2),
+      offsetY: point.y - (visible.y + visible.height / 2),
+      startX: event.clientX,
+      startY: event.clientY,
+      moved: false
+    };
+    this.miniCanvas?.setPointerCapture(event.pointerId);
+    this.miniCanvas?.classList.add("sl-dragging");
+    event.preventDefault();
+  }
+  minimapPointerMove(event) {
+    const drag = this.miniDrag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const point = this.minimapWorldPoint(event);
+    if (!point) return;
+    if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 2) {
+      drag.moved = true;
+      this.controller.clearSectionFocus();
+    }
+    this.controller.panToWorld({ x: point.x - drag.offsetX, y: point.y - drag.offsetY });
+    event.preventDefault();
+  }
+  minimapPointerUp(event) {
+    const drag = this.miniDrag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    this.miniSuppressClick = drag.moved;
+    this.miniDrag = null;
+    this.miniCanvas?.classList.remove("sl-dragging");
+    if (this.miniCanvas?.hasPointerCapture(event.pointerId)) this.miniCanvas.releasePointerCapture(event.pointerId);
+  }
+  minimapKeydown(event) {
+    const visible = this.controller.getViewport()?.visible;
+    if (!visible) return;
+    if (event.key === "Home") {
+      this.controller.overview();
+      event.preventDefault();
+      return;
+    }
+    const dx = event.key === "ArrowLeft" ? -visible.width * 0.2 : event.key === "ArrowRight" ? visible.width * 0.2 : 0;
+    const dy = event.key === "ArrowUp" ? -visible.height * 0.2 : event.key === "ArrowDown" ? visible.height * 0.2 : 0;
+    if (!dx && !dy) return;
+    this.controller.clearSectionFocus();
+    this.controller.panToWorld({
+      x: visible.x + visible.width / 2 + dx,
+      y: visible.y + visible.height / 2 + dy
+    });
+    event.preventDefault();
+  }
+  /** Minimap click → focus an available section, otherwise pan there. */
+  minimapJump(e) {
+    const point = this.minimapWorldPoint(e);
+    if (!point) return;
+    for (const section of this.controller.getMinimapSnapshot().sections) {
+      if (section.state === "inactive" || section.outline.length < 3) continue;
+      if (pointInPolygon(point.x, point.y, section.outline)) {
+        this.controller.focusSection(section.id);
         return;
       }
     }
-    this.controller.overview();
+    this.controller.clearSectionFocus();
+    this.controller.panToWorld(point);
   }
   // ---- F4 price-band filter -------------------------------------------------
   /** Effective display price of a category: host pricing override → first tier → base. */
@@ -5140,32 +5468,39 @@ var SeatPicker = class _SeatPicker {
     if (chart === void 0 || !c.key) return chart;
     return this.paidPrice(c.key, c.tiers?.[0]?.id ?? null, chart);
   }
-  /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
+  /** Complete buyer-visible price range, including every ticket tier and
+   * tier-specific host override. */
+  catPriceRange(c) {
+    const prices = c.tiers?.length ? c.tiers.map((tier) => this.paidPrice(c.key, tier.id ?? null, tier.price)) : c.price == null ? [] : [this.paidPrice(c.key, null, c.price)];
+    return prices.length ? { min: Math.min(...prices), max: Math.max(...prices) } : void 0;
+  }
+  /** Derive category price bands without hiding the upper end of tier ranges. */
   priceBands() {
     const doc = this.controller.doc;
     if (!doc) return [];
-    const priced = doc.categories.map((c) => ({ key: c.key, price: this.catPrice(c) })).filter((x) => x.price != null);
+    const priced = doc.categories.map((c) => ({ key: c.key, range: this.catPriceRange(c) })).filter((x) => x.range != null);
     if (!priced.length) return [];
-    const distinct = [...new Set(priced.map((p) => p.price))].sort((a, b) => a - b);
+    const distinct = [...new Map(priced.map((item) => [`${item.range.min}:${item.range.max}`, item.range])).values()].sort((a, b) => a.min - b.min || a.max - b.max);
     if (distinct.length <= 5) {
-      return distinct.map((price) => ({
-        id: `p${price}`,
-        label: this.money(price),
-        keys: priced.filter((p) => p.price === price).map((p) => p.key),
-        min: price,
-        max: price
+      return distinct.map((range) => ({
+        id: `p${range.min}-${range.max}`,
+        label: range.min === range.max ? this.money(range.min) : `${this.money(range.min)}\u2013${this.money(range.max)}`,
+        keys: priced.filter((item) => item.range.min === range.min && item.range.max === range.max).map((item) => item.key),
+        min: range.min,
+        max: range.max
       }));
     }
-    const chunk = Math.ceil(distinct.length / 4);
+    const ordered = [...priced].sort((a, b) => a.range.min - b.range.min || a.range.max - b.range.max);
+    const chunk = Math.ceil(ordered.length / 4);
     const bands = [];
-    for (let i = 0; i < distinct.length; i += chunk) {
-      const slice = distinct.slice(i, i + chunk);
-      const lo = slice[0];
-      const hi = slice[slice.length - 1];
+    for (let i = 0; i < ordered.length; i += chunk) {
+      const slice = ordered.slice(i, i + chunk);
+      const lo = Math.min(...slice.map((item) => item.range.min));
+      const hi = Math.max(...slice.map((item) => item.range.max));
       bands.push({
         id: `b${i}`,
         label: lo === hi ? this.money(lo) : `${this.money(lo)}\u2013${this.money(hi)}`,
-        keys: priced.filter((p) => p.price >= lo && p.price <= hi).map((p) => p.key),
+        keys: slice.map((item) => item.key),
         min: lo,
         max: hi
       });
@@ -5220,7 +5555,13 @@ var SeatPicker = class _SeatPicker {
       this.syncProjection();
     }
     if (hasSections) {
-      const RUNGS = ["zones", "sections", "seats"];
+      const allObjects = [
+        ...doc.objects,
+        ...(doc.floors ?? []).flatMap((floor) => floor.objects)
+      ];
+      const authoredZoneIds = new Set((doc.zones ?? []).map((zone) => zone.id));
+      const hasZones = allObjects.some((object) => object.type === "section" && typeof object.zone === "string" && authoredZoneIds.has(object.zone));
+      const RUNGS = hasZones ? ["zones", "sections", "seats"] : ["sections", "seats"];
       const pills = document.createElement("div");
       pills.className = "sl-rungs on";
       pills.setAttribute("role", "group");
@@ -5253,18 +5594,38 @@ var SeatPicker = class _SeatPicker {
       const floors = this.controller.getFloors();
       const rail = document.createElement("div");
       rail.className = "sl-floors on";
-      rail.setAttribute("role", "group");
-      rail.setAttribute("aria-label", t2("picker.floor"));
-      rail.innerHTML = floors.map((f) => `<button type="button" data-floor="${f.id}">${f.name}</button>`).join("");
-      rail.querySelectorAll("button").forEach((btn) => {
-        btn.addEventListener("click", () => {
-          this.controller.setFloor(btn.dataset.floor);
-          this.showSectionCard(null);
-          this.syncFloors();
-          this.syncRung();
-          this.refreshMinimap();
-        });
+      const select = document.createElement("select");
+      select.setAttribute("aria-label", this.tf("picker.chooseLevel", "Choose level"));
+      const overview = document.createElement("option");
+      overview.value = "";
+      overview.textContent = this.tf("picker.allFloors", "All floors");
+      select.appendChild(overview);
+      for (const floor of floors) {
+        const option = document.createElement("option");
+        option.value = floor.id;
+        option.textContent = floor.name;
+        select.appendChild(option);
+      }
+      select.addEventListener("change", () => {
+        if (select.value === "") this.controller.setFloorOverview(true);
+        else this.controller.setFloor(select.value);
+        this.showSectionCard(null);
+        this.syncFloors();
+        this.syncRung();
+        this.refreshMinimap();
       });
+      rail.appendChild(select);
+      const info = document.createElement("button");
+      info.type = "button";
+      info.className = "sl-floor-info";
+      info.textContent = "i";
+      const explanation = this.tf(
+        "picker.floorHelp",
+        "All floors shows the complete venue. Choose one level to inspect and select its seats."
+      );
+      info.setAttribute("aria-label", explanation);
+      info.title = explanation;
+      rail.appendChild(info);
       this.regions["left-rail"].appendChild(rail);
       this.floorsEl = rail;
       this.syncFloors();
@@ -5310,19 +5671,59 @@ var SeatPicker = class _SeatPicker {
   syncFloors() {
     if (!this.floorsEl) return;
     const active = this.controller.getActiveFloorId();
-    this.floorsEl.querySelectorAll("button").forEach((btn) => {
-      btn.classList.toggle("on", btn.dataset.floor === active);
-    });
+    const overview = this.controller.isFloorOverview();
+    const select = this.floorsEl.querySelector("select");
+    if (select) select.value = overview ? "" : active;
   }
   /** Show (or clear, on null) the tapped-section summary card. */
   showSectionCard(summary) {
     this.lastSection = summary;
     this.secCardEl?.remove();
     this.secCardEl = null;
-    if (!summary) return;
+    if (!summary) {
+      this.refreshMinimap();
+      return;
+    }
     this.secCardCollapsed = this.controller.getRung() === "seats";
     this.secCardShownAt = Date.now();
     this.renderSectionCard(summary);
+    this.refreshMinimap();
+  }
+  /**
+   * Open sections next to the focused one, in authored order.
+   *
+   * This is intentionally a circular ring: arena sections are usually authored
+   * clockwise, so moving past the last section should reach the first without
+   * forcing a buyer back through the overview level. Closed or empty sections
+   * are skipped because focusing one cannot produce a useful buyer card.
+   */
+  sectionNeighbours(sectionId) {
+    const sections = this.activeFloorObjects().filter((object) => object.type === "section" && !this.controller.isSectionClosed(object.id) && this.controller.getSectionSeatCount(object.id) > 0);
+    if (sections.length < 2) return null;
+    const index = sections.findIndex((section) => section.id === sectionId);
+    if (index < 0) return null;
+    return {
+      previous: sections[(index - 1 + sections.length) % sections.length],
+      next: sections[(index + 1) % sections.length]
+    };
+  }
+  /** Previous/next controls shared by expanded, mini, and phone section cards. */
+  sectionNavigationHtml(summary) {
+    const neighbours = this.sectionNeighbours(summary.id);
+    if (!neighbours) return "";
+    const previousLabel = neighbours.previous.label || neighbours.previous.id;
+    const nextLabel = neighbours.next.label || neighbours.next.id;
+    return `<span class="sl-seccard-nav" aria-label="${this.tf("picker.browseSections", "Browse sections")}"><button type="button" data-section-nav="${escapeOption(neighbours.previous.id)}" aria-label="${this.tf("picker.previousSection", "Previous section")}: ${escapeOption(previousLabel)}" title="${escapeOption(previousLabel)}">\u2190</button><button type="button" data-section-nav="${escapeOption(neighbours.next.id)}" aria-label="${this.tf("picker.nextSection", "Next section")}: ${escapeOption(nextLabel)}" title="${escapeOption(nextLabel)}">\u2192</button></span>`;
+  }
+  wireSectionNavigation(card) {
+    card.querySelectorAll("[data-section-nav]").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const sectionId = button.dataset.sectionNav;
+        if (sectionId) this.controller.focusSection(sectionId);
+      });
+    });
   }
   /**
    * Render the section card in the form the layout + state want: expanded card
@@ -5336,26 +5737,32 @@ var SeatPicker = class _SeatPicker {
       this.lastSection = null;
       return;
     }
-    const paid = summary.categories.length ? summary.categories.map((c) => this.paidPrice(c.key, null, c.price)) : [summary.priceMin, summary.priceMax];
-    const paidMin = Math.min(...paid);
-    const paidMax = Math.max(...paid);
+    const paidRanges = summary.categories.length ? summary.categories.map((item) => {
+      const category = this.controller.doc?.categories.find((candidate) => candidate.key === item.key);
+      return category ? this.catPriceRange(category) : { min: item.priceMin, max: item.priceMax };
+    }).filter((range) => range != null) : [{ min: summary.priceMin, max: summary.priceMax }];
+    const paidMin = Math.min(...paidRanges.map((range) => range.min));
+    const paidMax = Math.max(...paidRanges.map((range) => range.max));
     const priceLabel = paidMin === paidMax ? this.money(paidMin) : `${this.money(paidMin)}\u2013${this.money(paidMax)}`;
     const leftLabel = tCount("picker.seatsLeftInSection", summary.seatsLeft);
     const xBtn = `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button>`;
+    const sectionNav = this.sectionNavigationHtml(summary);
     const card = document.createElement("div");
     const narrow = this.root?.dataset.layout === "narrow";
     if (narrow) {
       card.className = "sl-seccard strip on";
       card.setAttribute("role", "status");
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
-      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn;
+      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + sectionNav + xBtn;
+      this.wireSectionNavigation(card);
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       (this.els.sheetHead ?? this.els.side ?? this.els.map).appendChild(card);
     } else if (this.secCardCollapsed) {
       card.className = "sl-seccard mini on";
       card.setAttribute("role", "button");
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
-      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + xBtn;
+      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + sectionNav + xBtn;
+      this.wireSectionNavigation(card);
       card.addEventListener("click", (e) => {
         if (e.target.closest(".sl-seccard-x")) return;
         this.secCardCollapsed = false;
@@ -5370,9 +5777,13 @@ var SeatPicker = class _SeatPicker {
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
       const mix = summary.categories.map((c) => {
         const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(this.paidPrice(c.key, null, c.price))}</span></span>`;
+        const category = this.controller.doc?.categories.find((candidate) => candidate.key === c.key);
+        const range = category ? this.catPriceRange(category) : { min: c.priceMin, max: c.priceMax };
+        const rangeLabel = range && range.min !== range.max ? `${this.money(range.min)}\u2013${this.money(range.max)}` : this.money(range?.min ?? c.price);
+        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${rangeLabel}</span></span>`;
       }).join("");
-      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (summary.entrance ? `<div class="sl-seccard-entrance">${t2("picker.entrance")} ${String(summary.entrance).replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch])}</div>` : "") + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
+      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (summary.entrance ? `<div class="sl-seccard-entrance">${t2("picker.entrance")} ${String(summary.entrance).replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch])}</div>` : "") + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button>` + sectionNav + `<span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
+      this.wireSectionNavigation(card);
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       card.querySelector(".sl-seccard-overview").addEventListener("click", () => this.controller.overview());
       (this.regions["top-center"] ?? this.els.map).appendChild(card);
@@ -5437,13 +5848,14 @@ var SeatPicker = class _SeatPicker {
     const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
     const status = this.controller.getStatus(seat.id) ?? "free";
     const statusText = status === "free" ? this.tf("picker.statusAvailable", "available") : status === "held" ? this.tf("picker.statusOnHold", "on hold") : this.tf("picker.statusTaken2", "taken");
-    const price = cat ? this.catPrice(cat) : void 0;
+    const priceRange = cat ? this.catPriceRange(cat) : void 0;
+    const priceText = priceRange ? priceRange.min === priceRange.max ? this.money(priceRange.min) : `${this.money(priceRange.min)}\u2013${this.money(priceRange.max)}` : void 0;
     const table = this.controller.tableSelection(seat.id);
     const details = table ?? this.controller.seatDetails(seat.id);
     const typeWord = this.rowTypeWord(details);
     const buyerName = details?.rowLabel ?? details?.displayLabel ?? seat.displayLabel ?? seat.label;
     const identity = table ? `${typeWord} ${buyerName}, ${table.bookingMode === "variable" ? t2("picker.minToMaxGuests", { min: table.minOccupancy, max: table.maxOccupancy }) : t2("picker.capacityGuests", { count: table.capacity })}` : details?.objectType === "booth" ? `${typeWord} ${buyerName}` : details?.objectType === "table" ? `${typeWord} ${buyerName}, ${t2("picker.seatNumberLower", { label: details.seatNumber ?? seat.label })}` : t2("picker.seatLabel", { label: details?.displayLabel ?? seat.displayLabel ?? seat.label });
-    this.srEl.textContent = `${identity}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
+    this.srEl.textContent = `${identity}, ${cat?.label ?? seat.categoryKey}${priceText ? `, ${priceText}` : ""}, ${statusText}`;
   }
   // ---- atomic table confirmation / guest quantity ---------------------------
   showTableDialog(table, held, returnFocus) {
@@ -5610,12 +6022,22 @@ var SeatPicker = class _SeatPicker {
       details?.rowLabel || details?.objectType === "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${safe(this.rowTypeWord(details))}</span><span class="sl-confirm-value">${safe(this.rowShort(details) ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : "",
       details?.objectType !== "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${this.tf("picker.seat", "Seat")}</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : ""
     ].filter(Boolean).join("");
+    const tiers = details?.tiers ?? cat?.tiers ?? [];
+    const selectedTierId = details?.tierId ?? tiers[0]?.id;
+    const tierGuidance = (tier) => tier.buyerMessage?.trim() || (tier.restriction === "companion" ? this.tf("picker.companionRequiresWheelchair", "Requires the adjacent wheelchair place") : void 0);
+    const tierChoices = tiers.length > 1 ? `<fieldset class="sl-confirm-tiers"><legend>${this.tf("picker.ticketType", "Ticket type")}</legend>` + tiers.map((tier) => {
+      const guidance = tierGuidance(tier);
+      return `<button type="button" class="sl-confirm-tier" data-confirm-tier="${safe(tier.id)}" aria-pressed="${tier.id === selectedTierId}"><span class="sl-confirm-tier-copy"><span class="sl-confirm-tier-name">${safe(tier.name)}</span>` + (guidance ? `<small class="sl-confirm-tier-note">${safe(guidance)}</small>` : "") + `</span><span class="sl-confirm-tier-price">${this.money(this.paidPrice(seat.categoryKey, tier.id, tier.price))}</span></button>`;
+    }).join("") + `</fieldset>` : tiers[0] && tierGuidance(tiers[0]) ? `<p class="sl-confirm-tier-note">${safe(tierGuidance(tiers[0]))}</p>` : "";
     const el = document.createElement("div");
     el.className = "sl-confirm";
     el.setAttribute("role", "dialog");
     el.setAttribute("aria-label", t2("picker.confirmSeatLabel", { label: seat.label }));
-    el.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
-    el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() && this.buyerView !== "venue3d" ? this.confirmThumbHtml(seat) : "") + (this.buyerView === "venue3d" ? `${this.seatConfidenceConfirmHtml(seat, `${details?.displayLabel ?? seat.displayLabel ?? seat.label} \xB7 ${price == null ? this.tf("picker.priceNotSupplied", "Price not supplied") : this.money(price)}`)}<div class="sl-confirm-inspect-row">${this.view3dCompareConfirmHtml(seat)}${this.see3dConfirmHtml()}</div>` : this.see3dConfirmHtml()) + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">${t2("common.cancel")}</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>${this.tf("picker.select", "Select")}</button></div></div>`;
+    const categoryColor = cat?.color ?? "#6e7bff";
+    const categoryBand = mixThemeColors(categoryColor, this.cssVar("--sl-surface") || "#1a2234", 0.76) ?? categoryColor;
+    el.style.setProperty("--sl-cat", categoryColor);
+    el.style.setProperty("--sl-cat-ink", highestContrastInk(categoryBand, "#172033", "#ffffff"));
+    el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + tierChoices + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() && this.buyerView !== "venue3d" ? this.confirmThumbHtml(seat) : "") + (this.buyerView === "venue3d" ? `${this.seatConfidenceConfirmHtml(seat, `${details?.displayLabel ?? seat.displayLabel ?? seat.label} \xB7 ${price == null ? this.tf("picker.priceNotSupplied", "Price not supplied") : this.money(price)}`)}<div class="sl-confirm-inspect-row">${this.view3dCompareConfirmHtml(seat)}${this.see3dConfirmHtml()}</div>` : this.see3dConfirmHtml()) + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">${t2("common.cancel")}</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>${this.tf("picker.select", "Select")}</button></div></div>`;
     this.els.map.appendChild(el);
     this.confirmEl = el;
     const thumb = el.querySelector(".sl-confirm-thumb");
@@ -5631,6 +6053,22 @@ var SeatPicker = class _SeatPicker {
       this.openSeatConfidencePassport(seat, event.currentTarget instanceof HTMLElement ? event.currentTarget : null);
     });
     el.querySelector(".sl-confirm-compare")?.addEventListener("click", () => this.saveView3dComparisonSeat(seat));
+    el.querySelectorAll("[data-confirm-tier]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const tierId = button.dataset.confirmTier;
+        const tier = tiers.find((candidate) => candidate.id === tierId);
+        if (!tier) return;
+        this.controller.setSeatTier(seat.id, tier.id);
+        el.querySelectorAll("[data-confirm-tier]").forEach((candidate) => {
+          candidate.setAttribute("aria-pressed", String(candidate === button));
+        });
+        const priceElement = el.querySelector(".sl-confirm-price");
+        if (priceElement) {
+          priceElement.textContent = this.money(this.paidPrice(seat.categoryKey, tier.id, tier.price));
+        }
+        this.reanchorConfirm();
+      });
+    });
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         this.dismissConfirm();
@@ -6007,21 +6445,23 @@ var SeatPicker = class _SeatPicker {
     const doc = this.controller.doc;
     if (!doc || !this.els.prices) return;
     const left = this.controller.categoryAvailability();
-    this.narrateAvailability(doc.categories, left);
-    this.syncSoldout(doc.categories, left);
+    const sellable = doc.categories.filter((c) => !c.notForSale);
+    this.narrateAvailability(sellable, left);
+    this.syncSoldout(sellable, left);
     const PRICE_LIMIT = 5;
-    const overflow = doc.categories.length - PRICE_LIMIT;
+    const overflow = sellable.length - PRICE_LIMIT;
     const collapsed = overflow > 1 && !this.pricesExpanded;
-    const shown = collapsed ? doc.categories.slice(0, PRICE_LIMIT) : doc.categories;
+    const shown = collapsed ? sellable.slice(0, PRICE_LIMIT) : sellable;
     this.els.prices.classList.toggle("sl-expanded", overflow > 1 && this.pricesExpanded);
     this.els.prices.innerHTML = shown.map((c) => {
       const price = this.catPrice(c);
+      const range = this.catPriceRange(c);
       const offer = this.offerPrice(c.key);
       const previous = offer?.previousPrice != null && offer.previousPrice > offer.price ? offer.previousPrice : null;
       const active = this.focusedCatKey === c.key;
       const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-      return `<div class="sl-price-row${dim ? " sl-dim" : ""}${active ? " sl-active" : ""}" data-cat="${escapeOption(c.key)}" role="button" tabindex="0" aria-pressed="${active}" title="${escapeOption(active ? this.tf("picker.showAllSeats", "Show all seats") : t2("picker.showLabelSeatsOnMap", { label: c.label }))}"><span class="sl-dot" style="background:${escapeOption(c.color)}"></span><span class="sl-price-label">${escapeOption(c.label)}` + (offer?.offerName ? `<small class="sl-price-offer">${escapeOption(offer.offerName)}</small>` : "") + `</span><span class="sl-price-left">${tCount("picker.leftCount", left[c.key] ?? 0)}</span>` + (previous != null ? `<span class="sl-price-was">${escapeOption(this.money(previous))}</span>` : "") + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
-    }).join("") + (overflow > 1 ? `<button type="button" class="sl-price-more" aria-expanded="${!collapsed}">` + (collapsed ? t2("picker.showAllTicketTypes", { count: doc.categories.length }) : this.tf("picker.showFewer", "Show fewer")) + `</button>` : "") + `<div class="sl-status-key" aria-label="${this.tf("picker.seatStatusLegend", "Seat status legend")}"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>${this.tf("picker.temporarilyHeld", "Temporarily held")}</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>${this.tf("picker.sold", "Sold")}</span></div>`;
+      return `<div class="sl-price-row${dim ? " sl-dim" : ""}${active ? " sl-active" : ""}" data-cat="${escapeOption(c.key)}" role="button" tabindex="0" aria-pressed="${active}" title="${escapeOption(active ? this.tf("picker.showAllSeats", "Show all seats") : t2("picker.showLabelSeatsOnMap", { label: c.label }))}"><span class="sl-dot" style="background:${escapeOption(c.color)}"></span><span class="sl-price-label">${escapeOption(c.label)}` + (offer?.offerName ? `<small class="sl-price-offer">${escapeOption(offer.offerName)}</small>` : "") + `</span><span class="sl-price-left">${tCount("picker.leftCount", left[c.key] ?? 0)}</span>` + (previous != null ? `<span class="sl-price-was">${escapeOption(this.money(previous))}</span>` : "") + (range != null ? `<span class="sl-price-amt">${range.min === range.max ? this.money(range.min) : `${this.money(range.min)}\u2013${this.money(range.max)}`}</span>` : price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
+    }).join("") + (overflow > 1 ? `<button type="button" class="sl-price-more" aria-expanded="${!collapsed}">` + (collapsed ? t2("picker.showAllTicketTypes", { count: sellable.length }) : this.tf("picker.showFewer", "Show fewer")) + `</button>` : "") + `<div class="sl-status-key" aria-label="${this.tf("picker.seatStatusLegend", "Seat status legend")}"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>${this.tf("picker.temporarilyHeld", "Temporarily held")}</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>${this.tf("picker.sold", "Sold")}</span></div>`;
     this.els.prices.querySelectorAll(".sl-price-row").forEach((row) => {
       row.addEventListener("mouseenter", () => this.controller.getRenderer()?.setCategoryHighlight?.(row.dataset.cat ?? null));
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
@@ -6125,7 +6565,7 @@ var SeatPicker = class _SeatPicker {
     const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
     if (noPicks) this.baReopen = false;
     if (!this.salesClosed && !this.hold && (noPicks || this.baReopen || this.bestAvailableBusy || this.bestAvailableConfirm)) {
-      const cats = this.controller.doc?.categories ?? [];
+      const cats = (this.controller.doc?.categories ?? []).filter((c) => !c.notForSale);
       const zones = this.controller.getBestAvailableZones();
       if (this.baZone && !zones.some((zone) => zone.id === this.baZone)) this.baZone = "";
       parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>${this.tf("picker.replaceCurrentChoices", "Replace your current choices?")}</div><div class="sl-ba-replace"><b>${t2("picker.willFindSeatsTogether", { count: this.baQty })}</b><span>${this.tf("picker.manualTicketsRemovedNote", "Your manually selected tickets will be removed only after a new group is secured.")}</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>${this.tf("picker.keepMine", "Keep mine")}</button><button type="button" class="replace" data-ba-replace>${this.tf("picker.findNewSeats", "Find new seats")}</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>${this.tf("picker.findBestSeatsTogether", "Find the best seats together")}</div><div class="sl-ba-copy"><span class="wide">${this.tf("picker.willChooseClosestGroup", "We\u2019ll choose the closest available group for you.")}</span><span class="narrow">${this.tf("picker.closestGroupChosenInstantly", "Closest available group, chosen instantly.")}</span></div>` + // Premium quick-pick — present only when the chart actually has premium
@@ -6181,8 +6621,10 @@ var SeatPicker = class _SeatPicker {
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
       const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(this.paidPrice(s.categoryKey, ti.id, ti.price))}</option>`).join("") + `</select>` : "";
+      const chosenTier = s.tiers?.find((tier) => tier.id === s.tierId) ?? s.tiers?.[0];
+      const tierNote = chosenTier?.buyerMessage?.trim() || (chosenTier?.restriction === "companion" ? this.tf("picker.companionRequiresWheelchair", "Requires the adjacent wheelchair place") : "");
       parts.push(
-        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label, s.objectType, s.quantity ?? 1, s.objectId, s) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="${this.tf("picker.selected", "Selected")}" title="${this.tf("picker.selected", "Selected")}"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>` + (s.objectType === "table" && s.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(s.label)}">${t2("picker.guestsCountEdit", { count: s.quantity ?? 1 })}</button>` : "") + `${this.wheelchairChipMarker(s.wheelchairSpaceType)}${this.commercialChipMarker(s.commercial)}${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price) * (s.quantity ?? 1))}</span></div></div>` + iconRail(t2("picker.removeSeatLabel", { label: s.label }), canView && s.objectType !== "table" ? s.label : null) + `</div>`
+        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label, s.objectType, s.quantity ?? 1, s.objectId, s) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="${this.tf("picker.selected", "Selected")}" title="${this.tf("picker.selected", "Selected")}"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>` + (s.objectType === "table" && s.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(s.label)}">${t2("picker.guestsCountEdit", { count: s.quantity ?? 1 })}</button>` : "") + `${this.wheelchairChipMarker(s.wheelchairSpaceType)}${this.commercialChipMarker(s.commercial)}${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price) * (s.quantity ?? 1))}</span></div>` + (tierNote ? `<small class="sl-tier-note">${escapeOption(tierNote)}</small>` : "") + `</div>` + iconRail(t2("picker.removeSeatLabel", { label: s.label }), canView && s.objectType !== "table" ? s.label : null) + `</div>`
       );
     }
     for (const area of gaAreas) {
@@ -6495,7 +6937,7 @@ var SeatPicker = class _SeatPicker {
       const problem = err;
       const labels = (problem.conflicts ?? []).map((conflict) => conflict.label).filter(Boolean).slice(0, 3);
       if (problem.reason === "event_closed") this.setSalesClosed(true);
-      const message = problem.reason === "event_closed" ? this.tf("picker.seatSalesClosedForEvent", "Seat sales have closed for this event.") : labels.length ? labels.length === 1 ? t2("picker.labelsNoLongerAvailable.one", { labels: labels.join(", ") }) : t2("picker.labelsNoLongerAvailable.other", { labels: labels.join(", ") }) : this.tf("picker.seatsJustTaken", "One or more seats were just taken. Please pick again.");
+      const message = problem.reason === "event_closed" ? this.tf("picker.seatSalesClosedForEvent", "Seat sales have closed for this event.") : problem.reason === "companion_pair_required" ? this.tf("picker.companionPairRequired", "Select the adjacent wheelchair place with each companion ticket.") : problem.reason === "ticket_option_not_applicable" ? this.tf("picker.ticketOptionNotApplicable", "That ticket choice is not available for the selected seat.") : labels.length ? labels.length === 1 ? t2("picker.labelsNoLongerAvailable.one", { labels: labels.join(", ") }) : t2("picker.labelsNoLongerAvailable.other", { labels: labels.join(", ") }) : this.tf("picker.seatsJustTaken", "One or more seats were just taken. Please pick again.");
       this.toast(message, "error");
       this.setCtaPhase("idle");
     } finally {
@@ -6824,13 +7266,14 @@ var SeatPicker = class _SeatPicker {
     const isBooth = details.objectType === "booth";
     const hasLoc = details.sectionLabel || details.rowLabel || details.seatNumber;
     const grid = isGroupedTable ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.guests", "Guests")}</span><span class="sl-tip-val">${details.bookingMode === "variable" ? `${details.minOccupancy}\u2013${details.maxOccupancy}` : details.capacity}</span></div></div>` : isBooth ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.section", "Section")}</span><span class="sl-tip-val">${esc(details.sectionLabel)}</span></div>` : "") + `<div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div></div>` : hasLoc ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.section", "Section")}</span><span class="sl-tip-val">${esc(details.sectionLabel)}</span></div>` : "") + (details.rowLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(this.rowShort(details))}</span></div>` : "") + (details.seatNumber ? `<div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.seat", "Seat")}</span><span class="sl-tip-val">${esc(details.seatNumber)}</span></div>` : "") + `</div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.seat", "Seat")}</span><span class="sl-tip-val">${esc(details.displayLabel ?? details.label)}</span></div></div>`;
-    const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
+    const notForSale = details.status === "not_for_sale";
+    const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${notForSale ? this.tf("picker.notAvailable", "Not available") : details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
     const limited = this.limitedViewLabel(details.commercial);
     const cxLine = limited ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u25D0</span>${esc(limited)}</div>` : "";
     const wheelchair = this.wheelchairProvisionLabel(details.wheelchairSpaceType);
     const wheelchairLine = wheelchair ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u267F</span>${esc(wheelchair)}</div>` : "";
     this.tipEl.style.setProperty("--sl-cat", details.categoryColor);
-    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + wheelchairLine + cxLine + statusLine;
+    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc(details.categoryLabel)}</span>` + (notForSale ? "" : `<span class="sl-tip-amt">${price}</span>`) + `</div>` + wheelchairLine + cxLine + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -7053,13 +7496,16 @@ var SeatPicker = class _SeatPicker {
       sourceLabel: this.tf("picker.chartDerivedModel", "Chart-derived model")
     };
   }
-  /** Route the module's decoupled analytics into the host callback, tagged buyer. */
-  emit3dAnalytics(event, props) {
+  /** Route decoupled analytics into the host callback, tagged buyer. */
+  emitAnalytics(event, props) {
     try {
       this.opts.onAnalytics?.(event, { ...props, surface: "buyer" });
     } catch {
     }
   }
+  emit3dAnalytics(event, props) {
+    this.emitAnalytics(event, props);
+  }
   /** A 3D seat tap runs the SAME selection path as a 2D tap: toggle through the
    *  controller, then raise the shared confirm card (bottom-sheeted in 3D). */
   onView3dSeatPick(seatId) {
@@ -7078,9 +7524,9 @@ var SeatPicker = class _SeatPicker {
       this.syncSelectionTo3d();
       return;
     }
-    const visualState = this.seatState3dFor(seat);
-    if (visualState !== "available") {
-      this.showUnavailable3dSeat(seat, visualState);
+    const status = this.controller.getStatus(seat.id);
+    if (status === "held" || status === "booked" || status === "not_for_sale") {
+      this.showUnavailable3dSeat(seat, this.seatState3dFor(seat), status);
       this.syncSelectionTo3d();
       return;
     }
@@ -7102,14 +7548,14 @@ var SeatPicker = class _SeatPicker {
     else this.syncTray();
     this.syncSelectionTo3d();
   }
-  /** Explain a visible-but-unselectable 3D seat without entering the booking
-   * flow. Category colour remains visible in the venue; this card names the
-   * availability state explicitly so yellow never has to carry both meanings. */
-  showUnavailable3dSeat(seat, visualState) {
+  /** Explain a 3D seat that INVENTORY refuses — never one the buyer's own
+   * filters merely dimmed, which stays buyable exactly as it is in 2D. Category
+   * colour remains visible in the venue; this card names the availability state
+   * explicitly so yellow never has to carry both meanings. */
+  showUnavailable3dSeat(seat, visualState, status) {
     const overlay = this.view3dEl;
     if (!overlay) return;
     this.dismissUnavailable3dSeat();
-    const status = this.controller.getStatus(seat.id);
     const details = this.controller.seatDetails(seat.id);
     const identity = details?.displayLabel ?? seat.displayLabel ?? seat.label;
     const section = details?.sectionLabel;
@@ -7121,12 +7567,9 @@ var SeatPicker = class _SeatPicker {
     } : status === "booked" ? {
       title: this.tf("picker.sold", "Sold"),
       message: this.tf("picker.soldSeatExplanation", "This seat has already been booked.")
-    } : status === "not_for_sale" ? {
+    } : {
       title: this.tf("picker.notForSale", "Not for sale"),
       message: this.tf("picker.notForSaleExplanation", "This seat is not included in the current sale.")
-    } : {
-      title: this.tf("picker.filteredSeat", "Unavailable with current filters"),
-      message: this.tf("picker.filteredSeatExplanation", "Change the active price or view filters to make this seat selectable.")
     };
     const card = document.createElement("div");
     card.className = "sl-view3d-unavailable";
@@ -7504,7 +7947,7 @@ var SeatPicker = class _SeatPicker {
     const floors = handle.floors();
     const floorLabels = new Set(floors.map((floor) => floor.label.trim().toLocaleLowerCase()));
     const zones = handle.zones().filter((zone) => zone.seatCount > 0 && !floorLabels.has(zone.label.trim().toLocaleLowerCase()));
-    const allSections = handle.sections().filter((s) => s.seatCount > 0);
+    const allSections = handle.sections().filter((section) => section.seatCount > 0 && !floorLabels.has(section.label.trim().toLocaleLowerCase()));
     const sections = zones.length > 1 ? [] : allSections;
     const wantFloors = floors.length > 1;
     const wantZones = zones.length > 1;
@@ -7531,16 +7974,24 @@ var SeatPicker = class _SeatPicker {
     });
     setFinderOpen(false);
     nav.appendChild(finderToggle);
+    let syncAreasForFloor = (_index) => void 0;
+    let syncPressedFloor = (_index) => void 0;
     if (wantFloors) {
       const row = document.createElement("div");
       row.setAttribute("role", "group");
       row.setAttribute("aria-label", this.tf("picker.levels", "Levels"));
       const pills = [];
+      syncPressedFloor = (index) => {
+        pills.forEach((pill) => {
+          pill.setAttribute("aria-pressed", String(
+            (pill.dataset.floor === "" ? null : Number(pill.dataset.floor)) === index
+          ));
+        });
+      };
       const select = (index) => {
         if (!handle.focusFloor(index)) return;
-        pills.forEach((p) => {
-          p.setAttribute("aria-pressed", String((p.dataset.floor === "" ? null : Number(p.dataset.floor)) === index));
-        });
+        syncPressedFloor(index);
+        syncAreasForFloor(index);
       };
       const add = (label, index) => {
         const b = document.createElement("button");
@@ -7565,39 +8016,55 @@ var SeatPicker = class _SeatPicker {
       row.setAttribute("aria-label", this.tf("picker.areas", "Areas"));
       const entries = wantZones ? zones.map((z) => ({ id: z.id, label: z.label || z.id, go: () => {
         handle.focusZone(z.id);
-      } })) : sections.map((s) => ({ id: s.id, label: s.label || s.id, go: () => {
-        handle.focusSection(s.id);
-      } }));
-      if (!wantZones && entries.length > MAX_3D_SECTION_PILLS) {
-        const select = document.createElement("select");
-        select.setAttribute("aria-label", this.tf("picker.jumpToSection", "Jump to section"));
-        const placeholder = document.createElement("option");
-        placeholder.value = "";
-        placeholder.textContent = this.tf("picker.jumpToSection", "Jump to section");
-        select.appendChild(placeholder);
-        for (const entry of entries) {
-          const option = document.createElement("option");
-          option.value = entry.id;
-          option.textContent = entry.label;
-          select.appendChild(option);
+      } })) : sections.map((s) => ({
+        id: s.id,
+        label: s.label || s.id,
+        floorIndex: s.floorIndex,
+        go: () => {
+          handle.focusSection(s.id);
+          if (Number.isFinite(s.floorIndex)) syncPressedFloor(s.floorIndex);
         }
-        select.addEventListener("change", () => {
-          entries.find((entry) => entry.id === select.value)?.go();
-        });
-        row.appendChild(select);
-      } else {
-        for (const e of entries) {
-          const b = document.createElement("button");
-          b.type = "button";
-          b.textContent = e.label;
-          b.addEventListener("click", () => {
-            e.go();
+      }));
+      const renderEntries = (floorIndex) => {
+        const visible = wantZones || floorIndex === null ? entries : entries.filter((entry) => entry.floorIndex === void 0 || entry.floorIndex === floorIndex);
+        row.replaceChildren();
+        if (!visible.length) {
+          row.remove();
+          return;
+        }
+        if (!row.isConnected) nav.appendChild(row);
+        if (!wantZones && visible.length > MAX_3D_SECTION_PILLS) {
+          const select = document.createElement("select");
+          select.setAttribute("aria-label", this.tf("picker.jumpToSection", "Jump to section"));
+          const placeholder = document.createElement("option");
+          placeholder.value = "";
+          placeholder.textContent = this.tf("picker.jumpToSection", "Jump to section");
+          select.appendChild(placeholder);
+          for (const entry of visible) {
+            const option = document.createElement("option");
+            option.value = entry.id;
+            option.textContent = entry.label;
+            select.appendChild(option);
+          }
+          select.addEventListener("change", () => {
+            visible.find((entry) => entry.id === select.value)?.go();
+          });
+          row.appendChild(select);
+          return;
+        }
+        for (const entry of visible) {
+          const button = document.createElement("button");
+          button.type = "button";
+          button.textContent = entry.label;
+          button.addEventListener("click", () => {
+            entry.go();
             setFinderOpen(false);
           });
-          row.appendChild(b);
+          row.appendChild(button);
         }
-      }
-      nav.appendChild(row);
+      };
+      syncAreasForFloor = renderEntries;
+      renderEntries(null);
     }
     overlay.appendChild(nav);
   }
@@ -7796,7 +8263,7 @@ var SeatPicker = class _SeatPicker {
     } catch (err) {
       this.opts.onError?.(err);
       const reason = err?.reason;
-      const message = reason === "not_enough_together" ? t2("picker.couldNotFindSeatsTogether", { count: qty }) : reason === "sold_out" ? this.tf("picker.ticketTypeSoldOut", "That ticket type is sold out. Try another ticket type.") : reason === "event_closed" ? this.tf("picker.seatSalesClosedForEvent", "Seat sales have closed for this event.") : this.tf("picker.seatsNoLongerAvailableTryAnother", "Those seats are no longer available. Try another quantity or ticket type.");
+      const message = reason === "not_enough_together" ? t2("picker.couldNotFindSeatsTogether", { count: qty }) : reason === "companion_pair_required" ? this.tf("picker.companionPairRequired", "Select the adjacent wheelchair place with each companion ticket.") : reason === "ticket_option_not_applicable" ? this.tf("picker.ticketOptionNotApplicable", "That ticket choice is not available for the selected seat.") : reason === "sold_out" ? this.tf("picker.ticketTypeSoldOut", "That ticket type is sold out. Try another ticket type.") : reason === "event_closed" ? this.tf("picker.seatSalesClosedForEvent", "Seat sales have closed for this event.") : this.tf("picker.seatsNoLongerAvailableTryAnother", "Those seats are no longer available. Try another quantity or ticket type.");
       this.toast(message, "error");
       return null;
     } finally {