#apps[hidden], #apps[hidden] + .section-divider { display: none; }
/* iPhone icon proportions from Figma 3523:1246, adapted to the white page. */
#app-list {
  display: grid;
  grid-template-columns: repeat(var(--app-row-count, 7), minmax(112px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 12px;
  /* Reserve the 1.5px hover stroke inside the scrollport without shifting cards. */
  padding-inline: 2px;
  margin-inline: -2px;
  scroll-padding-inline: 2px;
}
#app-list .card { width: 100%; max-width: 100%; min-width: 0; }
#app-list .card[hidden] { display: none; }
#app-list .card-button:focus-visible { outline-offset: -2px; }
#app-list .card-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 18px;
  text-align: center;
}
#app-list .media {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 26%;
  overflow: hidden;
  clip-path: inset(0 round 26%);
  corner-shape: round;
  isolation: isolate;
  background: #f0f0f2;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);

}
#app-list .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--app-image-zoom, 1)); }
#app-list .media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, rgb(255 255 255 / 23%), transparent 42%, rgb(255 255 255 / 5%) 70%, rgb(255 255 255 / 18%));
}
#app-list .media::after {
  z-index: 2;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 65%), inset 1px 0 1px rgb(255 255 255 / 20%), inset 0 -1px 1px rgb(0 0 0 / 16%);
}
#app-list .app-caption { display: block; width: 100%; margin-top: 5px; text-align: left; }
#app-list .title {
  font-family: AppstarInter, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
#app-list .card-button:is(:hover, :focus-visible) .media {
  transform: none;
}
#app-list .card-button:active .media { transform: none; }
/* Only the reflected light moves; the card, icon and artwork remain still. */
#app-list .media::after {
  background-image: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / 5%) 43%, rgb(255 255 255 / 35%) 49%, rgb(255 255 255 / 8%) 55%, transparent 63%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
#app-list .card-button:is(:hover, :focus-visible) .media::after {
  animation: app-glass-sheen 850ms ease-out forwards;
}
@keyframes app-glass-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app-list .card-button:is(:hover, :focus-visible) .media::after {
    animation: none;
    background-position: 50% 0;
  }
}