/* v0.8.21 · correzione sovrapposizione barra sticky su smartphone */

@media (max-width: 640px) {
  /*
    La barra compatta resta sticky, ma ora vive sopra uno "schermo" opaco
    a tutta larghezza. In questo modo le schede che scorrono sotto la barra
    non sono mai visibili attraverso il pannello o attorno ai suoi bordi arrotondati.
  */
  .search-panel.is-scroll-compact {
    background: var(--surface) !important;
    isolation: isolate;
  }

  .search-panel.is-scroll-compact::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -96px;
    bottom: -12px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--bg);
    pointer-events: none;
  }

  .search-panel.is-scroll-compact::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--border) 72%, transparent);
    pointer-events: none;
  }

  /* Mantiene un piccolo respiro stabile tra barra sticky e contenuto. */
  .search-panel.is-scroll-compact + .status-row {
    padding-top: 16px;
  }

  /*
    Offset usato da eventuali focus/jump/scrollIntoView: il contenuto portato
    in vista si ferma sotto la barra, non dietro di essa.
  */
  .status-row,
  .contacts-grid,
  .contact-card {
    scroll-margin-top: calc(var(--rubrica-sticky-panel-height, 60px) + 24px);
  }
}