/* ==========================================================================
   Courses — admin management + student catalogue/viewer.
   Brand colours match admin.css / sidebar.css (#650640 on #f8f4f7).
   RTL-safe: logical properties only, never left/right.
   ========================================================================== */

:root {
    --c-accent:      #650640;
    --c-accent-soft: rgba(101, 6, 64, 0.07);
    --c-accent-line: rgba(101, 6, 64, 0.16);
    --c-bg:          #f8f4f7;
    --c-card:        #ffffff;
    --c-text:        #33303a;
    --c-subtle:      #6b7280;
    --c-border:      rgba(101, 6, 64, 0.12);
    --c-radius:      14px;
    --c-success:     #15803d;
    --c-warn:        #b45309;
    --c-danger:      #b91c1c;
}

/* ── Create panel ─────────────────────────────────────────────────────── */
.course-create {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 1.1rem 1.25rem;
    margin-block-end: 1.25rem;
}

.course-create label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-block-end: 0.45rem;
}

.course-create-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.course-create-row input[type="text"] {
    flex: 1 1 320px;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    font: inherit;
}

.course-create-row input[type="text"]:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
}

.course-hint {
    margin-block-start: 0.5rem;
    margin-block-end: 0;
    font-size: 0.82rem;
    color: var(--c-subtle);
}

/* ── Admin list ───────────────────────────────────────────────────────── */
.course-admin-list {
    display: grid;
    gap: 0.85rem;
}

.course-admin-card {
    display: grid;
    grid-template-columns: 112px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 0.85rem;
}

.course-admin-cover {
    inline-size: 112px;
    block-size: 68px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--c-accent-soft);
    display: grid;
    place-items: center;
}

.course-admin-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.course-cover-placeholder {
    color: var(--c-accent);
    opacity: 0.35;
    font-size: 1.3rem;
}

.course-admin-body { min-width: 0; }

.course-admin-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.course-admin-title a {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--c-text);
    text-decoration: none;
}

.course-admin-title a:hover { color: var(--c-accent); }

.course-admin-sub {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--c-subtle);
}

.course-admin-meta {
    margin: 0.45rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.82rem;
    color: var(--c-subtle);
}

.course-admin-meta i {
    color: var(--c-accent);
    opacity: 0.6;
    margin-inline-end: 0.25rem;
}

.course-admin-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

/* styles.css sets `form { max-width: 800px; margin-bottom: 40px }` for every
   form on the site. Inside a flex row that bottom margin makes the form box
   taller than its siblings, so its button renders above them — which is what
   put Retire over Edit and Delete over Open. Fixed here, once, rather than in
   each row that noticed it. */
.inline-form { display: inline-flex; align-items: center; margin: 0; }

/* ── Status pills ─────────────────────────────────────────────────────── */
.course-status {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.course-status--published {
    background: rgba(21, 128, 61, 0.1);
    color: var(--c-success);
    border-color: rgba(21, 128, 61, 0.25);
}

.course-status--draft {
    background: rgba(180, 83, 9, 0.1);
    color: var(--c-warn);
    border-color: rgba(180, 83, 9, 0.25);
}

.course-status--archived {
    background: rgba(107, 114, 128, 0.12);
    color: var(--c-subtle);
    border-color: rgba(107, 114, 128, 0.25);
}

.course-delete-form { display: none; }

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .course-admin-card {
        grid-template-columns: 1fr;
    }

    .course-admin-cover {
        inline-size: 100%;
        block-size: 140px;
    }

    .course-admin-actions {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   STUDENT SIDE — catalogue + viewer
   ========================================================================== */

.course-catalogue {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
    padding-block: 2.25rem 4rem;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.course-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.4rem;
}

.course-card {
    position: relative;               /* anchors the whole-card click target */
    display: flex;
    flex-direction: column;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.course-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-accent-line);
    box-shadow: 0 14px 34px rgba(101, 6, 64, 0.14);
}

/* Keyboard users get the same affordance as the hover state. */
.course-card:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* ── Cover ────────────────────────────────────────────────────────────── */
.course-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--c-accent), #2d0a24);
    overflow: hidden;
}

.course-card-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.course-card:hover .course-card-cover img { transform: scale(1.04); }

/* No cover: the course initial on the brand gradient. A deliberate panel
   rather than a faded icon, which reads as a failed image.

   MUST stay scoped to .course-card-cover. The class is shared with
   admin_courses.php, where the parent is not positioned — an unscoped
   `inset: 0` there resolves against the viewport and lays an invisible sheet
   over the entire admin page, swallowing every click. */
.course-card-cover .course-cover-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}

/* ── Ribbon ───────────────────────────────────────────────────────────── */
.course-ribbon {
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-start: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.26rem 0.65rem;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-accent);
    box-shadow: 0 2px 8px rgba(24, 6, 18, 0.2);
    backdrop-filter: blur(4px);
}

.course-ribbon--open  { color: var(--c-success); }
.course-ribbon--draft { color: var(--c-warn); }

/* Free is the one worth shouting about, so it is solid rather than glass. */
.course-ribbon--free {
    background: var(--c-success);
    color: #fff;
}

/* Progress sits on the cover, the way a watched video shows its position. */
.course-card-progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 4px;
    background: rgba(0, 0, 0, 0.35);
}

.course-card-progress span {
    display: block;
    block-size: 100%;
    background: var(--c-success);
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.course-card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem 0.7rem;
    flex: 1;
}

.course-card-title {
    margin: 0 0 0.3rem;
    font-size: 1.08rem;
    line-height: 1.35;
    font-weight: 700;
}

.course-card-title a {
    color: var(--c-text);
    text-decoration: none;
}

/* The whole card is the click target. Kept on one link rather than wrapping
   the card, so the footer button stays a separate, real link. */
.course-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.course-card:hover .course-card-title a { color: var(--c-accent); }

.course-card-sub {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-accent);
}

/* Clamped, so cards of wildly different blurb length still line up. */
.course-card-brief {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--c-subtle);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tutors ───────────────────────────────────────────────────────────────
   The tutors are the course's credentials, so the card names them - photo,
   name and title - instead of a stack of anonymous faces. */
.course-card-faculty {
    display: grid;
    gap: 0.55rem;
    margin: 0.15rem 0 0.85rem;
    padding: 0.75rem 0 0;
    list-style: none;
    border-block-start: 1px dashed var(--c-accent-line);
}

.cc-tutor { display: flex; align-items: center; gap: 0.6rem; min-inline-size: 0; }

.cc-tutor-face {
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-accent-soft);
    box-shadow: 0 0 0 2px var(--c-card), 0 0 0 3px var(--c-accent-line);
}

.cc-tutor-face--initial {
    display: grid;
    place-items: center;
    background: var(--c-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
}

.cc-tutor-text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.25; }

.cc-tutor-text strong,
.cc-tutor-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-tutor-text strong { font-size: 0.88rem; color: var(--c-text); }
.cc-tutor-text small  { font-size: 0.76rem; color: var(--c-subtle); }

.cc-tutor-more {
    padding-inline-start: calc(40px + 0.6rem);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--c-accent);
}

/* ── What is in the course ────────────────────────────────────────────────
   Counted in SQL for the whole page (course_catalogue_stats()). A number that
   is zero is simply not shown. */
.course-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: auto 0 0;                 /* pinned under the variable-height blurb */
    padding: 0;
    list-style: none;
}

.course-card-stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-text);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.course-card-stats i { color: var(--c-accent); font-size: 0.72rem; }

.course-card-stats .is-reward { background: rgba(180, 83, 9, 0.1); color: #92400e; }
.course-card-stats .is-reward i { color: #b45309; }

.course-progress-text {
    margin: 0.6rem 0 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--c-success);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.course-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 1.05rem;
    margin-block-start: auto;
    border-block-start: 1px solid var(--c-accent-line);
}

.course-card-price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
}

.course-card-price small {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--c-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.course-card-price--soft {
    font-size: 0.82rem;
    color: var(--c-success);
}

/* Sits above the card-wide click target so it keeps its own destination. */
.course-card-cta {
    position: relative;
    z-index: 2;
    margin-inline-start: auto;
    white-space: nowrap;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.course-empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--c-subtle);
}

.course-empty-state i { font-size: 2.4rem; color: var(--c-accent); opacity: 0.35; }
.course-empty-state h2,
.course-empty-state h3 { margin: 0.8rem 0 0.3rem; color: var(--c-text); font-size: 1.25rem; text-align: center; }
.course-empty-state p { margin: 0; }

