/*
 * Billboard map layout and components.
 *
 * Colors, fonts and radii come from custom properties in map/brand.css.
 * Every class is prefixed "bm-" so these styles cannot clash with the host site.
 */

/* ---------- Section ---------- */

/*
 * The section's size is reserved before any script runs (the #billboard-map rule),
 * so the page below the map never jumps while the map loads.
 */
#billboard-map,
.bm-root {
  --bm-space-1: 4px;
  --bm-space-2: 8px;
  --bm-space-3: 12px;
  --bm-space-4: 16px;
  --bm-space-5: 20px;
  --bm-space-6: 24px;
  --bm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  display: block;
  position: relative;
  width: 100%;
  height: var(--bm-height);
  min-height: 280px;
  overflow: hidden;
  font-family: var(--bm-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bm-color-text);
  background: var(--bm-color-surface-alt);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  container: bm-root / size; /* its height is fixed, so the sheet can size its photo from it (cqh) */
}

.bm-root *,
.bm-root *::before,
.bm-root *::after {
  box-sizing: border-box;
}

.bm-map {
  position: absolute;
  inset: 0;
}

/* Focus: a thick outline with a light ring behind it, visible on any background. */
.bm-root :focus-visible {
  outline: 3px solid var(--bm-color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bm-color-surface);
}

.bm-root [hidden] {
  display: none !important;
}

/* ---------- Panel (title, filter, count, key) ---------- */

.bm-panel {
  position: absolute;
  z-index: 2;
  top: var(--bm-space-4);
  left: var(--bm-space-4);
  width: 300px;
  max-height: calc(100% - 2 * var(--bm-space-4));
  overflow-y: auto;
  padding: var(--bm-space-5);
  background: var(--bm-color-surface);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
}

.bm-panel--key {
  width: auto;
  max-width: 300px;
  padding: var(--bm-space-3) var(--bm-space-4);
}

.bm-panel--key > :first-child {
  margin-top: 0;
}

.bm-brand {
  margin-bottom: var(--bm-space-3);
}

.bm-brand__link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.bm-brand__logo {
  display: block;
  max-width: 180px;
  max-height: 44px;
}

.bm-brand__name,
.bm-label {
  font-family: var(--bm-font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bm-brand__name {
  color: var(--bm-color-primary);
}

.bm-label {
  display: block;
  margin: 0 0 var(--bm-space-2);
  padding: 0;
  color: var(--bm-color-muted);
}

.bm-panel__title {
  margin: 0;
  font-family: var(--bm-font-heading);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bm-panel__intro {
  margin: var(--bm-space-2) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bm-color-muted);
}

/* Static / Digital filter: radio buttons styled as one segmented bar. */
.bm-segmented {
  min-width: 0;
  margin: var(--bm-space-5) 0 0;
  padding: 0;
  border: 0;
}

.bm-segmented__options {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bm-color-surface-alt);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius-small);
}

.bm-segmented__option {
  position: relative;
  flex: 1;
}

.bm-segmented__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bm-segmented__option label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--bm-space-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-color-muted);
  border-radius: calc(var(--bm-radius-small) - 3px);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s var(--bm-ease), color 0.15s var(--bm-ease);
}

.bm-segmented__option input:checked + label {
  color: var(--bm-color-on-primary);
  background: var(--bm-color-primary);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
}

.bm-segmented__option input:focus-visible + label {
  outline: 3px solid var(--bm-color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bm-color-surface);
}

@media (hover: hover) {
  .bm-segmented__option input:not(:checked) + label:hover {
    color: var(--bm-color-text);
    background: var(--bm-color-surface);
  }
}

.bm-status {
  margin: var(--bm-space-3) 0 0;
  font-size: 14px;
  color: var(--bm-color-muted);
}

