/* CLAUDE 10-12 (Transitions v2): Transitions > Cuts, the library (panels.js transitionTiles). The search, the category
   tabs, the Favorites filter and the empty state are the Effects panel's classes (fxlib.css: .cc-fx-bar, .cc-fx-tabs,
   .cc-fx-empty); this file adds what is the tiles' own: hidden tiles, the New badge, the skeleton, the focus ring. */
.cc-trlib {
  margin-bottom: 10px;
}
.cc-trlib .cc-transition-grid {
  margin-bottom: 0;
}
.cc-trlib > .hint {
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-label);
}
/* scroll-snap puts a tab at the very edge of the strip, under its fade: keep a margin (the first tab was cut at the left) */
.cc-trlib .cc-fx-tab {
  scroll-margin-inline: 14px;
}
/* the panel hides the tiles of the other tabs (a rule with a class beats the browser's [hidden]) */
.cc-transition-grid button[hidden] {
  display: none !important;
}
.cc-transition-grid button[data-transition]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* a New badge on the picture's bottom left (the favorite star has the top left, the Premium pill the top right). The
   picture is 16:9 of the tile's width, hence the container unit; 38px is the fallback where it is not supported. */
.cc-transition-grid button[data-transition] {
  position: relative;
  container-type: inline-size;
}
.cc-transition-grid button[data-new]::before {
  content: 'New';
  position: absolute;
  z-index: 2;
  left: 4px;
  top: 38px;
  top: calc(56.25cqw - 20px);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(14, 14, 16, 0.78); /* Graphite: a quiet label, not a hot-pink badge */
  color: var(--c-fg);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  pointer-events: none;
}
/* the skeleton: the picture slots pulse until the tiles' live pictures (tileprev.js) are drawn; an opacity pulse is
   composited and costs the main thread nothing (as the Effects tiles) */
.cc-transition-grid.tr-loading button > span[aria-hidden],
.cc-transition-grid button.tp-on:not(.tp-ready) img.tp-cast {
  background: var(--c-raised);
  color: transparent;
  animation: fxlib-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cc-transition-grid.tr-loading button > span[aria-hidden],
  .cc-transition-grid button.tp-on:not(.tp-ready) img.tp-cast {
    animation: none;
  }
}
/* the phone's sheets and any touch screen: tiles are at least 44 px tall (the picture alone is ~40 at 4 across) */
body.pe-on .cc-transition-grid button[data-transition] {
  min-height: 44px;
}
@media (pointer: coarse) {
  .cc-transition-grid button[data-transition] {
    min-height: 44px;
  }
}