/*
  Filename:      zoomable.css
  Created by:    Kris Korsmo
  Organization:  Leading Edge Digital Media - www.leadingedge.net
  Purpose:       "Click a chart to view it full screen" on article pages
  Last Updated:  10/25/2026

  Pairs with common/library/zoomable.js and the shared modal in
  common/modals/chartViewer.cfm. Markup contract: docs/zoomable-charts.md.

  Nothing here changes the size or position of a zoomable item, so marking
  an image zoomable causes no layout shift. The hover / focus "expand" badge
  is ONE absolutely positioned element that zoomable.js moves over whichever
  item is hovered or focused, so it works on a bare <img> (which cannot have
  a ::after) and never takes space in the flow.
*/

/* ---------------- Affordance on the page ---------------- */

.zoomable {
  cursor: zoom-in;
}

.zoomable:focus {
  outline: none;
}

.zoomable:focus-visible {
  outline: 2px solid var(--accent, #c9a96a);
  outline-offset: 3px;
  border-radius: var(--radius, 4px);
}

/* Captions, links and buttons inside a figure keep their own cursor. */
figure.zoomable figcaption a,
figure.zoomable figcaption button {
  cursor: pointer;
}

.eg-zoom-badge {
  position: absolute;
  z-index: 50;
  display: none;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: var(--radius, 4px);
  background: rgba(9, 9, 10, 0.72);
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
  color: var(--accent, #c9a96a);
  pointer-events: none;           /* the click belongs to the chart underneath */
  text-align: center;
  line-height: 32px;
}

.eg-zoom-badge.is-visible {
  display: block;
}

.eg-zoom-badge > .icon {
  margin: 0;
  font-size: 15px;
}

/* ---------------- The viewer ---------------- */

.ui.modal.eg-chart-viewer {
  /* Fomantic's fullscreen modal is 95% wide; keep it, centre the content. */
  text-align: center;
  font-family: var(--font-sans, inherit);
  color: var(--ink, #f2efe8);
}

.ui.modal.eg-chart-viewer > .eg-chart-viewer__close {
  position: absolute;
  top: -2.25rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
  border-radius: var(--radius, 4px);
  background: rgba(9, 9, 10, 0.6);
  color: var(--ink, #f2efe8);
  cursor: pointer;
  z-index: 2;
}

.ui.modal.eg-chart-viewer > .eg-chart-viewer__close:hover,
.ui.modal.eg-chart-viewer > .eg-chart-viewer__close:focus-visible {
  color: var(--accent, #c9a96a);
  border-color: var(--accent, #c9a96a);
  outline: none;
}

.ui.modal.eg-chart-viewer > .eg-chart-viewer__close > .icon {
  margin: 0;
}

/* The stage scrolls only in actual-size mode. touch-action is left at its
   default so the browser's own pinch-zoom works inside the viewer. */
.eg-chart-viewer__stage {
  position: relative;
  max-width: 100%;
  max-height: 90vh;
  overflow: hidden;
  margin: 0 auto;
  outline: none;
}

.eg-chart-viewer__stage.is-actual {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
}

.eg-chart-viewer__media img,
.eg-chart-viewer__media svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;          /* never stretched, whatever its proportions */
  background: transparent;
}

/* A caption below takes some of the height, so the chart gives it room. */
.eg-chart-viewer.has-caption .eg-chart-viewer__media img,
.eg-chart-viewer.has-caption .eg-chart-viewer__media svg,
.eg-chart-viewer.has-caption .eg-chart-viewer__stage {
  max-height: calc(90vh - 4.5rem);
}

/* Inline SVG: fill the width, keep its own proportions (viewBox). */
.eg-chart-viewer__media svg {
  width: 100%;
  height: auto;
  background: #fff;             /* charts are usually drawn for a light page */
  border-radius: var(--radius, 4px);
}

.eg-chart-viewer__media img.is-zoomable-actual {
  cursor: zoom-in;
}

/* Actual size (1:1): natural pixels, scroll to pan. */
.eg-chart-viewer__stage.is-actual .eg-chart-viewer__media img {
  max-width: none;
  max-height: none;
  margin: 0;
  cursor: zoom-out;
}

.eg-chart-viewer__caption {
  max-width: 60rem;
  margin: 0.9rem auto 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius, 4px);
  background: rgba(9, 9, 10, 0.72);   /* readable over any dimmer or chart */
  color: var(--ink, #f2efe8);
  font-size: 0.95rem;
  line-height: 1.5;
}

.eg-chart-viewer__caption:empty {
  display: none;
}

.eg-chart-viewer__caption a {
  color: var(--accent, #c9a96a);
  text-decoration: underline;
}

.eg-chart-viewer__hint {
  margin-top: 0.4rem;
  color: var(--muted, #a8a397);
  font-size: 0.8rem;
}

.eg-chart-viewer__hint[hidden] {
  display: none;
}

/* Loading state while a data-full image downloads: a small spinner over the
   low-resolution image already on screen. */
.eg-chart-viewer__stage > .ui.loader {
  display: none;
}

.eg-chart-viewer__stage.is-loading > .ui.loader {
  display: block;
}

.eg-chart-viewer__stage.is-loading .eg-chart-viewer__media {
  opacity: 0.6;
}