.bm-root--loading .bm-status {
  width: 60%;
  color: transparent;
  border-radius: var(--bm-radius-small);
  background: linear-gradient(90deg, var(--bm-color-surface-alt), var(--bm-color-border), var(--bm-color-surface-alt));
  background-size: 200% 100%;
  animation: bm-shimmer 1.2s linear infinite;
}

@keyframes bm-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.bm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2) var(--bm-space-4);
  margin: var(--bm-space-4) 0 0;
  padding: var(--bm-space-4) 0 0;
  list-style: none;
  font-size: 13px;
  color: var(--bm-color-muted);
  border-top: 1px solid var(--bm-color-border);
}

.bm-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bm-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--bm-radius-round);
  box-shadow: 0 0 0 2px var(--bm-color-surface), 0 0 0 3px var(--bm-color-border);
}

.bm-legend__swatch--digital { background: var(--bm-color-pin-digital); }
.bm-legend__swatch--static { background: var(--bm-color-pin-static); }
.bm-legend__swatch--mixed { background: var(--bm-color-pin-mixed); }

.bm-legend__count {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bm-color-on-primary);
  background: var(--bm-color-pin-badge);
  border-radius: var(--bm-radius-round);
}

.bm-note {
  margin: var(--bm-space-3) 0 0;
  padding: var(--bm-space-2) var(--bm-space-3);
  font-size: 13px;
  line-height: 1.4;
  color: var(--bm-color-note);
  background: var(--bm-color-note-bg);
  border-radius: var(--bm-radius-small);
}

/* ---------- Messages over the map: loading, error, empty, basemap ---------- */

.bm-message {
  --bm-message-shift: 0px; /* set by script: half the panel width, so the message centers in the free area */
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(360px, calc(100% - 48px));
  padding: var(--bm-space-6);
  text-align: center;
  background: var(--bm-color-surface);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  transform: translate(calc(-50% + var(--bm-message-shift)), -50%);
}

.bm-message--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-3);
  width: auto;
  padding: var(--bm-space-3) var(--bm-space-5);
  border-radius: var(--bm-radius-pill);
}

.bm-message__title {
  margin: 0;
  font-family: var(--bm-font-heading);
  font-size: 17px;
  font-weight: 700;
}

.bm-message--loading .bm-message__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-color-muted);
}

.bm-message__text {
  margin: var(--bm-space-2) 0 var(--bm-space-4);
  font-size: 15px;
  color: var(--bm-color-muted);
}

.bm-message .bm-button {
  display: inline-block;
  padding-inline: var(--bm-space-6);
}

/* "Try again" and an optional link side by side (they wrap on narrow maps). */
.bm-message__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bm-space-2);
}

/* A photo that failed is hidden while it is retried (no broken-image icon). */
.bm-root img.is-retrying {
  visibility: hidden;
}

.bm-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--bm-color-border);
  border-top-color: var(--bm-color-primary);
  border-radius: 50%;
  animation: bm-spin 0.8s linear infinite;
}

@keyframes bm-spin {
  to { transform: rotate(360deg); }
}

/* Shown only when the basemap service is unreachable. */
.bm-basemap-note {
  position: absolute;
  z-index: 2;
  left: var(--bm-space-3);
  bottom: var(--bm-space-3);
  max-width: calc(100% - 90px);
  margin: 0;
  padding: 6px var(--bm-space-3);
  font-size: 13px;
  color: var(--bm-color-muted);
  background: var(--bm-color-surface);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius-pill);
}

/* ---------- Pins and clusters ---------- */

/*
 * The pin button is a 44 x 48 px touch target with the 30 x 40 px drawing at its
 * bottom center (the tip marks the location). No `position` here: MapLibre
 * positions markers absolutely, and overriding it would make pins drift.
 */
.bm-pin {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 44px;
  height: 48px;
  margin: 0;
  padding: 0;
  color: var(--bm-color-pin-digital);
  background: none;
  border: 0;
  border-radius: var(--bm-radius-small);
  cursor: pointer;
}

