/*
 * Learning by doing (RSPH-286). The overlay sits on top of the real app, so it borrows the workshop
 * palette rather than introducing its own: an ink coach card with a hi-vis edge, Bebas for the step
 * name, Archivo for the instruction. The card is ink in BOTH themes on purpose - it has to read against
 * whatever screen is behind the dimming, light or dark. The progress strip is one segment per step,
 * which is honest here because the steps really are a sequence.
 */
.learn { --learn-z: 1080; }

.learn__spot {
    position: fixed;
    z-index: var(--learn-z);
    border-radius: 8px;
    pointer-events: none; /* the learner clicks the real control, never a copy of it */
    box-shadow: 0 0 0 2px var(--bs-hi-vis), 0 0 0 9999px rgba(14, 15, 17, 0.55);
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.learn__card {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 1.25rem;
    z-index: calc(var(--learn-z) + 1);
    width: min(24rem, calc(100vw - 1.5rem));
    padding: 1rem 1.15rem 0.9rem;
    background: var(--bs-ink);
    color: #e9ecef;
    border-inline-start: 4px solid var(--bs-hi-vis);
    border-radius: 6px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
    outline: none;
}
.learn__card[hidden] { display: none; }
.learn__card.is-anchored { inset-inline-end: auto; }

.learn__progress { display: flex; gap: 3px; margin: 0 0 0.7rem; padding: 0; list-style: none; }
.learn__seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.learn__seg.is-done { background: var(--bs-hi-vis); opacity: 0.55; }
.learn__seg.is-current { background: var(--bs-hi-vis); }

.learn__where { margin: 0 0 0.15rem; font-size: 0.78rem; color: #9aa3ad; }
.learn__title { margin: 0 0 0.35rem; font-family: var(--bs-font-display); font-size: 1.7rem; line-height: 1.05; letter-spacing: 0.02em; color: #fff; }
.learn__body { margin: 0 0 0.85rem; font-size: 0.95rem; line-height: 1.5; max-width: 46ch; }
.learn__goto { display: inline-block; margin: -0.3rem 0 0.8rem; color: var(--bs-hi-vis); font-weight: 600; }

.learn__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.learn__actions[hidden] { display: none; }
.learn__exit { margin-inline-start: auto; padding: 0.25rem 0.1rem; background: none; border: 0; color: #9aa3ad; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.learn__exit:hover, .learn__exit:focus-visible { color: #fff; }
.learn__card :focus-visible { outline: 2px solid var(--bs-hi-vis); outline-offset: 2px; }

.learn__card--offer, .learn__card--wrap { inset-inline-end: 1.25rem; }

/* Practice mode: always visible while demo records are being made, so nobody mistakes them for real work. */
.learn__practice {
    position: fixed;
    top: calc(var(--sandbox-banner-height, 0px) + 0.5rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--learn-z) + 2);
    display: flex; gap: 0.6rem; align-items: baseline;
    max-width: calc(100vw - 1.5rem);
    padding: 0.3rem 0.85rem;
    background: var(--bs-hi-vis);
    color: var(--bs-ink-2);
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.learn__practice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 600px) {
    .learn__card, .learn__card.is-anchored { inset-inline: 0.75rem; width: auto; bottom: 0.75rem !important; top: auto !important; left: 0.75rem !important; right: 0.75rem !important; }
    .learn__practice span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .learn__spot { transition: none; } }

/* The catalogue page (/learning). */
.learning-course { margin-block: 0 2rem; }
.learning-course__title { margin: 0 0 0.25rem; }
.learning-course__sections { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.learning-section { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: var(--bs-paper); border: 1px solid var(--bs-line); border-radius: 6px; }
.learning-section__text { min-width: 0; }
.learning-section__name { margin: 0; font-weight: 600; }
.learning-section__summary { margin: 0.15rem 0 0; color: var(--bs-muted); font-size: 0.9rem; max-width: 60ch; }
.learning-section__meta { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--bs-muted); }
.learning-section__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.learning-section--done { border-inline-start: 4px solid var(--bs-hi-vis); }
.learning-demo { margin: 0 0 1.5rem; max-width: 52rem; }
@media (max-width: 600px) { .learning-section { flex-direction: column; align-items: stretch; } .learning-section__actions { justify-content: flex-start; } }

/* The course banner at the top of /learning: where you are in the whole course, and the one button that carries on. */
.learning-journey { display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 52rem; margin: 0 0 1.75rem; padding: 1rem 1.15rem; background: var(--bs-paper); border: 1px solid var(--bs-line); border-inline-start: 4px solid var(--bs-hi-vis); border-radius: 6px; }
.learning-journey__text { flex: 1 1 16rem; min-width: 0; }
.learning-journey__title { margin: 0; font-size: 1.15rem; }
.learning-journey__progress { margin: 0.2rem 0 0.55rem; color: var(--bs-muted); font-size: 0.9rem; }
.learning-journey__bar { block-size: 6px; border-radius: 3px; background: var(--bs-line); overflow: hidden; }
.learning-journey__bar span { display: block; block-size: 100%; background: var(--bs-hi-vis); border-radius: 3px; }
.learning-journey__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.learn__goto--inline { margin: 0; align-self: center; }