/* Study display: the main display in its Editorial style, plus a prompt above
   the output line, a Next pill across the bottom bar (the mirror of Back on
   rating screens), and a sheet over the keyboard for the rating scale and the
   summaries. Layout boxes are fixed so G never moves between
   screens (display.js only re-measures it on resize). */

/* the study fixes every setting: hide the settings row and style switch */
.study-body .settings-row,
.study-body .theme-toggle,
.study-body .touchpad-hint,
.study-body .lan-badge,
.study-body .letter-badge {
  display: none !important;
}

.study-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.study-info-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.1;
}

.study-info-detail {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* prompt: fixed height, so the output line and keyboard stay put. Screens
   without typing have an empty output line, so their longer content may run
   on into it (overflow stays visible). */
.study-prompt {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min(95%, 1260px);
  height: clamp(80px, 11vh, 140px);
  text-align: center;
}

/* the prompt takes vertical room from the page, so the output line sits a
   little closer to the keyboard than on the main display */
.study-body .text-row {
  margin-bottom: 3vmin;
}

/* layout: less air above (a third of the free space instead of half), and
   room below the keyboard for the Next bar, which display.js places under
   the last row (to 2.25 key heights below G) outside the keyboard's box */
.study-body .display-stage {
  padding: 2.5vmin 4vmin;
}

.study-body .display-frame::before {
  flex-grow: 0.5;
}

.study-body .keyboard-shell {
  padding-bottom: calc(var(--key-height) * 0.85);
}

.study-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  min-height: 1em;
}

.study-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vmin, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

/* while typing, the target phrase reads as the page's headline, set a touch
   softer than the typed line below it */
.study-body.is-trial .study-title {
  color: var(--ink-soft);
}

