/**
 * Shipped Contributors page (page-templates/page-shipped.php).
 *
 * Honor-roll grid of WPFolks members who shipped each WordPress
 * release. Per-version dropdown drives navigation. Same dark-hero
 * aesthetic as the homepage Shipped Wall, but laid out as a flat
 * directory grid (no galaxy) — this is the utility surface that the
 * homepage block hints at.
 */

.shipped-page {
	padding: 64px 0 80px;
	background:
		radial-gradient( rgba( 255, 255, 255, 0.04 ) 1px, transparent 1px ) 0 0 / 14px 14px,
		linear-gradient( 135deg, #0f172a 0%, #1e293b 100% );
	color: #f1f5f9;
	min-height: 70vh;
	position: relative;
	overflow: hidden;
}
.shipped-page::after {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 360px;
	height: 360px;
	background: radial-gradient( circle, rgba( 33, 69, 230, 0.22 ) 0%, transparent 70% );
	pointer-events: none;
	z-index: 0;
}
.shipped-page .container {
	position: relative;
	z-index: 1;
}

/* ─── Header ──────────────────────────────────────────────────── */
.shipped-page__header {
	text-align: center;
	margin-bottom: 44px;
}
.shipped-page__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 5px 14px;
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #93c5fd;
	background: rgba( 33, 69, 230, 0.15 );
	border: 1px solid rgba( 33, 69, 230, 0.35 );
	border-radius: 999px;
}
.shipped-page__title {
	margin: 0 0 12px;
	font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
	font-size: 44px;
	font-weight: 500;
	line-height: 1.15;
	color: #f8fafc;
	letter-spacing: -0.01em;
}
.shipped-page__lede {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.55;
	color: #cbd5e1;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.shipped-page__lede strong {
	color: #93c5fd;
	font-weight: 600;
}

/* ─── Filter (version dropdown) ───────────────────────────────── */
.shipped-page__filter {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 999px;
}
.shipped-page__filter-label {
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-size: 13px;
	color: #cbd5e1;
}
.shipped-page__select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.shipped-page__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #ffffff;
	color: #1e293b;
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 32px 7px 12px;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-radius: 999px;
	cursor: pointer;
	min-width: 140px;
}
.shipped-page__select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 33, 69, 230, 0.4 );
}
.shipped-page__select-caret {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY( -50% );
	color: #475569;
	pointer-events: none;
}

/* ─── Grid of contributors ───────────────────────────────────── */
.shipped-page__grid {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: 18px;
}
.shipped-page__cell {
	min-width: 0;
}
.shipped-page__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 12px 16px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.shipped-page__link:hover,
.shipped-page__link:focus-visible {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 255, 255, 255, 0.18 );
	transform: translateY( -3px );
	box-shadow: 0 14px 28px -14px var( --cell-color, #2145e6 );
	outline: none;
}
.shipped-page__avatar-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.06 );
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.12 );
}
.shipped-page__avatar {
	display: block;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba( 255, 255, 255, 0.15 );
}
.shipped-page__avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --cell-color, #2145e6 );
	color: #fff;
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-weight: 600;
	font-size: 24px;
}
.shipped-page__name {
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #f1f5f9;
	text-align: center;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
}
.shipped-page__handle {
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-size: 11.5px;
	color: #94a3b8;
	letter-spacing: 0.02em;
}

/* ─── Empty state ─────────────────────────────────────────────── */
.shipped-page__empty {
	max-width: 540px;
	margin: 32px auto 48px;
	padding: 32px 24px;
	text-align: center;
	background: rgba( 255, 255, 255, 0.02 );
	border: 1px dashed rgba( 255, 255, 255, 0.15 );
	border-radius: 8px;
}
.shipped-page__empty p {
	margin: 0 0 8px;
	color: #cbd5e1;
	font-size: 15px;
	line-height: 1.5;
}
.shipped-page__empty-sub {
	color: #94a3b8;
	font-size: 13.5px;
}