@media (max-width: 520px) {
    .course-cards { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   Catalogue as full-width bands (2026-09-25)
   courses.php is a stack of .band sections (styles.css). The main keeps the
   .course-catalogue class for the scoped buttons and box-sizing, but drops its
   centred 1200px column so the band backgrounds reach the screen edges.
   .course-catalogue without the modifier (course.php errors, course_checkout)
   is untouched.
   ========================================================================== */
.course-catalogue.course-catalogue--bands {
    max-inline-size: none;
    margin: 0;
    padding: 0;
    overflow-x: clip;                 /* no stray horizontal scroll at 360px */
}

/* ── Hero ── */
.cat-hero .band-inner { display: grid; gap: 1.5rem; }

.cat-hero h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    text-align: start;
}

.cat-hero-text p {
    margin: 0;
    max-inline-size: 38rem;
    font-size: clamp(0.98rem, 1.6vw, 1.12rem);
    color: rgba(255, 255, 255, 0.86);
}

/* styles.css gives every form an 800px cap and a 40px bottom margin, and every
   label/select a margin - none of which belongs in a toolbar. */
.cat-hero .cat-filters {
    max-inline-size: none;
    margin: 0;
    padding: 0.6rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cat-hero .cat-select,
.cat-hero .cat-select select { margin: 0; }
.cat-hero .cat-select select { inline-size: auto; }

.cat-hero .cat-search input,
.cat-hero .cat-select select,
.cat-hero .cat-toggle { border-color: transparent; }

.cat-hero .cat-toggle.is-on { background: #fff; color: var(--c-accent); }

/* A brand button on a brand band disappears; white with brand text reads. */
.cat-hero .cat-go.btn-primary { background: #fff; color: var(--c-accent); }
.cat-hero .cat-go.btn-primary:hover { background: #f3e6ee; color: var(--c-accent); }

.cat-hero .cat-clear { color: rgba(255, 255, 255, 0.85); }
.cat-hero .cat-clear:hover { color: #fff; text-decoration: underline; }

/* ── What you get ── */
.cat-perks { padding-block: clamp(1.25rem, 3vw, 2rem); }

.cat-perk-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-perk { display: flex; align-items: flex-start; gap: 0.75rem; }

.cat-perk > i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    background: #fff;
    color: var(--c-accent);
    box-shadow: 0 2px 8px rgba(101, 6, 64, 0.1);
}

.cat-perk span { font-size: 0.85rem; line-height: 1.45; color: var(--c-subtle); }
.cat-perk strong { display: block; font-size: 0.95rem; color: var(--c-text); }

/* ── Section heads (results, faculty) ── */
.cat-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-end: 1.4rem;
}

.cat-section-head h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.2;
    color: var(--c-text);
    text-align: start;
}

.cat-section-sub { margin: 0.3rem 0 0; color: var(--c-subtle); font-size: 0.92rem; }

.cat-count {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Level sits opposite the access ribbon on the cover. */
.course-card-level {
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-end: 0.7rem;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    background: rgba(24, 6, 18, 0.62);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Meet the faculty ── */
.cat-faculty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-prof {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.25rem 1.4rem;
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    background: var(--c-card);
    text-align: center;
}

.cat-prof-face {
    inline-size: 96px;
    block-size: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-accent-soft);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-accent-line);
}

.cat-prof-face--initial {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c-accent), #8a1d5e);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
}

.cat-faculty .cat-prof-name {
    margin: 1rem 0 0.15rem;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--c-text);
    text-align: center;
}

.cat-prof-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--c-accent); }

.cat-prof-bio {
    margin: 0.7rem 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--c-subtle);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-prof-teaches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: auto 0 0;
    padding-block-start: 1rem;
    font-size: 0.78rem;
}

.cat-prof-teaches span {
    inline-size: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-subtle);
}

.cat-prof-teaches a {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: none;
}

.cat-prof-teaches a:hover { background: var(--c-accent); color: #fff; }

@media (max-width: 640px) {
    .cat-hero .cat-select { flex: 1 1 calc(50% - 0.5rem); }
    .cat-hero .cat-select select { inline-size: 100%; }
}


/* ==========================================================================
   Viewer
   ========================================================================== */

.course-view {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.5rem;
    max-inline-size: 1400px;
    margin-inline: auto;
    padding-inline: 1.25rem;
    padding-block: 1.5rem 4rem;
    align-items: start;
}

/* ── Rail ─────────────────────────────────────────────────────────────── */
.course-rail {
    position: sticky;
    inset-block-start: 1rem;
    max-block-size: calc(100vh - 2rem);
    overflow-y: auto;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
}

.course-rail-head {
    padding: 1rem 1rem 0.85rem;
    border-block-end: 1px solid var(--c-border);
}

.course-rail-back {
    font-size: 0.8rem;
    color: var(--c-subtle);
    text-decoration: none;
}

.course-rail-back:hover { color: var(--c-accent); }

.course-rail-title { margin: 0.4rem 0 0; font-size: 1rem; line-height: 1.35; }

.course-rail-progress { margin: 0.35rem 0 0; font-size: 0.76rem; color: var(--c-subtle); }

.course-rail-nav { padding: 0.5rem 0 0.75rem; }

.course-rail-section { margin-block-end: 0.35rem; }

.course-rail-section-title {
    margin: 0.65rem 0 0.25rem;
    padding-inline: 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-subtle);
}

.course-rail-nav ul { list-style: none; margin: 0; padding: 0; }

.course-rail-lesson {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 1rem;
    color: var(--c-text);
    text-decoration: none;
    font-size: 0.88rem;
    border-inline-start: 3px solid transparent;
}

.course-rail-lesson:hover { background: var(--c-accent-soft); }

.course-rail-lesson.is-active {
    background: var(--c-accent-soft);
    border-inline-start-color: var(--c-accent);
    font-weight: 600;
}

.course-rail-lesson.is-locked { color: var(--c-subtle); }

.course-rail-mark { color: var(--c-accent); opacity: 0.55; font-size: 0.85rem; }
.course-rail-lesson.is-locked .course-rail-mark { opacity: 0.4; }
.course-rail-mark .fa-circle-check { color: var(--c-success); opacity: 1; }

.course-rail-lesson-text { min-width: 0; }
.course-rail-len { font-size: 0.74rem; color: var(--c-subtle); }
.course-rail-empty { padding: 1rem; color: var(--c-subtle); font-size: 0.85rem; }

.course-rail-toggle { display: none; }

/* ── Stage ────────────────────────────────────────────────────────────── */
.course-stage { min-width: 0; }

.course-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--c-radius);
    overflow: hidden;
}

.course-video iframe,
.course-video video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.course-live,
.course-locked {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
}

.course-live i,
.course-locked i { font-size: 2.2rem; color: var(--c-accent); opacity: 0.4; }

.course-live h3,
.course-locked h2 { margin: 0.7rem 0 0.4rem; }

.course-live p,
.course-locked p { margin: 0 0 1rem; color: var(--c-subtle); }

.course-locked-alt { font-size: 0.85rem; margin-block-start: 0.9rem; }

.course-lesson-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-start: 1.1rem;
}

.course-lesson-title { margin: 0; font-size: 1.35rem; }
.course-lesson-summary { margin: 0.35rem 0 0; color: var(--c-subtle); }

.course-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--c-accent);
    background: transparent;
    color: var(--c-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.course-complete-btn:hover { background: var(--c-accent-soft); }

.course-complete-btn.is-done {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
}

.course-lesson-body {
    margin-block-start: 1.2rem;
    line-height: 1.7;
}

/* ── About ────────────────────────────────────────────────────────────── */
.course-about { margin-block-start: 2rem; display: grid; gap: 1.25rem; }

.course-about-block {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 1.15rem 1.25rem;
}

.course-about-block h2 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--c-accent); }
.course-about-text { line-height: 1.7; }

.course-tutor-row { display: flex; gap: 1rem; align-items: flex-start; }

.course-tutor-avatar {
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--c-accent-soft);
    display: grid;
    place-items: center;
    color: var(--c-accent);
}

.course-tutor-name { margin: 0; font-weight: 700; }
.course-tutor-title { margin: 0.1rem 0 0.4rem; font-size: 0.87rem; color: var(--c-accent); }
.course-tutor-bio { margin: 0; color: var(--c-subtle); line-height: 1.6; }

.course-download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.course-download {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
}

.course-download.is-locked { opacity: 0.65; }
.course-download i { color: var(--c-accent); }
.course-download-name { flex: 1; min-width: 0; }
.course-download-note { font-size: 0.78rem; color: var(--c-subtle); }

