/* BrainStorm Design System 2.0 — AI Experiment Site */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand colors */
  --alpine:     #23403b;
  --salt:       #f6f4ed;
  --yellow:     #f1f14d;
  --carbon:     #000000;
  --arches:     #b47351;
  --canyonlands:#6c372e;
  --timpanogos: #3f2d39;
  --sage:       #a2a882;
  --uinta:      #43573d;
  --wasatch:    #5a87c3;
  --bonneville: #9ebbd0;
  --albion:     #fff1b0;
  --ember:      #b83228;

  /* Typography */
  --font: 'DM Sans', sans-serif;

  /* Border radius */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);

  /* Transitions */
  --t-fast:   100ms ease;
  --t-base:   160ms ease;
  --t-slow:   280ms ease;
  --t-spring: 220ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--carbon);
  background: var(--salt);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  background: var(--alpine);
  min-height: 66px;
  padding: 0 var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-logo {
  height: 17px;
  width: auto;
  display: block;
}

.site-header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--salt);
  white-space: nowrap;
}

/* ── Progress indicator ─────────────────────────────────────── */
.progress-bar-wrap {
  height: 12px;
  background: rgba(35,64,59,.15);
  width: 100%;
}

.progress-bar {
  height: 12px;
  background: var(--arches);
  transition: width var(--t-slow);
  width: 0%;
}

.progress-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arches);
  text-align: center;
  padding: var(--sp-2) 0 0;
}

/* ── Main layout ─────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px var(--sp-6) var(--sp-16);
  width: 100%;
}

.screen { display: none; width: 100%; max-width: 1100px; margin: 0 auto; }
.screen.active { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
}

.card-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arches);
  margin-bottom: var(--sp-2);
}

/* ── Typography ─────────────────────────────────────────────── */
h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--alpine);
}

h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--alpine);
}

h3 {
  font-size: 26px;
  font-weight: 600;
  color: var(--alpine);
}

h4 {
  font-size: 21px;
  font-weight: 600;
  color: var(--alpine);
}

p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: #2a2a2a;
}

/* ── Welcome screen ─────────────────────────────────────────── */
.welcome-hero {
  background: var(--alpine);
  border-radius: var(--radius-card);
  padding: var(--sp-16) var(--sp-10);
  color: var(--salt);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.welcome-hero h1 {
  color: var(--salt);
  margin-bottom: var(--sp-6);
}

.welcome-hero p {
  color: rgba(246,244,237,.75);
  font-size: 17px;
  max-width: 660px;
  margin: 0 auto var(--sp-10);
}

/* ── Embed containers ───────────────────────────────────────── */
.embed-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow-md);
}

/* 16:9 for videos */
.embed-wrap.video {
  aspect-ratio: 16 / 9;
}

/* Tall for PDFs and forms */
.embed-wrap.pdf,
.embed-wrap.form {
  min-height: 620px;
}

.embed-wrap iframe,
.embed-wrap embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Blocks clicks on the Vimeo logo in the player bar */
.vimeo-logo-block {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90px;
  height: 40px;
  z-index: 2;
}

/* Placeholder state when src not set */
.embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: #f3f3f3;
  color: #888;
  font-size: 14px;
  font-weight: 400;
}

.embed-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: .4;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base), transform var(--t-spring);
  outline: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(90,135,195,.35);
}

.btn:active { transform: scale(0.97); }

/* Primary */
.btn-primary {
  background: var(--alpine);
  color: var(--salt);
}
.btn-primary:hover {
  background: #1a3330;
  box-shadow: var(--shadow-sm);
}
.btn-primary:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary on dark bg (yellow) */
.btn-primary-dark {
  background: var(--yellow);
  color: var(--carbon);
}
.btn-primary-dark:hover {
  background: #e8e83a;
  box-shadow: var(--shadow-sm);
}

/* Ghost / outline */
.btn-ghost {
  background: transparent;
  color: var(--alpine);
  border: 1.5px solid var(--alpine);
}
.btn-ghost:hover {
  background: rgba(35,64,59,.06);
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Navigation row ─────────────────────────────────────────── */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  max-width: 1100px;
  padding: var(--sp-4) 0 var(--sp-6);
}

.nav-row .btn-ghost { visibility: hidden; }
.nav-row .btn-ghost.visible { visibility: visible; }

.nav-row .btn-primary:disabled {
  background: #7e8e8a;
  color: #f6f4ed;
  opacity: 0.85;
}