.bm-pin--static { color: var(--bm-color-pin-static); }
.bm-pin--mixed { color: var(--bm-color-pin-mixed); }

.bm-pin__shape {
  display: block;
  flex: none;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: transform 0.18s var(--bm-ease);
  filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.35));
}

.bm-pin__body {
  fill: currentColor;
  stroke: var(--bm-color-pin-outline);
  transition: stroke 0.18s var(--bm-ease);
}

.bm-pin__paper { fill: var(--bm-color-pin-glyph); }
.bm-pin__screen { fill: currentColor; opacity: 0.45; }
.bm-pin__lines { stroke: currentColor; }

.bm-pin__glyph--static { display: none; }
.bm-pin--static .bm-pin__glyph--digital { display: none; }
.bm-pin--static .bm-pin__glyph--static { display: inline; }

@media (hover: hover) {
  .bm-pin:hover .bm-pin__shape { transform: scale(1.12); }
}

.bm-pin--active {
  color: var(--bm-color-pin-active);
}

.bm-pin--active .bm-pin__body {
  stroke: var(--bm-color-pin-active-outline);
  stroke-width: 2.5;
}

.bm-pin--active .bm-pin__shape {
  transform: scale(1.22);
}

/* Selected: a soft halo on the ground under the pin. */
.bm-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 22px;
  height: 8px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--bm-color-primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s var(--bm-ease), transform 0.18s var(--bm-ease);
}

.bm-pin--active::after {
  opacity: 0.35;
  transform: scale(1);
}

.bm-pin--active {
  z-index: 2;
}

/* "2 faces" badge: a small filled pill on the pin's shoulder. */
.bm-pin__count {
  position: absolute;
  top: -1px;
  right: -5px;
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font: 700 12px/18px var(--bm-font-body);
  color: var(--bm-color-on-primary);
  background: var(--bm-color-pin-badge);
  border: 2px solid var(--bm-color-pin-outline);
  border-radius: var(--bm-radius-pill);
  box-sizing: content-box;
}

.bm-pin--multi .bm-pin__count {
  display: block;
}

/* Clusters: a light disc with a colored ring, so they read differently from the filled "2" badge. */
.bm-cluster {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font: 800 15px/1 var(--bm-font-body);
  color: var(--bm-color-primary);
  background: var(--bm-color-surface);
  border: 3px solid var(--bm-color-primary);
  border-radius: var(--bm-radius-round);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bm-color-primary) 16%, transparent), 0 3px 8px rgba(16, 24, 40, 0.25);
  cursor: pointer;
  transition: transform 0.18s var(--bm-ease);
}

.bm-cluster--md { width: 50px; height: 50px; font-size: 16px; }
.bm-cluster--lg { width: 58px; height: 58px; font-size: 17px; }

@media (hover: hover) {
  .bm-cluster:hover { transform: scale(1.08); }
}

/* ---------- Card ---------- */

.bm-card-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/*
 * Three parts: the close button, a scrolling middle, and a footer that always
 * shows both actions. The card never grows past the map.
 */
.bm-card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-height: min(640px, calc(100% - 24px));
  overflow: hidden;
  pointer-events: auto;
  background: var(--bm-color-surface);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  container: bm-card / inline-size; /* lets the title and photo size from the card's own width (cqi) */
}

.bm-card--enter {
  animation: bm-card-in 0.16s var(--bm-ease);
}

@keyframes bm-card-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bm-card:focus {
  outline: none;
}

.bm-card:focus-visible {
  outline: 3px solid var(--bm-color-focus);
  outline-offset: 0;
}

/*
 * The scrolling middle. Its last 24px fade out, so text meeting the footer
 * dissolves instead of being cut; the body's bottom padding keeps the final
 * line clear of the fade once scrolled to the end.
 */
.bm-card__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

/* Photo: fixed frame so nothing shifts while it loads. */
.bm-card__media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--bm-color-surface-alt);
}

