/* Scene Map uses the same category colors as the Discover menu. */
.archive-stack.scene-map-stack {
  overflow: hidden;
  touch-action: auto;
  padding: 0;
  scrollbar-width: none;
}

.poster:has(.scene-map-stack)::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: #000;
  /* Cover the legend area of the 1727px-wide frame artwork. */
  top: calc(var(--scene-frame-base, 100cqw) * 200 / 1727);
  right: calc(var(--scene-frame-base, 100cqw) * 230 / 1727);
  width: calc(var(--scene-frame-base, 100cqw) * 765 / 1727);
  height: calc(var(--scene-frame-base, 100cqw) * 194 / 1727);
}

@media (min-width: 761px) {
  .site-shell {
    --scene-frame-base: min(calc(100vw - clamp(400px, 33vw, 475px)), calc((100dvh - 8px) * .843289));
  }
  .poster {
    height: calc(var(--scene-frame-base) * 2846 / 2400);
    transition: width 640ms cubic-bezier(.4, 0, .2, 1);
    --qdp-date-height: calc(var(--scene-frame-base) * .05);
    --qdp-date-left: calc(100% - var(--scene-frame-base) * .5717);
    --qdp-date-width: calc(var(--scene-frame-base) * .4342);
    --qdp-date-font-size: calc(var(--scene-frame-base) * .0255);
    --qdp-list-left: calc(var(--scene-frame-base) * .098);
    --qdp-list-right: calc(var(--scene-frame-base) * .095);
  }
  body:not(.info-mode) .poster:has(.scene-map-stack):not(:has(#eventDetail:not([hidden]))) {
    width: min(calc(var(--scene-frame-base) + 210px), calc(100vw - 350px));
  }
  .poster > .frame { opacity: 0; }
  .poster::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Keep both rails and the logo at their original size as the center widens. */
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc(var(--scene-frame-base) * 1007 / 1727) 0 calc(var(--scene-frame-base) * 700 / 1727);
    border-image: url("frame.png?v=20260926-01") 0 1007 0 700 fill stretch;
  }
  .poster :is(.archive-viewport, .info-viewport) {
    clip-path: inset(6.8% calc(var(--scene-frame-base) * .0825) 6.75%);
  }
  .poster-stage::after {
    background-position: right center;
    background-size: var(--scene-frame-base) 100%;
    clip-path: inset(0 calc(var(--scene-frame-base) * .0425) 0 calc(100% - var(--scene-frame-base) * .0825));
  }
  .site-shell .archive-menu-track {
    left: calc(100% - var(--scene-frame-base) * .08164);
  }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .poster { transition-duration: 0s; }
}

.scene-map-view {
  --scene-ink: #fff1f4;
  --scene-accent: #ffea86;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #000;
  color: var(--scene-ink);
  font-family: "QDP Fraunces", Georgia, serif;
}

.scene-map-view * { box-sizing: border-box; }
.scene-map-view button, .scene-map-view input { font-family: inherit; }