/* ── Debrief screen ─────────────────────────────────────────── */
.debrief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.debrief-item {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
  border-top: 3px solid var(--arches);
}

.debrief-item .debrief-type {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arches);
  margin-bottom: var(--sp-2);
}

.debrief-item h4 {
  font-size: 17px;
  margin-bottom: var(--sp-2);
}

.debrief-item p {
  font-size: 14px;
  color: #555;
}

.debrief-reflection {
  background: linear-gradient(180deg, #fffdf8 0%, #f8f3e7 100%);
  border: 1px solid rgba(180,115,81,.18);
}

.debrief-reflection h3 {
  margin-bottom: var(--sp-3);
}

.debrief-reflection p {
  width: 100%;
  max-width: 92ch;
  color: #4f4c46;
}

.debrief-reflection p + p {
  margin-top: var(--sp-3);
}

.debrief-feedback-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.debrief-feedback-prompt {
  max-width: 720px;
}

.debrief-feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.debrief-feedback-textarea {
  min-height: 140px;
}

.debrief-feedback-actions {
  display: flex;
  justify-content: flex-start;
}

.debrief-feedback-success {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.debrief-feedback-success-icon .survey-confirmed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.debrief-feedback-success h3 {
  font-size: 22px;
  margin-bottom: var(--sp-2);
}

.debrief-feedback-success p {
  color: #555;
  max-width: 560px;
}

.debrief-details {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(35,64,59,.08);
}

.debrief-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--alpine);
}

.debrief-details summary:hover {
  color: var(--arches);
}

.debrief-details ul {
  margin: var(--sp-3) 0 0;
  padding-left: 18px;
  color: #5a5955;
}

.debrief-details li + li {
  margin-top: 8px;
}

.debrief-details li {
  font-size: 13px;
  line-height: 1.5;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-top: var(--sp-3);
}

.badge-ai     { background: rgba(90,135,195,.15); color: var(--wasatch); }
.badge-human  { background: rgba(67,87,61,.15);  color: var(--uinta); }
.badge-hybrid { background: rgba(180,115,81,.15); color: var(--arches); }

/* ── Thank you screen ───────────────────────────────────────── */
.thankyou-hero {
  background: var(--alpine);
  border-radius: var(--radius-card);
  padding: var(--sp-20) var(--sp-10);
  color: var(--salt);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.thankyou-hero h2 { color: var(--yellow); margin-bottom: var(--sp-4); }
.thankyou-hero p  { color: rgba(246,244,237,.8); font-size: 17px; max-width: 520px; margin: 0 auto; }

/* ── Survey forms ────────────────────────────────────────────── */
.survey-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.survey-question {
  border-bottom: 1px solid rgba(35,64,59,.08);
  padding-bottom: var(--sp-6);
}

.survey-question:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.survey-question--locked {
  opacity: 0.5;
  pointer-events: none;
}

.question-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--alpine);
  margin-bottom: var(--sp-4);
  line-height: 1.4;
}

.required-mark {
  color: var(--ember);
  margin-left: 3px;
  font-weight: 700;
}

.multi-hint-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--alpine);
  background: rgba(35,64,59,.08);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-top: calc(-1 * var(--sp-3));
  margin-bottom: var(--sp-3);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Likert scale */
.likert-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.likert-label {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  white-space: nowrap;
  min-width: 96px;
}

.likert-label--high {
  text-align: right;
}

.likert-options {
  display: flex;
  gap: var(--sp-2);
  flex: 1;
  justify-content: center;
}

.likert-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.likert-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.likert-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(35,64,59,.2);
  font-size: 15px;
  font-weight: 500;
  color: var(--alpine);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.likert-option input[type="radio"]:checked + .likert-btn {
  background: var(--alpine);
  color: var(--salt);
  border-color: var(--alpine);
  box-shadow: var(--shadow-sm);
}

.likert-option:hover .likert-btn {
  border-color: var(--alpine);
  background: rgba(35,64,59,.06);
}

.likert-option input[type="radio"]:checked + .likert-btn:hover,
.likert-option:has(input:checked):hover .likert-btn {
  background: #1a3330;
}

/* Radio group (multiple choice pills) */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-option span {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(35,64,59,.2);
  font-size: 14px;
  font-weight: 500;
  color: var(--alpine);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
  background: #fff;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.radio-option input[type="radio"]:checked + span {
  background: var(--alpine);
  color: var(--salt);
  border-color: var(--alpine);
  box-shadow: var(--shadow-sm);
}