/* ── Narrow screens: rail becomes a drawer ────────────────────────────── */
@media (max-width: 960px) {
    .course-view { grid-template-columns: minmax(0, 1fr); }

    .course-rail {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(88vw, 340px);
        max-block-size: none;
        border-radius: 0;
        z-index: 60;
        transform: translateX(-102%);
        transition: transform 0.25s ease;
    }

    [dir="rtl"] .course-rail { transform: translateX(102%); }

    .course-rail.is-open { transform: translateX(0); }

    .course-rail-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin-block-end: 0.9rem;
        padding: 0.5rem 0.9rem;
        border-radius: 8px;
        border: 1px solid var(--c-border);
        background: var(--c-card);
        font: inherit;
        font-weight: 600;
        color: var(--c-accent);
        cursor: pointer;
    }
}

/* ==========================================================================
   Buttons for the STUDENT pages.

   These were the cause of the "Join the session" / "Start course" buttons
   rendering as underlined links: they use .btn-primary / .btn-ghost, which are
   defined in admin.css — and admin.css is not loaded outside the admin panel.
   The global styles.css expects `class="btn btn-primary"` (two classes), which
   these pages do not use.

   Scoped to the student containers so they never collide with admin.css on the
   admin course screens, where admin.css is now loaded explicitly.
   ========================================================================== */

.course-catalogue .btn-primary,
.course-view .btn-primary,
.course-catalogue .btn-ghost,
.course-view .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;          /* the underline in the screenshots */
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.course-catalogue .btn-primary,
.course-view .btn-primary {
    background: var(--c-accent);
    color: #fff;
}

.course-catalogue .btn-primary:hover,
.course-view .btn-primary:hover {
    background: #4a0430;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.course-catalogue .btn-ghost,
.course-view .btn-ghost {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-accent);
}

.course-catalogue .btn-ghost:hover,
.course-view .btn-ghost:hover {
    background: var(--c-accent-soft);
    text-decoration: none;
}

.course-catalogue .btn-tiny,
.course-view .btn-tiny {
    padding: 0.32rem 0.7rem;
    font-size: 0.8rem;
}

/* ── Live / locked panels ─────────────────────────────────────────────────
   The global h2/h3 rules in styles.css set their own colour and alignment and
   were winning here, which is why the "Live session" heading sat hard against
   the left while the rest of the panel was centred. Stated explicitly. */

.course-view .course-live,
.course-view .course-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem;
}

.course-view .course-live h3,
.course-view .course-locked h2 {
    width: 100%;
    margin: 0.6rem 0 0.35rem;
    text-align: center;
    color: var(--c-text);
    font-size: 1.25rem;
}

.course-view .course-live p,
.course-view .course-locked p {
    width: 100%;
    max-inline-size: 46ch;
    margin: 0 auto 1rem;
    text-align: center;
}

.course-view .course-live i,
.course-view .course-locked i {
    display: block;
    margin: 0 auto;
}

/* ── Tutor in the rail ───────────────────────────────────────────────────
   Moved out of the stage: it belongs to the course, so it is shown once under
   the title and progress rather than repeated beneath every lesson. */

.course-rail-tutor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: 0.85rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--c-border);
}

.course-rail-tutor-avatar {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--c-accent-soft);
    display: grid;
    place-items: center;
    color: var(--c-accent);
    font-size: 0.85rem;
}

.course-rail-tutor-text { min-width: 0; }

.course-rail-tutor-name {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
}

.course-rail-tutor-title {
    margin: 0;
    font-size: 0.76rem;
    color: var(--c-subtle);
    line-height: 1.3;
}

.course-rail-bio {
    margin-block-start: 0.5rem;
    font-size: 0.8rem;
    color: var(--c-subtle);
}

.course-rail-bio summary {
    cursor: pointer;
    color: var(--c-accent);
    font-weight: 600;
}

.course-rail-bio p {
    margin: 0.4rem 0 0;
    line-height: 1.55;
}

/* ── Catalogue cards: keep titles left-aligned and readable ─────────────── */
.course-catalogue .course-card-title,
.course-catalogue .course-card-sub,
.course-catalogue .course-card-brief {
    text-align: start;
}

.course-catalogue .course-card-title a { text-decoration: none; }

/* A cover image that fails to load should not leave a torn icon in a
   16:9 box — the tinted placeholder background stays visible behind it. */
.course-card-cover img,
.course-admin-cover img {
    color: transparent;
}

/* ── Checkout ─────────────────────────────────────────────────────────── */
.course-checkout { max-inline-size: 900px; margin-inline: auto; }

.course-checkout-title { margin: 0.6rem 0 1.25rem; color: var(--c-accent); }

.course-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 1.25rem;
    align-items: start;
}

.course-checkout-summary,
.course-checkout-pay {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 1.15rem 1.25rem;
}

.course-checkout-cover {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    margin-block-end: 0.85rem;
}

.course-checkout-summary h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.course-checkout-sub { margin: 0 0 0.8rem; color: var(--c-subtle); }

.course-checkout-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.course-checkout-facts li { font-size: 0.9rem; }
.course-checkout-facts i { color: var(--c-accent); opacity: 0.65; margin-inline-end: 0.5rem; }

.course-checkout-price { display: flex; align-items: baseline; gap: 0.35rem; }
.course-checkout-amount { font-size: 2rem; font-weight: 800; color: var(--c-accent); }
.course-checkout-currency { font-size: 0.85rem; color: var(--c-subtle); }

.course-checkout-once { margin: 0.2rem 0 0.9rem; font-size: 0.86rem; color: var(--c-subtle); }

.course-checkout-alt {
    margin: 0 0 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--c-accent-soft);
    border-radius: 9px;
    font-size: 0.84rem;
}

.course-checkout-buttons { min-block-size: 50px; }

.course-checkout-status { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--c-subtle); }
.course-checkout-status.is-error { color: var(--c-danger); font-weight: 600; }

.course-checkout-disabled {
    margin: 0;
    padding: 0.75rem;
    background: rgba(180, 83, 9, 0.1);
    border-radius: 9px;
    color: var(--c-warn);
    font-size: 0.87rem;
}

@media (max-width: 760px) {
    .course-checkout-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── "My courses" on the profile ──────────────────────────────────────── */
.profile-course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.profile-course {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-card);
}

.profile-course-cover {
    inline-size: 54px;
    block-size: 40px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--c-accent-soft);
    display: grid;
    place-items: center;
    color: var(--c-accent);
}

.profile-course-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    color: transparent;
}

.profile-course-body { min-width: 0; display: block; }

.profile-course-title {
    display: block;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--c-text);
    text-decoration: none;
}

.profile-course-title:hover { color: var(--c-accent); }

.profile-course-meta {
    display: block;
    margin-block-start: 0.15rem;
    font-size: 0.78rem;
    color: var(--c-subtle);
}

.profile-course-done { color: var(--c-success); font-weight: 600; }
.profile-course-expired { color: var(--c-danger); font-weight: 600; }

.profile-course .course-progress {
    display: block;
    margin-block-start: 0.4rem;
    max-inline-size: 420px;
}

.profile-course .course-progress-bar { display: block; }

.profile-course-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-accent);
    white-space: nowrap;
}

/* ==========================================================================
   COURSE SETUP WIZARD
   ========================================================================== */

/* Feedback item 1: the page title sat hard against the nav rail. The shared
   .main-content padding is 1.5rem for every admin screen, so the breathing
   room is added here rather than changing every page. */
.main-content > .admin-head,
.main-content > .wiz-head,
.main-content > .wiz-steps,
.main-content > .wiz-card,
.main-content > .admin-flash {
    margin-inline: clamp(0.5rem, 2vw, 1.75rem);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.wiz-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block: 0.5rem 1.25rem;
}

.wiz-back {
    font-size: 0.82rem;
    color: var(--c-subtle);
    text-decoration: none;
}

.wiz-back:hover { color: var(--c-accent); }

.wiz-title {
    margin: 0.35rem 0 0.3rem;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--c-text);
}

.wiz-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.82rem;
    color: var(--c-subtle);
}

/* Feedback item 2: the Unpublish button floated above the others because the
   container had no shared baseline. Stretch aligns every control's box, and
   the buttons centre their own contents. */
.wiz-head-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wiz-head-actions .btn-primary,
.wiz-head-actions .btn-ghost,
.wiz-head-actions .inline-form,
.wiz-head-actions .inline-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* ── Stepper ──────────────────────────────────────────────────────────── */
.wiz-steps {
    display: flex;
    gap: 0;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 0.4rem;
    margin-block-end: 1.1rem;
    overflow-x: auto;
}

