.topbar-layout {
  background: var(--surface);
}

.topbar-layout main {
  gap: 0;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-footer {
  gap: 24px;
  padding: 32px var(--layout-gutter) 34px;
}

.site-footer p {
  margin: 0;
  font-size: var(--fs--1);
  color: var(--text-muted);
}

.map-section {
  --section-pad-x: clamp(16px, 4vw, 40px);
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: clamp(18px, 2.6vw, 26px) var(--section-pad-x) clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insight-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
  gap: 10px;
  margin-bottom: 0;
}

.title-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.title-caveat {
  margin: -2px 0 0;
  font-size: var(--fs--1);
  line-height: 1.4;
  color: var(--ink-2, var(--shale));
  font-weight: 400;
}

.title-caveat[hidden] {
  display: none;
}

.title-select-wrap {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

.title-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.title-trigger[aria-disabled="true"] {
  cursor: default;
}

.title-trigger:focus-visible {
  outline: 2px solid rgba(163, 123, 100, 0.5);
  outline-offset: 4px;
  border-radius: 0;
}

.title-trigger::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-right: 2px solid var(--sandstone);
  border-bottom: 2px solid var(--sandstone);
  transform: translateY(-35%) rotate(45deg);
  transition: transform 0.2s ease;
}

.title-trigger[aria-disabled="true"]::after,
.title-trigger[aria-disabled="true"] .title-hint {
  display: none;
}

.title-trigger[aria-expanded="true"]::after {
  transform: translateY(5%) rotate(-135deg);
}

.insight-header h2 {
  margin: 0;
  font-size: clamp(24px, 3.6vw, 30px);
  font-weight: 500;
  max-width: none;
  line-height: 1.14;
  text-transform: none;
}

.title-arrow {
  color: var(--sandstone);
  font-size: 1.1rem;
  line-height: 1;
}

.title-hint {
  font-size: 0.78rem;
  color: var(--sandstone);
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  order: 1;
  transform: translateY(-1px);
}

.question-select-hidden {
  display: none;
}

.question-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: min(100%, 560px);
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 8px 0;
  border-radius: 0;
  background: var(--surface-raised);
  box-shadow: 0 24px 45px rgba(35, 31, 32, 0.15);
  z-index: 30;
}

.question-menu.hidden {
  display: none;
}

.question-option-group {
  width: 100%;
}

.question-option-group + .question-option-group {
  margin-top: 10px;
}

.question-group-label,
.question-option.question-option--question {
  padding: 8px 20px 5px;
  color: var(--sandstone);
  font-size: var(--fs--1);
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  overflow-wrap: anywhere;
}

.question-option.question-option--question {
  line-height: 1.4;
}

.question-option {
  width: 100%;
  padding: 10px 20px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-0);
  text-align: left;
  cursor: pointer;
}

.question-option--grouped {
  padding-right: 24px;
  padding-left: 28px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.question-option:hover,
.question-option:focus-visible,
.question-option.is-selected {
  background: transparent;
  outline: none;
}

.question-option.is-selected {
  font-weight: 600;
}

.control-bar,.dashboard-grid {
  width: 100%;
}

.dashboard-subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
}

.section-subtitle {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.map-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.map-meta-row .section-subtitle {
  margin-right: 0;
}

.map-heading-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-width: 0;
}

.map-heading-row .section-subtitle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.map-meta-controls {
  width: auto;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.map-meta-row .map-filters {
  width: auto;
  margin-left: 0;
  flex-wrap: wrap;
  min-width: 0;
  overflow: visible;
  align-items: center;
  justify-content: flex-start;
}

.map-meta-row .control-field {
  align-items: center;
}

.map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 9px;
  align-items: baseline;
  align-content: flex-start;
  margin: 0;
  padding: 0;
  background: transparent;
  min-height: 0;
  margin-left: auto;
}

.control-field {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
}

/* The display rule above outranks the UA stylesheet's [hidden] { display: none },
   so geography views that drop a filter need this to actually hide it. */
.control-field[hidden] {
  display: none;
}

.control-field--view,
.control-field--search {
  flex: 0 1 auto;
}

.control-field > span,
.legend__label {
  font-size: var(--fs--1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.map-meta-row .control-field > span {
  font-size: var(--fs--1);
  font-weight: 400;
  white-space: nowrap;
}

.control-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 0;
  border: 1px solid rgba(67, 65, 64, 0.34);
  background: var(--surface-raised);
  box-shadow: 0 8px 20px -18px rgba(35, 31, 32, 0.22);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.control-pill--select::after {
  display: none;
}

.control-pill--menu {
  padding-right: 0;
  overflow: visible;
}

.control-pill__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs--1);
  font-weight: 400;
  line-height: 1.2;
  min-height: 28px;
  padding: 3px 34px 3px 12px;
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
}