.radio-option:hover span {
  border-color: var(--alpine);
  background: rgba(35,64,59,.06);
}

.radio-option:has(input:checked):hover span {
  background: #1a3330;
  color: var(--salt);
}

/* Open text */
.survey-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(35,64,59,.2);
  border-radius: var(--radius-input);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  color: var(--carbon);
  background: #fff;
  resize: vertical;
  transition: border-color var(--t-base);
  line-height: 1.5;
}

.survey-textarea:focus {
  outline: none;
  border-color: var(--alpine);
}

.survey-textarea::placeholder { color: #bbb; }

/* Matrix question */
.matrix-question .question-text {
  margin-bottom: var(--sp-4);
}

.matrix-wrap {
  display: flex;
  flex-direction: column;
}

.matrix-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(35,64,59,.1);
}

.matrix-footer-spacer {
  flex: 1;
}

.matrix-footer-labels {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc(5 * 42px + 4 * var(--sp-2));
}

.matrix-extreme {
  font-size: 11px;
  font-weight: 500;
  color: #999;
  white-space: nowrap;
}

.matrix-extreme--high { text-align: right; }

.matrix-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(35,64,59,.06);
}

.matrix-row:last-child { border-bottom: none; }

.matrix-row-text {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  margin: 0;
}

.matrix-row-scale {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-cell input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.matrix-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(35,64,59,.2);
  font-size: 13px;
  font-weight: 500;
  color: var(--alpine);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
  background: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.matrix-cell input[type="radio"]:checked + .matrix-btn {
  background: var(--alpine);
  color: var(--salt);
  border-color: var(--alpine);
  box-shadow: var(--shadow-sm);
}

.matrix-cell:hover .matrix-btn {
  border-color: var(--alpine);
  background: rgba(35,64,59,.06);
}

.matrix-cell:has(input:checked):hover .matrix-btn {
  background: #1a3330;
  color: var(--salt);
}

/* Checkbox group (multi-select pills) */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.checkbox-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-option span {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(35,64,59,.2);
  font-size: 14px;
  font-weight: 500;
  color: var(--alpine);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
  background: #fff;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.checkbox-option input[type="checkbox"]:checked + span {
  background: var(--alpine);
  color: var(--salt);
  border-color: var(--alpine);
  box-shadow: var(--shadow-sm);
}

.checkbox-option:hover span {
  border-color: var(--alpine);
  background: rgba(35,64,59,.06);
}

.checkbox-option:has(input:checked):hover span {
  background: #1a3330;
  color: var(--salt);
}

/* "Other" free-text input inside checkbox group */
.checkbox-other-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.other-text-input {
  width: 220px;
  padding: 7px var(--sp-3);
  border: 1.5px solid rgba(35,64,59,.2);
  border-radius: var(--radius-input);
  font: inherit;
  font-size: 14px;
  color: var(--alpine);
  background: #fff;
  outline: none;
  transition: border-color var(--t-base);
}

.other-text-input:focus {
  border-color: var(--alpine);
}

/* Reveal note card */
.survey-note-card {
  background: rgba(35,64,59,.07);
  border-left: 3px solid var(--alpine);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}

.survey-note-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--alpine);
  line-height: 1.5;
  margin: 0;
}

/* Gated reveal section */
.survey-gated-section {
  display: none;
}

.survey-gated-section--open {
  display: block;
  animation: gate-reveal 0.4s ease both;
}

@keyframes gate-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submit row */
.survey-submit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(35,64,59,.08);
}

.survey-submit-note {
  font-size: 13px;
  color: #aaa;
}

/* Confirmation card */
.survey-confirmed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-20) var(--sp-10);
  gap: var(--sp-4);
}

.survey-confirmed-icon svg {
  width: 56px;
  height: 56px;
  stroke: var(--uinta);
}

.survey-confirmed-card h3 { color: var(--alpine); }

.survey-confirmed-card p {
  max-width: 420px;
  color: #555;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }

  .welcome-hero { padding: var(--sp-10) var(--sp-6); }
  .welcome-hero p { font-size: 15px; }

  .card { padding: var(--sp-5); }

  .debrief-grid {
    grid-template-columns: 1fr;
  }

  .debrief-feedback-success {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-row { flex-direction: row; }

  .likert-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .likert-label { min-width: auto; }

  .likert-options { width: 100%; }

  .likert-btn { width: 42px; height: 42px; }
}