/* Seat picker: the seat selection page around the map (seat-map.css).
   With a map to choose on, the page becomes an app (body.has-seat-map drops
   footer and page padding). A desktop (60rem and wider) gives the room all
   of the screen under the header and runs the choice down a sidebar; a
   phone (40rem and narrower) has a compact head with the price classes as
   chips, the room filling the screen and the choice as a sheet beneath it.
   In between, the map sits above the choice in a card.

   The seatmap-selection controller toggles is-active on filters and options
   and opens the ticket, assignment and legend disclosures on larger screens. */
.seat-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.seat-picker__flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.seat-picker__head {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.seat-picker__intro {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.seat-picker__back {
  margin-inline-start: calc(-1 * var(--space-xs));
}

.seat-picker__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.seat-picker__event {
  color: var(--color-accent-text);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
}

.seat-picker__title {
  font-size: var(--step-4);
}

.seat-picker__subtitle {
  color: var(--color-muted);
}

/* Price classes, tariffs and ticket types: toggles shaped like chips */
.seat-picker__filters,
.seat-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.seat-picker__filter,
.seat-picker__option {
  align-items: center;
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--color-subtle);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;

  small {
    color: var(--color-muted);
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
  }

  &:hover {
    border-color: color-mix(in oklch, var(--color-text) 30%, var(--color-subtle));
  }

  &.is-active {
    background: color-mix(in oklch, var(--color-accent) 14%, var(--color-surface-1));
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
  }
}

/* The active filter is filled in the text colour, quiet next to the accent */
.seat-picker__filter.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  box-shadow: none;
  color: var(--color-surface-1);

  small {
    color: color-mix(in oklch, var(--color-surface-1) 70%, var(--color-text));
  }
}

/* A price class shows its seat colour */
.seat-picker__filter i {
  aspect-ratio: 1;
  background: var(--seat-fill);
  block-size: 0.875rem;
  border: var(--border-width) solid oklch(from var(--seat-fill) calc(l * 0.72) c h);
  border-radius: var(--radius-pill);
}


/* Map beside the card; the card goes under the map on a tablet */
.seat-picker__layout {
  align-items: start;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr) 24rem;
}

.seat-picker .seatmap-customer-map {
  --seat-map-height: clamp(26rem, 72vh, 52rem);
}

.seat-picker__panel {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  inset-block-start: calc(4rem + var(--space-s));
  padding: var(--space-m);
  position: sticky;
}

/* A part of the panel says what it is in a quiet label, its count beside it */
.seat-picker__label {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
}

.seat-picker__count {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

@media (max-width: 59.99rem) {
  .seat-picker__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .seat-picker__panel {
    position: static;
  }
}

/* The chosen places' heading: a quiet label and their count */
.seat-picker__assignments-summary {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;
}

/* The ticket type, folded into one row with its price */
.seat-picker__tickets-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-xs);
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  > :first-child {
    flex: 1;
  }

  .icon {
    --icon-color: var(--color-muted);

    transition: rotate var(--duration-base) var(--ease-out);
  }
}

.seat-picker__tickets[open] .seat-picker__tickets-summary .icon {
  rotate: 180deg;
}

/* Standing room only, no sidebar: the ticket type sits in the page's head */
.seat-picker__head > .seat-picker__tickets {
  inline-size: min(100%, 28rem);
}

/* Tariffs and other ticket types as one grouped list: rows split by
   hairlines, the name on the left and the price on the right; a tariff
   shows its choice in a radio dot. A phone turns the tariffs into a row of
   chips instead (below). */
.seat-picker__ticket-list {
  margin-block-start: var(--space-xs);
}