.bm-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bm-space-2);
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-color-muted);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(16, 24, 40, 0.03) 10px 20px),
    var(--bm-color-surface-alt);
}

/*
 * Top bar: holds the close button (and a grab handle on phone sheets). It does
 * not scroll, so content always passes beneath it and never under the button.
 */
.bm-card__bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 44px;
  padding: 0 var(--bm-space-1);
  background: var(--bm-color-surface);
  border-bottom: 1px solid var(--bm-color-border);
}

.bm-card__handle {
  display: none;
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--bm-color-border-strong);
}

.bm-card__close {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--bm-color-text);
  background: transparent;
  border: 0;
  border-radius: var(--bm-radius-round);
  cursor: pointer;
  transition: background-color 0.15s var(--bm-ease), color 0.15s var(--bm-ease);
}

/* Invisible padding: a 44 x 44 px hit area around the 36 px button. */
.bm-card__close::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.bm-card__close svg {
  display: block;
}

@media (hover: hover) {
  .bm-card__close:hover { color: var(--bm-color-primary); background: var(--bm-color-surface-alt); }
}

.bm-card__body {
  padding: var(--bm-space-4) var(--bm-space-5) var(--bm-space-6);
}

/* Face toggle for two (or more) faces on one structure. */
.bm-faces {
  display: flex;
  gap: 2px;
  margin-bottom: var(--bm-space-4);
  padding: 3px;
  background: var(--bm-color-surface-alt);
  border: 1px solid var(--bm-color-border);
  border-radius: var(--bm-radius-small);
}

.bm-faces__tab {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--bm-space-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-color-muted);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: calc(var(--bm-radius-small) - 3px);
  cursor: pointer;
  transition: background-color 0.15s var(--bm-ease), color 0.15s var(--bm-ease);
}

.bm-faces__tab[aria-selected="true"] {
  color: var(--bm-color-text);
  background: var(--bm-color-surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14);
}

@media (hover: hover) {
  .bm-faces__tab[aria-selected="false"]:hover { color: var(--bm-color-text); }
}

.bm-card__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2);
}

.bm-card__id {
  font-family: var(--bm-font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bm-color-muted);
}

.bm-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-style: var(--bm-strong-style);
  font-weight: var(--bm-strong-weight);
  letter-spacing: var(--bm-strong-tracking);
  text-transform: var(--bm-strong-transform);
  line-height: 1.5;
  color: var(--bm-color-muted);
  background: var(--bm-color-surface-alt);
  border-radius: var(--bm-radius-pill);
}

.bm-badge--digital { color: var(--bm-color-badge-digital); background: var(--bm-color-badge-digital-bg); }
.bm-badge--static { color: var(--bm-color-badge-static); background: var(--bm-color-badge-static-bg); }

.bm-card__title {
  margin: var(--bm-space-2) 0 0;
  font-family: var(--bm-font-heading);
  font-size: 19px;
  line-height: var(--bm-heading-line-height);
  font-weight: var(--bm-heading-weight);
  letter-spacing: -0.005em;
  text-transform: var(--bm-heading-transform);
  text-wrap: balance; /* long locations break into even lines, not one word alone */
}

.bm-card__market {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--bm-color-muted);
}

/*
 * Stats: one row each, what it measures on the left and the value on the right.
 * Long values from Airtable wrap at word boundaries inside their own column.
 */
.bm-stats {
  margin: var(--bm-space-4) 0 0;
  padding: 2px 0;
  list-style: none;
  border-top: 1px solid var(--bm-color-border);
  border-bottom: 1px solid var(--bm-color-border);
}

.bm-stat {
  display: flex;
  flex-direction: row-reverse; /* the value comes first in the markup, so screen readers hear "20,000 daily impressions" */
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bm-space-3);
  padding: 7px 0;
}

.bm-stat + .bm-stat {
  border-top: 1px solid var(--bm-color-border);
}