.wiz-step {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 118px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-subtle);
    font-size: 0.87rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}

.wiz-step:hover { background: var(--c-accent-soft); color: var(--c-accent); }

/* The connecting line, drawn between dots rather than as a border so it can
   sit behind them. */
.wiz-step + .wiz-step::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.5rem;
    inset-block-start: 50%;
    inline-size: 1rem;
    block-size: 2px;
    background: var(--c-border);
}

.wiz-step-dot {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-subtle);
    transition: all 0.16s ease;
}

.wiz-step.is-done .wiz-step-dot {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
}

.wiz-step.is-current {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.wiz-step.is-current .wiz-step-dot {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(101, 6, 64, 0.12);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.wiz-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: 1.35rem 1.5rem;
    margin-block-end: 1.1rem;
    box-shadow: 0 1px 2px rgba(101, 6, 64, 0.04);
}

/* styles.css caps every <form> at 800px; a wizard card that happens to be a
   form must be as wide as the div cards around it. */
form.wiz-card { max-width: none; margin-block-end: 1.1rem; }

.wiz-card-head { margin-block-end: 1.1rem; }

.wiz-card-head h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    color: var(--c-text);
}

.wiz-card-head h3 {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
    color: var(--c-text);
}

.wiz-card-head p {
    margin: 0;
    font-size: 0.87rem;
    color: var(--c-subtle);
    max-inline-size: 70ch;
}

.wiz-card-head--sub {
    margin-block-start: 1.6rem;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--c-border);
}

.wiz-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 24px;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 0.78rem;
}

.wiz-note {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--c-subtle);
}

/* ── Fields ───────────────────────────────────────────────────────────── */
.wiz-grid {
    display: grid;
    /* At most three columns, however wide the card gets. */
    grid-template-columns: repeat(auto-fit, minmax(max(230px, calc((100% - 2rem) / 3)), 1fr));
    gap: 1rem;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-text);
}

.field-label em {
    font-style: normal;
    font-weight: 400;
    color: var(--c-subtle);
}

.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea,
.wiz-inline-add input[type="text"] {
    inline-size: 100%;
    padding: 0.58rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    color: var(--c-text);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.field textarea { resize: vertical; line-height: 1.55; }

.field input:focus,
.field select:focus,
.field textarea:focus,
.wiz-inline-add input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(101, 6, 64, 0.1);
}

.field small,
.field .field-slug {
    font-size: 0.78rem;
    color: var(--c-subtle);
    line-height: 1.45;
}

.field-slug code {
    background: var(--c-accent-soft);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-size: 0.76rem;
    color: var(--c-accent);
}

.field-money { display: flex; align-items: stretch; }

.field-money span {
    display: grid;
    place-items: center;
    padding-inline: 0.7rem;
    border: 1px solid var(--c-border);
    border-inline-end: 0;
    border-start-start-radius: 9px;
    border-end-start-radius: 9px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 700;
}

.field-money input {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

.wiz-linkish {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--c-accent);
    text-decoration: underline;
    cursor: pointer;
}

/* ── Choice cards ─────────────────────────────────────────────────────── */
.wiz-choices { display: grid; gap: 0.6rem; }
.wiz-choices--tight { margin-block-start: 1rem; }

.wiz-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.wiz-choice:hover { border-color: var(--c-accent-line); background: var(--c-accent-soft); }

.wiz-choice input[type="checkbox"] {
    inline-size: 18px;
    block-size: 18px;
    margin-block-start: 0.15rem;
    accent-color: var(--c-accent);
    flex: 0 0 auto;
}

.wiz-choice:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.wiz-choice-body { display: flex; flex-direction: column; gap: 0.2rem; }

.wiz-choice-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--c-text);
}

.wiz-choice-title i { color: var(--c-accent); margin-inline-end: 0.4rem; }

.wiz-choice-desc {
    font-size: 0.82rem;
    color: var(--c-subtle);
    line-height: 1.5;
}

.wiz-conditional { margin-block-start: 1rem; }

/* ── Summary strip ────────────────────────────────────────────────────── */
.wiz-summary {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-block-start: 1.2rem;
    padding: 0.85rem 1rem;
    border-radius: 11px;
    background: rgba(21, 128, 61, 0.08);
    border: 1px solid rgba(21, 128, 61, 0.22);
    font-size: 0.87rem;
    line-height: 1.55;
}

.wiz-summary i { color: var(--c-success); margin-block-start: 0.15rem; }

.wiz-summary.is-warning {
    background: rgba(180, 83, 9, 0.09);
    border-color: rgba(180, 83, 9, 0.25);
}

.wiz-summary.is-warning i { color: var(--c-warn); }

/* ── Footer bar ───────────────────────────────────────────────────────── */
.wiz-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-start: 1.5rem;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--c-border);
}

.wiz-foot-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ── Image dropzone ───────────────────────────────────────────────────── */
.img-drop {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    padding: 1rem;
    border: 2px dashed var(--c-border);
    border-radius: 12px;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.img-drop.is-over {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.img-drop-preview {
    inline-size: 190px;
    block-size: 107px;          /* 16:9 */
    flex: 0 0 auto;
    border-radius: 9px;
    background-color: var(--c-accent-soft);
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    color: var(--c-accent);
    opacity: 1;
    font-size: 1.4rem;
}

.img-drop-preview--circle {
    inline-size: 84px;
    block-size: 84px;
    border-radius: 50%;
}

.img-drop-body { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }

.img-drop-hint { margin: 0; font-size: 0.85rem; color: var(--c-subtle); }

.img-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: #fff;
    color: var(--c-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.img-drop-btn:hover { background: var(--c-accent-soft); }
.img-drop-btn--tiny { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

.img-drop-status { margin: 0; font-size: 0.78rem; color: var(--c-subtle); min-block-size: 1em; }
.img-drop-status.is-error { color: var(--c-danger); font-weight: 600; }

/* ── Tutors ───────────────────────────────────────────────────────────── */
.tutor-list { display: grid; gap: 0.85rem; margin-block-end: 1rem; }

.tutor-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    padding: 1rem;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: #fff;
}

.tutor-card .img-drop {
    flex-direction: column;
    gap: 0.5rem;
    border: 0;
    padding: 0;
    align-items: center;
}

.tutor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; }

.tutor-remove {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-subtle);
    cursor: pointer;
}

.tutor-remove:hover { background: rgba(185, 28, 28, 0.1); color: var(--c-danger); }

/* ── Sections & lessons ───────────────────────────────────────────────── */
.wiz-inline-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-block-end: 1.1rem;
}

.wiz-inline-add input[type="text"] { flex: 1 1 260px; }

.wiz-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--c-subtle);
    border: 1px dashed var(--c-border);
    border-radius: 11px;
}

.wiz-empty i { font-size: 1.6rem; color: var(--c-accent); opacity: 0.35; }
.wiz-empty p { margin: 0.5rem 0 0; font-size: 0.88rem; }

.sec-block {
    border: 1px solid var(--c-border);
    border-radius: 11px;
    margin-block-end: 0.8rem;
    overflow: hidden;
}

.sec-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--c-accent-soft);
}

.sec-rename { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.sec-rename input { flex: 1; max-inline-size: 360px; }
.sec-title { margin: 0; font-size: 0.95rem; flex: 1; }
.sec-count { font-size: 0.78rem; color: var(--c-subtle); }

.sec-del {
    border: 0;
    background: none;
    color: var(--c-subtle);
    cursor: pointer;
    padding: 0.3rem;
}

.sec-del:hover { color: var(--c-danger); }

.les-list { list-style: none; margin: 0; padding: 0; }

.les-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-block-start: 1px solid var(--c-border);
}

.les-row:first-child { border-block-start: 0; }

.les-icon {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 8px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 0.8rem;
}

.les-icon--live { background: rgba(185, 28, 28, 0.1); color: var(--c-danger); }

.les-name { font-size: 0.9rem; min-width: 0; }

.les-type {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-subtle);
}

.les-tools { display: flex; gap: 0.15rem; align-items: center; }

.les-tool {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--c-subtle);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.78rem;
}

.les-tool:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.les-tool--danger:hover { background: rgba(185, 28, 28, 0.1); color: var(--c-danger); }

.les-empty { padding: 0.8rem; font-size: 0.85rem; color: var(--c-subtle); }

