/* Reader toolbar. */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--toolbar-height);
  padding-inline: var(--space-3);
  background: var(--color-paper-raised);
  border-block-end: var(--border-hair) solid var(--color-rule);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: var(--leading-ui);
}

.toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.toolbar__group--nav {
  margin-inline: auto;
}

.toolbar__zoom {
  min-inline-size: 3.5em;
  color: var(--color-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.page-jump__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.page-jump__input {
  inline-size: 4.25em;
  block-size: 2.25rem;
  padding-inline: var(--space-2);
  border: var(--border-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.page-jump__input::-webkit-inner-spin-button,
.page-jump__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page-jump__input:focus-visible {
  border-color: var(--color-accent);
}

@media (max-width: 40em) {
  .toolbar {
    gap: var(--space-1);
    padding-inline: var(--space-2);
  }
  /* Phones zoom with pinch; keep the bar to navigation. */
  .toolbar__group--zoom {
    display: none;
  }
}