.bm-stat__value {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  color: var(--bm-color-text);
  text-wrap: balance;
}

.bm-stat__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--bm-color-muted);
}

.bm-stat__label::first-letter {
  text-transform: uppercase;
}

/* Source note such as "(COMMB)": smaller and muted, but never under 12px. */
.bm-stat__source {
  font-size: max(12px, 0.85em);
  white-space: nowrap;
  opacity: 0.85;
}

.bm-stat__arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--bm-color-primary);
  background: var(--bm-color-surface-alt);
  border-radius: var(--bm-radius-round);
}

.bm-stat__arrow svg {
  display: block;
  width: 12px;
  height: 12px;
}

.bm-card__about {
  margin-top: var(--bm-space-3);
}

.bm-card__desc {
  margin: var(--bm-space-3) 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bm-color-muted);
}

.bm-card__about .bm-card__desc {
  margin-top: 0;
}

.bm-card__desc--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.bm-link-button {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--bm-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* "Show more": 44 px tall hit area, text stays compact. */
.bm-card__more {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: -6px 0 -10px;
  font-size: 14px;
}

.bm-card__contact {
  margin: var(--bm-space-3) 0 0;
  font-size: 13.5px;
  color: var(--bm-color-muted);
}

.bm-card__contact a {
  color: var(--bm-color-primary);
}

.bm-copyable {
  color: var(--bm-color-text);
  user-select: all;
}

/* Footer: both actions, always visible. Side by side when the card is wide enough. */
.bm-card__footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  padding: var(--bm-space-3) var(--bm-space-5) var(--bm-space-4);
  background: var(--bm-color-surface);
  border-top: 1px solid var(--bm-color-border);
  box-shadow: 0 -8px 16px rgba(16, 24, 40, 0.05);
}

.bm-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px var(--bm-space-4);
  font: inherit;
  font-size: var(--bm-button-size);
  font-style: var(--bm-strong-style);
  font-weight: var(--bm-strong-weight);
  letter-spacing: var(--bm-strong-tracking);
  text-transform: var(--bm-strong-transform);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--bm-color-on-primary);
  background: var(--bm-color-primary);
  border: 1px solid var(--bm-color-primary);
  border-radius: var(--bm-radius-small);
  cursor: pointer;
  transition: background-color 0.15s var(--bm-ease), border-color 0.15s var(--bm-ease), transform 0.1s var(--bm-ease);
}

.bm-button:active {
  transform: translateY(1px);
}

.bm-button--secondary {
  color: var(--bm-color-primary);
  background: var(--bm-color-surface);
  border-color: var(--bm-color-primary);
}

@media (hover: hover) {
  .bm-button:hover { background: var(--bm-color-primary-hover); border-color: var(--bm-color-primary-hover); }
  .bm-button--secondary:hover { background: var(--bm-color-surface-alt); border-color: var(--bm-color-primary); }
}

.bm-card__footer .bm-button {
  flex: 1 1 auto;
  white-space: nowrap;
}

.bm-card__footer .bm-card__cta {
  flex-grow: 1.6;
}

/* Short desktop sections (a laptop embed): shorter photo and description so more fits. */
.bm-root--compact .bm-card__media { aspect-ratio: 3 / 1; }
.bm-root--compact .bm-card__desc--clamped { -webkit-line-clamp: 2; line-clamp: 2; }
.bm-root--compact .bm-card__body { padding-top: var(--bm-space-3); }
.bm-root--compact .bm-faces { margin-bottom: var(--bm-space-3); }
.bm-root--compact .bm-stats { margin-top: var(--bm-space-3); }

/* ---------- Map controls ---------- */

/*
 * The zoom buttons are pinned in place so the map credit growing or folding
 * next to them never moves them.
 */
.bm-root .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  position: absolute;
  right: 10px;
  bottom: 36px;
  margin: 0;
  border-radius: var(--bm-radius-small);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.2);
}

