/* Base */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reserve the scrollbar gutter permanently, so the card (and the slider in it)
   is the same width on every screen whether or not the page scrolls. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 20px;
  background: #f4f4f4;
  font-family: Georgia, 'Times New Roman', serif;
  color: #222;
  line-height: 1.7;
}

#container {
  max-width: 700px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 48px 56px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* Screen visibility */
.screen {
  display: none;
}
.screen.active {
  display: block;
}

/* Typography */
h1 {
  font-size: 1.9em;
  font-weight: normal;
  margin-bottom: 4px;
  color: #1a1a1a;
}

h2 {
  font-size: 1.45em;
  font-weight: normal;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: #1a1a1a;
}

.subtitle {
  color: #666;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 28px;
}

p {
  margin-bottom: 16px;
}

/* Trial progress badge */
.trial-progress {
  font-size: 0.7em;
  color: #888;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
}

/* Trial progress bar — tracks valid (non-spoiled) completions, not the trial's
   position in the block, so requeued trials never make it look like progress
   moved backward. */
.trial-progress-bar {
  display: inline-block;
  width: 120px;
  height: 6px;
  margin-left: 8px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}

.trial-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #888;
  transition: width 0.2s ease;
}

/* Instruction box */
.instruction-box {
  background: #f6f6f6;
  border-left: 4px solid #555;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 1.05em;
}

/* Consent screen */
.consent-embed {
  border: 1px solid #ddd;
  margin: 20px 0;
}

.consent-embed embed {
  display: block;
  width: 100%;
}

.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 20px 0;
  font-size: 0.95em;
}

.consent-checkbox-row input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}

.btn-primary:disabled {
  background: #bbb;
  cursor: not-allowed;
}

/* Sticky stimulus banner */
#stimulus-banner {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 2px solid #ddd;
  padding: 14px 0 10px;
  margin: -48px -56px 20px;
  padding-left: 56px;
  padding-right: 56px;
  z-index: 10;
  text-align: center;
}

#stimulus-word {
  font-size: 1.5em;
  margin: 4px 0 6px;
  color: #1a1a1a;
}

/* The question about the second trait is set at the same size as the sentence
   about the first, and the trait itself sits centred on a line of its own. */
#stimulus-question {
  font-size: 1.5em;
  line-height: 1.4;
  margin: 0;
  color: #1a1a1a;
}

/* Fixed line height, so that the slider sits at the same height on every
   trial whatever the length of the trait word. */
#dv-line {
  font-size: 1.5em;
  line-height: 1.4;
  min-height: 1.4em;
  margin: 0 0 4px;
  text-align: center;
  color: #1a1a1a;
}

#stimulus-word strong,
#dv-line strong {
  color: #1a1a1a;
}

/* Instructions — response procedure */
.procedure-list {
  margin: 16px 0 20px;
  padding-left: 24px;
}

.procedure-list li {
  margin-bottom: 16px;
}

.instruction-emphasis {
  background: #f6f6f6;
  border-left: 4px solid #555;
  padding: 14px 18px;
  margin: 20px 0;
}

/* The response is irreversible the moment the pointer meets the scale, which is
   the one thing a participant cannot discover safely by trying it. Same shape as
   .instruction-emphasis, in the red already used by .error rather than a new
   colour. Instruction screens only — a standing red warning on the trial screen
   would sit in the region the trait appears in, and inviting caution there would
   inflate the latency this design exists to measure. */
.instruction-warning {
  background: #fdf3f2;
  border-left: 4px solid #c0392b;
  color: #a5321f;
  padding: 14px 18px;
  margin: 20px 0;
}

.instruction-warning strong {
  color: #c0392b;
}

/* Inline red, for the one phrase in the numbered procedure that the whole
   design depends on being obeyed. Not a box — it sits inside a list item — but
   it carries the same background as .instruction-warning so that the two things
   drawn in this red on the instruction screens read as one warning. */
.text-alert {
  color: #c0392b;
  background: #fdf3f2;
  padding: 1px 4px;
}

/* --- Still copy of the slider, on the instructions page ------------------- */

.scale-figure {
  margin: 20px 0 24px;
  padding: 20px 24px 8px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

/* A reference picture beside the text, not something to be used. Narrower
   than the live slider so the anchors, centred on 0 and 100, stay inside the
   figure's border. */
.scale-figure .slider-scale {
  max-width: 400px;
  pointer-events: none;
}

/* Screen readers get the figcaption instead of the drawing. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Rating response area */
#rating-container {
  margin: 32px 0 28px;
}

/* Nothing inside the rating screen may be selected or dragged as content: a
   text selection started while dragging the slider would look broken. */
#screen-rating {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* --- The slider ----------------------------------------------------------- */

/* A plain horizontal 0-100 slider with the ring version's scale marks under it:
   ticks and numerals at 0, 25, 50, 75 and 100, and the verbal anchors under
   the two ends. There is no numeric readout.

   The native range input is restyled so the thumb has the same width in every
   browser. That width matters: the thumb's centre travels from half a thumb in
   from the left edge to half a thumb in from the right, so the tick and numeral
   rows are inset by exactly --thumb / 2 on each side to sit under the values
   they label. */