.course-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.course-pill--preview { background: rgba(21, 128, 61, 0.12); color: var(--c-success); }
.course-pill--draft   { background: rgba(180, 83, 9, 0.12); color: var(--c-warn); }

/* ── Material ─────────────────────────────────────────────────────────── */
.mat-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }

.mat-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
}

.mat-row > i { color: var(--c-accent); }
.mat-name { font-size: 0.9rem; min-width: 0; }
.mat-name small { color: var(--c-subtle); }

.mat-ref {
    font-size: 0.75rem;
    color: var(--c-subtle);
    background: var(--c-accent-soft);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    max-inline-size: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Students ─────────────────────────────────────────────────────────── */
.stu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.stu-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
}

.stu-row.is-inactive { opacity: 0.6; }

.stu-avatar {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
}

.stu-body { min-width: 0; }

.stu-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
}

.stu-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--c-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
}

.stu-bad { color: var(--c-danger); }

.stu-src {
    display: inline-block;
    margin-inline-start: 0.4rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.stu-src--purchase { background: rgba(21, 128, 61, 0.12); color: var(--c-success); }
.stu-src--manual   { background: rgba(180, 83, 9, 0.12); color: var(--c-warn); }

.stu-enrol { display: flex; gap: 0.4rem; align-items: center; }
.stu-days { inline-size: 92px; padding: 0.45rem 0.55rem; border: 1px solid var(--c-border); border-radius: 8px; font: inherit; font-size: 0.85rem; }

/* ── Narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .wiz-step-label { display: none; }
    .wiz-step { min-inline-size: 0; justify-content: center; }
    .tutor-card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .tutor-fields { inline-size: 100%; }
    .les-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .les-type { display: none; }
    .stu-row { grid-template-columns: 38px minmax(0, 1fr); }
    .stu-row form, .stu-enrol { grid-column: 1 / -1; justify-content: flex-start; }
    .mat-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .mat-ref { display: none; }
}

/* Several tutors in the rail */
.course-rail-tutors {
    margin-block-start: 0.85rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--c-border);
}

.course-rail-tutors .course-rail-tutor {
    margin-block-start: 0.6rem;
    padding-block-start: 0;
    border-block-start: 0;
}

.course-rail-tutors .course-rail-tutor:first-child { margin-block-start: 0; }

/* ==========================================================================
   FIXES FROM TESTING
   ========================================================================== */

/* The site has no global `box-sizing: border-box`, so `inline-size: 100%`
   plus padding made the catalogue button wider than its card — it visibly
   hung out of the box. Scoped to the course components rather than set
   globally: every legacy page was laid out against content-box, and changing
   that site-wide would shift layouts nobody asked me to touch. */
.course-catalogue *,
.course-catalogue *::before,
.course-catalogue *::after,
.course-view *,
.course-view *::before,
.course-view *::after,
.wiz-card *,
.wiz-card *::before,
.wiz-card *::after,
.course-admin-card *,
.wiz-head * {
    box-sizing: border-box;
}

/* The catalogue footer used to be one full-width button, which is what made
   the cards read as a template. It is now a price/CTA row, declared with the
   rest of the card above — nothing to re-force here. The box-sizing rule above
   is still what keeps the button inside its card. */

/* .inline-form carries its own alignment now; these only need to stretch. */
.course-admin-actions { align-items: stretch; }

.course-admin-actions > .btn-ghost,
.course-admin-actions > .btn-danger,
.course-admin-actions > .inline-form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Autosave indicator */
.wiz-save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(21, 128, 61, 0.1);
    color: var(--c-success);
    white-space: nowrap;
}

.wiz-save[data-state="dirty"]  { background: rgba(180, 83, 9, 0.12); color: var(--c-warn); }
.wiz-save[data-state="saving"] { background: var(--c-accent-soft);   color: var(--c-accent); }
.wiz-save[data-state="error"]  { background: rgba(185, 28, 28, 0.1); color: var(--c-danger); }

/* "New content" badge — green, so a bar going 4/4 -> 4/5 reads as more to
   enjoy rather than progress lost. */
.course-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-inline-start: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(21, 128, 61, 0.12);
    color: var(--c-success);
    font-size: 0.72rem;
    font-weight: 700;
}

.course-new-line {
    /* Flex, not a text run: the badge is inline-flex and was sitting on a
       different baseline from the sentence beside it. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--c-subtle);
}

.course-new-line .course-new-badge { margin-inline-start: 0; }

/* ==========================================================================
   CONTENT TREE
   ========================================================================== */

.tree-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-end: 1rem;
}

.tree-status { font-size: 0.82rem; color: var(--c-subtle); }
.tree-status.is-error { color: var(--c-danger); font-weight: 600; }

.tree-root,
.tree-children { list-style: none; margin: 0; padding: 0; }

.tree-children {
    margin-inline-start: 1.6rem;
    padding-inline-start: 0.6rem;
    border-inline-start: 2px solid var(--c-border);
    min-block-size: 0.5rem;
}

.tree-item { margin-block-start: 0.35rem; }
.tree-item.is-dragging { opacity: 0.4; }

