/* ============================================================
   Challenges page — built on the homepage system (trajectory.css):
   the fixed glass header, dark chapters, starfield and chapter marks.
   What follows is only what the challenge list itself needs.
   ============================================================ */

/* Deep Blue rather than the near-black space ground: long reading on this
   page was hard on the eye. Cards sit one step lighter so they read as
   surfaces, and every overlay that fades into a card uses the card colour. */
.challenges-page {
  --ch-ground: #07173F;
  --ch-card: #0f2457;
  --ch-card-2: #0b1d4b;
  background: var(--ch-ground);
}
.challenges-page .chapter.dark { background: transparent; }
.challenges-page main { background: linear-gradient(180deg, #0a1c4d 0%, var(--ch-ground) 38%, #081a47 100%); }

/* ---------- Hero ---------- */
/* The header is fixed; the hero clears it and still reads as one field. */
.ch-hero { padding-block: calc(var(--header-h) + clamp(40px, 7vw, 96px)) clamp(36px, 5vw, 64px); }
.ch-heading { max-width: 16ch; margin: 0 0 22px; font-size: clamp(40px, 7.4vw, 84px); line-height: 1.12; font-weight: 700; color: #fff; }
html[lang="ar"] .ch-heading { line-height: 1.28; }
html[lang="en"] .ch-heading { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; max-width: 18ch; }
.ch-heading em { font-style: normal; color: var(--neon-yellow); }
/* The search phrase rides inside the H1 at eyebrow size, as on the homepage. */
.ch-heading .eyebrow {
  display: block; margin-bottom: clamp(14px, 2.4vw, 22px);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
  color: var(--sky-blue);
}
html[lang="ar"] .ch-heading .eyebrow { font-size: 14px; letter-spacing: 0; }
.ch-lead { max-width: 52ch; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.85; color: #dbe2ee; }

/* Three readings, in the instrument-strip language of chapter 01. */
.ch-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(32px, 5vw, 52px) 0 0; border-top: 1px solid var(--rule-strong); max-width: 720px; }
.ch-stats > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 4px 0; min-width: 0; }
.ch-stats > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: 14px; }
.ch-stats dt { font-size: 10px; letter-spacing: .18em; color: var(--sky-blue); }
/* .mono sets direction: ltr, which pulled these to the left edge of each
   cell in Arabic; they belong on the reading side with the figure. */
[dir="rtl"] .ch-stats dt { text-align: right; }
.ch-stats dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--dim); }
.ch-fig { font-size: clamp(28px, 4vw, 40px); line-height: 1; color: #fff; font-weight: 500; }

/* Copy on the reading side, a challenge spotlight opposite it. */
.ch-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 56px); align-items: center; }
@media (min-width: 980px) { .ch-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 5vw, 80px); } }

.ch-spotlight { position: relative; display: grid; place-items: center; padding-block: clamp(10px, 3vw, 40px); }

/* A planet with a satellite on its track, the Space Apps mark drawn large,
   now orbiting the spotlight card. */
.ch-orbit {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(150%, 720px); height: auto; opacity: .6;
}
.ch-orbit-ring { stroke: var(--trace); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ch-orbit-ring.faint { opacity: .35; stroke-dasharray: 2 7; }
.ch-orbit-planet { fill: none; stroke: #ffffff4d; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ch-orbit-sat circle { fill: var(--neon-yellow); }
.ch-orbit-sat { transform-origin: 300px 300px; }

.ch-spot-card {
  position: relative; z-index: 1; width: min(100%, 440px);
  background: linear-gradient(180deg, var(--ch-card), var(--ch-card-2));
  border: 1px solid #ffffff38; border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 60px #01061a66, 0 0 0 6px #ffffff08;
}
@media (min-width: 980px) { .ch-spot-card { rotate: -2.5deg; } [dir="rtl"] .ch-spot-card { rotate: 2.5deg; } }
.ch-spot-link { display: block; color: inherit; text-decoration: none; }
.ch-spot-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0d2745; }
.ch-spot-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, scale 5s linear; }
.ch-spot-media::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(to top, var(--ch-card), transparent); }
.ch-spot-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 22px 18px; }
.ch-spot-label { font-size: 12px; font-weight: 600; color: var(--sky-blue); }
html[lang="en"] .ch-spot-label { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.ch-spot-title { min-height: 3em; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; font-weight: 700; color: #fff; transition: opacity .45s ease; }
.ch-spot-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--neon-yellow); }
.ch-spot-link:hover .ch-spot-go span, .ch-spot-link:focus-visible .ch-spot-go span { text-decoration: underline; text-underline-offset: 5px; }
.ch-spot-card.is-swapping .ch-spot-media img, .ch-spot-card.is-swapping .ch-spot-title { opacity: 0; }