/* ─── CTA ─────────────────────────────────────────────────────── */
.shipped-page__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 32px;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}
.shipped-page__cta-text {
	margin: 0;
	font-size: 14px;
	color: #94a3b8;
}
.shipped-page__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 24px;
	font-family: var( --font-body, 'Figtree' ), sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: var( --color-primary, #2145e6 );
	border-radius: 999px;
	text-decoration: none;
	transition: filter 0.15s, transform 0.15s;
}
.shipped-page__cta-link:hover {
	filter: brightness( 1.08 );
	transform: translateX( 2px );
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 760px) {
	.shipped-page { padding: 44px 0 56px; }
	.shipped-page__title { font-size: 28px; line-height: 1.2; }
	.shipped-page__lede { font-size: 14.5px; }
	.shipped-page__filter {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		border-radius: 8px;
		padding: 12px 14px;
	}
	.shipped-page__filter-label {
		font-size: 12px;
		text-align: center;
	}
	.shipped-page__select { width: 100%; }
	.shipped-page__grid {
		grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
		gap: 12px;
	}
	.shipped-page__avatar-wrap { width: 56px; height: 56px; }
	.shipped-page__avatar       { width: 52px; height: 52px; }
	.shipped-page__avatar--fallback { font-size: 20px; }
	.shipped-page__name         { font-size: 13px; }
}
@media (max-width: 420px) {
	.shipped-page__title { font-size: 22px; }
	.shipped-page__grid {
		grid-template-columns: repeat( auto-fill, minmax( 90px, 1fr ) );
		gap: 10px;
	}
}

/* ────────────────────────────────────────────────────────────────
 * GALAXY layout — moved here from front-page.css in 1.22.6 when
 * the homepage Shipped Wall section was retired in favour of the
 * dedicated /shipped/ page. The original `.shipped-wall*` chrome
 * (eyebrow, title, halo background) is now provided by the page
 * template itself (.shipped-page__*); only the galaxy stage +
 * mobile inline-list fallback live here unchanged.
 * ──────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────
 * Shipped Wall — WPFolks contributors credited in the latest
 * WordPress release. Self-hides when matches < 1 (admin preview via
 * ?wpfolks_shipped_preview=1 bypasses the gate).
 *
 * TWO LAYOUT MODES, ONE MARKUP:
 *
 *   - Desktop (≥760px): GALAXY. WordPress version anchored at the
 *     centre, contributors arranged on up to 3 concentric orbital
 *     rings around it. Avatars positioned via the classic
 *     rotate→translate→counter-rotate trick: the outer transform
 *     places each star on its ring; the inner counter-rotation
 *     keeps the avatar upright. CSS variables --seat (this star's
 *     index) and --seats (total stars on the ring) drive the angle.
 *
 *   - Mobile (<760px): GRID fallback. Galaxies don't shrink well —
 *     phones get the original honor-wall mosaic. Same DOM, CSS
 *     just changes the layout strategy.
 * ──────────────────────────────────────────────────────────────── */

.shipped-wall {
  position: relative;
  padding: 64px 0 56px;
  background:
    radial-gradient( rgba( 255, 255, 255, 0.04 ) 1px, transparent 1px ) 0 0 / 14px 14px,
    linear-gradient( 135deg, #0f172a 0%, #1e293b 100% );
  color: #f1f5f9;
  overflow: hidden;
}
.shipped-wall::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient( circle, rgba( 33, 69, 230, 0.22 ) 0%, transparent 70% );
  pointer-events: none;
  z-index: 0;
}
.shipped-wall .container {
  position: relative;
  z-index: 1;
}

.shipped-wall__header {
  text-align: center;
  margin-bottom: 28px;
}
.shipped-wall__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px 12px;
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #93c5fd;
  background: rgba( 33, 69, 230, 0.15 );
  border: 1px solid rgba( 33, 69, 230, 0.35 );
  border-radius: 999px;
}
.shipped-wall__title {
  margin: 0 0 8px;
  font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
  color: #f8fafc;
}
.shipped-wall__count {
  color: #93c5fd;
  font-weight: 600;
}
.shipped-wall__subtitle {
  margin: 0;
  font-size: 14px;
  color: #cbd5e1;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Galaxy stage (desktop) ─────────────────────────────────── */

.shipped-galaxy {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 28px;
  /* Container is square-ish — height matches max width so the
     concentric rings fit without truncation. */
  aspect-ratio: 1 / 1;
}

/* Decorative concentric rings — drawn as absolutely-positioned
   circles centred on the stage. Sizes are tuned to sit just BEHIND
   each orbit's avatar centerline. */
.shipped-galaxy__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.shipped-galaxy__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba( 255, 255, 255, 0.08 );
  transform: translate( -50%, -50% );
  pointer-events: none;
}

