/* Parked strip: open-larger-view arrow beside the clear (trash) button */
.create-board__park-expand {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  cursor: var(--bpb-cursor-pointer);
  line-height: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__park-expand img {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  rotate: 180deg;
  pointer-events: none;
}

.create-board__park-expand:hover {
  filter: brightness(1.15) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__park-expand:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bpb-gold, #e8c84a) 80%, transparent);
  outline-offset: 2px;
}

.create-board__park-expand:disabled {
  opacity: 0.4;
  cursor: var(--bpb-cursor-default);
  filter: grayscale(0.25) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

/* Larger parked view */
.create-park-modal {
  position: fixed;
  inset: 0;
  /* Above nav/page chrome; under the drag cursor (2000) and park flights (2600) */
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  pointer-events: none;
}

.create-park-modal[hidden] {
  display: none !important;
}

/* Dark everywhere except the board (clip-path hole from JS) */
.create-park-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 4, 0.66);
  pointer-events: auto;
  cursor: var(--bpb-cursor-pointer);
}

.create-park-modal__panel {
  --park-modal-plate: #4f3829;
  --park-modal-well: rgba(14, 10, 8, 0.32);
  --bpb-bg-scroll-thumb: #eac914;
  --bpb-bg-scroll-track: #816230;
  --bpb-bg-scroll-frame: #472a24;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.45vw, 0.7rem);
  width: min(100%, clamp(30rem, 34vw, 56rem));
  height: min(78vh, 46rem);
  padding: clamp(0.75rem, 0.8vw, 1.2rem) clamp(0.85rem, 0.9vw, 1.35rem);
  box-sizing: border-box;
  pointer-events: auto;
  filter: drop-shadow(0 10px 24px rgba(8, 5, 3, 0.55));
}

/* Desktop Create is a board column plus a catalog/filter column. The panel
   covers the catalog column and matches the board's top and height. */
.create-park-modal.is-catalog-centered {
  display: block;
  padding: 0;
}

.create-park-modal.is-catalog-centered .create-park-modal__panel {
  position: absolute;
  left: var(--park-modal-center-x, 50vw);
  top: var(--park-modal-top, 50vh);
  width: min(
    calc(100vw - 1.5rem),
    var(--park-modal-catalog-width, clamp(30rem, 34vw, 56rem))
  );
  height: var(--park-modal-height, min(78vh, 46rem));
  transform: translateX(-50%);
}

/* Solid leather plate (same family as the filter drawer) with Patch3 edges,
   so the dimmed catalog never shows through the parked items. */
.create-park-modal__panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 236, 220, 0.07), transparent 60%),
    var(--park-modal-plate);
  pointer-events: none;
  -webkit-mask-box-image: url('../../../assets/icons/filters/Patch3.png') 8 7 9 8 fill;
  mask-border-source: url('../../../assets/icons/filters/Patch3.png');
  mask-border-slice: 8 7 9 8 fill;
  mask-border-width: 8px 7px 9px 8px;
}

/* Keep the open panel visible while a chip is held, but let the drop target
   underneath receive pointer movement. */
body.is-bpb-dragging .create-park-modal__panel {
  pointer-events: none;
}

body.is-bpb-dragging .create-park-modal__scrim {
  pointer-events: none;
}

.create-park-modal__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.create-park-modal__head .create-board__park-label {
  font-size: clamp(1.6rem, 1.45vw, 2.4rem);
}

.create-park-modal__head .create-board__park-count {
  margin-left: auto;
  font-size: clamp(1.15rem, 1vw, 1.6rem);
}

.create-park-modal__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0 0 0.15rem;
  border: 0;
  background: transparent;
  font-family: var(--bpb-font-body);
  font-size: clamp(1.95rem, 1.6vw, 2.6rem);
  line-height: 1;
  color: var(--bpb-label-fill, #fffaf0);
  text-shadow: var(--bpb-label-stroke);
  cursor: var(--bpb-cursor-pointer);
}

