/*
 * A journey (2026-10-06): a trail of numbered stones with a card at each stop, and the page's one job to
 * say WHERE YOU ARE — the stop to play now large and in colour, the stops behind it small and ticked, the
 * stops ahead small and grey until started. Shared by a teacher's lesson (Views/ClassroomLesson/Lesson)
 * and a language page drawn as a path (Views/AlephBet, "Path"). Everything is in the Aleph Bet colours,
 * so the page loads aleph-bet-theme.css first; the trail itself is drawn by stb-journey.js.
 *
 * Markup: .lp-trail[data-walked] > svg.lp-trail-line (two paths) + ol.lp-stops > li.lp-stop.lp-stop-{done|
 * here|started|ahead|open} (a stone and a .lp-card, small with .lp-card-small), then .lp-end. Other items
 * may sit between the stops in the list (a language page's part headings): the stones alternate sides
 * counting stops only. A card's words take --lp-card-text, set on .lp.
 */

/* How far through: a dot a step, filled as each is done, and the count in words. */
.lp-progress { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: .9rem; color: var(--ab-muted); font-weight: 700; }
.lp-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.lp-dot { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--ab-miss-edge); background: var(--ab-surface); }
.lp-dot-done { border-color: var(--ab-go); background: var(--ab-go); }

.lp-note { max-width: 44rem; margin: 1rem auto 0; padding: .7rem 1rem; border: 1px solid var(--ab-banner-edge); border-radius: .9rem; background: var(--ab-banner-bg); color: var(--ab-banner-ink); }
.lp-note form { display: inline; }
.lp-done-all { max-width: 44rem; margin: 1rem auto 0; padding: 1rem 1.2rem; border: 2px solid var(--ab-ok-edge); border-radius: 1.2rem; background: var(--ab-ok-bg); color: var(--ab-go-deep); text-align: center; font-size: 1.15rem; font-weight: 800; }
.lp-done-all a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; margin-top: .6rem; padding: .5rem 1.4rem; border-radius: 999px; background: var(--ab-go); color: var(--ab-on-go); font-weight: 800; text-decoration: none; }

/* The journey. A trail (drawn by the script at the foot of the page, through the middle of
   every stone) with the stops along it: on a wide screen the stones step from side to side
   of the trail and each stop's card sits on its own side; on a phone the stones sway down
   the left and the cards keep to the right. */
.lp-trail { position: relative; max-width: 58rem; margin: 2rem auto 0; }
.lp-trail-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lp-line-all { fill: none; stroke: var(--ab-miss-edge); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 14; }
.lp-line-walked { fill: none; stroke: var(--ab-ok-edge); stroke-width: 6; stroke-linecap: round; }
.lp-stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.lp-stop, .lp-end { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem minmax(0, 1fr); align-items: center; column-gap: 1rem; }

/* A stop's colour is its place in the lesson (--lp-t-*, set on it); a stop not started
   yet is grey instead, and takes its colour back under a pointer or the keyboard — it is
   somewhere to go, just not where to go next. */
.lp-stop { --lp-bg: var(--lp-t-bg); --lp-edge: var(--lp-t-edge); --lp-ink: var(--lp-t-ink); }
.lp-stop-ahead { --lp-bg: var(--ab-miss-bg); --lp-edge: var(--ab-miss-edge); --lp-ink: var(--ab-miss-ink); }
.lp-stop-ahead .lp-ico { filter: grayscale(1); opacity: .55; }
.lp-stop-ahead:focus-within { --lp-bg: var(--lp-t-bg); --lp-edge: var(--lp-t-edge); --lp-ink: var(--lp-t-ink); }
.lp-stop-ahead:focus-within .lp-ico { filter: none; opacity: 1; }
@media (hover: hover) {
    .lp-stop-ahead:hover { --lp-bg: var(--lp-t-bg); --lp-edge: var(--lp-t-edge); --lp-ink: var(--lp-t-ink); }
    .lp-stop-ahead:hover .lp-ico { filter: none; opacity: 1; }
}