.control-pill__trigger::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  color: inherit;
}

.control-pill__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 48px));
  padding: 8px 0;
  border-radius: 0;
  border: 1px solid rgba(35, 31, 32, 0.08);
  background: rgba(250, 244, 238, 0.98);
  box-shadow: 0 24px 45px rgba(35, 31, 32, 0.15);
  z-index: 30;
}

.control-pill__menu.hidden {
  display: none;
}

.control-field select,
.control-field input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  min-width: 92px;
  min-height: 28px;
  padding: 4px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs--1);
  line-height: 1.2;
  box-shadow: none;
  transition: color 0.2s ease;
}

.control-field select {
  cursor: pointer;
  padding-right: 28px;
}

.control-pill--input,
.control-field--search input {
  min-width: 130px;
}

.control-field select::-ms-expand {
  display: none;
}

.control-field input::placeholder {
  color: var(--text-muted);
}

.control-field select:focus-visible,
.control-field input:focus-visible {
  outline: none;
}

.map-meta-row .control-pill--select,
.map-meta-row .control-pill--input:has(input:not(:placeholder-shown)) {
  background: var(--shale);
  border-color: var(--shale);
  color: var(--surface-raised);
}

.map-meta-row .control-pill--select:focus-within .control-pill__trigger,
.map-meta-row .control-pill__trigger:focus-visible {
  outline: none;
}

.map-meta-row .control-pill--select:focus-within,
.map-meta-row .control-pill--input:focus-within {
  border-color: var(--shale);
}

.map-meta-row .control-field input:not(:placeholder-shown)::placeholder {
  color: rgba(250, 244, 238, 0.72);
}

.layout-summary {
  margin: 0;
  font-size: var(--fs--1);
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend,
.insight-legend {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px 10px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  min-height: 24px;
  margin-top: 2px;
}

.legend__scale,
.legend-scale {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
}

.legend__range {
  font-size: var(--fs--1);
  color: var(--text-muted);
  min-width: 36px;
}

.legend__bar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  overflow: visible;
}

.legend__bar {
  display: flex;
  min-width: 150px;
  height: 12px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

.legend__swatch {
  flex: 1;
  height: 100%;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.legend__swatch:hover,
.legend__swatch:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.legend-hover-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  max-width: min(260px, 80vw);
  padding: 10px 12px;
  border: 1px solid rgba(35, 31, 32, 0.08);
  border-radius: 0;
  background: rgba(250, 244, 238, 0.98);
  color: var(--text-primary);
  font-size: var(--fs--1);
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 22px 40px -28px rgba(35, 31, 32, 0.42);
  z-index: 5;
}

.legend-hover-tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dashboard-grid,
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: stretch;
}

.map-panel,
.map-wrapper {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
}

.map-panel__map {
  width: 100%;
  min-height: min(80vh, 760px);
}

.map-status,
.map-panel__status {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 10px 16px;
  border-radius: 0;
  background: rgba(35, 31, 32, 0.9);
  color: var(--surface-raised);
  font-size: var(--fs--1);
  backdrop-filter: blur(6px);
  z-index: 5;
}

.map-panel__status[hidden] {
  display: none;
}

.map-tooltip {
  position: absolute;
  z-index: 6;
  font-family: var(--font-body);
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 0;
  background: rgba(250, 244, 238, 0.95);
  color: var(--text-primary);
  font-size: var(--fs--1);
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(35, 31, 32, 0.12);
  pointer-events: none;
}

.map-tooltip.is-hidden {
  display: none;
}

.map-tooltip > strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs--1);
  font-weight: 600;
}

.map-tooltip span {
  display: block;
}

.map-tooltip__summary {
  color: var(--text-primary);
  font-weight: 500;
}

.map-tooltip__summary strong {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

/* A hairline sets the click prompt apart from the figure. */
.map-tooltip__hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--purpaidh);
  font-weight: 500;
}

/* Map controls stay quiet: one hairline strip of small square buttons with
   sandstone icons, so they never compete with the map. */
.maplibregl-ctrl.map-controls {
  margin: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-family: inherit;
}

.zoom-block {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.92);
}

.zoom-block--single {
  border-top: 0;
}

.zoom-block__btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sandstone);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.zoom-block__btn + .zoom-block__btn {
  border-top: 1px solid var(--rule);
}

.maplibregl-ctrl.map-controls .zoom-block__btn:hover,
.maplibregl-ctrl.map-controls .zoom-block__btn:focus-visible {
  background: var(--chalk-2);
  color: var(--shale);
  outline: none;
}

.maplibregl-ctrl.map-controls .zoom-block__btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--purpaidh);
}

