/* ============================================================================
   SYLLABUS PREVIEW  —  public, pre-purchase course-journey strip
   2026-09-10 v2 — Tracker 125: --sp-brand / --sp-brand-soft now read the
                   site-wide --brand-N CSS variables (rgb(var(--brand-N, r g b)))
                   instead of hard-coded blue hex, so a theme-* class on <html>
                   recolours the strip too. Fallback triplet is the original
                   blue value, since this file can load on pages that predate
                   the variables. brand-100 kept at 22% alpha, unchanged.
   2026-08-19 v1

   Prefix: sp- ("syllabus preview"). Rendered by
   /courses/includes/syllabus_preview.cfm on the anonymous course sales page
   /courses/course.cfm. Read-only marketing sibling of the learner journey
   (sj- rules at the foot of /css/lms-learner.css) — the same visual language,
   miniaturised, with every learner-state concept removed: no progress, no
   locks, no gates, no expand-in-place, no enrolment.

   WHY A SEPARATE FILE AND NOT lms-learner.css. That stylesheet is 52KB of
   learner-runtime styling loaded behind the login wall. A public sales page
   must not pull it in to borrow forty lines, and the sj- rules it contains
   carry state selectors ([data-state="locked"] veils, rail-done colours,
   celebration keyframes) that have no meaning before purchase. The values
   below are copied deliberately, not imported.

   WHY PLAIN CSS AND NOT TAILWIND. Same reason the sj- block is plain CSS: a
   change here never needs a Tailwind rebuild and cannot be broken by a purged
   utility class. The palette mirrors the site-wide --brand-600 / --brand-100
   CSS variables (see v2 note above) so the strip sits in the host page's own
   colours, whichever theme is active. The page's headings still use the
   site's compiled utilities.

   WHY ONE COLUMN AND NOT THE ALTERNATING CENTRE RAIL. The learner journey
   zigzags cards either side of a centre rail above 56rem, because it owns the
   full page width. This strip lives inside course.cfm's lg:col-span-2 column,
   which is about 712px at the widest and far narrower at every step below it —
   a viewport-width media query cannot see that, and a centre-rail zigzag would
   squeeze each card to roughly 300px. So the rail stays on the left at every
   width and the cards run down beside it: the same milestone reading, sized
   for the space it is actually given.

   Mobile-first, and no CSS grid anywhere in this file — the layout is flow
   plus one absolutely-positioned rail. A browser without grid support gets the
   identical strip; a browser with no CSS at all gets a plain numbered <ol>,
   which is exactly what this content is.

   REDUCED MOTION is satisfied by construction, not by a media query: there is
   no transition, no animation and no keyframe below. The learner journey moves
   because it celebrates progress; this is a syllabus on a sales page and has
   no state to celebrate, so nothing here moves for anyone and there is nothing
   for prefers-reduced-motion to switch off.
   ============================================================================ */

.sp-scope {
    --sp-brand:      rgb(var(--brand-600, 37 99 235));    /* brand-600  */
    --sp-brand-soft: rgb(var(--brand-100, 219 234 254));  /* brand-100  */
    --sp-paper:      #ffffff;
    --sp-ink:        #1e293b;   /* slate-800  */
    --sp-muted:      #64748b;   /* slate-500  */
    --sp-line:       rgba(15, 23, 42, 0.12);
    --sp-rail:       rgba(15, 23, 42, 0.10);
    --sp-radius:     12px;
    --sp-rail-x:     0.85rem;
}

/* Public pages render light (the dark-mode bootstrap in includes/header.cfm
   only arms itself on /teach /learn /manage /poll /account). These overrides
   exist so the strip stays consistent with its host if that ever changes —
   they cost nothing until a .dark ancestor appears. */
.dark .sp-scope {
    --sp-brand:      rgb(var(--brand-400, 96 165 250));
    --sp-brand-soft: rgb(var(--brand-600, 37 99 235) / 0.22);
    --sp-paper:      #1e293b;
    --sp-ink:        #e2e8f0;
    --sp-muted:      #94a3b8;
    --sp-line:       rgba(148, 163, 184, 0.24);
    --sp-rail:       rgba(148, 163, 184, 0.22);
}