/* 1.22.500 — Reverted to original circular orbits. Cap bumped from
 * 30 (6/8/16) to 50 (6/14/30) via PHP — ring radii unchanged. The
 * --wide / --octagon modifier experiments from 1.22.498/499 were
 * dropped. */
.shipped-galaxy--wide .shipped-galaxy__star-inner {
  /* Drop the counter-rotation animation. */
  animation: none;
  transform: none;
}
.shipped-galaxy__ring--1 { width: 280px; height: 280px; }
.shipped-galaxy__ring--2 { width: 440px; height: 440px; }
.shipped-galaxy__ring--3 { width: 600px; height: 600px; }
/* Brand-blue radial halo behind the centre — gives the version
   anchor its visual weight without competing with the avatars. */
.shipped-galaxy__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba( 33, 69, 230, 0.32 ) 0%,
    rgba( 33, 69, 230, 0.08 ) 45%,
    transparent 70%
  );
  transform: translate( -50%, -50% );
  filter: blur( 4px );
  pointer-events: none;
  animation: shipped-galaxy-pulse 6s ease-in-out infinite;
}
@keyframes shipped-galaxy-pulse {
  0%, 100% { opacity: 0.85; transform: translate( -50%, -50% ) scale( 1 ); }
  50%      { opacity: 1;    transform: translate( -50%, -50% ) scale( 1.06 ); }
}

/* Centre plate — WordPress logo + version + label. */
.shipped-galaxy__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  z-index: 2;
}
.shipped-galaxy__core-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  /* Bright white reads cleanly against the dark gradient + brand
     halo; the slightly-blue drop-shadow keeps the WordPress brand
     identity in the glow without bleeding into the logo itself. */
  color: #ffffff;
  filter: drop-shadow( 0 0 14px rgba( 33, 69, 230, 0.7 ) )
          drop-shadow( 0 0 4px rgba( 255, 255, 255, 0.3 ) );
}
.shipped-galaxy__core-mark svg {
  width: 100%;
  height: 100%;
}
.shipped-galaxy__core-version {
  font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-shadow: 0 0 32px rgba( 33, 69, 230, 0.45 );
}
.shipped-galaxy__core-label {
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #94a3b8;
}

/* Orbits — each <ul> is one ring. Stars positioned via CSS vars:
     --seat:  this star's index (0-based)
     --seats: total stars on this ring
   The angle is computed at render time and applied via the outer
   transform (rotate + translate to ring radius); the inner
   counter-rotates so the avatar stays upright. */
.shipped-galaxy__orbit {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  /* Each ring rotates around the centre, slowly. Outer rings spin
     SLOWER than inner rings (loose Kepler analogy — feels right
     even though it's not real orbital mechanics), and alternating
     directions add visual interest. The whole UL rotates; each
     star's inner element counter-rotates underneath so the avatar
     stays upright. */
  transform-origin: 50% 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  /* CRITICAL: each orbit <ul> spans `inset: 0` — i.e. covers the
     entire galaxy stage. Without `pointer-events: none` here, the
     outermost orbit (Ring 3, last in DOM) sits ON TOP of Rings 1
     and 2 in the stacking context and intercepts every click in
     the empty space between its avatars. Result: only Ring 3
     avatars register clicks, inner rings are dead targets.
     Setting the orbit transparent to clicks + re-enabling clicks
     on the actual stars gives every avatar its own real hit area. */
  pointer-events: none;
}
/* Re-enable click interception ONLY on the actual avatar — the
   wrapper <li> AND the link inside it both need pointer-events
   active, otherwise the link inherits `none` from the orbit. */
