/* Luxwork: full-size specimen viewer. Loaded after /styles.css and /guides.css,
   and uses their tokens only. No web fonts, no third-party requests.

   A CSS :target overlay. "Open it full size", and the figure itself, link to
   #view-…; the viewer's Close links back to the caption it was opened from (#cap-…). That works with scripts off, and the
   phone's own Back also closes it. /js/figure-viewer.js adds Escape, moves focus
   in and back, and makes Close step back in history rather than add an entry. */

.viewer { display: none; }

/* The figure opens the viewer too, so a phone reader can tap the image rather
   than the caption's short text link. .shot-open is a link laid over the image,
   not wrapped round it, so the image keeps its alt text for screen readers and
   the link gets its own name ("Open the specimen …, full size"), which differs
   from the caption link's. It carries .viewer-open, so /js/figure-viewer.js
   returns focus to it on Close. The badge is only a hint; the whole image is
   the target. */
.shot-media { position: relative; }
.shot-open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--s-3);
  border-radius: 10px;
  color: var(--color-text);
  text-decoration: none;
  cursor: zoom-in;
}
.shot-open:hover { color: var(--color-text); }
/* The plan's note runs the full width of its foot, so its badge sits top right,
   where the specimen is blank. */
.shot-open-top { align-items: flex-start; }
.shot-open:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.shot-open-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.84);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.shot-open-badge svg { flex: none; width: 15px; height: 15px; }
.shot-open:hover .shot-open-badge,
.shot-open:focus-visible .shot-open-badge {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .shot-open-badge { transition: background-color 0.15s ease, color 0.15s ease; }
}
@media print { .shot-open-badge { display: none; } }

.viewer:target {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-bg);
}

/* While a viewer is open, the page behind it neither scrolls nor takes focus.
   visibility:hidden also takes it out of the accessibility tree. Browsers
   without :has() still get an opaque overlay; the page behind stays reachable. */
html:has(.viewer:target) { overflow: hidden; }
body:has(> .viewer:target) > :not(.viewer) { visibility: hidden; }

.viewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.viewer-title {
  margin: 0;
  min-width: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text);
}

.viewer-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.viewer-close:hover { background: var(--color-primary-muted); color: var(--color-on-primary); }
.viewer-close:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.viewer-x { font-size: 15px; }

/* The image at its own pixel size, never wider than the screen. The body
   scrolls; pinch zoom is left alone (the viewport meta does not block it). */
.viewer-body {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5) var(--s-6);
}
.viewer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3);
}
.viewer-tools .shot-tag { margin: 0; }

/* "Actual size": a plain checkbox, so it needs no script. Ticked, the image
   shows at twice the phone's fit width and pans inside .viewer-body, and
   Close stays pinned at the top. (Pinch zoom also works, but Close is then
   off screen until the reader pinches out.) */
.viewer-zoom-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.viewer-zoom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.viewer-zoom::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-text-muted);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-on-primary);
}
.viewer-zoom-toggle:checked ~ .viewer-tools .viewer-zoom { border-color: var(--color-primary); }
.viewer-zoom-toggle:checked ~ .viewer-tools .viewer-zoom::before {
  content: "\2713";
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.viewer-zoom-toggle:focus-visible ~ .viewer-tools .viewer-zoom {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}
.viewer-zoom-toggle:checked ~ img {
  max-width: none;
  width: 880px;
  margin: 0;
}
@media (min-width: 900px) {
  .viewer-zoom-toggle:checked ~ img { width: auto; }
}
.viewer-body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  background: #fff;
}
.viewer-hint {
  margin: var(--s-3) auto 0;
  max-width: 80ch;
  font-size: 14px;
  color: var(--color-text-subtle);
  text-align: center;
}

@media (max-width: 640px) {
  .shot-open { padding: var(--s-2); }
  .shot-open-badge { min-height: 28px; padding: 0 10px 0 8px; font-size: 12px; }
  .shot-open-badge svg { width: 13px; height: 13px; }
  .viewer-bar { padding: 6px 10px 6px var(--s-4); }
  .viewer-title { font-size: 14px; }
  .viewer-close { padding: 0 var(--s-4); }
  .viewer-body { padding: var(--s-3) 10px var(--s-5); }
}

/* /specimen-report.html: the specimen's pages as images, with our own Back
   and Download controls, so no reader ever lands on a bare PDF or image with
   nothing to press. The bar at the foot of <main> is sticky, so both
   controls stay on screen all the way down the pages. */

.doc-actions { margin: 0 0 var(--s-5); }

.doc-back,
.doc-download {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.doc-back { background: var(--color-primary); color: var(--color-on-primary); }
.doc-back:hover { background: var(--color-primary-muted); color: var(--color-on-primary); }
.doc-download {
  border: 1px solid var(--color-edge);
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.doc-download:hover { border-color: var(--color-primary); color: var(--color-text); }
.doc-size { font-weight: 400; color: var(--color-text-subtle); }
.doc-back:focus-visible,
.doc-download:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

.doc-hero .shot-tag { margin-top: var(--s-2); }

ol.doc-pages {
  list-style: none;
  margin: 0;
  padding: 0;
}
ol.doc-pages > li { margin: 0 0 var(--s-6); }

figure.doc-page { margin: 0; }
figure.doc-page img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 40px rgba(0, 0, 0, 0.35);
}
figure.doc-page figcaption {
  margin-top: var(--s-2);
  font-size: 14px;
  color: var(--color-text-subtle);
  text-align: center;
}

.doc-bar {
  position: sticky;
  bottom: 0;
  z-index: 9;
  margin-top: var(--s-6);
  border-top: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.doc-bar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--s-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.doc-bar-inner a { white-space: nowrap; }

@media (max-width: 640px) {
  .doc-bar-inner { padding: 8px 12px; gap: 8px; }
  .doc-bar-inner a { flex: 0 1 auto; justify-content: center; padding: 0 10px; font-size: 14px; gap: 6px; }
  .doc-bar-inner .doc-size { font-size: 13px; }
}