/* The controls are a separate grid row, outside the scrolling form. */
#book-modal.modal { z-index: 300; }
.toast { z-index: 500; }
#book-modal .book-modal {
  height: min(900px, 92vh);
  height: min(900px, 92dvh);
  grid-template-rows: auto minmax(0, 1fr);
}
.book-modal-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #b392df38;
  background: #111523;
  color: #b6c0d7;
  font-size: 13px;
}
.book-modal-tools { display: flex; align-items: center; gap: 10px; }
.book-modal-toolbar button { min-height: 44px; cursor: pointer; }
.book-modal-toolbar .primary {
  padding: 10px 18px;
  border: 1px solid #d8b1ff;
  border-radius: 13px;
  background: linear-gradient(110deg, #a877e9, #d4a4f9);
  color: #1a1027;
  font-size: 14px;
  font-weight: 800;
}
.book-modal-toolbar .close-btn { min-width: 44px; font-size: 26px; line-height: 1; }
.book-modal-toolbar button:focus-visible { outline: 2px solid #dcc1ff; outline-offset: 3px; }
#book-modal .modal-cover, #book-modal .modal-content { min-height: 0; }
#book-modal .modal-content { max-height: none; }
.reading-journal > .journal-help { margin-top: 18px; }

@media (max-width: 1120px) {
  #book-modal .book-modal {
    height: 100%;
    max-height: none;
    grid-template-rows: auto clamp(180px, 34vh, 300px) minmax(0, 1fr);
    grid-template-rows: auto clamp(180px, 34dvh, 300px) minmax(0, 1fr);
  }
  .book-modal-toolbar { padding: 8px 10px; }
  #book-modal .modal-content { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-width: 1120px) and (max-height: 550px) {
  #book-modal .book-modal { grid-template-rows: auto 90px minmax(0, 1fr); }
}