.study-sub {
  max-width: 44rem;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.study-sub:empty,
.study-status:empty {
  display: none;
}

.study-sub strong {
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
}

.study-status {
  font-size: 13px;
  color: var(--ed-red, #d6452b);
}

.study-stats {
  display: inline-flex;
  gap: 2.4em;
}

.study-stats b {
  font-weight: 400;
}

.study-stats span {
  margin-left: 0.35em;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* participant setup (experimenter, keyboard and mouse) */
.study-setup[hidden] {
  display: none;
}

.study-setup {
  display: flex;
  border: 1px solid var(--ink);
}

.study-begin,
.study-resume {
  height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 0;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  cursor: pointer;
}

.study-begin:hover:not(:disabled) {
  background: #2b2b2b;
}

.study-resume {
  border-left: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.study-resume[hidden] {
  display: none;
}

.study-resume:hover:not(:disabled) {
  background: rgba(17, 17, 17, 0.06);
}

.study-begin:disabled,
.study-resume:disabled {
  opacity: 0.4;
  cursor: default;
}

/* screens without typing: the keyboard stays as a quiet backdrop */
.study-body.is-dim .keyboard-row,
.study-body.is-dim .candidate-strip {
  opacity: 0.22;
  transition: opacity 200ms ease;
}

/* Next: the whole bottom bar while typing and on single-choice screens. No
   frame, just the word: the whole band is Next. Hover shades the band. */
.study-body .action-pill {
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.4vmin, 1.4rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  transition: background-color 140ms ease, color 140ms ease;
}

.action-next {
  cursor: default;
}

.action-pill[hidden] {
  display: none;
}

.action-pill.is-target {
  cursor: pointer;
}

.action-pill.is-disabled {
  opacity: 0.35;
}

.study-body.is-pointer .action-pill.is-hover,
.study-body .action-next.is-hover {
  background: rgba(17, 17, 17, 0.07);
  color: var(--ink);
}

.action-pill.is-shake {
  animation: study-shake 280ms ease;
}

@keyframes study-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* rating sheet: lies over the keyboard rows; the scale is a row of ruled
   cells in the key grid's hairline style */
.study-sheet[hidden] {
  display: none;
}

.study-sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background: var(--ed-paper, #faf8f3);
}

.study-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.study-scale {
  display: flex;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.study-cell {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: var(--key-height, 10vmin);
  max-height: 112px;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3.6vmin, 2.3rem);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.study-cell + .study-cell {
  border-left: 1px solid rgba(17, 17, 17, 0.15);
}

.study-cell.is-hover {
  background: rgba(17, 17, 17, 0.08);
}

.study-cell.is-selected {
  background: var(--ink);
  color: #ffffff;
}

/* pause: a plain paper veil over the prompt */
.study-body.is-paused .study-prompt::after {
  content: "Paused";
  position: absolute;
  inset: 0 0 -60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ed-paper, #faf8f3);
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vmin, 3.2rem);
  font-style: italic;
}

.study-body.is-paused .keyboard-shell {
  opacity: 0.22;
}

/* the text equals the phrase: a short green beat before the next one */
.study-body {
  --study-green: #2f7d4a;
}

.study-body .decoded-text {
  transition: color 160ms ease;
}

.study-body.is-matched .decoded-text {
  color: var(--study-green);
}

/* screens with nothing to point at hide the cursor */
.study-body[data-screen="feedback"] .cursor-marker,
.study-body[data-screen="end"] .cursor-marker,
.study-body[data-screen="setup"] .cursor-marker {
  visibility: hidden;
}

/* a mismatching Next asks once more */
.study-body .action-next.is-confirm {
  color: var(--ed-red, #d6452b);
}

.study-body .action-next.is-confirm.is-hover {
  background: rgba(214, 69, 43, 0.08);
}

/* summaries on the sheet: numbers in the serif, labels in small caps */
.study-sheet.is-feedback,
.study-sheet.is-summary,
.study-sheet.is-end {
  align-items: center;
  gap: 18px;
}

.study-icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.12em;
}

.study-title .study-icon.is-check {
  margin-right: 0.3em;
  color: var(--study-green);
}

.study-stats-row {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 7vw, 96px);
}

.study-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.study-stat b {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 7vmin, 4.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.study-stat > span,
.study-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.study-stat em {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-soft);
}

.study-stat em.is-up,
.study-stat em.is-best {
  color: var(--study-green);
}

.study-stat em.is-down {
  color: var(--ink-faint);
}

.study-chips {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.study-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 5px 12px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-soft);
}

.study-chip.is-streak {
  border-color: var(--ed-red, #d6452b);
  color: var(--ed-red, #d6452b);
}

.study-spark {
  width: min(360px, 60%);
  height: auto;
  overflow: visible;
}

.study-spark polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.study-spark circle {
  fill: var(--ed-red, #d6452b);
}

.study-best {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.study-best .study-icon {
  color: var(--ed-red, #d6452b);
}

.study-table {
  border-collapse: collapse;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

.study-table th,
.study-table td {
  padding: 8px 18px;
  text-align: right;
  border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}

.study-table th:first-child,
.study-table td:first-child {
  text-align: left;
}

.study-table thead th {
  border-bottom-color: var(--ink);
}

/* per-phrase feedback: one line in place of the typed text */
.study-body .text-row {
  position: relative;
}

.study-flash[hidden] {
  display: none;
}

.study-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(14px, 2.4vw, 34px);
  background: var(--ed-paper, #faf8f3);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3.4vmin, 2.1rem);
  color: var(--ink);
  animation: study-flash-in 180ms ease;
}

@keyframes study-flash-in {
  from { opacity: 0; transform: translateY(4px); }
}

.study-flash-part {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  white-space: nowrap;
}

.study-flash-part b {
  font-weight: 400;
}

.study-flash-part small {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.study-flash-part .study-icon {
  align-self: center;
}

.study-flash-part.is-good {
  color: var(--study-green);
}

.study-flash-part.is-muted {
  color: var(--ink-soft);
}

.study-flash-part.is-streak {
  color: var(--ed-red, #d6452b);
}

.study-flash-sep {
  width: 1px;
  height: 0.9em;
  background: rgba(17, 17, 17, 0.18);
}


/* Only the ordinary study offers an explicit starting order. */
#study-first-mode {
  padding: 10px 12px;
  border: 1px solid currentColor;
  background: var(--paper, #faf8f3);
  color: inherit;
  font: inherit;
  max-width: 100%;
}
.study-order-hint { flex-basis: 100%; font-size: 12px; opacity: .7; }
.study-main .study-setup {
  width: 100%;
  flex-direction: column;
  gap: 14px;
  border: 0;
  padding: 16px 0 0;
}
.study-main .study-setup label { text-align: left; font-size: 13px; }
.study-main #study-first-mode { width: 100%; min-height: 48px; }
.study-main .study-order-hint { flex-basis: auto; line-height: 1.5; }
.study-main .study-resume { border: 1px solid var(--ink); }

/* Keep keyboard geometry measurable for the phone mapping, but show none of
   the input surface until the participant has opened a study session. */
.study-main[data-screen="setup"] .keyboard-shell,
.study-main[data-screen="setup"] .text-row,
.study-main[data-screen="setup"] #display-canvas,
.study-main[data-screen="setup"] #cursor-marker {
  visibility: hidden;
  pointer-events: none;
}
.study-main[data-screen="setup"] .study-prompt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: min(90%, 520px);
  height: auto;
  max-height: calc(100% - 150px);
  overflow-y: auto;
}