/* ==========================================================================
   Collect-A-Con San Francisco — interactive floor plan
   Structure follows the house Leaflet style guide (340px left panel, gradient
   header, card popups, grouped TOC, 680px drawer). The palette and type are
   Collect-A-Con's, since this one is public-facing marketing rather than an
   internal tool.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --navy:   #0B1638;
  --navy-2: #16255C;   /* the outline navy in the wordmark */
  --blue:   #2A4EA8;
  --gold:   #C9A063;
  --yellow: #FFD520;
  --red:    #E8232A;
  --grad:   linear-gradient(135deg, #0B1638 0%, #24409A 100%);

  /* --- chrome ----------------------------------------------------------- */
  --bg:        #eef1f6;
  --card:      #ffffff;
  --row-hover: #f3f6fc;
  --text:      #141C31;
  --muted:     #6A7690;
  --border:    #e0e5ee;
  --border-2:  #ccd4e2;
  --accent:    var(--blue);

  /* --- map ground ------------------------------------------------------- */
  --ground:    #080E22;
  --ground-2:  #101B3D;
  --grid:      rgba(120, 156, 235, .07);

  --panel-w: 340px;

  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font: 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, Menlo, monospace;

  --sh-1: 0 1px 2px rgba(11, 22, 56, .06), 0 2px 8px rgba(11, 22, 56, .06);
  --sh-2: 0 6px 24px rgba(11, 22, 56, .16);
  --sh-3: 0 12px 40px rgba(6, 12, 32, .34);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--blue); }
::selection { background: var(--yellow); color: var(--navy); }

/* ---------------------------------------------------------------- layout */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#main { display: flex; flex: 1; position: relative; min-height: 0; }
#map { flex: 1; background: var(--ground); z-index: 1; }

/* Blueprint ground: a lit centre falling off to near-black at the edges, with
   a fine survey grid — reads as a plan, not as a blank void. */
#map.bm-blueprint .leaflet-container {
  background-color: var(--ground);
  background-image:
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(38, 66, 150, .55), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}
.leaflet-container { background: var(--ground); font-family: var(--font); }

/* Lift the booths off the ground plane a little. */
#map.bm-blueprint .leaflet-overlay-pane svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* ---------------------------------------------------------- the wordmark */
/* Built from live text rather than an image: scales cleanly, stays crisp on
   any display, and re-colours with CSS. paint-order puts the navy keyline
   behind the fill so the letterforms keep their full weight. */
.cac-mark { display: block; height: 46px; width: auto; overflow: visible; }
.cac-city {
  font-family: var(--display); font-size: 11px; fill: var(--red); text-anchor: middle;
}
.cac-word {
  font-family: var(--display); font-size: 27px; text-anchor: middle;
  paint-order: stroke; stroke: var(--navy-2); stroke-width: 6px;
  stroke-linejoin: round;
}
.cw-y { fill: var(--yellow); }
.cw-w { fill: #fff; }
.cac-slant { transform: skewX(-7deg); transform-box: fill-box; transform-origin: center; }

/* ---------------------------------------------------------------- banner */
.banner {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .28);
  padding: 0 32px;
  border-bottom: 3px solid var(--gold);
  flex: none;
  z-index: 500;
  position: relative;
}
.banner::after {   /* subtle sheen across the gradient */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 55%);
}
.banner-row { display: flex; align-items: center; height: 74px; gap: 22px; position: relative; z-index: 1; }
.divider { width: 1px; height: 36px; background: rgba(255, 255, 255, .22); flex: none; }
.title-stack { min-width: 0; }
.title-stack h1 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: #fff;
}
.title-stack p {
  margin: 1px 0 0; font-size: 13px; font-weight: 400;
  color: rgba(255, 255, 255, .68); white-space: nowrap;
}
.spacer { flex: 1; }

.btn-cta {
  background: var(--red); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap; flex: none;
  box-shadow: 0 3px 0 #96151A, 0 6px 16px rgba(232, 35, 42, .4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #96151A, 0 9px 22px rgba(232, 35, 42, .5); }
.btn-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #96151A; }

.hamburger {
  display: none; width: 42px; height: 42px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .13); cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex: none;
}
.hamburger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }

