/*
 * Chapter reader. Overlay chrome is hidden until data-reading-chrome="visible".
 */

.mgbee-reading-page {
  --mgbee-reading-zoom: 95%;
  background: var(--mgbee-color-bg);
  color: var(--mgbee-color-text);
  min-height: 100vh;
}

.mgbee-reading {
  min-height: 100vh;
}

.mgbee-reading__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mgbee-reading__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mgbee-reading__stage {
  min-height: 100vh;
  background: var(--mgbee-color-reading-paper);
}

.mgbee-reading__pages {
  width: var(--mgbee-reading-zoom);
  max-width: 100%;
  margin-inline: auto;
}

.mgbee-reading__pages .page-break,
.mgbee-reading__pages img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.mgbee-reading[data-gaps="off"] .page-break {
  margin: 0;
}

.mgbee-reading .page-link-hover,
.mgbee-reading #btn_view_full_image {
  display: none;
}

.mgbee-reading-header,
.mgbee-reading-dock {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  color: var(--mgbee-color-text);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.mgbee-reading-header {
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--mgbee-space-3);
  min-height: 3.5rem;
  padding: var(--mgbee-space-2) var(--mgbee-space-4);
  background: var(--mgbee-color-reading-bar);
  transform: translateY(-100%);
}

.mgbee-reading-dock {
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: var(--mgbee-space-2);
  padding: 0 var(--mgbee-space-4) var(--mgbee-space-3);
  transform: translateY(100%);
}

html[data-reading-chrome="visible"] .mgbee-reading-header,
html[data-reading-chrome="visible"] .mgbee-reading-dock {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.mgbee-reading-header a,
.mgbee-reading-header button,
.mgbee-reading-dock a,
.mgbee-reading-dock button {
  color: inherit;
}

.mgbee-reading-header__back,
.mgbee-reading-header__chap,
.mgbee-reading-header__btn,
.mgbee-reading-dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--mgbee-radius);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.mgbee-reading-header__back:focus-visible,
.mgbee-reading-header__chap:focus-visible,
.mgbee-reading-header__btn:focus-visible,
.mgbee-reading-header__select select:focus-visible,
.mgbee-reading-dock__btn:focus-visible,
.mgbee-reading-dock__tick:focus-visible,
.mgbee-reading-panel__close:focus-visible {
  outline: 2px solid var(--mgbee-color-focus);
  outline-offset: 2px;
}

.mgbee-reading-header__chap[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.mgbee-reading-header__identity {
  min-width: 0;
}

.mgbee-reading-header__name {
  display: block;
  overflow: hidden;
  color: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgbee-reading-header__sub {
  margin: 0;
  color: var(--mgbee-color-text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgbee-reading-header__nav,
.mgbee-reading-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mgbee-space-1);
}

.mgbee-reading-header__select {
  display: inline-flex;
  align-items: center;
  gap: var(--mgbee-space-1);
  min-height: 2rem;
  padding: 0 var(--mgbee-space-2) 0 var(--mgbee-space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mgbee-color-reading-paper) 8%, var(--mgbee-color-reading-bar));
  position: relative;
}

.mgbee-reading-header__select select {
  appearance: none;
  max-width: 6.5rem;
  padding: 0 1.25rem 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.mgbee-reading-header__select-icon,
.mgbee-reading-header__select-caret {
  display: inline-flex;
  pointer-events: none;
}

.mgbee-reading-header__select-caret {
  position: absolute;
  right: 0.35rem;
}

.mgbee-reading-header__select svg,
.mgbee-reading-header__back svg,
.mgbee-reading-header__chap svg,
.mgbee-reading-header__btn svg,
.mgbee-reading-dock__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.mgbee-reading-header__badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--mgbee-color-reading-accent);
  color: var(--mgbee-color-reading-paper);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 0.9rem;
  text-align: center;
}

.mgbee-reading-dock__bar {
  display: flex;
  align-items: center;
  gap: var(--mgbee-space-1);
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--mgbee-color-reading-bar);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}

.mgbee-reading-dock__page,
.mgbee-reading-dock__zoom {
  margin: 0;
  min-width: 2.75rem;
  padding: 0 var(--mgbee-space-2);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.mgbee-reading-dock__ticks {
  display: flex;
  width: min(42rem, 100%);
  height: 0.7rem;
  gap: 2px;
  overflow: hidden;
}

.mgbee-reading-dock__tick {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: color-mix(in srgb, var(--mgbee-color-reading-paper) 18%, transparent);
  border-radius: 1px;
}

.mgbee-reading-dock__tick[aria-current="page"] {
  background: var(--mgbee-color-reading-accent);
}

.mgbee-reading-panel {
  position: relative;
  width: min(36rem, calc(100% - 2rem));
  max-height: min(80vh, 40rem);
  padding: var(--mgbee-space-5);
  border: 0;
  border-radius: var(--mgbee-radius-lg);
  background: var(--mgbee-color-bg-elevated);
  color: var(--mgbee-color-text);
}

.mgbee-reading-panel::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.mgbee-reading-panel h2 {
  margin: 0 2.5rem 1rem 0;
  font-size: 1.1rem;
}

.mgbee-reading-panel__close {
  position: absolute;
  top: var(--mgbee-space-4);
  right: var(--mgbee-space-4);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mgbee-reading-panel__row {
  display: flex;
  align-items: center;
  gap: var(--mgbee-space-2);
}

.mgbee-reading-panel__hint {
  margin: var(--mgbee-space-4) 0 0;
  color: var(--mgbee-color-text-muted);
  font-size: 0.85rem;
}

.admin-bar .mgbee-reading-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .mgbee-reading-header {
    top: 46px;
  }
}

@media (max-width: 767px) {
  .mgbee-reading-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back identity actions"
      "nav nav nav";
  }

  .mgbee-reading-header__back {
    grid-area: back;
  }

  .mgbee-reading-header__identity {
    grid-area: identity;
  }

  .mgbee-reading-header__nav {
    grid-area: nav;
    justify-content: flex-end;
  }

  .mgbee-reading-header__actions {
    grid-area: actions;
  }

  .mgbee-reading-header__select select {
    max-width: 8rem;
  }
}