/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
  color: #222;
}

/* Layout: ensure footer stays at bottom */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#jspsych-content {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#jspsych-content.general-msi {
    max-width: none !important;
}

/* ── jsPsych progress bar ─────────────────────────────────────────────── */
.jspsych-progressbar-container {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}

.jspsych-progressbar {
  width: 100% !important;
  height: 10px;
  background-color: #f5f5f5;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 !important;
}

.jspsych-progress {
  background-color: #4f81bd;
  height: 100%;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  background: #59118e;
  padding: 1rem 2rem;
  display:flex; 
  align-items:center;
}

.site-title {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.site-title:hover {
  text-decoration: underline;
}

.NUMusic-logo {
  height:48px; 
  margin-left:auto; 
  width:auto;
}

.NoiseLab-logo {
  height:40px; 
  width:auto;
  margin-right:1rem;
}

.NoiseLab-logo:hover {
  opacity: 0.8;
}

/* ── Main content ─────────────────────────────────────────────────────────── */
main {
  max-width: 3500px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  flex: 1 0 auto;
}

#jspsych-target,
.jspsych-display-element {
  margin-top: 0;
}

/* —— Consent Form Formatting ———————————————————————————————————————————————— */
.consent-form {
  display: block;
  justify-content: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 1000px;
  margin: 2rem auto;
  text-align: left !important;
}


/* ── Hero section ─────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* ── Experiment cards ─────────────────────────────────────────────────────── */
.experiment-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
}

.experiment-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.experiment-card h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.experiment-card p {
  color: #555;
  font-size: 0.95rem;
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1.2rem;
  background: #59118e;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.btn:hover {
  background: #836eaa;
}

/* ── Table (Matrix) Formatting (Mostly For Gold-MSI) ───────────────────────────────────────────────── */
/* header text */
.sd-matrix__table th span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 100% !important;
    white-space: nowrap;
    text-align: right;
    font-weight: bold;
    display: inline-block;
    vertical-align: bottom;
}

.sd-table__cell.sd-table__cell--header{
  width: 20px !important;
}

.sd-table__cell--header{
  vertical-align: bottom !important;
}
.sd-matrix__table tbody tr:nth-child(even) td.sd-table__cell.sd-matrix__cell.sd-table__cell--row-text {
    background-color: #f2f2f2;
}

.sd-matrix__table td.sd-table__cell.sd-matrix__cell.sd-table__cell--row-text {
    width: 1000px !important;
}

.sd-matrix__table td.sd-table__cell.sd-matrix__cell.sd-table__cell--row-text span {
    display: block;
    width: 100% !important;
    white-space: normal !important;
}


.sd-matrix__table thead th,
.sd-matrix__table tbody td:not(.sd-table__cell--row-text) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 80px !important;
    padding: 0.35rem !important;
}

.sd-matrix__table tbody td:not(.sd-table__cell--row-text) > div,
.sd-matrix__table tbody td:not(.sd-table__cell--row-text) span {
    width: 100% !important;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.test .jspsych-survey-multi-choice-question {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.test .jspsych-survey-multi-choice-option {
    line-height: 2;
    margin-top: 12%;
    text-align: center;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  background: #59118e;
  color: #fff;
  text-align: left;
  padding: 1rem;
  margin-top: 2rem;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-link:hover {
  text-decoration: underline;
}