/* The stones: a number, a tick once the step is done, a ring going out from the one to play now. */
.lp-stone { grid-row: 1; grid-column: 2; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ab-surface); border: calc(3px * var(--ab-bw)) solid var(--lp-edge); color: var(--lp-ink); font-size: 1.25rem; font-weight: 800; box-shadow: 0 .2rem 0 var(--lp-edge); transition: background-color .15s, border-color .15s, color .15s; }
.lp-stop:nth-child(odd of .lp-stop) .lp-stone { justify-self: start; }
.lp-stop:nth-child(even of .lp-stop) .lp-stone { justify-self: end; }
.lp-stop-done .lp-stone { background: var(--ab-go); border-color: var(--ab-go); color: var(--ab-on-go); box-shadow: 0 .2rem 0 var(--ab-go-deep); }
.lp-stop-here .lp-stone { width: 3.5rem; height: 3.5rem; font-size: 1.45rem; background: var(--lp-bg); border-color: var(--ab-go); box-shadow: 0 .2rem 0 var(--ab-go-deep); }
.lp-stop-here .lp-stone::after { content: ""; position: absolute; inset: -.4rem; border-radius: 50%; border: 3px solid var(--ab-go); opacity: 0; animation: lp-ring 2.4s ease-out infinite; }
@keyframes lp-ring { 0% { transform: scale(.85); opacity: .7; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .lp-stop-here .lp-stone::after { animation: none; opacity: .45; }
}

.lp-card { grid-row: 1; position: relative; display: flex; flex-direction: column; width: min(100%, 25rem); padding: 1.3rem 1.2rem 1.1rem; border: calc(3px * var(--ab-bw)) solid var(--lp-edge); border-radius: 1.6rem; background: var(--lp-bg); color: var(--lp-ink); text-decoration: none; box-shadow: 0 6px 16px rgba(var(--ab-shadow),.06); transition: transform .12s, box-shadow .12s, background-color .15s, border-color .15s, color .15s; }
.lp-stop:nth-child(odd of .lp-stop) .lp-card { grid-column: 1; justify-self: end; }
.lp-stop:nth-child(even of .lp-stop) .lp-card { grid-column: 3; justify-self: start; }
a.lp-card:focus-visible { color: var(--lp-ink); outline: 4px solid var(--lp-edge); outline-offset: 3px; }
@media (hover: hover) {
    a.lp-card:hover { color: var(--lp-ink); transform: translateY(-2px); box-shadow: 0 12px 22px rgba(var(--ab-shadow),.1); }
}
.lp-stop-here .lp-card { border-color: var(--ab-go); box-shadow: 0 10px 24px rgba(var(--ab-shadow),.1); }
.lp-head { display: flex; align-items: center; gap: .7rem; }
.lp-head i { font-size: 1.7rem; }
.lp-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.lp-flag { position: absolute; top: -.8rem; left: 1.2rem; padding: .15rem .7rem; border-radius: 999px; background: var(--ab-go); color: var(--ab-on-go); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 3px 8px rgba(22,163,74,.35); }
.lp-sample { margin: .7rem 0 .2rem; font-size: 2.3rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.lp-sample-long { font-size: 1.6rem; }
.lp-script-hebrew { font-family: 'SBL Hebrew', 'Times New Roman', Times, serif; }
.lp-script-greek { font-family: 'GFS Neohellenic', Georgia, 'Times New Roman', serif; }
.lp-script-cuneiform { font-family: 'Assurbanipal', 'Noto Sans Cuneiform', 'Segoe UI Historic', sans-serif; }
.lp-names { margin: 0 0 .3rem; text-align: center; color: var(--lp-card-text); }
.lp-names-none { margin: 1rem 0; font-style: italic; }
.lp-level { align-self: center; margin: 0 0 .3rem; padding: .1rem .7rem; border-radius: 999px; background: var(--ab-surface); border: 1px solid var(--lp-edge); font-size: .85rem; font-weight: 700; }
.lp-word { margin: .2rem 0 .3rem; text-align: center; font-style: italic; color: var(--lp-card-text); }
.lp-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .7rem; }
.lp-play { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .5rem 1.6rem; border-radius: 999px; background: var(--ab-go); color: var(--ab-on-go); font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.lp-state { font-size: .9rem; font-weight: 700; color: var(--lp-card-text); }

/* A stop that is not the one to play now: one line of who it is and a line of its cards. */
.lp-card-small { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name go" "ico sample go"; align-items: center; gap: .05rem .75rem; width: min(100%, 22rem); min-height: 3.5rem; padding: .6rem .9rem .6rem 1rem; border-radius: 1.2rem; box-shadow: none; }
.lp-card-small .lp-ico { grid-area: ico; font-size: 1.55rem; transition: filter .15s, opacity .15s; }
.lp-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; min-width: 0; }
.lp-card-small h3 { font-size: 1.05rem; }
.lp-chip { padding: 0 .5rem; border-radius: 999px; background: var(--ab-surface); border: 1px solid var(--lp-edge); font-size: .75rem; font-weight: 700; line-height: 1.5; }
.lp-card-small .lp-sample { grid-area: sample; margin: 0; font-size: 1.45rem; line-height: 1.45; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-card-small .lp-sample-none { font-size: .9rem; font-style: italic; }
.lp-go { grid-area: go; display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--ab-surface); border: 2px solid var(--lp-edge); font-size: .85rem; }
.lp-off { opacity: .75; }

/* The end of the trail: a flag, and a star once every step is done. */
.lp-end { margin-top: 1.2rem; color: var(--ab-muted); font-weight: 700; }
.lp-end .lp-stone { justify-self: center; --lp-edge: var(--ab-miss-edge); --lp-ink: var(--ab-miss-ink); }
.lp-end-label { grid-row: 2; grid-column: 1 / -1; justify-self: center; margin-top: .5rem; }
.lp-end-reached { color: var(--ab-go-deep); }
.lp-end-reached .lp-stone { background: var(--ab-gold); border-color: var(--ab-gold); color: #fff; box-shadow: 0 .2rem 0 var(--ab-warn); }

@media (max-width: 767.98px) {
    .lp-trail { max-width: 30rem; }
    .lp-stop, .lp-end { grid-template-columns: 4.3rem minmax(0, 1fr); column-gap: .7rem; }
    .lp-stop .lp-stone { grid-column: 1; }
    .lp-stop:nth-child(n of .lp-stop) .lp-card { grid-column: 2; justify-self: stretch; width: auto; }
    .lp-end .lp-stone { grid-column: 1; }
    .lp-end-label { grid-row: 1; grid-column: 2; justify-self: start; margin-top: 0; }
}
@media (max-width: 480px) {
    .lp-card { padding: 1.2rem 1rem 1rem; }
    .lp-card-small { padding: .55rem .7rem .55rem .8rem; }
}

/* A card's words in the page's own ink, past the games' palette; brighter at night. */
.lp { --lp-card-text: #374151; }
:root[data-ab-dark] .lp { --lp-card-text: var(--ab-text-strong); }