.ch-spot-controls { display: flex; align-items: center; gap: 12px; padding: 0 22px 18px; }
.ch-spot-dots { display: flex; flex: 1; gap: 3px; }
.ch-spot-dot { flex: 1; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.ch-spot-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: #ffffff2e; transition: background .3s; }
.ch-spot-dot[aria-current="true"]::before { background: var(--neon-yellow); }
.ch-spot-pause {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #ffffff4d; background: transparent; color: #fff; cursor: pointer;
}
.ch-spot-pause .i-play { display: none; }
.ch-spot-pause[aria-pressed="true"] .i-pause { display: none; }
.ch-spot-pause[aria-pressed="true"] .i-play { display: inline; }

.ch-card { scroll-margin-top: calc(var(--header-h) + 20px); }

/* ---------- List chapter ---------- */
.ch-list { padding-block: 0 clamp(64px, 9vw, 120px); }

.ch-rules { list-style: none; display: grid; gap: 0; margin: 0 0 clamp(32px, 5vw, 48px); padding: 0; border-top: 1px solid var(--rule); }
.ch-rules li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.7; color: #dbe2ee; }
.ch-rules li > .mono { flex: 0 0 auto; font-size: 11px; color: var(--neon-yellow); letter-spacing: .08em; }
@media (min-width: 900px) {
  .ch-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .ch-rules li { border-bottom: 0; padding: 20px 20px 20px 0; }
  .ch-rules li + li { border-inline-start: 1px solid var(--rule); padding-inline-start: 20px; }
}

/* ---------- Filters: the control panel ---------- */
.ch-filters { display: grid; gap: 12px; margin-bottom: 26px; }
.ch-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-filter-label { min-width: 5.2em; font-size: 11px; letter-spacing: .14em; color: var(--sky-blue); }
html[lang="ar"] .ch-filter-label { font-size: 13px; letter-spacing: 0; }
.ch-chip {
  min-height: 40px; padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: #ffffff08;
  font: inherit; font-size: 14px; color: #dbe2ee; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.ch-chip:hover { border-color: #fff; color: #fff; }
.ch-chip[aria-pressed="true"] { background: var(--neon-yellow); border-color: var(--neon-yellow); color: var(--deep-blue); font-weight: 700; }
.ch-count { margin-top: 4px; font-size: 12px; letter-spacing: .06em; color: var(--dim); }

/* ---------- Cards: mission files ---------- */
.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px) { .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

.ch-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, var(--ch-card), var(--ch-card-2));
  border: 1px solid #ffffff29; border-radius: 6px; overflow: hidden;
  transition: border-color .3s, translate .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.ch-card[hidden] { display: none; }
.ch-card:hover, .ch-card:focus-within { border-color: #ffffff66; box-shadow: 0 18px 40px #01061a59; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ch-card:hover { translate: 0 -4px; } }

.ch-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d2745; }
.ch-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: no-preference) { .ch-card:hover .ch-media img { scale: 1.05; } }
/* The photo settles into the card instead of stopping on a hard edge. */
.ch-media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, var(--ch-card), transparent); pointer-events: none; }
.ch-no {
  position: absolute; z-index: 1; inset-block-start: 12px; inset-inline-start: 12px;
  padding: 4px 9px; border-radius: 4px;
  background: #07173fcc; border: 1px solid #ffffff38; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 13px; color: var(--neon-yellow); letter-spacing: .04em;
}
.ch-no span { color: #ffffff80; }

.ch-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 6px 20px 22px; }

