/* Correzione visuale dell'indice alfabetico.
   La cornice deve rimanere completa su mobile, tablet e desktop; solo il comportamento
   di scroll/orientamento resta demandato ai breakpoint già esistenti. */

.library-alphabet {
  isolation: isolate;
  border: 3px solid var(--ink) !important;
  border-radius: 20px !important;
  background: var(--paper) !important;
  background-clip: padding-box;
  box-shadow: 5px 5px 0 var(--ink) !important;

  /* Rinforza il bordo sul piano superiore rispetto al contenuto scrollabile.
     Evita che top/left risultino visivamente tagliati fuori dal breakpoint mobile. */
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

@media (max-width: 650px) {
  .library-alphabet {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px 13px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Lascia sempre un piccolo respiro dopo l'ultima lettera durante lo scroll. */
  .library-alphabet::after {
    content: '';
    flex: 0 0 2px;
    width: 2px;
    height: 1px;
  }

  .library-alphabet button {
    flex-shrink: 0 !important;
  }
}