/* Locked is the default state, so it reads as normal rather than "on". */
.zoom-lock-btn.is-active {
  background: transparent;
  color: var(--sandstone);
}

.zoom-lock__icon {
  width: 15px;
  height: 15px;
  display: block;
}

@media (max-width: 960px) {
  .dashboard-grid,.map-layout {
    grid-template-columns: 1fr;
  }

  .map-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .map-heading-row .map-meta-controls,
  .map-heading-row .map-filters {
    width: 100%;
    justify-content: flex-start;
  }

  .legend,
  .insight-legend {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {

  .title-trigger {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .map-filters {
    padding: 0;
    min-height: 0;
  }

  .map-meta-controls {
    flex-wrap: wrap;
    align-items: baseline;
  }

  .map-meta-row .map-filters {
    margin-left: 0;
    width: 100%;
    overflow: visible;
  }

  .control-field {
    min-width: 100%;
    flex-basis: 100%;
  }

  .map-panel__map {
    min-height: 520px;
  }
}

/* Adura type and surfaces, matching adura.com: Adura Sans for headlines and
   figures, sentence-case Lexend for everything else, square edges and
   hairline shale rules. */
.insight-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--clay);
}

.title-trigger::after {
  border-color: var(--clay);
}

.title-hint,.question-group-label,.question-option.question-option--question,.control-field > span,.map-meta-row .control-field > span,.legend__label,.legend__range,.layout-summary,.map-panel__status {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 500;
  text-transform: none;
  color: var(--ink-2);
}

.title-caveat {
  font-size: var(--fs-0);
  font-weight: 300;
  line-height: 1.4;
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
}

.control-pill {
  border-color: var(--shale);
  background: transparent;
  box-shadow: none;
}

.control-pill__trigger,
.control-field input {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 500;
  text-transform: none;
}

.control-field input {
  text-transform: none;
}

.map-meta-row .control-pill--input:has(input:not(:placeholder-shown)),
.map-meta-row .control-pill--menu:has(.control-pill__trigger[aria-expanded="true"]) {
  background: var(--shale);
  color: var(--chalk);
}

.control-pill__menu,
.question-menu,
.map-tooltip {
  border: 1px solid var(--shale);
  background: var(--surface-raised);
  box-shadow: 0 18px 40px -24px rgba(35, 31, 32, 0.45);
}

.question-option,
.control-pill__menu .question-option {
  font-weight: 300;
}

/* No colour patches: hover and the current choice show in clay text. */
.question-option:hover,
.question-option:focus-visible,
.question-option.is-selected {
  background: transparent;
  color: var(--clay);
}

.question-option:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.question-option.is-selected {
  font-weight: 500;
}

.map-tooltip > strong {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
}

.site-footer {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 500;
  text-transform: none;
}

@media (max-width: 560px) {
  .map-heading-row .section-subtitle {
    white-space: normal;
  }
}

/* Map-led layout: the map takes the stage, with a seat card and a short
   ranking beside it. */
/* adura.com divides sections with a shale hairline running the full width of
   the page, so the map section bleeds out past the side padding to draw its
   top and bottom rules edge to edge. */
/* Like adura.com's content sections: title, copy and figures on the left,
   the map large on the right. */
.map-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "title map"
    "panel map";
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 56px);
  align-items: start;
  width: calc(100% + 2 * var(--section-pad-x));
  max-width: none;
  margin: 0 calc(-1 * var(--section-pad-x));
  padding: clamp(20px, 3vw, 32px) var(--section-pad-x);
  border-top: 1px solid var(--shale);
  border-bottom: 1px solid var(--shale);
}

.map-layout .map-wrapper {
  display: flex;
  flex-direction: column;
}

.map-panel__map {
  flex: 1 1 auto;
  min-height: min(78vh, 760px);
}

.map-wrapper .insight-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  max-width: min(320px, calc(100% - 24px));
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.92);
}

.seat-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

