/* GCC Cultural Event Study — Heritage Design System
 * Implements DESIGN_DOC.md — warm dark, gold accent, GCC cultural identity
 * Fonts self-hosted: Playfair Display (serif display) + Inter (sans body)
 * No external dependencies. No build step.
 */

/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colors — warm dark green-black, not cold charcoal */
  --bg-deep: #0d1b14;
  --bg-card: #13251a;
  --bg-elevated: #1a3022;
  --gold-primary: #c8a04e;
  --gold-light: #e0c476;
  --gold-dim: #8a6d33;
  --text-primary: #f0ebe0;
  --text-secondary: #b8aa92;
  --text-muted: #7a7060;
  --border-subtle: #2a3d30;
  --border-active: #c8a04e;
  --error: #a04a3a;
  --success: #5a8a4e;
  --progress-fill: #c8a04e;
  --progress-track: #1a2a1e;
  --gold-soft: rgba(200, 160, 78, 0.12);
  --gold-glow: rgba(200, 160, 78, 0.05);
  --part-accent: #c8a04e; /* set per-part from app.js */
  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 640px;

  /* Typography — premium serif display + clean sans body */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg-deep);
  /* Subtle Khatim 8-point star pattern at 3% opacity */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8L48 24L64 16L56 32L72 40L56 48L64 64L48 56L40 72L32 56L16 64L24 48L8 40L24 32L16 16L32 24Z' fill='none' stroke='%23c8a04e' stroke-width='0.5' opacity='0.03'/%3E%3C/svg%3E");
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- progress ---------- */
#progress-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 27, 20, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
#progress-bar {
  height: 6px;
  background: var(--progress-track);
  position: relative;
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: var(--part-accent);
  transition: width 0.35s ease, background 0.35s ease;
}
.progress-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(240, 235, 224, 0.18);
}
#progress-meta {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#part-chip {
  font-size: 12px;
  color: var(--part-accent);
  letter-spacing: 0.02em;
}
#progress-pct {
  font-size: 12px;
  color: var(--part-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#btn-back {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px 4px 0;
}
#btn-back:hover { color: var(--text-primary); }
#btn-back[hidden] { display: none; }

/* ---------- stage ---------- */
#stage {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 20px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.screen { animation: fadeIn 0.25s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- typography ---------- */
.headline {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-left: 14px;
  position: relative;
}
.headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--part-accent);
}
.q-num {
  font-size: 12px;
  color: var(--part-accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.subheader {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 18px;
}
.req-note {
  color: var(--error);
  font-size: 14px;
  margin-top: 10px;
  min-height: 20px;
}

/* ---------- choices ---------- */
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--text-primary);
  cursor: pointer;
  text-align: start;
  width: 100%;
  min-height: 48px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.choice:hover { background: var(--bg-elevated); border-color: var(--gold-dim); }
.choice.selected {
  background: var(--bg-elevated);
  border-color: var(--border-active);
  box-shadow: inset 0 1px 0 var(--gold-glow);
}
.choice .box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  position: relative;
}
.choice.multi .box { border-radius: 5px; }
.choice.selected .box { border-color: var(--gold-primary); }
.choice.selected .box::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--gold-primary);
}

.other-input {
  margin-top: 10px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
}
.other-input:focus {
  outline: none;
  border-color: var(--gold-primary);
}

/* ---------- rating ---------- */
.rating-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.rating-btn {
  flex: 1;
  aspect-ratio: 1 / 1;
  max-height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}
.rating-btn:hover { background: var(--bg-elevated); border-color: var(--gold-dim); }
.rating-btn.selected {
  background: var(--gold-soft);
  border-color: var(--gold-primary);
  color: var(--gold-light);
  transform: scale(1.05);
}
.rating-labels {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.rating-labels span:last-child { text-align: end; }
.rating-labels.grid5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.rating-labels.grid5 .rl-low { text-align: start; }
.rating-labels.grid5 .rl-mid { text-align: center; }
.rating-labels.grid5 .rl-high { text-align: end; }

/* ---------- text inputs ---------- */
textarea, input[type="text"] {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 15px;
  margin-top: 14px;
}
textarea { min-height: 110px; resize: vertical; }
textarea:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--gold-primary);
}
::placeholder { color: var(--text-muted); }