.shipped-galaxy__star,
.shipped-galaxy__star-inner,
.shipped-galaxy__link {
  pointer-events: auto;
}
.shipped-galaxy__orbit--1 {
  --orbit-radius: 140px;
  animation-name: shipped-galaxy-orbit-cw;
  animation-duration: 80s;
}
.shipped-galaxy__orbit--2 {
  --orbit-radius: 220px;
  animation-name: shipped-galaxy-orbit-ccw;
  animation-duration: 110s;
}
.shipped-galaxy__orbit--3 {
  --orbit-radius: 300px;
  animation-name: shipped-galaxy-orbit-cw;
  animation-duration: 140s;
}
/* 1.23.22 — Orbit animation for rings 4+ was missing. The
 * star-inner kept its counter-rotation animation (so avatars
 * never go upside-down on a spinning ring) but the OUTER orbit
 * wasn't spinning. Net effect: the counter-rotation animated
 * against nothing, making avatars freely spin in place — going
 * upside-down, mirrored, etc. on the outermost ring.
 *
 * Add the matching orbit spin so the cancellation works.
 * Direction alternates by ring index — must match the inner
 * counter-rotation direction set below (CW orbit needs CCW
 * counter, or "counter-cw" in our keyframe naming). */
.shipped-galaxy__orbit--5,
.shipped-galaxy__orbit--7,
.shipped-galaxy__orbit--9,
.shipped-galaxy__orbit--11 {
  animation-name: shipped-galaxy-orbit-cw;
  animation-duration: 140s;
}
.shipped-galaxy__orbit--4,
.shipped-galaxy__orbit--6,
.shipped-galaxy__orbit--8,
.shipped-galaxy__orbit--10,
.shipped-galaxy__orbit--12 {
  animation-name: shipped-galaxy-orbit-ccw;
  animation-duration: 140s;
}
@keyframes shipped-galaxy-orbit-cw {
  from { transform: rotate( 0deg ); }
  to   { transform: rotate( 360deg ); }
}
@keyframes shipped-galaxy-orbit-ccw {
  from { transform: rotate( 0deg ); }
  to   { transform: rotate( -360deg ); }
}

.shipped-galaxy__star {
  position: absolute;
  top: 50%;
  left: 50%;
  /* rotate angle = (seat / seats) * 360deg, then translate up to the
     ring radius. Subtract 90deg so seat 0 starts at the top instead
     of the right (more aesthetically expected for a "constellation").
     This static positioning sits inside the parent orbit, which is
     itself rotating — so the star revolves around the centre while
     keeping its seat-relative position on the ring. */
  --angle: calc( ( var( --seat ) * 360deg / var( --seats ) ) - 90deg );
  transform: translate( -50%, -50% ) rotate( var( --angle ) ) translate( var( --orbit-radius ), 0 );
  /* Subtle per-star opacity twinkle layered on top of the orbital
     motion — staggered by seat index so the ring twinkles
     asynchronously instead of pulsing in unison. */
  animation: shipped-galaxy-breath 4s ease-in-out infinite;
  animation-delay: calc( var( --seat ) * 0.18s );
}
@keyframes shipped-galaxy-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

