[data-language-panel][hidden],
.language-fallback[hidden],
[data-fullscreen-close][hidden] {
  display: none !important;
}

.language-fallback {
  position: fixed;
  inset: auto var(--page-gutter) var(--space-2);
  z-index: 80;
  max-width: 32rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--color-burgundy);
  background: var(--color-white);
  box-shadow: 0 0.75rem 2.5rem rgb(17 17 17 / 18%);
  color: var(--color-black);
  font-size: 0.875rem;
}

.issue-reader__toolbar {
  display: none;
}

.has-js .issue-reader__toolbar {
  display: grid;
  grid-template-columns: 44px minmax(6rem, 1fr) 44px;
  gap: 0.75rem;
  width: min(100%, var(--content-reading));
  margin: 0 auto var(--space-2);
  align-items: center;
}

.issue-reader__toolbar button {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0.65rem;
  border: 1px solid var(--color-black);
  border-radius: 0;
  background: transparent;
  color: var(--color-black);
  font: inherit;
  cursor: pointer;
}

.issue-reader__toolbar button:disabled {
  border-color: var(--color-rule);
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.issue-reader__progress {
  height: 2px;
  overflow: hidden;
  background: var(--color-rule);
}

.issue-reader__progress span {
  display: block;
  width: var(--progress, 16.666%);
  height: 100%;
  background: var(--color-burgundy);
  transition: width 320ms ease;
}

.has-js .issue-reader__fullscreen {
  grid-column: 1 / -1;
  width: fit-content;
  justify-self: end;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.has-js .issue-reader__viewport {
  width: min(100%, var(--content-reading));
  margin-inline: auto;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.has-js .issue-reader__viewport.is-dragging {
  cursor: grabbing;
}

.has-js .issue-reader__sequence {
  --active-index: 0;
  display: flex;
  gap: 0;
  transform: translate3d(calc(var(--active-index) * -100%), 0, 0);
  transition: transform 520ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.has-js .issue-reader__page {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
}

.has-js .issue-reader__page:focus-visible {
  outline-offset: -5px;
}

.issue-reader.is-reading-overlay,
.issue-reader:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: clamp(1rem, 2.5vw, 2.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-black);
  color: var(--color-white);
}

.issue-reader.is-reading-overlay .section-heading,
.issue-reader:fullscreen .section-heading {
  display: none;
}

.issue-reader.is-reading-overlay .issue-reader__toolbar,
.issue-reader:fullscreen .issue-reader__toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-block: 0.5rem;
  background: var(--color-black);
}

.issue-reader.is-reading-overlay .issue-reader__toolbar button,
.issue-reader:fullscreen .issue-reader__toolbar button {
  border-color: #68615c;
  color: var(--color-white);
}

.issue-reader.is-reading-overlay .issue-reader__toolbar button:disabled,
.issue-reader:fullscreen .issue-reader__toolbar button:disabled {
  color: #8b8580;
}

.issue-reader.is-reading-overlay .issue-reader__fullscreen,
.issue-reader:fullscreen .issue-reader__fullscreen {
  display: none;
}

.issue-reader.is-reading-overlay .issue-reader__exit,
.issue-reader:fullscreen .issue-reader__exit {
  display: inline-flex;
  grid-column: 1 / -1;
  width: fit-content;
  justify-self: end;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.issue-reader.is-reading-overlay .issue-reader__viewport,
.issue-reader:fullscreen .issue-reader__viewport {
  width: min(100%, calc((100svh - 8rem) * 0.8));
}

.has-reading-overlay {
  overflow: hidden;
}

@media (min-width: 48rem) {
  .has-js .issue-reader__toolbar {
    grid-template-columns: 44px minmax(10rem, 1fr) 44px auto;
  }

  .has-js .issue-reader__fullscreen,
  .issue-reader.is-reading-overlay .issue-reader__exit,
  .issue-reader:fullscreen .issue-reader__exit {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .issue-reader__sequence,
  .issue-reader__progress span {
    transition: none;
  }
}