/* Level journey (5-phase guided prototype): timeline + phase content frames.
   Loaded alongside level.css, which already supplies .header/.brand/.btn-home
   for this page's top bar -- keep the same palette (#153f71 / #00a3b4) so the
   journey reads as part of the same page family, not a bolted-on feature. */

:root{
  --journey-primary: #153f71;
  --journey-accent: #00a3b4;
  --journey-line: #d7e3ee;
  --journey-done: #00a3b4;
  --journey-text: #222;
  --journey-muted: #5a6a7a;
}

/* === Timeline === */
.journey-timeline{
  max-width: 960px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.journey-timeline ol{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.journey-timeline ol::before{
  content: "";
  position: absolute;
  top: 17px;
  left: 5%;
  right: 5%;
  height: 3px;
  background: var(--journey-line);
  z-index: 0;
}
.journey-step{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
}
.journey-step a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--journey-muted);
  padding: 0 4px;
  border-radius: 10px;
  transition: transform 0.15s ease;
}
.journey-step a:hover{ transform: translateY(-2px); }
.journey-step a:focus-visible{ outline: 2px solid var(--journey-accent); outline-offset: 3px; }

.step-index{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--journey-line);
  color: var(--journey-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.step-label{
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  max-width: 110px;
  line-height: 1.25;
}

.journey-step.is-done .step-index{
  background: var(--journey-done);
  border-color: var(--journey-done);
  color: #fff;
}
.journey-step.is-done .step-label{ color: var(--journey-primary); }

.journey-step.is-current .step-index{
  background: var(--journey-primary);
  border-color: var(--journey-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(21, 63, 113, 0.15);
}
.journey-step.is-current .step-label{ color: var(--journey-primary); }

@media (max-width: 640px){
  .step-label{ display: none; }
  .journey-step.is-current .step-label{
    display: block;
    position: absolute;
    top: 42px;
    max-width: 90px;
  }
}

/* === Phase content === */
.journey-content{ margin-top: 28px; }
/* Lesson (page 2) reads better ~20% wider than the shared 920px page
   container -- other phases keep the default. Page 4's PDF doesn't benefit
   from this: Chrome's PDF viewer caps its own render width well short of
   920px anyway, so widening it just adds empty letterboxing on the sides. */
.journey-content.journey-content-wide{ max-width: 1104px; }
.journey-content h2{
  color: var(--journey-primary);
  font-size: 22px;
  margin: 0 0 4px;
}
.journey-intro{
  color: var(--journey-muted);
  margin: 0 0 20px;
}

.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--journey-line);
  border-radius: 12px;
  overflow: hidden;
  background: #f5f8fb;
  box-shadow: 0 4px 16px rgba(21, 63, 113, 0.08);
}
.video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Practise PDF (page 4): a plain widened iframe with the PDF's own native
   viewer/scrollbar -- rendering pages to canvas (pdf.js) was tried instead
   but isn't viable across 11 levels' worth of PDFs (some content hangs
   pdf.js's renderer indefinitely on certain pages, with no fix that scales). */
.pdf-frame{
  border: 1px solid var(--journey-line);
  border-radius: 12px;
  overflow: hidden;
  background: #f5f8fb;
  box-shadow: 0 4px 16px rgba(21, 63, 113, 0.08);
}
.pdf-frame iframe{
  display: block;
  width: 100%;
  /* Chrome's PDF viewer caps its "fit width" zoom well short of this
     container's full width (it letterboxes rather than stretching an A4
     page edge-to-edge), so the rendered page's pixel height stays roughly
     constant here regardless of aspect-ratio math against the full iframe
     width -- a fixed height measured against the actual rendered page is
     what keeps page 1 fully visible without being cut off mid-page. */
  height: 1100px;
  border: 0;
  background: #fff;
}

/* Lesson (page 2): the lesson document is embedded inline via a Shadow DOM
   (not an iframe), so the page has a single scrollbar and the journey-nav
   buttons only appear once the real lesson content has ended. No
   `overflow:hidden` here on purpose -- it would make this div a scrollIntoView
   target in its own right, silently swallowing the TOC-link scroll instead of
   moving the page (matching rounding is done from inside, on .lesson-doc). */
.lesson-embed-host{
  display: block;
  border: 1px solid var(--journey-line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(21, 63, 113, 0.08);
}

/* Past paper (page 5, last phase): readiness button + confirmation note. */
.ready-for-test{
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--journey-line);
  border-radius: 12px;
  background: #f5f8fb;
  text-align: center;
}
.ready-for-test-note{
  margin: 14px 0 0;
  color: var(--journey-primary);
  font-weight: 600;
}

.video-placeholder{
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--journey-line);
  border-radius: 12px;
  background: #f5f8fb;
  color: var(--journey-muted);
}
.video-placeholder-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--journey-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  opacity: 0.85;
}
.video-placeholder-title{
  margin: 0;
  font-weight: 700;
  color: var(--journey-primary);
}
.video-placeholder-note{ margin: 0; font-size: 0.88rem; }

.pdf-fallback{ margin: 0 2px 10px; font-size: 0.9rem; }
.pdf-fallback a{ color: var(--journey-accent); }

/* === Nav buttons === */
.journey-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 24px 0 40px;
  flex-wrap: wrap;
}
.journey-nav-back, .journey-nav-next{ display: flex; }
.journey-nav-next{ margin-left: auto; }

.btn-journey{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(21, 63, 113, 0.2);
  background: #fff;
  color: var(--journey-primary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn-journey:hover{ transform: translateY(-1px); }
.btn-journey-primary{
  background: var(--journey-primary);
  color: #fff;
  border-color: var(--journey-primary);
}
.btn-journey-primary:hover{ background: var(--journey-accent); border-color: var(--journey-accent); }
.btn-journey:not(.btn-journey-primary):hover{ background: #f0f5fa; }