/* Motor Expo booth map (/motor-expo-2026/): inline SVG floor plan redrawn by us, pan/zoom by
   assets/expo.js (class .js on .xmapbox), bottom sheet on phones / side panel on wide screens,
   searchable exhibitor list. Without JS the SVG is a static picture and booths link to the list. */
:root {
  --x-h1: #dce8ff; --x-h1s: #2f5fc4; --x-h2: #d8f1e4; --x-h2s: #17784c; --x-h3: #efe2fb; --x-h3s: #7c45bf;
  --x-floor: #e9edf3; --x-corr: #d7dde7; --x-neutral: #eef0f3; --x-neutrals: #8a93a3; --x-shadow: 0 10px 30px #0f172a33;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --x-h1: #1c2b49; --x-h1s: #7fa6ff; --x-h2: #15362a; --x-h2s: #5fd39a; --x-h3: #2f2245; --x-h3s: #c69cff;
  --x-floor: #151b25; --x-corr: #232b38; --x-neutral: #1f2631; --x-neutrals: #6f7a8c; --x-shadow: 0 10px 30px #0009 } }
:root[data-theme="dark"] {
  --x-h1: #1c2b49; --x-h1s: #7fa6ff; --x-h2: #15362a; --x-h2s: #5fd39a; --x-h3: #2f2245; --x-h3s: #c69cff;
  --x-floor: #151b25; --x-corr: #232b38; --x-neutral: #1f2631; --x-neutrals: #6f7a8c; --x-shadow: 0 10px 30px #0009 }

.xwrap { padding-bottom: 60px }
.xkick { font: 500 13px/1.3 var(--f-data); color: var(--accent); margin: 0 0 6px; letter-spacing: .02em }
.xtop { margin-bottom: 12px }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

/* search + hall jump */
.xtools { display: grid; gap: 10px; margin-bottom: 12px }
.xsearch { display: flex }
.xsearch input { flex: 1 1 auto; font-size: 16px; min-height: 48px; padding: 10px 14px; border-radius: 10px; width: 100% }
.xhalls { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.xhalls::-webkit-scrollbar { display: none }
.xhalls .chip { min-height: 40px; padding: 10px 14px; font-size: 14px }
.xhalls .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }

/* map frame */
.xmapbox { scroll-margin-top: 8px; position: relative; background: var(--x-floor); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.xmap { display: block; width: 100%; height: auto; font-family: var(--f-body); user-select: none; -webkit-user-select: none }
.xmapbox.js .xmap { height: min(max(280px, calc(36vw + 40px)), 560px, 78vh); touch-action: none; cursor: grab }
.xmapbox.js .xmap.grabbing { cursor: grabbing }
@media (max-width: 640px) {
  .xmapbox { margin-inline: -16px; border-radius: 0; border-inline: 0 }
  .xmapbox.js .xmap { height: min(max(300px, 100vw), 62vh) }
  .xctl button { width: 42px; height: 42px }
}
.xmap .floor { fill: var(--surface); stroke: var(--line); stroke-width: 2 }
.xmap .corr { fill: var(--x-corr) }
.xmap .ctx { fill: var(--muted); font-size: 14px; text-anchor: middle }
.xmap .ctx.big { font-size: 22px; font-weight: 600 }
.xmap .ent { fill: none; stroke: var(--warn); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.xmap .hl { font: 700 26px var(--f-display); text-anchor: middle }
.xmap .hl.h1, .xmap .bth.h1 .bc { fill: var(--x-h1s) }
.xmap .hl.h2, .xmap .bth.h2 .bc { fill: var(--x-h2s) }
.xmap .hl.h3, .xmap .bth.h3 .bc { fill: var(--x-h3s) }
.xmap .hbar.h1 { fill: var(--x-h1s) } .xmap .hbar.h2 { fill: var(--x-h2s) } .xmap .hbar.h3 { fill: var(--x-h3s) }
.xmap .bth { text-decoration: none; outline: none }
.xmap .bs { stroke-width: 1.5; vector-effect: non-scaling-stroke }
.xmap .bth.h1 .bs { fill: var(--x-h1); stroke: var(--x-h1s) }
.xmap .bth.h2 .bs { fill: var(--x-h2); stroke: var(--x-h2s) }
.xmap .bth.h3 .bs { fill: var(--x-h3); stroke: var(--x-h3s) }
.xmap .bth.unl .bs { fill: var(--x-neutral); stroke: var(--x-neutrals); stroke-dasharray: 4 3 }
.xmap .bth.unl .bc { fill: var(--muted) }
.xmap .bth.has .bs { stroke-width: 2.5 }
.xmap .bc { font-family: var(--f-data); font-weight: 600; text-anchor: middle; pointer-events: none }
.xmap .bn { fill: var(--ink); font-weight: 600; text-anchor: middle; pointer-events: none }
.xmap .bd { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none }
.xmap .bth:hover .bs { stroke-width: 3 }
.xmap .bth:focus-visible .bs { stroke: var(--accent); stroke-width: 4 }
.xmap .bth.sel .bs { stroke: var(--accent); stroke-width: 5; fill: color-mix(in srgb, var(--accent) 22%, var(--surface)) }
.xmap.q .bth:not(.hit) { opacity: .28 }
.xmap.q .bth.hit .bs { stroke: var(--accent); stroke-width: 3.5 }

/* zoom buttons */
.xctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 2 }
.xctl button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 22px/1 var(--f-body); display: grid; place-items: center; padding: 0; box-shadow: 0 2px 6px #0002 }
.xhint { margin: 8px 0 0; font-size: 13px; color: var(--muted) }

/* booth sheet: bottom sheet on phones, side panel on wide screens */
.xsheet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--x-shadow); z-index: 30 }
.xsheet[hidden], .xctl[hidden], .xtools[hidden] { display: none }
@media (max-width: 899px) {
  .xsheet { position: fixed; left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0; max-height: 62vh; overflow-y: auto;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    transform: translateY(100%); transition: transform .22s ease-out }
  .xsheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 8px }
  .xsheet.open { transform: none }
}
@media (min-width: 900px) {
  .xsheet { position: absolute; top: 12px; right: 12px; width: 330px; max-height: calc(100% - 24px); overflow-y: auto; border-radius: 14px; padding: 16px;
    opacity: 0; transform: translateX(12px); transition: opacity .18s, transform .18s }
  .xsheet.open { opacity: 1; transform: none }
}
.xclose { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; border-radius: 10px }
.xclose:hover { background: var(--chip) }
.xs-kick { margin: 0 48px 2px 0; font-size: 13px; color: var(--muted) }
.xs-in h2 { font: 600 1.45rem/1.2 var(--f-display); margin: 0 48px 8px 0; overflow-wrap: anywhere }
.xs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.xchip { font: 600 14px/1 var(--f-data); padding: 8px 10px; border-radius: 8px; background: var(--chip); color: var(--ink) }
.xchip.h1 { background: var(--x-h1); color: var(--x-h1s) } .xchip.h2 { background: var(--x-h2); color: var(--x-h2s) } .xchip.h3 { background: var(--x-h3); color: var(--x-h3s) }
.xs-in p { margin: 0 0 10px }
.xs-note { font-size: 13px; color: var(--muted) }
.xs-btns { display: grid; gap: 8px }
.xbig { justify-content: center; min-height: 48px; font-size: 15px; font-weight: 600; border-radius: 10px; padding: 12px 14px; text-align: center }
.xbig .xmuted { font-weight: 400 }