.tree-row {
    display: grid;
    grid-template-columns: 22px 30px minmax(0, 1fr) auto auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: #fff;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.tree-row:hover { border-color: var(--c-accent-line); box-shadow: 0 1px 4px rgba(101,6,64,0.07); }

.tree-item--section > .tree-row { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.tree-item--lesson  > .tree-row { background: #fcfbfc; }

.tree-grip { color: var(--c-subtle); cursor: grab; font-size: 0.8rem; text-align: center; }
.tree-grip:active { cursor: grabbing; }

.tree-icon {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 8px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 0.8rem;
}

.tree-item--section > .tree-row .tree-icon { background: #fff; }
.tree-item--material > .tree-row .tree-icon { background: rgba(107,114,128,0.12); color: var(--c-subtle); }
.tree-item--live > .tree-row .tree-icon { background: rgba(185,28,28,0.1); color: var(--c-danger); }

.tree-title {
    font-size: 0.92rem;
    font-weight: 600;
    cursor: text;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-title:hover { color: var(--c-accent); }

.tree-item--section > .tree-row .tree-title { font-weight: 700; }

.tree-type {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-subtle);
}

.tree-flags { display: flex; gap: 0.25rem; }
.tree-tools { display: flex; gap: 0.1rem; }

.tree-tool {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--c-subtle);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.78rem;
}

.tree-tool:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.tree-tool--danger:hover { background: rgba(185,28,28,0.1); color: var(--c-danger); }

/* Drop targets */
.tree-drop-hint {
    padding: 0.35rem 0.65rem;
    margin-block-start: 0.3rem;
    border: 1px dashed transparent;
    border-radius: 8px;
    font-size: 0.76rem;
    color: transparent;
}

.is-drop-target { background: rgba(101, 6, 64, 0.05); border-radius: 9px; }

.is-drop-target > .tree-drop-hint {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* ── "+" menu ─────────────────────────────────────────────────────────── */
.tree-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(24, 12, 20, 0.45);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.tree-menu[hidden] { display: none; }

.tree-menu-panel {
    inline-size: min(460px, 100%);
    max-block-size: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.tree-menu-panel h3 { margin: 0 0 0.9rem; font-size: 1.05rem; }

.tree-menu-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.4rem; }

.tree-menu-item {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.tree-menu-item:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }

.tree-menu-icon {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.tree-menu-text { display: flex; flex-direction: column; }
.tree-menu-text strong { font-size: 0.92rem; }
.tree-menu-text small { font-size: 0.78rem; color: var(--c-subtle); }

@media (max-width: 760px) {
    .tree-row { grid-template-columns: 22px 30px minmax(0, 1fr) auto; }
    .tree-type, .tree-flags { display: none; }
    .tree-children { margin-inline-start: 0.9rem; }
}

/* Rail outline — nested to match the content tree */
.rail-tree, .rail-children { list-style: none; margin: 0; padding: 0; }
.rail-children { margin-inline-start: 0.85rem; border-inline-start: 1px solid var(--c-border); }

.rail-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.7rem 0 0.25rem;
    padding-inline: 1rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-subtle);
}

.rail-group--lesson {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: var(--c-text);
}

.rail-group i { color: var(--c-accent); opacity: 0.6; }

.rail-material {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    color: var(--c-subtle);
}

.rail-material i { color: var(--c-accent); opacity: 0.55; }

/* ==========================================================================
   FIXES FROM TESTING — "+ Add" menu
   ========================================================================== */

/* The page showed through the menu: the site header is z-index 10000 and the
   sidebar 300, so 200 was never going to be enough. */
.tree-menu { z-index: 10050; }

/* styles.css has a bare `button { color: white; background-color: #650640 }`
   rule. The menu items are <button>s that never set a colour, so every bold
   label ("Section", "Lesson", "Video") rendered white on white and vanished.
   Everything here states its own colour rather than inheriting. */
.tree-menu-item {
    color: var(--c-text);
    background-color: #fff;
}

.tree-menu-item:hover { background-color: var(--c-accent-soft); color: var(--c-text); }

.tree-menu-text strong {
    color: var(--c-text);
    font-size: 0.95rem;
    line-height: 1.3;
}

.tree-menu-text small {
    color: var(--c-subtle);
    line-height: 1.4;
}

.tree-menu-icon { background-color: var(--c-accent-soft); color: var(--c-accent); }

.tree-menu-panel h3 { color: var(--c-text); }

/* Same trap on the tree's own controls — they are <button>s too. */
.tree-tool { background-color: transparent; color: var(--c-subtle); }
.tree-tool:hover { background-color: var(--c-accent-soft); color: var(--c-accent); }
.tree-tool--danger:hover { background-color: rgba(185, 28, 28, 0.1); color: var(--c-danger); }
.tree-grip { background-color: transparent; }

/* Titles: state the colour so the bare `button`/inherited white cannot win,
   and keep section headings clearly darker than their children. */
.tree-title { color: var(--c-text); }
.tree-item--section > .tree-row .tree-title { color: var(--c-accent); }
.tree-item--lesson  > .tree-row .tree-title { color: var(--c-text); }
.tree-type { color: var(--c-subtle); }

/* A dragged row keeps readable text rather than fading into the background. */
.tree-item.is-dragging > .tree-row {
    opacity: 1;
    border-style: dashed;
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

.tree-item.is-dragging { opacity: 0.75; }

/* ==========================================================================
   Q&A BOARD
   ========================================================================== */
.qa-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1.1rem;
}

.qa-title { margin: 0; font-size: 1.35rem; }
.qa-sub { margin: 0.3rem 0 0; color: var(--c-subtle); font-size: 0.9rem; }

.qa-ask {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    margin-block-end: 1.1rem;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
}

.qa-ask input[type="text"], .qa-ask textarea, .qa-reply textarea {
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    font: inherit;
    font-size: 0.9rem;
}

.qa-ask-actions, .qa-reply-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.qa-status { font-size: 0.8rem; color: var(--c-subtle); }

.qa-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-block-end: 0.9rem; }

.qa-filter {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    font-size: 0.82rem;
    color: var(--c-subtle);
    text-decoration: none;
}

.qa-filter.is-active, .qa-filter:hover {
    background: var(--c-accent-soft);
    border-color: var(--c-accent-line);
    color: var(--c-accent);
}

.qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.qa-item {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    overflow: hidden;
}

.qa-item.is-resolved { opacity: 0.85; }

.qa-q {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
}

.qa-q::-webkit-details-marker { display: none; }

.qa-avatar {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.qa-avatar--sm { inline-size: 28px; block-size: 28px; font-size: 0.75rem; }
.qa-avatar.is-staff { background: var(--c-success); }

.qa-q-body { flex: 1; min-width: 0; }
.qa-q-title { display: block; font-weight: 600; font-size: 0.95rem; }
.qa-q-meta { display: block; font-size: 0.78rem; color: var(--c-subtle); }

.qa-pill {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.qa-pill--done  { background: rgba(21, 128, 61, 0.12); color: var(--c-success); }
.qa-pill--open  { background: rgba(180, 83, 9, 0.12); color: var(--c-warn); }
.qa-pill--staff { background: rgba(21, 128, 61, 0.12); color: var(--c-success); }

.qa-detail { padding: 0 1rem 1rem; border-block-start: 1px solid var(--c-border); }
.qa-q-text { margin: 0.8rem 0; line-height: 1.6; }

.qa-answers { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.6rem; }

.qa-answer {
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem;
    border-radius: 10px;
    background: #fbfafb;
}

.qa-answer.is-accepted { background: rgba(21, 128, 61, 0.07); }
.qa-answer-body { min-width: 0; flex: 1; }
.qa-answer-meta { margin: 0 0 0.25rem; font-size: 0.82rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.qa-answer-text { margin: 0; line-height: 1.55; font-size: 0.9rem; }
.qa-when { color: var(--c-subtle); font-size: 0.75rem; }

.qa-reply { display: grid; gap: 0.5rem; }

.qa-empty { text-align: center; padding: 2.5rem 1rem; color: var(--c-subtle); }
.qa-empty i { font-size: 2rem; color: var(--c-accent); opacity: 0.35; }
.qa-empty p { margin: 0.6rem 0 0; }

/* ==========================================================================
   REWARDS  (course rail, profile wall, admin step 6)
   ========================================================================== */

/* ── In the course rail ─────────────────────────────────────────────── */
.rw-rail { margin-block-start: 1.4rem; }

.rw-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }

/* The course rail is --c-card (white). These chips were written against a
   dark rail, so the titles were white on white: present, clickable, invisible
   — which also made the Rewards heading look like it was sitting over nothing. */
.rw-chip {
    --rw: #650640;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    background: var(--c-accent-soft);
    border: 1px solid var(--c-border);
}
.rw-chip.is-locked { opacity: 0.55; }

.rw-chip-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    inline-size: 100%;
}

.rw-chip-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background: var(--rw);
    color: #fff;
    font-size: 0.8rem;
}
.rw-chip.is-locked .rw-chip-icon { background: rgba(101, 6, 64, 0.18); }

.rw-chip-text { display: flex; flex-direction: column; min-inline-size: 0; }
.rw-chip-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rw-chip-meta { font-size: 0.72rem; color: var(--c-subtle); }
.rw-chip.is-earned .rw-chip-meta { color: #15803d; font-weight: 600; }

/* Used by the rewards block and anything else the rail grows later. */
.course-rail-heading {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-subtle);
}

/* ── On the profile ─────────────────────────────────────────────────── */
.rw-wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem;
           grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.rw-card {
    --rw: #650640;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(101, 6, 64, 0.12);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.rw-card:hover { box-shadow: 0 8px 20px rgba(24, 6, 18, 0.1); transform: translateY(-1px); }

.rw-card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 50%;
    background: var(--rw);
    color: #fff;
    font-size: 1.05rem;
}

.rw-card-body { min-inline-size: 0; }
.rw-card-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: #1f2430; }
.rw-card-meta  { margin: 0.15rem 0 0; font-size: 0.78rem; color: #6b7280; }
.rw-card-cta   { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 600; color: #650640; }

.rw-empty {
    padding: 1.4rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    border: 1px dashed rgba(101, 6, 64, 0.2);
    border-radius: 12px;
}

/* ── Admin step 6 ───────────────────────────────────────────────────── */
.rw-admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.rw-admin {
    --rw: #650640;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(101, 6, 64, 0.12);
    border-radius: 12px;
    background: #fff;
}
.rw-admin.is-off { opacity: 0.6; }

.rw-admin-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: var(--rw);
    color: #fff;
}

.rw-admin-body { flex: 1 1 auto; min-inline-size: 0; }
.rw-admin-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: #1f2430;
                  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.rw-admin-meta  { margin: 0.15rem 0 0; font-size: 0.8rem; color: #6b7280; }

.rw-admin-type {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(101, 6, 64, 0.09);
    color: #650640;
}
.rw-admin-type--off { background: rgba(180, 35, 24, 0.1); color: #b42318; }

.rw-admin-actions { display: flex; gap: 0.4rem; align-items: center; flex: 0 0 auto; }

/* Type picker — cards, because each option needs a sentence of explanation. */
.rw-type-picker {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    margin-block-end: 1.2rem;
}

.rw-type {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem;
    border: 1px solid rgba(101, 6, 64, 0.16);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.rw-type input { position: absolute; opacity: 0; pointer-events: none; }
.rw-type > i { font-size: 1.15rem; color: #650640; }
.rw-type.is-on { border-color: #650640; box-shadow: 0 0 0 2px rgba(101, 6, 64, 0.14); }
.rw-type-label { font-weight: 600; font-size: 0.92rem; color: #1f2430; }
.rw-type-hint  { font-size: 0.78rem; color: #6b7280; line-height: 1.35; }

.rw-icons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rw-icon {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 10px;
    border: 1px solid rgba(101, 6, 64, 0.16);
    background: #fff;
    color: #650640;
    cursor: pointer;
}
.rw-icon input { position: absolute; opacity: 0; pointer-events: none; }
.rw-icon.is-on { background: #650640; color: #fff; border-color: #650640; }

.rw-threshold { display: flex; align-items: center; gap: 0.7rem; }
.rw-threshold input[type="range"] { flex: 1 1 auto; accent-color: #650640; }
.rw-threshold output {
    min-inline-size: 3.2rem;
    text-align: end;
    font-weight: 700;
    color: #650640;
}

/* ==========================================================================
   FIXES FROM TESTING — round 2
   ========================================================================== */

/* `hidden` is a UA rule, and ANY author `display` beats it regardless of
   specificity. `.field { display: flex }` therefore kept every conditionally
   hidden block on screen — which is why picking a reward type appeared to do
   nothing. Forced inside the course components only. */
.wiz-card [hidden],
.course-view [hidden],
.course-catalogue [hidden],
.course-admin-card [hidden] {
    display: none !important;
}

.rw-admin-actions > .btn-ghost,
.rw-admin-actions > .inline-form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ── Reward preview ───────────────────────────────────────────────────── */
.rw-preview {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    margin-block-end: 1.2rem;
    border: 1px dashed var(--c-accent-line);
    border-radius: 12px;
    background: var(--c-accent-soft);
}

.rw-preview-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-subtle);
}

.rw-preview-chip {
    background: var(--c-card);
    border-color: var(--c-border);
    min-inline-size: 220px;
}

.rw-preview-chip .rw-chip-title { color: var(--c-text); }
.rw-preview-chip .rw-chip-meta  { color: var(--c-subtle); }

.wiz-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: var(--c-accent-soft);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--c-text);
}

.wiz-note i { color: var(--c-accent); margin-block-start: 0.15rem; }

/* ── Material upload ──────────────────────────────────────────────────── */
.mat-drop {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1.5px dashed var(--c-accent-line);
    border-radius: 12px;
    background: var(--c-accent-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mat-drop:hover,
.mat-drop:focus-visible,
.mat-drop.is-over {
    border-color: var(--c-accent);
    background: rgba(101, 6, 64, 0.1);
    outline: none;
}

.mat-drop.is-busy { opacity: 0.6; pointer-events: none; }

.mat-drop > i { font-size: 1.4rem; color: var(--c-accent); }

.mat-drop-text { display: flex; flex-direction: column; gap: 0.1rem; }
.mat-drop-text strong { font-size: 0.9rem; color: var(--c-text); }
.mat-drop-text small  { font-size: 0.78rem; color: var(--c-subtle); }

.mat-drop-status {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    color: var(--c-subtle);
    min-block-size: 1.1em;
}

.mat-drop-status.is-ok  { color: var(--c-success); font-weight: 600; }
.mat-drop-status.is-bad { color: var(--c-danger); font-weight: 600; }

/* ── Catalogue search and filters ─────────────────────────────────────── */
.cat-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 1.75rem;
}

.cat-search {
    position: relative;
    flex: 1 1 260px;
    min-inline-size: 200px;
}

.cat-search > i {
    position: absolute;
    inset-inline-start: 0.85rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--c-subtle);
    font-size: 0.85rem;
    pointer-events: none;
}

.cat-search input {
    inline-size: 100%;
    padding: 0.62rem 0.9rem;
    padding-inline-start: 2.3rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-card);
    font: inherit;
    font-size: 0.9rem;
    color: var(--c-text);
}

.cat-search input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.cat-select { position: relative; display: block; }

/* The label floats inside the control, so the row stays one line tall while
   each dropdown still says what it filters. */
.cat-select-label {
    position: absolute;
    inset-block-start: 0.28rem;
    inset-inline-start: 0.8rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-subtle);
    pointer-events: none;
}

.cat-select select {
    appearance: none;
    padding: 1.05rem 2rem 0.32rem 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-card);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    /* The arrow is drawn rather than loaded, and stays on the correct side in
       Arabic because the position is logical. */
    background-image: linear-gradient(45deg, transparent 50%, var(--c-subtle) 50%),
                      linear-gradient(135deg, var(--c-subtle) 50%, transparent 50%);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    background-position: right 1rem top 1.15rem, right 0.7rem top 1.15rem;
}

html[dir="rtl"] .cat-select select {
    background-position: left 0.7rem top 1.15rem, left 1rem top 1.15rem;
}

.cat-select select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.cat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-card);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
}

.cat-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cat-toggle i { color: var(--c-subtle); font-size: 0.8rem; }

.cat-toggle.is-on {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.cat-toggle.is-on i { color: var(--c-accent); }

.cat-go { flex: 0 0 auto; }

.cat-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-subtle);
    text-decoration: none;
}

.cat-clear:hover { color: var(--c-danger); }

/* ── Pager ────────────────────────────────────────────────────────────── */
.cat-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 2.25rem;
}

.cat-page {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-card);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-accent);
    text-decoration: none;
}