.bm-root .maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
}

.bm-root .maplibregl-ctrl-attrib {
  font-size: 12px;
  background: color-mix(in srgb, var(--bm-color-surface) 80%, transparent);
}

/* MapLibre rounds the map credit and its info button (12px); the brand's corner shape applies here too. */
.bm-root .maplibregl-ctrl-attrib,
.bm-root .maplibregl-ctrl-attrib.maplibregl-compact,
.bm-root .maplibregl-ctrl-attrib.maplibregl-compact-show,
.bm-root .maplibregl-ctrl-attrib-button {
  border-radius: var(--bm-radius-small);
}

/* The folded map credit's info button: a 44 x 44 px hit area around the 24 px icon. */
.bm-root .maplibregl-ctrl-attrib-button::before {
  content: "";
  position: absolute;
  inset: -10px;
}

/* ---------- Phone layout (narrow or short sections): set by script ---------- */

.bm-root--phone .bm-panel {
  top: max(var(--bm-space-3), env(safe-area-inset-top));
  left: max(var(--bm-space-3), env(safe-area-inset-left));
  right: max(var(--bm-space-3), env(safe-area-inset-right));
  width: auto;
  padding: var(--bm-space-3) var(--bm-space-4);
}

.bm-root--phone .bm-brand,
.bm-root--phone .bm-panel__intro,
.bm-root--phone .bm-legend,
.bm-root--phone .bm-segmented .bm-label {
  display: none;
}

.bm-root--phone .bm-panel__title {
  font-size: 19px;
}

.bm-root--phone .bm-segmented {
  margin-top: var(--bm-space-3);
}

.bm-root--phone .bm-segmented__option label {
  min-height: 44px;
}

.bm-root--phone .bm-status {
  margin-top: var(--bm-space-2);
  font-size: 13.5px;
}

.bm-root--phone .bm-note {
  margin-top: var(--bm-space-2);
  padding: 6px 10px;
  font-size: 12.5px;
}

.bm-root--phone .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  bottom: 46px;
}

.bm-root--phone .maplibregl-ctrl-group button {
  width: 44px;
  height: 44px;
}

/* Touch screens in the wide layout (tablets): zoom buttons and the floating card's face tabs at a 44px touch size too. */
@media (pointer: coarse) {
  .bm-root .maplibregl-ctrl-group button {
    width: 44px;
    height: 44px;
  }

  .bm-card:not(.bm-card--bottom) .bm-faces__tab {
    min-height: 44px;
  }
}

/* While a board is open on a phone, the panel steps aside so the map stays visible. */
.bm-root--phone.bm-root--card-open .bm-panel {
  display: none;
}

/* Short and wide (a phone on its side): the panel becomes one compact row. */
.bm-root--short .bm-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-2) var(--bm-space-4);
  padding: var(--bm-space-2) var(--bm-space-3);
}

/* The page around a short section already says what it is; the filter row keeps its space for the map. */
.bm-root--short .bm-panel__title {
  display: none;
}

.bm-root--short .bm-segmented,
.bm-root--short .bm-status,
.bm-root--short .bm-note {
  margin: 0;
}

.bm-root--short .bm-segmented {
  flex: 0 1 260px;
}

/* ---------- Sheets (phone layout) ---------- */

/* Portrait: a sheet along the bottom. */
.bm-card.bm-card--sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: calc(var(--bm-sheet-max, 80) * 1%);
  border-width: 1px 0 0;
  border-radius: var(--bm-radius-sheet) var(--bm-radius-sheet) 0 0;
  box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.22);
}

.bm-card--sheet.bm-card--enter {
  animation: bm-sheet-in 0.26s var(--bm-ease);
}