@media (max-width: 960px) {
  .map-layout {
    grid-template-columns: 1fr;
  }

  .map-panel__map {
    min-height: 560px;
  }

  .map-wrapper .insight-legend {
    position: static;
    max-width: none;
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  .map-panel__map {
    min-height: 460px;
  }

  .map-wrapper .insight-legend {
    position: static;
    max-width: none;
    margin-top: 8px;
  }

}

/* The headline keeps its full block; "Click to switch response" and its arrow
   sit to its right, centred vertically on the headline's lines. On narrow
   screens they drop beneath it. */
.title-trigger {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
}

.insight-header h2 {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.title-trigger .title-hint {
  order: 1;
  flex: 0 0 auto;
  display: inline-block;
  white-space: nowrap;
  transform: none;
}

.title-trigger::after {
  order: 2;
  flex: 0 0 auto;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 -8px;
  transform: translateY(-25%) rotate(45deg);
}

.title-trigger[aria-expanded="true"]::after {
  transform: translateY(25%) rotate(-135deg);
}

.title-select-wrap {
  display: block;
  width: 100%;
}

/* The answer menu opens under "Click to switch response", which sits at the
   right of the title on wide screens. */
@media (min-width: 761px) {
  .title-select-wrap .question-menu {
    left: auto;
    right: 0;
    min-width: min(100%, 420px);
  }
}

@media (max-width: 760px) {
  .title-trigger {
    flex-wrap: wrap;
    gap: 8px;
  }

  .insight-header h2 {
    flex-basis: 100%;
  }

  .title-trigger::after {
    margin-left: -4px;
  }
}

.title-trigger .title-hint {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The intro's children join the grid directly: the question title spans both
   columns above the map, and the search sits at the top of the left column. */
.map-intro {
  display: contents;
}

.map-intro > .insight-header {
  grid-area: title;
  min-width: 0;
}

/* The geography and region controls only appear when there is more than one
   view; with every field hidden the row takes no space at all. */
.seat-panel > .dashboard-subsection:not(:has(.control-field:not([hidden]))) {
  display: none;
}

.map-layout .map-wrapper {
  grid-area: map;
  align-self: stretch;
}

.map-layout .seat-panel {
  grid-area: panel;
}

.map-intro .map-heading-row,
.map-intro .map-meta-row {
  width: 100%;
}

@media (max-width: 960px) {
  .map-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "map"
      "panel";
    grid-template-rows: auto;
  }
}

/* Fit the frame. On wide, tall-enough screens the embed fills exactly the
   iframe's viewport: the map takes the full height on the right, and the seat
   list scrolls within the left column, so the host page never has to scroll
   through it. Narrow or very short frames fall back to the stacked flow. */
@media (min-width: 961px) and (min-height: 600px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .site-frame {
    height: 100dvh;
  }

  .site-frame > main {
    flex: 1 1 auto;
    min-height: 0;
  }

  .map-section {
    height: 100%;
    padding-bottom: 0;
  }

  .map-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .map-layout .map-wrapper {
    height: 100%;
    min-height: 0;
  }

  .map-layout .map-panel__map {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  /* No scrolling: the card fits the column, and the treemap takes whatever
     height is left. */
  .map-layout .seat-panel {
    height: 100%;
    min-height: 0;
    gap: 20px;
    overflow: hidden;
  }

  .site-footer {
    flex: 0 0 auto;
    padding-block: 10px;
  }
}

/* Plain-language explainer under the title, set like adura.com's intro copy. */
.insight-header__intro {
  margin: 0.5rem 0 0;
  max-width: 120ch;
  font-size: var(--fs-0);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-2);
}

/* The key sits on one line above the map, unboxed, like a chart key. */
.map-wrapper .insight-legend,
.map-layout .map-wrapper .insight-legend {
  position: static;
  order: -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  width: 100%;
  max-width: none;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.map-wrapper .insight-legend .legend__label {
  font-size: var(--fs--1);
  color: var(--ink-2);
}

/* The column beside the map sits straight on the page, no box: content is
   divided by shale hairlines, as in adura.com's "in numbers" sections. It shows
   the Scotland average until a constituency is picked. */
.seat-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
}

/* One title, set like adura.com's section headings: Adura Sans in sandstone. */
.seat-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--sandstone);
}

/* No bigger than the section title above it. */
.seat-card__value {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 900;
  line-height: 1;
  color: var(--clay);
}

.seat-card__caption {
  margin: 0;
  font-size: var(--fs-0);
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-2);
}

.seat-card__chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0.6rem;
}



/* The answers as a squarified treemap: tiles positioned by the layout, each
   tile's area its share, split by white hairlines. The answer on the map is
   full clay; the others are neutral. */
.treemap {
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--surface);
}

.treemap__tile {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--surface);
  color: var(--shale);
}

.treemap__tile.is-active,
.treemap__tile.is-dark {
  color: var(--white);
}

.treemap__value {
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 900;
  line-height: 1;
}


.treemap__label {
  font-size: var(--fs--1);
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tiles too small to hold their name are named here instead. */
.treemap__key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs--1);
  font-weight: 300;
  color: var(--ink-2);
}

.treemap__key[hidden] {
  display: none;
}

.treemap__key li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.treemap__key li.is-active {
  font-weight: 500;
  color: var(--ink);
}

.treemap__swatch {
  align-self: center;
  width: 10px;
  height: 10px;
  box-shadow: inset 0 0 0 1px rgba(67, 65, 64, 0.18);
}

.treemap__key-value {
  font-family: var(--font-display);
  font-weight: 900;
}