.create-park-modal__close:hover {
  filter: brightness(1.15);
}

.create-park-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bpb-gold, #e8c84a) 80%, transparent);
  outline-offset: 2px;
}

.create-park-modal__hint {
  margin: 0;
  font-family: var(--bpb-font-body);
  font-size: clamp(0.95rem, 0.78vw, 1.25rem);
  font-style: italic;
  color: var(--bpb-label-fill, #fffaf0);
  text-shadow: var(--bpb-label-stroke);
  opacity: 0.9;
}

/* Recessed Patch3 well holding the parked Itemiary board. */
.create-park-modal__grid {
  position: relative;
  z-index: 0;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.create-park-modal__grid::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--park-modal-well);
  pointer-events: none;
  transition: background-color 0.12s ease;
  -webkit-mask-box-image: url('../../../assets/icons/filters/Patch3.png') 8 7 9 8 fill;
  mask-border-source: url('../../../assets/icons/filters/Patch3.png');
  mask-border-slice: 8 7 9 8 fill;
  mask-border-width: 8px 7px 9px 8px;
}

.create-park-modal__panel.is-drop-hover .create-park-modal__grid::before {
  background: color-mix(in srgb, #eac914 22%, var(--park-modal-well));
}

.create-park-modal__panel.is-drop-reject .create-park-modal__grid::before {
  background: color-mix(in srgb, #a33 30%, var(--park-modal-well));
}

/* park-modal.js mirrors the live Create catalog cell size at runtime. The
   scroller keeps the shared items-bag scrollbar from backpack-grid.css. */
.create-park-modal__grid > .bpb-bg {
  --bpb-bg-scroll-gap: 0.7rem;
  width: 100%;
  height: 100%;
  max-height: none;
  box-sizing: border-box;
  padding: 0.55rem 0.35rem 0.55rem 0.65rem;
  background: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.create-park-modal__grid > .bpb-bg .bpb-bg__board {
  margin-right: var(--bpb-bg-scroll-gap);
  max-width: calc(100% - var(--bpb-bg-scroll-gap));
}

/* Stack count: sized off the cell so it reads at a glance at any width. */
.create-park-modal__stack-badge {
  position: absolute;
  right: 0.05em;
  bottom: 0.05em;
  z-index: 30010;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 0.3em;
  box-sizing: border-box;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--bpb-ink, #3d2b1f) 88%, #000);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #eac914 45%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.45);
  color: var(--bpb-label-fill, #fffaf0);
  font-family: var(--bpb-font-body);
  font-size: clamp(0.95rem, calc(var(--bpb-bg-cell, 34px) * 0.4), 1.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-shadow: var(--bpb-label-stroke);
  pointer-events: none;
}

.create-park-modal__empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: clamp(1rem, 0.9vw, 1.4rem);
  pointer-events: none;
}

/* Lit copy of the sell chest drawn above the scrim (rect set from JS), so the
   chest keeps its own shape instead of a rectangular cut-out. */
.create-park-modal__chest {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.create-park-modal__chest[hidden] {
  display: none;
}

.create-park-modal__chest .create-sellbin__chest {
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.create-park-modal__chest.is-drop-hover .create-sellbin__top {
  transform: rotate(58deg);
}

.create-park-modal__chest.is-drop-hover .create-sellbin__chest {
  filter:
    drop-shadow(0 4px 10px rgba(20, 12, 8, 0.5))
    brightness(1.35);
}

@media (max-width: 640px) {
  .create-park-modal {
    padding: 0.6rem;
  }

  .create-park-modal__panel {
    height: min(70vh, 36rem);
    padding: 0.7rem 0.7rem 0.75rem;
  }

  .create-park-modal__grid > .bpb-bg {
    padding: 0.35rem 0.25rem 0.35rem 0.4rem;
  }
}