/* ---------- concept screens ---------- */
.concept-img {
  width: 100%;
  margin: 0 0 18px;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-card);
  /* Subtle Islamic-arch crown on the top edge */
  border-radius: 44% 44% var(--radius) var(--radius) / 16% 16% var(--radius) var(--radius);
  border: 1px solid var(--gold-dim);
  box-shadow: 0 0 0 5px var(--bg-deep), 0 0 0 6px var(--border-subtle);
}
.concept-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
}
.concept-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-primary);
}
.concept-desc {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.price-badge {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--gold-primary);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.concept-q {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 6px;
}
.concept-q-title {
  color: var(--gold-light);
  font-style: italic;
  font-family: var(--font-display);
}
.why-label {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.why-label .req-star {
  color: var(--gold-primary);
  margin-left: 2px;
}
.concept-count {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---------- buttons ---------- */
.btn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.btn-primary {
  background: var(--gold-primary);
  color: var(--bg-deep);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 34px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.08s ease;
}
.btn-primary:hover { filter: brightness(1.1); background: var(--gold-light); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-ghost {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  padding: 10px 6px;
}
.btn-ghost:hover { color: var(--text-primary); }

/* ---------- welcome / end ---------- */
.hero { padding-top: 5vh; text-align: center; }
.hero-motif {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.03); opacity: 1; }
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--gold-primary);
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.hero-subtitle {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 22px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.85;
}
.hero p {
  color: var(--text-primary);
  font-family: var(--font-display);
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.4;
}
.hero .highlight { color: var(--gold-light); }
.hero .gold { color: var(--gold-primary); font-weight: 600; }
.hero .underline { text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 3px; }
.hero .em { font-style: italic; }

.hero-lede {
  position: relative;
  max-width: 480px;
  margin: 0 auto 24px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: center;
  padding: 6px 10px;
  overflow: visible;
}
.hero-lede::before {
  content: "";
  position: absolute;
  inset: -20px -40px;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(200,160,78,0.06), transparent 60%),
              radial-gradient(ellipse 60% 50% at 70% 50%, rgba(200,160,78,0.04), transparent 60%);
  animation: ledeWave 8s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}
@keyframes ledeWave {
  0%   { transform: translateX(-20px) translateY(-4px); opacity: 0.6; }
  50%  { transform: translateX(10px) translateY(6px); opacity: 1; }
  100% { transform: translateX(25px) translateY(-2px); opacity: 0.5; }
}
.hero-strip {
  display: flex;
  gap: 12px;
  margin: 0 0 6px;
  align-items: flex-end;
}
.hero-strip img {
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-card);
  border-radius: 46% 46% 10px 10px / 20% 20% 10px 10px;
  border: 1px solid var(--gold-dim);
}
.hero-strip img.raised { transform: translateY(-10px); }
.hero-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 460px;
}
.hero-note {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: left;
  font-family: var(--font-body);
}
.hero-note .highlight { color: var(--gold-light); }
.hero-note .gold { color: var(--gold-primary); font-weight: 600; }
.hero-note .em { font-style: italic; }
.hero-note .underline { text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 2px; }
.hero-note-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 6px;
  display: block;
}
.hero-meta {
  display: flex;
  gap: 14px;
  margin: 20px auto 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-meta span {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  color: var(--text-secondary);
}
.hero .btn-row { justify-content: center; }

/* ---------- informed consent ----------
   Disclosure has to be READ to count, and a paragraph block on a hero screen does not get read.
   So the four facts are a list with the bolded lead-in doing the scanning work: eye lands on
   "What we never ask for" and the sentence after it is already the answer. Left-aligned inside a
   centred hero on purpose — running text set centred is measurably slower to read, and this is
   the one block on the screen that must actually land. The full statement stays one tap away
   rather than on the page, because the pilot's complaint was intro length. */
.consent {
  max-width: 440px;
  margin: 22px auto 0;
  text-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.consent-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-primary);
  margin-bottom: 10px;
}
.consent-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.consent-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.consent-list strong {
  color: var(--text-primary);
  font-weight: 600;
}
.consent-more { margin-top: 12px; }
.consent-more summary {
  font-size: 13.5px;
  color: var(--gold-dim);
  cursor: pointer;
  padding: 4px 0;
}
.consent-more summary:hover { color: var(--gold-light); }
.consent-more p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
}
.consent-foot {
  max-width: 440px;
  margin: 10px auto 0;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- withdrawal reference (end screen) ---------- */
.end-ref {
  max-width: 380px;
  margin: 18px auto 0;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.end-ref-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.end-ref-code {
  display: block;
  margin: 6px 0 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  user-select: all;   /* one tap selects the whole code on mobile */
}
.end-ref-note {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.end-screen { text-align: center; padding-top: 6vh; }
.end-motif {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  color: var(--gold-primary);
}
.end-screen h2 {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold-primary);
  margin-bottom: 16px;
}
.end-screen p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 12px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.end-screen .end-share {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
}

/* ---------- researcher photos ---------- */
.researchers {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 28px auto 8px;
}
.researcher { text-align: center; }
.researcher-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-dim);
  margin-bottom: 8px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.researcher-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
}
.researcher-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.researchers-credit {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.04em;
}