.shipped-galaxy__star-inner {
  /* The inner element does TWO things at once via the keyframes
     below:
       1. Static counter-rotation by --angle (undoes the parent
          star's seat-based rotation so the avatar reads upright at
          rest).
       2. Continuous counter-rotation matching the parent orbit's
          spin direction & speed, so as the orbit revolves the
          avatar visually stays upright (text never goes upside
          down).
     The duration MUST match the parent orbit's animation-duration
     for the cancellation to be exact. We use direction-specific
     keyframes (cw/ccw) per ring to match each orbit's direction. */
  --angle: calc( ( var( --seat ) * 360deg / var( --seats ) ) - 90deg );
  transform: rotate( calc( var( --angle ) * -1 ) );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  margin: -32px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.shipped-galaxy__orbit--1 .shipped-galaxy__star-inner {
  animation-name: shipped-galaxy-counter-cw;
  animation-duration: 80s;
}
.shipped-galaxy__orbit--2 .shipped-galaxy__star-inner {
  animation-name: shipped-galaxy-counter-ccw;
  animation-duration: 110s;
}
.shipped-galaxy__orbit--3 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--4 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--5 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--6 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--7 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--8 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--9 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--10 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--11 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--12 .shipped-galaxy__star-inner {
  animation-name: shipped-galaxy-counter-cw;
  animation-duration: 140s;
}
/* 1.22.497 — Outer rings (4+) alternate direction so neighbouring
 * rings don't appear to spin in lockstep. */
.shipped-galaxy__orbit--4 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--6 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--8 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--10 .shipped-galaxy__star-inner,
.shipped-galaxy__orbit--12 .shipped-galaxy__star-inner {
  animation-name: shipped-galaxy-counter-ccw;
}
@keyframes shipped-galaxy-counter-cw {
  from { transform: rotate( calc( var( --angle ) * -1 ) ) rotate( 0deg ); }
  to   { transform: rotate( calc( var( --angle ) * -1 ) ) rotate( -360deg ); }
}
@keyframes shipped-galaxy-counter-ccw {
  from { transform: rotate( calc( var( --angle ) * -1 ) ) rotate( 0deg ); }
  to   { transform: rotate( calc( var( --angle ) * -1 ) ) rotate( 360deg ); }
}

.shipped-galaxy__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  text-decoration: none;
  transition: transform 0.18s;
}
/* Hover/focus: just scale up — no card background, no per-user
   color tinting. Keeps the focus on the moving avatars instead of
   pulling attention to a hover rectangle. */
.shipped-galaxy__link:hover,
.shipped-galaxy__link:focus-visible {
  transform: scale( 1.08 );
  outline: none;
}
.shipped-galaxy__avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba( 255, 255, 255, 0.08 );
  box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.15 );
  transition: box-shadow 0.2s;
}
/* Halo flips to brand-blue regardless of which user is being hovered
   — feels intentional + on-brand, instead of "hot pink for user X,
   teal for user Y". The brand-blue glow reads as "active state" for
   all avatars uniformly. */
