/* Shared fullscreen viewer (js/lightbox.js) for screenshots and inline SVG
   charts.

   A native <dialog> that fills the screen: dark solid ground (no blur, house
   rule), the item fitted to the space above the caption bar. Screenshots are
   never upscaled past their 1x capture size. Charts are vector, so they may
   grow to 2x their viewBox, on a light panel matching the article ground they
   were drawn for. Buttons follow the site's dialog style: 2px radii, hairline
   borders, cobalt on hover. The caption repeats the img title (or the chart
   figcaption) and the figcaption date, with a mono "3 / 9" counter.
   .is-zoomable marks an item the fit had to shrink, .is-zoomed shows it at
   native size, scrolling inside the stage.

   In the article, .lightbox-chart marks a chart figure the script made
   openable: a zoom-in cursor, a focus ring on the svg, and an expand icon in
   the svg's top right corner. Nothing here changes the figure's layout. */

html.has-lightbox-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ---------- Charts in the article ---------- */

.lightbox-chart {
  position: relative;
}

.lightbox-chart .lightbox-chart__svg {
  cursor: zoom-in;
  border-radius: 2px;
}

.lightbox-chart .lightbox-chart__svg:focus { outline: none; }
.lightbox-chart .lightbox-chart__svg:focus-visible {
  outline: 2px solid var(--color-cobalt, #2563eb);
  outline-offset: 4px;
}

/* Expand icon: four corner arrows on a small light tile. pointer-events: none
   lets the click land on the svg underneath. Compact charts centre a svg of
   at most 520px, so the icon follows the svg's right edge, not the figure's. */
.lightbox-chart::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 2px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lightbox-chart.chart--compact::after {
  right: max(0.4rem, calc((100% - 520px) / 2 + 0.4rem));
}

@media (hover: hover) {
  .lightbox-chart:hover::after { opacity: 1; }
}

@media (hover: none) {
  .lightbox-chart::after { opacity: 0.6; }
}

.lightbox-chart:focus-within::after { opacity: 1; }

/* ---------- Viewer ---------- */

dialog.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0b1220;
  color: #ffffff;
  overflow: hidden;
}

dialog.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

dialog.lightbox::backdrop {
  background: #0b1220;
}

.lightbox * { box-sizing: border-box; }

.lightbox [hidden] { display: none !important; }

.lightbox .lightbox__stage {
  grid-row: 1;
  display: flex;
  min-height: 0;
  padding: 4rem 5rem 1rem;
  overflow: auto;
  overscroll-behavior: contain;
}

/* margin: auto centres the item and, unlike justify-content, keeps the
   left and top of a zoomed item reachable by scrolling. */
.lightbox .lightbox__img {
  display: block;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: default;
}

.lightbox.is-zoomable .lightbox__img { cursor: zoom-in; }

.lightbox.is-zoomed .lightbox__img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

/* Chart panel: the article ground and ink, so the chart's own colours read
   as designed. The script sizes the svg, the panel only pads it. */
.lightbox .lightbox__chart {
  flex: none;
  margin: auto;
  padding: 1.25rem;
  background: #ffffff;
  color: var(--color-ink, #0f172a);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: default;
}

.lightbox .lightbox__chart svg {
  display: block;
  max-width: none;
  max-height: none;
}

.lightbox.is-zoomable .lightbox__chart { cursor: zoom-in; }
.lightbox.is-zoomed .lightbox__chart { cursor: zoom-out; }

/* Caption bar */
.lightbox .lightbox__bar {
  grid-row: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.25rem;
  max-height: 34vh;
  padding: 0.75rem 1.5rem 1.1rem;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox .lightbox__caption {
  max-width: 52rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.lightbox .lightbox__date {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.lightbox .lightbox__counter {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* Buttons */
.lightbox .lightbox__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  background: #182235;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lightbox .lightbox__btn:hover {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
}

.lightbox .lightbox__btn:focus { outline: none; }
.lightbox .lightbox__btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.lightbox .lightbox__btn span { display: block; margin-top: -0.12em; }

.lightbox .lightbox__close {
  top: 0.75rem;
  right: 0.75rem;
}

.lightbox .lightbox__prev,
.lightbox .lightbox__next {
  top: calc(50% - 22px - 2rem);
  font-size: 2.25rem;
}

.lightbox .lightbox__prev { left: 1rem; }
.lightbox .lightbox__next { right: 1rem; }

/* Phones: the item takes the full width, so the arrows move to the top bar
   next to each other (opposite the close button) instead of covering the
   item edges. The caption bar stacks the counter above the text. */
@media (max-width: 767px) {
  .lightbox .lightbox__stage {
    padding: 3.75rem 0.5rem 0.75rem;
  }

  .lightbox .lightbox__chart { padding: 0.5rem; }

  .lightbox .lightbox__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.65rem 1rem 0.9rem;
  }

  .lightbox .lightbox__counter { order: -1; }

  .lightbox .lightbox__caption { font-size: 0.8125rem; }

  .lightbox .lightbox__close {
    top: 0.5rem;
    right: 0.5rem;
  }

  .lightbox .lightbox__prev,
  .lightbox .lightbox__next {
    top: 0.5rem;
  }

  .lightbox .lightbox__prev { left: 0.5rem; }
  .lightbox .lightbox__next { right: auto; left: calc(0.5rem + 44px + 0.5rem); }
}

@media (prefers-reduced-motion: no-preference) {
  dialog.lightbox[open] {
    animation: lightbox-fade 0.16s ease-out;
  }

  @keyframes lightbox-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

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