/* ==========================================================================
   Booth map - the overlay of cells, and the editor around it in wp-admin.

   The overlay half is deliberately plain and shared: the front-end picker
   draws the same cells on the same plan, so anything specific to editing is
   kept under .tcmap.
   ========================================================================== */

/* --- The overlay ---------------------------------------------------------- */
.tcmap__canvas {
  position: relative;
  width: 100%;
}

.tcmap__canvas img {
  display: block;
  width: 100%;
  height: auto;
}

.tcmap__cells {
  position: absolute;
  inset: 0;
}

.tcmap__cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 45%);
  background: rgb(0 0 0 / 8%);
  color: #fff;
  font: 700 8px/1 inherit;
  text-shadow: 0 0 2px rgb(0 0 0 / 90%);
  overflow: hidden;
  cursor: pointer;
}

/*
 * On the form the code is painted at whatever size fits the cell, and not at
 * all below the size where it stops being readable - booth-picker.js decides
 * both and sets --cell-font. The editor in wp-admin keeps its fixed 8px: that
 * screen is always looked at zoomed in, and the code is the point of it.
 */
.booth-plan .tcmap__cell {
  font-size: 0;
}

.booth-plan .tcmap__canvas.has-labels .tcmap__cell {
  font-size: var(--cell-font, 8px);
  /* The code is clipped, not shrunk to fit and not wrapped: the tooltip has
     the whole of it, and two thirds of "V152" still narrows the search. */
  white-space: nowrap;
  text-overflow: clip;
}

/* A cell nobody has claimed: white, so an empty one is impossible to miss. */
.tcmap__cell.is-empty {
  border-color: #d03e19;
  border-width: 2px;
  background: #fff;
}

.tcmap__cell.is-picked {
  outline: 2px solid #2271b1;
  outline-offset: 1px;
}

/* --- The editor ----------------------------------------------------------- */
.tcmap {
  position: relative;
}

.tcmap__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.tcmap__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.tcmap__zoom {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tcmap__level {
  min-width: 4em;
  text-align: center;
}

.tcmap__stat.is-bad {
  color: #d03e19;
  font-weight: 600;
}

.tcmap__upload {
  margin: 0;
  cursor: pointer;
}

.tcmap__viewport {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid #dcdcde;
  background: #fff;
}

.tcmap__band {
  position: absolute;
  border: 1px solid #2271b1;
  background: rgb(34 113 177 / 15%);
  pointer-events: none;
}

.tcmap__problems {
  margin-top: 8px;
  color: #50575e;
}

.tcmap__problems p {
  margin: 2px 0;
}

/* --- The assign panel ------------------------------------------------------ */
.tcmap__panel {
  position: absolute;
  z-index: 10;
  width: 240px;
  padding: 10px;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
}

.tcmap__panel-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tcmap__search {
  width: 100%;
  margin-bottom: 6px;
}

.tcmap__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
}

.tcmap__option {
  padding: 2px 6px;
  border: 1px solid #c3c4c7;
  border-left-width: 4px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.tcmap__option:hover {
  background: #f0f0f1;
}

.tcmap__clear {
  display: block;
  margin-top: 8px;
}

/* The bar that appears when a new plan has been read but not taken. */
.tcmap__ask {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 4px solid #2271b1;
  background: #f6f7f7;
}

.tcmap__ask span {
  flex: 1;
}

/* A code another cell already holds: still clickable, because clicking it
   trades the two cells rather than duplicating the code. */
.tcmap__option.is-used {
  border-style: dashed;
  color: #787c82;
}

/* ==========================================================================
   The plan on the registration form.

   The overlay above is shared with the editor; everything here is the frame
   around it - the scrolling box and the two states a visitor sees.

   Named .booth-plan, not .booth-map: the booth map PAGE already owns that
   name in booth.css, for a different thing that behaves differently. They
   never load together today, which is exactly why one would have gone
   unnoticed until the day they did.
   ========================================================================== */
.booth-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 9px);
}

