/* Shared design-system primitives (icon buttons + toolbars). Global, not Razor-CSS-isolated,
   because IconButton is a reusable component whose own markup lives outside whatever page
   composes it — see docs/design/storytime-ui-refinement.md § "Icon buttons & toolbars". */

.action-toolbar,
.band-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.icon-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 2px solid var(--surface-border-strong);
  color: var(--text-primary);
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, box-shadow .12s ease, filter .12s ease;
  flex-shrink: 0;
}

.icon-btn:hover:not(:disabled),
.icon-btn:focus-visible {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(32, 230, 215, 0.18);
}

.icon-btn--reroll:hover:not(:disabled) {
  border-color: var(--accent-magenta);
  color: var(--accent-magenta);
  box-shadow: 0 0 0 3px rgba(255, 46, 154, 0.18);
}

.icon-btn--image:hover:not(:disabled) {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.icon-btn--primary {
  border-radius: 999px;
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0 20px;
}

.icon-btn--primary:hover:not(:disabled),
.icon-btn--primary:focus-visible {
  filter: brightness(1.08);
  border-color: var(--accent-gold);
  color: var(--on-accent);
  box-shadow: 0 0 0 4px rgba(255, 201, 60, 0.22);
}

.icon-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* A toggle-state icon button (IconButton's Selected parameter) — used by the Storytime
   board's regenerate-selection toggles (both text and image). Distinct border color plus a
   matching background highlight, layered on top of whatever Variant the button also has. */
.icon-btn.is-selected {
  border-color: var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 24%, var(--surface-2));
  color: var(--accent-gold);
}

.icon-btn.is-selected:hover:not(:disabled),
.icon-btn.is-selected:focus-visible {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.28);
}

.icon-btn-label {
  font-family: var(--font-ui);
}

/* Mirrors a directional glyph horizontally so an existing icon can stand in for its opposite
   (e.g. nf-skip-next reused for Back) without expanding the trimmed NerdFont subset. */
.icon-flip {
  display: inline-block;
  transform: scaleX(-1);
}

.icon-btn.is-busy .nf {
  animation: icon-btn-spin 0.8s linear infinite;
}

@keyframes icon-btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animated "this is generating" placeholder for an image slot with a request in flight —
   a slow shifting/pulsing gradient wash, not a static empty box, so it reads as active rather
   than broken/missing. Shared primitive (portrait slots, the shared backdrop, band thumbs). */
@keyframes loading-shimmer-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.loading-shimmer {
  background-image: linear-gradient(120deg,
    var(--surface-2) 0%,
    var(--surface-3) 22%,
    color-mix(in srgb, var(--accent-magenta) 35%, var(--surface-3)) 42%,
    var(--surface-3) 62%,
    var(--surface-2) 100%);
  background-size: 240% 100%;
  animation: loading-shimmer-sweep 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loading-shimmer {
    animation: none;
    background-position: 50% 50%;
  }
}