@keyframes bm-sheet-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Landscape: docked to the right, full height, so the map stays visible on the left. */
.bm-card.bm-card--side {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(380px, 55%);
  max-height: none;
  border-width: 0 0 0 1px;
  border-radius: var(--bm-radius-sheet) 0 0 var(--bm-radius-sheet);
  box-shadow: -10px 0 30px rgba(16, 24, 40, 0.22);
}

.bm-card--side.bm-card--enter {
  animation: bm-side-in 0.26s var(--bm-ease);
}

@keyframes bm-side-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.bm-card--sheet .bm-card__media {
  aspect-ratio: 3 / 1;
}

/*
 * Bottom sheet photo: 3:1 on roomy phones, smaller on short screens so the Board ID, face
 * tabs, title, daily impressions and board size stay visible above the buttons on open.
 * --bm-sheet-max (a percentage of the section, which is a size container) is the sheet's
 * maximum height; 392px covers those rows and the footer at large system text sizes, even
 * when the tabs wrap under the Board ID and the title takes two lines.
 */
.bm-card--sheet:not(.bm-card--side) .bm-card__media {
  aspect-ratio: auto;
  height: clamp(64px, calc(var(--bm-sheet-max, 80) * 1cqh - 392px), 33.33cqi);
}

/* Short sections: the sheet may take a little more height (the pin still shows above it). */
@container bm-root (max-height: 640px) {
  .bm-card--sheet {
    --bm-sheet-max: 86;
  }
}

.bm-card--sheet .bm-card__close {
  width: 44px;
  height: 44px;
}

.bm-card--sheet .bm-card__bar {
  height: 44px;
  padding-right: max(var(--bm-space-1), env(safe-area-inset-right));
}

/* The grab handle marks the bottom sheet as a sheet (decorative; the close button closes it). */
.bm-card--sheet:not(.bm-card--side) .bm-card__handle {
  display: block;
}

.bm-card--side .bm-card__bar {
  height: auto;
  min-height: 48px;
  padding-block: 3px;
}

/* Landscape: the face toggle sits in the bar, beside the close button. */
.bm-card--side .bm-card__bar .bm-faces {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 var(--bm-space-2) 0 var(--bm-space-3);
  padding: 2px;
}

/* Phone titles: a little smaller and fluid with the sheet width, so long locations take two even lines. */
.bm-card--sheet .bm-card__desc {
  font-size: 16px;
}

.bm-card--sheet .bm-card__title {
  font-size: clamp(16px, 4.8cqi, 19px);
}

.bm-card--sheet .bm-card__body {
  padding: var(--bm-space-4) var(--bm-space-4) var(--bm-space-6);
}

.bm-card--sheet .bm-faces__tab {
  min-height: 44px;
  font-size: 15px;
}

.bm-card--sheet .bm-card__footer {
  padding: var(--bm-space-3) max(var(--bm-space-4), env(safe-area-inset-right)) max(var(--bm-space-3), env(safe-area-inset-bottom)) max(var(--bm-space-4), env(safe-area-inset-left));
}

.bm-card--sheet .bm-button {
  min-height: 46px;
}

/* Landscape side sheet: little height to spare, so a shorter photo and a tighter footer. */
.bm-card--side .bm-card__media { aspect-ratio: 4 / 1; }
.bm-card--side .bm-card__body { padding-top: var(--bm-space-3); }
.bm-card--side .bm-faces { margin-bottom: var(--bm-space-2); }
.bm-card--side .bm-card__footer {
  gap: var(--bm-space-2);
  padding-top: var(--bm-space-2);
  padding-bottom: max(var(--bm-space-2), env(safe-area-inset-bottom));
}
.bm-card--side .bm-button { min-height: 44px; padding: 4px var(--bm-space-2); font-size: 14px; line-height: 1.2; }

/* Short button labels: only the bottom sheet shows them (see buttonLabel() in the script). */
.bm-button__short {
  display: none;
}

.bm-card__bar-title {
  display: none;
}

/* ---------- Bottom sheet (portrait phones): the photo starts at the top ---------- */