.cat-page:hover { background: var(--c-accent-soft); border-color: var(--c-accent-line); }

.cat-page-of { font-size: 0.82rem; color: var(--c-subtle); }

@media (max-width: 640px) {
    .cat-filters { gap: 0.5rem; }
    .cat-search { flex: 1 1 100%; }
    .cat-go { flex: 1 1 100%; }
}

/* Shown when the search throttle refuses a query — the catalogue itself still
   renders, so this is a note, not an error page. */
.cat-notice {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-block-end: 1.1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(180, 83, 9, 0.25);
    background: rgba(180, 83, 9, 0.07);
    color: #b45309;
    font-size: 0.87rem;
}

/* Coordinators — the staff accounts that run a course. Deliberately plainer
   than the tutor cards above them: this is a contact list, not a billing. */
.course-rail-coords {
    margin-block-start: 0.85rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--c-border);
}

.course-coord-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.45rem; }

.course-coord { display: flex; align-items: center; gap: 0.6rem; }

.course-coord-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-size: 0.8rem;
}

.course-coord-text { display: flex; flex-direction: column; min-inline-size: 0; }
.course-coord-name { font-size: 0.85rem; font-weight: 600; color: var(--c-text); }
.course-coord-role { font-size: 0.72rem; color: var(--c-subtle); }

/* The coordinator picker can hold a dozen accounts; one per row wastes the card. */
.wiz-choices--cols { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ── Purchase bar ─────────────────────────────────────────────────────────
   Sits at the top of the stage whenever the viewer does not have access, on
   every lesson including a free preview. The old call to action lived inside
   the locked-lesson panel, so a course that opens on a free preview never
   showed one — the catalogue promised "Get this course" and delivered a
   preview with no way to buy. */
.course-buybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1.25rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--c-accent-line);
    border-radius: var(--c-radius);
    background: linear-gradient(120deg, var(--c-accent-soft), var(--c-card));
}

.course-buybar-text { min-inline-size: 0; }

.course-buybar-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--c-accent);
}

.course-buybar-sub {
    margin: 0.2rem 0 0;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--c-subtle);
}

.course-buybar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .course-buybar-actions { inline-size: 100%; }
    .course-buybar-actions > a { flex: 1 1 auto; justify-content: center; }
}

/* ── Wizard step 3: instructors ────────────────────────────────────────
   Two ways in (registered instructor / by hand), a card per person, and a
   "Linked account" row on each card. The combobox is shared by both. */
.inst-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: 1rem; }
.inst-actions .btn-ghost { display: inline-flex; align-items: center; gap: 0.45rem; }
.inst-actions .btn-ghost[aria-expanded="true"] {
    border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft);
}

.inst-panel {
    display: grid; gap: 0.4rem; margin-block-end: 1rem; padding: 0.9rem 1rem;
    border: 1px dashed var(--c-accent-line); border-radius: 12px; background: var(--c-accent-soft);
}
.inst-panel[hidden] { display: none; }
.inst-panel small { color: var(--c-subtle); font-size: 0.78rem; }

.inst-empty {
    display: grid; justify-items: center; gap: 0.25rem; padding: 1.6rem 1rem; margin-block-end: 1rem;
    text-align: center; border: 1px dashed var(--c-border); border-radius: 12px; color: var(--c-subtle);
}
.inst-empty[hidden] { display: none; }
.inst-empty i { font-size: 1.5rem; color: var(--c-accent); opacity: 0.7; }
.inst-empty strong { color: var(--c-text); }

.tutor-body { display: grid; gap: 0.9rem; min-inline-size: 0; align-content: start; }
.tutor-card { padding-inline-end: 2.6rem; }