.seat-picker__ticket-list,
.seat-picker__tariffs .seat-picker__options {
  border: var(--border-width) solid var(--color-subtle);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;

  .seat-picker__option {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--step-0);
    font-weight: var(--weight-medium);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    text-align: start;
    white-space: normal;

    & + .seat-picker__option {
      border-block-start: var(--border-width) solid var(--color-subtle);
    }

    span:first-of-type {
      flex: 1;
    }

    small {
      font-size: var(--step--1);
      white-space: nowrap;
    }

    &:hover {
      background: var(--color-surface-2);
    }

    &.is-active {
      background: color-mix(in oklch, var(--color-accent) 8%, var(--color-surface-1));
      box-shadow: none;
    }
  }
}

.seat-picker__tariffs .seat-picker__option::before {
  block-size: 1rem;
  border: 1.5px solid color-mix(in oklch, var(--color-text) 35%, var(--color-subtle));
  border-radius: var(--radius-pill);
  content: "";
  flex: none;
  inline-size: 1rem;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.seat-picker__tariffs .seat-picker__option.is-active::before {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
  box-shadow: inset 0 0 0 0.2rem var(--color-surface-1);
}

.seat-picker__tariffs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.seat-picker__tariffs-help {
  color: var(--color-muted);
  font-size: var(--step--2);
}

/* How many tickets and guests are chosen */
.seat-picker__counts {
  border-block: var(--border-width) solid var(--color-subtle);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-block: var(--space-xs);

  > div + div {
    border-inline-start: var(--border-width) solid var(--color-subtle);
    padding-inline-start: var(--space-s);
  }

  dt {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  dd {
    font-size: var(--step-2);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }
}

/* The chosen places, each with its tariff */
.seat-picker__assignments-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block-start: var(--space-xs);
}

/* Each chosen place on its own tile: the seat as on the map with its
   number, which seat and where beside it, a quiet remove in the corner and
   the tariff across the foot */
.seat-picker__places {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.seat-picker__place {
  align-items: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-m);
  column-gap: var(--space-xs);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s);
  row-gap: var(--space-xs);
}

.seat-picker__seat {
  align-items: center;
  aspect-ratio: 1;
  background: var(--seat-fill);
  block-size: 2.25rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 var(--border-width) oklch(from var(--seat-fill) calc(l * 0.72) c h);
  color: var(--seat-ink);
  display: inline-flex;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  justify-content: center;

  .icon {
    --icon-color: currentColor;
    --icon-size: 1rem;
  }
}

.seat-picker__place-name {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  line-height: var(--leading-snug);
  min-inline-size: 0;

  strong {
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
  }

  small {
    color: var(--color-muted);
    font-size: var(--step--1);
  }
}

.seat-picker__remove-place {
  --button-fg: var(--color-muted);
  --button-bg-hover: var(--color-surface-3);

  align-self: start;
}

/* The tariff menu: a chip with a chevron, the native list behind it */
.seat-picker__tariff {
  appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E")
      right var(--space-xs) center / 0.875rem no-repeat,
    var(--color-surface-1);
  border: 0;
  border-radius: var(--radius-s);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--step--1);
  grid-column: 1 / -1;
  inline-size: 100%;
  padding: var(--space-2xs) var(--space-l) var(--space-2xs) var(--space-xs);
  text-overflow: ellipsis;
  transition: background-color var(--duration-fast) var(--ease-out);

  &:hover {
    background-color: var(--color-surface-3);
  }
}

/* The foot: what the choice comes to, and the way on */
.seat-picker__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.seat-picker__summary {
  align-items: baseline;
  display: flex;
  gap: var(--space-s);
  justify-content: space-between;
}

.seat-picker__hint {
  color: var(--color-muted);
  flex: 1;
  font-size: var(--step--1);
}

.seat-picker__total {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  transition: opacity var(--duration-fast) var(--ease-out);
  white-space: nowrap;

  &[aria-busy] {
    opacity: 0.5;
  }
}

.seat-picker__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.seat-picker__remove {
  text-align: center;
}

/* The choices sit straight in the panel; only a phone gathers them into a
   sheet behind the bar (below), with a handle to drag it by */
.seat-picker__choices {
  display: contents;
}

.seat-picker__grabber {
  display: none;
}

