/* ==========================================================================
   SECTION-JUMP RAIL (app/_components/LessonSectionNav.tsx)
   --------------------------------------------------------------------------
   Lifted out of /scratch/lesson.css on 2026-09-20 so Python and Arduino can
   have the rail too. The component already served both lesson shapes -- it
   reads the page's own <section class="lesson-section"> elements -- but its
   styling lived in a stylesheet only the Scratch pages loaded, which is why
   it had never appeared anywhere else.

   Linked from each course's level layout, not from the root: it is lesson
   furniture and has no business on the marketing pages or the dashboard.
   ========================================================================== */


.lesson-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  /* The nav is a narrow strip in a wide fixed box; only the buttons should
     swallow clicks, or the rail would shadow the right margin of the page. */
  pointer-events: none;
}
.lesson-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lesson-rail__top,
.lesson-rail__dot {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease,
    color 0.12s ease, border-color 0.12s ease;
}
.lesson-rail__top {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  margin: 0 0 9px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.lesson-rail__top:hover {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
  transform: scale(1.08);
}

/* A dot carries its section's colour on the rim and in the glyph, and fills
   with it once you are inside that section. Unvisited and current therefore
   differ by weight, not by hue — the ladder of colours down the rail stays
   readable at a glance. */
.lesson-rail__dot {
  border: 1.5px solid color-mix(in srgb, var(--rail-tone, #64748B) 45%, #FFFFFF);
  background: #FFFFFF;
  color: var(--rail-tone, #64748B);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.lesson-rail__dot:hover {
  border-color: var(--rail-tone, #64748B);
  transform: scale(1.12);
  box-shadow: 0 3px 9px -2px color-mix(in srgb, var(--rail-tone, #64748B) 55%, transparent);
}
.lesson-rail__dot.is-active {
  background: var(--rail-tone, #64748B);
  border-color: var(--rail-tone, #64748B);
  color: #FFFFFF;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--rail-tone, #64748B) 65%, transparent);
}
.lesson-rail__top:active,
.lesson-rail__dot:active { transform: scale(0.94); }
.lesson-rail__top:focus-visible,
.lesson-rail__dot:focus-visible {
  outline: 2px solid var(--rail-tone, #0F172A);
  outline-offset: 2px;
}
.lesson-rail__icon { display: block; pointer-events: none; }
/* The challenge dots carry a numeral instead of a glyph — 1, 2, 3 say which
   challenge far faster than three variations on a flag would. */
.lesson-rail__text {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.lesson-rail__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #0F172A;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  width: max-content;
  max-width: 250px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.5);
  pointer-events: none;
}

/* Below this the page is a single narrow column and a fixed rail would sit on
   top of the words. The .lesson-flow strip under the header is the small-screen
   answer — see the class-lesson block above. */
@media (max-width: 900px) {
  .lesson-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-rail__top,
  .lesson-rail__dot { transition: none; }
  .lesson-rail__top:hover,
  .lesson-rail__dot:hover,
  .lesson-rail__top:active,
  .lesson-rail__dot:active { transform: none; }
}