/* When the embed fits the frame, the card fills the column and the treemap
   takes whatever height is left. */
@media (min-width: 961px) and (min-height: 600px) {
  .seat-panel > .seat-card {
    flex: 1 1 auto;
    min-height: 0;
  }

  .seat-card__chart {
    flex: 1 1 auto;
    min-height: 150px;
  }

  .treemap {
    flex: 1 1 auto;
    height: auto;
    min-height: 120px;
  }
}

/* The map's own title, matching the card's, with search beneath it. */
.map-wrapper .map-header {
  order: -2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.map-header__title {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--sandstone);
}

.map-search {
  display: block;
  width: min(100%, 300px);
}

.map-search__input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--shale);
  border-radius: 0;
  background: #d6d3d0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 400;
  appearance: none;
}

.map-search__input::placeholder {
  color: var(--mute);
}

/* Focus is drawn inside the box (purple border plus an inner line), so the
   left column's scroll area cannot clip it. */
.map-search__input:focus,
.map-search__input:focus-visible {
  outline: none;
  border-color: var(--purpaidh);
  box-shadow: inset 0 0 0 1px var(--purpaidh);
}

/* One type scale for the whole embed: the question title (23-28px, always
   above the section titles), fs-1 section titles, the card's figure and tile
   figures, fs-0 body, fs--1 small. */
.title-trigger .title-hint,
.map-search__input,
.map-wrapper .insight-legend .legend__label,
.legend__range,
.treemap__label,
.treemap__key,
.site-footer,
.methodology {
  font-size: var(--fs--1);
}

.insight-header__intro,
.seat-card__caption {
  font-size: var(--fs-0);
}

.seat-card__title,
.map-header__title,
.treemap__value {
  font-size: var(--fs-1);
}

/* Map-first layout: the map takes the whole right half, top to bottom; the
   left half holds the question title, subtitle and the Scotland card. With
   the title in half the width, "Click to switch response" sits beneath it. */
@media (min-width: 961px) {
  .title-trigger {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 8px;
  }

  .insight-header h2 {
    flex-basis: 100%;
  }

  .title-trigger::after {
    width: 7px;
    height: 7px;
    margin: 0 0 0 2px;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
  }

  .title-trigger[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .insight-header__intro {
    margin-top: 1rem;
  }
}

/* Search sits at the top of the Scotland average card, above its title: a
   small label over a search box, both on the card's left edge, so it reads as
   a way to switch the card to one constituency. */
.seat-card__lookup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  /* The label and box together sit centred between the bottom of the
     subtitle's letters and the top of the card title's capitals: the space
     below is the grid gap above, less the card's own row gap, plus 1px to
     balance the subtitle's descenders against the tight top of Adura Sans.
     The column is then lifted 6px (below), which reads as centred by eye,
     and both sides get 2px extra, so the box sits evenly between the
     subtitle and the card title. */
  margin: 0 0 calc(clamp(20px, 3vw, 32px) - 0.35rem - 2px);
}

.seat-card__lookup .map-search__input {
  width: min(100%, 360px);
  max-width: none;
  height: 42px;
  padding: 0 14px 0 40px;
  background: #d6d3d0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23434140' stroke-width='1.6'/%3E%3Cpath d='M15 15l5 5' stroke='%23434140' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat 13px 50% / 17px 17px;
}

.seat-card__lookup-label {
  font-size: var(--fs--1);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-2);
}

@media (min-width: 961px) and (min-height: 600px) {
  .seat-card__chart {
    min-height: 100px;
  }

  .treemap {
    min-height: 90px;
  }
}

/* Map buttons: one joined white strip, bottom right as on most web maps.
   Zoom in, zoom out, reset and lock stack with pale dividers inside a single
   hairline border; hover is a light purple tint, so they stay discreet. */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl.map-controls {
  margin: 0 12px 12px 0;
}

.maplibregl-ctrl.map-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--white);
}

.maplibregl-ctrl.map-controls .zoom-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 0;
  background: transparent;
}

.maplibregl-ctrl.map-controls .zoom-block--single {
  border-top: 1px solid var(--rule);
}

.maplibregl-ctrl.map-controls .zoom-block__btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--white);
  color: var(--shale);
  transition: background-color 0.15s ease;
}

.maplibregl-ctrl.map-controls .zoom-block__btn + .zoom-block__btn {
  border-top: 1px solid var(--rule);
}

/* Purple is the interaction colour: a solid purple button, white icon. */
.maplibregl-ctrl.map-controls .zoom-block__btn:hover {
  background: var(--purpaidh);
  color: var(--white);
}

.maplibregl-ctrl.map-controls .zoom-block__btn:focus-visible {
  outline: 2px solid var(--shale);
  outline-offset: -2px;
}

