/* Hallmark · shape: app screen · genre: editorial · theme: brand · redesign: restyle
 * paper: page · accent: brand · display: Montserrat · body: Montserrat
 * nav: kept · signature: cover grid · states: busy focus · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, restyle only chrome under .catalog-alpha */

/* Storage catalog (/fictions/alphabetical) + scanlator works toolbar: control chrome + Turbo busy. */
.catalog-alpha,
.scanlator-works,
#catalog-filters-panel {
  --catalog-control-line: var(--color-line);
  --catalog-radius: 0.375rem;
}

:where(.dark) .catalog-alpha,
:where(.dark) .scanlator-works,
:where(.dark) #catalog-filters-panel {
  --catalog-control-line: var(--color-line-strong);
}

.catalog-alpha .catalog-control,
.scanlator-works .catalog-control {
  border-radius: var(--catalog-radius);
  background: var(--color-main);
  box-shadow: inset 0 0 0 1px var(--catalog-control-line);
}

/* Team page sits on a banner wash — let a bit of atmosphere through the chrome. */
.scanlator-works .catalog-control {
  background: color-mix(in oklab, var(--color-main) 82%, transparent);
  backdrop-filter: blur(6px);
}

:where(.dark) .scanlator-works .catalog-control {
  background: color-mix(in oklab, var(--color-main) 90%, transparent);
}

.catalog-list-frame[busy] {
  cursor: wait;
}

.catalog-list-frame[busy] .catalog-list-body-content {
  opacity: 0.45;
  transition: opacity 0.12s ease-out;
}

.catalog-list-frame:not([busy]) .catalog-list-body-content {
  opacity: 1;
  animation: catalog-content-enter 0.2s ease-out;
}

.catalog-list-frame[busy] .catalog-frame-spinner {
  display: flex;
}

.catalog-frame-spinner {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@keyframes catalog-content-enter {
  from {
    opacity: 0.65;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-list-frame[busy] .catalog-list-body-content,
  .catalog-list-frame:not([busy]) .catalog-list-body-content {
    animation: none;
    transition: none;
  }
}