/* Event header */
.ev-head { padding-block: var(--space-6) var(--space-8); border-bottom: 1px solid var(--line); }
.ev-crumbs { color: var(--paper-3); font-size: var(--text-xs); margin-bottom: var(--space-6); }
.ev-crumbs a:hover { color: var(--paper); }
.ev-head-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: end; }
.ev-title { font-size: clamp(2rem, 1rem + 4vw, 4.6rem); margin-block: 14px 18px; max-width: 18ch; text-wrap: balance; }
.ev-meta { color: var(--paper-2); font-size: var(--text-lg); line-height: 1.35; }
.ev-meta b { color: var(--paper); font-weight: 600; }
.ev-art { width: 320px; height: 220px; object-fit: cover; border-radius: var(--radius-md); filter: saturate(0.85) contrast(1.05); }
.ev-teams { display: flex; align-items: center; gap: 18px; color: var(--paper-3); }
.ev-teams img { width: 96px; height: 96px; object-fit: contain; }
@media (max-width: 800px) { .ev-head-grid { grid-template-columns: 1fr; } .ev-art { width: 100%; height: 180px; } }

/* Body: map + panel */
.ev-body { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-6); padding-block: var(--space-6); align-items: start; }
.ev-map-col { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 10px; }
.ev-map-bar { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-xs); color: var(--paper-2); }
.ev-map { position: relative; height: calc(100dvh - var(--nav-h) - 80px); min-height: 460px; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% 40%, var(--ink-2), var(--ink-0) 75%); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; touch-action: none; }
.seatmap-svg { width: 100%; height: 100%; cursor: grab; user-select: none; }
.seatmap-svg:active { cursor: grabbing; }

.sm-section .sm-shape { fill: var(--heat, var(--ink-3)); stroke: var(--ink-0); stroke-width: 1.2; transition: fill var(--dur-fast), opacity var(--dur-fast), filter var(--dur-fast); cursor: pointer; }
.sm-section.is-ga .sm-shape { stroke-dasharray: 4 3; stroke: var(--paper-3); }
.sm-section.is-hover .sm-shape, .sm-section.is-peek .sm-shape { filter: brightness(1.35); }
.sm-section:focus-visible { outline: none; }
.sm-section:focus-visible .sm-shape { stroke: var(--paper); stroke-width: 2; }
.sm-section.is-selected .sm-shape { stroke: var(--paper); stroke-width: 1.6; filter: brightness(1.1); }
.has-selection .sm-section:not(.is-selected) .sm-shape { opacity: 0.22; }
.has-selection .sm-section:not(.is-selected):hover .sm-shape { opacity: 0.6; }
.sm-section.is-soldout .sm-shape { fill: var(--ink-2); stroke: var(--ink-3); cursor: not-allowed; }
.sm-label.is-soldout { fill: var(--paper-3); opacity: 0.7; }
.sm-label { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-0); text-anchor: middle; pointer-events: none; font-weight: 500; }
.sm-label.is-small { font-size: 7px; }
.sm-price { font-family: var(--font-mono); font-size: 7.5px; fill: var(--ink-0); text-anchor: middle; pointer-events: none; opacity: 0.8; }
.has-selection .sm-labels text { opacity: 0.25; }
.sm-labels { transition: opacity var(--dur); }
.seatmap-svg[style*="--zoom"] .sm-labels { opacity: calc(1.4 - var(--zoom) * 0.22); }
.sm-stage { fill: var(--ink-3); stroke: var(--paper-3); stroke-width: 1; }
.sm-stage-label, .sm-decor-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; fill: var(--paper-2); text-anchor: middle; pointer-events: none; }
.sm-decor-field { fill: oklch(30% 0.05 150); stroke: oklch(45% 0.06 150); stroke-width: 1.5; }
.sm-field-line { fill: none; stroke: oklch(55% 0.05 150); stroke-width: 1.2; }
.sm-decor-bar, .sm-decor-tower { fill: var(--ink-2); stroke: var(--ink-4); stroke-width: 1; }
.sm-track-outer { fill: none; stroke: var(--ink-3); stroke-width: 30; stroke-linejoin: round; }
.sm-track { fill: none; stroke: var(--ink-4); stroke-width: 22; stroke-linejoin: round; }
.sm-track-line { fill: none; stroke: var(--paper-3); stroke-width: 1; stroke-dasharray: 10 8; opacity: 0.6; }
.sm-startfinish { fill: var(--paper); }
.sm-startline { stroke: var(--paper); stroke-width: 4; stroke-dasharray: 3 3; }
.sm-arrow { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sm-decor-footprint { fill: oklch(15% 0.006 270); stroke: var(--ink-4); stroke-width: 1.2; }
.sm-decor-stand { fill: none; stroke: var(--ink-3); stroke-width: 0.8; stroke-dasharray: 2 3; pointer-events: none; }
.sm-decor-field[class] { pointer-events: none; }
.sm-field-line.is-faint { opacity: 0.45; }
.sm-badge { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: color-mix(in oklab, var(--ink-0) 80%, transparent); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--paper-2); pointer-events: none; }
.sm-north { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); color: var(--signal); font-weight: 600; transform: rotate(var(--north)); }
.sm-seat { fill: var(--paper-2); stroke: var(--ink-0); stroke-width: 0.25; cursor: pointer; transition: fill var(--dur-fast), transform var(--dur-fast); transform-box: fill-box; transform-origin: center; }
.sm-seat:hover { fill: var(--paper); transform: scale(1.5); }
.sm-seat.is-taken { fill: var(--ink-3); cursor: default; pointer-events: none; }
.sm-seat.is-chosen { fill: var(--signal); transform: scale(1.4); }
.sm-seat:focus-visible { outline: none; stroke: var(--signal); stroke-width: 0.6; }

