/*! diagram-zoom 0.1.0 | MIT | https://github.com/Lightbridge-KS/quarto-diagram-zoom */
/* Colours come only from --dz-* custom properties, read here with Bootstrap fallbacks
   (Quarto) and system colours last. Never define --dz-* in this file: hosts map them on :root. */

.dz-host { position: relative; }

.dz-open {
  position: absolute;
  inset-block-start: .25rem;
  inset-inline-end: .25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--dz-border, var(--bs-border-color, #8886));
  border-radius: .375rem;
  color: var(--dz-fg, var(--bs-body-color, CanvasText));
  background: var(--dz-bg, var(--bs-body-bg, Canvas));
  cursor: zoom-in;
}
.dz-open svg { width: 1.1rem; height: 1.1rem; }
/* Reveal on hover only where a real hover exists. On touch screens the button stays put:
   iOS treats a tap that changes the page through :hover as a hover and swallows the click. */
@media (hover: hover) and (pointer: fine) {
  .dz-open { opacity: 0; transition: opacity .15s ease; }
  .dz-host:hover > .dz-open, .dz-open:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .dz-open { transition: none; } }

.dz-dialog {
  box-sizing: border-box;
  width: min(96vw, 1500px);
  max-width: 96vw;
  height: 90vh;
  height: 90dvh;
  max-height: none;
  padding: .75rem;
  border: 1px solid var(--dz-border, var(--bs-border-color, #8886));
  border-radius: .75rem;
  color: var(--dz-fg, var(--bs-body-color, CanvasText));
  background: var(--dz-bg, var(--bs-body-bg, Canvas));
  touch-action: none;
  overscroll-behavior: contain;
}
.dz-dialog[open] { display: flex; flex-direction: column; gap: .5rem; }
.dz-dialog::backdrop { background: rgb(0 0 0 / 70%); }

.dz-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.dz-title {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dz-toolbar button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 1px solid var(--dz-border, var(--bs-border-color, #8886));
  border-radius: .375rem;
  font: inherit;
  color: inherit;
  background: var(--dz-surface, transparent);
  cursor: pointer;
}
.dz-zoom { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.dz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dz-viewport {
  flex: 1;
  min-height: 0;
  display: grid;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dz-viewport.dz-dragging { cursor: grabbing; }
/* Auto margins centre a small diagram and fall back to 0 when it overflows (all of it stays scrollable). */
.dz-viewport > svg { display: block; margin: auto; max-width: none !important; max-height: none !important; }

:is(.dz-open, .dz-toolbar button):focus-visible {
  outline: 2px solid var(--dz-accent, var(--bs-primary, Highlight));
  outline-offset: 2px;
}
.dz-viewport:focus-visible { outline: none; }
.dz-dialog[data-dz-keys] .dz-viewport:focus-visible {
  outline: 2px solid var(--dz-accent, var(--bs-primary, Highlight));
  outline-offset: -2px;
}

@media (max-width: 640px) {
  .dz-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .dz-title { flex-basis: 100%; }
}
@media print { .dz-open, .dz-dialog { display: none !important; } }
/* Hosts that clone figures into tooltips (Quarto cross-reference previews) carry a dead button. */
.tippy-box .dz-open { display: none; }