/*
 * The window onto the plan. Desktop shows it at 100%; below 1024px
 * booth-picker.js widens the canvas to a fixed 300% and leaves getting
 * around it to this box - it scrolls, and that scrolling is the only way to
 * pan. There is no dial: the zoom level does not change on either side of
 * the breakpoint, only at the breakpoint itself.
 *
 * `pan-x pan-y` is chosen over `none` deliberately. It keeps one-finger
 * scrolling native, which means it still flings and still hands the gesture up
 * to the page once the plan has no more to give; `none` would make every
 * upward swipe on a phone a swipe the page never sees.
 */
.booth-plan__viewport {
  overflow: auto;
  max-height: 64vh;
  border: 1px solid var(--c-border-light, rgb(0 0 0 / 10%));
  border-radius: var(--radius-input, 8px);
  background: #fff;
  touch-action: pan-x pan-y;
  cursor: grab;
}

/* While dragging, the whole box is the handle - the cells underneath keep
   their own pointer cursor otherwise, and the map looks clickable mid-pan. */
.booth-plan__viewport.is-panning,
.booth-plan__viewport.is-panning * {
  cursor: grabbing;
}

.booth-plan__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption, 0.625rem);
  color: var(--c-ink-steel, #11466b);
}

.booth-plan__legend li {
  display: flex;
  gap: 4px;
  align-items: center;
}

.booth-plan__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* --- The two states a visitor sees ---------------------------------------- */

/*
 * Picked: a different colour, not a border.
 *
 * A booth is about six pixels across at 100%, and at that size any ring wide
 * enough to notice covers the fill it is meant to frame - both attempts at one
 * (white inset, then a dark outline) turned the cell into a smudge. So a
 * chosen cell simply changes colour, the way a taken seat does on a cinema
 * map, and the legend names that colour like any other. Which zone it belongs
 * to is on the chip and in the summary by then anyway.
 */
.tcmap__cell.is-chosen {
  background: var(--c-primary, #296dd2) !important;
  outline: 1px solid #fff;
  outline-offset: -1px;
}

/* Not on sale this year. Nothing happens on click, and it says so by looking
   flat rather than by moving. */
.tcmap__cell.is-out {
  background: var(--c-booth-unavailable) !important;
  cursor: not-allowed;
}

/* "SOLD" is four letters in a cell sized for 2.8 characters. */
.booth-plan .tcmap__canvas.has-labels .tcmap__cell.is-out {
  font-size: calc(var(--cell-font, 8px) * 0.7);
}

/* Sold, to a client we can name: their logo on white instead of "SOLD".
   booth-picker.js dresses the cell; the card below opens over it. */
.tcmap__cell.is-out.has-client {
  padding: 1px;
  background: var(--c-surface) !important;
  cursor: help;
}

.tcmap__cell.has-client img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* --- The client card --------------------------------------------------------
 *
 * Figma nodes 6826:457 / 471 / 437: the booths the client holds as badges in
 * the top-left corner, the logo, the company name. Read-only, so it never
 * takes the pointer - it opens on the cell and closes when the pointer leaves
 * the cell. Above the close-up panel (60), which can carry the same cells.
 * ------------------------------------------------------------------------ */
.booth-client {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 328px;
  max-width: calc(100vw - 2 * var(--space-md));
  min-height: 247px;
  padding: var(--space-xs);
  border: 2px solid color-mix(in srgb, var(--c-ink-pure) 20%, transparent);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-inter);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}

.booth-client.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms ease-out;
}

.booth-client__booths {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: var(--space-3xs);
  margin: 0 -3px;
  padding: 0;
  list-style: none;
}

.booth-client__booth {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: calc(var(--radius-xs) / 2);
  background: color-mix(in srgb, var(--zone, var(--c-booth-unavailable)) 25%, var(--c-surface));
  color: var(--zone-ink, var(--c-ink));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: normal;
  text-transform: uppercase;
}

/* The design's slot is at most 308 x 160; the logo keeps its own shape
   inside it, which is how all three designs size theirs. */
.booth-client__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
}

