/* ============================================================================
   Mindprint — the full-screen weave view (D83), shared by /patterns and /p/{key}.

   The pattern tiled edge to edge — the one place the repeat is allowed to run
   forever, because that endless field is what "seamless" means. Above everything,
   including the browser's sheet. Markup: Pages/Shared/_PatternZoom.cshtml; logic:
   js/pattern-zoom.js.
   ========================================================================== */

.pb-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--mp-black);
  /* The open/close animation scales from the invoking artwork's rect, whose math
     assumes the top-left corner is the origin. */
  transform-origin: 0 0;
}

.pb-zoom[hidden] { display: none; }

.pb-zoom-field {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  cursor: move;
  outline: none;
  touch-action: none;
}

/* Doubled with the shell class because .hbtn.icon's own position: relative outranks a
   single class — the circle must pin to the corner, not flow. */
.pb-zoom .pb-zoom-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 2;
  background: rgba(12, 12, 16, .72);
  backdrop-filter: blur(6px);
}

/* The nameplate and the bottom instrument share one voice: the weave lens's own glass pill. */
.pb-zoom-name,
.pb-zoom-hint {
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--mp-line-soft);
  border-radius: var(--mp-r-pill);
  background: rgba(16, 16, 19, .76);
  color: var(--mp-dim);
  font-family: var(--mp-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(7px);
}

.pb-zoom-name {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  max-width: min(60vw, 420px);
  overflow: hidden;
  color: var(--mp-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-zoom-name[hidden] { display: none; }

.pb-zoom-nav {
  position: absolute;
  z-index: 3;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100vw - 24px);
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  /* Only the three controls take the pointer. The transparent rectangle around
     them must never steal the full field's pan/pinch gesture. */
  pointer-events: none;
}

.pb-zoom-hint {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 40px;
  max-width: calc(100vw - 28px);
  align-items: center;
  justify-content: center;
  line-height: 1.6;
  pointer-events: none;
}

.pb-zoom-nav[data-navigable="true"] .pb-zoom-hint {
  max-width: min(540px, calc(100vw - 124px));
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.pb-zoom-nav.is-scrubbing .pb-zoom-hint {
  border-color: var(--mp-pink);
  color: var(--mp-ink);
  cursor: grabbing;
}

.pb-zoom-hint .solo,
.pb-zoom-hint .multi,
.pb-zoom-hint .coarse { display: none; }

.pb-zoom-nav[data-navigable="false"] .pb-zoom-hint .fine.solo,
.pb-zoom-nav[data-navigable="true"] .pb-zoom-hint .fine.multi { display: inline; }

/* The icon circles are the ordinary button system, with the same glass as the
   label they bracket. Disabled ends keep their space so the bar never jumps. */
.pb-zoom .pb-zoom-step {
  position: relative;
  flex: 0 0 40px;
  z-index: 1;
  background: rgba(16, 16, 19, .76);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

.pb-zoom .pb-zoom-step[hidden] { display: none; }

.pb-zoom .pb-zoom-step:disabled {
  opacity: .38;
  cursor: default;
}

.pb-zoom .pb-zoom-step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: none), (max-width: 900px) {
  .pb-zoom-hint { min-height: 44px; }
  .pb-zoom .pb-zoom-step {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .pb-zoom-hint .fine { display: none !important; }
  .pb-zoom-nav[data-navigable="false"] .pb-zoom-hint .coarse.solo,
  .pb-zoom-nav[data-navigable="true"] .pb-zoom-hint .coarse.multi { display: inline; }
}

/* The page must not scroll behind the field — a wheel that zooms here and scrolls
   the wall there is two answers to one gesture. */
html.pb-zoom-open,
html.pb-zoom-open body { overflow: hidden; }