@seatlayer/js 0.48.2 → 0.50.0

package/dist/index.js

@@ -1,38 +1,3 @@
-import {
-  SeatManager
-} from "./chunk-SD6GL3DT.js";
-import {
-  ACCESS_LINK_DEFAULTS,
-  ChannelsMode,
-  PUBLIC_CHANNEL_ID,
-  PUBLIC_CHANNEL_NAME,
-  accessIntentDescription,
-  accessIntentLabel,
-  accessLine,
-  accessLinkBadge,
-  accessLinkErrorCopy,
-  accessLinkIsLive,
-  accessLinkPolicyLines,
-  bucketRows,
-  bucketRowsHtml,
-  dropReviewRows,
-  intentForbidsCopy,
-  intentSwitchBlockedCopy,
-  isPublicChannelId,
-  markerLetter,
-  markerOf,
-  mutationCount,
-  needsMoveConfirmation,
-  planAssignment,
-  retryAfterCopy,
-  selectionSources,
-  stateBadge,
-  suggestMarker
-} from "./chunk-KNMZQZXR.js";
-import {
-  ManageApi,
-  ManageApiError
-} from "./chunk-H4OJF6LE.js";
 import {
   __privateAdd,
   __privateGet,
@@ -1448,6 +1413,12 @@ var EmbeddedDesigner = class {
      */
     this.autoRecoverUsed = false;
     this.phase = "loading";
+    /**
+     * Set only after an identity-checked `ready`. Unlike `phase`, this remains true
+     * if a later fatal error renders the error card, so no subsequent callback can
+     * shed the chart/workspace identity the live session already established.
+     */
+    this.identityEstablished = false;
     this.restoreContainerPosition = null;
     // Host-side fullscreen pin: saved state we restore on `off`/Escape/destroy.
     this.pinned = false;
@@ -1514,14 +1485,21 @@ var EmbeddedDesigner = class {
         expiresAt: typeof data.expiresAt === "number" ? data.expiresAt : void 0,
         code: typeof data.code === "string" ? data.code : void 0,
         message: typeof data.message === "string" ? data.message : void 0,
-        meta: data.meta
+        meta: data.meta,
+        fatal: typeof data.fatal === "boolean" ? data.fatal : void 0,
+        action: typeof data.action === "string" ? data.action : void 0
       };
-      if (this.options.expectedChartId && message.chartId && message.chartId !== this.options.expectedChartId || this.options.expectedWorkspaceId && message.workspaceId && message.workspaceId !== this.options.expectedWorkspaceId) {
+      const identityRequired = this.identityEstablished || message.type === "seatlayer.designer.ready" || message.type === "seatlayer.designer.saved" || message.type === "seatlayer.designer.published" || message.type === "seatlayer.designer.close";
+      const chartMismatch = this.options.expectedChartId !== void 0 && message.chartId !== this.options.expectedChartId && (identityRequired || message.chartId !== void 0);
+      const workspaceMismatch = this.options.expectedWorkspaceId !== void 0 && message.workspaceId !== this.options.expectedWorkspaceId && (identityRequired || message.workspaceId !== void 0);
+      if (chartMismatch || workspaceMismatch) {
         this.showError("mismatch");
         return;
       }
       switch (message.type) {
         case "seatlayer.designer.ready":
+          this.identityEstablished = true;
+          this.sessionExpiresAt = message.expiresAt;
           this.phase = "ready";
           this.clearTimeoutTimer();
           this.removeOverlay();
@@ -1603,6 +1581,25 @@ var EmbeddedDesigner = class {
   getIframe() {
     return this.frame;
   }
+  /** Update iframe sizing without replacing the live Designer session. */
+  setSizing(height, minHeight) {
+    this.options = { ...this.options, height, minHeight };
+    if (!this.frame) return;
+    this.stopFill();
+    this.lastAutoHeight = "";
+    if (this.fillEnabled()) {
+      if (!this.pinned) this.setFrameHeight("100%");
+      this.startFill();
+    } else if (!this.pinned) {
+      this.setFrameHeight(`${height}px`);
+    }
+  }
+  /** Update renewal/expiry-recovery policy without replacing the iframe. */
+  setRelaunchPolicy(onRequestRelaunch, autoRenewSession) {
+    this.options = { ...this.options, onRequestRelaunch, autoRenewSession };
+    this.clearRenewTimer();
+    if (this.phase === "ready") this.scheduleRenewal(this.sessionExpiresAt);
+  }
   destroy() {
     window.removeEventListener("message", this.handleMessage);
     this.stopFill();
@@ -1617,6 +1614,8 @@ var EmbeddedDesigner = class {
     this.fillMode = null;
     this.designerOrigin = "";
     this.phase = "loading";
+    this.identityEstablished = false;
+    this.sessionExpiresAt = void 0;
     this.lastAutoHeight = "";
   }
   loadingStateEnabled() {
@@ -1767,6 +1766,7 @@ var EmbeddedDesigner = class {
       else this.frame.setAttribute("style", this.frameStyleBeforeFs);
       if (this.fillEnabled()) this.applyFill();
       else if (this.autoResizeEnabled() && this.lastAutoHeight) this.setFrameHeight(this.lastAutoHeight);
+      else if (typeof this.options.height === "number") this.setFrameHeight(`${this.options.height}px`);
     }
     this.frameStyleBeforeFs = null;
     if (this.docOverflowBeforeFs !== null) {
@@ -2031,6 +2031,7 @@ import {
   tCount
 } from "@seatlayer/core";
 import { isAuthoredSeatView, seatViewDisclosure } from "@seatlayer/core/view3d/crossfade/panorama";
+import { seatConfidenceDisclosure } from "@seatlayer/core/core/seatConfidence";
 import {
   browserPanoramaConstraints,
   loadPanoramaImage,
@@ -2328,7 +2329,7 @@ async function loadHostedCheckout() {
       cdnChunkUrl("seatlayer-checkout.mjs")
     );
   }
-  return import("./hostedCheckout-F6C6VCCG.js");
+  return import("./hostedCheckout-GVS6UKYA.js");
 }
 function paymentsOffReason(reason) {
   return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
@@ -2344,7 +2345,12 @@ var CSS = (
      never inherits (or fights) the host page's own timing. Values mirror
      docs/motion-system-2026-08-01.md \xA72. */
   --slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;
-  --slm-mo-out:cubic-bezier(0.2,0.8,0.2,1);--slm-mo-exit:cubic-bezier(0.4,0,1,1)}
+  --slm-mo-out:cubic-bezier(0.2,0.8,0.2,1);--slm-mo-exit:cubic-bezier(0.4,0,1,1);
+  /* Semantic palette tokens, defined here (not resolveTokens) because they are
+     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-picker *{box-sizing:border-box;margin:0;padding:0}
 .sl-picker button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 
@@ -2370,21 +2376,41 @@ var CSS = (
 .sl-close.on{display:inline-flex}
 .sl-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
 
-/* A page or popup may already own the event heading. In that case only the
-   duplicate identity disappears; operational header controls stay available.
-   Zero block padding lets an otherwise-empty header collapse completely. */
-.sl-picker[data-event-details-hidden="true"] .sl-head{padding-block:0;border-bottom-width:0}
-.sl-picker[data-event-details-hidden="true"] .sl-logo,
-.sl-picker[data-event-details-hidden="true"] .sl-head-info{display:none!important}
-.sl-picker[data-event-details-hidden="true"] .sl-hold-pill.on,
-.sl-picker[data-event-details-hidden="true"] .sl-closed-pill.on,
-.sl-picker[data-event-details-hidden="true"] .sl-close.on{margin-block:10px}
+/* A page or popup may already own the event heading \u2014 but "already" is true at
+   load and false thirty seconds later: the buyer scrolls, the sheet opens over
+   the map, fullscreen removes the page, and two-tab comparison shopping is
+   normal ticket behaviour. So identity DEMOTES instead of disappearing: one
+   compact line (thumb + name) that answers "which event is this money for"
+   without competing with the host's own heading. The hold clock keeps a
+   labelled row around it instead of floating in a dark corner. */
+.sl-picker[data-event-details-hidden="true"] .sl-head{padding-block:7px}
+.sl-picker[data-event-details-hidden="true"] .sl-logo{width:22px;height:22px;border-radius:6px;font-size:11px}
+.sl-picker[data-event-details-hidden="true"] .sl-head-name{font-size:12.5px}
+.sl-picker[data-event-details-hidden="true"] .sl-head-meta{display:none}
 
 /* body */
 .sl-body{display:flex;flex:1;min-height:0}
 .sl-map{position:relative;flex:1;min-width:0}
 .sl-map-host{position:absolute;inset:0}
 .sl-side{width:300px;flex:none;border-left:1px solid var(--sl-line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
+/* Wide-layout panel collapse: THE CHART IS THE PRODUCT, and a fixed 300px
+   panel holding an empty cart is the map's room spent on nothing. The panel
+   slides to zero (children keep their laid-out width so text doesn't rewrap
+   mid-slide); the "Tickets" pill in the top-right region brings it back, and
+   the first seat landing in the cart reopens it automatically \u2014 a collapsed
+   panel must never hide a checkout. */
+.sl-picker[data-layout="wide"] .sl-side{transition:width var(--slm-mo-slow) var(--slm-mo-out)}
+.sl-picker[data-layout="wide"][data-side-collapsed="true"] .sl-side{width:0;min-width:0;border-left-width:0}
+/* min-width:0 above is load-bearing: the panel is a flex item, and its
+   automatic minimum size (from these 300px-wide children) would otherwise
+   clamp the explicit width:0 straight back to 300 \u2014 verified in-browser. */
+.sl-picker[data-layout="wide"][data-side-collapsed="true"] .sl-side>*{min-width:300px}
+.sl-side-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;
+  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
+  background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);transition:border-color .15s}
+.sl-side-toggle:hover{border-color:var(--sl-muted)}
+.sl-side-toggle svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-picker[data-layout="narrow"] .sl-side-toggle{display:none}
 
 /* narrow (container < 640px): map-first \u2014 the map claims ~80-85% of the
    container and the side panel becomes a PEEKING bottom sheet (AXS/Ticketmaster
@@ -2467,6 +2493,15 @@ var CSS = (
    the buyer explicitly opens the ticket panel. */
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filtersec.has{display:block!important}
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filters.has{display:flex!important}
+/* The price list is the mobile buyer's ONLY legend \u2014 colour \u2192 ticket type \u2192
+   price \u2192 how many are left. Hiding it in the peek state is right (map-first);
+   never restoring it forced phone buyers to tap dots to learn prices. The OPEN
+   sheet brings it back, exactly like the filters row above. The tray hint comes
+   back with it: the first-time buyer on a phone needs the instruction more than
+   the desktop buyer, not less. */
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-prices-sec{display:flex!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-prices{display:flex!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-tray-hint{display:block!important}
 .sl-cbbtn{width:32px;height:32px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-cbbtn:hover{border-color:var(--sl-muted)}
@@ -2476,13 +2511,13 @@ 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:9px;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)}
 .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-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:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
+.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}
 .sl-price-select{min-height:32px;max-width:130px;padding:5px 28px 5px 9px;border:1px solid var(--sl-line);border-radius:9px;
   background:var(--sl-surface);color:var(--sl-text);font:inherit;font-size:11px;font-weight:750;letter-spacing:0;text-transform:none}
@@ -2492,7 +2527,7 @@ 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:9px;font-weight:750}
+.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-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}
@@ -2535,7 +2570,7 @@ var CSS = (
 .sl-chip-id .fld{min-width:0}
 .sl-chip-id .fld.sec{flex:1}
 .sl-chip-id .fld.mid{flex:none;text-align:center}
-.sl-chip-eb{display:block;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:1px}
+.sl-chip-eb{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:1px}
 .sl-chip-id .val{display:block;font-weight:600;font-size:13px;line-height:1.25;white-space:nowrap}
 .sl-chip-id .fld.sec .val{overflow:hidden;text-overflow:ellipsis}
 .sl-chip-sub{display:flex;align-items:center;gap:6px;min-width:0}
@@ -2545,7 +2580,7 @@ var CSS = (
 .sl-chip .rm,.sl-chip .view{flex:1;min-height:26px;border-radius:0;display:flex;align-items:center;justify-content:center;
   color:var(--sl-muted);transition:color .15s,background .15s}
 .sl-chip .view{border-top:1px solid var(--sl-line)}
-.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:#e5484d;background:color-mix(in srgb,#e5484d 9%,transparent)}
+.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:var(--sl-danger);background:color-mix(in srgb,var(--sl-danger) 9%,transparent)}
 .sl-chip .view:hover,.sl-chip .view:focus-visible{color:var(--sl-text);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
 .sl-chip .rm svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
 .sl-chip .view svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
@@ -2555,7 +2590,7 @@ var CSS = (
 .sl-live{display:none;align-items:center;gap:7px;margin:10px 14px 0;padding:7px 9px;flex:none;
   border:1px solid var(--sl-line);border-radius:8px;background:color-mix(in srgb,var(--sl-accent) 4%,var(--sl-surface));
   font-size:11px;color:var(--sl-muted)}
-.sl-live .dot{width:6px;height:6px;border-radius:999px;background:#22a06b;box-shadow:0 0 6px rgba(34,160,107,.75);flex:none}
+.sl-live .dot{width:6px;height:6px;border-radius:999px;background:var(--sl-success);box-shadow:0 0 6px color-mix(in srgb,var(--sl-success) 75%,transparent);flex:none}
 .sl-live span:last-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-live.on{display:flex;animation:slNoticeIn .38s cubic-bezier(.2,.8,.2,1) both}
 
@@ -2625,17 +2660,17 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-left"]{max-width:30%}
 .sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-center"]{max-width:44%}
 
-/* TEST MODE is environment context, not an action. A clipped corner ribbon
-   keeps it persistent without impersonating a button or competing with Map/3D.
-   The top-left interactive region moves below it only on test events. */
-.sl-testbadge{position:absolute;top:17px;left:-38px;z-index:6;width:142px;padding:5px 0;
-  transform:rotate(-45deg);text-align:center;pointer-events:none;
-  font-size:9.5px;font-weight:850;letter-spacing:.13em;line-height:1.2;text-transform:uppercase;
-  white-space:nowrap;background:var(--sl-accent);color:var(--sl-accent-ink);
-  box-shadow:0 2px 8px rgba(0,0,0,.28)}
-.sl-picker[data-event-mode="test"] .sl-anchor[data-region="top-left"]{top:96px}
-.sl-picker[data-layout="narrow"] .sl-testbadge{top:14px;left:-35px;width:128px;font-size:8.5px}
-.sl-picker[data-layout="narrow"][data-event-mode="test"] .sl-anchor[data-region="top-left"]{top:88px}
+/* TEST MODE is environment context, not an action. A small squared chip that
+   flows FIRST in the top-left anchor region: the old rotated corner ribbon sat
+   at a negative offset and was clipped by the widget root's rounded
+   overflow:hidden (its ends cut mid-word), and its accent fill made an
+   environment flag wear the same gold as "buy". Amber warning tone, dashed
+   border \u2014 reads as a tag, never as a control; the a11y chips wrap beside it
+   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));
+  border:1px dashed color-mix(in srgb,var(--sl-warn) 55%,transparent)}
 
 /* zoom column (flows within the bottom-right region) */
 .sl-zoom{display:flex;flex-direction:column;gap:6px}
@@ -2645,6 +2680,18 @@ var CSS = (
   color:var(--sl-text);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-zoom button:hover{border-color:var(--sl-muted)}
 .sl-zoom svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+/* Full-screen promotion on phones: the capability existed (native + iOS overlay
+   + framed-host paths) but hid as the 4th unlabelled glyph in a corner stack.
+   On narrow layouts dockLayoutChrome moves the SAME button into the top-right
+   region beside Map|3D and this class dresses it as a labelled pill \u2014 the one
+   accelerator with the highest payoff on a small screen gets words. */
+.sl-zfs-lbl{display:none}
+.sl-fs-pill.sl-fs-pill{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:40px;height:auto;
+  padding:0 13px;gap:6px;border-radius:999px;font-size:11px;font-weight:800;
+  background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);transition:border-color .15s}
+.sl-fs-pill.sl-fs-pill:hover{border-color:var(--sl-muted)}
+.sl-fs-pill svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-fs-pill .sl-zfs-lbl{display:inline;letter-spacing:.02em;white-space:nowrap}
 
 /* toast + boot states (toast flows in the bottom-center region) */
 .sl-toast{transform:translateY(6px) scale(.98);max-width:100%;
@@ -2655,9 +2702,9 @@ var CSS = (
 .sl-toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:12px;padding-right:8px}
 .sl-toast-action{min-height:30px;padding:5px 10px;border-radius:999px;background:var(--sl-accent);color:var(--sl-accent-ink);
   font:inherit;font-weight:800}
-.sl-toast[data-tone="error"]{border-color:#ef4444}
+.sl-toast[data-tone="error"]{border-color:var(--sl-danger)}
 .sl-toast[data-tone="warning"]{border-color:var(--sl-accent)}
-.sl-toast[data-tone="success"]{border-color:#22c55e}
+.sl-toast[data-tone="success"]{border-color:var(--sl-success)}
 .sl-toast.on[data-tone="error"]{animation:slToastNudge .32s ease-out}
 .sl-boot{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:10px;background:var(--sl-bg);font-size:13px;font-weight:600;color:var(--sl-muted)}
@@ -2699,10 +2746,9 @@ var CSS = (
 .sl-booked.on .sl-booked-title{animation-delay:.22s}
 .sl-booked.on .sl-booked-sub{animation-delay:.3s}
 
-/* sold-out overlay \u2014 every SEATED category's live availability is 0. Centered
-   over the map; a stub (disabled) "Join waitlist" button, exactly like the page.
-   Suppressed when GA areas exist (GA capacity isn't seat-counted). Clears live
-   the moment WS frees a seat up. */
+/* sold-out overlay \u2014 every SEATED category's live availability is 0. This is
+   informational only: no waitlist workflow exists. Suppressed when GA areas
+   exist (GA capacity isn't seat-counted). Clears live when WS frees a seat. */
 .sl-soldout{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;
   justify-content:center;text-align:center;gap:8px;padding:24px;
   background:color-mix(in srgb,var(--sl-bg) 82%,transparent);backdrop-filter:blur(4px)}
@@ -2710,9 +2756,6 @@ var CSS = (
 .sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent);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}
-.sl-picker .sl-soldout-btn{margin-top:10px;min-height:40px;padding:10px 18px;border-radius:var(--sl-r-sm);
-  background:var(--sl-surface);color:var(--sl-muted);border:1px solid var(--sl-line);font-weight:800;font-size:13px;
-  cursor:not-allowed;opacity:.85}
 
 /* sales-closed pill (header) \u2014 persistent read-only state when the event's sales
    window is closed at load or closes live mid-session. Neutral (not accent) so it
@@ -2757,7 +2800,7 @@ var CSS = (
 .sl-confirm-field{min-width:0;padding:12px 11px 10px;border-right:1px solid var(--sl-line)}
 .sl-confirm-field:last-child{border-right:0;text-align:center}
 .sl-confirm-field:nth-child(2){text-align:center}
-.sl-confirm-key{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-confirm-key{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
 .sl-confirm-value{display:block;margin-top:4px;color:var(--sl-text);font-size:17px;line-height:1.1;font-weight:850;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* Long venue section names must read in full: smaller type + up to two lines
@@ -2822,7 +2865,7 @@ var CSS = (
 .sl-tip-field{min-width:0;padding:6px 9px;border-right:1px solid var(--sl-line)}
 .sl-tip-field:last-child{border-right:0;text-align:center}
 .sl-tip-grid:not(.one) .sl-tip-field:nth-child(2){text-align:center}
-.sl-tip-key{display:block;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-tip-key{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
 .sl-tip-val{display:block;margin-top:2px;color:var(--sl-text);font-size:13px;line-height:1.1;font-weight:750;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-tip-cat{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;
@@ -2830,7 +2873,7 @@ var CSS = (
 .sl-tip-dot{width:8px;height:8px;border-radius:50%;flex:none}
 .sl-tip-name{color:var(--sl-muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-tip-amt{margin-left:auto;font-weight:800;color:var(--sl-text);font-variant-numeric:tabular-nums;font-size:12px}
-.sl-tip-status{padding:5px 10px 7px;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sl-muted)}
+.sl-tip-status{padding:5px 10px 7px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sl-muted)}
 
 /* Best available is a first-class shortcut, not an anonymous utility row. */
 .sl-ba{position:relative;flex:none;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
@@ -2846,12 +2889,12 @@ var CSS = (
    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:#c9a24b;background:color-mix(in srgb,#e8c15a 10%,var(--sl-surface));
-  border:1px solid color-mix(in srgb,#e8c15a 34%,var(--sl-line));transition:filter .15s,background .15s,color .15s}
-.sl-ba-premium .star{font-size:12px;line-height:1;color:#e8c15a}
+  color:var(--sl-premium-deep);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)}
-.sl-ba-premium.on{color:#1c1608;background:linear-gradient(135deg,#f0cf6b,#e0b23f);border-color:transparent;
-  box-shadow:0 6px 16px color-mix(in srgb,#e8c15a 26%,transparent)}
+.sl-ba-premium.on{color:var(--sl-premium-ink);background:linear-gradient(135deg,#f0cf6b,#e0b23f);border-color:transparent;
+  box-shadow:0 6px 16px color-mix(in srgb,var(--sl-premium) 26%,transparent)}
 .sl-ba-premium.on .star{color:#5a4410}
 .sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:8px;
   font:inherit;font-size:11px;padding:7px 8px;min-width:0;width:100%;max-width:none}
@@ -2863,7 +2906,15 @@ var CSS = (
   color:var(--sl-accent-ink);font-weight:800;font-size:12px;transition:filter .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:6px;
   box-shadow:0 8px 18px color-mix(in srgb,var(--sl-accent) 18%,transparent)}
 .sl-picker .sl-ba-go:hover{filter:brightness(1.06)}
-.sl-picker .sl-ba-go:disabled{opacity:.62;cursor:wait}
+/* ONE disabled language, shared with the checkout CTA: surface + muted ink +
+   not-allowed. A gold button at 62% still reads as gold, and cursor:wait means
+   "working" \u2014 that pairing made a dead control look live. The wait cursor is
+   reserved for the genuinely in-flight search, which keeps its accent fill
+   via .sl-busy. */
+.sl-picker .sl-ba-go:disabled{background:var(--sl-surface);color:var(--sl-muted);cursor:not-allowed;
+  filter:none;box-shadow:none}
+.sl-picker .sl-ba-go.sl-busy:disabled{background:var(--sl-accent);color:var(--sl-accent-ink);opacity:.85;cursor:wait;
+  box-shadow:0 8px 18px color-mix(in srgb,var(--sl-accent) 18%,transparent)}
 .sl-ba-replace{grid-column:1/-1;padding:3px 0 1px}
 .sl-ba-replace b{display:block;font-size:12.5px}
 .sl-ba-replace span{display:block;margin-top:3px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
@@ -2880,6 +2931,35 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-ba-qty button{width:30px;height:30px}
 .sl-picker[data-layout="narrow"] .sl-ba-go{min-height:40px}
 
+/* Sales-closed is a designed state, not a set of disables: one statement in
+   the tray where the buying flow was, carrying the event's own date so the
+   buyer knows which night the verdict belongs to. Neutral like the header
+   pill \u2014 "unavailable" never wears the accent. */
+.sl-closed-note{flex:none;display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:13px;
+  border:1px solid var(--sl-line);background:color-mix(in srgb,var(--sl-text) 5%,var(--sl-surface))}
+.sl-closed-note b{font-size:13px;font-weight:850}
+.sl-closed-note span{font-size:11.5px;line-height:1.45;color:var(--sl-muted)}
+.sl-closed-note .when{display:block;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--sl-text)}
+
+/* 44px HIT FLOOR ON TOUCH. Visual sizes stay exactly as designed \u2014 the target
+   grows through an invisible centred pseudo-element, the same grow-the-target-
+   not-the-ink pattern the hosted event page documents for its footer links.
+   Applied only to controls with clearance around them; tightly stacked pairs
+   (the cart chip's remove/view rail) instead get real height on narrow. */
+@media (pointer:coarse){
+  .sl-zoom button,.sl-cbbtn,.sl-close,.sl-ga-qty button,.sl-ba-qty button,.sl-price-more,
+  .sl-hold-change,.sl-seccard-x,.sl-fs-pill,.sl-side-toggle{position:relative}
+  .sl-zoom button::after,.sl-cbbtn::after,.sl-close::after,.sl-ga-qty button::after,.sl-ba-qty button::after,
+  .sl-price-more::after,.sl-hold-change::after,.sl-seccard-x::after,.sl-fs-pill::after,.sl-side-toggle::after{
+    content:'';position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);
+    transform:translate(-50%,-50%)}
+  /* The chip rail stacks remove over view in ~53px \u2014 pseudo-targets would
+     overlap and make a destructive tap ambiguous. Give the pair real height. */
+  .sl-picker[data-layout="narrow"] .sl-chip{min-height:64px}
+  .sl-picker[data-layout="narrow"] .sl-chip .rm,
+  .sl-picker[data-layout="narrow"] .sl-chip .view{min-height:32px}
+}
+
 /* screen-reader live region */
 .sl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
@@ -2914,6 +2994,12 @@ var CSS = (
    Map|3D toggle and the seat confirm both stay usable over it. */
 .sl-view3d{position:absolute;inset:0;z-index:4;opacity:0;touch-action:none;
   transition:opacity .3s ease;background:radial-gradient(120% 120% at 50% 0%,#191f28 0%,#0d1014 70%)}
+.sl-view3d.has-comparison,.sl-view3d.has-passport{z-index:20}
+/* Confirm mode normally disables the entire GL sibling. Modal surfaces live
+   inside that sibling, so explicitly restore pointer input only while one is
+   open; their own inert contract keeps the venue underneath unavailable. */
+.sl-picker[data-confirming="true"] .sl-view3d.has-comparison,
+.sl-picker[data-confirming="true"] .sl-view3d.has-passport{pointer-events:auto}
 .sl-view3d canvas{display:block;width:100%;height:100%}
 .sl-view3d canvas:focus-visible{outline:2px solid var(--sl-accent);outline-offset:-3px}
 .sl-view3d-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
@@ -2922,10 +3008,13 @@ var CSS = (
   border:2px solid rgba(217,226,242,.28);border-top-color:#d9e2f2;animation:slSpin .8s linear infinite}
 [data-view3d=on] .sl-chips,[data-view3d=on] .sl-rungs{display:none}
 .sl-view3d-back{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
-  padding:7px 13px 7px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;
+  min-height:44px;padding:7px 13px 7px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;
   color:#e6edf3;background:rgba(10,14,20,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
 .sl-view3d-back:hover,.sl-view3d-back:focus-visible{background:rgba(16,22,30,.82);border-color:rgba(255,255,255,.4)}
 .sl-view3d-back svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
+/* Map|3D already exits an overview to the 2D map. Reserve Back for the one
+   state where it adds meaning: returning from an exact seat to the venue. */
+.sl-view3d:not(.is-seat-focused) .sl-view3d-back{display:none}
 .sl-view3d-fs{position:absolute;top:12px;right:12px;z-index:2;min-width:44px;min-height:44px;padding:8px 12px;
   border-radius:999px;font-size:16px;color:#e6edf3;background:rgba(10,14,20,.62);
   border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
@@ -2959,6 +3048,7 @@ var CSS = (
 .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-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);
   border:1px solid rgba(150,165,205,.45);backdrop-filter:blur(6px);cursor:pointer}
@@ -2972,7 +3062,22 @@ var CSS = (
 /* On phones the library owns the bottom edge for seat/panorama/overview actions.
    Keep venue navigation in a separate top rail so those control families never
    stack over one another. */
-.sl-picker[data-layout="narrow"] .sl-view3d-nav{top:68px;bottom:auto;max-width:calc(100% - 24px)}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav{left:120px;top:12px;bottom:auto;max-width:calc(100% - 132px)}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav-toggle{display:inline-flex!important;align-items:center;pointer-events:auto;min-height:44px}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav:not(.is-open)>div{display:none!important}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open{left:12px;top:68px;max-width:calc(100% - 24px);padding:8px;
+  border:1px solid rgba(150,165,205,.35);border-radius:14px;background:rgba(8,12,22,.9);backdrop-filter:blur(10px)}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open>div{display:flex}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open .sl-view3d-locator{display:grid;grid-template-columns:1fr 1fr;width:100%;overflow:visible}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open .sl-view3d-locator select{width:100%;min-width:0;flex:auto}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open .sl-view3d-locator button{width:100%}
+/* Seat-eye is a decision state, not another venue-navigation state. Once the
+   buyer arrives, clear the floor/area/locator rails and the module's duplicate
+   Overview action. The picker-owned Back button becomes the one predictable
+   escape: seat -> venue -> 2D map. */
+.sl-view3d.is-seat-focused .sl-view3d-nav,
+.sl-view3d.is-seat-focused .sl-3d-overview-control,
+.sl-view3d.is-seat-focused .sl-view3d-compare-saved{display:none!important}
 /* While immersed, the 2D-only chrome is meaningless \u2014 hide it, keep Map|3D. */
 .sl-picker[data-view3d="on"] .sl-rungs,
 .sl-picker[data-view3d="on"] .sl-floors,
@@ -2983,6 +3088,130 @@ var CSS = (
 .sl-picker[data-view3d="on"] .sl-confirm{left:50%!important;top:auto!important;bottom:16px;
   transform:translateX(-50%);width:min(342px,calc(100% - 24px))}
 .sl-picker[data-view3d="on"] .sl-confirm[data-placement]{transform:translateX(-50%)}
+.sl-confirm-inspect-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
+.sl-confirm-inspect-row .sl-confirm-3d{margin-top:0;min-height:44px}
+.sl-confirm-compare{min-height:44px;padding:8px;border-radius:8px;border:1px solid var(--sl-line);
+  display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:800;
+  color:var(--sl-text);background:transparent}
+.sl-confirm-compare:hover,.sl-confirm-compare:focus-visible{border-color:var(--sl-accent);
+  background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
+.sl-confirm-compare:disabled{opacity:.62;cursor:default}
+.sl-confirm-confidence{width:100%;min-height:44px;margin-top:8px;padding:8px 10px;border-radius:9px;
+  border:1px solid color-mix(in srgb,var(--sl-accent) 35%,var(--sl-line));display:flex;align-items:center;
+  justify-content:space-between;gap:10px;text-align:left;color:var(--sl-text);
+  background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface))}
+.sl-confirm-confidence>span{min-width:0}
+.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: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
+   row. Truth-bearing accessibility/restriction copy is never hidden. */
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm{bottom:10px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-field{padding:8px 9px 7px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-value{font-size:14px;margin-top:2px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-field:first-child .sl-confirm-value{font-size:12px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-cat{padding:7px 10px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-price{font-size:15px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-body{padding:8px 10px 9px}
+.sl-picker[data-view3d="on"][data-layout="narrow"] .sl-confirm-row{margin-top:7px}
+/* A short embedded/mobile picker cannot afford a full decision sheet over a
+   285px map. Keep three 44px action rows and move all disclosure into the
+   passport instead of hiding it without a route back. */
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm{bottom:6px}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-grid,
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-cat,
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-body>.sl-cx{display:none}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-body{padding:6px 8px 7px}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-confidence{margin-top:0}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-confidence em{display:block;margin-bottom:2px;
+  color:var(--sl-text);font-size:12px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-confidence strong{font-size:9.5px}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-confidence small{display:none}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-inspect-row{margin-top:5px}
+.sl-picker[data-view3d="on"][data-layout="narrow"][data-density="compact"] .sl-confirm-row{margin-top:5px}
+
+/* Saved comparison lives in the top journey row, away from checkout, arrival
+   controls and the bottom-right privacy position. */
+.sl-view3d-compare-saved{position:absolute;top:12px;left:136px;z-index:5;display:flex;align-items:stretch;
+  max-width:180px;min-height:38px;border-radius:999px;overflow:hidden;color:#e6edf3;
+  background:rgba(10,14,20,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
+.sl-view3d-compare-saved button{min-width:0;padding:7px 10px;color:inherit;font-size:11px;font-weight:800;white-space:nowrap}
+.sl-view3d-compare-saved .main{overflow:hidden;text-overflow:ellipsis}
+.sl-view3d-compare-saved .clear{width:34px;padding:7px;border-left:1px solid rgba(255,255,255,.18)}
+.sl-view3d-compare-saved button:hover,.sl-view3d-compare-saved button:focus-visible{background:rgba(255,255,255,.1)}
+.sl-picker[data-layout="narrow"] .sl-view3d-compare-saved{left:126px;max-width:calc(100% - 194px);min-height:44px}
+
+/* An unavailable seat is still inspectable. This compact, non-modal status
+   card explains the exact chair the buyer touched without selecting it or
+   obscuring the venue with the full purchase confirmation sheet. */
+.sl-view3d-unavailable{position:absolute;left:50%;bottom:18px;z-index:9;display:grid;
+  grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;width:min(330px,calc(100% - 24px));
+  padding:13px 14px;border:1px solid rgba(255,255,255,.22);border-radius:14px;
+  color:#eef3fb;background:rgba(10,14,22,.94);box-shadow:0 18px 48px rgba(0,0,0,.48);
+  backdrop-filter:blur(10px);transform:translateX(-50%)}
+.sl-view3d-unavailable[data-state="held"]{border-color:rgba(242,168,56,.7)}
+.sl-view3d-unavailable[data-state="sold"],.sl-view3d-unavailable[data-state="dimmed"]{border-color:rgba(160,170,188,.48)}
+.sl-view3d-unavailable-copy{min-width:0}
+.sl-view3d-unavailable-eyebrow{display:block;font-size:9px;line-height:1.2;letter-spacing:.13em;
+  text-transform:uppercase;color:#aab7cc;font-weight:850}
+.sl-view3d-unavailable strong{display:block;margin-top:3px;font-size:17px;line-height:1.2}
+.sl-view3d-unavailable p{grid-column:1/-1;margin:4px 0 0;color:#b9c4d7;font-size:11px;line-height:1.4}
+.sl-view3d-unavailable button{align-self:start;min-width:44px;min-height:44px;margin:-5px -6px 0 0;
+  border-radius:999px;color:#eef3fb;font-size:18px;border:1px solid rgba(255,255,255,.18)}
+.sl-view3d-unavailable button:hover,.sl-view3d-unavailable button:focus-visible{background:rgba(255,255,255,.1)}
+.sl-picker[data-layout="narrow"] .sl-view3d-unavailable{bottom:10px;padding-bottom:max(13px,env(safe-area-inset-bottom))}
+
+.sl-view3d-compare-shell{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px}
+.sl-view3d-compare-scrim{position:absolute;inset:0;background:rgba(3,6,12,.74);backdrop-filter:blur(5px)}
+.sl-view3d-compare{position:relative;width:min(720px,100%);max-height:min(680px,calc(100% - 20px));overflow:auto;
+  border:1px solid rgba(160,177,214,.34);border-radius:18px;background:var(--sl-bg);color:var(--sl-text);
+  box-shadow:0 28px 90px rgba(0,0,0,.55);padding:18px}
+.sl-view3d-compare>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
+.sl-view3d-compare>header span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:850}
+.sl-view3d-compare>header strong{display:block;margin-top:4px;font-size:20px}
+.sl-view3d-compare>header button{min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--sl-line);color:var(--sl-text)}
+.sl-view3d-compare-note{margin:12px 0;color:var(--sl-muted);font-size:12px;line-height:1.45}
+.sl-view3d-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.sl-view3d-compare article{min-width:0;padding:14px;border:1px solid var(--sl-line);border-radius:13px;background:var(--sl-surface)}
+.sl-view3d-compare article>span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:850}
+.sl-view3d-compare article>strong{display:block;margin-top:3px;font-size:20px}
+.sl-view3d-compare article>small{display:block;margin-top:3px;color:var(--sl-muted)}
+.sl-view3d-compare dl{margin:12px 0 0}
+.sl-view3d-compare dl div{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr);gap:10px;padding:8px 0;border-top:1px solid var(--sl-line)}
+.sl-view3d-compare dt{font-size:10.5px;color:var(--sl-muted)}
+.sl-view3d-compare dd{margin:0;text-align:right;font-size:11px;font-weight:750;overflow-wrap:anywhere}
+.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-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;
+  padding:18px;border:1px solid rgba(160,177,214,.38);border-radius:18px;background:var(--sl-bg);color:var(--sl-text);
+  box-shadow:0 28px 90px rgba(0,0,0,.6)}
+.sl-view3d-passport>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
+.sl-view3d-passport>header span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:850}
+.sl-view3d-passport>header strong{display:block;margin-top:4px;font-size:20px}
+.sl-view3d-passport>header button{min-width:44px;min-height:44px;border:1px solid var(--sl-line);border-radius:999px;color:var(--sl-text)}
+.sl-view3d-passport-summary{margin:14px 0;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--sl-accent) 9%,var(--sl-surface));
+  border:1px solid color-mix(in srgb,var(--sl-accent) 30%,var(--sl-line))}
+.sl-view3d-passport-summary strong{display:block;font-size:15px}.sl-view3d-passport-summary span{display:block;margin-top:4px;font-size:11px;color:var(--sl-muted)}
+.sl-view3d-passport dl{margin:0}.sl-view3d-passport dl div{display:grid;grid-template-columns:minmax(105px,.75fr) minmax(0,1.25fr);
+  gap:12px;padding:9px 0;border-top:1px solid var(--sl-line)}
+.sl-view3d-passport dt{font-size:10.5px;color:var(--sl-muted)}.sl-view3d-passport dd{margin:0;text-align:right;font-size:11px;font-weight:750;overflow-wrap:anywhere}
+.sl-view3d-passport h4{margin:14px 0 6px;font-size:11px}.sl-view3d-passport ul{margin:0;padding-left:18px;color:var(--sl-muted);font-size:10.5px;line-height:1.5}
+.sl-view3d-passport-note{margin:14px 0 0;color:var(--sl-muted);font-size:10.5px;line-height:1.45}
+@media(max-width:640px){
+  .sl-view3d-compare-shell{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
+  .sl-view3d-compare{width:100%;max-height:100%;padding:14px 14px max(86px,calc(14px + env(safe-area-inset-bottom)));border-radius:15px}
+  .sl-view3d-compare-grid{grid-template-columns:1fr}
+  .sl-view3d-compare article{padding:12px}
+  .sl-view3d-passport-shell{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
+  .sl-view3d-passport{width:100%;max-height:100%;padding:14px 14px max(24px,calc(14px + env(safe-area-inset-bottom)));border-radius:15px}
+}
 
 /* Plain "View from here" action shown when no real photo exists (the synthetic
    thumb is suppressed at card size \u2014 full-screen is where it earns its keep). */
@@ -3100,8 +3329,12 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-minimap{display:none}
 
 /* F4 legend reflection: rows + counts for out-of-band categories read muted */
-.sl-price-row.sl-dim{opacity:.4}
-.sl-seccard-mix-item.sl-dim{opacity:.4}
+/* Out-of-band rows are exactly the rows a buyer reads while deciding whether
+   to widen a filter: whole-row opacity .4 took the label to ~2:1. Dim the
+   SWATCH and soften the numerals; the words stay legible muted ink. */
+.sl-price-row.sl-dim .sl-dot{opacity:.35}
+.sl-price-row.sl-dim .sl-price-label,.sl-price-row.sl-dim .sl-price-left,.sl-price-row.sl-dim .sl-price-amt{color:var(--sl-muted)}
+.sl-seccard-mix-item.sl-dim{opacity:.55}
 
 /* Buyer-journey motion: every animation explains a state transition (selected,
    held, checkout handoff, conflict or booked). No decorative infinite motion
@@ -3227,6 +3460,8 @@ var SeatPicker = class _SeatPicker {
     // state
     this.currency = "USD";
     this.eventTimezone = null;
+    /** The event's formatted date-time (event-zone), reused by the closed-state note. */
+    this.eventWhenText = null;
     this.offerAvailability = null;
     this.hold = null;
     /** Latest server expiry for the open hold (moves on extend). */
@@ -3282,6 +3517,16 @@ var SeatPicker = class _SeatPicker {
     this.view3dGen = 0;
     /** Seat whose 2D confirm card launched "See it in 3D"; re-shown on return. */
     this.view3dReturnSeat = null;
+    /** Current premium 3D journey depth. `null` is the venue; a seat id is the
+     * fixed seat-eye state. It lets Back unwind one step before leaving 3D. */
+    this.view3dTargetSeatId = null;
+    /** Inspection-only comparison. These ids never represent cart selection. */
+    this.view3dCompareSeatIds = [];
+    this.view3dCompareChip = null;
+    this.view3dCompareEl = null;
+    this.view3dCompareCleanup = null;
+    this.view3dPassportEl = null;
+    this.view3dPassportCleanup = null;
     this.floorsEl = null;
     this.secCardEl = null;
     this.viewEl = null;
@@ -3323,6 +3568,9 @@ var SeatPicker = class _SeatPicker {
     this.fsEscHandler = null;
     /** Host-level event chrome owns the duplicate identity outside full screen. */
     this.eventDetailsHidden = false;
+    /** Wide-layout ticket panel collapsed (map owns the full width). */
+    this.sideCollapsed = false;
+    this.sideToggleEl = null;
     /** True once we've asked the host page to pin us fullscreen (framed, no native). */
     this.framedFs = false;
     /** Last height (px) posted to a host frame; dedupes redundant reports. */
@@ -3632,9 +3880,10 @@ var SeatPicker = class _SeatPicker {
     const active = !!document.fullscreenElement || this.fsFallback || this.framedFs;
     const hideEventDetails = this.eventDetailsHidden && !active;
     this.root?.setAttribute("data-event-details-hidden", String(hideEventDetails));
-    this.els.logo?.toggleAttribute("hidden", hideEventDetails);
-    this.els.headInfo?.toggleAttribute("hidden", hideEventDetails);
     this.els.zfs?.setAttribute("aria-pressed", String(active));
+    this.els.zfs?.setAttribute("title", active ? "Exit full screen" : "Full screen");
+    const zfsLabel = this.els.zfs?.querySelector(".sl-zfs-lbl");
+    if (zfsLabel) zfsLabel.textContent = active ? "Exit full screen" : "Full screen";
     this.view3dEl?.querySelector(".sl-view3d-fs")?.setAttribute("aria-pressed", String(active));
   }
   /**
@@ -3692,24 +3941,73 @@ var SeatPicker = class _SeatPicker {
   /** Mount the full picker as a document-level modal. Resolves after render. */
   static async open(options) {
     ensureStyle();
+    const priorFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const scrim = document.createElement("div");
     scrim.className = "sl-modal-scrim";
     const frame = document.createElement("div");
     frame.className = "sl-modal-frame";
+    frame.setAttribute("role", "dialog");
+    frame.setAttribute("aria-modal", "true");
+    frame.setAttribute("aria-label", "Seat selection");
+    frame.tabIndex = -1;
     scrim.appendChild(frame);
     document.body.appendChild(scrim);
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const picker = new _SeatPicker({ ...options, container: frame });
     picker.modalScrim = scrim;
-    picker.prevFocus = document.activeElement;
+    picker.prevFocus = priorFocus;
+    const focusableSelector = [
+      "a[href]",
+      "area[href]",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "iframe",
+      "object",
+      "embed",
+      "summary",
+      "audio[controls]",
+      "video[controls]",
+      '[contenteditable]:not([contenteditable="false"])',
+      "[tabindex]"
+    ].join(",");
+    const activeDialog = () => {
+      const nested = [...frame.querySelectorAll('[role="dialog"][aria-modal="true"]')].filter((dialog) => dialog.isConnected && !dialog.closest('[hidden], [aria-hidden="true"], [inert]'));
+      return nested[nested.length - 1] ?? frame;
+    };
+    const hiddenWithin = (element, scope) => {
+      let current = element;
+      while (current) {
+        const style = window.getComputedStyle(current);
+        if (current.hidden || current.getAttribute("aria-hidden") === "true" || current.hasAttribute("inert") || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse") return true;
+        if (current === scope) return false;
+        current = current.parentElement;
+      }
+      return true;
+    };
+    const tabbableWithin = (scope) => [...scope.querySelectorAll(focusableSelector)].filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && !hiddenWithin(element, scope));
+    const focusEdge = (scope, backwards) => {
+      const tabbable = tabbableWithin(scope);
+      const target = backwards ? tabbable[tabbable.length - 1] : tabbable[0];
+      if (target) target.focus({ preventScroll: true });
+      else {
+        if (!scope.hasAttribute("tabindex")) scope.tabIndex = -1;
+        scope.focus({ preventScroll: true });
+      }
+    };
     let closing = false;
     const close = () => {
       if (closing) return;
       closing = true;
       document.body.style.overflow = prevOverflow;
-      scrim.style.opacity = "0";
-      scrim.style.pointerEvents = "none";
+      if (picker.escHandler) document.removeEventListener("keydown", picker.escHandler);
+      scrim.remove();
+      picker.modalScrim = null;
+      const restoreTarget = picker.prevFocus;
+      picker.prevFocus = null;
+      if (restoreTarget?.isConnected) restoreTarget.focus({ preventScroll: true });
       const finish = () => {
         picker.destroy();
         options.onClose?.();
@@ -3722,6 +4020,28 @@ var SeatPicker = class _SeatPicker {
       if (e.target === scrim) close();
     });
     picker.escHandler = (e) => {
+      if (e.key === "Tab") {
+        if (e.defaultPrevented) return;
+        const scope = activeDialog();
+        const tabbable = tabbableWithin(scope);
+        const first = tabbable[0];
+        const last = tabbable[tabbable.length - 1];
+        const active = document.activeElement;
+        if (!first || !last) {
+          e.preventDefault();
+          focusEdge(scope, e.shiftKey);
+        } else if (active === scope || !active || !scope.contains(active)) {
+          e.preventDefault();
+          (e.shiftKey ? last : first).focus({ preventScroll: true });
+        } else if (e.shiftKey && active === first) {
+          e.preventDefault();
+          last.focus({ preventScroll: true });
+        } else if (!e.shiftKey && active === last) {
+          e.preventDefault();
+          first.focus({ preventScroll: true });
+        }
+        return;
+      }
       if (e.key !== "Escape") return;
       if (picker.tableDialog) {
         e.preventDefault();
@@ -3734,6 +4054,7 @@ var SeatPicker = class _SeatPicker {
         picker.bestAvailableConfirm = false;
         picker.syncTray();
       } else {
+        e.preventDefault();
         close();
       }
     };
@@ -3741,6 +4062,7 @@ var SeatPicker = class _SeatPicker {
     await picker.render();
     picker.els.close?.classList.add("on");
     picker.els.close?.addEventListener("click", close);
+    focusEdge(activeDialog(), false);
     return picker;
   }
   async render() {
@@ -3794,13 +4116,14 @@ var SeatPicker = class _SeatPicker {
         <div class="sl-map">
           <div class="sl-map-host" data-ref="map"></div>
           <div class="sl-zoom" data-ref="zoom">
-            <button type="button" aria-label="Zoom in" data-ref="zin">+</button>
-            <button type="button" aria-label="Zoom out" data-ref="zout">\u2212</button>
-            <button type="button" aria-label="Fit to screen" data-ref="zfit">
+            <button type="button" aria-label="Zoom in" title="Zoom in" data-ref="zin">+</button>
+            <button type="button" aria-label="Zoom out" title="Zoom out" data-ref="zout">\u2212</button>
+            <button type="button" aria-label="Fit to screen" title="Fit to screen" data-ref="zfit">
               <svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
             </button>
-            <button type="button" aria-label="Full screen" aria-pressed="false" data-ref="zfs">
+            <button type="button" aria-label="Full screen" title="Full screen" aria-pressed="false" data-ref="zfs">
               <svg viewBox="0 0 24 24"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+              <span class="sl-zfs-lbl" aria-hidden="true">Full screen</span>
             </button>
           </div>
           <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>Loading seat map\u2026</div>
@@ -3852,8 +4175,10 @@ var SeatPicker = class _SeatPicker {
       if (w <= 0) return;
       this.reportFramedHeight();
       const next = w < 640 ? "narrow" : "wide";
-      if (root.dataset.layout === next) return;
+      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();
     };
@@ -3962,17 +4287,18 @@ var SeatPicker = class _SeatPicker {
       badge.className = "sl-testbadge";
       badge.textContent = t2("picker.testMode");
       badge.setAttribute("aria-label", t2("picker.testMode"));
-      this.els.map.appendChild(badge);
+      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));
     this.currency = info.currency ?? this.opts.currency ?? "USD";
     this.eventTimezone = info.timezone ?? null;
-    const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl;
+    const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl ?? info.posterUrl ?? null;
     if (logoUrl) this.els.logo.innerHTML = `<img src="${logoUrl}" alt="">`;
     else this.els.logo.textContent = (this.opts.theme?.brandName ?? chartTheme?.brandName ?? info.eventName ?? "?").slice(0, 1).toUpperCase();
     this.els.name.textContent = info.eventName ?? "";
     const when = info.startsAt ? formatWhen(info.startsAt, info.timezone ?? null, this.opts.locale) : "";
+    this.eventWhenText = when || null;
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
     this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
@@ -4063,6 +4389,8 @@ var SeatPicker = class _SeatPicker {
     this.buildExtendPrompt();
     this.buildBookedOverlay();
     this.buildSoldoutOverlay();
+    this.buildPanelToggle();
+    if (this.opts.panelCollapsed) this.setPanelCollapsed(true);
     this.dockLayoutChrome();
     await this.restoreRememberedHold();
     if (this.destroyed) return this;
@@ -4109,8 +4437,63 @@ var SeatPicker = class _SeatPicker {
    * re-render the section card in the form the layout wants (docked card/pill
    * on wide, sheet strip on narrow). Runs on every layout flip + once post-render.
    */
+  /**
+   * The wide-layout panel toggle: a labelled pill in the top-right region
+   * beside Map|3D. Collapsing gives the map the panel's 300px; the pill's own
+   * label is the way back ("Tickets"), and syncTray reopens the panel when the
+   * first seat lands so the checkout can never be hidden behind a collapse.
+   */
+  buildPanelToggle() {
+    if (!this.regions["top-right"]) return;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "sl-side-toggle";
+    btn.addEventListener("click", () => this.setPanelCollapsed(!this.sideCollapsed));
+    this.sideToggleEl = btn;
+    this.regions["top-right"].appendChild(btn);
+    this.syncPanelToggle();
+  }
+  syncPanelToggle() {
+    const btn = this.sideToggleEl;
+    if (!btn) return;
+    const collapsed = this.sideCollapsed;
+    btn.setAttribute("aria-expanded", String(!collapsed));
+    btn.setAttribute("aria-label", collapsed ? "Show the ticket panel" : "Hide the ticket panel");
+    btn.innerHTML = collapsed ? '<svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg><span>Tickets</span>' : '<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg><span>Hide panel</span>';
+  }
+  /**
+   * Collapse or reopen the wide-layout ticket panel in place (host-drivable —
+   * a map-first embed can mount collapsed via `panelCollapsed` and reopen on
+   * its own cue). Inert while collapsed so a keyboard buyer cannot tab into a
+   * zero-width panel; narrow layouts ignore the state entirely (the sheet is
+   * already the collapse) but keep it for the next flip back to wide.
+   */
+  setPanelCollapsed(collapsed) {
+    if (this.destroyed) return;
+    this.sideCollapsed = collapsed;
+    this.applyPanelCollapsed();
+    this.scheduleMotion(() => this.controller.zoomToFit(), 340);
+  }
+  /** Idempotent DOM apply, also run on every layout flip (inert must lift on narrow). */
+  applyPanelCollapsed() {
+    const wide = this.root?.dataset.layout !== "narrow";
+    this.root?.setAttribute("data-side-collapsed", String(this.sideCollapsed));
+    this.els.side?.toggleAttribute("inert", this.sideCollapsed && wide);
+    this.syncPanelToggle();
+  }
   dockLayoutChrome() {
     const narrow = this.root?.dataset.layout === "narrow";
+    this.applyPanelCollapsed();
+    const zfs = this.els.zfs;
+    if (zfs) {
+      if (narrow && this.regions["top-right"]) {
+        zfs.classList.add("sl-fs-pill");
+        this.regions["top-right"].appendChild(zfs);
+      } else if (!narrow && this.els.zoom && zfs.parentElement !== this.els.zoom) {
+        zfs.classList.remove("sl-fs-pill");
+        this.els.zoom.appendChild(zfs);
+      }
+    }
     const filters = this.els.filters;
     if (filters) {
       if (this.cbEl) this.els.zoom?.appendChild(this.cbEl);
@@ -4158,14 +4541,14 @@ var SeatPicker = class _SeatPicker {
     const v = t2(key);
     return v === key ? fallback : v;
   }
-  /** Sold-out overlay — centered over the map, disabled waitlist stub (Gap 2). */
+  /** Sold-out overlay — an informational state with no unavailable action. */
   buildSoldoutOverlay() {
     if (!this.els.map) return;
     const el = document.createElement("div");
     el.className = "sl-soldout";
     el.setAttribute("role", "status");
     const name = (this.controller.doc?.theme?.brandName ?? this.opts.theme?.brandName ?? this.els.name?.textContent ?? this.tf("picker.soldOutEyebrow", "This event")).toUpperCase();
-    el.innerHTML = `<div class="sl-soldout-eyebrow">${name}</div><div class="sl-soldout-title">${this.tf("picker.soldOutTitle", "Sold out")}</div><p class="sl-soldout-copy">${this.tf("picker.soldOutCopy", "Every seat is gone. Join the waitlist and we\u2019ll email you if seats are released.")}</p><button type="button" class="sl-soldout-btn" disabled>${this.tf("picker.waitlist", "Join waitlist")}</button>`;
+    el.innerHTML = `<div class="sl-soldout-eyebrow">${name}</div><div class="sl-soldout-title">${this.tf("picker.soldOutTitle", "Sold out")}</div><p class="sl-soldout-copy">${this.tf("picker.soldOutCopy", "No reserved seats are currently available for this event.")}</p>`;
     this.els.map.appendChild(el);
     this.soldoutEl = el;
   }
@@ -4213,6 +4596,9 @@ var SeatPicker = class _SeatPicker {
       text.textContent = this.tf("picker.salesClosedPill", "Sales are closed");
     }
     this.root?.setAttribute("data-sales-closed", String(this.salesClosed));
+    if (this.salesClosed && this.srEl) {
+      this.srEl.textContent = this.tf("picker.salesClosedToast", "Sales are closed for this event.");
+    }
     this.syncCta();
     this.syncTray();
   }
@@ -5058,6 +5444,8 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = seat;
     this.root?.setAttribute("data-confirming", "true");
+    this.els.side?.toggleAttribute("inert", true);
+    Object.values(this.regions).forEach((region) => region.toggleAttribute("inert", true));
     this.controller.setSelectionFocus(seat.id);
     if (previousId && previousId !== seat.id) this.controller.deselect([previousId]);
     if (this.tipEl) this.tipEl.style.display = "none";
@@ -5079,10 +5467,9 @@ var SeatPicker = class _SeatPicker {
     const el = document.createElement("div");
     el.className = "sl-confirm";
     el.setAttribute("role", "dialog");
-    el.setAttribute("aria-modal", "true");
     el.setAttribute("aria-label", `Confirm seat ${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.confirmThumbHtml(seat) : "") + this.see3dConfirmHtml() + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">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>Select</button></div></div>`;
+    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">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>Select</button></div></div>`;
     this.els.map.appendChild(el);
     this.confirmEl = el;
     const thumb = el.querySelector(".sl-confirm-thumb");
@@ -5094,6 +5481,10 @@ var SeatPicker = class _SeatPicker {
     }
     this.reanchorConfirm();
     el.querySelector(".sl-confirm-view")?.addEventListener("click", () => void this.openSeatView(seat));
+    el.querySelector(".sl-confirm-confidence")?.addEventListener("click", (event) => {
+      this.openSeatConfidencePassport(seat, event.currentTarget instanceof HTMLElement ? event.currentTarget : null);
+    });
+    el.querySelector(".sl-confirm-compare")?.addEventListener("click", () => this.saveView3dComparisonSeat(seat));
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         this.dismissConfirm();
@@ -5130,6 +5521,8 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = null;
     this.root?.removeAttribute("data-confirming");
+    Object.values(this.regions).forEach((region) => region.toggleAttribute("inert", false));
+    this.applyPanelCollapsed();
     this.controller.setSelectionFocus(null);
   }
   commitConfirm() {
@@ -5137,12 +5530,14 @@ var SeatPicker = class _SeatPicker {
     this.dismissConfirm();
     this.collapseSectionCard();
     this.syncTray();
+    this.syncSelectionTo3d();
   }
   cancelConfirm() {
     const seat = this.confirmSeat;
     if (!seat) return;
     this.controller.deselect([seat.id]);
     if (this.confirmSeat) this.dismissConfirm();
+    this.syncSelectionTo3d();
     this.root?.focus({ preventScroll: true });
   }
   closeConfirm() {
@@ -5566,19 +5961,24 @@ var SeatPicker = class _SeatPicker {
     const heldItems = this.hold?.items ?? [];
     const parts = [];
     const nextTrayKeys = /* @__PURE__ */ new Set();
-    if (!seats.length && !heldItems.length && !gaAreas.length) {
+    if (this.salesClosed && !seats.length && !heldItems.length) {
+      const closedWhen = this.eventWhenText ? `<span class="when">${String(this.eventWhenText).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c])}</span>` : "";
+      parts.push(
+        `<div class="sl-closed-note" role="status"><b>${this.tf("picker.salesClosedPill", "Sales are closed")}</b><span>${this.tf("picker.salesClosedCopy", "Ticket sales for this event have ended.")}${closedWhen}</span></div>`
+      );
+    } else if (!seats.length && !heldItems.length && !gaAreas.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map, or let us pick the best available for you.</div>`);
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
     const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
-    if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
+    if (!this.salesClosed && !this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
       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>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>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>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + // Premium quick-pick — present only when the chart actually has premium
       // seats (same present-only philosophy as the a11y filter chips).
-      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
+      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go${this.bestAvailableBusy ? " sl-busy" : ""}"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
     }
     const idGrid = (seatId, label, objectType, quantity = 1, objectId, identity) => {
       const esc = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
@@ -5788,11 +6188,16 @@ var SeatPicker = class _SeatPicker {
     }
     if (count !== previousCount) this.animateOnce(this.els.count, "sl-value-pop", 380);
     if (total !== previousTotal) this.animateOnce(this.els.total, "sl-value-pop", 380);
-    if (previousCount === 0 && count > 0) this.animateOnce(this.els.cta, "sl-ready", 520);
+    if (previousCount === 0 && count > 0) {
+      this.animateOnce(this.els.cta, "sl-ready", 520);
+      if (this.sideCollapsed && this.root?.dataset.layout !== "narrow") this.setPanelCollapsed(false);
+    }
     if (this.els.peek) {
       if (count) {
         const holding = !!this.hold && !pendingCount;
         this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><button type="button" class="go sl-sheet-go" data-act="${holding ? "checkout" : "open"}">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</button>`;
+      } else if (this.salesClosed) {
+        this.els.peek.innerHTML = `<span>${this.tf("picker.salesClosedPill", "Sales are closed")}</span>`;
       } else {
         const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
         this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<button type="button" class="go sl-sheet-go" data-act="open">\u2726 Best seats</button>`;
@@ -6439,16 +6844,13 @@ var SeatPicker = class _SeatPicker {
         return null;
       }
     }
-    const doc = this.controller.doc;
-    if (!doc) return null;
-    const activeId = this.controller.getActiveFloorId();
-    const focal = seat.focalPoint ?? doc.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc.focalPoint ?? { x: 0, y: 0 };
-    try {
-      const { generateSeatPanorama } = await loadPanorama();
-      return { url: generateSeatPanorama(seat, focal, this.allSeats()).url, generated: true };
-    } catch {
-      return null;
-    }
+    return {
+      url: "",
+      generated: true,
+      mediaKind: "model",
+      coverage: "exact-seat",
+      sourceLabel: this.tf("picker.chartDerivedModel", "Chart-derived model")
+    };
   }
   /** Route the module's decoupled analytics into the host callback, tagged buyer. */
   emit3dAnalytics(event, props) {
@@ -6472,8 +6874,16 @@ var SeatPicker = class _SeatPicker {
     if (already) {
       this.controller.deselect([seatId]);
       this.dismissConfirm();
+      this.syncSelectionTo3d();
       return;
     }
+    const visualState = this.seatState3dFor(seat);
+    if (visualState !== "available") {
+      this.showUnavailable3dSeat(seat, visualState);
+      this.syncSelectionTo3d();
+      return;
+    }
+    this.dismissUnavailable3dSeat();
     const added = this.controller.select([seatId]);
     if (!added.length) {
       this.syncSelectionTo3d();
@@ -6489,6 +6899,391 @@ var SeatPicker = class _SeatPicker {
     }
     if (this.opts.confirmSelection !== false) this.showConfirm(seat);
     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) {
+    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;
+    const row = this.rowShort(details);
+    const location2 = [section, row ? `Row ${row}` : null, identity].filter(Boolean).join(" \xB7 ");
+    const copy = status === "held" ? {
+      title: this.tf("picker.temporarilyHeld", "Temporarily held"),
+      message: this.tf("picker.heldSeatExplanation", "Another buyer is holding this seat. It may become available again.")
+    } : 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";
+    card.dataset.state = visualState;
+    card.setAttribute("role", "status");
+    card.setAttribute("aria-live", "polite");
+    const eyebrow = document.createElement("span");
+    eyebrow.className = "sl-view3d-unavailable-eyebrow";
+    eyebrow.textContent = location2 || identity;
+    const title = document.createElement("strong");
+    title.textContent = copy.title;
+    const content = document.createElement("div");
+    content.className = "sl-view3d-unavailable-copy";
+    content.append(eyebrow, title);
+    const close = document.createElement("button");
+    close.type = "button";
+    close.setAttribute("aria-label", this.tf("picker.closeSeatStatus", "Close seat status"));
+    close.textContent = "\xD7";
+    const message = document.createElement("p");
+    message.textContent = copy.message;
+    card.append(content, close, message);
+    close.addEventListener("click", () => card.remove());
+    overlay.appendChild(card);
+    this.announceSeat(seat);
+  }
+  dismissUnavailable3dSeat() {
+    this.view3dEl?.querySelector(".sl-view3d-unavailable")?.remove();
+  }
+  /** Comparison belongs to inspection, never selection. The confirm candidate
+   * remains excluded from checkout until Select; saving it releases that
+   * candidate before any comparison state is created. */
+  view3dCompareConfirmHtml(seat) {
+    if (this.buyerView !== "venue3d") return "";
+    const saved = this.view3dCompareSeatIds;
+    const included = saved.includes(seat.id);
+    const label = included ? saved.length > 1 ? this.tf("picker.openComparison", "Open comparison") : this.tf("picker.savedForComparison", "Saved for comparison") : saved.length ? this.tf("picker.compareWithSaved", "Compare with saved") : this.tf("picker.saveToCompare", "Save to compare");
+    return `<button type="button" class="sl-confirm-compare"${included && saved.length === 1 ? " disabled" : ""}><span aria-hidden="true">\u21C4</span><span>${this.escCx(label)}</span></button>`;
+  }
+  seatConfidenceConfirmHtml(seat, compactSummary) {
+    if (this.buyerView !== "venue3d") return "";
+    const disclosure = seatConfidenceDisclosure(seat.confidenceEvidence);
+    const detail = disclosure.modeledTarget ?? disclosure.reality;
+    return `<button type="button" class="sl-confirm-confidence" aria-label="Open seat confidence passport for ${this.escCx(seat.displayLabel ?? seat.label)}"><span><em>${this.escCx(compactSummary)}</em><strong>${this.escCx(disclosure.headline)}</strong><small>${this.escCx(detail)}</small></span><b>Passport</b></button>`;
+  }
+  saveView3dComparisonSeat(seat) {
+    if (this.buyerView !== "venue3d") return;
+    const previous = this.view3dCompareSeatIds;
+    if (!previous.includes(seat.id)) {
+      this.view3dCompareSeatIds = previous.length === 0 ? [seat.id] : [previous[0], seat.id];
+    }
+    if (this.confirmSeat?.id === seat.id) {
+      this.controller.deselect([seat.id]);
+      this.dismissConfirm();
+      this.syncSelectionTo3d();
+      this.syncTray();
+    }
+    this.syncView3dCompareChip();
+    this.emit3dAnalytics("3d_comparison_saved", {
+      seatId: seat.id,
+      count: this.view3dCompareSeatIds.length
+    });
+    if (this.view3dCompareSeatIds.length > 1) this.openView3dComparison();
+    else this.toast(this.tf("picker.chooseAnotherToCompare", "Seat saved. Choose another seat to compare."), "success");
+  }
+  clearView3dComparison() {
+    this.closeView3dComparison(false);
+    this.view3dCompareSeatIds = [];
+    this.view3dCompareChip?.remove();
+    this.view3dCompareChip = null;
+    this.emit3dAnalytics("3d_comparison_cleared");
+  }
+  syncView3dCompareChip() {
+    const overlay = this.view3dEl;
+    if (!overlay || this.view3dCompareSeatIds.length === 0) {
+      this.view3dCompareChip?.remove();
+      this.view3dCompareChip = null;
+      return;
+    }
+    let chip = this.view3dCompareChip;
+    if (!chip) {
+      chip = document.createElement("div");
+      chip.className = "sl-view3d-compare-saved";
+      chip.setAttribute("role", "group");
+      chip.setAttribute("aria-label", "Saved seat comparison");
+      const main2 = document.createElement("button");
+      main2.type = "button";
+      main2.className = "main";
+      main2.addEventListener("click", () => {
+        if (this.view3dCompareSeatIds.length > 1) this.openView3dComparison();
+        else this.toast(this.tf("picker.chooseAnotherToCompare", "Choose another seat to compare."), "neutral");
+      });
+      const clear = document.createElement("button");
+      clear.type = "button";
+      clear.className = "clear";
+      clear.textContent = "\xD7";
+      clear.setAttribute("aria-label", "Clear saved seat comparison");
+      clear.addEventListener("click", () => this.clearView3dComparison());
+      chip.append(main2, clear);
+      overlay.appendChild(chip);
+      this.view3dCompareChip = chip;
+    }
+    const count = this.view3dCompareSeatIds.length;
+    const main = chip.querySelector(".main");
+    if (main) {
+      main.textContent = count > 1 ? `Compare ${count}` : "1 seat saved";
+      main.setAttribute("aria-label", count > 1 ? `Open comparison of ${count} seats` : "One seat saved; choose another to compare");
+    }
+  }
+  view3dComparisonSnapshot(seatId) {
+    const seat = this.allSeats().find((candidate) => candidate.id === seatId);
+    if (!seat) return null;
+    const details = this.controller.seatDetails(seat.id);
+    const cat = this.controller.doc?.categories.find((candidate) => candidate.key === seat.categoryKey);
+    const chartPrice = details?.price ?? (cat?.tiers?.length ? cat.tiers[0].price : cat?.price);
+    const price = chartPrice != null ? this.paidPrice(seat.categoryKey, details?.tierId ?? cat?.tiers?.[0]?.id ?? null, chartPrice) : void 0;
+    const status = this.controller.getStatus(seat.id);
+    const availability = status === "held" ? this.tf("picker.temporarilyHeld", "Temporarily held") : status === "booked" ? this.tf("picker.sold", "Sold") : status === "not_for_sale" ? this.tf("picker.notForSale", "Not for sale") : this.tf("picker.available", "Available");
+    const viewSource = seat.viewUrl ? seatViewDisclosure({
+      url: seat.viewUrl,
+      ...seat.viewMeta?.coverage ? { coverage: seat.viewMeta.coverage } : {},
+      ...seat.viewMeta?.capturedAt ? { capturedAt: seat.viewMeta.capturedAt } : {},
+      ...seat.viewMeta?.sourceLabel ? { sourceLabel: seat.viewMeta.sourceLabel } : {}
+    }) : this.tf("picker.chartDerivedSeatEye", "Live 3D \xB7 chart-derived seat-eye \xB7 not surveyed");
+    const limited = this.limitedViewLabel(seat.commercial) || this.tf("picker.noAuthoredRestriction", "No organizer-authored restriction");
+    const accessibility = details?.wheelchairSpaceType ? `${this.wheelchairProvisionLabel(details.wheelchairSpaceType)} \xB7 metadata, not access certification` : this.tf("picker.noAccessibilityMetadata", "No accessibility metadata supplied");
+    const confidence = seatConfidenceDisclosure(seat.confidenceEvidence);
+    return {
+      seat,
+      label: details?.displayLabel ?? seat.displayLabel ?? seat.label,
+      section: details?.sectionLabel ?? seat.sectionId ?? "\u2014",
+      row: this.rowShort(details) ?? details?.rowLabel ?? "\u2014",
+      category: details?.categoryLabel ?? cat?.label ?? seat.categoryKey,
+      price: price == null ? this.tf("picker.priceNotSupplied", "Not supplied") : this.money(price),
+      availability,
+      selectable: status == null || status === "free",
+      viewSource,
+      limited,
+      accessibility,
+      confidence
+    };
+  }
+  openSeatConfidencePassport(seat, returnFocus = null) {
+    const overlay = this.view3dEl;
+    if (!overlay) return;
+    this.closeSeatConfidencePassport(false);
+    const disclosure = seatConfidenceDisclosure(seat.confidenceEvidence);
+    const evidence = seat.confidenceEvidence;
+    const details = this.controller.seatDetails(seat.id);
+    const safe = (value) => this.escCx(value);
+    const limitations = disclosure.limitations.length ? `<h4>Known limits</h4><ul>${disclosure.limitations.map((item) => `<li>${safe(item)}</li>`).join("")}</ul>` : "";
+    const modeledTarget = disclosure.modeledTarget ? `<div><dt>Modeled target</dt><dd>${safe(disclosure.modeledTarget)}</dd></div>` : "";
+    const evidenceRows = evidence ? `<div><dt>Evidence ID</dt><dd>${safe(evidence.evidenceId)}</dd></div><div><dt>Model version</dt><dd>${safe(evidence.modelVersion)}</dd></div><div><dt>Event configuration</dt><dd>${safe(evidence.eventConfigurationId ?? "Not configuration-specific")}</dd></div><div><dt>Approval</dt><dd>${safe(evidence.approvedByRole ?? "No external approval supplied")}</dd></div>` + (evidence.validUntil ? `<div><dt>Valid until</dt><dd>${safe(evidence.validUntil.slice(0, 10))}</dd></div>` : "") : `<div><dt>Evidence ID</dt><dd>None supplied</dd></div>`;
+    const restriction = this.limitedViewLabel(seat.commercial) || this.tf("picker.noAuthoredRestriction", "No organizer-authored restriction");
+    const commercialRows = `<div><dt>View restriction</dt><dd>${safe(restriction)}</dd></div>` + (seat.commercial?.note ? `<div><dt>Organizer note</dt><dd>${safe(seat.commercial.note)}</dd></div>` : "");
+    const shell = document.createElement("div");
+    shell.className = "sl-view3d-passport-shell";
+    shell.innerHTML = `<div class="sl-view3d-passport-scrim" aria-hidden="true"></div><section class="sl-view3d-passport" role="dialog" aria-modal="true" aria-labelledby="sl-view3d-passport-title"><header><div><span>Seat confidence passport</span><strong id="sl-view3d-passport-title">${safe(details?.displayLabel ?? seat.displayLabel ?? seat.label)}</strong></div><button type="button" data-close aria-label="Close seat confidence passport">\xD7</button></header><div class="sl-view3d-passport-summary"><strong>${safe(disclosure.headline)}</strong><span>${safe(disclosure.coverage)} \xB7 ${safe(disclosure.freshness)}</span></div><dl><div><dt>Model status</dt><dd>${safe(disclosure.model)}</dd></div><div><dt>Reality evidence</dt><dd>${safe(disclosure.reality)}</dd></div><div><dt>Source</dt><dd>${safe(disclosure.provenance)}</dd></div>` + commercialRows + modeledTarget + evidenceRows + `</dl>${limitations}<p class="sl-view3d-passport-note">This passport describes supplied evidence and known limits. It does not guarantee that every temporary obstruction or real-world condition is knowable before the event build.</p></section>`;
+    const background = [.../* @__PURE__ */ new Set([
+      ...overlay.children,
+      ...[...this.els.map.children].filter((element) => element !== overlay)
+    ])].filter((element) => element instanceof HTMLElement);
+    const prior = background.map((element) => ({
+      element,
+      inert: element.inert,
+      ariaHidden: element.getAttribute("aria-hidden")
+    }));
+    for (const element of background) {
+      element.inert = true;
+      element.setAttribute("aria-hidden", "true");
+    }
+    overlay.appendChild(shell);
+    overlay.classList.add("has-passport");
+    this.view3dPassportEl = shell;
+    const dialog = shell.querySelector(".sl-view3d-passport");
+    const controls = () => [...dialog.querySelectorAll('button:not(:disabled),[href],[tabindex]:not([tabindex="-1"])')];
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.closeSeatConfidencePassport();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = controls();
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    this.view3dPassportCleanup = () => {
+      window.removeEventListener("keydown", onKey, true);
+      for (const state of prior) {
+        state.element.inert = state.inert;
+        if (state.ariaHidden === null) state.element.removeAttribute("aria-hidden");
+        else state.element.setAttribute("aria-hidden", state.ariaHidden);
+      }
+      const returnCandidate = returnFocus?.isConnected ? returnFocus : this.confirmEl?.querySelector(".sl-confirm-confidence") ?? this.view3dCompareEl?.querySelector("[data-passport-seat]") ?? null;
+      const returnSurface = returnCandidate?.closest(".sl-confirm,.sl-view3d-compare");
+      if (returnSurface?.isConnected) {
+        returnSurface.inert = false;
+        returnSurface.removeAttribute("aria-hidden");
+      }
+      shell.remove();
+      overlay.classList.remove("has-passport");
+      if (this.view3dPassportEl === shell) this.view3dPassportEl = null;
+      const fallback = returnCandidate ?? this.view3dCompareEl?.querySelector("[data-passport-seat]") ?? this.confirmEl?.querySelector(".sl-confirm-confidence") ?? this.view3dCompareChip?.querySelector(".main");
+      (returnFocus?.isConnected ? returnFocus : fallback)?.focus();
+    };
+    shell.addEventListener("click", (event) => {
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      if (target?.closest("[data-close]") || target?.classList.contains("sl-view3d-passport-scrim")) {
+        this.closeSeatConfidencePassport();
+      }
+    });
+    requestAnimationFrame(() => controls()[0]?.focus());
+    this.emit3dAnalytics("3d_confidence_passport_opened", {
+      seatId: seat.id,
+      evidenceId: evidence?.evidenceId ?? null,
+      eventConfigurationId: evidence?.eventConfigurationId ?? null,
+      modelLevel: evidence?.modelLevel ?? "unverified",
+      realityLevel: evidence?.realityLevel ?? "none"
+    });
+  }
+  closeSeatConfidencePassport(restoreFocus = true) {
+    const cleanup = this.view3dPassportCleanup;
+    this.view3dPassportCleanup = null;
+    if (!cleanup) {
+      this.view3dPassportEl?.remove();
+      this.view3dPassportEl = null;
+      this.view3dEl?.classList.remove("has-passport");
+      return;
+    }
+    if (!restoreFocus) (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.blur();
+    cleanup();
+    if (!restoreFocus) this.root?.focus({ preventScroll: true });
+  }
+  openView3dComparison() {
+    const overlay = this.view3dEl;
+    if (!overlay || this.view3dCompareSeatIds.length < 2) return;
+    this.closeView3dComparison(false);
+    const snapshots = this.view3dCompareSeatIds.map((seatId) => this.view3dComparisonSnapshot(seatId)).filter((value) => !!value);
+    if (snapshots.length < 2) {
+      this.clearView3dComparison();
+      return;
+    }
+    const safe = (value) => this.escCx(value);
+    const shell = document.createElement("div");
+    shell.className = "sl-view3d-compare-shell";
+    const cards = snapshots.map((snapshot, index) => `<article><span>Seat ${index === 0 ? "A" : "B"}</span><strong>${safe(snapshot.label)}</strong><small>Section ${safe(snapshot.section)} \xB7 Row ${safe(snapshot.row)}</small><dl><div><dt>Current price</dt><dd>${safe(snapshot.price)}</dd></div><div><dt>Ticket type</dt><dd>${safe(snapshot.category)}</dd></div><div><dt>Availability</dt><dd>${safe(snapshot.availability)}</dd></div><div><dt>View source</dt><dd>${safe(snapshot.viewSource)}</dd></div><div><dt>View restriction</dt><dd>${safe(snapshot.limited)}</dd></div><div><dt>Seat confidence</dt><dd>${safe(snapshot.confidence.headline)}</dd></div><div><dt>Reality check</dt><dd>${safe(snapshot.confidence.reality)}</dd></div><div><dt>Accessibility</dt><dd>${safe(snapshot.accessibility)}</dd></div></dl><div class="sl-view3d-compare-actions"><button type="button" data-passport-seat="${safe(snapshot.seat.id)}">Passport</button><button type="button" data-view-seat="${safe(snapshot.seat.id)}">View seat</button><button type="button" class="select" data-select-seat="${safe(snapshot.seat.id)}"${snapshot.selectable ? "" : " disabled"}>Select seat</button></div></article>`).join("");
+    shell.innerHTML = `<div class="sl-view3d-compare-scrim" aria-hidden="true"></div><section class="sl-view3d-compare" role="dialog" aria-modal="true" aria-labelledby="sl-view3d-compare-title"><header><div><span>Seat inspection</span><strong id="sl-view3d-compare-title">Compare disclosed attributes</strong></div><button type="button" data-close aria-label="Close seat comparison">\xD7</button></header><p class="sl-view3d-compare-note">Current price and availability come from this picker. Modeled views are chart-derived unless organizer media is labeled; SeatLayer does not invent why a seat has its price.</p><div class="sl-view3d-compare-grid">${cards}</div></section>`;
+    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const background = [...overlay.children].filter((element) => element instanceof HTMLElement);
+    const prior = background.map((element) => ({
+      element,
+      inert: element.inert,
+      ariaHidden: element.getAttribute("aria-hidden")
+    }));
+    for (const element of background) {
+      element.inert = true;
+      element.setAttribute("aria-hidden", "true");
+    }
+    overlay.appendChild(shell);
+    overlay.classList.add("has-comparison");
+    this.view3dCompareEl = shell;
+    const dialog = shell.querySelector(".sl-view3d-compare");
+    const controls = () => [...dialog.querySelectorAll('button:not(:disabled),[href],[tabindex]:not([tabindex="-1"])')];
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        this.closeView3dComparison();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = controls();
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    this.view3dCompareCleanup = () => {
+      window.removeEventListener("keydown", onKey);
+      for (const state of prior) {
+        state.element.inert = state.inert;
+        if (state.ariaHidden === null) state.element.removeAttribute("aria-hidden");
+        else state.element.setAttribute("aria-hidden", state.ariaHidden);
+      }
+      shell.remove();
+      overlay.classList.remove("has-comparison");
+      if (this.view3dCompareEl === shell) this.view3dCompareEl = null;
+      if (previousFocus?.isConnected) previousFocus.focus();
+      else this.view3dCompareChip?.querySelector(".main")?.focus();
+    };
+    shell.querySelector("[data-close]")?.addEventListener("click", () => this.closeView3dComparison());
+    shell.querySelectorAll("[data-passport-seat]").forEach((button) => button.addEventListener("click", () => {
+      const seatId = button.dataset.passportSeat;
+      const seat = seatId ? this.allSeats().find((candidate) => candidate.id === seatId) : void 0;
+      if (seat) this.openSeatConfidencePassport(seat, button);
+    }));
+    shell.querySelectorAll("[data-view-seat]").forEach((button) => button.addEventListener("click", () => {
+      const seatId = button.dataset.viewSeat;
+      this.closeView3dComparison(false);
+      if (seatId) void this.view3dHandle?.flyToSeat(seatId);
+    }));
+    shell.querySelectorAll("[data-select-seat]").forEach((button) => button.addEventListener("click", () => {
+      const seatId = button.dataset.selectSeat;
+      if (seatId) this.selectComparedSeat(seatId);
+    }));
+    requestAnimationFrame(() => controls()[0]?.focus());
+    this.emit3dAnalytics("3d_comparison_opened", { seatIds: this.view3dCompareSeatIds.slice() });
+  }
+  closeView3dComparison(restoreFocus = true) {
+    const cleanup = this.view3dCompareCleanup;
+    this.view3dCompareCleanup = null;
+    if (!cleanup) {
+      this.view3dCompareEl?.remove();
+      this.view3dCompareEl = null;
+      this.view3dEl?.classList.remove("has-comparison");
+      return;
+    }
+    if (!restoreFocus) {
+      const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      active?.blur();
+    }
+    cleanup();
+    if (!restoreFocus) this.root?.focus({ preventScroll: true });
+  }
+  selectComparedSeat(seatId) {
+    if (this.salesClosed) {
+      this.toast(this.tf("picker.salesClosedToast", "Sales are closed for this event."), "warning");
+      return;
+    }
+    const seat = this.allSeats().find((candidate) => candidate.id === seatId);
+    if (!seat) return;
+    this.closeView3dComparison(false);
+    const added = this.controller.select([seatId]);
+    if (!added.length) {
+      this.syncSelectionTo3d();
+      this.toast(this.tf("picker.seatNoLongerAvailable", "That seat is no longer available."), "warning");
+      return;
+    }
+    this.syncSelectionTo3d();
+    this.showConfirm(seat);
+    this.emit3dAnalytics("3d_comparison_selected", { seatId });
   }
   /**
    * The venue-navigation rail inside 3D: levels and areas.
@@ -6517,6 +7312,25 @@ var SeatPicker = class _SeatPicker {
     if (!wantFloors && !wantZones && !wantSections && !wantLocator) return;
     const nav = document.createElement("div");
     nav.className = "sl-view3d-nav";
+    const finderToggle = document.createElement("button");
+    finderToggle.type = "button";
+    finderToggle.className = "sl-view3d-nav-toggle";
+    finderToggle.setAttribute("aria-expanded", "false");
+    const setFinderOpen = (open) => {
+      nav.classList.toggle("is-open", open);
+      finderToggle.setAttribute("aria-expanded", String(open));
+      finderToggle.textContent = open ? "Close seat finder" : "Find a seat";
+    };
+    finderToggle.addEventListener("click", () => setFinderOpen(!nav.classList.contains("is-open")));
+    nav.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape" || !nav.classList.contains("is-open")) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setFinderOpen(false);
+      finderToggle.focus();
+    });
+    setFinderOpen(false);
+    nav.appendChild(finderToggle);
     if (wantFloors) {
       const row = document.createElement("div");
       row.setAttribute("role", "group");
@@ -6534,7 +7348,10 @@ var SeatPicker = class _SeatPicker {
         b.textContent = label;
         b.dataset.floor = index === null ? "" : String(index);
         b.setAttribute("aria-pressed", String(index === null));
-        b.addEventListener("click", () => select(index));
+        b.addEventListener("click", () => {
+          select(index);
+          setFinderOpen(false);
+        });
         pills.push(b);
         row.appendChild(b);
       };
@@ -6573,7 +7390,10 @@ var SeatPicker = class _SeatPicker {
           const b = document.createElement("button");
           b.type = "button";
           b.textContent = e.label;
-          b.addEventListener("click", e.go);
+          b.addEventListener("click", () => {
+            e.go();
+            setFinderOpen(false);
+          });
           row.appendChild(b);
         }
       }
@@ -6592,7 +7412,7 @@ var SeatPicker = class _SeatPicker {
       seatSelect.setAttribute("aria-label", "Choose seat in 3D");
       const view = document.createElement("button");
       view.type = "button";
-      view.textContent = "View seat";
+      view.textContent = "Inspect seat";
       view.disabled = true;
       const fill = (select, placeholder, entries) => {
         select.replaceChildren();
@@ -6648,11 +7468,13 @@ var SeatPicker = class _SeatPicker {
       seatSelect.addEventListener("change", () => {
         const seatId = seatSelect.value;
         view.disabled = !seatId;
-        handle.setSelection(seatId ? [seatId] : []);
       });
       view.addEventListener("click", () => {
         const seatId = seatSelect.value;
-        if (seatId) void handle.flyToSeat(seatId);
+        if (seatId) {
+          setFinderOpen(false);
+          this.onView3dSeatPick(seatId);
+        }
       });
       locator.append(sectionSelect, rowSelect, seatSelect, view);
       nav.appendChild(locator);
@@ -6664,6 +7486,7 @@ var SeatPicker = class _SeatPicker {
     const doc = this.controller.doc;
     if (!doc) return;
     this.buyerView = "venue3d";
+    this.view3dTargetSeatId = null;
     this.opts.onBuyerViewChange?.({ view: "venue3d", ...flySeatId ? { seatId: flySeatId } : {} });
     this.root?.setAttribute("data-view3d", "on");
     this.dismissConfirm();
@@ -6676,7 +7499,22 @@ var SeatPicker = class _SeatPicker {
     back.type = "button";
     back.className = "sl-view3d-back";
     back.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg><span>${this.tf("picker.backToMap", "Back to map")}</span>`;
-    back.addEventListener("click", () => this.exit3d());
+    const backLabel = back.querySelector("span");
+    const setJourneyTarget = (seatId) => {
+      this.view3dTargetSeatId = seatId;
+      const atSeat = !!seatId;
+      overlay.classList.toggle("is-seat-focused", atSeat);
+      const label = atSeat ? this.tf("picker.backToVenue", "Back to venue") : this.tf("picker.backToMap", "Back to map");
+      if (backLabel) backLabel.textContent = label;
+      back.setAttribute("aria-label", label);
+    };
+    back.addEventListener("click", () => {
+      if (this.view3dTargetSeatId && this.view3dHandle) {
+        this.view3dHandle.focusOverview();
+        return;
+      }
+      this.exit3d();
+    });
     overlay.appendChild(back);
     const fullscreen = document.createElement("button");
     fullscreen.type = "button";
@@ -6694,6 +7532,7 @@ var SeatPicker = class _SeatPicker {
     overlay.appendChild(loading);
     this.els.map.appendChild(overlay);
     this.view3dEl = overlay;
+    this.syncView3dCompareChip();
     requestAnimationFrame(() => {
       overlay.style.opacity = "1";
     });
@@ -6709,7 +7548,13 @@ var SeatPicker = class _SeatPicker {
         // phone. The bounded portrait fit was validated against every UX-lab
         // fixture; keep editor previews strict while making buyer seats legible.
         portraitOverviewCrop: true,
+        // Premium buyer mode lands at the modeled seated-eye and locks the
+        // venue orbit there. Explicit look-around rotates at that same origin;
+        // zooming cannot escape through the shell or reveal backstage geometry.
+        arriveAtSeatEye: true,
+        seatViewActionLabel: (seatId) => this.allSeats().find((seat) => seat.id === seatId)?.viewUrl ? this.tf("picker.openAuthored360", "Open venue 360\xB0") : this.tf("picker.lookAroundLive3d", "Look around in live 3D"),
         onSeatPick: (id) => this.onView3dSeatPick(id),
+        onSeatInspect: (id) => this.onView3dSeatPick(id),
         onSectionFocusChange: (sectionId) => {
           const select = overlay.querySelector(
             'select[aria-label="Choose section in 3D"]'
@@ -6721,6 +7566,7 @@ var SeatPicker = class _SeatPicker {
         },
         onViewTargetChange: (seatId) => {
           overlay.querySelector(".sl-view3d-nav")?.classList.toggle("is-seat-focused", !!seatId);
+          setJourneyTarget(seatId);
           this.opts.onBuyerViewChange?.({
             view: "venue3d",
             ...seatId ? { seatId } : {}
@@ -6761,8 +7607,13 @@ var SeatPicker = class _SeatPicker {
     if (this.buyerView !== "venue3d" && !this.view3dEl) return;
     this.view3dGen++;
     this.buyerView = "map";
+    this.view3dTargetSeatId = null;
     this.opts.onBuyerViewChange?.({ view: "map" });
     this.root?.removeAttribute("data-view3d");
+    this.closeSeatConfidencePassport(false);
+    this.closeView3dComparison(false);
+    this.view3dCompareChip?.remove();
+    this.view3dCompareChip = null;
     try {
       this.view3dHandle?.dispose();
     } catch {
@@ -6802,6 +7653,7 @@ var SeatPicker = class _SeatPicker {
     const button = this.els.tray?.querySelector(".sl-ba-go");
     if (button) {
       button.disabled = true;
+      button.classList.add("sl-busy");
       button.innerHTML = '<span class="sl-ba-spin" aria-hidden="true"></span>Finding\u2026';
     }
     try {
@@ -7048,7 +7900,8 @@ var SeatPicker = class _SeatPicker {
     if (this.modalScrim) {
       this.modalScrim.remove();
       this.modalScrim = null;
-      this.prevFocus?.focus?.();
+      if (this.prevFocus?.isConnected) this.prevFocus.focus({ preventScroll: true });
+      this.prevFocus = null;
     }
   }
 };
@@ -7139,46 +7992,17 @@ function attachPickerFrame(iframe, opts = {}) {
   };
 }
 export {
-  ACCESS_LINK_DEFAULTS,
   ApiError,
   BuyerAccessContext,
   BuyerAccessUnavailableError,
   BuyerRealtimeClient,
-  ChannelsMode,
   EmbeddedDesigner,
-  ManageApi,
-  ManageApiError,
-  PUBLIC_CHANNEL_ID,
-  PUBLIC_CHANNEL_NAME,
-  SeatManager,
   SeatPicker,
   SeatingChart,
-  accessIntentDescription,
-  accessIntentLabel,
-  accessLine,
-  accessLinkBadge,
-  accessLinkErrorCopy,
-  accessLinkIsLive,
-  accessLinkPolicyLines,
   attachPickerFrame,
-  bucketRows,
-  bucketRowsHtml,
   createBuyerAccessContext,
   createControllerSink,
-  dropReviewRows,
-  intentForbidsCopy,
-  intentSwitchBlockedCopy,
-  isPublicChannelId,
-  markerLetter,
-  markerOf,
-  mutationCount,
-  needsMoveConfirmation,
   parseTicketOfferAvailability,
-  planAssignment,
-  retryAfterCopy,
-  selectionSources,
-  stateBadge,
-  suggestMarker,
   ticketOfferPrices
 };
 //# sourceMappingURL=index.js.map