/* How far a phone's sheet of choices is down behind its foot: all the way
   closed, not at all open, as far as the finger while dragged */
@property --seat-picker-sheet-offset {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

.seat-picker__sheet-toggle {
  display: none;
}

/* Phone: the page becomes a full-screen app. A slim bar (the way back,
   the event) replaces the shop's header; the room fills the rest, the
   price classes floating over its top, zoom down its right edge, the legend
   at its bottom left. At the bottom only the sheet's foot shows (what the
   choice comes to, the way on); its bar opens the choices — tariffs, other
   tickets, the chosen places — above it. */
@media (max-width: 40rem) {
  body.has-seat-map {
    --seat-picker-bar: 3rem;

    overflow-x: hidden;
  }

  body.has-seat-map > :is(.site-header, .site-footer) {
    display: none;
  }

  body.has-seat-map > .site-main {
    --wrapper-gutter: 0;

    gap: 0;
    padding-block: 0;
  }

  .seat-picker[data-map-choices] .seat-picker__flow {
    block-size: 100dvh;
    gap: 0;
    position: relative;
  }

  .seat-picker[data-map-choices] .seat-picker__head {
    display: contents;
  }

  /* The bar: an arrow back and the event's name on one line */
  .seat-picker[data-map-choices] .seat-picker__intro {
    align-items: center;
    background: var(--color-surface-0);
    border-block-end: var(--border-width) solid var(--color-subtle);
    flex-direction: row;
    gap: var(--space-3xs);
    min-block-size: var(--seat-picker-bar);
    padding: var(--space-3xs) var(--space-s) var(--space-3xs) var(--space-3xs);
  }

  .seat-picker[data-map-choices] .seat-picker__back {
    aspect-ratio: 1;
    margin-inline-start: 0;
    padding: var(--space-2xs);

    .icon {
      --icon-size: 1.25rem;
    }
  }

  .seat-picker[data-map-choices] :is(.seat-picker__back-label, .seat-picker__title) {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .seat-picker[data-map-choices] .seat-picker__subtitle {
    display: none;
  }

  .seat-picker[data-map-choices] .seat-picker__heading {
    flex: 1;
    min-inline-size: 0;
  }

  .seat-picker[data-map-choices] .seat-picker__event {
    color: var(--color-text);
    font-size: var(--step-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Price classes and tariffs in one row that scrolls sideways, edge to edge */
  .seat-picker[data-map-choices] :is(.seat-picker__filters, .seat-picker__tariffs .seat-picker__options) {
    align-self: stretch;
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--space-s));
    mask-image: linear-gradient(to right, transparent, #000 var(--space-s), #000 calc(100% - var(--space-s)), transparent);
    overflow-x: auto;
    padding-inline: var(--space-s);
    scroll-padding-inline: var(--space-s);
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* The price classes float over the room's top as frosted chips (through
     the head, to outweigh the sideways row's :is() above) */
  .seat-picker[data-map-choices] .seat-picker__head > .seat-picker__filters {
    inset-block-start: calc(var(--seat-picker-bar) + var(--space-xs));
    inset-inline: 0;
    margin-inline: 0;
    position: absolute;
    z-index: 25;
  }

  .seat-picker[data-map-choices] .seat-picker__filter:not(.is-active) {
    backdrop-filter: blur(12px);
    background: color-mix(in oklch, var(--color-surface-1) 88%, transparent);
    box-shadow: var(--shadow-raised);
  }

  .seat-picker[data-map-choices] .seat-picker__layout {
    align-items: stretch;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    min-block-size: 0;
  }

  .seat-picker[data-map-choices] .seatmap-customer-map {
    --seat-map-height: 100%;

    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-block-size: 0;

    > form {
      block-size: 100%;
    }
  }

  /* Edge to edge the room is the canvas, without a frame around it */
  .seat-picker[data-map-choices] .seatmap-customer-map__viewport {
    background: var(--color-surface-0);
  }

  .seat-picker[data-map-choices] .seatmap-customer-map__stage {
    box-shadow: none;
  }

  /* Floor and zoom stand down the room's right edge, zoom in on top */
  .seat-picker[data-map-choices] .seatmap-customer-map__toolbar {
    align-items: flex-end;
    flex-direction: column;
    inset: auto var(--space-xs) var(--space-xs) auto;
  }

  .seat-picker[data-map-choices] .seatmap-customer-map__zoom {
    flex-direction: column-reverse;
    margin-inline-start: 0;
  }

  .seat-picker[data-map-choices] .seatmap-customer-map__zoom-level {
    font-size: var(--step--2);
    min-inline-size: 2.25rem;
  }

  .seatmap-customer-map__zoom-text {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
  }

  /* The sheet: only its foot at first */
  .seat-picker[data-map-choices] .seat-picker__panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 0 0 var(--border-width) var(--color-subtle), 0 -12px 32px -12px oklch(0 0 0 / 0.35);
    gap: 0;
    inset-block-start: auto;
    padding: var(--space-xs) var(--space-s) max(var(--space-s), env(safe-area-inset-bottom));
    position: relative;
    transition:
      border-radius var(--duration-slow) var(--ease-out),
      box-shadow var(--duration-slow) var(--ease-out);
    z-index: 30;
  }

  /* The choices wait behind the foot. Opened, they rise from behind it as
     one sheet with it and sink back as they close; dragged down by their
     handle, or once scrolled to the top (bottom_sheet_controller.js), they
     follow the finger (--bottom-sheet-drag) */
  .seat-picker[data-map-choices] .seat-picker__choices {
    --seat-picker-sheet-offset: 100%;

    background: var(--color-surface-1);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 0 0 var(--border-width) var(--color-subtle), 0 -12px 32px -12px oklch(0 0 0 / 0.35);
    clip-path: inset(-3rem -3rem var(--seat-picker-sheet-offset));
    display: none;
    flex-direction: column;
    gap: var(--space-s);
    inset-block-end: 100%;
    inset-inline: 0;
    max-block-size: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-s) var(--space-s);
    position: absolute;
    transition:
      --seat-picker-sheet-offset var(--duration-slow) var(--ease-out),
      display var(--duration-slow) allow-discrete;
    translate: 0 var(--seat-picker-sheet-offset);
  }

  .seat-picker[data-map-choices] .seat-picker__panel[data-expanded="true"] {
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    box-shadow: 0 0 0 var(--border-width) var(--color-subtle);

    .seat-picker__choices {
      --seat-picker-sheet-offset: var(--bottom-sheet-drag, 0%);

      display: flex;

      @starting-style {
        --seat-picker-sheet-offset: 100%;
      }
    }
  }

  .seat-picker[data-map-choices] .seat-picker__choices[data-dragging] {
    transition: none;
  }

  /* The handle, staying at the sheet's top as the choices scroll under it */
  .seat-picker[data-map-choices] .seat-picker__grabber {
    background: var(--color-surface-1);
    display: block;
    flex: none;
    inset-block-start: 0;
    margin-inline: calc(-1 * var(--space-s));
    padding-block: var(--space-xs) var(--space-2xs);
    position: sticky;
    touch-action: none;
    z-index: 1;

    &::before {
      background: color-mix(in oklch, var(--color-muted) 45%, transparent);
      block-size: 0.3125rem;
      border-radius: var(--radius-pill);
      content: "";
      display: block;
      inline-size: 2.25rem;
      margin-inline: auto;
    }
  }

  .seat-picker[data-map-choices] .seat-picker__footer {
    gap: var(--space-xs);
  }

  /* The sheet's bar: the tariff in use, and the chevron that opens it */
  .seat-picker[data-map-choices] .seat-picker__sheet-toggle {
    align-items: center;
    background: var(--color-surface-2);
    border: 0;
    border-radius: var(--radius-m);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    gap: var(--space-xs);
    justify-content: space-between;
    padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-s);
    text-align: start;

    .icon {
      --icon-color: var(--color-muted);

      rotate: 180deg;
      transition: rotate var(--duration-base) var(--ease-out);
    }

    &[aria-expanded="true"] .icon {
      rotate: 0deg;
    }
  }

  .seat-picker__sheet-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The tariffs as chips in their sideways row, the help left for a larger screen */
  .seat-picker[data-map-choices] .seat-picker__tariffs {
    gap: var(--space-2xs);
  }

  .seat-picker[data-map-choices] .seat-picker__tariffs .seat-picker__options {
    border: 0;
    border-radius: 0;
    flex-direction: row;
    gap: var(--space-2xs);

    .seat-picker__option {
      background: var(--color-surface-1);
      border: var(--border-width) solid var(--color-subtle);
      border-radius: var(--radius-pill);
      font-size: var(--step--1);
      font-weight: var(--weight-semibold);
      padding: var(--space-2xs) var(--space-s);
      white-space: nowrap;

      &::before {
        display: none;
      }

      span:first-of-type {
        flex: none;
      }

      &.is-active {
        background: color-mix(in oklch, var(--color-accent) 14%, var(--color-surface-1));
        border-color: var(--color-accent);
        box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
      }
    }
  }

  .seat-picker[data-map-choices] .seat-picker__tariffs-help {
    display: none;
  }

  /* A phone's tariff menu keeps 16px, or iOS zooms in on it */
  .seat-picker__tariff {
    font-size: 1rem;
  }

  .seat-picker[data-map-choices] .seat-picker__counts {
    border-block: 0;
    padding-block: 0;

    dd {
      font-size: var(--step-1);
    }
  }

  /* Best seats shrinks to its sparkle beside the way on */
  .seat-picker[data-map-choices] .seat-picker__actions {
    flex-direction: row;
  }

  .seat-picker[data-map-choices] .seat-picker__best {
    aspect-ratio: 1;
    flex: 0 0 auto;
    inline-size: auto;
    padding: var(--space-xs);
  }

  .seat-picker[data-map-choices] .seat-picker__best-label {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
  }

  .seat-picker[data-map-choices] .seat-picker__actions .button[type="submit"] {
    flex: 1;
  }
}

/* Desktop: the room fills everything under the header and stays put while
   the sidebar beside it (the event, tariffs, chosen places, the way on,
   standing areas) scrolls with the page once it grows long. Like the page
   sidebar (page-sidebar.css) it runs the window's full height, the header
   and the preview banner keeping to the room's side. The price classes
   float over the room's top left, floor and zoom on its right. */
@media (min-width: 60rem) {
  body.has-seat-map {
    --seat-picker-footer-space: 10rem;
    --seat-picker-sidebar: var(--sidebar-width);
    --seat-picker-top: 4rem;
  }

  body.has-seat-map > .site-main {
    --wrapper-gutter: 0;
    --wrapper-width: none;

    gap: 0;
    padding-block: 0;
  }

  body.has-seat-map > .site-header {
    inline-size: auto;
    margin-inline-end: var(--seat-picker-sidebar);
  }

  body.has-seat-map > .site-footer {
    display: none;
  }

  body.has-seat-map > .preview-banner {
    inset-inline-end: var(--seat-picker-sidebar);
  }

  /* A focused place in the sidebar scrolls clear of its fixed foot (the
     footer space below, set on body, which html cannot see) */
  html:has(body.has-seat-map) {
    scroll-padding-block-end: calc(10rem + var(--space-s));
  }

  /* The grid reaches up beside the header, the room held below it (sticky) */
  .seat-picker[data-map-choices] {
    align-items: start;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) var(--seat-picker-sidebar);
    grid-template-rows: auto auto auto minmax(var(--seat-picker-footer-space), 1fr);
    margin-block-start: calc(-1 * var(--seat-picker-top));
    min-block-size: 100dvh;
  }

  /* The sidebar's surface, behind its parts */
  .seat-picker[data-map-choices]::before {
    align-self: stretch;
    background: var(--color-surface-1);
    border-inline-start: var(--border-width) solid var(--color-subtle);
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .seat-picker[data-map-choices] :is(.seat-picker__flow, .seat-picker__head, .seat-picker__layout) {
    display: contents;
  }

  .seat-picker[data-map-choices] .seatmap-customer-map {
    --seat-map-height: calc(100dvh - var(--seat-picker-top));

    border-radius: 0;
    box-shadow: none;
    grid-column: 1;
    grid-row: 1 / -1;
    inset-block-start: var(--seat-picker-top);
    position: sticky;
  }

  /* Zoom, and the floor under it, stand at the room's top right; the price
     classes keep its top left */
  .seat-picker[data-map-choices] .seatmap-customer-map__toolbar {
    align-items: flex-end;
    flex-direction: column-reverse;
    inset-inline-start: auto;
  }

  .seat-picker[data-map-choices] .seatmap-customer-map__zoom {
    margin-inline-start: 0;
  }

  /* The room is the canvas, without a frame around it */
  .seat-picker[data-map-choices] .seatmap-customer-map__viewport {
    background: var(--color-surface-0);
  }

  .seat-picker[data-map-choices] .seatmap-customer-map__stage {
    box-shadow: none;
  }

  /* The price classes as frosted chips over the room, only as wide as they
     are; only the chips take a click, so the room and its controls around
     them stay reachable (Safari stretches the row over the whole room) */
  .seat-picker[data-map-choices] .seat-picker__filters {
    grid-column: 1;
    grid-row: 1 / -1;
    inset-block-start: calc(var(--seat-picker-top) + var(--space-xs));
    justify-self: start;
    margin: var(--space-xs);
    max-inline-size: calc(100% - 24rem);
    pointer-events: none;
    position: sticky;
    z-index: var(--z-raised);

    > * {
      pointer-events: auto;
    }
  }

  .seat-picker[data-map-choices] .seat-picker__filter:not(.is-active) {
    backdrop-filter: blur(12px);
    background: color-mix(in oklch, var(--color-surface-1) 88%, transparent);
    box-shadow: var(--shadow-raised);
  }

  /* The sidebar: the event and the step on top, then the choice */
  .seat-picker[data-map-choices] :is(.seat-picker__intro, .seat-picker__panel, .seat-picker__standing) {
    grid-column: 2;
    padding-inline: var(--space-m);
  }

  .seat-picker[data-map-choices] .seat-picker__intro {
    grid-row: 1;
    padding-block: var(--space-m) var(--space-s);
  }

  .seat-picker[data-map-choices] .seat-picker__title {
    font-size: var(--step-3);
  }

  .seat-picker[data-map-choices] .seat-picker__subtitle {
    font-size: var(--step--1);
  }

  .seat-picker[data-map-choices] .seat-picker__panel {
    background: none;
    border-radius: 0;
    box-shadow: none;
    grid-row: 2;
    padding-block: var(--space-s) var(--space-m);
    position: static;
  }

  /* The foot stays at the sidebar's bottom, whatever the length of the
     list: the places scroll above it, and the grid's last row keeps room
     for it (--seat-picker-footer-space) */
  .seat-picker[data-map-choices] .seat-picker__footer {
    background: var(--color-surface-1);
    border-block-start: var(--border-width) solid var(--color-subtle);
    border-inline-start: var(--border-width) solid var(--color-subtle);
    inline-size: var(--seat-picker-sidebar);
    inset: auto 0 0 auto;
    padding: var(--space-s) var(--space-m) var(--space-m);
    position: fixed;
    z-index: var(--z-raised);
  }

  .seat-picker[data-map-choices] .seat-picker__standing {
    border-block-start: var(--border-width) solid var(--color-subtle);
    grid-row: 3;
    padding-block: var(--space-m);

    h2 {
      font-size: var(--step-2);
    }

    h3 {
      font-size: var(--step-0);
    }
  }
}