.slider-scale {
  --thumb: 18px;
  max-width: 520px;
  margin: 8px auto 0;
}

.rating-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.rating-slider:focus {
  outline: none;
}

.rating-slider:focus-visible {
  outline: 2px solid #8f8f8f;
  outline-offset: 4px;
}

/* Track — same tone and thickness as the ring's track. */
.rating-slider::-webkit-slider-runnable-track {
  height: 6.75px;
  background: #dcdcdc;
  border-radius: 4px;
}

.rating-slider::-moz-range-track {
  height: 6.75px;
  background: #dcdcdc;
  border-radius: 4px;
}

.rating-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((6.75px - var(--thumb)) / 2);
  border-radius: 50%;
  background: #4a4a4a;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #9a9a9a;
}

.rating-slider::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  box-sizing: border-box;
  border-radius: 50%;
  background: #4a4a4a;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #9a9a9a;
}

.rating-slider:active::-webkit-slider-thumb {
  background: #1a1a1a;
  cursor: grabbing;
}

.rating-slider:active::-moz-range-thumb {
  background: #1a1a1a;
  cursor: grabbing;
}

/* The disabled copy on the instructions page should look like the live one. */
.rating-slider:disabled {
  cursor: default;
}

.slider-ticks,
.slider-numbers {
  position: relative;
  margin: 0 calc(var(--thumb) / 2);
}

.slider-ticks {
  height: 12px;
  margin-top: 4px;
}

.slider-ticks span {
  position: absolute;
  top: 0;
  width: 1.5px;
  height: 7px;
  margin-left: -0.75px;
  background: #b0b0b0;
}

.slider-numbers {
  height: 1.4em;
}

.slider-numbers span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: #555;
  font-size: 0.85em;
  line-height: 1.4;
}

/* Darker than the numerals: the words say what the scale means, the numerals
   only index it. Inset like the numerals and centred on the same points, so
   each anchor sits directly under its 0 or 100; the ends of the words hang out
   past the slider into the card's padding. */
.slider-anchors {
  position: relative;
  height: 1.4em;
  margin: 4px calc(var(--thumb) / 2) 0;
  color: #333;
  font-size: 0.85em;
  font-style: italic;
}

.slider-anchors span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  line-height: 1.4;
  white-space: nowrap;
}

.rating-submit-row {
  text-align: center;
}

/* --- Modal alert ---------------------------------------------------------- *

   Covers the page and clears only on the button, so the message has to be
   read before going on. */

.alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}

.alert-box {
  background: #fff;
  border-top: 5px solid #c0392b;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  padding: 26px 30px 24px;
  max-width: 460px;
  text-align: center;
}

.alert-title {
  color: #c0392b;
  margin: 0 0 12px;
}

#alert-text {
  margin: 0 0 22px;
}

/* Buttons */
.btn-primary {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 30px;
  background: #4a4a4a;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #333;
}

.btn-primary:active {
  background: #222;
}

/* Back, on the instruction pages. Same geometry and type as .btn-primary but
   outlined, so re-reading is offered without competing with going forward. */
.btn-secondary {
  display: inline-block;
  margin-top: 20px;
  padding: 11px 22px;
  background: transparent;
  color: #4a4a4a;
  border: 1px solid #bbb;
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-secondary:hover {
  background: #f0f0f0;
  border-color: #999;
}

.btn-secondary:active {
  background: #e6e6e6;
}

/* The debriefing link on the done screen wears .btn-secondary. An anchor is not
   a button: it arrives underlined and in the user agent's link colour, so both
   are turned off here to match the buttons above. */
a.btn-secondary {
  text-decoration: none;
  color: #4a4a4a;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.button-row .btn-primary,
.button-row .btn-secondary {
  margin-top: 0;
}

/* Error messages */
.error {
  color: #c0392b;
  font-size: 0.9em;
  margin-top: 8px;
}

/* Done screen */
.done-note {
  color: #777;
  font-size: 0.9em;
  font-style: italic;
  margin-top: 16px;
}

/* Demographics survey */
.survey-question {
  background: #f7f7f7;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 0.95em;
}

.survey-prompt {
  font-weight: bold;
  margin: 0 0 10px;
}

.survey-question label {
  display: block;
  margin-bottom: 4px;
  cursor: pointer;
}

.survey-question label input[type="radio"] {
  margin-right: 6px;
}

#survey-age {
  font-family: Georgia, serif;
  font-size: 1em;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 120px;
}

#survey-feedback {
  display: block;
  width: 100%;
  font-family: Georgia, serif;
  font-size: 1em;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  resize: vertical;
}

.survey-optional {
  font-weight: normal;
  color: #777;
}

/* Responsive */
@media (max-width: 600px) {
  #container {
    padding: 28px 20px;
    margin: 10px auto;
  }

  #stimulus-word,
  #stimulus-question,
  #dv-line {
    font-size: 1.3em;
  }

  .slider-anchors {
    font-size: 0.8em;
  }
}