/* ---------------------------------------------------------------- sidebar */
#panel {
  width: var(--panel-w); flex: none; background: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 400; display: flex; flex-direction: column;
}
.pane-block { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pane-block.sec { padding: 0; }

.lbl {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--muted); margin-bottom: 7px;
}
.lbl.sm { margin: 0; }

#q {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border-2);
  border-radius: 10px; background: #fbfcfe; outline: none; font-size: 15px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#q::placeholder { color: #9aa5bb; }
#q:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 4px rgba(42, 78, 168, .13);
}
.meta { font-size: 13px; color: var(--muted); margin: 7px 2px 0; }

#results:not(:empty) { margin-top: 10px; border-top: 1px solid var(--border); }
.res, .vrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 6px; border: 0; border-bottom: 1px solid var(--border);
  background: none; text-align: left; cursor: pointer; border-radius: 8px;
  transition: background .12s;
}
.res:hover, .res:focus-visible, .vrow:hover { background: var(--row-hover); }
.dot {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  border: 1.5px solid rgba(0, 0, 0, .22); box-shadow: var(--sh-1);
}
.res .txt { min-width: 0; }
.res .nm { font-weight: 600; font-size: 15px; line-height: 1.2; display: block; }
.res .sb { font-size: 12.5px; color: var(--muted); display: block; }
.res mark { background: #ffe89a; color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 700; }
.res-more { padding: 8px 6px; font-size: 12.5px; color: var(--muted); font-style: italic; }

.vrow { font-size: 15px; font-weight: 500; }
.vrow .loc { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--mono); }

/* collapsible sections — chevron never touches map visibility (§7) */
.sec-hd {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 13px 16px; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted);
}
.sec-hd:hover { background: var(--row-hover); color: var(--text); }
.chev { transition: transform .18s; font-size: 11px; }
.sec-hd[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.sec-body { padding: 0 16px 14px; }
.sec-hd[aria-expanded="false"] + .sec-body { display: none; }
.pill {
  margin-left: auto; background: var(--navy); color: #fff;
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700;
  letter-spacing: .4px;
}

#vendorList { max-height: 320px; overflow-y: auto; }

/* TOC */
.toc-cat { margin-bottom: 6px; }
.toc-cat-hd { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.toc-cat-hd .nm {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--text);
}
.toc-cat-hd .cchev {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 11px; padding: 3px 5px; line-height: 1;
  transition: transform .18s;
}
.toc-cat.collapsed .toc-rows { display: none; }
.toc-cat.collapsed .cchev { transform: rotate(-90deg); }
.toc-rows { padding-left: 3px; }
.toc-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer;
  font-size: 14.5px;
}
.toc-row:hover { color: var(--blue); }
.toc-row .cnt { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.sw { width: 15px; height: 15px; flex: none; display: inline-block; }
.sw.box { border-radius: 3px; border: 1.5px solid; box-shadow: var(--sh-1); }
.sw.star { border: 0; }
input[type="checkbox"] { accent-color: var(--blue); width: 16px; height: 16px; }

/* pills / basemap */
.pills { display: flex; gap: 7px; flex-wrap: wrap; }
.pill-btn {
  border: 1.5px solid var(--border-2); background: #fff; border-radius: 999px;
  padding: 7px 15px; font-size: 14px; font-weight: 500; cursor: pointer;
  box-shadow: var(--sh-1); transition: all .13s;
}
.pill-btn:hover { border-color: var(--blue); color: var(--blue); }
.pill-btn.active {
  background: var(--grad); color: #fff; border-color: transparent; font-weight: 600;
  box-shadow: 0 3px 10px rgba(11, 22, 56, .3);
}
.slider-row { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--blue); }