/* ---------- welcome researcher strip ---------- */
.hero-researchers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}
.hero-researchers img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-dim);
}
.hero-researchers-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ---------- section transition ---------- */
.section-intro {
  text-align: center;
  padding-top: 12vh;
  animation: fadeIn 0.3s ease;
}
.section-intro .motif {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  color: var(--part-accent);
  animation: motifIn 0.6s ease both;
}
.section-intro .part-num {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 6px;
}
.section-intro .part-name {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--part-accent);
  margin-bottom: 12px;
  animation: riseIn 0.5s ease both 0.1s;
}
.section-intro .part-desc {
  color: var(--text-secondary);
  font-size: 15px;
  animation: riseIn 0.5s ease both 0.22s;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes motifIn {
  from { opacity: 0; transform: scale(0.8) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
.primer {
  margin: 18px auto 0;
  max-width: 380px;
  text-align: left;
  animation: riseIn 0.5s ease both 0.34s;
}
.primer-line {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.primer-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--part-accent);
  transform: rotate(45deg);
}
.section-intro .btn-row { justify-content: center; }
.intro-hint {
  margin-top: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- resume banner ---------- */
.resume-banner {
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 15px;
  color: var(--text-secondary);
}
.resume-banner .btn-row { margin-top: 12px; }

/* ---------- section kicker ---------- */
.section-kicker {
  color: var(--gold-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
}

/* ---------- footer ---------- */
#site-foot {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 14px;
}

/* ---------- error / retry ---------- */
.submit-error {
  background: rgba(160, 74, 58, 0.12);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 20px;
  font-size: 15px;
  color: var(--error);
}

/* ---------- searchable dropdown ---------- */
.dropdown-wrap {
  position: relative;
  margin-top: 14px;
}
.dropdown-search {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
}
.dropdown-search:focus {
  outline: none;
  border-color: var(--gold-primary);
}
.dropdown-search.has-value {
  border-color: var(--gold-dim);
  color: var(--gold-light);
}
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 20;
  display: none;
}
.dropdown-list.open { display: block; }
.dropdown-item {
  padding: 12px 16px;
  font-size: 16px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s ease;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.highlighted {
  background: var(--bg-elevated);
  border-left: 3px solid var(--gold-primary);
  padding-left: 13px;
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .headline { font-size: 20px; }
  .concept-title { font-size: 22px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 18px; }
  .rating-btn { font-size: 18px; max-height: 56px; }
  #stage { padding: 22px 16px 40px; }
  .hero-strip { gap: 8px; }
  .hero-lede { padding: 14px 16px; font-size: 14.5px; }
  .end-screen h2 { font-size: 23px; }
  .end-screen p { font-size: 14.5px; max-width: 320px; }
  .end-motif { width: 54px; height: 54px; }
  .researchers { gap: 28px; margin-top: 24px; }
  .researcher-photo { width: 68px; height: 68px; }
  .researcher-name { font-size: 13px; }
  .researcher-role { font-size: 10.5px; }
  .hero-researchers img { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .hero-motif { animation: none; }
  #progress-fill { transition: none; }
  .rating-btn.selected { transform: none; }
  .section-intro .motif,
  .section-intro .part-name,
  .section-intro .part-desc,
  .primer { animation: none; }
}
/* ---------- completion time + prepilot feedback nudge ---------- */
.end-time {
  font-family: var(--font-display);
  color: var(--gold-primary);
  font-size: 14px;
  letter-spacing: 0.08em;
  margin: 4px 0 12px;
}

/* The one part that differs. Eight category screens open with the same four words, so
   without this the eye re-reads "Rate your interest in" to reach the category every time.
   Colour + one weight step is deliberately the whole treatment: DESIGN_DOC allows a single
   accent used sparingly, and anything louder turns one headline into two competing voices.
   --gold-light and NOT --part-accent: every part accent is darker than --text-primary, so
   tinting a word with one would make the important word the dimmest thing in the sentence.
   Gold-light is the brightest chroma in the palette, and on this desaturated ground it is
   the saturation that catches the eye, not the luminance. */
.headline .em {
  color: var(--gold-light);
  font-weight: 700;
}
.subheader .em {
  color: var(--gold-primary);
  font-weight: 600;
}
/* Same job on option lists written "Stance - elaboration" (see STANCE_IDS in app.js):
   the stance is what is being chosen, the rest only disambiguates it. */
.choice .stance {
  color: var(--gold-light);
  font-weight: 600;
}

/* ---------- optional why-note (concepts outside the required 3) ---------- */
.why-wrap { margin-top: 4px; }
.why-add {
  background: none;
  border: none;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gold-dim);
  cursor: pointer;
  text-align: left;
}
.why-add:hover { color: var(--gold-light); }

/* ============================ RTL + ARABIC (r24) ============================
   Scoped entirely under html[dir="rtl"] / html[lang="ar"], so the English build is
   byte-for-byte unaffected. app.js sets both attributes in applyDir().

   Font: Noto Sans Arabic (variable wght 100-900, 166 KB woff2). Referenced only under
   lang="ar", and browsers fetch a font only when rendered text uses it — so English
   respondents never download it and the 444 KB first load holds. Playfair has no Arabic:
   display type falls back to the same face at a heavier weight, which is the standard
   Arabic-web equivalent of a serif/sans pairing. */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("assets/fonts/NotoSansArabic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea {
  font-family: "Noto Sans Arabic", "Inter", "Segoe UI", system-ui, sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .headline,
html[lang="ar"] .part-name,
html[lang="ar"] .concept-title,
html[lang="ar"] .consent-title {
  font-family: "Noto Sans Arabic", sans-serif;
  font-weight: 800;
}

/* Arabic script is cursive: tracking inserts gaps between letters that MUST join, which
   reads as broken type, not as styling. Kill every letter-spacing under RTL. */
html[dir="rtl"] * { letter-spacing: 0 !important; }

/* Physical-property mirrors for the rules the RTL audit flagged. */
html[dir="rtl"] .headline,
html[dir="rtl"] .concept-title { padding-left: 0; padding-right: 14px; }
html[dir="rtl"] .headline::before,
html[dir="rtl"] .concept-title::before { left: auto; right: 0; }
html[dir="rtl"] .why-label .req-star { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .hero-note,
html[dir="rtl"] .primer,
html[dir="rtl"] .why-add { text-align: right; }
html[dir="rtl"] .primer-line { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .primer-line::before { left: auto; right: 0; }
html[dir="rtl"] .dropdown-item:hover,
html[dir="rtl"] .dropdown-item.highlighted {
  border-left: none;
  border-right: 3px solid var(--gold-primary);
  padding-left: 16px;
  padding-right: 13px;
}
html[dir="rtl"] #btn-back { padding: 4px 0 4px 8px; }

/* The progress bar fills left-to-right by width%. Mirroring the BAR (not the fill)
   flips fill direction and every milestone tick in one rule. */
html[dir="rtl"] #progress-bar { transform: scaleX(-1); }

/* Rating buttons: 1..5 are appended in DOM order. RTL flex reverses them visually so 1
   sits right — which is exactly what an Arabic reader expects on a labelled scale
   (low anchor on the right, high on the left). The grid5 labels flip with it. */
html[dir="rtl"] .rating-labels span:last-child { text-align: left; }
html[dir="rtl"] .rating-labels.grid5 .rl-low { text-align: right; }
html[dir="rtl"] .rating-labels.grid5 .rl-high { text-align: left; }

/* ---------- language switch (welcome screen only) ---------- */
.lang-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
}
.lang-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 7px 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-btn:hover { border-color: var(--gold-dim); color: var(--text-primary); }
.lang-btn.active {
  border-color: var(--gold-primary);
  color: var(--gold-light);
  background: var(--gold-soft);
}
.lang-btn[lang="ar"] { font-family: "Noto Sans Arabic", var(--font-body); }

/* ---- researcher test-run banner (?test=1) -------------------------------------------
   Deliberately unlovely. It has to be impossible to mistake for part of the survey, and
   impossible to miss if a real respondent ever lands on the test link by accident. */
#test-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 8px 14px;
  background: #7f1d1d;
  color: #fff;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
html[dir="rtl"] #test-banner { letter-spacing: 0; text-transform: none; }

/* Build tag in the footer. Present so a tester can say which build they are on; quiet
   enough that a respondent never reads it as part of the survey. */
.build-tag {
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}