/* bijlagen.css -- the attachment viewer (bijlagen.js): a strip of thumbnails and a lightbox. Tokens from core.css. */

.bj-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.bj-cell { display: flex; flex-direction: column; width: 112px; gap: 2px; }
.bj-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); font: inherit; color: var(--text); text-align: left; cursor: pointer; min-height: 44px; }
.bj-open:hover { background: var(--hover); }
.bj-open:focus-visible, .bj-dl:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.bj-th { position: relative; display: flex; align-items: center; justify-content: center; height: 72px; overflow: hidden; background: var(--hover); border-radius: var(--radius-sm); }
.bj-thimg { max-width: 100%; max-height: 100%; object-fit: contain; }
.bj-ico { font-size: calc(var(--ui-fs) * 14 / 13); font-weight: 600; color: var(--text-dim); letter-spacing: .04em; }
.bj-pages { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; background: var(--surface); border-radius: 3px; font-size: calc(var(--ui-fs) * 10 / 13); color: var(--text-dim); }
.bj-play { position: absolute; inset: auto 2px 2px auto; padding: 0 4px; background: var(--surface); border-radius: 3px; font-size: calc(var(--ui-fs) * 10 / 13); }
.bj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--ui-fs) * 12 / 13); }
.bj-meta { font-size: calc(var(--ui-fs) * 11 / 13); color: var(--text-muted); }
.bj-dl { font-size: calc(var(--ui-fs) * 11 / 13); color: var(--text-dim); padding: 4px 2px; min-height: 20px; }

html.bj-lock { overflow: hidden; }
.bj-lb { position: fixed; inset: 3vh 3vw; z-index: 4000; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.bj-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.bj-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; color: var(--text-strong); }
.bj-count { color: var(--text-muted); font-size: calc(var(--ui-fs) * 12 / 13); }
.bj-sp { flex: 1; }
.bj-back { display: none; }
.bj-x { background: none; border: 0; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.bj-x:hover { background: var(--hover); color: var(--text); }
.bj-z, .bj-tab, .bj-back { min-height: 32px; }
.bj-dllink { padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; min-height: 20px; }
.bj-main { position: relative; flex: 1; display: flex; min-height: 0; }
.bj-view { flex: 1; min-width: 0; min-height: 0; display: flex; }
.bj-nav { width: 40px; flex: none; background: none; border: 0; color: var(--text-dim); font-size: 28px; cursor: pointer; }
.bj-nav:hover { background: var(--hover); color: var(--text); }
.bj-body { flex: 1; min-width: 0; min-height: 0; overflow: auto; display: flex; padding: 8px; box-sizing: border-box; }
.bj-frame { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.bj-body > .bj-frame, .bj-b-pdf, .bj-b-html { padding: 0; }
.bj-imgscroll { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.bj-imgscroll.bj-zoomed { display: block; }
.bj-imgscroll.bj-tall { display: block; }
.bj-imgscroll.bj-tall .bj-img { max-height: none; width: 100%; height: auto; }
.bj-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bj-media { max-width: 100%; max-height: 100%; margin: auto; }
.bj-note { color: var(--text-muted); margin: auto; text-align: center; padding: 12px; }
.bj-code { flex: 1; font-family: var(--mono, monospace); font-size: calc(var(--ui-fs) * 12 / 13); line-height: 1.5; min-width: 0; align-self: flex-start; width: 100%; }
.bj-line { display: flex; gap: 12px; }
.bj-no { flex: none; min-width: 3.5em; text-align: right; color: var(--text-muted); user-select: none; }
.bj-tx { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.bj-tablebox { flex: 1; overflow: auto; align-self: flex-start; width: 100%; }
.bj-table { border-collapse: collapse; font-size: calc(var(--ui-fs) * 12 / 13); }
.bj-table th, .bj-table td { border: 1px solid var(--rule); padding: 3px 8px; text-align: left; vertical-align: top; }
.bj-table th { background: var(--hover); position: sticky; top: 0; }
.bj-md { flex: 1; max-width: 75ch; margin: 0 auto; line-height: 1.55; overflow-wrap: anywhere; align-self: flex-start; }
.bj-md pre { overflow: auto; background: var(--hover); padding: 8px; border-radius: var(--radius-sm); }
.bj-md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--rule); color: var(--text-dim); }
.bj-card { margin: auto; max-width: 480px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.bj-shot { max-width: 100%; border-radius: var(--radius-sm); margin-bottom: 8px; }
.bj-url { color: var(--text-dim); overflow-wrap: anywhere; }
.bj-screen { height: 100%; display: flex; }

/* the phone: full screen, with a Back button */
@media (max-width: 700px) {
  .bj-lb { inset: 0; border: 0; border-radius: 0; }
  .bj-back { display: inline-block; }
  .bj-x { display: none; }
  .bj-title { max-width: 55vw; }
  .bj-nav { width: 32px; }
  .bj-cell { width: calc(50% - 4px); }
  .bj-open { min-height: 48px; }
}