.sm-tip { position: absolute; transform: translate(-50%, -100%); background: var(--paper); color: var(--ink-0); padding: 8px 12px; border-radius: var(--radius-sm); display: grid; gap: 2px; pointer-events: none; z-index: 3; white-space: nowrap; font-size: var(--text-sm); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.8); }
.sm-tip b { font-weight: 700; }
.sm-tip span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-4); }
.sm-controls { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 4px; }
.sm-controls button { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--paper); font-size: 1.1rem; display: grid; place-items: center; }
.sm-controls button:hover { background: var(--ink-2); }
.sm-legend { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--paper-2); }
.sm-legend i { width: 90px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--heat-0), var(--heat-1), var(--heat-2), var(--heat-3)); }

/* Panel */
.ev-panel { display: grid; gap: var(--space-4); background: var(--ink-1); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); padding: var(--space-4); max-height: calc(100dvh - var(--nav-h) - 48px); overflow: auto; position: sticky; top: calc(var(--nav-h) + 16px); scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qty { display: grid; gap: 6px; }
.qty-ctl { display: inline-flex; align-items: center; gap: 2px; background: var(--ink-0); border-radius: 999px; padding: 3px; }
.qty-ctl button { width: 32px; height: 32px; border-radius: 50%; color: var(--paper); font-size: 1.1rem; }
.qty-ctl button:hover { background: var(--ink-2); }
.qty-ctl b { min-width: 28px; text-align: center; font-family: var(--font-mono); font-weight: 500; }
.panel-sort select { background: var(--ink-0); border: 0; color: var(--paper); padding: 6px 8px; border-radius: var(--radius-sm); }
.panel-sum { color: var(--paper-2); font-size: var(--text-xs); }
.panel-section { display: grid; gap: 8px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.panel-back { justify-self: start; color: var(--paper-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.panel-back:hover { color: var(--paper); }
.panel-section-title { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; }
.panel-fine { color: var(--paper-3); font-size: var(--text-xs); line-height: 1.5; }

.sel { display: grid; gap: 14px; padding: 16px; border-radius: var(--radius-md); background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--signal); animation: selIn var(--dur) var(--ease-out); }
@keyframes selIn { from { transform: translateY(6px); opacity: 0; } }
.sel-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sel-title { font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; }
.sel-price { text-align: right; display: grid; }
.sel-price b { font-size: 1.3rem; letter-spacing: -0.02em; }
.sel-fees { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--text-xs); color: var(--paper-3); border-top: 1px solid var(--line); padding-top: 10px; }
.sel-fees dd { text-align: right; color: var(--paper-2); }
.sel-fees dd b { color: var(--paper); }

.listings { display: grid; gap: 6px; }
.listings-empty { padding: var(--space-6) 0; font-size: var(--text-sm); }
.listing { display: grid; grid-template-columns: 4px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px 10px 8px; border-radius: var(--radius-sm); background: var(--ink-0); transition: background var(--dur-fast), transform var(--dur-fast); }
.listing:hover, .listing.is-peek { background: var(--ink-2); }
.listing-heat { height: 100%; min-height: 36px; border-radius: 2px; background: color-mix(in oklab, var(--signal) calc(var(--d) * 100%), var(--ink-3)); }
.listing-main { display: grid; gap: 1px; font-size: var(--text-sm); min-width: 0; }
.listing-main b { font-weight: 700; }
.listing-deal { color: var(--ok); font-size: var(--text-xs); }
.listing-price { text-align: right; display: grid; }
.listing-price b { font-weight: 600; letter-spacing: -0.02em; }
.listing .btn { opacity: 0.85; }
.listing:hover .btn { opacity: 1; }

@media (max-width: 1000px) {
  .ev-body { grid-template-columns: 1fr; }
  .ev-map-col { position: static; }
  .ev-map { height: 62dvh; min-height: 380px; }
  .ev-panel { position: static; max-height: 70dvh; }
}

/* Info */
.ev-info { padding-block: var(--space-12); border-top: 1px solid var(--line); }
.ev-info-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); }
.ev-info-title { font-size: var(--text-xl); margin-block: 10px 14px; }
.ev-sessions li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); color: var(--paper-2); }
.ev-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: var(--text-sm); align-content: start; }
.ev-facts dt { color: var(--paper-3); }
.ev-facts a:hover { color: var(--signal); }
@media (max-width: 800px) { .ev-info-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Getting there */
.ev-where { padding-block: var(--space-12) 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-6); }
.ev-where-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.ev-where-map { height: clamp(320px, 46vh, 520px); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line); }
.leaflet-container { background: var(--ink-1); font-family: var(--font-mono); }
.leaflet-control-attribution { background: color-mix(in oklab, var(--ink-0) 80%, transparent) !important; color: var(--paper-3) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--paper-2) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--ink-1); color: var(--paper); border-bottom-color: var(--line); }
.leaflet-bar { border: 0 !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; border-radius: var(--radius-sm) !important; overflow: hidden; }
.leaflet-tooltip { background: var(--paper); color: var(--ink-0); border: 0; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.8); }
.leaflet-tooltip-top::before { border-top-color: var(--paper); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ink-1); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 40px -20px #000; }
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font-display); }
.leaflet-container a.leaflet-popup-close-button { color: var(--paper-3); }
.leaflet-control-layers { background: var(--ink-1) !important; color: var(--paper-2); border: 0 !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; border-radius: 999px !important; padding: 3px !important; }
.leaflet-control-layers-base { display: flex; gap: 2px; }
.leaflet-control-layers-base label { margin: 0; }
.leaflet-control-layers-base label > span, .leaflet-control-layers-base label > div { display: block; }
.leaflet-control-layers-base input { position: absolute; opacity: 0; pointer-events: none; }
.leaflet-control-layers-base label span { padding: 6px 12px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 12px; cursor: pointer; }
.leaflet-control-layers-base input:checked + span { background: var(--paper); color: var(--ink-0); }
.leaflet-control-layers-separator, .leaflet-control-layers-overlays { display: none; }