/* sales pitch card */
.pitch {
  background: linear-gradient(160deg, #fbfcfe, #eef2f9);
  border-bottom: 0; margin-top: auto; border-top: 3px solid var(--gold);
}
.pitch-hd {
  font-family: var(--display); font-size: 13px; letter-spacing: .3px;
  color: var(--navy); margin-bottom: 7px;
}
.pitch p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.pitch .by { font-size: 13px; }
.pitch .by strong { color: var(--text); }

/* ---------------------------------------------------------------- map bits */
#tools { position: absolute; top: 14px; left: calc(var(--panel-w) + 14px); z-index: 600; }
.tool-btn {
  width: 38px; height: 38px; border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(16, 27, 61, .9); color: #fff; backdrop-filter: blur(6px);
  border-radius: 10px; cursor: pointer; box-shadow: var(--sh-3); font-size: 16px;
  transition: all .13s;
}
.tool-btn:hover { background: var(--blue); }
.tool-btn[aria-expanded="true"] { background: var(--blue); border-color: transparent; }
.flyout {
  margin-top: 8px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--sh-3); padding: 7px; width: 224px;
}
.fly-row {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font-size: 14px; text-align: left;
}
.fly-row:hover { background: var(--row-hover); }

#legend {
  position: absolute; right: 14px; bottom: 26px; z-index: 600;
  background: rgba(12, 22, 52, .88); color: #e8edf9; backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; box-shadow: var(--sh-3);
  padding: 11px 13px; font-size: 13px; max-width: 200px;
}
#legend h4 {
  margin: 0 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px;
  color: var(--gold); font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.lg-chev { display: none; margin-left: auto; font-size: 10px; }
.leg-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

/* ------------------------------------------------------- booth labels (§5) */
/* Type size and wrap width both come from --booth-px, set on #map as the zoom
   changes, so a label can never be wider than the booth it names. Content
   drops in steps: full name, then a short name, then just the number. */
.leaflet-tooltip.booth-label {
  display: none; background: none; border: 0; box-shadow: none; padding: 0;
  font-family: var(--font); font-weight: 700; white-space: normal;
  text-align: center; pointer-events: none; line-height: 1.05;
  /* Width, height and font-size are set inline per label in sizeLabels(),
     matched to that booth's own on-screen rectangle. The flex centring plus
     overflow:hidden makes the polygon a hard boundary: text is centred in the
     booth and clipped rather than allowed to spill onto a neighbour. */
  display: none;
  align-items: center; justify-content: center;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}
.booth-label::before { display: none; }
.booth-label .t-num { font-family: var(--mono); font-weight: 600; letter-spacing: -.3px; }
.booth-label .t-sub {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: .78em; opacity: .72; margin-top: .15em;
}

