/* Layout the survey pages add on top of the Candrecovia design system. Every value is a token. */

.surveyPage { display: grid; gap: var(--space16); }

.surveyTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space16);
}

.surveyWho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space12);
  min-inline-size: 0;
}

.surveyWho .textSm { overflow-wrap: anywhere; }

.surveyLead { color: var(--textSecondary); max-inline-size: var(--measure); margin-top: var(--space8); }

#main { display: grid; gap: var(--space16); }
#main > .pageHeader { margin-bottom: 0; }

.surveyGuide > summary { cursor: pointer; list-style-position: inside; }
.surveyGuide ul { padding-inline-start: var(--space20); }

/* The bar stays in view while the pairs scroll under it. */
.surveyProgress {
  position: sticky;
  top: 0;
  z-index: var(--zSticky);
  padding: var(--space12) var(--space16);
  background: var(--surfaceRaised);
  border: var(--borderWidth) solid var(--borderSubtle);
  border-radius: var(--radiusLg);
}

.surveyProgress .progressRowMeta { display: flex; justify-content: space-between; gap: var(--space16); }

.surveyPair { scroll-margin-top: var(--space80); }

.surveyTexts {
  display: grid;
  gap: var(--space16);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  margin-bottom: var(--space20);
}

.surveyTexts > div { min-inline-size: 0; }

.surveyTextTitle {
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--textSecondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.surveyYears { font-weight: 600; margin-block: var(--space4) var(--space8); }

.surveyText {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-block-size: 26rem;
  overflow: auto;
  padding: var(--space12);
  background: var(--surfaceSunken);
  border: var(--borderWidth) solid var(--borderSubtle);
  border-radius: var(--radiusMd);
  font-size: var(--textSm);
  line-height: 1.55;
}

.surveyGrade { margin-bottom: var(--space16); }
.surveyGrade .swatchCards { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

.surveyList { display: grid; gap: var(--space12); margin: 0; padding: 0; list-style: none; }

/* A note is a sentence or two; the system default height suits a longer message. */
.surveyPair .textarea { min-block-size: 4.5rem; }

/* The guide folds away once grading starts; the word says it opens. */
.surveyGuide > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
.surveyGuide > summary::-webkit-details-marker { display: none; }
.surveyGuide > summary::after { content: 'Show'; color: var(--accentText); font-size: var(--textSm); font-weight: 600; }
.surveyGuide[open] > summary::after { content: 'Hide'; }