/* The extended journey shares the village's paper, forest and clay palette. */
.journey-entrance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -8px 0 26px;
  padding: 18px 22px;
  border: 1px solid #d5dac7;
  border-radius: 13px;
  background: #eaf0df;
}
.journey-entrance .eyebrow { margin: 0; font-size: 10px; }
.journey-entrance p { margin: 7px 0 0; font-size: 16px; line-height: 1.5; }
.journey-entrance button { display: flex; align-items: center; gap: 14px; min-height: 48px; }
#journey-count { font-size: 12px; font-weight: 400; white-space: nowrap; }
.journey-overview, .course-step, .course-notebook-status { overflow-wrap: anywhere; }
.journey-overview p, .course-step p, .course-status, .course-storage,
.course-evidence, .course-choice, .course-classify-item, .course-order-item,
.course-field, .course-preview, .course-notebook-entry, .course-self-check,
.course-source-note { font-size: 17px; line-height: 1.65; }
.journey-progress { display: block; width: 100%; height: 8px; padding: 0; margin: 18px 0; background: #eaf0df; border-radius: 11px; }
.journey-trail { display: grid; gap: 18px; margin: 26px 0; padding: 0; list-style: none; }
.journey-stop {
  position: relative;
  padding: 20px;
  border: 1px solid #ccd4bd;
  border-radius: 13px;
  background: #f5f1e5;
  min-width: 0;
}
.journey-stop:nth-child(even) { background: #edf1e5; }
.journey-stop.is-complete { border-color: #738b66; }
.journey-stop.is-current { box-shadow: inset 4px 0 0 #a86d43; }
.journey-stop.is-locked { background: #efede5; }
.journey-stop-icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border: 1px solid #cbd4bd; border-radius: 14px;
  background: #fffdf4; font-size: 27px;
  margin-bottom: 14px;
}
.journey-stop-body h3 { margin: 4px 0 10px; }
.journey-stop-body p { font-size: 16px; line-height: 1.65; margin: 8px 0 15px; }
.journey-stop-body .eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: 1px; color: #50604f; }
.journey-lessons { display: grid; gap: 9px; padding: 0; list-style: none; }
.journey-lesson {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px; min-height: 48px;
  border: 1px solid #bbc9ac; border-radius: 8px;
  color: var(--green); background: #fffdf5;
  font-size: 16px; line-height: 1.5; text-align: left; white-space: normal;
}
.journey-lesson:hover:not(:disabled) { background: #e2ebd7; border-color: #627d53; }
.journey-lesson:disabled { opacity: 1; color: #63705c; background: #e7e9df; }
.journey-sidequests { border-top: 1px dashed #bac7ac; padding-top: 15px; margin-top: 20px; }
.journey-sidequests button { text-align: left; white-space: normal; min-height: 44px; }
.course-status, .course-storage { margin: 12px 0; color: #50604f; }
.course-step-progress { color: #50604f; font-size: 14px; margin: 12px 0; }
.course-evidence {
  white-space: pre-wrap; margin: 20px 0; padding: 20px;
  border: 1px solid #d2bd98; border-left: 4px solid var(--clay);
  border-radius: 0 9px 9px 0; background: #f3ecdc;
}
.course-choice-list, .course-classify-list, .course-template-fields { display: grid; gap: 14px; margin: 18px 0; }
.course-choice { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid #c5d0b7; border-radius: 9px; background: #fcfbf3; cursor: pointer; }
.course-choice input, .course-self-check input { flex: 0 0 19px; width: 19px; height: 19px; margin: 5px 0 0; accent-color: var(--green); }
.course-choice:has(input:checked) { border-color: #5a7950; background: #e5ecd9; box-shadow: inset 0 0 0 1px #5a7950; }
.course-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-classify-item { display: grid; gap: 11px; padding: 17px; border: 1px solid #c9d2bd; border-radius: 9px; background: #faf8ee; }
.course-classify-item select, .course-field input, .course-field select, .course-field textarea,
#course-notebook-form input:not([type=checkbox]), #course-notebook-form select {
  width: 100%; min-height: 48px; min-width: 0;
  border: 1px solid #a9b99b; border-radius: 7px;
  padding: 11px 13px; color: var(--ink); background: #fffef8;
  font: inherit; font-size: 17px;
}
.course-field { display: grid; gap: 8px; margin: 15px 0; }
.course-field small { color: #50604f; font-size: 14px; }
.course-order-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 20px 0; counter-reset: course-step; }
.course-order-item { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #c3cdb6; border-radius: 9px; background: #f8f7ed; min-width: 0; }
.course-order-item > span, .course-order-item > p { flex: 1; margin: 0; }
.course-order-controls { display: flex; flex: 0 0 auto; gap: 5px; }
.course-order-controls button { min-width: 44px; min-height: 44px; border: 1px solid #aab99b; border-radius: 7px; color: var(--green); background: #fffdf6; font: inherit; }
.course-order-controls button:disabled { opacity: .5; }
.course-preview { white-space: pre-wrap; background: #e9efdf; border: 1px solid #c4d2b4; padding: 20px; border-radius: 10px; margin: 20px 0; overflow-wrap: anywhere; }
.course-notebook-status { padding: 18px; background: #edeedc; border: 1px solid #ccd3b8; border-radius: 10px; margin: 18px 0; }
.course-notebook-status .small-note { color: #50604f; }
.course-notebook-list { display: grid; gap: 15px; margin: 25px 0; }
.course-notebook-entry { border: 1px solid #c9d2bd; padding: 18px; border-radius: 10px; background: #f9f7ed; min-width: 0; overflow-wrap: anywhere; }
.course-notebook-entry h3 { margin-bottom: 8px; }
.course-notebook-entry p { white-space: pre-wrap; margin: 8px 0; }
.course-self-check { display: grid; gap: 13px; padding: 18px; background: #eef2e5; border-radius: 10px; margin: 20px 0; }
.course-self-check label { display: flex; align-items: flex-start; gap: 12px; }
.course-source-note { border-top: 1px dashed #c6d0bb; padding-top: 18px; margin-top: 24px; color: #50604f; font-size: 15px; }
#course-feedback:empty, #course-notebook-feedback:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.course-legacy-notebook { margin: 20px 0; }
.course-legacy-notebook summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 16px; }
.course-legacy-notebook pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 16px; line-height: 1.65; }
@media (min-width: 720px) { .journey-trail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .journey-entrance { align-items: stretch; flex-direction: column; gap: 12px; padding: 17px; margin-top: 0; }
  .journey-entrance button { justify-content: space-between; width: 100%; gap: 8px; }
  .journey-entrance p { font-size: 16px; }
  .journey-stop { padding: 17px; }
  .course-order-item { flex-wrap: wrap; padding: 12px; gap: 9px; }
  .course-order-item > span, .course-order-item > p { flex-basis: calc(100% - 40px); }
  .course-order-controls { margin-left: auto; }
  .course-evidence, .course-preview { padding: 16px; }
}