/* Pages slider and a ribbon that stays two icon rows high. */

.ribbon {
  display: grid;
  grid-template-rows: 1.55rem 1.55rem;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  align-content: center;
  gap: 0.18rem 0.28rem;
  max-height: 3.7rem;
  min-height: 3.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0.45rem;
}

.ribbon .tool,
.ribbon .ribbon-note,
.ribbon .file-open {
  min-height: 1.5rem;
  height: 1.5rem;
  padding: 0 0.42rem;
  font-size: 0.72rem;
  line-height: 1.5rem;
}

.ribbon .recent,
.ribbon .font-select {
  min-height: 1.5rem;
  height: 1.5rem;
  font-size: 0.72rem;
  max-width: 9.5rem;
}

.body {
  grid-template-columns: minmax(0, 1fr);
}

.stage-wrap { position: relative; }

.page-slider {
  display: none;
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: #e7e0d4;
  border-right: 1px solid var(--line);
  padding: 0.45rem 0.4rem 0.8rem;
  box-shadow: var(--shadow);
}

.page-slider.is-open { display: block; }

.page-slider .thumb { width: 100%; margin-bottom: 0.4rem; }

@media (max-width: 800px) {
  .body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}