/* The full-size picture viewer (ui/lightbox.js). Its own file for the same
   reason tags.css and cut.css are: it is reached from more than one screen
   and the shell should not carry a component's look inline. */
.modal.lbModal{z-index:98;padding:18px}
.lbSheet{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(96vw,1800px);
  height:min(94vh,1400px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.lbTop{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 14px;
  border-bottom:1px solid var(--line);font-size:12.5px;min-width:0}
.lbTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lbCount,.lbSize{font:11px ui-monospace,monospace;color:var(--faint);white-space:nowrap}
.lbTop button,.lbTop a{font-size:11.5px;padding:4px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg2);color:var(--dim);text-decoration:none;cursor:pointer;
  line-height:1.4}
.lbTop button:hover,.lbTop a:hover{border-color:var(--line2);color:var(--ink)}
.lbSheet.actual .lbFit{color:var(--amber);border-color:rgba(255,171,61,.5)}
/* The picture sits on near-black, not on the surface colour, so its own
   edges are visible and a dark wardrobe study does not melt into the sheet. */
.lbStage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;min-height:0;background:#08090b}
.lbScroll{overflow:auto;height:100%;width:100%;display:grid;place-items:center}
.lbImg{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:zoom-in;
  user-select:none}
/* Actual pixels: the constraints come off and the stage scrolls. Items start
   at the top left so a picture wider than the window is reached by scrolling
   rather than centred with its edges cut off on both sides. */
.lbSheet.actual .lbImg{max-width:none;max-height:none;cursor:zoom-out}
.lbSheet.actual .lbScroll{place-items:start}
.lbPrev,.lbNext{width:40px;height:100%;border:0;background:transparent;color:var(--dim);
  font-size:34px;line-height:1;cursor:pointer;transition:.18s var(--ease)}
.lbPrev:hover,.lbNext:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.lbPrev[hidden],.lbNext[hidden]{display:none}
.lbCaption{padding:8px 14px;font-size:12px;line-height:1.5;color:var(--dim);
  border-top:1px solid var(--line)}
.lbCaption[hidden]{display:none}