.booth-label.ink-dark  { color: #1B1405; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.booth-label.ink-light { color: #E9EEFB; text-shadow: 0 1px 2px rgba(0,0,0,.7); }

/* one tier visible at a time */
.booth-label > span { display: none; }
#map.lt-1 .leaflet-tooltip.booth-label,
#map.lt-2 .leaflet-tooltip.booth-label,
#map.lt-3 .leaflet-tooltip.booth-label { display: flex; }
#map.lt-1 .booth-label .t-num   { display: block; }
#map.lt-2 .booth-label .t-short { display: block; }
#map.lt-3 .booth-label .t-full  { display: block; }
#map.no-labels .leaflet-tooltip.booth-label { display: none; }

.booth-sel { filter: drop-shadow(0 0 9px rgba(255, 213, 32, 1)); }

/* ---------------------------------------------------------------- popups */
.leaflet-popup-content-wrapper {
  border: 0; border-radius: 14px; padding: 0; overflow: hidden;
  box-shadow: 0 18px 48px rgba(6, 12, 32, .42), 0 0 0 1px rgba(11, 22, 56, .12);
}
.leaflet-popup-content { margin: 0; font-family: var(--font); }
.popup-hd {
  background: var(--grad); color: #fff; padding: 11px 34px 11px 14px;
  font-family: var(--display); font-size: 15px; line-height: 1.2;
  border-bottom: 2px solid var(--gold);
}
.popup-hd small {
  display: block; font-family: var(--font); font-weight: 600; font-size: 11px;
  color: var(--gold); margin-top: 3px; letter-spacing: 1.2px; text-transform: uppercase;
}
.popup-bd { padding: 11px 14px 12px; font-size: 14px; }
.popup-row { display: flex; gap: 10px; margin: 4px 0; }
.popup-row .k {
  color: var(--muted); flex: none; width: 78px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px; padding-top: 3px;
}
.popup-row .v { color: var(--text); flex: 1; min-width: 0; }

/* vendor card at the top of a booth popup */
.vprof {
  display: flex; gap: 12px; align-items: flex-start;
  padding-bottom: 11px; margin-bottom: 9px; border-bottom: 1px solid var(--border);
}
.vlogo {
  width: 66px; height: 50px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: 4px; box-shadow: var(--sh-1);
}
.vmeta { min-width: 0; }
.vname { font-family: var(--display); font-size: 14px; line-height: 1.2; }
.vblurb { font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.vlinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lnk {
  font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: .4px;
  color: var(--blue); background: #eef3fc; border: 1px solid #d7e2f6;
  border-radius: 999px; padding: 3px 11px; white-space: nowrap; transition: all .12s;
}
.lnk:hover { background: var(--grad); color: #fff; border-color: transparent; }

/* logo standing in for the colour dot in the sidebar lists */
.rowlogo {
  width: 36px; height: 24px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 1px;
}
.vlogo.on-dark, .rowlogo.on-dark { background: var(--navy); border-color: var(--navy); }

.popup-nav {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  border-top: 1px solid var(--border); padding: 6px; font-size: 13px; color: var(--muted);
}
.popup-nav button {
  border: 1px solid var(--border-2); background: #fff; border-radius: 7px;
  width: 26px; height: 24px; cursor: pointer; line-height: 1;
}
.popup-nav button:hover { background: var(--row-hover); border-color: var(--blue); }
.leaflet-popup-close-button { color: #fff !important; top: 8px !important; right: 6px !important; }
.leaflet-popup-tip { background: #fff; box-shadow: none; }

.leaflet-control-attribution {
  background: rgba(12, 22, 52, .8) !important; color: #97a3bd !important;
  font-family: var(--font); font-size: 11.5px; border-radius: 6px 0 0 0;
}
.leaflet-control-attribution a { color: #b9c6e4 !important; }
.leaflet-bar a {
  background: rgba(16, 27, 61, .92) !important; color: #fff !important;
  border-color: rgba(255,255,255,.12) !important;
}
.leaflet-bar a:hover { background: var(--blue) !important; }

/* ---------------------------------------------------------------- splash */
#splash {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, #24409A 0%, transparent 65%),
    radial-gradient(circle at 50% 45%, #101B3D 0%, #05091A 75%);
  color: #fff; transition: opacity .4s ease;
}
#splash.gone { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; padding: 24px; max-width: 92vw; }

/* full logo lockup: gold frame, black panel, city bar breaking the top edge */
.cac-lockup { width: min(620px, 88vw); height: auto; display: block; margin: 0 auto; }
.lk-frame  { fill: #05070F; stroke: var(--gold); stroke-width: 5; }
.lk-inner  { fill: none; stroke: var(--navy-2); stroke-width: 3; }
.lk-city   { font-family: var(--display); font-size: 30px; fill: var(--red); text-anchor: middle; }
.lk-word   { font-family: var(--display); font-size: 58px; text-anchor: middle;
             paint-order: stroke; stroke: var(--navy-2); stroke-width: 10px; stroke-linejoin: round; }
.lk-tag    { font-family: var(--font); font-weight: 600; font-size: 21px; fill: #fff; text-anchor: middle; }
.lk-venue  { font-family: var(--font); font-weight: 700; font-size: 20px; fill: #fff;
             text-anchor: middle; letter-spacing: 1.2px; }

.splash-sub {
  margin-top: 20px; font-size: 14px; font-weight: 600; letter-spacing: 5px;
  text-transform: uppercase; color: var(--gold);
}
.splash-bar {
  width: 240px; height: 5px; margin: 20px auto 12px; border-radius: 4px;
  background: rgba(255, 255, 255, .13); overflow: hidden;
}
.splash-bar span {
  display: block; height: 100%; width: 38%; border-radius: 4px;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  animation: slide 1.15s ease-in-out infinite;
}
.splash-hint { font-size: 13.5px; color: rgba(255, 255, 255, .55); min-height: 18px; }
.splash-inner .cac-lockup { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes slide { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .splash-inner .cac-lockup, .splash-bar span { animation: none; }
  .splash-bar span { width: 100%; margin-left: 0; }
  .btn-cta, .pill-btn, .lnk, #panel, .tool-btn { transition: none !important; }
}

/* -------------------------------------------------------- find-a-vendor FAB */
#findFab { display: none; }
@media (max-width: 680px) {
  #findFab {
    display: flex; align-items: center; gap: 9px;
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 20px; z-index: 650;
    background: var(--grad); color: #fff; border: 1.5px solid var(--gold);
    border-radius: 999px; padding: 13px 24px;
    font-size: 15px; font-weight: 700; letter-spacing: .5px;
    box-shadow: 0 8px 24px rgba(5, 9, 26, .6); min-height: 46px;
  }
  #panel.open ~ #findFab { display: none; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 680px) {
  .banner { padding: 0 12px; }
  .banner-row { gap: 12px; height: auto; min-height: 62px; padding: 9px 0; }
  /* The wordmark already says what this is; at 390 px the strapline only
     fights the Get Tickets button for room. */
  .divider, .title-stack { display: none; }
  .cac-mark { height: 34px; }
  .btn-cta { padding: 9px 14px; font-size: 12.5px; letter-spacing: .8px; }
  .hamburger { display: flex; }

  #panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(90vw, var(--panel-w));
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .35);
  }
  #panel.open { transform: translateX(0); }
  #backdrop {
    position: absolute; inset: 0; background: rgba(5, 9, 26, .55);
    z-index: 350; backdrop-filter: blur(2px);
  }
  #tools { left: 12px; top: 12px; }
  .tool-btn { width: 44px; height: 44px; }
  .pill-btn, .fly-row { min-height: 44px; }

  /* collapsed until tapped, so it isn't sitting on top of the booths */
  #legend { right: 10px; bottom: 80px; font-size: 13px; padding: 9px 11px; max-width: 160px; cursor: pointer; }
  #legend h4 { margin: 0; }
  .lg-chev { display: inline; transition: transform .18s; }
  #legend .leg-row { display: none; }
  #legend.open h4 { margin-bottom: 7px; }
  #legend.open .leg-row { display: flex; }
  #legend.open .lg-chev { transform: rotate(180deg); }

  .res, .vrow { padding-top: 12px; padding-bottom: 12px; }
  #vendorList { max-height: none; }
  .lk-tag { font-size: 26px; }
}

/* ------------------------------------------------------------- show info */
.soldout {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(232, 35, 42, .35);
}
.info-venue { font-family: var(--display); font-size: 13.5px; line-height: 1.25; }
.info-addr {
  display: block; font-size: 13.5px; margin-top: 3px; text-decoration: none;
  border-bottom: 1px dotted var(--border-2); padding-bottom: 8px;
}
.info-addr:hover { color: var(--navy); }
.info-dates {
  font-weight: 700; font-size: 14.5px; color: var(--text);
  margin: 9px 0 6px; letter-spacing: .2px;
}
.info-row { display: flex; gap: 10px; font-size: 13.5px; padding: 2px 0; }
.info-row .k { color: var(--muted); width: 74px; flex: none; }
.info-row .v { color: var(--text); font-weight: 500; min-width: 0; word-break: break-word; }
.info-note {
  margin: 10px 0 0; font-size: 12px; font-style: italic; color: var(--muted);
  line-height: 1.4; border-top: 1px solid var(--border); padding-top: 8px;
}

/* a booth number we reconstructed rather than read from the source data */
.inferred {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #8A6112; background: #FDF3D6; border: 1px solid #EBD79A; border-radius: 999px;
  vertical-align: 1px;
}
/* booth number under the vendor name, once zoomed in far enough to fit it */
.t-num {
  display: block; font-family: var(--mono); font-size: 9px; font-weight: 600;
  opacity: .75; margin-top: 1px;
}

/* --------------------------------------------------------- share / QR */
.share { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.share-btn {
  width: 100%; border: 1px solid var(--border-2); background: #fff;
  border-radius: 8px; padding: 7px 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--blue); transition: all .12s;
}
.share-btn:hover { background: var(--grad); color: #fff; border-color: transparent; }
.share-btn[aria-expanded="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.share-panel { display: flex; gap: 11px; align-items: center; margin-top: 9px; }
.qr {
  width: 96px; height: 96px; flex: none; border-radius: 8px;
  border: 1px solid var(--border); background: #fff;
}
.share-side { min-width: 0; }
.share-url {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  word-break: break-all; line-height: 1.35; margin-bottom: 7px;
  max-height: 48px; overflow: hidden;
}
.copy-btn {
  border: 1px solid var(--border-2); background: #fff; border-radius: 7px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.copy-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ------------------------------------------------------ you-are-here dot */
.fly-note {
  font-size: 11.5px; line-height: 1.4; color: var(--muted);
  padding: 2px 10px 8px; margin-top: -2px;
}
.fly-note.warn { color: #9A5B00; }
.fly-note.ok { color: #0E7565; }
.fly-row.on { background: var(--grad); color: #fff; }

path.geo-dot { fill: #2A6BFF; fill-opacity: 1; stroke: #fff; stroke-width: 3; }
path.geo-ring { fill: #2A6BFF; fill-opacity: .13; stroke: #2A6BFF; stroke-opacity: .45; stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  path.geo-dot { animation: geopulse 2s ease-in-out infinite; }
}
@keyframes geopulse {
  0%, 100% { stroke-width: 3; }
  50% { stroke-width: 6; }
}

/* ================================================== Cloud City Geospatial
   Their own brand kit drops the wordmark on dark backgrounds and uses the pin
   symbol alone — the Colorado navy wordmark (#002868) is unreadable on this
   map's navy ground. So dark surfaces get the symbol plus the name set in our
   own light type, and the full horizontal lockup is used only on white. */
.ccg-by {
  display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; opacity: .62; margin-bottom: 1px;
}
.ccg-txt {
  font-size: 13.5px; font-weight: 600; letter-spacing: .4px;
  line-height: 1.15; white-space: nowrap;
}

/* splash credit */
.ccg-credit {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 26px;
  text-decoration: none; color: #fff; padding: 8px 4px;
  transition: opacity .15s ease;
}
.ccg-credit:hover { opacity: .82; }
.ccg-credit img { height: 40px; display: block; }
.ccg-credit .ccg-txt { font-size: 16px; }

/* persistent badge on the map */
#ccg {
  /* anchored to the map, not to #main — otherwise it sits over the sidebar */
  position: absolute; left: calc(var(--panel-w) + 14px); bottom: 26px; z-index: 600;
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: #E9EEFB;
  background: rgba(10, 18, 44, .78); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 11px;
  padding: 7px 13px 7px 10px; box-shadow: var(--sh-3);
  transition: transform .13s ease, border-color .13s ease;
}
#ccg:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .3); }
#ccg img { height: 26px; display: block; }

/* sidebar lockup — the panel is white, so the full brand lockup works as-is */
.ccg-lockup { display: block; margin: 12px 0 10px; }
.ccg-lockup img { width: 100%; max-width: 232px; height: auto; display: block; }
.pitch .by { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.pitch .by a { text-decoration: none; font-weight: 600; }
.pitch .by a:hover { text-decoration: underline; }
.pitch .by .sep { color: var(--border-2); }

@media (max-width: 680px) {
  /* legend sits bottom-right and the Find pill bottom-centre, so this tucks
     in on the left above the pill */
  #ccg { left: 10px; bottom: 76px; padding: 5px 10px 5px 8px; gap: 7px; }
  #ccg img { height: 19px; }
  #ccg .ccg-txt { font-size: 11px; }
  #ccg .ccg-by { font-size: 7.5px; letter-spacing: 1.1px; }
  .ccg-credit { margin-top: 18px; gap: 9px; }
  .ccg-credit img { height: 30px; }
  .ccg-credit .ccg-txt { font-size: 13px; }
}

/* --------------------------------------------------------- doors countdown */
.countdown {
  flex: none; text-align: right; line-height: 1.1;
  padding-right: 4px;
}
.cd-lbl {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
}
.cd-val {
  display: block; font-family: var(--mono); font-size: 17px; font-weight: 600;
  color: #fff; letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}
.countdown.live .cd-lbl { color: #6EE7B7; }
.countdown.live .cd-val { font-family: var(--font); letter-spacing: .4px; }

@media (max-width: 680px) { .countdown { display: none; } }
@media (min-width: 681px) and (max-width: 980px) {
  .cd-lbl { font-size: 8px; letter-spacing: 1px; }
  .cd-val { font-size: 14px; }
}