/* My BioAsia · Floor map (assets/my-floor.js). The venue and hall maps use the website's venue styles
   (assets/pages/venue.css, .vm-*); here they get My BioAsia's navy + teal tokens (reg-a.css), light and dark. */
.mf{--surface:var(--a-surface);--surface-2:var(--a-surface-2);--ink:var(--a-ink);--ink-2:var(--a-ink-2);--line:var(--a-line);--teal:var(--a-accent-text);
  --r:var(--r2);--lift:var(--a-shadow);--shadow:none;--booked-fill:var(--a-surface-2);--booked-stroke:var(--a-line-2)}
.mf .vm-map{--hall:var(--a-surface);--feature:color-mix(in srgb,var(--a-ink-2) 14%,var(--a-surface))}
.mf .vm-zoom button:focus-visible,.mf .vm-item:focus-visible{outline:2px solid var(--a-focus);outline-offset:2px}
.mf .vm-list{max-height:min(76vh,860px);overflow:auto}
.mf-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.mf-tabs>*{flex:none;text-decoration:none}
.mf-note{display:flex;gap:var(--s2);align-items:flex-start;margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--a-line);border-radius:var(--r2);background:var(--a-accent-soft);color:var(--a-ink);font-size:14px;line-height:20px}
.mf-note svg{margin-top:2px;color:var(--a-accent-text)}
.mf-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s4);margin:0 0 var(--s3)}
.mf-find label{display:block;font:600 14px/20px var(--sans);margin-bottom:var(--s1)}
.mf-findrow{display:flex;gap:var(--s2)}
.mf-find input{height:var(--a-ctl-h);width:200px;max-width:100%;box-sizing:border-box;padding:0 12px;border:1px solid var(--a-field);border-radius:var(--r1);background:var(--a-surface);color:var(--a-ink);font:400 16px var(--sans)}
.mf-find input:focus-visible{outline:2px solid var(--a-focus);outline-offset:1px}
.mf-found{margin:0;min-height:20px;color:var(--a-ink-2);font-size:14px}
/* the stalls: plain numbered shapes tinted by zone; one zone at a time; a found stall rings */
.mf-st text{fill:var(--a-ink);pointer-events:none}
.mf-st.dim{opacity:.18}
.mf-st.on .b{stroke:var(--a-accent);stroke-width:1.4;fill:color-mix(in srgb,var(--a-accent) 45%,var(--a-surface))}
@media (prefers-reduced-motion:no-preference){.mf-st.on .b{animation:mf-ring 1.4s ease-in-out infinite}}
@keyframes mf-ring{50%{stroke-width:2.6}}
@media (max-width:980px){.mf .vm-list{max-height:none}}
@media (max-width:640px){.mf-find input{width:150px;height:44px}.mf-tools{align-items:stretch}}