/* legend */
.xlegend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 18px; padding: 0; font-size: 13.5px; color: var(--muted) }
.xlegend li { display: inline-flex; align-items: center; gap: 6px }
.xsw { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 2px solid; display: inline-block }
.xsw.h1 { background: var(--x-h1); border-color: var(--x-h1s) } .xsw.h2 { background: var(--x-h2); border-color: var(--x-h2s) } .xsw.h3 { background: var(--x-h3); border-color: var(--x-h3s) }
.xdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; margin-left: 6px; vertical-align: middle }
.xlegend .xdot { margin-left: 0 }

/* exhibitor list */
.xlist { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start }
.xgrp h2 { font: 600 1.1rem var(--f-display); margin: 0 0 8px }
.xul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.xli { display: flex; align-items: stretch; border-top: 1px solid var(--line); scroll-margin-top: 140px }
.xli:first-child { border-top: 0 }
.xli[hidden] { display: none }
.xli.sel { background: color-mix(in srgb, var(--accent) 12%, var(--surface)) }
.xitem { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 16px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; min-height: 56px; color: var(--ink); text-decoration: none }
.xitem .xsw { grid-row: 1 / 3 }
.xnm { font-weight: 600; overflow-wrap: anywhere }
.xmeta { font: 13px var(--f-data); color: var(--muted) }
.xtag { font: 500 11px/1 var(--f-body); margin-left: 8px; padding: 3px 6px; border-radius: 999px; background: var(--chip); color: var(--muted); vertical-align: middle }
.xgo { flex: none; display: flex; align-items: center; padding: 8px 12px; font-size: 13.5px; font-weight: 600; text-decoration: none; border-left: 1px solid var(--line); max-width: 46%; text-align: right }
.xmuted { color: var(--muted); font-weight: 400 }
.xitem:hover .xnm { color: var(--accent) }
.xnone { color: var(--muted); padding: 20px 0; text-align: center }
.xcredit { margin-top: 22px }
@media (max-width: 420px) { .xgo .xmuted { display: none } }

@media (prefers-reduced-motion: reduce) {
  .xsheet, .xsheet.open { transition: none }
}