/* The school's reader of an Internet Archive book (items/_book, book_controller): the scanned
   pages on the vellum ground, a light toolbar above them, the OCR text beside them on desktop and
   below them on phones. */
.bk {
  display: flex; flex-direction: column; height: min(86vh, 1040px); min-height: 520px;
  background: var(--vellum); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
.bk [hidden] { display: none; }

.bk-assigned {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 9px 14px;
  background: var(--sheet); border-bottom: 1px solid var(--rule); font-family: var(--ui); font-size: .9rem;
}
.bk-assigned .label { margin-right: 4px; color: var(--oranje-ink); }
.bk-range { font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-progress {
  appearance: none; -webkit-appearance: none; width: min(220px, 40vw); height: 6px; border: 0; border-radius: 3px;
  background: var(--saltire-wash); color: var(--saltire); overflow: hidden;
}
.bk-progress::-webkit-progress-bar { background: var(--saltire-wash); border-radius: 3px; }
.bk-progress::-webkit-progress-value { background: var(--saltire); border-radius: 3px; }
.bk-progress::-moz-progress-bar { background: var(--saltire); border-radius: 3px; }
.bk-progress-text { font-variant-numeric: tabular-nums; }

.bk-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px;
  background: var(--sheet); border-bottom: 1px solid var(--rule); font-family: var(--ui); font-size: .86rem;
}
.bk-group { display: flex; align-items: center; gap: 4px; }
.bk-spacer { flex: 1 1 0; }
.bk-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 36px;
  padding: 0 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet);
  color: var(--ink); font: 500 .86rem/1 var(--ui); text-decoration: none; cursor: pointer;
}
.bk-tool:hover { background: var(--saltire-wash); border-color: var(--saltire); color: var(--saltire); }
.bk-tool:disabled { opacity: .4; cursor: default; background: var(--sheet); border-color: var(--rule); color: var(--ink); }
.bk-tool-text { padding: 0 12px; }
.bk-tool[aria-pressed="true"] { background: var(--saltire); border-color: var(--saltire); color: #fff; }
.bk-now { min-width: 10.5em; padding: 0 6px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.bk-go-label { color: var(--muted); }
.bk-go input {
  width: 5.5em; min-height: 36px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--sheet); color: var(--ink); font: .9rem var(--ui);
}
.bk-go-error { color: var(--brick); }
.bk-go-error:empty { display: none; }
.bk-switch { margin-left: auto; color: var(--saltire); white-space: nowrap; padding: 0 4px; }

.bk-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.bk-show-text .bk-body { grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); }
.bk-scroller { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 16px 40px; }
.bk-scroller:focus-visible { outline: 2px solid var(--oranje); outline-offset: -3px; }
/* As wide as its page (wider than the view when zoomed in: the reader scrolls sideways), centred. */
.bk-stream { display: flex; flex-direction: column; align-items: center; gap: 28px; width: max-content; min-width: 100%; }
.bk-page { margin: 0; width: var(--bk-width, 600px); }
.bk-sheet {
  position: relative; overflow: hidden; background: #FBFBF8; border: 1px solid #E2E5DF;
  box-shadow: 0 1px 2px rgba(23, 33, 43, .06), 0 14px 30px -20px rgba(23, 33, 43, .4);
}
.bk-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bk-label { margin-top: 8px; text-align: center; font: .8rem var(--ui); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-page[aria-current="page"] .bk-label { color: var(--ink); }
.bk-noscript { font-family: var(--ui); text-align: center; padding: var(--space-6) var(--space-4); }

.bk-text { min-height: 0; overflow: auto; padding: 18px 22px 24px; background: var(--sheet); border-left: 1px solid var(--rule); }
.bk-text-h { margin: 0 0 var(--space-3); font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.bk-text-body p { margin: 0 0 .85em; font-family: var(--text); font-size: 1rem; line-height: 1.6; max-width: 62ch; overflow-wrap: anywhere; }
.bk-text-note { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.bk-credit { margin-top: var(--space-2); }

.bk:fullscreen { height: 100vh; border: 0; border-radius: 0; }
.bk-full { height: calc(100vh - 56px); height: calc(100dvh - 56px); min-height: 0; border: 0; border-radius: 0; }
.reader-page .bk-credit { display: none; }
.reader-switch { margin-left: auto; font-family: var(--ui); font-size: .86rem; color: var(--saltire); white-space: nowrap; }

@media (max-width: 720px) {
  .bk { height: 82vh; height: 82dvh; min-height: 440px; }
  .bk-full { height: calc(100dvh - 56px); }
  .bk-toolbar { gap: 6px; padding: 6px 8px; }
  .bk-now { min-width: 0; font-size: .8rem; }
  .bk-go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bk-spacer { display: none; }
  .bk-scroller { padding: 10px 8px 32px; }
  .bk-stream { gap: 18px; }
  .bk-show-text .bk-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
  .bk-text { border-left: 0; border-top: 1px solid var(--rule); padding: 14px 16px; }
}