/* ghostprint — lightbox.css
   the full view of a print's image, opened by /js/lightbox.js. it is the
   black ground in either print: it reads the fixed references (--ink,
   --paper), never the state, so a frame is always judged against black.
   no radius, no shadow, no transition. */

/* the images that open: the cursor says so, and focus is the house ring */
.sheet .body img.lb-can { cursor: zoom-in; }

/* the page under the view holds still while it is open */
html.lb-open { overflow: hidden; }

dialog.lb {
  --lb-fg: var(--paper);
  --lb-dim: rgba(255, 255, 255, 0.62);
  --lb-rule: rgba(255, 255, 255, 0.20);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--lb-fg);
  cursor: zoom-out;
  overscroll-behavior: contain;
}
dialog.lb[open] {
  display: flex;
  flex-direction: column;
}
dialog.lb::backdrop { background: var(--ink); }

/* the close control: a mono slug in the top corner, the one thing in here
   with a name a keyboard can reach */
.lb-x {
  align-self: flex-end;
  flex: none;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: var(--lb-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: lowercase;
  cursor: pointer;
}
.lb-x:hover { color: var(--acc); }
.lb-x:focus-visible { outline: 2px solid var(--acc); outline-offset: -4px; }

/* the frame takes what is left of the viewport and centres in it. the image
   sits at its own pixel size and only ever shrinks to fit; the grid column is
   as wide as the image, and the caption takes that width and no more, so its
   left edge is the frame's. */
.lb-fig {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  align-content: center;
  gap: 12px;
}
.lb-img {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: calc(100vw - 32px);
  /* the close bar and up to four lines of caption stay on screen */
  max-height: calc(100vh - 10rem);
  max-height: calc(100dvh - 10rem);
  object-fit: contain;
  background: var(--ink);
}
.lb-cap {
  width: 0;
  min-width: 100%;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--lb-fg);
}
.lb-no { color: var(--acc); }