.scene-map-view [data-kind="artist"] {
  --scene-kind-color: #fa2b5a;
  --scene-kind-ink: var(--qdp-plum-text, #2a1220);
}
.scene-map-view [data-kind="party"] { --scene-kind-color: var(--qdp-queer-card, #922185); }
.scene-map-view [data-kind="venue"] {
  --scene-kind-color: #ff7945;
  --scene-kind-ink: var(--qdp-plum-text, #2a1220);
}
.scene-map-view [data-kind="collective"] { --scene-kind-color: #000; }

.scene-map-top {
  position: relative;
  flex: none;
  z-index: 3;
}

.scene-map-results {
  position: absolute;
  top: 100%;
  left: 1cqw;
  right: 1cqw;
  max-height: 180px;
  overflow: auto;
  background: #000;
  border: 2px solid var(--scene-accent);
  border-radius: 0 0 9px 9px;
}

.scene-map-results:empty { display: none; }
.scene-map-results > p { padding: 6px 9px; }
.scene-map-result {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid #4c4349;
  background: #000;
  color: var(--scene-ink);
  text-align: left;
  cursor: pointer;
  font-size: clamp(13px, 2cqw, 16px);
}
.scene-map-result:last-child { border-bottom: 0; }
.scene-map-result:hover, .scene-map-result:focus-visible { background: #281822; }
.scene-map-result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-map-pill {
  flex: none;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--scene-kind-color);
  color: var(--scene-kind-ink, var(--scene-ink));
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}
.scene-map-pill[data-kind="collective"] { border-color: var(--scene-ink); }

.scene-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.scene-map-filters[hidden] { display: none; }
.scene-map-filter {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 27px;
  padding: 2px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--scene-kind-color, #000);
  color: var(--scene-kind-ink, var(--scene-ink));
  font-size: clamp(10px, 1.6cqw, 13px);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.scene-map-filter[data-kind="collective"] { border: 1px solid var(--scene-ink); }
.scene-map-filter-queer { margin-left: auto; }
.scene-map-filter input { flex: none; width: 12px; height: 12px; margin: 0; accent-color: var(--scene-accent); }

.scene-map-canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.scene-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.scene-map-canvas:has(.scene-map-node) { cursor: grab; }
.scene-map-canvas:active { cursor: grabbing; }
.scene-map-message {
  position: absolute;
  inset: 50% 7% auto;
  transform: translateY(-50%);
  margin: 0;
  color: var(--scene-ink);
  text-align: center;
  font-size: clamp(13px, 2cqw, 18px);
  pointer-events: none;
}
.scene-map-canvas-wrap:has(.scene-map-node) .scene-map-message {
  inset: 7px 7% auto;
  transform: none;
}
.scene-map-edge { stroke: #aaa5af; stroke-opacity: .64; stroke-linecap: round; pointer-events: none; }
.scene-map-edge[data-depth="2"] { stroke-opacity: .46; }
.scene-map-edge.scene-map-edge-cross { stroke-opacity: .34; }
.scene-map-edge.scene-map-edge-associated { stroke: var(--scene-accent); stroke-opacity: 1; }
.scene-map-edge-control { cursor: pointer; }
.scene-map-edge-hit { stroke: transparent; stroke-width: 14px; stroke-linecap: round; pointer-events: stroke; }
.scene-map-edge-control:is(.is-arriving, .is-retiring) .scene-map-edge-hit { pointer-events: none; }
.scene-map-view :is(.scene-map-canvas, .scene-map-node, .scene-map-edge-control):focus,
.scene-map-view :is(.scene-map-canvas, .scene-map-node, .scene-map-edge-control):focus-visible {
  outline: none;
  box-shadow: none;
}
.scene-map-canvas, .scene-map-node, .scene-map-edge-control { -webkit-tap-highlight-color: transparent; }
.scene-map-edge-control:focus-visible:not([aria-expanded="true"]) .scene-map-edge {
  stroke: var(--scene-accent);
  stroke-opacity: .85;
  stroke-dasharray: 3 2;
}
.scene-map-edge-control[aria-expanded="true"] .scene-map-edge {
  stroke: var(--scene-accent);
  stroke-opacity: 1;
  stroke-width: 2.75;
}
.scene-map-canvas:has(.scene-map-edge-control[aria-expanded="true"]) .scene-map-edge-control[aria-expanded="false"] .scene-map-edge {
  opacity: .6;
}
@media (hover: hover) {
  .scene-map-canvas:not(.is-dragging) .scene-map-edge-control:hover .scene-map-edge {
    stroke: var(--scene-accent);
    stroke-opacity: 1;
    opacity: 1;
  }
}
@media (pointer: coarse) {
  .scene-map-edge-hit { stroke-width: 24px; }
}
.scene-map-view .scene-map-node { cursor: pointer; outline: none; }
.scene-map-node[data-depth="2"] > :is(.scene-map-node-disc, .scene-map-caption, .scene-map-node-logo, .scene-map-node-ring, .scene-map-node-photo) { opacity: .76; }
@media (prefers-reduced-motion: no-preference) {
  .scene-map-node > :is(.scene-map-node-disc, .scene-map-caption, .scene-map-node-logo, .scene-map-node-ring, .scene-map-node-photo) { transition: opacity 640ms ease; }
}
.scene-map-view .scene-map-canvas.is-dragging, .scene-map-view .is-dragging .scene-map-node { cursor: grabbing; }
.scene-map-node-disc { fill: var(--scene-kind-color); stroke-width: 2; }
.scene-map-node-hit { fill: transparent; pointer-events: all; }
.scene-map-node[data-kind="collective"] .scene-map-node-disc { stroke: var(--scene-ink); }
.scene-map-node.scene-map-node-globe .scene-map-node-disc { fill: none; stroke: none; }
.scene-map-node[data-key="party:MELT-001"] > .scene-map-node-disc { fill: #000; }
.scene-map-node-ring { fill: none; stroke: var(--scene-kind-color); pointer-events: none; }
.scene-map-node-logo, .scene-map-node-photo { pointer-events: none; }
.scene-map-node.focus .scene-map-node-disc { stroke: var(--scene-accent); stroke-width: 4; }
.scene-map-node:hover .scene-map-node-disc, .scene-map-node:focus-visible .scene-map-node-disc { stroke: var(--scene-accent); stroke-width: 3; }
.scene-map-caption {
  fill: var(--scene-kind-ink, var(--scene-ink));
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.scene-map-caption[data-outside="true"] {
  fill: var(--scene-ink);
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.scene-map-caption-hit { fill: transparent; pointer-events: all; }
.scene-map-node:is(.is-arriving, .is-retiring),
.scene-map-node:is(.is-arriving, .is-retiring) :is(.scene-map-node-hit, .scene-map-caption-hit) { pointer-events: none; }

.scene-map-detail {
  position: absolute;
  z-index: 2;
  inset: 8px auto auto 8px;
  width: min(390px, calc(100% - 16px));
  max-height: 75%;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--scene-accent);
  border-radius: 10px;
  background: #000;
  font-size: clamp(12px, 1.7cqw, 15px);
}
.scene-map-detail:not([hidden]) { display: flex; flex-direction: column; }
.scene-map-detail-heading { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; }
.scene-map-detail-heading strong { font-size: clamp(14px, 2.25cqw, 20px); }
.scene-map-profile-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.scene-map-profile-heading strong { overflow-wrap: anywhere; }
.scene-map-profile-link:any-link { color: var(--scene-accent); font-size: 12px; white-space: nowrap; }
.scene-map-relationship-profiles { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.scene-map-close {
  flex: none;
  margin-left: auto;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--scene-ink);
  font-size: 23px;
  cursor: pointer;
}
.scene-map-note { margin: 3px 0; color: #d6ccd2; }
.scene-map-relationship {
  z-index: 3;
  inset: auto;
}
.scene-map-relationship .scene-map-detail-heading strong { font-size: clamp(13px, 2cqw, 16px); }
.scene-map-relationship .scene-map-note { margin-bottom: 7px; }
.scene-map-events {
  container-type: inline-size;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #a1929a transparent;
  padding-inline-end: 4px;
  --qdp-card-height: 56px;
  --qdp-card-width: 100%;
  --qdp-card-padding-x: 8px;
  --qdp-card-padding-y: 3px;
  --qdp-card-radius: 15px;
  --qdp-card-line-gap: 2px;
  --qdp-time-card-gap: 4px;
  --qdp-cards-next-time-gap: 5px;
  --qdp-same-time-card-gap: 3px;
  --qdp-time-font-size: clamp(12px, 4cqw, 15px);
  --qdp-title-font-size: clamp(13px, 4.6cqw, 17px);
  --qdp-venue-font-size: clamp(10px, 3.2cqw, 12px);
  --qdp-address-font-size: clamp(9px, 2.8cqw, 11px);
}
.scene-map-event-day + .scene-map-event-day { margin-top: 11px; }
.scene-map-event-day .date-heading {
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin: 0 0 5px;
  padding: 0;
  font-size: 13px;
  text-align: left;
  white-space: normal;
}
.scene-map-events .event-time-group { grid-template-columns: clamp(38px, 14cqw, 50px) minmax(0, 1fr); }
.scene-map-events .event-time { border-radius: var(--qdp-card-radius) 0 0 var(--qdp-card-radius); }
.scene-map-events .event-card:focus-visible { outline-offset: -2px; }
.scene-map-view :focus-visible { outline: 2px solid var(--scene-accent); outline-offset: 2px; }
.scene-map-results :focus-visible { outline-offset: -2px; }

@media (max-width: 760px) {
  .scene-map-results { left: 4px; right: 4px; }
  .scene-map-filters { gap: 3px; margin-top: 6px; }
  .scene-map-filter { min-height: 26px; gap: 2px; padding: 2px 3px; }
  .scene-map-filter input { width: 10px; height: 10px; }
}