/* Locked shows as on: a chalk fill. */
.maplibregl-ctrl.map-controls .zoom-lock-btn.is-active {
  background: var(--chalk);
  color: var(--ink);
}

.zoom-block__icon,
.maplibregl-ctrl.map-controls .zoom-lock__icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* Lift the left column 6px so the lookup reads as centred between the
   subtitle and "Scotland average"; done on the column, not the lookup, so the
   scroll area does not clip the label. */
.map-layout .seat-panel {
  margin-top: -4px;
}

/* One style for every small label: Lexend, small size, regular weight, shale.
   Titles stay Adura Sans in sandstone; figures stay Adura Sans. */
.seat-card__lookup-label,
.map-wrapper .insight-legend .legend__label,
.map-wrapper .insight-legend .legend__range,
.treemap__label,
.treemap__key,
.treemap__key li.is-active {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

/* Labels inside the clay tile stay readable in white. */
.treemap__tile.is-active .treemap__label,
.treemap__tile.is-dark .treemap__label {
  color: var(--white);
}

/* The search box's clear button: a small × at the right-hand end, shown when
   there is something to clear, hovering purple like the map buttons. It sits
   where the browser's list marker was, which is hidden. */
.map-search__field {
  position: relative;
  display: block;
  width: min(100%, 360px);
}

.seat-card__lookup .map-search__field .map-search__input {
  width: 100%;
  padding-right: 42px;
}

.map-search__input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
}

.map-search__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--shale);
  transform: translateY(-50%);
  cursor: pointer;
}

.map-search__clear[hidden] {
  display: none;
}

.map-search__clear svg {
  width: 16px;
  height: 16px;
}

.map-search__clear:hover {
  background: rgba(121, 117, 235, 0.14);
  color: var(--purpaidh);
}

.map-search__clear:focus-visible {
  outline: 2px solid var(--purpaidh);
  outline-offset: -2px;
}

/* The question title: between adura.com's section heading and the
   section titles (fs-1), about 24px up to 29px. */
.insight-header h2 {
  font-size: clamp(1.5rem, 0.9vi + 1.1rem, 1.84rem);
}

/* When the embed fits the frame the treemap gives way first, so the left
   column always fits without scrolling. */
@media (min-width: 961px) and (min-height: 600px) {
  /* Never shorter than the treemap's minimum plus its key, so the key
     can't spill onto the hint below. */
  .seat-card__chart {
    min-height: min-content;
  }

  .treemap {
    min-height: 56px;
  }
}

/* Compact version for short frames (under 860px tall): same layout, with a
   slightly smaller subtitle and figure sentence (about 14px) and tighter
   gaps, so the left column still fits without scrolling. The title keeps its
   size. */
@media (min-width: 961px) and (min-height: 600px) and (max-height: 859px) {
  .map-section {
    padding-top: 12px;
  }

  .map-layout {
    row-gap: 14px;
    padding-block: 14px;
  }

  .insight-header h2 {
    line-height: 1.1;
  }

  .title-trigger {
    row-gap: 8px;
  }

  .insight-header__intro {
    margin-top: 0.5rem;
    font-size: clamp(0.85rem, 0.2vi + 0.72rem, 0.9rem);
  }

  .map-layout .seat-panel {
    gap: 12px;
  }

  .seat-card {
    gap: 0.25rem;
  }

  .seat-card__lookup {
    gap: 4px;
    margin-bottom: 8px;
  }

  .map-layout .seat-panel {
    margin-top: -4px;
  }

  .seat-card__lookup .map-search__input {
    height: 36px;
  }

  .seat-card__lookup .geo-toggle {
    height: 36px;
  }

  .seat-card__value {
    margin-top: 0.2rem;
  }

  .seat-card__caption {
    font-size: clamp(0.85rem, 0.2vi + 0.72rem, 0.9rem);
  }

  .seat-card__chart {
    margin-top: 0.3rem;
  }

  .treemap {
    min-height: 40px;
  }

  .seat-card__chart {
    min-height: min-content;
  }
}

/* The very shortest frames (under 660px tall) trim the section spacing a
   little further and set the subtitle and figure sentence small. */
@media (min-width: 961px) and (min-height: 600px) and (max-height: 659px) {
  .map-layout {
    row-gap: 10px;
    padding-block: 10px;
  }

  .seat-card__lookup {
    margin-bottom: 7px;
  }

  .map-layout .seat-panel {
    margin-top: 0;
  }

  .insight-header__intro,
  .seat-card__caption {
    font-size: var(--fs--1);
  }

  .insight-header h2 {
    font-size: clamp(1.35rem, 0.8vi + 1.05rem, 1.6rem);
  }
}

/* Phones and narrow frames: after a tap, a pill at the foot of the map points
   down to the card, which updates out of sight. */
