/* The full-size figure viewer.
 *
 * Loaded only by sites that call `applyFigureZoom`, so no site's pages change
 * until it asks for the behaviour. Everything here is scoped to the classes the
 * script adds — `.figure__zoom` on the button and `.figzoom*` on the dialog — so
 * it cannot reach anything that already exists.
 *
 * The palette is the site's own: every colour below is one of the tokens
 * `base.css` already defines, which is why this file needs no per-site edit.
 */

/* --- the button on the figure --------------------------------------------- */

.figure__frame--zoomable { position: relative; }

.figure__zoom {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-end: 0.45rem;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;

  /* Hidden until wanted on a pointer device, and always present on touch, where
     there is no hover to reveal it. `any-hover` rather than `hover` so a laptop
     with a touchscreen still gets the hover behaviour. */
  opacity: 0;
  transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

@media (any-hover: none) {
  .figure__zoom { opacity: 0.75; }
}

.figure:hover .figure__zoom,
.figure:focus-within .figure__zoom,
.figure__zoom:focus-visible { opacity: 1; }

.figure__zoom:hover { border-color: var(--c-a); color: var(--ink); }

.figure__zoom svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- the dialog ----------------------------------------------------------- */

.figzoom {
  inline-size: 100vw;
  max-inline-size: 100vw;
  block-size: 100dvh;
  max-block-size: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);

  /* bar · stage · caption. The stage takes everything left over, which is what
     makes the drawing the largest thing on the screen at every viewport. */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.figzoom::backdrop { background: var(--paper); }

/* --- the toolbar ---------------------------------------------------------- */

.figzoom__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-block-end: 1px solid var(--rule);
  background: var(--paper-2);
}

/* 2.75rem is 44 px at the default root size, which is the smallest target a
   thumb hits reliably and what the accessibility guidance asks for. The first
   version used 2.1rem, which looks tidier and is not a target. */
.figzoom__bar button {
  display: grid;
  place-items: center;
  min-inline-size: 2.75rem;
  block-size: 2.75rem;
  padding-inline: 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.figzoom__bar button:hover:not(:disabled) { border-color: var(--c-a); color: var(--ink); }
.figzoom__bar button:disabled { opacity: 0.4; cursor: default; }

.figzoom__reset { font-size: 0.8rem; }
.figzoom__close { margin-inline-start: 0.5rem; }

/* The current magnification, so a reader knows how far in they are and that
   there is a way back. */
.figzoom__level {
  min-inline-size: 3.2rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* --- the stage ------------------------------------------------------------ */

.figzoom__stage {
  display: grid;
  place-items: center;
  min-block-size: 0;    /* so the SVG shrinks to the row rather than overflowing it */
  overflow: hidden;     /* panning moves the viewBox, not a scroll position */
  padding: clamp(0.5rem, 1.5vw, 1.25rem);

  /* The browser must not claim the gestures: pinch and drag are handled here,
     and a browser pinch would zoom the whole dialog including the toolbar. */
  touch-action: none;
  cursor: grab;

  /* A drag across a diagram otherwise selects its labels, and the reader ends a
     pan with half the figure highlighted in blue. The caption below is outside
     the stage and stays selectable, which is the half worth copying. */
  -webkit-user-select: none;
  user-select: none;
}

.figzoom__stage:active { cursor: grabbing; }
.figzoom__stage:focus-visible { outline: 2px solid var(--c-a); outline-offset: -2px; }

/* The drawing takes the whole stage. Zooming narrows the viewBox rather than
   scaling the element, so this stays at 100% throughout and the picture is
   re-rendered from its own coordinates at every magnification — text included,
   which is the part a reader zoomed in to read. */
.figzoom__stage > svg {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* --- the caption ---------------------------------------------------------- */

/* The drawing is what the reader opened this for, so the caption is capped and
   scrolls rather than pushing the figure up the screen. A long caption on a
   phone otherwise takes a third of the height from the thing it describes. */
.figzoom__caption {
  margin: 0;
  padding: 0.7rem clamp(0.75rem, 4vw, 2rem);
  max-block-size: 26vh;
  overflow-y: auto;
  border-block-start: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-align: center;
}

.figzoom__caption:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .figure__zoom { transition: none; }
}