/* Legend and skin pages: /renders/<legend>/ and /renders/<legend>/<skin>/.
 *
 * These pages are the second and third steps of the renders flow, so they load
 * css/renders.css and reuse the archive's components as they are:
 *
 *   skin cards     .render-card.skin-catalogue-card in .skins-catalogue-grid
 *   skins panel    .selected-legend-section with its "Step 2" header
 *   search         .selected-legend-search-wrap
 *   buttons        .btn inside .render-download (the archive's flat buttons)
 *   step labels    .renders-section-eyebrow
 *   class icons    .legend-class-icon
 *   placeholders   [data-thumb-status]:not(img)
 *
 * This file only lays out what is new to these pages (the stage, the pose
 * picker, the legend hero) and takes its values from base.css and the
 * renders.css button tokens (--orange, --ink, --line-2, --r-sm) rather than
 * inventing new ones. Where a value is copied from an archive component, the
 * comment names it, so the two can be changed together.
 */

.catalogue-page {
  padding: 104px 0 0;
  min-height: 70vh;
  /* The archive hero's warm glow, at the top of the page. */
  background:
    radial-gradient(ellipse 70% 420px at 50% -80px, rgba(255, 107, 53, 0.1), transparent 70%),
    var(--bg-primary);
}

/* Same width and gutters as the archive's .container. */
.catalogue-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg) var(--spacing-3xl);
}

/* --- Breadcrumb ------------------------------------------------------- */

.cat-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.cat-crumbs li + li::before {
  content: '/';
  margin-right: 10px;
  color: var(--text-muted);
}
.cat-crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}
.cat-crumbs a:hover,
.cat-crumbs a:focus-visible {
  color: var(--ink);
}
.cat-crumbs [aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.catalogue-page a:focus-visible,
.catalogue-page button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Skin cards are links here; the archive's cards were buttons. */
a.skin-catalogue-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.skin-catalogue-card[hidden] {
  display: none;
}

/* --- Skin page: stage + panel ----------------------------------------- */

.skin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 40px;
  align-items: start;
}

/* Panel surface and radius from the archive's .selected-legend-section, with
   an orange floor glow for the render to stand on. */
.skin-stage {
  position: relative;
  height: clamp(480px, calc(100vh - 170px), 800px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(ellipse 60% 22% at 50% 96%, rgba(255, 107, 53, 0.3), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 107, 53, 0.07), transparent 75%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.82), rgba(10, 10, 10, 0.94));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
/* The legend's name, outlined, behind the render. Sized from the stage width
   and the name's length (--legend-mark-length, set in the markup) so long
   names like Bangalore fit edge to edge instead of being cropped. */
.skin-stage::before {
  content: var(--legend-mark, '');
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-weight: 900;
  font-size: min(15rem, calc(90cqw / (var(--legend-mark-length, 6) * 0.86)));
  line-height: 0.85;
  /* Spaced so neighbouring letters never touch: where they overlap, one
     letter's fill would cut into the next one's outline. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  /* A clean outline. The display font's letters are built from overlapping
     shapes, so a plain stroke traces every hidden seam (the crossings inside
     W, R and A, the box in the middle of H). Painting the stroke first and the
     fill on top, in the stage's own colour, covers the inner half of the
     stroke and every seam, leaving only the outside edge. The stroke is twice
     the visible width because half of it is covered. */
  color: #0e0e0e;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.14);
  paint-order: stroke fill;
  pointer-events: none;
}
/* Renders are usually cut off at the waist or knee, so they stand on the
   stage's bottom edge with no gap, and fill its height. */