.map-jump {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 0;
  background: var(--purpaidh);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(35, 31, 32, 0.5);
  cursor: pointer;
}

.map-jump[hidden] {
  display: none;
}

@media (min-width: 961px) {
  .map-jump {
    display: none;
  }
}

/* Map status (loading or a load error): quiet text centred in the map area,
   not a dark box over the legend. */
.map-wrapper .map-panel__status {
  top: 55%;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 0;
  transform: translate(-50%, -50%);
  background: none;
  backdrop-filter: none;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs--1);
  text-align: center;
}

/* While the first load runs, chalk placeholders hold the places of the legend,
   figure, sentence and treemap so the page reads as loading, not broken.
   Each one goes as soon as its content arrives. */
.is-loading .legend-scale:empty,
.is-loading .seat-card__value:empty,
.is-loading .seat-card__caption:empty,
.is-loading .seat-card__chart:empty {
  background: var(--chalk-2);
  animation: loading-pulse 1.4s ease-in-out infinite;
}

.is-loading .legend-scale:empty {
  width: min(220px, 60%);
  height: 10px;
}

.is-loading .seat-card__value:empty {
  width: 3.2em;
  height: 1.1em;
}

.is-loading .seat-card__caption:empty {
  width: 90%;
  height: 2.6em;
}

.is-loading .seat-card__chart:empty {
  flex: 1 1 auto;
  min-height: 120px;
}

@keyframes loading-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-loading .legend-scale:empty,
  .is-loading .seat-card__value:empty,
  .is-loading .seat-card__caption:empty,
  .is-loading .seat-card__chart:empty {
    animation: none;
  }
}

/* Like adura.com's sections: the methodology note sits inside the ruled
   frame, at its foot, and the closing rule runs under it. A band below the
   rule matches the one above the top rule. */
.site-frame {
  --band: clamp(18px, 2.6vw, 26px);
  --frame-pad: clamp(20px, 3vw, 32px);
}

.map-section {
  padding-top: var(--band);
  padding-bottom: 0;
}

.map-layout {
  border-bottom: 0;
}

.site-footer {
  margin-bottom: var(--band);
  padding: 0 clamp(16px, 4vw, 40px) var(--frame-pad);
  border-bottom: 1px solid var(--shale);
}

@media (min-width: 961px) and (min-height: 600px) and (max-height: 859px) {
  .site-frame {
    --band: 12px;
    --frame-pad: 14px;
  }
}

@media (min-width: 961px) and (min-height: 600px) and (max-height: 659px) {
  .site-frame {
    --frame-pad: 10px;
  }
}

/* Colour test: controls styled like adura.com's buttons, solid shale with
   white text and icons, turning solid purple on hover. */
.seat-card__lookup .map-search__field .map-search__input {
  border-color: var(--shale);
  background: var(--shale)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M15 15l5 5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat 13px 50% / 17px 17px;
  color: var(--white);
}

.seat-card__lookup .map-search__input::placeholder {
  color: rgba(255, 255, 255, 0.78);
}

.map-search__clear {
  color: var(--white);
}

.map-search__clear:hover {
  background: var(--purpaidh);
  color: var(--white);
}

.maplibregl-ctrl.map-controls {
  border-color: var(--shale);
  background: var(--shale);
}

.maplibregl-ctrl.map-controls .zoom-block__btn {
  background: var(--shale);
  color: var(--white);
}

.maplibregl-ctrl.map-controls .zoom-block__btn + .zoom-block__btn,
.maplibregl-ctrl.map-controls .zoom-block--single {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.maplibregl-ctrl.map-controls .zoom-block__btn:hover {
  background: var(--purpaidh);
  color: var(--white);
}

.maplibregl-ctrl.map-controls .zoom-lock-btn.is-active {
  background: var(--black);
  color: var(--white);
}

/* A hovered button is purple edge to edge: no outer border, and the dividers
   touching it turn purple too. */
.maplibregl-ctrl.map-controls {
  border: 0;
}

.maplibregl-ctrl.map-controls .zoom-block__btn:hover,
.maplibregl-ctrl.map-controls .zoom-block__btn:hover + .zoom-block__btn,
.maplibregl-ctrl.map-controls .zoom-block--single:has(.zoom-block__btn:hover) {
  border-top-color: var(--purpaidh);
}

/* A compact answer menu: small type, tight rows, and a hairline between the
   two questions so six long answers fit without taking over the page. */
.question-menu {
  max-width: min(620px, calc(100vw - 48px));
  padding: 4px 0;
}

.question-option-group + .question-option-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}

.question-group-label {
  padding: 6px 16px 2px;
}

