/* experiment.css — styles beyond jsPsych's defaults. The two social-display plugins carry their
   own <style> blocks (prefixes sd- / st-); the decision screen (fd-) and the feedback flash
   (feedback) are styled here because scripts.js renders the feedback. */

/* jspsych.css only styles the jsPsych display element; screens we draw ourselves (study full,
   error, thank-you) sit outside it, so give the whole page the same font. */
body {
  font-family: 'Open Sans', 'Arial', sans-serif;
}

.standalone-message,
.dev-panel {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  text-align: center;
  line-height: 1.5;
}

/* developer-only elements */
.dev-panel table {
  margin: 1rem auto;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}
.dev-panel th,
.dev-panel td {
  padding: 0.3rem 0.8rem;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}
.dev-panel th {
  color: #555;
  font-weight: 600;
  white-space: nowrap;
}
.dev-panel pre {
  text-align: left;
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  overflow-x: auto;
}
.dev-detail {
  color: #888;
  font-size: 0.85rem;
}

/* a phase intro screen (learn / do / test) */
.phase-intro {
  max-width: 700px;
  margin: 2rem auto;
  line-height: 1.5;
}

/* E7 · S1 consent form (read left-aligned, like a document) and S2 cover story */
.consent {
  max-width: 1000px;
  margin: 1.5rem auto 0;
  text-align: left;
  line-height: 1.5;
  font-size: 0.95rem;
}
.story {
  max-width: 800px;
  margin: 0.5rem auto;
  line-height: 1.6;
}
/* sizes chosen so that the longest version (generation ≥ 2: two pictures, three paragraphs)
   fits a 1280 × 900 window with the Continue button in view */
.story-picture {
  display: block;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  border-radius: 8px;
}
/* the woman's picture sits between ¶2 and her paragraph (2026-09-24 12:08) */
.story-woman {
  width: auto; /* the drawing is portrait-shaped */
  height: 160px;
  margin: 0.25rem auto;
}

/* E7 · S15 strategy question + demographics (one form, read left-aligned) and S16 debrief */
.demographics {
  max-width: 760px;
  margin: 0.5rem auto 0.5rem;
  text-align: left;
  line-height: 1.4;
}
.dg-question {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.dg-question legend,
.dg-label {
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.2rem;
}
.dg-question input[type='text'],
.dg-question textarea {
  font: inherit;
  font-weight: 400;
  margin-top: 0.2rem;
  padding: 0.3rem 0.4rem;
}
/* one option per line: the box, then the label as a block, so a wrapped label indents */
.dg-option {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 400;
  margin: 0.05rem 0;
}
/* the strategy question: one row per feature, its two values side by side */
.dg-strategy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
.debrief {
  max-width: 900px;
  margin: 1.5rem auto 0;
  text-align: left;
  line-height: 1.5;
}

/* the one-flower decision screen (jspsych-flower-decision.js) — optionally with side panels */
.fd-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  flex-wrap: wrap;
}
.fd-center {
  width: 440px; /* fixed, so the side panels sit at the same place on the decision and feedback screens */
  box-sizing: border-box;
}
.fd-aside {
  width: 300px;
}
.fd-trial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-height: 420px; /* same height as the feedback screen, so nothing jumps between them */
}
.fd-prompt {
  font-size: 1.35rem;
  margin: 0 0 0.4rem;
}
.fd-flower {
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

/* the learning bins (E6b, Q-E3): "turned out good to eat" / "turned out not good to eat" */
.lb-bin {
  width: 300px;
  min-height: 420px;
  border: 2px dashed #ccc;
  padding: 10px;
  background: #fafafa;
  box-sizing: border-box;
}
.lb-bin h3 {
  margin: 4px 0 10px;
  font-size: 15px;
}
.lb-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lb-item {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 2px solid #ddd;
  padding: 2px;
  background: #fff;
  box-sizing: border-box;
}
.fd-counter {
  color: #888;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0;
}
.fd-buttons {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.6rem;
}
.fd-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
/* the two answers are full sentences ("Probably poisonous, I should leave it." — 2026-09-24
   12:35), so each button has a fixed width inside the 440 px column and wraps onto two
   balanced lines */
.fd-btn {
  width: 200px;
  min-height: calc(2 * 1.3em + 1rem + 2px); /* two lines + padding + border: a one-line answer ("Edible, I will eat it.") stays as tall as its neighbour */
  font-size: 1rem;
  line-height: 1.3;
  padding: 0.5rem 0.8rem;
  white-space: normal;
  text-wrap: balance;
}
.fd-hint {
  display: block;
  text-align: center; /* two lines: "(Click button / or press ←)" — 2026-09-24 12:58 */
  color: #888;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* feedback after a learning decision */
.feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-height: 420px;
  padding-top: 3rem; /* = prompt height + gaps, so the flower stays where it was on the decision screen */
}
.feedback-flower {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border: 3px solid transparent;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  z-index: 5; /* flies over the bins */
}
.feedback.correct .feedback-flower { border-color: #2e8b57; }
.feedback.wrong .feedback-flower { border-color: #c0392b; }
.feedback-mark {
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
}
.feedback.correct .feedback-mark { color: #2e8b57; }
.feedback.wrong .feedback-mark { color: #c0392b; }
.feedback p {
  font-size: 1.15rem;
  margin: 0;
}