/* STEP 1: give its single short program only the width it needs. */
.pk-game .step-screen[data-screen-label="STEP1"] {
  grid-template-columns: 610px minmax(0, 1fr);
}

.pk-game .step-screen[data-screen-label="STEP1"] .step-info {
  gap: 6px;
}

.pk-game .step-screen[data-screen-label="STEP1"] .editor-cue {
  min-height: 110px;
}

.pk-game .step-screen[data-screen-label="STEP1"] .instruction-card ol {
  padding-block: 6px;
  gap: 4px;
}

/* Furigana needs its own line, but the larger prose leading was wasting space. */
.pk-game [data-japanese-mode="hira"] ruby rt {
  line-height: .7;
}

.pk-game [data-japanese-mode="hira"] .step-info .outcome {
  line-height: 1.5;
}

.pk-game [data-japanese-mode="hira"] .step-info .preparation-note,
.pk-game [data-japanese-mode="hira"] .page-task-card > p {
  line-height: 1.35;
}

.pk-game [data-japanese-mode="hira"] .page-task-card li {
  line-height: 1.4;
}

.pk-game [data-japanese-mode="hira"] .try-card {
  line-height: 1.5;
  padding-top: 10px;
}

.pk-game .step-screen[data-screen-label="STEP6"] .step-info,
.pk-game .step-screen[data-screen-label="STEP7"] .step-info {
  gap: 7px;
}