/* home306: append after the retained ui300/ui301 styles. Desktop stays hidden. */
@media (max-width: 680px) {
  .gx .book-bottom {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .gx .book-bottom > a,
  .gx .book-bottom > button {
    min-width: 44px;
    min-height: 64px;
    width: 100%;
    margin: 0;
    white-space: nowrap;
    padding-inline: 2px;
    color: var(--muted, #6F695C);
    transition: background-color .18s ease, color .18s ease;
  }

  .gx .book-bottom > [aria-current="page"] {
    color: var(--ink, #1B1A17);
  }

  .gx .book-bottom > a:active,
  .gx .book-bottom > button:active {
    background-color: var(--paper-light, #FBF8F2);
    color: var(--ink, #1B1A17);
  }

  .gx .book-bottom > a:focus-visible,
  .gx .book-bottom > button:focus-visible {
    outline: 2px solid var(--accent-ink, #50563A);
    outline-offset: -4px;
  }
}

@media (max-width: 680px) and (hover: hover) {
  .gx .book-bottom > a:hover,
  .gx .book-bottom > button:hover {
    background-color: var(--paper-light, #FBF8F2);
    color: var(--ink, #1B1A17);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gx .book-bottom > a,
  .gx .book-bottom > button {
    transition: none;
  }
}