/* ---- Learning Journeys (/journeys): goal map, steps, questions ---- */

/* Question and map panels hold buttons, so they don't lift on hover like course cards. */
.journey-panel.course-card:hover {
    transform: none;
    box-shadow: none;
}

.journey-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fb8ff;
}

.journey-lead {
    font-size: 1.1rem;
}

.journey-progress {
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

    .journey-progress > div {
        height: 100%;
        background: #6fcf97;
    }

/* The map: one block per stage, one row per concept */
.journey-stage + .journey-stage {
    margin-top: 1.5rem;
}

.journey-stage-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.15rem;
}

.journey-concepts {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

    .journey-concepts li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.6rem;
        border-radius: 8px;
    }

        .journey-concepts li + li {
            margin-top: 2px;
        }

        .journey-concepts li.journey-current {
            background: rgba(143, 184, 255, 0.16);
            outline: 1px solid rgba(143, 184, 255, 0.5);
        }

.journey-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.journey-chip-known { background: rgba(255, 255, 255, 0.12); color: #ddd; }
.journey-chip-mastered { background: rgba(111, 207, 151, 0.2); color: #8ef0b4; border-color: rgba(111, 207, 151, 0.5); }
.journey-chip-step { background: rgba(143, 184, 255, 0.18); color: #b9d2ff; border-color: rgba(143, 184, 255, 0.5); }
.journey-chip-review { background: rgba(255, 196, 92, 0.18); color: #ffd58a; border-color: rgba(255, 196, 92, 0.5); }
.journey-chip-detour { background: rgba(255, 140, 120, 0.18); color: #ffb3a6; border-color: rgba(255, 140, 120, 0.5); }

/* Questions */
.journey-prompt {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.journey-choices {
    display: grid;
    gap: 0.5rem;
}

.journey-choice {
    text-align: left;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
}

    .journey-choice:hover:not(:disabled) {
        background: rgba(143, 184, 255, 0.2);
        border-color: #8fb8ff;
    }

    .journey-choice:disabled {
        cursor: default;
    }

.journey-choice-right { border-color: #6fcf97; background: rgba(111, 207, 151, 0.2); }
.journey-choice-wrong { border-color: #ff8c78; background: rgba(255, 140, 120, 0.2); }
.journey-choice-dim { opacity: 0.55; }

.journey-feedback {
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border-left: 4px solid;
    background: rgba(255, 255, 255, 0.06);
}

.journey-feedback-right { border-left-color: #6fcf97; }
.journey-feedback-wrong { border-left-color: #ff8c78; }

.journey-check-badge {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

.journey-check-badge-checked { background: rgba(111, 207, 151, 0.2); color: #8ef0b4; }

.journey-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

    .journey-rating .btn.active {
        background: #8fb8ff;
        border-color: #8fb8ff;
        color: #111;
    }

/* Buttons inside course cards: the card's link colour (blue) is unreadable on the site's peach
   btn-light, and the outline buttons need a visible edge on the dark panel. */
.course-card a.btn {
    border-bottom: none;
}

.course-card a.btn-light, .course-card a.btn-light:hover, .journey-panel .btn-light, .journey-panel .btn-light:hover {
    color: #1d1d1d;
}

.journey-panel .btn-outline-light {
    color: #f1f1f1;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

    .journey-panel .btn-outline-light:hover {
        color: #1d1d1d;
        background-color: #f1f1f1;
    }

/* Curation: the admin's "Mark checked" buttons, the ✓ on checked steps in the map, and the admin
   question list on a step page. */
.journey-curate {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
}

.journey-checked-mark {
    color: #8fd19e;
    margin-left: 0.35rem;
    font-size: 0.85rem;
}

.journey-admin-note {
    opacity: 0.85;
    border-left: 3px solid #ffeb8a;
    padding-left: 0.6rem;
}

.journey-admin-question {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.75rem 0;
}

/* Video review (admin): the review row under each resource, hidden or suggested items dimmed, and the
   librarian box. */
.journey-resource-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.journey-level-picker {
    display: inline-flex;
    gap: 0.25rem;
}

.journey-level-picker .btn.active, .journey-resource-review > .btn.active {
    background: #8fb8ff;
    border-color: #8fb8ff;
    color: #111;
}

.journey-resource-hidden {
    opacity: 0.6;
    border-left: 3px dashed rgba(255, 255, 255, 0.4);
    padding-left: 0.75rem;
}

.journey-librarian {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 0.75rem;
}