/* Real map tiles under the seatmap */
.sm-tiles { opacity: 0; transition: opacity var(--dur-slow); pointer-events: none; }
.has-tiles .sm-tiles { opacity: 1; }
.sm-tiles.is-imagery { filter: grayscale(0.55) brightness(0.62) contrast(1.1); }
.sm-tiles.is-dark { filter: brightness(1.15); }
.has-tiles .sm-decor-footprint { fill: none; stroke: var(--paper-3); stroke-width: 1.4; stroke-dasharray: 5 4; }
.has-tiles .sm-decor-field { fill: oklch(40% 0.08 150 / 0.25); }
.sm-decor-field { fill: oklch(30% 0.05 150); }
.sm-section ~ .sm-decor-field { fill: none; }
.has-tiles .sm-section .sm-shape { opacity: 0.9; }
.has-tiles.has-selection .sm-section:not(.is-selected) .sm-shape { opacity: 0.18; }
.has-tiles .sm-track-outer { stroke: oklch(10% 0 0 / 0.7); }
.sm-tiles-toggle { width: auto !important; padding: 0 12px; font-family: var(--font-mono); font-size: var(--text-xs) !important; }
.sm-tiles-toggle[aria-pressed="true"] { background: var(--paper) !important; color: var(--ink-0) !important; }
.sm-tile { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.sm-tile.is-loaded { opacity: 1; }