.booth-client__name {
  width: 100%;
  margin: 0;
  color: var(--c-ink-pure);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .booth-client,
  .booth-client.is-open {
    transition: none;
  }
}

.booth-plan__swatch--chosen {
  background: var(--c-primary, #296dd2);
  outline: 1px solid #fff;
  outline-offset: -1px;
}

/* --- The close-up ---------------------------------------------------------
 *
 * One category of booths lifted off the plan over the page, at a size a hand
 * can aim at. It is put under the pointer and taken away when the pointer
 * leaves, so it needs no dismiss button and never stands between the reader
 * and the map for longer than they are looking at it.
 *
 * Fixed, and on the body rather than inside the plan: a category needs most
 * of the window to be worth opening, which is more than the column the form
 * gives the plan - and more than a box that scrolls could hold without
 * clipping it. Above the header, which is fixed at 50.
 * ------------------------------------------------------------------------ */
.booth-plan__closeup {
  position: fixed;
  z-index: 60;
  padding: var(--space-2xs, 6px);
  border: 1px solid var(--c-border-light, rgb(0 0 0 / 10%));
  border-radius: var(--radius-input, 8px);
  background: var(--c-surface, #fff);
  box-shadow: var(--shadow-card-hover, 0 10px 32px rgb(11 11 11 / 10%));
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 400ms ease-in, transform 400ms ease-in;
}

.booth-plan__closeup.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/*
 * Still a transition, still fires transitionend - the script waits for it
 * before taking the node away. Fast enough to read as instant.
 */
@media (prefers-reduced-motion: reduce) {
  .booth-plan__closeup,
  .booth-plan__closeup.is-open {
    transform: none;
    transition-duration: 1ms;
  }
}

.booth-plan__closeup-title {
  margin: 0 0 var(--space-3xs, 4px);
  font-size: var(--fs-caption, 0.625rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--c-ink-steel, #11466b);
}

/*
 * The window onto the grid. It is the whole grid whenever the category fits
 * on the screen, and less than it when it does not: a booth is kept at a size
 * its code survives, and what will not fit is scrolled to instead. The panel
 * opens scrolled to the booth it was opened from.
 *
 * `contain` so that reaching the end of it does not carry on into the page.
 */
.booth-plan__closeup-view {
  overflow: auto;
  overscroll-behavior: contain;
}

/* The cells inside are placed as percentages of this box, which is why the
   script sizes it in pixels and leaves the arrangement to the geometry.
   Overflow: the plan behind them is the whole drawing, cropped to here. */
.booth-plan__closeup-grid {
  position: relative;
  overflow: hidden;
}

/* The plan itself, scaled and shifted by the script so the category's box
   lands on the grid. Decoration behind the buttons, and never a target. */
.booth-plan__closeup-plan {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/*
 * The code is painted at whatever the cell can carry - booth-picker.js works
 * it out and sets --cell-font, and sets it to 0 where a code would be a
 * smudge rather than a code. Same bargain the plan itself makes, one size up.
 */
.booth-plan__closeup .tcmap__cell {
  border-radius: 2px;
  font-size: var(--cell-font, 12px);
}

/* Questions sit above the map. Below it they would be off the screen: the
   map is taller than the viewport on most machines. */
.tcmap__asks:empty {
  display: none;
}

.tcmap__asks .tcmap__ask {
  margin: 0 0 8px;
}

/* --- What only a phone needs ------------------------------------------------
   The plan is two controls sharing one markup. Below 1024px it is a small
   picture you zoom into, so it carries a toolbar - the hint sentence and the
   zoom stepper - and the field keeps its label. From 1024px up every code is
   printed on its own cell and there is no zoom to drive, so the toolbar would
   be a control with nothing behind it.

   booth-picker.js asks the same question at the same width for the behaviour
   (labels, zoom, close-up). Move this breakpoint and move that one. */
@media (min-width: 1024px) {
  [data-mobile-only] {
    display: none;
  }
}

/* No logo: the name takes the logo's place in the middle of the free space. */
.booth-client__booths + .booth-client__name {
  margin-top: auto;
}