/* Difficulty as a three-step gauge: the lit range is the challenge's span. */
.ch-meter { display: flex; align-items: center; gap: 12px; }
.ch-meter-bars { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.seg { display: block; width: 22px; height: 6px; border-radius: 2px; background: #ffffff1f; }
.seg.on { background: var(--neon-yellow); }
.seg-intermediate.on { background: #ffb020; }
.seg-advanced.on { background: var(--rocket-red); }
.ch-meter-label { font-size: 12px; color: var(--dim); letter-spacing: .02em; }
html[lang="ar"] .ch-meter-label { font-size: 13px; letter-spacing: 0; }

.ch-title { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; font-weight: 700; color: #fff; }
html[lang="en"] .ch-title { line-height: 1.35; }
.ch-official { margin-top: -6px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; letter-spacing: .01em; color: #ffffff8c; text-align: right; }
html[lang="en"] .ch-official { display: none; }

.ch-mission { font-size: 15px; line-height: 1.85; color: #dbe2ee; }
.ch-mission-label { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .14em; color: var(--sky-blue); }
html[lang="ar"] .ch-mission-label { font-size: 13px; letter-spacing: 0; font-weight: 600; }

.ch-more summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--neon-yellow);
}
.ch-more summary::-webkit-details-marker { display: none; }
.ch-more summary::before {
  content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid currentColor; font-family: var(--font-mono); font-size: 14px; line-height: 1;
  transition: rotate .3s;
}
.ch-more[open] summary::before { rotate: 45deg; }
.ch-more p { margin-top: 4px; padding-inline-start: 14px; border-inline-start: 1px solid var(--rule-strong); font-size: 14px; line-height: 1.9; color: var(--dim); }

.ch-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); }
.ch-tags li { padding: 3px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 12px; color: #cbd6ea; }

/* Link out to NASA's own page for the challenge, above the subject tags. */
.ch-source { margin-top: auto; padding-top: 14px; font-size: 13px; }
.ch-source a { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-blue); text-decoration: none; border-bottom: 1px solid transparent; }
.ch-source a::after { content: "\2197"; font-size: 12px; }
[dir="rtl"] .ch-source a::after { content: "\2196"; }  /* the arrow leaves the text the way the text runs */
.ch-source a:hover, .ch-source a:focus-visible { color: var(--neon-yellow); border-bottom-color: currentColor; }
.ch-source + .ch-tags { margin-top: 10px; padding-top: 10px; border-top: 0; }

.ch-empty { padding: 32px; text-align: center; color: var(--dim); border: 1px dashed var(--rule-strong); border-radius: 6px; }

/* The mono face belongs to the English labels only. The .mono class also sets
   direction: ltr, which in Arabic reversed a range like «مبتدئ – متوسط» and
   broke the letters apart, so these labels take the face by language. */
html[lang="en"] .ch-meter-label, html[lang="en"] .ch-mission-label,
html[lang="en"] .ch-filter-label, html[lang="en"] .ch-count { font-family: var(--font-mono); }
html[lang="ar"] .ch-count { font-size: 13px; letter-spacing: 0; }

/* ---------- Phones and small tablets ----------
   The hero stacks, so the spotlight would only repeat the first card below
   it; it steps aside. The stats keep one shape per cell, figure over label,
   rather than letting each cell wrap its own way. Filters become one
   scrolling row per group instead of six wrapped rows of chips. */
@media (max-width: 979px) {
  .ch-spotlight { display: none; }
  .ch-hero { padding-block: calc(var(--header-h) + 36px) 28px; }
}
@media (max-width: 699px) {
  .ch-heading { font-size: clamp(34px, 10vw, 44px); margin-bottom: 16px; }
  .ch-heading .eyebrow { margin-bottom: 12px; }
  .ch-lead { font-size: 15.5px; line-height: 1.8; }

  .ch-stats { margin-top: 26px; }
  .ch-stats > div { gap: 6px; padding: 14px 10px 0 0; }
  .ch-stats > div + div { padding-inline-start: 10px; }
  .ch-stats dt { font-size: 9px; letter-spacing: .12em; }
  .ch-stats dd { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; }
  .ch-fig { font-size: 30px; }

  .ch-rules { margin-bottom: 26px; }
  .ch-rules li { gap: 12px; padding: 12px 0; font-size: 14px; line-height: 1.75; }

  .ch-filters { gap: 10px; margin-bottom: 20px; }
  .ch-filter-row {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to left, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent 100%);
  }
  [dir="ltr"] .ch-filter-row {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent 100%);
  }
  .ch-filter-row::-webkit-scrollbar { display: none; }
  .ch-filter-label { flex: 0 0 auto; min-width: 0; margin-inline-end: 4px; }
  .ch-chip { flex: 0 0 auto; min-height: 36px; padding: 5px 13px; font-size: 13.5px; white-space: nowrap; }
  .ch-count { margin-top: 2px; }

  .ch-grid { gap: 14px; }
  .ch-body { gap: 10px; padding: 4px 16px 18px; }
  .ch-title { font-size: 18px; }
  .ch-official { font-size: 11px; }
  .ch-mission { font-size: 14.5px; line-height: 1.8; }
  .ch-no { font-size: 12px; inset-block-start: 10px; inset-inline-start: 10px; }
}

/* ---------- Entrance ----------
   Cards rise in as they reach the viewport. Only when the script has
   armed it and motion is welcome; otherwise every card is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .ch-spot-card.is-live .ch-spot-media img { scale: 1.06; }
  .ch-armed .ch-card { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; transition-delay: calc(var(--d, 0) * 70ms); }
  .ch-armed .ch-card.is-in { opacity: 1; translate: 0 0; }
  .ch-orbit-sat { animation: ch-orbit 26s linear infinite; }
  .ch-orbit-planet { animation: ch-breathe 6s ease-in-out infinite; }
}
@keyframes ch-orbit { to { rotate: 360deg; } }
@keyframes ch-breathe { 50% { stroke: #ffffffa6; } }

@media print {
  .site-header, .site-footer, .ch-filters, .ch-spotlight, .pattern, .skip-link { display: none !important; }
  .challenges-page, .chapter.dark, .ch-card { background: #fff !important; color: #000 !important; }
  .ch-card, .ch-title, .ch-mission, .ch-more p { color: #000 !important; }
  .ch-grid { grid-template-columns: 1fr 1fr; }
  .ch-card { break-inside: avoid; opacity: 1 !important; translate: none !important; }
}