.question-option.question-option--grouped {
  padding: 5px 16px 5px 24px;
  font-size: var(--fs--1);
  line-height: 1.35;
}

/* No visible question headings: the hairline alone separates the answers from
   the two questions, and each group keeps its name for screen readers. */
.question-menu .question-group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.question-option.question-option--grouped {
  padding: 7px 16px;
}

/* One plain list: no line between the two questions' answers. */
.question-option-group + .question-option-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The treemap picks the answer on the map: every tile is a button. The
   mapped answer is clay; hovering another shows a purple edge. */
.seat-card__hint {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: var(--fs--1);
  color: var(--ink-2);
}

button.treemap__tile {
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.treemap__tile.is-active {
  cursor: default;
}

button.treemap__tile:not(.is-active):hover,
button.treemap__tile:focus-visible {
  outline: 1px solid var(--purpaidh);
  outline-offset: -1px;
}

.treemap__key li[data-answer-key] {
  cursor: pointer;
}

.treemap__key li[data-answer-key]:not(.is-active):hover {
  color: var(--purpaidh);
}

/* Answers sit under a heading for their question: sandstone, like the
   section titles, with a hairline between the two questions. */
.question-menu__group + .question-menu__group {
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}

.question-menu__heading {
  padding: 10px 16px 4px;
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 600;
  color: var(--sandstone);
}

.question-menu__group .question-option.question-option--grouped {
  padding: 6px 16px;
}

/* One narrow column: the questions stack, each heading over its answers, and
   the menu is only as wide as the longest answer (about 275px), so there is
   no empty space beside the short labels. */
.title-select-wrap .question-menu {
  width: min(320px, calc(100vw - 32px));
  min-width: 0;
}

.question-menu__group .question-option.question-option--grouped {
  white-space: nowrap;
}

/* The key is the map's own smooth ramp, from the lowest to the highest share,
   with ticks at round, evenly spaced shares. */
.legend__bar--smooth {
  width: 180px;
}

/* The ticks hang below the bar without adding to the row's height, so the
   label, min, bar and max all line up on the bar's centre; the legend keeps
   room for them underneath. */
.insight-legend:has(.legend__ticks) {
  padding-bottom: 14px;
}

.legend__bar-wrap ~ .legend__range,
.legend__range:has(+ .legend__bar-wrap) {
  min-width: 0;
}

.legend__ticks {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  height: 12px;
}

.legend__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}

.legend__tick::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 1px;
  height: 3px;
  background: var(--ink-2);
}

/* Westminster / Holyrood sits beside the constituency search, each with a
   small label. The active boundary set is filled shale; hovering the other
   turns it purple. */
.seat-card__lookup {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.lookup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lookup-field--search {
  flex: 1 1 200px;
  max-width: 360px;
}

.lookup-field--search .map-search__field,
.lookup-field--search .map-search__input {
  width: 100%;
}

.lookup-field--geo[hidden] {
  display: none;
}

.geo-toggle {
  display: inline-flex;
  height: 42px;
  border: 1px solid var(--shale);
}

.geo-toggle__option {
  margin: 0;
  padding: 0 14px;
  border: 0;
  background: var(--white);
  color: var(--shale);
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.geo-toggle__option + .geo-toggle__option {
  border-left: 1px solid var(--shale);
}

.geo-toggle__option.is-active {
  background: var(--shale);
  color: var(--white);
  cursor: default;
}

.geo-toggle__option:not(.is-active):hover {
  background: var(--purpaidh);
  color: var(--white);
}

.geo-toggle__option:focus-visible {
  outline: 2px solid var(--purpaidh);
  outline-offset: 2px;
}

/* Colour test: on the chalk page the unselected boundary set shows the chalk
   through, beside the shale search box; the selected one stays filled shale. */
.geo-toggle__option {
  background: transparent;
}

/* With the toggle showing, the two controls are a matched pair: the same
   width (about 260px each), side by side. */
.seat-card__lookup:has(.lookup-field--geo:not([hidden])) {
  max-width: 532px;
}

.seat-card__lookup:has(.lookup-field--geo:not([hidden])) .lookup-field {
  flex: 1 1 0;
  max-width: none;
}

.lookup-field--geo .geo-toggle {
  display: flex;
  width: 100%;
}

.lookup-field--geo .geo-toggle__option {
  flex: 1 1 0;
  padding: 0 10px;
}

/* Phones: no room for halves, so the toggle and search stack full width. */
@media (max-width: 560px) {
  .seat-card__lookup:has(.lookup-field--geo:not([hidden])) .lookup-field {
    flex: 1 1 100%;
  }
}

/* The lookup row sits evenly between the subtitle and the card title. */
.seat-card__lookup {
  margin-top: 3px;
}

.seat-card__lookup + .seat-card__title {
  margin-top: 3px;
}