.tutor-link {
    display: grid; gap: 0.4rem; padding-block-start: 0.8rem; border-block-start: 1px solid var(--c-border);
}
.tutor-link .field-label em { font-style: normal; font-weight: 400; color: var(--c-subtle); margin-inline-start: 0.3rem; }
.tutor-link-pick { max-inline-size: 26rem; }
.tutor-link-pick[hidden], .tutor-chip[hidden] { display: none; }
.tutor-link-note { margin: 0; font-size: 0.8rem; color: var(--c-subtle); }
.tutor-link-note:empty { display: none; }
.tutor-link-note.is-warn { color: var(--c-warn); font-weight: 600; }

.tutor-chip {
    display: inline-flex; align-items: center; gap: 0.6rem; max-inline-size: 100%;
    padding: 0.35rem 0.4rem; padding-inline-end: 0.5rem; justify-self: start;
    border: 1px solid var(--c-accent-line); border-radius: 999px; background: var(--c-accent-soft);
}
.tutor-chip-av, .combo-av {
    flex: 0 0 auto; display: grid; place-items: center; inline-size: 28px; block-size: 28px;
    border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.tutor-chip-text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.2; }
.tutor-chip-text strong { font-size: 0.86rem; color: var(--c-text); overflow-wrap: anywhere; }
.tutor-chip-text small { font-size: 0.74rem; color: var(--c-subtle); overflow-wrap: anywhere; }
.tutor-unlink {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--c-accent);
    font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.tutor-unlink:hover { background: rgba(185, 28, 28, 0.1); color: var(--c-danger); }
.tutor-unlink:focus-visible, .tutor-remove:focus-visible, .combo-input:focus-visible {
    outline: 2px solid var(--c-accent); outline-offset: 2px;
}

/* Combobox */
.combo { position: relative; }
.combo-box { position: relative; display: flex; align-items: center; }
.combo-box i {
    position: absolute; inset-inline-start: 0.75rem; color: var(--c-subtle); font-size: 0.8rem; pointer-events: none;
}
.combo-input {
    inline-size: 100%; box-sizing: border-box; padding: 0.58rem 0.7rem; padding-inline-start: 2.1rem;
    border: 1px solid var(--c-border); border-radius: 9px; background: #fff; color: var(--c-text);
    font: inherit; font-size: 0.9rem;
}
.combo-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(101, 6, 64, 0.1); }
.combo-pop {
    position: absolute; inset-inline: 0; z-index: 30; margin-block-start: 0.3rem; padding: 0.25rem;
    min-inline-size: min(100%, 20rem); background: #fff; border: 1px solid var(--c-border);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(17, 12, 46, 0.14);
}
.combo-pop[hidden] { display: none; }
.combo-scope {
    padding: 0.3rem 0.6rem 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--c-subtle);
}
.combo-list { list-style: none; margin: 0; padding: 0; max-block-size: 15rem; overflow-y: auto; }
.combo-opt {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 8px;
    cursor: pointer; font-size: 0.88rem;
}
.combo-opt[aria-selected="true"] { background: #f8eef4; }
.combo-opt[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.combo-main { display: flex; flex-direction: column; min-inline-size: 0; flex: 1 1 auto; line-height: 1.25; }
.combo-main strong { font-size: 0.88rem; color: var(--c-text); overflow-wrap: anywhere; }
.combo-main small { font-size: 0.74rem; color: var(--c-subtle); overflow-wrap: anywhere; }
.combo-tag {
    flex: 0 0 auto; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    background: rgba(107, 114, 128, 0.14); color: var(--c-subtle); text-transform: capitalize;
}
.combo-tag.is-warn { background: rgba(180, 83, 9, 0.12); color: var(--c-warn); }
.combo-opt--switch {
    margin-block-start: 0.2rem; border-block-start: 1px solid var(--c-border); border-radius: 0 0 8px 8px;
    color: var(--c-accent); font-weight: 600;
}
.combo-opt--switch i { inline-size: 28px; text-align: center; font-size: 0.8rem; }
.combo-msg { padding: 0.5rem 0.7rem; font-size: 0.83rem; color: var(--c-subtle); }
.combo-msg:empty { display: none; }
.combo-msg.is-busy::before {
    content: ""; display: inline-block; inline-size: 0.8em; block-size: 0.8em; margin-inline-end: 0.5em;
    border: 2px solid var(--c-accent-line); border-block-start-color: var(--c-accent); border-radius: 50%;
    vertical-align: -0.1em; animation: combo-spin 0.7s linear infinite;
}
@keyframes combo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .combo-msg.is-busy::before { animation: none; } }
@media (max-width: 820px) {
    .tutor-body { inline-size: 100%; }
    .tutor-card { padding-inline-end: 1rem; padding-block-start: 2.4rem; }
    .tutor-link-pick { max-inline-size: none; }
}

/* ── Wizard step 5: bulk enrolment ─────────────────────────────────── */
.si-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.si-box, .si-online { margin: 0; max-inline-size: none; display: grid; gap: 0.6rem; align-content: start; }
.si-box { padding: 1rem; border: 1px solid var(--c-border, #e5e7eb); border-radius: 12px; }
.si-box h3, .si-online h3 { margin: 0; font-size: 1rem; }
.si-box p { margin: 0; font-size: 0.9rem; color: var(--c-muted, #6b7280); }
.si-box textarea { inline-size: 100%; box-sizing: border-box; }
.si-online { margin-block-start: 1.25rem; }
.si-none { margin: 0; color: var(--c-muted, #6b7280); }
.si-tiles {
    display: flex; gap: 0.6rem; overflow-x: auto; padding-block: 0.25rem 0.6rem;
    scroll-snap-type: x proximity;
}
.si-tile {
    flex: 0 0 150px; scroll-snap-align: start; display: grid; justify-items: center; gap: 0.2rem;
    padding: 0.75rem 0.5rem; border: 1px solid var(--c-border, #e5e7eb); border-radius: 12px;
    background: #fff; cursor: pointer; text-align: center; position: relative;
}
.si-tile input { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; }
.si-tile:has(input:checked) { border-color: #650640; background: #f8eef4; }
.si-tile-name { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.si-tile-sub { font-size: 0.75rem; color: var(--c-muted, #6b7280); overflow-wrap: anywhere; }
.si-table-wrap { overflow-x: auto; max-block-size: 24rem; margin-block-end: 1rem; }
.si-table { inline-size: 100%; border-collapse: collapse; font-size: 0.9rem; }
.si-table th, .si-table td { padding: 0.4rem 0.6rem; text-align: start; border-block-end: 1px solid var(--c-border, #e5e7eb); }
.si-badge { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; }
.si-badge--existing { background: #e7f6ec; color: #17653a; }
.si-badge--new { background: #e8f0fe; color: #1a4fa0; }
.si-badge--error { background: #fdeaea; color: #a32020; }
.si-commit { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0; max-inline-size: none; }

/* ── Rail: head, content, instructors and rewards are separate cards ──── */
.course-rail {
    display: grid;
    gap: 0.85rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    align-content: start;
}

.course-rail-head,
.course-rail-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    box-sizing: border-box;
}

.course-rail-card { padding: 0.9rem 1rem; }

.course-rail-card.course-rail-nav { padding: 0.9rem 0 0.6rem; }
.course-rail-nav > .course-rail-heading { padding-inline: 1rem; margin-block-end: 0.4rem; }

.course-rail-card > .course-rail-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid var(--c-border);
    color: var(--c-accent);
}

.course-rail-nav > .course-rail-heading { border-block-end: 0; }

.course-rail-card .rw-rail,
.course-rail-card.rw-rail { margin-block-start: 0; }
.course-rail-card .rw-list { margin-block-start: 0.75rem; }

.course-rail-card .course-rail-coords,
.course-rail-card .course-rail-tutors { margin-block-start: 0.75rem; padding-block-start: 0; border-block-start: 0; }
.course-rail-card .course-rail-coords + .course-rail-tutors { padding-block-start: 0.75rem; border-block-start: 1px solid var(--c-border); }

.course-rail-subheading {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-subtle);
}

@media (max-width: 960px) {
    .course-rail { background: var(--c-bg); padding: 0.85rem; overflow-y: auto; box-sizing: border-box; }
}

/* ── Catalogue card: labelled groups (instructors / content / rewards) ── */
.course-card .cc-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-subtle);
}
.course-card .cc-label i { color: var(--c-accent); }

/* Checkout: processing state while an order is created or captured */
.course-checkout-buttons.is-busy { opacity: 0.5; pointer-events: none; }
.course-checkout-disabled a { color: inherit; text-decoration: underline; }