/* Map shell — loaded after style.css and authoritative for the frame around the map.
   style.css still owns the bottom sheet, popups, clusters and markers; everything here is the
   chrome that sits over the map: bar, rails, scrubber. */

.pmdx{
  --red:var(--pmd-red);
  --red-dark:var(--pmd-red-dark);
  --glass:rgba(13,17,23,.82);
  /* The opaque cousin of --glass, for surfaces carrying more than two words. See #pmd-sheet. */
  --panel:#141A21;
  --glass-line:rgba(255,255,255,.12);
  --bar-h:60px;
  margin:0;background:#0c0e11;color:#e6ebf2;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  overflow:hidden;                      /* the map is the page; nothing behind it scrolls */
}

/* The map fills the viewport and the bar floats over it, so there is no band of page
   background left showing above or below the tiles. */
.pmdx #map.map-container{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  background:#0c0e11 !important;
  z-index:0;
}
.pmdx .leaflet-container{background:#0c0e11}
/* CARTO's dark tiles render land and ocean at almost the same black, so the map reads as a
   void with borders rather than as a world. Lifting the tile pane separates the two and makes
   the labels legible while keeping the dark identity. */
.pmdx .leaflet-tile-pane{filter:brightness(1.32)}

/* ---------- top bar ---------- */
.pmdx-bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:1000;
  display:flex;align-items:center;gap:18px;padding:0 16px;
  background:linear-gradient(180deg,rgba(8,10,13,.94),rgba(8,10,13,.72) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pmdx-logo{
  font-weight:800;letter-spacing:.07em;font-size:15px;color:#fff;text-decoration:none;
  white-space:nowrap;flex:0 0 auto;
}
.pmdx-logo .r{color:var(--red)}
.pmdx-logo:hover{opacity:.85}

.pmdx-search{position:relative;flex:1 1 auto;max-width:520px;margin:0 auto}
.pmdx-search input{
  width:100%;height:38px;border-radius:999px;border:1px solid var(--glass-line);
  background:rgba(20,25,33,.9);color:#e6ebf2;font:inherit;font-size:14px;
  padding:0 38px 0 38px;outline:none;transition:border-color .15s,background .15s;
}
.pmdx-search input::placeholder{color:#7c8899}
.pmdx-search input:focus{border-color:var(--red);background:rgba(24,30,40,.98)}
.pmdx-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7c8899;font-size:14px}
.pmdx-search button{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#7c8899;cursor:pointer;font-size:16px;line-height:1;padding:4px;
}
.pmdx-search button:hover{color:#fff}

.pmdx-nav{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.pmdx-nav a{color:#c3ccd8;text-decoration:none;font-size:14px;white-space:nowrap}
.pmdx-nav a:hover{color:#fff}
.pmdx-add{
  background:var(--red);color:#fff !important;font-weight:700;font-size:13px;
  padding:9px 16px;border-radius:999px;
}
.pmdx-add:hover{background:var(--red-dark)}

/* ---------- left rail ---------- */
/* Overrides the old horizontal strip, which packed five controls into one corner. */
.pmdx.pmdx #pmd-filter-bar{
  position:fixed;
  top:calc(var(--bar-h) + 14px);left:14px;right:auto;bottom:auto;
  width:auto;max-width:none;height:auto;
  display:flex;flex-direction:column;gap:8px;
  background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;overflow:visible;
  z-index:960;
}
.pmdx-rail-group{
  display:flex;flex-direction:column;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:14px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
/* One 40px row per choice: icon, label, count. Four of them fit in 160px of height where the
   previous three-tier buttons needed 500 — enough to cover half a phone screen. */
.pmdx.pmdx #pmd-filter-bar .pmdx-row{
  /* flex-direction is spelled out because style.css stacks these items in a column, from when
     the bar was a horizontal strip of tall buttons. Without it the label and the count pile up
     on top of each other inside a 40px row and the rail renders as unreadable overlap. */
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;
  width:auto;min-width:160px;max-width:none;flex:0 0 auto;
  height:40px;min-height:40px;padding:0 12px;
  border:0;border-radius:0;background:none;color:#c3ccd8;text-align:left;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .14s,color .14s;
}
.pmdx.pmdx #pmd-filter-bar .pmdx-row + .pmdx-row{border-top:1px solid rgba(255,255,255,.06)}
.pmdx.pmdx #pmd-filter-bar .pmdx-row:hover:not(.active){background:rgba(255,255,255,.06);color:#fff}
.pmdx.pmdx #pmd-filter-bar .pmdx-row.active{background:var(--red);color:#fff}
.pmdx.pmdx #pmd-filter-bar .pmdx-row.active i{color:#fff}
.pmdx #pmd-filter-bar .pmdx-row i{font-size:16px;width:16px;text-align:center;color:#8b95a5;flex:0 0 16px}
.pmdx #pmd-filter-bar #pmdNearMe i{color:var(--red)}
.pmdx-label{flex:1;white-space:nowrap}
.pmdx.pmdx #pmd-filter-bar .pmdx-row b{
  font-size:11px;font-weight:800;color:#8b95a5;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.07);border-radius:999px;padding:2px 7px;min-width:0;
}
.pmdx #pmd-filter-bar .pmdx-row.active b{background:rgba(0,0,0,.22);color:#fff}
.pmdx #pmd-filter-bar #pmdNearMe b{display:none}

.pmdx.pmdx .pmd-when.pmdx-when{
  display:flex;align-self:stretch;gap:3px;padding:4px;border:1px solid var(--glass-line);
  border-radius:12px;background:var(--glass);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.pmdx.pmdx .pmd-when-opt{
  flex:1;border:0;background:none;font:inherit;font-size:11px;font-weight:800;
  letter-spacing:.02em;color:#8b95a5;padding:6px 4px;border-radius:9px;cursor:pointer;
  transition:background .14s,color .14s;
}
.pmdx.pmdx .pmd-when-opt:hover:not(.active){background:rgba(255,255,255,.08);color:#fff}
.pmdx.pmdx .pmd-when-opt.active{background:var(--red);color:#fff}

/* ---------- pins ---------- */
/* The three marks themselves live in pins.css, which every page that draws a pin loads.
   What belongs here is only what the big map adds to them: size by zoom, and hover. */

/* Far out, 12px dots merge into a smear; the pin gives back the space. */
.pmdx.pmd-zoom-far .pmd-pin{width:9px;height:9px;border-width:1.5px}

@media(hover:hover){
  .pmdx .leaflet-marker-icon:hover .pmd-pin-studio{transform:scale(1.12)}
  .pmdx .leaflet-marker-icon:hover .pmd-pin-event,
  .pmdx .leaflet-marker-icon:hover .pmd-pin-ghost{transform:rotate(45deg) scale(1.12)}
}

/* ---------- clusters ---------- */
/* A cluster is a count. Size carries magnitude; the ring keeps it on brand without painting
   the whole disc red, which at 40px would out-shout every individual pin on the map. */
.pmdx .pmd-cl{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  background:#17171c;border:2px solid var(--red);
  color:#fff;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;
  line-height:1;box-shadow:0 4px 14px -4px rgba(0,0,0,.8);
}
.pmdx .pmd-cl-l{font-size:12px}
.pmdx .pmd-cl-past{border-color:var(--pmd-red-soft,rgba(237,28,36,.55));color:#c3ccd8}

/* ---------- empty viewport ---------- */
.pmdx .pmdx-empty{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:970;
  display:flex;align-items:center;gap:12px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:8px 8px 8px 16px;color:#c3ccd8;font-size:13px;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.pmdx .pmdx-empty[hidden]{display:none}
.pmdx .pmdx-empty a{
  background:var(--red);color:#fff;text-decoration:none;font-weight:700;font-size:12.5px;
  padding:7px 14px;border-radius:999px;white-space:nowrap;
}
.pmdx .pmdx-empty a:hover{background:var(--red-dark)}

/* ---------- selection: sheet on phones, right panel on desktop ---------- */
/* Same DOM, same handlers, different geometry. A sheet sliding up from the bottom is right on
   a phone held in one hand and wrong on a 1400px screen, where it covers the map it is meant
   to explain while leaving 900px of unused width beside it. */
@media(min-width:861px){
  .pmdx #pmd-sheet{
    top:calc(var(--bar-h) + 14px);
    bottom:14px;
    left:auto;
    right:14px;
    width:400px;
    max-height:none;
    border-radius:16px;
    background:var(--panel);
    border:1px solid var(--glass-line);
    color:#e6ebf2;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
    /* It arrives from the edge it lives on, not from the floor. */
    transform:translateX(calc(100% + 28px));
  }
  /* Identity, not `none` — see the note on #pmd-sheet.pmd-sheet-open in style.css. */
  .pmdx #pmd-sheet.pmd-sheet-open{transform:translateX(0)}
  .pmdx #pmd-sheet .pmd-sheet-bar{display:none}   /* nothing to drag on a pointer device */
}

/* ---------- the panel is dark, on every screen ---------- */
/* style.css still paints this white, from when the map itself was light. A white card sliding
   over a dark map is a torch in a dark room: the map disappears behind after-image for as long
   as it is open. Everything below re-tones the panel that style.css builds, at every width —
   the desktop block above only changes where it sits, not what it looks like. */
/* Opaque, not glass. Translucency put the text on a mottled, blurred picture of the map, and the
   blur that made that bearable is what cost the panel its subpixel antialiasing. A surface you
   read is a surface you read: flat, one tone, lifted just enough off the map that its edge does
   not need the border to do all the work. */
.pmdx #pmd-sheet{
  background:var(--panel);
  color:#e6ebf2;
  border-top:1px solid var(--glass-line);
  box-shadow:0 -20px 60px -28px rgba(0,0,0,.95);
}
.pmdx #pmd-sheet .pmd-sheet-pip{background:rgba(255,255,255,.24)}
.pmdx #pmd-sheet .pmd-sheet-nav{border-bottom:1px solid rgba(255,255,255,.07)}
.pmdx #pmd-sheet .pmd-sheet-nav-center h3,
.pmdx #pmd-sheet .pmd-detail-title,
.pmdx #pmd-sheet .pmd-ev-name{color:#fff}
.pmdx #pmd-sheet .pmd-sheet-desc{color:#b9c3d1}
.pmdx #pmd-sheet .pmd-info-row{color:#c3ccd8}
.pmdx #pmd-sheet .pmd-info-row strong{color:#7c8899}
.pmdx #pmd-sheet .pmd-info-row a,
.pmdx #pmd-sheet .pmd-email-link{color:#e6ebf2;text-decoration:underline;text-underline-offset:3px}
.pmdx #pmd-sheet .pmd-info-row a:hover{color:var(--red)}
.pmdx #pmd-sheet .pmd-ev-row{border-bottom:1px solid rgba(255,255,255,.06)}
.pmdx #pmd-sheet .pmd-ev-sub,
.pmdx #pmd-sheet .pmd-ev-chev{color:#7c8899}
.pmdx #pmd-sheet .pmd-ev-chip{
  background:rgba(255,255,255,.07);color:#97a2b2;border:0;
}
.pmdx #pmd-sheet .pmd-xbtn,
.pmdx #pmd-sheet .pmd-back-btn{color:#c3ccd8;background:rgba(255,255,255,.06);border-color:transparent}
.pmdx #pmd-sheet .pmd-xbtn:hover,
.pmdx #pmd-sheet .pmd-back-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.pmdx #pmd-sheet .pmd-sheet-sep{background:rgba(255,255,255,.07)}
.pmdx #pmd-sheet .pmd-premium-slot{
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12);color:#6b7686;
}
.pmdx #pmd-sheet .pmd-past-badge{background:rgba(255,255,255,.08);color:#97a2b2}

/* Only one thing on this panel is allowed to be a colour, and it is the primary action. */
.pmdx #pmd-sheet .pmd-action-link{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:#e6ebf2;
}
.pmdx #pmd-sheet .pmd-action-link:hover{background:rgba(255,255,255,.10)}
.pmdx #pmd-sheet .pmd-action-link i{color:#8b95a5}
.pmdx #pmd-sheet .pmd-action-primary,
.pmdx #pmd-sheet .pmd-action-red,
.pmdx #pmd-sheet .pmd-action-blue,
.pmdx #pmd-sheet .pmd-action-indigo{
  background:var(--red);border-color:var(--red);color:#fff;
}
.pmdx #pmd-sheet .pmd-action-primary:hover{background:var(--red-dark);opacity:1}
.pmdx #pmd-sheet .pmd-action-primary i{color:#fff !important}
.pmdx #pmd-sheet .pmd-action-outline{
  background:transparent;border:1px solid rgba(255,255,255,.14);color:#c3ccd8;
}
.pmdx #pmd-sheet .pmd-action-outline:hover{background:rgba(255,255,255,.08);color:#fff}
.pmdx #pmd-sheet .pmd-soc-icon{background:rgba(255,255,255,.08)}
.pmdx #pmd-sheet .pmd-soc-icon:hover{background:rgba(255,255,255,.16);opacity:1}

/* ---------- city view ---------- */
.pmdx .pmd-city-body{padding:0 16px 18px}
.pmdx .pmd-city-sub{margin:0 0 14px;color:#97a2b2;font-size:13px}
.pmdx .pmd-city-list{display:flex;flex-direction:column;margin-bottom:16px}
.pmdx .pmd-city-row{
  display:flex;align-items:center;gap:11px;padding:9px 2px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px;
}
.pmdx .pmd-city-row:hover{color:#fff}
.pmdx .pmd-city-row .pmd-pin{flex:0 0 12px}
.pmdx .pmd-city-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmdx .pmd-city-more{margin:10px 0 0;color:#6b7686;font-size:12px}
.pmdx .pmd-ev-mark{flex:0 0 12px;margin-right:2px}
.pmdx .pmd-soc-web{background:#3a4553}

/* ---------- footer links ---------- */
.pmdx.pmdx .pmd-footer-links.pmdx-foot{
  position:fixed;left:14px;bottom:14px;z-index:950;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  /* backdrop-filter goes with the background it belonged to: style.css pairs them for the light
     theme, and left on with no background it blurs a strip of map behind five words. */
  background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;
}
.pmdx .pmdx-foot a{color:#6b7686;font-size:11.5px;text-decoration:none;letter-spacing:.01em}
.pmdx .pmdx-foot a:hover{color:#c3ccd8}

/* ---------- small screens ---------- */
/* ---------- small screens ---------- */
/* The rail becomes a chip row above the bottom edge: four choices in one thumb-height strip,
   where a 160px column would cover a third of the map. Every rule here has to name .pmdx-row
   as well, because the desktop row rule sets a 160px minimum that would otherwise make the
   strip 640px wide inside a 390px screen. */
@media(max-width:820px){
  .pmdx-bar{gap:8px;padding:0 10px}
  .pmdx-nav a:not(.pmdx-add){display:none}
  .pmdx-search{max-width:none;flex:1 1 auto;min-width:0}

  .pmdx.pmdx #pmd-filter-bar{
    left:10px;right:10px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    flex-direction:row;align-items:flex-end;gap:6px;
  }
  .pmdx-rail-group{flex-direction:row;flex:1}
  .pmdx.pmdx #pmd-filter-bar .pmdx-row{
    min-width:0;flex:1 1 0;justify-content:center;gap:6px;padding:0 6px;
  }
  .pmdx.pmdx #pmd-filter-bar .pmdx-row + .pmdx-row{
    border-top:0;border-left:1px solid rgba(255,255,255,.07);
  }
  /* The icon carries the meaning at this size; the word does not fit next to a count. */
  .pmdx-label{display:none}
  .pmdx.pmdx #pmd-filter-bar #pmdNearMe{flex:0 0 44px}
  .pmdx.pmdx .pmd-when.pmdx-when{align-self:auto}
  .pmdx.pmdx .pmd-footer-links.pmdx-foot{display:none}
  .pmdx .pmdx-empty{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* Below this the header has to choose: a search box you can type a city into beats a button
   that repeats what the map already invites you to do. */
@media(max-width:480px){
  .pmdx-add{font-size:0;padding:9px 12px;gap:0}
  .pmdx-add i{font-size:15px}
  .pmdx-logo{font-size:13px}
}
/* The item you are already on. Same convention as the rest of the site. */
.pmdx-nav a.on{color:#fff}


/* ─────────────────────────────────────────────── names on the pins ───────── */
/* From zoom 9 in, a box beside the pin says what it is. Which pins get one, on which side, and
   the box's measured size are all decided in script.js — they depend on what else is on screen.
   The box is the content of a Leaflet divIcon, so Leaflet positions it exactly as it positions
   the pin, and CSS owns only the look.

   The pane sits BELOW the marker pane, so where a box and a pin overlap, the pin wins. */
.pmd-lab{
  position:relative;
  /* A column of two rows: the name (with its PAST badge) and, when there is room for it, the
     one extra fact — what is taught there, or when it happens. */
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  max-width:224px;
  padding:5px 9px;
  font:600 11.5px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:#EAF0F7;text-align:left;white-space:nowrap;
  /* Opaque, and no backdrop-filter: a 3px blur behind a 96% surface is invisible, but it puts
     every one of up to twenty boxes on its own compositing layer and drops their 11.5px type to
     grayscale antialiasing — the most fragile text on the page paying for an effect nobody sees. */
  background:rgba(15,20,26,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  box-shadow:0 3px 12px rgba(0,0,0,.5);
  cursor:pointer;
  box-sizing:border-box;
}
.pmdx .leaflet-marker-icon:hover .pmd-lab,
.pmd-lab:hover{border-color:var(--pmd-red,#ED1C24);background:rgba(20,25,33,.96)}
/* min-width:0 is what makes the name give way instead of the badge. A flex item will not shrink
   below its content width without it, so the row overflowed its own max-width and the box
   clipped whatever came last — which was the PAST badge, cut to "PA". */
.pmd-lab-row{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.pmd-lab-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Quieter and smaller than the name, because it is the answer to a question nobody asked yet.
   A style list for a place, a date for an event. */
/* Styles are stored however they were typed — "salsa", "zouk", "Cheerleading" — and a caption
   that mixes the two reads as raw data rather than as a line someone wrote. Capitalised on
   output only; the data is left alone, and a date passes through it unharmed. */
.pmd-lab-sub{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  font-size:10px;font-weight:500;color:#8b95a5;letter-spacing:.01em;
  text-transform:capitalize;
}
.pmd-lab-ghost .pmd-lab-sub{color:#6b7686}
/* A finished edition says so. The outline pin says it too, but a box carrying only a festival's
   name promises something that has already happened. */
.pmd-lab-past{
  flex:0 0 auto;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.18);border-radius:3px;padding:1px 4px;
}
.pmd-lab-ghost{border-style:dashed}

/* The measuring copy: the divIcon has to be told its size before it exists, so the same box is
   built once off-screen and asked how wide the name made it. visibility rather than display,
   because a box that is not laid out has no width to report. */
.pmd-lab-ruler{
  position:absolute;left:-9999px;top:0;visibility:hidden;pointer-events:none;
}

/* The arrow: a small square rotated 45° at the edge facing the pin, with only its two outer
   borders painted, so it reads as a point on the box rather than a diamond beside it. */
.pmd-lab::after{
  content:'';position:absolute;width:7px;height:7px;
  background:rgba(15,20,26,.96);      /* the box's own tone, or the seam shows */
  border:1px solid rgba(255,255,255,.14);
  transform:rotate(45deg);
}
.pmd-lab-right::after {left:-4.5px;top:50%;margin-top:-4px;border-width:0 0 1px 1px}
.pmd-lab-left::after  {right:-4.5px;top:50%;margin-top:-4px;border-width:1px 1px 0 0}
.pmd-lab-top::after   {bottom:-4.5px;left:50%;margin-left:-4px;border-width:0 1px 1px 0}
.pmd-lab-bottom::after{top:-4.5px;left:50%;margin-left:-4px;border-width:1px 0 0 1px}
.pmd-lab-ruler::after{display:none}

/* On a phone the boxes would cover the pins they explain, and there is no hover to fall back
   on. The bottom sheet is the way in at that size. */
@media(max-width:560px){
  .pmd-lab{display:none}
}

/* ─────────────────────────────────────────────────── legend ──────────────── */
/* Sits above the footer links, bottom left. Small enough to ignore, present enough to answer
   the question the shape language raises. */
.pmdx .pmdx-legend{
  position:fixed;left:14px;bottom:38px;z-index:950;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:7px 12px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
  font-size:11px;font-weight:600;color:#8b95a5;letter-spacing:.01em;
  pointer-events:none;                     /* it explains; it is not a control */
}
.pmdx .pmdx-lg-i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pmdx .pmdx-lg-i .pmd-pin{flex:0 0 auto}
/* A square turned 45° reads heavier than a circle of the same width, because its diagonal is
   what the eye measures. Taken down a notch so the three marks carry equal weight in a row of
   type — on the map they are read against each other, here against words. */
.pmdx .pmdx-lg-i .pmd-pin-event{transform:rotate(45deg) scale(.86)}
.pmdx .pmdx-lg-i .pmd-pin-ghost{transform:rotate(45deg) scale(.86)}
/* A cluster in miniature: same dark disc and red ring, shrunk to the size of type. */
.pmdx .pmdx-lg-cl{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  background:#17171c;border:1.5px solid var(--red);
  font-size:8px;font-weight:500;color:#fff;line-height:1;
}
/* The live half, divided off by a rule rather than a bullet so it reads as a different kind of
   statement: the left side is what the marks mean, the right side is what is happening. */
.pmdx .pmdx-lg-state{
  padding-left:14px;border-left:1px solid rgba(255,255,255,.14);
  color:#6b7686;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pmdx .pmdx-lg-state b{color:#c3ccd8;font-weight:700}

@media(max-width:820px){
  /* The footer links go, so the legend takes their place at the bottom. The empty-viewport chip
     lived at exactly this height, so it moves up rather than sharing the line. */
  .pmdx .pmdx-legend{bottom:calc(72px + env(safe-area-inset-bottom,0px));left:10px;right:10px;
    justify-content:center;gap:10px}
  .pmdx .pmdx-empty{bottom:calc(118px + env(safe-area-inset-bottom,0px))}
  /* No names on a phone, so the readout would only ever say the same thing. The alphabet is
     what still earns its space. */
  .pmdx .pmdx-lg-state{display:none}
}
@media(max-width:480px){
  .pmdx .pmdx-legend{font-size:10px;gap:8px;padding:6px 10px}
}

/* ───────────────────────────────────── the panel on a phone ──────────────── */
/* At 375×667 the panel is the screen, so everything in it is competing for the same 550px.
   Three things were spending that badly. */
@media(max-width:560px){
  /* A dashed box saying PROMOTED, with nothing in it, was taking 52px of a 667px screen to
     advertise that advertising exists. It stays on wider screens where it costs nothing. */
  .pmdx #pmd-sheet .pmd-premium-slot{display:none}

  /* The photograph led with 210px — nearly a third of the panel — so the address, the links and
     the buttons all started below the fold. It is still the first thing seen, just not the only
     thing. */
  .pmdx #pmd-sheet .pmd-sheet-photo{height:150px}

  /* Wrapped buttons: the primary one takes its own line and the two outline ones share the next,
     which is steadier than three items breaking wherever the text happens to end. */
  .pmdx #pmd-sheet .pmd-action-links{gap:7px}
  .pmdx #pmd-sheet .pmd-action-primary{width:100% !important;justify-content:center}
  .pmdx #pmd-sheet .pmd-action-outline{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
}

/* Shorter than a phone in landscape: the panel would be taller than the screen it opens on. */
@media(max-height:520px){
  .pmdx #pmd-sheet .pmd-sheet-photo{height:110px}
}

/* ─────────────────────────── attribution, in the dark ────────────────────── */
/* style.css gives this a white pill, from when the map was light — on the dark basemap it is the
   brightest thing on screen after the brand, sitting dead centre at the bottom. It is required
   attribution and it stays legible, just quiet. */
.pmdx .leaflet-control-attribution{
  background:rgba(13,17,23,.72) !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.08);
  padding:4px 10px !important;
  font-size:10px !important;
}
.pmdx .leaflet-control-attribution,
.pmdx .leaflet-control-attribution a{color:#7c8899 !important}
.pmdx .leaflet-control-attribution a:hover{color:#c3ccd8 !important}

@media(max-width:820px){
  /* The rail becomes a strip along the bottom edge on a phone, and the attribution was sitting
     underneath it — half a pill showing from behind the controls. It moves above the legend. */
  .pmdx .leaflet-control-attribution{
    bottom:calc(112px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* The scroller carries the panel's own colour, and that is not cosmetic.
   Everything in the panel lives inside #pmd-sheet-scroll, which had overflow-y:auto and no
   background of its own — the opaque tone was on the parent. Chrome cannot treat a scrolling
   contents layer as opaque unless the scroller itself paints one, and it will not use subpixel
   antialiasing on text in a layer it cannot prove opaque. That, and not any property on the panel,
   is why every glyph in here measured 0 coloured edge pixels while the same string measured 1924
   on a plain page: the panel is promoted because it overlaps the composited tile pane, and the
   promoted layer's text sits in a see-through child. No single-factor test reproduced it because it
   takes both. */
.pmdx #pmd-sheet-scroll{background:var(--panel);border-radius:0 0 16px 16px}