/* ============================================================
   Lightbox — tabbed chrome + tabled label plate
   Added 16 July 2026, deployed. Loaded after style.css so these rules win.
   To drop the whole look: remove the <link> from the pages and restore
   js/lightbox.js from _backup/lightbox-tabs/lightbox.js.deployed.

   Two changes from the shipped viewer:
     - caption, details and operating instructions are gathered into one label
       table under the plate, reading like an archival specimen card, instead
       of a gradient strip of free text
     - the round floating buttons become tabs clipped to the screen edges
   ============================================================ */

/* The head and stage are flex siblings rather than the head overlaying the
   image, so the stage takes exactly the height the label leaves. This is what
   retires the old calc(100vh - 150px) sizing. */
.lb.open { display: flex; flex-direction: column; }

.lb .lb-stage {
  order: 1;               /* plate above, label below */
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;          /* let the flex child actually shrink */
}

.lb .lb-stage img {
  max-width: calc(100% - 48px);
  max-height: calc(100% - 24px);
  /* fitScale() in lightbox.js mirrors these insets — change both together */
}

.lb .lb-frame {
  width: min(1100px, calc(100% - 90px));
  height: calc(100% - 24px);
}

/* ---------------- the label header ---------------- */

/* The label sits UNDER the plate: order puts it after the stage in the column,
   so the gradient and rule flip to face upward. The close tab keeps the top
   edge to itself, which is why the right padding here only has to clear the
   count. */
.lb .lb-head {
  order: 2;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  background: linear-gradient(0deg, rgba(8, 12, 18, .97) 72%, rgba(8, 12, 18, .82));
  border-top: 1px solid rgba(212, 179, 106, .38);
  padding: 12px 104px 12px 20px;
}

.lb .lb-tbl {
  border-collapse: collapse;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  font-family: var(--sans);
  text-align: left;
}

.lb .lb-tbl th {
  width: 88px;
  padding: 4px 14px 4px 0;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  font-weight: normal;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border-right: 1px solid rgba(212, 179, 106, .28);
}

.lb .lb-tbl td {
  padding: 4px 0 4px 14px;
  vertical-align: top;
  color: #e8e2d2;
}

.lb .lb-tbl tr + tr th,
.lb .lb-tbl tr + tr td {
  border-top: 1px solid rgba(242, 234, 214, .09);
}

.lb .lb-head .lb-title {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.4;
}

.lb .lb-head .lb-meta {
  font-size: 11.5px;
  color: #b3ab97;
  letter-spacing: .02em;
}

.lb .lb-head .lb-meta a { color: var(--gold-soft); text-decoration: none; }
.lb .lb-head .lb-meta a:hover { text-decoration: underline; }

.lb .lb-head .lb-zoomhint {
  position: static;          /* was an absolutely placed hint */
  transform: none;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(242, 234, 214, .5);
}

/* Bottom-right of the head: the Controls row's text is short, so the count sits
   in dead space there. Any higher and it lands in the caption's column, which
   runs the full width of the head. */
.lb .lb-head .lb-count {
  position: absolute;
  top: auto;
  bottom: 9px;
  /* style.css pins this to left:24px; leaving that set alongside a right value
     stretches the box back across the label column. */
  left: auto;
  right: 20px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold-soft);
  border: 1px solid rgba(212, 179, 106, .3);
  border-radius: 2px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ---------------- edge tabs ---------------- */

.lb button {
  position: absolute;
  background: rgba(14, 33, 54, .94);
  border: 1px solid rgba(212, 179, 106, .45);
  color: var(--cream);
  border-radius: 0;              /* was a 46px circle */
  width: auto;
  height: auto;
  font-size: 20px;
  line-height: 1;
  z-index: 4;
  transition: background .15s ease, transform .15s ease;
}

.lb button:hover { background: rgba(36, 70, 107, .96); }

.lb .lb-prev,
.lb .lb-next {
  top: 50%;
  width: 34px;
  height: 104px;
  font-size: 26px;
}

.lb .lb-prev {
  left: 0;
  transform: translateY(-50%);
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.lb .lb-next {
  right: 0;
  transform: translateY(-50%);
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

/* the tabs ease out of their edge on hover */
.lb .lb-prev:hover { transform: translateY(-50%) translateX(3px); }
.lb .lb-next:hover { transform: translateY(-50%) translateX(-3px); }

.lb .lb-close {
  top: 0;
  right: 22px;
  width: 64px;
  height: 32px;
  font-size: 15px;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.lb .lb-close:hover { transform: translateY(2px); }

.lb button:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: -4px;
}

/* ---------------- narrow screens ---------------- */

@media (max-width: 640px) {
  /* the close tab is up on the image now, not over the label */
  .lb .lb-head { padding: 9px 12px 9px 12px; }

  /* style.css hides this below 640px — right when it was a floating hint over
     the photo, wrong now that it is a row of the table, which would otherwise
     render as an empty Controls line. */
  .lb .lb-head .lb-zoomhint { display: block; }

  .lb .lb-tbl th {
    width: 62px;
    font-size: 8.5px;
    letter-spacing: .12em;
    padding-right: 9px;
  }

  .lb .lb-tbl td { padding-left: 9px; }
  .lb .lb-head .lb-title { font-size: 13px; }
  .lb .lb-head .lb-meta { font-size: 10.5px; }
  .lb .lb-head .lb-zoomhint { font-size: 9.5px; letter-spacing: .04em; }

  /* no dead space to tuck the count into at this width, so it takes its own
     line, aligned with the value column */
  .lb .lb-head .lb-count {
    position: static;
    display: inline-block;
    margin: 8px 0 0 71px;
  }

  .lb .lb-close { right: 10px; width: 52px; height: 28px; }
  .lb .lb-prev, .lb .lb-next { width: 26px; height: 78px; font-size: 20px; }

  .lb .lb-stage img { max-width: 100%; max-height: 100%; }
  .lb .lb-frame { width: 100%; height: 100%; }
}