.skin-stage-frame {
  position: absolute;
  inset: 7% 4% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.skin-stage-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* Loading the original after "View full size": the 720 px copy stays sharp,
   dimmed slightly to say something is happening. */
img.skin-stage-image.is-loading-full {
  opacity: 0.8;
  transition: opacity var(--d-fast) var(--ease);
}
/* No ready thumbnail: renders.css draws the placeholder; give it the stage. */
span.skin-stage-image {
  width: 70%;
  height: 80%;
  border-radius: 18px;
}

/* "View full size": a flat secondary button (renders.css), on the stage. */
.skin-stage-full {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.skin-stage-full:hover,
.skin-stage-full:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}
.skin-stage-full[data-state="loading"] {
  cursor: progress;
  opacity: 0.8;
}

.skin-panel {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.skin-legend-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.skin-legend-link:hover > span:first-of-type {
  color: var(--orange);
}
.skin-legend-class {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--font-size-sm);
}

/* Type scale of the archive's .selected-legend-name. */
.skin-title {
  margin: 14px 0 8px;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.skin-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
}

.skin-poses-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 0 14px;
}
.skin-poses-head .renders-section-eyebrow {
  margin-bottom: 4px;
}
.skin-poses-head h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}
.skin-poses-head > span {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.skin-poses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  max-height: 352px;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

/* A small version of the archive's .render-card. */
.skin-pose {
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
  padding: 6px 6px 9px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.skin-pose:hover {
  border-color: rgba(255, 107, 53, 0.4);
}
.skin-pose[aria-pressed="true"] {
  border-color: var(--orange);
  background: rgba(255, 96, 33, 0.1);
  box-shadow: inset 0 0 0 1px var(--orange);
  color: var(--ink);
}
.skin-pose-image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #0b0b0b;
  overflow: hidden;
}
.skin-pose-image img,
.skin-pose-image [data-thumb-status] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
.skin-pose-name {
  padding: 0 3px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The buttons themselves are styled by renders.css (.render-download .btn). */
.skin-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.skin-file {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.skin-file strong {
  color: var(--ink);
  font-weight: 600;
}

/* Same pill as the archive's class links (.catalogue-class-nav a). */
.skin-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 999px;
  color: #ddd;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.skin-copy-link:hover,
.skin-copy-link:focus-visible {
  border-color: #ff6b35;
  color: #ff976f;
}
.skin-copy-link[data-state="copied"] {
  border-color: #3f8f5f;
  color: #7fd8a2;
}

.skin-status {
  margin: 12px 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.skin-status[data-state="success"] { color: #7fd8a2; }
.skin-status[data-state="error"] { color: #ff8a7a; }

/* --- More skins: the archive's cards, in a row ------------------------ */

.skin-more {
  margin-top: 72px;
}
.skin-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.skin-more-head h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
  letter-spacing: -0.02em;
}
.skin-more-head a {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--orange);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.skin-more-head a:hover {
  text-decoration: underline;
}
.skins-catalogue-grid.skin-more-row {
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: 200px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.skin-more-row .skin-catalogue-card {
  scroll-snap-align: start;
}

/* --- Usage notes ------------------------------------------------------ */

.cat-usage {
  margin-top: 88px;
  padding-top: 36px;
  border-top: 1px solid #292929;
}
.cat-usage h2 {
  margin: 0 0 22px;
  font-size: 1.15rem;
}
.cat-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.cat-usage h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.cat-usage p {
  margin: 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.9rem;
  line-height: var(--line-height-relaxed);
}
.cat-usage a {
  color: var(--orange);
}

/* --- Legend page ------------------------------------------------------ */

.legend-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 32px;
  min-height: 380px;
}
.legend-hero-copy {
  padding-bottom: 36px;
}
.legend-class {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}
/* Type scale of the archive's .renders-title. */
.legend-title {
  margin: 14px 0 12px;
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}
.legend-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 1.08rem;
}
.legend-hero-art {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 340px;
  background: radial-gradient(ellipse 55% 18% at 50% 98%, rgba(255, 107, 53, 0.26), transparent 70%);
}
.legend-hero-image {
  display: block;
  max-height: 420px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom;
}
span.legend-hero-image {
  width: 70%;
  height: 340px;
}
/* The skins panel sits directly under the hero, so the cover render stands
   on its top edge with no gap. */
.legend-skins.selected-legend-section {
  margin-top: 0;
}

/* --- Not found / load error ------------------------------------------- */

.cat-missing {
  max-width: 620px;
  padding: 64px 0 24px;
}
.cat-missing h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.cat-missing p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.64);
  line-height: var(--line-height-relaxed);
}
.cat-missing-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  gap: 8px;
}

/* --- Loading (template only, before the first draw) ------------------- */

.cat-loading {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 40px;
  padding-top: 40px;
}
.cat-loading-stage {
  height: clamp(420px, 70vh, 760px);
  border-radius: 24px;
  background: linear-gradient(90deg, #121212, #1a1a1a, #121212) 0 0 / 200% 100%;
  animation: cat-shimmer 1.4s ease-in-out infinite;
}
.cat-loading-lines {
  display: grid;
  align-content: start;
  gap: 14px;
}
.cat-loading-lines span {
  height: 22px;
  border-radius: 6px;
  background: #161616;
}
.cat-loading-lines span:first-child {
  width: 70%;
  height: 52px;
}
@keyframes cat-shimmer {
  to { background-position: -200% 0; }
}

/* --- Responsive (breakpoints match renders.css) ----------------------- */

@media (max-width: 960px) {
  .catalogue-page {
    padding-top: 88px;
  }
  .catalogue-container {
    padding: 0 18px var(--spacing-2xl);
  }
  .skin-hero,
  .cat-loading {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .skin-stage {
    height: clamp(300px, 52vh, 560px);
  }
  .skin-panel {
    position: static;
  }
  /* The picker becomes a swipeable rail, like the archive's phone layouts. */
  .skin-poses {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 96px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }
  .skin-pose {
    scroll-snap-align: start;
  }
  .legend-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 0;
  }
  .legend-hero-art {
    order: -1;
    min-height: 240px;
  }
  .legend-hero-image {
    max-height: 280px;
  }
  .legend-hero-copy {
    padding-bottom: 28px;
  }
  .cat-usage-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Phones on their side: stage and panel side by side, so the picker and
   downloads are on screen with the render instead of below a full-height stage. */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 560px) {
  .skin-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }
  .skin-stage {
    height: calc(100vh - 150px);
    min-height: 220px;
  }
  .skin-title {
    margin-top: 8px;
    font-size: 1.9rem;
  }
  .skin-poses-head {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .catalogue-container {
    padding: 0 16px var(--spacing-2xl);
  }
  .skins-catalogue-grid.skin-more-row {
    grid-template-columns: none;
    grid-auto-columns: 150px;
  }
  .skin-stage {
    border-radius: 20px;
  }
  .skin-more {
    margin-top: 52px;
  }
  .skin-more-head h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .skin-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Event collections (/renders/halloween): the legend page's hero and grid;
   each card names its legend. */
.collection-description {
  margin: 0.5rem 0 0;
  max-width: 34rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.72));
  line-height: 1.55;
}
.skin-catalogue-card .render-card-legend { margin: 0 0 0.15rem; }