.shipped-galaxy__link:hover .shipped-galaxy__avatar-wrap,
.shipped-galaxy__link:focus-visible .shipped-galaxy__avatar-wrap {
  box-shadow: 0 0 0 2px rgba( 33, 69, 230, 0.55 ),
              0 8px 24px -4px rgba( 33, 69, 230, 0.65 );
}
.shipped-galaxy__avatar {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba( 255, 255, 255, 0.15 );
}
.shipped-galaxy__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var( --cell-color, #2145e6 );
  color: #fff;
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.shipped-galaxy__avatar--more {
  width: 56px;
  height: 56px;
  background: transparent;
  border: 1.5px dashed rgba( 255, 255, 255, 0.45 );
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
}
.shipped-galaxy__name {
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #e2e8f0;
  text-align: center;
  line-height: 1.25;
  /* Single-line clamp so long names don't break ring spacing. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  white-space: normal;
}
.shipped-galaxy__name--muted {
  color: #94a3b8;
  font-style: italic;
}

/* Bottom CTA — drives the core motivation behind this surface. */
.shipped-wall__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}
.shipped-wall__cta-text {
  margin: 0;
  font-size: 14px;
  color: #94a3b8;
}
.shipped-wall__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var( --color-primary, #2145e6 );
  border-radius: 999px;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.shipped-wall__cta-link:hover {
  filter: brightness( 1.08 );
  transform: translateX( 2px );
}

/* ─── Pause the galaxy on hover ─────────────────────────────────
   Clicking a moving target is harder than clicking a static one.
   When the user hovers anywhere over the galaxy stage, freeze ALL
   orbital + counter-rotation animations so the click target stops
   moving. Avatars remain in their current rotational position
   (animation-play-state: paused) — the moment the cursor leaves,
   they resume from where they were. The breath/halo animations
   stay running so the stage doesn't feel completely dead.
   Touch devices: this also fires on tap, giving the same effect. */
.shipped-galaxy:hover .shipped-galaxy__orbit,
.shipped-galaxy:hover .shipped-galaxy__star-inner,
.shipped-galaxy:focus-within .shipped-galaxy__orbit,
.shipped-galaxy:focus-within .shipped-galaxy__star-inner {
  animation-play-state: paused;
}

/* ─── Reduced motion: kill the orbital + breath/pulse animations ─
   When the OS prefers reduced motion, we hold the galaxy in its
   initial seat-based positions and let the static counter-rotation
   on .star-inner keep avatars upright. Visually identical to the
   first frame of the animation; just no motion. */
@media (prefers-reduced-motion: reduce) {
  .shipped-galaxy__halo,
  .shipped-galaxy__star,
  .shipped-galaxy__orbit,
  .shipped-galaxy__star-inner {
    animation: none;
  }
}

/* ─── Mobile: inline credits-style name list ──────────────────────
   Galaxies don't shrink to phone widths and rows-with-avatars still
   read as a wall of strangers when the section's purpose is
   recognition. The cleanest mobile pattern is what wp.org itself
   uses on the credits page — names flow inline as a comma-separated
   paragraph of links. Reads as an honor roll, stays scannable, and
   the names ARE the recognition (avatars on a phone don't add much
   when the names are right there). All orbital chrome (rings, halo,
   centre plate, avatars) hides; only the linked names render. */
@media (max-width: 760px) {
  .shipped-wall { padding: 44px 0 36px; }
  .shipped-wall__title { font-size: 24px; line-height: 1.25; }

  /* Hide every galaxy-only ornament + the avatar wrappers. The
     section becomes just typography + the CTA. */
  .shipped-galaxy__rings,
  .shipped-galaxy__core,
  .shipped-galaxy__avatar-wrap {
    display: none;
  }

  /* The galaxy container becomes a centered text block. */
  .shipped-galaxy {
    aspect-ratio: auto;
    height: auto;
    max-width: 640px;
    margin: 0 auto 24px;
    text-align: center;
    font-family: var( --font-body, 'Figtree' ), sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: #cbd5e1;
  }

  /* All three orbital ULs flow inline as one continuous run.
     `display: inline` on the UL + LIs means commas + spaces in the
     HTML between elements collapse naturally; we add separator
     commas via ::after so the layout doesn't depend on whitespace. */
  .shipped-galaxy__orbit {
    position: static;
    inset: auto;
    display: inline;
    margin: 0;
    padding: 0;
    animation: none;
  }
  .shipped-galaxy__star {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    animation: none;
    display: inline;
    width: auto;
  }
  .shipped-galaxy__star-inner {
    --angle: 0deg;
    transform: none;
    animation: none;
    display: inline;
    width: auto;
    margin: 0;
    gap: 0;
  }

  /* Linked names — brand-blue, underline-on-hover, no card chrome. */
  .shipped-galaxy__link {
    display: inline;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #93c5fd;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.12s;
  }
  .shipped-galaxy__link:hover,
  .shipped-galaxy__link:focus-visible {
    background: transparent;
    border: 0;
    transform: none;
    color: #ffffff;
    text-decoration: underline;
    outline: none;
    box-shadow: none;
  }
  .shipped-galaxy__name {
    display: inline;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Comma separator between names. Each star ends with ", " — we
     suppress the trailing comma on the LAST visible star (whether
     it's a regular contributor or the "+N more" tail). */
  .shipped-galaxy__star::after {
    content: ', ';
    color: rgba( 255, 255, 255, 0.4 );
  }
  /* Suppress the trailing comma on the very last star in the
     last-rendered orbit. Lots of empty rings means we can't rely on
     :last-of-type at the orbit level; targeting the last star of the
     last orbit covers every case (regular OR overflow). */
  .shipped-galaxy__orbit:last-of-type .shipped-galaxy__star:last-child::after {
    content: '';
  }

  /* "+N more" becomes inline italic muted text instead of a pill +
     "more" badge. Reads as natural sentence: "…name3, name4, +5 more". */
  .shipped-galaxy__star--more .shipped-galaxy__star-inner {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .shipped-galaxy__avatar--more {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    color: rgba( 255, 255, 255, 0.55 );
    font-size: inherit;
    font-weight: 500;
    font-style: italic;
  }
  .shipped-galaxy__name--muted {
    display: inline;
    color: rgba( 255, 255, 255, 0.55 );
    font-style: italic;
  }
}
@media (max-width: 420px) {
  .shipped-wall__title { font-size: 21px; }
  .shipped-galaxy { font-size: 14.5px; line-height: 1.8; }
}

/* ─────────────────────────────────────────────────────────────────
 * 1.22.498 — Wide-board layout. Replaces the concentric-rings galaxy
 * on /shipped/ once it became clear the circle didn't scale well past
 * ~30 contributors. The anchor (version + "shipped" label) sits on
 * the left at desktop widths; avatars flow as a wide responsive grid
 * using the full container. Each avatar stays a perfect circle, the
 * brand-blue glow on the anchor keeps the galaxy aesthetic.
 * ──────────────────────────────────────────────────────────────── */
.shipped-board {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: start;
  padding: 36px;
  margin: 0 auto 28px;
  background:
    radial-gradient( circle at 0% 50%, rgba( 33, 69, 230, 0.18 ) 0%, transparent 55% ),
    linear-gradient( 180deg, rgba( 30, 41, 59, 0.5 ) 0%, rgba( 15, 23, 42, 0.7 ) 100% );
  border: 1px solid rgba( 255, 255, 255, 0.06 );
  border-radius: 20px;
}

.shipped-board__anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  position: sticky;
  top: 24px;
}
.shipped-board__anchor-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  color: #ffffff;
  filter: drop-shadow( 0 0 14px rgba( 33, 69, 230, 0.7 ) )
          drop-shadow( 0 0 4px rgba( 255, 255, 255, 0.3 ) );
}
.shipped-board__anchor-mark svg {
  width: 100%;
  height: 100%;
}
.shipped-board__anchor-version {
  display: block;
  font-family: var(--font-heading, 'Fraunces'), Georgia, serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-shadow: 0 0 32px rgba( 33, 69, 230, 0.45 );
}
.shipped-board__anchor-label {
  display: block;
  margin-top: 6px;
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #94a3b8;
}

.shipped-board__grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
  gap: 18px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.shipped-board__cell {
  display: flex;
  justify-content: center;
}
.shipped-board__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  color: #f1f5f9;
  transition: transform 0.18s ease;
}
.shipped-board__link:hover {
  transform: translateY( -2px );
  color: #ffffff;
}
.shipped-board__avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Brand-tinted ring that picks up each folk's --cell-color. */
  background:
    radial-gradient( circle at 30% 25%, rgba( 255, 255, 255, 0.18 ) 0%, transparent 55% ),
    var( --cell-color, rgba( 255, 255, 255, 0.08 ) );
  box-shadow:
    0 0 0 1px rgba( 255, 255, 255, 0.08 ),
    0 6px 14px -6px rgba( 0, 0, 0, 0.6 );
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.shipped-board__link:hover .shipped-board__avatar-wrap {
  box-shadow:
    0 0 0 2px rgba( 255, 255, 255, 0.16 ),
    0 10px 22px -6px rgba( 0, 0, 0, 0.7 );
}
.shipped-board__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.shipped-board__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.shipped-board__name {
  font-family: var( --font-body, 'Figtree' ), sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: #cbd5e1;
  text-align: center;
  max-width: 110px;
  word-break: break-word;
}
.shipped-board__link:hover .shipped-board__name {
  color: #ffffff;
}

/* Tablet — anchor moves above the grid (no longer enough width to
 * justify the side-by-side layout). */
@media (max-width: 900px) {
  .shipped-board {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 24px;
  }
  .shipped-board__anchor {
    position: static;
    padding: 8px 0;
  }
  .shipped-board__anchor-version { font-size: 44px; }
}

@media (max-width: 540px) {
  .shipped-board {
    padding: 22px 16px;
    border-radius: 14px;
  }
  .shipped-board__anchor-version { font-size: 36px; }
  .shipped-board__grid {
    grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) );
    gap: 14px 8px;
  }
  .shipped-board__avatar-wrap { width: 48px; height: 48px; }
  .shipped-board__avatar { width: 44px; height: 44px; }
  .shipped-board__name { font-size: 11px; max-width: 92px; }
}