/* ---- the rail ------------------------------------------------------------ */
.sp {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Stops short of the first and last node so the line reads as joining the
   milestones rather than running past them. */
.sp::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    bottom: 1.15rem;
    left: var(--sp-rail-x);
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--sp-rail);
    z-index: 0;
}

/* ---- a step -------------------------------------------------------------- */
.sp-step {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.6rem;
}
.sp-step:last-child { margin-bottom: 0; }

/* The numbered milestone. Numerals are baked into the markup rather than left
   to a list-marker so they sit ON the rail; the node is aria-hidden because
   the <ol> already announces the position. */
.sp-node {
    position: absolute;
    left: var(--sp-rail-x);
    top: 0.72rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: -0.8rem;
    border-radius: 50%;
    border: 2px solid var(--sp-brand-soft);
    background: var(--sp-paper);
    color: var(--sp-brand);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ---- the card ------------------------------------------------------------ */
/* Opaque and positioned, so it paints over the rail the way the journey cards
   do — the line pauses at each milestone instead of being ruled through it. */
.sp-card {
    position: relative;
    z-index: 1;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-paper);
}

/* Pointer back towards the rail: an outer triangle in the border colour with a
   slightly smaller one in the card colour laid over it. */
.sp-card::before,
.sp-card::after {
    content: "";
    position: absolute;
    top: 0.85rem;
    width: 0;
    height: 0;
    border-style: solid;
}
.sp-card::before {
    left: -8px;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--sp-line) transparent transparent;
}
.sp-card::after {
    left: -7px;
    border-width: 7px 7px 7px 0;
    border-color: transparent var(--sp-paper) transparent transparent;
}

.sp-title {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--sp-ink);
}

.sp-body {
    margin: 0.25rem 0 0;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--sp-muted);
}

.sp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.8rem;
    margin-top: 0.4rem;
    font-size: 0.74rem;
    color: var(--sp-muted);
}
.sp-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}
.sp-meta svg {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
}

/* The checkpoint marker. Deliberately quiet: this is a syllabus, and an
   assessment is a fact about a module, not a warning about one. */
.sp-check { color: var(--sp-brand); font-weight: 600; }

/* ---- the summit ---------------------------------------------------------- */
/* The destination the rail leads to. Outside the <ol> in the markup so it is
   never announced as "item 10 of 9". */
.sp-summit {
    position: relative;
    padding-left: 2.5rem;
    margin-top: 0.6rem;
}
.sp-summit::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    height: 1.9rem;
    left: var(--sp-rail-x);
    width: 2px;
    margin-left: -1px;
    background: var(--sp-rail);
    z-index: 0;
}

.sp-summit-node {
    position: absolute;
    left: var(--sp-rail-x);
    top: 0.72rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: -0.8rem;
    border-radius: 50%;
    border: 2px solid var(--sp-brand);
    background: var(--sp-brand);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.sp-summit-node svg { width: 0.85rem; height: 0.85rem; display: block; }

.sp-summit-card {
    position: relative;
    z-index: 1;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--sp-brand-soft);
    border-radius: var(--sp-radius);
    background: var(--sp-brand-soft);
}
.sp-summit-card::before,
.sp-summit-card::after {
    content: "";
    position: absolute;
    top: 0.85rem;
    width: 0;
    height: 0;
    border-style: solid;
}
.sp-summit-card::before {
    left: -8px;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--sp-brand-soft) transparent transparent;
}
.sp-summit-card::after {
    left: -7px;
    border-width: 7px 7px 7px 0;
    border-color: transparent var(--sp-brand-soft) transparent transparent;
}

.sp-summit-title {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.35;
    font-weight: 650;
    color: var(--sp-ink);
}
.sp-summit-msg {
    margin: 0.2rem 0 0;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--sp-muted);
}
.dark .sp-summit-msg { color: #cbd5e1; }

/* ---- the footnote under the strip ---------------------------------------- */
.sp-note {
    margin: 0.75rem 0 0;
    padding-left: 2.5rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--sp-muted);
}

/* ---- slightly roomier once there is room --------------------------------- */
@media (min-width: 40rem) {
    .sp-card,
    .sp-summit-card { padding: 0.75rem 1.05rem; }
    .sp-title,
    .sp-summit-title { font-size: 1rem; }
}