/*
 * The bar is the first thing inside the scrolling middle, pinned to its top, and
 * overlaps the photo (negative margin). Over the photo it is see-through: only the
 * grab handle and a round close button show. When the details scroll up to it, the
 * script adds bm-card--scrolled and it fades into an opaque header with the Board ID,
 * so text always passes beneath it and never under the close button.
 */
.bm-card--bottom .bm-card__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 48px;
  margin-bottom: -48px;
  padding: 0 max(var(--bm-space-2), env(safe-area-inset-right)) 0 max(var(--bm-space-4), env(safe-area-inset-left));
  background: transparent;
  border-bottom: 0;
}

.bm-card--bottom .bm-card__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bm-color-surface);
  border-bottom: 1px solid var(--bm-color-border);
  box-shadow: 0 6px 12px rgba(16, 24, 40, 0.06);
  opacity: 0;
  transition: opacity 0.18s var(--bm-ease);
}

.bm-card--bottom.bm-card--scrolled .bm-card__bar::before {
  opacity: 1;
}

.bm-card--bottom .bm-card__bar-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: var(--bm-space-2);
  overflow: hidden;
  font-family: var(--bm-font-label);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bm-color-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--bm-ease), visibility 0s linear 0.18s;
}

.bm-card--bottom.bm-card--scrolled .bm-card__bar-title {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s var(--bm-ease);
}

/* Grab handle: a light pill with a soft shadow over the photo, plain grey in the header. */
.bm-card--bottom .bm-card__handle {
  top: 7px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.45);
  transition: background-color 0.18s var(--bm-ease), box-shadow 0.18s var(--bm-ease);
}

.bm-card--bottom.bm-card--scrolled .bm-card__handle {
  background: var(--bm-color-border-strong);
  box-shadow: none;
}

/* Close: a light disc with a shadow, clear on any photo and on the placeholder. 36 px drawn, 44 x 44 px hit area. */
.bm-card--bottom .bm-card__close {
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: auto;
  color: var(--bm-color-text);
  background: var(--bm-color-surface);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.35), 0 0 0 1px rgba(16, 24, 40, 0.06);
  transition: background-color 0.18s var(--bm-ease), box-shadow 0.18s var(--bm-ease), color 0.15s var(--bm-ease);
}

.bm-card--bottom.bm-card--scrolled .bm-card__close {
  background: transparent;
  box-shadow: none;
}

/* Keyboard focus never lands hidden under the header. */
.bm-card--bottom .bm-card__scroll {
  scroll-padding-top: 56px;
}

.bm-card--bottom .bm-card__body {
  padding-top: var(--bm-space-3);
}

/* Board ID row: the face tabs sit at its right end, or wrap to a compact row beneath it. */
.bm-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-2) var(--bm-space-3);
}

/* Compact face tabs: 34 px tall, each with a 44 px tall hit area. */
.bm-card--bottom .bm-faces {
  flex: 0 1 auto;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0;
  padding: 2px;
}

.bm-card--bottom .bm-faces__tab {
  position: relative;
  flex: 0 1 auto;
  min-height: 28px;
  padding: 0 var(--bm-space-3);
  font-size: 14px;
  line-height: 1.25;
}

.bm-card--bottom .bm-faces__tab::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

.bm-card--bottom .bm-stats {
  margin-top: var(--bm-space-3);
}

/* Buttons side by side, the primary one wider. If the labels do not fit on one row, they stack; a label never wraps. */
.bm-card--bottom .bm-card__footer {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
}

.bm-card--bottom .bm-card__footer .bm-button {
  flex: 1 1 auto;
  padding: 8px var(--bm-space-3);
  white-space: nowrap;
}

.bm-card--bottom .bm-card__footer .bm-card__cta {
  flex-grow: 1.6;
}

.bm-card--bottom .bm-button__full {
  display: none;
}

.bm-card--bottom .bm-button__short {
  display: inline;
}